/* ==========================================================================
   eSync — admin skin override
   --------------------------------------------------------------------------
   Loaded AFTER app.min.css. Nothing in the vendor theme is edited, so the
   Hyper build can be replaced wholesale and only this file needs revisiting.

   Everything is expressed as tokens. The single knob is --tenant-primary
   near the top: change that one hex and the sidebar, buttons, links, chips,
   focus rings and charts all follow via color-mix(). That is what makes
   per-tenant branding a one-column database change later on.

   Layout
     1. Brand tokens
     2. Bootstrap/Hyper token overrides (light)
     3. Dark theme tokens
     4. Shape + typography
     5. Sidebar
     6. Topbar
     7. Components (stat card, segmented control, settings nav)
     8. Tables, forms, misc
   ========================================================================== */


/* ── 1. Brand ─────────────────────────────────────────────────────────── */

:root {
    /* The one value that matters. Everything below derives from it. */
    --tenant-primary: #2563c9;

    /* Derived brand ramp. color-mix keeps these correct for any hue. */
    --brand:          var(--tenant-primary);
    --brand-hover:    color-mix(in oklab, var(--tenant-primary) 82%, #000);
    --brand-tint:     color-mix(in oklab, var(--tenant-primary) 13%, #fff);
    --brand-tint-2:   color-mix(in oklab, var(--tenant-primary)  7%, #fff);
    --brand-ring:     color-mix(in oklab, var(--tenant-primary) 28%, transparent);

    /* Neutrals carry a trace of the brand hue so greys never read as dead. */
    --surface:        #ffffff;
    --surface-sunk:   color-mix(in oklab, var(--tenant-primary)  3%, #f7f8f7);
    --hairline:       color-mix(in oklab, var(--tenant-primary)  7%, #e6eae7);
    --ink:            color-mix(in oklab, var(--tenant-primary) 12%, #131a15);
    --ink-soft:       color-mix(in oklab, var(--tenant-primary) 10%, #77857c);

    /* Sidebar is a very dark, slightly desaturated version of the brand. */
    --menu-bg:        color-mix(in oklab, var(--tenant-primary) 20%, #0b120e);
    --menu-item:      color-mix(in oklab, var(--tenant-primary) 26%, #b9c4bd);
}


/* ── 2. Hyper token overrides — light ─────────────────────────────────── */

:root {
    --tz-primary:            var(--brand);
    --tz-primary-rgb:        37, 99, 201;
    --tz-link-color:         var(--brand);
    --tz-link-hover-color:   var(--brand-hover);
    --tz-primary-bg-subtle:  var(--brand-tint);
    --tz-primary-border-subtle: color-mix(in oklab, var(--brand) 25%, #fff);

    --tz-body-bg:            var(--surface-sunk);
    --tz-body-color:         var(--ink);
    --tz-secondary-color:    var(--ink-soft);
    --tz-border-color:       var(--hairline);
    --tz-heading-color:      var(--ink);

    /* Sidebar */
    --tz-menu-bg:                var(--menu-bg);
    --tz-menu-item-color:        var(--menu-item);
    --tz-menu-item-hover-color:  #ffffff;
    --tz-menu-item-active-color: #ffffff;
    --tz-menu-item-active-bg:    var(--brand);
    --tz-menu-item-font-size:    0.86rem;
    --tz-menu-item-padding-y:    8px;
    --tz-menu-item-icon-size:    1.02rem;
    --tz-menu-item-icon-width:   30px;
    --tz-leftbar-width:          236px;

    /* Topbar */
    --tz-topbar-bg:              var(--surface);
    --tz-topbar-height:          64px;
    --tz-topbar-item-color:      var(--ink-soft);
    --tz-topbar-item-hover-color: var(--brand);
    --tz-topbar-search-bg:       var(--surface-sunk);

    /* Cards — flat, hairline, generous radius */
    --tz-card-bg:                var(--surface);
    --tz-card-border-color:      var(--hairline);
    --tz-card-border-radius:     0.7rem;
    --tz-card-box-shadow:        none;
    --tz-card-cap-bg:            transparent;
    --tz-card-spacer-x:          1.15rem;
    --tz-card-spacer-y:          1.15rem;
    --tz-theme-card-border-width: 1px;

    /* Radius scale */
    --tz-border-radius:          0.6rem;
    --tz-border-radius-sm:       0.4rem;
    --tz-border-radius-lg:       0.75rem;
    --tz-border-radius-xl:       1rem;

    /* Buttons */
    --tz-btn-border-radius:      0.5rem;
    --tz-btn-font-weight:        560;
    --tz-btn-padding-y:          0.45rem;
    --tz-btn-padding-x:          0.9rem;
    --tz-btn-focus-box-shadow:   0 0 0 3px var(--brand-ring);

    /* Focus */
    --tz-focus-ring-color:       var(--brand-ring);
    --tz-focus-ring-width:       3px;

    /* Nav pills (the Settings sub-nav) */
    --tz-nav-pills-link-active-bg:    var(--brand-tint);
    --tz-nav-pills-link-active-color: var(--brand-hover);
    --tz-nav-pills-border-radius:     0.5rem;

    /* Dropdowns */
    --tz-dropdown-border-color:   var(--hairline);
    --tz-dropdown-border-radius:  0.65rem;
    --tz-dropdown-box-shadow:     0 8px 28px rgba(16, 28, 21, .1);
    --tz-dropdown-link-hover-bg:  var(--surface-sunk);
    --tz-dropdown-link-active-bg: var(--brand-tint);
    --tz-dropdown-link-active-color: var(--brand-hover);

    /* Tables */
    --tz-table-border-color:      var(--hairline);
    --tz-table-hover-bg:          var(--surface-sunk);
}


/* ── 3. Dark theme ────────────────────────────────────────────────────── */
/* Hyper ships dark via [data-bs-theme=dark]. Without this block the sidebar
   and cards would keep light values when a user flips the toggle. */

[data-bs-theme="dark"] {
    --surface:      #191f1b;
    --surface-sunk: #111613;
    --hairline:     color-mix(in oklab, var(--tenant-primary) 10%, #2a322c);
    --ink:          #dfe6e1;
    --ink-soft:     #8d9a92;
    --menu-bg:      color-mix(in oklab, var(--tenant-primary) 12%, #080d0a);
    --menu-item:    color-mix(in oklab, var(--tenant-primary) 20%, #93a29a);

    --brand-tint:   color-mix(in oklab, var(--tenant-primary) 22%, #191f1b);
    --brand-tint-2: color-mix(in oklab, var(--tenant-primary) 12%, #191f1b);

    --tz-body-bg:         var(--surface-sunk);
    --tz-body-color:      var(--ink);
    --tz-secondary-color: var(--ink-soft);
    --tz-border-color:    var(--hairline);
    --tz-heading-color:   var(--ink);

    --tz-card-bg:           var(--surface);
    --tz-card-border-color: var(--hairline);
    --tz-topbar-bg:         var(--surface);
    --tz-topbar-search-bg:  var(--surface-sunk);

    --tz-dropdown-bg:           var(--surface);
    --tz-dropdown-link-hover-bg: var(--surface-sunk);
    --tz-dropdown-box-shadow:   0 8px 28px rgba(0, 0, 0, .45);

    --tz-table-hover-bg:  var(--surface-sunk);
}


/* ── 4. Shape + typography ────────────────────────────────────────────── */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-title-box .page-title {
    font-weight: 650;
    letter-spacing: -0.018em;
    color: var(--ink);
}

.page-title-box .breadcrumb {
    font-size: 0.78rem;
}

/* Card headers: quiet, no filled bar */
.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--hairline);
    padding: 0.95rem 1.15rem;
    font-weight: 620;
    letter-spacing: -0.005em;
}

/* Digits line up in columns wherever they appear together */
.table td, .table th,
.stat-card__value,
.text-tabular {
    font-variant-numeric: tabular-nums;
}


/* ── 5. Sidebar ───────────────────────────────────────────────────────── */

/* Inset pill rather than a full-bleed bar. This is the single most
   recognisable difference from stock Hyper. */
.side-nav .side-nav-link {
    margin: 1px 10px;
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
}

.side-nav .side-nav-item.menuitem-active > .side-nav-link,
.side-nav .side-nav-link.active {
    background-color: var(--brand);
    color: #fff;
    font-weight: 560;
}

.side-nav .side-nav-link:hover {
    background-color: color-mix(in oklab, #fff 8%, transparent);
    color: #fff;
}

.side-nav .side-nav-item.menuitem-active > .side-nav-link:hover {
    background-color: var(--brand);
}

/* Section captions: small, tracked, deliberately recessive */
.side-nav .side-nav-title {
    font-size: 0.63rem;
    letter-spacing: 0.13em;
    font-weight: 650;
    text-transform: uppercase;
    opacity: 0.55;
    padding: 16px 22px 6px;
}

/* Second-level items sit inside the same inset gutter */
.side-nav .side-nav-second-level a {
    margin: 1px 10px 1px 30px;
    border-radius: 7px;
    font-size: 0.82rem;
}

.leftside-menu {
    border-right: 0;
}


/* ── 6. Topbar ────────────────────────────────────────────────────────── */

.navbar-custom {
    border-bottom: 1px solid var(--hairline);
    box-shadow: none;
}

.navbar-custom .app-search .form-control {
    border-radius: 999px;
    border: 1px solid var(--hairline);
    background-color: var(--surface-sunk);
    font-size: 0.84rem;
}

.navbar-custom .app-search .form-control:focus {
    border-color: color-mix(in oklab, var(--brand) 40%, var(--hairline));
    box-shadow: 0 0 0 3px var(--brand-ring);
}


/* ── 7. Components ────────────────────────────────────────────────────── */

/* --- Stat card ---------------------------------------------------------
   Opt-in: add .stat-card to a .card. Needs the markup in home.blade.php. */

.stat-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.stat-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.stat-card__label {
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 620;
    color: var(--ink-soft);
    margin: 0 0 0.35rem;
    line-height: 1.3;
}

.stat-card__value {
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
    color: var(--ink);
}

.stat-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--brand-tint);
    color: var(--brand);
    font-size: 1rem;
    flex: none;
}

.stat-card__meta {
    font-size: 0.73rem;
    color: var(--ink-soft);
    margin: 0;
}

.stat-card__meta .up { color: #2c9c5e; }
.stat-card__meta .dn { color: #d64545; }

.stat-card__spark {
    height: 30px;
    margin-top: 0.35rem;
    color: var(--brand);
}

.stat-card__spark svg { display: block; width: 100%; height: 100%; }


/* --- Segmented control -------------------------------------------------
   Opt-in: .seg wrapping <button> elements. */

.seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 0.6rem;
}

.seg > button {
    border: 0;
    background: none;
    padding: 0.25rem 0.75rem;
    border-radius: 0.45rem;
    font-size: 0.78rem;
    font-weight: 560;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.seg > button:hover { color: var(--ink); }

.seg > button[aria-pressed="true"] {
    background: var(--brand);
    color: #fff;
}

.seg > button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}


/* --- Brand colour picker (Settings → Company) --------------------------
   Real radio inputs kept in the DOM and visually hidden, so keyboard
   navigation, arrow keys and form submission all behave natively. */

.brand-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.brand-swatch {
    display: block;
    cursor: pointer;
    margin: 0;
    line-height: 0;
}

/* The radio stays in the DOM for keyboard and form semantics, but is fully
   removed from view. appearance:none matters here — some themes give
   input[type=radio] a background that survives opacity tricks. */
.brand-swatch input {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.brand-swatch__chip {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
    outline: 2px solid transparent;
    outline-offset: 3px;
    transition: outline-color .15s ease, transform .12s ease;
}

.brand-swatch:hover .brand-swatch__chip { transform: scale(1.08); }

/* Checkmark, so selection is not signalled by colour alone */
.brand-swatch__chip::after {
    content: "";
    width: 11px;
    height: 6px;
    border-left: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
    border-radius: 1px;
    transform: rotate(-45deg) translate(1px, -2px) scale(.5);
    opacity: 0;
    transition: opacity .14s ease, transform .14s ease;
}

.brand-swatch input:checked ~ .brand-swatch__chip {
    outline-color: var(--ink);
}

.brand-swatch input:checked ~ .brand-swatch__chip::after {
    opacity: 1;
    transform: rotate(-45deg) translate(1px, -2px) scale(1);
}

/* Visible keyboard focus, since the input itself is off-screen */
.brand-swatch input:focus-visible ~ .brand-swatch__chip {
    outline-color: var(--brand);
    outline-width: 3px;
}


/* --- Settings sub-nav (nav-pills) -------------------------------------- */

.nav-pills .nav-link {
    border-radius: 0.5rem;
    font-size: 0.86rem;
    padding: 0.5rem 0.8rem;
    color: var(--ink-soft);
    font-weight: 520;
}

.nav-pills .nav-link:hover {
    background: var(--surface-sunk);
    color: var(--ink);
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.show.active {
    background: var(--brand-tint);
    color: var(--brand-hover);
    font-weight: 600;
}


/* ── 8. Tables, forms, misc ───────────────────────────────────────────── */

.table > :not(caption) > * > * {
    padding: 0.72rem 0.75rem;
}

.table > thead th {
    font-size: 0.66rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 620;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--hairline);
}

.form-control, .form-select {
    border-radius: 0.5rem;
    border-color: var(--hairline);
    font-size: 0.875rem;
}

.form-control:focus, .form-select:focus {
    border-color: color-mix(in oklab, var(--brand) 45%, var(--hairline));
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.badge { font-weight: 580; letter-spacing: 0.01em; }

.alert { border-radius: 0.6rem; }

/* Dropzone picks up the card treatment so uploads don't look bolted on */
.dropzone {
    border: 1.5px dashed var(--hairline) !important;
    border-radius: 0.7rem !important;
    background: var(--surface-sunk) !important;
    transition: border-color .15s ease, background-color .15s ease;
}

.dropzone:hover {
    border-color: color-mix(in oklab, var(--brand) 45%, var(--hairline)) !important;
    background: var(--brand-tint-2) !important;
}

@media (prefers-reduced-motion: reduce) {
    .side-nav .side-nav-link,
    .seg > button,
    .nav-pills .nav-link,
    .dropzone {
        transition: none;
    }
}


/* ==========================================================================
   9. SKIN VARIANT — "Sharp Pro Dashboard"
   --------------------------------------------------------------------------
   Selected UI/UX direction. Loaded last, so these token + component rules win
   the cascade over the defaults above. To try another variant, comment this
   whole block out — the base skin returns untouched. Everything still derives
   from --tenant-primary, so per-tenant branding is unaffected.

   Character: tight 6px radii, flat solid buttons, crisp 1px hairlines,
   denser tables, higher-contrast ink, compact spacing. Built for data-heavy
   admin screens.
   ========================================================================== */

:root {
    /* Higher-contrast ink so dense tables stay legible */
    --ink:            color-mix(in oklab, var(--tenant-primary) 8%, #0d130f);
    --ink-soft:       color-mix(in oklab, var(--tenant-primary) 6%, #5c6a61);
    --hairline:       color-mix(in oklab, var(--tenant-primary) 9%, #d7ddd8);

    /* Sharp corners everywhere */
    --tz-card-border-radius:     0.375rem;   /* 6px */
    --tz-border-radius:          0.375rem;
    --tz-border-radius-sm:       0.25rem;
    --tz-border-radius-lg:       0.5rem;
    --tz-border-radius-xl:       0.625rem;
    --tz-btn-border-radius:      0.25rem;
    --tz-nav-pills-border-radius:0.25rem;
    --tz-dropdown-border-radius: 0.375rem;

    /* Flat surfaces — no card shadow, tighter dropdown shadow */
    --tz-card-box-shadow:        none;
    --tz-dropdown-box-shadow:    0 4px 14px rgba(16, 28, 21, .12);

    /* Slightly stronger focus ring for keyboard-heavy admin use */
    --tz-btn-focus-box-shadow:   0 0 0 2px var(--brand-ring);
}

:root[data-bs-theme=dark] {
    --hairline:  color-mix(in oklab, var(--tenant-primary) 12%, #333b35);
    --ink:       #e7eee9;
    --ink-soft:  #97a49b;
}

/* Crisp 1px hairlines on every card + panel */
.card,
.dropdown-menu,
.modal-content {
    border: 1px solid var(--hairline) !important;
}

/* Flat, solid, sharp buttons — drop the soft pastel treatment */
.btn {
    border-radius: var(--tz-btn-border-radius);
    font-weight: 600;
    letter-spacing: -0.005em;
}
.btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
    color: #fff;
}
.btn-soft-primary {
    background-color: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-soft-primary:hover {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
    color: #fff;
}

/* Denser tables + strong header rule */
.table > :not(caption) > * > * {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.table > thead th {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    border-bottom: 2px solid var(--hairline);
    background: var(--surface-sunk);
}
.table > tbody > tr + tr > * {
    border-top: 1px solid var(--hairline);
}

/* Compact form controls to match the denser rhythm */
.form-control,
.form-select {
    border-radius: var(--tz-border-radius-sm);
    border-color: var(--hairline);
}

/* Tighter card headers */
.card-header {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    font-weight: 600;
}


/* ==========================================================================
   10. SKIN VARIANT — "Aurora Glass"
   --------------------------------------------------------------------------
   Selected tenant-area direction (2026-08). Loaded after "Sharp Pro", so its
   tokens and rules win the cascade. Comment this whole block out and Sharp
   Pro returns untouched; comment both out for the base skin.

   Character: light, airy admin. Frosted translucent chrome over an ambient
   gradient wash, generous 18px radii, pill navigation, and one signature
   accent — the AURORA GRADIENT (brand to violet) marking every primary and
   AI-related surface.

   The violet companion stays mostly violet whatever the tenant brand colour
   is, so the gradient always reads as a gradient. A brand colour that is
   already violet simply produces a subtler one.
   ========================================================================== */

:root {
    --aurora-2:      color-mix(in oklab, var(--tenant-primary) 22%, #8b5cf6);
    --aurora-grad:   linear-gradient(100deg, var(--brand) 0%, var(--aurora-2) 100%);
    --aurora-glow:   color-mix(in oklab, var(--aurora-2) 30%, transparent);

    /* The surface a hover tint is mixed onto. Dark mode swaps it, so a rule
       written as color-mix(... var(--tint-base)) stays legible in both
       themes instead of resolving to near-white on a dark page. */
    --tint-base:     #ffffff;

    /* Softer, bluer ink than the near-black of Sharp Pro */
    --ink:           color-mix(in oklab, var(--tenant-primary) 8%, #1c2540);
    --ink-soft:      color-mix(in oklab, var(--tenant-primary) 6%, #5b6685);
    --hairline:      color-mix(in oklab, var(--tenant-primary) 5%, #e2e6f3);
    --surface:       #ffffff;
    --surface-sunk:  color-mix(in oklab, var(--tenant-primary) 3%, #f4f6fc);

    /* Frosted LIGHT sidebar — Sharp Pro used near-black */
    --menu-bg:       rgba(255, 255, 255, 0.72);
    --menu-item:     color-mix(in oklab, var(--tenant-primary) 8%, #5b6685);
    --tz-menu-item-hover-color:  var(--ink);
    --tz-menu-item-active-color: #ffffff;

    /* Soft geometry — the clearest break from the 6px corners of Sharp Pro */
    --tz-card-border-radius:      1.125rem;
    --tz-border-radius:           0.75rem;
    --tz-border-radius-sm:        0.5rem;
    --tz-border-radius-lg:        1.125rem;
    --tz-border-radius-xl:        1.375rem;
    --tz-btn-border-radius:       0.75rem;
    --tz-nav-pills-border-radius: 1.375rem;
    --tz-dropdown-border-radius:  1rem;
    --tz-input-border-radius:     0.75rem;

    /* Gentle coloured elevation instead of flat */
    --tz-card-box-shadow:     0 10px 30px rgba(90, 100, 180, 0.09);
    --tz-dropdown-box-shadow: 0 14px 38px rgba(90, 100, 180, 0.18);
    --tz-body-bg:             transparent;
}


/* ── Ambient wash ─────────────────────────────────────────────────────── */

body {
    background-color: #f5f7fd;
    background-image:
        radial-gradient(58rem 40rem at 8% -8%,
            color-mix(in oklab, var(--brand) 13%, transparent) 0%, transparent 60%),
        radial-gradient(52rem 38rem at 96% 4%,
            color-mix(in oklab, var(--aurora-2) 13%, transparent) 0%, transparent 60%),
        radial-gradient(46rem 36rem at 50% 108%,
            color-mix(in oklab, var(--brand) 8%, transparent) 0%, transparent 62%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.content-page,
.wrapper > .content-page {
    background: transparent;
}


/* ── Sidebar: frosted glass, pill nav ─────────────────────────────────── */

.leftside-menu {
    background: var(--menu-bg);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border-right: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 1px 0 24px rgba(90, 100, 180, 0.06);
}

.side-nav .side-nav-link {
    margin: 3px 12px;
    border-radius: 1.375rem;
    color: var(--menu-item);
    font-weight: 500;
}

.side-nav .side-nav-link:hover {
    background-color: color-mix(in oklab, var(--brand) 9%, #ffffff);
    color: var(--ink);
}

.side-nav .side-nav-item.menuitem-active > .side-nav-link,
.side-nav .side-nav-link.active,
.side-nav .side-nav-item.menuitem-active > .side-nav-link:hover {
    background: var(--aurora-grad);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 8px 18px var(--aurora-glow);
}

/* The sidebar is light in this skin, so always show the dark-ink lockup and
   hide the white one, whatever data-menu-color the theme is set to. */
.leftside-menu .logo-light,
.logo-topbar .logo-light { display: none !important; }
.leftside-menu .logo-dark,
.logo-topbar .logo-dark  { display: block !important; }

/* Keep the topbar lockup visible when the sidebar is hidden or condensed */
html[data-sidenav-size="condensed"] .navbar-custom .logo-topbar,
html[data-layout="topnav"] .navbar-custom .logo-topbar {
    display: block !important;
}


/* ── Topbar: translucent ──────────────────────────────────────────────── */

.navbar-custom {
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 1px 20px rgba(90, 100, 180, 0.05);
}

.navbar-custom .app-search .form-control {
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.75);
}

.topbar-menu .account-user-avatar img {
    border-radius: 999px;
}


/* ── Page header ──────────────────────────────────────────────────────── */

.page-title-box {
    padding: 0.35rem 0 1.1rem;
}

.page-title-box .page-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.page-title-box .breadcrumb {
    background: transparent;
    font-size: 0.78rem;
}

.breadcrumb-item.active { color: var(--ink-soft); }


/* ── Cards: glass ─────────────────────────────────────────────────────── */

.card {
    background-color: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: var(--tz-card-box-shadow);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--hairline);
    font-weight: 650;
    color: var(--ink);
    padding: 1rem 1.25rem;
}

/* A card nested inside a card body drops its own chrome, so panels never
   stack shadow on shadow. */
.card .card {
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0.55);
}


/* ── Stat tiles: the signature of the dashboard ───────────────────────── */

.stat-card {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(160deg,
        rgba(255, 255, 255, 0.92) 40%,
        color-mix(in oklab, var(--aurora-2) 9%, #ffffff) 100%);
}

/* Gradient hairline across the top edge */
.stat-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--aurora-grad);
    opacity: 0.85;
}

.stat-card .card-body { padding: 1.35rem 1.35rem 1.15rem; }

.stat-card__value {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--brand);
}

/* Gradient numerals, but only where the browser can actually paint text
   through a background. Without the guard, an unsupporting browser renders
   transparent text on a transparent card — an invisible number. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .stat-card__value {
        background: var(--aurora-grad);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.stat-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--aurora-grad);
    color: #ffffff;
    font-size: 1.1rem;
    box-shadow: 0 8px 18px var(--aurora-glow);
}

.stat-card__label {
    letter-spacing: 0.12em;
    color: var(--ink-soft);
}

/* Accent variant: a full gradient tile for the one metric that matters */
.stat-card.stat-card--accent {
    background-image: var(--aurora-grad);
    border-color: transparent;
    box-shadow: 0 14px 32px var(--aurora-glow);
}

.stat-card.stat-card--accent::before { display: none; }

.stat-card--accent .stat-card__label,
.stat-card--accent .stat-card__meta { color: rgba(255, 255, 255, 0.82); }

.stat-card--accent .stat-card__value {
    background: none;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
}

.stat-card--accent .stat-card__icon {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

.stat-card--accent .stat-card__spark { color: #ffffff; }


/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
    font-weight: 560;
    padding-inline: 1.1rem;
}

.btn-primary,
.btn-primary:disabled {
    background: var(--aurora-grad);
    border: 0;
    box-shadow: 0 8px 18px var(--aurora-glow);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background: linear-gradient(100deg,
        var(--brand-hover) 0%,
        color-mix(in oklab, var(--aurora-2) 84%, #000) 100%) !important;
    border: 0 !important;
    box-shadow: 0 10px 22px var(--aurora-glow);
}

.btn-outline-secondary,
.btn-light {
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--hairline);
    color: var(--ink);
}

.btn-outline-secondary:hover,
.btn-light:hover {
    background: #ffffff;
    border-color: color-mix(in oklab, var(--brand) 32%, var(--hairline));
    color: var(--brand);
}


/* ── Forms ────────────────────────────────────────────────────────────── */

.form-control,
.form-select {
    border-radius: var(--tz-input-border-radius);
    border: 1px solid var(--hairline);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0.55rem 0.9rem;
}

.form-control:focus,
.form-select:focus {
    border-color: color-mix(in oklab, var(--brand) 45%, var(--hairline));
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--aurora-2) 16%, transparent);
    background-color: #ffffff;
}

.form-label {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--ink);
    margin-bottom: 0.4rem;
}

.form-text { color: var(--ink-soft); }

.input-group > .btn { border-radius: var(--tz-input-border-radius); }


/* ── Upload / dropzone panels ─────────────────────────────────────────── */

.dropzone,
.dz-clickable {
    border: 1.5px dashed color-mix(in oklab, var(--aurora-2) 32%, var(--hairline));
    border-radius: var(--tz-card-border-radius);
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.7),
        color-mix(in oklab, var(--aurora-2) 7%, #ffffff));
    transition: border-color .15s ease, background-color .15s ease;
}

.dropzone:hover,
.dz-clickable:hover {
    border-color: var(--aurora-2);
    background: color-mix(in oklab, var(--aurora-2) 9%, #ffffff);
}

.dropzone .dz-message,
.dropzone .dz-message h3,
.dropzone .dz-message span {
    color: var(--ink);
    font-weight: 650;
}


/* ── Tabs and pills ───────────────────────────────────────────────────── */

.nav-tabs {
    border-bottom: 1px solid var(--hairline);
    gap: 0.25rem;
}

.nav-tabs .nav-link {
    border: 0;
    border-radius: 999px;
    padding: 0.5rem 1.05rem;
    color: var(--ink-soft);
    font-weight: 560;
}

.nav-tabs .nav-link:hover {
    background: color-mix(in oklab, var(--brand) 8%, var(--tint-base));
    color: var(--ink);
    border: 0;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background: var(--aurora-grad);
    color: #ffffff;
    border: 0;
    box-shadow: 0 6px 14px var(--aurora-glow);
}

.nav-pills .nav-link {
    border-radius: 1.375rem;
    padding: 0.6rem 1.1rem;
    color: var(--ink-soft);
    font-weight: 540;
    cursor: pointer;
}

.nav-pills .nav-link:hover {
    background: color-mix(in oklab, var(--brand) 8%, var(--tint-base));
    color: var(--ink);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--aurora-grad);
    color: #ffffff;
    box-shadow: 0 8px 18px var(--aurora-glow);
}


/* ── Tables: airy ─────────────────────────────────────────────────────── */

.table > thead > tr > th {
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 650;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--hairline);
    background: transparent;
}

.table > :not(caption) > * > * {
    border-color: color-mix(in oklab, var(--hairline) 65%, transparent);
    padding: 0.8rem 0.75rem;
}

.table > tbody > tr:hover > * {
    background-color: color-mix(in oklab, var(--aurora-2) 5%, transparent);
}

.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.35em 0.75em;
}

.pagination-rounded .page-link,
.pagination .page-link {
    border-radius: 999px !important;
    border: 0;
    color: var(--ink-soft);
    margin: 0 2px;
}

.pagination .page-item.active .page-link {
    background: var(--aurora-grad);
    color: #ffffff;
    box-shadow: 0 6px 14px var(--aurora-glow);
}


/* ── Alerts: glass with a gradient edge ───────────────────────────────── */

.alert {
    border: 1px solid var(--hairline);
    border-radius: var(--tz-border-radius);
    background: rgba(255, 255, 255, 0.75);
    color: var(--ink);
    position: relative;
    overflow: hidden;
    padding-left: 1.1rem;
}

.alert::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
}

.alert-success::before { background: linear-gradient(180deg, #2fbf7e, #1f9d6b); }
.alert-danger::before  { background: linear-gradient(180deg, #f2647c, #d64545); }
.alert-warning::before { background: linear-gradient(180deg, #f5b955, #d99320); }
.alert-info::before,
.alert-primary::before { background: var(--aurora-grad); }


/* ── Segmented control ────────────────────────────────────────────────── */

.seg {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 3px;
}

.seg button {
    border-radius: 999px;
    font-weight: 560;
    color: var(--ink-soft);
}

.seg button[aria-pressed="true"] {
    background: var(--aurora-grad);
    color: #ffffff;
    box-shadow: 0 5px 12px var(--aurora-glow);
}


/* ── Auth pages: floating glass card ──────────────────────────────────── */

body.authentication-bg {
    background-color: #f2f5fd;
    background-image:
        radial-gradient(52rem 40rem at 12% -6%,
            color-mix(in oklab, var(--brand) 22%, transparent) 0%, transparent 62%),
        radial-gradient(48rem 38rem at 88% 6%,
            color-mix(in oklab, var(--aurora-2) 22%, transparent) 0%, transparent 62%),
        radial-gradient(44rem 34rem at 50% 106%,
            color-mix(in oklab, var(--brand) 14%, transparent) 0%, transparent 64%);
    background-attachment: fixed;
}

.account-pages .card {
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 28px 64px rgba(70, 80, 160, 0.18);
    position: relative;
    overflow: hidden;
}

/* Gradient edge along the top of the auth card */
.account-pages .card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--aurora-grad);
}

.account-pages .auth-brand { padding-bottom: 0.25rem !important; }

.account-pages h4 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.account-pages .btn-primary {
    width: 100%;
    padding-block: 0.65rem;
    font-size: 0.95rem;
}


/* ── Dark app theme: aurora night ─────────────────────────────────────── */

html[data-bs-theme="dark"] {
    /* Slightly lighter than the card fill, so a tint mixed onto it reads as
       a raised pill rather than a hole. */
    --tint-base:    #232a48;
    --ink:          #e6ecfb;
    --ink-soft:     #98a3c4;
    --hairline:     rgba(130, 142, 190, 0.20);
    --menu-bg:      rgba(20, 25, 46, 0.72);
    --menu-item:    #98a3c4;
}

html[data-bs-theme="dark"] body {
    background-color: #0e1222;
    background-image:
        radial-gradient(58rem 40rem at 8% -8%,
            color-mix(in oklab, var(--brand) 30%, transparent) 0%, transparent 60%),
        radial-gradient(52rem 38rem at 96% 4%,
            color-mix(in oklab, var(--aurora-2) 28%, transparent) 0%, transparent 60%);
}

html[data-bs-theme="dark"] .leftside-menu {
    border-right-color: rgba(130, 142, 190, 0.18);
    box-shadow: none;
}

html[data-bs-theme="dark"] .side-nav .side-nav-link:hover {
    background-color: rgba(130, 142, 190, 0.14);
    color: #ffffff;
}

/* Dark mode flips the lockup back to the white variant */
html[data-bs-theme="dark"] .leftside-menu .logo-light,
html[data-bs-theme="dark"] .logo-topbar .logo-light { display: block !important; }
html[data-bs-theme="dark"] .leftside-menu .logo-dark,
html[data-bs-theme="dark"] .logo-topbar .logo-dark  { display: none !important; }

html[data-bs-theme="dark"] .navbar-custom {
    background: rgba(20, 25, 46, 0.66);
    border-bottom-color: rgba(130, 142, 190, 0.18);
}

html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .account-pages .card {
    background-color: rgba(24, 30, 54, 0.82);
    border-color: rgba(130, 142, 190, 0.18);
}

html[data-bs-theme="dark"] .stat-card {
    background-image: linear-gradient(160deg,
        rgba(24, 30, 54, 0.9) 40%,
        color-mix(in oklab, var(--aurora-2) 18%, rgba(24, 30, 54, 0.9)) 100%);
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .btn-outline-secondary,
html[data-bs-theme="dark"] .btn-light {
    background-color: rgba(16, 21, 40, 0.7);
    border-color: rgba(130, 142, 190, 0.22);
    color: var(--ink);
}

html[data-bs-theme="dark"] .alert {
    background: rgba(24, 30, 54, 0.8);
    border-color: rgba(130, 142, 190, 0.18);
}

html[data-bs-theme="dark"] .dropzone,
html[data-bs-theme="dark"] .dz-clickable {
    background: rgba(24, 30, 54, 0.6);
    border-color: rgba(139, 92, 246, 0.35);
}


/* ── Connect hero (dashboard, before Lightspeed is linked) ───────────── */

.connect-hero {
    background: var(--aurora-grad);
    border: 0;
    box-shadow: 0 20px 44px var(--aurora-glow);
    position: relative;
    overflow: hidden;
}

/* Soft light bloom so the flat gradient gains some depth */
.connect-hero::after {
    content: "";
    position: absolute;
    inset: -40% -10% auto auto;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 62%);
    pointer-events: none;
}

.connect-hero .card-body { position: relative; z-index: 1; }

.connect-hero .btn-light {
    background: #ffffff;
    border: 0;
    color: var(--brand);
    font-weight: 650;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.connect-hero .btn-light:hover {
    background: #ffffff;
    color: var(--brand-hover);
}


/* ── Late overrides ───────────────────────────────────────────────────── */
/*
   Two things outrank the rules above and need !important to beat, not
   sloppiness:

   1. Bootstrap utility classes (.border, .rounded) are themselves declared
      !important, and the upload panels carry them in markup.
   2. Page-level @section('head') stylesheets (dropzone.css, select2.css)
      are emitted AFTER this file, so plain rules lose the cascade.

   Keep this block last, and keep it small.
*/

.dropzone,
.dropzone.border,
.dz-clickable {
    border: 1.5px dashed color-mix(in oklab, var(--aurora-2) 34%, var(--hairline)) !important;
    border-radius: var(--tz-card-border-radius) !important;
    background: linear-gradient(160deg,
        rgba(255, 255, 255, 0.7),
        color-mix(in oklab, var(--aurora-2) 8%, #ffffff)) !important;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropzone:hover,
.dropzone.border:hover {
    border-color: var(--aurora-2) !important;
    background: color-mix(in oklab, var(--aurora-2) 10%, #ffffff) !important;
}

.dropzone .dz-message { margin: 0; }

.dropzone .dz-message h3 {
    font-size: 1rem;
    font-weight: 650;
    color: var(--ink);
    margin: 0.5rem 0 0;
}

.dropzone .dz-message i {
    font-size: 1.6rem;
    color: var(--aurora-2);
}

/* select2 (Product of the Day picker) inherits the form-control look */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--tz-input-border-radius) !important;
    border: 1px solid var(--hairline) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    min-height: 40px;
    padding: 3px 6px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--aurora-grad) !important;
}

.select2-dropdown {
    border-radius: var(--tz-border-radius) !important;
    border-color: var(--hairline) !important;
}

/* DataTables chrome */
.dataTables_wrapper .dt-buttons .btn {
    border-radius: var(--tz-btn-border-radius) !important;
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    border-radius: var(--tz-input-border-radius) !important;
    border: 1px solid var(--hairline) !important;
}

html[data-bs-theme="dark"] .dropzone,
html[data-bs-theme="dark"] .dropzone.border,
html[data-bs-theme="dark"] .dz-clickable {
    background: rgba(24, 30, 54, 0.6) !important;
    border-color: rgba(139, 92, 246, 0.38) !important;
}

html[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
    background: rgba(16, 21, 40, 0.7) !important;
    border-color: rgba(130, 142, 190, 0.22) !important;
}

/* Topbar lockup shows whenever the sidebar is not on screen (any Hyper
   sidenav size that hides or shrinks it). */
html[data-sidenav-size="full"] .navbar-custom .logo-topbar,
html[data-sidenav-size="fullscreen"] .navbar-custom .logo-topbar,
html[data-sidenav-size="compact"] .navbar-custom .logo-topbar {
    display: block !important;
}


/* ── Stat tile alignment ──────────────────────────────────────────────── */
/*
   The tiles sit in a flex column (.col > .card.flex-fill), so the card
   stretches to the tallest in the row. The body then distributes its own
   content: the meta line and sparkline settle against the bottom edge, so a
   tile carrying a sparkline lines up with one that does not.
*/

.stat-card.flex-fill { margin-bottom: 1.5rem; }

.stat-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 100%;
}

.stat-card__meta { margin-top: auto; }

.stat-card__spark {
    margin-top: 0.5rem;
    margin-bottom: 0;
}