/* ============================================================
   Setred Design Tokens
   Brand: Navy #002850 · Medium Blue #2472b3
   Theme: Light / Clinical

   USAGE CONVENTION
   - In app code (.razor markup, *.razor.css), use the --color-*,
     --space-*, --radius-*, --font-* tokens defined here.
   - The --rz-* variables at the bottom exist only to re-theme
     Radzen's internals onto these tokens. Do NOT reference --rz-*
     directly from app code — use the --color-* equivalent.
   - Never hard-code hex colors or px spacing/radius in markup;
     add a token here if one is missing.
   - For component styling, prefer the component's scoped .razor.css
     referencing these tokens over inline `style="…"`.
   ============================================================ */

:root {
    /* --- Brand colors --- */
    --color-primary:        #002850;
    --color-medium-blue:    #2472b3;
    --color-primary-hover:  #003a73;
    --color-accent:         #2472b3;

    /* Gold accent used to highlight the clinician's next appointment. */
    --color-next-accent:    #e0a83d;

    /* --- Surfaces --- */
    --color-background:     #faf9f6;
    --color-surface:        #ffffff;
    --color-surface-raised: #f0f2f4;
    --color-border:         #dde2e7;

    /* --- Semantic status --- */
    --color-success:        #2e7d32;
    --color-success-muted:  #e8f5e9;
    --color-warning:        #e65100;
    --color-warning-muted:  #fff3e0;
    --color-danger:         #c62828;
    --color-danger-hover:   #a31f1f;
    --color-danger-muted:   #ffebee;
    --color-info:           #0277bd;
    --color-info-muted:     #e1f5fe;

    /* --- Text --- */
    --color-text-primary:   #1a1f2e;
    --color-text-secondary: #5a6478;
    --color-text-muted:     #8c95a6;
    --color-text-on-primary: #ffffff;

    /* --- Data viz: categorical chart series ---
       Distinct line/area colors for charts where each hue is just a
       series identity (bandwidth, calls, …), NOT a status. For
       good/warn/bad status use the semantic --color-success/warning/danger
       above — dashboards must not fork their own status palette. */
    --color-chart-1: #2980b9;
    --color-chart-2: #8e44ad;
    --color-chart-3: #27ae60;
    --color-chart-4: #e67e22;
    --color-chart-5: #3498db;

    /* --- Font --- */
    --font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif;

    /* --- Font sizes --- */
    --font-size-xs:   0.75rem;
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.25rem;
    --font-size-2xl:  1.5rem;
    --font-size-3xl:  1.875rem;

    /* --- Font weights --- */
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* --- Line heights --- */
    --line-height-tight:  1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* --- Spacing --- */
    --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;

    /* --- Border radius --- */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-sm:  0 1px 3px rgba(0, 40, 80, 0.08);
    --shadow-md:  0 4px 12px rgba(0, 40, 80, 0.10);
    --shadow-lg:  0 8px 32px rgba(0, 40, 80, 0.15);
    --shadow-dialog: 0 8px 32px rgba(0, 40, 80, 0.15);

    /* ============================================================
       Radzen CSS variable overrides
       Maps Radzen's own vars onto our design tokens so that all
       Radzen components (buttons, inputs, grids, datepickers, etc.)
       automatically use brand colors without per-component changes.
       ============================================================ */

    /* Primary */
    --rz-primary:                    var(--color-primary);
    --rz-primary-lighter:            var(--color-primary-hover);
    --rz-primary-light:              var(--color-primary-hover);
    --rz-primary-dark:               var(--color-primary);
    --rz-on-primary:                 var(--color-text-on-primary);

    /* Base surfaces (light theme equivalents for dark-variable references) */
    --rz-base-background-color:      var(--color-background);
    --rz-body-background-color:      var(--color-background);
    --rz-card-background-color:      var(--color-surface);
    --rz-panel-background-color:     var(--color-surface);

    /* Text */
    --rz-text-color:                 var(--color-text-primary);
    --rz-text-secondary-color:       var(--color-text-secondary);

    /* Font */
    --rz-base-font-family:           var(--font-sans);
    --rz-body-font-family:           var(--font-sans);

    /* Border */
    --rz-border-radius:              var(--radius-sm);

    /* Status colors */
    --rz-success:                    var(--color-success);
    --rz-warning:                    var(--color-warning);
    --rz-danger:                     var(--color-danger);
    --rz-info:                       var(--color-info);
    --rz-on-success:                 #ffffff;
    --rz-on-warning:                 #ffffff;
    --rz-on-danger:                  #ffffff;
    --rz-on-info:                    #ffffff;
}

/* ============================================================
   Base typography
   ============================================================ */

html,
body {
    font-family: var(--font-sans);
    color: var(--color-text-primary);
    background-color: var(--color-background);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

/* ============================================================
   Component tweaks
   ============================================================ */

/* Vertically center the alert icon against multi-line text
   (Radzen top-aligns it by default). */
.rz-alert {
    align-items: center;
}

/* Flat/Lighter alerts. Radzen's default lighter shades render weak salmon/teal
   text; set the colour directly from our tokens so it reads clearly. These
   selectors match Radzen's own specificity but load later, so they win — and
   the direct `color` beats the indirected `--rz-alert-color` chain. */
.rz-alert.rz-info.rz-shade-lighter {
    background-color: var(--color-info-muted);
    color: var(--color-info);
}

.rz-alert.rz-info.rz-shade-lighter .rz-alert-icon {
    color: var(--color-info);
}

.rz-alert.rz-danger.rz-shade-lighter {
    background-color: var(--color-danger-muted);
    color: var(--color-danger);
}

.rz-alert.rz-danger.rz-shade-lighter .rz-alert-icon {
    color: var(--color-danger);
}

/* Solid danger buttons (e.g. "Fjern person"). Radzen's default --rz-danger is a
   weak salmon; force the brand red directly so it reads as a real danger action
   and is clearly distinct from the accent/primary button. */
.rz-button.rz-danger {
    background-color: var(--color-danger);
    color: #ffffff;
}

.rz-button.rz-danger:not(.rz-state-disabled):hover {
    background-color: var(--color-danger-hover);
    color: #ffffff;
}