:root{
  --bg:#0f172a; --card:#ffffff; --ink:#1e293b; --muted:#64748b;
  --brand:#2563eb; --brand-d:#1d4ed8; --ok:#dcfce7; --ok-b:#16a34a;
  --alert:#fee2e2; --alert-b:#dc2626; --line:#e2e8f0;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:linear-gradient(180deg,#0f172a,#1e293b) fixed;color:var(--ink);min-height:100vh}
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;background:#0b1220;color:#fff}
.brand{color:#fff;text-decoration:none;font-weight:700;font-size:1.1rem}
.topbar nav{display:flex;gap:16px;align-items:center}
.topbar nav a{color:#cbd5e1;text-decoration:none}
.topbar nav a:hover{color:#fff}
.who{color:#94a3b8;font-size:.9rem}
.container{max-width:820px;margin:24px auto;padding:0 16px}
h1{color:#fff;font-size:1.5rem;margin:.2rem 0 1rem}
h2{margin:.2rem 0 1rem;font-size:1.15rem}
.card{background:var(--card);border-radius:14px;padding:20px;margin:0 0 18px;
  box-shadow:0 6px 20px rgba(0,0,0,.15)}
.card.ok{background:var(--ok);border-left:4px solid var(--ok-b)}
.alert{background:var(--alert);border-left:4px solid var(--alert-b);color:#7f1d1d;
  padding:12px 16px;border-radius:10px;margin:0 0 14px}
label{display:block;margin:0 0 12px;font-size:.9rem;color:var(--muted);font-weight:600}
input,button{font:inherit}
/* 16px undgår auto-zoom på iOS ved fokus */
input{display:block;width:100%;max-width:100%;min-width:0;margin-top:6px;padding:12px 14px;
  border:1px solid var(--line);border-radius:10px;color:var(--ink);background:#fff;
  font-size:16px;min-height:46px;-webkit-appearance:none;appearance:none;box-sizing:border-box}
input:focus{outline:2px solid var(--brand);border-color:var(--brand)}
/* iOS: undgå at native dato/tid-felter sprænger bredden */
input[type=date],input[type=time],input[type=number]{width:100%;max-width:100%;min-width:0}
input::-webkit-date-and-time-value{text-align:left;margin:0}
input::-webkit-calendar-picker-indicator{margin-left:auto}
button{background:#2563eb !important;color:#fff !important;border:0;padding:13px 20px;
  border-radius:10px;cursor:pointer;font-weight:600;min-height:46px;font-size:16px}
button:hover{background:#1d4ed8 !important}
.btn{display:inline-block;background:#2563eb !important;color:#fff !important;text-decoration:none;
  padding:9px 14px;border-radius:10px;font-weight:600}
.btn:hover{background:#1d4ed8 !important}
.link-danger{background:#fff !important;color:#dc2626 !important;padding:8px 14px;
  border:1px solid #dc2626;border-radius:8px}
.link-danger:hover{background:#fee2e2 !important}
.muted{color:var(--muted);font-weight:400;font-size:.9rem}
.inline{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.inline label{margin:0}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end}
.grid .wide{grid-column:span 3}
.grid button{grid-column:span 1;height:44px}
.weeknav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.weeknav h2{margin:0;text-align:center;font-size:1.05rem}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{padding:9px 8px;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem}
.tbl thead th{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.03em}
.tbl tfoot th{border-top:2px solid var(--ink);border-bottom:0;font-size:1rem}
.tbl tr.empty td{color:var(--muted)}
.actions{display:flex;gap:6px}
.actions form{display:inline}
.foot{text-align:center;color:#64748b;padding:20px;font-size:.85rem}
.regform{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.regform label{margin:0;min-width:0}
.regform input{min-width:0}
.regform .full{grid-column:1 / -1}
.regform button{margin-top:4px;height:50px}
.wageform{display:flex;gap:6px;align-items:center}
.wageinput{width:90px;margin-top:0;min-height:40px;padding:8px 10px}
.wageform button{padding:8px 12px;min-height:40px}

/* ---------- MOBIL ---------- */
@media(max-width:640px){
  .container{margin:14px auto;padding:0 12px}
  h1{font-size:1.3rem}
  .card{padding:16px;border-radius:12px}
  .grid{grid-template-columns:1fr 1fr}
  .grid .wide{grid-column:span 2}
  .grid button{grid-column:span 2}
  .inline{flex-direction:column;align-items:stretch}
  .inline button{width:100%}
  .weeknav{gap:6px}
  .weeknav h2{font-size:.95rem}
  .weeknav .btn{padding:10px 12px}

  /* Uge-tabel -> stakkede dag-kort */
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{background:#f8fafc;border:1px solid var(--line);border-radius:10px;
    padding:8px 12px;margin-bottom:10px}
  .tbl td{border:0;padding:5px 0;display:flex;justify-content:space-between;
    align-items:center;gap:12px;font-size:.95rem}
  .tbl td::before{content:attr(data-label);color:var(--muted);font-size:.8rem;
    font-weight:600;text-transform:uppercase;letter-spacing:.03em}
  .tbl td[data-label="Dag"],.tbl td.rowhead{font-weight:700;font-size:1.05rem;
    border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:2px;
    justify-content:flex-start}
  .tbl td[data-label="Dag"]::before,.tbl td.rowhead::before{content:""}
  .tbl td[data-label=""]::before{content:""}
  .tbl td[data-label=""]{justify-content:flex-end}
  .tbl td.hide-sm{display:none}
  /* Handlingsknapper i tabelkort: fuld bredde, nemme at ramme */
  .tbl td.actions{display:block;padding-top:8px}
  .tbl td.actions::before{content:""}
  .tbl td.actions form{display:flex;gap:8px}
  .tbl td.actions button{flex:1;width:100%}
  .tbl tr.empty td[data-label="Tid"]{color:var(--muted)}
  .link-danger{padding:8px 14px;border:1px solid var(--alert-b);border-radius:8px}

  /* Fod-total som tydeligt kort */
  .tbl tfoot{display:block}
  .tbl tfoot tr{display:flex;justify-content:space-between;background:#0b1220;color:#fff;border:0}
  .tbl tfoot th{border:0;padding:2px 0;color:#fff}
}