/* ============================================================
   PDKS Design System — "Warm Precision"
   Foundation: CSS Custom Properties, Reset, Typography, Base
   ============================================================ */

/* Google Fonts loaded via <link> in _Layout.cshtml — do NOT duplicate here */

/* === CSS Custom Properties — Shape, Motion, Fonts only === */
:root {
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-reveal: 800ms;

    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    --font-display-weight: 700;
}

/* === Theme: Clinical — Cool, precise. Slate-blue undertones. Indigo accent. === */
[data-theme="clinical"] {
    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    --font-display-weight: 700;
    --color-surface-primary: #FFFFFF;
    --color-surface-secondary: #F8FAFC;
    --color-surface-tertiary: #F1F5F9;
    --color-surface-inverse: #0F172A;
    --color-text-primary: #0F172A;
    --color-text-secondary: #64748B;
    --color-text-tertiary: #94A3B8;
    --color-text-inverse: #FFFFFF;
    --color-accent-primary: #4F46E5;
    --color-accent-primary-hover: #4338CA;
    --color-accent-primary-light: #EEF2FF;
    --color-accent-primary-subtle: #F5F3FF;
    --color-success: #059669;
    --color-success-light: #ECFDF5;
    --color-warning: #D97706;
    --color-warning-light: #FFFBEB;
    --color-danger: #DC2626;
    --color-danger-light: #FEF2F2;
    --color-info: #2563EB;
    --color-info-light: #EFF6FF;
    --sidebar-bg: #0F172A;
    --sidebar-text: #94A3B8;
    --sidebar-text-active: #FFFFFF;
    --sidebar-accent: #4F46E5;
    --sidebar-hover-bg: #1E293B;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);
    --shadow-card: 0 0 0 1px rgba(0,0,0,0.06);
    --border-color: #E2E8F0;
    --border-color-strong: #CBD5E1;
    --surface-texture: none;
    --login-gradient: linear-gradient(135deg, #312E81 0%, #0F172A 100%);
    --color-danger-hover: #991B1B;
    --color-success-hover: #047857;
    --color-overlay: rgba(15, 23, 42, 0.5);
    --color-accent-glow: rgba(79, 70, 229, 0.35);
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --login-text: #FFFFFF;
    --login-text-muted: rgba(255, 255, 255, 0.7);
}

[data-theme="clinical"][data-mode="dark"] {
    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
    --font-display-weight: 700;
    --color-surface-primary: #0F172A;
    --color-surface-secondary: #1E293B;
    --color-surface-tertiary: #334155;
    --color-surface-inverse: #F8FAFC;
    --color-text-primary: #F1F5F9;
    --color-text-secondary: #94A3B8;
    --color-text-tertiary: #64748B;
    --color-text-inverse: #0F172A;
    --color-accent-primary: #818CF8;
    --color-accent-primary-hover: #6366F1;
    --color-accent-primary-light: #1E1B4B;
    --color-accent-primary-subtle: #1a1836;
    --color-success: #34D399;
    --color-success-light: #064E3B;
    --color-warning: #FBBF24;
    --color-warning-light: #451A03;
    --color-danger: #F87171;
    --color-danger-light: #450A0A;
    --color-info: #60A5FA;
    --color-info-light: #172554;
    --sidebar-bg: #020617;
    --sidebar-text: #64748B;
    --sidebar-text-active: #F1F5F9;
    --sidebar-accent: #818CF8;
    --sidebar-hover-bg: #0F172A;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
    --shadow-card: 0 0 0 1px rgba(255,255,255,0.06);
    --border-color: #1E293B;
    --border-color-strong: #334155;
    --login-gradient: linear-gradient(135deg, #1E1B4B 0%, #020617 100%);
    --color-danger-hover: #EF4444;
    --color-success-hover: #10B981;
    --color-overlay: rgba(0, 0, 0, 0.6);
    --color-accent-glow: rgba(129, 140, 248, 0.35);
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --login-text: #F1F5F9;
    --login-text-muted: rgba(241, 245, 249, 0.7);
}

/* === Theme: Soft (Klasik) — Clean, sharp, institutional. Navy accent. Bloomberg energy. === */
[data-theme="soft"] {
    /* === Surfaces: pure white and true neutral gray. No warmth. === */
    --color-surface-primary: #FFFFFF;
    --color-surface-secondary: #F5F5F5;
    --color-surface-tertiary: #EBEBEB;
    --color-surface-inverse: #0A1628;

    /* === Text: near-black, no warm tint === */
    --color-text-primary: #111111;
    --color-text-secondary: #555555;
    --color-text-tertiary: #999999;
    --color-text-inverse: #FFFFFF;

    /* === Accent: deep navy === */
    --color-accent-primary: #1B3A5C;
    --color-accent-primary-hover: #142D4A;
    --color-accent-primary-light: #E6EDF5;
    --color-accent-primary-subtle: #F0F4F8;

    /* === Functional: saturated and clean === */
    --color-success: #0F7B3F;
    --color-success-light: #EDFBF2;
    --color-warning: #C27D09;
    --color-warning-light: #FEF9EC;
    --color-danger: #CC1D1D;
    --color-danger-light: #FEF0F0;
    --color-info: #1B3A5C;
    --color-info-light: #E6EDF5;

    /* === Sidebar: navy-black === */
    --sidebar-bg: #0A1628;
    --sidebar-text: #8899AA;
    --sidebar-text-active: #FFFFFF;
    --sidebar-accent: #4A90D9;
    --sidebar-hover-bg: #122240;

    /* === Shadows: minimal — borders do the work === */
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-card: none;

    /* === Borders: visible, structural — these replace shadows === */
    --border-color: #DDDDDD;
    --border-color-strong: #BBBBBB;

    /* === Spatial overrides: tighter, sharper === */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;

    /* === No texture === */
    --surface-texture: none;

    /* === Login gradient: deep navy === */
    --login-gradient: linear-gradient(160deg, #0A1628 0%, #1B3A5C 100%);

    /* === Fonts: clean sans-serif, no serifs === */
    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-display-weight: 700;
    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* === Additional functional tokens === */
    --color-danger-hover: #991B1B;
    --color-success-hover: #0A6B33;
    --color-overlay: rgba(10, 22, 40, 0.5);
    --color-accent-glow: rgba(27, 58, 92, 0.35);
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --login-text: #FFFFFF;
    --login-text-muted: rgba(255, 255, 255, 0.7);
}

[data-theme="soft"][data-mode="dark"] {
    --color-surface-primary: #0A1628;
    --color-surface-secondary: #0F1D32;
    --color-surface-tertiary: #16273F;
    --color-surface-inverse: #FFFFFF;

    --color-text-primary: #E8ECF0;
    --color-text-secondary: #8899AA;
    --color-text-tertiary: #5A6B7C;
    --color-text-inverse: #0A1628;

    --color-accent-primary: #4A90D9;
    --color-accent-primary-hover: #3A7DC4;
    --color-accent-primary-light: #122240;
    --color-accent-primary-subtle: #0F1D32;

    --color-success: #34D399;
    --color-success-light: #0A2018;
    --color-warning: #FBBF24;
    --color-warning-light: #1A1505;
    --color-danger: #F87171;
    --color-danger-light: #1F0A0A;
    --color-info: #4A90D9;
    --color-info-light: #122240;

    --sidebar-bg: #050D1A;
    --sidebar-text: #5A6B7C;
    --sidebar-text-active: #E8ECF0;
    --sidebar-accent: #4A90D9;
    --sidebar-hover-bg: #0A1628;

    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-card: none;

    --border-color: #16273F;
    --border-color-strong: #1E3350;

    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;

    --surface-texture: none;
    --login-gradient: linear-gradient(160deg, #050D1A 0%, #122240 100%);

    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-display-weight: 700;
    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* === Additional functional tokens === */
    --color-danger-hover: #EF4444;
    --color-success-hover: #2DD4A0;
    --color-overlay: rgba(0, 0, 0, 0.6);
    --color-accent-glow: rgba(74, 144, 217, 0.35);
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238899AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --login-text: #E8ECF0;
    --login-text-muted: rgba(232, 236, 240, 0.7);
}

/* === Theme: Wind (Rüzgar) — Airy, clean, sky-blue. Tailwind CSS inspired. === */
[data-theme="wind"] {
    /* === Surfaces: white and sky tints === */
    --color-surface-primary: #FFFFFF;
    --color-surface-secondary: #F0F9FF;
    --color-surface-tertiary: #E0F2FE;
    --color-surface-inverse: #0C1222;

    /* === Text: slate tones === */
    --color-text-primary: #0F172A;
    --color-text-secondary: #475569;
    --color-text-tertiary: #94A3B8;
    --color-text-inverse: #FFFFFF;

    /* === Accent: sky-blue === */
    --color-accent-primary: #0EA5E9;
    --color-accent-primary-hover: #0284C7;
    --color-accent-primary-light: #E0F2FE;
    --color-accent-primary-subtle: #F0F9FF;

    /* === Functional: Tailwind palette === */
    --color-success: #10B981;
    --color-success-light: #ECFDF5;
    --color-warning: #F59E0B;
    --color-warning-light: #FFFBEB;
    --color-danger: #EF4444;
    --color-danger-light: #FEF2F2;
    --color-info: #0EA5E9;
    --color-info-light: #F0F9FF;

    /* === Sidebar: sky-dark === */
    --sidebar-bg: #0C4A6E;
    --sidebar-text: #7DD3FC;
    --sidebar-text-active: #FFFFFF;
    --sidebar-accent: #38BDF8;
    --sidebar-hover-bg: #075985;

    /* === Shadows: blue-tinted, airy === */
    --shadow-xs: 0 1px 2px rgba(14, 165, 233, 0.05);
    --shadow-sm: 0 1px 3px rgba(14, 165, 233, 0.08), 0 1px 2px rgba(14, 165, 233, 0.04);
    --shadow-md: 0 4px 6px rgba(14, 165, 233, 0.07), 0 2px 4px rgba(14, 165, 233, 0.04);
    --shadow-lg: 0 10px 15px rgba(14, 165, 233, 0.08), 0 4px 6px rgba(14, 165, 233, 0.04);
    --shadow-card: 0 0 0 1px rgba(14, 165, 233, 0.08);

    /* === Borders: sky tints === */
    --border-color: #E0F2FE;
    --border-color-strong: #BAE6FD;

    /* === Spatial: medium radius — between Clinical and Soft === */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --surface-texture: none;
    --login-gradient: linear-gradient(135deg, #0EA5E9 0%, #0C4A6E 50%, #0C1222 100%);

    /* === Fonts === */
    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-display-weight: 700;
    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* === Additional functional tokens === */
    --color-danger-hover: #DC2626;
    --color-success-hover: #059669;
    --color-overlay: rgba(12, 18, 34, 0.5);
    --color-accent-glow: rgba(14, 165, 233, 0.35);
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --login-text: #FFFFFF;
    --login-text-muted: rgba(255, 255, 255, 0.7);
}

[data-theme="wind"][data-mode="dark"] {
    /* === Surfaces: deep navy-blacks === */
    --color-surface-primary: #0C1222;
    --color-surface-secondary: #131D30;
    --color-surface-tertiary: #1B2841;
    --color-surface-inverse: #F0F9FF;

    /* === Text: sky-tinted light === */
    --color-text-primary: #E0F2FE;
    --color-text-secondary: #7DD3FC;
    --color-text-tertiary: #0EA5E9;
    --color-text-inverse: #0C1222;

    /* === Accent: lighter sky for contrast === */
    --color-accent-primary: #38BDF8;
    --color-accent-primary-hover: #7DD3FC;
    --color-accent-primary-light: #0C4A6E;
    --color-accent-primary-subtle: #0F2942;

    /* === Functional: lighter variants === */
    --color-success: #34D399;
    --color-success-light: #064E3B;
    --color-warning: #FBBF24;
    --color-warning-light: #451A03;
    --color-danger: #F87171;
    --color-danger-light: #450A0A;
    --color-info: #38BDF8;
    --color-info-light: #0C4A6E;

    /* === Sidebar: deepest navy === */
    --sidebar-bg: #070D1A;
    --sidebar-text: #0EA5E9;
    --sidebar-text-active: #E0F2FE;
    --sidebar-accent: #38BDF8;
    --sidebar-hover-bg: #0C1222;

    /* === Shadows: dark with blue tint === */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 0 0 1px rgba(56, 189, 248, 0.08);

    /* === Borders: deep navy === */
    --border-color: #1B2841;
    --border-color-strong: #234060;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --surface-texture: none;
    --login-gradient: linear-gradient(135deg, #075985 0%, #0C1222 50%, #070D1A 100%);

    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-display-weight: 700;
    --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* === Additional functional tokens === */
    --color-danger-hover: #EF4444;
    --color-success-hover: #2DD4A0;
    --color-overlay: rgba(0, 0, 0, 0.6);
    --color-accent-glow: rgba(56, 189, 248, 0.35);
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237DD3FC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --login-text: #E0F2FE;
    --login-text-muted: rgba(224, 242, 254, 0.7);
}

/* === Minimal Reset === */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-text-primary);
    background-color: var(--color-surface-primary);
}


/* === Typography Scale === */
.text-display-xl {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: var(--font-display-weight, 700);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
}

.text-display-lg {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: var(--font-display-weight, 700);
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--color-text-primary);
}

.text-heading {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--font-display-weight, 700);
    line-height: 1.3;
    color: var(--color-text-primary);
}

.text-subheading {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary);
}

.text-body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-text-primary);
}

.text-body-sm {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.text-caption {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.text-mono {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
}

/* === Base Element Styles === */
a {
    color: var(--color-accent-primary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out-quart);
}

a:hover {
    color: var(--color-accent-primary-hover);
}

::selection {
    background: var(--color-accent-primary);
    color: var(--color-text-inverse);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--font-display-weight, 700);
    line-height: 1.3;
    color: var(--color-text-primary);
    margin-top: 0;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

/* Focus ring — accent for accessibility */
:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-text-tertiary);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

/* Utility: color helpers using design tokens */
.text-muted-pdks {
    color: var(--color-text-tertiary);
}

.text-accent {
    color: var(--color-accent-primary);
}

.bg-surface-secondary {
    background-color: var(--color-surface-secondary);
}

.bg-surface-tertiary {
    background-color: var(--color-surface-tertiary);
}

/* === Smooth theme switching — scoped to major layout elements === */
html[data-theme] body,
html[data-theme] .pdks-sidebar,
html[data-theme] .pdks-content-area,
html[data-theme] .pdks-topbar,
html[data-theme] .card-pdks,
html[data-theme] .modal-pdks,
html[data-theme] .table-pdks,
html[data-theme] .input-pdks,
html[data-theme] .btn-pdks-primary,
html[data-theme] .btn-pdks-secondary,
html[data-theme] .btn-pdks-success,
html[data-theme] .btn-pdks-ghost,
html[data-theme] .btn-pdks-danger,
html[data-theme] .badge-pdks,
html[data-theme] .login-atmosphere {
    transition: background-color var(--duration-normal) var(--ease-out-quart),
                color var(--duration-normal) var(--ease-out-quart),
                border-color var(--duration-normal) var(--ease-out-quart),
                box-shadow var(--duration-normal) var(--ease-out-quart);
}