/* ============================================================
   Klinik-booking — fælles "Salvie"-tema (PRODUKTION)
   ------------------------------------------------------------
   Delt af de OFFENTLIGE sider (landing.php, booking.php) OG
   admin. Per-klinik temaet styres af CSS-variablerne i :root.

   PER-KLINIK BRANDING:
     I produktion overskrives --primary / --primary-600 m.fl.
     pr. klinik via en lille inline <style>:root{…}</style> der
     sættes server-side ud fra klinikker-rækken (primaer_farve +
     tema_tokens). Værdierne valideres ALTID mod et hex-mønster
     server-side før de skrives, så der ikke kan injiceres CSS.
     Falder klinikken tilbage til default = Salvie-temaet herunder.
   ============================================================ */
:root{
  /* Per-klinik tema (Salvie default) — kan overskrives pr. klinik */
  --primary:#5E8B7E; --primary-600:#456C60; --primary-700:#335148;
  /* #20: den lyse tint afledes af --primary, saa per-klinik-branding ogsaa faerver de lyse
     flader (alerts/chips/ikon-baggrunde) i stedet for at arve Salvie-groen. De WCAG-laaste
     baggrunde (--primary-600/700 = hvid tekst paa farve) roeres IKKE. Fast hex foerst som
     fallback for browsere uden color-mix; color-mix-linjen vinder hvor den understoettes.
     En eksplicit primary_050 via tema_tokens injiceres inline EFTER app.css og vinder fortsat. */
  --primary-050:#EAF1ED;
  --primary-050:color-mix(in srgb, var(--primary) 12%, white);
  --accent:#C58B5F;  --accent-050:#F6ECE2;
  --bg:#F2F6F3; --surface:#ffffff;
  --text:#243A33; --muted:#647067; --border:#D6E3DA;
  /* System (klinik-uafhængigt) */
  --line:#E4ECE7; --page-bg:#F2F6F3;
  /* Fokus-ring: klinik-UAFHÆNGIG mørk farve (WCAG 1.4.11/2.4.11 non-text-kontrast ≥3:1 mod
     hvid/bg/primary-fyld). IKKE --accent (#C58B5F er for lys → fejler 3:1). To-tonet ring
     (mørk kerne + hvid halo) sikrer mindst én synlig kant mod enhver baggrund. */
  --focus:#16261F;
  --danger:#8A2B2B; --danger-bg:#FCEDED; --danger-border:#F0C9C9;
  /* Semantiske status-farver (klinik-uafhængige, WCAG AA mod hvid/egen bg).
     ÉN kanonisk "grøn = ok" på tværs af produktet: --success deles af alert-ok,
     vagtplan-resume og kalenderens ledig-blok. --warning er den rav-gule "under";
     "over"/fejl genbruger --danger ovenfor. */
  --success:#2C5040; --success-bg:#EAF3EE; --success-border:#BFD8C8;
  --warning:#9A6B00; --warning-bg:#FBF3E2;
  --radius:16px; --radius-sm:10px; --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(36,58,51,.06),0 2px 8px rgba(36,58,51,.05);
  --shadow:0 8px 28px rgba(36,58,51,.10),0 2px 8px rgba(36,58,51,.06);
  --shadow-lg:0 22px 54px rgba(36,58,51,.16);
  --maxw:1140px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page-bg);color:var(--text);
  font-family:Inter,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Playfair Display",Georgia,serif;line-height:1.18;margin:0;color:var(--text);font-weight:600}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* Mobil: mindre sidepadding frigoer bredde (datovaelger/slots), og undgaa at en
   intern vandret scroll (uge-strippen) smitter af paa hele siden. */
@media(max-width:560px){.container{padding:0 16px}body{overflow-x:hidden}}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--primary-600);font-weight:700;margin:0 0 12px}
.muted{color:var(--muted)}
.center{text-align:center}

/* Tilgængelighed: synligt fokus + skip-link + sr-only.
   Et globalt fokus-fallback sikrer at INTET interaktivt element kan
   tabbes til uden synlig markering (WCAG 2.4.7). */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 5px #fff,0 0 0 7px var(--focus)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--primary-600);color:#fff;
  padding:10px 16px;border-radius:0 0 var(--radius-sm) 0;z-index:100;font-weight:600}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary-600);color:#fff;border:none;
  border-radius:999px;padding:13px 22px;min-height:44px;font:600 15px Inter,sans-serif;cursor:pointer;text-align:center;
  box-sizing:border-box;transition:background .2s,box-shadow .2s,transform .2s;box-shadow:0 6px 18px rgba(69,108,96,.22)}
/* Hover MØRKERE (ikke lysere): hvid tekst på lysere --primary gav 3.84:1. --primary-700 er
   en mørk Salvie-nuance der bevarer ≥4.5:1; for branded klinikker bevares den (kun --primary/
   --primary-600 brandes), så hover aldrig svækker tekstkontrasten. Lift via skygge giver feedback. */
.btn:hover{background:var(--primary-700);box-shadow:0 8px 22px rgba(36,58,51,.28)}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 5px #fff,0 0 0 7px var(--focus)}
.btn-ghost{background:transparent;color:var(--primary-600);box-shadow:none;border:1.5px solid var(--border)}
.btn-ghost:hover{background:var(--primary-050)}
/* Destruktiv handling (fx slå MFA fra). Mørk rød tekst/kant (#A5281B på hvid = 6.8:1, WCAG AA);
   bevarer .btn:focus-visible-ringen (samme specificitet, ingen inline-override). */
.btn-danger{background:transparent;color:#A5281B;box-shadow:none;border:1.5px solid #C0392B}
.btn-danger:hover{background:#FCEDED}
.btn-block{width:100%;justify-content:center}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn svg{width:18px;height:18px}
/* Disclosure (<details><summary>): synlig fokus-ring for tastaturbrugere. */
summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}

/* Timezone banner (browser-tz vs klinik-tz) */
.tz-banner{display:flex;gap:10px;align-items:flex-start;background:var(--accent-050);
  border:1px solid #EAD9C8;border-radius:var(--radius-sm);padding:12px 14px;font-size:13.5px;color:var(--text)}
.tz-banner svg{flex:none;width:18px;height:18px;color:var(--accent);margin-top:1px}
.tz-banner strong{font-weight:600}
/* Skjult indtil JS afslører en tidszone-afvigelse (progressiv enhancement). */
.tz-banner[hidden]{display:none}

/* Time-slot chips */
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  border:1.5px solid var(--border);background:#fff;color:var(--text);border-radius:999px;padding:9px 16px;
  font:500 14px/1.2 Inter;cursor:pointer;transition:all .18s}
.chip:hover{border-color:var(--primary)}
.chip.selected,.chip[aria-pressed="true"]{background:var(--primary-600);border-color:var(--primary-600);color:#fff}
.chip:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 5px #fff,0 0 0 7px var(--focus)}

/* Brand / logo */
.brand{display:flex;align-items:center;gap:11px}
.logo{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;display:flex;
  align-items:center;justify-content:center;font:700 19px "Playfair Display",serif;flex:none}
.logo img{width:100%;height:100%;object-fit:contain;border-radius:50%}
.brand-name{font-family:"Playfair Display",serif;font-weight:600;font-size:18px}

/* Forms */
label{display:block;font-size:13px;font-weight:600;color:var(--text);margin:0 0 6px}
.input{width:100%;border:1.5px solid var(--border);background:#fff;border-radius:var(--radius-sm);
  padding:11px 13px;font:400 16px Inter;color:var(--text);transition:border-color .18s}
.input:focus{outline:none;border-color:var(--primary)}
.input:focus-visible{outline:3px solid var(--focus);outline-offset:1px;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--focus)}

/* Fejl-/info-beskeder (delt af offentlige sider + admin) */
.besked-fejl{background:var(--danger-bg);border:1px solid var(--danger-border);border-radius:var(--radius-sm);
  padding:12px 14px;font-size:14px;color:var(--danger);margin-bottom:18px}

/* Misc */
.preview-tag{position:fixed;bottom:14px;right:14px;background:#243A33;color:#fff;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:999px;opacity:.85;z-index:60}

/* ============================================================
   OFFENTLIG FORSIDE (landing.php) — IT-Connect markedsføring
   (mockup 02-forside som visuel reference)
   ============================================================ */
.nav{position:sticky;top:0;z-index:40;background:rgba(242,246,243,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--text);transition:color .2s}
.nav-links a:hover{color:var(--primary-600)}
@media(max-width:780px){.nav-links a:not(.btn){display:none}}

.hero{padding:64px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr;gap:36px}}
.hero h1{font-size:clamp(32px,5vw,52px);margin-bottom:18px}
.hero p.lead{font-size:19px;color:var(--muted);max-width:520px;margin-bottom:28px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.trust{margin-top:26px;font-size:13.5px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust svg{width:16px;height:16px;color:var(--primary);flex:none}

.device{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:20px;transform:rotate(.5deg)}
.device-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.device-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.device-slots .chip{text-align:center;padding:9px 0;font-size:13px}
.device .tz-banner{margin:6px 0 2px;font-size:12px;padding:9px 11px}

.section{padding:56px 0}
.section-head{max-width:640px;margin:0 auto 40px;text-align:center}
.section-head h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:12px}
.section--alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:780px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)}
.step-num{width:38px;height:38px;border-radius:50%;background:var(--primary-050);color:var(--primary-600);
  font-weight:700;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:14px}
.step h3{font-size:19px;margin-bottom:7px}
.step p{font-size:14.5px;color:var(--muted);margin:0}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:880px){.features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.features{grid-template-columns:1fr}}
.feature{padding:22px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.feature .ic{width:44px;height:44px;border-radius:12px;background:var(--primary-050);color:var(--primary-600);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.feature .ic svg{width:23px;height:23px}
.feature h3{font-size:17px;margin-bottom:6px}
.feature p{font-size:14px;color:var(--muted);margin:0}

.cta-band{background:linear-gradient(135deg,var(--primary-600),var(--primary));border-radius:var(--radius-lg);
  padding:44px;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;box-shadow:var(--shadow)}
@media(max-width:820px){.cta-band{grid-template-columns:1fr;padding:32px}}
.cta-band h2{color:#fff;font-size:30px;margin-bottom:10px}
.cta-band p{color:rgba(255,255,255,.9);margin:0}
.cta-band a{color:#fff;text-decoration:underline;font-weight:600}
.form-card{background:#fff;border-radius:var(--radius);padding:22px}
.form-card a{color:var(--primary-600);font-weight:600;text-decoration:none}
.form-card a:hover{text-decoration:underline}

footer.site{border-top:1px solid var(--line);padding:30px 0;margin-top:56px;color:var(--muted);font-size:14px}
.foot-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center}

/* ============================================================
   OFFENTLIGT BOOKINGFLOW (booking.php)
   (mockup 03-bookingflow som visuel reference)
   ============================================================ */
.clinic-bar{background:var(--surface);border-bottom:1px solid var(--line)}
.clinic-bar .inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px;flex-wrap:wrap}
.clinic-bar .hint{font-size:13px;color:var(--muted)}
.steps-bar{padding:18px 0 6px}
.steps-list{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.steps-list li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 14px 7px 8px}
.steps-list .dot{width:24px;height:24px;border-radius:50%;background:var(--primary-050);color:var(--primary-600);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.steps-list li.done{color:var(--text)}
.steps-list li.done .dot{background:var(--primary-600);color:#fff}
.steps-list li.active{color:#fff;background:var(--primary-600);border-color:var(--primary-600)}
.steps-list li.active .dot{background:#fff;color:var(--primary-600)}
.panel{padding:26px;margin-top:14px}
.panel h1{font-size:26px;margin-bottom:4px}
.panel .sub{color:var(--muted);font-size:14.5px;margin-bottom:20px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;margin:12px 0 0}
.back:hover{color:var(--primary-600)}
.vaelg-liste{display:flex;flex-direction:column;gap:12px}
.vaelg-kort{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1.5px solid var(--border);background:#fff;border-radius:var(--radius);padding:16px 18px;transition:border-color .15s,box-shadow .15s}
.vaelg-kort:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}
.vaelg-kort:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 5px #fff,0 0 0 7px var(--focus)}
.vaelg-info{display:flex;flex-direction:column;gap:3px}
.vaelg-navn{font-weight:600;font-size:16px;color:var(--text)}
.vaelg-meta{font-size:13.5px;color:var(--muted)}
.vaelg-beskrivelse{font-size:13.5px;color:var(--muted);margin-top:2px}
.vaelg-pil{color:var(--primary-600);font-size:18px;flex:none}

/* Kalender / ledige tider — slot-liste (server-renderet + progressivt opdateret af booking.php's inline-JS) */
.slot-group{margin:18px 0}
.slot-group h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-family:Inter;font-weight:700;margin-bottom:10px}
.slot-row{display:flex;gap:9px;flex-wrap:wrap}

.layout{display:grid;grid-template-columns:1fr 340px;gap:28px;padding:14px 0 70px;align-items:start}
@media(max-width:880px){.layout{grid-template-columns:1fr}}
.summary{padding:22px;position:sticky;top:18px}
.summary h2{font-size:18px;margin-bottom:16px}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px dashed var(--border);font-size:14.5px}
.sum-row .k{color:var(--muted)}
.sum-row .v{flex:1;font-weight:600;text-align:right}
.sum-pris{flex:none;min-width:74px;text-align:right;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0 18px}
.sum-total .amount{font-family:"Playfair Display",serif;font-size:26px;font-weight:600;color:var(--primary-600)}
.felt{margin-bottom:16px}
.betaling{border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}
.betaling legend{font-weight:600;padding:0 6px}
.radio-kort{display:flex;gap:10px;align-items:flex-start;padding:10px 0;font-size:14.5px;cursor:pointer}
.radio-kort input{margin-top:3px}
.kvittering{text-align:center;max-width:560px;margin:14px auto 0}
.kvit-ikon{width:56px;height:56px;border-radius:50%;background:var(--primary-050);color:var(--primary-600);
  font-size:28px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.kvit-detaljer{text-align:left;margin-top:18px}

/* Admin-formularer + flash (fase 6). Begge flash-konventioner: '.alert-ok' (admin_flash_html)
   og '.alert.ok' (håndskrevne sider). */
.form-row{margin-bottom:14px}
.form-row > label{display:block;font-weight:600;font-size:14px;margin-bottom:5px;color:var(--text)}
.checkbox-row{display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.checkbox-row input[type=checkbox]{width:18px;height:18px;flex:none;accent-color:var(--primary-600)}
.alert{border-radius:var(--radius-sm);padding:12px 15px;font-size:14px;line-height:1.45;margin-bottom:18px;
  border:1px solid var(--border);background:var(--surface);color:var(--text)}
.alert-ok,.alert.ok{background:var(--success-bg);border-color:var(--success-border);color:var(--success)}
.alert-error,.alert.error{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
.alert-info,.alert.info{background:var(--primary-050);border-color:var(--border);color:var(--primary-600)}

/* ============================================================
   ADMIN DATA-UI — KPI-kort, tabeller, status (statistik + vagtplan)
   Delte mønstre løftet fra inline-styles til design-systemet, så
   "grøn = ok" m.fl. kun defineres ÉT sted.
   ============================================================ */
/* Nøgletals-kort: eyebrow-label + stort Playfair-tal (+ evt. lille note). */
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:20px}
.kpi-card .kpi-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--primary-600);font-weight:700;margin:0 0 6px}
.kpi-card .kpi-tal{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:30px;
  line-height:1.1;margin:0;color:var(--text)}
/* Fremhæv et enkelt tal (fx periodens omsætning) i primær-farven. */
.kpi-card .kpi-tal.kpi-primary{color:var(--primary-600)}

/* Vandret-scrollende ramme: brede tabeller scroller INDE i deres kort i stedet
   for at skubbe hele siden vandret på smal mobil (375px). */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Ren admin-datatabel: muted header-række, luftig celle-padding, fine linjer. */
.data-table{width:100%;border-collapse:collapse;font-size:14px}
.data-table thead tr{text-align:left;color:var(--muted)}
.data-table th{padding:8px 18px;border-top:1px solid var(--line);font-weight:600}
.data-table td{padding:9px 18px;border-top:1px solid var(--line)}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums}

/* Status-tekstfarver (over/under/ok) — peger på de delte status-tokens. */
.stat-ok{color:var(--success)}
.stat-under{color:var(--warning)}
.stat-over{color:var(--danger)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}