/* ============================================================================
 * Recuria design tokens - the single source of truth for colors, typography,
 * spacing, radius, shadows, and borders across the whole app (Web + MAUI).
 *
 * Change the brand color, a dark-mode surface tone, or the base font here and
 * every page/component picks it up automatically via var(--token-name) - no
 * hunting through dozens of .razor.css files. Local one-off overrides (e.g. a
 * page that needs extra margin) are fine to keep on that page; anything that
 * represents a reusable brand/theme decision belongs here instead.
 *
 * Linked directly in App.razor / MAUI's index.html, before app.css and the
 * component CSS bundle - link order doesn't affect var() resolution (custom
 * properties resolve at compute time), but tokens-first keeps the cascade
 * easy to reason about.
 * ============================================================================ */

:root {
    /* ---- Brand & status colors ---- */
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-light: rgba(79, 70, 229, 0.08);
    --secondary: #0ea5e9;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --danger-text: #991b1b;
    --danger-bg: #fef2f2;
    --danger-border: #fca5a5;

    /* ---- Extra accent colors (gradients, FAB, AI assistant, chart-style accents) ---- */
    --accent-indigo: #6366f1;
    --accent-blue: #3b82f6;
    --accent-blue-dark: #2563eb;
    --accent-cyan: #06b6d4;
    --accent-purple-deep: #1e1b4b;
    --accent-blue-light: #3b82f6;
    --accent-blue-lighter: #93c5fd;
    --accent-purple-bg: #312e81;
    --accent-purple-border: #4338ca;
    --accent-purple-text: #e0e7ff;

    /* ---- Surfaces, borders, text (light mode) ---- */
    --bg-app: #f8fafc;
    --bg-surface: #ffffff;
    --bg-elevated: #f1f5f9;
    --bg-disabled: #e5e7eb;
    --text-disabled: #9ca3af; /* deliberately constant across both themes, paired with --bg-disabled */
    --border-color: #e2e8f0;
    --border-color-strong: #cbd5e1;

    --text-main: #0f172a;
    --text-muted: #64748b;
    --text-light: #ffffff;

    /* ---- Sidebar/nav "chrome" - deliberately always dark navy in BOTH light and dark theme
       (a permanent branding rail, not a theme-following surface). Do NOT override these inside
       the [data-theme="dark"] block below - that was a real bug caught 2026-09-19: a blind
       find/replace of #0f172a swapped this fixed color for the theme-following --bg-surface,
       which made the sidebar turn white in light mode. ---- */
    --chrome-bg: #0f172a;
    --chrome-border: #1e293b;
    --chrome-text-muted: #cbd5e1;

    /* Muted icon accent (e.g. dialog close buttons, the sidebar-collapse icon) - also
       deliberately constant across both themes, same reasoning as --chrome-*. */
    --icon-muted: #94a3b8;

    /* ---- Radius scale ---- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* ---- Form control height: the ONE place to change input/select/dropdown height app-wide ---- */
    --control-height: 40px;
    --control-height-sm: 35px; /* .form-control-sm / .form-select-sm / .btn-sm rows (line-item tables) */

    /* ---- Shadow scale ---- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.22);

    /* ---- Borders ---- */
    --border-width: 1px;

    /* ---- Typography ---- */
    --font-family-base: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.35rem;
    --font-size-3xl: 2.25rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ---- Spacing scale (4px base at default 16px root) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* ---- Form controls & inputs ---- */
    --input-bg: #f1f5f9;
    --input-bg-focus: #ffffff;
    --input-border: #94a3b8;

    /* ---- Syncfusion Grid adaptations ---- */
    --e-grid-header-bg: #f8fafc;
    --e-grid-header-color: #64748b;
    --e-grid-content-bg: #ffffff;
    --e-grid-content-color: #0f172a;
    --e-grid-border: #e2e8f0;
    --e-grid-row-hover-bg: #f1f5f9;
    --e-grid-alt-row-bg: #ffffff;
    /* Links inside tables (e.g. a client's company name) */
    --table-link-color: var(--primary);
    --table-link-hover: var(--primary-hover);

    /* ---- Premium theme extensions ---- */
    --gradient-primary: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);
    --gradient-hover: linear-gradient(135deg, #4338ca 0%, #0284c7 100%);
    --gradient-staff: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
    --gradient-portal: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 100%);
    --gradient-ai: linear-gradient(135deg, #6366f1 0%, #3b82f6 50%, #06b6d4 100%);
    --gradient-ai-open: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.04);
}

[data-theme="dark"],
[data-bs-theme="dark"] {
    /* ---- Surfaces, borders, text (dark mode) ----
       NOTE (2026-09-19): the app previously had 8 different near-black hex values doing the
       job of 2-3 surface tones (#090d16, #0b0f19, #0f172a, #111827, #1a2234, #141c2e, #030712,
       #161f30), because new features (like the AI assistant) invented their own dark palette
       instead of reusing these tokens. Consolidated onto --bg-surface/--bg-elevated below -
       every dark-mode surface in the app now traces back to one of these two values. */
    --bg-app: #090d16;
    --bg-surface: #111827;
    --bg-elevated: #1e293b;
    --bg-elevated-rgb: 30, 41, 59; /* same color as --bg-elevated, as an r,g,b triplet for rgba() translucency */
    --border-color: #1f2937;
    --border-color-strong: #334155;
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    --primary-light: rgba(99, 102, 241, 0.15);

    --accent-blue-light: #93c5fd;
    --accent-blue-lighter: #bfdbfe;
    --accent-purple-bg: #312e81;
    --accent-purple-border: #4338ca;
    --accent-purple-text: #e0e7ff;

    --shadow-xl: 0 20px 45px rgba(0, 0, 0, 0.6);

    /* ---- Form controls & inputs ---- */
    --input-bg: #1f2937;
    --input-bg-focus: var(--bg-elevated);
    --input-border: #475569;

    /* ---- Syncfusion Grid dark adaptations ---- */
    --e-grid-header-bg: var(--bg-elevated);
    --e-grid-header-color: #9ca3af;
    --e-grid-content-bg: var(--bg-surface);
    --e-grid-content-color: #f3f4f6;
    --e-grid-border: #1f2937;
    --e-grid-row-hover-bg: #1e293b;
    --e-grid-alt-row-bg: #141c2e;
    /* --primary (#4f46e5) is too dark to read on the dark table surface */
    --table-link-color: #a5b4fc;
    --table-link-hover: #c7d2fe;
}