/*
 * Intyg — tätt och läsbart. En uppdragsgivare öppnar det här på en telefon i
 * en bil, så raden måste gå att förstå utan att tryckas på: vad det är, vem som
 * utfärdat, och om det fortfarande gäller.
 */
:root {
  --bakgrund: #f4f6f8;
  --yta: #ffffff;
  --text: #16212b;
  --svag: #5a6b7a;
  --kant: #dbe2e8;
  --handling: #14527a;
  --handling-text: #ffffff;
  --gron: #1c7a4a;
  --gron-bak: #e4f4ea;
  --gul: #8a5a06;
  --gul-bak: #fdf2d9;
  --rod: #a52020;
  --rod-bak: #fbe6e6;
  --gra-bak: #eef1f4;
  --skugga: 0 1px 3px rgb(22 33 43 / 8%), 0 6px 20px rgb(22 33 43 / 6%);
  --radie: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="ljus"]) {
    --bakgrund: #131920;
    --yta: #1b232c;
    --text: #e8edf2;
    --svag: #9aabb8;
    --kant: #2c3742;
    --handling: #4a9fd4;
    --handling-text: #0c1219;
    --gron: #66d69a;
    --gron-bak: #17352a;
    --gul: #e9bd5e;
    --gul-bak: #37301c;
    --rod: #f08a8a;
    --rod-bak: #3a2020;
    --gra-bak: #232c36;
    --skugga: 0 1px 3px rgb(0 0 0 / 40%);
  }
}
:root[data-tema="mork"] {
  --bakgrund: #131920; --yta: #1b232c; --text: #e8edf2; --svag: #9aabb8;
  --kant: #2c3742; --handling: #4a9fd4; --handling-text: #0c1219;
  --gron: #66d69a; --gron-bak: #17352a; --gul: #e9bd5e; --gul-bak: #37301c;
  --rod: #f08a8a; --rod-bak: #3a2020; --gra-bak: #232c36;
}

* { box-sizing: border-box; }

/*
 * ⛔ `hidden` MÅSTE vinna över varje explicit `display`.
 *
 * Attributet `hidden` sätter `display: none` i webbläsarens egen stilmall, och
 * vilken författarregel som helst slår den. `.ruta { display: flex }` gjorde
 * därför att förhandsgranskningsrutan — `position: fixed; inset: 0; z-index: 50`
 * — låg ovanpå HELA sidan vid första besöket: grå yta med «Ladda ner» och
 * «Stäng», ingen inloggning synlig. `.adminlankar { display: flex }` hade samma
 * fel och visade adminlänkarna för en uppdragsgivare.
 *
 * Regeln står här, globalt, i stället för som två lappar på de selektorer som
 * råkade drabbas — annars återkommer felet nästa gång någon lägger `display` på
 * något som också döljs. Samma fälla som `#scen-reserv[hidden]` i jmsystem.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bakgrund);
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 900px; margin: 0 auto; padding: 24px 16px 64px; }

h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 6px; letter-spacing: -0.01em; }
.ingress { color: var(--svag); margin: 0 0 20px; }
.finstilt { color: var(--svag); font-size: 0.85rem; }
.tomt { color: var(--svag); padding: 28px 0; text-align: center; }

/* ── Topprad ──────────────────────────────────────────────────────────── */
header {
  background: var(--yta);
  border-bottom: 1px solid var(--kant);
  position: sticky; top: 0; z-index: 5;
}
header .rad {
  max-width: 900px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}
header strong { font-size: 0.95rem; }
header .lank:last-child { margin-left: auto; }
.rollmarke {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 99px; background: var(--gra-bak); color: var(--svag);
}

/* ── Knappar ──────────────────────────────────────────────────────────── */
.knapp {
  appearance: none; border: 0; cursor: pointer;
  background: var(--handling); color: var(--handling-text);
  font: inherit; font-weight: 600;
  padding: 11px 18px; border-radius: 8px;
  min-height: 44px;
}
.knapp:hover { filter: brightness(1.08); }
.knapp:disabled { opacity: 0.55; cursor: progress; }
.knapp.tyst { background: var(--gra-bak); color: var(--text); font-weight: 500; }
.lank {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--handling); font: inherit; padding: 6px 2px; text-decoration: underline;
  min-height: 36px;
}

/* ── Kort och formulär ────────────────────────────────────────────────── */
.kort {
  background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie);
  padding: 16px; margin: 0 0 16px; box-shadow: var(--skugga);
}
.kort.vidgas { padding: 0; }
.kort.vidgas > summary {
  padding: 14px 16px; cursor: pointer; font-weight: 600; list-style: none;
}
.kort.vidgas > summary::before { content: "+ "; color: var(--handling); }
.kort.vidgas[open] > summary::before { content: "– "; }
.kort.vidgas > form, .kort.vidgas > p { padding: 0 16px 16px; }

label { display: block; margin: 0 0 12px; font-size: 0.9rem; color: var(--svag); }
input, select {
  display: block; width: 100%; margin-top: 4px;
  font: inherit; color: var(--text); background: var(--bakgrund);
  border: 1px solid var(--kant); border-radius: 8px; padding: 10px 12px;
  min-height: 44px;
}
input[type="file"] { padding: 8px; }
.tva { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fel { color: var(--rod); font-weight: 600; }
.svar { padding: 10px 12px; border-radius: 8px; background: var(--gra-bak); }
.svar.ok { background: var(--gron-bak); color: var(--gron); }
.svar.nej { background: var(--rod-bak); color: var(--rod); }
.bankid-rad { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--kant); }
.bankid-rad a { color: var(--handling); }

/* ── Personlistan ─────────────────────────────────────────────────────── */
.personer { display: grid; gap: 10px; margin-bottom: 20px; }
.person {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie);
  padding: 14px 16px; cursor: pointer; color: inherit; font: inherit;
  box-shadow: var(--skugga);
}
.person:hover { border-color: var(--handling); }
.person .initialer {
  flex: 0 0 40px; height: 40px; border-radius: 99px;
  background: var(--gra-bak); color: var(--svag);
  display: grid; place-items: center; font-weight: 700; font-size: 0.85rem;
}
.person .mitten { flex: 1 1 auto; min-width: 0; }
.person .pnamn { font-weight: 600; display: block; }
.person .proll { color: var(--svag); font-size: 0.85rem; }
.person .pil { color: var(--svag); }

/* Statusprickar: tomt giltig_till har EGEN färg, aldrig grön. */
.prickar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.prick {
  font-size: 0.75rem; padding: 1px 8px; border-radius: 99px; white-space: nowrap;
}
.prick.ok { background: var(--gron-bak); color: var(--gron); }
.prick.snart { background: var(--gul-bak); color: var(--gul); }
.prick.ut { background: var(--rod-bak); color: var(--rod); }
.prick.okand { background: var(--gra-bak); color: var(--svag); }

/* ── Dokumentraderna ──────────────────────────────────────────────────── */
.verktygsrad {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.sammanfattning { color: var(--svag); font-size: 0.9rem; }

.dokument { display: grid; gap: 10px; margin-bottom: 20px; }
.dok {
  background: var(--yta); border: 1px solid var(--kant); border-left-width: 4px;
  border-radius: var(--radie); padding: 14px 16px; box-shadow: var(--skugga);
}
.dok.ok { border-left-color: var(--gron); }
.dok.snart { border-left-color: var(--gul); }
.dok.ut { border-left-color: var(--rod); }
.dok.okand { border-left-color: var(--kant); }

.dok-rubrik { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dok-typ {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--svag); background: var(--gra-bak); padding: 2px 8px; border-radius: 99px;
}
.dok-namn { font-weight: 600; }
.dok-meta { color: var(--svag); font-size: 0.87rem; margin-top: 4px; }
.dok-status { margin-top: 6px; font-size: 0.87rem; font-weight: 600; }
.dok-status.ok { color: var(--gron); }
.dok-status.snart { color: var(--gul); }
.dok-status.ut { color: var(--rod); }
.dok-status.okand { color: var(--svag); }
.dok-knappar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.dok-knappar .knapp { padding: 8px 14px; font-size: 0.9rem; }

/* ── Mottagare och logg ───────────────────────────────────────────────── */
.mottagare {
  background: var(--yta); border: 1px solid var(--kant); border-radius: var(--radie);
  padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--skugga);
}
.mottagare .topp { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mottagare .topp .lank { margin-left: auto; }
.kryssrutor { display: grid; gap: 4px; margin: 10px 0; }
.kryssrutor label {
  display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text);
}
.kryssrutor input { width: auto; min-height: 0; margin: 0; }

.loggrad {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--kant); font-size: 0.9rem;
}
.loggrad .nar { color: var(--svag); flex: 0 0 130px; font-variant-numeric: tabular-nums; }
.loggrad .vem { font-weight: 600; }
.loggrad .vad { color: var(--svag); }
.adminlankar { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; }

/* ── Förhandsgranskning ───────────────────────────────────────────────── */
.ruta {
  position: fixed; inset: 0; z-index: 50; background: var(--bakgrund);
  display: flex; flex-direction: column;
}
.ruta-topp {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: var(--yta); border-bottom: 1px solid var(--kant);
}
.ruta-topp strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ruta-knappar { display: flex; gap: 14px; flex: 0 0 auto; }
.ruta-kropp { flex: 1 1 auto; min-height: 0; }
.ruta-kropp iframe { width: 100%; height: 100%; border: 0; background: var(--gra-bak); }

@media (max-width: 560px) {
  .tva { grid-template-columns: 1fr; }
  .loggrad .nar { flex-basis: 100%; }
}

/* ── Inkorgen ─────────────────────────────────────────────────────────── */
.inkorgskort {
  background: var(--yta); border: 1px solid var(--kant); border-left: 4px solid var(--kant);
  border-radius: var(--radie); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--skugga);
}
.inkorgskort.saker { border-left-color: var(--gron); }
.inkorgskort.trasig { border-left-color: var(--rod); }
.ik-topp { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ik-topp strong { min-width: 0; overflow-wrap: anywhere; }
.ik-form { margin-top: 10px; }
.ik-form label { margin-bottom: 10px; }
.ik-form select { display: block; width: 100%; margin-top: 4px; }
.anmarkning {
  margin: 6px 0; padding: 8px 12px; border-radius: 8px;
  background: var(--gul-bak); color: var(--gul); font-size: 0.9rem;
}
.citat { margin: 4px 0 12px; }
.citat q {
  display: block; margin-top: 4px; padding: 8px 12px; border-radius: 8px;
  background: var(--gra-bak); font-style: normal; overflow-wrap: anywhere;
}
.bekraftat { color: var(--gron); }
.obekraftat { color: var(--gul); font-weight: 600; }