html, body {
    /* Stops a horizontal trackpad swipe from triggering WebView2/Chromium's
       built-in back/forward page navigation — a real bug found live while
       the help guide was open (an accidental swipe silently navigated away
       from the whole app, losing whatever was open). This is a desktop POS
       app, not a browsable site, so that gesture is never actually wanted
       anywhere, not just inside a modal — applied globally rather than
       scoped to one overlay. */
    overscroll-behavior-x: none;
}
body {
    background: #071018;
    color: #f8fafc;
}

/* ── Global checkbox/radio/file-input theme — every instance app-wide, not
   just the scoped .form-check-input overrides scattered through this file.
   accent-color alone only themes the CHECKED fill; color-scheme:dark is
   needed too or WebView2 still renders the unchecked box light (same fix
   already used for .quick-tile-check-wrap below). */
input[type="checkbox"], input[type="radio"] {
    accent-color: #4b9f3f;
    color-scheme: dark;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background: #0f1c28; border: 1px solid #354656; color: #c3cad4;
    border-radius: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600;
    cursor: pointer; margin-right: 10px;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover { background: #16283a; }

/* ── Global scrollbar theme (dark track, light-grey thumb) — every page, every
   scrollable element (tables, modals, dropdowns, etc.), not just specific panels. */
* { scrollbar-width: thin; scrollbar-color: #2a3947 #071018; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #071018; }
::-webkit-scrollbar-thumb { background: #2a3947; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #354656; }

/* Main content area has a dark background itself, so flip to a lighter track
   with a dark bar there for contrast (sidebar keeps the default above). */
.shop-main, .shop-main * {
    scrollbar-width: thin;
    scrollbar-color: #0c1722 #354656;
}
.shop-main::-webkit-scrollbar-track,
.shop-main *::-webkit-scrollbar-track { background: #354656; }
.shop-main::-webkit-scrollbar-thumb,
.shop-main *::-webkit-scrollbar-thumb { background: #0c1722; border-radius: 3px; }
.shop-main::-webkit-scrollbar-thumb:hover,
.shop-main *::-webkit-scrollbar-thumb:hover { background: #050c14; }

/* ── Uniform button HEIGHT app-wide (width still varies per label/content) —
   Bootstrap's .btn only sets padding, so height silently drifted from page
   to page depending on each button's own font-size/padding. min-height (not
   height) so a button with unusually long/wrapped text can still grow.
   Round/icon-only action buttons are defined with their own explicit
   width+height in each page's own <style> block, which loads after this
   shared stylesheet — same-specificity ties go to source order, so those
   still win and are unaffected by this rule. */
.btn, .save-btn, .to-pos-btn, .btn-edit, .btn-toggle, .btn-adjust,
.btn-history, .btn-view, .action-btn {
    min-height: 38px;
}

/* ── No alarm colors on button backgrounds/borders, app-wide — red is fine for
   text/icons (still reads as "destructive"), but a solid red button background
   was flagged as too alarming for everyday actions like Clear Cart or Close
   Shift. Overrides Bootstrap's default solid-red .btn-danger everywhere;
   any more specific per-modal .btn-danger rule (e.g. #refundModal's own) still
   wins by specificity and needs the same treatment if it sets a red bg/border. */
.btn-danger {
    background: #16222e;
    border-color: #354656;
    color: #e74c3c;
}
.btn-danger:hover, .btn-danger:focus {
    background: #1a2a3a;
    border-color: #e74c3c;
    color: #ff6b5b;
}
.btn-danger:disabled {
    background: #16222e;
    border-color: #354656;
    color: #6c8090;
}

/* ── Native form-control chrome (number spinners, date/time pickers) themed
   dark everywhere — the app is a fixed dark theme, so let the browser render
   its own dark-mode UI for these instead of the OS/browser-light default. */
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    color-scheme: dark;
}

/* Browser autofill (Chrome/Edge/WebView2) paints its own light background over
   author CSS on ANY input it decides to autofill, not just password fields —
   this inset-shadow trick is the only reliable override, applied app-wide
   instead of chasing it field-by-field. !important because this specific
   fight is against the browser's own privileged autofill styling, not other
   author CSS — a same-specificity page-local rule declared later in the
   cascade (e.g. .auth-card input on the login page) would otherwise still be
   able to win the tie on ordering alone. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #e2e8f0 !important;
    box-shadow: 0 0 0 1000px #071018 inset !important;
    caret-color: #e2e8f0 !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

/* ── Light theme (quick demo version: filter-based, not a real palette) ── */
html.theme-light {
    filter: invert(1) hue-rotate(180deg);
}
html.theme-light img,
html.theme-light video,
html.theme-light svg,
html.theme-light canvas,
html.theme-light iframe {
    filter: invert(1) hue-rotate(180deg);
}

/* ── Global modal dark theme default ──────────────────────────────────────────
   Applies to every modal on every page unless a page defines a more specific
   override (e.g. #someModal .modal-content) — those take precedence via CSS
   specificity, so this is just the fallback for any modal that doesn't. */
.modal-content {
    background: #0c1722;
    border: 1px solid #354656;
    color: #c3cad4;
}
.modal-header { border-bottom: 1px solid #2a3947; }
.modal-footer { border-top: 1px solid #2a3947; }
/* Cap every modal to the viewport and scroll only the body (header/footer stay
   put) — same pattern #shiftSummaryModal already used individually, applied
   globally so no modal needs the whole page/dialog to scroll to reach its
   footer buttons. A per-modal max-height (like #shiftSummaryModal's 75vh)
   still wins via specificity if a modal needs something tighter. */
.modal-dialog { max-height: calc(100vh - 3.5rem); }
.modal-content { max-height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.modal-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.modal-title { color: #e8ecf2; }
.btn-close { filter: invert(1) brightness(.65); }
.modal-body .form-control,
.modal-body .form-select {
    background: #071018; border: 1px solid #354656; color: #c3cad4;
}
.modal-body .form-control::placeholder { color: #4a6070; }
.modal-body .form-control:focus,
.modal-body .form-select:focus {
    background: #071018; border-color: #4b9f3f; color: #c3cad4;
    box-shadow: 0 0 0 2px rgba(75,159,63,.2);
}
.modal-body .form-label { color: #9aabb8; }
.modal-body .form-check-input { accent-color: #4b9f3f; }

/* Bootstrap's dropdown-menu/dropdown-item (the JS-driven popup menu component,
   e.g. the POS counter picker) ship with light-theme defaults (dark text,
   near-black on our dark background) with no override anywhere before this —
   unselected items were essentially unreadable. Also covers <option> inside a
   plain <select>, which browsers render with their own default (often
   black-on-white) regardless of the select element's own inline color. */
.dropdown-menu { background: #0c1722; border: 1px solid #354656; }
.dropdown-item { color: #e2e8f0; background: transparent; }
.dropdown-item:hover, .dropdown-item:focus {
    background: #1e2e3d; color: #ffffff;
}
.dropdown-item.active, .dropdown-item:active {
    background: #1b5f1f; color: #ffffff;
}
select option { background: #132333; color: #e2e8f0; }
/* Themed "Choose File" button app-wide (Business Logo, Supplier Payment
   receipt, Excel import, PO attachment, etc.) — every input[type=file] used
   the browser's unstyled default button before, which stood out against the
   dark theme everywhere it appeared. ::file-selector-button is the standard
   pseudo-element (Chromium 89+/WebView2); the -webkit- one is kept alongside
   for older engines, same value duplicated on both since neither is silently
   ignored by a browser that doesn't support it. */
input[type="file"] {
    color: #9aabb8;
    font-size: 13px;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background: linear-gradient(135deg, #1d2a36, #0f1c28);
    border: 1px solid #354656;
    color: #e2e8f0;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 10px;
    transition: border-color .15s, color .15s;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    border-color: #4b9f3f;
    color: #4b9f3f;
}
/* Plain padding-right alone doesn't move the arrow — Chromium/WebView2 draws
   a native select's dropdown arrow in its own reserved box glued to the
   border, ignoring padding entirely. appearance:none removes that native
   arrow so a drawn one (with real margin from the border) can take its
   place. The three background-* declarations are !important individually
   (not the full `background` shorthand) so they still win against a more
   specific per-page rule like `.status-filter { background: #0c1722; }` —
   that shorthand resets background-image back to none at that same
   specificity, and !important is what keeps our arrow from being wiped out. */
select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a9aaa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 34px !important;
}

.app-navbar {
    background: #09131d;
    border-bottom: 1px solid #1f2d3a;
}

.navbar-brand {
    color: #f8fafc;
}

.navbar-brand:hover {
    color: #74e15f;
}

.home-shell,
.auth-shell {
    min-height: calc(100vh - 57px);
    padding: 48px 0;
}

.home-shell {
    display: flex;
    align-items: center;
}

.eyebrow {
    color: #74e15f;
    font-weight: 700;
    text-transform: uppercase;
}

.home-shell h1 {
    font-size: 64px;
    font-weight: 800;
}

.status-panel,
.auth-card,
.metric-card,
.panel {
    background: #0d1924;
    border: 1px solid #263544;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
}

.status-panel,
.auth-card {
    /* Same gradient overlay as the dashboard cards — kept scoped off the
       shared .metric-card/.panel rule above so Offers/other plain panels
       aren't affected. */
    background: linear-gradient(135deg, #16232f, #0a1119);
    padding: 28px;
}

.status-panel > div,
.status-panel > a {
    /* > a covers the landing page's now-clickable rows (link to the real
       Sales/Inventory page behind each number) — same spacing either way. */
    padding: 16px 0;
    border-bottom: 1px solid #243342;
}

.status-panel > div:last-child,
.status-panel > a:last-child {
    border-bottom: 0;
}

.auth-shell {
    display: grid;
    place-items: center;
}

.auth-card {
    width: min(420px, calc(100% - 32px));
    padding: 32px;
}

.auth-card input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    color: #f8fafc;
    background: #071018;
    border: 1px solid #354656;
    border-radius: 6px;
}
.auth-card .btn-success {
    background: linear-gradient(135deg, #1b5f1f, #18481c 58%, #143615) !important;
    border: 1px solid #4b9f3f !important;
}
.auth-card .btn-success:hover {
    opacity: .9;
}
.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -6px 0 18px;
}
.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #c3cad4;
    font-size: 13px;
    cursor: pointer;
}
.auth-card .auth-check input {
    width: 16px;
    height: 16px;
    padding: 0;
    flex: 0 0 16px;
}
.auth-lang-toggle {
    min-width: 40px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #354656;
    background: #071018;
    color: #c3cad4;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.auth-lang-toggle:hover {
    border-color: #4b9f3f;
    color: #e2e8f0;
}
/* Hidden by default everywhere -- base.html's own script only ever reveals
   these once the browser genuinely confirms the page is installable. */
.pwa-install-btn { display: none; }
.auth-install-btn {
    width: 100%;
    margin-top: 10px;
    height: 38px;
    border-radius: 7px;
    border: 1px solid #354656;
    background: transparent;
    color: #9aabb8;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.auth-install-btn:hover {
    border-color: #4b9f3f;
    color: #e2e8f0;
}
.login-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(12px);
    background: #0c1722;
    border: 1px solid #354656;
    border-radius: 8px;
    color: #e2e8f0;
    padding: 10px 14px;
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.login-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dashboard-shell {
    min-height: calc(100vh - 57px);
    padding: 0;
}

.dashboard-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: calc(100vh - 57px);
}

.sidebar {
    padding: 22px 14px;
    background: #071018;
    border-right: 1px solid #263544;
}

.brand-mark {
    margin-bottom: 22px;
    font-size: 22px;
    font-weight: 800;
}

.sidebar a {
    display: block;
    padding: 12px 14px;
    margin-bottom: 6px;
    color: #d8dee7;
    text-decoration: none;
    border-radius: 8px;
}

.sidebar a.active,
.sidebar a:hover {
    color: #74e15f;
    background: #111f2b;
}

.dashboard-main {
    padding: 24px;
}

.dashboard-shell h1,
.dashboard-shell h2 {
    font-weight: 700;
}

.dashboard-shell p {
    color: #b7c0ca;
}

.metric-card,
.panel {
    padding: 22px;
}

.metric-card span {
    display: block;
    color: #b7c0ca;
    margin-bottom: 10px;
}

.metric-card strong {
    font-size: 26px;
}

.metric-card.warning strong {
    color: #f6b42a;
}

.chart-placeholder {
    height: 300px;
    display: grid;
    place-items: center;
    margin-top: 18px;
    color: #74e15f;
    background: linear-gradient(180deg, rgba(71, 180, 52, 0.25), rgba(71, 180, 52, 0.05));
    border: 1px dashed #35654a;
    border-radius: 8px;
}

.pos-screen {
    height: 100vh;
    overflow: hidden;
    padding: 8px 12px 18px;
    background: #071018;
    color: #f7f9fc;
    display: flex;
    flex-direction: column;
}

.pos-topbar {
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border: 1px solid #2a3947;
    border-radius: 8px 8px 0 0;
    background: #071018;
}

.pos-store {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pos-store i {
    color: #4b9f3f;
    font-size: 19px;
    flex-shrink: 0;
}
.pos-store > a { cursor: pointer; line-height: 1; }
.pos-store > a:hover { opacity: .85; }

.pos-store-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
a.pos-store-info { cursor: pointer; }
a.pos-store-info:hover { opacity: .85; }

/* .pos-topbar's own separate implementation of this same "long business name"
   problem base_app.html's .shop-topbar already handles — that fix never
   carried over here (the two topbars are two separate templates, see
   CODE GUIDELINES). Truncates with an ellipsis instead of wrapping across
   multiple lines and overlapping the rest of the topbar. */
.pos-store-info strong,
.pos-store-info small {
    max-width: 420px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.pos-store-info strong {
    font-size: 16px;
}

.pos-store-info small {
    font-size: 12px;
    color: #7a8fa6;
}

.pos-store {
    min-width: 0;
}

/* Right side: shift pill + separators + clock + online */
.pos-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* .pos-user-cluster now stacks Username (main) over Counter (subtext) at
   every width, not just ≤900px — same pairing .pos-store-info already uses
   for business name/branch. This lives entirely inside .pos-topbar-right's
   own flex row, so it doesn't touch .pos-topbar's own store-vs-rest
   space-between split. #counterPickerWrap's order:1 (was -1, when this
   cluster was display:contents and Counter sat as a sibling near Shift)
   puts it below the username row within this column; the actual user
   dropdown (the cluster's other child) is forced above it via :last-child. */
.pos-user-cluster {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
#counterPickerWrap { order: 1; }
.pos-user-cluster .dropdown:last-child { order: 0; }
.pos-user-cluster .pos-user-btn { padding: 0; }
#counterPickerWrap .shift-pill {
    padding: 0; font-size: 12.5px; color: #6c8090; font-weight: 600; line-height: 1.3;
}
/* Only the leading (decorative) pc-display icon is dropped — the trailing
   dropdown-arrow icon added in the HTML is a real affordance and stays. */
#counterPickerWrap .shift-pill i:first-child { display: none; }

/* Every topbar badge shared this same filled/bordered "pill" look, which is
   what made a bare separator line between two now-flat badges (Online,
   username) read as a stray, purposeless mark rather than a deliberate
   divider — dropped entirely, .pos-topbar-right's own gap already spaces
   widgets out. Matches the app's established dot+plain-text badge
   convention (see the Status Badges note in CLAUDE.md) instead of this
   topbar's own older, separate pill design. */
.topbar-sep { display: none; }

.topbar-linebreak { display: none; }

.shift-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    font-size: 13px;
    color: #c3cad4;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s;
    /* Real regression from dropping the pill's own background/border: two of
       these (the user button, the counter button) are real <button>
       elements, and without an explicit reset they fell back to the
       browser's native button chrome (light background, visible border,
       dark text) instead of just having no box at all — showing up live as
       "white" text-on-a-box specifically on bigger screens (smaller screens
       happened to already have their own override further down that
       incidentally reset this). #shiftBadge/.pos-status are plain <div>s so
       were never affected either way. */
    background: none;
    border: none;
    -webkit-appearance: none;
    appearance: none;
}

.shift-pill:hover { opacity: .75; }

.pos-clock {
    color: #c3cad4;
    font-size: 14px;
    white-space: nowrap;
}
.pos-clock-time { }
.pos-clock-date::before { content: "\00a0\00a0"; }

.pos-status {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
}

.pos-status-dot {
    width: 9px;
    height: 9px;
    background: #64ef4e;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(100, 239, 78, 0.7);
    flex-shrink: 0;
}

.pos-status i {
    color: #d7dde7;
}

.pos-workspace {
    display: grid;
    /* Summary (narrow, fixed) first, cart/quick-tiles (wide, flexible)
       second — swapped from the original wide-then-narrow order per direct
       feedback. Column tracks are defined by POSITION, not by which panel
       occupies them, so this has to change together with the `order`
       values below that actually move .summary-panel into the first slot. */
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 14px;
    flex: 1;
    min-height: 0;
    padding: 14px;
    border: 1px solid #2a3947;
    border-top: 0;
    border-radius: 0 0 8px 8px;
}

/* Populated by JS (layoutPosTabletRow) only within the tablet width band —
   see that media query below for why. Hidden here so it never participates
   in the grid (and takes up no space) at any other width, or for a grocery
   business, which never moves anything into it. Its own explicit
   grid-column (set where it's shown) places it before either of the two
   auto-placed/order'd panels below regardless of their own order values. */
.pos-tablet-top-row { display: none; }

.billing-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    order: 2;
}

/* Search + (restaurant-only) Order Type + Quick/Cart toggle share one row —
   search grows/shrinks to fill whatever's left, the other two stay a fixed
   width. flex-wrap as a narrow-screen fallback so nothing gets crushed. */
.pos-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pos-search {
    height: 48px;
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    color: #aab3bf;
    background: #0c1722;
    border: 1px solid #354656;
    border-radius: 8px;
    font-size: 15px;
}

.pos-search i {
    font-size: 19px;
}

.pos-order-type-select {
    flex: 0 0 auto;
    width: 130px;
    height: 48px;
    background: #132333;
    border: 1px solid #354656;
    color: #e2e8f0;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 13px;
    /* Chromium/WebView2's native <select> rendering doesn't always clip its
       own paint to a border-radius, leaving a small white sliver visible at
       the corners even with appearance:none set — forcing overflow:hidden
       directly on the control (not just a wrapper) is the standard fix. */
    overflow: hidden;
}

.pos-table-waiter-row {
    display: flex;
    gap: 8px;
}

.pos-tw-select {
    flex: 1;
    min-width: 0;
    background: #132333;
    border: 1px solid #354656;
    color: #e2e8f0;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    overflow: hidden;
}

/* Occupied-table indicator (see JS) — plain colored option text, the only
   part of a native <select> option that's reliably stylable across browsers
   (no ::before/pseudo-element support inside <option>). */
.pos-tw-select option.occupied {
    color: #22c55e;
}

/* Table Picker — a real button (bigger touch target than a native <select>
   row) that opens a modal grid instead of a dropdown. */
.pos-tw-btn {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; cursor: pointer; text-align: left; padding: 10px 12px;
}
.pos-tw-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-cat-wrap { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.pos-cat-wrap select { width: 100%; }
.pos-cat-wrap.has-clear select { padding-left: 26px; }
.pos-cat-clear {
    position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #e74c3c;
    width: 19px; height: 19px;
    font-size: 19px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
}
.pos-cat-clear:hover { color: #ff6b6b; }
/* Real cause of the white corner artifact, found from it only showing up
   while focused (gone once you click elsewhere): Chromium/WebView2's
   default focus ring on a <select> doesn't respect border-radius, so it
   drew square-cornered outside the rounded box. overflow:hidden (added
   earlier) only ever clips the SELECT's own paint, not an outline drawn by
   the browser outside it — a themed focus style is the actual fix. */
.pos-order-type-select:focus,
.pos-tw-select:focus,
.pos-cat-wrap select:focus {
    outline: none;
    border-color: #4b9f3f;
    box-shadow: 0 0 0 2px rgba(75, 159, 63, .25);
}
/* Quick mode's top row splits Waiter/Table/Order Type/Category into 4 equal
   grid columns (see .pos-quick-top-slot below) — a column there is much
   narrower than Category gets anywhere else it appears (Menu mode's top
   row, which only ever has 2 items sharing the space). The global select
   arrow reservation (34px, see select:not([multiple]) above) plus the
   clear button's own reserved padding left almost nothing for the category
   name itself in that narrow a column — reported live as showing nothing
   but the × once a real category (not "All") was selected. Reclaim both
   sides specifically in this context; other selects/other contexts are
   untouched. Still can't guarantee a very long category name shows in
   full at 1/4 the row's width — no padding trick fixes that, only a
   trade-off against "equal columns" itself — but this gets meaningfully
   more of it on screen than before, and short/medium names fit outright. */
.pos-quick-top-slot .pos-cat-clear {
    width: 16px;
    height: 16px;
    left: 3px;
    font-size: 15px;
}
.pos-quick-top-slot .pos-cat-wrap.has-clear select {
    padding-left: 20px !important;
}
.pos-quick-top-slot .pos-cat-wrap select {
    padding-right: 18px !important;
    font-size: 12px;
}

/* Real bug found live: #amendStep2Footer used Bootstrap's .d-flex utility
   for its layout, but .d-flex carries !important in Bootstrap's own
   stylesheet — that silently beat every JS-driven style.display='none'
   attempt (inline or scripted, neither has !important), so the footer was
   never actually hideable at all despite the JS being entirely correct.
   Exact same trap already hit and fixed once before for #refundStep2Footer
   (see CLAUDE.md) — same fix here: a plain class with no !important, so a
   plain style.display toggle actually works. */
.amend-step2-footer { width: 100%; display: flex; justify-content: flex-end; gap: 8px; }
/* CSS Grid, not flexbox — two real bugs reported live with a flex:1
   !important approach (kept trying that first): Category rendered visibly
   NARROWER than Waiter/Table/Order Type with no clear button showing, and
   WIDER (overlapping the Quick/Menu toggle) once a category WAS selected
   and its clear button appeared — i.e. its box wasn't reliably holding to
   an equal share either direction despite flex-grow/flex-basis/width all
   being forced. Grid's `1fr` tracks are a harder guarantee: every column is
   exactly equal width by construction, not something flex-grow distributes
   based on content — a wrapped <select>+button combo like .pos-cat-wrap
   can't push its track wider than its share, and minmax(0, 1fr) lets a
   track shrink freely so equal-division doesn't fight anything's intrinsic
   min-content size the way flex-basis 0%+min-width 0 was apparently still
   doing. grid-auto-flow:column + grid-auto-columns means this still works
   automatically whether 2 or 4 controls are present (dine-in vs.
   takeaway/delivery) with no JS needed to count children. */
.pos-quick-top-slot {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.pos-quick-top-slot > * { min-width: 0; width: auto !important; }
.table-picker-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
}
.table-picker-item {
    background: #132333; border: 1px solid #354656; border-radius: 8px;
    padding: 16px 8px; text-align: center; cursor: pointer; color: #e2e8f0;
    font-size: 14px; font-weight: 600; transition: background .15s;
}
.table-picker-item:hover { background: #1a2c40; border-color: #4b9f3f; }
.table-picker-item.occupied { color: #22c55e; }
.table-picker-item.occupied::after { content: '\2022 occupied'; display: block; font-size: 10px; font-weight: 500; margin-top: 4px; color: #22c55e; }
.table-picker-item.selected { border-color: #4b9f3f; box-shadow: 0 0 0 1px #4b9f3f; }

/* Below tablet width, cramming Search + Order Type + Quick/Cart onto one
   flex-wrap row left them landing wherever the wrap happened to break —
   Search now always takes its own full row, with Order Type and the toggle
   sharing an even 50/50 split on the row below (Table/Waiter already do
   this via their own flex:1 pair, no change needed there). */
@media (max-width: 767px) {
    .pos-search { flex: 1 1 100%; }
    .pos-order-type-select { flex: 1 1 calc(50% - 4px); width: auto; }
    .pos-view-toggle { flex: 1 1 calc(50% - 4px); }
    .pos-view-toggle button { flex: 1; }
    /* The Summary/cart swap (see .pos-workspace/.summary-panel above) is
       desktop+tablet only — real phone-width screens revert to cart-first.
       This used to live in the ≤900px block below, which is wider than this
       app's own documented tablet range (768-1024px) — a genuine tablet at
       768-900px was getting the un-swapped (cart-first) layout despite being
       squarely inside "tablet," contradicting the swap's own stated intent.
       Moved here (767px, this app's real phone threshold) so the swap now
       correctly holds through the whole tablet range; single-column stacking
       itself (a separate concern) still starts at 900px, untouched. */
    .billing-panel { order: 1; }
    .summary-panel { order: 2; }
}

.cart-panel,
.summary-panel {
    background: #0c1722;
    border: 1px solid #2a3947;
    border-radius: 8px;
}

.cart-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Quick Picks tile grid — restaurant POS's default landing view. Deliberately
   overflow:hidden with no scroll: shows only as many complete square tiles as
   actually fit the panel, rather than a partial row or a scrollbar. */
.quick-tiles-panel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 12px;
    background: #0c1722;
    border: 1px solid #2a3947;
    border-radius: 8px;
}

.quick-tiles-grid {
    display: grid;
    /* grid-template-columns/rows are set inline by layoutQuickTiles() (JS) —
       computed from the panel's real size so exactly N whole rows/columns
       fill it with no scrollbar and no partial next row peeking through. */
    gap: 10px;
    height: 100%;
    overflow: hidden;
}

.quick-tile {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #16232f;
    border: 1px solid #2a3947;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    transition: border-color .15s, box-shadow .15s;
}

.quick-tile.checked {
    border-color: #4b9f3f;
    box-shadow: 0 0 0 1px #4b9f3f inset;
}

/* Darkens the bottom ~55% of the tile so the name reads clearly over a busy
   food photo — a real overlay spanning most of the tile's height, not just
   the text label's own tight box (that version was too short/subtle to
   actually read as a gradient against a photo). Sits behind the name text
   (z-index 0 vs. 1) and only applies to tiles that actually have an image. */
.quick-tile:not(.no-image)::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 55%;
    background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 0;
}

.quick-tile-name {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 6px 8px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    /* A proper black outline (4 offset copies) plus a soft drop shadow for
       depth — the earlier single soft shadow wasn't enough contrast against
       a busy food photo background; this reads clearly regardless of what's
       behind it. */
    text-shadow:
        -1px -1px 0 #000, 1px -1px 0 #000,
        -1px  1px 0 #000, 1px  1px 0 #000,
        0 2px 4px rgba(0, 0, 0, .9);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* Line-clamp alone bounds this to exactly 2 lines' worth of height already
       — a separate max-height fought that and clipped descenders (g/p/y) on
       the second line. Extra bottom padding gives them clean breathing room. */
}

.quick-tile.no-image .quick-tile-name {
    text-shadow: none;
    color: #c3cad4;
    padding: 6px 10px;
}

/* A dark chip behind the checkbox so it reads as this app's own themed
   control (never a bare white box) regardless of what's showing through the
   tile's own background image underneath. Sized to match the qty box below
   so both top-corner controls read as one consistent pair. */
.quick-tile-check-wrap {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    width: 22px;
    height: 22px;
    background: rgba(12, 23, 34, .8);
    border: 1px solid #354656;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-tile-check-wrap input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #4b9f3f;
    /* accent-color alone only themes the CHECKED fill — Chromium/WebView2
       still render the unchecked box in its light default unless
       color-scheme is also forced dark on the control itself. */
    color-scheme: dark;
    cursor: pointer;
    margin: 0;
}

.quick-tile-qty {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 22px;
    height: 22px;
    background: rgba(12, 23, 34, .8);
    border: 1px solid #354656;
    color: #e2e8f0;
    border-radius: 5px;
    font-size: 10px;
    text-align: center;
    padding: 0;
    display: none;
}

.quick-tile.checked .quick-tile-qty {
    display: block;
}

/* Native spin buttons made the already-small qty box feel cramped on hover —
   the box is small enough that typing a value directly (or editing it back
   in the normal cart) covers the same need without the extra chrome. */
.quick-tile-qty::-webkit-outer-spin-button,
.quick-tile-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quick-tile-qty[type="number"] {
    -moz-appearance: textfield;
}

.pos-view-toggle {
    display: flex;
    /* Matches .pos-search/.pos-order-type-select's own height — was sized
       purely by the buttons' padding, visibly shorter than every other
       control sharing this row in Menu mode. */
    height: 48px;
    flex-shrink: 0;
    background: #132333;
    border: 1px solid #354656;
    border-radius: 6px;
    overflow: hidden;
}

.pos-view-toggle button {
    /* flex:1 makes Quick/Menu genuinely share the toggle 50/50 — matters
       once the whole toggle itself is stretched to fill an equal grid
       column in Quick mode (see .pos-quick-top-slot); in Menu mode the
       toggle's own width is just its content's natural size either way, so
       this has no visible effect there. */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #9aabb8;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 9px;
    cursor: pointer;
    white-space: nowrap;
}

.pos-view-toggle button.active {
    /* Same gradient treatment as .pay.cash — same green, just no longer a
       flat fill. */
    background:
        radial-gradient(circle at 18% 22%, rgba(116, 178, 92, 0.42), transparent 38%),
        linear-gradient(135deg, #1b5f1f, #18481c 58%, #143615);
    color: #fff;
}

.cart-head,
.cart-item {
    display: grid;
    grid-template-columns: 20px minmax(140px, 1fr) 118px 110px 120px;
    align-items: center;
    gap: 6px;
}

.cart-head {
    height: 40px;
    padding: 0 16px 0 14px;
    color: #c9d0db;
    font-size: 13px;
    font-weight: 700;
    border-bottom: 1px solid #2a3947;
    position: sticky;
    top: 0;
    background: #0c1722;
    z-index: 1;
}
/* Qty's cell holds a −/input/+ cluster, not plain text — center the label to
   match the cluster's own centered content (.qty-inline), instead of both
   defaulting to flush-left where the actual number sits well right of "Qty". */
.cart-head span:nth-child(3) { text-align: center; }

.cart-item {
    min-height: 60px;
    padding: 0 10px 0 8px;
    border-bottom: 1px solid #22303d;
    font-size: 14px;
}

.cart-item.selected {
    background: rgba(20, 95, 35, 0.45);
}

.item-name {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.item-name-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.item-name-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Restaurant-only per-line cooking note — a plain underlined text field, not
   a full form-control box, so it reads as inline subtext rather than a
   competing input in an already-dense cart row. */
.cart-cooking-note {
    background: none;
    border: none;
    border-bottom: 1px dashed #354656;
    color: #9aabb8;
    font-size: 11.5px;
    padding: 1px 0;
    width: 100%;
    min-width: 0;
}
.cart-cooking-note:focus {
    outline: none;
    border-bottom-color: #4b9f3f;
    color: #e2e8f0;
}
.cart-cooking-note::placeholder {
    color: #4a6070;
}

.pos-product {
    display: grid;
    place-items: center;
    width: 44px;
    height: 36px;
    flex: 0 0 44px;
    border-radius: 6px;
    background: #1d2a36;
    background-position: center;
    background-size: cover;
    border: 1px solid #354656;
}

.pos-product::before {
    content: "";
}

.pos-product.rice { background-image: url("/static/img/products/rice.png"); }
.pos-product.milk { background-image: url("/static/img/products/milk.png"); }
.pos-product.apples { background-image: url("/static/img/products/apples.png"); }
.pos-product.bread { background-image: url("/static/img/products/bread.png"); }

.remove-item {
    height: 20px;
    color: #7a8fa6;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.remove-item:hover { color: #dc3545; }

.qty-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 44px;
}
.qty-inline-input {
    width: 42px; text-align: center; font-size: 16px; font-weight: 600;
    color: #e2e8f0; background: #071018; border: 1px solid #354656; border-radius: 5px;
    padding: 4px 2px; outline: none;
}
.qty-inline-input:focus { border-color: #4b9f3f; }
/* Dedicated +/- buttons handle stepping now — hide the native spinner instead
   of relying on it (own qty-btn pair below), typed decimals still work for
   weighed items. */
.qty-inline-input::-webkit-inner-spin-button,
.qty-inline-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.qty-inline-input { -moz-appearance: textfield; }
/* Cashier Price Freedom (restaurant-only store setting) — tap-to-edit price.
   A real bordered box reading as editable at a glance, not just a dashed
   underline that was easy to miss entirely. */
.cart-price-edit {
    cursor: pointer; display: inline-block; padding: 2px 6px;
    border: 1px solid #354656; border-radius: 4px; background: #0f1c28;
}
.cart-price-edit:hover { border-color: #4b9f3f; color: #4b9f3f; }
.cart-price-edit-input {
    width: 62px; text-align: center; font-size: 13px;
    color: #e2e8f0; background: #071018; border: 1px solid #4b9f3f; border-radius: 4px;
    padding: 2px 4px; outline: none;
}
.qty-btn {
    width: 30px; height: 30px; flex: 0 0 30px;
    display: flex; align-items: center; justify-content: center;
    background: #1d2a36; border: 1px solid #354656; border-radius: 6px;
    color: #c3cad4; font-size: 18px; line-height: 1; padding: 0; cursor: pointer;
}
.qty-btn:hover:not(:disabled) { background: #26374a; border-color: #4b9f3f; color: #fff; }
.qty-btn:active:not(:disabled) { background: #4b9f3f; color: #fff; }
.qty-btn:disabled { opacity: .35; cursor: not-allowed; }

.remove-item {
    display: grid;
    place-items: center;
    width: 20px;
    font-size: 12px;
}

.barcode-line {
    padding: 16px 18px;
    color: #c5ccd6;
    font-size: 13px;
}

.barcode-line strong {
    color: #4da841;
}

/* ── Add Item modal ── */
#addItemModal .modal-content {
    background: #0c1722; border: 1px solid #354656; color: #c3cad4;
}
#addItemModal .modal-header {
    border-bottom: 1px solid #2a3947; padding: 14px 20px;
}
#addItemModal .modal-title { color: #e8ecf2; font-size: 18px; font-weight: 700; }
#addItemModal .btn-close { filter: invert(1) brightness(.65); }
#addItemModal .modal-body { padding: 16px 20px; }
#addItemModal .modal-footer {
    border-top: 1px solid #2a3947; padding: 12px 20px; gap: 10px;
}
.add-item-search {
    display: flex; align-items: center; gap: 10px;
    background: #071018; border: 1px solid #354656; border-radius: 8px;
    padding: 0 14px; height: 46px; margin-bottom: 4px;
    color: #7a8fa6; font-size: 20px;
}
.add-item-search input {
    flex: 1; background: none; border: none; outline: none;
    color: #c3cad4; font-size: 18px;
}
.add-item-cats {
    display: flex; gap: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    border-bottom: 1px solid #2a3947; margin-bottom: 14px;
}
.add-item-cat {
    padding: 8px 18px; border-radius: 0; font-size: 15px; cursor: pointer;
    background: none; border: none; border-bottom: 2px solid transparent;
    color: #6c8090; white-space: nowrap; margin-bottom: -1px; transition: color .15s;
}
.add-item-cat.active  { color: #4b9f3f; border-bottom-color: #4b9f3f; }
.add-item-cat:hover:not(.active) { color: #9aabb8; }
.add-item-body {
    display: grid; grid-template-columns: 1fr 240px; gap: 14px; min-height: 320px;
}
.add-item-list {
    overflow-y: auto; max-height: 360px;
    border: 1px solid #2a3947; border-radius: 8px;
    scrollbar-width: auto; scrollbar-color: #3a4d60 #071018;
}
.add-item-cats { scrollbar-width: auto; scrollbar-color: #3a4d60 #071018; }
.add-item-cats::-webkit-scrollbar { height: 9px; }
.add-item-cats::-webkit-scrollbar-thumb { background: #3a4d60; border-radius: 5px; }
.add-item-cats::-webkit-scrollbar-thumb:hover { background: #4b6178; }
.add-item-list::-webkit-scrollbar { width: 11px; }
.add-item-list::-webkit-scrollbar-thumb { background: #3a4d60; border-radius: 6px; }
.add-item-list::-webkit-scrollbar-thumb:hover { background: #4b6178; }
.add-item-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; border-bottom: 1px solid #1e2e3d;
    cursor: pointer; transition: background .15s;
}
.add-item-row:last-child { border-bottom: none; }
.add-item-row:hover, .add-item-row.selected { background: #132333; }
.add-item-thumb {
    width: 48px; height: 48px; object-fit: cover;
    border-radius: 6px; flex-shrink: 0;
}
.add-item-no-thumb {
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    background: #1a2a3a; border-radius: 6px; flex-shrink: 0;
    color: #4a5a6a; font-size: 20px;
}
.add-item-row-info { flex: 1; min-width: 0; }
.add-item-row-name { font-size: 16px; font-weight: 500; color: #c3cad4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.add-item-row-price { font-size: 15px; color: #4da8ff; font-weight: 600; white-space: nowrap; }
.add-item-detail {
    border: 1px solid #2a3947; border-radius: 8px;
    padding: 16px 14px 14px;
    display: flex; flex-direction: column; align-items: center;
}
.add-item-detail-placeholder {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px; color: #354656;
    font-size: 14px; text-align: center; min-height: 200px;
}
.add-item-detail-placeholder i { font-size: 2.2rem; }
.add-item-detail-img {
    width: 88px; height: 88px; object-fit: cover;
    border-radius: 8px; margin-bottom: 10px; flex-shrink: 0;
}
.add-item-detail-name {
    font-size: 15px; font-weight: 600; color: #e8ecf2;
    text-align: center; margin-bottom: 10px; line-height: 1.3;
    word-break: break-word; width: 100%;
}
.add-item-detail-row {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 9px 0; border-bottom: 1px solid #1e2e3d; gap: 8px;
}
.add-item-detail-row:last-child { border-bottom: none; }
.add-item-detail-row > span { font-size: 13px; color: #7a8fa6; flex-shrink: 0; }
.add-item-qty-input {
    width: 56px; background: #071018; border: 1px solid #4a6070;
    border-radius: 6px; color: #e8ecf2; font-size: 18px;
    text-align: center; padding: 3px; outline: none;
}
.add-item-disc-input {
    width: 80px; background: #071018; border: 1px solid #354656;
    border-radius: 6px; color: #c3cad4; font-size: 14px;
    text-align: right; padding: 4px 6px; outline: none;
}
.add-item-footer-cancel {
    flex: 1; background: #1a2a3a; border: 1px solid #354656;
    color: #9aabb8; border-radius: 8px; padding: 11px 0;
    font-size: 16px; cursor: pointer; transition: background .15s;
}
.add-item-footer-cancel:hover { background: #243848; }
.add-item-footer-confirm {
    flex: 2; background: #1b5f1f; border: 1px solid #4b9f3f;
    color: #fff; border-radius: 8px; padding: 11px 0;
    font-size: 16px; cursor: pointer; font-weight: 600; transition: background .15s;
}
.add-item-footer-confirm:hover { background: #226b26; }
.qty-step-btn {
    width: 36px; height: 36px; flex-shrink: 0;
    background: #1a2a3a; border: 1px solid #354656; border-radius: 7px;
    color: #fff; font-size: 20px; cursor: pointer; line-height: 1;
}
.qty-step-btn-sm { width: 24px; height: 24px; font-size: 14px; border-radius: 5px; }

/* ── Discount, Clear Cart, Return modals dark theme ── */
#discountModal .modal-content,
#clearCartModal .modal-content,
#checkPriceModal .modal-content,
#managerApprovalModal .modal-content {
    background: #0c1722; border: 1px solid #354656; color: #c3cad4;
}
#discountModal .modal-header,
#clearCartModal .modal-header,
#checkPriceModal .modal-header,
#managerApprovalModal .modal-header { border-bottom: 1px solid #2a3947; padding: 14px 20px; }
#discountModal .modal-title,
#clearCartModal .modal-title,
#checkPriceModal .modal-title,
#managerApprovalModal .modal-title { color: #e8ecf2; font-size: 18px; font-weight: 700; }
#discountModal .btn-close,
#clearCartModal .btn-close,
#checkPriceModal .btn-close,
#managerApprovalModal .btn-close { filter: invert(1) brightness(.65); }
#discountModal .modal-body,
#clearCartModal .modal-body,
#checkPriceModal .modal-body,
#managerApprovalModal .modal-body { padding: 16px 20px; }
#discountModal .modal-footer,
#clearCartModal .modal-footer,
#checkPriceModal .modal-footer,
#managerApprovalModal .modal-footer { border-top: 1px solid #2a3947; padding: 12px 20px; gap: 10px; }
#checkPriceModal .form-control,
#managerApprovalModal .form-control {
    background: #071018; border: 1px solid #354656; color: #c3cad4;
}
#checkPriceModal .form-control::placeholder,
#managerApprovalModal .form-control::placeholder { color: #4a6070; }
#checkPriceModal .form-control:focus,
#managerApprovalModal .form-control:focus {
    background: #071018; border-color: #4b9f3f; color: #c3cad4;
    box-shadow: 0 0 0 2px rgba(75,159,63,.2);
}
#checkPriceModal .btn-outline-secondary,
#managerApprovalModal .btn-outline-secondary { color: #9aabb8; border-color: #354656; }
#checkPriceModal .btn-outline-secondary:hover,
#managerApprovalModal .btn-outline-secondary:hover { background: #1a2a3a; color: #e2e8f0; }
/* #refundModal (shared Return/Refund modal, templates/_refund_modal.html) carries
   its own self-contained <style> block so it renders identically on any page that
   includes it, regardless of that page's stylesheet — see that file. */
/* ── Amend Bill modal — mirrors the refund modal's theming (dark form controls, return-item-* list) ── */
#amendBillModal .modal-content {
    background: #0c1722; border: 1px solid #354656; color: #c3cad4;
}
#amendBillModal .modal-header { border-bottom: 1px solid #2a3947; padding: 14px 20px; }
#amendBillModal .modal-title { color: #e8ecf2; font-size: 18px; font-weight: 700; }
#amendBillModal .btn-close { filter: invert(1) brightness(.65); }
#amendBillModal .modal-body { padding: 16px 20px; }
#amendBillModal .modal-footer { border-top: 1px solid #2a3947; padding: 12px 20px; gap: 10px; }
#amendBillModal .form-control, #amendBillModal .form-select {
    background: #071018; border-color: #354656; color: #c3cad4;
}
#amendBillModal .form-control::placeholder { color: #4a6070; }
#amendBillModal .form-control:focus, #amendBillModal .form-select:focus {
    background: #071018; border-color: #4b9f3f; color: #c3cad4;
    box-shadow: 0 0 0 2px rgba(75,159,63,.2);
}
#amendBillModal .input-group-text { background: #1a2a3a; border-color: #354656; color: #9aabb8; }
#amendBillModal .form-label { color: #9aabb8; font-size: 14px; }
#amendBillModal .form-check-input { accent-color: #4b9f3f; }
#amendBillModal .text-muted { color: #6c8090 !important; }
#amendBillModal .btn-outline-primary { color: #4da8ff; border-color: #4da8ff; }
/* Sits right before the "Find" button, inside the same position:relative
   wrapper as the whole input-group — offset is the Find button's own
   typical rendered width, since it isn't a sibling of the input itself
   (nesting it there would break Bootstrap's input-group corner-rounding). */
.amend-invoice-clear {
    position: absolute; top: 50%; right: 78px; transform: translateY(-50%);
    background: none; border: none; color: #6c8090;
    font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer;
    padding: 4px 6px; z-index: 5;
}
.amend-invoice-clear:hover { color: #ff6b6b; }
#amendBillModal .btn-outline-secondary { color: #9aabb8; border-color: #354656; }
#amendBillModal .btn-primary { background: #1a4d7a; border-color: #2a6aad; color: #fff; }
#amendBillModal .btn-outline-danger { color: #e74c3c; border-color: #7a1a1a; }
#amendBillModal .return-col-header {
    display: flex; gap: 10px; color: #9aabb8; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px; padding: 0 10px 6px;
}
#amendBillModal .return-item-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px; border-bottom: 1px solid #2a3947;
    border-radius: 8px;
}
#amendBillModal .return-item-name { color: #e2e8f0; font-size: 14px; font-weight: 600; }
#amendBillModal .return-item-sub { color: #9aabb8; font-size: 12.5px; margin-top: 2px; }
#amendBillModal .return-item-qty { width: 108px; display: flex; align-items: center; gap: 4px; }
#amendBillModal .return-item-qty input { text-align: center; width: 44px; padding: 4px 2px; }
#amendBillModal .return-item-restock {
    display: flex; align-items: center; gap: 6px; width: 74px;
    color: #c3cad4; font-size: 12.5px; cursor: pointer; margin: 0;
}
#amendBillModal .return-item-restock input { accent-color: #4b9f3f; cursor: pointer; }
#amendBillModal .customer-drop-item { font-size: 14px; padding: 8px 12px; }
#amendBillModal .amend-settle-btn { opacity: .5; transition: opacity .15s, box-shadow .15s; }
#amendBillModal .amend-settle-btn.selected { opacity: 1; box-shadow: 0 0 0 2px #fff inset; }
/* ── Shift summary modal ─────────────────────────────────────────────────────── */
#shiftSummaryModal .modal-dialog { max-width: 560px; }
#shiftSummaryModal .modal-content {
    display: flex; flex-direction: column;
    max-height: 75vh; min-height: 60vh;
}
#shiftSummaryModal .modal-body   {
    padding: 22px; overflow-y: auto; flex: 1 1 auto;
    color: #e2e8f0;
}
#shiftSummaryModal .modal-footer { border-top: 1px solid #2a3947; padding: 14px 22px; flex-shrink: 0; }
#shiftSummaryModal .btn-close    { filter: invert(1) brightness(.65); }
#shiftSummaryModal .text-muted   { color: #9aabb8 !important; }
#shiftSummaryModal strong        { color: #ffffff; }
#shiftSummaryModal .table {
    --bs-table-bg: transparent;
    --bs-table-color: #e2e8f0;
    --bs-table-striped-bg: transparent;
    --bs-table-active-bg: #132333;
    --bs-table-border-color: #2a3947;
    color: #e2e8f0; margin-bottom: 0;
}
#shiftSummaryModal table th {
    color: #9aabb8; border-bottom-color: #2a3947 !important;
    font-size: 13px; padding: 10px 0; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
}
#shiftSummaryModal table td {
    border-bottom-color: #1e2e3d !important;
    padding: 12px 0; font-size: 15px; color: #e2e8f0;
}
#shiftSummaryModal .table-active { --bs-table-active-bg: #132333; }
#shiftSummaryModal .table-active td { color: #ffffff !important; font-weight: 700; font-size: 16px; }
#shiftSummaryModal .method-row td   { color: #9aabb8; font-size: 14px; padding: 8px 0; }
#shiftSummaryModal .btn-secondary {
    background: #1a2a3a; border-color: #354656; color: #c3cad4; font-size: 15px; padding: 10px 24px;
}
/* ── No-shift warning modal ─────────────────────────────────────────────────── */
#noShiftModal .modal-content {
    background: #0c1722; border: 1px solid #354656;
}
#noShiftModal .btn-outline-secondary {
    color: #9aabb8; border-color: #354656;
}
#noShiftModal .btn-outline-secondary:hover { background: #1a2a3a; }
/* ── Shift modals dark theme ────────────────────────────────────────────────── */
#openShiftModal .modal-content,
#closeShiftModal .modal-content {
    background: #0c1722; border: 1px solid #354656; color: #c3cad4;
}
#openShiftModal .modal-header,
#closeShiftModal .modal-header {
    border-bottom: 1px solid #2a3947; padding: 14px 20px;
}
#openShiftModal .modal-title,
#closeShiftModal .modal-title { color: #e8ecf2; font-size: 18px; font-weight: 700; }
#openShiftModal .btn-close,
#closeShiftModal .btn-close { filter: invert(1) brightness(.65); }
#openShiftModal .modal-body,
#closeShiftModal .modal-body { padding: 16px 20px; }
#openShiftModal .modal-footer,
#closeShiftModal .modal-footer { border-top: 1px solid #2a3947; padding: 12px 20px; }
#openShiftModal .form-label,
#closeShiftModal .form-label { color: #9aabb8; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
#openShiftModal .form-control,
#closeShiftModal .form-control {
    background: #071018; border-color: #354656; color: #e2e8f0;
}
#openShiftModal .form-control::placeholder,
#closeShiftModal .form-control::placeholder { color: #4a6070; }
#openShiftModal .form-control:focus,
#closeShiftModal .form-control:focus {
    background: #071018; border-color: #4b9f3f; color: #e2e8f0;
    box-shadow: 0 0 0 2px rgba(75,159,63,.2);
}
#openShiftModal .text-muted,
#closeShiftModal .text-muted { color: #6c8090 !important; }
.shift-expected-row {
    display: flex; justify-content: space-between; align-items: center;
    background: #071018; border: 1px solid #2a3947; border-radius: 8px;
    padding: 10px 14px; margin-bottom: 16px;
}
.shift-expected-row span { font-size: 13px; color: #6c8090; }
.shift-expected-row strong { font-size: 15px; color: #4b9f3f; }
.shift-mini-diff { font-size: 11px; font-weight: 600; margin-top: 3px; }
.shift-recon-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.shift-recon-table th {
    font-size: 11px; color: #6c8090; text-transform: uppercase; text-align: right;
    padding: 0 6px 6px; font-weight: 600;
}
.shift-recon-table th:first-child { text-align: left; }
.shift-recon-table td { padding: 5px 6px; vertical-align: middle; }
.shift-recon-table td:first-child { color: #c3cad4; font-size: 14px; white-space: nowrap; }
.shift-recon-table td:nth-child(2) { text-align: right; color: #4b9f3f; font-weight: 700; font-size: 14px; white-space: nowrap; }
.shift-recon-table td:nth-child(3) { text-align: right; }
.shift-recon-table input { width: 100%; max-width: 120px; text-align: right; margin-left: auto; }
.shift-diff-box {
    display: flex; justify-content: space-between; align-items: center;
    background: #071018; border: 1px solid #2a3947; border-radius: 8px;
    padding: 12px 14px; transition: border-color .2s;
}
.shift-diff-box span { font-size: 13px; color: #6c8090; }
.shift-diff-box strong { font-size: 16px; font-weight: 700; }

/* ── Apply Discount modal sections ── */
.disc-section {
    border: 1px solid #2a3947; border-radius: 8px;
    padding: 14px 16px; margin-bottom: 12px;
}
.disc-section-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 700; color: #c3cad4; margin-bottom: 12px;
}
.disc-step {
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    background: #1a2a3a; border: 1px solid #354656; border-radius: 50%;
    font-size: 13px; color: #7a8fa6; flex-shrink: 0;
}
.disc-apply-opts { display: flex; gap: 10px; }
.disc-apply-opt {
    flex: 1; display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border: 1px solid #354656; border-radius: 8px;
    cursor: pointer; font-size: 15px; color: #6c8090; transition: all .15s;
}
.disc-apply-opt input[type="radio"] { accent-color: #4b9f3f; flex-shrink: 0; }
.disc-apply-opt.active { border-color: #4b9f3f; background: rgba(27,95,31,.2); color: #c3cad4; }
.disc-items-search {
    display: flex; align-items: center; gap: 10px;
    background: #071018; border: 1px solid #354656; border-radius: 6px;
    padding: 0 12px; height: 38px; margin-bottom: 8px; color: #7a8fa6; font-size: 16px;
}
.disc-items-search input {
    flex: 1; background: none; border: none; outline: none; font-size: 14px; color: #c3cad4;
}
.disc-items-count { font-size: 13px; color: #4b9f3f; white-space: nowrap; flex-shrink: 0; }
.disc-item-header {
    display: flex; padding: 4px 8px; gap: 8px;
    font-size: 12px; color: #6c8090; border-bottom: 1px solid #2a3947;
}
.disc-item-list { max-height: 200px; overflow-y: auto; }
.disc-item-row {
    display: flex; align-items: center; gap: 8px; padding: 8px 6px;
    border-bottom: 1px solid #1e2e3d;
}
.disc-item-row:last-child { border-bottom: none; }
.disc-item-row:hover { background: #0f1e2a; }
.disc-item-check {
    display: flex; align-items: center; gap: 8px; padding: 8px 6px;
    border-bottom: 1px solid #1e2e3d; cursor: pointer; margin: 0;
}
.disc-item-check:last-child { border-bottom: none; }
.disc-item-check:hover { background: #0f1e2a; }
.disc-item-check input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: #4b9f3f; flex-shrink: 0; cursor: pointer;
}
.disc-item-thumb {
    width: 32px; height: 32px; object-fit: cover; border-radius: 4px; flex-shrink: 0;
}
.disc-item-no-thumb {
    width: 32px; height: 32px; border-radius: 4px; flex-shrink: 0; background: #1a2a3a;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #4a6070;
}
.disc-item-name {
    flex: 1; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: #c3cad4;
}
.disc-item-qty { width: 70px; text-align: center; font-size: .82rem; color: #7a8fa6; }
.disc-item-total { width: 90px; text-align: right; font-size: .88rem; color: #c3cad4; }
.disc-type-row-full {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid #354656; border-radius: 7px; margin-bottom: 8px;
    transition: border-color .15s;
}
.disc-type-row-full:last-child { margin-bottom: 0; }
.disc-type-row-full.active { border-color: #4b9f3f; background: rgba(27,95,31,.1); }
.disc-type-radio-label {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; flex: 1; font-size: 15px; color: #9aabb8;
}
.disc-type-row-full.active .disc-type-radio-label { color: #c3cad4; }
.disc-type-radio-label input[type="radio"] { accent-color: #4b9f3f; }
.disc-type-input {
    width: 90px; background: #071018; border: 1px solid #354656;
    border-radius: 6px; color: #c3cad4; font-size: 16px;
    text-align: center; padding: 5px 8px; outline: none;
}
.disc-type-input:disabled { opacity: .3; cursor: not-allowed; }
.disc-type-unit { font-size: 14px; color: #6c8090; width: 32px; }
.disc-preview-box { background: #071018; border-radius: 6px; padding: 14px 16px; }
.disc-preview-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Cart item product image */
.cart-item-img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.cart-no-img {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a2a3a;
    border-radius: 6px;
    flex-shrink: 0;
    color: #4a5a6a;
    font-size: 22px;
}

/* Customer + loyalty panel in summary */
.customer-panel {
    border-top: 1px solid #354656;
    padding: 8px 8px 0;
}

.customer-search-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 10px;
    background: #0c1722;
    border: 1px solid #354656;
    border-radius: 6px;
    color: #7a8fa6;
    font-size: 14px;
}

.customer-search-row input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #c3cad4;
    font-size: 13px;
    min-width: 0;
}

.customer-drop {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: #0c1722;
    border: 1px solid #354656;
    border-radius: 6px;
    z-index: 1060;
    max-height: 190px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

.customer-drop-item {
    padding: 9px 14px;
    cursor: pointer;
    font-size: 17px;
    border-bottom: 1px solid #1e2e3d;
    color: #c3cad4;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.customer-drop-item:hover { background: #132333; }

/* Amend Bill's invoice picker — an always-visible list, not a dropdown that
   only appears once typing starts, so the same 10-most-recent-invoices view
   the cashier already knows from the old dropdown is there by default. */
.amend-invoice-list {
    position: static;
    background: #0c1722;
    border: 1px solid #354656;
    border-radius: 6px;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 8px;
}

.customer-selected-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 4px;
    font-size: 13px;
    color: #c3cad4;
}

.customer-selected-bar strong {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-clear-btn {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 6px;
    line-height: 1;
    flex-shrink: 0;
}
.customer-clear-btn:hover { color: #dc3545; }

.loyalty-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px 8px;
    font-size: 13px;
    color: #c3cad4;
    flex-wrap: wrap;
}

.loyalty-pts-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #f4c542;
    font-size: 12px;
}

.loyalty-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.loyalty-input-group input {
    width: 56px;
    background: #0c1722;
    border: 1px solid #354656;
    border-radius: 4px;
    color: #c3cad4;
    padding: 3px 6px;
    font-size: 12px;
    text-align: center;
    outline: none;
}

.loyalty-apply-btn {
    background: #1b5f1f; border: 1px solid #4b9f3f; color: #fff;
    border-radius: 4px; padding: 3px 10px; font-size: 12px; font-weight: 600;
    cursor: pointer;
}
.loyalty-apply-btn:hover { opacity: .88; }

.loyalty-deduction {
    margin-left: auto;
    color: #22c55e;
    font-weight: 700;
    font-size: 13px;
}

.voucher-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.action-cluster > .voucher-row { padding: 4px 4px 8px; }

.voucher-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #0f2b1a;
    border: 1px solid #1e4d24;
    color: #4b9f3f;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.voucher-chip:hover { background: #123a20; }
.voucher-chip.active { background: #1e4d24; border-color: #4b9f3f; color: #7edb88; }

/* ── Customer / credit-voucher split row + Discounts & Credit cluster ────── */
.pos-topsplit {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px;
    padding: 4px 8px 0;
}
.pos-topsplit .customer-search-row,
.pos-topsplit .customer-selected-bar { margin: 0; }

.voucher-entry-row {
    display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px;
    background: #0c1722; border: 1px solid #354656; border-radius: 6px;
    color: #7a8fa6; font-size: 12.5px; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.voucher-entry-row:hover { border-color: #4b9f3f; color: #9aabb8; }
.voucher-selected-mini {
    display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
    background: #0c1722; border: 1px solid #2a4d78; border-radius: 6px;
    color: #7fb3f0; font-size: 12.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden;
}
.voucher-selected-mini > i { font-size: 13px; flex-shrink: 0; }
.voucher-selected-mini > span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.voucher-selected-mini .customer-clear-btn { margin-left: auto; flex-shrink: 0; }

.action-cluster { padding: 8px; margin-top: 0; }
.action-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.action-row.solo { grid-template-columns: 1fr; }
.action-row.duo { grid-template-columns: 1fr 1fr; }
.action-btn {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    background: #0c1722; border: 1px solid #354656; border-radius: 8px;
    padding: 7px 10px; position: relative; min-height: 48px; text-align: left;
}
.action-btn .lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #c3cad4; }
.action-btn .val { font-size: 12.5px; font-weight: 600; color: #9aabb8; }
.action-btn.disc { cursor: pointer; }
.action-btn.disc:hover { border-color: #4b9f3f; }
.action-btn.loyalty .lbl i { color: #f4c542; }
.action-btn.loyalty .val { color: #f4c542; }
.action-btn.credit .lbl i { color: #4da8ff; }
.action-btn.credit .val { color: #4da8ff; }
.applied-note { font-size: 10.5px; color: #22c55e; font-weight: 700; margin-top: 1px; }

/* ── Bill Discount modal tabs (Offers / Discount) ── */
.disc-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid #2a3947; margin-bottom: 14px;
}
.disc-tab {
    padding: 9px 18px; border-radius: 0; font-size: 14px; font-weight: 600; cursor: pointer;
    background: none; border: none; border-bottom: 2px solid transparent;
    color: #6c8090; white-space: nowrap; margin-bottom: -1px; transition: color .15s;
    display: flex; align-items: center; gap: 7px;
}
.disc-tab.active { color: #4b9f3f; border-bottom-color: #4b9f3f; }
.disc-tab:hover:not(.active) { color: #9aabb8; }
.disc-tab-lock { font-size: 11px; color: #7a8fa6; }
.disc-tab.active .disc-tab-lock { color: #4b9f3f; }
.disc-empty-state {
    color: #7a8fa6; font-size: 13px; padding: 10px 2px;
}

/* Shift summary modal table */
.shift-summary-table td { padding: 6px 10px; font-size: 17px; }
.shift-summary-table .method-row td:first-child { padding-left: 24px; color: #9aabb8; }

.bottom-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    flex-shrink: 0;
}

.bottom-actions button {
    height: 46px;
    color: #d9dfea;
    background: #101b26;
    border: 1px solid #354656;
    border-radius: 8px;
    font-size: 13px;
}

.bottom-actions i {
    margin-right: 7px;
}

.summary-panel {
    display: flex;
    flex-direction: column;
    padding: 14px 12px 12px;
    overflow-y: auto;
    min-height: 0;
    /* See .billing-panel's order:2 and .pos-workspace's swapped column
       tracks — this moves Summary into the first (narrow) grid track. */
    order: 1;
}

.summary-panel h2 {
    margin: 0 0 4px 6px;
    font-size: 18px;
}

.summary-lines {
    padding: 8px 8px;
    border-top: 1px solid #354656;
    border-bottom: 1px solid #354656;
}

.summary-lines div,
.grand-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.summary-lines div {
    min-height: 32px;
    font-size: 14px;
}

.vat-line {
    margin-top: 4px;
    padding: 0 10px;
    color: #d9b23e;
    background: rgba(96, 67, 8, 0.36);
    border-radius: 6px;
}

.grand-total {
    padding: 14px 8px 12px;
    color: #5fcf50;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
}

.grand-total strong {
    font-size: 20px;
}

.payment-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: auto;
    flex-shrink: 0;
}

/* Restaurant-only Cooking Instructions + Send to Kitchen — sit directly above
   the payment row (order-type/delivery block above already has margin-bottom,
   this needs none since .payment-actions' own margin-top:auto does the actual
   pushing-to-bottom work). */
.cooking-notes-block {
    margin-bottom: 8px;
    border: 1px solid #354656;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.cooking-notes-toggle {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    background: #132333; border: none; color: #c3cad4;
    padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cooking-notes-toggle:hover { background: #16283a; }
.cooking-notes-toggle.open .bi-chevron-down { transform: rotate(180deg); }
.cooking-notes-toggle .bi-chevron-down { transition: transform .15s; }
#cookingNotesPanel {
    padding: 8px 12px; background: #0f1c28; border-top: 1px solid #354656;
}
.cn-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0;
}
.cn-row:not(:last-child) { border-bottom: 1px dashed #22303d; }
.cn-num { color: #6c8090; font-size: 12px; width: 16px; flex-shrink: 0; }
.cn-name {
    color: #9aabb8; font-size: 12.5px; flex: 0 0 40%; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cn-input {
    flex: 1; min-width: 0; background: none; border: none;
    border-bottom: 1px dashed #354656; color: #e2e8f0;
    font-size: 12.5px; padding: 2px 0;
}
.cn-input:focus { outline: none; border-bottom-color: #4b9f3f; }
.cn-input::placeholder { color: #4a6070; }
#cookingNotesEmpty { color: #4a6070; font-size: 12.5px; text-align: center; padding: 6px 0; }

.kitchen-send-btn {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: linear-gradient(135deg, #6a3a12, #522c0d 58%, #3d2109);
    border: 1px solid #c8881a; color: #fff;
    padding: 10px 0; border-radius: 6px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    margin-bottom: 8px;
    transition: opacity .15s;
}
.kitchen-send-btn:hover { opacity: .88; }
/* Was the same teal as Card payment — a real clash reported live, since
   nothing else on this screen uses that color either. Blue reuses the
   receipt screen's own "New Sale" blue rather than inventing a new hue. */
.kitchen-send-btn.packing-slip {
    background: linear-gradient(135deg, #123a78, #102d62 58%, #0d2149);
    border-color: #2f61b4;
}

/* Whichever of these ends up visible instead of .payment-actions (COD, or
   the bill-fully-covered shortcut) needs the same margin-top:auto — a
   display:none sibling doesn't hold its place in the flex column, so
   without this the visible one just sat wherever normal flow put it,
   noticeably higher than where Cash/Card/Split actually sit. */
#posCodPlaceRow,
#completeSaleNoPayRow {
    margin-top: auto;
    flex-shrink: 0;
}

.pay {
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.pay i {
    margin-right: 0;
    font-size: 15px;
}

.pay.cash {
    background:
        radial-gradient(circle at 18% 22%, rgba(116, 178, 92, 0.42), transparent 38%),
        linear-gradient(135deg, #1b5f1f, #18481c 58%, #143615);
    border: 1px solid #4b9f3f;
}

.pay.card {
    background:
        radial-gradient(circle at 18% 22%, rgba(31, 174, 148, 0.45), transparent 38%),
        linear-gradient(135deg, #0d5c4e, #0a463c 58%, #062e27);
    border: 1px solid #1fae94;
}

.pay.split {
    background:
        radial-gradient(circle at 18% 22%, rgba(119, 70, 170, 0.46), transparent 38%),
        linear-gradient(135deg, #43206d, #351a58 58%, #281442);
    border: 1px solid #6840a0;
}

.pay.credit {
    background:
        radial-gradient(circle at 18% 22%, rgba(166, 112, 32, 0.42), transparent 38%),
        linear-gradient(135deg, #704709, #553505 58%, #3d2704);
    border: 1px solid #a36b17;
}

/* Same amber tone as .pay.credit (unused elsewhere — Credit as a payment
   method was removed from POS) — matches the "COD · Pending" badge's amber
   convention on the Sales page. */
.pay.cod {
    background:
        radial-gradient(circle at 18% 22%, rgba(166, 112, 32, 0.42), transparent 38%),
        linear-gradient(135deg, #704709, #553505 58%, #3d2704);
    border: 1px solid #a36b17;
}

/* ── Common POS modal base ───────────────────────────────────────────────────── */
#cashModal .modal-content,
#cardModal .modal-content,
#splitModal .modal-content,
#creditModal .modal-content,
#openShiftModal .modal-content,
#closeShiftModal .modal-content,
#noShiftModal .modal-content,
#shiftSummaryModal .modal-content,
#discountModal .modal-content,
#clearCartModal .modal-content,
#returnModal .modal-content,
#addItemModal .modal-content {
    background: #0c1722;
    border: 1px solid #354656;
    color: #e2e8f0;
    border-radius: 12px;
}
/* All modal headers */
#cashModal .modal-header,    #cardModal .modal-header,
#splitModal .modal-header,   #creditModal .modal-header,
#openShiftModal .modal-header, #closeShiftModal .modal-header,
#noShiftModal .modal-header, #shiftSummaryModal .modal-header,
#discountModal .modal-header, #clearCartModal .modal-header,
#returnModal .modal-header,  #addItemModal .modal-header {
    border-bottom: 1px solid #2a3947;
    padding: 16px 22px;
}
/* All modal titles */
#cashModal .modal-title,    #cardModal .modal-title,
#splitModal .modal-title,   #creditModal .modal-title,
#openShiftModal .modal-title, #closeShiftModal .modal-title,
#shiftSummaryModal .modal-title, #discountModal .modal-title,
#clearCartModal .modal-title, #returnModal .modal-title,
#addItemModal .modal-title {
    color: #ffffff; font-size: 18px; font-weight: 700;
}
/* All modal bodies */
#cashModal .modal-body,    #cardModal .modal-body,
#splitModal .modal-body,   #creditModal .modal-body {
    padding: 18px 22px;
}
/* All modal footers */
#cashModal .modal-footer,   #cardModal .modal-footer,
#splitModal .modal-footer,  #creditModal .modal-footer {
    border-top: 1px solid #2a3947; padding: 12px 22px;
}
/* All form labels in modals */
#cashModal .form-label, #splitModal .form-label,
#creditModal .form-label, #openShiftModal .form-label,
#closeShiftModal .form-label { color: #9aabb8; font-size: 14px; }

/* ── Payment modal specifics ────────────────────────────────────────────────── */
.pay-total-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0 14px; border-bottom: 1px solid #1e2e3d; margin-bottom: 14px;
    font-size: 16px; color: #9aabb8;
}
.pay-total-amount { font-size: 30px; font-weight: 800; }
.pay-total-amount.cash   { color: #4b9f3f; }
.pay-total-amount.pay-card { color: #29c2a0; }
.pay-total-amount.split  { color: #9460d0; }
.pay-total-amount.credit { color: #c8881a; }
.pay-field-label { display: block; font-size: 14px; color: #9aabb8; margin-bottom: 6px; font-weight: 600; }
.pay-field-input {
    width: 100%; background: #071018; border: 1px solid #354656; border-radius: 8px;
    color: #ffffff; font-size: 26px; font-weight: 700; padding: 10px 16px; outline: none;
    box-sizing: border-box;
}
.pay-field-input::placeholder { color: #2a3d50; }
.pay-field-input:focus { border-color: #4b9f3f; box-shadow: 0 0 0 2px rgba(75,159,63,.2); }
/* Browser autofill (Chrome/Edge) paints its own light background over
   author CSS; this inset-shadow trick is the only reliable override. */
.pay-field-input:-webkit-autofill,
.pay-field-input:-webkit-autofill:hover,
.pay-field-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    box-shadow: 0 0 0 1000px #071018 inset;
    caret-color: #ffffff;
}
/* Secondary/optional fields (card slip-reference) don't need the same visual
   weight as the primary amount field — a smaller variant keeps them from
   adding as much to the modal's overall height. */
.pay-field-input-sm {
    width: 100%; background: #071018; border: 1px solid #354656; border-radius: 8px;
    color: #ffffff; font-size: 15px; font-weight: 500; padding: 9px 12px; outline: none;
    box-sizing: border-box;
}
.pay-field-input-sm::placeholder { color: #2a3d50; }
.pay-field-input-sm:focus { border-color: #4b9f3f; box-shadow: 0 0 0 2px rgba(75,159,63,.2); }
.pay-change-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid #1e2e3d;
    font-size: 16px; color: #9aabb8;
}
.pay-change-amount { font-size: 26px; font-weight: 800; color: #4b9f3f; }
.pay-confirm-btn {
    width: 100%; border: none; border-radius: 9px; padding: 14px 0;
    font-size: 18px; font-weight: 700; cursor: pointer; color: #ffffff !important;
    display: inline-flex !important; flex-wrap: nowrap; align-items: center;
    justify-content: center; gap: 10px; white-space: nowrap; transition: opacity .15s;
    line-height: 1;
}
.pay-confirm-btn i { font-size: 20px; line-height: 1; flex-shrink: 0; }
.pay-confirm-btn:hover { opacity: .88; }
.pay-confirm-btn:disabled { opacity: .45; cursor: not-allowed; }
.pay-confirm-btn.cash {
    background: linear-gradient(135deg, #1b5f1f, #18481c 58%, #143615);
    border: 1px solid #4b9f3f;
}
.pay-confirm-btn.card {
    background: linear-gradient(135deg, #0d5c4e, #0a463c 58%, #062e27);
    border: 1px solid #1fae94;
}
.pay-confirm-btn.split {
    background: linear-gradient(135deg, #43206d, #351a58 58%, #281442);
    border: 1px solid #6840a0;
}
.pay-confirm-btn.credit {
    background: linear-gradient(135deg, #704709, #553505 58%, #3d2704);
    border: 1px solid #a36b17;
}
#creditModal .list-group-item {
    background: #071018; border-color: #354656; color: #c3cad4;
}
#creditModal .list-group-item-action:hover,
#creditModal .list-group-item-action:focus { background: #0f1e2a; color: #c3cad4; }
#creditModal .alert-info {
    background: #0d2540; border-color: #1a4a7a; color: #a0c4e8;
}

@media (max-width: 576px) {
    .home-shell h1 {
        font-size: 44px;
    }
}

@media (max-width: 900px) {
    .dashboard-layout,
    .pos-grid,
    .pos-workspace {
        grid-template-columns: 1fr;
    }
    /* The order:1/order:2 swap (desktop+tablet, Summary first) now lives in
       the ≤767px block above instead — this single-column stacking mode
       starts at 900px, wider than that swap's own real phone threshold, so
       the two concerns are deliberately no longer tied to the same breakpoint. */

    .pos-screen {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .pos-workspace {
        height: auto;
        overflow: visible;
    }

    .cart-panel {
        overflow-y: visible;
    }

    /* The real cause of quick tiles never appearing on first load at this
       width: .pos-workspace above just went height:auto, so .billing-panel's
       flex column has no definite height to distribute — .quick-tiles-panel's
       flex:1 has nothing to grow into and collapses to its own min-height:0
       (genuinely 0px, not just "not measured yet"). layoutQuickTiles() reads
       clientHeight as 0 and its retry loop waits forever, since nothing ever
       makes that height become non-zero on its own — a resize event only
       fixed it because resizing is what finally gave the browser a reason to
       recompute layout at a size where the flex chain still resolved to
       something. cart-panel doesn't have this problem since it just needs
       overflow:visible and lets its rows stack — quick tiles is different:
       it actively measures its own height in JS to decide row count, so it
       needs a real, fixed number here instead of "whatever's left". */
    .quick-tiles-panel {
        flex: none;
        height: 380px;
    }

    .sidebar {
        display: none;
    }

    .cart-row {
        grid-template-columns: 1fr 80px;
    }

    /* Desktop's 5-column grid (36+140+96+110+120 + gaps ≈ 570px) still fits
       comfortably down to well below this breakpoint — no need to stack item
       name/qty/price into separate full-width rows here. That naive collapse
       (removed) just produced orphaned stacked labels; see the ≤560px block
       below for the point where columns genuinely stop fitting. */

    /* .pos-topbar is display:flex at its base (see line ~245), not grid — a
       stray grid-only property here used to have no effect, so the store
       name and the counter/shift/clock/online/account cluster stayed crammed
       into one row and overflowed off the right edge. Fixed below with a
       real two-row grouping: store name + clock on row 1, everything else on
       row 2 (rather than an arbitrary browser-decided wrap point). */
    .pos-topbar {
        flex-wrap: wrap;
        align-items: center;
        height: auto;
        gap: 8px 12px;
        padding: 12px 16px;
    }

    /* Flatten .pos-topbar-right so its children become direct flex items of
       .pos-topbar, letting every widget (store, clock, status, user-cluster)
       sit on the SAME single row via order, each one internally a 2-line
       (main + subtext) stack — this is what makes "one main line, one
       subtext line" achievable without a forced row break: every widget's
       own stack is exactly 2 lines tall, so the whole bar only ever needs
       that much vertical room, instead of the previous design's 3 separate
       stacked rows (store block, then a full second row for status/user). */
    .pos-topbar-right { display: contents; }
    .topbar-sep { display: none; }
    /* No longer forces a row break — letting content flow naturally onto one
       row is the whole point of shrinking every widget to a 2-line stack
       below; flex-wrap on .pos-topbar (unchanged) is still the safety net
       if a narrow-enough window genuinely can't fit it all on one line. */
    .topbar-linebreak { display: none; }

    .pos-store { order: 0; min-width: 0; }
    .pos-store-info strong,
    .pos-store-info small { max-width: 160px; }
    #shiftBadge { order: 1; }
    /* Refresh sits directly beside the online dot ("sub of signal strength")
       — the two read as one small connectivity cluster. */
    #posRefreshBtn { order: 2; padding: 4px 6px !important; font-size: 14px !important; }
    #posStatus { order: 3; gap: 4px; }
    /* "Online" as a bare word next to a dot was redundant with the dot's own
       color — dropped to just the dot at this width; the glow already reads
       as "connected" without needing the label spelled out. Full title=
       tooltip on the parent (#posStatus) still says "Online" for anyone who
       taps/hovers to check. */
    .pos-status-label { display: none; }
    #posClock { order: 4; }
    /* Time is the figure someone actually glances at mid-shift; the date
       rarely matters once you already know roughly what day it is. Stacked
       instead of side by side (see the shared .pos-clock-date::before content
       above, which only applies at the wider desktop spacing) — time on top,
       date as smaller subtext below. Gap matches .pos-store-info's own 2px
       (see base rule) and .pos-user-cluster's below — every main/subtext
       pair in this topbar now shares the same line spacing, not each
       independently chosen. */
    .pos-clock { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
    .pos-clock-time { font-size: 15px; font-weight: 700; color: #e2e8f0; }
    .pos-clock-date { display: block; font-size: 11px; color: #6c8090; }
    .pos-clock-date::before { content: none; }
    /* The real nested version this time — .pos-user-cluster (see the HTML
       comment on it) becomes a genuine 2-item flex column here instead of
       the desktop's display:contents, so the user name and Counter actually
       stack (name on top, Counter as subtext below), both right-aligned,
       matching how .pos-store-info already pairs the business name with its
       branch subtext. */
    .pos-user-cluster {
        order: 5;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }
    .pos-user-cluster .dropdown:last-child { order: 0; }
    /* The pill background/border that .shift-pill gives every other topbar
       badge reads as a stray container around just the username once
       Counter is sitting right underneath it as plain subtext — every other
       main/subtext pair (store name, clock) has no such box, so drop it here
       too for the same bare-text look. */
    .pos-user-cluster .pos-user-btn {
        background: none; border: none; padding: 0;
    }
    #counterPickerWrap { order: 1; }
    #counterPickerWrap .shift-pill {
        background: none; border: none; padding: 0; margin: 0;
        font-size: 12.5px; color: #6c8090; font-weight: 600; line-height: 1.3;
    }
    #counterPickerWrap .shift-pill i { display: none; }
}

/* Tablet touch-target pass. A mouse can click a small target fine; a finger
   on a tablet screen can't, so several controls that were sized for desktop
   (some brand new — the Cashier Price Freedom price-edit field, the Quick
   Picks tile corner boxes — some existing) get a genuinely bigger hit area
   here. Scoped to the tablet band only, not phone (already its own separate
   breakpoints above/below this) and not desktop (mouse precision makes the
   smaller sizing fine there, and several of these sit inside tightly-packed
   grids where growing them by default would cost real layout room). */
@media (min-width: 768px) and (max-width: 1024px) {
    /* The actual restructure: Waiter/Table/Order Type/Category/Quick-Menu
       toggle move out of the cart column (where they were squeezed into
       1/4 of a ~500-600px share, not enough room for a category name no
       matter how tight the padding got) and span the FULL workspace width
       instead, as their own row above the cart/summary split — the summary
       panel already had visible empty space above its payment buttons, so
       dropping its own top edge down to line up costs nothing real. See
       layoutPosTabletRow() in pos.html for the actual element move (CSS
       alone can't relocate a descendant into a different grid item's
       track — this class only controls how the wrapper *behaves* once JS
       has put the real controls inside it). :not(:empty) keeps it out of
       the grid entirely before JS runs and for grocery businesses, which
       never populate it at all. */
    .pos-tablet-top-row:not(:empty) {
        display: flex;
        flex-direction: column;
        gap: 8px;
        grid-column: 1 / -1;
    }
    /* .pos-workspace's own gap (14px, shared between rows and columns by the
       shorthand) left a visibly larger-than-needed strip between this new
       full-width row and the tiles/summary below it than felt right — trim
       just the row gap here, column gap (between the cart and summary
       panels) stays at the base 14px. Trimmed further still (6px → 4px)
       after live feedback that it was still more than needed — the reclaimed
       space goes toward taller/bigger-text controls below and a taller
       tiles/cart/summary area instead of sitting empty. */
    .pos-workspace { row-gap: 4px; grid-template-columns: 280px minmax(0, 1fr); }
    /* At this width .pos-workspace is genuinely 2-column (Summary | Cart or
       Quick-tiles), not the ≤900px block's single-column stack — but that
       ≤900px block's height:auto/overflow:visible on .pos-screen/
       .pos-workspace (built so the whole page scrolls instead of one fixed
       box) still applies here too, since both media queries are active
       together in this range. That's what let real content on the Summary
       side get cut off with no way to reach it: nothing was actually bounded
       enough for Summary's own overflow-y:auto (already set at the base
       level, see .summary-panel above) to have anything to scroll against.
       Restored to a real fixed-height column here — safe now that
       .quick-tiles-panel's height comes from JS (layoutQuickTiles(), keyed
       off its own bounding rect) rather than the flex-chain that the
       ≤900px auto-height design was originally built to work around. */
    .pos-screen { height: 100vh; overflow: hidden; }
    /* Deliberately no explicit height here — .pos-workspace is a flex child
       of .pos-screen (flex:1, set at the base level) and now that .pos-screen
       above has a real bounded height again, that flex-grow distribution
       resolves to a real used height on its own; explicitly writing height
       here would fight that instead of relying on it. grid-template-rows
       gives that resolved height somewhere real to divide between the tablet
       control row (auto, its own content height) and the Summary/Cart row
       (1fr, everything left over — the row Summary's own overflow-y:auto
       needs a bounded box to actually have something to scroll against). */
    .pos-workspace {
        overflow: hidden;
        grid-template-rows: auto 1fr;
    }
    .cart-panel { overflow-y: auto; }
    /* .cart-item's 5 columns (20px checkbox + 140px min name + 118+110+120px
       fixed) need ~530px minimum — a real risk right at this band's narrower
       end, where the cart panel's own actual width (window width minus the
       320px summary column and gaps) can land under that, pushing Final
       Price past the panel's own edge into whatever's next to it. Trimmed
       the three fixed columns down for this range specifically, and kept a
       horizontal-scroll fallback so a genuinely-too-narrow width scrolls
       instead of visually overlapping the neighboring panel either way. */
    .cart-head,
    .cart-item {
        grid-template-columns: 20px minmax(120px, 1fr) 96px 92px 100px;
    }
    .cart-panel {
        overflow-x: auto;
    }
    /* Real controls in the new full-width row (Waiter/Table/Order Type/
       Category) were sized for their old cramped quarter-column home —
       now that they have the whole workspace width to share, give them
       genuinely bigger touch targets and matching larger text instead of
       leaving the extra width as empty padding around small text. */
    .pos-tablet-top-row .pos-order-type-select {
        height: 56px;
        font-size: 15px;
    }
    .pos-tablet-top-row .pos-tw-select {
        padding: 14px 14px;
        font-size: 15px;
    }
    .pos-tablet-top-row .pos-view-toggle button {
        padding: 12px 14px;
        font-size: 14px;
    }
    .cart-price-edit {
        padding: 6px 10px;
        font-size: 14px;
    }
    .cart-price-edit-input {
        width: 84px;
        padding: 6px 8px;
        font-size: 15px;
    }
    .qty-btn {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        font-size: 20px;
    }
    /* Widened for touch — the select's own reserved padding-left has to grow
       to match, or the (now bigger) button overlaps the category name text.
       Real regression caught live: the first version of this bumped only the
       button's own hit area and left the select's padding at its base 26px,
       which visibly covered the category name, leaving only the × showing. */
    .pos-cat-clear {
        width: 28px;
        height: 28px;
        left: 4px;
    }
    .pos-cat-wrap.has-clear select {
        padding-left: 40px;
    }
    .quick-tile-check-wrap {
        width: 28px;
        height: 28px;
        top: 4px;
        left: 4px;
    }
    .quick-tile-check-wrap input[type="checkbox"] {
        width: 19px;
        height: 19px;
    }
    .quick-tile-qty {
        width: 32px;
        height: 28px;
        top: 4px;
        right: 4px;
        font-size: 13px;
    }
    .dropdown-item {
        padding: 10px 16px;
    }
    #amendHeaderBackBtn {
        padding: 8px 12px;
        font-size: 16px;
    }

    /* Menu mode's top row (search, category, order type, Quick/Menu toggle —
       NOT the Quick-mode slot, which is fixed equal-width above) squished
       Category down toward 0 and clipped Order Type's text at this width —
       real cause: .pos-cat-wrap's flex-basis is 0%, so flex-wrap's own
       overflow check doesn't count it as taking any space at all, meaning
       the row never actually wraps even when there's genuinely no room left
       and these two get crushed instead. A real (non-zero) basis lets
       flex-wrap correctly drop them to their own row once they don't fit,
       instead of squishing to an unreadable sliver. */
    .pos-top-row > .pos-cat-wrap,
    .pos-top-row > .pos-order-type-select {
        flex: 1 1 160px;
    }
}

/* Cart columns genuinely stop fitting in one row below here — collapse to a
   compact 3-column layout (checkbox, name+qty-subline, total) instead of the
   full 5-column desktop grid, rather than stacking every field onto its own
   full-width row. */
@media (max-width: 560px) {
    .cart-head { display: none; }

    .cart-item {
        grid-template-columns: 20px 1fr 74px;
        grid-template-areas:
            "x    name  total"
            "x    qty   total";
        row-gap: 2px;
        min-height: 52px;
    }
    .cart-item > .remove-item { grid-area: x; }
    .cart-item > .item-name   { grid-area: name; }
    .cart-item > .qty-inline  {
        grid-area: qty;
        justify-content: flex-start;
        transform: scale(0.82);
        transform-origin: left center;
    }
    /* Unit price column dropped — the final (line) price is what matters at
       this width, and it's still shown; unit price stays visible everywhere
       it's actually needed (search results, Add Item, Check Price). */
    .cart-item > span:nth-child(4) { display: none; }
    .cart-item > strong { grid-area: total; align-self: center; }
}

.shop-dashboard {
    display: grid;
    grid-template-columns: 214px 1fr;
    grid-template-rows: 80px 1fr;
    min-height: 100vh;
    background: #071018;
    color: #f7f9fc;
    font-size: 16px;
}

.shop-sidebar {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #08131d;
    border: 1px solid #22303d;
    border-radius: 0 0 8px 8px;
}

.side-list {
    padding: 8px 8px 16px;
}

.side-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    height: 52px;
    padding: 0 20px;
    color: #d7dde5;
    text-decoration: none;
    border-radius: 6px;
    margin-bottom: 6px;
}

.side-link.active {
    color: #74ff57;
    background: #172431;
}

.side-link.active::after {
    position: absolute;
    top: 0;
    right: -8px;
    width: 3px;
    height: 52px;
    content: "";
    background: #6ef94c;
    border-radius: 3px;
}

.side-link i {
    width: 24px;
    font-size: 22px;
    line-height: 1;
    text-align: center;
}

.system-card {
    display: none;
}

.shop-main {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
}

.shop-topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    background: #071018;
    border-bottom: 1px solid #22303d;
}

.top-left,
.top-filters {
    display: flex;
    align-items: center;
    gap: 16px;
}

.top-left strong {
    font-size: 25px;
}

.hamburger {
    display: grid;
    gap: 5px;
    width: 30px;
    padding: 0;
    background: transparent;
    border: 0;
}

.hamburger span {
    height: 2px;
    background: #f7f9fc;
    border-radius: 2px;
}

.store-logo {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #72f052;
    border: 0;
    border-radius: 0;
    font-size: 27px;
}

.filter-btn,
.admin-btn {
    height: 42px;
    padding: 0 16px;
    color: #f7f9fc;
    background: #0c1722;
    border: 1px solid #2b3a48;
    border-radius: 6px;
}

.filter-btn i {
    margin: 0 5px;
}

.online-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 18px;
    font-weight: 700;
}

.online-pill span {
    width: 12px;
    height: 12px;
    background: #66ed50;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(102, 237, 80, 0.7);
}

.store-filter {
    min-width: 254px;
}

.admin-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
}

.avatar-dot {
    position: relative;
    width: 38px;
    height: 38px;
    border: 2px solid #d7dde5;
    border-radius: 50%;
}

.avatar-dot::after {
    position: absolute;
    right: -1px;
    bottom: 1px;
    width: 10px;
    height: 10px;
    content: "";
    background: #65ef4e;
    border: 2px solid #071018;
    border-radius: 50%;
}

.dashboard-frame {
    margin: 10px 8px 18px 20px;
    padding: 12px 18px 18px;
    border: 1px solid #22303d;
    border-radius: 8px;
}

.metrics-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 14px;
}

.dash-card {
    background: #0c1722;
    border: 1px solid #2a3947;
    border-radius: 8px;
    box-shadow: none;
}

.metric {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 140px;
    padding: 18px 22px;
}

.metric span {
    display: block;
    color: #e0e5ec;
    font-size: 14px;
    margin-bottom: 10px;
}

.metric strong {
    display: block;
    font-size: 28px;
    line-height: 1.1;
}

.metric p {
    margin: 20px 0 0;
    font-size: 15px;
}

.metric em {
    color: #d2d7df;
    font-style: normal;
}

.metric a {
    display: inline-block;
    margin-top: 22px;
    color: #ffc12f;
    text-decoration: none;
}

.metric-icon {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    flex: 0 0 74px;
    border-radius: 50%;
    font-size: 35px;
}

.metric-icon.green {
    color: #cbffc0;
    background: #164f20;
    border: 1px solid #33b832;
}

.metric-icon.blue {
    color: #8eb9ff;
    background: #102f68;
    border: 1px solid #2a72ff;
}

.metric-icon.purple {
    color: #daa0ff;
    background: #43205f;
    border: 1px solid #a544ee;
}

.metric-icon.amber {
    color: #ffd25c;
    background: #7b4f00;
    border: 1px solid #f0a000;
}

.green-text {
    color: #58b94b;
}

.blue-text {
    color: #4b91ff;
}

.purple-text {
    color: #c955ff;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.42fr 1.08fr 1.08fr;
    gap: 14px 16px;
}

.sales-card {
    grid-column: span 2;
    min-height: 412px;
    padding: 18px 22px 10px;
}

.alerts-card {
    padding: 18px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.panel-head h2,
.actions-card h2 {
    margin: 0;
    font-size: 21px;
}

.panel-head a {
    color: #72f052;
    text-decoration: none;
}

.filter-btn.small {
    width: 78px;
    height: 40px;
}

.tabs {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
}

.tabs button {
    padding: 6px 14px;
    color: #d6dde6;
    background: transparent;
    border: 0;
    border-radius: 6px;
}

.tabs button.active {
    color: #70ff54;
    background: #164c21;
}

.sales-chart {
    display: grid;
    grid-template-columns: 34px 1fr;
    height: 224px;
}

.y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #c7ced7;
    font-size: 14px;
    padding-top: 2px;
}

.chart-area {
    position: relative;
    border-bottom: 1px solid #2a3947;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 32px, rgba(255,255,255,0.045) 33px);
}

.chart-area svg {
    width: 100%;
    height: 196px;
    display: block;
}

.x-axis {
    display: flex;
    justify-content: space-between;
    color: #d4dae2;
    font-size: 14px;
}

.sales-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 22px;
    padding: 18px 34px;
    background: #0b1621;
    border: 1px solid #263544;
    border-radius: 8px;
}

.sales-summary div + div {
    border-left: 1px solid #2a3947;
    padding-left: 54px;
}

.sales-summary span {
    display: block;
    color: #c7ced7;
    margin-bottom: 8px;
}

.sales-summary strong {
    font-size: 20px;
}

.alert-row {
    display: grid;
    grid-template-columns: 46px 1fr 20px;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 14px 12px;
    margin-top: 8px;
    border: 1px solid #2a3947;
    border-radius: 7px;
}

.alert-row span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-weight: 800;
}

.alert-row.red span {
    color: #ff6b57;
    background: #5b211f;
}

.alert-row.orange span {
    color: #ffc52d;
    background: #5b3c08;
}

.alert-row.blue span {
    color: #62a2ff;
    background: #14346f;
}

.alert-row strong {
    display: block;
    margin-bottom: 4px;
}

.alert-row p {
    margin: 0;
    color: #c0c7d0;
}

.alert-row b {
    color: #dce3eb;
    font-size: 30px;
    font-weight: 300;
}

.table-card {
    padding: 18px 14px 14px;
}

.table-card table {
    width: 100%;
    border-collapse: collapse;
    color: #f7f9fc;
    font-size: 14px;
}

.table-card th {
    color: #c2cad4;
    font-weight: 500;
    padding: 8px 8px;
}

.table-card td {
    height: 44px;
    padding: 5px 8px;
    border-top: 1px solid #1f2d3a;
}

.table-card td:nth-child(2) {
    white-space: nowrap;
}

.product-img {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-right: 12px;
    vertical-align: middle;
    border-radius: 5px;
    background: #1f2d3a;
}

.product-img::before {
    font-size: 20px;
}

.product-img.rice::before { content: "▤"; color: #d9b16c; }
.product-img.milk::before { content: "▥"; color: #edf4ff; }
.product-img.apples::before { content: "●"; color: #e64233; }
.product-img.bread::before { content: "▰"; color: #c77a2d; }
.product-img.oil::before { content: "▌"; color: #f7c018; }
.product-img.sugar::before { content: "▣"; color: #f4f1e8; }
.product-img.tea::before { content: "▦"; color: #e04433; }
.product-img.salt::before { content: "▥"; color: #e8eef5; }

.status {
    display: inline-block;
    min-width: 52px;
    padding: 4px 10px;
    text-align: center;
    border-radius: 7px;
}

.status.low {
    color: #fff;
    background: #8c2224;
    border: 1px solid #eb333b;
}

.status.medium {
    color: #fff3c9;
    background: #7a4f10;
    border: 1px solid #d79120;
}

.actions-card {
    padding: 18px;
}

.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 18px 0 16px;
}

.action,
.transaction-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 76px;
    color: #fff;
    border-radius: 6px;
    font-size: 16px;
}

.action span,
.transaction-btn span {
    font-size: 30px;
}

.action.green { background: linear-gradient(135deg, #145c19, #103d14); border: 1px solid #2d9230; }
.action.blue { background: linear-gradient(135deg, #0e397f, #0b2859); border: 1px solid #2d5fae; }
.action.purple { background: linear-gradient(135deg, #48206f, #32164f); border: 1px solid #6840a0; }
.action.amber { background: linear-gradient(135deg, #704400, #4a2e02); border: 1px solid #a36b17; }

.transaction-btn {
    width: 100%;
    justify-content: flex-start;
    padding-left: 34px;
    background: #121d28;
    border: 1px solid #2a3947;
}

@media (max-width: 1200px) {
    .shop-dashboard {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .shop-sidebar {
        display: none;
    }

    .shop-main {
        grid-column: 1;
    }

    .dashboard-grid,
    .metrics-row {
        grid-template-columns: 1fr 1fr;
    }

    .sales-card {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .shop-topbar,
    .top-filters {
        align-items: flex-start;
        flex-direction: column;
        height: auto;
        padding: 16px;
    }

    .dashboard-frame {
        margin: 8px;
        padding: 10px;
    }

    .dashboard-grid,
    .metrics-row,
    .sales-summary,
    .action-grid {
        grid-template-columns: 1fr;
    }

    .sales-card {
        grid-column: span 1;
    }

    .sales-summary div + div {
        border-left: 0;
        border-top: 1px solid #2a3947;
        padding: 14px 0 0;
        margin-top: 14px;
    }
}