/* =========================================================================
   BRSCU.DK — Fælles designsystem
   Målgruppe: Hold- og indsatsledere i Brand & Redning
   Bruges på tværs af WordPress-sider og rene HTML-subdomæner.

   Principper:
   - Neutral, lys, rolig baggrund — ingen skærmtræthed ved lang tids brug
   - Farve bruges KUN til betydning (status), aldrig som dekoration
   - System-fonte — ingen ekstern fontindlæsning (virker offline / på dårlig 4G)
   - Høj kontrast, tydelig fokus-ring, funker med handsker på touch-skærm
   ========================================================================= */

:root {
  /* --- Farver: base --- */
  --brscu-bg:            #F7F8F9;   /* sidebaggrund, koldt lys grå */
  --brscu-surface:       #FFFFFF;   /* kort, paneler, formularfelter */
  --brscu-surface-alt:   #EEF1F4;   /* let markeret sektion / stribet tabelrække */
  --brscu-border:        #D8DCE1;
  --brscu-border-strong: #B7BEC7;

  /* --- Farver: tekst --- */
  --brscu-ink:           #1B2430;   /* primær tekst — blågrå, ikke ren sort */
  --brscu-ink-muted:     #5B6570;   /* sekundær tekst, labels, metadata */
  --brscu-ink-faint:     #8A93A0;   /* placeholder, deaktiveret */

  /* --- Farver: accent (handling) --- */
  --brscu-accent:        #2B5C8A;   /* primær handling — rolig, autoritativ blå */
  --brscu-accent-dark:   #1F4569;
  --brscu-accent-tint:   #E8EFF5;   /* svag baggrund til fremhævede elementer */

  /* --- Farver: status (kun til betydning, aldrig dekoration) --- */
  --brscu-danger:        #B3261E;   /* kritisk / alarm */
  --brscu-danger-tint:   #FBEAE9;
  --brscu-warning:       #B8720A;   /* advarsel / kræver opmærksomhed */
  --brscu-warning-tint:  #FBF1E1;
  --brscu-success:       #2E7D46;   /* afklaret / OK */
  --brscu-success-tint:  #E9F4EC;
  --brscu-info:          #2B5C8A;   /* information — samme som accent */
  --brscu-info-tint:     #E8EFF5;

  /* --- Typografi --- */
  --brscu-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --brscu-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  --brscu-text-xs:   0.8125rem;  /* 13px — metadata, tidsstempler */
  --brscu-text-sm:   0.9375rem;  /* 15px — sekundær tekst */
  --brscu-text-base: 1rem;       /* 16px — brødtekst */
  --brscu-text-lg:   1.125rem;   /* 18px — fremhævet tekst */
  --brscu-text-xl:   1.375rem;   /* 22px — sektionsoverskrift */
  --brscu-text-2xl:  1.75rem;    /* 28px — sideoverskrift */

  --brscu-leading: 1.5;

  /* --- Rum og form --- */
  --brscu-space-1: 4px;
  --brscu-space-2: 8px;
  --brscu-space-3: 12px;
  --brscu-space-4: 16px;
  --brscu-space-5: 24px;
  --brscu-space-6: 32px;
  --brscu-space-7: 48px;

  --brscu-radius-sm: 4px;   /* knapper, inputs, badges */
  --brscu-radius-md: 8px;   /* kort, paneler */

  --brscu-shadow-sm: 0 1px 2px rgba(27, 36, 48, 0.06);
  --brscu-shadow-md: 0 2px 8px rgba(27, 36, 48, 0.08);

  --brscu-focus-ring: 0 0 0 3px rgba(43, 92, 138, 0.35);

  --brscu-max-width: 1120px;
}

/* =========================================================================
   Reset & base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--brscu-bg);
  color: var(--brscu-ink);
  font-family: var(--brscu-font);
  font-size: var(--brscu-text-base);
  line-height: var(--brscu-leading);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--brscu-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--brscu-accent-dark); }

:focus-visible {
  outline: none;
  box-shadow: var(--brscu-focus-ring);
  border-radius: var(--brscu-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   Typografi
   ========================================================================= */

h1, h2, h3, h4 {
  margin: 0 0 var(--brscu-space-3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--brscu-ink);
}
h1 { font-size: var(--brscu-text-2xl); }
h2 { font-size: var(--brscu-text-xl); }
h3 { font-size: var(--brscu-text-lg); font-weight: 600; }
h4 { font-size: var(--brscu-text-base); font-weight: 600; }

p { margin: 0 0 var(--brscu-space-3); max-width: 70ch; }

.brscu-muted   { color: var(--brscu-ink-muted); }
.brscu-text-sm { font-size: var(--brscu-text-sm); }
.brscu-text-xs { font-size: var(--brscu-text-xs); }
.brscu-mono    { font-family: var(--brscu-font-mono); }

/* =========================================================================
   Layout
   ========================================================================= */

.brscu-container {
  width: 100%;
  max-width: var(--brscu-max-width);
  margin-inline: auto;
  padding-inline: var(--brscu-space-4);
}

.brscu-stack > * + * { margin-top: var(--brscu-space-4); }

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

/* --- Topbjælke: sober, funktionsorienteret --- */
.brscu-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--brscu-space-4);
  padding: var(--brscu-space-3) var(--brscu-space-4);
  background: var(--brscu-surface);
  border-bottom: 1px solid var(--brscu-border);
}

.brscu-topbar__brand {
  font-size: var(--brscu-text-lg);
  font-weight: 600;
  color: var(--brscu-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.brscu-topbar__nav {
  display: flex;
  gap: var(--brscu-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.brscu-topbar__nav a {
  color: var(--brscu-ink-muted);
  text-decoration: none;
  font-size: var(--brscu-text-sm);
  font-weight: 500;
  padding: var(--brscu-space-2) 0;
  border-bottom: 2px solid transparent;
}
.brscu-topbar__nav a:hover,
.brscu-topbar__nav a[aria-current="page"] {
  color: var(--brscu-ink);
  border-bottom-color: var(--brscu-accent);
}

/* =========================================================================
   Kort / paneler
   ========================================================================= */

.brscu-card {
  background: var(--brscu-surface);
  border: 1px solid var(--brscu-border);
  border-radius: var(--brscu-radius-md);
  padding: var(--brscu-space-4);
  box-shadow: var(--brscu-shadow-sm);
}

.brscu-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--brscu-space-3);
  margin-bottom: var(--brscu-space-3);
  padding-bottom: var(--brscu-space-3);
  border-bottom: 1px solid var(--brscu-border);
}

/* =========================================================================
   Knapper
   ========================================================================= */

.brscu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--brscu-space-2);
  padding: var(--brscu-space-2) var(--brscu-space-4);
  min-height: 44px; /* tilstrækkelig til handsker/touch i felten */
  border: 1px solid transparent;
  border-radius: var(--brscu-radius-sm);
  font-family: inherit;
  font-size: var(--brscu-text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.brscu-btn--primary {
  background: var(--brscu-accent);
  border-color: var(--brscu-accent);
  color: #FFFFFF;
}
.brscu-btn--primary:hover { background: var(--brscu-accent-dark); border-color: var(--brscu-accent-dark); }

.brscu-btn--secondary {
  background: var(--brscu-surface);
  border-color: var(--brscu-border-strong);
  color: var(--brscu-ink);
}
.brscu-btn--secondary:hover { background: var(--brscu-surface-alt); }

.brscu-btn--danger {
  background: var(--brscu-danger);
  border-color: var(--brscu-danger);
  color: #FFFFFF;
}

.brscu-btn:disabled {
  background: var(--brscu-surface-alt);
  border-color: var(--brscu-border);
  color: var(--brscu-ink-faint);
  cursor: not-allowed;
}

/* =========================================================================
   Formularer
   ========================================================================= */

.brscu-field { display: block; margin-bottom: var(--brscu-space-4); }

.brscu-label {
  display: block;
  margin-bottom: var(--brscu-space-1);
  font-size: var(--brscu-text-sm);
  font-weight: 600;
  color: var(--brscu-ink);
}

.brscu-input,
.brscu-select,
.brscu-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--brscu-space-2) var(--brscu-space-3);
  background: var(--brscu-surface);
  border: 1px solid var(--brscu-border-strong);
  border-radius: var(--brscu-radius-sm);
  font-family: inherit;
  font-size: var(--brscu-text-base);
  color: var(--brscu-ink);
}
.brscu-input:focus,
.brscu-select:focus,
.brscu-textarea:focus {
  border-color: var(--brscu-accent);
  box-shadow: var(--brscu-focus-ring);
}

.brscu-hint {
  margin-top: var(--brscu-space-1);
  font-size: var(--brscu-text-xs);
  color: var(--brscu-ink-muted);
}

/* =========================================================================
   Statusmærker (badges) — al farve her betyder noget
   ========================================================================= */

.brscu-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--brscu-space-1);
  padding: 2px var(--brscu-space-2);
  border-radius: var(--brscu-radius-sm);
  font-size: var(--brscu-text-xs);
  font-weight: 600;
  line-height: 1.4;
}

.brscu-badge--danger  { background: var(--brscu-danger-tint);  color: var(--brscu-danger); }
.brscu-badge--warning { background: var(--brscu-warning-tint); color: var(--brscu-warning); }
.brscu-badge--success { background: var(--brscu-success-tint); color: var(--brscu-success); }
.brscu-badge--info    { background: var(--brscu-info-tint);    color: var(--brscu-info); }
.brscu-badge--neutral { background: var(--brscu-surface-alt);  color: var(--brscu-ink-muted); }

/* =========================================================================
   Tabeller — til hændelseslister, TLSK-oversigter mv.
   ========================================================================= */

.brscu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--brscu-text-sm);
}

.brscu-table th {
  text-align: left;
  padding: var(--brscu-space-2) var(--brscu-space-3);
  font-weight: 600;
  color: var(--brscu-ink-muted);
  border-bottom: 1px solid var(--brscu-border-strong);
  white-space: nowrap;
}

.brscu-table td {
  padding: var(--brscu-space-2) var(--brscu-space-3);
  border-bottom: 1px solid var(--brscu-border);
  vertical-align: top;
}

.brscu-table tbody tr:nth-child(even) { background: var(--brscu-surface-alt); }
.brscu-table tbody tr:hover { background: var(--brscu-accent-tint); }

/* =========================================================================
   Alarm-/kritisk-tilstand — bruges sparsomt, kun ved reelt kritisk indhold
   ========================================================================= */

.brscu-alert {
  padding: var(--brscu-space-3) var(--brscu-space-4);
  border-radius: var(--brscu-radius-md);
  border: 1px solid transparent;
  font-size: var(--brscu-text-sm);
}
.brscu-alert--danger  { background: var(--brscu-danger-tint);  border-color: var(--brscu-danger);  color: var(--brscu-danger); }
.brscu-alert--warning { background: var(--brscu-warning-tint); border-color: var(--brscu-warning); color: var(--brscu-warning); }
.brscu-alert--success { background: var(--brscu-success-tint); border-color: var(--brscu-success); color: var(--brscu-success); }
.brscu-alert--info    { background: var(--brscu-info-tint);    border-color: var(--brscu-info);    color: var(--brscu-info); }

/* =========================================================================
   Responsivt — feltbrug sker ofte på telefon/tablet
   ========================================================================= */

@media (max-width: 640px) {
  .brscu-topbar { flex-wrap: wrap; }
  .brscu-topbar__nav { width: 100%; justify-content: flex-start; overflow-x: auto; }
  h1 { font-size: var(--brscu-text-xl); }
}