/* ═══════════════════════════════════════════════════════════════
   Event Consult — fælles brand for /intern
   Farver og skrifter fra EventConsult_GrafiskManual.pdf:
   Orange #edb900 · Sort #240001 · Overskrift Gobold Bold · Brødtekst Montserrat
   Ret farver ét sted her — alle apps bruger disse variabler.
   Lyst tema er standard (varm, lys sand som papiret i manualen, tekst i brand-sort).
   Mørkt tema kan vælges under Min profil (data-theme="dark" på <html>).
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Gobold';
  src: url('/intern/assets/fonts/Gobold-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Brand */
  --brand-orange: #edb900;
  --brand-black:  #240001;

  /* Flader — lys, varm sand med hvide kort; tekst i brand-sort */
  --bg:        #f4efe7;
  --surface:   #ffffff;
  --surface2:  #f8f4ee;
  --border:    #e3dace;
  --text:      #240001;
  --muted:     #6f645e;

  /* Accent = brand-orange til flader, knapper og markeringer. Tekst på orange er brand-sort.
     Orange tekst på lys baggrund er svær at læse — derfor en mørkere guld til tekst og links. */
  --accent:       var(--brand-orange);
  --accent-hover: #ffc919;
  --accent-text:  #8a6500;
  --on-accent:    #240001;
  --gold:         var(--accent);
  --gold2:        var(--accent-hover);

  /* Statusfarver (advarsel er rød-orange, så den ikke forveksles med brand-orange) */
  --green:     #15803d;
  --green-bg:  rgba(21,128,61,.10);
  --yellow:    #c2410c;
  --yellow-bg: rgba(234,88,12,.10);
  --red:       #d7261e;
  --red-bg:    rgba(215,38,30,.09);
  --blue:      #2563eb;
  --skygge:    0 1px 2px rgba(36,0,1,.06), 0 4px 14px rgba(36,0,1,.05);

  /* Skrifter */
  --font-head: 'Gobold', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Mørkt tema (valgfrit, Min profil) — som før */
:root[data-theme="dark"] {
  --bg:        #1b1718;
  --surface:   #252021;
  --surface2:  #2e2829;
  --border:    #3d3536;
  --text:      #f5f2ee;
  --muted:     #a59e99;
  --accent-text: var(--brand-orange);
  --on-accent: #1b1718;
  --green:     #22c55e;
  --green-bg:  rgba(34,197,94,.12);
  --yellow:    #f97316;
  --yellow-bg: rgba(249,115,22,.12);
  --red:       #ef4444;
  --red-bg:    rgba(239,68,68,.12);
  --blue:      #60a5fa;
  --skygge:    none;
  color-scheme: dark;
}
:root { color-scheme: light; }

body { font-family: var(--font-body); }

/* Lyst tema: kort og topbjælke får en blød skygge i stedet for mørke flader */
:root:not([data-theme="dark"]) .card, :root:not([data-theme="dark"]) header { box-shadow: var(--skygge); }
:root:not([data-theme="dark"]) header { border-bottom-color: var(--border); }
/* Logo: positiv udgave på lyst tema, negativ på mørkt */
.logo .brand-neg, .logo-center .brand-neg { display: none; }
:root[data-theme="dark"] .logo .brand-full.brand-pos, :root[data-theme="dark"] .logo-center .brand-pos { display: none; }
:root[data-theme="dark"] .logo .brand-full.brand-neg, :root[data-theme="dark"] .logo-center .brand-neg { display: block !important; }

/* Overskrifter i Gobold (versaler, som i manualen) */
h1, h2, h3, .modal-title, .card-title, .setup-box h1 {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.card-title { font-size: 17px; letter-spacing: .03em; }

/* ── Logo i toppen ──────────────────────────────────────────────
   Version 2 (vandret) i headeren, jf. manualen. På små skærme vises kun EC-mærket. */
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); font-family: var(--font-head) !important; }
.logo img { display: block; }
.logo a { display: flex; align-items: center; text-decoration: none; color: inherit; }
.logo a.logo-app:hover .brand-app { opacity: .8; }
.logo .brand-full { height: 24px; width: auto; }
.logo .brand-mark { height: 24px; width: auto; display: none; }
.logo .brand-app {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  font-size: 20px; letter-spacing: .04em; color: var(--text);
  padding-left: 14px; border-left: 1px solid var(--border); line-height: 1;
}
@media (max-width: 640px) {
  .logo .brand-full, :root[data-theme="dark"] .logo .brand-full.brand-neg { display: none !important; }
  .logo .brand-mark { display: block; }
  .logo .brand-app { font-size: 18px; }
}

/* Centreret logo (login, tilmelding) — version 1-ånd: stort og alene */
.logo-center { display: flex; justify-content: center; margin-bottom: 8px; }
.logo-center img { height: 36px; width: auto; max-width: 100%; }

/* ── Knapper og flader med orange baggrund får mørk tekst ────── */
.btn-primary, .btn-setup, .btn[type="submit"], button.btn:not([class*="btn-"]),
.tab.active-fill, .role-badge-solid {
  color: var(--on-accent) !important;
}
.btn-primary:hover, .btn-setup:hover { background: var(--accent-hover) !important; opacity: 1 !important; }

/* ── Vandmærke (45°, jf. manualen) — bruges på login/tilmelding ─ */
.ec-watermark { position: relative; overflow-x: hidden; }   /* kun vandret — siden skal kunne rulle */
.ec-watermark::before {
  content: ''; position: fixed; z-index: 0; pointer-events: none;
  width: 140vmax; height: 140vmax; right: -55vmax; top: -30vmax;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 617 341'%3E%3Cg fill='%23ffffff'%3E%3Crect x='56' y='56' width='506' height='45'/%3E%3Crect x='56' y='148' width='230' height='45'/%3E%3Crect x='286' y='101' width='46' height='139'/%3E%3Crect x='56' y='240' width='506' height='45'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .04; transform: rotate(-45deg);
}
:root:not([data-theme="dark"]) .ec-watermark::before { filter: invert(1); opacity: .035; }
.ec-watermark > * { position: relative; z-index: 1; }

/* Fokus-markering der kan ses på både lys og mørk baggrund */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Valgt tekst og input-markør i brand-orange */
::selection { background: rgba(237,185,0,.35); }
input, textarea { caret-color: var(--accent-text); }

/* ── App-accent: ikon foran appnavnet i toppen ─────────────────── */
.logo .brand-app { display: inline-flex; align-items: center; gap: 8px; }
.logo .brand-app .app-icon-svg { color: var(--app, var(--accent)); flex-shrink: 0; }

/* Elementer med hidden-attribut skal altid være skjult */
[hidden] { display: none !important; }