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

:root {
    --bg: #0f0f23;
    --surface: #1a1a2e;
    --surface2: #16213e;
    --border: #2a2a4a;
    --primary: #d4a574;
    --primary-dim: rgba(212, 165, 116, 0.12);
    --success: #4caf50;
    --danger: #ef5350;
    --warning: #ff9800;
    --text: #ffffff;
    --text2: #b8c4d0;
    --text3: #6b7b8d;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

/* Auth Gate */
#auth-gate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}

/* Top-left back link on the auth gate — lets the operator leave the admin
   login and return to the main landing site without retyping the URL. */
.auth-home-link {
    position: absolute;
    top: 16px;
    left: 20px;
    color: var(--primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.15s;
}
.auth-home-link:hover { background: rgba(212, 165, 116, 0.1); }

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 48px;
    text-align: center;
    width: 380px;
}

.auth-icon { font-size: 48px; margin-bottom: 16px; }
/* Brand mark inside the admin auth card. Gold-tinted to match the
   BO accent #D4A574 — same brand mark color across Hub / POS Lite /
   Back Office / admin panel / printed reports. The CSS recipe:
   flatten to black, invert to white, then sepia + hue-rotation
   lands on the target gold. */
.auth-logo {
    display: block;
    margin: 0 auto 20px;
    max-width: 100%;
    height: auto;
    filter: brightness(0) saturate(100%) invert(78%) sepia(34%) saturate(414%) hue-rotate(348deg) brightness(91%) contrast(88%);
}
.auth-card h1 { font-size: 22px; margin-bottom: 8px; }
.auth-card p { color: var(--text2); font-size: 14px; margin-bottom: 24px; }

.auth-card input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 16px;
    margin-bottom: 16px;
    outline: none;
    text-align: center;
    letter-spacing: 4px;
}
.auth-card input:focus { border-color: var(--primary); }

#auth-btn {
    width: 100%;
    padding: 12px;
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
#auth-btn:hover { opacity: 0.9; }

.error-msg { color: var(--danger); font-size: 13px; margin-top: 12px; min-height: 20px; }

/* "Use master code instead" toggle — small, subdued; the email+password
   path is the primary affordance. */
.auth-fallback-toggle {
    display: inline-block;
    margin-top: 14px;
    font-size: 12px;
    color: var(--text3);
    text-decoration: none;
    border-bottom: 1px dashed var(--text3);
}
.auth-fallback-toggle:hover { color: var(--text2); border-bottom-color: var(--text2); }
.auth-fallback-hint {
    font-size: 11px;
    color: var(--text3);
    margin-top: 8px;
    line-height: 1.5;
    text-align: left;
}

/* Navigation */
nav {
    display: flex;
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-logo {
    /* gladius wordmark, gold-tinted via mask — identical color trick
       to the Flutter ColorFiltered(srcIn) tint in POS + Back Office.
       Asset is 800x250, so 24px tall = 77px wide. */
    width: 77px;
    height: 24px;
    flex: none;
    background: var(--primary);
    -webkit-mask: url(logo_light.png) no-repeat left center / contain;
    mask: url(logo_light.png) no-repeat left center / contain;
    margin-right: 14px;
}
.nav-sep {
    width: 1px;
    height: 20px;
    flex: none;
    background: var(--border);
    margin-right: 14px;
}
.nav-brand {
    font-weight: 700;
    font-size: 16px;
    color: var(--primary);
    margin-right: 40px;
}

.nav-links { display: flex; gap: 4px; flex: 1; }

.nav-link {
    color: var(--text2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s;
}
.nav-link:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.nav-link.active { color: var(--primary); background: var(--primary-dim); }

.logout-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text3);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}
.logout-btn:hover { border-color: var(--danger); color: var(--danger); }

/* "Logged in as <email>" chip beside the logout button — small,
   non-interactive, just signals whose audit trail their actions land
   in. Hidden when neither admin token nor master code is active. */
.admin-badge {
    font-size: 12px;
    color: var(--text3);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    padding: 5px 10px;
    border-radius: 8px;
    margin-right: 10px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.2px;
}

/* Status badge variants used by the admins list — match the role
   color cue (super = warm gold like the brand, viewer = neutral). */
.badge.badge-success { background: rgba(212, 165, 116, 0.18); color: var(--primary); }

/* ── Modal dialog ────────────────────────────────────────────────
 * In-panel replacement for browser-native prompt()/confirm(). Styled
 * to match the rest of the admin chrome (dark surface, gold accents,
 * generous padding). Used by the Admins-tab CRUD flows. */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 18, 0.72);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 24px;
    animation: modalFadeIn 0.15s ease;
}
@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 28px;
    position: relative;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.18s ease;
}
@keyframes modalSlideIn {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text3);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }

.modal-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 18px;
    padding-right: 32px;
    color: var(--text);
}

.modal-text {
    color: var(--text2);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 8px;
}

.modal-body label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 14px;
    letter-spacing: 0.2px;
}
.modal-body label input,
.modal-body label select,
.modal-body label textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 11px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.modal-body label input:focus,
.modal-body label select:focus,
.modal-body label textarea:focus {
    border-color: var(--primary);
}

.modal-error {
    color: var(--danger);
    font-size: 13px;
    min-height: 18px;
    margin: 6px 0 14px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.modal-actions .btn {
    padding: 9px 18px;
    font-size: 13px;
}

@media (max-width: 520px) {
    .modal-card { padding: 22px 18px; border-radius: 14px; }
    .modal-title { font-size: 16px; }
    .modal-actions { flex-direction: column-reverse; }
    .modal-actions .btn { width: 100%; }
}

/* Main Content */
main {
    max-width: 1600px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* Dashboard */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
}

.stat-card .label { color: var(--text3); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.stat-card .value { font-size: 36px; font-weight: 700; margin: 8px 0 4px; }
.stat-card .sub { color: var(--text2); font-size: 13px; }

.stat-card.active .value { color: var(--success); }
.stat-card.inactive .value { color: var(--text3); }
.stat-card.expired .value { color: var(--danger); }
.stat-card.expiring .value { color: var(--warning); }

/* Table */
.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

/* Horizontal scroll wrapper for wide tables — keeps the header / footer
 * radii but lets the table scroll left-right on narrow viewports instead
 * of cropping the Actions column off the right edge. */
.table-wrap > .table-scroll {
    overflow-x: auto;
}

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

.table-header h2 { font-size: 16px; font-weight: 600; }

.search-input {
    padding: 8px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    width: 260px;
    outline: none;
}
.search-input:focus { border-color: var(--primary); }

table { width: 100%; border-collapse: collapse; }
thead th {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    font-weight: 500;
}
tbody td {
    padding: 14px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(255,255,255,0.02); }

/* Badges */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-active { background: rgba(76,175,80,0.15); color: var(--success); }
.badge-inactive { background: rgba(107,123,141,0.15); color: var(--text3); }
.badge-expired { background: rgba(239,83,80,0.15); color: var(--danger); }
.badge-expiring { background: rgba(255,152,0,0.15); color: var(--warning); }

/* Buttons */
.btn {
    padding: 7px 14px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}
.btn:hover { opacity: 0.85; }
.btn-primary { background: var(--primary); color: #000; }
.btn-success { background: var(--success); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-outline {
    background: none;
    border: 1px solid var(--border);
    color: var(--text2);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 5px 10px; font-size: 11px; white-space: nowrap; }

/* nowrap on the container so View + Disable/Enable stay side-by-side
 * instead of wrapping or being clipped off the right edge. */
.action-btns { display: flex; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }

/* License key column: single line with the masked-and-truncated key,
 * not 3 wrapped lines that bloat row height. */
.license-key-cell { white-space: nowrap; }
.license-key-cell .mono { display: inline-block; vertical-align: middle; }

/* Last Seen / Expires: short relative-time strings, no wrap. */
.nowrap { white-space: nowrap; }

/* Forms */
.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px;
    max-width: 520px;
}

.form-card h2 { font-size: 18px; margin-bottom: 24px; }

.form-group { margin-bottom: 20px; }
.form-group label {
    display: block;
    font-size: 13px;
    color: var(--text2);
    margin-bottom: 6px;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    outline: none;
}
.form-control:focus { border-color: var(--primary); }

textarea.form-control { resize: vertical; min-height: 80px; }

.form-submit { margin-top: 8px; }
.form-submit .btn { padding: 12px 32px; font-size: 14px; }

/* License key display */
.key-display {
    background: var(--bg);
    border: 1px solid var(--primary);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
}
.key-display .key {
    font-size: 24px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: 3px;
    color: var(--primary);
    margin-bottom: 10px;
}
.key-display .copy-hint { color: var(--text3); font-size: 12px; }

/* Detail panel */
.detail-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 32px;
}

.detail-card h2 {
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.detail-card h2 .badge { font-size: 11px; padding: 4px 10px; }
.detail-card .detail-sub {
    color: var(--text3);
    font-size: 13px;
    margin-bottom: 20px;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

/* Compact 2-column layout for detail rows on wider screens */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    margin-top: 8px;
}
@media (max-width: 760px) {
    .detail-grid { grid-template-columns: 1fr; }
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}
.detail-row:last-child { border-bottom: none; }
.detail-row .label {
    color: var(--text3);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.detail-row .value {
    font-size: 13px;
    font-weight: 500;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* Section header inside detail-card (used by Devices section) */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.section-header h2 { margin: 0; font-size: 18px; }
.section-header .actions { display: flex; gap: 8px; }

/* Devices table presentation */
.detail-card table {
    margin: 0 -8px;
    width: calc(100% + 16px);
}
.detail-card thead th {
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
}
.detail-card tbody td {
    padding: 12px;
}

/* In-detail mini stats — denser than dashboard cards */
.mini-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 4px 0 24px;
}
.mini-stats .mini-stat {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
}
.mini-stats .mini-stat .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text3);
    margin-bottom: 4px;
}
.mini-stats .mini-stat .value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

/* Utility */
.mono { font-family: 'Courier New', monospace; letter-spacing: 1px; }
.text-muted { color: var(--text3); }
.mt-16 { margin-top: 16px; }
.mb-24 { margin-bottom: 24px; }

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text3);
}
.empty-state .icon { font-size: 48px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; }

/* Toast */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    z-index: 1000;
    animation: slideIn 0.3s ease;
}
.toast-success { background: var(--success); color: #fff; }
.toast-error { background: var(--danger); color: #fff; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Loading */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-center {
    display: flex;
    justify-content: center;
    padding: 60px;
}

/* ── Generate / Edit form: sectioned layout ──────────────────────────── */
.form-section {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px 8px;
    margin-bottom: 16px;
    background: rgba(255,255,255,0.02);
}
.form-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text2);
    margin-bottom: 12px;
}
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}
@media (max-width: 640px) {
    .form-grid-2 { grid-template-columns: 1fr; }
}
.form-hint {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text2);
    line-height: 1.4;
}
.req {
    color: var(--danger);
    font-weight: 700;
}
.form-card label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text2);
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}
.form-card input,
.form-card textarea,
.form-card select {
    width: 100%;
    box-sizing: border-box;
}

/* Accounts tab */
.accounts-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.summary-pill {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 16px;
    min-width: 160px;
}
.summary-pill .label {
    font-size: 11px;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.summary-pill .value {
    font-size: 22px;
    font-weight: 700;
    margin-top: 4px;
}
.summary-pill.highlight {
    border-color: var(--primary);
    background: var(--primary-dim);
}

.hint {
    color: var(--text2);
    font-size: 12px;
    margin-bottom: 16px;
    line-height: 1.5;
}
.hint code {
    background: rgba(0,0,0,0.3);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.account-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
}
.account-card.multi {
    border-left: 3px solid var(--primary);
}
.account-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.account-email {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.account-meta {
    font-size: 12px;
    color: var(--text2);
    margin-top: 4px;
}
.multi-badge {
    background: var(--primary);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}
.account-stores {
    width: 100%;
    border-collapse: collapse;
}
.account-stores th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text2);
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
}
.account-stores td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 13px;
}

/* Product badge — GladiusPOS vs GladiusLite identifier on every tenant row */
.product-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 3px 9px;
    border-radius: 10px;
    text-transform: uppercase;
    white-space: nowrap;
}
.product-pill-pos {
    background: rgba(76, 175, 80, 0.18);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.4);
}
.product-pill-lite {
    background: rgba(212, 165, 116, 0.18);
    color: var(--primary);
    border: 1px solid rgba(212, 165, 116, 0.4);
}

/* Owner column links / filter banner on the licenses page */
.owner-link {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px dashed rgba(212, 165, 116, 0.4);
}
.owner-link:hover {
    border-bottom-style: solid;
}
.filter-banner {
    background: var(--primary-dim);
    border: 1px solid rgba(212, 165, 116, 0.35);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 13px;
}

/* ── Phone / narrow-tablet layout (≤ 720px) ────────────────────────────
 * The admin panel is desktop-first (wide license tables, multi-column
 * forms). On phones we shrink the chrome, let the nav wrap, and ensure
 * tables scroll horizontally instead of cropping. */
@media (max-width: 720px) {
    /* Auth gate: tighter card so the master-code prompt fits on phones
       without horizontal scroll, and the "← Home" back link drops out
       of the safe-area corner. */
    .auth-card {
        width: 100%;
        max-width: 360px;
        padding: 32px 24px;
    }
    .auth-home-link {
        top: 12px;
        left: 12px;
        font-size: 13px;
        padding: 6px 10px;
    }

    /* Nav: shrink padding, let links wrap to a second row, hide the
       long brand tagline so the master-code-protected pages aren't
       crammed off-screen. */
    nav {
        padding: 0 14px;
        height: auto;
        min-height: 56px;
        flex-wrap: wrap;
        gap: 8px 6px;
    }
    .nav-brand {
        font-size: 14px;
        margin-right: 12px;
        flex-shrink: 0;
    }
    .nav-links {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
        gap: 4px;
        padding-bottom: 8px;
    }
    .nav-link { font-size: 13px; padding: 6px 10px; }
    .logout-btn { padding: 5px 12px; font-size: 12px; }

    /* Main: tighter side padding so cards aren't squeezed. */
    main { padding: 20px 14px; }

    /* Dashboard stat cards: stack 2 per row on phones instead of 1
       (looks denser than one 100%-wide card per row). */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-card { padding: 16px; }
    .stat-card .value { font-size: 26px; }

    /* Table header: search input takes its own row so it doesn't push
       the title off the screen. */
    .table-header { flex-wrap: wrap; gap: 10px; padding: 14px; }
    .search-input { width: 100%; }

    /* Tables: keep the wrapper visible, scroll the data horizontally
       (already supported via .table-scroll for licenses; this enables
       it for every table inside .table-wrap). */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    thead th, tbody td { padding: 10px 12px; font-size: 12px; }

    /* Detail card grids collapse — these are already 1-col under 760px,
       just dial the typography down a touch. */
    .detail-card { padding: 16px; }
    .detail-row { padding: 9px 0; }

    /* Toast: don't pin to the right edge — center it so long messages
       don't overflow off the side. */
    .toast {
        top: 12px;
        left: 12px;
        right: 12px;
        text-align: center;
    }
    @keyframes slideIn {
        from { transform: translateY(-100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
}


/* ── Support tab: live chat ──────────────────────────────────── */
.sup-wrap { display:flex; border:1px solid var(--border); border-radius:12px;
            overflow:hidden; height:calc(100vh - 215px); min-height:420px;
            background:var(--surface); }
.sup-list { width:320px; flex:none; border-right:1px solid var(--border);
            display:flex; flex-direction:column; }
.sup-list-head { padding:13px 16px; font-weight:700; font-size:14px;
                 border-bottom:1px solid var(--border); }
.sup-items { overflow:auto; flex:1; }
.sup-item { display:flex; gap:10px; padding:12px 14px; cursor:pointer;
            border-bottom:1px solid var(--border); border-left:3px solid transparent; }
.sup-item:hover { background:rgba(255,255,255,0.03); }
.sup-item.active { background:rgba(212,165,116,0.10);
                   border-left-color:var(--primary); }
.sup-ava { width:38px; height:38px; border-radius:50%; flex:none;
           background:rgba(212,165,116,0.18); color:var(--primary);
           font-weight:800; font-size:14px; display:flex;
           align-items:center; justify-content:center; }
.sup-item-main { min-width:0; flex:1; }
.sup-item-top { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.sup-item-name { font-size:13px; font-weight:700; overflow:hidden;
                 text-overflow:ellipsis; white-space:nowrap; }
.sup-item-time { font-size:10px; color:var(--text3); flex:none; }
.sup-item-prev { font-size:12px; color:var(--text3); overflow:hidden;
                 text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.sup-pill { background:#ef4444; color:#fff; font-size:10px; font-weight:800;
            border-radius:9px; padding:1px 7px; flex:none; }
.sup-chat-col { flex:1; display:flex; flex-direction:column; min-width:0;
                background:var(--bg); }
.sup-chat-head { display:flex; justify-content:space-between; align-items:center;
                 gap:10px; padding:11px 16px; border-bottom:1px solid var(--border);
                 background:var(--surface); }
.sup-msgs { flex:1; overflow:auto; padding:18px 22px; }
.sup-day { text-align:center; color:var(--text3); font-size:11px;
           letter-spacing:0.4px; margin:14px 0 8px; }
.sup-meta { font-size:10px; color:var(--text3); margin:10px 6px 3px; }
.sup-row { display:flex; margin:2px 0; }
.sup-row.out { justify-content:flex-end; }
.sup-bubble { max-width:62%; padding:9px 13px; border-radius:14px;
              font-size:13px; line-height:1.5; white-space:pre-wrap;
              word-break:break-word; }
.sup-row.in  .sup-bubble { background:var(--surface);
              border:1px solid var(--border); border-bottom-left-radius:4px; }
.sup-row.out .sup-bubble { background:linear-gradient(135deg,
              rgba(212,165,116,0.26), rgba(212,165,116,0.15));
              border:1px solid rgba(212,165,116,0.35);
              border-bottom-right-radius:4px; }
.sup-auto { text-align:center; color:var(--text3); font-size:11px;
            font-style:italic; margin:10px 24px; }
.sup-replybar { display:flex; gap:10px; padding:12px 14px; align-items:center;
                border-top:1px solid var(--border); background:var(--surface); }
.sup-input { flex:1; background:var(--bg); border:1px solid var(--border);
             border-radius:22px; padding:10px 16px; color:var(--text);
             font-size:13px; outline:none; }
.sup-input:focus { border-color:var(--primary); }
.sup-sendbtn { width:40px; height:40px; border-radius:50%; flex:none;
               background:var(--primary); border:none; color:#1a1208;
               font-size:16px; cursor:pointer; display:flex;
               align-items:center; justify-content:center; }
.sup-sendbtn:hover { opacity:0.9; }
.sup-empty { display:flex; flex-direction:column; align-items:center;
             justify-content:center; height:100%; color:var(--text3);
             gap:10px; font-size:13px; }

/* ───────── Phone layout (PWA on mobile) ─────────
   Desktop layout untouched; only ≤640px is affected. Wide tables scroll
   horizontally instead of overflowing; the nav wraps to a compact row. */
@media (max-width: 640px) {
  nav {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .nav-links {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    flex: 1 1 100%;
  }
  .nav-link { padding: 8px 10px; font-size: 14px; }
  .logout-btn { margin-left: auto; }
  main, #content { padding: 10px !important; }

  /* Any wide data table scrolls inside its own box instead of breaking layout. */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table th, table td { white-space: nowrap; }

  /* Touch-friendly controls */
  button, .btn, input, select { min-height: 40px; font-size: 15px; }
}

/* ───────── Phone layout — component fixes (PWA, ≤640px) ───────── */
@media (max-width: 640px) {
  /* Support: stack the two-pane (list above chat) instead of squishing it */
  .sup-wrap { flex-direction: column; height: auto; min-height: 0; }
  .sup-list { width: 100%; flex: none; border-right: none;
              border-bottom: 1px solid var(--border); max-height: 50vh; }
  .sup-items { max-height: 46vh; }
  .sup-chat-col { min-height: 340px; }

  /* Button groups wrap instead of getting cut off the right edge */
  .action-btns, .detail-actions, .section-header .actions, .actions {
    flex-wrap: wrap; white-space: normal;
  }
  .detail-actions .btn, .section-header .actions .btn { flex: 1 1 auto; }

  /* Tighter detail card + keep the page within the viewport (no sideways scroll;
     wide tables still scroll inside their own box from the base mobile rules) */
  .detail-card { padding: 16px; }
  main, #content { padding: 10px; overflow-x: hidden; }
}


/* ───────── Phone: data tables → cards (≤640px) ─────────
   10-column admin tables can't fit a phone. Turn each row into a card with
   "Header: value" lines (labels injected by labelTableCells() in app.js). */
@media (max-width: 640px) {
  table { display: block; width: 100%; }
  table thead { display: none; }
  table tbody { display: block; }
  table tbody tr {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 6px 12px;
  }
  table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border: none !important;
    white-space: normal !important;
    text-align: right;
  }
  table tbody td::before {
    content: attr(data-label);
    color: var(--text3);
    font-weight: 600;
    text-align: left;
    flex: 0 0 40%;
  }
  table tbody td:first-child { font-weight: 700; font-size: 15px; }
  /* action cells: let the buttons wrap to the right side */
  table tbody td .action-btns { justify-content: flex-end; }
}

/* ───────── Collapsible sections (click the title to fold long lists) ───────── */
.collapsible > .section-header h2 { cursor: pointer; user-select: none; }
.collapsible > .section-header h2::before {
  content: '▾';
  display: inline-block;
  width: 1em;
  margin-right: 6px;
  font-size: 12px;
  color: var(--text3);
  transition: transform .15s ease;
}
.collapsible.collapsed > .section-header h2::before { transform: rotate(-90deg); }
.collapsible.collapsed > .section-header .actions { display: none; }
.collapsible.collapsed > :not(.section-header) { display: none; }
.collapsible .count { color: var(--text3); font-weight: 400; font-size: 0.78em; }

/* ── Mobile: tenant detail readability (owner report 2026-07-09 — on the
   phone, "View" on a tenant clipped many fields). Root causes: .detail-row
   .value ellipsized (nowrap) and action rows didn't wrap. On small screens
   stack label over a full-width wrapping value, and let button rows wrap. */
@media (max-width: 640px) {
    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }
    .detail-row .value {
        text-align: left;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        overflow: visible;
        text-overflow: clip;
        max-width: 100%;
    }
    .detail-actions { flex-wrap: wrap; }
    .detail-actions .btn { flex: 1 1 calc(50% - 10px); }
    .section-header, .section-header .actions { flex-wrap: wrap; }
    .detail-card h2 { flex-wrap: wrap; }
    .detail-card { padding: 18px 16px; }
    .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}