/* =====================================================
   TECHHUB POS — DESIGN SYSTEM
   Palette: near-black slate + electric blue accent.
   Signature element: the "ticket" card (dashed edge,
   monospace figures) echoing a real receipt chit.
   NOTE: the --gold variable name is kept for backwards
   compatibility with .btn-gold / accent classes below —
   its value is now a tech blue, not literal gold.
   ===================================================== */

:root {
    --bg:            #0F1216;
    --surface:       #171B21;
    --surface-2:     #1E232B;
    --border:        #2C333D;
    --text:          #EDF1F5;
    --text-muted:    #92A0AD;
    --gold:          #3B82C4;
    --gold-dim:      #2A5D8F;
    --restaurant:    #4A9B7F;
    --restaurant-dim:#2E6350;
    --bar:           #C8933C;
    --bar-dim:       #8F6A2C;
    --hotel:         #8E6BA8;
    --hotel-dim:     #5E4772;
    --success:       #4A9B7F;
    --danger:        #C05A5A;
    --warning:       #C8933C;
    --radius:        10px;
    --font-display:  'Sora', -apple-system, sans-serif;
    --font-body:     'Inter', -apple-system, sans-serif;
    --font-mono:     'JetBrains Mono', monospace;
}

/* Theme picker (Settings → Interface). --gold/--gold-dim drive links,
   active nav state, primary buttons, etc. across the whole app. */
body[data-theme="emerald"] {
    --gold:     #3FA372;
    --gold-dim: #2C7350;
}
body[data-theme="crimson"] {
    --gold:     #C0455A;
    --gold-dim: #8A3040;
}

/* Background style picker (Settings → Interface) — separate from the
   accent Theme above: this changes the actual dark background/surface
   colours used everywhere, not just the highlight colour. */
body[data-bg="true_black"] {
    --bg:        #000000;
    --surface:   #121212;
    --surface-2: #1C1C1C;
    --border:    #2E2E2E;
}
body[data-bg="charcoal"] {
    --bg:        #1A1A1A;
    --surface:   #242424;
    --surface-2: #2E2E2E;
    --border:    #3D3D3D;
}
body[data-bg="navy"] {
    --bg:        #0A0F1C;
    --surface:   #131B2E;
    --surface-2: #1C2640;
    --border:    #2C3A5C;
}
body[data-bg="ocean_blue"] {
    --bg:        #071C2E;
    --surface:   #0D2740;
    --surface-2: #163752;
    --border:    #24506F;
}
body[data-bg="forest_green"] {
    --bg:        #0B1A11;
    --surface:   #14261B;
    --surface-2: #1D3526;
    --border:    #2C4B37;
}
body[data-bg="burgundy"] {
    --bg:        #1D0E12;
    --surface:   #2A151B;
    --surface-2: #391E27;
    --border:    #55303C;
}

/* Light background styles — unlike the dark ones above, these also
   override --text/--text-muted (dark text instead of the app's usual
   light-on-dark) and use a lighter --border, since the dark hairline
   values above would look unnecessarily heavy on a light surface. */
body[data-bg="cloud"] {
    --bg:         #F5F6F8;
    --surface:    #FFFFFF;
    --surface-2:  #EDEFF3;
    --border:     #D7DBE1;
    --text:       #1A1D23;
    --text-muted: #666E7A;
}
body[data-bg="sky"] {
    --bg:         #EAF2FA;
    --surface:    #FFFFFF;
    --surface-2:  #E1EDF7;
    --border:     #C6D8EA;
    --text:       #142433;
    --text-muted: #5C7288;
}
body[data-bg="sage"] {
    --bg:         #EEF5EC;
    --surface:    #FFFFFF;
    --surface-2:  #E5EFE2;
    --border:     #C9DCC3;
    --text:       #16241A;
    --text-muted: #5B7156;
}

* { box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* nothing on any page should push the viewport sideways — see also the mobile table/POS fixes below */
}
html { overflow-x: hidden; }

h1, h2, h3, .display {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

a { color: var(--gold); text-decoration: none; }
.text-muted { color: var(--text-muted) !important; }
.mono { font-family: var(--font-mono); }

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

.sidebar {
    width: 240px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    flex-shrink: 0;
}

.sidebar .brand {
    font-family: var(--font-display);
    font-size: 1.3rem;
    padding: 0 20px 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.sidebar .brand span { color: var(--gold); }

.sidebar .outlet-tag {
    padding: 0 20px 16px;
    font-size: .78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    color: var(--text-muted);
    font-size: .92rem;
    border-left: 3px solid transparent;
    transition: all .15s;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.active {
    color: var(--text);
    background: var(--surface-2);
    border-left-color: var(--gold);
}
.nav-group {
    margin: 10px 10px 14px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--group-color, var(--gold)) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--group-color, var(--gold)) 30%, var(--border));
    padding: 6px;
}
.nav-group-label {
    padding: 8px 10px 4px;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--group-color, var(--gold-dim));
    font-weight: 600;
}
.nav-group .nav-link {
    padding: 9px 10px;
    border-radius: 6px;
    border-left: none;
}
.nav-group .nav-link:hover { background: color-mix(in srgb, var(--group-color, var(--gold)) 18%, var(--surface-2)); }
.nav-group .nav-link.active {
    background: color-mix(in srgb, var(--group-color, var(--gold)) 28%, var(--surface-2));
    border-left: 3px solid var(--group-color, var(--gold));
    padding-left: 7px;
}

.main-content { flex: 1; padding: 28px 32px; max-width: 100%; overflow-x: hidden; }

/* ---------- Retractable sidebar (optional — Settings -> Interface) ---------- */
.sidebar-collapse-btn {
    margin-left: auto;
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    width: 24px;
    height: 24px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.sidebar-collapse-btn:hover { color: var(--text); border-color: var(--text-muted); }
.sidebar .brand { display: flex; align-items: center; gap: 8px; }

.sidebar-reopen-btn {
    display: none;
    position: fixed;
    top: 16px;
    left: 12px;
    z-index: 50;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.sidebar-reopen-btn:hover { color: var(--text); border-color: var(--gold); }

html.sidebar-collapsed .sidebar { display: none; }
html.sidebar-collapsed .sidebar-reopen-btn { display: flex; }

@media (max-width: 900px) {
    html.sidebar-collapsed .sidebar { display: flex; }
    .sidebar-reopen-btn { display: none !important; }
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

/* ---------- Cards ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    scroll-margin-top: 20px;
}

/* Briefly highlights a card jumped to via an in-page anchor link (e.g. "+ Add Product") */
.card:target {
    animation: card-target-flash 1.6s ease-out;
}
@keyframes card-target-flash {
    0% { box-shadow: 0 0 0 3px var(--gold); }
    100% { box-shadow: none; }
}

/* Prevents a wide table (or any wide content) inside a grid column from
   forcing the whole grid wider than its container — the classic CSS grid
   "blowout" bug. Grid items default to min-width:auto, which means their
   content's natural width (e.g. a table with many columns) can push a
   sibling column off-screen even when that content already has its own
   overflow-x:auto scroller. This makes every direct child of an inline
   two-column admin grid shrinkable, so the table's own horizontal
   scrollbar does its job instead of the whole layout blowing out. This
   is not a mobile-only issue — it happens at any viewport width once
   the table's content is wider than its column's fr allocation. */
.main-content [style*="grid-template-columns"] > * {
    min-width: 0;
}

/* Below this width, any inline two-column admin layout (list + form) stacks
   into one column instead of squeezing the second column out of view. */
@media (max-width: 900px) {
    .main-content [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* Reusable twin scrollbar for wide tables (Products, Store Stock).
   Markup: <div class="table-scroll-wrap"><table>...</table></div> — the
   matching bar above it (.table-scroll-top) is injected automatically
   by JS in footer.php, sized and kept in sync with the real one below,
   so the table can be scrolled sideways from whichever end of it is
   actually in view instead of always hunting for the bottom edge. */
.table-scroll-top {
    overflow-x: auto;
    overflow-y: hidden;
    height: 14px;
    margin-bottom: 6px;
}
.table-scroll-top > div { height: 1px; }
.table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.stat-card { padding: 18px 20px; }
.stat-card .stat-label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.stat-card .stat-value { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 600; margin-top: 4px; }

/* ---------- Ticket signature element ---------- */
.ticket {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    position: relative;
    font-family: var(--font-mono);
}
.ticket::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 6px;
    background-image: radial-gradient(circle at 6px 3px, var(--bg) 3px, transparent 3px);
    background-size: 12px 6px;
    background-repeat: repeat-x;
}
.ticket-header {
    border-bottom: 1px dashed var(--border);
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ticket-body { padding: 12px 14px; }
.ticket-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: .88rem; }
.ticket-footer {
    border-top: 1px dashed var(--border);
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
}

/* ---------- Module badges/accents ---------- */
.badge-module {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.badge-restaurant { background: rgba(107,143,113,.15); color: var(--restaurant); border: 1px solid var(--restaurant-dim); }
.badge-bar { background: rgba(168,69,90,.15); color: var(--bar); border: 1px solid var(--bar-dim); }
.badge-hotel { background: rgba(110,134,184,.15); color: var(--hotel); border: 1px solid var(--hotel-dim); }

.module-toggle-card { border-left: 4px solid var(--border); }
.module-toggle-card.on.restaurant { border-left-color: var(--restaurant); }
.module-toggle-card.on.bar { border-left-color: var(--bar); }
.module-toggle-card.on.hotel { border-left-color: var(--hotel); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    padding: 9px 16px;
    border-radius: 8px;
    font-size: .88rem;
    cursor: pointer;
    transition: all .15s;
}
.btn:hover { border-color: var(--gold-dim); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #1A1400; font-weight: 600; }
.btn-gold:hover { background: #DBAE4D; }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: rgba(192,73,90,.12); }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 5px 10px; font-size: .78rem; }

/* switch toggle */
.switch { position: relative; width: 42px; height: 24px; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: var(--border); border-radius: 24px; cursor: pointer; transition: .2s; }
.slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: var(--text); border-radius: 50%; transition: .2s; }
input:checked + .slider { background: var(--gold-dim); }
input:checked + .slider::before { transform: translateX(18px); background: var(--gold); }

/* ---------- Forms ---------- */
.form-label { font-size: .82rem; color: var(--text-muted); margin-bottom: 6px; display: block; }
.form-control, select.form-control, textarea.form-control {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: .92rem;
}
.form-control:focus { outline: none; border-color: var(--gold-dim); }

/* Price fields (Add/Edit Product) — plain number entry, no up/down
   steppers cluttering the field; typing/pasting an amount still works
   exactly the same. */
input.no-stepper::-webkit-outer-spin-button,
input.no-stepper::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.no-stepper { -moz-appearance: textfield; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--border); }
td { padding: 12px; border-bottom: 1px solid var(--border); font-size: .9rem; }
tr:last-child td { border-bottom: none; }

.status-pill { padding: 3px 10px; border-radius: 20px; font-size: .74rem; text-transform: capitalize; }
.status-open, .status-pending { background: rgba(200,155,60,.15); color: var(--gold); }
.status-preparing { background: rgba(200,155,60,.25); color: var(--gold); }
.status-ready, .status-served { background: rgba(90,143,107,.15); color: var(--success); }
.status-paid { background: rgba(90,143,107,.25); color: var(--success); }
.status-void, .status-cancelled { background: rgba(192,73,90,.15); color: var(--danger); }

/* ---------- Category rows (admin menu page) ---------- */
.cat-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.cat-swatch { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cat-swatch img { width: 100%; height: 100%; object-fit: cover; }
.cat-swatch-sm { width: 28px; height: 28px; border-radius: 6px; }
.cat-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

.icon-pick-option:hover { border-color: var(--gold) !important; }
.icon-pick-option:has(input:checked) { border-color: var(--gold) !important; background: color-mix(in srgb, var(--gold) 12%, transparent); }

.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: .9rem; }
.flash-success { background: rgba(90,143,107,.15); border: 1px solid var(--success); color: var(--success); }
.flash-error { background: rgba(192,73,90,.15); border: 1px solid var(--danger); color: var(--danger); }
.flash-info { background: color-mix(in srgb, var(--gold) 15%, transparent); border: 1px solid var(--gold); color: var(--text); }

.login-expiry-banner {
    background: var(--warning);
    color: #1a1400;
    text-align: center;
    font-size: .82rem;
    font-weight: 600;
    padding: 8px 16px;
}

/* ---------- POS Terminal ---------- */
.pos-shell { display: grid; grid-template-columns: 1fr 360px; gap: 20px; height: calc(100vh - 40px); }
.pos-menu { overflow-y: auto; padding-right: 8px; }
.category-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.category-tab {
    padding: 8px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border);
    color: var(--text-muted); cursor: pointer; font-size: .85rem;
    display: inline-flex; align-items: center; gap: 6px;
}
.category-tab.active { background: var(--tab-color, var(--gold)); color: #14120F; border-color: var(--tab-color, var(--gold)); font-weight: 600; }
.category-tab-sub { font-size: .8rem; opacity: .9; }
.cat-tab-img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; }
.item-card-img { width: 100%; height: 70px; object-fit: cover; border-radius: 6px; margin-bottom: 8px; }

.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.item-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px; cursor: pointer; transition: all .12s;
}
.item-card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.item-card .item-name { font-size: .92rem; font-weight: 600; margin-bottom: 6px; min-height: 40px; }
.item-card .item-price { font-family: var(--font-mono); color: var(--gold); font-size: .95rem; }
.item-card.unavailable { opacity: .4; pointer-events: none; }

.cart-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; height: 100%; }
.cart-header { padding: 16px; border-bottom: 1px solid var(--border); }
.cart-items { flex: 1; overflow-y: auto; padding: 10px 16px; }
.cart-line { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .88rem; gap: 10px; }
.cart-line .qty-controls { display: flex; align-items: center; gap: 8px; align-self: center; flex-shrink: 0; }
.qty-btn { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; }
.cart-summary { padding: 14px 16px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: .9rem; }
.cart-summary .row { display: flex; justify-content: space-between; margin-bottom: 6px; }
.cart-summary .total-row { font-size: 1.15rem; font-weight: 700; color: var(--gold); border-top: 1px dashed var(--border); padding-top: 10px; margin-top: 6px; }
.cart-actions { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }

.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.sp-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; cursor: pointer; }
.sp-card .sp-label { font-family: var(--font-display); font-size: 1.1rem; }
.sp-card .sp-capacity { font-size: .76rem; color: var(--text-muted); margin-top: 4px; }
.sp-card.available { border-color: var(--success); }
.sp-card.occupied { border-color: var(--gold); background: rgba(200,155,60,.08); }
.sp-card.reserved { border-color: var(--bar); }
.sp-card.cleaning { border-color: var(--text-muted); opacity: .6; }

/* ---------- KDS (kitchen/bar display) ---------- */
.kds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.kds-ticket { border-top: 4px solid var(--gold); }
.kds-ticket.overdue { border-top-color: var(--danger); }
.kds-timer { font-family: var(--font-mono); font-size: .8rem; color: var(--text-muted); }

/* ---------- Login ---------- */
.login-shell {
    min-height: 100vh;
    display: flex;
    background: var(--bg);
}

/* Left: branded hero panel. Built from a CSS gradient + a subtle dot-grid
   pattern (no image asset), so it's fast to load and easy to re-theme. */
.login-hero {
    flex: 1 1 46%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
    background: linear-gradient(155deg, var(--gold-dim) 0%, #16233A 45%, var(--bg) 100%);
    overflow: hidden;
}
.login-hero-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(circle at 30% 30%, black, transparent 75%);
    mask-image: radial-gradient(circle at 30% 30%, black, transparent 75%);
}
.login-hero-content { position: relative; max-width: 500px; }
.login-hero-mark {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--gold);
    color: #0F1216;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.login-hero-logo {
    display: block;
    object-fit: contain;
    margin-bottom: 24px;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
}
.login-hero-image {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: var(--radius);
    margin-bottom: 24px;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.login-hero-content h1 { font-size: 2rem; margin: 0 0 20px; color: #fff; }
.login-hero-content h1 span { color: var(--gold); }
.login-hero-tag { color: rgba(255,255,255,.75); font-size: .95rem; margin: 0 0 32px; }
.login-hero-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.login-hero-points li {
    color: rgba(255,255,255,.88);
    font-size: .88rem;
    padding-left: 26px;
    position: relative;
}
.login-hero-points li::before {
    content: "";
    position: absolute; left: 0; top: 4px;
    width: 16px; height: 16px;
    border-radius: 5px;
    background: rgba(255,255,255,.12);
    border: 1px solid var(--gold);
}
.login-hero-points li::after {
    content: "";
    position: absolute; left: 5px; top: 8px;
    width: 6px; height: 3px;
    border-left: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: rotate(-45deg);
}

/* Right: the actual sign-in form */
.login-panel { flex: 1 1 54%; display: flex; align-items: center; justify-content: center; padding: 40px; }
.login-card { width: 100%; max-width: 380px; }
.login-card h2 { font-family: var(--font-display); font-size: 1.5rem; }

/* On-screen alphanumeric keypad — hidden until toggled */
.vkbd { display: none; margin: -6px 0 18px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.vkbd.active { display: block; }
.vkbd-row { display: flex; gap: 5px; margin-bottom: 5px; }
.vkbd-row:last-child { margin-bottom: 0; }
.vkbd-key {
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: .82rem;
    text-transform: none;
    cursor: pointer;
    user-select: none;
}
.vkbd-key:active { background: var(--gold-dim); border-color: var(--gold-dim); }
.vkbd-key-wide { flex: 1.8; font-family: var(--font-body); font-size: .74rem; }
.vkbd-key-active { background: var(--gold); color: #0F1216; border-color: var(--gold); }

@media (max-width: 800px) {
    .login-shell { flex-direction: column; }
    .login-hero { flex: 0 0 auto; padding: 40px 32px; }
    .login-hero-points { display: none; }
    .login-panel { flex: 1 1 auto; padding: 40px 24px; }
}

@media (max-width: 900px) {
    .app-shell { flex-direction: column; }
    .sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding: 10px; }
    .pos-shell { grid-template-columns: 1fr; height: auto; }
}

@media (max-width: 700px) {
    /* Wide tables (Products, Sales, Debtors Report, etc.) would otherwise
       have their right-hand columns silently clipped by .main-content's
       overflow-x:hidden. This lets a table scroll horizontally within
       itself — thead/tbody/tr/td keep their normal table layout even
       though the outer <table> becomes a block-level scroll container. */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .main-content { padding: 16px; }
    .topbar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .topbar form { width: 100%; }
}

/* =====================================================
   POS TERMINAL LAYOUT — scoped to .classic-pos.
   Same functional idea as any bill-entry till (itemised
   bill on one side, category/item picker on the other),
   but styled in this app's own dark/gold/ticket language
   rather than mimicking any particular POS product.
   ===================================================== */
.classic-pos {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    min-height: 100vh;
    padding: 0;
}
.classic-pos .cp-accent-line {
    height: 3px;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-dim));
}
.classic-pos .cp-wrap {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 0;
    min-height: calc(100vh - 3px);
}
.classic-pos .cp-wrap > * { min-width: 0; } /* without this, a grid item's default min-width is its content's natural width, which silently pushes the whole page wider than the screen instead of wrapping */
.classic-pos .cp-bill {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
}
.classic-pos .cp-field-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; min-width: 0; }
.classic-pos .cp-field-row label { width: 88px; font-weight: 600; font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
.classic-pos .cp-field-row input, .classic-pos .cp-field-row select, .classic-pos .cp-field-row .cp-static {
    flex: 1;
    min-width: 0; border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px;
    font-size: .86rem; background: var(--surface-2); color: var(--text); font-family: inherit;
}
.classic-pos .cp-field-row .cp-static { color: var(--text-muted); }
.classic-pos .cp-field-row input:focus, .classic-pos .cp-field-row select:focus { outline: none; border-color: var(--gold-dim); }

.classic-pos .cp-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 11px 8px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    transition: border-color .15s;
}
.classic-pos .cp-btn:hover:not(:disabled) { border-color: var(--gold-dim); }
.classic-pos .cp-btn:active:not(:disabled) { transform: translateY(1px); }
.classic-pos .cp-btn:disabled { opacity: .4; cursor: not-allowed; }
.classic-pos .cp-btn.cp-primary { background: var(--gold); border-color: var(--gold); color: #1A1400; }
.classic-pos .cp-btn.cp-primary:hover { background: #DBAE4D; }
.classic-pos .cp-btn.cp-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.classic-pos .cp-btn.cp-danger:hover { background: rgba(192,73,90,.12); }

.classic-pos .cp-bill-table {
    flex: 1; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-2); margin: 12px 0; min-height: 160px; position: relative;
}
.classic-pos .cp-bill-table::before {
    content: "";
    position: absolute; top: -1px; left: -1px; right: -1px; height: 6px;
    background-image: radial-gradient(circle at 6px 3px, var(--surface) 3px, transparent 3px);
    background-size: 12px 6px; background-repeat: repeat-x;
}
.classic-pos table.cp-table { width: 100%; border-collapse: collapse; font-size: .82rem; font-family: var(--font-mono); }
.classic-pos table.cp-table th {
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 8px; text-align: left; font-weight: 600; color: var(--gold-dim);
    font-family: var(--font-body); text-transform: uppercase; font-size: .7rem; letter-spacing: .05em;
}
.classic-pos table.cp-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.classic-pos table.cp-table tr:last-child td { border-bottom: none; }
.classic-pos .cp-note-line { color: var(--gold); font-size: .74rem; font-style: italic; font-family: var(--font-body); }

.classic-pos .cp-totals { display: flex; gap: 16px; margin-bottom: 12px; font-family: var(--font-mono); flex-wrap: wrap; }
.classic-pos .cp-totals label { font-weight: 600; font-size: .75rem; margin-right: 6px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.classic-pos .cp-totals input { width: 100%; max-width: 120px; border: 1px solid var(--border); background: var(--surface-2); color: var(--gold); padding: 5px 8px; font-weight: 700; border-radius: 6px; }

.classic-pos .cp-btn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.classic-pos .cp-btn-grid.cp-btn-grid-4 { grid-template-columns: repeat(4, 1fr); }

.classic-pos .cp-menu-panel { padding: 18px; display: flex; flex-direction: column; height: calc(100vh - 3px); }
.classic-pos .cp-menu-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.classic-pos .cp-crumb { font-family: var(--font-display); font-size: 1.05rem; color: var(--text); }
.classic-pos .cp-crumb b { color: var(--gold); }
.classic-pos .cp-search {
    border: 1px solid var(--border); border-radius: 20px; padding: 8px 14px; font-size: .85rem; width: 220px;
    background: var(--surface); color: var(--text);
}
.classic-pos .cp-search:focus { outline: none; border-color: var(--gold-dim); }

.classic-pos .cp-tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; overflow-y: auto; flex: 1; align-content: start; min-width: 0; }
.classic-pos .cp-tile {
    min-height: 96px;
    min-width: 0;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    font-size: .95rem;
    color: #171310;
    cursor: pointer;
    word-break: break-word;
    padding: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    transition: transform .12s, box-shadow .12s;
}
.classic-pos .cp-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.3); }
.classic-pos .cp-tile:active { transform: translateY(0); }
.classic-pos .cp-tile.cp-tile-item { flex-direction: column; gap: 4px; font-size: .88rem; color: var(--text); border: 1px solid var(--border); }
.classic-pos .cp-tile .cp-tile-price { font-size: .82rem; font-weight: 700; font-family: var(--font-mono); color: var(--gold); }
.classic-pos .cp-tile.cp-tile-back { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); box-shadow: none; }
.classic-pos .cp-tile.unavailable, .classic-pos .cp-tile.cp-tile-out { opacity: .4; }
.classic-pos .cp-tile .cp-tile-stock { font-size: .68rem; color: var(--text-muted); }
.text-danger { color: var(--danger) !important; }

.classic-pos .cp-status-bar { margin-top: 12px; font-size: .78rem; color: var(--text-muted); display: flex; justify-content: space-between; }

.classic-pos #noteModal .card { background: var(--surface); color: var(--text); }

.classic-pos .qty-btn { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.classic-pos .status-pill { font-size: .68rem; padding: 1px 7px; }
.classic-pos .badge-module { font-size: .68rem; }

@media (max-width: 900px) {
    .classic-pos .cp-wrap { grid-template-columns: 1fr; }
    .classic-pos .cp-tile-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .classic-pos .cp-menu-panel { padding: 12px; }
    .classic-pos .cp-bill { padding: 12px 12px 10px; }
    .classic-pos .cp-tile-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .classic-pos .cp-tile { min-height: 76px; font-size: .82rem; }
    .classic-pos .cp-btn-grid, .classic-pos .cp-btn-grid.cp-btn-grid-4 { grid-template-columns: repeat(3, 1fr); }
    .classic-pos .cp-totals { gap: 10px; }
    .classic-pos .cp-totals input { max-width: 90px; }
    .classic-pos table.cp-table { font-size: .74rem; }
}

/* ---------- Printable receipt ---------- */
.receipt-shell { min-height: 100vh; background: var(--bg); padding: 30px 16px; display: flex; flex-direction: column; align-items: center; }
.receipt-actions { width: 100%; max-width: 380px; display: flex; justify-content: space-between; margin-bottom: 16px; }
.receipt-paper {
    width: 100%; max-width: 380px;
    background: #fff; color: #111;
    border-radius: 8px;
    padding: 24px 20px;
    font-size: .85rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.receipt-center { text-align: center; }
.receipt-divider { border-top: 1px dashed #999; margin: 14px 0; }
.receipt-meta div, .receipt-totals div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.receipt-meta span:first-child, .receipt-totals span:first-child { color: #555; }
.receipt-items { width: 100%; border-collapse: collapse; table-layout: fixed; }
.receipt-items th { text-align: left; font-size: .72rem; text-transform: uppercase; color: #555; padding-bottom: 6px; border-bottom: 1px solid #ddd; }
.receipt-items td { padding: 6px 0; vertical-align: top; border-bottom: 1px solid #eee; word-wrap: break-word; }
.receipt-items th:not(:first-child), .receipt-items td:not(:first-child) { text-align: right; padding-left: 10px; }
.receipt-items th:nth-child(1), .receipt-items td:nth-child(1) { width: 42%; }
.receipt-items th:nth-child(2), .receipt-items td:nth-child(2) { width: 12%; }
.receipt-items th:nth-child(3), .receipt-items td:nth-child(3) { width: 23%; }
.receipt-items th:nth-child(4), .receipt-items td:nth-child(4) { width: 23%; }
.receipt-subline { font-size: .72rem; color: #666; margin-top: 2px; }
.receipt-grand-total { font-weight: 700; font-size: 1rem; border-top: 1px solid #ddd; margin-top: 6px; padding-top: 8px !important; }
.receipt-footer-note { font-size: .82rem; }

@media print {
    body { background: #fff; }
    .no-print { display: none !important; }
    .receipt-shell { padding: 0; background: #fff; }
    .receipt-paper { box-shadow: none; max-width: 100%; border-radius: 0; }
    /* Any regular admin page (reports, statements, etc.) — hide the
       sidebar/nav chrome and let the content take the full page. */
    .app-shell { display: block !important; }
    .sidebar { display: none !important; }
    .main-content { padding: 0 !important; max-width: 100% !important; color: #111 !important; background: #fff !important; }
    .card { background: #fff !important; color: #111 !important; border: 1px solid #ccc !important; box-shadow: none !important; }
    .text-muted { color: #555 !important; }
    table, th, td { color: #111 !important; }
    th { border-bottom-color: #999 !important; }
    td { border-bottom-color: #ddd !important; }
}

/* ---------- Printable A4 documents (Quotations, Invoices, Delivery Notes) ---------- */
.doc-shell { min-height: 100vh; background: var(--bg); padding: 30px 16px; display: flex; flex-direction: column; align-items: center; }
.doc-actions { width: 100%; max-width: 800px; display: flex; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.doc-paper {
    width: 100%; max-width: 800px;
    background: #fff; color: #1a1a1a;
    border-radius: 8px;
    padding: 48px 52px;
    font-size: .92rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.doc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
.doc-top img { max-width: 160px; max-height: 80px; object-fit: contain; margin-bottom: 8px; }
.doc-business-name { font-size: 1.1rem; font-weight: 700; }
.doc-business-meta { font-size: .82rem; color: #555; margin-top: 4px; line-height: 1.5; }
.doc-title-block { text-align: right; }
.doc-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #333; }
.doc-title-block .doc-no { font-family: var(--font-mono); font-size: .95rem; margin-top: 4px; }
.doc-title-block .doc-status { margin-top: 8px; }
.doc-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid #e2e2e2; }
.doc-meta-grid h4 { margin: 0 0 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #888; }
.doc-meta-grid div { font-size: .88rem; line-height: 1.6; }
.doc-items { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.doc-items th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #888; padding: 0 0 8px; border-bottom: 2px solid #333; }
.doc-items td { padding: 10px 0; vertical-align: top; border-bottom: 1px solid #eee; }
.doc-items th:not(:first-child), .doc-items td:not(:first-child) { text-align: right; }
.doc-items .doc-item-desc { font-size: .78rem; color: #666; margin-top: 2px; }
.doc-totals { width: 280px; margin-left: auto; }
.doc-totals div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.doc-totals span:first-child { color: #555; }
.doc-grand-total { font-weight: 700; font-size: 1.1rem; border-top: 2px solid #333; margin-top: 6px; padding-top: 10px !important; }
.doc-notes { margin-top: 28px; padding-top: 18px; border-top: 1px solid #e2e2e2; font-size: .82rem; color: #444; }
.doc-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 48px; }
.doc-signature-line { border-top: 1px solid #999; padding-top: 6px; font-size: .78rem; color: #666; }

@media print {
    .doc-shell { padding: 0; background: #fff; }
    .doc-paper { box-shadow: none; max-width: 100%; border-radius: 0; padding: 0; }
    @page { size: A4; margin: 18mm; }
}

/* Serial picker modal (POS — adding a serialized item) */
.serial-option {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; cursor: pointer; font-family: var(--font-mono); font-size: .88rem;
    border-bottom: 1px solid var(--border);
}
.serial-option:last-child { border-bottom: none; }
.serial-option:hover { background: var(--surface-2); }
.serial-option.selected { background: color-mix(in srgb, var(--gold) 20%, var(--surface-2)); color: var(--gold); font-weight: 600; }
.serial-option .serial-pick-badge { font-size: .68rem; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .04em; color: var(--gold); opacity: 0; }
.serial-option.selected .serial-pick-badge { opacity: 1; }

/* Shared "..." row-action menu — Sales, and every list page it extends
   to the same way (Purchases, Invoices, Consignments, etc.). */
.row-menu-wrap { position: relative; display: inline-block; }
.row-menu-btn {
    background: none; border: 1px solid var(--border); color: var(--text-muted);
    font-size: 1rem; line-height: 1; cursor: pointer; padding: 6px 10px; border-radius: 6px;
}
.row-menu-btn:hover { color: var(--text); background: var(--surface-2); }
.row-menu-dropdown {
    display: none; position: absolute; right: 0; top: calc(100% + 4px);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
    min-width: 190px; z-index: 200; box-shadow: 0 10px 28px rgba(0,0,0,.45); padding: 6px;
}
.row-menu-dropdown.open { display: block; }
.row-menu-dropdown a, .row-menu-dropdown button {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 8px 10px; border-radius: 6px; color: var(--text); text-decoration: none;
    background: none; border: none; font-size: .85rem; cursor: pointer; font-family: inherit;
}
.row-menu-dropdown a:hover, .row-menu-dropdown button:hover { background: var(--surface); }
.row-menu-dropdown .row-menu-danger { color: var(--danger); }
.row-menu-dropdown .row-menu-divider { border-top: 1px solid var(--border); margin: 6px 0; }

/* Reusable column show/hide widget for wide tables — Products,
   Inventory, Sales, etc. */
.col-toggle-wrap { position: relative; }
.col-toggle-btn {
    background: none; border: 1px solid var(--border); color: var(--text-muted);
    font-size: .82rem; cursor: pointer; padding: 6px 12px; border-radius: 6px;
}
.col-toggle-btn:hover { color: var(--text); background: var(--surface-2); }
.col-toggle-menu {
    display: none; position: absolute; right: 0; top: calc(100% + 4px);
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
    min-width: 200px; z-index: 200; box-shadow: 0 10px 28px rgba(0,0,0,.45); padding: 10px;
}
.col-toggle-menu.open { display: block; }
.col-toggle-menu label {
    display: flex; align-items: center; gap: 8px; padding: 6px 4px;
    font-size: .85rem; color: var(--text); cursor: pointer;
}
.col-toggle-menu label:hover { color: var(--gold); }