/* ---------- Dark theme tokens ---------- */
[data-bs-theme=dark] {
    --wine: #5c1530;
    --wine-deep: #3f0f22;
    --wine-btn: #8e2a52;
    --wine-btn-hover: #a5345f;
    --gold: #d9b45f;
    --gold-soft: #f0d9a0;
    --page: #141013;
    --surface: #1f191d;
    --surface-2: #2a2227;
    --line: #3c3137;
    --ink: #f1eaed;
    --ink-soft: #a99ca2;
    --alert-text: #ff8a94;
    --tabbar-h: 58px;

    --bs-body-bg: var(--page);
    --bs-body-bg-rgb: 20, 16, 19;
    --bs-body-color: var(--ink);
    --bs-body-color-rgb: 241, 234, 237;
    --bs-emphasis-color: #fff;
    --bs-heading-color: var(--ink);
    --bs-secondary-color: var(--ink-soft);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--surface-2);
    --bs-border-color: var(--line);
    --bs-link-color: #e0bd6b;
    --bs-link-color-rgb: 224, 189, 107;
    --bs-link-hover-color: var(--gold-soft);
    --bs-link-hover-color-rgb: 240, 217, 160;
    --bs-code-color: var(--gold-soft);
}

html { font-size: 15px; }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; -webkit-tap-highlight-color: transparent; }
main { flex: 1; }

/* ---------- Top bar ---------- */
.app-nav { --bs-navbar-color: rgba(255,255,255,.82); --bs-navbar-hover-color: #fff; --bs-navbar-active-color: #fff;
           background: linear-gradient(90deg, var(--wine-deep), var(--wine)); box-shadow: 0 2px 10px rgba(0,0,0,.45); }
.brand-mark { width: 36px; height: 36px; border-radius: 8px; background: var(--gold); color: var(--wine);
              display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.brand-sub { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-soft); }
.role-badge { background: rgba(255,255,255,.18); font-weight: 500; }
.app-footer { color: var(--ink-soft); }
.app-back { color: #fff; font-size: 1.5rem; line-height: 1; padding: .35rem .5rem .35rem 0; }
.app-back:hover { color: var(--gold-soft); }

/* ---------- Buttons and links ---------- */
.btn-wine { --bs-btn-color: #fff; --bs-btn-bg: var(--wine-btn); --bs-btn-border-color: var(--wine-btn);
            --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--wine-btn-hover); --bs-btn-hover-border-color: var(--wine-btn-hover);
            --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--wine-btn-hover); --bs-btn-active-border-color: var(--wine-btn-hover);
            --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--wine-btn); --bs-btn-disabled-border-color: var(--wine-btn); }
.btn-outline-secondary { --bs-btn-color: var(--ink); --bs-btn-border-color: #5a4c53;
                         --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: #7a6a72;
                         --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--surface-2); --bs-btn-active-border-color: #7a6a72; }
.text-wine { color: var(--gold); }
.text-danger, .form-text.text-danger, .field-validation-error { color: var(--alert-text) !important; }

/* ---------- Surfaces ---------- */
.card { --bs-card-bg: var(--surface); --bs-card-cap-bg: var(--surface); --bs-card-color: var(--ink);
        border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.3); overflow: hidden; }
.card-header { border-bottom: 1px solid var(--line); font-weight: 600; border-radius: 12px 12px 0 0 !important; }
.dropdown-menu { --bs-dropdown-bg: var(--surface-2); --bs-dropdown-border-color: var(--line); --bs-dropdown-link-color: var(--ink);
                 --bs-dropdown-link-hover-bg: #3a2f35; --bs-dropdown-link-active-bg: var(--wine-btn); --bs-dropdown-divider-bg: var(--line); }
.modal-content { --bs-modal-bg: var(--surface); --bs-modal-border-color: var(--line); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--ink); --bs-list-group-border-color: var(--line); }
.pagination { --bs-pagination-bg: var(--surface); --bs-pagination-color: var(--ink); --bs-pagination-border-color: var(--line);
              --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-hover-color: #fff; --bs-pagination-hover-border-color: var(--line);
              --bs-pagination-active-bg: var(--wine-btn); --bs-pagination-active-border-color: var(--wine-btn); }
.progress { --bs-progress-bg: var(--surface-2); }

.stat { padding: 1rem 1.25rem; }
.stat .num { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--gold); }
.stat .lbl { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.stat.alert-stat .num { color: var(--alert-text); }

/* ---------- Forms ---------- */
.form-control, .form-select, .input-group-text { background-color: var(--surface-2); border-color: var(--line); color: var(--ink); }
.form-control:focus, .form-select:focus { background-color: var(--surface-2); border-color: var(--gold); color: var(--ink);
                                          box-shadow: 0 0 0 .2rem rgba(217,180,95,.25); }
.form-control::placeholder { color: var(--ink-soft); }
.form-control:disabled, .form-select:disabled { background-color: var(--surface); color: var(--ink-soft); }
.form-check-input { background-color: var(--surface-2); border-color: #7a6a72; }
.form-check-input:checked { background-color: var(--wine-btn); border-color: var(--wine-btn-hover); }
.form-check-input:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(217,180,95,.25); }
input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset; caret-color: var(--ink); }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line);
         --bs-table-hover-bg: rgba(255,255,255,.05); --bs-table-hover-color: var(--ink); }
.table > :not(caption) > * > * { vertical-align: middle; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.table thead.sticky-top th { background: var(--surface); }
.table tr.text-muted > td { color: var(--ink-soft); }
.code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
.badge.bg-dark { background-color: #000 !important; box-shadow: inset 0 0 0 1px #6b5d64; }

.page-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.page-title h1 { font-size: 1.45rem; margin: 0; font-weight: 700; }

/* ---------- Login ---------- */
.login-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 400px; }

/* ---------- Keyword map ---------- */
.keymap { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; text-align: center; }
.keymap div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 0; }
.keymap b { display: block; font-size: 1.1rem; color: var(--gold); }
.keymap small { color: var(--ink-soft); }

/* ---------- Scanner ---------- */
.scan-shell { max-width: 560px; margin: 0 auto; }
#reader { width: 100%; border-radius: 12px; overflow: hidden; background: #000; min-height: 240px; }
#reader video { border-radius: 12px; }
.result-card { border-radius: 14px; padding: 1rem 1.2rem; color: #fff; }
.result-card.GENUINE { background: #198754; }
.result-card.RESCANNED { background: #0d7ea8; }
.result-card.WRONG_OUTLET { background: #d18b00; }
.result-card.NOT_ISSUED { background: #b02a37; }
.result-card.VOIDED { background: #555; }
.result-card.INVALID { background: #000; box-shadow: inset 0 0 0 1px #6b5d64; }
.result-card .big { font-size: 1.6rem; font-weight: 800; letter-spacing: .02em; }
.result-card .dt { font-size: 1.25rem; font-family: ui-monospace, Consolas, monospace; }
.gps-pill { font-size: .8rem; }
.session-counts .badge { font-size: .85rem; }

/* ---------- Bottom tab bar and More sheet (phones and small tablets) ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; background: var(--surface);
          border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -4px 14px rgba(0,0,0,.4); }
.tabbar a, .tabbar button { flex: 1 1 0; min-width: 0; height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
                            background: none; border: 0; padding: 0; color: var(--ink-soft); font-size: .72rem; text-decoration: none; }
.tabbar i { font-size: 1.3rem; line-height: 1; }
.tabbar .active { color: var(--gold); font-weight: 600; }

.more-sheet { --bs-offcanvas-bg: var(--surface); --bs-offcanvas-height: auto; --bs-offcanvas-border-color: var(--line);
              max-height: 85dvh; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
.more-sheet .offcanvas-header { padding-bottom: .5rem; }
.more-sheet .offcanvas-body { padding: 0 0 .5rem; }
.more-group { padding: .6rem 1.1rem .2rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.more-item { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 48px; padding: .4rem 1.1rem; background: none; border: 0;
             color: var(--ink); text-align: left; text-decoration: none; font-size: 1rem; }
.more-item i { font-size: 1.15rem; width: 1.4rem; text-align: center; color: var(--gold); }
.more-item:active, .more-item:hover { background: var(--surface-2); color: var(--ink); }
.more-item.danger, .more-item.danger i { color: var(--alert-text); }

/* The installed app has its own icon, so the install option goes away. */
.is-standalone .install-app { display: none !important; }
@media (display-mode: standalone) { .install-app { display: none !important; } }

@media (max-width: 991.98px) {
    body { overscroll-behavior-y: none; }
    body.has-tabs { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
    body.has-tabs .app-footer { display: none; }
    .app-nav { position: sticky; top: 0; z-index: 1020; padding-top: calc(.4rem + env(safe-area-inset-top)); padding-bottom: .4rem; }
    .app-nav .navbar-brand { font-size: 1.05rem; margin: 0; }
    .app-nav .brand-mark { width: 32px; height: 32px; font-size: 1.1rem; }
    .app-nav .container-fluid { justify-content: flex-start; flex-wrap: nowrap; }
    main.container-xl { padding-left: .75rem; padding-right: .75rem; padding-top: .75rem !important; }
    .card { border-radius: 16px; }
    .card-header { border-radius: 16px 16px 0 0 !important; }

    /* Comfortable touch targets; 16px inputs stop iPhones zooming the page on focus. */
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
    .btn-sm { min-height: 36px; }
    .form-control, .form-select { font-size: 16px; min-height: 44px; }
    .form-check { min-height: 32px; display: flex; align-items: center; gap: .5rem; }
    .form-check .form-check-input { width: 1.35rem; height: 1.35rem; margin-top: 0; flex: none; }
    .page-link { min-width: 38px; min-height: 38px; display: flex; align-items: center; justify-content: center; }
    .page-title h1 { font-size: 1.3rem; }
    .stat { padding: .8rem .9rem; }
    .stat .num { font-size: 1.5rem; overflow-wrap: anywhere; }
    .stat .lbl { font-size: .7rem; }
}

/* ---------- Phones: every table becomes a list of rows, labelled from its header (see site.js) ---------- */
@media (max-width: 767.98px) {
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody { display: block; width: 100%; }
    .table-stack tbody tr { display: block; padding: .6rem .95rem; border-bottom: 1px solid var(--line); }
    .table-stack tbody tr:last-child { border-bottom: 0; }
    .table-stack.table > :not(caption) > * > td { display: flow-root; padding: .18rem 0; border: 0; text-align: right; white-space: normal !important; overflow-wrap: anywhere; }
    .table-stack td[data-label]::before { content: attr(data-label); float: left; margin-right: .75rem; color: var(--ink-soft);
                                          font-family: var(--bs-body-font-family); font-size: .78rem; font-weight: 400; letter-spacing: 0; }
    .table-stack td:first-child { font-weight: 600; }
    .table-stack td.stack-empty { display: none !important; }
    .table-stack td.stack-full { text-align: center !important; }
    .table-stack .progress { margin-top: .4rem; }
    .table-responsive { overflow: visible; }
    .table-responsive[style*="max-height"] { max-height: none !important; }
}