:root{
  --navy:#0D1B3E; --navy2:#16295a; --blue:#1F4D78; --blue2:#2E74B5; --red:#C0392B; --green:#1E8449; --amber:#B9770E;
  --ink:#1b1f27; --muted:#5c6470; --line:#D9DEE5; --line2:#EDF0F4; --bg:#F4F6F9; --card:#fff; --soft:#F8FAFC;
  --radius:10px; --gap:12px; --h:40px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overscroll-behavior:none}
body{font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--blue2);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:650}
h1{font-size:22px} h2{font-size:17px} h3{font-size:15px;color:var(--muted);font-weight:600}
.muted{color:var(--muted)} .small{font-size:13px} .bold{font-weight:650} .right{text-align:right} .nowrap{white-space:nowrap}
.red{color:var(--red)} .green{color:var(--green)} .amber{color:var(--amber)}
.hide{display:none !important}

/* top bars */
#bar{position:sticky;top:0;z-index:400;height:48px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:3px solid var(--red)}
#bar .brand{font-weight:700;letter-spacing:.2px;font-size:16px;color:#fff;display:flex;align-items:center;gap:10px;height:100%;white-space:nowrap}
#bar .brand:hover{text-decoration:none}
#bar .brand span{opacity:.75;font-weight:500;font-size:13px}
#bar .spacer{flex:1}
#bar .who{font-size:13px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
#bar .btn{height:32px;width:96px;padding:0 10px;border-color:rgba(255,255,255,.35);color:#fff;background:transparent}
#bar .btn:hover{background:rgba(255,255,255,.1)}
#nav{position:sticky;top:48px;z-index:390;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:stretch;padding:0 8px}
#nav a{display:flex;align-items:center;justify-content:center;gap:6px;height:46px;padding:0 14px;color:var(--muted);font-weight:600;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
#nav a:hover{text-decoration:none;color:var(--ink)}
#nav a.on{color:var(--navy);border-bottom-color:var(--blue2)}
.badge{display:inline-block;background:var(--red);color:#fff;border-radius:9px;padding:0 6px;font-size:12px;line-height:18px;font-weight:700;min-width:18px;text-align:center}

/* layout */
main{max-width:1240px;margin:0 auto;padding:18px 16px 60px}
.row{display:flex;gap:var(--gap);align-items:center;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--gap);align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;min-width:0}
.card h2{margin-bottom:10px}
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.head .title{min-width:0}
.head .title h1{line-height:1.2}
.head .title .sub{color:var(--muted);margin-top:4px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sep{height:1px;background:var(--line2);margin:12px 0}
.empty{padding:28px 16px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius);background:var(--soft)}
.empty b{color:var(--ink)}
.hint{background:#FFF8E6;border:1px solid #F1DFA6;color:#6b4e00;border-radius:8px;padding:10px 12px;font-size:14px}
.hint.info{background:#EEF4FB;border-color:#CFE0F3;color:#1F4D78}
.hint.ok{background:#EAF6EE;border-color:#BFE3CB;color:#1E5C34}
.hint.bad{background:#FBE9E7;border-color:#F0C4BE;color:var(--red)}
.hint + .hint{margin-top:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--h);padding:0 14px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;cursor:pointer;white-space:nowrap;line-height:1;text-decoration:none}
.btn:hover{background:var(--soft);text-decoration:none}
.btn.p{background:var(--navy);border-color:var(--navy);color:#fff} .btn.p:hover{background:var(--navy2)}
.btn.g{background:var(--green);border-color:var(--green);color:#fff} .btn.g:hover{background:#196f3d}
.btn.d{color:var(--red);border-color:#E7C2BD} .btn.d:hover{background:#FBEFED}
.btn.s{height:32px;padding:0 10px;font-size:13px}
.btn.l{height:48px;padding:0 22px;font-size:16px}
.btn:disabled{opacity:.5;cursor:default}
.link{background:none;border:0;padding:0;color:var(--blue2);cursor:pointer;font-weight:600;display:inline-flex;align-items:center;min-height:32px}
.link:hover{text-decoration:underline}
.link.red{color:var(--red)}

/* forms */
label.f{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);font-weight:600;min-width:0}
label.f>span.req::after{content:" *";color:var(--red)}
input.i,select.i,textarea.i{height:var(--h);padding:0 11px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-weight:500;width:100%;min-width:0}
textarea.i{height:auto;min-height:80px;padding:9px 11px;resize:vertical;line-height:1.45}
input.i:focus,select.i:focus,textarea.i:focus{outline:2px solid #BBD3EC;border-color:var(--blue2)}
input.i[type=date],input.i[type=time]{padding-right:6px}
input.i.num{text-align:right;font-variant-numeric:tabular-nums}
.check{display:flex;align-items:center;gap:8px;min-height:var(--h);font-weight:500;color:var(--ink);font-size:14px;cursor:pointer}
.check input{width:18px;height:18px;margin:0;flex-shrink:0}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.fgrid .w2{grid-column:1/-1}
.fgrid label.f{justify-content:flex-end}
.fnote{font-size:13px;color:var(--muted);font-weight:500}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button,.seg a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:19px;background:#fff;color:var(--ink);font-weight:600;font-size:14px;cursor:pointer}
.seg button:hover,.seg a:hover{text-decoration:none;border-color:var(--blue2)}
.seg .on{background:var(--navy);border-color:var(--navy);color:#fff}
.file{border:2px dashed var(--line);border-radius:10px;padding:14px;text-align:center;color:var(--muted);background:var(--soft);cursor:pointer;display:block}
.file input{display:none}
.file.has{border-style:solid;border-color:var(--blue2);color:var(--ink);background:#EEF4FB}
.savebar{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line2);flex-wrap:wrap}
.savebar .msg{margin-right:auto;color:var(--muted);font-size:13px}

/* tables */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.tbl th{font-size:12px;letter-spacing:.2px;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--soft);font-weight:650;vertical-align:bottom}
.tbl td{padding:10px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer} .tbl tr.click:hover td{background:#F5F8FC}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl td.act{white-space:nowrap;text-align:right}
.tbl td.big{font-weight:700;font-size:15px}
.tbl tr.off td{opacity:.55}
.tbl input.i{height:36px}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:12px;font-size:12px;font-weight:650;background:var(--line2);color:var(--muted);white-space:nowrap}
.chip.pending,.chip.pending_pre{background:#FFF1DC;color:var(--amber)}
.chip.approved{background:#E3F1E7;color:var(--green)}
.chip.declined{background:#FBE9E7;color:var(--red)}
.chip.cancelled{background:var(--line2);color:var(--muted)}
.chip.admin{background:#EEF4FB;color:var(--blue2)}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:middle;flex-shrink:0}
.who-c{display:inline-flex;align-items:center;min-width:0}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap)}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;min-width:0}
.tile .k{font-size:12px;color:var(--muted);font-weight:650;letter-spacing:.2px}
.tile .v{font-size:24px;font-weight:750;margin-top:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tile .s{font-size:12px;color:var(--muted);margin-top:2px}
.tile.hl{background:var(--navy);border-color:var(--navy);color:#fff}
.tile.hl .k,.tile.hl .s{color:rgba(255,255,255,.8)}
.tile.warn .v{color:var(--red)}

/* lists */
.list{display:flex;flex-direction:column;gap:8px}
.item{display:flex;gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:8px;background:#fff;min-width:0}
.item .body{flex:1;min-width:0}
.item .body .t{font-weight:650;overflow-wrap:anywhere}
.item .body .m{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.item .acts{display:flex;gap:6px;flex-shrink:0;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.item.x{cursor:pointer} .item.x:hover{border-color:var(--blue2)}
.item .sel{width:20px;height:20px;flex-shrink:0;margin:0}
details.fold{margin-top:12px;border-top:1px solid var(--line);padding-top:4px}
details.fold summary{cursor:pointer;padding:10px 0;font-weight:650;color:var(--blue2);min-height:40px;display:flex;align-items:center}
details.fold[open] summary{margin-bottom:6px}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 16px;font-size:14px}
.kv dt{color:var(--muted)} .kv dd{margin:0;overflow-wrap:anywhere}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 12px 22px;font-size:14px}
.timeline li::before{content:"";position:absolute;left:5px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--blue2)}
.timeline li::after{content:"";position:absolute;left:9px;top:17px;bottom:0;width:1px;background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline .when{font-size:12px;color:var(--muted)}
.summary .big{font-size:30px;font-weight:750;line-height:1.1;color:var(--navy);font-variant-numeric:tabular-nums}
.summary .line{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line2);font-size:14px}
.summary .line:last-child{border-bottom:0}
.summary .line b{font-variant-numeric:tabular-nums;white-space:nowrap}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.filters label.f{flex:1 1 140px}
.filters .btn{height:var(--h)}
.bulk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px;padding:8px 10px;background:#EEF4FB;border:1px solid #CFE0F3;border-radius:8px}
.bulk .n{font-weight:650;margin-right:auto}

/* calendar */
.cal-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.cal-top h2{font-size:19px;min-width:170px;text-align:center}
.cal-top .grow{flex:1}
.cal{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cal-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--soft);border-bottom:1px solid var(--line)}
.cal-dow div{padding:7px 8px;font-size:12px;font-weight:650;color:var(--muted);text-align:center}
.cal-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(22px,auto);position:relative;border-bottom:1px solid var(--line);min-height:96px}
.cal-week:last-child{border-bottom:0}
.cal-day{grid-row:1 / -1;border-right:1px solid var(--line2);padding:4px 6px 6px;min-width:0;cursor:pointer}
.cal-day:nth-child(7){border-right:0}
.cal-day.we{background:#F7F8FA}
.cal-day.hol{background:#FFF8E6}
.cal-day.out .n{color:#B6BDC6}
.cal-day.today .n{background:var(--red);color:#fff;border-radius:11px;padding:0 7px}
.cal-day .dh{display:flex;align-items:center;gap:5px;min-width:0;height:22px}
.cal-day .n{display:inline-block;font-size:13px;font-weight:650;line-height:22px;flex-shrink:0}
.cal-day .hn{flex:1;min-width:0;font-size:11px;color:#8a6d1d;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-bar{position:relative;z-index:2;margin:1px 3px;padding:0 7px;height:21px;line-height:21px;border-radius:5px;color:#fff;font-size:12px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;min-width:0;border:0;text-align:left}
.cal-bar.pend{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 6px,transparent 6px 12px);opacity:.82}
.cal-bar:hover{filter:brightness(1.08)}
.cal-more{position:relative;z-index:2;margin:0 6px;font-size:12px;color:var(--blue2);font-weight:650;cursor:pointer;background:none;border:0;text-align:left;padding:0}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:13px}
.legend span{display:inline-flex;align-items:center}
.agenda .day{padding:10px 0;border-bottom:1px solid var(--line2)}
.agenda .day:last-child{border-bottom:0}
.agenda .dh{font-weight:700;margin-bottom:6px}
.agenda .dh .muted{font-weight:500}

/* modal / sheet */
#modal{position:fixed;inset:0;z-index:600;background:rgba(13,27,62,.45);display:none;align-items:center;justify-content:center;padding:16px}
#modal.on{display:flex}
#modal .box{background:#fff;border-radius:12px;width:min(640px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25)}
#modal .box.wide{width:min(900px,100%)}
#modal .mh{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
#modal .mh h2{flex:1;min-width:0;font-size:17px;overflow-wrap:anywhere}
#modal .mb{padding:16px 18px;overflow:auto;overflow-wrap:anywhere;min-width:0;flex:1 1 auto}
#modal .mf{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
#modal .mf:empty{display:none}
#modal .x{flex:0 0 38px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;color:var(--ink)}
#modal .x svg{display:block}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:700;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);display:none;max-width:calc(100vw - 32px)}
#toast.on{display:block} #toast.err{background:var(--red)}
.foot{margin-top:36px;text-align:center;color:var(--muted);font-size:12px}
.help h3{margin:16px 0 4px;color:var(--ink);font-size:15px} .help h3:first-child{margin-top:0}
.help ol{margin:0;padding-left:20px} .help li{margin:4px 0}
.done{text-align:center;padding:28px 16px}
.done .ok{display:inline-flex;width:56px;height:56px;border-radius:50%;background:#E3F1E7;color:var(--green);align-items:center;justify-content:center;margin-bottom:10px}
.phone-only{display:none}

.tbl td.act .btn{margin:2px 0}
@media (max-width:1180px){
  .card:has(> .tbl.cards.wide){padding:0;background:transparent;border:0}
  .tbl.cards.wide,.tbl.cards.wide tbody,.tbl.cards.wide tr,.tbl.cards.wide td{display:block;width:100%}
  .tbl.cards.wide thead{display:none}
  .tbl.cards.wide tr{border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:#fff;padding:6px 12px}
  .tbl.cards.wide td{border:0;padding:5px 0;display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:right;min-width:0;overflow-wrap:anywhere}
  .tbl.cards.wide td::before{content:attr(data-l);color:var(--muted);font-size:12px;font-weight:650;flex-shrink:0;text-align:left}
  .tbl.cards.wide td.first{font-weight:700;font-size:15px;justify-content:flex-start;text-align:left}
  .tbl.cards.wide td.first::before,.tbl.cards.wide td.act::before{display:none}
  .tbl.cards.wide td.act{justify-content:flex-end;flex-wrap:wrap;gap:8px}
  .tbl.cards.wide td:empty{display:none}
}
@media (max-width:1000px){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
  /* tables become stacked rows: never wider than the screen, never a sideways scroll */
  .card:has(> .tbl.cards){padding:0;background:transparent;border:0}
  .tbl.cards,.tbl.cards tbody,.tbl.cards tr,.tbl.cards td{display:block;width:100%}
  .tbl.cards thead{display:none}
  .tbl.cards tr{border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:#fff;padding:6px 12px}
  .tbl.cards tr.click:hover td{background:transparent}
  .tbl.cards td{border:0;padding:5px 0;display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:right;min-width:0;overflow-wrap:anywhere}
  .tbl.cards td::before{content:attr(data-l);color:var(--muted);font-size:12px;font-weight:650;flex-shrink:0;text-align:left}
  .tbl.cards td.first{font-weight:700;font-size:15px;justify-content:flex-start;text-align:left}
  .tbl.cards td.first::before{display:none}
  .tbl.cards td.act{justify-content:flex-end;flex-wrap:wrap}
  .tbl.cards td.act::before{display:none}
  .tbl.cards td:empty{display:none}
  .tbl.cards td.num{text-align:right}
  .tbl.cards input.i{max-width:150px}
}
@media (max-width:760px){
  #bar{padding:0 10px;height:46px;gap:6px}
  #bar .brand span,#bar .who{display:none}
  #bar .brand{font-size:15px}
  #bar .btn{width:84px;height:40px;font-size:13px;padding:0 6px}
  #nav{top:46px;padding:0;display:grid;grid-template-columns:repeat(var(--navn,3),minmax(0,1fr))}
  #nav a{height:42px;padding:0 4px;font-size:13.5px}
  main{padding:12px 10px 40px}
  h1{font-size:20px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .tile{padding:10px}
  .tile .v{font-size:20px}
  .tile .k{font-size:11px}
  .g2,.g3,.fgrid{grid-template-columns:1fr}
  .head{flex-direction:column;align-items:stretch}
  .head .actions .btn{flex:1 1 calc(50% - 4px)}
  .filters label.f{flex:1 1 calc(50% - 4px)}
  .filters .btn{flex:1 1 calc(50% - 4px)}
  .btn{height:44px} .btn.s{height:40px;padding:0 12px}
  .seg button,.seg a{min-height:40px}
  input.i,select.i{height:44px}
  .tbl input.i{height:40px}
  .item{flex-wrap:wrap}
  .item .acts{width:100%;justify-content:flex-end}
  .item .acts .btn{flex:1 1 0}
  .cal-top h2{order:-1;flex:1 1 100%;text-align:left;min-width:0}
  .cal-dow div{padding:6px 2px;font-size:11px}
  .cal-week{min-height:74px}
  .cal-day{padding:3px 3px 4px}
  .cal-day .n{font-size:12px}
  .cal-day .hn{display:none}
  .cal-bar{margin:1px 1px;padding:0 4px;font-size:10.5px;height:18px;line-height:18px;border-radius:4px}
  #modal{padding:0;align-items:stretch}
  #modal .box,#modal .box.wide{width:100%;max-height:100vh;height:100%;border-radius:0}
  #modal .mf .btn{flex:1 1 calc(50% - 4px);min-width:0}
  .savebar .btn{flex:1 1 calc(50% - 4px)}
  .bulk .btn{flex:1 1 calc(50% - 4px)}
  .phone-only{display:block}
  .desk-only{display:none !important}
}
@media (pointer:coarse){ .link{min-height:40px} }
@media print{ #bar,#nav,.actions,.savebar,.btn,#toast{display:none !important} main{max-width:none;padding:0} .card{border:0;padding:0} }

/* folded long lists */
.folded{display:none !important}
.foldbtn{display:flex;align-items:center;width:100%;min-height:42px;margin-top:8px;padding:0 12px;background:var(--soft);border:1px dashed var(--line);border-radius:8px;color:var(--blue2);font-weight:650;cursor:pointer;text-align:left}
.foldbtn:hover{border-color:var(--blue2);background:#EEF4FB}
.card:has(> .tbl) > .foldbtn{width:calc(100% - 20px);margin:8px 10px 10px}
/* back to the top */
.totop{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:550;width:48px;height:48px;border-radius:50%;border:0;background:var(--navy);color:#fff;box-shadow:0 8px 22px rgba(13,27,62,.35);display:none;align-items:center;justify-content:center;cursor:pointer;padding:0}
.totop.on{display:flex}
.totop:hover{background:var(--navy2)}
.totop svg{display:block}
/* bulk actions stay under the sticky header */
.bulk{position:sticky;top:var(--stack,95px);z-index:300;box-shadow:0 4px 10px rgba(13,27,62,.06)}
@media (max-width:760px){ .totop{right:12px;bottom:calc(14px + env(safe-area-inset-bottom))} }
@media print{ .totop,.foldbtn{display:none !important} .folded{display:revert !important} }