/* ─────────────────────────────────────────────────────────────────────────────
   handl. DSM  —  Design System
   Brand tokens, layout, components, page-specific utilities
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #0F172A;
    background: #F8FAFC;
    -webkit-font-smoothing: antialiased;
    /* Offset content below the fixed nav with padding on <body>, NOT a margin-top on
       .hl-main. A first-child top margin collapses through <body> all the way to <html>,
       where it's added to the document scroll height — giving every fill-the-viewport page
       a phantom nav-height of vertical scroll. Padding can't collapse, so this removes it. */
    padding-top: var(--nav-height);
}
input, select, textarea, button { font-family: inherit; font-size: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root {
    --navy:          #0F172A;
    --navy-light:    #1E293B;
    --accent:        #FFDD00;
    --accent-hover:  #E5C700;
    --blue:          #0F4C81;
    --blue-light:    #E8F0F8;
    --green:         #059669;
    --green-light:   #ECFDF5;
    --amber:         #D97706;
    --amber-light:   #FFFBEB;
    --red:           #DC2626;
    --red-light:     #FEF2F2;
    --grey:          #64748B;
    --grey-light:    #F1F5F9;
    --surface:       #FFFFFF;
    --surface-alt:   #F8FAFC;
    --border:        #E2E8F0;
    --border-light:  #F1F5F9;
    --text-primary:  #0F172A;
    --text-secondary:#475569;
    --text-muted:    #94A3B8;
    --radius-sm:     6px;
    --radius:        8px;
    --radius-lg:     12px;
    --radius-xl:     16px;
    --shadow-sm:     0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md:     0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
    --shadow-lg:     0 12px 32px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.05);
    --nav-height:    58px;
}

/* ── Navigation ─────────────────────────────────────────────────────────────── */
.hl-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-height);
    background: var(--navy);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 32px;
    z-index: 100;
    border-bottom: 1px solid var(--navy-light);
}

.hl-nav__brand {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.hl-nav__mark {
    width: 30px;
    height: 30px;
    background: var(--accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: var(--navy);
    line-height: 1;
}

.hl-nav__name {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #FFFFFF;
    letter-spacing: -0.3px;
}
.hl-nav__dot { color: var(--accent); }

.hl-nav__links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.hl-nav__link {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: #94A3B8;
    transition: color .15s, background .15s;
}
.hl-nav__link:hover  { color: #FFFFFF; background: rgba(255,255,255,.06); }
.hl-nav__link.is-active { color: #FFFFFF; background: rgba(255,255,255,.10); }

/* ── Admin nav dropdown (MD) ─────────────────────────────────────────────────── */
.hl-nav__admin { position: relative; }
.hl-nav__admin-toggle { background: none; border: none; cursor: pointer; font-family: inherit; }
.hl-nav__admin-menu {
    position: absolute; top: 36px; left: 0; min-width: 210px; z-index: 200;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: 6px;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    /* 11 Sep (Shaun: "hides too quick after you hover over admin then try go down"):
       closing waits .3s so the pointer can cross to the panel; opening is instant */
    transition: opacity .15s .3s, transform .15s .3s, visibility 0s .45s;
    /*  CLOSED MENUS MUST NOT BE HOVERABLE (Wayne, 10 Sep 2026 — reported on
        Campaigns/Detail: "I hover over my dropdown and the admin header dropdown
        comes up").

        This is hidden with opacity + visibility, never display:none. On its own
        that is safe — a visibility:hidden subtree is not hit-testable. The MEGA
        variant below breaks it: it sets `visibility: visible` on every
        .hl-nav__admin-flyout so the columns show without a second-level hover.
        visibility is INHERITED and a child may un-hide itself; opacity cannot be
        overridden that way. So while the mega menu is closed its flyouts are
        visibility:visible and painted at zero alpha — an INVISIBLE, HOVERABLE
        block as wide as all the columns, hanging below a position:fixed nav over
        the top-right of every page. Hovering it hovers a descendant of
        .hl-nav__admin, :hover fires, and the menu appears with the pointer
        nowhere near the nav. Worst on a scrolled page, where the page header
        sits directly under it.

        pointer-events, not a change to the mega rules, so the flyouts keep
        rendering as columns exactly as intended. Same pattern .drawer-overlay
        already uses in this file. */
    pointer-events: none;
}
/* invisible bridge over the ~8px gap between the toggle and the panel — the pointer
   never leaves .hl-nav__admin while crossing, so :hover holds (only live while open) */
.hl-nav__admin-menu::before {
    content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
/*  pointer-events back on when it is genuinely open, so the mouse can travel from
    the toggle into the menu and keep :hover alive. Opening still comes from
    hovering the toggle itself, or .is-open from the nav script — neither is
    affected by the rule above. */
.hl-nav__admin:hover .hl-nav__admin-menu,
.hl-nav__admin.is-open .hl-nav__admin-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition-delay: 0s;
    /*  Merge: master's delay reset plus this branch's pointer-events. The closed rule
        above sets pointer-events:none, so without this the menu would open and then be
        unclickable. */
    pointer-events: auto;
}
.hl-nav__admin-item {
    display: block; padding: 8px 12px; border-radius: var(--radius-sm);
    font-size: 13px; color: var(--text-primary); text-decoration: none; white-space: nowrap;
}
.hl-nav__admin-item:hover { background: var(--surface-alt); }

/* ── Admin flyout groups (hover a section → its items fly out to the right) ── */
.hl-nav__admin-group { position: relative; }
.hl-nav__admin-group-label {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 8px 12px; border-radius: var(--radius-sm); cursor: default;
    font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap;
}
.hl-nav__admin-group-label::after {
    content: '›'; font-size: 14px; font-weight: 700; color: var(--text-muted);
}
.hl-nav__admin-group:hover > .hl-nav__admin-group-label { background: var(--surface-alt); }
.hl-nav__admin-flyout {
    position: absolute; top: -6px; left: 100%; min-width: 220px; z-index: 210;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(15,23,42,.18); padding: 6px; margin-left: 2px;
    opacity: 0; visibility: hidden; transform: translateX(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.hl-nav__admin-group:hover > .hl-nav__admin-flyout {
    opacity: 1; visibility: visible; transform: translateX(0);
}

/* ── Admin MEGA-MENU (10 Sep, Shaun: nested flyouts got "hacky whacky") ────────
   Same markup; add .hl-nav__admin-menu--mega to the menu and every group becomes
   a column with its items always visible — no second-level hover. Anchored to
   the right edge because Admin sits at the right end of the nav.               */
.hl-nav__admin-menu--mega {
    left: auto; right: 0; min-width: 0;
    display: flex; align-items: flex-start; gap: 4px;
    padding: 12px 14px 14px;
}
.hl-nav__admin-menu--mega .hl-nav__admin-group { position: static; min-width: 176px; }
.hl-nav__admin-menu--mega .hl-nav__admin-group + .hl-nav__admin-group { border-left: 1px solid var(--border-light); padding-left: 4px; }
.hl-nav__admin-menu--mega .hl-nav__admin-group-label {
    padding: 4px 12px 6px; cursor: default;
    font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.hl-nav__admin-menu--mega .hl-nav__admin-group-label::after { content: none; }
.hl-nav__admin-menu--mega .hl-nav__admin-group:hover > .hl-nav__admin-group-label { background: none; }
.hl-nav__admin-menu--mega .hl-nav__admin-flyout {
    position: static; min-width: 0; margin: 0; padding: 0; border: none; box-shadow: none; background: none;
    /* visibility must INHERIT (not 'visible'): a visible child inside the hidden panel
       still catches the mouse, so hovering the blank area under the nav opened Admin (11 Sep) */
    opacity: 1; visibility: inherit; transform: none; transition: none;
}
/* 11 Sep: the earlier pointer-events:none guard is gone — visibility:hidden already
   blocks the mouse, and the guard killed the bridge/close-delay above the instant the
   pointer left the toggle (the "disappears when you go down" complaint). */
.hl-nav__admin-menu--mega .hl-nav__admin-item { padding: 7px 12px; }

.hl-nav__user {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.hl-nav__username { font-size: 13px; color: #94A3B8; }

/* ── Main content area ──────────────────────────────────────────────────────── */
.hl-main {
    /* nav offset now comes from body's padding-top (a margin here collapses to <html>
       and creates a phantom nav-height of page scroll). */
    min-height: calc(100vh - var(--nav-height));
}

/* ── Page header ────────────────────────────────────────────────────────────── */
.hl-page-header {
    padding: 28px 32px 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.hl-page-header__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 24px;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}
.hl-page-header__sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ── Recent jobs dropdown ───────────────────────────────────────────────────── */
.ce-recent-wrap {
    position: relative;
}
.ce-recent-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 280px;
    z-index: 200;
    padding-top: 6px;   /* visual gap lives here — mouse stays inside the wrapper */
}
.ce-recent-wrap:hover .ce-recent-dropdown { display: block; }
.ce-recent-item {
    display: block;
    padding: 10px 12px;
    border-radius: calc(var(--radius) - 2px);
    text-decoration: none;
    transition: background .1s;
    overflow: hidden;
}
.ce-recent-item:hover { background: var(--surface-alt); }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
/* Global safety net (client test round 3, item 9 — "button still not fully
   clickable" reported a THIRD time; 14 Jul fixed .hl-btn specifically, and a
   later pass added defensive z-index to it too, but neither was a confirmed
   root cause and this keeps recurring, likely on a different button class or
   an inline-styled one each time (e.g. .sl-prod-btn, .ds-spot-btn, .bu-cell-btn,
   .drawer-ch-btn/.drawer-tp-btn are all rendered inside display:flex/grid rows
   without their own flex-shrink:0). Rather than chase one selector at a time
   again, apply the established root cause's fix to every <button> site-wide —
   a button that isn't inside a shrinking flex row is unaffected, so this is a
   no-op everywhere else. Not a substitute for a live-DOM repro if it recurs —
   I have no way to run the app from here to confirm this is the exact spot. */
button { flex-shrink: 0; }

.hl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background .15s, opacity .15s, box-shadow .15s;
    white-space: nowrap;
    /* Every footer/action row on the site is `display:flex` with no flex-shrink
       set on its buttons, so a flex item could shrink narrower than its
       nowrap text — the label then visually overflows past the button's real
       (shrunk) box. Clicking the overflowing text looked like clicking the
       button but landed outside it, so only part of the button actually
       responded. Never shrink a button below its content. (14 Jul 2026) */
    flex-shrink: 0;
    /* Belt-and-suspenders (14 Jul 2026, still reported after the fix above):
       guarantee this element's own box is what receives the click, in case
       anything is ever stacked over part of it. */
    position: relative;
    z-index: 1;
}
.hl-btn--primary  { background: var(--accent); color: var(--navy); }
.hl-btn--primary:hover  { background: var(--accent-hover); }
.hl-btn--secondary { background: var(--grey-light); color: var(--text-primary); }
.hl-btn--secondary:hover { background: #E2E8F0; }
.hl-btn--ghost    { background: transparent; color: #94A3B8; border: 1px solid rgba(255,255,255,.12); }
/* Ghost hover was authored for the dark nav (white text on a translucent white bg). On the
   light content pages that made the label turn white and vanish. Default hover is now
   light-page-safe (dark text on light-grey); the original white hover is kept ONLY inside
   the dark nav. */
.hl-btn--ghost:hover { background: var(--grey-light); color: var(--text-primary); border-color: var(--border); }
.hl-nav .hl-btn--ghost:hover { background: rgba(255,255,255,.06); color: #FFFFFF; border-color: rgba(255,255,255,.12); }
.hl-btn--danger   { background: var(--red-light); color: var(--red); }
.hl-btn--danger:hover { background: #FEE2E2; }
.hl-btn--sm { padding: 5px 10px; font-size: 12px; }
.hl-btn--lg { padding: 10px 20px; font-size: 14px; }
.hl-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── File upload pill ───────────────────────────────────────────────────────
   Hides the native file input and drives it from a <label>, so every upload in
   the app is one consistent "Choose file" pill instead of the browser's own
   control (which differs per browser and cannot be styled).

   Markup:
     <label class="hl-upload">
       <svg …upload arrow…></svg>
       <span>Choose file</span>
       <input type="file" name="…" accept="…" />
     </label>

   The input is visually hidden but NOT display:none — it stays focusable and
   keyboard-reachable, and it keeps whatever form=/onchange= it was given.

   Lived page-local in Campaigns/Detail.cshtml until 26 Aug 2026, despite the
   hl- prefix meaning shared everywhere else. Moved here when Admin -> Media
   Specifications needed the same control. */
.hl-upload {
    display: inline-flex; align-items: center; gap: 6px;
    /*  margin-top was on the original rule; kept so moving this file-to-file changes
        nothing on the three Campaigns/Detail usages. Override at the call site if a
        layout wants the pill flush. */
    margin-top: 8px; padding: 7px 14px;
    font-size: 12px; font-weight: 600; line-height: 1;
    color: var(--text-primary); background: var(--surface);
    border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; transition: border-color .12s, color .12s, box-shadow .12s;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.hl-upload:hover  { border-color: var(--blue); color: var(--blue); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.hl-upload:active { box-shadow: none; }
.hl-upload svg    { width: 13px; height: 13px; flex: none; }
.hl-upload input[type=file] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.hl-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.hl-card__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.hl-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.hl-card__body { padding: 20px; }

/* ── Status badges ──────────────────────────────────────────────────────────── */
.hl-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: uppercase;
    white-space: nowrap;   /* 15 Aug (Shaun): status pills never wrap ("AWAITING PO" broke to two lines in the CE list) */
}
.hl-badge--draft        { background: var(--grey-light);  color: var(--grey); }
.hl-badge--pending      { background: var(--amber-light); color: var(--amber); }
.hl-badge--approved     { background: var(--blue-light);  color: var(--blue); }
.hl-badge--po_received  { background: var(--green-light); color: var(--green); }
.hl-badge--invoiced     { background: #EDE9FE; color: #7C3AED; }
.hl-badge--live         { background: var(--green-light); color: var(--green); }
.hl-badge--expired      { background: var(--red-light);   color: var(--red); }
.hl-badge--closed       { background: var(--grey-light);  color: var(--text-muted); }
.hl-badge--cancelled    { background: var(--red-light);   color: var(--red); }

/* ── Cost-estimate list: quick-filter pills ───────────────────────────────────── */
.ce-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 32px 16px; }
.ce-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-primary); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all .15s; white-space: nowrap;
}
.ce-pill__dot { width: 6px; height: 6px; border-radius: 50%; }
.ce-pill__count { font-size: 11px; font-weight: 700; opacity: .85; }
.ce-pill:hover { border-color: currentColor; }
.ce-pill.is-active { color: #fff; border-color: transparent; box-shadow: var(--shadow-sm); }
.ce-pill.is-active .ce-pill__dot { background: #fff !important; }
.ce-pill--amber.is-active { background: var(--amber); }
.ce-pill--green.is-active { background: var(--green); }
.ce-pill--red.is-active   { background: var(--red); }
.ce-pill--blue.is-active  { background: var(--blue); }

/* ── Status tab strip ─────────────────────────────────────────────────────────── */
.ce-tabs { display: inline-flex; gap: 4px; background: var(--grey-light); border-radius: var(--radius); padding: 3px; flex-wrap: wrap; }
.ce-tab {
    padding: 5px 12px; border: none; border-radius: var(--radius-sm); background: transparent;
    color: var(--text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s;
}
.ce-tab.is-active { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.ce-tab__count { font-size: 10px; opacity: .6; margin-left: 3px; }

/* ── Row extras ───────────────────────────────────────────────────────────────── */
.ce-amend { display: block; font-size: 9px; font-weight: 700; color: #7C3AED; letter-spacing: .08em; margin-top: 2px; text-transform: uppercase; }
.ce-items { font-size: 11px; color: var(--text-muted); margin-left: 8px; }
.ce-substatus { font-size: 10px; font-weight: 500; color: var(--amber); margin-top: 3px; }
.ce-row { cursor: pointer; }
.ce-rowact {
    width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted); transition: all .12s;
}
.ce-rowact:hover { border-color: var(--red); color: var(--red); background: var(--red-light); }
.ce-chev { font-size: 16px; color: var(--text-muted); margin-left: 4px; }
.hl-table th.ce-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.hl-table th.ce-sort:hover { color: var(--text-primary); }
.ce-aegroup td { background: #F1F5F9; font-size: 12px; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: .02em; padding: 10px 14px; }
.ce-aegroup__meta { margin-left: 10px; font-size: 11px; font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: normal; }

/* ── Form controls ──────────────────────────────────────────────────────────── */
.hl-form-group { display: flex; flex-direction: column; gap: 5px; }
.hl-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); letter-spacing: .2px; text-transform: uppercase; }
.hl-input, .hl-select {
    height: 36px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.hl-input:focus, .hl-select:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(15,23,42,.08);
}
.hl-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
/* ── .cmp-check — 20px checkbox ────────────────────────────────────────────
   ADDITIVE, opt-in. Nothing restyles bare input[type=checkbox]: every existing
   checkbox keeps its browser default until a page deliberately uses this class,
   so no screen changes appearance by accident.

   The native box is ~13px and hard to aim at. The real <input> is KEPT and only
   visually hidden (never display:none, which drops it out of the tab order and
   hides it from screen readers); the span is what gets drawn. It borrows the
   .hl-input border width and radius so it reads as part of the form, and renders
   identically on Windows and macOS rather than inheriting whatever the OS draws.

   Markup:
     <label class="cmp-check">
       <input type="checkbox" name="x" value="true" />
       <span class="cmp-check__box" aria-hidden="true">&#10003;</span>
       Label text
     </label>
*/
.cmp-check { display: flex; align-items: center; gap: 10px; font-size: 13px;
             color: var(--text-primary); cursor: pointer; }
.cmp-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.cmp-check__box { width: 20px; height: 20px; flex: none; border: 1.5px solid var(--border);
                  border-radius: 5px; background: var(--surface); color: #fff;
                  display: inline-flex; align-items: center; justify-content: center;
                  font-size: 13px; font-weight: 800; line-height: 1;
                  transition: background .12s, border-color .12s; }
.cmp-check input:checked + .cmp-check__box { background: var(--blue); border-color: var(--blue); }
/* Focus ring goes on the SPAN — the real input sits off-screen, so the browser's
   own ring would land somewhere nobody can see. */
.cmp-check input:focus-visible + .cmp-check__box { box-shadow: 0 0 0 3px rgba(15,76,129,.25); }

.hl-textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-primary); font-size: 13px; resize: vertical; outline: none; transition: border-color .15s; }
.hl-textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(15,23,42,.08); }

/* ── Table ──────────────────────────────────────────────────────────────────── */
.hl-table-wrap { overflow-x: auto; }
.hl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.hl-table th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.hl-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    vertical-align: middle;
}
.hl-table tbody tr:last-child td { border-bottom: none; }
.hl-table tbody tr { transition: background .1s; }
.hl-table tbody tr:hover { background: var(--surface-alt); }

/* ── Filter bar ─────────────────────────────────────────────────────────────── */
.hl-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 32px;
}
.hl-search-wrap { position: relative; }
.hl-search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.hl-search { height: 36px; padding: 0 10px 0 32px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 13px; color: var(--text-primary); outline: none; width: 220px; transition: border-color .15s; }
.hl-search:focus { border-color: var(--navy); }
.hl-filter-select { height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 13px; color: var(--text-primary); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; outline: none; }

/* ── Channel chip ───────────────────────────────────────────────────────────── */
.hl-channel-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
}

/* ── Stat cards ─────────────────────────────────────────────────────────────── */
.hl-stats { display: flex; gap: 16px; padding: 20px 32px; flex-wrap: wrap; }
.hl-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    min-width: 160px;
    flex: 1;
}
.hl-stat__label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.hl-stat__value { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 22px; color: var(--text-primary); }
.hl-stat__value--accent { color: var(--blue); }

/* ── Empty state ────────────────────────────────────────────────────────────── */
.hl-empty {
    text-align: center;
    padding: 64px 32px;
    color: var(--text-muted);
}
.hl-empty__icon { margin: 0 auto 16px; opacity: .4; }
.hl-empty__title { font-size: 15px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.hl-empty__body  { font-size: 13px; }

/* ── Cost Estimate Builder ──────────────────────────────────────────────────── */
.ce-builder {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    padding: 24px 32px 40px;
    align-items: start;
}
@media (max-width: 1100px) { .ce-builder { grid-template-columns: 1fr; } }

.ce-builder__main { display: flex; flex-direction: column; gap: 20px; }
.ce-builder__sidebar { position: sticky; top: calc(var(--nav-height) + 24px); display: flex; flex-direction: column; gap: 16px; }

/* Job meta section */
.ce-meta {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.ce-meta__header {
    padding: 14px 20px;
    background: var(--navy);
    display: flex;
    align-items: center;
    gap: 10px;
}
.ce-meta__header-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; color: #FFFFFF; }
.ce-meta__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px; }
.ce-meta__fields--3 { grid-template-columns: 1fr 1fr 1fr; }
.ce-meta__value {
    font-size: 14px;
    color: var(--text);
    padding: 8px 0 4px;
    border-bottom: 1px solid var(--border);
    min-height: 34px;
}

/* Channel selector */
.ce-channels__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 16px 20px;
}
@media (max-width: 900px) { .ce-channels__grid { grid-template-columns: repeat(3, 1fr); } }

.ce-channel-btn {
    padding: 14px 10px;
    border-radius: var(--radius);
    border: 2px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s, transform .1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ce-channel-btn:hover { border-color: #CBD5E1; background: var(--surface-alt); transform: translateY(-1px); }
.ce-channel-btn.is-selected { border-color: var(--navy); background: #F8FAFF; }
.ce-channel-btn__abbr {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: #FFFFFF;
}
.ce-channel-btn__name { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.ce-channel-btn.is-selected .ce-channel-btn__name { color: var(--navy); }

/* Touchpoint rows */
.ce-touchpoints { display: flex; flex-direction: column; }
.ce-tp-group { border-bottom: 1px solid var(--border-light); }
.ce-tp-group:last-child { border-bottom: none; }

.ce-tp-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    cursor: pointer;
    user-select: none;
    transition: background .1s;
}
.ce-tp-group__header:hover { background: var(--surface-alt); }
.ce-tp-group__title { font-size: 13px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.ce-tp-group__count { font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--grey-light); padding: 2px 7px; border-radius: 10px; }

.ce-tp-row {
    display: grid;
    grid-template-columns: 32px 1fr auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    border-top: 1px solid var(--border-light);
    background: #FAFBFC;
    transition: background .1s;
}
.ce-tp-row:hover { background: #F4F6F8; }
.ce-tp-row__check { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s; flex-shrink: 0; }
.ce-tp-row__check.is-checked { border-color: var(--navy); background: var(--navy); }
.ce-tp-row__name { font-size: 13px; color: var(--text-primary); }
.ce-tp-row__rate { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.ce-tp-row__qty { display: flex; align-items: center; gap: 6px; }
.ce-tp-row__qty-input { width: 60px; height: 30px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; outline: none; }
.ce-tp-row__qty-input:focus { border-color: var(--navy); }
.ce-tp-row__subtotal { font-size: 13px; font-weight: 600; color: var(--text-primary); min-width: 90px; text-align: right; }

/* Summary sidebar */
.ce-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ce-summary__header { padding: 14px 20px; background: var(--navy); }
.ce-summary__header-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; color: #FFFFFF; }
.ce-summary__body { padding: 0; }
.ce-summary__line { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--border-light); font-size: 13px; color: var(--text-secondary); }
.ce-summary__line:last-of-type { border-bottom: none; }
.ce-summary__line-label { font-weight: 500; }
.ce-summary__line-value { font-weight: 600; color: var(--text-primary); }
.ce-summary__total { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: var(--navy); }
.ce-summary__total-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); }
.ce-summary__total-value { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 22px; color: var(--accent); }
.ce-summary__actions { padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }

/* Production section */
.ce-production { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.ce-prod-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.ce-prod-row__name { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.ce-prod-row__right { display: flex; align-items: center; gap: 8px; }
.ce-prod-row__input { width: 90px; height: 30px; text-align: right; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; padding: 0 8px; outline: none; }
.ce-prod-row__input:focus { border-color: var(--navy); }

/* Markup row */
.ce-markup-row { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border-light); }
.ce-markup-row__label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; flex: 1; }
.ce-markup-row__input { width: 70px; height: 30px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; outline: none; }

/* DCI toggle */
.ce-dci-row { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-top: 1px solid var(--border-light); }
.ce-toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.ce-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ce-toggle__track { position: absolute; inset: 0; background: var(--border); border-radius: 20px; cursor: pointer; transition: background .2s; }
.ce-toggle input:checked + .ce-toggle__track { background: var(--green); }
.ce-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: white; border-radius: 50%; transition: transform .2s; pointer-events: none; }
.ce-toggle input:checked ~ .ce-toggle__thumb { transform: translateX(16px); }

/* Animations */
@keyframes fadeIn  { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ce-spin { to { transform: rotate(360deg); } }

/* Inline "working" spinner for send buttons (dsmSendBusy in Campaigns/Detail).
   OPT-IN class — nothing inherits it — and it reuses the ce-spin keyframes above
   rather than declaring a second identical rotation. currentColor so it works on
   the yellow primary and the outlined secondaries without a variant each. */
.cmp-spin {
    display: inline-block; width: 11px; height: 11px; margin-right: 6px;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; vertical-align: -1px;
    animation: ce-spin .7s linear infinite;
}
/* Still shows it is working, without the fast spin, for reduced-motion users. */
@media (prefers-reduced-motion: reduce) { .cmp-spin { animation-duration: 2.4s; } }
.anim-fade  { animation: fadeIn  .2s ease both; }
.anim-slide { animation: slideIn .15s ease both; }

/* ── New CE header modal ─────────────────────────────────────────────────────── */
.ce-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.45);
    z-index: 300;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.ce-modal-overlay.is-hidden { display: none; }

.ce-modal {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 32px;
    width: 100%; max-width: 440px;
    animation: fadeIn .18s ease both;
}
.ce-modal__title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px; font-weight: 700; color: var(--text-primary);
    letter-spacing: -0.01em;
}
.ce-modal__sub {
    font-size: 13px; color: var(--text-muted); margin-top: 6px; line-height: 1.5;
}
.ce-modal__actions {
    display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px;
}

/* ── Add Item Drawer ─────────────────────────────────────────────────────────── */
.drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 200;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
}
.drawer-overlay.is-open { opacity: 1; pointer-events: all; }

.item-drawer {
    position: fixed; top: 0; right: 0; height: 100%;
    width: 560px; max-width: 95vw;
    background: var(--surface);
    z-index: 201;
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
    border-left: 1px solid var(--border);
}
.item-drawer.is-open { transform: translateX(0); }

.drawer-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    background: var(--surface);
}
.drawer-header__title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--text-primary);
}
.drawer-header__sub {
    font-size: 11px; color: var(--text-muted);
    margin-top: 4px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}
.drawer-close {
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--surface);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary); transition: all .12s; flex-shrink: 0;
}
.drawer-close:hover { border-color: var(--text-primary); color: var(--text-primary); }

.drawer-steps {
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface-alt);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    flex-shrink: 0;
}
.drawer-step-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 12px; border-radius: 999px; border: none;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    transition: all .12s;
}
.drawer-step-btn--current  { background: var(--navy); color: #fff; cursor: default; }
.drawer-step-btn--done     { background: var(--green-light); color: var(--green); cursor: pointer; }
.drawer-step-btn--upcoming { background: transparent; color: var(--text-muted); cursor: default; }
.drawer-step-num {
    width: 16px; height: 16px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; font-family: 'Outfit', sans-serif; flex-shrink: 0;
}
.drawer-step-num--current  { background: var(--accent); color: var(--navy); }
.drawer-step-num--done     { background: var(--green); color: #fff; }
.drawer-step-num--upcoming { background: var(--grey-light); color: var(--text-muted); }
.drawer-sep { width: 12px; height: 1px; background: var(--border); flex-shrink: 0; }

/* Completed steps show WHAT was chosen under the step label (Shaun, 24 Jul) */
.drawer-step-text {
    display: inline-flex; flex-direction: column; align-items: flex-start;
    line-height: 1.25; text-align: left;
}
.drawer-step-sub {
    font-size: 9px; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--green); opacity: .85;
    max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; }

.drawer-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 10px;
    flex-shrink: 0; background: var(--surface);
}

/* Step content helpers */
.drawer-step-title {
    font-size: 13px; font-weight: 700; font-family: 'Outfit', sans-serif;
    letter-spacing: .02em; color: var(--text-primary); margin-bottom: 4px;
}
.drawer-step-sub { font-size: 12px; color: var(--text-secondary); margin-bottom: 0; }
.drawer-field-label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--text-secondary); margin-bottom: 0;
}

/* Channel buttons inside drawer */
.drawer-ch-btn {
    padding: 14px 16px; border-radius: 10px;
    border: 2px solid var(--border); background: var(--surface);
    cursor: pointer; text-align: left; transition: all .15s; width: 100%;
}
.drawer-ch-btn.is-selected { /* border-color and background set inline via channel color */ }
.drawer-ch-btn__name {
    font-size: 13px; font-weight: 700; color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
}
.drawer-ch-btn__desc { font-size: 11px; color: var(--text-secondary); margin-top: 6px; line-height: 1.4; }
.drawer-ch-btn__meta {
    font-size: 10px; color: var(--text-muted);
    margin-top: 4px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}

/* Touchpoint buttons inside drawer */
.drawer-tp-btn {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--surface);
    cursor: pointer; transition: all .1s; text-align: left; width: 100%;
}
.drawer-tp-btn__name {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
}
.drawer-tp-btn__meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.drawer-tp-btn__rate {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    font-family: 'Outfit', sans-serif; flex-shrink: 0; margin-left: 12px;
}

/* Tier / bundle / month selection buttons */
.drawer-tier-btn, .drawer-qty-btn, .drawer-month-btn {
    padding: 10px 8px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); background: var(--surface);
    cursor: pointer; text-align: center; transition: all .12s;
    font-size: 12px; font-weight: 600; color: var(--text-primary);
}
.drawer-tier-btn { padding: 12px 8px; }
.drawer-tier-btn.is-selected, .drawer-qty-btn.is-selected, .drawer-month-btn.is-selected {
    border-color: var(--navy); background: var(--navy); color: #fff;
}
.drawer-month-btn.is-range {
    border-color: var(--navy); background: color-mix(in srgb, var(--navy) 18%, transparent); color: var(--navy);
}
.ce-year-arrow {
    width: 28px; height: 28px; border-radius: 6px;
    border: 1.5px solid var(--border); background: var(--surface);
    cursor: pointer; font-size: 14px; color: var(--text-primary);
    display: flex; align-items: center; justify-content: center;
    transition: all .12s;
}
.ce-year-arrow:hover { border-color: var(--navy); color: var(--navy); }
.drawer-tier-btn:not(.is-selected):hover, .drawer-qty-btn:not(.is-selected):hover,
.drawer-month-btn:not(.is-selected):not(.is-range):hover {
    border-color: var(--navy); color: var(--navy);
}

/* Subtotal preview in step 3 */
.drawer-subtotal-preview {
    padding: 12px 16px;
    background: var(--navy);
    border-radius: var(--radius);
    color: var(--accent);
    margin-top: 4px;
}

/* ── Line Items Area ─────────────────────────────────────────────────────────── */
.line-items-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.line-items-header__title {
    font-family: 'Outfit', sans-serif; font-size: 13px;
    font-weight: 700; color: var(--text-primary);
}
.line-items-header__count {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    background: var(--grey-light); padding: 2px 8px; border-radius: 10px;
}
.line-items-empty {
    border: 2px dashed var(--border); border-radius: var(--radius-lg);
    padding: 40px 24px; text-align: center;
}

.line-item-row {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    gap: 12px; align-items: center;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    margin-bottom: 6px;
    transition: border-color .1s;
}
.line-item-row:hover { border-color: #C2CDD9; }
.line-item-row__channel {
    width: 32px; height: 32px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800; font-family: 'Outfit', sans-serif;
    color: #fff; flex-shrink: 0; letter-spacing: .02em;
}
.line-item-row__name {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.line-item-row__meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.line-item-row__notes {
    font-size: 11px; color: var(--text-secondary);
    margin-top: 3px; font-style: italic;
}
.line-item-row__subtotal {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    font-family: 'Outfit', sans-serif; text-align: right; white-space: nowrap;
}
.line-item-row__original {
    font-size: 11px; color: var(--text-muted);
    text-decoration: line-through; text-align: right;
}
.line-item-row__discount {
    font-size: 10px; font-weight: 600; color: var(--green);
    text-align: right; letter-spacing: .02em;
}
.line-item-row__action {
    width: 28px; height: 28px; border-radius: 6px;
    border: 1px solid var(--border); background: transparent;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); transition: all .12s; flex-shrink: 0;
}
.line-item-row__action:hover { border-color: var(--navy); color: var(--navy); background: var(--blue-light); }
.line-item-row__remove:hover { border-color: var(--red) !important; color: var(--red) !important; background: var(--red-light) !important; }

/* ── Idle timeout overlay ──────────────────────────────────────────────────── */
.idle-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn .2s ease;
}
.idle-overlay.is-hidden { display: none; }

.idle-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 48px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(15,23,42,.18);
    animation: slideUp .2s ease;
}
.idle-card__icon {
    font-size: 36px;
    margin-bottom: 16px;
    line-height: 1;
}
.idle-card__title {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px;
}
.idle-card__body {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 28px;
}
.idle-card__body strong {
    font-size: 20px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
    display: block;
    margin-top: 6px;
}
.idle-card__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* ── Header icons + notification bell dropdown ─────────────────────────────────── */
.hl-nav__icon { transition: color .15s, background .15s; }
.hl-nav__icon:hover { color: #fff !important; background: rgba(255,255,255,.10); }

.nav-notify-dropdown {
    position: absolute; top: 42px; right: 0; width: 320px; z-index: 200;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(15,23,42,.18); overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.nav-notify-wrap:hover .nav-notify-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-notify-head {
    padding: 10px 14px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-light);
}
.nav-notify-list { max-height: 360px; overflow-y: auto; }
.nav-notify-item { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-bottom: 1px solid var(--border-light); }
.nav-notify-item:hover { background: var(--surface-alt); }
.nav-notify-d { margin-top: 5px; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.nav-notify-msg { font-size: 12.5px; color: var(--text-primary); line-height: 1.4; }
.nav-notify-ago { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.nav-notify-empty { padding: 18px 14px; font-size: 12px; color: var(--text-muted); text-align: center; }
.nav-notify-foot {
    display: block; padding: 10px 14px; text-align: center; font-size: 12px; font-weight: 600;
    color: var(--blue); background: var(--surface-alt); border-top: 1px solid var(--border-light);
}
.nav-notify-foot:hover { background: var(--blue-light); }

/* ── CE preview modal (Preview & send) ─────────────────────────────────────────── */
.ce-preview-overlay {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(15,23,42,.55); align-items: flex-start; justify-content: center;
    padding: 30px 16px; overflow-y: auto;
}
.ce-preview-modal {
    background: var(--surface); border-radius: 14px; width: 100%; max-width: 920px;
    box-shadow: 0 24px 60px rgba(0,0,0,.3); display: flex; flex-direction: column;
    max-height: calc(100vh - 60px);
}
.ce-preview-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 18px 24px; border-bottom: 1px solid var(--border);
}
.ce-preview-x {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); cursor: pointer; font-size: 14px; color: var(--text-secondary);
}
.ce-preview-x:hover { background: var(--surface-alt); }
.ce-preview-scroll { overflow-y: auto; padding: 22px; background: var(--surface-alt); }
.ce-preview-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 24px; border-top: 1px solid var(--border); background: var(--surface);
    border-radius: 0 0 14px 14px;
}

/* ── Burst booking tooltip (custom hover popover) ──────────────────────────────── */
.bu-tip {
    position: fixed; z-index: 1100; pointer-events: none;
    background: var(--navy); color: #fff; border-radius: 9px;
    padding: 9px 11px; font-size: 11.5px; line-height: 1.45; max-width: 340px;
    box-shadow: 0 10px 28px rgba(15,23,42,.32);
    animation: bu-tip-in .12s ease-out;
}
@keyframes bu-tip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.bu-tip::after {
    content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%) rotate(45deg);
    width: 9px; height: 9px; background: var(--navy);
}
.bu-tip.bu-tip--below::after { bottom: auto; top: -5px; }
.bu-tip-head {
    font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 5px;
}
.bu-tip-row { display: flex; gap: 7px; align-items: flex-start; padding: 2px 0; }
.bu-tip-row + .bu-tip-row { border-top: 1px solid rgba(255,255,255,.10); }
.bu-tip-dot { margin-top: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* ── SL store-picker toolbar buttons ───────────────────────────────────────────── */
.sl-mini-btn {
    padding: 5px 11px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--surface); font-size: 11px; font-weight: 600; cursor: pointer;
    color: var(--text-secondary);
}
.sl-mini-btn:hover { border-color: var(--navy); color: var(--navy); }
.sl-mini-btn--accent { background: var(--navy); color: #fff; border-color: var(--navy); }
.sl-mini-btn--accent:hover { background: var(--navy-light); color: var(--accent); }
.sl-link-btn {
    background: none; border: none; cursor: pointer; font-size: 11px; font-weight: 600;
    color: var(--text-muted); padding: 4px 6px;
}
.sl-link-btn:hover { color: var(--blue); }
.sl-slot-inc:hover, .sl-slot-dec:hover { border-color: var(--navy) !important; color: var(--navy) !important; }

/* Print: only the client sheet */
@media print {
    body * { visibility: hidden !important; }
    #cePreviewSheet, #cePreviewSheet * { visibility: visible !important; }
    #cePreviewSheet { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; }
    .ce-preview-head, .ce-preview-foot, .ce-preview-x { display: none !important; }
}

/* ── Site-wide toast (dsmToast) — fixed, out of flow, no layout shift ─────────── */
#dsm-toast-host { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.dsm-toast { min-width: 200px; max-width: 360px; padding: 11px 15px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.18); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.dsm-toast--in { opacity: 1; transform: none; }
.dsm-toast--ok { background: #059669; }
.dsm-toast--err { background: #DC2626; }

/* ── .cmb — type-to-filter combobox over a native <select> ──────────────────
   ADDITIVE and opt-in: dsm-combobox.js only touches a <select data-cmb>, so
   every other dropdown in the app is untouched.

   .cmb__sel is the REAL select, still in the form, still carrying its name,
   value and required. It is laid over the field at opacity 0 rather than
   display:none because a required control that cannot be focused gets no
   validation bubble — the browser logs "An invalid form control is not
   focusable" and refuses to submit, with nothing on screen to explain why.
   pointer-events:none keeps clicks going to the text box on top of it. */
.cmb        { position: relative; }
.cmb__sel   { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
              opacity: 0; pointer-events: none; }
.cmb__in    { position: relative; z-index: 1; padding-right: 26px; }
/* Flashed by the script when the hidden select fails validation, since the
   browser's own message would point at something invisible. */
.cmb__in--bad { border-color: var(--red); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.cmb__car   { position: absolute; right: 9px; top: 0; height: 36px; display: flex;
              align-items: center; pointer-events: none; color: var(--text-muted);
              font-size: 11px; z-index: 2; }
/* position:fixed and parented to <body>: these pickers sit inside cards and
   panels that clip overflow, and an absolutely-positioned list would be cut
   off by them. The script re-places it on scroll and resize. */
.cmb__pop   { position: fixed; z-index: 400; background: var(--surface);
              border: 1px solid var(--border); border-radius: var(--radius);
              box-shadow: 0 10px 26px rgba(15,23,42,.14); max-width: min(440px, 92vw);
              overflow: auto; padding: 4px; }
.cmb__op    { display: flex; align-items: baseline; gap: 7px; padding: 6px 8px;
              border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.cmb__op.is-on { background: var(--surface-alt); }
.cmb__code  { font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.cmb__nm    { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; }
.cmb__rg    { flex: none; font-size: 10.5px; color: var(--text-muted); }
.cmb__op mark { background: #FEF3C7; color: inherit; border-radius: 2px; padding: 0 1px; }
.cmb__none  { padding: 9px 10px; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.cmb__cnt   { padding: 5px 9px 3px; font-size: 10px; font-weight: 700; letter-spacing: .06em;
              text-transform: uppercase; color: var(--text-muted); }

/* ── Environment badge (5 Sep 2026 go-live) — never rendered on Live ──────── */
.hl-env-badge {
    margin-left: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #F59E0B;
    color: #1F1300;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hl-env-badge--danger { background: #DC2626; color: #fff; }

/* ── Connection watchdog pill (10 Sep, Shaun) — lives in the nav user cluster ── */
.hl-net-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px; border-radius: 999px; white-space: nowrap;
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .03em;
    flex-shrink: 0;
}
.hl-net-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hl-net-badge--down { background: #DC2626; color: #fff; animation: hl-net-pulse 1.2s ease-in-out infinite; }
.hl-net-badge--up   { background: #059669; color: #fff; }
@keyframes hl-net-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.55); } 50% { box-shadow: 0 0 0 7px rgba(220,38,38,0); } }
/* 14 Sep: system update strip (#sysUpdateBar) — last-15-minutes blink */
@keyframes sysUpdBlink { 0%, 100% { background: #FEE2E2; } 50% { background: #FECACA; } }
body.is-env-dev    .hl-nav { border-top: 4px solid #F59E0B; }
body.is-env-danger .hl-nav { border-top: 4px solid #DC2626; }
.hl-env-banner {
    background: #F59E0B;
    color: #1F1300;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 12px;
}
.hl-env-banner--danger { background: #DC2626; color: #fff; }