:root{
  --gold:#c9a24b;--gold-2:#e4c778;--ink:#1a1a1c;--panel:#232326;
  --panel-2:#2b2b2f;--line:#3a3a40;--txt:#ece9e3;--muted:#9a978f;
  --ok:#4caf72;--danger:#c0453c;--proces:#d6a83a;--blaa:#4a9fd6;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--txt);background:var(--ink);overflow:hidden}

/* Baggrundslag */
#bg{position:fixed;inset:0;z-index:0}
.bg-lag{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 2.5s ease-in-out;will-change:opacity}
.bg-lag.a{opacity:1}
/* Matrix: meget svagt overlay — baggrund skal dominere */
#matrix{position:fixed;inset:0;z-index:1;pointer-events:none}
/* app-lag over matrix */
#app,#loginView,#modal,.toast{position:relative;z-index:2}

svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ---------- LOGIN ---------- */
#loginView{display:none;align-items:center;justify-content:center;height:100%}
.login-kort{background:rgba(28,28,32,.94);border:1px solid var(--line);border-radius:16px;padding:38px 34px;width:340px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);backdrop-filter:blur(6px)}
.login-kort img{width:180px;margin-bottom:18px}
.login-kort input{width:100%;margin:7px 0;padding:11px 13px;border-radius:9px;border:1px solid var(--line);background:#1c1c20;color:var(--txt);font-size:14px}
.login-kort input:focus{outline:none;border-color:var(--gold)}
.login-kort button{width:100%;margin-top:10px;padding:11px;border-radius:9px;background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241c08;font-weight:700}
#loginErr{color:#e88;font-size:13px;min-height:18px;margin-top:6px}

/* ---------- APP LAYOUT: 3 kolonner ---------- */
#app{display:none;height:100%;overflow:hidden}

/* Venstre sidebar: grålig */
.sidebar{width:300px;flex:0 0 300px;height:100%;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(150,150,155,.94),rgba(120,120,126,.92));
  border-right:1px solid rgba(0,0,0,.25);backdrop-filter:blur(5px);color:#1c1c1e}
.side-top{padding:16px 14px 12px;border-bottom:1px solid rgba(0,0,0,.15)}
.side-top img{width:180px;display:block;margin:0 auto 10px}
.ur-boks{display:flex;justify-content:space-between;align-items:baseline;padding:6px 10px;margin:0 auto 12px;max-width:220px;border-radius:8px;background:rgba(30,30,34,.85);color:var(--gold-2);font-variant-numeric:tabular-nums}
.ur-boks #ur{font-size:19px;font-weight:700;letter-spacing:.04em}
.ur-boks #dato{font-size:13px;color:#d8d2c4}
.kopi-btn{width:100%;display:flex;align-items:center;gap:9px;justify-content:center;padding:11px;border-radius:10px;font-weight:700;font-size:13.5px;background:linear-gradient(180deg,#2f2f36,#232329);border:1px solid rgba(0,0,0,.3);color:var(--gold-2)}
.kopi-btn svg{width:17px;height:17px;color:var(--gold)}
.kopi-btn:hover{background:linear-gradient(180deg,#37373f,#2a2a30)}
.side-scroll{flex:1;overflow-y:auto;padding:6px 10px 10px}
.grp-head{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#3a2f10;font-weight:800;padding:14px 8px 6px;border-top:1px solid rgba(0,0,0,.18);margin-top:6px}
.grp-head:first-child{border-top:0;margin-top:0}
.med-item{width:100%;display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;font-size:14px;color:#1c1c1e;text-align:left;font-weight:500}
.med-item .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.med-item:hover{background:rgba(255,255,255,.35)}
.med-item.active{background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(60,50,20,.4)}
.ava{width:30px;height:30px;flex:0 0 30px;border-radius:50%;overflow:hidden;background:#4a4a50;display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--gold-2)}
.ava img{width:100%;height:100%;object-fit:cover}
.ava.lg{width:52px;height:52px;flex-basis:52px;font-size:20px}
.ava.sm{width:26px;height:26px;flex-basis:26px;font-size:11px}
/* mini-progress til højre for navn */
.mini-prog{flex:0 0 62px;position:relative;height:16px;border-radius:8px;overflow:hidden;background:rgba(30,30,34,.35);display:flex;align-items:center}
.mini-fill{position:absolute;left:0;top:0;bottom:0;border-radius:8px;transition:width .4s ease}
.mini-prog.p0 .mini-fill{background:#8a8a90}
.mini-prog.p25 .mini-fill{background:linear-gradient(90deg,#6080c0,#80a0e0)}
.mini-prog.p50 .mini-fill,.mini-prog.p60 .mini-fill{background:linear-gradient(90deg,#d6a83a,#e4c778)}
.mini-prog.p80 .mini-fill{background:linear-gradient(90deg,#c08030,#e0a050)}
.mini-prog.p100 .mini-fill{background:linear-gradient(90deg,#3c9a5f,#5ec988)}
.mini-pct{position:relative;z-index:1;width:100%;text-align:center;font-size:10.5px;font-weight:800;color:#1c1c1e;text-shadow:0 1px 1px rgba(255,255,255,.4)}

/* ---------- MAIN (midten) ---------- */
#main{flex:1;height:100%;overflow-y:auto;padding:26px 30px 60px;min-width:0}
.tom{color:var(--muted);text-align:center;margin-top:80px;font-size:15px}
.undertekst{color:var(--muted);font-size:13px}
.med-topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.med-titel{display:flex;align-items:center;gap:14px}
.med-titel h2{margin:0;font-size:22px}
.skift-foto{font-size:12px;color:var(--gold);cursor:pointer;text-decoration:underline}
.med-actions{display:flex;gap:10px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:9px;font-size:13.5px;font-weight:600;border:1px solid var(--line);background:#26262b;color:var(--txt)}
.btn:hover{border-color:var(--gold)}
.btn.ghost{background:transparent}
.btn.gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241c08;border:0}
.btn.danger{background:transparent;color:#e08a83;border-color:#5c322e}
.btn.danger:hover{background:rgba(192,69,60,.14);border-color:var(--danger)}
.btn.tiny{padding:6px 11px;font-size:12.5px}
.btn.gem{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#241c08;border:0}

/* ---------- MAPPER ---------- */
.mapper{display:flex;flex-direction:column;gap:12px;max-width:860px}
.mappe{background:rgba(34,34,39,.95);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:opacity .25s,box-shadow .2s}
.mappe.niv-0{opacity:.45}
.mappe.niv-1{box-shadow:inset 3px 0 0 var(--blaa)}
.mappe.niv-2{box-shadow:inset 3px 0 0 var(--proces)}
.mappe.niv-3{box-shadow:inset 3px 0 0 var(--ok)}
.mappe.niv-4{box-shadow:inset 3px 0 0 #a040c0}
.mappe-felt{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer}
.mappe.niv-0 .mappe-felt{cursor:default}
.mappe-ikon{color:var(--gold);font-size:20px;display:grid;place-items:center}
.mappe-navn{flex:1;font-size:15px;font-weight:600;outline:none;padding:2px 4px;border-radius:5px}
.mappe-navn:focus{background:rgba(255,255,255,.06)}
.status-btn{min-width:44px;height:38px;padding:0 8px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:3px;border:1px solid var(--line);background:#1f1f23;font-size:16px;transition:.2s}
.status-btn.s0{color:var(--muted)}
.status-btn.s1{color:var(--blaa);border-color:var(--blaa);background:rgba(74,159,214,.14)}
.status-btn.s2{color:var(--proces);border-color:var(--proces);background:rgba(214,168,58,.14)}
.status-btn.s3{color:var(--ok);border-color:var(--ok);background:rgba(76,175,114,.16)}
.status-btn.s4{color:#c060e0;border-color:#c060e0;background:rgba(192,96,224,.14)}
.status-btn:hover{transform:scale(1.06)}

/* ---------- CHECKPOINT ---------- */
.cp-omraade{max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .3s ease}
.cp-omraade.vis{max-height:800px;opacity:1;padding:0 16px 16px}
.cp-liste{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.cp-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;background:rgba(20,20,24,.65);border:1px solid var(--line);border-radius:10px;padding:12px}
.cp-row-btns{display:flex;gap:8px}
.cp-f{display:flex;flex-direction:column;gap:4px}
.cp-f.sm{width:120px}.cp-f.gr{flex:1;min-width:160px}
.cp-f label{font-size:11px;color:var(--gold);letter-spacing:.05em;text-transform:uppercase}
.cp-f input{padding:8px 10px;border-radius:7px;border:1px solid var(--line);background:#1c1c20;color:var(--txt);font-size:13.5px}
.cp-f input:focus{outline:none;border-color:var(--gold)}

/* ---------- BUND-PANEL ---------- */
.bund-panel{max-width:860px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}

/* ---------- HØJRE PANEL: KOED-MAIL ---------- */
.koed-sidebar{width:320px;flex:0 0 320px;height:100%;display:flex;flex-direction:column;background:rgba(24,24,28,.92);border-left:1px solid var(--line);backdrop-filter:blur(4px)}
.koed-top{padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.koed-header-titel{margin:0;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:800}
.koed-scroll{flex:1;overflow-y:auto;padding:6px 10px 20px}
.koed-grp{color:var(--gold)!important;border-top:1px solid var(--line)!important}
.koed-row{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:10px;margin-bottom:4px;transition:background .2s}
.koed-row:hover{background:rgba(255,255,255,.05)}
.koed-row.koed-done{background:rgba(76,175,114,.12);border:1px solid rgba(76,175,114,.3)}
.koed-nm{flex:1;font-size:13px;font-weight:500;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.koed-btns{display:flex;gap:4px;flex-shrink:0}
.koed-cb{display:inline-flex;align-items:center;gap:3px;padding:4px 7px;border-radius:7px;font-size:11px;font-weight:600;border:1px solid var(--line);background:rgba(40,40,46,.8);color:var(--muted);transition:.15s;white-space:nowrap}
.koed-cb svg{width:12px;height:12px;color:var(--ok)}
.koed-cb.aktiv{background:rgba(76,175,114,.2);border-color:var(--ok);color:var(--ok)}
.koed-cb:hover{border-color:var(--gold)}
.koed-100{font-size:11px;font-weight:800;color:var(--ok);flex-shrink:0}

/* ---------- FLYDENDE STATUS DASHBOARD ---------- */
.so-panel{position:fixed;bottom:24px;right:24px;z-index:40;width:320px;background:rgba(22,22,27,.97);border:1px solid var(--line);border-radius:14px;padding:0 16px 14px;box-shadow:0 8px 40px rgba(0,0,0,.6);backdrop-filter:blur(6px);user-select:none}
.so-drag-handle{display:flex;justify-content:space-between;align-items:center;padding:12px 0 10px;cursor:grab;border-bottom:1px solid var(--line);margin-bottom:12px}
.so-drag-handle:active{cursor:grabbing}
.so-drag-ikon{font-size:18px;color:var(--gold);opacity:.7}
.so-titel{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:800}
.so-blok{margin-bottom:10px}
.so-etiket{font-size:11px;color:var(--muted);margin-bottom:5px;font-weight:600}
.so-bar{position:relative;height:20px;border-radius:10px;background:rgba(60,60,66,.6);overflow:hidden}
.so-fill{position:absolute;left:0;top:0;bottom:0;border-radius:10px;transition:width .5s ease}
.so-fill.eksport{background:linear-gradient(90deg,#4a9fd6,#80c0f0)}
.so-fill.opret{background:linear-gradient(90deg,#d6a83a,#e4c778)}
.so-fill.total{background:linear-gradient(90deg,#3c9a5f,#5ec988)}
.so-pct{position:absolute;inset:0;display:grid;place-items:center;font-size:11.5px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.so-meta{font-size:12px;color:var(--muted);margin-top:8px}
.so-meta b{color:var(--txt)}

/* ---------- MODAL ---------- */
#modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:50;backdrop-filter:blur(3px)}
#modal.vis{display:flex}
.modal-kort{background:#26262b;border:1px solid var(--line);border-radius:14px;padding:26px;width:400px;max-width:92vw;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal-kort h3{margin:0 0 10px}
.modal-kort p{color:var(--muted);font-size:13.5px;line-height:1.5}
.modal-kort input,.modal-kort select{width:100%;margin-top:5px;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:#1c1c20;color:var(--txt);font-size:14px}
.modal-kort input:focus,.modal-kort select:focus{outline:none;border-color:var(--gold)}
.fl{display:block;font-size:12.5px;color:var(--gold);margin-bottom:12px}
.modal-btns{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* ---------- TOAST ---------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);background:#26262b;border:1px solid var(--line);border-radius:11px;padding:12px 20px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:.3s;z-index:60;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.toast.vis{opacity:1;transform:translate(-50%,0)}
.toast.ok{border-color:var(--ok)}.toast.ok .ti{color:var(--ok)}
.toast.err{border-color:var(--danger)}.toast.err .ti{color:var(--danger)}
.ti{font-size:17px;display:grid;place-items:center;width:22px;height:22px}

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:#3a3a40;border-radius:6px}