@font-face{font-family:'Geist';src:url('/fonts/Geist-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Geist';src:url('/fonts/Geist-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Geist';src:url('/fonts/Geist-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Geist';src:url('/fonts/Geist-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Geist';src:url('/fonts/Geist-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
/* DRIV-standard tokens ärvs från driv.css (länkad ovan): --accent(orange)/--bg/--muted/
   --line/--ok/--warn/--accent-soft/--font. Här bara legacy-alias så staff-appens
   befintliga klasser (.card/.btn/.field) mappar mot DRIV-tokens. */
:root{
  --fg:var(--ink);
  --card:var(--surface);
  --shadow:var(--shadow-md);
  --r:var(--r-lg);
  --warn:var(--danger); /* staffs legacy --warn = fel/destruktivt → DRIV röd danger, ej gul warn */
}
/* Ljust/mörkt läge sköts av /shared/theme.js (html.dark) + driv.css-tokens — inga
   hårdkodade vita/gråa hex här längre (v2, 2026-09-04, sno från coach-appen). */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;font-size:14.5px;line-height:1.45}
h1,h2,h3{font-weight:600;letter-spacing:-.02em}
button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,textarea{font-family:inherit;font-size:16px;color:var(--fg)}
.i{width:1.2em;height:1.2em;vertical-align:-.2em;display:inline-block;flex:none}
/* App-shell (från coach.css): #app fyller exakt skärmen och scrollar ALDRIG självt.
   .view scrollar internt, navet är ett vanligt flex-barn längst ner — så navet kan
   aldrig lossna under iOS momentum-scroll. Receptionen (.rx direkt i #app) och
   login-vyn kör vanlig sidscroll. */
#app{max-width:720px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
#app:has(> .rx),#app:has(> .login){height:auto;min-height:100dvh;overflow:visible}
/* DRIV splash / loading screen (kopia av coach.css) */
#splash{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:var(--splash-bg,var(--bg));padding:env(safe-area-inset-top) 18px env(safe-area-inset-bottom);
  transition:opacity .45s ease,visibility .45s ease}
#splash.hide{opacity:0;visibility:hidden;pointer-events:none}
#splash.gone{display:none}
.splash-mark{font-family:var(--font);font-weight:700;font-size:clamp(54px,17vw,78px);letter-spacing:-.045em;line-height:1;
  color:var(--splash-accent,var(--accent));transform:skewX(-6deg);animation:splashMark .6s cubic-bezier(.2,.7,.2,1) both}
.splash-mark i{color:var(--splash-ink,var(--ink));font-style:normal}
.splash-mark.svg,.splash-mark:has(.wm){transform:none}
.splash-mark .wm{height:clamp(46px,14vw,66px);vertical-align:middle}
.splash-tag{font-family:var(--font);font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--splash-muted,var(--muted));
  animation:splashUp .6s .08s cubic-bezier(.2,.7,.2,1) both}
.splash-load{position:relative;width:36px;height:4px;border-radius:999px;overflow:hidden;margin-top:2px;
  background:color-mix(in srgb,var(--splash-accent,var(--accent)) 16%,transparent);animation:splashUp .6s .16s both}
.splash-load::after{content:'';position:absolute;inset:0;width:45%;border-radius:999px;
  background:var(--splash-accent,var(--accent));animation:splashBar 1.1s ease-in-out infinite}
@keyframes splashMark{from{opacity:0;transform:skewX(-6deg) translateY(10px)}to{opacity:1;transform:skewX(-6deg)}}
@keyframes splashMarkFlat{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.splash-mark.svg{animation-name:splashMarkFlat}
@keyframes splashUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes splashBar{0%{transform:translateX(-130%)}100%{transform:translateX(330%)}}
@media (prefers-reduced-motion:reduce){.splash-mark,.splash-tag,.splash-load{animation:none}.splash-load::after{animation:none;width:100%}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.view{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding:16px 18px calc(16px + env(safe-area-inset-bottom));animation:rise .3s cubic-bezier(.2,.7,.2,1) both;min-width:0}
.topbar{padding:18px 18px 0;display:flex;justify-content:space-between;align-items:center}
.brand{font-weight:600;font-size:17px;letter-spacing:-.015em}
.brand small{display:block;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.kicker{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:6px}
.card{background:var(--card);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:var(--r);padding:16px;margin-bottom:10px;box-shadow:var(--shadow)}
.btn{display:inline-block;padding:12px 20px;border:none;border-radius:999px;background:var(--accent);color:#fff;font-size:14.5px;font-weight:600;text-align:center;transition:transform .12s,opacity .12s;letter-spacing:-.01em}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5}
.btn.full{width:100%}
.btn.small{padding:8px 15px;font-size:13px}
.btn.ghost{background:none;color:var(--muted);font-weight:500;padding:6px 10px;font-size:12.5px}
.btn.secondary{background:transparent;color:var(--fg);border:1.5px solid var(--line)}
.btn.danger{background:var(--danger);color:var(--danger-ink)}
.muted{color:var(--muted);font-size:13px}
.field{margin-bottom:13px}
.field label{display:block;font-size:11px;font-weight:600;margin-bottom:5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);transition:border-color .15s}
.field select,.dsi{-webkit-text-fill-color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{min-height:90px;resize:vertical}
.login{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 28px}
.login h1{font-size:36px;font-weight:300;letter-spacing:-.03em;margin-bottom:8px;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.login-brand{display:inline-flex;align-items:center;gap:7px;text-decoration:none;margin-bottom:6px;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.login-brand .wm{height:34px}
.login-brand b{font-size:38px;font-weight:700;font-style:italic;letter-spacing:-.045em;color:var(--fg)}
.login-brand b i{font-style:italic;color:var(--accent)}
.login-brand span{font-size:38px;font-weight:600;font-style:italic;letter-spacing:-.045em;color:var(--muted)}
.login .sub{color:var(--muted);margin-bottom:28px}
.loginlogo{width:76px;height:auto;margin:0 auto 14px;display:block;animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.login .sub:first-of-type{text-align:center}
.applogo{height:30px;width:auto;max-width:40vw;object-fit:contain;position:absolute;left:50%;top:16px;transform:translateX(-50%)}
.topbar{position:relative;min-height:52px}
.topbar > .muted{margin-left:auto}
/* Skrollar ut i skärmkanten — se samma regel i coach/coach.css. Vyns sidopadding
   är 18px; negativ marginal ut, samma padding in, så innehållet står stilla. */
.tabs{display:flex;gap:6px;overflow-x:auto;margin:0 -18px 12px;padding:0 18px 2px;
  scroll-padding:0 18px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{padding:9px 13px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-size:13px;font-weight:600;white-space:nowrap;transition:all .15s;color:var(--fg)}
.tabs button.active{background:var(--ink);color:var(--surface);border-color:var(--ink)}
/* Segmentkontroll (från coach.css): två lägen som utesluter varandra — tumme i spår. */
.seg{display:flex;gap:3px;background:var(--line);border-radius:12px;padding:3px;margin:0 0 12px}
.seg button{flex:1;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;white-space:nowrap;letter-spacing:-.01em;transition:background .18s,color .18s}
.seg button.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.09)}
@media (min-width:900px){.seg{max-width:420px}}
.msact{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mbtn{padding:7px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-size:12.5px;font-weight:600;color:var(--fg)}
.mbtn.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.dsl{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:10px 0 4px}
.dsi{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-size:15px;color:var(--fg)}
.mpf-chk{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--fg)}
.tabs button small{display:block;font-size:10px;font-weight:500;opacity:.65}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.chips button{padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-size:12px;font-weight:600;color:var(--muted);transition:all .15s}
.chips button.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pass{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:var(--r);padding:14px 16px;margin-bottom:8px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.pass.mine::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.pass.cancelled{opacity:.55}
.pass.cancelled .t1{text-decoration:line-through}
.pass .time{min-width:52px;text-align:right}
.pass .time b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.pass .time span{font-size:11.5px;color:var(--muted)}
.pass .t1{font-size:15px;font-weight:600;letter-spacing:-.01em}
.pass .t2{font-size:12.5px;color:var(--muted);margin-top:2px}
.pass .cap{margin-left:auto;text-align:right;flex:none}
.pass .cap b{display:block;font-size:14px;font-weight:600}
.pass .cap span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
/* .pill + ok/warn/gray är kanoniska i driv.css (color-mix, fungerar i mörkt läge) */
.pill.acc{background:var(--accent-soft);color:var(--accent)}
.pill.warn{background:color-mix(in srgb,var(--warn) 16%,var(--surface));color:var(--warn)}
.center{text-align:center;padding:44px 16px;color:var(--muted)}
.daysep{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:18px 2px 8px}
.statrow{display:flex;gap:10px;margin-bottom:14px}
.stat{flex:1;background:var(--card);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.stat .n{font-weight:300;font-size:30px;letter-spacing:-.03em;line-height:1.05}
.stat .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-top:4px}
.listrow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:15px 4px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;font-size:15px;font-weight:500;letter-spacing:-.01em;transition:opacity .12s;color:var(--fg)}
.listrow:active{opacity:.6}
.lr{display:inline-flex;align-items:center;gap:12px}
.statbtn{border:1px solid color-mix(in srgb,var(--line) 60%,transparent);text-align:left;cursor:pointer;transition:transform .12s}
.statbtn:active{transform:scale(.98)}
.doorrow{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.doorrow:last-of-type{border-bottom:none}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.dot.open{background:var(--ok)} .dot.closed{background:var(--warn)} .dot.unknown{background:var(--line)}
.doorrow .doorname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:14px}
.doorrow .btn.small{flex:none;width:74px;padding-left:0;padding-right:0;white-space:nowrap}
.btn.ghostb{background:transparent;color:var(--fg);border:1.5px solid var(--line)}
.monthnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.monthnav h2{font-size:20px}
.monthnav button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);font-size:17px;color:var(--fg)}
.hrow{display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.hrow .d{min-width:74px;font-weight:600;font-size:13.5px}
.hrow .h{font-weight:600;font-size:15px;min-width:44px;text-align:right}
.hrow .note{flex:1;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrow .del{background:none;border:none;color:var(--warn);font-size:17px;padding:4px 8px}
.addrow{display:grid;grid-template-columns:1.2fr .7fr 1.4fr auto;gap:8px;margin-top:14px}
.addrow input{padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:14px;min-width:0}
.addrow input:focus{outline:none;border-color:var(--accent)}
.addrow button{border:none;border-radius:12px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;padding:0 16px}
.avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:600;color:var(--accent)}
.profhead{display:flex;gap:16px;align-items:center;margin-bottom:18px}
/* Navet är ett flex-barn längst ner i app-shellen (INTE position:fixed på mobil) —
   därför kan det aldrig lossna eller fastna under iOS momentum-scroll. Desktop: sidomeny. */
nav{flex-shrink:0;position:relative;display:flex;justify-content:space-around;padding:10px 4px calc(10px + env(safe-area-inset-bottom));margin:0 auto;width:100%;z-index:5;isolation:isolate}
nav::before{content:'';position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
nav button{background:none;border:none;font-size:10.5px;font-weight:600;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 10px;position:relative;transition:color .15s}
nav button.active{color:var(--fg)}
.badge{position:absolute;top:-3px;right:0;background:var(--accent);color:#fff;font-size:10px;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;font-weight:700}
nav button.active::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent);position:absolute;bottom:-7px}
nav button .i{width:22px;height:22px}
/* Toast i toppen (som coach-appen) — bottenkanten är navets och tangentbordets. */
#toast{position:fixed;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%) translateY(-8px);background:var(--ink);color:var(--surface);padding:11px 22px;border-radius:999px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:all .25s;z-index:1200;max-width:90%;box-shadow:0 8px 30px -6px rgba(0,0,0,.3)}
#toast.show{opacity:1;transform:translateX(-50%)}
.spin{width:22px;height:22px;border:2.5px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;margin:40px auto}
@keyframes sp{to{transform:rotate(360deg)}}
/* Dagens planering på passet — instruktörens ruta i schemat, syns för medlemmarna */
.notepanel{margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed color-mix(in srgb,var(--line) 80%,transparent)}
.notepanel .dsi{font-size:14px;line-height:1.45;resize:vertical;font-family:inherit}
.np-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.attends{margin-top:10px;padding-top:10px;border-top:1px dashed color-mix(in srgb,var(--line) 80%,transparent);animation:rise .25s cubic-bezier(.2,.7,.2,1) both}
.att{display:flex;gap:8px;align-items:center;font-size:13.5px;padding:3px 0}
.att .n{color:var(--muted);font-size:11.5px;min-width:18px;text-align:right}
.att.q{color:var(--muted)}
.att .del{background:none;border:none;color:var(--warn);font-size:16px;padding:2px 8px;line-height:1}
.att.srow{width:100%;background:none;border:none;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);text-align:left;padding:9px 0;font-size:14px}
.att.srow:active{opacity:.6}
.addinp{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:14px;margin-bottom:6px}
.addinp:focus{outline:none;border-color:var(--accent)}
.checkbtn{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:var(--surface);flex:none;margin-top:2px;transition:all .15s}
.checkbtn:active{transform:scale(.9);border-color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,var(--surface))}
.roomrow{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;background:none;border:none;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);padding:14px 2px;text-align:left;transition:opacity .12s}
.roomrow:last-child{border-bottom:none}
.roomrow:active{opacity:.6}
.roomrow .t1{font-size:15px;font-weight:600;letter-spacing:-.01em}
.roomrow .t2{font-size:12.5px}
.unread{background:var(--accent);color:#fff;font-size:11px;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px;font-weight:700;flex:none}
.chat{display:flex;flex-direction:column;gap:8px;padding-bottom:66px}
.msg{max-width:80%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.4}
.msg.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.msg.them{align-self:flex-start;background:var(--card);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-bottom-left-radius:5px;box-shadow:var(--shadow)}
.msg .t{display:block;font-size:10px;opacity:.55;margin-top:2px}
.chatbar{position:fixed;bottom:calc(72px + env(safe-area-inset-bottom));left:0;right:0;max-width:720px;margin:0 auto;display:flex;gap:8px;padding:8px 18px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:4}
.chatbar input{flex:1;padding:11px 15px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink)}
.chatbar input:focus{outline:none;border-color:var(--accent)}
.chatbar button{width:44px;height:44px;border-radius:50%;border:none;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}

/* Hubben (Mer) som rutor — från coach-appens Hem (.hubgrid/.hubtile) */
.section-title{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600;margin:20px 0 8px}
.hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.hubgrid[hidden]{display:none}
.hubtile{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:13px 12px;background:var(--card);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:14px;box-shadow:var(--shadow);color:var(--fg);font-size:12.5px;font-weight:500;letter-spacing:-.01em;line-height:1.25;text-align:left;transition:transform .12s,border-color .12s}
.hubtile:active{transform:scale(.97)}
.hubtile__i{display:flex;color:var(--accent-text)}
.hubtile__i .i{width:21px;height:21px}
.hubtile__ext .i{width:11px;height:11px;vertical-align:-1px;opacity:.6}
/* Chevron på en rad som fäller ut mer under sig */
.listrow .chev{display:inline-block;color:var(--muted);font-size:19px;line-height:1;margin-left:8px;vertical-align:-1px;transition:transform .18s ease}
.listrow[aria-expanded="true"] .chev{transform:rotate(90deg);color:var(--ink)}
.topbar-r{display:flex;align-items:center;gap:10px;flex:none}
/* Muspekare: appen är byggd för touch — med mus ska rader och kort svara. (hover:hover)
   håller touch-enheter fria från klibbig hover efter tryck. */
@media (hover:hover){
  .listrow:hover,.roomrow:hover{background:color-mix(in srgb,var(--accent-soft) 42%,transparent);opacity:1}
  .hubtile:hover{border-color:var(--accent)}
  .tabs button:hover:not(.active){border-color:var(--accent);color:var(--accent)}
  .chips button:hover:not(.active){border-color:var(--accent);color:var(--accent)}
  .btn:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 88%,#000)}
  .btn.secondary:hover:not(:disabled),.btn.ghostb:hover:not(:disabled){background:var(--surface-2);border-color:var(--muted)}
  .btn.ghost:hover:not(:disabled){background:transparent;color:var(--fg)}
  .mbtn:hover{border-color:var(--accent);color:var(--accent)}
  .statbtn:hover{border-color:var(--accent)}
  .viewback:hover{opacity:.7}
}

/* Kundkortets huvud */
.memhead{display:flex;gap:12px;align-items:center;min-width:0}
.memhead .avatar{width:46px;height:46px;font-size:16px;flex:none;border-radius:50%}
.memhead__n{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.memhead__c{margin-top:3px;font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
/* Bred modal för list-innehåll (kvitto, Vem?) */
.ui-modal.ui-wide{max-width:560px}
.ui-sheet .listrow,.ui-modal .listrow{padding:12px 4px}
/* Ekonomi: månadsstaplar + varningston på siffror */
.stat.fin-warn .n{color:var(--danger)}
/* Nio nyckeltal: tre per rad på desktop, två per rad på mobil */
.fin .statrow{flex-wrap:wrap;gap:8px}
.fin .stat{flex:1 1 calc(50% - 4px);min-width:0}
.fin .stat .n{font-size:24px}
.fin .stat .l{text-transform:none;letter-spacing:0;font-size:11.5px;line-height:1.3}
@media (min-width:900px){.fin .stat{flex-basis:calc(33.33% - 6px)}.fin .stat .n{font-size:28px}}
.fin-bars{display:flex;gap:8px;align-items:flex-end;height:150px}
.fin-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.fin-bar__v{font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:4px}
.fin-bar__b{width:100%;flex:1;display:flex;align-items:flex-end;border-radius:8px;background:color-mix(in srgb,var(--line) 40%,transparent)}
.fin-bar__b>div{width:100%;border-radius:8px;background:color-mix(in srgb,var(--accent) 45%,var(--line));min-height:3px;transition:height .3s}
.fin-bar.is-cur .fin-bar__b>div{background:var(--accent)}
.fin-bar__l{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:6px}
.fin-bar__f{font-size:10px;color:var(--danger);height:13px;line-height:13px}
/* Hemskärmsbannern bär z-index 9999 inline — under arken (ui-ov 1100) och
   dialogerna, annars täcker den knappen i varje ark på mobil. */
#a2hs{z-index:800!important}

/* ===================== Desktop ≥900 px =====================
   Mobilen ska vara PIXEL-IDENTISK — allt desktop bor bakom denna media query.
   Samma mönster som coach-appen (public/coach/coach.css): bottom-nav → sidomeny.
   OBS flex-barn-fällan: .view/.topbar är flex-barn i #app — margin auto ENSAMT
   får dem att krympa till innehållsbredd; width:100% måste med.
   Hovrar mörkas med color-mix på --accent/--line — ALDRIG --accent-deep
   (tenant-temat sätter bara --accent/--accent-soft/--bg/--fg). */
@media (min-width: 900px) {
  /* Sidomenyn finns bara inloggad (shell) — login-vyn behåller sin smala kolumn */
  #app { height: auto; min-height: 100dvh; overflow: visible; }
  .view { overflow: visible; -webkit-overflow-scrolling: auto; }
  #app:has(> nav) { max-width: none; margin: 0; padding-left: 224px; }
  nav {
    position: fixed; top: 0; bottom: 0; right: auto; left: 0; width: 224px; height: 100vh; max-width: none; margin: 0;
    flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 2px;
    padding: 22px 12px calc(16px + env(safe-area-inset-bottom));
    background: var(--card); z-index: 20; overflow-y: auto;
  }
  /* Sidomenyn bär wordmarken i toppen — samma som coach-appen */
  nav::before { content: 'DRIV'; display: block; position: static; inset: auto; z-index: auto; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-top: none; border-right: none; font-family: var(--font); font-weight: 800; letter-spacing: .02em; font-size: 19px; color: var(--accent-text); padding: 2px 14px 18px; }
  nav { border-right: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
  nav button {
    flex-direction: row; justify-content: flex-start; gap: 11px;
    width: 100%; padding: 11px 13px; border-radius: 12px; font-size: 14px;
  }
  nav button:hover { color: var(--fg); background: color-mix(in srgb, var(--line) 30%, transparent); }
  nav button.active { background: var(--accent-soft); color: var(--fg); }
  nav button.active::after { display: none; }
  nav button .i { width: 20px; height: 20px; }
  .topbar, .view { width: 100%; max-width: 1060px; margin-left: auto; margin-right: auto; }
  .topbar { padding: 20px 32px 0; }
  .view { padding: 18px 32px 56px; }
  .tabs { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .listrow:hover, .roomrow:hover { opacity: .7; }
  #toast { left: calc(50% + 112px); }
  .chatbar { left: 224px; right: 0; max-width: none; bottom: 0; padding: 10px 32px calc(10px + env(safe-area-inset-bottom)); }
  .chat { padding-bottom: 74px; }
  #a2hs { display: none !important; } /* !important: elementet bär inline-styles (cssText) */
}

/* === Schema: veckovy + passdialog + schemaadmin (desktop, steg 2) ===
   Renderas bara av JS ≥900px; mobilen kör dag-listan som förut. */
@media (min-width: 900px) {
  .view:has(.wk-grid) { max-width: 1320px; } /* veckan behöver mer bredd än övriga vyer */
  .wk-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
  .wk-bar .mbtn { margin-left: auto; }
  .wk-nav { display: flex; gap: 6px; }
  .wk-nav button { min-width: 34px; height: 34px; border-radius: 999px; border: 1.5px solid var(--line);
    background: var(--surface); font-size: 14px; font-weight: 600; color: var(--fg); padding: 0 10px; }
  .wk-nav button:hover { border-color: var(--accent); color: var(--accent); }
  .wk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; align-items: start; }
  .wk-day { background: var(--card); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    border-radius: 12px; padding: 9px 8px; min-height: 120px; }
  .wk-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .wk-head { font-size: 12px; margin-bottom: 7px; letter-spacing: -.01em; }
  .wk-head b { font-weight: 700; }
  .wk-items { display: flex; flex-direction: column; gap: 5px; }
  .wk-none { color: var(--muted); font-size: 12px; padding: 2px; opacity: .6; }
  .wk-chip { display: block; width: 100%; text-align: left; background: var(--bg);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-left: 3px solid var(--muted);
    border-radius: 8px; padding: 6px 7px; font: inherit; color: var(--fg); transition: border-color .12s, background .12s; }
  .wk-chip:hover { border-color: var(--accent); }
  .wk-chip .wk-t { display: block; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
  .wk-chip .wk-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 11.5px; line-height: 1.3; margin-top: 1px; }
  .wk-chip .wk-cap { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 700;
    background: color-mix(in srgb, var(--line) 45%, transparent); color: var(--muted);
    border-radius: 999px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
  .wk-chip .wk-cap.is-full { background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn); }
  .wk-chip--mine { border-left-color: var(--accent); background: var(--accent-soft); }
  .wk-chip--off { opacity: .55; }
  .wk-chip--off .wk-title { text-decoration: line-through; }

  .dlg-overlay { position: fixed; inset: 0; background: rgba(20, 16, 12, .38); z-index: 50;
    display: flex; align-items: flex-start; justify-content: center; padding: 7vh 20px 20px; }
  .dlg { background: var(--card); border-radius: 18px; box-shadow: 0 24px 60px -18px rgba(0,0,0,.35);
    width: min(560px, 100%); max-height: 84vh; overflow-y: auto; padding: 20px 22px;
    animation: rise .22s cubic-bezier(.2,.7,.2,1) both; }
  .dlg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
  .dlg-x { background: none; border: none; font-size: 24px; line-height: 1; color: var(--muted); padding: 2px 8px; flex: none; }
  .dlg-x:hover { color: var(--fg); }
  .dlg-manage { margin-top: 16px; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent); }
  .dlg-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .dlg-row .dsi { width: auto; }
}

/* === Medlemmar: tabellvy + filterrad + detaljdialog (desktop, steg 3) ===
   Renderas bara av JS ≥900px; mobilen kör sök/listan som förut. */
@media (min-width: 900px) {
  .mem-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
  .mem-bar .muted { margin-left: auto; font-variant-numeric: tabular-nums; }
  /* Rundade hörn kräver wrappern — border-radius biter inte på collapse-tabeller */
  .mtab-wrap { background: var(--card); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
  .mtab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .mtab th { text-align: left; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted); padding: 11px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
  .mtab td { padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
    vertical-align: top; }
  .mtab tbody tr { cursor: pointer; transition: background .12s; }
  .mtab tbody tr:hover { background: color-mix(in srgb, var(--line) 22%, transparent); }
  .mtab tbody tr:last-child td { border-bottom: none; }
  .mtab .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
}

/* === Reception (steg 3, 2026-09: ren dashboard) ===
   "Super enkel" (Gustav): ingen chat här — den bor i teamchat. En lugn,
   luftig kolumn (max 900 px) med sökfältet som hjälte högst upp (samma fält
   på mobil och desktop), sedan Inne just nu, Kräver uppmärksamhet (bara vid
   varningar), Bemanning idag och hopfällbara Liveflöde/Dagens pass.
   Kundkort öppnas alltid som överlägg (.dlg) — ingen permanent högerkolumn. */
.rx { display: flex; flex-direction: column; flex: 1; width: 100%; max-width: 900px;
  margin: 0 auto; padding: 14px 18px calc(48px + env(safe-area-inset-bottom));
  animation: rise .3s cubic-bezier(.2,.7,.2,1) both; }
.rx-bar { width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; gap: 10px; }
.rx-bar .brand { min-width: 0; }
.rx-doors { flex: none; margin-left: auto; }
.rx-who { flex: none; font-size: 13px; padding: 8px 16px; border-color: var(--accent); color: var(--accent); }
/* Hjältesöket: stort, lugnt fält högst upp — träffarna landar i #rx-results under */
.rx-search { margin-bottom: 18px; }
.rx-search input { width: 100%; box-sizing: border-box; padding: 15px 20px; border: 1.5px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 16px;
  box-shadow: var(--shadow); }
.rx-search input:focus { outline: none; border-color: var(--accent); }
#rx-results { margin: -8px 0 14px; }
#rx-results:empty { margin: 0; }
.rx-kicksub { font-weight: 400; text-transform: none; letter-spacing: 0; }
/* Inne just nu: en stor lugn siffra per hus, stationens eget hus markerat;
   klick fäller ut namnen under raden */
.rx-presrow { gap: 8px; margin-bottom: 12px; }
.rx-presrow .stat { padding: 12px 14px; }
.rx-presrow .stat .n { font-size: 26px; }
.rx-presrow .stat.rx-mine { border-color: var(--accent); }
.rx-presrow .statbtn.active { background: var(--accent-soft); }
.rx-feedrow { display: flex; gap: 10px; align-items: flex-start; width: 100%; background: none; border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  padding: 10px 2px; text-align: left; font-size: 14px; color: var(--fg); }
.rx-feedrow:last-child { border-bottom: none; }
button.rx-feedrow { cursor: pointer; }
button.rx-feedrow:active { opacity: .6; }
.rx-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--line); }
.rx-fr { flex: 1; min-width: 0; line-height: 1.35; }
.rx-fr .muted { display: block; font-size: 12px; }
.rx-ft { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; }
.rx-warncard { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
/* Liveflöde + dagens pass hopfällda */
.rx-fold { flex: none; margin-top: 18px; }
.rx-fold > summary { cursor: pointer; list-style: none; display: block; }
.rx-fold > summary::-webkit-details-marker { display: none; }
.rx-fold > summary::after { content: '›'; display: inline-block; margin-left: 6px; transition: transform .15s; }
.rx-fold[open] > summary::after { transform: rotate(90deg); }
/* Bemanning idag: en rad per hus */
.rx-strow { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; font-size: 13.5px; line-height: 1.4;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.rx-strow:last-child { border-bottom: none; }
.rx-stsite { flex: none; min-width: 84px; font-weight: 600; }
.rx-comms { margin: 6px 0 20px; }
.rx-commshead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.rx-commshead .kicker { margin:0; }
.rx-commshead .chips { margin:0; flex-wrap:nowrap; overflow-x:auto; }
.rx-commsearch { width:100%; margin-bottom:8px; }
.rx-commlist { padding:2px 14px; }
.rx-commrow { width:100%; border:0; border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  background:none; color:inherit; display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:10px;
  align-items:center; text-align:left; padding:11px 2px; font:inherit; cursor:pointer; }
.rx-commrow:last-child { border-bottom:0; }
.rx-commrow.missed b { color:var(--danger); }
.rx-commic { font-size:9px; font-weight:750; letter-spacing:.08em; color:var(--muted); }
.rx-commbody { min-width:0; display:flex; flex-direction:column; gap:2px; }
.rx-commbody b,.rx-commbody span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rx-commbody span,.rx-commtime { color:var(--muted); font-size:12px; }
.rx-commtime { align-self:start; padding-top:2px; }
.rx-timeline { border-left:2px solid var(--line); padding:3px 0 12px 12px; margin-left:4px; }
.rx-timeline.outbound { border-color:var(--accent); }
.rx-timeline b { font-size:13px; }
.rx-timeline > span { float:right; color:var(--muted); font-size:11px; }
.rx-timeline p { margin:5px 0 0; white-space:pre-wrap; font-size:13px; line-height:1.4; }
/* Onboarding-kortets steg (.ob-*) — används INTE just nu: onboarding.js är
   oanvänd tills vidare (se filens header). Stilarna ligger kvar för att
   korten ska kunna återinföras utan CSS-arbete. */
.ob-pnr { display: flex; gap: 8px; }
.ob-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
@media (max-width: 899.98px) { .ob-2col { grid-template-columns: 1fr; } }
.ob-msg { font-size: 13px; line-height: 1.45; padding: 10px 12px; border-radius: 12px;
  background: var(--card); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); margin-bottom: 8px; }
.ob-msg.err { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.ob-msg.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.ob-person { margin-bottom: 10px; }
.ob-rich button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.ob-rich button small { font-weight: 400; font-size: 11px; opacity: .75; }
.ob-sum { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; }
.ob-donetitle { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
/* Access-boxen på kundkortet: husen som klickbara piller */
button.accpill { border: 0; cursor: pointer; font-family: inherit; padding: 4px 11px; }
button.accpill:hover { opacity: .75; }
/* Dialogen är global sedan Vem?/PIN/kvitto/betallänk också används på mobil
   (receptionen staplad på telefon) — desktopreglerna ovan ligger i ≥900px. */
.dlg-overlay { position: fixed; inset: 0; background: rgba(20, 16, 12, .38); z-index: 50;
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 12px 12px; }
.dlg { background: var(--surface); border-radius: 22px; box-shadow: 0 20px 60px -16px rgba(27,24,20,.4);
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto; padding: 18px 18px; animation: uipop .24s cubic-bezier(.2,.8,.2,1) both; }
.dlg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.dlg-x { background: none; border: none; font-size: 24px; line-height: 1; color: var(--muted); padding: 2px 8px; flex: none; }
.dlg-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (min-width: 900px) {
  /* Receptionsvyn saknar nav — :has(> nav)-regeln ovan tar aldrig vid här.
     Dashboard-kolumnen stannar på 900 px även på iMac. */
  #app:has(> .rx) { max-width: none; margin: 0; }
  button.rx-feedrow:hover { opacity: .7; }
  .rx { padding: 18px 32px 56px; }
}

/* Kundkort v2 (2026-09-06) */
.memhead__a{margin:10px 0 14px}
.memsec__t{display:flex;justify-content:space-between;align-items:center;gap:8px}
.memstats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.memstats>div{display:grid;gap:2px;text-align:center}
.memstats .num{font-size:20px;font-weight:800;letter-spacing:-.03em}
.memstats .num.small{font-size:13px;font-weight:700;line-height:20px}
.memstats .lbl{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;opacity:.65}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;cursor:pointer}
.memhead__c a{color:inherit;text-decoration:none}