/* Dugnad — minimal, ryddig stil
   UU: WCAG AA krev kontrast 4.5:1 for normal tekst, 3:1 for stor tekst og UI.
   --bg #eceef1 mot --t1 #1a1f2b = 14.6:1 (AAA)
   --bg #eceef1 mot --t2 #3f4754 = 8.3:1 (AAA)
   --accent #1d4ed8 mot --bg = 7.4:1 (AAA) */
:root{
  --bg:#eceef1; --surface:#ffffff; --line:#d6dae0;
  --t1:#1a1f2b; --t2:#3f4754; --muted:#6b7280;
  --accent:#1d4ed8; --accent-soft:#dbeafe;
  --green:#bbf7d0; --green-d:#15803d;
  --yellow:#fde68a; --yellow-d:#a16207;
  --grey:#cbd5e1; --grey-d:#374151;
  --red:#fecaca; --red-d:#b91c1c;
  --fokus:#b45309;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--t1);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;border:1px solid var(--line);background:var(--surface);padding:6px 10px;border-radius:6px;cursor:pointer}
button:hover{background:var(--accent-soft)}
input[type=search],input[type=text],input[type=email],input[type=tel],input[type=number]{
  font:inherit;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);width:100%;
}
.muted{color:var(--muted)}

.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .brand{font-size:15px}
.topbar nav a{margin-left:14px;color:var(--t2)}
.topbar nav a.ut{color:var(--red-d)}

:root{--w1:240px;--w3:320px}.grid3{display:grid;grid-template-columns:var(--w1) 8px 1fr 8px var(--w3);gap:14px;padding:14px;height:calc(100vh - 50px);overflow:hidden}
.col{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.col h2{font-size:15px;margin:0 0 10px}
.lastned{margin-bottom:8px;font-size:12px}

/* Tab-panel i kolonne 3 */
.tabar{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:-14px -14px 12px;padding:0 8px;background:var(--bg);border-radius:10px 10px 0 0}
.tabar .tab{border:0;background:transparent;padding:10px 12px;font-size:13px;color:var(--t2);border-bottom:2px solid transparent;border-radius:0;cursor:pointer}
.tabar .tab:hover{color:var(--t1);background:transparent}
.tabar .tab.aktiv{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.tab-innhald{flex:1;min-height:0;overflow:auto}
.tab-innhald.skjult{display:none}

/* Frivillige-liste */
#sok-friv,#sok-kiosk,#sok-dag{margin-bottom:8px}
.liste{list-style:none;padding:0;margin:0;overflow:auto;flex:1;min-height:0}
.liste li{font-size:11px;line-height:1.25;padding:6px 8px 6px 9px;border:1px solid var(--line);border-radius:7px;margin-bottom:4px;cursor:grab;background:var(--surface);display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:28px;box-shadow:0 1px 0 rgba(0,0,0,.02);transition:background .12s,border-color .12s,box-shadow .12s,transform .05s}
.liste li:active{cursor:grabbing;transform:scale(.99)}
.liste li > span:not(.prikkar){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--t1);text-align:left}
.fkort-full.pa{background:var(--red,#dc2626)!important;color:#fff!important;border-color:var(--red,#dc2626)!important}
.fkort-full.pa svg{stroke:#fff}
.fkort-full-band{margin:.6rem -14px -14px;padding:.55rem .8rem;background:var(--red,#dc2626);color:#fff;font-weight:600;font-size:.9rem;text-align:center;display:flex;align-items:center;justify-content:center;gap:.4rem;border-bottom-left-radius:10px;border-bottom-right-radius:10px;letter-spacing:.02em}
.aktiv-last-band{margin:.4rem 0 .6rem;padding:.45rem .7rem;background:var(--red,#dc2626);color:#fff;font-weight:600;font-size:.85rem;text-align:center;display:flex;align-items:center;justify-content:center;gap:.4rem;border-radius:8px}
.liste li:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.liste li:hover{background:var(--accent-soft);border-color:var(--accent);box-shadow:0 2px 6px rgba(14,165,233,.12)}
.liste li.aktiv{background:var(--green-d)!important;border-color:var(--green-d)!important;color:#fff!important;outline:none;box-shadow:0 2px 6px rgba(22,163,74,.35)!important;font-weight:600}
.liste li.aktiv > span{color:#fff!important}
.liste li.aktiv .prikkar{color:#fff!important}
.liste li.aktiv .fav-stj{color:#fef3c7!important}
.liste li.aktiv.teamsleder{box-shadow:0 2px 6px rgba(22,163,74,.35),inset 0 0 0 2px #0369a1!important}
.liste li.dragging{opacity:.4}
.liste li .badge{font-size:11px;color:var(--muted)}
.liste li .prikkar{color:var(--green-d);font-size:12px;letter-spacing:1px;line-height:1;flex-shrink:0;font-variant-numeric:tabular-nums}
.liste li.full .prikkar{color:var(--accent)}

/* Plan */
.filterrad{display:flex;gap:8px;margin-bottom:8px;align-items:stretch}
.filterrad input,.filterrad select,.filterrad button{flex:1;height:34px;box-sizing:border-box;padding:0 10px;font-size:.85rem;line-height:1;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--t1)}
.filterrad button{flex:0 0 auto}
.filter-handlingar{display:flex;align-items:center;gap:6px;margin-bottom:6px;justify-content:flex-end}
#filter-meld-btn{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;padding:4px 10px;height:28px}
.meta{font-size:12px;color:var(--t2);margin-bottom:10px}
.plan{overflow:auto;flex:1;min-height:0;padding-right:4px}
.kiosk-blokk{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:14px;background:var(--bg)}
.kiosk-blokk h3{margin:0 0 8px;font-size:14px;color:var(--t1);display:flex;align-items:center;justify-content:space-between;gap:8px}
.kiosk-blokk h3 .ktittel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dag-blokk h4{display:flex;align-items:center;justify-content:space-between;gap:6px}
.leggtil-vakt{
  background:transparent;color:var(--accent);border:none;
  width:22px;height:22px;
  font-size:20px;line-height:1;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;font-weight:700;
}
.leggtil-vakt:hover{color:var(--green-d);filter:none}
.leggtil-vakt.liten{width:18px;height:18px;font-size:14px;background:transparent;color:var(--accent);border:none}
.leggtil-vakt.liten:hover{background:transparent;color:var(--green-d);border:none}

/* Melding-dialog */
.meld-dialog{border:1px solid var(--line);border-radius:12px;padding:0;background:var(--surface);color:var(--t1);min-width:340px;max-width:440px;width:92vw;box-shadow:0 8px 32px rgba(0,0,0,.18)}
.meld-dialog::backdrop{background:rgba(0,0,0,.45)}
.meld-dialog form{padding:1.2rem 1.3rem 1rem}
.fkm-tittel{margin:0 0 .9rem;font-size:1rem;font-weight:700;color:var(--t1)}
.meld-dialog #fkmTekst,.meld-dialog #mldTekst{width:100%;box-sizing:border-box;padding:.6rem .7rem;border:1px solid var(--line);border-radius:7px;font:inherit;font-size:.88rem;resize:vertical;background:var(--bg);color:var(--t1);min-height:90px}
.fkm-kanalar{display:flex;flex-direction:column;gap:.45rem;margin:.9rem 0}
.fkm-kanal{display:flex;align-items:center;gap:.7rem;padding:.55rem .75rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);cursor:pointer;text-decoration:none;color:var(--t1)}
.fkm-kanal:has(input:not(:disabled)):hover,.fkm-kanal.fkm-lenke:hover{border-color:var(--accent);background:var(--accent-soft)}
.fkm-kanal:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.fkm-deaktivert{opacity:.45;cursor:not-allowed}
.fkm-ikon{display:flex;align-items:center;flex-shrink:0;color:var(--t2)}
.fkm-kanal span:last-child{display:flex;flex-direction:column;gap:.1rem;font-size:.85rem;font-weight:600}
.fkm-kanal span:last-child small{font-size:.75rem;font-weight:400;color:var(--t2)}
.fkm-lenke .fkm-ikon{color:var(--accent)}
.fkm-botnar{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line)}
.fkm-botnar button{padding:.45rem 1rem;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--t1);font-size:.85rem;cursor:pointer}
.fkm-send-knapp{background:var(--accent)!important;color:#fff!important;border-color:transparent!important;font-weight:600}
.fkm-send-knapp:disabled{opacity:.6;cursor:not-allowed}
.logg-liste{width:100%;display:flex;flex-direction:column;gap:.5rem;max-height:360px;overflow-y:auto}
.logg-rad{border:1px solid var(--line);border-radius:7px;padding:.6rem .75rem;background:var(--bg)}
.logg-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem;gap:.5rem}
.logg-brukar{font-size:.72rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
.logg-dato{font-size:.72rem;color:var(--muted)}
.logg-tekst{font-size:.83rem;color:var(--t1);line-height:1.5;word-break:break-word}
.logg-tekst a{color:var(--accent);text-decoration:underline}
.fkm-mottakar-liste{max-height:120px;overflow-y:auto;border:1px solid var(--line);border-radius:7px;background:var(--bg);margin-bottom:.9rem;padding:.35rem .5rem;display:flex;flex-direction:column;gap:.2rem}
.fkm-mottakar{display:flex;align-items:center;gap:.45rem;font-size:.8rem;padding:.2rem 0;border-bottom:1px solid var(--line)}
.fkm-fjern{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--t2);cursor:pointer;padding:0;line-height:1;opacity:.65;transition:opacity .15s,border-color .15s,color .15s}
.fkm-fjern:hover{opacity:1;border-color:var(--accent);color:var(--accent)}
.fkm-mottakar:last-child{border-bottom:none}
.fkm-mott-namn{font-weight:600;color:var(--t1);white-space:nowrap}
.fkm-mott-info{color:var(--t2);font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog.ny-vakt{
  border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--t1);
  padding:1.2rem 1.5rem;max-width:420px;width:90%;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}
dialog.ny-vakt::backdrop{background:rgba(0,0,0,.45)}
dialog.ny-vakt h2{margin:0 0 .8rem;font-size:1.1rem}
dialog.ny-vakt label{display:block;margin-bottom:.6rem;font-size:.85rem;color:var(--t2)}
dialog.ny-vakt input,dialog.ny-vakt select{width:100%;margin-top:.2rem}
dialog.ny-vakt .rad2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
dialog.ny-vakt .dlg-knappar{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}
dialog.ny-vakt .primær{background:var(--accent);color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-weight:600}
dialog.ny-vakt .ghost{background:transparent;border:1px solid var(--line);color:var(--t1);padding:.5rem 1rem;border-radius:6px;cursor:pointer}
.dagar{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
.dag-blokk{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px}
.dag-blokk h4{margin:0 0 6px;font-size:12px;color:var(--t2);text-transform:uppercase;letter-spacing:.4px}
.vakter{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.vakt{background:var(--green);color:var(--green-d);border:1px solid transparent;padding:5px 6px;border-radius:5px;font-size:11px;text-align:center;cursor:pointer;min-height:38px;display:flex;flex-direction:column;justify-content:center;line-height:1.15}
.vakt.tildelt{background:var(--grey);color:var(--grey-d)}
.vakt.aktiv{background:var(--yellow);color:var(--yellow-d)}
.vakt.fullfoert{background:var(--green);color:var(--green-d);opacity:.55}
.vakt.avlyst{background:var(--red);color:var(--red-d);text-decoration:line-through}
.vakt.over{outline:2px dashed var(--accent);background:var(--accent-soft);color:var(--accent)}
.vakt .nm{font-weight:600;font-size:11px;display:block;margin-bottom:1px}
.vakt .tid{font-size:10px;opacity:.85}
.vakt.valgt{outline:2px solid var(--accent)}

/* Logg */
.logg{list-style:none;padding:0;margin:0;font-size:12px}
.logg li{padding:5px 0;border-bottom:1px solid var(--line);color:var(--t2)}
.logg li time{display:block;color:var(--muted);font-size:11px}
.logg li b{color:var(--t1)}

/* Kort */
.kort h3{margin:0 0 8px;font-size:15px}
.kort dl{display:grid;grid-template-columns:80px 1fr;gap:4px 8px;margin:0 0 10px;font-size:13px}
.kort dt{color:var(--t2)}
.kort dd{margin:0;color:var(--t1)}
.kort .vakter-liste{margin:0;padding-left:18px;font-size:13px}
.kort .vakter-liste li{margin-bottom:3px}
.kort .knappar{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.kort .knappar button{font-size:12px;padding:4px 8px}

/* Forklaring (status-fargar) */
.legend{display:flex;gap:10px;font-size:11px;color:var(--t2);margin-top:6px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:4px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.legend .l-ledig{background:var(--green)}
.legend .l-tildelt{background:var(--grey)}
.legend .l-aktiv{background:var(--yellow)}
.legend .l-fullfoert{background:var(--green);opacity:.5}

/* Statistikk — horisontalt søylediagram */
.stat-hdr{display:flex;align-items:baseline;gap:5px;font-size:13px;color:var(--t2);margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.stat-hdr-tal{font-size:18px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}
.stat-hdr-av{font-size:13px;font-weight:400;color:var(--muted)}
.stat-hdr-lbl{font-size:12px;margin-right:10px}
.stat-hdr-sep{flex:1}
.stat-legend{display:flex;gap:10px;font-size:11px;color:var(--t2);margin-bottom:10px}
.stat-legend span{display:inline-flex;align-items:center;gap:4px}
.stat-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.sl-tild{background:#3b82f6}
.sl-mott{background:#10b981}
.sl-ledig{background:var(--line)}
.stat-rad{display:grid;grid-template-columns:80px 1fr 46px;align-items:center;gap:6px;margin-bottom:5px;font-size:12px}
.stat-namn{color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:11px}
.stat-bar-wrap{min-width:0}
.stat-bar-bg{background:var(--line);border-radius:4px;height:13px;overflow:hidden}
.stat-bar-tild{background:#3b82f6;height:100%;border-radius:4px;position:relative;transition:width .35s}
.stat-bar-mott{background:#10b981;height:100%;position:absolute;right:0;top:0;border-radius:0 4px 4px 0;transition:width .35s}
.stat-tal{color:var(--t1);text-align:right;font-variant-numeric:tabular-nums;font-size:12px;font-weight:600}
.stat-av{font-weight:400;color:var(--muted)}

@media (max-width:1100px){
  .grid3{grid-template-columns:200px 1fr 280px}
  .vakter{grid-template-columns:1fr 1fr}
}
@media (max-width:800px){
  .grid3{grid-template-columns:1fr;height:auto;overflow:auto}
  .col{max-height:none}
}

/* === Felles nav, UU og layout === */
.skip-lenkje{
  position:absolute;left:-9999px;top:0;background:#111;color:#fff;
  padding:.6rem 1rem;border-radius:0 0 6px 0;z-index:1000;
}
.skip-lenkje:focus{left:0;outline:3px solid #fbbf24}

/* Tydeleg fokus overalt — minst 3:1 mot bakgrunn, ≥2px tjukk (WCAG 2.4.11) */
:focus-visible{outline:3px solid var(--fokus);outline-offset:2px;border-radius:4px;box-shadow:0 0 0 5px rgba(180,83,9,.25)}

header.topp{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  padding:.75rem 1.25rem;background:var(--surface);border-bottom:1px solid var(--line);
  gap:.75rem;
}
header.topp .brand{font-size:1rem;color:var(--t1)}
header.topp .brand a{color:var(--t1)}

nav.hovudnav ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem;
}
nav.hovudnav a{
  display:inline-block;padding:.55rem .9rem;color:var(--t2);
  border-radius:6px;font-weight:500;text-decoration:none;
}
nav.hovudnav a:hover{background:var(--accent-soft);color:var(--accent);text-decoration:none}
nav.hovudnav a[aria-current=page]{
  background:var(--accent);color:#fff;
}
nav.hovudnav .ut-knapp a{color:var(--red-d)}
nav.hovudnav .ut-knapp a:hover{background:#fee2e2;color:var(--red-d)}

main.innhald{padding:1.25rem;max-width:1400px;margin:0 auto}
main.innhald > h1{margin-top:0;font-size:1.5rem}

/* Tom-side plassholdar */
.plassholdar{
  background:var(--surface);border:1px dashed var(--line);
  border-radius:10px;padding:2.5rem 1.5rem;text-align:center;color:var(--t2);
  max-width:720px;margin:1.5rem auto;
}
.plassholdar h2{margin:0 0 .5rem;color:var(--t1)}
.plassholdar p{margin:.4rem 0}
.plassholdar ul{display:inline-block;text-align:left;margin:1rem 0 0;color:var(--t2)}

@media (max-width:640px){
  header.topp{flex-direction:column;align-items:flex-start}
  nav.hovudnav ul{width:100%}
  nav.hovudnav a{padding:.65rem .8rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}
/* === Mørk modus — nøytral grå (ikkje blå/navy) ===
   Kontrastsjekk:
   --bg #2b2d31 mot --t1 #f1f2f4 = 13.0:1 (AAA)
   --bg #2b2d31 mot --t2 #c8cbd1 = 9.4:1 (AAA)
   --accent #93c5fd mot --bg = 8.2:1 (AAA)
   --fokus #fbbf24 mot --bg = 9.4:1 (AAA) */
html[data-tema="mørk"]{
  /* Nøytral grå-stack: bg mørkast, surface eitt hakk lysare, line litt lysare igjen */
  --bg:#1f2024;--surface:#2a2c31;--line:#3a3d44;
  --t1:#f1f2f4;--t2:#c8cbd1;--muted:#9ba0a8;
  --accent:#93c5fd;--accent-soft:#2f3a4d;
  --green:#1f5132;--green-d:#86efac;
  --yellow:#5c4317;--yellow-d:#fde68a;
  --grey:#3a3d44;--grey-d:#d1d5db;
  --red:#5c1f1f;--red-d:#fca5a5;
  --fokus:#fbbf24;
}
html[data-tema="mørk"] body{color-scheme:dark}
html[data-tema="mørk"] th{background:#222428}
html[data-tema="mørk"] .plassholdar{background:var(--surface);border-color:var(--line)}
html[data-tema="mørk"] nav.hovudnav a:hover{background:#3a3f4a;color:#bfdbfe}
html[data-tema="mørk"] nav.hovudnav a[aria-current=page]{background:#1d4ed8;color:#fff}
html[data-tema="mørk"] input,html[data-tema="mørk"] textarea,html[data-tema="mørk"] select{
  background:#222428;color:#f1f2f4;border-color:#4a4d54;
}
html[data-tema="mørk"] button{background:var(--surface);color:var(--t1);border-color:var(--line)}
html[data-tema="mørk"] button:hover{background:var(--accent-soft)}
html[data-tema="mørk"] .card,html[data-tema="mørk"] .boks,html[data-tema="mørk"] .kiosk-card{background:var(--surface);border-color:var(--line)}
html[data-tema="mørk"] table{background:var(--surface);color:var(--t1)}
html[data-tema="mørk"] td{border-color:var(--line)}
html[data-tema="mørk"] .dropzone{background:var(--surface);color:var(--t2);border-color:var(--line)}
html[data-tema="mørk"] .summary span{background:var(--bg);color:var(--t1)}
html[data-tema="mørk"] .col,html[data-tema="mørk"] .dag-blokk{background:var(--surface);border-color:var(--line)}
html[data-tema="mørk"] .liste li{background:var(--bg);border-color:var(--line);color:var(--t1)}
html[data-tema="mørk"] .liste li:hover{background:var(--accent-soft)}
html[data-tema="mørk"] .vakt{filter:brightness(1.1)}

/* Tema-veksleknapp i toppen */
.tema-knapp{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--surface);border:1px solid var(--line);color:var(--t1);
  padding:.45rem .8rem;border-radius:8px;cursor:pointer;font:inherit;
}
.tema-knapp:hover{background:var(--accent-soft);border-color:var(--accent)}
.tema-knapp .tema-ikon{font-size:1.05rem;line-height:1}

/* === Status: sjuk / ikkje møtt opp på vakt-kort === */
.vakt.frav-sjuk{background:#fde68a !important;border-color:#f59e0b !important;color:#7c2d12 !important}
.vakt.frav-sjuk .nm,.vakt.frav-sjuk .tid{color:#7c2d12 !important}
.vakt.frav-ikkje{background:#fecaca !important;border-color:#dc2626 !important;color:#7f1d1d !important}
.vakt.frav-ikkje .nm,.vakt.frav-ikkje .tid{color:#7f1d1d !important;font-weight:600}
.frav-merke{display:block;font-size:.72rem;font-weight:700;letter-spacing:.02em;margin:.15rem 0;text-transform:uppercase}
[data-tema="morke"] .vakt.frav-sjuk{background:#78350f !important;border-color:#f59e0b !important;color:#fde68a !important}
[data-tema="morke"] .vakt.frav-sjuk .nm,[data-tema="morke"] .vakt.frav-sjuk .tid{color:#fde68a !important}
[data-tema="morke"] .vakt.frav-ikkje{background:#7f1d1d !important;border-color:#fca5a5 !important;color:#fee2e2 !important}
[data-tema="morke"] .vakt.frav-ikkje .nm,[data-tema="morke"] .vakt.frav-ikkje .tid{color:#fee2e2 !important}

/* === Teamsleder: lyseblå ved tildelt, blå ved aktiv === */
.vakt.tildelt.teamsleder{background:var(--grey) !important;border-color:transparent !important;color:var(--grey-d) !important}
.vakt.tildelt.teamsleder .nm,.vakt.tildelt.teamsleder .tid{color:var(--grey-d) !important}
.vakt.aktiv.teamsleder{background:#0284c7 !important;border-color:#0369a1 !important;color:#fff !important}
.vakt.aktiv.teamsleder .nm,.vakt.aktiv.teamsleder .tid{color:#fff !important}
[data-tema="morke"] .vakt.tildelt.teamsleder{background:var(--grey) !important;border-color:transparent !important;color:var(--grey-d) !important}
[data-tema="morke"] .vakt.tildelt.teamsleder .nm,[data-tema="morke"] .vakt.tildelt.teamsleder .tid{color:var(--grey-d) !important}
[data-tema="morke"] .vakt.aktiv.teamsleder{background:#0ea5e9 !important;border-color:#7dd3fc !important;color:#0c1015 !important}
[data-tema="morke"] .vakt.aktiv.teamsleder .nm,[data-tema="morke"] .vakt.aktiv.teamsleder .tid{color:#0c1015 !important;font-weight:600}
/* sjuk/ikkje_mott skal framleis overstyre teamsleder-fargen */
.vakt.frav-ikkje.teamsleder,.vakt.frav-sjuk.teamsleder{}

/* === QR-blokk på dugnadskort === */
.qr-blokk{margin:.8rem 0;padding:.7rem;background:var(--bg);border:1px solid var(--line);border-radius:8px;text-align:center}
.qrkode{display:inline-block;background:#fff;padding:8px;border-radius:6px}
.qrkode img,.qrkode canvas{display:block}
.qr-blokk small{display:block;margin-top:.4rem;color:var(--t2)}
[data-tema="morke"] .qrkode{background:#fff}

/* === Send-melding-knapp på kiosk-tittel === */
.send-melding{background:transparent;color:var(--t1);border:0;border-radius:6px;padding:2px 4px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;line-height:1;margin-left:.4rem}
.send-melding:hover,.send-melding:focus{background:var(--accent-soft,rgba(14,165,233,.12));transform:none}

/* === Drag-handtak mellom kolonnene === */
.kol-handtak{background:transparent;cursor:col-resize;position:relative;border-radius:3px;transition:background .15s}
.kol-handtak:hover,.kol-handtak:focus-visible{background:var(--accent);outline:none}
.kol-handtak::before{content:"";position:absolute;left:50%;top:50%;width:2px;height:32px;background:var(--line);transform:translate(-50%,-50%);border-radius:2px;transition:background .15s}
.kol-handtak:hover::before,.kol-handtak:focus-visible::before{background:#fff}
@media (max-width:900px){.kol-handtak{display:none}}

/* === Teamsleder: tydeleg ramme rundt vakt-knappen === */
.vakt.teamsleder{outline:none !important;box-shadow:inset 0 0 0 2px #0369a1 !important}
[data-tema="morke"] .vakt.teamsleder{box-shadow:inset 0 0 0 2px #7dd3fc !important}

/* === Teamsleder i frivillige-lista (kolonne 1) === */
.liste li.teamsleder{box-shadow:inset 0 0 0 2px #0369a1}
.liste li.teamsleder::before{content:"★";color:#0369a1;margin-right:.25rem;font-size:10px;flex-shrink:0}
[data-tema="morke"] .liste li.teamsleder{box-shadow:inset 0 0 0 2px #7dd3fc}
[data-tema="morke"] .liste li.teamsleder::before{color:#7dd3fc}

/* Vakter-modal */
dialog.vakter-dlg{min-width:720px;max-width:96vw;border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;background:var(--surface);color:var(--t1)}
dialog.vakter-dlg::backdrop{background:rgba(0,0,0,.45)}
dialog.vakter-dlg .v-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
dialog.vakter-dlg .v-hdr h3{margin:0;font-size:.95rem;font-weight:600}
dialog.vakter-dlg .v-tabell-wrap{max-height:55vh;overflow:auto;border:1px solid var(--line);border-radius:8px}
dialog.vakter-dlg table.v-tabell{width:100%;border-collapse:collapse;font-size:.78rem}
dialog.vakter-dlg table.v-tabell th,dialog.vakter-dlg table.v-tabell td{padding:.35rem .45rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
dialog.vakter-dlg table.v-tabell th{position:sticky;top:0;background:var(--surface);z-index:1;font-weight:600;color:var(--t2)}
dialog.vakter-dlg table.v-tabell input,dialog.vakter-dlg table.v-tabell select{font-size:.78rem;padding:.25rem .35rem;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--t1)}
dialog.vakter-dlg table.v-tabell tr.lagret{background:#dcfce7;transition:background .9s}
[data-tema="morke"] dialog.vakter-dlg table.v-tabell tr.lagret{background:#14532d}
dialog.vakter-dlg .v-ny{margin-top:.7rem;border:1px dashed var(--line);border-radius:8px;padding:.5rem .7rem}
dialog.vakter-dlg .v-ny legend{font-size:.75rem;color:var(--t2);padding:0 .3rem}
dialog.vakter-dlg .v-rad{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
dialog.vakter-dlg .v-rad input,dialog.vakter-dlg .v-rad select{font-size:.78rem;padding:.35rem .45rem;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--t1)}
dialog.vakter-dlg .v-rad .notat{flex:1 1 160px}
.kiosk-card .vakter-btn{margin-left:.3rem}

/* Aktiv-vakt modal — UU-tilpassa knapprad */
dialog.aktiv-dialog{width:360px;max-width:92vw;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.1rem 1rem;background:var(--surface);color:var(--t1);box-shadow:0 10px 30px rgba(0,0,0,.22)}
dialog.aktiv-dialog::backdrop{background:rgba(0,0,0,.5)}
dialog.aktiv-dialog .aktiv-form{display:flex;flex-direction:column;gap:.65rem}
dialog.aktiv-dialog .aktiv-form h3{margin:0;font-size:1rem;font-weight:600;text-align:center}
dialog.aktiv-dialog .aktiv-form p.muted{margin:0 0 .3rem;font-size:.8rem;color:var(--t2);text-align:center}
dialog.aktiv-dialog .d-knapprad{display:flex;flex-direction:column;gap:.45rem;margin-top:.25rem}
dialog.aktiv-dialog .d-spacer{display:none}
dialog.aktiv-dialog .d-knapp{font-size:.85rem;line-height:1;padding:.75rem .9rem;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--t1);cursor:pointer;min-height:42px;font-weight:500;width:100%;transition:background .12s,border-color .12s,box-shadow .12s,transform .06s}
dialog.aktiv-dialog .d-knapp:hover{background:rgba(127,127,127,.08)}
dialog.aktiv-dialog .d-knapp:active{transform:translateY(1px)}
dialog.aktiv-dialog .d-knapp:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 3px rgba(59,130,246,.25)}
dialog.aktiv-dialog .d-primary{background:#374151;border-color:#1f2937;color:#fff;font-weight:600;order:1}
dialog.aktiv-dialog .d-primary:hover{background:#1f2937}
dialog.aktiv-dialog .d-toggle{order:2}
dialog.aktiv-dialog .d-toggle[aria-pressed="true"]{background:#fef3c7;border-color:#f59e0b;color:#7c2d12}
[data-tema="morke"] dialog.aktiv-dialog .d-toggle[aria-pressed="true"]{background:#78350f;border-color:#fbbf24;color:#fef3c7}
dialog.aktiv-dialog .d-fullfort{order:2;background:#166534;border-color:#14532d;color:#fff;font-weight:600}
dialog.aktiv-dialog .d-fullfort:hover{background:#14532d}
[data-tema="morke"] dialog.aktiv-dialog .d-fullfort{background:#15803d;border-color:#166534;color:#fff}
dialog.aktiv-dialog .d-danger{order:3;border-color:#b91c1c;color:#b91c1c}
dialog.aktiv-dialog .d-danger:hover{background:#fee2e2}
[data-tema="morke"] dialog.aktiv-dialog .d-danger{color:#fca5a5;border-color:#7f1d1d}
[data-tema="morke"] dialog.aktiv-dialog .d-danger:hover{background:#450a0a}
dialog.aktiv-dialog .d-avbryt{order:4;margin-top:.2rem;border-color:transparent;color:var(--t2);font-size:.8rem;min-height:36px;padding:.5rem}
dialog.aktiv-dialog .d-avbryt:hover{background:transparent;color:var(--t1);text-decoration:underline}

/* Teamleder-vakt-type: blå strek rundt vakta også før nokon er tildelt */
.vakt.teamvakt{outline:none;box-shadow:inset 0 0 0 2px #0369a1}
[data-tema="morke"] .vakt.teamvakt{box-shadow:inset 0 0 0 2px #7dd3fc}

/* Kiosk- og generator-dialog */
dialog.kiosk-dlg{width:640px;max-width:96vw;border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;background:var(--surface);color:var(--t1);box-shadow:0 10px 30px rgba(0,0,0,.22)}
dialog.kiosk-dlg::backdrop{background:rgba(0,0,0,.5)}
dialog.kiosk-dlg .kd-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem}
dialog.kiosk-dlg .kd-hdr h3{margin:0;font-size:.95rem;font-weight:600}
dialog.kiosk-dlg .kiosk-form{display:flex;flex-direction:column;gap:.5rem}
dialog.kiosk-dlg .kiosk-form label{display:block;font-size:.78rem;color:var(--t2)}
dialog.kiosk-dlg .kiosk-form input,dialog.kiosk-dlg .kiosk-form select,dialog.kiosk-dlg .kiosk-form textarea{width:100%;padding:.4rem .5rem;font-size:.82rem;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--t1);margin-top:.15rem}
dialog.kiosk-dlg .kd-foter{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.7rem}
dialog.kiosk-dlg .grid.cols2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}

/* Frivillig-kort (kolonne 3) */
.fkort{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem 1.2rem;box-shadow:0 2px 8px rgba(0,0,0,.06);text-align:center;max-width:320px;margin:0 auto}
.fkort-topp{font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--t1);margin-bottom:.7rem}
.fkort-avatar{width:104px;height:104px;border-radius:50%;margin:0 auto .8rem;background:linear-gradient(135deg,#e0f2fe,#bae6fd);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;position:relative}
.fkort-avatar:hover::after{content:"Endre";position:absolute;inset:auto 0 0 0;background:rgba(0,0,0,.55);color:#fff;font-size:10px;padding:3px;text-align:center}
.fkort-avatar img{width:100%;height:100%;object-fit:cover}
.fkort-avatar img{width:100%;height:100%;object-fit:cover}
.fkort-avatar span{font-size:1.9rem;font-weight:600;color:#0369a1;letter-spacing:-.02em}
.kort .fkort-namn{margin:0 0 .8rem;font-size:24pt;font-weight:800;color:var(--t1);line-height:1;letter-spacing:-.02em;word-break:break-word}
.kort .fkort-info{margin:0 0 1rem;font-size:.84rem;text-align:center;display:flex;flex-direction:column;gap:.35rem}
.kort .fkort-info .fkort-rad{margin:0;line-height:1.35;color:var(--t1)}
.kort .fkort-info .fkort-rad .lbl{font-weight:600;color:var(--t1);margin-right:.25rem}
.kort .fkort-info .fkort-rad .val{color:var(--t1)}
.kort .fkort-info .fkort-rad.adresse{margin-top:.1rem}
.kort .fkort-vakter{margin:.5rem 0 .8rem;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem}
.kort .fkort-vakter h4{margin:0 0 .35rem;font-size:.75rem;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.03em;text-align:center}
.kort .fkort-vakter ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.2rem}
.kort .fkort-vakter li{font-size:.78rem;color:var(--t1);display:flex;gap:.4rem;align-items:baseline;line-height:1.3;justify-content:center}
.kort .fkort-vakter li .fkv-dag{font-weight:600;min-width:3.5em}
.kort .fkort-vakter li .fkv-tid{font-variant-numeric:tabular-nums;color:var(--t2)}
.kort .fkort-vakter li .fkv-k{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kort .fkort-vakter li.aktiv{color:#16a34a;font-weight:600}
.kort .fkort-vakter li.ferdig{opacity:.6}
.kort .fkort-vakter-tom{text-align:center;font-size:.78rem;color:var(--t2);margin:.4rem 0 .8rem}
.kort .fkv-okt-tittel{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;background:var(--muted);border-radius:4px;padding:.18rem .45rem;margin:1rem 0 .3rem;display:inline-block}
.kort .fkv-okt-tittel:first-of-type{margin-top:.15rem}
.kort .fkort-vakter ul{margin:0 0 .4rem;padding:0;list-style:none;display:flex;flex-direction:column;gap:.2rem}
.kort .fkort-vakter li .fkv-strek{text-decoration:line-through;opacity:.55;cursor:help}
.fkv-dato{font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}


.fkort-qr{margin:.6rem auto .4rem;display:flex;flex-direction:column;align-items:center;gap:.3rem}
.fkort-qr .qrkode{padding:6px;background:#fff;border-radius:6px}
.fkort-qr small{font-size:.72rem;color:var(--t2)}
.fkort-logo{margin:.6rem auto 0;height:46px;background:url('/prosjekter/dugnad/assets/logo.png') center/contain no-repeat;opacity:.9}
.fkort-logo:empty:not([style*="background-image"]){display:none}
.fkort-handlingar{margin-top:.9rem;display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap}
.fkort-handlingar button{font-size:.75rem;padding:.4rem .7rem;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--t1);cursor:pointer}
.fkort-handlingar button:hover{background:var(--accent-soft);border-color:var(--accent)}
[data-tema="morke"] .fkort-avatar{background:linear-gradient(135deg,#075985,#0369a1);border-color:#1e293b}
[data-tema="morke"] .fkort-avatar span{color:#bae6fd}
[data-tema="morke"] .fkort-qr .qrkode{background:#fff}
@media print{
  @page{size:A4 portrait;margin:14mm 16mm 14mm 16mm}
  body *{visibility:hidden!important}
  #kort,#kort *{visibility:visible!important}
  #kort{position:fixed;inset:0}

  .fkort{
    all:unset;
    display:block;
    width:100%;
    box-sizing:border-box;
    font-family:system-ui,sans-serif;
    color:#111;
    background:#fff;
  }

  /* Topplinje */
  .fkort::before{
    content:'';
    display:block;
    height:5px;
    background:linear-gradient(90deg,#1d4ed8,#0ea5e9,#22c55e);
    border-radius:3px;
    margin-bottom:12mm;
  }

  /* Topp: logo + tittel */
  .fkort-topp{
    display:block;
    text-align:center;
    font-size:9pt;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#555;
    margin-bottom:4mm;
  }

  /* Avatar sentrert */
  .fkort-avatar{
    display:block;
    width:28mm;
    height:28mm;
    border-radius:50%;
    margin:0 auto 5mm;
    overflow:hidden;
    border:1.5pt solid #ccc;
  }
  .fkort-avatar img{width:100%;height:100%;object-fit:cover}
  .fkort-avatar span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:22pt;font-weight:700;color:#1d4ed8;background:#e0f2fe}

  /* Namn */
  .fkort-namn{
    display:block;
    text-align:center;
    font-size:22pt;
    font-weight:800;
    letter-spacing:-.02em;
    margin:0 0 6mm;
    color:#111;
  }

  /* Horisontal delelinje */
  .fkort-info{
    display:block;
    border-top:1pt solid #ddd;
    border-bottom:1pt solid #ddd;
    padding:4mm 0;
    margin:0 0 6mm;
    text-align:center;
  }
  .fkort-info .fkort-rad{
    display:inline-block;
    margin:0 5mm;
    font-size:9pt;
    color:#333;
    line-height:1.7;
  }
  .fkort-info .fkort-rad .lbl{font-weight:700;margin-right:1mm;color:#111}
  .fkort-info .fkort-rad.adresse{display:block;margin-top:1mm}

  /* Vaktseksjon */
  .fkort-vakter{
    display:block;
    margin:0 0 5mm;
  }
  .fkort-vakter h4{
    font-size:7.5pt;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#555;
    margin:0 0 2mm;
    border-bottom:1.5pt solid #111;
    padding-bottom:1.5mm;
  }
  .fkort-vakter ul{
    display:block;
    margin:0;
    padding:0;
    list-style:none;
  }
  .fkv-okt-tittel{
    display:block;
    font-size:7pt;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#fff;
    background:#444;
    padding:1mm 3mm;
    margin:2.5mm 0 0;
  }
  .fkort-vakter li{
    display:flex;
    gap:4mm;
    align-items:baseline;
    font-size:9pt;
    color:#111;
    border-bottom:0.5pt solid #e5e7eb;
    padding:1.5mm 0;
    justify-content:flex-start;
  }
  .fkort-vakter li:last-child{border-bottom:none}
  .fkv-dag{font-weight:700;min-width:18mm}
  .fkv-dato{font-size:7.5pt;color:#555;min-width:14mm}
  .fkv-tid{font-variant-numeric:tabular-nums;color:#333;min-width:22mm}
  .fkv-k{flex:1;color:#111}
  .fkv-strek{text-decoration:line-through;opacity:.5}
  .fkort-vakter-tom{font-size:9pt;color:#888;text-align:center;padding:3mm 0}

  /* QR + logo nedst */
  .fkort-qr{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin:5mm auto 3mm;
  }
  .fkort-qr .qrkode{padding:3px;background:#fff;border:1pt solid #ccc}
  .fkort-qr small{font-size:7pt;color:#777;margin-top:1.5mm}
  .fkort-logo{
    display:block;
    height:12mm;
    background:url('/prosjekter/dugnad/assets/logo.png') center/contain no-repeat;
    margin:3mm auto 0;
    opacity:.85;
  }

  /* Skjul UI-element */
  .fkort-handlingar,.fkort-full-band,.fkort-avatar:hover::after{display:none!important}

  /* Botntekst */
  .fkort::after{
    content:'';
    display:block;
    height:3px;
    background:#e5e7eb;
    border-radius:2px;
    margin-top:10mm;
  }
}

/* Favoritt-stjerne */
.liste li .fav-stj{cursor:pointer;color:#d4d4d8;font-size:13px;line-height:1;flex-shrink:0;padding:0 2px;background:none;border:none}
.liste li .fav-stj:hover{color:#f59e0b}
.liste li.favoritt .fav-stj{color:#f59e0b}

.ikon-knapp{background:transparent;border:1px solid var(--line);border-radius:6px;padding:6px;color:var(--t1);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ikon-knapp:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}

html[data-tema="mørk"] .liste li.aktiv{background:var(--yellow)!important;border-color:var(--yellow-d)!important;color:var(--yellow-d)!important;box-shadow:0 2px 8px rgba(253,230,138,.25)!important}
html[data-tema="mørk"] .liste li.aktiv > span{color:var(--yellow-d)!important}
html[data-tema="mørk"] .liste li.aktiv .prikkar{color:var(--yellow-d)!important}
html[data-tema="mørk"] .liste li.aktiv .fav-stj{color:var(--yellow-d)!important}
html[data-tema="mørk"] .liste li.aktiv.teamsleder{box-shadow:0 2px 8px rgba(245,158,11,.45),inset 0 0 0 2px #7dd3fc!important}

.meta{display:flex;align-items:center;gap:4px;flex-wrap:wrap}

.vakt.person-treff{outline:2px solid var(--accent);outline-offset:1px;box-shadow:0 0 0 3px rgba(90,130,255,.18)}
html[data-tema="mørk"] .vakt.person-treff{outline-color:var(--yellow-d);box-shadow:0 0 0 3px rgba(255,200,60,.22)}