/* ============================================================
 * LEDGER THEME — applied on top of main.css. Last-wins cascade.
 * Navy depth + gold accent + parchment numerics + blueprint grid.
 * ============================================================ */

/* Display headings */
h1, h2, .auth-card h1 { font-family: var(--font-display); letter-spacing: -0.01em; }

.stat-card .value,
.data-table td.text-right,
.data-table-mini td.text-right,
.od-totals b,
.nexus-id,
.report-grid b {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-numeric);
    letter-spacing: -0.02em;
}

/* Auth screen — hero background */
#auth-screen {
    background:
        url('../img/login-hero.svg') center center / cover no-repeat fixed,
        linear-gradient(135deg, #0B1220 0%, #131C2E 100%);
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
}
.auth-card {
    background: rgba(11, 18, 32, 0.82);
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(245, 181, 68, 0.18);
    box-shadow:
        0 24px 60px -16px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(245, 181, 68, 0.08);
    border-radius: var(--r-lg);
    padding: 40px 36px;
    max-width: 420px; width: 100%;
}
.brand-logo img { width: 56px; height: 56px; }

/* Sidebar */
.sidebar-wrapper {
    background:
        url('../img/bg-topo.svg') no-repeat right -100px bottom -50px,
        linear-gradient(180deg, #0B1220 0%, #060B17 100%);
    border-right: 1px solid rgba(245, 181, 68, 0.10);
}
.sidebar-header { border-bottom: 1px solid rgba(245, 181, 68, 0.10); }
#site-brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5E6CC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nav-group-label { color: rgba(245, 181, 68, 0.45); }
.nav-item.active {
    background: linear-gradient(90deg, rgba(245, 181, 68, 0.18), rgba(245, 181, 68, 0.02));
    color: var(--accent-gold);
    border-left-color: var(--accent-gold);
}
.nav-item.active::after {
    background: var(--accent-gold);
    box-shadow: 0 0 12px var(--accent-gold);
}
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(245, 181, 68, 0.18); }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(245, 181, 68, 0.4); }

/* Top bar */
.top-bar {
    background: rgba(11, 18, 32, 0.7);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(245, 181, 68, 0.08);
}
.top-bar h2 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* Glass card */
.glass-card {
    background:
        url('../img/pattern-dots.svg'),
        linear-gradient(180deg, rgba(26, 36, 56, 0.85) 0%, rgba(19, 28, 46, 0.85) 100%);
    border: 1px solid rgba(245, 181, 68, 0.10);
    border-radius: var(--r-md);
    backdrop-filter: blur(8px);
    box-shadow:
        0 1px 0 rgba(245, 181, 68, 0.05) inset,
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 14px 40px -20px rgba(0, 0, 0, 0.6);
    position: relative;
}
.glass-card h3 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.005em;
}

/* Stat tiles */
.stat-card { padding: 22px 22px 20px; position: relative; overflow: hidden; }
.stat-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--accent-gold), transparent);
    opacity: .7;
}
.stat-card .header h4 {
    font-family: var(--font-ui);
    font-size: 10px; font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.14em;
}
.stat-card .icon-box {
    background: rgba(245, 181, 68, 0.10);
    border: 1px solid rgba(245, 181, 68, 0.18);
    border-radius: 8px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.stat-card .value { font-size: 28px; font-weight: 700; margin-top: 10px; }
.stat-card .stat-meta {
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.02em;
}
.stat-card.accent-success::before { background: linear-gradient(180deg, var(--success), transparent); }
.stat-card.accent-danger::before  { background: linear-gradient(180deg, var(--danger), transparent); }

/* Tables */
.data-table thead th {
    background: rgba(245, 181, 68, 0.04);
    color: var(--accent-gold);
    font-family: var(--font-ui);
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.12em;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(245, 181, 68, 0.18);
}
.data-table tbody tr {
    border-bottom: 1px solid rgba(245, 181, 68, 0.05);
    transition: background .12s;
}
.data-table tbody tr:hover { background: rgba(245, 181, 68, 0.04); }
.data-table td { padding: 12px 14px; font-size: 13px; }
.data-table-mini td { font-size: 12.5px; }

/* Badges */
.badge {
    font-family: var(--font-ui);
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 4px 10px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 5px;
}
.badge-nexus-success {
    background: rgba(52, 211, 153, 0.12);
    color: var(--success);
    border: 1px solid rgba(52, 211, 153, 0.3);
}
.badge-nexus-danger {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.badge-nexus-dim {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.badge-outline {
    background: transparent;
    color: var(--accent-gold);
    border: 1px solid rgba(245, 181, 68, 0.35);
}
.badge-amber {
    background: rgba(245, 181, 68, 0.14);
    color: var(--accent-gold);
    border: 1px solid rgba(245, 181, 68, 0.35);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(180deg, #F5B544 0%, #D89821 100%);
    color: #0B1220;
    font-weight: 700; border: none;
    border-radius: var(--r-sm);
    padding: 11px 20px; font-size: 13px;
    font-family: var(--font-ui);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform .12s, filter .15s;
    box-shadow: 0 4px 12px rgba(245, 181, 68, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary.btn-sm { padding: 7px 14px; font-size: 12px; }
.btn-ghost {
    background: rgba(245, 181, 68, 0.06);
    border: 1px solid rgba(245, 181, 68, 0.18);
    color: var(--accent-gold);
    border-radius: var(--r-sm);
    padding: 10px 18px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .15s;
}
.btn-ghost:hover { background: rgba(245, 181, 68, 0.12); border-color: rgba(245, 181, 68, 0.35); }
.btn-ghost.btn-sm { padding: 6px 12px; font-size: 11px; }

/* Filter bar */
.filter-bar { padding: 14px 16px; border-radius: var(--r-md); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.filter-bar input, .filter-bar select {
    background: rgba(11, 18, 32, 0.6);
    border: 1px solid rgba(245, 181, 68, 0.12);
    color: var(--text-primary);
    padding: 8px 12px; border-radius: var(--r-sm);
    font-size: 13px; font-family: var(--font-ui);
}
.filter-bar input:focus, .filter-bar select:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(245, 181, 68, 0.12);
}

/* Tabs */
.tab-btn {
    background: transparent; color: var(--text-muted);
    border: none; padding: 10px 16px;
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    border-bottom: 2px solid transparent; cursor: pointer;
    transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--text-silver); }
.tab-btn.active { color: var(--accent-gold); border-bottom-color: var(--accent-gold); }

/* Modal */
.modal-content {
    background: linear-gradient(180deg, rgba(19, 28, 46, 0.98) 0%, rgba(11, 18, 32, 0.98) 100%);
    border: 1px solid rgba(245, 181, 68, 0.2);
    box-shadow: 0 30px 80px -16px rgba(0, 0, 0, 0.8);
}
.modal-header { border-bottom: 1px solid rgba(245, 181, 68, 0.1); }
.modal-header h3 { font-family: var(--font-display); }

/* Early-pay discount card */
.early-pay-card {
    background: linear-gradient(135deg, rgba(245, 181, 68, 0.22) 0%, rgba(245, 181, 68, 0.06) 60%, rgba(52, 211, 153, 0.08) 100%);
    border: 1px solid rgba(245, 181, 68, 0.45);
    border-radius: var(--r-md);
    padding: 18px 22px;
    position: relative;
    box-shadow:
        0 0 0 1px rgba(245, 181, 68, 0.15) inset,
        0 12px 32px -12px rgba(245, 181, 68, 0.2);
    overflow: hidden;
}
.early-pay-card::before {
    content: '';
    position: absolute; top: -50%; right: -10%;
    width: 250px; height: 250px;
    background: radial-gradient(circle, rgba(245, 181, 68, 0.25), transparent 70%);
    pointer-events: none;
}
.early-pay-card.muted {
    background: linear-gradient(135deg, rgba(245, 181, 68, 0.08), rgba(19, 28, 46, 0.4));
    border-color: rgba(245, 181, 68, 0.18);
}
.early-pay-card.muted::before { display: none; }
.ep-badge {
    position: absolute; top: 0; right: 16px;
    background: var(--accent-gold); color: #0B1220;
    font-family: var(--font-ui);
    font-size: 9px; font-weight: 800;
    padding: 4px 10px;
    border-radius: 0 0 6px 6px;
    letter-spacing: 0.12em;
    box-shadow: 0 4px 10px rgba(245, 181, 68, 0.4);
}
.ep-badge.dim {
    background: rgba(245, 181, 68, 0.2);
    color: var(--accent-gold);
    box-shadow: none;
}
.ep-content { display: flex; gap: 22px; align-items: center; position: relative; z-index: 1; }
.ep-pct {
    font-family: var(--font-display);
    font-size: 56px; font-weight: 700;
    color: var(--accent-gold);
    line-height: 1;
    text-shadow: 0 4px 20px rgba(245, 181, 68, 0.4);
    flex-shrink: 0;
}
.ep-pct small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; margin-top: 4px; opacity: .9; font-family: var(--font-ui); }
.ep-meta { flex: 1; }
.ep-headline { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.ep-headline b { color: var(--accent-gold); font-family: var(--font-mono); }
.ep-sub { font-size: 13px; color: var(--text-silver); margin-bottom: 4px; }
.ep-sub s { color: var(--text-muted); margin-right: 8px; font-family: var(--font-mono); }
.ep-sub .ep-final {
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--accent-mint);
    font-weight: 700;
    margin-right: 8px;
}
.ep-pay-hint {
    background: rgba(245, 181, 68, 0.1);
    border: 1px solid rgba(245, 181, 68, 0.35);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--text-primary);
}
.ep-pay-hint b { color: var(--accent-gold); }
@media (max-width: 600px) {
    .ep-content { flex-direction: column; align-items: flex-start; gap: 14px; }
    .ep-pct { font-size: 44px; }
}

/* Plan pill on billing screen */
.bill-plan-pill {
    background: linear-gradient(180deg, var(--accent-gold) 0%, #D89821 100%);
    color: #0B1220;
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.12em;
    padding: 4px 12px; border-radius: 999px;
    box-shadow: 0 4px 12px rgba(245, 181, 68, 0.25);
}
tr.bill-fee-total td {
    background: rgba(245, 181, 68, 0.06);
    border-top: 1px solid rgba(245, 181, 68, 0.25);
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-gold);
    padding: 12px 14px;
}

/* Billing */
.bill-state.state-success { background: rgba(52, 211, 153, 0.12); color: var(--success); border: 1px solid rgba(52, 211, 153, 0.4); }
.bill-state.state-warning { background: rgba(245, 181, 68, 0.12); color: var(--accent-gold); border: 1px solid rgba(245, 181, 68, 0.4); }
.bill-state.state-danger  { background: rgba(239, 68, 68, 0.12);  color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.4); }
.bill-banner.warn   { background: linear-gradient(180deg, rgba(245, 181, 68, 0.10), rgba(245, 181, 68, 0.03)); border: 1px solid rgba(245, 181, 68, 0.35); color: #FDE6B5; }
.bill-banner.danger { background: linear-gradient(180deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.04));  border: 1px solid rgba(239, 68, 68, 0.45); color: #FECACA; }

/* Empty state */
.empty-state {
    display: flex; flex-direction: column;
    align-items: center; padding: 40px 20px; gap: 14px;
}
.empty-state::before {
    content: '';
    width: 220px; height: 160px;
    background: url('../img/empty-data.svg') no-repeat center / contain;
    opacity: .8;
}

/* Quick range */
.quick-ranges button {
    background: rgba(245, 181, 68, 0.05);
    border: 1px solid rgba(245, 181, 68, 0.15);
    color: var(--text-silver);
    padding: 6px 12px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    border-radius: var(--r-sm);
    cursor: pointer; transition: all .12s;
}
.quick-ranges button:hover {
    background: rgba(245, 181, 68, 0.12);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

/* ============ ICONS (inline SVG) ============ */
.ico {
    width: 18px; height: 18px;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}
.ico-inline { display: inline-flex; align-items: center; }
.ico-inline .ico { width: 14px; height: 14px; }

.nav-item .ico { width: 17px; height: 17px; color: currentColor; }
.nav-item .icon { display: none; } /* hide legacy <span class="icon"> wrappers */

.icon-box .ico {
    width: 18px; height: 18px;
    color: var(--accent-gold);
}
.stat-card .icon-box .ico { width: 20px; height: 20px; }

.btn-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-silver); border-radius: var(--r-sm); }
.btn-icon .ico { width: 16px; height: 16px; }
.btn-icon:hover { color: var(--accent-gold); background: rgba(245, 181, 68, 0.08); }

.m-nav-btn .ico { width: 22px; height: 22px; }
.mobile-only .ico { width: 22px; height: 22px; }

.activity-icon .ico { width: 22px; height: 22px; }
.activity-icon { color: var(--accent-gold); display: inline-flex; align-items: center; }

.bill-banner { display: flex; gap: 14px; align-items: flex-start; }
.bill-banner-icon .ico { width: 22px; height: 22px; margin-top: 1px; }

.btn-primary .ico, .btn-ghost .ico { margin-right: 6px; }

/* sa-btn icon spacing */
.sa-btn .ico { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.sa-btn[data-icon]:not(:has(span)) .ico { margin: 0; }

/* logout button */
.logout-btn-full .ico { width: 16px; height: 16px; color: currentColor; }

/* legacy emerald → gold */
.text-emerald { color: var(--accent-gold) !important; }
.live-pos-indicator .pos-dot { background: var(--accent-mint); box-shadow: 0 0 8px var(--accent-mint); }

/* ============== SUPER ADMIN (admin.html) ============== */
body.sa-body {
    background:
        url('../img/bg-grid.svg'),
        radial-gradient(ellipse at top, rgba(245, 181, 68, 0.06), transparent 60%),
        linear-gradient(180deg, #0B1220 0%, #060B17 100%) !important;
    background-attachment: fixed;
    color: var(--text-primary) !important;
    font-family: var(--font-ui);
}
body.sa-body::-webkit-scrollbar-thumb { background: rgba(245, 181, 68, 0.3) !important; }
.sa-card {
    background: linear-gradient(180deg, rgba(26, 36, 56, 0.85) 0%, rgba(19, 28, 46, 0.85) 100%) !important;
    border: 1px solid rgba(245, 181, 68, 0.12) !important;
    border-radius: var(--r-md) !important;
    box-shadow: 0 14px 40px -20px rgba(0, 0, 0, 0.6);
}
.sa-card h1, .sa-card h2, .sa-card h3 { font-family: var(--font-display); letter-spacing: -0.01em; }
.sa-input {
    background: rgba(11, 18, 32, 0.65) !important;
    border: 1px solid rgba(245, 181, 68, 0.15) !important;
    color: var(--text-primary) !important;
    border-radius: var(--r-sm) !important;
    font-family: var(--font-ui);
}
.sa-input:focus { outline: 2px solid var(--accent-gold) !important; outline-offset: -1px; }
.sa-btn {
    background: linear-gradient(180deg, #F5B544 0%, #D89821 100%) !important;
    color: #0B1220 !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(245, 181, 68, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.sa-btn:hover { filter: brightness(1.08); }
.sa-btn.ghost {
    background: rgba(245, 181, 68, 0.06) !important;
    color: var(--accent-gold) !important;
    border: 1px solid rgba(245, 181, 68, 0.2) !important;
}
.sa-btn.danger {
    background: linear-gradient(180deg, #EF4444 0%, #B91C1C 100%) !important;
    color: white !important;
}
.sa-token {
    font-family: var(--font-mono);
    background: rgba(245, 181, 68, 0.06) !important;
    border: 1px dashed rgba(245, 181, 68, 0.4) !important;
    color: var(--accent-gold) !important;
}
table.sa-table th {
    color: var(--accent-gold) !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--font-ui);
    border-bottom: 1px solid rgba(245, 181, 68, 0.18) !important;
}
table.sa-table td {
    border-bottom: 1px solid rgba(245, 181, 68, 0.05) !important;
    font-family: var(--font-ui);
}
table.sa-table td:has(.mono), .mono {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums;
    color: var(--text-numeric);
}
table.sa-table tr:hover { background: rgba(245, 181, 68, 0.04) !important; }
.pill.online  { background: rgba(52, 211, 153, 0.15) !important; color: var(--success) !important; border: 1px solid rgba(52, 211, 153, 0.3); }
.pill.offline { background: rgba(239, 68, 68, 0.15)  !important; color: var(--danger)  !important; border: 1px solid rgba(239, 68, 68, 0.3); }
.pill.live    { background: rgba(79, 143, 255, 0.15) !important; color: var(--accent-azure) !important; border: 1px solid rgba(79, 143, 255, 0.3); }
.sa-stat {
    background: rgba(11, 18, 32, 0.6) !important;
    border: 1px solid rgba(245, 181, 68, 0.1) !important;
    border-left: 3px solid var(--accent-gold) !important;
}
.sa-stat .label { color: var(--text-muted); }
.sa-stat .value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text-numeric);
}
.sa-stat .value.green { color: var(--success) !important; }
.sa-stat .value.red   { color: var(--danger) !important; }
.breadcrumb a { color: var(--accent-gold) !important; }
.empty { color: var(--text-muted) !important; }