/* =========================================================
   SALPRO — design tokens
   Palette: two-colour system — deep navy (#0D497B) + amber (#FFB81C)
   on a cool near-white canvas. Type: Space Grotesk (display), Inter (body),
   IBM Plex Mono (figures). Signature: ledger rows with a status bar
   and monospaced quantities, dressed in a quieter, richer palette.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
    --ink:        #072C4A;
    --ink-soft:   #0B3B63;
    --ink-line:   rgba(255,255,255,.08);
    --canvas:     #F9FAFC;
    --paper:      #FFFFFF;
    --line:       #E1E7EF;
    --line-soft:  #ECEFF4;
    --text:       #1B1E22;
    --muted:      #6B6F76;

    --blue:       #0D497B;
    --blue-dark:  #093556;
    --blue-tint:  #E6EFF7;

    --gold:       #FFB81C;
    --gold-dark:  #946500;
    --gold-tint:  #FFF6DD;

    --amber:      #946500;
    --amber-tint: #FFF6DD;

    --brick:      #9A3B3A;
    --brick-dark: #7A2D2C;
    --brick-tint: #F8EAE8;

    --radius:     14px;
    --radius-sm:  10px;
    --shadow-sm:  0 1px 2px rgba(7,44,74,.04);
    --shadow:     0 1px 2px rgba(7,44,74,.04), 0 12px 28px -18px rgba(7,44,74,.20);
    --shadow-lg:  0 30px 80px -20px rgba(10,14,20,.45);
    --ease:       cubic-bezier(.2,.7,.3,1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--text);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .brand, .nav-section-title { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.01em; }
.mono, .money, td.num, .qty-badge { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-variant-numeric: tabular-nums; }

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--gold-tint); color: var(--ink); }

/* Slim, quiet scrollbars — a small premium tell on desktop */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(13,73,123,.22); border-radius: 999px; border: 2px solid var(--canvas); }
::-webkit-scrollbar-thumb:hover { background: rgba(13,73,123,.35); }

/* ---------------- App shell ---------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 248px;
    flex-shrink: 0;
    background:
        radial-gradient(560px 380px at -8% -14%, rgba(255,184,28,.20), transparent 55%),
        linear-gradient(155deg, rgba(255,255,255,.10) 0%, transparent 30%),
        linear-gradient(200deg, #14609E 0%, #0D497B 42%, #0A3B64 78%, #072C4A 100%);
    color: #D6E4F0;
    display: flex;
    flex-direction: column;
    padding: 22px 0 0;
    /* Pinned to the viewport and scrolls on its own, so every link
       (including Sign out) is always reachable on short screens. */
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.25) transparent;
    box-shadow: 6px 0 24px -6px rgba(7,44,74,.35);
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 999px; border: 0; }
.sidebar::after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
    background: linear-gradient(180deg, rgba(255,184,28,.60), rgba(255,255,255,.05) 30%, transparent 70%);
}
.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    font-weight: 700;
    font-size: 19px;
    padding: 0 22px 20px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    margin-bottom: 12px;
}
.sidebar .role-pill {
    align-self: flex-start;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 22px 18px;
    padding: 7px 15px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    border: 1.5px solid #FFB81C;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
}
.nav-section-title {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    color: #FFB81C;
    padding: 16px 22px 7px;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 22px;
    margin: 1px 10px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 500;
    color: #F2F7FB;
    border-left: 2px solid transparent;
    transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-link:hover { background: rgba(255,255,255,.10); color: #fff; }
.nav-link.active {
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
    box-shadow: 0 6px 16px -8px rgba(255,184,28,.7);
}
.nav-link.active:hover { background: var(--gold); color: var(--ink); }
.nav-link .ic { width: 18px; text-align: center; opacity: .95; }
.nav-link.active .ic { opacity: 1; color: var(--ink); }
.sidebar-foot {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding: 14px 22px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #072C4A;
    border-top: 1px solid rgba(255,255,255,.12);
}
.logout-link { color: #FFFFFF; font-size: 13px; font-weight: 500; }
.logout-link:hover { color: #FFFFFF; }

/* ---------------- Main column ---------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    height: 66px;
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 30px;
    position: sticky;
    top: 0;
    z-index: 30;
}
.topbar h1 { font-size: 18px; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.topbar .who { font-size: 13px; color: var(--muted); flex-shrink: 0; }
.topbar .who strong { color: var(--text); font-weight: 600; }
.content { padding: 30px; flex: 1; min-width: 0; }
/* Hamburger toggle for the off-canvas sidebar — only shown on phones, see
   media query below. Sits inert (display:none) at desktop/tablet widths. */
.menu-btn {
    display: none;
    flex-shrink: 0;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 9px;
    font-size: 18px;
    cursor: pointer;
    color: var(--text);
    transition: border-color .15s var(--ease);
}
.menu-btn:hover { border-color: var(--gold); }
.sidebar-backdrop { display: none; }

/* ---------------- Cards / KPIs ---------------- */
.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card-pad { padding: 22px 24px; }
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19px 24px;
    border-bottom: 1px solid var(--line);
}
.card-head h2 { font-size: 15px; margin: 0; font-weight: 600; letter-spacing: -.005em; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 26px; }
.kpi {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 19px 21px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.kpi::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--gold);
    opacity: 1;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kpi .label { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; line-height: 1; display: block; }
.kpi .value { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 27px; line-height: 1.15; margin-top: 7px; letter-spacing: -.01em; }
.kpi .sub { font-size: 12px; color: var(--muted); margin-top: 5px; }
.kpi.accent-blue::before { background: var(--blue); }
.kpi.accent-blue .value { color: var(--blue-dark); }
.kpi.accent-amber::before { background: linear-gradient(90deg, var(--amber), var(--gold)); }
.kpi.accent-amber .value { color: var(--amber); }
.kpi.accent-brick::before { background: linear-gradient(90deg, var(--blue), var(--gold)); }
.kpi.accent-brick .value { color: var(--brick); }

/* ---------------- Tables (ledger style) ---------------- */
table.ledger { width: 100%; border-collapse: collapse; }
table.ledger th {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
    color: var(--muted);
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #FBFCFE, #F2F5F9);
}
table.ledger td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); font-size: 14px; vertical-align: middle; }
table.ledger tbody tr { border-left: 4px solid transparent; transition: background-color .12s var(--ease); }
table.ledger tbody tr.status-ok      { border-left-color: var(--blue); }
table.ledger tbody tr.status-low     { border-left-color: var(--amber); background: var(--amber-tint); }
table.ledger tbody tr.status-out     { border-left-color: var(--blue); background: var(--brick-tint); }
table.ledger tbody tr:hover { background-color: #F4F8FC; }

td.num, th.num,
table.ledger td.num, table.ledger th.num { text-align: right; }

/* Fixed column widths (used via <colgroup>) so a table with mostly short
   values — badges, phone numbers, small counts — doesn't stretch one lone
   text column (e.g. Email) across all the leftover space, which pushes the
   later columns far away from it. */
table.ledger.ledger-fixed { table-layout: fixed; }
table.ledger.ledger-fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-ok    { background: var(--blue-tint); color: var(--blue-dark); }
.badge-low   { background: var(--amber-tint); color: #8A5F1D; }
.badge-out   { background: var(--brick-tint); color: var(--brick); }
.badge-muted { background: #ECEFF4; color: var(--muted); }

/* ---------------- Forms / buttons ---------------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.form-grid-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
label { font-size: 13px; font-weight: 600; color: var(--text); display: block; margin-bottom: 6px; }
input, select, textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: var(--paper);
    color: var(--text);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); outline: none; }
.field { margin-bottom: 14px; }

/* ---------------- Filter / search bar (card-head toolbars) ---------------- */
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-bar .search-field { position: relative; }
.filter-bar .search-field input[type="search"] {
    width: 260px;
    padding-left: 34px;
    background: var(--canvas);
}
.filter-bar .search-field input[type="search"]:focus { background: var(--paper); }
.filter-bar .search-field .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 14px;
    pointer-events: none;
}
.filter-bar select { width: auto; min-width: 168px; }
.filter-bar .btn { padding: 10px 15px; white-space: nowrap; }
@media (max-width: 640px) {
    .filter-bar .search-field input[type="search"] { width: 100%; }
    .filter-bar { width: 100%; }
}

/* ---------------- Grouped forms (sections + combo fields) ---------------- */
.form-section { margin-bottom: 24px; }
.form-section:last-of-type { margin-bottom: 0; }
.form-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--gold-dark);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: 0 0 14px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
}
/* Pairs a "pick existing" select with its "or type new" input as one
   visual unit, so it reads as one field with two ways to fill it in
   rather than two unrelated fields. */
.field-combo { display: flex; align-items: flex-end; gap: 10px; }
.field-combo .field { flex: 1; margin-bottom: 0; min-width: 0; }
.field-combo .combo-or { font-size: 12px; color: var(--muted); padding-bottom: 12px; white-space: nowrap; font-style: italic; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 17px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .1s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn-primary { background: var(--gold); color: var(--ink); box-shadow: 0 1px 1px rgba(255,255,255,.35) inset, 0 8px 18px -8px rgba(255,184,28,.7); }
.btn-primary:hover { background: #FFC43D; box-shadow: 0 1px 1px rgba(255,255,255,.4) inset, 0 12px 24px -8px rgba(255,184,28,.8); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-outline { background: var(--paper); border-color: var(--line); color: var(--text); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-tint); }
.btn-danger { background: #004B87; color: #fff; box-shadow: 0 8px 18px -8px rgba(0,75,135,.55); }
.btn-danger:hover { background: #003A6A; box-shadow: 0 12px 24px -8px rgba(0,75,135,.65); transform: translateY(-1px); }
.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }
/* Keep the amber CTA at full strength even when disabled — no washed-out yellow */
.btn-primary[disabled], .btn-primary:disabled { opacity: 1; background: var(--gold); color: var(--ink); box-shadow: 0 1px 1px rgba(255,255,255,.35) inset, 0 8px 18px -8px rgba(255,184,28,.7); }

/* ---------------- Alerts / flash ---------------- */
.alert { padding: 13px 17px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; border: 1px solid transparent; font-weight: 500; }
.alert-success { background: var(--blue-tint); color: var(--blue-dark); border-color: #C3D8EA; }
.alert-error   { background: var(--brick-tint); color: var(--brick); border-color: #EAC2C2; }
.alert-info    { background: #E6EFF7; color: #0D497B; border-color: #C3D8EA; }

/* ---------------- Login / auth pages ---------------- */
.auth-body {
    background:
        radial-gradient(900px 560px at 15% 0%, rgba(255,184,28,.14), transparent 55%),
        radial-gradient(1000px 700px at 100% 100%, rgba(20,96,158,.55), transparent 60%),
        linear-gradient(160deg, #072C4A, #0D497B 60%, #072C4A);
    display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px;
}
.auth-card {
    background: var(--paper);
    width: 388px;
    max-width: 100%;
    border-radius: 18px;
    padding: 38px 34px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255,255,255,.06);
    position: relative;
}
.auth-card::before {
    content: '';
    position: absolute; top: 0; left: 24px; right: 24px; height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--blue));
    border-radius: 0 0 4px 4px;
}
.auth-card .brand { display: flex; align-items: center; gap: 11px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; margin-bottom: 5px; }
.auth-card .tag { color: var(--muted); font-size: 13px; margin-bottom: 24px; }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 8px; padding: 12px 17px; }
.auth-hint { margin-top: 18px; font-size: 12px; color: var(--muted); background: var(--canvas); padding: 10px 12px; border-radius: var(--radius-sm); }

.denied-card {
    background: var(--paper);
    width: 420px;
    max-width: 100%;
    margin: 10vh auto;
    border-radius: 18px;
    padding: 42px 38px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.denied-code { font-family: 'Space Grotesk', sans-serif; font-size: 44px; font-weight: 700; color: var(--brick); }

/* ---------------- POS checkout layout ---------------- */
.pos-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
.pos-product { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--paper); }
.pos-product button { flex-shrink: 0; }
.cart-line {
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--canvas);
    font-size: 14px;
}
.cart-line-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.cart-line-name { font-weight: 600; line-height: 1.3; }
.cart-line-remove {
    background: none; border: none; color: #004B87;
    font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 0; flex-shrink: 0;
}
.cart-line-remove:hover { text-decoration: underline; }
.cart-line-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.qty-stepper { display: flex; align-items: center; gap: 8px; }
.qty-stepper .mono { min-width: 18px; text-align: center; }
.cart-line-price { display: flex; align-items: center; gap: 6px; }
.cart-line-price input { width: 84px; padding: 5px 8px; }
.cart-line-was { text-decoration: line-through; }
.cart-line-total { font-weight: 700; margin-left: auto; }
.cart-total-row { display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; padding-top: 12px; }

.text-muted { color: var(--muted); }
.mt-0 { margin-top: 0; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.empty-state { text-align: center; padding: 50px 20px; color: var(--muted); }

@media (max-width: 900px) {
    .sidebar { width: 76px; }
    .sidebar .brand span.full, .nav-link span.label, .nav-section-title, .role-pill { display: none; }
    .pos-layout { grid-template-columns: 1fr; }
    .sidebar-foot { padding-left: 10px; padding-right: 10px; }
}

/* ---------------- Phones: off-canvas nav, scrollable tables, stacked forms ---------------- */
@media (max-width: 640px) {
    .menu-btn { display: flex; }

    /* Sidebar becomes a full-height overlay panel, hidden off-screen until
       the hamburger opens it — reusing the same markup/labels as desktop
       rather than a cut-down icon rail, since there's no room for a
       permanent rail on a phone. */
    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: auto;
        width: 264px;
        max-width: 86vw;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform .22s var(--ease);
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    .sidebar-foot { padding-left: 22px; padding-right: 22px; }
    .sidebar.open { transform: translateX(0); box-shadow: 12px 0 32px rgba(0,0,0,.35); }
    .sidebar .brand span.full, .sidebar .nav-link span.label, .sidebar .nav-section-title, .sidebar .role-pill { display: inline-flex; }
    .sidebar-backdrop.open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(6,9,13,.55);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        z-index: 55;
    }

    .topbar { padding: 0 14px; height: 56px; }
    .topbar h1 { font-size: 16px; }
    .topbar .who { display: none; } /* date + name — not essential on a phone-width topbar */
    .content { padding: 14px; }

    .card-head { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
    .card-pad { padding: 16px; }

    /* Let a wide table scroll horizontally inside its card instead of
       squeezing every column unreadably thin. */
    table.ledger { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    table.ledger.ledger-fixed { table-layout: auto; }
    table.ledger.ledger-fixed td { white-space: nowrap; }

    .form-grid, .form-grid-wide { grid-template-columns: 1fr; }
    .field-combo { flex-direction: column; align-items: stretch; gap: 6px; }
    .field-combo .combo-or { padding-bottom: 0; }
    .field-combo .field label[aria-hidden] { display: none; }

    .pos-product { flex-wrap: wrap; gap: 8px; }
    .kpi-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
    .kpi-grid { grid-template-columns: 1fr; }
}

/* ---------------- Quantity-first POS ---------------- */
.pos-simple { display:grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, .7fr); gap:20px; align-items:start; }
.pos-entry-head h2 { margin-bottom:4px; }
.quick-entry { display:grid; grid-template-columns:150px minmax(0,1fr); gap:18px; align-items:start; padding:2px 0 18px; }
.quick-entry .field { margin:0; }
.quick-entry input { font-size:18px; min-height:44px; }
.qty-field input { font-weight:700; text-align:center; }
.quick-qty { display:flex; gap:5px; margin-top:7px; }
.quick-qty .btn { flex:1; }
.description-field { min-width:0; }
.item-search-wrap { position:relative; }
.entry-hint { font-size:12px; margin-top:5px; }
.item-suggestions { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; max-height:310px; overflow-y:auto; }
.item-suggestion { display:flex; width:100%; border:0; background:transparent; padding:12px 14px; text-align:left; cursor:pointer; justify-content:space-between; gap:12px; color:inherit; transition:background-color .1s var(--ease); }
.item-suggestion:hover, .item-suggestion:focus { background:var(--gold-tint); }
.item-suggestion span { color:var(--muted); white-space:nowrap; }
.sale-table-wrap { overflow-x:auto; }
.sale-entry-table { margin:0; min-width:650px; }
.sale-entry-table th, .sale-entry-table td { vertical-align:middle; }
.sale-unit-note { font-size:11px; margin-top:2px; }
.sale-grand-row th { font-size:17px; padding-top:16px; border-top:2px solid var(--line); }
.sale-total-due { font-size:18px; padding-top:16px; border-top:1px solid var(--line); }
@media (max-width:900px) { .pos-simple { grid-template-columns:1fr; } }
@media (max-width:640px) { .quick-entry { grid-template-columns:1fr; } .item-suggestion { display:block; } .item-suggestion span { display:block; margin-top:3px; } }

/* ---------------- Unit picker (quantity-first, color-coded) ---------------- */
.unit-picker-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.unit-picker { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.unit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 108px;
    min-height: 52px;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .1s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.unit-btn:active { transform: scale(.97); }
/* Neutral by default; color only shows up once a button is selected or
   hovered, so the row reads calm instead of solid blocks of color. */
.unit-btn-loose, .unit-btn-bundle {
    background: var(--paper);
    color: var(--text);
    border-color: var(--line);
}
.unit-btn-loose:hover { background: var(--gold-tint); color: var(--ink); border-color: var(--gold); }
.unit-btn-loose.active { background: var(--gold); color: var(--ink); border-color: var(--gold); box-shadow: 0 6px 16px -8px rgba(255,184,28,.7); }
.unit-btn-bundle:hover { background: var(--blue-tint); color: var(--blue-dark); border-color: var(--blue); }
.unit-btn-bundle.active { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 6px 16px -8px rgba(13,73,123,.45); }
.unit-btn-sm { min-width: 0; min-height: 0; padding: 6px 12px; font-size: 13px; font-weight: 600; margin: 4px 6px 0 0; border-radius: 8px; }

.qty-stepper-wrap { margin-bottom: 6px; }
.qty-stepper { display: flex; align-items: stretch; gap: 8px; max-width: 220px; }
.qty-step-btn { min-width: 48px; font-size: 22px; font-weight: 700; justify-content: center; }
.qty-stepper input {
    flex: 1;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    font-family: 'IBM Plex Mono', monospace;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px;
}

.unit-mismatch {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--amber-tint);
    color: #6B4A15;
    font-size: 14px;
}

.legend-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend-chip { font-size: 14px; }
.legend-loose { color: var(--gold); }
.legend-bundle { color: var(--blue); }

/* Color-coded cart lines: loose in amber, full bundles/cartons in navy */
table.ledger tbody tr.row-loose { border-left: 4px solid var(--gold); background: var(--gold-tint); }
table.ledger tbody tr.row-bundle { border-left: 4px solid var(--blue); background: var(--blue-tint); }

/* Bargain price: editable right in the cart line */
.bargain-price-input {
    width: 100px;
    text-align: right;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--paper);
}
.bargain-price-input:focus { border-color: var(--blue); }
.bargain-note { font-size: 11px; color: var(--brick); margin-top: 2px; text-align: right; }

/* Per-product unit chips shown in the product list */
.unit-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.unit-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.unit-chip-loose { background: var(--gold-tint); color: var(--gold-dark); }
.unit-chip-bundle { background: var(--blue-tint); color: var(--blue-dark); }

/* ---------------- Product add/edit: flexible per-unit rows ---------------- */
.unit-form .form-section { margin-bottom: 18px; }
.unit-form .form-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gold-dark); font-weight: 700; margin: 0 0 8px; }
.unit-rows { display: flex; flex-direction: column; gap: 10px; }
.unit-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 13px;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.unit-row-main {
    display: grid;
    grid-template-columns: 1.6fr .8fr 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}
.unit-row .unit-row-bundle { padding-bottom: 0; margin: 0; }
.unit-row .unit-row-bundle input { width: auto; }
.unit-row .field { margin-bottom: 0; }
.unit-row-remove { align-self: end; height: 38px; }
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding-bottom: 9px; }
@media (max-width: 900px) {
    .unit-row-main { grid-template-columns: 1fr 1fr; }
    .unit-row-main .unit-row-name { grid-column: 1 / -1; }
    .unit-row-remove { justify-self: end; }
}


/* ---------------- Products page: roomier layout ---------------- */
textarea { resize: vertical; min-height: 72px; line-height: 1.45; }
.form-help { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.form-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; }

/* Collapsible "Add product" card */
details.add-product > summary { list-style: none; cursor: pointer; }
details.add-product > summary::-webkit-details-marker { display: none; }
.add-product-summary { display: flex; align-items: center; justify-content: space-between; }
details.add-product .when-open { display: none; }
details.add-product[open] .when-open { display: inline; }
details.add-product[open] .when-closed { display: none; }
details.add-product[open] > summary { border-bottom: 1px solid var(--line); }

/* Product list cells */
table.ledger td.col-product { min-width: 220px; max-width: 320px; white-space: normal; }
.product-name { font-weight: 600; }
.product-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.product-desc {
    font-size: 12.5px; color: var(--text); opacity: .75; margin-top: 4px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
table.ledger td.col-class { white-space: normal; min-width: 130px; }
table.ledger td.col-actions { width: 1%; white-space: nowrap; }
.row-actions { display: flex; gap: 6px; align-items: center; }
.row-actions form { margin: 0; }
table.ledger td .unit-chip-list { max-width: 460px; }
td.edit-cell { padding: 20px 24px; white-space: normal; }
.edit-panel { max-width: 900px; }

/* Products list: calm price grid (replaces the coloured pills) */
.price-grid { display: grid; grid-template-columns: repeat(4, minmax(84px, 1fr)); gap: 8px 10px; max-width: 440px; }
.price-cell { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 2px 9px; border-left: 3px solid var(--line); min-width: 0; }
.price-cell.is-loose { border-left-color: var(--gold); }
.price-cell.is-bundle { border-left-color: var(--blue); }
.price-unit { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.price-amt { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.price-disc { font-size: 11px; color: var(--muted); }
.product-desc-add { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--blue); text-decoration: none; opacity: .75; }
.product-desc-add:hover { opacity: 1; text-decoration: underline; }
.product-desc { max-width: 300px; }
@media (max-width: 900px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }

.desc-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 20px 14px; padding: 12px 16px; background: var(--gold-tint); border: 1px solid #FFE3A0; border-radius: var(--radius-sm); font-size: 13.5px; }

mark { background: #FFE08A; color: inherit; padding: 0 1px; border-radius: 2px; }
.filter-bar .search-field input[type="search"] { width: 320px; }

/* POS: item suggestions show a description line so look-alikes can be told apart */
.item-suggestion { align-items:center; border-bottom:1px solid var(--line-soft); }
.item-suggestion:last-child { border-bottom:0; }
.sug-main { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sug-desc { color:var(--muted); font-size:12.5px; }
.sug-price { color:var(--text); font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.line-desc { font-size:12px; color:var(--muted); margin-top:2px; }
.item-suggestions { max-height:420px; }
@media (max-width:640px) { .sug-price { margin-top:4px; } }

.added-notice { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding:10px 13px; background:var(--blue-tint); border:1px solid #C3D8EA; border-radius:var(--radius-sm); font-size:13.5px; }

.added-notice[hidden], .unit-mismatch[hidden] { display:none !important; }

.item-suggestions { max-height: min(60vh, 520px); }

/* POS item list — mirrors the Products page row layout */
.item-suggestion { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto; align-items:center; gap:16px; }
.sug-sub { color:var(--muted); font-size:12.5px; }
.sug-class { min-width:0; font-size:14px; }
.sug-prices { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.sug-cell { display:flex; flex-direction:column; padding:2px 10px; border-left:3px solid var(--line); min-width:64px; }
.sug-cell.is-loose { border-left-color:var(--gold); }
.sug-cell.is-bundle { border-left-color:var(--blue); }
.sug-cell.is-selected { background:var(--blue-tint); border-radius:0 6px 6px 0; }
.sug-unit { font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.sug-amt { font-weight:700; font-variant-numeric:tabular-nums; }
.sug-noprice { color:var(--muted); font-size:13px; }
@media (max-width:760px) { .item-suggestion { grid-template-columns:1fr; gap:6px; } .sug-prices { justify-content:flex-start; } }

/* item count shown under each unit button and next to the quantity label */
.unit-btn { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.2; }
.unit-btn-items { font-size:12px; font-weight:600; opacity:.75; }
.qty-unit-items { color:var(--muted); font-weight:600; }

/* Review-before-completing-sale modal (POS Checkout) */
.review-modal-backdrop[hidden] { display: none; }
.review-modal-backdrop {
    position: fixed; inset: 0; background: rgba(10,14,20,.6);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px; z-index: 1000;
}
.review-modal {
    background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    width: 100%; max-width: 640px; max-height: 88vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.review-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 19px 24px; border-bottom: 1px solid var(--line);
}
.review-modal-head h2 { margin: 0; font-size: 19px; font-weight: 600; }
.review-modal-close {
    background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer;
    color: var(--muted); padding: 4px 8px; border-radius: 8px; transition: background-color .15s var(--ease);
}
.review-modal-close:hover { color: var(--text); background: var(--canvas); }
.review-modal-body { padding: 22px 24px; overflow-y: auto; }
.review-modal-summary { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.review-modal-summary > div {
    display: flex; justify-content: space-between; padding: 5px 0; font-size: 14.5px;
}
.review-modal-summary span { color: var(--muted); }
.review-modal-grand {
    margin-top: 6px; padding-top: 10px !important; border-top: 1px solid var(--line);
    font-size: 17px !important;
}
.review-modal-actions {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 18px 24px; border-top: 1px solid var(--line); background: var(--canvas);
}
.review-modal-actions .btn { flex: 1; }
@media (max-width: 560px) { .review-modal-actions { flex-direction: column-reverse; } }


/* ---------------- Responsive fixes ---------------- */
/* Search box was hard-coded to 320px later in the file, which beat the
   phone rule above and overflowed narrow screens. */
.filter-bar .search-field input[type="search"] { max-width: 100%; }
@media (max-width: 640px) {
    .filter-bar { width: 100%; }
    .filter-bar .search-field { flex: 1 1 100%; }
    .filter-bar .search-field input[type="search"] { width: 100%; }
    .filter-bar select { flex: 1 1 100%; width: 100%; }
    .filter-bar .btn { flex: 1 1 100%; }
    .card-head .btn, .card-head .btn-primary { max-width: 100%; }
}
/* Comfortable tap targets on touch screens */
@media (pointer: coarse) {
    .nav-link { padding-top: 12px; padding-bottom: 12px; }
    .btn { min-height: 40px; }
}

/* ======================================================================
   POS on phones / tablets
   ====================================================================== */
/* A grid column of plain "1fr" refuses to shrink below its widest child
   (the 650px sales table), which stretched the whole page past the screen.
   minmax(0,1fr) lets the column stay inside the viewport. */
.pos-simple > * { min-width: 0; }
@media (max-width: 900px) {
    .pos-simple { grid-template-columns: minmax(0, 1fr); padding-bottom: 88px; }
}
#checkoutPanel { scroll-margin-top: 76px; }

/* Sticky "total + Checkout" bar — only on stacked (tablet/phone) layouts */
.mobile-bar { display: none; }
.review-lines { display: none; }
@media (max-width: 900px) {
    .mobile-bar {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: fixed; left: 76px; right: 0; bottom: 0; z-index: 40;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(255,255,255,.96);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border-top: 1px solid var(--line);
        box-shadow: 0 -10px 30px -12px rgba(7,44,74,.28);
        transition: transform .2s var(--ease);
    }
    .mobile-bar.is-hidden { transform: translateY(115%); }
    .mobile-bar-info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
    .mobile-bar-info small { font-size: 12px; color: var(--muted); }
    .mobile-bar-info strong { font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .mobile-bar .btn { min-height: 48px; padding: 12px 22px; font-size: 15px; justify-content: center; }
}
@media (max-width: 640px) { .mobile-bar { left: 0; } }
@media (max-width: 900px) {
    .pos-entry-head .text-muted { display: none; }   /* steps are labelled below anyway */
    .pos-simple { gap: 14px; }

    /* Step 1: big 2-up unit buttons */
    .unit-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .unit-picker .unit-btn { min-width: 0; min-height: 62px; padding: 8px 10px; }

    /* Step 2: full-width, thumb-sized stepper */
    .qty-stepper { max-width: none; gap: 10px; }
    .qty-step-btn { min-width: 68px; min-height: 56px; justify-content: center; }
    .qty-stepper input { min-height: 56px; font-size: 24px; }

    /* 16px inputs stop iOS from zooming the page when a field is tapped */
    input, select, textarea, .bargain-price-input { font-size: 16px; }
    #itemSearch { min-height: 50px; }

    /* Step 3: compact item list — name + packing on the left, price on the right */
    .item-suggestion { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 14px; min-height: 60px; }
    .sug-class { display: none; }
    .sug-prices { justify-content: flex-end; }
    .added-notice { flex-wrap: wrap; }

    /* Cart: each line becomes a card instead of a sideways-scrolling table */
    .sale-table-wrap { overflow: visible; }
    table.ledger.sale-entry-table { display: block; min-width: 0; width: 100%; white-space: normal; overflow: visible; }
    table.ledger.sale-entry-table thead { display: none; }
    table.ledger.sale-entry-table tbody,
    table.ledger.sale-entry-table tfoot { display: block; }

    table.ledger.sale-entry-table tbody tr.row-loose,
    table.ledger.sale-entry-table tbody tr.row-bundle {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "item item remove" "qty price total";
        gap: 10px 12px; align-items: center;
        padding: 12px; margin-bottom: 10px; border-radius: 12px;
    }
    table.ledger.sale-entry-table tbody tr.row-loose > td,
    table.ledger.sale-entry-table tbody tr.row-bundle > td {
        display: block; padding: 0; border: 0; white-space: normal; text-align: left; width: auto;
    }
    .sale-entry-table .c-item   { grid-area: item; font-size: 15px; }
    .sale-entry-table .c-remove { grid-area: remove; align-self: start; }
    .sale-entry-table .c-qty    { grid-area: qty; }
    .sale-entry-table .c-price  { grid-area: price; text-align: right !important; }
    .sale-entry-table .c-total  { grid-area: total; text-align: right !important; font-size: 15px; }
    .sale-entry-table .c-qty::before,
    .sale-entry-table .c-price::before,
    .sale-entry-table .c-total::before {
        display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
        text-transform: uppercase; color: var(--muted); margin-bottom: 3px; font-family: 'Inter', sans-serif;
    }
    .sale-entry-table .c-qty::before   { content: "Qty"; }
    .sale-entry-table .c-price::before { content: "Price each"; }
    .sale-entry-table .c-total::before { content: "Total"; }
    .sale-entry-table .bargain-price-input { width: 96px; padding: 8px; }
    .sale-entry-table .c-remove .btn { padding: 4px 11px; font-size: 20px; line-height: 1.2; min-height: 36px; justify-content: center; }
    .sale-entry-table .rm-word { display: none; }

    table.ledger.sale-entry-table #emptySaleRow,
    table.ledger.sale-entry-table #emptySaleRow td { display: block; width: 100%; }
    table.ledger.sale-entry-table #emptySaleRow td { padding: 26px 8px; }

    table.ledger.sale-entry-table .sale-grand-row {
        display: flex; align-items: center; justify-content: space-between;
        padding-top: 14px; border-top: 2px solid var(--line);
    }
    table.ledger.sale-entry-table .sale-grand-row th { display: block; padding: 0; border: 0; font-size: 17px; }
    table.ledger.sale-entry-table .sale-grand-row th:last-child { display: none; }

    /* Complete-sale panel */
    #checkoutBtn { min-height: 54px; font-size: 16px; justify-content: center; }

}
@media (max-width: 640px) {
    /* Review step becomes a bottom sheet with a card list */
    .review-modal-backdrop { align-items: flex-end; padding: 0; }
    .review-modal { max-width: none; border-radius: 18px 18px 0 0; max-height: 92vh; max-height: 92dvh; }
    .review-modal-head { padding: 16px; }
    .review-modal-body { padding: 14px 16px; }
    .review-modal-actions { padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
    .review-modal-actions .btn { min-height: 50px; justify-content: center; }
    .review-table { display: none !important; }
    .review-lines { display: block; }
    .review-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
    .review-line .rl-main { min-width: 0; }
    .review-line .rl-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
    .review-line .rl-total { font-weight: 700; white-space: nowrap; }
}


/* ======================================================================
   Every other page: responsive lists, forms and chrome
   ====================================================================== */
img, svg { max-width: 100%; }

/* Tablet: a bit less padding around content */
@media (min-width: 641px) and (max-width: 900px) {
    .sidebar .role-pill { display: none; }   /* the 76px icon rail has no room for it */
    .content { padding: 20px; }
    .topbar { padding: 0 20px; }
}

/* ---- Lists: tables become cards on tablets and phones ---- */
@media (max-width: 900px) {
    table.ledger.stack { display: block; width: 100%; overflow: visible; white-space: normal; }
    table.ledger.stack colgroup { display: none; }
    table.ledger.stack thead { display: none; }
    table.ledger.stack tbody {
        display: grid; gap: 12px; padding: 12px;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    table.ledger.stack tbody tr {
        display: block; margin: 0; padding: 0; overflow: hidden;
        background: var(--paper);
        border: 1px solid var(--line); border-left: 4px solid var(--line);
        border-radius: 12px;
    }
    table.ledger.stack tbody tr.status-ok, table.ledger.stack tbody tr.row-bundle { border-left-color: var(--blue); }
    table.ledger.stack tbody tr.status-low { border-left-color: var(--amber); background: var(--amber-tint); }
    table.ledger.stack tbody tr.status-out { border-left-color: var(--blue); }
    table.ledger.stack tbody tr.row-loose { border-left-color: var(--gold); }
    table.ledger.stack tbody tr.status-out { background: var(--brick-tint); }

    /* an opened inline editor / empty message spans the full width */
    table.ledger.stack tbody tr[style*="table-row"] { display: block !important; grid-column: 1 / -1; border-left-color: var(--blue); }
    table.ledger.stack tbody tr:has(> td[colspan]) { grid-column: 1 / -1; }
    table.ledger.stack tbody tr:has(> td.empty-state) { border: 0; background: transparent; }

    table.ledger.stack td {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        width: auto !important; min-width: 0 !important; max-width: none !important;
        padding: 9px 14px; border: 0; border-bottom: 1px solid var(--line-soft);
        text-align: right; white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
        overflow-wrap: anywhere;
    }
    table.ledger.stack td:last-child { border-bottom: 0; }
    table.ledger.stack td::before {
        content: attr(data-label);
        flex: 0 0 34%; max-width: 44%; text-align: left;
        font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
        font-family: 'Inter', -apple-system, sans-serif; font-variant-numeric: normal;
    }
    table.ledger.stack td:not([data-label])::before,
    table.ledger.stack td[data-label=""]::before { display: none; }

    /* first cell = the card's title */
    table.ledger.stack td:first-child {
        display: block; text-align: left; font-size: 15px; font-weight: 600;
        padding: 12px 14px 10px; border-bottom: 1px solid var(--line);
    }
    table.ledger.stack td:first-child::before { display: none; }

    /* cells holding several lines / forms / buttons: label on top, content below */
    table.ledger.stack td.stk-block, table.ledger.stack td[data-label=""] { display: block; text-align: left; }
    table.ledger.stack td.stk-block::before { display: block; max-width: none; margin-bottom: 6px; }
    table.ledger.stack td.stk-block > div[style*="justify-content"] { justify-content: flex-start !important; }
    table.ledger.stack td[colspan] { display: block; text-align: left; }
    table.ledger.stack td.empty-state { text-align: center; padding: 30px 12px; }
    table.ledger.stack td.edit-cell { padding: 14px; }
    table.ledger.stack td .row-actions { flex-wrap: wrap; }
    table.ledger.stack td form { margin: 0; }
    table.ledger.stack td[data-label=""] { padding: 10px 14px 12px; }
    table.ledger.stack td[data-label=""] > form, table.ledger.stack td[data-label=""] > .row-actions { display: inline-flex; margin: 0 6px 6px 0; }
    table.ledger.stack .price-grid { max-width: none; }
    table.ledger.stack td.num, table.ledger.stack td.money { font-size: 14px; }

    /* Purchase-order entry: inputs sit on the right of their label */
    table.ledger.stack td input[type="number"] { width: 120px !important; margin-left: auto; }
}
@media (max-width: 640px) {
    table.ledger.stack tbody { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Forms, cards and buttons on phones ---- */
@media (max-width: 900px) {
    .tabs { flex-wrap: wrap; }
}
@media (max-width: 640px) {
    .tabs .btn { flex: 1; justify-content: center; min-height: 44px; }
    .card-head h2 { font-size: 17px; }
    .card-pad form > .btn.btn-primary[type="submit"] { width: 100%; justify-content: center; min-height: 48px; margin-top: 4px; }
    .form-actions { flex-wrap: wrap; }
    .form-actions .btn { flex: 1 1 140px; justify-content: center; min-height: 44px; }
    .add-product-summary { gap: 10px; flex-wrap: wrap; }
    .desc-banner { margin: 0 12px 12px; }
    .pager { flex-wrap: wrap; gap: 10px !important; padding: 14px 12px !important; }
    .pager .btn { min-height: 44px; }
    .alert { font-size: 14px; }

    /* inline row editors (customers / products) */
    td[colspan] form { flex-direction: column; align-items: stretch !important; }
    td[colspan] form .field { width: 100%; flex: 1 1 100%; }
    td[colspan] form .btn { min-height: 44px; justify-content: center; }

    /* Product add/edit unit rows: one field per line where it is tight */
    .unit-row-main { grid-template-columns: 1fr 1fr; }
    .unit-row-main .unit-row-name { grid-column: 1 / -1; }

    /* Login / access-denied */
    .auth-body { padding: 14px; align-items: flex-start; padding-top: 8vh; }
    .auth-card { padding: 28px 22px; }
    .auth-card input { font-size: 16px; min-height: 48px; }
    .auth-card .btn { min-height: 50px; font-size: 16px; }
    .denied-card { margin: 4vh auto; padding: 30px 22px; }
    .denied-card h1 { font-size: 20px; }
}
@media (pointer: coarse) {
    .btn-sm { min-height: 40px; }
}

/* POS: Regular price / Discounted client toggle + searchable client picker */
.cust-toggle { display:inline-grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; width:100%; background:var(--line-soft); border:1px solid var(--line); border-radius:10px; }
.cust-toggle-btn { border:0; background:transparent; color:var(--muted); border-radius:8px; padding:0 10px; height:34px; min-height:0; font:inherit; font-size:13px; font-weight:600; line-height:1; white-space:nowrap; cursor:pointer; transition:background-color .12s var(--ease), color .12s var(--ease); }
.cust-toggle-btn:hover { color:var(--text); }
.cust-toggle-btn.is-active { background:var(--blue); color:#fff; box-shadow:0 2px 6px -2px rgba(13,73,123,.5); }
.cust-picker { margin-top:8px; }
.cust-search { position:relative; }
.cust-search input { height:38px; padding:0 12px; font-size:13px; }
.cust-results { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20; background:var(--paper); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-lg); max-height:240px; overflow-y:auto; }
.cust-result { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; border:0; border-bottom:1px solid var(--line-soft); background:transparent; padding:8px 12px; text-align:left; cursor:pointer; font:inherit; font-size:13px; color:inherit; }
.cust-result small { color:var(--muted); font-size:12px; white-space:nowrap; }
.cust-result:hover, .cust-result.is-active { background:var(--gold-tint); }
.cust-empty { padding:10px 12px; color:var(--muted); font-size:12px; }
.cust-chosen { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 6px 6px 12px; background:var(--blue-tint); border:1px solid var(--blue); border-radius:10px; }
.cust-chosen-info { min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.cust-chosen-info strong { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cust-chosen-info span { font-size:12px; }
.cust-chosen .btn { height:30px; min-height:0; padding:0 12px; font-size:12px; flex:none; }
.cust-warn { margin-top:6px; padding:6px 10px; background:var(--brick-tint); color:var(--brick-dark); border-radius:8px; font-size:12px; }
/* make sure the hidden attribute wins over display rules above */
.cust-picker[hidden], .cust-chosen[hidden], .cust-search[hidden], .cust-results[hidden], .cust-warn[hidden] { display:none !important; }

/* POS: Hide / Show toggle for the discounted-client option */
.cust-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.cust-head label { margin:0; }
.cust-hide-btn, .cust-show-btn { border:1px solid var(--line); background:var(--paper); color:var(--blue); font:inherit; font-size:13px; font-weight:600; line-height:1; padding:8px 16px; border-radius:var(--radius-sm); cursor:pointer; transition:background-color .15s var(--ease), border-color .15s var(--ease); }
.cust-hide-btn:hover, .cust-hide-btn:focus, .cust-show-btn:hover, .cust-show-btn:focus { background:var(--blue-tint); border-color:var(--blue); }
.cust-show-row { display:flex; justify-content:flex-end; margin:-4px 0 6px; }
.cust-show-row[hidden], #custField[hidden] { display:none !important; }

/* =========================================================
   POS buttons redesign — unit cards + pill quantity stepper
   (loose = amber, dozens/cartons = navy)
   ========================================================= */
.unit-picker { gap: 12px; }
.unit-picker .unit-btn {
    --bar: var(--gold);
    position: relative;
    overflow: hidden;
    flex-direction: column;
    gap: 6px;
    min-width: 128px;
    min-height: 74px;
    padding: 16px 22px 12px;
    border-radius: 14px;
    background: var(--paper);
    border: 1.5px solid #D9E1EC;
    box-shadow: 0 1px 2px rgba(7,44,74,.06);
    transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease);
}
.unit-picker .unit-btn.unit-btn-bundle { --bar: var(--blue); }
.unit-picker .unit-btn::before {            /* colour-coded top bar */
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--bar);
    transition: opacity .15s var(--ease);
}
.unit-picker .unit-btn .unit-btn-name { font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.unit-picker .unit-btn .unit-btn-items {
    font-size: 11.5px; font-weight: 600; opacity: 1; color: var(--muted);
    background: var(--line-soft); padding: 2px 10px; border-radius: 999px; line-height: 1.5;
}
.unit-picker .unit-btn:hover { transform: translateY(-2px); border-color: var(--bar); background: var(--paper); box-shadow: 0 10px 20px -12px rgba(7,44,74,.35); }
.unit-picker .unit-btn:active { transform: translateY(0) scale(.98); }

/* selected */
.unit-picker .unit-btn.active::after {      /* tick badge */
    content: '\2713'; position: absolute; top: 7px; right: 8px;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; line-height: 1;
}
.unit-picker .unit-btn.unit-btn-loose.active { background: #FFB81C; border-color: #FFB81C; box-shadow: 0 0 0 3px rgba(255,184,28,.35), 0 10px 18px -10px rgba(255,184,28,.9); }
.unit-picker .unit-btn.unit-btn-loose.active::before { opacity: 0; }
.unit-picker .unit-btn.unit-btn-loose.active .unit-btn-name { color: var(--ink); font-weight: 800; }
.unit-picker .unit-btn.unit-btn-loose.active .unit-btn-items { background: rgba(255,255,255,.6); color: var(--ink); }
.unit-picker .unit-btn.unit-btn-loose.active::after { background: var(--ink); color: var(--gold); }

.unit-picker .unit-btn.unit-btn-bundle.active { background: var(--blue); border-color: var(--blue); box-shadow: 0 12px 22px -12px rgba(13,73,123,.8); }
.unit-picker .unit-btn.unit-btn-bundle.active::before { opacity: 0; }
.unit-picker .unit-btn.unit-btn-bundle.active .unit-btn-name { color: #fff; }
.unit-picker .unit-btn.unit-btn-bundle.active .unit-btn-items { background: rgba(255,255,255,.18); color: #fff; }
.unit-picker .unit-btn.unit-btn-bundle.active::after { background: #fff; color: var(--blue); }

/* quantity stepper: one pill with round − / + buttons */
.qty-stepper {
    display: inline-flex; align-items: center; gap: 6px; max-width: none; width: auto;
    padding: 6px; background: var(--paper); border: 1.5px solid #D9E1EC; border-radius: 999px;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.qty-stepper:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,184,28,.22); }
.qty-stepper .qty-step-btn {
    width: 48px; height: 48px; min-width: 0; min-height: 0; padding: 0; border-radius: 50%;
    background: var(--blue-tint); border: 0; color: var(--blue); font-size: 24px; font-weight: 700;
    box-shadow: none; justify-content: center;
}
.qty-stepper .qty-step-btn:hover { background: var(--blue); color: #fff; border: 0; transform: none; }
.qty-stepper .qty-step-btn:active { background: var(--gold); color: var(--ink); }
.qty-stepper input#entryQty {
    flex: none; width: 88px; padding: 0; border: 0; background: transparent; box-shadow: none; outline: none;
    font-size: 24px; font-weight: 700; color: var(--ink); text-align: center;
}
@media (max-width: 640px) {
    .unit-picker .unit-btn { min-height: 74px; }
    .qty-stepper { display: flex; width: 100%; justify-content: space-between; }
    .qty-stepper .qty-step-btn { width: 56px; height: 56px; min-width: 0; min-height: 0; }
    .qty-stepper input#entryQty { flex: 1; width: auto; min-height: 0; font-size: 26px; }
}

/* Show / Hide discounted-clients buttons — compact pills.
   Show = amber (call to action), Hide = navy. */
.cust-show-btn, .cust-hide-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 20px; border: 0; border-radius: 999px;
    font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
    cursor: pointer;
    transition: transform .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
.cust-show-btn::before, .cust-hide-btn::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.cust-show-btn { background: #FFB81C; color: var(--ink); box-shadow: 0 8px 16px -8px rgba(255,184,28,.9), inset 0 1px 0 rgba(255,255,255,.4); }
.cust-show-btn::before { background: var(--ink); }
.cust-show-btn:hover, .cust-show-btn:focus { background: #FFC43D; border: 0; transform: translateY(-1px); box-shadow: 0 12px 20px -8px rgba(255,184,28,1), inset 0 1px 0 rgba(255,255,255,.45); }

.cust-hide-btn { background: var(--blue); color: #fff; box-shadow: 0 8px 16px -8px rgba(13,73,123,.8), inset 0 1px 0 rgba(255,255,255,.15); }
.cust-hide-btn::before { background: #FFB81C; }
.cust-hide-btn:hover, .cust-hide-btn:focus { background: var(--blue-dark); color: #fff; border: 0; transform: translateY(-1px); box-shadow: 0 12px 20px -8px rgba(13,73,123,.9), inset 0 1px 0 rgba(255,255,255,.15); }

.cust-show-btn:active, .cust-hide-btn:active { transform: translateY(0) scale(.97); }

/* ---- Exclusive (discounted) client space indicator ---- */
.exclusive-banner { display:flex; align-items:center; gap:12px; padding:12px 24px; background:linear-gradient(90deg, var(--blue-dark, #0A3A63), var(--blue)); color:#fff; border-radius:var(--radius, 12px) var(--radius, 12px) 0 0; border-bottom:3px solid #FFB81C; }
.exclusive-banner[hidden], .exclusive-pill[hidden], .exclusive-banner-client[hidden] { display:none !important; }
.exclusive-banner-icon { flex:none; width:32px; height:32px; border-radius:50%; background:#FFB81C; color:var(--ink, #0B2540); display:grid; place-items:center; font-size:16px; }
.exclusive-banner-text { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.exclusive-banner-text strong { font-size:14px; letter-spacing:.08em; }
.exclusive-banner-text span { font-size:12px; opacity:.85; }
.exclusive-banner-client { margin-left:auto; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600; white-space:nowrap; max-width:45%; overflow:hidden; text-overflow:ellipsis; }
.exclusive-pill { display:inline-flex; align-items:center; gap:6px; background:#FFB81C; color:var(--ink, #0B2540); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px; }
.pos-simple.is-exclusive > .card { border-color:var(--blue); box-shadow:0 0 0 2px rgba(13,73,123,.18), var(--shadow-lg, 0 10px 30px -12px rgba(13,73,123,.35)); }
.pos-simple.is-exclusive #checkoutPanel { border-top:4px solid #FFB81C; }
@media (max-width: 720px) {
    .exclusive-banner { padding:10px 16px; flex-wrap:wrap; }
    .exclusive-banner-client { margin-left:0; max-width:100%; }
}

/* ---- Regular client space indicator ---- */
.regular-banner { display:flex; align-items:center; gap:12px; padding:12px 24px; background:#FFB81C; color:var(--ink); border-radius:var(--radius, 12px) var(--radius, 12px) 0 0; border-bottom:3px solid var(--blue); }
.regular-banner[hidden], .regular-pill[hidden] { display:none !important; }
.regular-banner-icon { flex:none; width:32px; height:32px; border-radius:50%; background:#fff; border:2px solid var(--blue); display:grid; place-items:center; font-size:15px; }
.regular-banner .exclusive-banner-text span { opacity:.85; }
.regular-banner-tag { margin-left:auto; background:#fff; border:1px solid #E8C25A; color:var(--ink); padding:6px 14px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.regular-pill { display:inline-flex; align-items:center; gap:6px; background:#FFB81C; border:1px solid var(--blue); color:var(--ink); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px; }
.pos-simple:not(.is-exclusive) #checkoutPanel { border-top:4px solid var(--blue); }
@media (max-width: 720px) { .regular-banner { padding:10px 16px; flex-wrap:wrap; } .regular-banner-tag { margin-left:0; } }

/* ======================================================================
   Responsive polish pass
   ====================================================================== */
.content, .card, .card-pad { min-width: 0; max-width: 100%; }
html, body { overflow-x: clip; }

/* Quantity stepper: the number box used to refuse to shrink (inputs have a
   built-in minimum width), which pushed the + button out of the pill on phones. */
.qty-stepper input#entryQty { min-width: 0; }
@media (max-width: 640px) {
    .qty-stepper input#entryQty { width: 0; }
}

/* Unit buttons: the desktop min-width came later in the file than the phone
   rule, so on very narrow phones the 2-up grid overflowed. */
@media (max-width: 900px) {
    .unit-picker .unit-btn { min-width: 0; padding: 12px 10px 10px; }
}
@media (max-width: 360px) {
    .unit-picker { gap: 8px; }
    .unit-picker .unit-btn .unit-btn-name { font-size: 14px; }
    .unit-picker .unit-btn .unit-btn-items { font-size: 11px; padding: 2px 8px; }
}
/* Tablet: room for 4 unit buttons across */
@media (min-width: 641px) and (max-width: 900px) {
    .unit-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .qty-stepper { max-width: 340px; }
}

/* Stack the sale + checkout columns earlier so neither gets squeezed
   on small laptops / landscape tablets. */
@media (max-width: 1024px) {
    .pos-simple { grid-template-columns: minmax(0, 1fr); }
    .pos-simple > #checkoutPanel { order: 2; }
}

/* Client banners + badges on small screens */
.exclusive-banner-text { flex: 1 1 auto; }
@media (max-width: 640px) {
    .exclusive-banner, .regular-banner { padding: 10px 14px; gap: 10px; }
    .exclusive-banner-icon, .regular-banner-icon { width: 28px; height: 28px; font-size: 14px; }
    .exclusive-banner-text strong { font-size: 13px; letter-spacing: .06em; }
    .exclusive-banner-text span { font-size: 11.5px; }
    .exclusive-banner-client { flex: 1 1 100%; margin-left: 0; max-width: 100%; text-align: center; }
    #checkoutPanel .card-head { align-items: center; }
    .exclusive-pill, .regular-pill { font-size: 10px; padding: 4px 10px; }
    .cust-hide-btn, .cust-show-btn { padding: 9px 16px; min-height: 40px; }
}
@media (max-width: 360px) {
    .exclusive-banner-icon, .regular-banner-icon { display: none; }
    .topbar h1 { font-size: 15px; }
    .content { padding: 10px; }
    .card-pad { padding: 12px; }
}

/* Customer search dropdown: never wider than the screen, long names wrap */
.cust-results { max-width: 100%; }
.cust-result span { min-width: 0; overflow-wrap: anywhere; }

/* Pages with wide toolbars / forms on phones */
@media (max-width: 640px) {
    .card-head > * { max-width: 100%; }
    .card-head .filter-bar { width: 100%; }
    .kpi-grid { gap: 10px; }
    .review-modal { width: 100%; }
}

/* ---- Quick price panel (products.php): one price fills the other units ---- */
.quick-price { border: 1px solid var(--gold); background: var(--gold-tint); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 12px; }
.quick-price-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 10px; }
.quick-price-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.quick-price-fields .field { margin: 0; }
.quick-price-hint { margin-top: 8px; font-size: 12px; color: var(--gold-dark); }
@media (max-width: 640px) { .quick-price-fields { grid-template-columns: 1fr; } }


/* ---------------- Password show/hide (eye) toggle ---------------- */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 46px; }
.pw-toggle {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer;
    color: var(--muted); padding: 0;
}
.pw-toggle:hover { color: var(--blue); background: var(--blue-tint); }
.pw-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.auth-card .pw-toggle { width: 38px; margin: 0; padding: 0; }