/* public/assets/css/globals.css — Boutique Studio Custom Masjid One Visual Identity & Glassmorphism */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Manrope:wght@300;400;500;600;700&family=Amiri:wght@400;700&display=swap');

/* ═══════════════════════════════════════════
   DESIGN SYSTEM VARIABLE DEFINITIONS (MASJID ONE PALETTE)
   ═══════════════════════════════════════════ */
:root {
    /* --- Light Theme (White surfaces + navy/gold brand accents) ---
       Palette contrast-audited (WCAG AA, ≥4.5:1 for text) 2026-07. First pass
       deepened the cream canvas (#EAE0C8) per client request, but on the live
       site every surface — sidebar, canvas, and the translucent cream "glass"
       cards — read as the same flat beige, so cards had no visual separation.
       Cards are now solid opaque white; the canvas keeps only a whisper of warmth
       so white cards still read as distinctly "lifted" via shadow/border, and
       brand identity carries through navy/gold accents rather than a tinted page bg. */
    --canvas-bg: #F5F3ED; /* Soft warm off-white (was #EAE0C8 cream, then #FAF6EE) */
    --surface-base: #FFFFFF;
    --surface-card: #FFFFFF; /* Solid white (was translucent cream glass rgba(242,235,221,0.78)) */

    /* Midnight / Slate Base — text/surface hierarchy */
    --text-primary: #0B1A33; /* Midnight */
    --text-secondary: #46506A; /* Ink Slate */
    --text-muted: #625C4C; /* Stone (was #8A8474, 3.73:1 — now 6.66:1 on white) */

    /* Masjid One Accents */
    --accent-primary: #13294B; /* Masjid Navy */
    --accent-primary-rgb: 19, 41, 75;
    --accent-secondary: #8C6A2E; /* Antique Gold (was #B99653, 2.78:1 — now 4.98:1 on white) */
    --accent-secondary-rgb: 140, 106, 46;

    /* Semantic Colors (Finance Grade) — deepened for readable financial figures */
    --color-success: #157A4E; /* was #1B8A5A, 4.35:1 — now 5.35:1 */
    --color-warning: #9C6304; /* was #D98E04, 2.68:1 — now 5.00:1 */
    --color-danger: #B23A2B;  /* was #C44536, 4.94:1 — now 5.94:1 */

    --color-success-bg: rgba(21, 122, 78, 0.10);
    --color-warning-bg: rgba(156, 99, 4, 0.10);
    --color-danger-bg: rgba(178, 58, 43, 0.10);

    /* --- Rotational Geometry Grids (Base 12px * 1.414 Silver Ratio) --- */
    --space-xs: 6px;
    --space-sm: 12px;
    --space-md: 17px;
    --space-lg: 24px;
    --space-xl: 34px;
    --space-2xl: 48px;

    /* --- Radius Scales --- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 17px;
    --radius-xl: 24px;
    --radius-khatim: 24px;

    /* --- Typography Pairing --- */
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Manrope', sans-serif;
    --font-arabic: 'Amiri', serif;

    /* --- Glassmorphism Specs --- */
    --glass-blur: 20px;
    --glass-border: rgba(185, 150, 83, 0.18); /* Soft gold-tinted border */
    --glass-shadow: 0 4px 20px 0 rgba(19, 41, 75, 0.07); /* Stronger — now the main cue separating white cards from the near-white canvas */
}

/* ═══════════════════════════════════════════
   GLOBAL RESET & STRUCTURE
   ═══════════════════════════════════════════ */
body {
    background-color: var(--canvas-bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;

    /* Ambient base layer radial gradient blobs */
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(var(--accent-primary-rgb), 0.05) 0%, transparent 60%),
        radial-gradient(circle at 90% 80%, rgba(var(--accent-secondary-rgb), 0.04) 0%, transparent 60%);
    background-attachment: fixed;
}

/* Tabular number representation in financial widgets */
td, th, .metric-number, .currency-symbol {
    font-variant-numeric: tabular-nums;
}

/* Thin Girih geometric divider styling */
.girih-divider {
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Cpath d='M0 4 L10 0 L20 4 L30 8 L40 4' fill='none' stroke='%231652A8' stroke-width='0.5' opacity='0.3'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    border: none;
    margin: var(--space-lg) 0;
}

/* ═══════════════════════════════════════════
   THEME STYLING UTILITY FORCES (IMMUNE TO TW OVERRIDES)
   ═══════════════════════════════════════════ */
.theme-bg-canvas { background-color: var(--canvas-bg) !important; }
.theme-bg-surface { background-color: var(--surface-base) !important; }
.theme-bg-card { background-color: var(--surface-card) !important; }
.theme-text-primary { color: var(--text-primary) !important; }
.theme-text-secondary { color: var(--text-secondary) !important; }
.theme-border { border-color: rgba(var(--accent-primary-rgb), 0.08) !important; }

.sidebar-custom {
    background-color: var(--surface-card) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
}

.mobile-drawer-inner {
    background-color: var(--surface-card) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    border-color: var(--glass-border) !important;
    color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════
   UNIFIED PALETTE ENFORCEMENT
   Individual pages were built with ad-hoc Tailwind color
   utilities (teal/emerald/rose/indigo/sky/amber/slate/gray)
   instead of the theme tokens above — this is the source of
   the "mixing green/cream tones inconsistently" issue. Rather
   than hand-edit every page, remap the whole family to the
   theme's semantic tokens in one place so every page (including
   ones not directly touched in this pass) renders consistently.
   Some classes referenced below (teal-650/850, rose-550,
   slate-450/350, gray-150, indigo-850, sky-850, amber-850,
   text-navy-dark, text-xxs) aren't real Tailwind/Bootstrap
   utilities — they were silent no-ops rendering unstyled text.
   ═══════════════════════════════════════════ */
.text-navy-dark { color: var(--accent-primary) !important; }
.text-xxs { font-size: 10px !important; }

/* Teal / Emerald family -> Success (income) */
.text-teal-650, .text-teal-700, .text-teal-800, .text-teal-850,
.text-teal-900, .text-teal-950,
.text-emerald-700, .text-emerald-800, .text-emerald-900 {
    color: var(--color-success) !important;
}
.bg-teal-50, .bg-emerald-50, .bg-emerald-100, .bg-emerald-700, .bg-emerald-800 {
    background-color: var(--color-success-bg) !important;
}
.border-t-teal-700, .border-teal-700, .border-teal-100, .border-teal-850,
.border-emerald-100, .border-emerald-600, .border-emerald-200, .border-emerald-800 {
    border-color: rgba(21, 122, 78, 0.25) !important;
}

/* Rose / Red family -> Danger (expense) */
.text-rose-500, .text-rose-550, .text-rose-700, .text-rose-850, .text-rose-950,
.text-red-600, .text-red-700, .text-red-800 {
    color: var(--color-danger) !important;
}
.bg-rose-50, .bg-red-50, .bg-red-100 {
    background-color: var(--color-danger-bg) !important;
}
.border-t-rose-700, .border-rose-700, .border-red-200 {
    border-color: rgba(178, 58, 43, 0.25) !important;
}

/* Amber / Yellow family -> Warning */
.text-amber-700, .text-amber-800, .text-amber-850, .text-yellow-800 {
    color: var(--color-warning) !important;
}
.bg-amber-50 {
    background-color: var(--color-warning-bg) !important;
}

/* Indigo / Sky family -> Accent Primary (Navy) */
.text-indigo-700, .text-indigo-850, .text-sky-700, .text-sky-850 {
    color: var(--accent-primary) !important;
}
.bg-indigo-50, .bg-sky-50 {
    background-color: rgba(var(--accent-primary-rgb), 0.06) !important;
}

/* Neutral grays/slates -> theme text hierarchy (also fixes invalid
   custom shades slate-450/350 and gray-150 that were previously no-ops) */
.text-slate-300, .text-slate-350, .text-slate-400,
.text-gray-150, .text-gray-400 {
    color: var(--text-muted) !important;
}
.text-slate-450, .text-slate-500, .text-slate-600, .text-slate-650, .text-slate-700,
.text-gray-500, .text-gray-600, .text-gray-700 {
    color: var(--text-secondary) !important;
}
.text-slate-800, .text-gray-800, .text-gray-900 {
    color: var(--text-primary) !important;
}
.border-gray-100, .border-gray-150, .border-gray-200, .border-gray-300,
.border-slate-50, .border-slate-100, .border-slate-200, .border-slate-300, .border-slate-800 {
    border-color: rgba(var(--accent-primary-rgb), 0.1) !important;
}
.bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-gray-100, .bg-slate-200 {
    background-color: rgba(var(--accent-primary-rgb), 0.04) !important;
}

/* Stragglers: low-frequency ad-hoc/invalid shades found elsewhere in the app */
.text-emerald-955, .text-rose-800, .text-rose-900, .text-rose-450, .text-red-800, .text-red-500 {
    color: var(--color-danger) !important;
}
.text-emerald-600 { color: var(--color-success) !important; }
.border-emerald-500, .border-teal-700, .border-teal-600 {
    border-color: rgba(21, 122, 78, 0.25) !important;
}
.border-red-600, .border-rose-700, .border-rose-100 {
    border-color: rgba(178, 58, 43, 0.25) !important;
}
.bg-yellow-100 { background-color: var(--color-warning-bg) !important; }
.bg-emerald-400, .bg-emerald-500 { background-color: var(--color-success) !important; }

/* Bootstrap stock semantic components -> theme tokens
   (these were rendering Bootstrap's default green/red/yellow,
   a 2nd/3rd competing "success"/"danger" alongside the theme's own) */
.btn-success {
    background-color: var(--color-success) !important;
    color: #FFFFFF !important;
    border-color: var(--color-success) !important;
}
.btn-success:hover { background-color: #10603e !important; border-color: #10603e !important; }
.btn-outline-success {
    background-color: transparent !important;
    color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}
.btn-outline-success:hover { background-color: var(--color-success) !important; color: #FFFFFF !important; }
.btn-warning {
    background-color: var(--color-warning) !important;
    color: #FFFFFF !important;
    border-color: var(--color-warning) !important;
}
.btn-warning:hover { background-color: #7d5003 !important; border-color: #7d5003 !important; }
.btn-outline-warning {
    background-color: transparent !important;
    color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
}
.btn-outline-warning:hover { background-color: var(--color-warning) !important; color: #FFFFFF !important; }

/* .btn-outline-primary/-secondary were undefined too, falling back to Bootstrap's
   stock blue/gray outline styling instead of the navy brand palette. */
.btn-outline-primary {
    background-color: transparent !important;
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}
.btn-outline-primary:hover { background-color: var(--accent-primary) !important; color: #FFFFFF !important; }
.btn-outline-secondary {
    background-color: rgba(var(--accent-primary-rgb), 0.05) !important;
    color: var(--accent-primary) !important;
    border-color: rgba(var(--accent-primary-rgb), 0.15) !important;
}
.btn-outline-secondary:hover { background-color: rgba(var(--accent-primary-rgb), 0.1) !important; }

.alert-success { background-color: var(--color-success-bg) !important; color: var(--color-success) !important; border-color: rgba(21, 122, 78, 0.2) !important; }
.alert-danger { background-color: var(--color-danger-bg) !important; color: var(--color-danger) !important; border-color: rgba(178, 58, 43, 0.2) !important; }
.alert-warning { background-color: var(--color-warning-bg) !important; color: var(--color-warning) !important; border-color: rgba(156, 99, 4, 0.2) !important; }
.alert-info { background-color: rgba(var(--accent-primary-rgb), 0.06) !important; color: var(--accent-primary) !important; border-color: rgba(var(--accent-primary-rgb), 0.15) !important; }

.modal-header.bg-success { background-color: var(--color-success) !important; border-color: var(--color-success) !important; }
.modal-header.bg-danger { background-color: var(--color-danger) !important; border-color: var(--color-danger) !important; }

/* Same family, but as Tailwind opacity-modifier variants (e.g. bg-teal-50/20) —
   these compile to distinct literal class names so need their own selectors.
   Deliberately NOT touching bg-slate-950/* or border-slate-800/* — those are
   an intentional dark card treatment on the public landing page (index.php),
   not a stray/inconsistent color. */
.border-slate-200\/50, .border-slate-200\/60, .border-slate-250\/20,
.border-gray-200\/80, .border-gray-200\/50, .border-slate-100\/50 {
    border-color: rgba(var(--accent-primary-rgb), 0.1) !important;
}
.border-teal-100\/50 { border-color: rgba(21, 122, 78, 0.25) !important; }
.bg-teal-50\/20, .bg-teal-50\/50, .bg-teal-50\/10, .bg-emerald-50\/50, .bg-emerald-50\/30 {
    background-color: var(--color-success-bg) !important;
}
.bg-rose-50\/20, .bg-rose-50\/10 {
    background-color: var(--color-danger-bg) !important;
}
.bg-slate-50\/50, .bg-slate-50\/60, .bg-slate-50\/20, .bg-slate-200\/50, .bg-gray-50\/50 {
    background-color: rgba(var(--accent-primary-rgb), 0.04) !important;
}

/* ═══════════════════════════════════════════
   NUMERIC FIGURES (dashboard stats, card totals, ledger amounts)
   Was riding on .display-font (Cormorant Garamond serif) like headings —
   fine for a heading, but serif digits at these sizes look thin/uneven.
   Sans-serif + tabular numerals reads far more clearly for money/counts.
   ═══════════════════════════════════════════ */
.fin-figure {
    font-family: var(--font-body) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════
   FINANCIAL REPORT COMPONENTS
   Shared building blocks for income/expense breakdown tables
   (P&L, Category Breakdown, Cash Logs) — larger, bolder figures
   per client feedback that report text was too small to scan.
   ═══════════════════════════════════════════ */
/* Compound with .card/.card-header (they're always co-applied on the same element)
   so these win specificity over the base .card border/.card-header background,
   which are declared further down and would otherwise cascade-win despite being
   both !important and equal single-class specificity. */
.fin-card-income, .card.fin-card-income { border-top: 4px solid var(--color-success) !important; }
.fin-card-expense, .card.fin-card-expense { border-top: 4px solid var(--color-danger) !important; }
.fin-card-header-income, .card-header.fin-card-header-income { background-color: var(--color-success-bg) !important; }
.fin-card-header-expense, .card-header.fin-card-header-expense { background-color: var(--color-danger-bg) !important; }
.fin-card-title-income { color: var(--color-success) !important; }
.fin-card-title-expense { color: var(--color-danger) !important; }

/* !important needed: these apply to <td> elements, and .table tbody td (further
   below) has higher selector specificity (0,1,2 vs 0,1,0) so would otherwise win
   even though it's declared earlier. */
.fin-label { font-size: 14px; font-weight: 600; color: var(--text-primary) !important; }
.fin-sublabel { font-size: 11.5px; color: var(--text-muted) !important; }
.fin-amount { font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fin-currency { font-size: 12px; font-weight: 600; opacity: 0.8; }

/* Dedicated color variants (rather than inline text-[var(--...)] utilities) —
   Tailwind arbitrary-value classes are non-important and lose to .table tbody td's
   color rule (higher specificity) further below, so amounts silently rendered as
   plain secondary-gray instead of green/red/navy. These carry !important instead. */
.fin-amount-success { color: var(--color-success) !important; }
.fin-amount-danger { color: var(--color-danger) !important; }
.fin-amount-primary { color: var(--accent-primary) !important; }
.fin-amount-neutral { color: var(--text-primary) !important; }
.fin-amount-warning { color: var(--color-warning) !important; }
.fin-empty-msg { color: var(--text-muted) !important; }

.fin-total-row {
    font-size: 17px !important;
    font-weight: 800 !important;
    padding: var(--space-md) var(--space-lg) !important;
}
.fin-total-row .fin-currency { font-size: 13px; opacity: 0.85; }

/* ═══════════════════════════════════════════
   DARK MODE TEXT CONTRAST INJECTIONS
   ═══════════════════════════════════════════ */
body.dark-theme, html.dark {
    color: var(--text-primary) !important;
}

body.dark-theme h1, body.dark-theme h2, body.dark-theme h3, body.dark-theme h4, body.dark-theme h5, body.dark-theme h6,
body.dark-theme .display-font,
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html.dark .display-font {
    color: var(--text-primary) !important;
}

body.dark-theme .text-navy-dark,
body.dark-theme .text-teal-950,
body.dark-theme .text-gray-900,
body.dark-theme .text-slate-800,
body.dark-theme .text-slate-700,
body.dark-theme .text-gray-800,
html.dark .text-navy-dark,
html.dark .text-teal-950,
html.dark .text-gray-900,
html.dark .text-slate-800,
html.dark .text-slate-700,
html.dark .text-gray-800 {
    color: var(--text-primary) !important;
}

body.dark-theme .text-slate-500,
body.dark-theme .text-gray-500,
body.dark-theme .text-slate-600,
body.dark-theme .text-gray-600,
html.dark .text-slate-500,
html.dark .text-gray-500,
html.dark .text-slate-600,
html.dark .text-gray-600 {
    color: var(--text-secondary) !important;
}

body.dark-theme .text-slate-400,
body.dark-theme .text-gray-400,
html.dark .text-slate-400,
html.dark .text-gray-400 {
    color: var(--text-muted) !important;
}

/* Background overrides in dark mode */
body.dark-theme .bg-white,
body.dark-theme .bg-light,
body.dark-theme .bg-slate-50,
body.dark-theme .bg-gray-50,
body.dark-theme .bg-slate-100,
html.dark .bg-white,
html.dark .bg-light,
html.dark .bg-slate-50,
html.dark .bg-gray-50,
html.dark .bg-slate-100 {
    background-color: var(--surface-card) !important;
}

body.dark-theme .bg-teal-50,
body.dark-theme .bg-emerald-50,
html.dark .bg-teal-50,
html.dark .bg-emerald-50 {
    background-color: var(--color-success-bg) !important;
}

body.dark-theme .bg-rose-50,
body.dark-theme .bg-red-50,
html.dark .bg-rose-50,
html.dark .bg-red-50 {
    background-color: var(--color-danger-bg) !important;
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY PAIRING
   ═══════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6, .display-font {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 0;
}

p {
    color: var(--text-secondary);
}

.font-arabic {
    font-family: var(--font-arabic);
}

/* ═══════════════════════════════════════════
   LAYOUT CONTAINERS & GLASSMORPHIC CARDS
   ═══════════════════════════════════════════ */
.card {
    background: var(--surface-card) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-xl) !important;
    padding: var(--space-lg) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease !important;
}

.card:hover {
    box-shadow: var(--glass-shadow) !important;
    transform: translateY(-2px);
}

.card-header {
    background: transparent !important;
    border-bottom: 1.5px solid var(--glass-border) !important;
    padding: 0 0 var(--space-sm) 0 !important;
    margin-bottom: var(--space-md);
}

/* Bento grid card ratios */
.bento-card {
    border-radius: var(--radius-khatim) !important;
}

/* Metric summary card styles */
.stat-card {
    background: var(--surface-card) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border) !important;
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ═══════════════════════════════════════════
   SIGNATURE CUSTOM SPINNER (KHATIM STAR COBALT-TO-TURQUOISE)
   ═══════════════════════════════════════════ */
.khatim-spinner {
    width: 48px;
    height: 48px;
    position: relative;
    animation: rotate-khatim 8s infinite linear;
    margin: 20px auto;
}

.khatim-spinner svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: url(#khatim-gradient);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Frosted glass medallion etched appearance */
    filter: drop-shadow(1px 1px 1px rgba(255,255,255,0.4)) drop-shadow(-1px -1px 1px rgba(0,0,0,0.15));
}

@keyframes rotate-khatim {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════
   BUTTON SYSTEM (GEOMETRIC & ACCENT CONTROL)
   ═══════════════════════════════════════════ */
.btn {
    font-family: var(--font-body) !important; /* was --font-display (serif) — same thin/hard-to-read issue at button-label sizes as the sidebar nav and table headers */
    font-weight: 700 !important;
    font-size: 13px !important;
    border-radius: var(--radius-md) !important;
    padding: 0.65rem 1.5rem !important;
    border: 1.5px solid transparent !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.btn-primary {
    background-color: var(--accent-primary) !important;
    color: #FFFFFF !important;
    backdrop-filter: blur(8px);
}

.btn-primary:hover {
    background-color: rgba(var(--accent-primary-rgb), 0.85) !important;
    border-color: rgba(var(--accent-primary-rgb), 0.85) !important;
}

.btn-secondary {
    background-color: rgba(var(--accent-primary-rgb), 0.05) !important;
    color: var(--accent-primary) !important;
    border-color: rgba(var(--accent-primary-rgb), 0.1) !important;
}

.btn-secondary:hover {
    background-color: rgba(var(--accent-primary-rgb), 0.1) !important;
}

/* Solid variant for prominent/serious destructive actions (Logout, Confirm Reversal) —
   previously identical to btn-outline-danger below, so "Logout" rendered as a
   low-contrast tinted pill instead of a clearly visible button. */
.btn-danger {
    background-color: var(--color-danger) !important;
    color: #FFFFFF !important;
    border-color: var(--color-danger) !important;
}
.btn-danger:hover {
    background-color: #8F2F22 !important;
    border-color: #8F2F22 !important;
}

/* Subtle tinted variant for secondary/inline destructive actions (row-level delete/remove) */
.btn-outline-danger {
    background-color: var(--color-danger-bg) !important;
    color: var(--color-danger) !important;
    border-color: rgba(178, 58, 43, 0.15) !important;
}
.btn-outline-danger:hover {
    background-color: var(--color-danger) !important;
    color: #FFFFFF !important;
    border-color: var(--color-danger) !important;
}

/* Keyboard focus states */
.btn:focus, .form-control:focus, .form-select:focus {
    outline: 2px solid var(--accent-primary) !important;
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════
   FORM CONTROL OVERRIDES (BYPASS DEFAULTS)
   ═══════════════════════════════════════════ */
.form-control, .form-select {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    background-color: var(--surface-base) !important;
    border: 1.5px solid rgba(var(--accent-primary-rgb), 0.15) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    padding: 0.65rem 1rem !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--accent-secondary) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-secondary-rgb), 0.1) !important;
}

.form-label, label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* Custom switch override */
.form-check-input:checked {
    background-color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* ═══════════════════════════════════════════
   TABULAR DENSE DATA TABLES (STAY SOLID & HIGH CONTRAST)
   ═══════════════════════════════════════════ */
.table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text-primary);
}

.table thead th {
    background-color: rgba(var(--accent-primary-rgb), 0.06) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-body); /* was --font-display (serif) — same thin/hard-to-read issue as the sidebar nav at this small a size */
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem var(--space-md) !important;
    border-bottom: 1.5px solid rgba(var(--accent-primary-rgb), 0.15) !important;
}

.table tbody td {
    padding: 0.95rem var(--space-md) !important;
    border-bottom: 1px solid rgba(var(--accent-primary-rgb), 0.05) !important;
    color: var(--text-secondary);
    background-color: var(--surface-base) !important; /* Solid contrast backgrounds to prevent blur overlay issues */
}

.table tbody tr:hover td {
    background-color: rgba(var(--accent-primary-rgb), 0.02) !important;
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════
   SEMANTIC BADGES & CHIPS
   ═══════════════════════════════════════════ */
.badge {
    font-family: var(--font-body) !important; /* was --font-display (serif) — unreadable at 10px */
    font-size: 10.5px !important; /* was 10px */
    font-weight: 700 !important;
    padding: 4px 9px !important;
    border-radius: var(--radius-sm) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge.bg-success {
    background-color: var(--color-success-bg) !important;
    color: var(--color-success) !important;
}

.badge.bg-warning {
    background-color: var(--color-warning-bg) !important;
    color: var(--color-warning) !important;
}

.badge.bg-danger {
    background-color: var(--color-danger-bg) !important;
    color: var(--color-danger) !important;
}

.badge.bg-secondary {
    background-color: rgba(102, 112, 133, 0.1) !important;
    color: var(--text-secondary) !important;
}

/* ═══════════════════════════════════════════
   VERTICAL SIDEBAR NAVIGATION
   ═══════════════════════════════════════════ */
.active-nav-link {
    background-color: rgba(var(--accent-primary-rgb), 0.1) !important;
    color: var(--accent-primary) !important;
    font-weight: 700;
    border-left: 3px solid var(--accent-secondary) !important;
}

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVENESS OVERRIDES
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    body {
        font-size: 13px;
        background-attachment: scroll !important;
    }
    
    .card {
        padding: var(--space-md) !important;
        border-radius: var(--radius-lg) !important;
    }

    .form-control, .form-select {
        padding: 0.55rem 0.85rem !important;
    }

    .btn {
        padding: 0.5rem 1.1rem !important;
    }

    .table thead th {
        font-size: 10px;
        padding: 0.75rem var(--space-sm) !important;
    }

    .table tbody td {
        padding: 0.75rem var(--space-sm) !important;
    }
}