/* Portalens enda stilmall.

   Tre krav styr: läsbar på en telefon i ett behandlingsrum, lugn nog att inte
   kännas som en inkorg (spec avsnitt 13 punkt 5), och snabb nog att inte kosta
   någon av de tio sekunder inmatningen får ta. Därför inga typsnitt att hämta,
   inga bilder och inget skript.

   Ljust och mörkt läge följer systemets inställning. Kliniker sitter i allt från
   ett soligt väntrum till en kväll i en kommunal hemtjänstlokal. */

:root {
  color-scheme: light dark;

  --bg: #f7f7f5;
  --yta: #ffffff;
  --text: #1b1b1a;
  --dampad: #5c5c58;
  --linje: #e0e0dc;
  --accent: #1f5f4f;
  --accent-text: #ffffff;
  --fel-bg: #fdecea;
  --fel-text: #8c2318;
  --ok-bg: #e9f5ee;
  --ok-text: #1f5f3f;
  --flagga-bg: #fdf3e3;
  --flagga-text: #7a4f10;
  --radie: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --yta: #1f2126;
    --text: #e9e9e6;
    --dampad: #a3a49f;
    --linje: #33353b;
    --accent: #6fbfa5;
    --accent-text: #10201b;
    --fel-bg: #3a1f1c;
    --fel-text: #f2b8b0;
    --ok-bg: #1c3129;
    --ok-text: #9fdcbe;
    --flagga-bg: #34291a;
    --flagga-text: #f0cf98;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* 16px minimum: mindre än så zoomar iOS in vid fokus i ett fält, och då
     hoppar hela formuläret medan terapeuten skriver. */
}

.hoppa {
  position: absolute;
  left: -9999px;
}
.hoppa:focus {
  left: 1rem;
  top: 1rem;
  background: var(--yta);
  padding: 0.5rem 0.75rem;
  z-index: 10;
}

/* --- Topp och fot ---------------------------------------------------- */

.topp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.85rem 1.25rem;
  background: var(--yta);
  border-bottom: 1px solid var(--linje);
}

.marke {
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--text);
}

.meny { display: flex; gap: 1rem; }
.meny a { color: var(--dampad); text-decoration: none; }
.meny a:hover, .meny a:focus { color: var(--text); text-decoration: underline; }

.ut { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.vem { color: var(--dampad); font-size: 0.9rem; }

.fot {
  padding: 1.5rem 1.25rem 3rem;
  max-width: 62rem;
  margin: 0 auto;
}

/* Notisen om att systemet inte är en larmkanal (spec avsnitt 3). Dämpad men
   aldrig dold: den ska läsas, inte skrikas. */
.notis {
  color: var(--dampad);
  font-size: 0.85rem;
  border-top: 1px solid var(--linje);
  padding-top: 1rem;
  margin: 0;
}

/* --- Ytor ------------------------------------------------------------ */

main { padding: 1.25rem; }

.kort {
  background: var(--yta);
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  padding: 1.5rem;
  max-width: 46rem;
  margin: 0 auto;
}
.kort.smal { max-width: 28rem; }
.kort.bred { max-width: 62rem; }

h1 { font-size: 1.4rem; margin: 0 0 0.35rem; }
h2 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; }

.underrubrik { color: var(--dampad); margin: 0 0 1.25rem; }
.hjalp { color: var(--dampad); font-size: 0.9rem; }
.rad-topp { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

hr { border: 0; border-top: 1px solid var(--linje); margin: 1.5rem 0; }

/* --- Formulär -------------------------------------------------------- */

label { display: block; margin: 1rem 0 0.35rem; font-weight: 550; }

input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="file"] {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--linje);
  border-radius: 8px;
}

input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.kod-falt {
  font-size: 1.5rem;
  letter-spacing: 0.3em;
  text-align: center;
}

fieldset.niva { border: 0; padding: 0; margin: 1.25rem 0 0; }
fieldset.niva legend { font-weight: 550; padding: 0; }

.radio, .kryss {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0.6rem 0 0;
  font-weight: 400;
  cursor: pointer;
}
.radio input, .kryss input { margin-top: 0.25rem; }
.radio strong { display: block; }
.radio span, .kryss span { font-size: 0.95rem; }

button, .knapp {
  display: inline-block;
  padding: 0.7rem 1.1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--linje);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .knapp:hover { border-color: var(--dampad); }

.primar {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  font-weight: 550;
}
.primar:hover { filter: brightness(1.08); }

form .primar { margin-top: 1.25rem; }
.stor { width: 100%; padding: 0.95rem 1.1rem; font-size: 1.05rem; }

button.lank {
  padding: 0;
  border: 0;
  background: none;
  color: var(--dampad);
  text-decoration: underline;
  font-size: 0.9rem;
}

/* --- Meddelanden ----------------------------------------------------- */

.fel, .ok, .hinder {
  padding: 0.8rem 1rem;
  border-radius: 8px;
  margin: 1rem 0;
}
.fel { background: var(--fel-bg); color: var(--fel-text); }
.ok { background: var(--ok-bg); color: var(--ok-text); }
.hinder { background: var(--fel-bg); color: var(--fel-text); }
.hinder h2 { margin: 0 0 0.4rem; font-size: 1rem; }
.hinder ul { margin: 0; padding-left: 1.2rem; }
.varning-mjuk { background: var(--flagga-bg); color: var(--flagga-text);
  padding: 0.8rem 1rem; border-radius: 8px; }

/* --- Godkännandevyn -------------------------------------------------- */

.mottagare { margin-bottom: 1.25rem; }
.nummer { margin: 0; }
.nummer .hjalp { display: block; }

.sekvens { list-style: none; margin: 1.5rem 0 0; padding: 0; }

.meddelande {
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  padding: 0.9rem 1rem;
  margin-bottom: 0.85rem;
  background: var(--bg);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.82rem;
  color: var(--dampad);
  margin-bottom: 0.55rem;
}
.meta .sort { font-weight: 600; color: var(--text); }

/* Exakt den text patienten får. Bevarade radbrytningar och ett typsnitt som
   inte döljer dubbla mellanslag: behandlaren granskar tecken, inte intryck. */
.sms {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: 1.55;
}

.summa { margin-top: 1.25rem; }

/* --- Patientlista ---------------------------------------------------- */

.patientlista { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.patientlista li { border-top: 1px solid var(--linje); }

.patientlista a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.9rem 0.25rem;
  color: var(--text);
  text-decoration: none;
}
.patientlista a:hover { background: var(--bg); }

.namn { font-weight: 600; min-width: 12rem; }
.vecka, .foljsamhet { color: var(--dampad); font-size: 0.9rem; }
.foljsamhet { margin-left: auto; }

.pill {
  font-size: 0.78rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--linje);
  color: var(--dampad);
  white-space: nowrap;
}
.pill-aktiv { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.pill-atgard, .pill-flagga {
  background: var(--flagga-bg);
  color: var(--flagga-text);
  border-color: transparent;
}
.pill-stoppad, .pill-raderad { background: var(--fel-bg); color: var(--fel-text);
  border-color: transparent; }

/* --- Detaljvyn ------------------------------------------------------- */

.stor-siffra { font-size: 1.25rem; font-weight: 600; margin: 1rem 0; }

.sammanfattning {
  background: var(--bg);
  border: 1px solid var(--linje);
  border-radius: var(--radie);
  padding: 1rem;
}
.sammanfattning h2 { margin-top: 0; }

.fritext, .eskaleringar { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.fritext li, .eskaleringar li {
  display: flex;
  gap: 0.9rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--linje);
}
.nar { color: var(--dampad); font-size: 0.9rem; white-space: nowrap; }
.fritext .text { overflow-wrap: anywhere; }

.drift { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.25rem; margin: 0.5rem 0 0; }
.drift dt { color: var(--dampad); font-size: 0.9rem; }
.drift dd { margin: 0; }

.steg { padding-left: 1.2rem; }
.steg li { margin: 0.4rem 0; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; }
.nyckel { letter-spacing: 0.08em; }
.brytbar { overflow-wrap: anywhere; display: block; margin-top: 0.5rem; }

/* --- Mobil ----------------------------------------------------------- */

@media (max-width: 40rem) {
  main { padding: 0.75rem; }
  .kort { padding: 1.1rem; border-radius: 0; border-left: 0; border-right: 0; }
  .foljsamhet { margin-left: 0; width: 100%; }
  .namn { min-width: 0; }
  .drift { grid-template-columns: 1fr; gap: 0 0; }
  .drift dd { margin-bottom: 0.6rem; }
}