/* ==========================================================================
   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);

    /* Semantic status colours — separate from the brand accent, so "matched"
       reads as good regardless of the tenant's chosen brand hue. */
    --ok:             #2c9c5e;
    --warn:           #b47714;
    --danger:         #d64545;

    /* 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;
    /* Slightly lifted for contrast on the dark ground. */
    --ok:           #5cbb84;
    --warn:         #d3a44e;
    --danger:       #e07a7a;
    --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;
}


/* --- Inline table editing ----------------------------------------------
   Editable cells in a listing. Styled to read as editable without turning the
   table into a wall of input boxes: quiet until focused. */

.inline-input {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    padding: 3px 6px;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    transition: border-color .12s ease, background-color .12s ease;
}

.inline-input:hover {
    border-color: var(--hairline);
    background: var(--surface);
}

.inline-input:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--brand-ring);
}

.inline-input:disabled { opacity: .5; }

/* Brief confirmation, so a silent AJAX save is still visibly a save. */
.inline-input.inline-saved {
    border-color: var(--brand);
    background: var(--brand-tint);
}

.inline-input.inline-error {
    border-color: #d64545;
    background: #fbe7e7;
}

.inline-cell { white-space: nowrap; }


/* --- 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;
    }
}