/* ============================================================
   Peace Academy — Brand Theme (logo-based palette)
   Navy arc text, blue/green globe, gold olive branch
   ============================================================ */

:root {
    /* ── Brand palette (from logo) ── */
    --pa-navy-900: #0f1f3d;
    --pa-navy-800: #1b3760;
    --pa-navy-700: #24466f;
    --pa-blue-600: #2d6cb5;
    --pa-blue-500: #3b82c9;
    --pa-green-600: #2e7d32;
    --pa-green-500: #3f9142;
    --pa-green-400: #4caf50;
    --pa-gold-500: #b7862f;
    --pa-gold-400: #d4a24c;
    --pa-white: #ffffff;

    /* ── Semantic tokens — LIGHT MODE (default) ── */
    --bg-body: #f1f5f9;
    --bg-surface: #ffffff;
    --bg-sidebar: var(--pa-navy-900);
    --bg-sidebar-active: rgba(59, 130, 201, .18);
    --bg-topbar: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-inverse: #ffffff;
    --border-color: #e2e8f0;
    --accent-primary: var(--pa-blue-600);
    --accent-primary-hover: var(--pa-navy-800);
    --accent-success: var(--pa-green-600);
    --accent-gold: var(--pa-gold-500);
    --card-shadow: 0 1px 5px rgba(0,0,0,.08);
    --table-head-bg: var(--pa-navy-900);
    --input-bg: #ffffff;
}

/* ── Semantic tokens — DARK MODE ── */
[data-theme="dark"] {
    --bg-body: #0b1220;
    --bg-surface: #1a2332;
    --bg-sidebar: #060c18;
    --bg-sidebar-active: rgba(59, 130, 201, .22);
    --bg-topbar: #1a2332;
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-inverse: #ffffff;
    --border-color: #2c3a52;
    --accent-primary: var(--pa-blue-500);
    --accent-primary-hover: var(--pa-blue-600);
    --accent-success: var(--pa-green-500);
    --accent-gold: var(--pa-gold-400);
    --card-shadow: 0 1px 6px rgba(0,0,0,.5);
    --table-head-bg: #060c18;
    --input-bg: #131c2c;
}

/* ── Base ── */
body {
    background: var(--bg-body) !important;
    color: var(--text-primary) !important;
}

/* ── Sidebar ── */
.sidebar {
    background: var(--bg-sidebar) !important;
}
.sidebar-brand .logo-icon {
    background: var(--accent-primary) !important;
}
.sidebar a.active {
    background: var(--bg-sidebar-active) !important;
    border-left-color: var(--pa-blue-500) !important;
}
.sidebar a:hover {
    background: rgba(255,255,255,.06) !important;
}

/* ── Topbar ── */
.topbar {
    background: var(--bg-topbar) !important;
    border-bottom-color: var(--border-color) !important;
}
.topbar-left, .topbar-right { color: var(--text-primary) !important; }

/* ── Content area ── */
.content-area { background: transparent; }

/* ── Hero banners ── */
.page-hero,
.dash-hero,
.ledger-card .card-header,
.voucher-container h2,
.pdf-header-bar {
    background: linear-gradient(135deg, var(--pa-navy-900) 0%, var(--pa-navy-800) 100%) !important;
}

/* ── Section cards ── */
.section-card {
    background: var(--bg-surface) !important;
    box-shadow: var(--card-shadow) !important;
}
.section-card .card-header {
    background: var(--bg-surface) !important;
    border-bottom-color: var(--border-color) !important;
}
.section-card .card-header h6,
.section-card .card-header h5 {
    color: var(--text-primary) !important;
}
.section-card .card-header .s-icon,
.section-card .card-header .section-icon {
    background: var(--accent-primary) !important;
}
.section-card > .card-body,
.section-card .card-body {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

/* ── Tables ── */
.pa-table thead th,
.fin-table thead th,
.results-table thead tr,
table th,
.table-dark,
thead.table-dark {
    background: var(--table-head-bg) !important;
    color: var(--pa-white) !important;
}
.pa-table tbody td,
.results-table tbody td {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.pa-table tbody tr:hover td { background: rgba(59,130,201,.06) !important; }

/* ── Forms ── */
.form-control, .form-select, textarea {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
.form-label { color: var(--text-secondary) !important; }

/* ── Buttons ── */
.btn-primary,
.btn.btn-primary,
button.btn-primary {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}
.btn-primary:hover {
    background-color: var(--accent-primary-hover) !important;
    border-color: var(--accent-primary-hover) !important;
}
.btn-save,
.btn-login {
    background: linear-gradient(135deg, var(--pa-navy-900), var(--pa-navy-800)) !important;
}
.btn-hero-ghost {
    border-color: rgba(255,255,255,.25) !important;
}

/* ── Icon buttons ── */
.btn-icon-blue,
.vno-link, .rcpt-link, .last-voucher-link {
    color: var(--accent-primary) !important;
}
.btn-icon-blue { background: rgba(45,108,181,.12) !important; }
.btn-icon-green,
.badge-balance.none,
.pa-badge-green {
    background: rgba(63,145,66,.14) !important;
    color: var(--accent-success) !important;
}
.btn-icon-yellow, .pa-badge-yellow {
    background: rgba(183,134,47,.15) !important;
    color: var(--accent-gold) !important;
}

/* ── Alerts ── */
.alert-success {
    background: rgba(63,145,66,.10) !important;
    color: var(--accent-success) !important;
}
.alert-danger  { background: rgba(220,38,38,.10) !important; color: #dc2626 !important; }
.alert-warning { background: rgba(183,134,47,.12) !important; color: var(--accent-gold) !important; }
.alert-info    { background: rgba(45,108,181,.10) !important; color: var(--accent-primary) !important; }

/* ── Links ── */
a { color: var(--accent-primary); }
a:hover { color: var(--accent-primary-hover); }

/* ── Login page ── */
body.login-body,
.login-brand .logo-icon {
    background: linear-gradient(135deg, var(--accent-primary), var(--pa-navy-800)) !important;
}

/* ── Theme toggle switch ── */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.theme-toggle-btn:hover {
    background: rgba(59,130,201,.1);
    color: var(--accent-primary);
}