/* ============================================================
   BSSCS — Bar Stocksheet & Sales Control System
   Stylesheet — Industrial/Utilitarian Dark Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root {
    /* This app is dark-only. Without this, native controls (checkboxes, date
       pickers, select dropdowns before Select2 replaces them) render with the
       browser/OS's own light-mode chrome regardless of our palette below,
       which can make their text/box disappear against our dark background. */
    color-scheme: dark;

    --bg-primary:    #0d0f14;
    --bg-secondary:  #141720;
    --bg-card:       #1a1e2a;
    --bg-hover:      #1f2435;
    --border:        #2a2f40;
    --border-light:  #353a50;

    --text-primary:  #e8eaf0;
    --text-secondary:#8b91a8;
    --text-muted:    #555e78;

    --accent:        #f59e0b;
    --accent-dim:    rgba(245,158,11,0.15);
    --accent-hover:  #fbbf24;

    --green:         #10b981;
    --green-dim:     rgba(16,185,129,0.12);
    --red:           #ef4444;
    --red-dim:       rgba(239,68,68,0.12);
    --blue:          #3b82f6;
    --blue-dim:      rgba(59,130,246,0.12);
    --purple:        #8b5cf6;

    --font-main:    'IBM Plex Sans', sans-serif;
    --font-mono:    'IBM Plex Mono', monospace;

    --radius:        6px;
    --radius-lg:     10px;
    --shadow:        0 4px 20px rgba(0,0,0,0.4);
    --shadow-sm:     0 2px 8px rgba(0,0,0,0.3);

    --sidebar-w:     260px;
    --sidebar-w-collapsed: 68px;
}

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

html, body {
    height: 100%;
    font-family: var(--font-main);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }

/* ── LAYOUT ── */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}

/* ── SIDEBAR ── */
.sidebar {
    width: var(--sidebar-w);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 100;
    transition: transform .3s ease, width .2s ease;
}

/* ── Collapsible sidebar toggle (desktop/tablet only) ── */
.sidebar-collapse-toggle {
    display: none; /* shown for widths >=769px below; mobile uses the overlay drawer instead */
}
@media (min-width: 769px) {
    .sidebar-collapse-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 18px; right: -12px;
        width: 24px; height: 24px;
        background: var(--bg-card);
        border: 1px solid var(--border-light);
        border-radius: 50%;
        color: var(--text-secondary);
        font-size: 12px;
        cursor: pointer;
        z-index: 101;
    }
    .sidebar-collapse-toggle:hover { color: var(--accent); border-color: var(--accent); }

    body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
    body.sidebar-collapsed .main-content { margin-left: var(--sidebar-w-collapsed); }

    body.sidebar-collapsed .brand-text,
    body.sidebar-collapsed .brand-sub,
    body.sidebar-collapsed .user-name,
    body.sidebar-collapsed .user-role,
    body.sidebar-collapsed .user-branch,
    body.sidebar-collapsed .nav-section-label,
    body.sidebar-collapsed .nav-label {
        display: none;
    }
    body.sidebar-collapsed .brand-logo { justify-content: center; }
    body.sidebar-collapsed .sidebar-user { padding: 14px 8px; text-align: center; }
    body.sidebar-collapsed .nav-item { justify-content: center; padding: 10px 0; gap: 0; }
    body.sidebar-collapsed .btn-logout,
    body.sidebar-collapsed .btn-change-pw { justify-content: center; padding: 8px; }
}

.sidebar-brand {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border);
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.brand-icon {
    width: 36px; height: 36px;
    background: var(--accent);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.brand-text {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.brand-sub {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sidebar-user {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--accent-dim);
}

.user-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.user-role {
    font-size: 11px;
    color: var(--accent);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.user-branch {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}

.nav-section-label {
    padding: 8px 20px 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: var(--font-mono);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    transition: all .15s ease;
    border-left: 3px solid transparent;
    position: relative;
}

.nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-left-color: var(--border-light);
}

.nav-item.active {
    background: var(--accent-dim);
    color: var(--accent);
    border-left-color: var(--accent);
}

.nav-item .nav-icon {
    width: 18px;
    text-align: center;
    font-size: 15px;
    flex-shrink: 0;
}

.sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-logout,
.btn-change-pw {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
}

.btn-logout {
    background: var(--red-dim);
    border: 1px solid rgba(239,68,68,0.2);
    color: var(--red);
}
.btn-logout:hover { background: rgba(239,68,68,0.2); color: var(--red); }

.btn-change-pw {
    background: var(--accent-dim);
    border: 1px solid rgba(245,158,11,0.2);
    color: var(--accent);
}
.btn-change-pw:hover { background: rgba(245,158,11,0.2); color: var(--accent); }

/* ── MAIN CONTENT ── */
.main-content {
    margin-left: var(--sidebar-w);
    transition: margin-left .2s ease;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── TOPBAR ── */
.topbar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.page-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.page-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── PAGE BODY ── */
.page-body {
    padding: 24px 28px;
    flex: 1;
    /* Positioned so a Select2 dropdown using this as its dropdownParent (see
       pos.php's item search) is placed in *this* element's coordinate space
       instead of the document's. .page-body is the pane that actually scrolls
       on mobile (see the overflow-y:auto override below) while <body> itself
       stays put -- a dropdown appended to <body> (Select2's default) would
       stay frozen in place as the results list is scrolled, visually
       detaching from the search field instead of scrolling along with it. */
    position: relative;
}

/* ── STAT CARDS ── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    transition: border-color .2s;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}

.stat-card.amber::before  { background: var(--accent); }
.stat-card.green::before  { background: var(--green); }
.stat-card.red::before    { background: var(--red); }
.stat-card.blue::before   { background: var(--blue); }
.stat-card.purple::before { background: var(--purple); }

.stat-card:hover { border-color: var(--border-light); }

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
    line-height: 1;
}

.stat-value.amber  { color: var(--accent); }
.stat-value.green  { color: var(--green); }
.stat-value.red    { color: var(--red); }

.stat-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ── CARDS ── */
/* Bootstrap's own .card sets its own `color` via its CSS variables (light-mode
   default). We only ever set `background` here, so anything inside a card that
   doesn't set its own color falls back to Bootstrap's, which can be unreadable
   against our dark background. Setting color explicitly here closes that gap
   for every card on every page in one place. */
.card {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.card-header {
    padding: 16px 20px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Bootstrap's .card-body explicitly sets `color: var(--bs-card-color)`, and that
   variable is empty by default — do not rely on it falling back to .card's
   color via inheritance (that depends on CSS invalid-custom-property fallback
   behavior, not guaranteed everywhere); state it directly instead. */
.card-body { padding: 20px; color: var(--text-primary); }

/* ── BUTTONS ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .15s;
    font-family: var(--font-main);
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); color: #000; }

.btn-success {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}
.btn-success:hover { background: #059669; color: #fff; }

.btn-danger {
    background: var(--red-dim);
    color: var(--red);
    border-color: rgba(239,68,68,0.3);
}
.btn-danger:hover { background: rgba(239,68,68,0.25); }

.btn-secondary {
    background: var(--bg-hover);
    color: var(--text-secondary);
    border-color: var(--border-light);
}
.btn-secondary:hover { color: var(--text-primary); }

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 11px 22px; font-size: 15px; }

/* ── TABLES ── */
.table-wrapper {
    overflow-x: auto;
}

.bsscs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.bsscs-table thead tr {
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-light);
}

.bsscs-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.bsscs-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary) !important;
    vertical-align: middle;
}

/* DataTables (activity.php, items.php, etc.) re-renders/paginates rows via its
   own JS and ships light-theme CSS of its own — force our color to win over it
   regardless of load order or specificity. */
.dataTables_wrapper, .dataTables_wrapper * { color: var(--text-primary); }
.dataTables_wrapper td { color: var(--text-primary) !important; }

.bsscs-table tr:hover td { background: var(--bg-hover); }

.bsscs-table tfoot td {
    background: var(--bg-secondary);
    border-top: 2px solid var(--border-light);
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--accent);
    padding: 12px 14px;
}

/* ── INLINE EDITABLE INPUT ── */
.inline-input {
    width: 90px;
    padding: 5px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 13px;
    text-align: center;
    transition: all .15s;
}

.inline-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-hover);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

.inline-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.inline-input.saving {
    border-color: var(--blue);
    animation: pulse-blue 0.5s ease;
}

.inline-input.saved {
    border-color: var(--green);
}

@keyframes pulse-blue {
    0%, 100% { box-shadow: 0 0 0 0 var(--blue-dim); }
    50%       { box-shadow: 0 0 0 4px var(--blue-dim); }
}

/* ── BADGES ── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-mono);
}

.badge-amber  { background: var(--accent-dim); color: var(--accent); }
.badge-green  { background: var(--green-dim); color: var(--green); }
.badge-red    { background: var(--red-dim); color: var(--red); }
.badge-blue   { background: var(--blue-dim); color: var(--blue); }
.badge-purple { background: rgba(139,92,246,0.12); color: var(--purple); }

/* ── FORMS ── */
.form-group { margin-bottom: 16px; }

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-mono);
}

.form-control {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 13.5px;
    transition: all .15s;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

.form-control::placeholder { color: var(--text-muted); }

/* ── SELECT2 OVERRIDES ── */
.select2-container--default .select2-selection--single {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius) !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
    line-height: 1 !important;
    padding-left: 12px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-muted) transparent transparent !important;
}

.select2-dropdown {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
}

.select2-search--dropdown .select2-search__field {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius) !important;
    padding: 6px 10px !important;
}

.select2-results__option {
    color: var(--text-secondary) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
}

.select2-results__option--highlighted {
    background: var(--accent-dim) !important;
    color: var(--accent) !important;
}

.select2-results__option[aria-selected="true"] {
    background: var(--accent-dim) !important;
    color: var(--accent) !important;
}

/* ── LOGIN PAGE ── */
.login-page {
    /* touch.css locks html/body to overflow:hidden site-wide, and this page
       has no .page-body pane (that pattern is for logged-in pages with a
       sidebar) -- so this needs to be its own scrollable shell, otherwise
       the on-screen keyboard opening on a short/15" touchscreen viewport can
       cover the password field with nothing able to scroll it into view
       (see virtual-keyboard.js's revealTarget()). align-items:center still
       centers the card when it fits; scrolling only kicks in when it and
       the keyboard together don't. */
    height: 100vh;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    position: relative;
}

.login-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 30%, rgba(245,158,11,0.05) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 80% 70%, rgba(59,130,246,0.04) 0%, transparent 70%);
}

.login-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.3;
}

.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 28px;
    width: 100%;
    max-width: 380px;
    margin: 16px; /* breathing room against the viewport edge when the page scrolls */
    flex-shrink: 0; /* don't let the flex-centered card get squashed when content+keyboard overflow */
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow);
}

.login-logo {
    text-align: center;
    margin-bottom: 20px;
}

.login-logo .icon {
    width: 44px; height: 44px;
    background: var(--accent);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin: 0 auto 10px;
}

.login-logo h1 {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.login-logo p {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 4px;
}

/* ── ALERT BOX ── */
.alert {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-danger  { background: var(--red-dim); border: 1px solid rgba(239,68,68,0.3); color: var(--red); }
.alert-success { background: var(--green-dim); border: 1px solid rgba(16,185,129,0.3); color: var(--green); }
.alert-warning { background: var(--accent-dim); border: 1px solid rgba(245,158,11,0.3); color: var(--accent); }
.alert-info    { background: var(--blue-dim); border: 1px solid rgba(59,130,246,0.3); color: var(--blue); }

/* ── HAMBURGER ── */
.menu-toggle {
    display: none; /* hidden on desktop; shown via mobile media query */
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

/* ── MODAL ── */
.modal-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-primary) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border) !important;
    padding: 16px 20px !important;
}

.modal-header .modal-title { font-weight: 600; font-size: 15px; }

.modal-footer {
    border-top: 1px solid var(--border) !important;
    padding: 14px 20px !important;
}

.btn-close { filter: invert(1) opacity(0.5); }

/* ── DataTables Override ── */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius) !important;
    color: var(--text-primary) !important;
    padding: 5px 10px !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--text-muted) !important;
    font-size: 12px !important;
    margin-top: 12px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-secondary) !important;
    border-radius: var(--radius) !important;
    padding: 4px 10px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--accent-dim) !important;
    border: 1px solid var(--accent) !important;
    color: var(--accent) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* ── VARIANCE WARNING ── */
.variance-warn {
    background: var(--red-dim) !important;
}

.variance-warn td {
    color: var(--red) !important;
}

/* ── COMPUTED ROW ── */
.computed-row td { opacity: 0.6; }

/* ── LOADING SPINNER ── */
.spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid var(--border-light);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

/* ── MONO NUMBERS ── */
.mono { font-family: var(--font-mono); }

/* ═══════════════════════════════════════════
   MOBILE — full no-scroll experience
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Lock viewport, no bounce scroll ── */
    html, body {
        overflow: hidden;
        height: 100%;
        position: fixed;
        width: 100%;
    }

    .app-wrapper {
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    /* ── Sidebar: full-screen overlay ── */
    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 100vw;
        transform: translateX(-100%);
        z-index: 200;
        transition: transform .25s cubic-bezier(.4,0,.2,1);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Close sidebar when overlay tapped */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 199;
    }

    .sidebar-overlay.active { display: block; }

    /* ── Main content: full height flex column ── */
    .main-content {
        margin-left: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* ── Topbar: fixed height, no wrap ── */
    .topbar {
        flex-shrink: 0;
        padding: 10px 14px;
        min-height: 54px;
        align-items: center;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px; height: 36px;
        background: var(--bg-hover);
        border: 1px solid var(--border-light);
        border-radius: var(--radius);
        font-size: 18px;
        flex-shrink: 0;
    }

    .page-title { font-size: 14px; }
    .page-subtitle { display: none; }

    .topbar-right .badge {
        display: none;
    }
    /* Show only the first badge (working date / role) */
    .topbar-right .badge:first-child {
        display: inline-flex;
        font-size: 10px;
        padding: 3px 7px;
    }

    /* ── Page body: scrollable area between topbar and bottom nav ── */
    .page-body {
        flex: 1;
        min-height: 0;   /* flex items default to a content-based min height, which stops
                             this from ever shrinking enough to become its own scroll
                             container — without this, touch-drag does nothing. */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain; /* keep the drag from triggering the browser's own pull-to-refresh/back-swipe */
        padding: 12px;
        padding-bottom: 70px; /* room for bottom nav */
    }

    /* ── Stats grid: 2-col, compact ── */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 14px;
    }

    .stat-card { padding: 12px 14px; }

    .stat-value { font-size: 20px; }

    /* ── Cards ── */
    .card { border-radius: var(--radius); }
    .card-header {
        padding: 12px 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .card-body { padding: 12px; }

    /* ── STOCKSHEET TABLE → CARD LIST on mobile ── */
    .table-wrapper {
        overflow-x: hidden; /* kill horizontal scroll */
    }

    /* Desktop table columns hidden on mobile */
    .bsscs-table { display: block; }

    .bsscs-table thead { display: none; } /* hide headers */

    .bsscs-table tbody { display: block; }

    .bsscs-table tfoot { display: block; }

    .bsscs-table tr {
        display: flex;
        flex-direction: column;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 10px;
        padding: 12px 14px;
        gap: 0;
    }

    .bsscs-table tr:hover td { background: transparent; }

    .bsscs-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0;
        border-bottom: 1px solid var(--border);
        font-size: 13px;
        min-height: 34px;
    }

    .bsscs-table td:last-child { border-bottom: none; }

    /* Label from data-label attribute */
    .bsscs-table td::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--text-muted);
        font-family: var(--font-mono);
        flex-shrink: 0;
        margin-right: 10px;
    }

    /* Hide serial number cell on mobile */
    .bsscs-table td.mobile-hide { display: none; }

    /* Tfoot row */
    .bsscs-table tfoot tr {
        background: var(--accent-dim);
        border: 1px solid rgba(245,158,11,0.3);
    }

    .bsscs-table tfoot td {
        border-bottom: 1px solid rgba(245,158,11,0.15);
        padding: 6px 0;
    }

    /* ── Inline inputs: touch-friendly ── */
    .inline-input {
        width: 80px;
        height: 38px;
        font-size: 16px; /* prevents iOS zoom */
        padding: 6px 10px;
        text-align: right;
        border-radius: var(--radius);
    }

    /* ── Form controls: no zoom on focus ── */
    .form-control,
    select.form-control,
    input.form-control {
        font-size: 16px !important; /* prevents iOS auto-zoom */
        height: 42px;
    }

    /* ── Buttons ── */
    .btn { font-size: 13px; padding: 9px 14px; }
    .btn-lg { width: 100%; justify-content: center; }

    /* ── Filter row: stack vertically ── */
    .d-flex.gap-2.flex-wrap {
        flex-direction: column;
        gap: 10px !important;
    }

    .d-flex.gap-2.flex-wrap > * {
        width: 100% !important;
        min-width: unset !important;
    }

    .d-flex.gap-2.flex-wrap [style*="padding-top"] {
        padding-top: 0 !important;
    }

    /* ── Bottom nav bar (mobile only) ── */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 58px;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-light);
        z-index: 150;
    }

    .mobile-bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--text-muted);
        text-decoration: none;
        font-size: 10px;
        font-weight: 600;
        font-family: var(--font-mono);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: color .15s;
        padding: 6px 4px;
        border-top: 2px solid transparent;
    }

    .mobile-bottom-nav a.active {
        color: var(--accent);
        border-top-color: var(--accent);
    }

    .mobile-bottom-nav a .nav-icon {
        font-size: 20px;
        line-height: 1;
    }

    /* ── Modal: full screen on mobile ── */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100vh;
        display: flex;
        align-items: flex-end;
    }

    .modal-content {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* ── DataTables: hide pagination controls to save space ── */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        display: none !important;
    }

    /* ── Compute/Action buttons: full width ── */
    #computeBtn {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }

    /* ── Select2 full width ── */
    .select2-container { width: 100% !important; }
}

/* ── Bottom nav: hidden on desktop ── */
.mobile-bottom-nav { display: none; }


/* ── UTILITIES ── */
.text-amber   { color: var(--accent); }
.text-green   { color: var(--green); }
.text-red     { color: var(--red); }
.text-blue    { color: var(--blue); }
.text-muted   { color: var(--text-muted); }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.fw-bold      { font-weight: 700; }
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 20px; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 12px; }
.mb-3 { margin-bottom: 20px; }
.gap-2 { gap: 8px; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }

.swal2-popup {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-lg) !important;
}

.swal2-title { color: var(--text-primary) !important; }
.swal2-html-container { color: var(--text-secondary) !important; }
.swal2-confirm { background: var(--accent) !important; color: #000 !important; }
.swal2-cancel { background: var(--bg-hover) !important; color: var(--text-secondary) !important; }