/* =============================================================
   Chamanknit Barcode — UI v2 (May 2026 refresh)
   CSS-only theme: no HTML changes required.
   ============================================================= */

:root {
    /* Brand palette */
    --brand-50:   #eef4ff;
    --brand-100:  #dce8ff;
    --brand-200:  #bcd1ff;
    --brand-300:  #8eb1ff;
    --brand-400:  #5e8cff;
    --brand-500:  #3b6dfb;   /* primary */
    --brand-600:  #2553e0;
    --brand-700:  #1d40b3;
    --brand-800:  #1a368a;
    --brand-900:  #172e6e;

    /* Semantic colors */
    --ink-900: #0b1220;
    --ink-700: #1f2937;
    --ink-500: #475569;
    --ink-400: #64748b;
    --ink-300: #94a3b8;
    --ink-200: #cbd5e1;
    --ink-100: #e2e8f0;
    --ink-50:  #f1f5f9;
    --surface: #ffffff;
    --surface-soft: #f8fbff;

    --success-50:  #ecfdf5;
    --success-100: #d1fae5;
    --success-600: #059669;
    --success-700: #047857;

    --danger-50:   #fef2f2;
    --danger-100:  #fee2e2;
    --danger-500:  #ef4444;
    --danger-600:  #dc2626;

    --warning-50:  #fffbeb;
    --warning-100: #fef3c7;
    --warning-700: #b45309;

    /* Effects */
    --brand-gradient: linear-gradient(135deg, #2553e0 0%, #5e8cff 100%);
    --brand-gradient-soft: linear-gradient(135deg, #eef4ff 0%, #ffffff 100%);
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .04);
    --shadow-brand: 0 6px 18px rgba(37, 83, 224, .22);
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* Legacy aliases (kept so existing rules continue to resolve) */
    --brand-blue: var(--brand-600);
    --brand-blue-dark: var(--brand-800);
    --brand-blue-light: var(--brand-50);
    --brand-accent: var(--brand-500);
}

/* ---------- Base ---------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { height: 100%; }
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-900);
    background:
        radial-gradient(1200px 600px at 8% -10%, #e0eaff 0%, transparent 60%),
        radial-gradient(1000px 500px at 92% -5%, #f0e8ff 0%, transparent 55%),
        linear-gradient(180deg, #f5f8ff 0%, #ffffff 320px) !important;
}
.container { max-width: 1320px; padding-bottom: 60px; }

::selection { background: var(--brand-100); color: var(--brand-900); }

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 { color: var(--ink-900); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.05rem; }
h3, h4, h5 { color: var(--brand-800); }
.text-muted { color: var(--ink-400) !important; }

/* ---------- Navbar ---------- */
.navbar.navbar-dark {
    background: var(--brand-gradient) !important;
    box-shadow: 0 4px 16px rgba(29, 64, 179, .18);
    padding-top: .55rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.navbar.navbar-dark .container-fluid { padding-left: 1.25rem; padding-right: 1.25rem; }
.navbar-brand {
    font-weight: 700;
    letter-spacing: .2px;
    font-size: 1.18rem;
    color: #fff !important;
    padding-top: 2px; padding-bottom: 2px;
}
.brand-logo {
    height: 30px; width: auto; max-width: 160px; object-fit: contain;
    background: #fff;
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.brand-tag {
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: .5px;
    padding: 3px 12px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.navbar.navbar-dark .nav-link {
    position: relative;
    color: rgba(255, 255, 255, .9) !important;
    font-size: .95rem;
    font-weight: 500;
    padding: .55rem .9rem;
    margin: 0 1px;
    border-radius: 8px;
    transition: color .18s ease, background .18s ease;
}
.navbar.navbar-dark .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .12);
}
.navbar.navbar-dark .nav-link::after {
    content: '';
    position: absolute;
    left: 14px; right: 14px; bottom: 4px;
    height: 2px; background: #fff;
    transform: scaleX(0); transform-origin: left;
    transition: transform .25s ease;
    border-radius: 2px;
}
.navbar.navbar-dark .nav-link:hover::after { transform: scaleX(.6); }
.navbar.navbar-dark .nav-link .badge {
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px rgba(37, 83, 224, .6);
}
.navbar .btn-outline-light {
    border-color: rgba(255, 255, 255, .55);
    font-weight: 500;
    border-radius: 8px;
    padding: .35rem .85rem;
}
.navbar .btn-outline-light:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
}

/* ---------- Cards ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--brand-200);
}
.card .card-body { padding: 1.25rem 1.4rem; }
.card .card-title {
    color: var(--brand-800);
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    display: flex; align-items: center; gap: .5rem;
}
.card-header {
    background: var(--surface-soft);
    border-bottom: 1px solid var(--ink-100);
    font-weight: 600;
    color: var(--brand-800);
}

/* ---------- Buttons ---------- */
.btn {
    font-size: .92rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    padding: .5rem 1rem;
    transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-sm { font-size: .82rem; padding: .35rem .75rem; }
.btn-primary {
    background: var(--brand-gradient);
    border: none;
    color: #fff;
    box-shadow: 0 3px 8px rgba(37, 83, 224, .25);
}
.btn-primary:hover, .btn-primary:focus {
    transform: translateY(-1px);
    background: var(--brand-gradient);
    box-shadow: var(--shadow-brand);
    color: #fff;
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled, .btn-primary.disabled {
    background: linear-gradient(135deg, #93a8d8 0%, #aab7e3 100%);
    opacity: .85;
    box-shadow: none;
}

.btn-outline-primary {
    color: var(--brand-600);
    border-color: var(--brand-300);
    background: #fff;
}
.btn-outline-primary:hover {
    background: var(--brand-50);
    color: var(--brand-700);
    border-color: var(--brand-500);
}

.btn-outline-secondary {
    color: var(--ink-700);
    border-color: var(--ink-200);
    background: #fff;
}
.btn-outline-secondary:hover {
    background: var(--ink-50);
    color: var(--ink-900);
    border-color: var(--ink-300);
}

.btn-outline-danger {
    color: var(--danger-600);
    border-color: #fecaca;
    background: #fff;
}
.btn-outline-danger:hover {
    background: var(--danger-50);
    color: var(--danger-600);
    border-color: var(--danger-500);
}

.btn-secondary {
    background: var(--ink-100);
    border: none;
    color: var(--ink-700);
}
.btn-secondary:hover { background: var(--ink-200); color: var(--ink-900); }

/* ---------- Forms ---------- */
.form-label { font-weight: 600; color: var(--ink-700); font-size: .88rem; margin-bottom: .35rem; }
.form-label.small { font-size: .78rem; }
.form-control, .form-select {
    border: 1px solid var(--ink-200);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    font-size: .92rem;
    color: var(--ink-900);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-control-sm, .form-select-sm { font-size: .85rem; padding: .35rem .65rem; }
.form-control::placeholder { color: var(--ink-300); }
.form-control:hover, .form-select:hover { border-color: var(--ink-300); }
.form-control:focus, .form-select:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 3px rgba(94, 140, 255, .18);
    background: #fff;
}
.form-control:disabled, .form-control[readonly] { background: var(--ink-50); color: var(--ink-400); }

.form-check-input {
    border-color: var(--ink-300);
    width: 1.05em; height: 1.05em;
}
.form-check-input:checked {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(94, 140, 255, .18);
}

/* ---------- Tables ---------- */
.table {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    font-size: .92rem;
    color: var(--ink-900);
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--ink-100);
    --bs-table-bg: transparent;
}
.table > thead {
    background: var(--surface-soft);
}
.table > thead th {
    color: var(--ink-700);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--ink-100);
    padding: .7rem .8rem;
    background: var(--surface-soft);
}
.table > tbody > tr { transition: background-color .12s ease; }
.table > tbody > tr > td { padding: .65rem .8rem; border-color: var(--ink-100); vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fafcff; }
.table-hover > tbody > tr:hover {
    background: var(--brand-50) !important;
}
.table-sm > thead th { padding: .55rem .7rem; }
.table-sm > tbody > tr > td { padding: .5rem .7rem; }
.table code {
    font-size: 12px;
    background: var(--ink-50);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--brand-700);
}

/* Row highlight — sky blue instead of yellow */
.table > tbody > tr.table-warning,
.table > tbody > tr.table-warning > td,
.table > tbody > tr.table-warning > th {
    --bs-table-bg: #eaf3ff;
    --bs-table-striped-bg: #e2ecfb;
    --bs-table-hover-bg: #d6e6fb;
    background-color: #eaf3ff !important;
    color: inherit;
    border-color: #cfe0fb;
}

/* ---------- Alerts ---------- */
.alert {
    border-radius: var(--radius);
    border-width: 1px;
    padding: .8rem 1rem;
    font-size: .92rem;
    box-shadow: var(--shadow-xs);
}
.alert-info {
    background: var(--brand-50);
    border-color: var(--brand-100);
    color: var(--brand-800);
}
.alert-success {
    background: var(--success-50);
    border-color: var(--success-100);
    color: var(--success-700);
}
.alert-danger {
    background: var(--danger-50);
    border-color: var(--danger-100);
    color: var(--danger-600);
}
.alert-warning {
    background: var(--warning-50);
    border-color: var(--warning-100);
    color: var(--warning-700);
}

/* ---------- Badges ---------- */
.badge {
    font-weight: 600;
    padding: .35em .65em;
    border-radius: 6px;
    letter-spacing: .02em;
}
.badge.bg-primary { background: var(--brand-600) !important; }
.badge.bg-secondary { background: var(--ink-400) !important; }
.badge.bg-danger {
    background: var(--danger-500) !important;
    box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(239, 68, 68, .35);
}
.badge.bg-warning, .badge.bg-warning.text-dark {
    background: var(--brand-100) !important;
    color: var(--brand-800) !important;
    border: 1px solid var(--brand-200);
}

/* ---------- Modal ---------- */
.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.modal-header {
    border-bottom: 1px solid var(--ink-100);
    padding: 1rem 1.3rem;
    background: var(--surface-soft);
}
.modal-title { font-weight: 700; color: var(--brand-800); }
.modal-body { padding: 1.2rem 1.3rem; }
.modal-footer { border-top: 1px solid var(--ink-100); padding: .85rem 1.3rem; gap: .5rem; }

/* ---------- Tabs ---------- */
.nav-tabs {
    border-bottom: 2px solid var(--ink-100);
    gap: 4px;
}
.nav-tabs .nav-link {
    border: none;
    color: var(--ink-500);
    font-weight: 600;
    padding: .65rem 1.1rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-tabs .nav-link:hover { color: var(--brand-700); background: var(--brand-50); }
.nav-tabs .nav-link.active {
    color: var(--brand-700);
    background: transparent;
    border-bottom-color: var(--brand-600);
}
.tab-content.border {
    border-color: var(--ink-100) !important;
    border-top: none !important;
}

/* ---------- Login ---------- */
.login-hero {
    background: var(--brand-gradient);
    color: #fff;
    padding: 38px 24px 30px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.login-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(420px 220px at 20% -20%, rgba(255, 255, 255, .25), transparent 60%);
    pointer-events: none;
}
.login-hero h4 { color: #fff; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.login-hero p { margin: 6px 0 0; opacity: .92; font-size: 13.5px; }
.login-logo {
    display: block;
    height: 54px; width: auto; max-width: 85%; object-fit: contain;
    margin: 0 auto 12px;
    background: #fff;
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    position: relative;
    z-index: 1;
}

/* ---------- Upload promo / banner ---------- */
.promo-upload {
    background: var(--brand-gradient);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    display: flex; align-items: center; gap: 18px;
    box-shadow: var(--shadow-brand);
    position: relative;
    overflow: hidden;
}
.promo-upload::after {
    content: '';
    position: absolute; right: -40px; top: -40px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 65%);
    pointer-events: none;
}
.promo-upload .promo-icon {
    font-size: 44px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .12));
}
.promo-upload h5 { color: #fff; margin: 0 0 4px 0; font-weight: 700; }
.promo-upload p { margin: 0; opacity: .94; font-size: 13.5px; }
.promo-upload .btn {
    background: #fff; color: var(--brand-700); border: none; font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
    position: relative; z-index: 1;
}
.promo-upload .btn:hover { background: var(--brand-50); transform: translateY(-1px); }

/* ---------- KPI stat cards (Reports) ---------- */
.kpi-card {
    position: relative;
    overflow: hidden;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    color: #fff;
    min-height: 140px;
    box-shadow: var(--shadow-md);
    transition: transform .18s ease, box-shadow .18s ease;
}
a.kpi-card, a.kpi-card:hover, a.kpi-card:focus { color: #fff !important; cursor: pointer; }
.kpi-card .kpi-more {
    margin-left: auto;
    font-weight: 700;
    opacity: .75;
    transition: transform .18s ease, opacity .18s ease;
}
a.kpi-card:hover .kpi-more { transform: translateX(4px); opacity: 1; }
.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.kpi-card .kpi-body {
    position: relative; z-index: 2;
    padding: 20px 22px;
    height: 100%;
    display: flex; flex-direction: column; justify-content: space-between;
}
.kpi-card .kpi-label {
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: 11px;
    font-weight: 700;
    opacity: .95;
    display: flex; align-items: center; gap: 6px;
}
.kpi-card .kpi-value {
    font-size: 42px; font-weight: 800; line-height: 1;
    margin: 8px 0 4px 0;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
.kpi-card .kpi-sub {
    font-size: 12.5px; opacity: .95;
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.kpi-card .kpi-sub .dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: rgba(255, 255, 255, .65);
}
.kpi-card .kpi-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11.5px; font-weight: 600;
    backdrop-filter: blur(4px);
}
.kpi-card .kpi-icon {
    position: absolute;
    right: -10px; bottom: -18px;
    font-size: 112px;
    line-height: 1;
    opacity: .14;
    z-index: 1;
    transform: rotate(-8deg);
    pointer-events: none;
}

/* Per-card gradients */
.kpi-vendors { background: linear-gradient(135deg, #2553e0 0%, #5e8cff 100%); }
.kpi-bills   { background: linear-gradient(135deg, #047857 0%, #10b981 100%); }
.kpi-csv     { background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%); }
.kpi-gate    { background: linear-gradient(135deg, #6d28d9 0%, #a855f7 100%); }

/* ---------- Weekly trend panel ---------- */
.trend-card {
    border: 1px solid var(--ink-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.trend-card .progress { background: var(--ink-50); border-radius: 8px; height: 8px; }
.trend-card .progress-bar {
    background: var(--brand-gradient);
    border-radius: 8px;
}

/* ---------- Toasts ---------- */
.toast {
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: none;
    overflow: hidden;
}
.toast.bg-primary {
    background: var(--brand-gradient) !important;
    backdrop-filter: blur(8px);
}
.toast .toast-body { padding: .85rem 1rem; font-size: .92rem; }

/* ---------- Sticky helpers ---------- */
.sticky-actions {
    position: sticky; top: 0;
    background: var(--surface-soft);
    z-index: 5;
    padding: .5rem 0;
}

/* ---------- Page entrance animation ---------- */
.container > *:not(script):not(style) {
    animation: pageFadeIn .35s ease both;
}
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Spinners ---------- */
.spinner-border { vertical-align: -0.125em; }

/* ---------- Code blocks in help text ---------- */
code:not(.no-style) {
    background: var(--brand-50);
    color: var(--brand-700);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .88em;
    border: 1px solid var(--brand-100);
}

/* ---------- Print profile dropdown emphasis ---------- */
#printProfile { font-weight: 500; }

/* ---------- Empty / no-data state ---------- */
.text-muted.no-data,
p.text-muted:only-child {
    padding: 24px 16px;
    text-align: center;
    font-style: italic;
}

/* ---------- Pagination (if present anywhere) ---------- */
.pagination .page-link {
    color: var(--brand-700);
    border-color: var(--ink-100);
    margin: 0 2px;
    border-radius: 6px;
}
.pagination .page-link:hover {
    background: var(--brand-50);
    color: var(--brand-800);
}
.pagination .page-item.active .page-link {
    background: var(--brand-600);
    border-color: var(--brand-600);
}

/* ---------- Status-pill helpers ---------- */
.status-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .78rem; font-weight: 600;
}
.status-pill.success { background: var(--success-50); color: var(--success-700); border: 1px solid var(--success-100); }
.status-pill.pending { background: var(--warning-50); color: var(--warning-700); border: 1px solid var(--warning-100); }
.status-pill.danger  { background: var(--danger-50);  color: var(--danger-600);  border: 1px solid var(--danger-100); }

/* ---------- Improved checkbox/radio in tables ---------- */
.table input[type="checkbox"] {
    width: 1em; height: 1em;
    accent-color: var(--brand-600);
    cursor: pointer;
}

/* ---------- File input polish ---------- */
.form-control[type="file"]::file-selector-button {
    border: none;
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: 600;
    padding: .4rem .8rem;
    border-radius: 6px;
    margin-right: .8rem;
    transition: background .15s ease;
}
.form-control[type="file"]::file-selector-button:hover {
    background: var(--brand-100);
}

/* ============================================================
   MOBILE / RESPONSIVE OVERHAUL
   - Targets: phones (≤576px), large phones / small tablets (≤768px)
   - Goal: every page (admin + vendor) usable comfortably on a phone
   - Strategy: shrink chrome, simplify tables, full-width buttons,
     bigger tap targets, modals near-fullscreen on phones.
   ============================================================ */

/* --- 768px breakpoint (tablets + large phones) --- */
@media (max-width: 768px) {
    body { font-size: 14.5px; }
    .container { padding-left: .85rem !important; padding-right: .85rem !important; padding-bottom: 80px; }

    /* Headings tighter so they fit screen */
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }

    /* Cards take less padding */
    .card { border-radius: var(--radius); }
    .card .card-body { padding: 1rem; }
    .card .card-title { font-size: 1rem; margin-bottom: .75rem; }

    /* Buttons: slightly bigger tap area but smaller text */
    .btn { font-size: .9rem; padding: .5rem .85rem; min-height: 38px; }
    .btn-sm { font-size: .8rem; padding: .4rem .7rem; min-height: 32px; }

    /* KPI cards — single column or two-per-row friendly */
    .kpi-card .kpi-value { font-size: 32px; }
    .kpi-card .kpi-body { padding: 14px 16px; }
    .kpi-card { min-height: 110px; }

    /* Promo banner stacks */
    .promo-upload { flex-wrap: wrap; padding: 16px 18px; gap: 12px; }
    .promo-upload .promo-icon { font-size: 32px; }
    .promo-upload h5 { font-size: 1rem; }
    .promo-upload .btn { width: 100%; }
}

/* --- Navbar: simplify on phones --- */
@media (max-width: 992px) {
    .navbar.navbar-dark { padding-top: .4rem; padding-bottom: .4rem; }
    .navbar.navbar-dark .container-fluid { padding-left: .75rem; padding-right: .75rem; }
    .navbar-brand { font-size: 1rem; }
    .brand-logo { height: 26px; }
    .brand-tag { font-size: .75rem; padding: 2px 8px; }
    .navbar.navbar-dark .nav-link {
        padding: .45rem .55rem;
        font-size: .82rem;
        margin: 0;
    }
    .navbar.navbar-dark .nav-link::after { display: none; }
    /* Username & role badge become tiny */
    nav .text-light.small,
    nav span.text-light { font-size: .75rem; }
    nav .badge.bg-light { font-size: .65rem; padding: .2em .5em; }
    /* Logout button compact */
    nav form .btn { padding: .25rem .6rem; font-size: .75rem; }
}

/* --- 576px breakpoint (phones) — heavier transformations --- */
@media (max-width: 576px) {
    body { font-size: 14px; }
    .container { padding-left: .65rem !important; padding-right: .65rem !important; }

    /* Navbar nav-links wrap to multiple lines */
    .navbar.navbar-dark .container-fluid { flex-wrap: wrap; }
    .navbar.navbar-dark .navbar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2px;
        width: 100%;
        order: 3;
        padding-top: .35rem;
        border-top: 1px solid rgba(255, 255, 255, .15);
        margin-top: .35rem;
    }
    .navbar.navbar-dark .nav-link {
        padding: .35rem .5rem !important;
        font-size: .78rem !important;
        background: rgba(255, 255, 255, .08);
        border-radius: 6px;
    }
    .navbar.navbar-dark .nav-link:hover { background: rgba(255, 255, 255, .18); }
    .navbar .navbar-brand { font-size: .95rem; }
    .brand-logo { height: 24px; padding: 2px 6px; }
    .brand-tag { display: none; }

    /* Forms: stack all columns */
    .row.g-2 > [class*="col-"],
    .row.g-3 > [class*="col-"] {
        margin-bottom: .5rem;
    }
    .form-label { font-size: .85rem; margin-bottom: .2rem; }
    .form-control, .form-select {
        font-size: 16px;  /* prevents iOS zoom on focus */
        padding: .55rem .75rem;
        min-height: 42px;
    }
    .form-control-sm, .form-select-sm {
        font-size: .9rem;
        padding: .4rem .65rem;
        min-height: 36px;
    }

    /* Tables: switch to compact 'card view' on phones */
    .table-responsive {
        margin-left: -.65rem;
        margin-right: -.65rem;
        border-radius: 0;
    }
    .table {
        font-size: .82rem;
        border-radius: 0;
    }
    .table > thead th {
        font-size: .7rem;
        padding: .55rem .5rem;
    }
    .table > tbody > tr > td {
        padding: .55rem .5rem;
    }
    .table .btn-sm {
        padding: .3rem .55rem;
        font-size: .72rem;
        min-height: 28px;
    }

    /* Inline forms inside table cells stack vertically */
    .table form.d-inline-flex,
    .table form.d-inline {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
        margin: 0 !important;
    }
    .table form input { width: 100% !important; }

    /* Bill uploads two-row layout: actions wrap nicely */
    .vu-table .vu-actions .btn {
        font-size: .72rem;
        padding: .3rem .55rem;
        min-height: 30px;
    }
    .vu-table .vu-actions > td { padding-bottom: 10px; }

    /* Modal goes near full-screen on phones */
    .modal-dialog {
        margin: .5rem;
        max-width: calc(100vw - 1rem);
    }
    .modal-content { border-radius: var(--radius); }
    .modal-header, .modal-body, .modal-footer { padding-left: 1rem; padding-right: 1rem; }
    .modal-footer .btn { flex: 1; }

    /* Tabs: smaller padding */
    .nav-tabs .nav-link { padding: .5rem .8rem; font-size: .85rem; }
    .tab-content.border { padding: .85rem !important; }

    /* Alerts smaller */
    .alert { padding: .65rem .8rem; font-size: .87rem; }

    /* Upload promo: vertical stack */
    .promo-upload { flex-direction: column; text-align: center; }
    .promo-upload .promo-icon { font-size: 36px; }

    /* KPI cards two per row, more compact */
    .kpi-card .kpi-value { font-size: 26px; }
    .kpi-card .kpi-label { font-size: 10px; }
    .kpi-card .kpi-sub { font-size: 11px; }
    .kpi-card .kpi-icon { font-size: 88px; }
    .kpi-card { min-height: 100px; }

    /* Buttons in action rows full width on tap targets */
    .d-flex.gap-2 > .btn,
    .d-flex.flex-wrap.gap-2 > .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Sticky footer-like action bar (if used) */
    .container > form .d-flex.justify-content-between {
        flex-direction: column;
        gap: 8px;
        align-items: stretch !important;
    }
    .container > form .d-flex.justify-content-between .btn { width: 100%; }

    /* File upload overlay full-screen */
    .upload-overlay-box { padding: 1.25rem 1.25rem; min-width: 220px; }
    .upload-overlay-box .fw-semibold { font-size: .95rem; }
    .upload-overlay-box .small { font-size: .8rem; }

    /* Toast container respects safe area */
    .toast-container { padding: .65rem !important; }
    .toast { max-width: calc(100vw - 1.3rem); font-size: .85rem; }

    /* Login: smaller hero */
    .login-hero { padding: 28px 16px 22px; }
    .login-hero h4 { font-size: 1.15rem; }
    .login-hero p { font-size: 12.5px; }
    .login-logo { height: 44px; padding: 5px 12px; }

    /* Filter forms stack */
    .card-body form.row { row-gap: .5rem; }

    /* Headings */
    h3 { font-size: 1.15rem; margin-bottom: 1rem !important; }

    /* Pagination tighter */
    .pagination .page-link { padding: .35rem .55rem; font-size: .85rem; }
}

/* --- Very small phones (≤380px) --- */
@media (max-width: 380px) {
    .navbar.navbar-dark .nav-link { font-size: .72rem !important; padding: .3rem .4rem !important; }
    .navbar-brand { font-size: .9rem; }
    h3 { font-size: 1.05rem; }
    .kpi-card .kpi-value { font-size: 22px; }
    .btn { padding: .45rem .65rem; font-size: .85rem; }
    .table { font-size: .76rem; }
}

/* --- Landscape phones: nav stays horizontal, content compact --- */
@media (max-width: 900px) and (orientation: landscape) {
    .login-hero { padding: 20px 16px 16px; }
    .container { padding-bottom: 40px; }
}

/* --- Stacked-card table mode (opt-in via .table-cards on phones) --- */
@media (max-width: 576px) {
    .table-cards {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        margin: 0 !important;
    }
    .table-cards thead { display: none; }
    .table-cards, .table-cards tbody, .table-cards tr, .table-cards td {
        display: block;
        width: 100%;
    }
    .table-cards tbody tr {
        background: #fff;
        border: 1px solid var(--ink-100);
        border-radius: var(--radius);
        margin-bottom: .75rem;
        padding: .7rem .85rem;
        box-shadow: var(--shadow-xs);
    }
    .table-cards tbody tr:last-child { margin-bottom: 0; }
    .table-cards td {
        padding: .3rem 0;
        border: none !important;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        font-size: .85rem;
    }
    .table-cards td:empty { display: none; }
    .table-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--ink-500);
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        flex-shrink: 0;
        padding-top: 2px;
        min-width: 70px;
    }
    /* Filename row gets accent */
    .table-cards td[data-label="File"],
    .table-cards td[data-label="Filename"] {
        font-weight: 600;
        color: var(--brand-800);
    }
    /* When inside a .card wrapper, let the inner cards breathe — don't
       create a double-frame effect on phones. */
    .card:has(.table-cards) {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    .card > .table-cards { margin: 0 !important; }
    .card > .card-body:has(.table-cards) { padding: 0 !important; }
}

/* --- Vendor Uploads table → automatic card mode on phones --- */
/* Each upload becomes one card containing data fields + action buttons.
   Uses the data-label attribute on each <td> to show the field name. */
@media (max-width: 576px) {
    /* Reset wrapper that limits horizontal scroll */
    .vu-table { display: block; border: none; box-shadow: none; background: transparent; }
    .vu-table thead { display: none; }
    .vu-table tbody, .vu-table tr, .vu-table td { display: block; width: 100%; }

    /* DATA row = top half of a card */
    .vu-table .vu-data {
        background: #fff;
        border: 1px solid var(--ink-100);
        border-radius: var(--radius) var(--radius) 0 0;
        margin: 0;
        padding: .65rem .9rem .25rem;
        box-shadow: var(--shadow-xs);
        position: relative;
    }
    /* Unprocessed cards get a left orange stripe */
    .vu-table .vu-data.table-warning {
        background: #fff !important;
        border-left: 4px solid var(--warning-700);
    }
    .vu-table .vu-data > td {
        padding: .25rem 0;
        border: none !important;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        font-size: .85rem;
    }
    .vu-table .vu-data > td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--ink-500);
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        flex-shrink: 0;
        padding-top: 3px;
        min-width: 72px;
    }
    /* Hide the bulk-select checkbox label noise — keep checkbox on top-right */
    .vu-table .vu-data > td:first-child {
        position: absolute;
        top: .55rem; right: .85rem;
        width: auto !important;
        padding: 0;
        background: transparent;
    }
    .vu-table .vu-data > td:first-child::before { display: none; }

    /* Filename gets a little more visual weight */
    .vu-table .vu-data > td[data-label="File"] {
        flex-wrap: wrap;
        font-weight: 600;
        color: var(--brand-800);
    }

    /* Hide empty notes / mobile cells to reduce clutter */
    .vu-table .vu-data > td[data-label="Notes"]:not(:has(*)),
    .vu-table .vu-data > td[data-label="Mobile"]:empty { display: none; }
    /* Fallback for browsers without :has() — keep them, just lighter */

    /* ACTIONS row = bottom half of the card */
    .vu-table .vu-actions {
        background: var(--surface-soft);
        border: 1px solid var(--ink-100);
        border-top: none;
        border-radius: 0 0 var(--radius) var(--radius);
        margin: 0 0 .85rem 0;
        padding: .55rem .9rem .75rem;
    }
    .vu-table .vu-actions.table-warning {
        background: #fff7e6 !important;
        border-left: 4px solid var(--warning-700);
    }
    /* The first empty <td> in the actions row collapses */
    .vu-table .vu-actions > td:first-child { display: none; }
    .vu-table .vu-actions > td[colspan] {
        padding: 0 !important;
        border: none !important;
    }
    .vu-table .vu-actions .d-flex {
        gap: 6px !important;
    }
    .vu-table .vu-actions .btn {
        flex: 1 1 calc(50% - 6px);   /* 2 buttons per row */
        font-size: .78rem;
        padding: .42rem .5rem;
        min-height: 36px;
        white-space: nowrap;
    }
    /* Promote primary action (Mark processed / Mark as new) to full width */
    .vu-table .vu-actions .btn-success,
    .vu-table .vu-actions .btn-outline-warning {
        flex: 1 1 100%;
        order: 99;   /* sits at the bottom of the action group */
    }

    /* Card mode for the "Vendor Bill Uploads" page header / purge controls */
    .container > .d-flex.align-items-center.justify-content-between:first-child {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
        margin-bottom: 1rem;
    }
    .container > .d-flex.align-items-center.justify-content-between:first-child > form {
        flex-wrap: wrap;
        justify-content: flex-start;
        background: var(--surface-soft);
        padding: .55rem .65rem;
        border-radius: var(--radius);
        border: 1px solid var(--ink-100);
    }
    .container > .d-flex.align-items-center.justify-content-between:first-child > form .btn {
        margin-left: auto;
    }
}

/* --- Universal phone-safe touch tweaks --- */
@media (pointer: coarse) {
    /* Bigger checkboxes */
    .form-check-input, .table input[type="checkbox"] {
        width: 1.2em !important;
        height: 1.2em !important;
    }
    /* All clickable items get a minimum tap target */
    .nav-link, .btn { min-height: 40px; }
    .btn-sm { min-height: 34px; }
}

/* --- Helpful utility: hide on phones, show on desktop and vice versa --- */
.show-mobile { display: none; }
@media (max-width: 576px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block; }
    .show-mobile.inline { display: inline-block; }
}

/* ---------- Brand utility class ---------- */
.text-brand { color: var(--brand-700) !important; }
.bg-brand-soft { background: var(--brand-50) !important; }

/* ---------- Subtle focus ring for keyboard users ---------- */
:focus-visible {
    outline: 2px solid var(--brand-400);
    outline-offset: 2px;
    border-radius: 4px;
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
    outline: none;
}