:root{
  --canvas:#F4F6F9; --surface:#fff; --surface-2:#F8FAFC; --surface-3:#EEF1F6;
  --line:#E1E5EC; --line-strong:#CDD3DD;
  --ink:#141722; --ink-2:#555E71; --ink-3:#8A93A5;
  --accent:#4B4ACF; --accent-ink:#3B3AB4; --accent-soft:#ECECFA; --on-accent:#fff;
  --now:#D8453F; --warn:#A9720A; --warn-soft:#FBF2DE;
  --crit:#C13B36; --crit-soft:#FBECEB; --good:#1C7A55; --good-soft:#E8F4EE;
  --c0:#2F6FD0; --c1:#C4482B; --c2:#1E8A6E; --c3:#8A55C9; --c4:#A67C00; --c5:#C43D7A;
  --shadow-1:0 1px 2px rgba(20,23,34,.05);
  --shadow-2:0 1px 2px rgba(20,23,34,.06), 0 12px 32px -16px rgba(20,23,34,.28);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);
  font:15px/1.55 "IBM Plex Sans",-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
.pad{max-width:640px;margin:0 auto;padding:48px 24px}
pre{background:var(--surface);border:1px solid var(--line);padding:10px 14px;border-radius:8px;font-size:13px;overflow-x:auto}

.c0{--c:var(--c0)} .c1{--c:var(--c1)} .c2{--c:var(--c2)}
.c3{--c:var(--c3)} .c4{--c:var(--c4)} .c5{--c:var(--c5)}

.app{display:flex;flex-direction:column;height:100vh;background:var(--surface)}
.topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);flex:none}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;letter-spacing:-.01em}
.brand span{color:var(--ink-3);font-weight:400}
.nav{display:flex;align-items:center;gap:2px}
.iconbtn{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;border:1px solid transparent;
  background:transparent;color:var(--ink-2);cursor:pointer;font-size:17px;line-height:1;font-family:inherit}
.iconbtn:hover{background:var(--surface-3);color:var(--ink)}
.wk{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;min-width:150px;
  text-align:center;font-variant-numeric:tabular-nums}
.seg{display:flex;background:var(--surface-3);border-radius:8px;padding:2px;gap:2px}
.seg button{font:inherit;font-size:12.5px;font-weight:500;border:0;background:transparent;
  color:var(--ink-2);padding:4px 12px;border-radius:6px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.spacer{flex:1}
.cap{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-2)}
.cap .num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--ink)}
.cap .track{width:100px;height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.cap .fill{display:block;height:100%;border-radius:4px;background:var(--accent);width:0}
.cap .fill.over{background:var(--crit)}
.who{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.who select{font:inherit;font-size:12.5px;padding:5px 8px;border-radius:7px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer}
.btn{font:inherit;font-size:12.5px;font-weight:500;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);padding:6px 12px;border-radius:7px;cursor:pointer}
.btn:hover{background:var(--surface-3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-ink)}
.btn.danger{border-color:transparent;color:var(--crit)}
.btn.danger:hover{background:var(--crit-soft)}

.body{display:flex;flex:1;min-height:0}
.rail{width:308px;flex:none;border-right:1px solid var(--line);background:var(--surface-2);
  display:flex;flex-direction:column;min-height:0}
.rail-head{padding:13px 16px 11px;border-bottom:1px solid var(--line)}
.rail-head h3{margin:0 0 3px;font-size:13px}
.rail-head p{margin:0;font-size:12px;color:var(--ink-3);line-height:1.45}
.rail-list{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:7px}
.rail-foot{padding:10px 12px;border-top:1px solid var(--line)}
.rail-foot .btn{width:100%}
.empty{text-align:center;color:var(--ink-3);font-size:12.5px;padding:26px 16px;
  border:1px dashed var(--line-strong);border-radius:9px}

.card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--c,var(--ink-3));
  border-radius:9px;padding:9px 11px;cursor:grab;box-shadow:var(--shadow-1);transition:box-shadow .12s,transform .12s}
.card:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}
.card:active{cursor:grabbing}
.c-top{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--c,var(--ink-3));flex:none}
.c-client{font-size:11.5px;color:var(--ink-2);font-weight:500}
.c-title{font-size:13px;font-weight:500;line-height:1.35;margin-bottom:6px}
.c-meta{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-family:"IBM Plex Mono",monospace;font-size:10.5px;padding:2px 6px;border-radius:5px;
  background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
.chip.hrs{background:color-mix(in srgb,var(--c) 13%,var(--surface));color:var(--c);
  border:1px solid color-mix(in srgb,var(--c) 26%,transparent)}
.c-nums{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-2);margin-bottom:6px}
.c-nums b{color:var(--ink);font-weight:500}
.meter{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.m-fill{display:block;height:100%;border-radius:4px;background:var(--c,var(--accent));min-width:2px}
.m-fill.over{background:var(--crit)}
.c-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px}
.state{font-size:11px;font-weight:500}
.state.ok{color:var(--good)} .state.warn{color:var(--warn)} .state.crit{color:var(--crit)}
.mini{font:inherit;font-size:11px;font-weight:500;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink-2);border-radius:6px;padding:2px 7px;cursor:pointer}
.mini:hover{background:var(--surface-3);color:var(--ink)}

.grid-wrap{flex:1;min-width:0;display:flex;flex-direction:column}
.cal{flex:1;min-height:0;padding:0 4px 4px}

.detail{width:0;flex:none;border-left:1px solid var(--line);background:var(--surface-2);
  overflow:hidden;transition:width .18s ease}
.detail.open{width:300px}
.d-in{width:300px;padding:16px;display:flex;flex-direction:column;gap:13px}
.d-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.d-client{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2);font-weight:500;margin-bottom:4px}
.d-id{min-width:0;flex:1}
.d-title{font:inherit;font-size:15px;font-weight:600;line-height:1.3;width:100%;
  border:1px solid transparent;background:transparent;color:var(--ink);
  padding:2px 5px;margin:-2px -5px;border-radius:6px}
.d-title:hover{background:var(--surface-3)}
.d-title:focus{background:var(--surface);border-color:var(--line-strong);outline:none;
  box-shadow:0 0 0 2px var(--accent-soft)}
.d-when{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-2)}
.moved{font-size:12px;background:var(--warn-soft);color:var(--warn);padding:8px 10px;border-radius:8px;line-height:1.4}
.toggle{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:13px;font-weight:500}
.toggle.on{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 32%,transparent);color:var(--good)}
.toggle input{accent-color:var(--good);width:15px;height:15px;cursor:pointer}
.field label{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:5px}
.field textarea{width:100%;font:inherit;font-size:13px;line-height:1.5;resize:vertical;min-height:76px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:8px;padding:8px 10px}
.field select{width:100%;font:inherit;font-size:13px;padding:7px 9px;border-radius:7px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer}
.hint{font-size:11px;color:var(--ink-3);margin:5px 0 0}

.syncbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;flex:none;
  padding:8px 16px;border-top:1px solid var(--line);background:var(--surface-2);
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3)}
.syncbar .s{display:flex;align-items:center;gap:6px}
.syncbar .led{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none}
.syncbar .led.ok{background:var(--good)}
.syncbar .led.warn{background:var(--warn)}
.syncbar .led.bad{background:var(--crit)}
.syncbar .led.idle{background:var(--ink-3)}
.syncbar .reconnect{font-size:11.5px;font-weight:500;color:var(--on-accent);background:var(--accent);
  text-decoration:none;padding:3px 9px;border-radius:6px}
.syncbar .reconnect:hover{background:var(--accent-ink)}
.syncbar .sim{margin-left:auto;color:var(--warn)}

.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:60;pointer-events:none}
.toast{background:var(--ink);color:var(--canvas);border-radius:9px;padding:9px 14px;font-size:12.5px;
  box-shadow:var(--shadow-2);max-width:340px;transition:opacity .3s}

/* FullCalendar-skin */
.fc{--fc-border-color:var(--line);--fc-page-bg-color:var(--surface);
  --fc-today-bg-color:color-mix(in srgb,var(--accent) 4%,transparent);
  --fc-now-indicator-color:var(--now);font-family:inherit}
.fc-theme-standard td,.fc-theme-standard th{border-color:var(--line)}
.fc .fc-timegrid-slot{height:26px}
.fc .fc-timegrid-slot-minor{border-top-style:none}
.fc .fc-timegrid-slot-label{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-3);
  vertical-align:top;border:0}
.fc .fc-timegrid-slot-label-cushion{transform:translateY(-7px);padding:0 8px 0 4px}
.fc .fc-timegrid-slots tr:first-child .fc-timegrid-slot-label-cushion{opacity:0}
.fc .fc-col-header-cell{background:var(--surface);padding:0}
.fc .fc-col-header-cell-cushion{display:block;padding:9px 0 8px;text-decoration:none;color:inherit}
.dh{display:flex;flex-direction:column;align-items:center;gap:1px}
.dh .d-name{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.dh .d-num{font-family:"IBM Plex Mono",monospace;font-size:16px;color:var(--ink-2);line-height:1.2}
.fc .fc-day-today .dh .d-num{background:var(--accent);color:var(--on-accent);border-radius:7px;padding:0 7px}
.fc .fc-timegrid-event{box-shadow:none;border-radius:7px;margin-right:3px}
.fc .fc-timegrid-event .fc-event-main{padding:3px 6px}
.fc .fc-event.ev{--fc-event-bg-color:color-mix(in srgb,var(--c) 13%,var(--surface));
  --fc-event-border-color:color-mix(in srgb,var(--c) 26%,var(--surface));border-left:3px solid var(--c)}
.fc .fc-event.ev .fc-event-main{color:var(--ink)}
.fc .fc-event.ev-meeting{--c:var(--ink-3);--fc-event-bg-color:var(--surface-2);
  --fc-event-border-color:var(--line-strong);border-left:3px solid var(--ink-3);cursor:default;
  background-image:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--ink-3) 16%,transparent) 5px 6px)}
.fc .fc-event.ev-declined{opacity:.45}
.fc .fc-event.ev-done{opacity:.62}
.fc .fc-event.ev-done .ev-t{text-decoration:line-through}
.fc .fc-event.ev-moved{border-left-style:dashed}
.fc .fc-event.ev-sel{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--c)}
.ev-in{display:flex;flex-direction:column;gap:1px;overflow:hidden;height:100%}
.ev-t{font-size:11.5px;font-weight:600;line-height:1.25;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ck{color:var(--good);margin-right:3px}
.ev-m{font-size:10.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden}
.ev-h{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-3);margin-top:auto}
.ev-in.tight .ev-m,.ev-in.tight .ev-h{display:none}
.ev-in.tight .ev-t{-webkit-line-clamp:1}
/* 1-times blokke: drop kundelinjen, behold klokkeslættet. */
.ev-in.compact .ev-m{display:none}

@media (max-width:1180px){.detail.open{width:100%}.body{flex-wrap:wrap}.d-in{width:100%}}

/* ── Mix-visning: kunden er planlægningsenheden ──────────────── */
.group{background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--c,var(--ink-3));border-radius:10px;overflow:hidden;
  box-shadow:var(--shadow-1);transition:box-shadow .12s,transform .12s}
.group[data-drag]{cursor:grab}
.group[data-drag]:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}
.group[data-drag]:active{cursor:grabbing}
.group.done{opacity:.62}
/* Overbooket: må ALDRIG tones ned som 'afklaret' — det er tallet man skal se. */
.group.over{border-color:var(--crit);box-shadow:inset 3px 0 0 var(--crit)}
.group.over .g-nums b{color:var(--crit)}
.g-head{padding:11px 12px 12px}
.g-top{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.g-name{font-size:13.5px;font-weight:600;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.g-link{flex:none}
.g-nums{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-2);margin-bottom:7px}
.g-nums .big{color:var(--ink);font-weight:500;font-size:15px}
.g-nums .of{color:var(--ink-3)}
.g-nums.muted{color:var(--ink-3);margin-bottom:0;font-size:11.5px}
.g-state{font-size:11px;font-weight:500;margin-top:6px}
.g-state.ok{color:var(--good)} .g-state.warn{color:var(--warn)} .g-state.crit{color:var(--crit)}

.g-toggle{display:block;width:100%;text-align:left;font:inherit;font-size:11.5px;
  font-family:"IBM Plex Mono",monospace;color:var(--ink-3);background:var(--surface-2);
  border:0;border-top:1px solid var(--line);padding:7px 12px;cursor:pointer}
.g-toggle:hover{background:var(--surface-3);color:var(--ink-2)}
.g-inits{border-top:1px solid var(--line);background:var(--surface-2)}
.init{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;
  border-top:1px solid var(--line)}
.init:first-child{border-top:0}
.i-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.i-c{font-size:10.5px;color:var(--ink-3);flex:none;max-width:84px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.i-h{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-3);flex:none}
.i-link{flex:none}

.nlink{font-size:11px;color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent;
  white-space:nowrap;font-family:"IBM Plex Mono",monospace}
.nlink:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}
.nlink.block{display:inline-block;font-size:12px}
.nlink.as-btn{background:none;border:0;padding:0;cursor:pointer;font-family:"IBM Plex Mono",monospace}
.d-links{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.btn.wide{width:100%;text-align:center;text-decoration:none;display:block;
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);padding:9px 12px}
.btn.wide:hover{background:var(--accent-ink)}

.g-other{font-size:11.5px;color:var(--ink-3);text-align:center;padding:10px 12px;
  border:1px dashed var(--line-strong);border-radius:9px;line-height:1.45}
.group.nomonth{border-left-color:var(--warn);border-style:dashed}

/* Flex-børn krymper som standard — med mange grupper klemmes de sammen. */
.rail-list > *{flex:0 0 auto}

/* Blokke der tæller i en anden måned end den måleren viser. */
.fc .fc-event.ev-othermonth{border-left-style:dotted;border-left-width:4px}
.ev-mtag{color:var(--warn);font-weight:500}
.g-elsewhere{font-size:11px;color:var(--warn);margin-top:5px;
  font-family:"IBM Plex Mono",monospace}

.d-inits{margin-top:14px}
.d-inits-h{font-size:11.5px;color:var(--ink-3);margin-bottom:6px}
.d-inits-h.muted{font-style:italic}

/* Hele-dags-bjælken: én linje, ikke en blok med tomt klokkeslæt.
   min-width:0 på titlen er det der gør ellipsis muligt i en flex-container —
   uden den nægter den at krympe, og teksten flyder ud over kanten. */
.ev-in.allday{display:flex;align-items:baseline;gap:8px;padding:1px 4px;overflow:hidden}
.ev-in.allday .ev-t{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-in.allday .ev-m{display:none}
.ev-in.allday .ev-h{margin:0;flex:none;opacity:.7;white-space:nowrap}
/* 'transparent' hos Google = optager ikke tid. Skal kunne ses, ikke spærre. */
.ev-free{opacity:.72}

.d-repeat{display:flex;flex-direction:column;gap:0}
.d-repeat .btn.wide{width:100%;text-align:center}
.ev-rep{opacity:.75}

/* ── Login ──────────────────────────────────────────────────────────────── */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--canvas)}
.login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:28px 26px 24px;box-shadow:var(--shadow-2)}
.login-card .brand{margin-bottom:22px}
.login-card h1{margin:0 0 4px;font-size:19px;letter-spacing:-.01em}
.login-card .sub{margin:0 0 20px;font-size:13px;color:var(--ink-2);line-height:1.5}
.login-btn{display:block;text-align:center;text-decoration:none;padding:10px 14px;font-size:13.5px}
.login-error{margin:0 0 16px;padding:9px 12px;border-radius:8px;font-size:12.5px;line-height:1.45;
  background:var(--crit-soft);color:var(--crit);border:1px solid color-mix(in srgb,var(--crit) 22%,transparent)}
.login-note{margin:18px 0 0;font-size:11.5px;color:var(--ink-3);line-height:1.5}