/* ── Inter (self-hosted) ──────────────────────────────────────────────
   Single variable-weight file covers the whole 100–900 weight range this
   stylesheet actually uses (400/500/600/700/800/900), latin subset only —
   sufficient for English/Swahili/Somali, the app's three languages, none
   of which need extended Latin diacritics. Self-hosted rather than a
   Google Fonts / CDN <link> for the same reason the rest of this app
   avoids third-party requests on pages that can carry customer data:
   no external network call, works offline, identical render every time.
   No italic face is bundled — the one italic use in this file (.ta-nopx)
   gets the browser's synthetic slant, an acceptable trade for not
   shipping a second ~50KB file for a single small label.
   License: SIL Open Font License 1.1 — see assets/fonts/inter-LICENSE.txt */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}

/* ── Color palette ─────────────────────────────────────────────────── */
:root {
    --xl-navy:        #16325C;
    --xl-blue:        #0070D2;
    --xl-blue-light:  #EEF4FC;
    --xl-green:       #04844B;
    --xl-green-light: #DFF6E7;
    --xl-orange:      #C2410C;
    --xl-orange-light:#FFEEDD;
    --xl-red:         #EA001E;
    --xl-red-light:   #FDE4E4;
    --xl-yellow:      #FFFAE6;
    --xl-gray-row:    #FAFAF9;
    --xl-white:       #FFFFFF;
    --xl-border:      #DDDBDA;
    --xl-border-dark: #C9C7C5;
    --radius:         4px;
    --shadow:         0 1px 3px rgba(0,0,0,.10);
    --sidebar-w:      220px;
    --toggle-h:       46px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font);
    background: #F3F2F2;
    color: #16325C;
    font-size: 12.5px;
    line-height: 1.4;
    overflow-x: hidden;
}

a { color: var(--xl-blue); }

/* ══════════════════════════════════════════════════════════════
   MASTHEAD  (logo · global search · language · user)
══════════════════════════════════════════════════════════════ */
.app-masthead {
    background: var(--xl-navy);
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 250;
}
/* ── BRAND FOOTER (moved down from the masthead) ──
   Fixed to the viewport bottom so it reads the same on a short dashboard and a
   long report. body gets matching bottom padding below, because a fixed bar
   overlaps content it does not reserve room for — which on a form is the save
   button and on a table is the last row. */
.app-brandbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 18px;
    background: var(--xl-navy, #16325C);
    border-top: 1px solid rgba(255,255,255,.10);
    z-index: 240;   /* under the masthead (250) and any modal, over page content */
}
.app-brandbar .brandbar-brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    min-width: 0;
}
.app-brandbar .brand-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .3px;
    white-space: nowrap;
}
.app-brandbar .brand-sub {
    font-size: 9.5px;
    color: var(--xl-blue-light, #A8C0DC);
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}
.app-brandbar .brandbar-meta {
    font-size: 10px;
    color: var(--xl-blue-light, #A8C0DC);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-brandbar .brandbar-dot { opacity: .5; margin: 0 4px; }

/* Reserve the bar's height. Without this the bar sits on top of whatever ends
   the page. */
body { padding-bottom: 34px; }

/* Narrow screens: the subtitle is the first thing worth dropping — the title
   already says what the product is. */
@media (max-width: 640px) {
    .app-brandbar { height: 28px; padding: 0 12px; }
    .app-brandbar .brand-sub { display: none; }
    body { padding-bottom: 28px; }
}

/* Printing a report should not stamp the app's own chrome onto the page. */
@media print {
    .app-brandbar { display: none; }
    body { padding-bottom: 0; }
}

/* ── TOGGLE BUTTON (mobile hamburger only) ── */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 301;
    background: var(--xl-navy);
    border: none;
    border-radius: 4px;
    width: 34px;
    height: 34px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 7px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.sidebar-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.2s;
}

/* Overlay behind the mobile dropdown menu */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 259;
}

/* ── Global search ── */
.top-search-wrap { position: relative; flex: 1 1 auto; min-width: 120px; max-width: 480px; }
.top-search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); fill: rgba(255,255,255,.55); pointer-events: none; z-index: 1; }
#globalSearchInput {
    width: 100%;
    padding: 7px 54px 7px 28px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 12px;
    box-sizing: border-box;
}
#globalSearchInput::placeholder { color: rgba(255,255,255,.6); opacity: .8; }
#globalSearchInput:focus { outline: none; border-color: var(--xl-blue) !important; background: rgba(255,255,255,.15) !important; }
#globalSearchResults {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--xl-border);
    max-height: 420px;
    overflow-y: auto;
    z-index: 300;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    border-radius: 4px;
}
.gs-group-label {
    padding: 6px 12px 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #888;
    background: #F4F6F9;
}
.gs-result-item {
    display: block;
    padding: 7px 12px;
    color: #222;
    text-decoration: none;
    border-bottom: 1px solid #F0F0F0;
}
.gs-result-item:hover { background: #EAF1FB; }
.gs-result-title { font-size: 12.5px; font-weight: 600; color: #16325C; display: flex; align-items: center; gap: 6px; }
.gs-result-title svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.gs-result-subtitle { font-size: 11px; color: #888; margin-top: 1px; }
.gs-hl { background: #FFE58A; color: #16325C; border-radius: 2px; padding: 0 1px; font-weight: 700; }
.gs-fuzzy-hint { padding: 6px 12px; font-size: 11px; color: #8a6100; background: #FFF6E0; border-bottom: 1px solid #F0D080; }
.gs-empty, .gs-loading { padding: 14px 12px; font-size: 12px; color: #888; text-align: center; }
.gs-see-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 12px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--xl-blue);
    text-decoration: none;
    background: #F4F6F9;
}
.gs-see-all svg { width: 12px; height: 12px; fill: currentColor; }
.gs-see-all:hover { background: #EAF1FB; }

/* ── Command palette (Ctrl+K) ── */
.cmdk-hint {
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #E8F1FC;
    font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 4px; cursor: pointer;
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: inherit;
}
.cmdk-hint:hover { background: rgba(255,255,255,.22); }
.cmdk-overlay {
    position: fixed; inset: 0; background: rgba(10,18,32,.55); z-index: 2000;
    display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px;
}
.cmdk-box {
    background: #fff; width: 100%; max-width: 620px; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.4);
    overflow: hidden; display: flex; flex-direction: column; max-height: 70vh;
}
.cmdk-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--xl-border); }
.cmdk-input-row svg { width: 17px; height: 17px; fill: #9AA6B5; flex-shrink: 0; }
.cmdk-input-row input { flex: 1; border: none; outline: none; font-size: 15px; color: #222; }
.cmdk-input-row kbd { font-size: 10.5px; color: #9AA6B5; border: 1px solid #DCE1E8; border-radius: 4px; padding: 2px 6px; }
.cmdk-results { overflow-y: auto; flex: 1; padding: 6px 0; }
.cmdk-results .gs-result-item.active { background: #EAF1FB; }
.cmdk-results .gs-group-label:first-child { margin-top: 0; }

/* ── Language switcher ── */
.top-lang-form { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.top-lang-icon { font-size: 13px; }
.top-lang-form select {
    padding: 6px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 11px;
}
.top-lang-form select option { color: #000; background: #fff; }

/* ── Right-hand cluster: countdown, business switcher, user ── */
.masthead-end { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }
.masthead-biz-switch select {
    padding: 6px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08); color: #fff; font-size: 11px; max-width: 160px;
}
/* The closed control sits on the navy masthead, so its text is white. The
   OPEN list does not: the browser draws that popup on its own white surface,
   and the options inherit the white from the rule above — white on white, so
   the business names were invisible until one was hovered and the highlight
   put a blue background behind it.
   .top-lang-form select has carried this exact guard since it was written;
   this switcher was added later and never got it. */
.masthead-biz-switch select option { color: #000; background: #fff; }
.masthead-biz-name { font-size: 12px; color: #E8F1FC; display: flex; align-items: center; gap: 5px; white-space: nowrap; }

/* ── Notification bell + dropdown panel ── */
.notif-bell-wrap { position: relative; }
.notif-bell-btn {
    background: none; border: none; cursor: pointer; position: relative;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #E8F1FC; padding: 0;
}
.notif-bell-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.notif-bell-btn svg { width: 16px; height: 16px; fill: currentColor; }
.notif-badge {
    position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px;
    background: var(--xl-red, #C0392B); color: #fff; font-size: 9.5px; font-weight: 700;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    line-height: 1; border: 1.5px solid #16325C;
}
.notif-panel {
    position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 440px;
    background: #fff; border: 1px solid var(--xl-border); border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0,0,0,.2); z-index: 500; overflow: hidden;
    display: flex; flex-direction: column; color: #222;
}
.notif-panel-head {
    display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
    border-bottom: 1px solid var(--xl-border); font-size: 13px; font-weight: 700; color: #16325C;
}
.notif-mark-all { background: none; border: none; color: var(--xl-blue); font-size: 11.5px; cursor: pointer; padding: 0; font-weight: 600; }
.notif-mark-all:hover { text-decoration: underline; }
.notif-panel-list { overflow-y: auto; flex: 1; max-height: 340px; }
.notif-empty { padding: 28px 16px; text-align: center; font-size: 12.5px; color: #9AA6B5; }
.notif-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; text-decoration: none;
    color: #222; border-bottom: 1px solid #F0F2F5; position: relative;
}
.notif-item:hover { background: #F7F9FC; }
.notif-item.unread { background: #EEF4FC; }
.notif-item.unread:hover { background: #E4EEFB; }
.notif-item-icon {
    width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; background: var(--xl-blue-light); color: var(--xl-blue);
}
.notif-item-icon svg { width: 13px; height: 13px; fill: currentColor; }
.notif-item-icon.notif-type-overdue_receivable { background: #FDEEEC; color: var(--xl-red, #C0392B); }
.notif-item-icon.notif-type-expiry, .notif-item-icon.notif-type-low_stock { background: #FFF6E5; color: var(--xl-orange, #C2410C); }
.notif-item-icon.notif-type-leave_request { background: #EFF8EE; color: var(--xl-green, #1E8449); }
.notif-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-item-title { font-size: 12.5px; font-weight: 700; color: #16325C; }
.notif-item-msg { font-size: 11.5px; color: #6B7A90; line-height: 1.4; }
.notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--xl-blue); flex-shrink: 0; margin-top: 4px; }
.notif-panel-footer {
    display: block; text-align: center; padding: 10px; font-size: 12px; font-weight: 600;
    color: var(--xl-blue); text-decoration: none; border-top: 1px solid var(--xl-border); background: #FAFBFC;
}
.notif-panel-footer:hover { background: var(--xl-blue-light); }

.masthead-user { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.15); }
.user-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; flex-shrink: 0; }
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-name { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.user-role-badge { font-size: 9px; padding: 1px 6px; border-radius: 8px; display: inline-block; color: #fff; margin-top: 2px; text-transform: uppercase; letter-spacing: .03em; width: fit-content; }
.user-menu { display: flex; gap: 4px; }
.user-menu a { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; color: #E8F1FC; text-decoration: none; }
.user-menu a:hover { background: rgba(255,255,255,.12); color: #fff; }
.user-menu a svg { width: 13px; height: 13px; fill: currentColor; }

/* Deactivation countdown — deliberately alarming (red) since it's meant to
   create urgency about an approaching trial cutoff. */
.deactivation-countdown {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 4px;
    background: rgba(220, 38, 38, .12);
    border: 1px solid rgba(248, 113, 113, .45);
}
.countdown-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #FCA5A5;
}
.countdown-timer {
    font-family: 'Courier New', Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    color: #FF4D4D;
    letter-spacing: .02em;
}
.countdown-timer.countdown-critical { color: #FF1A1A; animation: countdown-pulse 1s infinite; }
.deactivation-countdown.countdown-expired { background: rgba(220,38,38,.28); border-color: #FF1A1A; }
.deactivation-countdown.countdown-expired .countdown-timer { animation: none; }
@keyframes countdown-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ══════════════════════════════════════════════════════════════
   HORIZONTAL NAV BAR  (tab row with dropdown submenus)
══════════════════════════════════════════════════════════════ */
.app-navbar {
    background: #fff;
    border-bottom: 1px solid var(--xl-border);
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0 12px;
    position: sticky;
    top: 46px;
    z-index: 240;
    overflow: visible;
}
.app-navbar .nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    color: #54698D;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: background .1s, color .1s;
}
.app-navbar .nav-item:hover  { color: var(--xl-navy); background: #FAFAF9; }
.app-navbar .nav-item.active { color: var(--xl-blue); border-bottom-color: var(--xl-blue); }
.nav-icon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-icon svg { width: 14px; height: 14px; fill: currentColor; }
.ico { width: 14px; height: 14px; vertical-align: -2px; fill: currentColor; display: inline-block; flex-shrink: 0; }
.ico-sm { width: 12px; height: 12px; vertical-align: -1px; }

/* ── Dropdown categories: open on hover (desktop). Mobile overrides this
   further down to a click-driven full-screen menu, since touch devices
   have no hover state. ── */
.nav-category { position: relative; display: flex; }
.nav-cat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #54698D;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .1s, color .1s;
}
.nav-cat-header:hover { color: var(--xl-navy); background: #FAFAF9; }
.nav-cat-header.nav-cat-active,
.nav-category:hover > .nav-cat-header,
.nav-category:focus-within > .nav-cat-header { color: var(--xl-blue); border-bottom-color: var(--xl-blue); }
.nav-cat-label { white-space: nowrap; }
.nav-cat-chevron {
    font-size: 14px;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
    opacity: 0.6;
}
.nav-category:hover > .nav-cat-header .nav-cat-chevron,
.nav-category:focus-within > .nav-cat-header .nav-cat-chevron { transform: rotate(-90deg); }

.nav-cat-items {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: #fff;
    border: 1px solid var(--xl-border);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
    /* Without an explicit z-index here, this sits at the same "auto"
       painting layer as every OTHER .nav-category (position:relative,
       also z-index:auto) — and layers with equal z-index paint in DOM
       order, not visual order. Since .app-navbar wraps onto a second
       row once the categories don't fit one line, a LATER category
       (e.g. "Help Center", deliberately last in bmsNavCategoryOrder())
       can end up sitting exactly where an EARLIER category's open
       dropdown renders, and — being later in the DOM — paints on top
       of it. Giving the dropdown its own stacking level fixes that
       regardless of which category wraps or how many there are. */
    z-index: 50;

    /* Long categories must stay reachable.
       "Purchasing & Inventory" now carries 19 entries. At ~35px each the menu
       is taller than the viewport, and because it opens downward from a navbar
       already 46px down the page, everything past roughly the 15th item fell
       below the fold with no way to reach it — the dropdown closes as soon as
       the pointer leaves it, so the page scrollbar is useless here.
       Capping the height and giving the menu its own scroll fixes it for any
       category length without hard-coding how many items fit. */
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    /* Stop the page behind from scrolling once the menu hits its end. */
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
/* Slim scrollbar so a scrolling menu doesn't look like a different component. */
.nav-cat-items::-webkit-scrollbar { width: 8px; }
.nav-cat-items::-webkit-scrollbar-track { background: transparent; }
.nav-cat-items::-webkit-scrollbar-thumb {
    background: #C9CFD9;
    border-radius: 4px;
    border: 2px solid #fff;
}
.nav-cat-items::-webkit-scrollbar-thumb:hover { background: #A8B2C1; }
.nav-category:hover > .nav-cat-items,
.nav-category:focus-within > .nav-cat-items { display: block; }
.nav-cat-items-inner { padding: 4px 0; }
.app-navbar .nav-cat-items .nav-item,
.nav-subitem {
    display: flex;
    padding: 9px 14px !important;
    color: var(--xl-navy);
    font-size: 12.5px;
    font-weight: 400;
    border-bottom: none !important;
}
.nav-subitem:hover { background: var(--xl-blue-light); color: var(--xl-navy); }
.nav-subitem.active { background: var(--xl-blue-light); color: var(--xl-blue); font-weight: 600; }
.nav-subitem .nav-icon { width: 16px; height: 16px; }
.nav-subitem .nav-icon svg { width: 13px; height: 13px; }

/* ══════════════════════════════════════════════════════════════
   MAIN CONTENT — full width now that there's no fixed sidebar
══════════════════════════════════════════════════════════════ */
.main-content {
    margin-left: 0;
    min-height: 100vh;
    background: #F3F2F2;
    min-width: 0;
}

/* ── Reusable in-page module tabs (e.g. "New Invoice" / "All Invoices") ── */
.module-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--xl-border);
}
.module-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 13px;
    font-weight: 600;
    color: #667;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
}
.module-tab svg { width: 14px; height: 14px; fill: currentColor; }
.module-tab:hover { background: #F3F6FA; color: var(--xl-navy); }
.module-tab.active { color: var(--xl-navy); border-bottom-color: var(--xl-blue); background: #EAF1FA; }
.module-tab .tab-count {
    background: rgba(0,0,0,.08);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
}
.module-tab.active .tab-count { background: var(--xl-blue); color: #fff; }
.module-tab-panel[hidden] { display: none; }

/* ── Page title bar (record-header style: title, actions, breadcrumb) ── */
.page-titlebar {
    background: var(--xl-white);
    padding: 0 16px;
    height: var(--toggle-h);
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--xl-border);
    box-shadow: var(--shadow);
}
.page-titlebar h1 {
    font-size: 15px;
    font-weight: 700;
    color: var(--xl-navy);
    letter-spacing: 0.1px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.page-titlebar h1 svg { width: 16px; height: 16px; fill: var(--xl-blue); }

/* Quick-help badge — auto-injected into every page's title bar by footer.php */
.quick-help-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 14px;
    background: var(--xl-blue-light);
    color: var(--xl-blue);
    border: 1px solid var(--xl-blue);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .1s, color .1s;
}
.quick-help-badge:hover { background: var(--xl-blue); color: #fff; }
.quick-help-badge svg { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; }
.page-titlebar p {
    font-size: 11px;
    color: #706E6B;
    margin-left: auto;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace { padding: 14px 16px; }

/* ══════════════════════════════════════════════════════════════
   DASHBOARD CARDS
══════════════════════════════════════════════════════════════ */
.xl-sheet {
    background: var(--xl-white);
    border: 1px solid var(--xl-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 14px;
    overflow: hidden;
}
.xl-section-header {
    /* NOT !important. An !important declaration in a stylesheet beats a normal
       inline style, so these two lines silently defeated the 17 views that set
       a dark header with style="background:#16325C;color:#fff" — the header
       rendered near-white, and any white text inside it became invisible.
       Nothing competes with these rules, so the !important was defending
       against nothing while breaking every deliberate override. */
    background: #FAFAF9;
    color: var(--xl-navy);
    font-weight: 700;
    font-size: 12.5px;
    padding: 10px 14px;
    letter-spacing: 0.1px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--xl-border);
    border-left: 3px solid var(--xl-blue);
    flex-wrap: wrap;
}
.xl-section-header svg { width: 14px; height: 14px; fill: var(--xl-blue) !important; opacity: 0.9; }
.xl-section-header.green  { border-left-color: var(--xl-green); }
.xl-section-header.green svg { fill: var(--xl-green) !important; }
.xl-section-header.orange { border-left-color: var(--xl-orange); }
.xl-section-header.orange svg { fill: var(--xl-orange) !important; }
.xl-section-header.red    { border-left-color: var(--xl-red); }
.xl-section-header.red svg { fill: var(--xl-red) !important; }
.xl-section-header.navy   { border-left-color: var(--xl-navy); }
.xl-section-header.blue   { border-left-color: var(--xl-blue); }

/* KPI grid — stat tiles: white cards, colored top accent + value */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    border: 1px solid var(--xl-border);
    border-radius: var(--radius);
    margin-bottom: 14px;
    background: var(--xl-white);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.kpi-card {
    padding: 13px 14px 11px;
    border-right: 1px solid var(--xl-border);
    border-top: 3px solid var(--xl-blue);
    background: var(--xl-white) !important;
    min-width: 0;
}
.kpi-card:last-child { border-right: none; }
.kpi-card.green  { border-top-color: var(--xl-green); }
.kpi-card.orange { border-top-color: var(--xl-orange); }
.kpi-card.blue   { border-top-color: var(--xl-blue); }
.kpi-card.red    { border-top-color: var(--xl-red); }
.kpi-label { font-size: 11px; font-weight: 700; margin-bottom: 5px; display: flex; align-items: center; gap: 5px; color: #706E6B; text-transform: uppercase; letter-spacing: .03em; }
.kpi-card.green  .kpi-label { color: var(--xl-green); }
.kpi-card.orange .kpi-label { color: var(--xl-orange); }
.kpi-card.blue   .kpi-label { color: var(--xl-blue); }
.kpi-card.red    .kpi-label { color: var(--xl-red); }
.kpi-label svg { width: 13px; height: 13px; fill: currentColor; }
.kpi-value { font-size: 21px; font-weight: 700; color: var(--xl-navy); letter-spacing: -0.3px; }
.kpi-card.green  .kpi-value { color: var(--xl-green); }
.kpi-card.orange .kpi-value { color: var(--xl-orange); }
.kpi-card.blue   .kpi-value { color: var(--xl-blue); }
.kpi-card.red    .kpi-value { color: var(--xl-red); }
.kpi-sub { font-size: 10px; margin-top: 2px; opacity: 0.75; }

/* Summary strip — the dashboard KPI look, for any number of cards
   ----------------------------------------------------------------------------
   .kpi-grid above is locked to four columns because the dashboard always shows
   exactly four. Ten other summary blocks — invoices, quotations, receivables,
   payables, VAT, expenses, purchases, credit notes, supplier ageing, opening
   balances — carry between three and six, so they each grew their own
   auto-fit grid of detached boxes with the padding, label size and value size
   written inline. Same intent, ten slightly different results, and no single
   place to change any of it.

   This is the dashboard treatment with the column count relaxed. Cards read as
   one connected strip rather than floating tiles, which is what makes a row of
   figures scan as a set.

   Named .summary-strip, NOT .kpi-strip: app/views/reception and
   app/views/print_pl each already declare a local .kpi-strip in their own
   <style> block with different rules. A global rule of that name would have
   applied to them too — and since this one paints the container in the border
   colour to draw its separators, reception's 10px gaps would have filled with
   grey, while print_pl would have picked up a box-shadow and rounded corners on
   a page meant for paper.

   Separators come from a 1px grid gap over a border-coloured background rather
   than a border-right on each card. With auto-fit the cards wrap, and
   :last-child only catches the final card overall — not the last one on each
   wrapped row, which would sit its own border flush against the container's
   and read as a double line. The gap has no such edge case. */
.summary-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--xl-border);
    border: 1px solid var(--xl-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 14px;
}
/* Cards inside a strip drop the fixed grid's own divider and keep their own
   background, so the 1px gaps above are what shows between them. */
.summary-strip > .kpi-card {
    border-right: none;
    background: var(--xl-white);
}
/* Slightly tighter than the dashboard: these strips carry up to six cards on
   screens the dashboard only ever puts four on. */
.summary-strip > .kpi-card .kpi-value { font-size: 19px; }

/* Legacy card bodies inside a strip
   ----------------------------------------------------------------------------
   Nineteen more views grew their own version of this block before there was a
   shared one — .kpi-row/.kpi-box, .ra-kpi-row/.ra-kpi, .stat-cards/.stat-card,
   .sm-cards/.sm-card and so on. Same idea nineteen times, each with its own
   names, and all of them detached centred boxes rather than the connected strip
   the dashboard uses.

   Rather than rewrite nineteen sets of markup, only the OUTER class is renamed
   to .summary-strip in each view. These rules then restyle whatever card class
   sits inside it. The element-qualified selectors (`> div`, `> a`) score 0,1,1
   against the 0,1,0 of a bare `.kpi-box`, so they win on specificity without
   !important — and any local modifier the view adds for colour or state still
   layers on top, which is exactly what should survive.

   .val and .lbl are reordered rather than moved in the HTML: these views put
   the number above its caption, the dashboard puts the caption first. `order`
   settles that without touching a single template. */
.summary-strip > div,
.summary-strip > a {
    background: var(--xl-white);
    border: 0;
    border-radius: 0;
    padding: 13px 14px 11px;
    text-align: left;
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
/* A card that was a link stays a link — products' catalogue counters filter the
   list when clicked, and losing that would be a silent loss of function. */
.summary-strip > a:hover { background: #F7F9FC; }

/* Qualified with `> div`/`> a` to score 0,2,1 against the 0,2,0 of a local
   `.kpi-box .val`. Without that the two tie on specificity and the view's own
   <style> block — which loads after this file — keeps its centred 22px
   Consolas figure, so the strip would adopt the new layout while every card
   inside it kept the old typography. */
.summary-strip > div .lbl,
.summary-strip > a .lbl {
    order: 1;
    font-size: 11px;
    font-weight: 700;
    color: #706E6B;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin: 0 0 5px;
}
.summary-strip > div .val,
.summary-strip > a .val {
    order: 2;
    font-size: 19px;
    font-weight: 700;
    color: var(--xl-navy);
    letter-spacing: -0.3px;
    font-family: inherit;
}

@media (max-width: 640px) {
    .summary-strip { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .summary-strip > .kpi-card,
    .summary-strip > div,
    .summary-strip > a { padding: 10px 11px 9px; }
    .summary-strip > .kpi-card .kpi-value,
    .summary-strip > div .val,
    .summary-strip > a .val { font-size: 16px; }
}

/* Tables — spreadsheet grid style
   ----------------------------------------------------------------------------
   Full gridlines rather than horizontal rules only. Every list in the system
   uses table.xl (53 views), so this is the single place that governs how they
   all read. Cells are bordered on all four sides the way a spreadsheet is,
   which makes wide financial tables far easier to track across a row.
   Outer frame comes from .xl-table-wrap so the edge stays crisp when the
   table scrolls horizontally. */
.xl-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--xl-border-dark);
    border-radius: 3px;
    background: var(--xl-white);
}
table.xl { width: 100%; border-collapse: collapse; font-size: 12.5px; }

table.xl thead th {
    background: #EEF1F6 !important; color: var(--xl-navy) !important;
    padding: 9px 10px; text-align: left; font-weight: 700;
    font-size: 11px; text-transform: uppercase; letter-spacing: .02em;
    border: 1px solid var(--xl-border-dark);
    border-bottom-width: 2px;
    white-space: nowrap;
    position: sticky; top: 0; z-index: 2;   /* header stays put on long lists */
}
table.xl thead th.navy, table.xl thead th.green { background: #EEF1F6 !important; color: var(--xl-navy) !important; }

table.xl tbody td {
    padding: 7px 10px;
    border: 1px solid var(--xl-border);
    vertical-align: middle;
    background: var(--xl-white);
}
table.xl tbody tr:nth-child(even) td { background: var(--xl-gray-row); }
table.xl tbody tr:hover td { background: var(--xl-blue-light) !important; }

/* Numeric columns read better in a fixed-width face when gridlined. */
table.xl td.text-right, table.xl td.mono { font-variant-numeric: tabular-nums; }

/* An empty list shouldn't be carved into a grid — it has no columns to track. */
table.xl tbody td.empty-state { border-left: none; border-right: none; text-align: center; }

table.xl tfoot td { padding: 6px 8px; font-weight: 700; background: var(--xl-navy); color: #fff; border: 1px solid var(--xl-border-dark); }

/* Filter bars above list views — shared by every module. */
.xl-filter-bar {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
    margin-bottom: 14px; padding: 10px 14px;
    background: #F4F6F9; border: 1px solid #D8DDE6; border-radius: 5px;
}
.xl-filter-bar .form-group { margin: 0; }
.xl-filter-bar label { font-size: 11px; }
/* The search box is the field people actually use — give it the room. */
.xl-filter-bar .filter-search { flex: 1 1 320px; min-width: 260px; }
.xl-filter-bar .filter-search input { width: 100%; }
.xl-filter-bar .filter-date input { width: 150px; }

/* ── Square controls, system-wide ────────────────────────────────────────────
   Every form control and button has square corners. The base rules above
   already set border-radius: 0, but inline style="" attributes beat any
   stylesheet rule, and there are a number of those scattered through the
   views (plus markup built in JavaScript). !important is used deliberately
   and only here: this is a global normalisation, not a one-off override, and
   without it the result would depend on which template a control happens to
   live in.

   Radio buttons and checkboxes are deliberately EXCLUDED. Browsers render
   those natively — a radio is round because the platform draws it that way,
   not because of CSS — so forcing square corners on them either does nothing
   or breaks the native control's appearance.

   Containers (cards, panels, alerts, chart boxes) keep their --radius.
   This is about controls only. */
input:not([type=radio]):not([type=checkbox]),
select,
textarea,
button,
.btn,
.btn-sm,
.del-btn,
a.btn,
input[type=submit],
input[type=button],
input[type=reset] {
    border-radius: 0 !important;
}

/* ── Typeahead result tables ─────────────────────────────────────────────────
   The supplier and customer lookups render their suggestions as a real table
   with a header row, so the figures line up in columns instead of being read
   out of a sentence. Same gridlines and header treatment as table.xl, at a
   tighter scale — this sits inside a dropdown, not on the page.

   The dropdown sizes itself to its content (width: max-content) rather than
   the width of the input, because an input is usually far narrower than eight
   columns of data. */
.ta-panel {
    display: none;
    /* Anchored to the bottom-left of the positioned wrapper, rather than
       relying on the element's static flow position — the wrappers contain
       labels and hidden inputs, so flow position is not reliably under the
       visible field. */
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 300;
    background: var(--xl-white);
    border: 1px solid var(--xl-border-dark);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    max-height: 320px;
    overflow: auto;
    min-width: 100%;
    width: max-content;
    max-width: min(92vw, 940px);
}
table.ta-table { border-collapse: collapse; width: 100%; font-size: 11.5px; }

/* Secondary unit hint in the item-search Stock column: the whole-pack
   breakdown beside a base-unit count, or the word "packs" beside a pack
   count. Muted so the number still reads first. */
/* Minimum-price column: the floor. Coloured so a cashier scanning the row
   registers it as a limit rather than just another number. */
table.ta-table .ta-min { color: #BA0517; font-weight: 600; }

/* POS per-line P/W toggle. Small, but it changes both the price and how much
   stock the line removes, so it reads as a control rather than a label. */
.pos-pw {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 17px; margin-left: 6px; padding: 0 5px;
    border: 1px solid #16325C; border-radius: 3px;
    background: #16325C; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer;
}
.pos-pw:hover { background: #0070D2; border-color: #0070D2; }

/* Out of stock, stated rather than left as an unremarkable 0. */
table.ta-table .ta-zero { color: #BA0517; }

/* ── Stock, made scannable ───────────────────────────────────────────────
   The stock column now leads with the pack notation the rest of the system
   speaks ("2W 5P"), with the base-unit figure beside it as a hint. Colour
   repeats what the figure already says, so the list can be scanned for what
   is actually available without reading every row — and nothing depends on
   colour alone, so it survives printing and colour blindness. */
table.ta-table .ta-stock { white-space: nowrap; }
table.ta-table .ta-stock-ok   { color: #04844B; font-weight: 700; }
table.ta-table .ta-stock-low  { color: #B7791F; font-weight: 700; }
table.ta-table .ta-stock-none { color: #BA0517; font-weight: 700; }
/* Expired: on the shelf, refused at the till. Struck through because it is
   stock you have but cannot sell. */
table.ta-table .ta-stock-exp {
    color: #BA0517; font-size: 10px; font-weight: 600;
    text-decoration: line-through; margin-left: 4px; opacity: .85;
}

/* No price set. Distinguished from a genuine 0.00 so "free" and "nobody has
   priced this yet" do not look identical in a list you pick from. */
table.ta-table .ta-nopx { color: #BA0517; font-style: italic; font-size: 10.5px; }

table.ta-table .ta-hint {
    color: #8A94A6;
    font-size: 10px;
    font-weight: 400;
    white-space: nowrap;
}

table.ta-table thead th {
    background: #EEF1F6;
    color: var(--xl-navy);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-align: left;
    padding: 5px 8px;
    border: 1px solid var(--xl-border-dark);
    white-space: nowrap;
    position: sticky;   /* headers stay put while scrolling long result sets */
    top: 0;
    z-index: 1;
}
table.ta-table tbody td {
    padding: 5px 8px;
    border: 1px solid var(--xl-border);
    white-space: nowrap;
    background: var(--xl-white);
}
table.ta-table tbody tr { cursor: pointer; }
table.ta-table tbody tr:nth-child(even) td { background: var(--xl-gray-row); }
/* Hover and keyboard focus share one highlight so both feel the same. */
table.ta-table tbody tr:hover td,
table.ta-table tbody tr.ta-active td { background: #FFF3CD !important; }

table.ta-table .ta-num  { text-align: right; font-variant-numeric: tabular-nums; }
table.ta-table .ta-name { font-weight: 700; color: var(--xl-navy); }
table.ta-table .ta-code { color: #555; }
table.ta-table .ta-due  { color: var(--xl-red); font-weight: 700; }
/* Pack rows are secondary to their product — muted, but still legible. Set as
   a class rather than inline, because an inline colour would beat .ta-due and
   the out-of-stock warning would never show. */
table.ta-table .ta-muted { color: #888; }
table.ta-table .ta-ok   { color: var(--xl-green); }
table.ta-table .ta-none td { padding: 10px; color: #999; text-align: center; cursor: default; }

@media (max-width: 900px) {
    /* A wide table inside a dropdown is unusable on a phone; let it scroll. */
    .ta-panel { max-width: 96vw; }
    table.ta-table { font-size: 11px; }
    table.ta-table thead th, table.ta-table tbody td { padding: 4px 6px; }
}

/* ── Calculated boxes on an item-entry row ──────────────────────────────────
   Read-only figures that update as the line is typed. Styled to sit level with
   the inputs beside them but clearly not editable — the value is derived, and
   an input-looking box invites someone to type into it. */
.entry-calc {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 8px;
    border: 1px solid var(--xl-border);
    background: #F4F6F9;
    font-size: 12px;
    font-weight: 700;
    color: var(--xl-navy);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
}
.entry-calc-nett { background: #EAF3EA; color: var(--xl-green); }

/* P&L specifics */
.pl-section td { background: var(--xl-navy) !important; color: var(--xl-blue-light) !important; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; padding: 5px 10px; border: 1px solid var(--xl-border-dark); }
.pl-total  td  { background: var(--xl-blue-light) !important; font-weight: 700; color: var(--xl-navy) !important; border: 1px solid var(--xl-border-dark); }
.pl-net    td  { background: var(--xl-navy) !important; color: #fff !important; font-weight: 700; font-size: 13px; border: 1px solid var(--xl-border-dark); }

/* Colors */
.c-green  { color: var(--xl-green);  font-weight: 600; }
.c-red    { color: var(--xl-red);    font-weight: 600; }
.c-orange { color: var(--xl-orange); font-weight: 600; }
.c-blue   { color: var(--xl-blue);   font-weight: 600; }
.c-muted  { color: #888; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.mono { font-family: 'Consolas','Courier New',monospace; }

/* Badges — pill-shaped status tags */
.badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.badge-green  { background: var(--xl-green-light);  color: var(--xl-green);  border: 1px solid transparent; }
.badge-red    { background: var(--xl-red-light);    color: var(--xl-red);    border: 1px solid transparent; }
.badge-orange { background: var(--xl-orange-light); color: var(--xl-orange); border: 1px solid transparent; }
.badge-blue   { background: var(--xl-blue-light);   color: var(--xl-blue);   border: 1px solid transparent; }
.badge-gray   { background: #F3F2F2; color: #54698D; border: 1px solid transparent; }

/* Alert */
.alert { padding: 9px 14px; font-size: 12px; font-weight: 600; margin-bottom: 12px; border: 1px solid; border-radius: var(--radius); }
.alert-success { background: var(--xl-green-light); color: var(--xl-green); border-color: var(--xl-green); }
/* .alert-danger is the name every view actually emits — 7 files use it, and
   it was defined nowhere, so every error message in the system rendered with
   the base .alert only: no background, and `border: 1px solid` with no colour,
   which resolves to the text colour. Errors looked like plain grey boxes and
   read as ordinary notices.

   .alert-error kept as an alias: it was the only variant defined, and is used
   by nothing, but a stray reference in a template not covered here would
   otherwise break the same way. */
.alert-error,
.alert-danger  { background: var(--xl-red-light);   color: var(--xl-red);   border-color: var(--xl-red); }
/* Warning and info are emitted by bmsFlash() — a partly-failed campaign send, a
   rollback that restored nothing. Neither is a failure, and colouring them red
   would misreport what happened. */
.alert-warning { background: var(--xl-orange-light); color: var(--xl-orange); border-color: var(--xl-orange); }
.alert-info    { background: var(--xl-blue-light);   color: var(--xl-blue);   border-color: var(--xl-blue); }

/* Balance bar */
.balance-bar { display: flex; gap: 0; background: var(--xl-white); border: 1px solid var(--xl-border); border-radius: var(--radius); margin-bottom: 14px; box-shadow: var(--shadow); flex-wrap: wrap; overflow: hidden; }
.balance-item { flex: 1; min-width: 140px; padding: 10px 14px; border-right: 1px solid var(--xl-border); }
.balance-item:last-child { border-right: none; }
.balance-item .bl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px; color: #706E6B; }
.balance-item .bv { font-size: 16px; font-weight: 700; font-family: var(--font); color: var(--xl-navy); }

/* Forms — white fields, thin gray border, blue focus ring */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 10px 12px; padding: 14px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
label { font-size: 10.5px; font-weight: 700; color: #54698D; text-transform: uppercase; letter-spacing: 0.3px; }
input[type=text], input[type=number], input[type=date], input[type=email], input[type=file],
select, textarea {
    background: #fff; border: 1px solid #C9C7C5; border-radius: 0;
    color: var(--xl-navy); padding: 6px 9px; font-size: 12.5px; font-family: var(--font); width: 100%;
    transition: border-color 0.1s, box-shadow 0.1s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--xl-blue);
    box-shadow: 0 0 0 3px rgba(0,112,210,0.18); background: #fff;
}
select   { background: #fff; }
textarea { resize: vertical; min-height: 60px; background: #fff; }
.form-actions { padding: 12px 14px; background: #FAFAF9; border-top: 1px solid var(--xl-border); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Buttons — square edges, matching the inputs */
.btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 0; border: 1px solid; cursor: pointer; font-size: 12px; font-family: var(--font); font-weight: 600; transition: all 0.1s; text-decoration: none; white-space: nowrap; }
.btn svg { width: 13px; height: 13px; fill: currentColor; }
.btn-primary { background: var(--xl-blue);  border-color: var(--xl-blue); color: #fff; }
.btn-primary:hover { background: #005FB2; border-color: #005FB2; }
.btn-success { background: var(--xl-green); border-color: var(--xl-green); color: #fff; }
.btn-success:hover { background: #036A3D; border-color: #036A3D; }
.btn-danger  { background: var(--xl-red);   border-color: var(--xl-red); color: #fff; }
.btn-danger:hover  { background: #B30000; border-color: #B30000; }
.btn-outline { background: var(--xl-white); border-color: var(--xl-blue); color: var(--xl-blue); }
.btn-outline:hover { background: var(--xl-blue-light); }

/* Outline button sitting ON a dark bar.
   .btn-outline is white-background / blue-text, so forcing color:#fff inline
   to suit a navy header produced white text on a white button — the label
   vanished and only the icon showed. This inverts the whole button instead of
   just the text, which is what "outline on dark" actually means. */
.btn-outline.on-dark {
    background: transparent;
    border-color: rgba(255,255,255,.55);
    color: #fff;
}
.btn-outline.on-dark:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.btn-outline.on-dark svg    { fill: currentColor; }
.btn-sm { padding: 4px 10px; font-size: 11px; }
.del-btn { background: none; border: 1px solid transparent; color: var(--xl-red); cursor: pointer; font-size: 11px; padding: 2px 6px; display: inline-flex; align-items: center; gap: 3px; border-radius: 0; }
.del-btn:hover { background: var(--xl-red-light); border-color: var(--xl-red); }
.del-btn svg { width: 12px; height: 12px; fill: var(--xl-red); }

/* Layout */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

/* Empty state */
.empty-state { text-align: center; padding: 30px 20px; color: #aaa; font-size: 12px; }
.empty-state svg { width: 32px; height: 32px; fill: #ccc; display: block; margin: 0 auto 8px; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #F3F2F2; }
::-webkit-scrollbar-thumb { background: var(--xl-blue-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--xl-blue); }

/* Charts */
.chart-grid   { display: grid; grid-template-columns: 1fr 1fr;     gap: 14px; margin-bottom: 14px; }
.chart-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.chart-box { background: #fff; border: 1px solid var(--xl-border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 0; overflow: hidden; }
.chart-box canvas { display: block; }
.chart-box > canvas { max-height: 260px; }
.chart-box-wide canvas { max-height: 200px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 900px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .kpi-grid   { grid-template-columns: 1fr 1fr; }
    .two-col    { grid-template-columns: 1fr; }
    .chart-grid, .chart-grid-3 { grid-template-columns: 1fr; }
    .page-titlebar p { display: none; } /* hide subtitle on small screens */
    .workspace  { padding: 10px 12px; }
    .masthead-biz-name, .masthead-biz-switch { display: none; } /* reclaim space; still reachable via Owner Dashboard */
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 700px)
   The horizontal nav bar collapses into a hamburger-toggled
   full-screen dropdown menu instead of a row of tabs.
══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    /* Show the hamburger, hide the brand text to make room for search */
    .sidebar-toggle { display: flex; }
    .app-masthead { padding-left: 52px; gap: 10px; }
    .user-meta { display: none; } /* keep just the avatar on tiny screens */
    .top-lang-form select { max-width: 90px; }
    .countdown-label { display: none; }

    /* Nav bar becomes a full-screen dropdown panel, closed by default */
    .app-navbar {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        flex-direction: column;
        align-items: stretch;
        overflow-y: auto;
        padding: 56px 0 16px;
        z-index: 260;
    }
    body.sidebar-open .app-navbar    { display: flex; }
    body.sidebar-open .sidebar-overlay { display: block; }

    .app-navbar .nav-item,
    .nav-cat-header {
        padding: 13px 18px;
        font-size: 14px;
        border-bottom: none;
        border-left: 3px solid transparent;
    }
    .app-navbar .nav-item.active,
    .nav-cat-header.nav-cat-active,
    .nav-category.open > .nav-cat-header {
        border-left-color: var(--xl-blue);
        border-bottom: none;
        background: var(--xl-blue-light);
    }
    .nav-category { flex-direction: column; display: flex; }
    .nav-cat-items {
        display: none;
        position: static;
        min-width: 0;
        border: none;
        box-shadow: none;
        border-radius: 0;
        background: #FAFAF9;
        /* The desktop cap doesn't apply here: on mobile the category expands
           inline and the drawer itself scrolls, so a nested scroll region
           would trap the finger and make the menu feel broken. */
        max-height: none;
        overflow: visible;
    }
    .nav-category.open > .nav-cat-items { display: block; }
    .nav-subitem { padding: 12px 18px 12px 44px; font-size: 13px; }

    .btn      { padding: 8px 14px; font-size: 13px; }
    .btn-sm   { padding: 6px 12px; font-size: 12px; }

    /* Full-width KPI cards stacked */
    .kpi-grid { grid-template-columns: 1fr; }
    .kpi-card { border-right: none; border-bottom: 1px solid var(--xl-border-dark); }
    .kpi-value { font-size: 24px; }

    /* Full-width balance bar stacked */
    .balance-bar  { flex-direction: column; }
    .balance-item { border-right: none; border-bottom: 1px solid var(--xl-border); }

    /* Tables — allow horizontal scroll, slightly larger text */
    table.xl { font-size: 12px; }
    table.xl thead th, table.xl tbody td { padding: 6px 8px; }
    /* Stacked, full-width filters — a 320px search box in a 380px viewport
       leaves no room for anything beside it. */
    .xl-filter-bar { gap: 8px; padding: 8px 10px; }
    .xl-filter-bar .filter-search { flex: 1 1 100%; min-width: 0; }
    .xl-filter-bar .filter-date { flex: 1 1 45%; }
    .xl-filter-bar .filter-date input { width: 100%; }

    /* Forms */
    .form-grid { grid-template-columns: 1fr !important; }
    input[type=text], input[type=number], input[type=date],
    input[type=email], select, textarea { font-size: 16px; padding: 8px 10px; } /* 16px prevents iOS zoom */

    /* Workspace padding */
    .workspace { padding: 8px 10px; }
    .page-titlebar { padding-right: 10px; }
    .page-titlebar h1 { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════════ */
@media print {
    .app-masthead, .app-navbar, .sidebar-toggle, .sidebar-overlay { display: none !important; }
    .main-content { margin-left: 0 !important; }
    body { background: #fff !important; }
}

/* ── Customer record form ────────────────────────────────────────────────────
   The customer form grew from 6 fields to ~30. Grouped into labelled sections
   so it reads as a record rather than a wall of inputs — someone adding a
   walk-in should be able to fill the top section and stop. */
.cust-sec {
    background: var(--xl-navy); color: #fff;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: 6px 10px; margin: 14px 0 10px;
}
.cust-sec:first-child { margin-top: 0; }
.cust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cust-grid .form-group { margin: 0; }
/* Explains why a field exists, without a tooltip nobody hovers. */
.cust-hint { font-size: 10px; color: #888; margin-top: 3px; line-height: 1.45; }
@media (max-width: 700px) { .cust-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   DOCUMENT HEADER LAYOUT
   ═══════════════════════════════════════════════════════════════════════════

   Every document form — cash invoice, supplier invoice, quotation, credit
   note, goods return, purchase order — hand-rolled its own header with an
   inline `style="display:grid;grid-template-columns:1fr 1fr 1fr"`. Two
   consequences:

   1. Nothing lined up between forms, because each one picked its own column
      count and gap.
   2. Nothing lined up WITHIN a form either. An auto-flow grid fills
      left-to-right, so fields landed wherever the previous one ended: the
      supplier invoice put Date, Order No and Purchase Code on one row — three
      fields with nothing to do with each other — while Supplier sat under
      Date and Pay Due sat under CU Invoice No.

   The fix is grouping by MEANING first and alignment second. Three panels,
   each holding fields that belong together, and inside a panel the labels
   share one column so every input starts at the same x position.

   Label beside the field rather than above it. Above is fine for a sparse
   form; for a dense document header it doubles the height and makes the eye
   travel down-and-right for every value. Beside, with a fixed label column,
   gives a straight edge to scan.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Three panels across. Collapses to two, then one. minmax(0,1fr) rather than
   1fr so a long select or a wide value cannot push a column past its share —
   the usual cause of one panel creeping wider than its neighbours. */
.doc-header {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    align-items: start;
}
@media (max-width: 1200px) { .doc-header { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px)  { .doc-header { grid-template-columns: minmax(0,1fr); } }

.doc-panel {
    border: 1px solid var(--xl-border);
    background: #FCFCFD;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;               /* lets children shrink instead of overflowing */
}
.doc-panel-title {
    font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
    color: var(--xl-blue); padding-bottom: 6px; margin-bottom: 1px;
    border-bottom: 1px solid var(--xl-border);
}

/* One label/field row. The label column is fixed so every input in the panel
   starts at the same place; that shared left edge is what makes a dense header
   readable. 104px fits the longest label in use ("Supplier Date", "Purchase
   Code") without wrapping at the default font size. */
.doc-field {
    display: grid;
    /* 118px, measured rather than guessed. The widest labels in use are
       "Reason for return" and "Expected Delivery" at ~100px, and the widest
       translation is Somali "Shaqeynaysa Ilaa" (Valid Until) at ~94px. At
       104px both filled the column and the dotted leader had nowhere to
       render; 118px leaves it visible and gives headroom for a longer
       translation without the label wrapping. */
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.doc-field > label {
    font-size: 10.5px; font-weight: 700; color: #54698D;
    text-transform: none;        /* sentence case: "Supplier Date" reads faster
                                    than "SUPPLIER DATE" at this density */
    letter-spacing: 0;
    text-align: left;
    line-height: 1.25;
    margin: 0;
    /* Dotted leader to the field, as on a printed form. Carries the eye across
       the gap when a label is short and the field is far right. */
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.doc-field > label::after {
    content: " ....................................................";
    color: #C9CFD8;
    letter-spacing: 1px;
}
/* A required marker must not be eaten by the leader. */
.doc-field > label .req { color: var(--xl-red); font-weight: 800; }

/* The real controls. Note .doc-control is NOT in this list.
 *
 * It was, and that was the customer/supplier field's inconsistent width:
 * .doc-control is a WRAPPER, so giving it `padding: 5px 8px` inset the input
 * inside it by 8px on each side. Next to a bare <input> spanning the whole
 * column, the wrapped one sat 8px in from both edges and looked narrower —
 * which is exactly what it was. The inner input also never picked up
 * width:100% or the shared padding, because `.doc-field > input` does not
 * match a grandchild. */
.doc-field > input,
.doc-field > select,
.doc-field > textarea,
.doc-field > .doc-control > input,
.doc-field > .doc-control > select {
    width: 100%;
    min-width: 0;
    padding: 5px 8px;            /* slightly tighter than a standalone form */
    font-size: 12px;
    box-sizing: border-box;      /* so padding never widens it past the column */
}
/* The wrapper itself is layout only: full width, no padding, no border. */
.doc-field > .doc-control {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
}
.doc-field > textarea { min-height: 34px; }

/* Wrapper for a field that needs more than a bare input — an autocomplete with
   a results panel, or an input plus a clear button. Keeps the row's alignment
   while letting the inside be anything. */
.doc-control { position: relative; display: block; }

/* `.wide` used to collapse the label column so the control filled the panel.
   That was the wrong call: it put Notes' input hard against the panel's left
   edge while every other input started at 104px, so a panel with one wide
   field had two different left margins in it — the exact inconsistency this
   layout exists to remove.

   Every field now uses the same two columns. A long value is not a reason to
   move where the control starts; it is a reason to give it more room, which
   the second column already does. `.wide` is kept as a marker for controls
   that may need extra vertical space (textareas, long selects) and no longer
   changes the horizontal alignment at all. */
.doc-field.wide > textarea { min-height: 52px; }

/* One height for every control in the grid, whatever it is — input, select,
   textarea, or a PHP-emitted widget like the branch pill. Without this a
   26px input sits next to a 32px pill and the rows visibly step. */
.doc-field > input,
.doc-field > select,
.doc-field > .doc-control > input,
.doc-field > .branch-pill,
.doc-field > .doc-control { min-height: 28px; }
.doc-field > textarea { min-height: 28px; }

/* The branch control is emitted by branchSelect() in PHP and carried its own
   padding and 4px radius, so it rendered taller and rounder than every input
   beside it. Metrics now match the inputs; the square corner matches the rest
   of the application. */
.branch-pill {
    display: flex; align-items: center; gap: 7px;
    padding: 5px 8px;
    background: #F4F6F9; border: 1px solid #C9C7C5; border-radius: 0;
    font-size: 12px; color: var(--xl-navy);
    min-height: 28px; box-sizing: border-box;
}
.branch-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #2E844A; flex: 0 0 auto; }
.branch-pill .note { margin-left: auto; font-size: 10px; color: #8A94A6; white-space: nowrap; }
.branch-pill.readonly { background: #FFF4E5; border-color: #F0C98A; color: #8A5300; }

/* Read-only / posted state: still aligned, visibly not editable. */
.doc-field input[disabled], .doc-field select[disabled], .doc-field textarea[disabled],
.doc-field input[readonly] { background: #F4F6F9; color: #6B7A90; }

/* Pack-size fields on item-entry rows (cash invoice, quotations, credit
   notes, daily sales): filled automatically from the product's own
   pack_size the moment it's picked, and locked from there — the pack
   size is a property of the product, not something to retype per line,
   and a mistyped value here would silently miscalculate every W-line
   total on that row. readonly (not disabled) so the value still submits
   with the form and stays readable by the row's own recalculation JS. */
.pack-locked { background: #F4F6F9 !important; color: #6B7A90 !important; cursor: not-allowed; }

@media (max-width: 520px) {
    /* Stacked: a 118px label column leaves nothing for the input on a phone. */
    .doc-field, .doc-field.wide { grid-template-columns: minmax(0,1fr); gap: 3px; }
    .doc-field > label { overflow: visible; }
    .doc-field > label::after { content: ""; }
}


/* ===========================================================================
   HELP CENTER
   ===========================================================================
   Reuses the app palette rather than introducing one: navy for headings, blue
   for links and actions, the same borders and sheet treatment as every other
   screen. Help that looks like a different product reads as a bolt-on.
   ======================================================================== */

/* ── Hub hero ─────────────────────────────────────────────────────────── */
.help-hero {
    background: linear-gradient(180deg, #16325C 0%, #1E4079 100%);
    color: #fff; padding: 22px 24px 20px; border-radius: 4px; margin-bottom: 14px;
}
.help-hero h2 { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
.help-hero-note { font-size: 11.5px; opacity: .8; margin: 9px 0 0; }

.help-search { display: flex; align-items: center; gap: 0; max-width: 560px; position: relative; }
.help-search .ico { position: absolute; left: 11px; width: 15px; height: 15px; fill: #8A94A6; pointer-events: none; }
.help-search input {
    flex: 1; padding: 9px 12px 9px 34px; font-size: 13px; font-family: inherit;
    border: 1px solid #D8DDE6; border-radius: 3px 0 0 3px; min-width: 0;
}
.help-search input:focus { outline: none; box-shadow: 0 0 0 2px rgba(0,112,210,.35); }
.help-search button {
    padding: 9px 18px; font-size: 13px; font-weight: 600; font-family: inherit;
    background: #0070D2; color: #fff; border: 1px solid #005FB2;
    border-radius: 0 3px 3px 0; cursor: pointer;
}
.help-search button:hover { background: #005FB2; }
.help-search.sm input { padding: 6px 10px 6px 30px; font-size: 12px; border-radius: 3px; }
.help-search.sm .ico { left: 9px; width: 13px; height: 13px; }

/* ── Category cards ───────────────────────────────────────────────────── */
.help-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.help-cat-card {
    display: block; background: #fff; border: 1px solid var(--xl-border);
    border-radius: 4px; padding: 14px 16px; text-decoration: none; color: inherit;
    box-shadow: var(--shadow); transition: border-color .12s, box-shadow .12s;
}
.help-cat-card:hover { border-color: #0070D2; box-shadow: 0 2px 10px rgba(0,112,210,.16); }
.help-cat-card:focus-visible { outline: 2px solid #0070D2; outline-offset: 2px; }
.help-cat-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 7px; }
.help-cat-icon { flex-shrink: 0; }
.help-cat-icon svg { width: 22px; height: 22px; fill: #0070D2; }
.help-cat-title { display: block; font-size: 14px; font-weight: 700; color: #16325C; }
.help-cat-count { display: block; font-size: 11px; color: #706E6B; }
.help-cat-intro { font-size: 11.5px; color: #555; line-height: 1.5; margin: 0 0 9px; }
.help-cat-groups { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--xl-border); padding-top: 7px; }
.help-cat-groups li {
    display: flex; justify-content: space-between; gap: 8px;
    font-size: 11.5px; color: #16325C; padding: 2px 0;
}
.help-cat-groups li span { color: #9AA0A6; }

/* ── Breadcrumb ───────────────────────────────────────────────────────── */
.help-crumb { font-size: 11.5px; color: #706E6B; margin-bottom: 12px; }
.help-crumb a { color: #0070D2; text-decoration: none; }
.help-crumb a:hover { text-decoration: underline; }
.help-crumb span { margin: 0 5px; color: #C9CDD3; }
.help-crumb strong { color: #16325C; }

.help-cat-intro-bar {
    display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
    margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--xl-border);
}
.help-cat-intro-bar p { flex: 1 1 320px; font-size: 12.5px; color: #555; margin: 0; line-height: 1.5; }

/* ── Topic cards ──────────────────────────────────────────────────────── */
.help-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1px; background: var(--xl-border); }
.help-topic-card { display: block; background: #fff; padding: 11px 14px; text-decoration: none; color: inherit; }
.help-topic-card:hover { background: #F4F9FF; }
.help-topic-card:focus-visible { outline: 2px solid #0070D2; outline-offset: -2px; }
.help-topic-title { display: block; font-size: 12.5px; font-weight: 700; color: #16325C; margin-bottom: 3px; }
.help-topic-summary { display: block; font-size: 11.5px; color: #666; line-height: 1.5; }
.help-badge-video {
    display: inline-flex; align-items: center; gap: 3px; margin-left: 6px;
    background: #FDE4E4; color: #C0392B; font-size: 9.5px; font-weight: 700;
    padding: 1px 6px; border-radius: 2px; vertical-align: 1px;
}
.help-badge-video .ico { width: 9px; height: 9px; }

/* ── Article ──────────────────────────────────────────────────────────── */
.help-article-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 14px; align-items: start; }
.help-body { padding: 14px 16px; }
/* Under 80 characters a line — long help paragraphs are read, not skimmed. */
.help-body p { font-size: 13px; line-height: 1.65; color: #333; margin: 0 0 10px; max-width: 68ch; }
.help-body p:last-child { margin-bottom: 0; }
.help-lede { font-size: 14px !important; font-weight: 600; color: #16325C !important; }
.help-steps { margin: 0; padding: 12px 16px 14px 38px; }
.help-steps li { font-size: 12.5px; line-height: 1.6; color: #333; margin-bottom: 7px; max-width: 66ch; }
.help-steps li:last-child { margin-bottom: 0; }
.help-tips { margin: 0; padding: 12px 16px 14px 34px; }
.help-tips li { font-size: 12.5px; line-height: 1.6; color: #333; margin-bottom: 6px; }

.help-faq { padding: 6px 16px 12px; }
.help-faq details { border-bottom: 1px solid var(--xl-border); padding: 8px 0; }
.help-faq details:last-child { border-bottom: none; }
.help-faq summary { font-size: 12.5px; font-weight: 600; color: #16325C; cursor: pointer; }
.help-faq summary:focus-visible { outline: 2px solid #0070D2; outline-offset: 2px; }
.help-faq p { font-size: 12.5px; line-height: 1.6; color: #555; margin: 7px 0 0; max-width: 66ch; }

.help-article-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.help-noaccess { font-size: 11.5px; color: #7A4F00; background: #FFF3CD; padding: 6px 11px; border-radius: 3px; display: inline-flex; align-items: center; gap: 5px; }

/* ── Player ───────────────────────────────────────────────────────────── */
.help-player { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 3px 3px 0 0; overflow: hidden; }
.help-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.help-player-facade { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; position: relative; }
.help-player-facade img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .82; transition: opacity .15s; }
.help-player-facade:hover img { opacity: 1; }
.help-player-facade:focus-visible { outline: 3px solid #0070D2; outline-offset: -3px; }
.help-player-btn {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.help-player-btn svg { width: 46px; height: 46px; fill: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
.help-player-note { font-size: 10.5px; color: #888; padding: 8px 14px 12px; margin: 0; line-height: 1.5; }

.help-chapters { list-style: none; margin: 0; padding: 6px 0 0; border-top: 1px solid var(--xl-border); }
.help-chapters li { border-bottom: 1px solid var(--xl-hair, #EEF3FA); }
.help-chapters li:last-child { border-bottom: none; }
.help-chapters button {
    display: flex; gap: 9px; width: 100%; text-align: left; background: none; border: 0;
    padding: 6px 14px; font-size: 11.5px; font-family: inherit; color: #16325C; cursor: pointer;
}
.help-chapters button:hover { background: #F4F9FF; }
.help-chapters button:focus-visible { outline: 2px solid #0070D2; outline-offset: -2px; }
.help-chapter-time { font-variant-numeric: tabular-nums; color: #0070D2; font-weight: 600; flex-shrink: 0; }

.help-video-empty, .help-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 5px; padding: 26px 18px; color: #888;
}
.help-video-empty svg, .help-empty svg { width: 26px; height: 26px; fill: #C9CDD3; }
.help-video-empty strong, .help-empty strong { font-size: 12.5px; color: #16325C; }
.help-video-empty span, .help-empty span { font-size: 11.5px; line-height: 1.5; max-width: 40ch; }

.help-related { list-style: none; margin: 0; padding: 8px 0; }
.help-related li { border-bottom: 1px solid var(--xl-border); }
.help-related li:last-child { border-bottom: none; }
.help-related a { display: block; padding: 7px 14px; font-size: 12px; color: #0070D2; text-decoration: none; }
.help-related a:hover { background: #F4F9FF; text-decoration: underline; }

/* ── Video strip on the hub ───────────────────────────────────────────── */
.help-video-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding: 14px 16px; }
.help-video-card { text-decoration: none; color: inherit; display: block; }
.help-video-thumb { display: block; position: relative; border-radius: 3px; overflow: hidden; background: #000; aspect-ratio: 16/9; }
.help-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .88; }
.help-video-card:hover .help-video-thumb img { opacity: 1; }
.help-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.help-video-play svg { width: 30px; height: 30px; fill: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.help-video-title { display: block; font-size: 12px; font-weight: 600; color: #16325C; margin-top: 6px; }
.help-video-cat { display: block; font-size: 10.5px; color: #888; }

/* ── Search results ───────────────────────────────────────────────────── */
.help-result-count { font-size: 12px; color: #706E6B; margin: 0 0 9px; }
.help-results { list-style: none; margin: 0; padding: 0; }
.help-results li { border-bottom: 1px solid var(--xl-border); }
.help-results li:last-child { border-bottom: none; }
.help-results a { display: block; padding: 11px 16px; text-decoration: none; color: inherit; }
.help-results a:hover { background: #F4F9FF; }
.help-results a:focus-visible { outline: 2px solid #0070D2; outline-offset: -2px; }
.help-result-title { display: block; font-size: 13px; font-weight: 700; color: #16325C; }
.help-result-path { display: block; font-size: 10.5px; color: #0070D2; margin: 1px 0 3px; }
.help-result-summary { display: block; font-size: 11.5px; color: #666; line-height: 1.5; max-width: 78ch; }
.help-results mark { background: #FFF3CD; color: inherit; padding: 0 1px; }

@media (max-width: 900px) {
    .help-article-layout { grid-template-columns: 1fr; }
}
@media print {
    .help-hero, .help-search, .help-crumb, .help-article-actions,
    .help-player, .help-chapters, .help-related, .help-video-strip { display: none !important; }
    .help-article-layout { grid-template-columns: 1fr; }
}

/* Keyboard highlight for search pickers — see bmsPickerKeys() in main.js.
   Same treatment as :hover so arrowing and pointing look identical; a person
   should not have to learn two visual languages for the same thing. */
.bms-pick-active { background: #E8F1FC !important; }
.bms-pick-active td { background: #E8F1FC !important; }