/**
 * Dashboard appearance themes (client-side, per-device preference stored in
 * localStorage - see theme-picker.js). "ocean" mirrors the business's
 * configured brand colour by default; the other three are independent
 * accent + light/dark combinations a user can switch to for their own view.
 * Printed documents (invoices/receipts/statements) intentionally ignore
 * this and always render light, for print/PDF consistency.
 */

[data-theme="midnight"] { --app-accent: #4d8fe0; --app-accent-dark: #2f5f9e; }
[data-theme="emerald"]  { --app-accent: #0f9d68; --app-accent-dark: #0b7a51; }
[data-theme="sunset"]   { --app-accent: #f0a030; --app-accent-dark: #c67d1c; }

/* Buttons, active states, links - only fires for non-default themes; the
   default "ocean" theme already matches the server-rendered brand colour. */
[data-theme="midnight"] .btn-primary,
[data-theme="emerald"] .btn-primary,
[data-theme="sunset"] .btn-primary {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
}
[data-theme="midnight"] .btn-primary:hover,
[data-theme="emerald"] .btn-primary:hover,
[data-theme="sunset"] .btn-primary:hover {
    background-color: var(--app-accent-dark);
    border-color: var(--app-accent-dark);
}
[data-theme="midnight"] .btn-outline-primary,
[data-theme="emerald"] .btn-outline-primary,
[data-theme="sunset"] .btn-outline-primary {
    color: var(--app-accent);
    border-color: var(--app-accent);
}
[data-theme="midnight"] .btn-outline-primary:hover,
[data-theme="emerald"] .btn-outline-primary:hover,
[data-theme="sunset"] .btn-outline-primary:hover {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
    color: #fff;
}
[data-theme="midnight"] a:not(.btn),
[data-theme="emerald"] a:not(.btn),
[data-theme="sunset"] a:not(.btn) { color: var(--app-accent); }
[data-theme="midnight"] .sidebar a:hover, [data-theme="midnight"] .sidebar a.active,
[data-theme="emerald"] .sidebar a:hover, [data-theme="emerald"] .sidebar a.active,
[data-theme="sunset"] .sidebar a:hover, [data-theme="sunset"] .sidebar a.active { background: var(--app-accent); }
[data-theme="midnight"] .balance-card,
[data-theme="emerald"] .balance-card,
[data-theme="sunset"] .balance-card { background: linear-gradient(135deg, var(--app-accent), var(--app-accent-dark)); }
[data-theme="midnight"] .bottom-nav a.active,
[data-theme="emerald"] .bottom-nav a.active,
[data-theme="sunset"] .bottom-nav a.active { color: var(--app-accent); }
[data-theme="midnight"] .page-item.active .page-link,
[data-theme="emerald"] .page-item.active .page-link,
[data-theme="sunset"] .page-item.active .page-link { background-color: var(--app-accent); border-color: var(--app-accent); }
[data-theme="midnight"] .nav-pills .nav-link.active,
[data-theme="emerald"] .nav-pills .nav-link.active,
[data-theme="sunset"] .nav-pills .nav-link.active { background-color: var(--app-accent); }
[data-theme="midnight"] .text-primary,
[data-theme="emerald"] .text-primary,
[data-theme="sunset"] .text-primary { color: var(--app-accent) !important; }

/* Dark-mode surface tweaks. Bootstrap 5.3's data-bs-theme="dark" already
   re-themes cards/tables/forms/navbars automatically; these just cover our
   own hand-rolled components (sidebar, bottom nav, hero). */
[data-bs-theme="dark"] body { background-color: #12151c; }
[data-bs-theme="dark"] .sidebar { background: #0a0d13; }
[data-bs-theme="dark"] .bottom-nav { background: #1a1f29; border-top-color: #2a2f3b; }
[data-bs-theme="dark"] .bottom-nav a { color: #8b93a3; }
[data-bs-theme="dark"] .navbar.bg-white { background-color: #191d26 !important; border-color: #2a2f3b !important; }
[data-bs-theme="dark"] .card { box-shadow: none; }
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] thead.table-light { --bs-table-bg: #1e232e; --bs-table-color: #e8ebf0; }
[data-bs-theme="dark"] .hero-landing { background: linear-gradient(160deg, #0a0d13, #171c26); }

/* Theme picker widget */
.theme-picker { display: flex; align-items: center; gap: 6px; }
.theme-swatch {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(0,0,0,.08);
    cursor: pointer; padding: 0; display: inline-block; position: relative;
}
[data-bs-theme="dark"] .theme-swatch { border-color: rgba(255,255,255,.2); }
.theme-swatch.active { outline: 2px solid var(--bs-primary, #0050a8); outline-offset: 2px; }
.theme-swatch[data-swatch="ocean"] { background: #0050a8; }
.theme-swatch[data-swatch="midnight"] { background: #001850; }
.theme-swatch[data-swatch="emerald"] { background: #0f9d68; }
.theme-swatch[data-swatch="sunset"] { background: linear-gradient(135deg, #f0a030, #12151c 60%); }