/* ============================================================================
 * SlowBooks Pro 2026 — UI Stylesheet
 * ============================================================================ */

/* Skip-to-content link — first tab stop on every page, hidden until focused.
   Lets keyboard / screen-reader users jump past the topbar + sidebar straight
   into the main content area. */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--qb-blue, #1e3a8a);
    color: #fff;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus {
    top: 0;
    outline: 2px solid var(--qb-gold, #f7c948);
    outline-offset: 2px;
}

/* ============================================================================
 * BUILD NOTE: The yellow invoice texture (RT_BITMAP 0x012C) was a 4x4 px
 * tiled BMP in the original. We recreated it as a CSS gradient. Close enough.
 * ============================================================================ */

:root {
    /* -- the classic "Default Blue" palette -- */
    --qb-navy:        #003366;
    --qb-navy-dark:   #002244;
    --qb-navy-mid:    #004488;
    --qb-blue:        #336699;
    /* the top of the primary-button and dialog-title gradients, under white
       text: #4a7fb5 was 4.20:1, this is 4.56 */
    --qb-blue-light:  #4779ad;
    --qb-blue-accent: #5b9bd5;
    /* Link colour. There was no rule for a bare <a> at all, so the browser
       chose — and its default #0000EE sits at 1.73:1 on the dark panel,
       against a product documenting WCAG AA. Attachment filenames, the
       SimpleFIN bridge link and "Get a key" are all bare anchors.
       Measured: 12.6:1 here, 7.2:1 in dark. (macbase1, 2.10.3 gate) */
    --text-link:      #003366;
    --text-success:   #166534;   /* 7.13:1 on white */
    /* Chart colours: a chart's lines, bars and keys are graphics, 3:1 on the
       card (WCAG 1.4.11); every one here clears it on white. */
    --chart-green: #0a9a6c;
    --chart-red: #e5484d;
    --chart-orange: #d9730d;
    --chart-amber: #cc6a0a;
    --chart-crimson: #d63240;
    --chart-blue: #4c6ef5;
    --chart-purple: #8b5cf6;
    --chart-pink: #c026d3;
    --chart-sky: #0b8bc4;
    --chart-yellow: #b08900;
    /* The A/R aging bands, for the bar and the key beside each label, so
       the two stay matched. A key is a graphic: 3:1 on the card (WCAG
       1.4.11). Gold #cc9933 was 2.57 and orange #f97316 2.80 (macbase1
       NEW-11); these are 3.13 and 3.11. */
    --aging-current:  var(--success);   /* 3.57 */
    --aging-30:       #b88a2e;
    --aging-60:       #f36706;
    --aging-90:       var(--danger);    /* 5.14 */
    /* Red and amber for words, as --text-success is green for them: the
       pages wrote #a4242b, #c0392b, #a8761f and #b45309 in by hand, which
       the dark theme could not change (2.22:1 and 4.09 there) */
    --text-danger:    #a4242b;   /* 7.33:1 on white, 6.41 on a pale red note */
    --text-warning:   #92400e;   /* 7.09:1 on white */
    /* Only the sidebar's section headings use it, on the navy: #669999 was
       3.95:1 there, this is 4.57 (macOS gate's contrast sweep, 2.18.0) */
    --qb-teal:        #76a4a4;
    /* Green and orange are text (report amounts, import results) and the
       success toast's ground: #339966 was 3.57:1 on white and #cc6633 3.81;
       these are 4.86 and 4.82, and 4.6 on a table's striped row */
    --qb-green:       #2b8055;
    --qb-green-dark:  #2d7d56;
    --qb-gold:        #cc9933;
    --qb-red:         #cc3333;
    --qb-orange:      #b2592d;

    /* -- Form backgrounds (the famous tinted papers) -- */
    --invoice-bg:     #fffef5;    /* yellow tint — RT_BITMAP 0x012C */
    --estimate-bg:    #f5fff8;    /* green tint — RT_BITMAP 0x012D */
    --form-bg:        #f7f8fa;

    /* -- Chrome colors -- */
    --toolbar-bg:     #d6dfe8;
    --toolbar-border: #a8b8c8;
    --content-bg:     #eef1f5;
    --panel-bg:       #ffffff;
    --panel-border:   #c0c8d0;
    --input-border:   #7f9db9;
    --input-focus:    #3366cc;

    /* -- Text -- */
    --text-primary:   #1a1a2e;
    --text-secondary: #4a4a6a;
    /* #7a7a9a was 4.14:1 on white, 3.65 on the page and 3.25 on a page
       header's gradient. 4.59 at that gradient's darkest, 5.85 on white */
    --text-muted:     #626282;
    --text-light:     #6a6a88;   /* was #9a9ab0, 2.75:1 on white; 5.21 */
    --text-on-dark:   #e8ecf0;
    --text-on-navy:   #c8d8e8;

    /* -- Functional -- */
    --success:        #339966;
    --warning:        #cc9933;
    --danger:         #cc3333;

    /* -- Gray scale (used by JS components and dark theme overrides) -- */
    --primary-light: #e8ecf2;
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    /* Text only. #6b7280 was 4.27:1 on the page, 3.79 on a page header and
       3.59 on a toolbar; 4.62 at the toolbar, 6.22 on white. (#9ca3af before
       it was 2.5:1 on white.) */
    --gray-400: #5b616d;
    --gray-500: #5b616d;
    --gray-600: #4b5563;

    --sidebar-width: 200px;
    --topbar-height: 40px;
    --statusbar-height: 24px;
    --font: Tahoma, 'Segoe UI', Geneva, Verdana, sans-serif;
    --font-mono: 'Consolas', 'Courier New', monospace;
}

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

body {
    font-family: var(--font);
    background: var(--content-bg);
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.4;
    overflow: hidden;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* ========================================================================
 * TOP BAR — menu row with 24x24 toolbar buttons
 * ======================================================================== */

#topbar {
    height: var(--topbar-height);
    background: linear-gradient(180deg, #e8edf2 0%, #c8d0dc 100%);
    border-bottom: 1px solid #a0a8b8;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 2px;
    flex-shrink: 0;
    z-index: 110;
}

.topbar-company {
    font-weight: 700;
    font-size: 12px;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
.topbar-company:empty { display: none; }
.topbar-company:empty + .tb-sep { display: none; }

.topbar-brand {
    font-size: 13px;
    font-weight: 700;
    color: var(--qb-navy);
    margin-right: 16px;
    letter-spacing: -0.02em;
    white-space: nowrap;
    user-select: none;
}

/* The brand's year, the clock and the status bar sit on the toolbar and
   status bar gradients, which are darker than the page: muted text there
   read 2.57-2.66:1. They take the secondary text colour, as they already
   do in dark theme (macOS gate's contrast sweep, 2.18.0). */
.topbar-brand span {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 10px;
    margin-left: 4px;
}

.tb-sep {
    width: 1px;
    height: 22px;
    background: #b0b8c4;
    margin: 0 4px;
}

.tb-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-family: var(--font);
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.tb-btn:hover {
    background: rgba(255,255,255,0.6);
    border-color: #b0b8c8;
}

.tb-btn:active {
    background: rgba(0,0,0,0.05);
}

/* Theme toggle — moon (light mode) and sun (dark mode) get a colored glow
   so the click target is obvious instead of disappearing into the toolbar. */
#theme-toggle {
    font-size: 15px;
    line-height: 1;
    padding: 2px 12px;
    color: #3b5987;       /* cool blue moon; #4a6fa8 was 3.27:1 on the toolbar */
    text-shadow: 0 0 6px rgba(74, 111, 168, 0.45);
    transition: color 0.15s, text-shadow 0.15s;
}
#theme-toggle:hover {
    color: #2e4d80;
    text-shadow: 0 0 10px rgba(74, 111, 168, 0.7);
    background: rgba(74, 111, 168, 0.08);
    border-color: #b0c0d8;
}

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-clock {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

/* ========================================================================
 * SIDEBAR / NAVIGATOR — left-docked panel with 32x32 icons
 * ======================================================================== */

#main-area {
    display: flex;
    flex: 1;
    overflow: hidden;
}

#sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, var(--qb-navy) 0%, var(--qb-navy-dark) 100%);
    color: white;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid #001a33;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.15);
}

.sidebar-header h1 {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.03em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.sidebar-edition {
    font-size: 9px;
    font-weight: 700;
    color: var(--qb-gold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 2px;
}

.nav-links {
    list-style: none;
    padding: 4px 0;
    flex: 1;
}

.nav-section {
    padding: 10px 14px 3px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--qb-teal);
    font-weight: 700;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    color: var(--text-on-navy);
    text-decoration: none;
    font-size: 11px;
    transition: background 0.1s;
    border-left: 3px solid transparent;
}

.nav-link:hover {
    background: rgba(255,255,255,0.08);
    color: #ffffff;
}

.nav-link.active {
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    border-left-color: var(--qb-gold);
    font-weight: 700;
}

.nav-icon {
    width: 16px;
    text-align: center;
    font-size: 11px;
    opacity: 0.7;
}

.nav-link.active .nav-icon { opacity: 1; }

.sidebar-footer {
    padding: 8px 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 9px;
    /* 0.25 alpha measured 2.53:1 against the sidebar, and 0.50 is 4.28 at
       the top of the sidebar's navy (5.06 where the footer sits): 0.60 is
       5.47 at the top. Still clearly secondary. */
    color: rgba(255,255,255,0.60);
    text-align: center;
    user-select: none;
}

.sidebar-footer .footer-link {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    /* 0.35 was 3.13:1 (skytech R3-1); 0.55 is 4.84 at the navy's top */
    color: rgba(255,255,255,0.55);
    text-decoration: none;
}

.sidebar-footer .footer-link:hover {
    color: rgba(255,255,255,0.75);
    text-decoration: underline;
}

/* Desktop-install update notice (fed by /api/system/update-check) */
/* The update notice sits at the TOP of the sidebar. In the footer it was
   only seen by someone who scrolled the whole menu, so people stayed on old
   versions without knowing there was one. Deliberately a quiet banner and
   not a dialog: apparent the moment the app opens, never blocking, and it
   occupies no space at all when you are up to date. */
#sidebar-update:empty { display: none; }

.update-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 2px;
    padding: 7px 9px;
    border-radius: 4px;
    background: rgba(224, 158, 36, 0.16);
    border: 1px solid rgba(224, 158, 36, 0.45);
    border-left: 3px solid #e09e24;
    color: #e8b64c;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    user-select: auto;
    transition: background 120ms ease, border-color 120ms ease;
}

.update-badge:hover {
    background: rgba(224, 158, 36, 0.30);
    border-color: rgba(224, 158, 36, 0.85);
}

.update-badge__arrow {
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 1;
}

.update-badge__text { display: block; }

/* The call to action is the quiet half — present, not shouting. */
.update-badge__cta {
    display: block;
    margin-top: 1px;
    font-weight: 500;
    font-size: 10px;
    opacity: 0.85;
}

/* Respect a reduced-motion preference by having no motion to begin with —
   this notice never animates, pulses or slides. */

/* ========================================================================
 * CONTENT AREA
 * ======================================================================== */

#content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    background: var(--content-bg);
}

#page-content {
    max-width: 1600px;
}

/* ========================================================================
 * STATUS BAR — "Ready" | company file path | current date
 * ======================================================================== */

#statusbar {
    height: var(--statusbar-height);
    background: linear-gradient(180deg, #e0e4ea 0%, #c8ccd4 100%);
    border-top: 1px solid #a8acb4;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 10px;
    color: var(--text-secondary);   /* see .topbar-brand span */
    flex-shrink: 0;
    gap: 16px;
}

.status-section {
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-sep {
    width: 1px;
    height: 14px;
    background: #b0b4bc;
}

.status-right {
    margin-left: auto;
}

/* ========================================================================
 * PAGE HEADERS — QuickBooks used a colored bar at the top of each view
 * ======================================================================== */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: linear-gradient(180deg, #f0f3f7 0%, #e0e4ec 100%);
    border: 1px solid var(--panel-border);
    border-radius: 3px;
}

.page-header h2 {
    font-size: 14px;
    font-weight: 700;
    color: var(--qb-navy);
}

/* ========================================================================
 * BUTTONS — subtle 3D bevel, in the Windows Classic spirit
 * ======================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: 1px solid #7f9db9;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 400;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.1s;
    background: linear-gradient(180deg, #ffffff 0%, #e8ecf0 100%);
    color: var(--text-primary);
}

.btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #f0f4f8 0%, #d8dce4 100%);
    border-color: #5f7d99;
}

.btn:active:not(:disabled) {
    background: linear-gradient(180deg, #d0d4d8 0%, #e0e4e8 100%);
}

.btn-primary {
    background: linear-gradient(180deg, var(--qb-blue-light) 0%, var(--qb-blue) 100%);
    color: white;
    border-color: var(--qb-navy);
    font-weight: 700;
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--qb-blue) 0%, var(--qb-navy-mid) 100%);
}

.btn-secondary {
    background: linear-gradient(180deg, #ffffff 0%, #e8ecf0 100%);
    color: var(--text-primary);
    border-color: #7f9db9;
}

.btn-secondary:hover:not(:disabled) {
    background: linear-gradient(180deg, #f0f4f8 0%, #d8dce4 100%);
}

.btn-danger {
    /* white on the old top stop, #e05555, was 3.75:1 */
    background: linear-gradient(180deg, #d34242 0%, var(--qb-red) 100%);
    color: white;
    border-color: #992222;
}

.btn-danger:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--qb-red) 0%, #aa2222 100%);
}

.btn-sm {
    padding: 2px 8px;
    font-size: 10px;
}

/* A disabled button looks it: dimmed, a not-allowed cursor, and no hover
   (the hover rules above skip :disabled). Disabled buttons looked enabled
   and did nothing when clicked: the QBO page's Import with no connection,
   Restore before its tick (macbase1 NEW-15, 2.18.0 gate). WCAG exempts an
   inactive control from contrast. */
.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-group {
    display: flex;
    gap: 4px;
}

/* ========================================================================
 * TABLES — report view: alternating row colors, thin column separators
 * ======================================================================== */

.table-container {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 0;
    overflow: hidden;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    background: linear-gradient(180deg, #e8ecf2 0%, #d0d8e0 100%);
    padding: 4px 10px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--panel-border);
    border-right: 1px solid #d8dce4;
    white-space: nowrap;
}

thead th:last-child { border-right: none; }

thead th.sortable {
    cursor: pointer;
    user-select: none;
}
thead th.sortable:hover {
    background: linear-gradient(180deg, #d8dee8 0%, #c0cad4 100%);
}
thead th.sort-active {
    color: var(--text-primary);
    font-weight: 800;
    background: linear-gradient(180deg, #d4dde6 0%, #b8c4d0 100%);
}
thead th .sort-arrow {
    font-size: 9px;
    margin-left: 2px;
    /* --qb-blue was 3.38:1 on the sorted column's header, 3.23 in dark */
    color: var(--qb-navy);
}

tbody td {
    padding: 3px 10px;
    border-bottom: 1px solid #e8ecf0;
    font-size: 11px;
    border-right: 1px solid #f0f2f4;
}

tbody td:last-child { border-right: none; }

tbody tr:nth-child(even) { background: #f7f9fb; }
tbody tr:hover { background: #e8f0f8; }
tbody tr:last-child td { border-bottom: none; }

td.actions {
    text-align: right;
    white-space: nowrap;
}

td.amount, th.amount {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* ========================================================================
 * CARDS — used on Dashboard and Bank Accounts
 * Styled to match QB2003's "Company Snapshot" panel
 * ======================================================================== */

.card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 0;
    padding: 12px 14px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.06);
}

.card-header {
    font-size: 10px;
    font-weight: 700;
    color: var(--qb-navy);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e0e4ec;
}

.card-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--qb-navy);
    font-family: var(--font-mono);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

/* ========================================================================
 * FORMS — Modal forms styled like QB2003 data entry windows
 * The original forms had a light blue/gray gradient background with
 * sunken 3D edit controls (WS_EX_CLIENTEDGE)
 * ======================================================================== */

/* minmax(0, 1fr), not 1fr: a column may be narrower than what is in it. A
   select is as wide as its longest option, so one customer with a
   120-character name widened the first column until the second (Date, Due
   Date, Class, Exchange Rate) sat past the Edit Invoice dialog's edge,
   behind a sideways scrollbar (macbase1, F22, still there at the 2.18.0
   gate). Each field now fills its own column; the open list still shows
   every name in full. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 4px 6px;
    border: 1px solid var(--input-border);
    border-radius: 0;
    font-size: 11px;
    font-family: var(--font);
    color: var(--text-primary);
    background: #ffffff;
    /* WS_EX_CLIENTEDGE sunken effect */
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.12);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--input-focus);
    background: #fffff8;
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.08);
}

.form-group textarea {
    min-height: 50px;
    resize: vertical;
}

.form-group select {
    box-shadow: none;
    background: linear-gradient(180deg, #ffffff 0%, #f0f2f4 100%);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #d0d4dc;
}

/* ========================================================================
 * BADGES — Status indicators
 * Colored text, no pill shapes
 * We kept the pills because they look better, but matched the colors
 * ======================================================================== */

.badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge-draft   { background: #e8ecf0; color: #4a5568; border: 1px solid #c8ccd4; }
.badge-sent    { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.badge-partial { background: #fef3c7; color: #92400e; border: 1px solid #fbbf24; }
.badge-paid    { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.badge-recorded { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.badge-void    { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
/* issued / applied: the credit-document vocabulary. These existed in the
   status enum from the day credit memos shipped and had no rule, so every
   credit memo has been rendering an unstyled badge. Vendor credits use the
   same words, so both are styled here. */
.badge-issued  { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.badge-applied { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.badge-pending { background: #fef3c7; color: #92400e; border: 1px solid #fbbf24; }
.badge-accepted{ background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.badge-rejected{ background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.badge-converted{background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.badge-product { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.badge-service { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.badge-material{ background: #fef3c7; color: #92400e; border: 1px solid #fbbf24; }
.badge-labor   { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }

/* ========================================================================
 * MODAL — in the spirit of QB2003's popup data entry windows
 * ======================================================================== */

.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,20,50,0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 40px;
    z-index: 200;
}


/* A bare <a> had no rule anywhere, so the user agent picked the colour and
   the dark theme had no way to change it — 1.73:1 (macbase1's sweep, which
   found 58 elements below AA from three causes; this was the worst).
   Components with their own link styling are unaffected: they set `color`
   at higher specificity. */
a {
    color: var(--text-link);
}

a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------------
   Utility: .hidden
   ------------------------------------------------------------------------
   The JS hides elements by adding this class — ten call sites across three
   files — but there was no generic rule, only `.modal-overlay.hidden` and
   `.splash-overlay.hidden`. Everything else kept the class and stayed on
   screen. The global search dropdown was the visible casualty: it never
   closed on click-away, on clearing the box, or on navigating, and at rest
   it painted a 2px white sliver under the toolbar in every session, which
   is the grey edge visible along the top of desktop screenshots for
   releases. Found by the marketing agent building the training videos.

   `!important` because the elements that carry this class set `display`
   through their own rules at equal or higher specificity; without it the
   trap is merely reset for the next component.

   Note this is the .hidden CLASS. The HTML `hidden` ATTRIBUTE is separate
   and untouched (`[hidden]` is handled by the shell's own reset).
   ------------------------------------------------------------------------ */
.hidden { display: none !important; }

.modal-overlay.hidden { display: none; }

.modal {
    background: var(--form-bg);
    border: 2px solid var(--qb-navy);
    border-radius: 0;
    width: 90%;
    max-width: 700px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.3);
}

/* A dialog for a form with a wide line-item table: as wide as the window
   allows, up to 1280px. Opened with openModal(title, html, { wide: true }). */
.modal.modal--wide {
    max-width: min(1280px, 96vw);
}

/* A line-item table with more columns than the dialog is wide scrolls
   sideways inside its container instead of losing its last columns behind
   overflow: hidden (#174: the job cost entry's Bill? column and the remove
   button were cut off, with no way to reach them). */
.table-container--scroll {
    overflow-x: auto;
}
/* Only the job cost entry's grid is wider than the dialog (its Bill? and
   remove columns); the estimate's fits, and a floor on every scrolling grid
   pushed its Amount column past the dialog's edge at 1280 wide (2.18.0 gate,
   macbase1 NEW-12). */
.table-container--scroll .line-items-table--wide {
    min-width: 1180px;
}

/* The pay-run view: when the table is wider than the window, the Employee
   column stays put while the rest scrolls, so each row still says whose
   pay it is. The dialog used to open scrolled to the first Stub PDF, with
   the names out of sight (2.18.0 gate, macbase1 NEW-3). The cell needs a
   ground of its own, or the scrolled columns show through it. */
.pay-run-table th:first-child,
.pay-run-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    white-space: nowrap;
    box-shadow: inset -1px 0 0 var(--panel-border);
}
.pay-run-table td:first-child { background: var(--panel-bg); }
.pay-run-table tbody tr:nth-child(even) td:first-child { background: #f7f9fb; }
.pay-run-table tbody tr:hover td:first-child { background: #e8f0f8; }

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: linear-gradient(180deg, var(--qb-blue-light) 0%, var(--qb-navy) 100%);
    color: white;
}

.modal-header h2 {
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.modal-close {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    /* white: the dialog header's gradient starts at --qb-blue-light, where
       0.7 white was 3.11:1 and white is 4.56 */
    color: #ffffff;
    padding: 2px 4px;
    line-height: 1;
}
.modal-close:hover { color: #ffffff; background: rgba(255, 255, 255, 0.15); }

#modal-body {
    padding: 14px 16px;
}

/* ========================================================================
 * TOAST NOTIFICATIONS
 * ======================================================================== */

#toast-container {
    position: fixed;
    bottom: calc(var(--statusbar-height) + 8px);
    right: 12px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toast {
    padding: 6px 14px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
    animation: toast-in 0.2s ease;
    border: 1px solid rgba(0,0,0,0.2);
}

.toast-success { background: var(--qb-green); }
.toast-error   { background: var(--qb-red); }
.toast-info    { background: var(--qb-blue); }

@keyframes toast-in {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ========================================================================
 * DASHBOARD — "Company Snapshot" style
 * ======================================================================== */

.dashboard-section {
    margin-bottom: 16px;
}

.dashboard-section h3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--qb-navy);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--qb-gold);
}

/* ========================================================================
 * LINE ITEMS TABLE — the invoice/estimate grid
 * ======================================================================== */

.line-items-table {
    width: 100%;
    margin-top: 8px;
    border: 1px solid var(--panel-border);
}

.line-items-table th {
    font-size: 9px;
    padding: 3px 6px;
    background: linear-gradient(180deg, #e8ecf2 0%, #d0d8e0 100%);
    border-right: 1px solid #d8dce4;
}

.line-items-table th:last-child { border-right: none; }

.line-items-table td {
    padding: 2px 4px;
    border-right: 1px solid #e8ecf0;
    border-bottom: 1px solid #e8ecf0;
}

.line-items-table td:last-child { border-right: none; }

.line-items-table input,
.line-items-table select {
    width: 100%;
    padding: 2px 4px;
    border: 1px solid var(--input-border);
    border-radius: 0;
    font-size: 11px;
    font-family: var(--font);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.08);
}

.line-items-table .col-qty    { width: 60px; }
.line-items-table .col-rate   { width: 80px; }
.line-items-table .col-amount { width: 80px; text-align: right; white-space: nowrap; }
.line-items-table .col-actions{ width: 30px; text-align: center; }

.invoice-logo-option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px solid var(--panel-border);
    background: var(--form-bg);
}

.invoice-logo-preview {
    max-width: 140px;
    max-height: 56px;
    object-fit: contain;
    padding: 4px;
    background: white;
}

.invoice-logo-option label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.invoice-logo-option input {
    width: auto;
}

.invoice-logo-help,
.invoice-logo-status {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 3px;
}

.invoice-logo-status.invoice-logo-error {
    color: var(--danger);
}

.invoice-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--panel-border);
}

.total-row {
    display: flex;
    gap: 12px;
    font-size: 11px;
}

.total-row .label {
    color: var(--text-secondary);
    min-width: 80px;
    text-align: right;
    font-weight: 700;
}

.total-row .value {
    min-width: 80px;
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.total-row.grand-total {
    font-weight: 700;
    font-size: 13px;
    padding-top: 4px;
    margin-top: 2px;
    border-top: 2px solid var(--qb-navy);
    color: var(--qb-navy);
}

/* ========================================================================
 * EMPTY STATE
 * ======================================================================== */

.empty-state {
    text-align: center;
    padding: 30px 16px;
    color: var(--text-muted);
}

.empty-state p {
    margin-bottom: 10px;
    font-size: 12px;
}

/* ========================================================================
 * TOOLBAR / FILTERS
 * ======================================================================== */

.toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    padding: 4px 8px;
    background: var(--toolbar-bg);
    border: 1px solid var(--toolbar-border);
}

.toolbar input,
.toolbar select {
    padding: 3px 6px;
    border: 1px solid var(--input-border);
    border-radius: 0;
    font-size: 11px;
    font-family: var(--font);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.08);
}

/* Show: Active / Inactive / All on a list page (#210) */
.toolbar .list-show-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Clickable row */
tr.clickable { cursor: pointer; }

/* ========================================================================
 * SPLASH / ABOUT DIALOG
 * ======================================================================== */

.splash-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,10,30,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    animation: splash-fade-in 0.3s ease;
}

.splash-overlay.hidden { display: none; }

@keyframes splash-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.splash-box {
    width: 420px;
    background: linear-gradient(180deg, var(--qb-navy) 0%, #001a33 100%);
    border: 3px solid var(--qb-gold);
    box-shadow: 0 0 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
    text-align: center;
    padding: 30px 24px 20px;
    position: relative;
    overflow: hidden;
}

.splash-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--qb-gold), #ffcc66, var(--qb-gold));
}

.splash-title {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
    margin-bottom: 2px;
}

.splash-subtitle {
    font-size: 11px;
    font-weight: 700;
    color: var(--qb-gold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.splash-divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--qb-gold), transparent);
    margin: 0 auto 16px;
}

.splash-info {
    font-size: 10px;
    /* 0.5 was 4.28:1 at the top of the navy (4.48 as skytech measured it
       with the terms showing, R3-1); 0.6 is 5.47. Its bold stays 0.7. */
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    margin-bottom: 16px;
}

.splash-info strong {
    color: rgba(255,255,255,0.7);
}

.splash-whatsnew {
    text-align: left;
    margin: 10px 0 4px;
    padding: 8px 10px;
    border: 1px solid var(--gray-300, #d1d5db);
    background: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    line-height: 1.35;
    max-height: 170px;
    overflow-y: auto;
}
.splash-whatsnew-title { font-weight: 700; margin-bottom: 4px; }
.splash-whatsnew ul { margin: 0; padding-left: 16px; }
.splash-whatsnew li { margin: 2px 0; }

.splash-terms {
    text-align: left;
    margin: 12px 0 4px;
    padding: 10px 14px;
    border: 1px solid var(--gray-300, #d0d4dc);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.45;
    max-height: 260px;
    overflow-y: auto;
    /* the sibling .splash-whatsnew's panel; without it the text sits at 1.16:1 on the
       splash navy (macbase1, 2.14.0 gate) */
    background: rgba(255, 255, 255, 0.55);
}
.splash-terms-title { font-weight: 700; margin-bottom: 6px; }
.splash-terms-list { margin: 0; padding-left: 18px; }
.splash-terms-list li { margin-bottom: 6px; }
/* the link to LICENSE sat at 4.29:1 on the light panel (measured in headless
   Chromium, 2.16.2 gate); the navy the button uses reads at AA there. The dark
   theme overrides it in dark.css. */
.splash-terms a { color: #002244; font-weight: 600; }

.splash-legal {
    font-size: 8px;
    /* 0.25 was 2.22:1 (skytech R3-1); 0.55 is 4.84, still the faintest line */
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
    margin-bottom: 16px;
    padding: 0 16px;
}

.splash-btn {
    padding: 6px 28px;
    background: linear-gradient(180deg, var(--qb-gold) 0%, #b8862e 100%);
    border: 1px solid #8a6420;
    color: var(--qb-navy-dark);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font);
    cursor: pointer;
    border-radius: 2px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

.splash-btn:hover {
    background: linear-gradient(180deg, #ddaa44 0%, var(--qb-gold) 100%);
}

/* ========================================================================
 * SCROLLBAR STYLING — to match the Windows XP / Classic theme
 * ======================================================================== */

::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: #e8ecf0; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c0c8d0 0%, #a0a8b0 100%);
    border: 1px solid #8890a0;
}
::-webkit-scrollbar-thumb:hover { background: #a0a8b4; }

/* ========================================================================
 * PRINT STYLES
 * ======================================================================== */

@media print {
    #sidebar, #topbar, #statusbar, .btn, .modal-overlay, #toast-container { display: none !important; }
    #content { margin: 0; padding: 0; }
    body { background: white; }
}

/* ========================================================================
 * GLOBAL SEARCH
 * ======================================================================== */

.tb-search {
    width: 180px;
    padding: 3px 8px;
    font-size: 11px;
    font-family: var(--font);
    border: 1px solid var(--input-border);
    background: white;
    border-radius: 2px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}

.tb-search:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08), 0 0 0 2px rgba(51,102,204,0.2);
}

.search-dropdown {
    position: absolute;
    top: var(--topbar-height);
    right: 120px;
    width: 300px;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--panel-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 200;
}

.search-section {
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--content-bg);
    border-bottom: 1px solid var(--panel-border);
}

.search-item {
    padding: 6px 10px;
    font-size: 11px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

.search-item:hover {
    background: var(--primary-light, #e8f0f8);
}

/* ========================================================================
 * SETTINGS PAGE — CPreferencesDialog
 * ======================================================================== */

.settings-section {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    padding: 16px;
    margin-bottom: 16px;
}

.settings-section h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--qb-navy);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--panel-border);
}

/* ========================================================================
 * QUICK ENTRY — batch invoice entry
 * ======================================================================== */

.quick-entry-info {
    font-size: 11px;
}

#qe-log {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--panel-border);
    /* Was a hardcoded `white`, which the dark theme could not override — the
       log text is near-white there, so the running confirmation of what you
       just saved was invisible at about 1.1:1 contrast. Quick Entry exists
       to batch entries and read that log back, and the product documents
       WCAG AA. Token, so both themes follow. */
    background: var(--panel-bg);
    color: var(--text-primary);
    padding: 4px 8px;
}

/* ========================================================================
 * IIF IMPORT/EXPORT — QuickBooks 2003 Pro Interoperability
 * File > Utilities > Import/Export IIF Files
 * ======================================================================== */

.iif-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}

.iif-section {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    padding: 16px;
}

.iif-section h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--qb-navy);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--panel-border);
}

/* QBO imports: keep the live log inside the import controls' column. */
.qbo-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qbo-sections > .iif-section { min-width: 0; }
.qbo-import-log {
    --qbo-log-warning: #9a4b12;
    width: 100%;
    box-sizing: border-box;
    margin-top: 12px;
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
    font: 10px/1.5 var(--font-mono);
    color: var(--text-primary);
}
.qbo-log-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    background: var(--form-bg);
    border-bottom: 1px solid var(--panel-border);
}
.qbo-log-heading > strong { font-size: 11px; }
.qbo-log-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.qbo-log-controls .btn { padding: 2px 5px; font-size: 10px; }
.qbo-log-controls .btn[hidden] { display: none; }
.qbo-run-status { font-weight: 700; color: var(--text-secondary); }
.qbo-status-running { color: var(--text-link); }
.qbo-status-complete { color: var(--text-success); }
.qbo-status-warning { color: var(--qbo-log-warning); }
.qbo-status-error { color: var(--danger); }
.qbo-run-detail, .qbo-run-activity { padding: 5px 9px; overflow-wrap: anywhere; }
.qbo-run-activity { color: var(--text-secondary); border-bottom: 1px solid var(--panel-border); }
.qbo-run-counts { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 9px; }
.qbo-run-counts strong { font-variant-numeric: tabular-nums; }
.qbo-log-scroll { height: 320px; overflow: auto; overscroll-behavior: contain; }
.qbo-log-table { width: 100%; min-width: 480px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: inherit; }
.qbo-log-table th, .qbo-log-table td {
    padding: 4px 5px;
    font-size: inherit;
    vertical-align: top;
    text-align: left;
    overflow-wrap: anywhere;
    border-bottom: 1px solid var(--panel-border);
}
.qbo-log-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--form-bg);
    color: var(--text-secondary);
    font-weight: 700;
}
.qbo-log-table td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.qbo-col-ts { width: 87px; }
.qbo-col-code, .qbo-col-item, .qbo-col-action { width: 56px; }
.qbo-log-code, .qbo-log-item-label { display: block; color: var(--text-secondary); }
.qbo-log-level { font-weight: 700; }
.qbo-log-error .qbo-log-level { color: var(--danger); }
.qbo-log-warning .qbo-log-level { color: var(--qbo-log-warning); }
.qbo-log-error td:first-child { border-left: 2px solid var(--danger); }
.qbo-log-warning td:first-child { border-left: 2px solid var(--qbo-log-warning); }
.qbo-log-empty { padding: 18px 10px; color: var(--text-secondary); text-align: center; }
.qbo-errors-only #qbo-log-rows > tr:not(.qbo-log-error) { display: none; }
#qbo-errors-filter[aria-pressed="true"] { color: var(--danger); font-weight: 700; border-color: var(--danger); }
.qbo-log-error .qbo-log-code { color: var(--danger); }
[data-theme="dark"] .qbo-import-log { --qbo-log-warning: var(--qb-orange); }
@media (max-width: 800px) {
    .qbo-sections { grid-template-columns: minmax(0, 1fr); }
}

.iif-export-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.iif-export-grid .btn {
    justify-content: center;
    text-align: center;
    padding: 6px 10px;
}

.iif-date-range {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 11px;
}

.iif-date-range label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.iif-date-range input {
    padding: 3px 6px;
    border: 1px solid var(--input-border);
    border-radius: 0;
    font-size: 11px;
    font-family: var(--font);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.08);
}

.iif-dropzone {
    border: 2px dashed var(--input-border);
    border-radius: 3px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    background: #fafbfc;
    margin-bottom: 12px;
}

.iif-dropzone:hover,
.iif-dropzone.dragover {
    border-color: var(--qb-blue);
    background: #f0f4fa;
}

.iif-dropzone-icon {
    font-size: 28px;
    color: var(--qb-blue);
    margin-bottom: 6px;
}

.iif-dropzone-text {
    font-size: 11px;
    color: var(--text-secondary);
}

.iif-dropzone-text strong {
    color: var(--qb-blue);
}

.iif-file-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f0f4fa;
    border: 1px solid var(--qb-blue);
    margin-bottom: 12px;
    font-size: 11px;
}

.iif-file-info .filename {
    font-weight: 700;
    color: var(--qb-navy);
    flex: 1;
}

.iif-file-info .filesize {
    color: var(--text-muted);
    font-size: 10px;
}

.iif-import-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.iif-results {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    padding: 12px;
    font-size: 11px;
}

.iif-results h4 {
    font-size: 12px;
    font-weight: 700;
    color: var(--qb-navy);
    margin-bottom: 8px;
}

.iif-results .result-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid #e8ecf0;
}

.iif-results .result-row:last-child {
    border-bottom: none;
}

.iif-results .result-count {
    font-weight: 700;
    font-family: var(--font-mono);
}

.iif-validation-ok {
    color: var(--qb-green);
    font-weight: 700;
}

.iif-validation-err {
    color: var(--qb-red);
    font-weight: 700;
}

.iif-validation-warn {
    color: var(--qb-orange);
}

.iif-errors {
    margin-top: 8px;
    max-height: 150px;
    overflow-y: auto;
    font-size: 10px;
    font-family: var(--font-mono);
    background: #fff8f8;
    border: 1px solid #fca5a5;
    padding: 6px 8px;
    color: var(--qb-red);
}

.iif-warnings {
    margin-top: 8px;
    max-height: 150px;
    overflow-y: auto;
    font-size: 10px;
    font-family: var(--font-mono);
    background: #fffbf0;
    border: 1px solid #fbbf24;
    padding: 6px 8px;
    color: var(--qb-orange);
}

/* "Change ALL-CAPS names" on the IIF import (#195): the box, and a few of
   the file's own names as it would import them */
.iif-retitle {
    margin-top: 8px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    padding: 8px 10px;
    font-size: 11px;
    color: var(--text-primary);
}

.iif-retitle label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.iif-retitle ul {
    margin: 6px 0 6px 20px;
    font-family: var(--font-mono);
}

.iif-retitle p {
    margin: 0;
    color: var(--text-secondary);
}

/* ===========================================================================
   Phase 9: Analytics page (#/analytics)
   Inline SPA page matching the QB2003 blue skin with light/dark support.
   =========================================================================== */

.analytics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.analytics-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.analytics-controls label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 2px;
}

.analytics-controls select,
.analytics-controls .btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 4px;
}

.analytics-controls select {
    background: var(--panel-bg);
    color: var(--text-muted);
    border: 1px solid var(--panel-border);
}

.analytics-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.analytics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .analytics-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.analytics-kpi {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 14px 16px;
}

.analytics-kpi-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.analytics-kpi-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.analytics-kpi-value.kpi-green  { color: var(--qb-green); }
.analytics-kpi-value.kpi-red    { color: var(--qb-red); }
.analytics-kpi-value.kpi-blue   { color: var(--qb-blue); }
.analytics-kpi-value.kpi-purple { color: #a855f7; }

.analytics-section-title {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 20px 0 8px;
    font-weight: 600;
}

.analytics-card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 14px 16px;
    margin-bottom: 8px;
}

.analytics-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 900px) {
    .analytics-two-col { grid-template-columns: 1fr; }
}

.chart-wrap {
    position: relative;
    width: 100%;
    height: 280px;
    margin-bottom: 8px;
}

.chart-wrap-sm {
    height: 220px;
}

.analytics-empty {
    padding: 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 11px;
}

.analytics-error {
    padding: 14px 16px;
    background: #fff4f4;
    border: 1px solid var(--qb-red);
    border-radius: 4px;
    color: var(--qb-red);
    font-size: 12px;
}

.analytics-error strong { display: block; margin-bottom: 4px; }

.amount.green { color: var(--qb-green); }
.amount.red   { color: var(--qb-red); }
.amount.amber { color: var(--qb-orange); }

.totals-row td {
    border-top: 2px solid var(--panel-border);
    background: rgba(51, 102, 153, 0.04);
}

/* ================================================================
 * Phase 9.5 — AI Insights panel + settings modal
 * ================================================================ */
.ai-insights-card {
    border-left: 3px solid #a855f7;
}

.ai-insights-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9b3cf6;   /* #a855f7, the card's border, is 3.96:1 as text on white */
}

.ai-insights-body {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted);
}

.ai-insights-body h3,
.ai-insights-body h4 {
    margin: 10px 0 4px;
    color: var(--text-heading, var(--text-primary));
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ai-insights-body ul {
    margin: 4px 0 8px 18px;
    padding: 0;
}

.ai-insights-body li {
    margin-bottom: 3px;
}

.ai-insights-body p {
    margin: 6px 0;
}

.ai-insights-empty {
    color: var(--text-muted);
    font-style: italic;
    padding: 8px 0;
}

.ai-insights-busy {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    padding: 10px 0;
}

.ai-insights-meta {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ai-cache-badge {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
}

/* AI Predefined Analyses panel — same visual family as .ai-insights-card */
.ai-actions-card {}

.ai-actions-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ai-actions-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.ai-actions-form select {
    flex: 1;
    min-width: 220px;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    background: var(--panel-bg);
    color: var(--text-primary);
}

.ai-actions-form select:focus {
    outline: 2px solid #a855f7;
    outline-offset: -1px;
}

.ai-actions-meta {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ai-actions-meta strong {
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
}

.ai-actions-body {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.6;
}

.ai-actions-body h3,
.ai-actions-body h4 {
    margin: 10px 0 4px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ai-actions-body ul {
    margin: 4px 0 8px 18px;
    padding: 0;
}

.ai-actions-body li { margin: 2px 0; }
.ai-actions-body p { margin: 4px 0; }

.ai-actions-empty,
.ai-actions-busy {
    color: var(--text-muted);
    font-size: 12px;
    padding: 8px 0;
}

.ai-settings-form .form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.ai-settings-form .form-field > span {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}

.ai-settings-form input,
.ai-settings-form select {
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    background: var(--panel-bg);
    color: var(--text-primary);
}

.ai-settings-form input:focus,
.ai-settings-form select:focus {
    outline: 2px solid #a855f7;
    outline-offset: -1px;
}

.ai-settings-hint {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 10px;
    padding-left: 2px;
}

.ai-key-saved {
    color: var(--text-success);   /* #00c48f was 2.26:1 as text on white */
    font-style: normal;
    font-weight: 600;
    margin-left: 4px;
}

.ai-settings-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--panel-border);
}

.ai-settings-spacer { flex: 1; }

.ai-settings-test-result {
    font-size: 11px;
    color: var(--text-muted);
}

.ai-test-ok { color: var(--text-success); }   /* #00c48f was 2.26:1 on white */
.ai-test-fail { color: var(--text-danger); }

/* ----------------------------------------------------------------
 * Cloudflare Worker Gateway section (appears when provider is
 * `cloudflare_worker`). Called out visually so it's obvious this is
 * the self-hosted, credentials-stay-in-CF option.
 * ---------------------------------------------------------------- */
.ai-worker-section {
    margin: 10px 0 4px 0;
    padding: 10px 12px 6px 12px;
    border: 1px solid #f38020;  /* Cloudflare orange */
    border-left-width: 3px;
    border-radius: 4px;
    background: rgba(243, 128, 32, 0.06);
}

.ai-worker-section > legend {
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: #f38020;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-worker-help,
.ai-worker-security {
    font-size: 11px;
    color: var(--text-muted);
    margin: 4px 0 6px 0;
    line-height: 1.4;
}

.ai-worker-help code,
.ai-worker-security code {
    background: rgba(0, 0, 0, 0.15);
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 10px;
}

.ai-worker-security {
    color: var(--text-success);  /* green — safety callout (#00c48f was 2.26:1 on white) */
    border-top: 1px dashed rgba(243, 128, 32, 0.3);
    padding-top: 6px;
    margin-top: 6px;
}

.ai-worker-required {
    color: #f38020;
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
    margin-left: 4px;
}

/* ================================================================
 * Phase 9.5b — AI Chat Q&A panel
 * ================================================================ */
.ai-chat-card {
    border-left: 3px solid #38bdf8;
}

.ai-chat-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #38bdf8;
}

.ai-chat-messages {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 0;
    font-size: 12px;
}

.ai-chat-empty {
    color: var(--text-muted);
    padding: 8px 4px;
}

.ai-chat-empty p {
    margin-bottom: 6px;
    font-style: italic;
}

.ai-chat-examples {
    margin: 6px 0 0 18px;
    padding: 0;
    font-size: 11px;
}

.ai-chat-examples li {
    margin-bottom: 3px;
    color: var(--text-muted);
}

.ai-chat-message {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0 4px;
}

.ai-chat-avatar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 50%;
    background: var(--panel-border);
}

.ai-chat-user .ai-chat-avatar {
    background: rgba(56, 189, 248, 0.2);
}

.ai-chat-assistant .ai-chat-avatar {
    background: rgba(168, 85, 247, 0.2);
}

.ai-chat-bubble {
    flex: 1;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 8px 12px;
    line-height: 1.5;
}

.ai-chat-user .ai-chat-bubble {
    background: rgba(56, 189, 248, 0.05);
}

.ai-chat-bubble p {
    margin: 4px 0;
}

.ai-chat-bubble h3,
.ai-chat-bubble h4 {
    margin: 6px 0 3px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.ai-chat-bubble ul {
    margin: 4px 0 4px 16px;
    padding: 0;
}

.ai-chat-tools {
    margin-top: 6px;
    font-size: 10px;
    color: var(--text-muted);
}

.ai-chat-tools summary {
    cursor: pointer;
    padding: 2px 0;
}

.ai-chat-tools ul {
    margin-top: 4px;
    padding-left: 16px;
}

.ai-chat-tools code {
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: var(--mono-font, monospace);
}

.ai-chat-form {
    display: flex;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--panel-border);
    margin-top: 8px;
}

.ai-chat-form input {
    flex: 1;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    background: var(--panel-bg);
    color: var(--text-primary);
}

.ai-chat-form input:focus {
    outline: 2px solid #38bdf8;
    outline-offset: -1px;
}

.ai-chat-form input:disabled {
    opacity: 0.5;
}

.spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid var(--text-muted);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ai-chat-spin 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes ai-chat-spin {
    to { transform: rotate(360deg); }
}

/* Scan Receipt canvas — field picker buttons. Each carries its field
   color as custom properties (set by OcrCanvas.panelHtml). */
.btn.ocr-pick, .btn.ocr-pick:hover, .btn.ocr-pick:active {
    border: 2px solid var(--pick-stroke);
    background: var(--pick-fill);
    color: var(--pick-ink);
}
.btn.ocr-pick:hover { filter: brightness(0.96); }


/* Customizable dashboard: stat tiles share a row, panels take half or all */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.dash-card--stat { grid-column: span 1; }
.dash-card--half { grid-column: span 2; }
.dash-card--full { grid-column: span 4; }
.dash-card__body { margin-top: 6px; }
.dash-card__controls { display: inline-flex; gap: 2px; }
.dash-card__controls .btn { padding: 0 6px; line-height: 18px; font-size: 10px; }
@media (max-width: 900px) {
    .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-card--full { grid-column: span 2; }
}
@media (max-width: 560px) {
    .dash-grid { grid-template-columns: 1fr; }
    .dash-card--stat, .dash-card--half, .dash-card--full { grid-column: span 1; }
}

/* Control accounts (issue #122) — the posting code finds these by number, so
   the Chart of Accounts marks them and the edit form locks the number and the
   type. The row still gets an Edit button: renaming is allowed, and the API
   is the authority on what is refused. */
.badge-control {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
    vertical-align: middle;
    cursor: help;
}

.hint--locked {
    background: #fffbeb;
    border: 1px solid #fbbf24;
    border-left: 3px solid #d97706;
    border-radius: 3px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #78350f;
}

.hint--locked em { color: #92400e; font-style: normal; font-weight: 600; }

/* Notes drawn as a tinted box: all clear, needs attention, a caution, a
   plain step. They were inline backgrounds, which stayed pale in the dark
   theme under its light text (1.14:1); dark.css gives each a dark tint. */
.card.note--ok,
.note--ok      { background: #eaf5ec; border-left: 4px solid #1f7a36; }
.card.note--alert,
.note--alert   { background: #fdecea; border-left: 4px solid #a4242b; }
.card.note--caution,
.note--caution { background: #fffbe6; border-left: 4px solid #f5a623; }
.note--plain   { background: #f4f6f9; }

/* A void or inactive row reads as set aside: its text takes the muted
   colour. It used to fade the whole row (opacity .55-.6), which took the
   text below AA: muted text at 2.4:1 in dark. Badges keep their own. */
tbody tr.row--dim > td,
tbody tr.row--dim > td strong,
tbody tr.row--dim > td.amount { color: var(--text-muted); }

.form-group input[disabled],
.form-group select[disabled] {
    background: #f1f3f6;
    color: var(--text-muted, #6b7090);
    cursor: not-allowed;
}

/* ========================================================================
 * TYPE-AHEAD PICKERS (combobox.js)
 * A picker is a box you type into; its <select> stays, out of sight, as
 * the answer. The list hangs from the window, over dialogs and tables.
 * ======================================================================== */

.cbx {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}
.cbx.cbx--fill { display: block; width: 100%; }
.cbx[hidden] { display: none !important; }

/* The select is still there for the page's code (and a test's), but not
   for the eye, the mouse or Tab. */
.cbx > select.cbx-select {
    position: absolute !important;
    left: 0;
    bottom: 0;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    max-width: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%);
}

/* The box: like the app's other fields where no form styles it, and
   everywhere a picker's arrow, so it still reads as a list. */
.cbx-input {
    padding: 3px 6px;
    border: 1px solid var(--input-border);
    border-radius: 0;
    font-size: 11px;
    font-family: var(--font);
    color: var(--text-primary);
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%235b616d'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 8px 5px !important;
    padding-right: 20px !important;
}
.cbx > .cbx-input {
    width: 100%;
    box-sizing: border-box;
    text-overflow: ellipsis;
}

.cbx-popup {
    position: fixed;
    z-index: 450;   /* over a dialog (200) and a toast (300), under the splash */
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: var(--text-primary);
    border: 1px solid var(--input-border);
    box-shadow: 0 4px 14px rgba(0, 20, 50, 0.22);
    font-family: var(--font);
    font-size: 11px;
}
.cbx-popup[hidden] { display: none; }
.cbx-popup > ul {
    list-style: none;
    margin: 0;
    padding: 2px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
}
.cbx-popup ul ul { list-style: none; margin: 0; padding: 0; }
.cbx-opt {
    padding: 3px 8px;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cbx-opt.cbx-current { font-weight: 700; }
.cbx-opt mark { background: none; color: inherit; font-weight: 700; }
.cbx-action { color: var(--text-link); }
.cbx-in { color: var(--text-muted); font-size: 10px; }
.cbx-opt[aria-selected="true"] { background: var(--qb-navy); color: #ffffff; }
.cbx-opt[aria-selected="true"] .cbx-in { color: var(--text-on-navy); }
.cbx-group {
    display: block;
    padding: 4px 6px 2px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.cbx-note {
    padding: 3px 8px 4px;
    color: var(--text-muted);
    font-style: italic;
    border-top: 1px solid var(--panel-border);
}
.cbx-note[hidden] { display: none; }
.cbx-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
@media (forced-colors: active) {
    .cbx-opt[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* ============================================================================
 * The shop — sale counter, brands & categories, shop reports, and the
 * short shop menu (the rest of the program shows only when an administrator
 * turns on Show all features).
 * ============================================================================ */

body:not(.show-advanced) #sidebar [data-advanced] { display: none !important; }

.sidebar-advanced-btn {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    padding: 4px 6px;
    font-size: 10px;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 3px;
    cursor: pointer;
}
.sidebar-advanced-btn:hover { background: rgba(255,255,255,0.16); }
.sidebar-advanced-btn[hidden] { display: none; }
.sidebar-advanced-btn[aria-pressed="true"] { background: rgba(255,255,255,0.22); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.shop-note { color: var(--text-muted); font-size: 12px; margin: 0 0 12px; }
.shop-sub { color: var(--text-muted); font-size: 11px; }
.shop-count { color: var(--text-muted); font-size: 12px; font-weight: normal; }
.shop-h3 { margin: 18px 0 8px; font-size: 13px; color: var(--qb-navy); }
.stock-low { color: var(--text-danger); }
.empty-cell { text-align: center; color: var(--text-muted); padding: 14px; }

.shop-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shop-filters input[type="search"], .shop-filters #items-search { min-width: 220px; }
.shop-filters label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }

.shop-advanced { margin-top: 12px; border: 1px solid var(--panel-border); border-radius: 4px; padding: 6px 12px; }
.shop-advanced summary { cursor: pointer; font-size: 12px; color: var(--text-muted); }
.shop-advanced[open] summary { margin-bottom: 8px; }

/* brands & categories */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.catalog-panel { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 4px; padding: 12px; }
.catalog-panel h3 { margin: 0 0 10px; font-size: 14px; color: var(--qb-navy); }
.catalog-add { display: flex; gap: 8px; margin-bottom: 10px; }
.catalog-add input { flex: 1; min-width: 0; }

/* stat tiles and tabs */
.shop-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.shop-stats > div {
    background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 4px;
    padding: 8px 12px; display: flex; flex-direction: column; gap: 2px;
}
.shop-stats span { font-size: 11px; color: var(--text-muted); }
.shop-stats strong { font-size: 18px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.shop-stats .shop-stat--good strong { color: var(--text-success); }
.shop-stats .shop-stat--warn strong { color: var(--text-warning); }
.shop-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--panel-border); margin-bottom: 12px; }
.shop-tab {
    background: transparent; border: 1px solid transparent; border-bottom: none;
    padding: 7px 14px; font-size: 13px; cursor: pointer; color: var(--text-secondary);
    border-radius: 4px 4px 0 0;
}
.shop-tab.active { background: var(--panel-bg); border-color: var(--panel-border); color: var(--qb-navy); font-weight: 700; }
.shop-two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }

/* the sale counter */
.pos-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pos-grid { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .pos-grid { grid-template-columns: 1fr; } }
.pos-panel { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 4px; padding: 12px; }
.pos-entry { background: var(--invoice-bg); }
[data-theme="dark"] .pos-entry { background: var(--panel-bg); }
.pos-entry .form-group { margin-bottom: 10px; }
.pos-entry input, .pos-entry select { width: 100%; box-sizing: border-box; }
.pos-check { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: -2px 0 10px; }
.pos-check input { width: auto; }
.pos-cust-info { font-size: 12px; margin-top: 4px; min-height: 16px; }
.pos-item-detail { font-size: 11px; color: var(--text-muted); margin-top: 4px; min-height: 14px; }
.pos-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.pos-readout {
    padding: 6px 8px; border: 1px dashed var(--panel-border); border-radius: 3px;
    min-height: 18px; font-variant-numeric: tabular-nums; background: var(--panel-bg);
}
.pos-strong { font-weight: 700; }
.pos-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.pos-lines { max-height: 46vh; overflow: auto; }
.pos-cell { width: 80px; text-align: right; }
.pos-cell--sm { width: 56px; }
.pos-totals { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; max-width: 460px; margin-left: auto; }
.pos-total-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.pos-total-row[hidden] { display: none; }
.pos-total-row strong { font-variant-numeric: tabular-nums; }
.pos-bill-total { font-size: 18px; padding: 6px 10px; background: var(--primary-light); border-radius: 4px; }
[data-theme="dark"] .pos-bill-total { background: rgba(255,255,255,0.06); }
.pos-bill-total strong { font-size: 22px; color: var(--qb-navy); }
.pos-received-wrap { display: inline-flex; gap: 6px; align-items: center; }
.pos-received-wrap input { width: 140px; font-size: 16px; text-align: right; }
.pos-save { justify-content: flex-end; margin-top: 12px; }
.pos-summary { width: 100%; font-size: 14px; }
.pos-summary th { text-align: left; font-weight: normal; padding: 4px 0; }
.pos-summary td { padding: 4px 0; }

@media print {
    .shop-tabs, .shop-filters, .page-header .btn, .pos-buttons { display: none !important; }
}

/* a quotation on the sale screen */
.pos-quote-banner {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin: 0 0 12px; padding: 8px 12px; font-size: 12px;
    background: #fef3c7; color: #78350f; border: 1px solid #fbbf24; border-radius: 4px;
}
[data-theme="dark"] .pos-quote-banner { background: #3a2f12; color: #f5d68a; border-color: #6b5520; }

/* the menu bar: every main feature, by menu */
#menubar {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    flex-shrink: 0; z-index: 105; padding: 2px 8px;
    background: var(--qb-navy); border-bottom: 1px solid var(--qb-navy-dark);
}
#menubar .mb-left, #menubar .mb-right { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
#menubar .mb-menu { position: relative; }
#menubar .mb-btn {
    background: transparent; border: 1px solid transparent; color: #fff;
    padding: 5px 12px; font-size: 13px; cursor: pointer; border-radius: 3px;
}
#menubar .mb-btn:hover, #menubar .mb-btn:focus-visible, #menubar .mb-btn--open {
    background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.25);
}
#menubar .mb-drop {
    position: absolute; top: 100%; left: 0; min-width: 220px; padding: 4px 0; margin-top: 2px;
    background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22); z-index: 400;
}
#menubar .mb-item {
    display: flex; justify-content: space-between; gap: 16px; width: 100%;
    padding: 7px 14px; text-align: left; font-size: 13px; cursor: pointer;
    background: transparent; border: 0; color: var(--text-primary);
}
#menubar .mb-item:hover, #menubar .mb-item:focus-visible { background: var(--primary-light); color: var(--qb-navy); outline: none; }
#menubar .mb-item kbd { font: 11px/1.6 inherit; color: var(--text-muted); }
#menubar .mb-sep { height: 1px; margin: 4px 0; background: var(--panel-border); }
#menubar .mb-quick {
    padding: 4px 12px; font-size: 12px; cursor: pointer; border-radius: 3px;
    background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.3);
}
#menubar .mb-quick:hover { background: rgba(255,255,255,0.22); }
#menubar .mb-quick--primary { background: var(--qb-gold); border-color: var(--qb-gold); color: #1a1a2e; font-weight: 700; }
#menubar .mb-quick--primary:hover { background: #ddb050; }
[data-theme="dark"] #menubar { background: #0f1218; border-bottom-color: #262b36; }
[data-theme="dark"] #menubar .mb-item:hover, [data-theme="dark"] #menubar .mb-item:focus-visible { background: rgba(255,255,255,0.08); color: var(--text-primary); }
@media print { #menubar { display: none !important; } }

/* customer returns */
.ret-find { margin-bottom: 12px; }
.ret-add { margin-bottom: 12px; }
.ret-bill-info { margin-top: 8px; font-size: 13px; }
.ret-other { display: block; margin-top: 4px; width: 100%; box-sizing: border-box; }
.ret-bottom { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; }
.ret-settlements { border: 1px solid var(--panel-border); border-radius: 4px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 260px; }
.ret-settlements legend { font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 0 4px; }
.ret-settle { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; font-size: 13px; }
.ret-settle small { color: var(--text-muted); }
.ret-settle--off { opacity: 0.55; cursor: not-allowed; }
.ret-total { flex: 1; max-width: 460px; display: flex; flex-direction: column; gap: 8px; }
.pos-exchange-banner { background: #dcfce7; color: #14532d; border-color: #86efac; }
[data-theme="dark"] .pos-exchange-banner { background: #12301f; color: #9be5b4; border-color: #22573a; }
.claim-shelf { margin: 6px 0 10px; padding-left: 18px; font-size: 13px; }
.claim-shelf li { margin: 3px 0; }

/* users & roles */
.ur-matrix th[scope="row"] { font-weight: 600; text-align: left; }
.ur-check { text-align: center; width: 110px; }
.ur-add { margin-top: 12px; }

/* ========================================================================
 * Shop home page (shop_home.js)
 * ======================================================================== */
.home { display: flex; flex-direction: column; gap: 14px; }
.home-head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 18px; border-radius: 8px;
    /* fixed navy in both themes: the dark theme lightens the --qb-* blues */
    background: linear-gradient(120deg, #002a55 0%, #003f7f 55%, #2f6aa3 100%);
    color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.home-hello { font-size: 20px; }
.home-hello strong { font-weight: 700; }
.home-date { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.home-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.home-actions .btn { border-radius: 6px; padding: 7px 14px; font-size: 13px; }
.home .home-actions .btn-secondary { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.home .home-actions .btn-secondary:hover { background: rgba(255, 255, 255, 0.22); }
.home .home-actions .btn-primary { background: #fff; color: #003366; border-color: #fff; font-weight: 700; }

.home-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.home-tile {
    --tone: var(--qb-blue);
    position: relative; display: flex; flex-direction: column; gap: 4px;
    padding: 12px 14px 12px 18px; border-radius: 8px; overflow: hidden;
    background: var(--panel-bg); border: 1px solid var(--panel-border);
    color: inherit; text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.home-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tone); }
a.home-tile:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); }
.home-tile--blue { --tone: var(--chart-blue); }
.home-tile--green { --tone: var(--chart-green); }
.home-tile--amber { --tone: var(--chart-orange); }
.home-tile--red { --tone: var(--chart-red); }
.home-tile--navy { --tone: var(--qb-blue-accent); }
.home-tile__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.home-tile__value { font-size: 24px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.15; }
.home-tile__note { font-size: 11px; color: var(--text-muted); }
.home-delta { font-weight: 700; }
.home-delta--up { color: var(--text-success); }
.home-delta--down { color: var(--text-danger); }

.home-row { display: grid; gap: 14px; }
.home-row--wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.home-row--three { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.home-row--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) {
    .home-row--wide, .home-row--three, .home-row--two { grid-template-columns: 1fr; }
}

.home-panel {
    background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px;
    padding: 14px 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); min-width: 0;
}
.home-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.home-panel__head h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.home-panel__head > span, .home-panel__head a { font-size: 12px; color: var(--text-muted); }
.home-panel__head a { color: var(--text-link); text-decoration: none; }
.home-panel__head a:hover { text-decoration: underline; }
.home-count {
    display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px;
    background: var(--chart-red); color: #fff; font-size: 11px; text-align: center; vertical-align: middle;
}

.home-chart { display: flex; align-items: stretch; gap: 6px; height: 200px; padding-top: 4px; }
.home-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.home-bar__val { font-size: 10px; color: var(--text-muted); margin-bottom: 3px; white-space: nowrap; }
.home-bar__fill {
    width: 72%; max-width: 38px; border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--qb-blue-accent), var(--qb-blue));
    transition: filter 0.12s ease;
}
.home-bar:hover .home-bar__fill { filter: brightness(1.15); }
.home-bar--today .home-bar__fill { background: linear-gradient(180deg, #2fbf8a, var(--chart-green)); }
.home-bar--today .home-bar__day { color: var(--text-success); font-weight: 700; }
.home-bar__day { font-size: 10px; color: var(--text-muted); margin-top: 5px; border-top: 1px solid var(--panel-border); width: 100%; text-align: center; padding-top: 3px; }
.home-bar__date { font-size: 10px; color: var(--text-light); }

.home-month__big { font-size: 28px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.home-month__sub { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.home-list { margin: 0; display: flex; flex-direction: column; }
.home-list > div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px dashed var(--panel-border); font-size: 13px; }
.home-list dt { color: var(--text-secondary); }
.home-list dd { margin: 0; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.home-list small { font-weight: 400; color: var(--text-muted); }

.home-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.home-table td { padding: 7px 4px; border-top: 1px solid var(--panel-border); vertical-align: top; color: var(--text-primary); }
.home-table tr:first-child td { border-top: none; }
.home-table tr td, .home-table tr:nth-child(even) td { border-left: none; border-right: none; background: none; }
.home-table .amount { font-family: var(--font); }
.home-table tr.clickable { cursor: pointer; }
.home-table tr.clickable:hover td { background: var(--primary-light); }
.home-table .amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.home-muted { font-size: 11px; color: var(--text-muted); }
.home-warn { font-size: 11px; color: var(--text-warning); }
.home-list dd.home-good { color: var(--text-success); }
.home-bad { color: var(--text-danger); }
.home-empty { padding: 18px 8px; text-align: center; font-size: 13px; color: var(--text-muted); }
.home-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.home-pill--amber { background: color-mix(in srgb, var(--chart-orange) 18%, transparent); color: var(--text-warning); }
.home-pill--red { background: color-mix(in srgb, var(--chart-red) 18%, transparent); color: var(--text-danger); }
.home-credit-total { font-size: 22px; font-weight: 700; color: var(--text-warning); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.home-credit-total span { font-size: 12px; font-weight: 400; color: var(--text-muted); }

.home-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.home-top li { display: flex; gap: 10px; align-items: flex-start; }
.home-rank {
    flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: var(--primary-light); color: var(--text-primary); font-size: 12px; font-weight: 700;
}
.home-top li:first-child .home-rank { background: var(--qb-gold); color: #fff; }
.home-top__body { flex: 1; min-width: 0; }
.home-top__line { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text-primary); }
.home-top__line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-top__bar { height: 6px; border-radius: 3px; background: var(--primary-light); margin: 4px 0 2px; overflow: hidden; }
.home-top__bar div { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--qb-blue), var(--qb-blue-accent)); }

.home-waits { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.home-wait {
    --tone: var(--text-muted);
    display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 8px; text-decoration: none;
    border: 1px solid var(--panel-border); background: color-mix(in srgb, var(--tone) 8%, var(--panel-bg));
    transition: transform 0.12s ease;
}
.home-wait:hover { transform: translateY(-1px); }
.home-wait strong { font-size: 24px; color: var(--tone); font-variant-numeric: tabular-nums; }
.home-wait span { font-size: 12px; color: var(--text-secondary); }
.home-wait--blue { --tone: var(--chart-blue); }
.home-wait--amber { --tone: var(--chart-orange); }
.home-wait--red { --tone: var(--chart-red); }
.home-stockline { margin-top: 10px; }

/* ========================================================================
 * Sign-in page (auth.js): a full page, the shop's panel beside the form.
 * Fixed colours in both themes, like the white card.
 * ======================================================================== */
.auth-page {
    position: fixed; inset: 0; z-index: 99999;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(400px, 1fr);
    background: #eef2f8; overflow-y: auto;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.auth-brand {
    position: relative; overflow: hidden; color: #fff;
    display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
    padding: 44px 56px; min-height: 100vh; box-sizing: border-box;
    background:
        radial-gradient(circle at 18% 22%, rgba(91, 155, 213, 0.45), transparent 42%),
        radial-gradient(circle at 88% 85%, rgba(47, 191, 138, 0.30), transparent 40%),
        linear-gradient(140deg, #001a33 0%, #003366 48%, #0b4f8a 100%);
}
.auth-brand::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.auth-brand > * { position: relative; }
.auth-phone {
    position: absolute; border-radius: 38px; pointer-events: none;
    border: 10px solid rgba(255, 255, 255, 0.10);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.01));
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}
.auth-phone::after {
    content: ""; position: absolute; top: 14px; left: 50%; width: 30%; height: 8px;
    transform: translateX(-50%); border-radius: 6px; background: rgba(255, 255, 255, 0.14);
}
.auth-phone--one { width: 230px; height: 460px; right: -30px; bottom: -40px; transform: rotate(-14deg); }
.auth-phone--two { width: 150px; height: 300px; right: 190px; bottom: 120px; transform: rotate(10deg); opacity: 0.6; }
.auth-brand__top { display: flex; align-items: center; gap: 12px; }
.auth-logo {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, #f5b544, #e08a12); color: #1a1200;
    font-weight: 800; font-size: 16px; letter-spacing: 0.02em;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.auth-brand__name { font-size: 20px; font-weight: 700; }
.auth-brand__name small { font-size: 12px; font-weight: 600; color: #f5c56b; margin-left: 4px; }
.auth-brand__body { max-width: 480px; }
.auth-brand__shop {
    display: inline-block; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.auth-brand__headline { margin: 0 0 26px; font-size: 40px; line-height: 1.15; font-weight: 800; }
.auth-brand__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.auth-brand__points li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: #e3ecf7; }
.auth-brand__tick {
    display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(47, 191, 138, 0.22); color: #6ee7b7; font-size: 14px; font-weight: 800;
}
.auth-brand__foot { font-size: 13px; color: #b9cbe0; }

.auth-main { display: flex; align-items: center; justify-content: center; padding: 40px 28px; min-height: 100vh; box-sizing: border-box; }
.auth-card {
    width: 100%; max-width: 420px; box-sizing: border-box;
    padding: 40px 36px 32px; border-radius: 16px;
    border: 1px solid #dde3ec; box-shadow: 0 24px 60px rgba(15, 35, 70, 0.12);
}
.auth-card--wide { max-width: 460px; padding: 32px 32px 26px; }
.auth-card__eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.auth-card input:focus, .auth-card select:focus { outline: none; border-color: #0066cc !important; box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.18); }
.auth-card button[type="submit"] { transition: background 0.12s ease, transform 0.12s ease; }
.auth-card button[type="submit"]:hover { background: #0055aa !important; }
.auth-card button[type="submit"]:active { transform: translateY(1px); }
.auth-pw { position: relative; }
.auth-pw__toggle {
    position: absolute; right: 8px; bottom: 7px; padding: 5px 8px; border: 0; border-radius: 4px;
    background: transparent; font-size: 13px; font-weight: 700; cursor: pointer;
}
.auth-pw__toggle:hover { background: #eef4fb; }
.auth-pw input { padding-right: 64px !important; }

@media (max-width: 900px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-brand { min-height: 0; padding: 22px 22px 28px; gap: 22px; justify-content: flex-start; }
    .auth-brand__headline { font-size: 26px; margin-bottom: 0; }
    .auth-brand__points, .auth-brand__foot, .auth-phone--two { display: none; }
    .auth-phone--one { width: 140px; height: 280px; right: -30px; bottom: -120px; }
    .auth-brand__shop { margin-bottom: 10px; }
    .auth-main { min-height: 0; padding: 24px 16px 40px; align-items: flex-start; }
    .auth-card { padding: 28px 22px 24px; }
}

/* ========================================================================
 * Sale screen, round 10: price level and prices, history, loss warning,
 * quick cash, paid by, delivery by bilti
 * ======================================================================== */
.pos-level { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 10px; font-size: 12px; }
.pos-level__label { font-weight: 700; color: var(--text-secondary); }
.pos-gear { margin-left: auto; }
.pos-chip-radio {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--panel-border); background: var(--panel-bg); cursor: pointer; font-size: 12px;
    color: var(--text-primary); user-select: none;
}
.pos-entry .pos-chip-radio input, .pos-totals .pos-chip-radio input, .pos-settings .pos-chip-radio input { width: auto; margin: 0; }
.pos-chip-radio:has(input:checked) { border-color: var(--qb-blue); background: var(--primary-light); font-weight: 700; }
.pos-chip-radio:has(input:focus-visible) { outline: 2px solid var(--input-focus); outline-offset: 1px; }

.pos-prices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pos-prices[hidden] { display: none; }
.pos-price {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0;
    padding: 4px 10px; border-radius: 6px; border: 1px solid var(--panel-border);
    background: var(--panel-bg); color: var(--text-primary); cursor: pointer; font: inherit; line-height: 1.2;
}
.pos-price span { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.pos-price strong { font-size: 13px; font-variant-numeric: tabular-nums; }
button.pos-price:hover { border-color: var(--qb-blue); background: var(--primary-light); }
.pos-price--last { border-style: dashed; }
/* the cost: not a price to pick, and set apart in red so it is never read as one */
.pos-price--cost {
    cursor: default; border: 1px solid var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.pos-price--cost span, .pos-price--cost strong { color: var(--danger); }
.pos-history { font-size: 11px; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; }
.pos-history[hidden] { display: none; }
.pos-history details { margin-top: 2px; }
.pos-history summary { cursor: pointer; color: var(--text-link); }
.pos-history ul { margin: 4px 0 0; padding-left: 16px; }
.pos-linkbtn { background: none; border: 0; padding: 1px 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pos-linkbtn:hover { text-decoration: underline; color: var(--text-link); }
.pos-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 6px; border: 1px solid var(--panel-border); }

.pos-rate-warn {
    margin: -2px 0 10px; padding: 6px 10px; border-radius: 4px; font-size: 12px; font-weight: 700;
    background: color-mix(in srgb, var(--chart-red) 12%, var(--panel-bg)); color: var(--text-danger);
    border: 1px solid color-mix(in srgb, var(--chart-red) 40%, transparent);
}
.pos-rate-warn[hidden] { display: none; }
.pos-line--loss td { background: color-mix(in srgb, var(--chart-red) 8%, transparent); }
.pos-loss-tag { font-size: 11px; font-weight: 700; color: var(--text-danger); }

.pos-received-row input { width: 170px; font-size: 18px; font-weight: 700; text-align: right; }
.pos-cash-keys { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.pos-cash-keys .btn { min-width: 52px; font-variant-numeric: tabular-nums; }
.pos-outcome { font-size: 16px; padding: 6px 10px; border-radius: 4px; background: color-mix(in srgb, var(--chart-green) 12%, var(--panel-bg)); }
.pos-outcome strong { font-size: 20px; }
.pos-outcome:has(strong.stock-low) { background: color-mix(in srgb, var(--chart-red) 10%, var(--panel-bg)); }
.pos-method-row { align-items: flex-start; }
.pos-methods { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.pos-delivery { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.pos-delivery > span { font-weight: 700; margin-right: auto; }
.pos-ship { border: 1px dashed var(--panel-border); border-radius: 6px; padding: 8px 10px 0; background: var(--form-bg); }
.pos-ship[hidden] { display: none; }
.ship-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 10px; }
.ship-grid .form-group { margin-bottom: 8px; }
.ship-grid input, .ship-grid select { width: 100%; box-sizing: border-box; }
.pos-settings fieldset { border: 1px solid var(--panel-border); border-radius: 6px; padding: 8px 10px; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.pos-settings legend { font-size: 12px; font-weight: 700; padding: 0 4px; }
.pos-settings .ret-settlements { display: grid; }
.pos-settings textarea { width: 100%; box-sizing: border-box; }

/* home page: vendor payments, dead stock */
.home-mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.home-mini-stats > div { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 6px; background: var(--form-bg); border: 1px solid var(--panel-border); }
.home-mini-stats span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.home-mini-stats strong { font-size: 17px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.home-mini-stats strong.home-bad { color: var(--text-danger); }
.home-mini-stats strong.home-good { color: var(--text-success); }
.home-mini-stats small { font-size: 11px; color: var(--text-muted); }
.home-panel__foot { margin-top: 10px; display: flex; justify-content: flex-end; }
.home-count--amber { background: var(--chart-orange); }
@media (max-width: 560px) { .home-mini-stats { grid-template-columns: 1fr; } }

/* items: picture */
.item-pic { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; padding: 10px; border: 1px dashed var(--panel-border); border-radius: 6px; }
.item-pic__box {
    flex: none; width: 110px; height: 110px; border-radius: 8px; overflow: hidden; display: grid; place-items: center;
    background: var(--form-bg); border: 1px solid var(--panel-border); font-size: 11px; color: var(--text-muted); text-align: center;
}
.item-pic__box img { width: 100%; height: 100%; object-fit: cover; }
.item-pic__side { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.item-cell { display: flex; align-items: center; gap: 8px; }
.item-thumb { flex: none; width: 36px; height: 36px; border-radius: 6px; object-fit: cover; border: 1px solid var(--panel-border); background: var(--form-bg); }
.item-thumb--none { display: inline-block; }
.pos-method-row > span { white-space: nowrap; }

/* ========================================================================
 * Phones and small tablets. The side menu becomes a drawer behind the
 * menu button, the menu bar keeps only its quick buttons (scrolling
 * sideways), pages stack into one column, tables scroll sideways inside
 * their box, and dialogs fill the screen.
 * ======================================================================== */
.tb-menu { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 760px) {
    #app { height: 100vh; height: 100dvh; }

    /* top bar: menu button, name, company, theme, sign out */
    #topbar { padding: 0 6px; gap: 4px; height: 48px; }
    .tb-menu {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; padding: 0; font-size: 22px; line-height: 1;
        color: var(--qb-navy); border: 1px solid transparent; border-radius: 6px;
    }
    #topbar .tb-sep, #global-search, #search-results, .topbar-clock, #about-btn { display: none !important; }
    .topbar-brand { margin-right: 2px; font-size: 14px; }
    .topbar-brand span { display: none; }
    .topbar-company { max-width: 34vw; padding: 0 4px; font-size: 12px; }
    .topbar-right { gap: 2px; }
    .topbar-right > :not(#theme-toggle):not(#logout-btn):not(#refresh-btn) { display: none; }
    #theme-toggle, #logout-btn, #refresh-btn { min-height: 36px; }
    #refresh-btn .tb-label { display: none; }

    /* the menu bar: quick buttons in one sideways-scrolling row */
    #menubar { padding: 6px; }
    #menubar .mb-left { display: none; }
    #menubar .mb-right {
        flex-wrap: nowrap; overflow-x: auto; width: 100%; gap: 6px;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    #menubar .mb-right::-webkit-scrollbar { display: none; }
    #menubar .mb-quick { flex: none; padding: 8px 14px; font-size: 13px; border-radius: 999px; }

    /* the side menu: a drawer */
    #sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000;
        width: min(290px, 84vw);
        transform: translateX(-105%); transition: transform 0.2s ease;
        box-shadow: 6px 0 24px rgba(0, 0, 0, 0.35);
    }
    body.nav-open #sidebar { transform: none; }
    .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 999; background: rgba(0, 10, 30, 0.5); }
    .nav-backdrop[hidden] { display: none; }
    #sidebar .nav-link { padding: 11px 16px; font-size: 14px; }
    #sidebar .nav-section { padding-top: 12px; }

    #statusbar { display: none; }

    /* pages */
    #content { padding: 10px 10px 28px; -webkit-overflow-scrolling: touch; }
    .page-header { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
    .page-header h2 { font-size: 16px; }
    .page-header > div, .pos-head-actions { display: flex; flex-wrap: wrap; gap: 6px; }
    .toolbar, .shop-filters { flex-wrap: wrap; }
    .shop-filters input[type="search"], .shop-filters #items-search { min-width: 0; flex: 1 1 100%; }
    /* relative: a hidden screen-reader label inside a scrolling table stays
       in its box instead of widening the whole page */
    .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
    .table-container > table { min-width: 560px; }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .ret-settlements { min-width: 0; }
    .shop-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .shop-tab { flex: none; }

    /* typing: 16px stops a phone zooming in on every field */
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea, .cbx-input {
        font-size: 16px !important;
    }
    .btn { min-height: 36px; }
    .btn.btn-sm { min-height: 32px; }

    /* dialogs fill the screen */
    .modal-overlay { padding: 0; align-items: stretch; }
    .modal, .modal.modal--wide {
        width: 100%; max-width: 100%; max-height: none; height: 100%;
        border: 0; display: flex; flex-direction: column;
    }
    #modal-body { padding: 12px; overflow-y: auto; flex: 1; }
    .modal-header h2 { font-size: 14px; }
    .form-actions { flex-wrap: wrap; }

    /* home page */
    .home-head { padding: 12px; }
    .home-hello { font-size: 17px; }
    .home-actions { width: 100%; }
    .home-actions .btn { flex: 1 1 auto; padding: 8px 10px; font-size: 13px; }
    .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .home-tile { padding: 10px 10px 10px 14px; }
    .home-tile__value { font-size: 18px; }
    .home-chart { height: 150px; gap: 3px; }
    .home-bar__val { display: none; }
    .home-panel { padding: 12px; }

    /* sale screen */
    .pos-grid { grid-template-columns: minmax(0, 1fr); }
    .pos-panel { min-width: 0; }
    .pos-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ret-bottom { flex-direction: column; align-items: stretch; }
    .ret-total { max-width: none; }
    .pos-totals { max-width: none; }
    .pos-received-row input { width: 150px; }
    .pos-cell { width: 70px; }
    .pos-cell--sm { width: 52px; }
    .pos-lines { max-height: none; }
    .pos-lines table { min-width: 520px; }
    .pos-save .btn { flex: 1 1 46%; }
    .pos-gear { margin-left: 0; }
    .pos-methods { justify-content: flex-start; }
    .pos-method-row { flex-direction: column; align-items: stretch; }
    .pos-delivery > span { width: 100%; }

    /* items */
    .item-cell { min-width: 190px; }
    .item-pic { gap: 10px; }
    .item-pic__box { width: 84px; height: 84px; }
}

@media (max-width: 420px) {
    .shop-stats { grid-template-columns: minmax(0, 1fr); }
    .home-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .home-tile__label { font-size: 10px; }
}

/* ---- round 11: sale screen customer + payment account rows ---- */
.pos-cust-row { display: flex; gap: 6px; align-items: stretch; }
.pos-cust-row > :first-child { flex: 1 1 auto; min-width: 0; }
.pos-cust-new { flex: none; white-space: nowrap; }
.pos-into-row { gap: 8px; align-items: center; }
.pos-into-row[hidden] { display: none; }
.pos-into-row select { flex: 1 1 auto; min-width: 0; max-width: 320px; font-size: 13px; padding: 4px 6px; }
.pay-accts td input, .pay-accts td select { width: 100%; min-width: 110px; }

/* ---- round 12: customer return window ---- */
.ret-find-row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; }
.ret-find-cust { flex: 1 1 320px; min-width: 0; margin: 0; }
.ret-find-bill { display: flex; flex-direction: column; gap: 4px; }
.ret-find-bill label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.ret-find-bill__row { display: flex; gap: 6px; }
.ret-h { margin: 0 0 8px; font-size: 14px; }
.ret-bills { margin-bottom: 12px; }
.ret-billcard { border: 1px solid var(--panel-border); border-radius: 6px; padding: 8px 10px; margin-top: 8px; }
.ret-billcard--on { border-color: var(--qb-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--qb-blue) 20%, transparent); }
.ret-billcard__head { font-size: 13px; margin-bottom: 4px; }
.ret-billcard__lines { width: 100%; border-collapse: collapse; }
.ret-billcard__lines td { padding: 4px 6px; border-top: 1px solid var(--panel-border); font-size: 13px; }
.ret-billcard__lines label { cursor: pointer; display: block; }
.ret-tick { width: 28px; }
.ret-tick input { width: 18px; height: 18px; cursor: pointer; }
.ret-new { margin-top: 12px; }
.ret-new .shop-filters { margin-bottom: 8px; }
.ret-diff { max-width: 420px; margin: 10px 0 0 auto; }
.ret-diff--pay strong { color: var(--danger); }
.ret-diff--back strong { color: var(--success); }
.ret-save { margin-top: 12px; justify-content: flex-end; }
@media (max-width: 760px) {
    .ret-find-bill, .ret-find-cust { flex: 1 1 100%; }
    .ret-diff { max-width: none; }
}

/* ---- round 13: a price below cost (or below what the role may sell at) is red ---- */
#pos-rate.pos-rate--low {
    border-color: var(--danger); color: var(--danger); font-weight: 700;
    background: color-mix(in srgb, var(--danger) 10%, var(--panel-bg));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 25%, transparent);
}
.pos-price.pos-price--low { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--panel-bg)); }
.pos-price.pos-price--low strong, .pos-price.pos-price--low span { color: var(--danger); }
.pos-line--loss td { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.pos-line--loss input.pos-cell { border-color: var(--danger); color: var(--danger); font-weight: 700; }

/* ---- round 15: the owner's "Cost price" choice under Sell at ---- */
.pos-chip-radio--cost { border-color: var(--danger); color: var(--danger); }
.pos-chip-radio--cost:has(input:checked) { background: color-mix(in srgb, var(--danger) 12%, var(--panel-bg)); }

/* ---- round 16: purchase on cash or credit ---- */
.bill-paymode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px;
    padding: 8px 10px; border: 1px solid var(--panel-border); border-radius: 6px; background: var(--panel-bg); }
.bill-paymode__label { font-weight: 700; font-size: 13px; }
.bill-paidfrom { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.bill-paidfrom[hidden] { display: none; }
.bill-paidfrom label { font-size: 12px; font-weight: 700; color: var(--text-muted); }
#bill-terms-group[hidden] { display: none; }

/* ---- round 17: Bank & Cash balances ---- */
.money-total { margin-left: auto; font-size: 14px; }
.money-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 14px; }
.money-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
    padding: 12px 14px; border: 1px solid var(--panel-border); border-radius: 8px;
    background: var(--panel-bg); color: var(--text-primary); cursor: pointer; font: inherit;
}
.money-card:hover { border-color: var(--qb-blue); }
.money-card--on { border-color: var(--qb-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--qb-blue) 25%, transparent); }
.money-card__kind { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.money-card__name { font-weight: 700; font-size: 14px; }
.money-card__sub { font-size: 12px; color: var(--text-muted); }
.money-card__bal { font-size: 22px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.money-card__flow { font-size: 11px; color: var(--text-muted); }
.money-in { color: var(--success); }
.money-out { color: var(--danger); }
.money-ledger { margin-top: 6px; }

/* ---- round 18: the report behind each page ---- */
.report-tabs { margin-bottom: 10px; }
.report-tabs a.shop-tab { text-decoration: none; }
.report-section { margin-top: 14px; }
.report-total td { border-top: 2px solid var(--panel-border); }
.report-print-head { display: none; }
@media print {
    .report-tabs, .shop-filters, .page-header .btn, .page-header a.btn { display: none !important; }
    .report-print-head { display: block; font-weight: 700; margin: 0 0 8px; }
}

/* ---- round 19: WhatsApp ---- */
.btn-whatsapp { background: #177a45; border-color: #136638; color: #fff; }
.btn-whatsapp:hover, .btn-whatsapp:focus-visible { background: #12623a; border-color: #0f5231; color: #fff; }
@media print { .btn-whatsapp { display: none !important; } }

/* ---- round 20: the shop assistant ---- */
.ask-fab {
    position: fixed; right: 18px; bottom: 34px; z-index: 900;
    padding: 10px 16px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--qb-navy); color: #fff; font: inherit; font-weight: 700; font-size: 14px;
    box-shadow: 0 6px 18px rgba(0, 20, 50, .3);
}
.ask-fab:hover, .ask-fab:focus-visible { filter: brightness(1.15); }
.ask-panel {
    position: fixed; right: 18px; bottom: 84px; z-index: 950; width: min(400px, calc(100vw - 32px));
    height: min(560px, calc(100vh - 140px)); display: flex; flex-direction: column;
    background: var(--panel-bg); color: var(--text-primary); border: 1px solid var(--panel-border);
    border-radius: 12px; box-shadow: 0 12px 36px rgba(0, 10, 30, .35); overflow: hidden;
}
.ask-panel[hidden] { display: none; }
.ask-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--qb-navy); color: #fff; }
.ask-head h2 { margin: 0; font-size: 15px; color: #fff; }
.ask-close { background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.ask-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ask-msg { max-width: 88%; padding: 8px 11px; border-radius: 10px; font-size: 14px; line-height: 1.45; word-wrap: break-word; }
.ask-msg--me { align-self: flex-end; background: color-mix(in srgb, var(--qb-blue) 18%, var(--panel-bg)); }
.ask-msg--bot { align-self: flex-start; background: color-mix(in srgb, var(--text-muted) 12%, var(--panel-bg)); }
.ask-msg--busy { font-style: italic; color: var(--text-muted); }
.ask-log > .btn { align-self: flex-start; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.ask-chip { border: 1px solid var(--panel-border); background: var(--panel-bg); color: var(--text-primary); border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.ask-chip:hover { border-color: var(--qb-blue); }
.ask-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--panel-border); }
.ask-form input { flex: 1; min-width: 0; }
@media (max-width: 760px) {
    .ask-fab { right: 12px; bottom: 14px; }
    .ask-panel { inset: 0; width: 100%; height: 100%; border-radius: 0; }
}
@media print { .ask-fab, .ask-panel { display: none !important; } }
.ask-msg--warn { border: 1px solid var(--warning); }
/* ten quick questions always on show: two rows, the rest a scroll away */
.ask-chips { max-height: 78px; overflow-y: auto; padding-top: 8px; border-top: 1px solid var(--panel-border); }
.ask-chip:disabled { opacity: .55; cursor: default; }
.ask-fab { white-space: nowrap; }
@media (max-width: 760px) { .ask-chips { max-height: 150px; } .ask-chip { font-size: 13px; padding: 6px 11px; } }