/* ═══════════════════════════════════════════════════════════════════
   Fanta Port — Theme System
   5 themes: default (light), dark, midnight, sepia, high-contrast
   Uses Bootstrap 5.3 CSS variables + custom properties.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Custom properties used by our code ───────────────────────── */
:root {
    --fp-navbar-bg: #212529;
    --fp-navbar-text: rgba(255,255,255,.85);
    --fp-footer-bg: #f8f9fa;
    --fp-footer-text: #6c757d;
    --fp-card-hover-shadow: rgba(0,0,0,0.1);
    --fp-chart-grid: rgba(0,0,0,0.1);
    --fp-chart-text: #666;
    --fp-pie-border: #fff;
    --fp-link-color: #0d6efd;
}

/* ─── Default (light) — no overrides needed ────────────────────── */

/* ─── Dark (Bloomberg-inspired) ────────────────────────────────── */
[data-theme="dark"] {
    --bs-body-bg: #1e1e1e;
    --bs-body-color: #e0e0e0;
    --bs-secondary-bg: #2d2d2d;
    --bs-tertiary-bg: #363636;
    --bs-card-bg: #2d2d2d;
    --bs-card-border-color: #404040;
    --bs-border-color: #404040;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,0.03);
    --bs-table-hover-bg: rgba(255,255,255,0.05);

    --fp-navbar-bg: #161616;
    --fp-footer-bg: #161616;
    --fp-footer-text: #9e9e9e;
    --fp-card-hover-shadow: rgba(0,0,0,0.4);
    --fp-chart-grid: rgba(255,255,255,0.1);
    --fp-chart-text: #aaa;
    --fp-pie-border: #2d2d2d;
    --fp-link-color: #6ea8fe;

    color-scheme: dark;
}
[data-theme="dark"] .bg-light { background-color: #2d2d2d !important; color: #e0e0e0 !important; }
[data-theme="dark"] .text-muted { color: #9e9e9e !important; }
[data-theme="dark"] .text-dark { color: #e0e0e0 !important; }
[data-theme="dark"] .border-top { border-color: #404040 !important; }
[data-theme="dark"] .table { --bs-table-color: #e0e0e0; }
[data-theme="dark"] .card { background-color: #2d2d2d; border-color: #404040; }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select {
    background-color: #363636; color: #e0e0e0; border-color: #505050;
}
[data-theme="dark"] .input-group-text { background-color: #404040; color: #e0e0e0; border-color: #505050; }
[data-theme="dark"] .dropdown-menu { background-color: #2d2d2d; border-color: #404040; }
[data-theme="dark"] .dropdown-item { color: #e0e0e0; }
[data-theme="dark"] .dropdown-item:hover { background-color: #404040; }
[data-theme="dark"] .dropdown-item.active { background-color: #0d6efd; }
[data-theme="dark"] .alert-light { background-color: #363636; border-color: #505050; color: #e0e0e0; }
[data-theme="dark"] .badge.bg-warning { background-color: #ffc107 !important; color: #000 !important; }
[data-theme="dark"] .badge.bg-info { background-color: #0dcaf0 !important; color: #000 !important; }
[data-theme="dark"] .breadcrumb { --bs-breadcrumb-divider-color: #9e9e9e; }
[data-theme="dark"] .breadcrumb-item a { color: var(--fp-link-color); }
[data-theme="dark"] a { color: var(--fp-link-color); }
[data-theme="dark"] .badge.bg-light { background-color: #404040 !important; color: #e0e0e0 !important; }
[data-theme="dark"] .table-light { --bs-table-bg: #363636; --bs-table-color: #e0e0e0; }
[data-theme="dark"] .table-success { --bs-table-bg: #1a3a2a; --bs-table-color: #a3e4d7; }

/* ─── Midnight (TradingView-inspired deep blue) ────────────────── */
[data-theme="midnight"] {
    --bs-body-bg: #0f1923;
    --bs-body-color: #d1d4dc;
    --bs-secondary-bg: #1e2a3a;
    --bs-tertiary-bg: #253347;
    --bs-card-bg: #1e2a3a;
    --bs-card-border-color: #2a3f5f;
    --bs-border-color: #2a3f5f;

    --fp-navbar-bg: #0a1019;
    --fp-footer-bg: #0a1019;
    --fp-footer-text: #7b8a9e;
    --fp-card-hover-shadow: rgba(0,0,0,0.5);
    --fp-chart-grid: rgba(255,255,255,0.08);
    --fp-chart-text: #7b8a9e;
    --fp-pie-border: #1e2a3a;
    --fp-link-color: #5b9cf6;

    color-scheme: dark;
}
[data-theme="midnight"] .bg-light { background-color: #1e2a3a !important; color: #d1d4dc !important; }
[data-theme="midnight"] .text-muted { color: #7b8a9e !important; }
[data-theme="midnight"] .text-dark { color: #d1d4dc !important; }
[data-theme="midnight"] .border-top { border-color: #2a3f5f !important; }
[data-theme="midnight"] .table { --bs-table-color: #d1d4dc; }
[data-theme="midnight"] .card { background-color: #1e2a3a; border-color: #2a3f5f; }
[data-theme="midnight"] .form-control, [data-theme="midnight"] .form-select {
    background-color: #253347; color: #d1d4dc; border-color: #2a3f5f;
}
[data-theme="midnight"] .input-group-text { background-color: #253347; color: #d1d4dc; border-color: #2a3f5f; }
[data-theme="midnight"] .dropdown-menu { background-color: #1e2a3a; border-color: #2a3f5f; }
[data-theme="midnight"] .dropdown-item { color: #d1d4dc; }
[data-theme="midnight"] .dropdown-item:hover { background-color: #253347; }
[data-theme="midnight"] .dropdown-item.active { background-color: #2196f3; }
[data-theme="midnight"] .alert-light { background-color: #253347; border-color: #2a3f5f; color: #d1d4dc; }
[data-theme="midnight"] a { color: var(--fp-link-color); }
[data-theme="midnight"] .badge.bg-light { background-color: #253347 !important; color: #d1d4dc !important; }
[data-theme="midnight"] .badge.bg-warning { background-color: #ffc107 !important; color: #000 !important; }
[data-theme="midnight"] .badge.bg-info { background-color: #0dcaf0 !important; color: #000 !important; }
[data-theme="midnight"] .table-light { --bs-table-bg: #253347; --bs-table-color: #d1d4dc; }
[data-theme="midnight"] .table-success { --bs-table-bg: #132a20; --bs-table-color: #a3e4d7; }

/* ─── Sepia (warm reading mode) ────────────────────────────────── */
[data-theme="sepia"] {
    --bs-body-bg: #f8f1e3;
    --bs-body-color: #3e2723;
    --bs-secondary-bg: #f0e6d3;
    --bs-tertiary-bg: #e8dcc8;
    --bs-card-bg: #fdf6ec;
    --bs-card-border-color: #d7c9a8;
    --bs-border-color: #d7c9a8;

    --fp-navbar-bg: #5d4037;
    --fp-navbar-text: #f5e6d0;
    --fp-footer-bg: #efe5d3;
    --fp-footer-text: #795548;
    --fp-card-hover-shadow: rgba(93,64,55,0.15);
    --fp-chart-grid: rgba(62,39,35,0.1);
    --fp-chart-text: #795548;
    --fp-pie-border: #fdf6ec;
    --fp-link-color: #6d4c41;
}
[data-theme="sepia"] .bg-light { background-color: #efe5d3 !important; color: #3e2723 !important; }
[data-theme="sepia"] .text-muted { color: #795548 !important; }
[data-theme="sepia"] .border-top { border-color: #d7c9a8 !important; }
[data-theme="sepia"] .card { background-color: #fdf6ec; border-color: #d7c9a8; }
[data-theme="sepia"] .form-control, [data-theme="sepia"] .form-select {
    background-color: #fdf6ec; color: #3e2723; border-color: #d7c9a8;
}
[data-theme="sepia"] .input-group-text { background-color: #efe5d3; color: #3e2723; border-color: #d7c9a8; }
[data-theme="sepia"] .dropdown-menu { background-color: #fdf6ec; border-color: #d7c9a8; }
[data-theme="sepia"] .dropdown-item { color: #3e2723; }
[data-theme="sepia"] .dropdown-item:hover { background-color: #efe5d3; }
[data-theme="sepia"] a { color: var(--fp-link-color); }
[data-theme="sepia"] .table { --bs-table-color: #3e2723; }
[data-theme="sepia"] .table-light { --bs-table-bg: #f0e6d3; --bs-table-color: #3e2723; }
[data-theme="sepia"] .table-success { --bs-table-bg: #e0eed2; --bs-table-color: #2e5a1e; }
[data-theme="sepia"] .badge.bg-light { background-color: #efe5d3 !important; color: #3e2723 !important; }
[data-theme="sepia"] .btn-primary { background-color: #8d6e63; border-color: #795548; }
[data-theme="sepia"] .btn-primary:hover { background-color: #795548; border-color: #6d4c41; }

/* ─── High Contrast (accessibility) ────────────────────────────── */
[data-theme="high-contrast"] {
    --bs-body-bg: #000000;
    --bs-body-color: #ffffff;
    --bs-secondary-bg: #1a1a1a;
    --bs-tertiary-bg: #262626;
    --bs-card-bg: #1a1a1a;
    --bs-card-border-color: #ffffff;
    --bs-border-color: #ffffff;

    --fp-navbar-bg: #000000;
    --fp-footer-bg: #000000;
    --fp-footer-text: #ffffff;
    --fp-card-hover-shadow: rgba(255,255,255,0.2);
    --fp-chart-grid: rgba(255,255,255,0.2);
    --fp-chart-text: #fff;
    --fp-pie-border: #000;
    --fp-link-color: #ffff00;

    color-scheme: dark;
}
[data-theme="high-contrast"] .bg-light { background-color: #1a1a1a !important; color: #fff !important; }
[data-theme="high-contrast"] .text-muted { color: #cccccc !important; }
[data-theme="high-contrast"] .text-dark { color: #ffffff !important; }
[data-theme="high-contrast"] .badge.bg-warning { background-color: #ffc107 !important; color: #000 !important; }
[data-theme="high-contrast"] .badge.bg-info { background-color: #0dcaf0 !important; color: #000 !important; }
[data-theme="high-contrast"] .border-top { border-color: #ffffff !important; }
[data-theme="high-contrast"] .table { --bs-table-color: #fff; }
[data-theme="high-contrast"] .card { background-color: #1a1a1a; border: 2px solid #fff; }
[data-theme="high-contrast"] .form-control, [data-theme="high-contrast"] .form-select {
    background-color: #1a1a1a; color: #fff; border-color: #fff;
}
[data-theme="high-contrast"] .input-group-text { background-color: #262626; color: #fff; border-color: #fff; }
[data-theme="high-contrast"] .dropdown-menu { background-color: #1a1a1a; border: 2px solid #fff; }
[data-theme="high-contrast"] .dropdown-item { color: #fff; }
[data-theme="high-contrast"] .dropdown-item:hover { background-color: #333; }
[data-theme="high-contrast"] a { color: #ffff00; }
[data-theme="high-contrast"] .badge.bg-light { background-color: #333 !important; color: #fff !important; }
[data-theme="high-contrast"] .badge.bg-secondary { background-color: #555 !important; }
[data-theme="high-contrast"] .btn-outline-secondary { color: #fff; border-color: #fff; }
[data-theme="high-contrast"] .table-light { --bs-table-bg: #262626; --bs-table-color: #fff; }
[data-theme="high-contrast"] .table-success { --bs-table-bg: #003300; --bs-table-color: #00ff00; }

/* ─── Shared: navbar and footer use custom properties ──────────── */
.navbar.fp-navbar { background-color: var(--fp-navbar-bg) !important; }
.navbar.fp-navbar .nav-link,
.navbar.fp-navbar .navbar-brand { color: var(--fp-navbar-text) !important; }
.navbar.fp-navbar .nav-link:hover { color: #fff !important; }

/* Nav labels: hide text between xl (1200px) and xxl (1400px), show icons only */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar.fp-navbar .nav-link .nav-label { display: none; }
    .navbar.fp-navbar .nav-link { font-size: 1.1rem; padding-left: 0.4rem; padding-right: 0.4rem; }
}

footer.fp-footer { background-color: var(--fp-footer-bg) !important; color: var(--fp-footer-text) !important; }