/* ==========================================================================
   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: #4a8f3d;

    /* 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:        74, 143, 61;
    --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. DARK MODE — BORDER CONTRAST
   --------------------------------------------------------------------------
   The dark palette's hairline (#333b35) sat too close to the card surface
   (#191f1b): card edges, .border-* dividers and — worst of all — input
   outlines effectively disappeared.

   Two tiers now, because a field's edge is an affordance while a divider is
   decoration, and they should not share one value:

     --hairline      layout: card edges, table rules, .border-* utilities
     --field-border  form controls, aiming at the 3:1 non-text contrast
                     ratio WCAG 2.1 asks of UI component boundaries

   Light mode is deliberately untouched.
   ========================================================================== */

:root[data-bs-theme=dark] {
    /* Measured against --surface #191f1b:
         old #333b35 = 1.45:1  (invisible)
         --hairline  = 1.97:1  (present, still subordinate)
         --field-border = 3.24:1 (clears the 3:1 UI-boundary minimum)
       The field fill below is only ~1.1:1 against the card, so the border —
       not the fill — is what makes an input findable. Hence the wide gap. */
    --hairline:     color-mix(in oklab, var(--tenant-primary) 10%, #454f48);
    --field-border: color-mix(in oklab, var(--tenant-primary) 10%, #63706a);
}

/* Inputs read as wells: sunk fill + a distinctly brighter edge. The fill is
   darker than the card, so fields stay legible on the body background too. */
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select,
[data-bs-theme=dark] .input-group-text,
[data-bs-theme=dark] .dataTables_wrapper input[type="search"],
[data-bs-theme=dark] .dataTables_wrapper select {
    background-color: var(--surface-sunk);
    border-color: var(--field-border);
    color: var(--ink);
}

[data-bs-theme=dark] .form-control::placeholder {
    color: color-mix(in oklab, var(--ink-soft) 75%, transparent);
}

[data-bs-theme=dark] .form-control:hover:not(:disabled):not([readonly]),
[data-bs-theme=dark] .form-select:hover:not(:disabled) {
    border-color: color-mix(in oklab, var(--brand) 25%, var(--field-border));
}

[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
    background-color: var(--surface-sunk);
    border-color: color-mix(in oklab, var(--brand) 60%, var(--field-border));
    box-shadow: 0 0 0 3px var(--brand-ring);
    color: var(--ink);
}

/* Disabled fields drop to the layout hairline — visibly inert, not broken */
[data-bs-theme=dark] .form-control:disabled,
[data-bs-theme=dark] .form-control[readonly],
[data-bs-theme=dark] .form-select:disabled {
    background-color: color-mix(in oklab, var(--surface) 70%, var(--surface-sunk));
    border-color: var(--hairline);
    color: var(--ink-soft);
}

/* Checkboxes and radios carry the same edge as text fields */
[data-bs-theme=dark] .form-check-input {
    background-color: var(--surface-sunk);
    border-color: var(--field-border);
}

[data-bs-theme=dark] .form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

[data-bs-theme=dark] .form-check-input:focus {
    border-color: color-mix(in oklab, var(--brand) 60%, var(--field-border));
    box-shadow: 0 0 0 3px var(--brand-ring);
}

/* Outline buttons were fading into the surface for the same reason */
[data-bs-theme=dark] .btn-outline-secondary,
[data-bs-theme=dark] .btn-light {
    border-color: var(--field-border);
    color: var(--ink);
}

[data-bs-theme=dark] .btn-outline-secondary:hover,
[data-bs-theme=dark] .btn-light:hover {
    background-color: var(--surface-sunk);
    border-color: color-mix(in oklab, var(--brand) 35%, var(--field-border));
    color: var(--ink);
}

/* Section rules: make the structural lines explicit rather than relying on
   the utility classes alone resolving to a strong enough colour */
[data-bs-theme=dark] .card,
[data-bs-theme=dark] .dropdown-menu,
[data-bs-theme=dark] .modal-content {
    border-color: var(--hairline) !important;
}

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

[data-bs-theme=dark] .border,
[data-bs-theme=dark] .border-top,
[data-bs-theme=dark] .border-end,
[data-bs-theme=dark] .border-bottom,
[data-bs-theme=dark] .border-start {
    border-color: var(--hairline) !important;
}

[data-bs-theme=dark] hr {
    border-color: var(--hairline);
    opacity: 1;
}

[data-bs-theme=dark] .table > thead th,
[data-bs-theme=dark] .table > tbody > tr + tr > *,
[data-bs-theme=dark] .table > :not(caption) > * > * {
    border-color: var(--hairline);
}

/* Dropzone edge follows the field tier — it is an input target */
[data-bs-theme=dark] .dropzone {
    border-color: var(--field-border) !important;
}