/* ============================================================
   Secretary — Theme Tokens (modern SaaS look, Light + Dark)
   Overrides Fluent UI Blazor design tokens via CSS variables.
   ============================================================ */

:root {
    /* Radii */
    --control-corner-radius: 8;
    --layer-corner-radius: 12;

    /* Type ramp */
    --type-ramp-base-font-size: 14px;
    --type-ramp-base-line-height: 20px;
    --type-ramp-plus-1-font-size: 16px;
    --type-ramp-plus-1-line-height: 22px;
    --type-ramp-plus-2-font-size: 18px;
    --type-ramp-plus-2-line-height: 24px;
    --type-ramp-plus-3-font-size: 22px;
    --type-ramp-plus-3-line-height: 28px;
    --type-ramp-plus-4-font-size: 28px;
    --type-ramp-plus-4-line-height: 36px;

    /* Custom spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Layout dimensions */
    --sidebar-width: 256px;
    --sidebar-width-collapsed: 64px;

    /* Brand */
    --brand-accent: #5B6CFF;
    --brand-accent-soft: #EEF0FF;
    --brand-accent-soft-dark: #1E2147;
}

/* -----------------------------
   LIGHT THEME (default)
   ----------------------------- */
:root,
[data-theme="light"] {
    color-scheme: light;

    /* Surfaces */
    --neutral-layer-1: #FFFFFF;
    --neutral-layer-2: #FAFAFB;
    --neutral-layer-3: #F4F4F6;
    --neutral-layer-4: #ECECF0;
    --neutral-layer-floating: #FFFFFF;
    --neutral-layer-card-container: #FFFFFF;
    --neutral-fill-layer-rest: #F4F4F6;

    /* Foreground */
    --neutral-foreground-rest: #1A1B25;
    --neutral-foreground-hint: #5C5F72;
    --neutral-foreground-disabled: #A5A8B8;

    /* Strokes */
    --neutral-stroke-rest: #E4E5EC;
    --neutral-stroke-hover: #D2D4DE;
    --neutral-stroke-active: #C0C3D1;
    --neutral-stroke-focus: #1A1B25;
    --neutral-stroke-divider-rest: #ECECF0;
    --neutral-stroke-input-rest: #D2D4DE;

    /* Accent */
    --accent-fill-rest: #5B6CFF;
    --accent-fill-hover: #4A5BEB;
    --accent-fill-active: #3F4FD1;
    --accent-fill-focus: #5B6CFF;
    --accent-foreground-rest: #4A5BEB;
    --accent-foreground-hover: #3F4FD1;
    --accent-foreground-active: #3645B5;
    --foreground-on-accent-rest: #FFFFFF;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.06), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
    --shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, 0.08), 0 4px 8px -2px rgba(16, 24, 40, 0.04);

    /* Status pills (soft bg + strong fg) */
    --status-neutral-bg: #ECECF0;
    --status-neutral-fg: #5C5F72;
    --status-info-bg: #E1ECFB;
    --status-info-fg: #2563EB;
    --status-success-bg: #DCFCE7;
    --status-success-fg: #15803D;
    --status-warning-bg: #FEF3C7;
    --status-warning-fg: #B45309;
    --status-danger-bg: #FEE2E2;
    --status-danger-fg: #DC2626;

    /* Brand tint for active-nav pills */
    --brand-tint: var(--brand-accent-soft);
}

/* -----------------------------
   DARK THEME
   ----------------------------- */
[data-theme="dark"] {
    color-scheme: dark;

    --neutral-layer-1: #0F1014;
    --neutral-layer-2: #14161C;
    --neutral-layer-3: #1A1D26;
    --neutral-layer-4: #232733;
    --neutral-layer-floating: #1A1D26;
    --neutral-layer-card-container: #14161C;
    --neutral-fill-layer-rest: #1A1D26;

    --neutral-foreground-rest: #E6E7EE;
    --neutral-foreground-hint: #9CA0B3;
    --neutral-foreground-disabled: #5C5F72;

    --neutral-stroke-rest: #2A2E3B;
    --neutral-stroke-hover: #353A4A;
    --neutral-stroke-active: #404659;
    --neutral-stroke-focus: #E6E7EE;
    --neutral-stroke-divider-rest: #232733;
    --neutral-stroke-input-rest: #353A4A;

    --accent-fill-rest: #7886FF;
    --accent-fill-hover: #8B97FF;
    --accent-fill-active: #6573F0;
    --accent-fill-focus: #7886FF;
    --accent-foreground-rest: #8B97FF;
    --accent-foreground-hover: #A0AAFF;
    --accent-foreground-active: #7886FF;
    --foreground-on-accent-rest: #0F1014;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.45), 0 4px 8px -2px rgba(0, 0, 0, 0.30);

    /* Status pills — translucent fills read well on dark surfaces */
    --status-neutral-bg: rgba(255, 255, 255, 0.08);
    --status-neutral-fg: #9CA0B3;
    --status-info-bg: rgba(96, 140, 255, 0.18);
    --status-info-fg: #8BA8FF;
    --status-success-bg: rgba(34, 197, 94, 0.18);
    --status-success-fg: #4ADE80;
    --status-warning-bg: rgba(245, 158, 11, 0.20);
    --status-warning-fg: #FBBF24;
    --status-danger-bg: rgba(239, 68, 68, 0.20);
    --status-danger-fg: #F87171;

    --brand-tint: var(--brand-accent-soft-dark);
}

/* Body baseline */
html, body {
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
}

/* -----------------------------
   Fluent component patches
   (Components that don't fully follow tokens — patch directly)
   ----------------------------- */

/* Card refinement */
fluent-card {
    border-radius: 12px !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--neutral-stroke-divider-rest) !important;
}

/* DataGrid */
fluent-data-grid {
    background: transparent;
}

fluent-data-grid-row {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

/* Resizable columns render an always-visible vertical separator: a 1px
   border-right on .resize-handle. Hide it for a cleaner header — the wider
   invisible .actual-resize-handle keeps drag-to-resize working. !important
   because the bundled component CSS loads after this file. */
.column-header .resize-handle {
    border-right-color: transparent !important;
}

/* Dialog */
fluent-dialog::part(control) {
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    background: var(--neutral-layer-1);
}

/* Fluent UI's default modal scrim is too light — content behind shows through.
   Bump opacity so the dialog clearly stands out. */
fluent-dialog::part(overlay),
fluent-dialog::part(positioning-region) {
    background: rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] fluent-dialog::part(overlay),
[data-theme="dark"] fluent-dialog::part(positioning-region) {
    background: rgba(0, 0, 0, 0.75);
}