:root{
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#64748b;
  --line:#e5e7eb;
  --accent:#2563eb;
  --accent-2:#1e40af;
  --good:#16a34a;
  --warn:#d97706;
  --bad:#dc2626;
  --radius:14px;
  --shadow:0 8px 24px rgba(15,23,42,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

h1{margin:8px 0 14px;font-size:30px;letter-spacing:.2px}
h2,h3{margin:12px 0 8px}

.wrap{max-width:1100px;margin:32px auto;padding:0 16px}

/* ====== Nyttig base ====== */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.note{color:var(--muted);font-size:12px}
.tag{display:inline-block;background:#eef2ff;color:#1e3a8a;padding:4px 8px;border-radius:999px;font-size:12px}
.badge{display:inline-block;font-size:12px;background:#eef2ff;color:#0f172a;border:1px solid var(--line);padding:4px 8px;border-radius:999px}
/* Admin-merking */
.badge.admin{background:#fff7e6;border-color:#f59e0b;color:#b45309;font-weight:700}

/* Kort / ruter / status */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:12px 0}
.card{border-radius:16px;background:transparent}
.card>button{
  width:100%;border:0;cursor:pointer;padding:18px 16px;border-radius:16px;font-weight:700;
  background:var(--card);box-shadow:var(--shadow);text-align:left
}
.card .sub{display:block;margin-top:4px;font-weight:500;color:var(--muted);font-size:12px}
.card>button:hover{transform:translateY(-1px);transition:.15s}

/* Tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.tab{padding:10px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);cursor:pointer}
.tab:hover{border-color:#cbd5e1}
.tab.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* Bokser (paneler) */
.box{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  margin-bottom:12px;
  border:1.5px solid var(--line)
}
.box .hd{padding:14px 16px;background:#f8fafc;border-bottom:1px solid var(--line);font-weight:800}
.box .bd{padding:14px 16px}

/* Lister */
.list{list-style:none;margin:0;padding:0;max-height:480px;overflow:auto}
.list li{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:0}
.list li:hover{background:#f8fafc}

/* Tabeller */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{position:sticky;top:0;z-index:1;font-weight:800;background:#f8fafc;border-bottom:1px solid var(--line)}
th,td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
tbody tr:nth-child(even){background:#fbfdff}
tbody tr:hover{background:#f6fbff}

/* Kolonnebredder og sentrering */
.w-date{width:180px}
.w-check{width:120px}
.checkcell{display:flex;align-items:center;justify-content:center}
@media (max-width:640px){
  .w-date{width:160px}
  .w-check{width:100px}
}

/* Inputs / knapper */
.field,
input[type="text"],input[type="date"],input[type="email"],select{
  width:auto;min-height:40px;padding:10px 12px;border-radius:10px;
  border:1.5px solid var(--line);background:#fff;color:var(--text)
}
.field:focus,
input[type="text"]:focus,input[type="date"]:focus,input[type="email"]:focus,select:focus{
  outline:3px solid rgba(37,99,235,.2);border-color:var(--accent)
}
input[type="checkbox"]{width:18px;height:18px}

.btn{
  --bg:#fff; --fg:var(--text); --bd:var(--line);
  background:var(--bg); color:var(--fg); border:1.5px solid var(--bd);
  padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:600
}
.btn:hover{filter:brightness(0.98)}
.btn:active{transform:translateY(1px)}
.btn.primary{--bg:var(--accent);--fg:#fff;--bd:var(--accent)}
.btn.small{padding:6px 8px;font-size:12px}

/* Layout-split på admin */
.split{display:grid;grid-template-columns:320px 1fr;gap:12px}
@media (max-width:900px){ .split{grid-template-columns:1fr} }

/* Toast */
.toast{position:fixed;right:16px;bottom:16px;background:#111;color:#fff;padding:10px 12px;border-radius:10px;opacity:0;transform:translateY(6px);transition:.2s}
.toast.show{opacity:1;transform:translateY(0)}

/* Rolleknapper – tydelige farger */
.rolebar{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 14px}
.rolebtn{
  border:1.5px solid var(--line); background:#fff; color:var(--text);
  border-radius:14px; padding:14px 16px; cursor:pointer;
  box-shadow:var(--shadow); font-weight:800; min-width:180px; text-align:left
}
.rolebtn .sub{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.rolebtn:hover{transform:translateY(-1px);transition:.15s}
.rolebtn.gray{background:#ffffff;border-color:#d1d5db}
.rolebtn.yellow{background:#fff7e6;border-color:#fbbf24}
.rolebtn.yellow .sub{color:#b45309}
.rolebtn.green{background:#ecfdf5;border-color:#34d399}
.rolebtn.green .sub{color:#065f46}

/* Dato + avkryss */
.datecell{display:flex;gap:10px;align-items:center}

/* Check-knapp */
.mini-check{
  --on:#2563eb; --off:#d1d5db;
  width:42px;height:42px;border-radius:12px;border:2px solid var(--off);
  background:#fff;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s ease;
}
.mini-check::before{content:"✓";font-weight:900;color:transparent;font-size:20px;line-height:1}
.mini-check[data-done="1"]{background:var(--on);border-color:var(--on);box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.mini-check[data-done="1"]::before{color:#fff}
.mini-check[data-done="0"]{background:#fff;border-color:var(--off)}
.mini-check[data-done="0"]::before{color:transparent}
.mini-check:hover{box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.mini-check:focus-visible{outline:3px solid rgba(37,99,235,.35)}
.mini-check.flash{animation:pop .22s ease-out}
@keyframes pop{from{transform:scale(.92)} to{transform:scale(1)}}

/* ====== Isolert Røde-Kors header ====== */
.rk-header{background:#fff;border-bottom:1px solid #eaeaea}
.rk-head-inner{display:flex;align-items:center;gap:14px;padding:10px 0}
.rk-logo{position:relative;width:42px;height:42px;flex:0 0 42px}
.rk-logo::before,.rk-logo::after{content:"";position:absolute;background:#ff1a1a;border-radius:2px}
.rk-logo::before{width:70%;height:26%;left:15%;top:37%}
.rk-logo::after{width:26%;height:70%;left:37%;top:15%}
.rk-title{font-size:28px;font-weight:800;letter-spacing:.2px;color:#000}
.rk-title .rk-sub{font-weight:600;margin-left:.25em}
.rk-nav{background:#ff1a1a}
.rk-nav .wrap{display:flex;gap:12px;padding:6px 0;font-weight:700}
.rk-nav a{color:#fff;text-decoration:none}
.rk-nav a:hover{text-decoration:underline}
.rk-nav .sep{opacity:.7;color:#fff}
.rk-header + .rk-nav + .wrap{margin-top:16px}