:root{
  --bg:#f4f5f7; --panel:#fff; --line:#e3e6ea; --line2:#eef0f3; --mon:#cfd4db;
  --text:#1d2330; --muted:#6b7385; --accent:#2f6fde;
  --we:#f6f7f9; --today:#fff6dc; --hover:#eef4ff;
  --namew:210px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:14px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
button,select,input{font:inherit}
.muted{color:var(--muted)}

header{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font-weight:700;font-size:16px;margin-right:8px;letter-spacing:-.01em}
.btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 11px;cursor:pointer;color:var(--text)}
.btn:hover{background:#f0f2f5}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:#2560c4}
.btn.danger{color:#c0392b}
.btn:disabled{opacity:.45;cursor:default}
.range{font-weight:600;margin:0 6px;white-space:nowrap}
.range small{color:var(--muted);font-weight:500;margin-left:6px}
.spacer{flex:1}
#status{color:var(--muted);font-size:12px;margin-right:4px}
#status.err{color:#c0392b;font-weight:600}
#brush{display:none;align-items:center;gap:6px;background:#eef4ff;border:1px solid #c9dafb;border-radius:8px;padding:4px 6px 4px 10px;font-size:13px}
#brush.on{display:flex}
#brush .x{border:none;background:none;font-size:18px;line-height:1;cursor:pointer;color:var(--muted);padding:0 4px}

.wrap{flex:1;display:flex;min-height:0}
aside{width:280px;flex:none;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.side-top{padding:10px;display:flex;gap:6px}
.side-top input{flex:1;padding:7px 9px;border:1px solid var(--line);border-radius:8px;min-width:0}
.hint{color:var(--muted);font-size:12px;padding:0 12px 8px;border-bottom:1px solid var(--line)}
#plist{overflow:auto;padding:4px 8px 24px;flex:1}
.sec{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 6px 4px;font-weight:600}
.fold{margin:1px 0}
.fold .fh{display:flex;align-items:center;gap:7px;width:100%;border:none;background:none;padding:8px 6px;border-radius:8px;font:inherit;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;text-align:left}
.fold .fh:hover{background:#f1f3f6}
.fold .car{display:inline-block;width:10px;color:var(--muted);font-size:10px;transition:transform .15s}
.fold.open .car{transform:rotate(90deg)}
.fold .fic{font-size:15px;line-height:1}
.fold .fdot{width:10px;height:10px;border-radius:3px;flex:none}
.fold .fn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fold .n{font-weight:500;color:var(--muted);font-size:11.5px;background:var(--line2);border-radius:10px;padding:1px 8px}
.fold .fb{display:none;margin:0 0 6px 13px;padding-left:4px;border-left:2px solid var(--line2)}
.fold.open .fb{display:block}
.fold.drop>.fh{background:#e8f0ff;box-shadow:inset 0 0 0 2px var(--accent)}
.fold .fhint{font-size:11.5px;color:var(--muted);padding:2px 8px 6px}
.fold .fempty{font-size:12px;color:var(--muted);padding:4px 8px}
.chip .when{color:var(--text)}
.fold.sub .fh{font-weight:500;padding:6px 6px}
.fold.sub .fb{margin-left:11px}
.needtype{display:flex;align-items:center;gap:6px;width:calc(100% - 4px);margin:6px 2px 4px;padding:9px 10px;border:1px solid #f0c36d;background:#fff8e6;border-radius:9px;font:inherit;font-size:12.5px;color:#7a5200;cursor:pointer;text-align:left}
.needtype em{font-style:normal;flex:1}.needtype span{font-weight:600;white-space:nowrap}
.needtype:hover{background:#fff1cc}
dialog.wide{width:min(640px,96vw)}
.sortlist{max-height:60vh;overflow:auto;margin-top:8px;display:flex;flex-direction:column}
.srow{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line2)}
.srow .t{flex:1;min-width:0}
.srow .t div,.srow small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow small{display:block;color:var(--muted);font-size:11.5px}
.srow b{color:var(--muted);font-weight:600;font-size:12px}
.srow .tag{font-size:10.5px;background:#e8f0ff;color:var(--accent);border-radius:6px;padding:1px 6px}
.sbtns{display:flex;gap:4px;flex:none}
.sb{border:1.5px solid var(--c);color:var(--c);background:#fff;border-radius:7px;padding:4px 8px;font-size:12px;font-weight:600;cursor:pointer}
.sb:hover{background:var(--c);color:#fff}
.sb.hide{--c:#8a94a6;font-weight:500}
@media (max-width:560px){.srow{flex-wrap:wrap}.sbtns{width:100%}.sb{flex:1}}
.chip{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.chip:hover{background:#f1f3f6}
.chip.active{background:#e8f0ff;box-shadow:inset 0 0 0 2px var(--accent)}
.chip i{width:11px;height:11px;border-radius:3px;flex:none}
.chip .t{min-width:0;flex:1}
.chip .t div,.chip small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip small{display:block;color:var(--muted);font-size:11.5px}
.chip b{font-weight:600;color:var(--muted);font-size:12px;margin-right:4px}
.chip .more{opacity:0;border:none;background:none;cursor:pointer;color:var(--muted);padding:2px 6px;border-radius:5px;font-size:15px;line-height:1}
.chip:hover .more{opacity:1}
.chip .more:hover{background:#e3e6ea}
.morelink{color:var(--muted);font-size:12px;padding:6px 8px}

#board{flex:1;overflow:auto;position:relative}
#grid{min-width:100%}
.hrow{display:flex;position:sticky;top:0;z-index:5;background:var(--panel);border-bottom:1px solid var(--line)}
.hname{width:var(--namew);flex:none;position:sticky;left:0;background:var(--panel);z-index:2;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:8px 12px;color:var(--muted);font-size:12px}
.hdays{display:flex}
.hday{width:var(--colw);flex:none;text-align:center;padding:4px 0 6px;border-left:1px solid var(--line2);font-size:12px;overflow:hidden}
.hday.mon{border-left-color:var(--mon)}
.hday .wk{font-size:10.5px;color:var(--accent);font-weight:700;height:14px;white-space:nowrap}
.hday .dn{color:var(--muted)}
.hday .dd{font-weight:600;white-space:nowrap}
.hday.we,.hday.hol{background:var(--we);color:#9aa1ad}
.hday.hol .dd{color:#c0392b}
.hday.today{background:var(--today)}
.hday.today .dd{color:#b7791f}
.free{margin-top:3px;font-size:10.5px;border-radius:10px;padding:0 6px;display:inline-block;background:#fdecea;color:#c0392b;font-weight:700;min-height:15px}
.free.zero{background:#e7f6ee;color:#1c9a6c}
.free.none{background:none}

.row{display:flex;border-bottom:1px solid var(--line)}
.name{width:var(--namew);flex:none;position:sticky;left:0;z-index:3;background:var(--panel);border-right:1px solid var(--line);padding:6px 12px;display:flex;align-items:center;gap:9px}
.name .av{width:28px;height:28px;border-radius:50%;background:#e8ecf2;color:#4a5263;font-size:11px;font-weight:700;display:grid;place-items:center;flex:none}
.name .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.name .nm small{display:block;color:var(--muted);font-size:11px}
.track{position:relative;flex:none;background:var(--panel)}
.cells{position:absolute;inset:0;display:flex}
.cell{width:var(--colw);flex:none;border-left:1px solid var(--line2);height:100%}
.cell.mon{border-left-color:var(--mon)}
.cell.we,.cell.hol{background:var(--we) repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.025) 6px 12px)}
.cell.today{background:var(--today)}
.cell:hover{background:var(--hover)}

.bar{position:absolute;height:26px;border-radius:6px;background:var(--c);color:#fff;font-size:12.5px;display:flex;align-items:center;cursor:grab;touch-action:pan-x pan-y;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;box-shadow:0 1px 2px rgba(0,0,0,.18);overflow:hidden;z-index:1}
.bar.abs{background:repeating-linear-gradient(135deg,var(--c) 0 8px,color-mix(in srgb,var(--c) 82%,#fff) 8px 16px)}
.bar:hover{filter:brightness(1.08)}
.bar .txt{flex:1;min-width:0;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .txt b{font-weight:600;opacity:.8;margin-right:4px}
.bar .txt em{font-style:normal;opacity:.85}
.bar .h{width:9px;align-self:stretch;cursor:ew-resize;flex:none}
.bar .h:hover{background:rgba(255,255,255,.4)}
.bar.cutl{border-top-left-radius:0;border-bottom-left-radius:0}
.bar.cutr{border-top-right-radius:0;border-bottom-right-radius:0}
.bar.lift{box-shadow:0 6px 16px rgba(0,0,0,.25);z-index:4;cursor:grabbing}
body.dragging,body.dragging *{cursor:grabbing!important}
body.resizing,body.resizing *{cursor:ew-resize!important}

.preview{position:absolute;top:3px;bottom:3px;border:2px dashed var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);border-radius:7px;pointer-events:none;z-index:2;font-size:12px;color:var(--c);font-weight:700;padding:3px 7px;white-space:nowrap;overflow:hidden}
.ghost{position:fixed;left:0;top:0;pointer-events:none;z-index:100;background:var(--c);color:#fff;padding:5px 10px;border-radius:7px;font-size:12.5px;box-shadow:0 8px 20px rgba(0,0,0,.22);white-space:nowrap}

dialog{border:none;border-radius:14px;padding:0;box-shadow:0 20px 60px rgba(0,0,0,.25);width:min(460px,92vw);color:var(--text)}
dialog::backdrop{background:rgba(20,25,35,.35)}
dialog form{padding:18px 20px;display:flex;flex-direction:column;gap:11px}
dialog h3{margin:0 0 2px;font-size:16px}
dialog label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
dialog label.check{justify-content:flex-end;padding-bottom:9px}
dialog label.check span{display:flex;gap:6px;align-items:center;color:var(--text);font-size:13px}
dialog input:not([type=checkbox]):not([type=color]),dialog select{padding:8px 9px;border:1px solid var(--line);border-radius:8px;color:var(--text);font-size:14px;background:#fff;width:100%}
dialog input[type=color]{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;padding:2px;background:#fff}
.two{display:flex;gap:10px;align-items:stretch}
.two>*{flex:1}
menu{display:flex;gap:8px;justify-content:flex-end;margin:6px 0 0;padding:0}
menu .left{margin-right:auto}
.picklist{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:1px;margin:0 -6px}
.picklist .chip{cursor:pointer;border:none;background:none;text-align:left;width:100%;color:var(--text)}
.picklist .chip.first{background:#f1f3f6}
.emplist{max-height:55vh;overflow:auto;display:flex;flex-direction:column;gap:4px}
.er{display:flex;gap:6px;align-items:center}
.er input[type=text]{flex:1}
.er.off input[type=text]{color:var(--muted);text-decoration:line-through}
.er button{border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;padding:5px 8px;color:var(--muted)}
.er button:hover{background:#f0f2f5;color:var(--text)}
.er label{flex-direction:row;align-items:center;gap:4px;font-size:12px}
.er input[type=number]{width:54px;padding:4px 6px;border:1px solid var(--line);border-radius:6px;font-size:13px}

/* avtaler: lås, mannskap, markering */
.bar .lk{font-size:11px;flex:none;margin-right:2px}
.bar .cnt{flex:none;font-size:11px;background:rgba(0,0,0,.2);border-radius:9px;padding:0 6px;margin-left:4px;white-space:nowrap}
.bar.locked{box-shadow:inset 0 0 0 2px rgba(0,0,0,.28),0 1px 2px rgba(0,0,0,.18)}
.bar.locked .h{cursor:default}
.bar.locked .h:hover{background:none}
.bar.hl{outline:2px solid #1d2330;outline-offset:1px;z-index:3}
#dlgEdit{width:min(580px,94vw)}
.shifts{display:flex;gap:5px;flex-wrap:wrap;align-items:center;font-size:12px;margin-top:-4px}
.shifts .btn{padding:3px 9px;font-size:12px}
dialog label.lockrow{flex-direction:row;align-items:center;gap:10px;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer}
dialog label.lockrow.on{background:#fff6dc;border-color:#ecd28f}
.lockrow span{display:flex;flex-direction:column;font-size:14px}
.lockrow small{color:var(--muted);font-size:11.5px}
.lockrow input{width:18px;height:18px}
.plabel{font-size:12px;color:var(--muted);margin-bottom:-6px}
.people{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-height:32vh;overflow:auto}
dialog label.pp{flex-direction:row;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;color:var(--text);font-size:13px;cursor:pointer;min-width:0}
dialog label.pp.on{background:#eef4ff;border-color:#b9cff8}
.pp span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.pp em{flex:none;font-style:normal;font-size:10.5px;color:#c0392b;background:#fdecea;border-radius:8px;padding:0 6px}
@media (max-width:520px){ .people{grid-template-columns:1fr} }

/* varighet */
.two.dur{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:10px}
.durin{display:flex;gap:4px}
dialog .durin input{width:64px!important;flex:none;text-align:center;font-weight:600}
dialog .durin select{flex:1;min-width:0;padding-left:6px!important;padding-right:2px!important}
.durinfo{font-size:12px;color:var(--muted);margin-top:-5px}
.durinfo b{color:var(--text)}
.durinfo .hol{color:#c0392b}
@media (max-width:520px){ .two.dur{grid-template-columns:1fr} }

/* kompakt visning for lange perioder */
#grid.compact .hday{overflow:visible;padding-top:3px}
#grid.compact .hday .wk{text-align:left;padding-left:2px;position:relative;z-index:1}
#grid.compact .hday .wk .mo{color:var(--muted);font-weight:600;margin-left:3px}
#grid.compact .hday .dn{font-size:10px}
#grid.compact .free{padding:0 3px;font-size:9.5px}
#grid.tiny .hday .dn{display:none}
#grid.tiny .free{display:none}
#grid.tiny .hday .dd{font-size:10px;font-weight:500}
#grid.compact .bar .txt b{display:none}

@media (max-width:760px){ aside{width:210px} :root{--namew:150px} .hint{display:none} }
@media print{
  aside,header .btn,header select,#brush,#status{display:none!important}
  body{overflow:visible;height:auto;display:block;background:#fff}
  .wrap{display:block} #board{overflow:visible}
  .hrow,.name,.hname{position:static}
  .bar{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cell,.hday{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}