/* ==========================================================================
   AjonTec — Proprietary Software (https://ajontec.online). Property of AjonTec.
   --------------------------------------------------------------------------
   Panel design layer.

   Applied on top of the stock template so the whole product reads as AjonTec
   rather than the theme it started from, without rewriting ~400 Blade files.

   Deliberately restricted to VISUAL properties — colour, radius, shadow, border,
   font weight, letter-spacing and padding inside components. It does not touch
   display, position, float, width, height or flex/grid definitions, so it can
   restyle pages that cannot be visually verified without breaking their layout.
   ========================================================================== */

:root {
    --ajt-brand:        #1e3a8a;   /* sampled from the AjonTec logo */
    --ajt-brand-dark:   #172e6d;
    --ajt-brand-mid:    #3b5bd0;
    --ajt-brand-soft:   #eef2ff;
    --ajt-brand-line:   #dbe4ff;

    --ajt-ink:          #101117;
    --ajt-ink-soft:     #3b4351;
    --ajt-muted:        #6b7480;
    --ajt-line:         #e3e8f0;
    --ajt-bg:           #f6f8fc;

    --ajt-radius:       14px;
    --ajt-radius-sm:    10px;
    --ajt-shadow:       0 1px 2px rgba(16,17,23,.04), 0 8px 24px rgba(16,17,23,.06);
    --ajt-shadow-hover: 0 2px 4px rgba(16,17,23,.05), 0 14px 34px rgba(16,17,23,.10);
}

/* ---------------------------------------------------------------- typography */

body {
    color: var(--ajt-ink-soft);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .page-title {
    color: var(--ajt-ink);
    font-weight: 700;
    letter-spacing: -.011em;
}

.text-muted, .text-secondary { color: var(--ajt-muted) !important; }

/* small caps table headers read as deliberate rather than default */
.table > thead th,
.table-light > tr > th,
thead.table-light th {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ajt-muted);
    background: var(--ajt-bg);
    border-bottom: 1px solid var(--ajt-line);
}

/* -------------------------------------------------------------------- cards */

.card {
    border: 1px solid var(--ajt-line);
    border-radius: var(--ajt-radius);
    box-shadow: var(--ajt-shadow);
}

.card .card-header {
    border-bottom: 1px solid var(--ajt-line);
    background: transparent;
    font-weight: 700;
    color: var(--ajt-ink);
}

.card .card-footer { border-top: 1px solid var(--ajt-line); background: transparent; }

/* ------------------------------------------------------------------ buttons */

.btn {
    border-radius: var(--ajt-radius-sm);
    font-weight: 600;
    letter-spacing: .005em;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    background-color: var(--ajt-brand);
    border-color: var(--ajt-brand);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ajt-brand-dark);
    border-color: var(--ajt-brand-dark);
    box-shadow: 0 6px 18px rgba(30,58,138,.22);
}

.btn-outline-primary { color: var(--ajt-brand); border-color: var(--ajt-brand-line); }
.btn-outline-primary:hover {
    background-color: var(--ajt-brand);
    border-color: var(--ajt-brand);
    color: #fff;
}

.btn-link { color: var(--ajt-brand); }

/* --------------------------------------------------------------------- forms */

.form-control,
.form-select {
    border-radius: var(--ajt-radius-sm);
    border-color: var(--ajt-line);
    color: var(--ajt-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ajt-brand);
    box-shadow: 0 0 0 3px rgba(30,58,138,.12);
}

.form-control::placeholder { color: #a3abb8; }

.form-label {
    font-weight: 600;
    color: var(--ajt-ink);
    font-size: .875rem;
}

.form-hint, .form-text { color: var(--ajt-muted); font-size: .8rem; }

.input-group-text {
    background: var(--ajt-bg);
    border-color: var(--ajt-line);
    color: var(--ajt-muted);
}

.form-check-input:checked {
    background-color: var(--ajt-brand);
    border-color: var(--ajt-brand);
}

/* -------------------------------------------------------------------- badges */

.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .015em;
    padding: .34em .68em;
}

.badge.bg-primary { background-color: var(--ajt-brand) !important; }

/* ------------------------------------------------------------------- tables */

.table > tbody > tr { border-color: var(--ajt-line); }
.table > tbody > tr:hover > * { background-color: var(--ajt-brand-soft); }
.table-bordered > :not(caption) > * > * { border-color: var(--ajt-line); }

/* ------------------------------------------------------------ nav and tabs */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--ajt-brand);
    border-radius: var(--ajt-radius-sm);
}

.nav-link { font-weight: 600; }

.page-item.active .page-link {
    background-color: var(--ajt-brand);
    border-color: var(--ajt-brand);
}
.page-link { color: var(--ajt-brand); }

/* ------------------------------------------------------------------- alerts */

.alert { border-radius: var(--ajt-radius); border-width: 1px; }

/* ------------------------------------------------------------------- modals */

.modal-content { border-radius: var(--ajt-radius); border: 1px solid var(--ajt-line); }
.modal-header { border-bottom: 1px solid var(--ajt-line); }
.modal-footer { border-top: 1px solid var(--ajt-line); }
.modal-title { font-weight: 700; color: var(--ajt-ink); }

/* ------------------------------------------------------------------ dropdown */

.dropdown-menu {
    border-radius: var(--ajt-radius-sm);
    border: 1px solid var(--ajt-line);
    box-shadow: var(--ajt-shadow);
}
.dropdown-item.active,
.dropdown-item:active { background-color: var(--ajt-brand); }

/* ----------------------------------------------------------------- progress */

.progress { border-radius: 999px; background-color: var(--ajt-brand-soft); }
.progress-bar { background-color: var(--ajt-brand); }

/* -------------------------------------------------------------- admin chrome */

/* The admin sidebar keeps its dark treatment but picks up the brand accent. */
.navbar-vertical.navbar-dark .nav-link.active,
.navbar-vertical .nav-item.active > .nav-link {
    color: #fff;
    box-shadow: inset 3px 0 0 var(--ajt-brand-mid);
}

/* ---------------------------------------------------------------- utilities */

.text-primary { color: var(--ajt-brand) !important; }
.bg-primary   { background-color: var(--ajt-brand) !important; }
.border-primary { border-color: var(--ajt-brand) !important; }
a { color: var(--ajt-brand); }
a:hover { color: var(--ajt-brand-dark); }

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    .btn, .card, .form-control, .form-select { transition: none; }
    .btn:active { transform: none; }
}

/* ==========================================================================
   Dark mode
   --------------------------------------------------------------------------
   Driven by data-bs-theme="dark" on <html>, which is what Bootstrap 5.3 and the
   Tabler base already understand — so the stock components follow along instead
   of needing to be restyled one by one.

   The palette is not the light one inverted. Backgrounds are a cool near-black
   that keeps the brand blue readable, and the brand itself lifts to a lighter
   tint because #1e3a8a is too dark to sit on a dark surface.
   ========================================================================== */

[data-bs-theme="dark"] {
    --ajt-brand:        #6f8ce0;   /* lifted so it stays legible on dark */
    --ajt-brand-dark:   #5875cb;
    --ajt-brand-mid:    #8aa3e8;
    --ajt-brand-soft:   #1b2340;
    --ajt-brand-line:   #2b3350;

    --ajt-ink:          #eef1f6;
    --ajt-ink-soft:     #c3cad6;
    --ajt-muted:        #8c95a4;
    --ajt-line:         #262b36;
    --ajt-bg:           #12151c;

    --ajt-shadow:       0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.32);
    --ajt-shadow-hover: 0 2px 4px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.45);

    --ajt-surface:      #171b24;
    --ajt-surface-2:    #1d222d;

    color-scheme: dark;
}

[data-bs-theme="dark"] body {
    background-color: var(--ajt-bg);
    color: var(--ajt-ink-soft);
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--ajt-surface);
    border-color: var(--ajt-line);
    color: var(--ajt-ink-soft);
}

[data-bs-theme="dark"] .table { --bs-table-color: var(--ajt-ink-soft); }
[data-bs-theme="dark"] .table > thead th,
[data-bs-theme="dark"] .table-light > tr > th,
[data-bs-theme="dark"] thead.table-light th {
    background-color: var(--ajt-surface-2);
    color: var(--ajt-muted);
    border-bottom-color: var(--ajt-line);
}
[data-bs-theme="dark"] .table > tbody > tr:hover > * { background-color: var(--ajt-brand-soft); }
[data-bs-theme="dark"] .table-bordered > :not(caption) > * > * { border-color: var(--ajt-line); }

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--ajt-surface-2);
    border-color: var(--ajt-line);
    color: var(--ajt-ink);
}
[data-bs-theme="dark"] .form-control::placeholder { color: #6d7686; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--ajt-surface-2);
    border-color: var(--ajt-brand);
    box-shadow: 0 0 0 3px rgba(111,140,224,.18);
}
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--ajt-surface-2);
    border-color: var(--ajt-line);
    color: var(--ajt-muted);
}

[data-bs-theme="dark"] .btn-primary { background-color: var(--ajt-brand); border-color: var(--ajt-brand); color: #0d1017; }
[data-bs-theme="dark"] .btn-primary:hover { background-color: var(--ajt-brand-dark); border-color: var(--ajt-brand-dark); }
[data-bs-theme="dark"] .btn-outline-secondary { color: var(--ajt-ink-soft); border-color: var(--ajt-line); }
[data-bs-theme="dark"] .btn-light { background-color: var(--ajt-surface-2); border-color: var(--ajt-line); color: var(--ajt-ink); }

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer,
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer { border-color: var(--ajt-line); }

[data-bs-theme="dark"] .page-link { background-color: var(--ajt-surface); border-color: var(--ajt-line); color: var(--ajt-brand); }
[data-bs-theme="dark"] .progress { background-color: var(--ajt-surface-2); }
[data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end { border-color: var(--ajt-line) !important; }

/* The header chips built for this panel need their own dark treatment. */
[data-bs-theme="dark"] .ajt-wallet-card,
[data-bs-theme="dark"] .ajt-cart-btn,
[data-bs-theme="dark"] .ajt-pin {
    background-color: var(--ajt-surface);
    border-color: var(--ajt-line);
    color: var(--ajt-ink);
}
[data-bs-theme="dark"] .ajt-wallet-value,
[data-bs-theme="dark"] .ajt-pin-value { color: var(--ajt-ink); }
[data-bs-theme="dark"] .ajt-cart-btn.is-filled { background-color: var(--ajt-brand-soft); color: var(--ajt-brand-mid); border-color: var(--ajt-brand-soft); }

/* Anything with a hard-coded white background would glow in dark mode. */
[data-bs-theme="dark"] .bg-white { background-color: var(--ajt-surface) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--ajt-ink) !important; }

/* The theme toggle itself */
.ajt-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px;
    border: 1px solid var(--ajt-line); background: transparent;
    color: var(--ajt-muted); cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.ajt-theme-toggle:hover { color: var(--ajt-brand); border-color: var(--ajt-brand); }
.ajt-theme-toggle .ajt-icon-dark { display: none; }
[data-bs-theme="dark"] .ajt-theme-toggle .ajt-icon-dark { display: inline; }
[data-bs-theme="dark"] .ajt-theme-toggle .ajt-icon-light { display: none; }

/* The admin top bar is hard-coded bg-white in the template. */
[data-bs-theme="dark"] .navbar-top.bg-white {
    background-color: var(--ajt-surface) !important;
    border-color: var(--ajt-line) !important;
}
[data-bs-theme="dark"] .navbar-top .btn-tertiary { color: var(--ajt-ink-soft); }