/* ============================================================
   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;
}

* { 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;
}

.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);
}

.btn-logout {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: var(--red-dim);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: var(--radius);
    color: var(--red);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
}
.btn-logout:hover { background: rgba(239,68,68,0.2); color: var(--red); }

/* ── MAIN CONTENT ── */
.main-content {
    margin-left: var(--sidebar-w);
    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;
}

/* ── 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);
    vertical-align: middle;
}

.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 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    position: relative;
    overflow: hidden;
}

.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: 40px;
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow);
}

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

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

.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;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        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; }