:root{
  --ink:#16202B;         /* mørk skifer - topbar/roster-board */
  --ink-2:#22303F;
  --bg:#EEF1F4;          /* lys neutral side */
  --surface:#FFFFFF;
  --line:#DBE0E6;
  --text:#1B242E;
  --muted:#5E6A77;
  --accent:#1B6FB3;      /* signalblå - primære handlinger */
  --accent-ink:#0F4E82;
  --ok:#1F7A4D;
  --warn:#B23B3B;
  /* båndfarver (departure-board tags) */
  --dag:#E0912B;
  --aften:#5B54B0;
  --nat:#33465C;
  --radius:10px;
  --shadow:0 1px 2px rgba(16,32,43,.06), 0 2px 8px rgba(16,32,43,.05);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  font-size:16px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}

/* Topbar */
.topbar{
  background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 1rem; position:sticky; top:0; z-index:20;
  padding-top:calc(.7rem + env(safe-area-inset-top));
}
.brand{color:#fff; text-decoration:none; font-weight:700; letter-spacing:.3px; font-size:1.05rem}
.brand-mark{color:#7FB2DA}
.topnav{display:flex; gap:.15rem; align-items:center}
.topnav a{
  color:#C7D2DD; text-decoration:none; font-size:.9rem;
  padding:.4rem .55rem; border-radius:8px;
}
.topnav a:hover{background:var(--ink-2); color:#fff}
.nav-me{background:var(--ink-2); color:#fff !important; font-weight:600}

/* Layout */
.wrap{max-width:760px; margin:0 auto; padding:1rem 1rem 3rem}
h1{font-size:1.5rem; margin:.4rem 0 1rem; letter-spacing:-.01em}
h2{font-size:1.15rem; margin:1.6rem 0 .7rem}
p.lead{color:var(--muted); margin-top:-.3rem}

.foot{color:var(--muted); text-align:center; font-size:.8rem; padding:2rem 1rem}

/* Flash / beskeder */
.flash{
  background:#E7F1FA; border:1px solid #BFDCF2; color:#0F4E82;
  padding:.7rem .9rem; border-radius:var(--radius); margin-bottom:1rem;
}
.notice{background:#FBF3E4; border:1px solid #EAD8AE; color:#7A5A16;
  padding:.7rem .9rem; border-radius:var(--radius)}
.error{background:#FBEAEA; border:1px solid #EEC2C2; color:#8A2A2A;
  padding:.7rem .9rem; border-radius:var(--radius); margin-bottom:1rem}

/* Kort */
.card{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem; margin-bottom:1rem}

/* Formularer */
label{display:block; font-weight:600; font-size:.9rem; margin:.9rem 0 .3rem}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=time],select,textarea{
  width:100%; padding:.7rem .8rem; font-size:1rem;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.row{display:flex; gap:.7rem}
.row > *{flex:1}
.help{color:var(--muted); font-size:.82rem; margin-top:.3rem}
.check{display:flex; align-items:center; gap:.5rem; font-weight:500; margin:.5rem 0}
.check input{width:auto}

/* Knapper - store tap-targets */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background:var(--accent); color:#fff; border:0; border-radius:10px;
  padding:.8rem 1.1rem; font-size:1rem; font-weight:600; cursor:pointer;
  text-decoration:none; min-height:48px; width:100%;
}
.btn:hover{background:var(--accent-ink)}
.btn.secondary{background:#EAEEF2; color:var(--text)}
.btn.secondary:hover{background:#DDE3EA}
.btn.danger{background:var(--warn)}
.btn.ok{background:var(--ok)}
.btn.small{width:auto; min-height:40px; padding:.5rem .8rem; font-size:.9rem}
.btn.block{width:100%}
.btn-disabled{
  display:flex; align-items:center; justify-content:center;
  background:#F1F3F5; color:var(--muted); border:1px dashed var(--line);
  border-radius:10px; padding:.7rem; font-size:.85rem; min-height:44px; text-align:center;
}

.stack > *{margin-bottom:.7rem}
.actions{display:flex; gap:.6rem; margin-top:1rem}
.actions .btn{width:auto; flex:1}

/* Vagt-liste */
.shift{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:.85rem .95rem; margin-bottom:.7rem;
  display:flex; gap:.85rem; align-items:stretch;
}
.shift .when{flex:1; min-width:0}
.shift .date{font-weight:700; font-size:1.05rem}
.shift .time{font-variant-numeric:tabular-nums; font-size:1.35rem; font-weight:700; letter-spacing:.02em; margin:.1rem 0}
.shift .seller{color:var(--muted); font-size:.85rem}
.shift .side{display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; gap:.5rem}

/* Bånd-tag */
.band{display:inline-block; color:#fff; font-size:.72rem; font-weight:700;
  padding:.2rem .5rem; border-radius:999px; letter-spacing:.02em; white-space:nowrap}
.band.dag{background:var(--dag)} .band.aften{background:var(--aften)} .band.nat{background:var(--nat)}
.plus1{color:var(--muted); font-size:.7rem; font-weight:600}

/* Emblemer (kvalifikationer) */
.tags{display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.4rem}
.tag{background:#EEF3F7; border:1px solid #D8E2EB; color:#39546B;
  font-size:.72rem; padding:.15rem .5rem; border-radius:6px}

/* Filtre */
.filters{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem}
.filters select,.filters input{width:auto; flex:1; min-width:120px}

/* Store handlingsknapper på forsiden */
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:1rem 0}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:1.3rem 1rem; text-decoration:none; color:var(--text);
  display:flex; flex-direction:column; gap:.2rem; min-height:96px}
.tile .big{font-size:1.2rem; font-weight:700}
.tile .sub{color:var(--muted); font-size:.85rem}
.tile:hover{border-color:var(--accent)}

/* Modal (2-klik take) */
.modal-back{position:fixed; inset:0; background:rgba(16,32,43,.55);
  display:flex; align-items:flex-end; justify-content:center; z-index:50}
.modal{background:#fff; width:100%; max-width:760px; border-radius:16px 16px 0 0;
  padding:1.3rem 1.2rem calc(1.3rem + env(safe-area-inset-bottom)); box-shadow:0 -6px 24px rgba(0,0,0,.2)}
.modal h3{margin:.2rem 0 .6rem}
.steps{counter-reset:s; margin:.5rem 0 1rem; padding:0; list-style:none}
.steps li{counter-increment:s; position:relative; padding:.5rem 0 .5rem 2.2rem; border-bottom:1px solid var(--line)}
.steps li:before{content:counter(s); position:absolute; left:0; top:.5rem;
  width:1.5rem; height:1.5rem; background:var(--ink); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700}
.badge-when{background:var(--ink); color:#fff; border-radius:10px; padding:.6rem .8rem;
  font-size:1.15rem; font-weight:700; font-variant-numeric:tabular-nums; text-align:center; margin:.4rem 0 .9rem}

.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.mt{margin-top:1rem}
hr.sep{border:0; border-top:1px solid var(--line); margin:1.2rem 0}

@media (min-width:560px){
  .tiles{grid-template-columns:1fr 1fr}
  .modal{border-radius:16px; margin-bottom:5vh}
  .modal-back{align-items:center}
}