/* ============================================================
   Advisor Theme — global design tokens + base components.
   Adapted from ThemeDemo.razor.css (project root) per T07/IMP-007:
   that file was a design reference nobody had wired into the app -
   this is the same token system (spacing/typography scale,
   btn/alert/card/form primitives), made global (wwwroot, not
   component-scoped CSS) so every page in the app - not just the
   demo - can use it.

   Palette per Product Owner direction (ai-crafters.io reference,
   2026-08-17): deep navy/anthracite as the default background, warm
   metallic gold + cool crystal blue as accents, monospace for
   technical values (KPI numbers, statuses, timestamps), glowing
   borders instead of drop shadows. This palette IS the neutral
   default theme (PRM §12 "kein CI vorhanden -> neutrales
   Standarddesign") - a Tenant with its own TenantTheme overrides
   these same tokens via an inline <style> block (see MainLayout.razor),
   never hardcoded markup. Dark is the default (`:root`); `.light`
   opts into a light variant that must not look broken.
   ============================================================ */

:root {
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;

    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* Depth comes from glow (colored, low-spread box-shadow), not drop shadows - see .card,
       .card-glow-* below. --shadow-* still exists for the rare case a plain shadow is wanted. */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.4);

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* PRM §12 White-Label: overridden per-tenant when TenantTheme.TypographyFontFamily is set. */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --text-display-large: clamp(3rem, 4vw + 1rem, 4.5rem);
    --text-display-medium: clamp(2.5rem, 3.5vw + 0.5rem, 3.5rem);
    --text-headline-large: clamp(1.875rem, 2.5vw + 0.5rem, 2.25rem);
    --text-headline-medium: clamp(1.5rem, 2vw + 0.5rem, 1.875rem);
    --text-title-large: 1.375rem;
    --text-title-medium: 1.125rem;
    --text-title-small: 1rem;
    --text-body-large: 1.125rem;
    --text-body-medium: 1rem;
    --text-body-small: 0.875rem;
    --text-label-large: 0.875rem;
    --text-label-medium: 0.8125rem;
    --text-label-small: 0.75rem;

    /* KPI numbers, timestamps, status codes - always monospace (Product Owner direction). */
    --text-kpi-value: clamp(1.75rem, 2.5vw + 0.5rem, 2.25rem);

    --line-height-tight: 1.1;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
}

/* --- Dark (default) --- */
:root,
:root.dark {
    --color-primary: #d4af37;
    --color-on-primary: #0a0e27;
    --color-primary-container: #3a3212;
    --color-on-primary-container: #f0dc8a;

    --color-secondary: #5ec4f0;
    --color-on-secondary: #06131a;
    --color-secondary-container: #123444;
    --color-on-secondary-container: #b6e6fb;

    --color-error: #ff6b6b;
    --color-on-error: #240000;
    --color-error-container: #4a1010;
    --color-on-error-container: #ffc7c7;

    --color-success: #4ade80;
    --color-on-success: #05200f;
    --color-success-container: #123420;
    --color-on-success-container: #b8f5d0;

    --color-warning: #f0b429;
    --color-on-warning: #2a1c00;
    --color-warning-container: #3d2e05;
    --color-on-warning-container: #ffe4a3;

    --color-background: #0a0e27;
    --color-on-background: #e8eaf2;
    --color-surface: #10142f;
    --color-on-surface: #e8eaf2;
    --color-surface-variant: #171c3d;
    --color-on-surface-variant: #9aa3c4;
    --color-surface-container: #131833;
    --color-surface-container-high: #1a2044;

    --color-outline: #313a63;
    --color-outline-variant: #232a4d;

    --glow-color: rgba(212, 175, 55, 0.35);
}

/* --- Light (opt-in, must stay usable, not the default) --- */
:root.light {
    --color-primary: #a8781f;
    --color-on-primary: #ffffff;
    --color-primary-container: #f5e6bd;
    --color-on-primary-container: #4a3a0a;

    --color-secondary: #0b7fb0;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #d4effa;
    --color-on-secondary-container: #06374a;

    --color-error: #c22b2b;
    --color-on-error: #ffffff;
    --color-error-container: #fbdada;
    --color-on-error-container: #410002;

    --color-success: #1f8c4c;
    --color-on-success: #ffffff;
    --color-success-container: #d6f3e0;
    --color-on-success-container: #05200f;

    --color-warning: #96700a;
    --color-on-warning: #ffffff;
    --color-warning-container: #fbecc7;
    --color-on-warning-container: #2a1c00;

    --color-background: #f7f7fb;
    --color-on-background: #14172b;
    --color-surface: #ffffff;
    --color-on-surface: #14172b;
    --color-surface-variant: #eceef6;
    --color-on-surface-variant: #4d5372;
    --color-surface-container: #f0f1f8;
    --color-surface-container-high: #e6e8f3;

    --color-outline: #c7cbdd;
    --color-outline-variant: #dde0ec;

    --glow-color: rgba(168, 120, 31, 0.25);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--color-background);
    color: var(--color-on-background);
}

.page-heading {
    font-size: var(--text-headline-large);
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0 0 var(--space-2);
}

/* Technical values - KPI numbers, timestamps, hashes, statuses. */
.mono {
    font-family: var(--font-mono);
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-label-large);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.btn-primary:hover {
    box-shadow: 0 0 16px var(--glow-color);
}

.btn-ghost {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-outline);
}

.btn-ghost:hover {
    background-color: var(--color-primary-container);
}

/* Same base sizing as .btn (padding/radius/min touch target) - used standalone across the app
   (Dokumente "Öffnen", Vorschau "Schließen"/"Herunterladen", Dashboard "Kacheln anpassen")
   without the .btn class alongside it, so it needs its own complete rule, not just a color
   variant layered on .btn. Missing this left buttons at the browser's ~21px default height,
   under the WCAG 2.2 AA 24x24 touch-target minimum (handy-pruefer Befund 2026-08-17). */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    min-height: 24px;
    font-size: var(--text-label-medium);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-outline-variant);
    background-color: var(--color-surface-variant);
    color: var(--color-on-surface);
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.btn-secondary:hover {
    border-color: var(--color-primary);
}

/* --- Alerts --- */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-body-medium);
    border: 1px solid transparent;
}

.alert-info {
    background-color: var(--color-secondary-container);
    color: var(--color-on-secondary-container);
    border-color: var(--color-secondary);
}

.alert-success {
    background-color: var(--color-success-container);
    color: var(--color-on-success-container);
    border-color: var(--color-success);
}

.alert-warning {
    background-color: var(--color-warning-container);
    color: var(--color-on-warning-container);
    border-color: var(--color-warning);
}

.alert-error {
    background-color: var(--color-error-container);
    color: var(--color-on-error-container);
    border-color: var(--color-error);
}

/* --- Cards --- */
/* Thin outline + a soft colored glow instead of a drop shadow - depth reads as "lit", not
   "raised". Glow intensifies on hover/focus to signal an active/interactive card. */
.card {
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    box-shadow: 0 0 0 1px transparent;
    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
    overflow: hidden;
}

.card:hover {
    border-color: var(--color-outline);
    box-shadow: 0 0 20px var(--glow-color);
}

.card-header {
    padding: var(--space-4);
    font-size: var(--text-title-small);
    font-weight: 600;
    color: var(--color-on-surface);
}

.card-body {
    padding: 0 var(--space-4) var(--space-4);
    font-size: var(--text-body-medium);
    color: var(--color-on-surface-variant);
}

/* --- Documents (T07 Dokumentenbaum) --- */
.doc-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.doc-filter-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-label-medium);
    color: var(--color-on-surface-variant);
}

.doc-filter-input {
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-sm);
    color: var(--color-on-surface);
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-sans);
    min-width: 180px;
}

.doc-filter-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 8px var(--glow-color);
}

.doc-list {
    /* Same min-width:auto grid-item fix as .doc-tree - the wide table must not force this
       column past its 1fr track. */
    min-width: 0;
}

.doc-layout {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: var(--space-5);
    align-items: start;
}

.doc-tree {
    padding: var(--space-3);
    /* CSS-Grid-items default to min-width:auto (content-based), which lets a grid item grow
       past its own track and blow out the page width - the classic cause of "sidebar/table
       pushes the whole page wider than the viewport" (handy-pruefer Befund 2026-08-17). */
    min-width: 0;
}

.doc-tree-list {
    list-style: none;
    margin: 0;
    padding-left: var(--space-3);
}

.doc-tree-list:first-child {
    padding-left: 0;
}

.doc-tree-row {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.doc-tree-toggle {
    background: none;
    border: none;
    color: var(--color-secondary);
    cursor: pointer;
    padding: var(--space-1);
    font-size: var(--text-body-medium);
    line-height: 1;
    /* WCAG 2.2 AA 2.5.8 Mindestgroesse 24x24, unabhaengig von der Bildschirmbreite. */
    min-width: 24px;
    min-height: 24px;
}

.doc-tree-folder-label {
    background: none;
    border: none;
    color: var(--color-on-surface);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    text-align: left;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 24px;
    flex: 1;
}

.doc-tree-folder-label:hover {
    background-color: var(--color-surface-variant);
}

.doc-tree-folder-selected {
    background-color: var(--color-surface-variant);
    box-shadow: 0 0 10px var(--glow-color);
    color: var(--color-primary);
}

.doc-tree-count {
    color: var(--color-on-surface-variant);
    font-size: var(--text-label-small);
}

.doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-body-medium);
}

.doc-table th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    color: var(--color-on-surface-variant);
    font-weight: 600;
    border-bottom: 1px solid var(--color-outline-variant);
}

.doc-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-outline-variant);
}

.doc-filename {
    color: var(--color-on-surface);
    font-weight: 500;
}

.doc-status-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-label-small);
    font-weight: 600;
}

.doc-status-ok {
    background-color: var(--color-success-container, rgba(94, 196, 240, 0.15));
    color: var(--color-secondary);
}

.doc-status-warning {
    background-color: var(--color-error-container);
    color: var(--color-error);
}

.doc-status-pending {
    background-color: var(--color-surface-variant);
    color: var(--color-on-surface-variant);
}

.doc-open-btn {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-label-medium);
}

.doc-preview-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.doc-preview-panel {
    width: min(900px, 92vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    overflow: auto;
}

.doc-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.doc-preview-title {
    font-weight: 600;
    color: var(--color-on-surface);
    word-break: break-all;
}

.doc-preview-frame {
    width: 100%;
    height: 60vh;
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-sm);
}

.doc-preview-image {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.doc-preview-table-wrap {
    max-height: 55vh;
    overflow: auto;
}

.doc-preview-download {
    align-self: flex-start;
    text-decoration: none;
}

/* Wide tables (Dokumente, Vorschau-CSV/XLSX) scroll inside their own box on narrow screens -
   the page itself must never gain a horizontal scrollbar (PO-Vorgabe Handytauglichkeit). */
.doc-table-wrap {
    overflow-x: auto;
}

/* Explicit swipe hint above a horizontally scrollable table - an unmarked scroll container
   looks broken/cut-off on a phone (handy-pruefer Befund scroll-ohne-hinweis). Shown only when
   the table actually overflows its box, so it never appears on wide screens. */
.doc-table-wrap::before {
    content: "→ nach rechts wischen für weitere Spalten";
    display: block;
    font-size: var(--text-label-small);
    color: var(--color-on-surface-variant);
    padding: 0 0 var(--space-2);
}

@media (min-width: 900px) {
    .doc-table-wrap::before {
        display: none;
    }
}

@media (max-width: 720px) {
    .doc-layout {
        grid-template-columns: 1fr;
    }

    .doc-filter-bar {
        flex-direction: column;
    }

    .doc-filter-input {
        min-width: 0;
        width: 100%;
    }

    .doc-open-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .doc-tree-toggle {
        min-width: 44px;
        min-height: 44px;
    }

    .doc-preview-panel {
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
}

/* --- SVG-Charts (T07 PO-Vorgabe: mehr Dashboard-Kacheln, keine externe Chart-Bibliothek) --- */
.svg-chart {
    width: 100%;
    height: auto;
    display: block;
}

.svg-chart-line {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2;
}

.svg-chart-dot {
    fill: var(--color-primary);
}

.svg-chart-target-line {
    stroke: var(--color-secondary);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.svg-chart-axis-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-label-small);
    color: var(--color-on-surface-variant);
    margin-top: var(--space-1);
}

.svg-bar-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.svg-bar-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.svg-bar-row-label {
    flex: 0 0 110px;
    font-size: var(--text-label-medium);
    color: var(--color-on-surface-variant);
}

.svg-bar-row-chart {
    flex: 1 1 auto;
    height: 28px;
}

.svg-bar-row-value {
    flex: 0 0 auto;
    font-size: var(--text-label-medium);
    color: var(--color-on-surface);
}

.svg-chart-bar {
    fill: var(--color-primary);
}

.svg-chart-bar-personal {
    fill: var(--color-primary);
}

.svg-chart-bar-material {
    fill: var(--color-secondary);
}

.svg-chart-bar-sonstige {
    fill: var(--color-outline);
}

.svg-chart-bar-current {
    fill: var(--color-primary);
}

.svg-chart-bar-prior {
    fill: var(--color-secondary);
}

.svg-chart-bar-label {
    font-family: var(--font-mono);
    font-size: 11px;
    fill: var(--color-on-primary);
    dominant-baseline: middle;
}

.svg-chart-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: var(--space-3) 0 0;
    padding: 0;
    font-size: var(--text-label-small);
    color: var(--color-on-surface-variant);
}

.svg-chart-legend li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.svg-chart-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-xs);
}

/* --- Klärfälle (T20) --- */
.klaerfall-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.klaerfall-card {
    padding: var(--space-4);
    border-left-width: 4px;
}

.klaerfall-urgency-high {
    border-left-color: var(--color-error);
}

.klaerfall-urgency-medium {
    border-left-color: var(--color-warning);
}

.klaerfall-urgency-low {
    border-left-color: var(--color-outline);
}

.klaerfall-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.klaerfall-category {
    font-weight: 600;
    color: var(--color-on-surface);
}

.klaerfall-urgency-badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-label-small);
    font-weight: 600;
    background-color: var(--color-surface-variant);
}

.klaerfall-urgency-badge.klaerfall-urgency-high {
    color: var(--color-error);
    border-left: none;
}

.klaerfall-urgency-badge.klaerfall-urgency-medium {
    color: var(--color-warning);
    border-left: none;
}

.klaerfall-age {
    margin-left: auto;
    font-size: var(--text-label-small);
    color: var(--color-on-surface-variant);
}

.klaerfall-subject {
    margin: 0 0 var(--space-1);
}

.klaerfall-reason {
    color: var(--color-on-surface-variant);
    margin: 0 0 var(--space-2);
}

.klaerfall-conflict {
    background-color: var(--color-surface-variant);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-body-small);
    margin: 0 0 var(--space-2);
}

.klaerfall-assignee {
    font-size: var(--text-label-medium);
    color: var(--color-on-surface-variant);
    margin: 0 0 var(--space-3);
}

.klaerfall-resolve-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.klaerfall-note {
    width: 100%;
    min-height: 60px;
    resize: vertical;
    font-family: var(--font-sans);
}

.klaerfall-value {
    max-width: 240px;
}

.klaerfall-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.klaerfall-widget-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-outline-variant);
}

.klaerfall-widget-item:last-child {
    border-bottom: none;
}