/* ═══════════════════════════════════════════════════════════════════════
   Verkstadspanelen.

   Samma formspråk som bokningsnavet på /bokningar/ - samma blå, samma
   statusfärger, samma registreringsskylt. Panelen och navet är två rum i
   samma hus och ska kännas så.

   Storlekarna är medvetet stora. Det här används på en verkstad, ofta
   stående, ibland med en telefon i handen.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  --bg:#eef1f4;
  --surface:#ffffff;
  --surface-2:#f6f8fa;
  --surface-3:#eef2f5;
  --line:#dde4e9;
  --line-strong:#c6d1d9;
  --ink:#0f181d;
  --ink-2:#546670;
  --ink-3:#7d8f99;

  --accent:#0079a8;
  --accent-deep:#005273;
  --accent-soft:#e6f4fb;

  --ok:#0b7a4f;      --ok-soft:#e2f5ec;
  --warn:#8a5600;    --warn-soft:#fdf1d8;
  --danger:#b3261e;  --danger-soft:#fce9e7;
  --plum:#6b3fa0;    --plum-soft:#f1ebfa;

  --rail:#14212a;
  --rail-2:#1d2f3a;
  --rail-ink:#d6e2e9;
  --rail-ink-2:#8ba3b0;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --fs-xs:15px; --fs-sm:16px; --fs:18px; --fs-md:20px;
  --fs-lg:24px; --fs-xl:32px; --fs-2xl:38px;

  --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(15,24,29,.05), 0 6px 18px rgba(15,24,29,.07);
  --shadow-lg:0 24px 60px rgba(15,24,29,.22);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:var(--fs);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{text-wrap:balance;margin:0}
img{max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Attributet hidden förlorar annars mot varje klass som sätter display. */
[hidden]{display:none!important}

/* ── Skal ──────────────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:292px minmax(0,1fr);min-height:100vh}

.rail{background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.rail-top{padding:26px 24px 20px;border-bottom:1px solid rgba(255,255,255,.09)}
.mark{font-size:var(--fs-md);font-weight:800;letter-spacing:-.01em;color:#fff;display:block}
.mark-sub{display:block;margin-top:4px;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rail-ink-2)}

.site-switch{margin:16px 16px 0;position:relative}
.site-switch > summary{padding:14px 16px;background:var(--rail-2);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r-sm);
  display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}
.site-switch .dot,.site-switch > summary > svg{align-self:flex-start;margin-top:4px}
.site-switch > summary::-webkit-details-marker{display:none}
.site-switch > summary:hover{border-color:rgba(255,255,255,.22)}
.site-switch .dot{width:12px;height:12px;border-radius:4px;background:#e0a92b;flex:0 0 auto}
.site-switch .nm{flex:1;min-width:0}
/* Verkstadsnamnet bryter hellre till två rader än kapas - "Tyresö Gummi
   & Motor" avkortat till "Tyresö Gummi …" säger mindre än det borde. */
.site-switch .nm b{display:block;color:#fff;font-size:var(--fs-sm);font-weight:700;
  line-height:1.3}
.site-switch .nm span{display:block;font-size:var(--fs-xs);color:var(--rail-ink-2)}
.site-switch svg{color:var(--rail-ink-2);flex:0 0 auto}
.site-list{margin-top:8px;background:var(--rail-2);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-sm);overflow:hidden}
.site-list a{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;
  font-size:var(--fs-sm);color:var(--rail-ink);border-bottom:1px solid rgba(255,255,255,.07)}
.site-list a:last-child{border-bottom:0}
.site-list a:hover{background:rgba(255,255,255,.07);color:#fff}
.site-list a.here{color:#fff;font-weight:700;background:rgba(255,255,255,.05)}
/* Namnet får hela bredden och bryter hellre snyggt än trängs ihop.
   Bocken hålls kvar på sin rad så att listan står i linje. */
.site-list a .nm{flex:1;min-width:0;line-height:1.35}
.site-list a svg{flex:0 0 auto;align-self:flex-start;margin-top:3px}
.site-list .note{padding:12px 16px;font-size:13px;color:var(--rail-ink-2);line-height:1.4;
  border-top:1px solid rgba(255,255,255,.07)}

.nav{padding:20px 16px 28px;display:flex;flex-direction:column;gap:26px;flex:1}
.nav-group h4{margin:0 0 8px;padding:0 10px;font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--rail-ink-2)}
.nav-item{display:flex;align-items:center;gap:13px;width:100%;padding:13px 14px;
  border:0;background:transparent;border-radius:var(--r-sm);font-size:var(--fs-sm);
  font-weight:600;color:var(--rail-ink);text-align:left}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.on{background:var(--accent);color:#fff;font-weight:700}
.nav-item.on .badge{background:rgba(255,255,255,.24);color:#fff}
.nav-item svg{flex:0 0 auto;opacity:.85}
.nav-item .lbl{flex:1;min-width:0}
.nav-item .badge{background:var(--danger);color:#fff;border-radius:999px;padding:2px 10px;
  font-size:var(--fs-xs);font-weight:800;font-variant-numeric:tabular-nums}

.rail-foot{border-top:1px solid rgba(255,255,255,.09);padding:18px 24px;
  display:flex;align-items:center;gap:12px}
.ava{width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;
  font-size:var(--fs-sm);flex:0 0 auto}
.rail-foot .who{flex:1;min-width:0}
.rail-foot .who b{display:block;color:#fff;font-size:var(--fs-sm);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-foot .who a{display:block;font-size:var(--fs-xs);color:var(--rail-ink-2)}
.rail-foot .who a:hover{color:#fff}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--surface);border-bottom:1px solid var(--line);padding:0 34px;
  height:70px;display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:40}
.crumb{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink-3);
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:7px 16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%}
.crumb b{color:var(--ink-2);font-weight:600}
.spring{margin-left:auto}
.toplink{color:var(--accent);font-weight:700;font-size:var(--fs-sm);
  display:inline-flex;align-items:center;gap:8px;padding:10px 4px;white-space:nowrap}
.toplink:hover{text-decoration:underline}

.view{padding:34px;max-width:1680px;width:100%;margin:0 auto}

.head{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.head .t{flex:1;min-width:280px}
h1{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.025em;line-height:1.15}
.lede{color:var(--ink-2);font-size:var(--fs-md);margin:8px 0 0;max-width:66ch}
.back-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);
  font-weight:700;font-size:var(--fs-sm);margin-bottom:12px}
.back-link:hover{text-decoration:underline}

/* ── Meddelanden ───────────────────────────────────────────────────── */
.flash{padding:16px 22px;border-radius:var(--r);margin-bottom:20px;font-size:var(--fs);
  font-weight:600;display:flex;gap:13px;align-items:flex-start}
.flash.success{background:var(--ok-soft);color:var(--ok)}
.flash.error{background:var(--danger-soft);color:var(--danger)}
.flash.warning{background:var(--warn-soft);color:var(--warn)}
.flash.info{background:var(--accent-soft);color:var(--accent-deep)}

/* ── Knappar ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:2px solid var(--line-strong);border-radius:var(--r-sm);padding:15px 24px;
  font-size:var(--fs-sm);font-weight:700;cursor:pointer;white-space:nowrap;
  background:var(--surface);color:var(--ink)}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn.danger{color:var(--danger);border-color:#e8c4c1}
.btn.danger:hover{background:var(--danger-soft)}
.btn.danger.solid{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.sm{padding:10px 16px;font-size:var(--fs-xs)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ── Kort ──────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}
.card + .card{margin-top:22px}
.card-head{padding:20px 26px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:16px;flex-wrap:wrap}
.card-head h2{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.015em}
.card-head .sub{color:var(--ink-2);font-size:var(--fs-sm)}

/* ── Verktygsrad ───────────────────────────────────────────────────── */
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.search{flex:1;min-width:280px;position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:18px;color:var(--ink-3);pointer-events:none}
.search input{width:100%;border:2px solid var(--line-strong);border-radius:var(--r-sm);
  padding:15px 18px 15px 52px;font-size:var(--fs-md);font-family:inherit;
  background:var(--surface);color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{outline:none;border-color:var(--accent)}
select.sel{border:2px solid var(--line-strong);border-radius:var(--r-sm);padding:15px 18px;
  font-size:var(--fs-sm);font-weight:600;font-family:inherit;background:var(--surface);
  color:var(--ink);cursor:pointer}
select.sel:focus{outline:none;border-color:var(--accent)}

/* ── Flikar ────────────────────────────────────────────────────────── */
.segs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:20px}
.seg{border:0;background:transparent;padding:15px 20px;cursor:pointer;font-size:var(--fs);
  font-weight:700;color:var(--ink-2);border-bottom:4px solid transparent;margin-bottom:-2px;
  display:inline-flex;align-items:center;gap:10px}
.seg:hover{color:var(--ink)}
.seg.on{color:var(--accent);border-bottom-color:var(--accent)}
.seg .n{border-radius:999px;padding:2px 10px;font-size:var(--fs-xs);font-weight:800;
  background:var(--surface-3);color:var(--ink-2);font-variant-numeric:tabular-nums}
.seg .n.hot{background:var(--danger);color:#fff}
.seg .n.amber{background:var(--warn);color:#fff}

/* ── Etiketter ─────────────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;
  font-size:var(--fs-xs);font-weight:800;white-space:nowrap;background:var(--surface-3);
  color:var(--ink-2)}
.tag.REQUEST,.tag.PENDING,.tag.QUEUED{background:var(--warn-soft);color:var(--warn)}
.tag.CONFIRMED,.tag.SENT,.tag.DELIVERED{background:var(--ok-soft);color:var(--ok)}
.tag.CANCELLED,.tag.REJECTED,.tag.FAILED{background:var(--danger-soft);color:var(--danger)}
.tag.COMPLETED{background:var(--accent-soft);color:var(--accent-deep)}
.tag.move{background:var(--plum-soft);color:var(--plum)}
.tag.released{background:var(--danger);color:#fff}
.tag.ghost{background:transparent;border:1px solid var(--line-strong);color:var(--ink-2)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}

.plate{display:inline-flex;align-items:stretch;border:2px solid #16181a;border-radius:6px;
  overflow:hidden;background:#fff;font-family:var(--mono);font-weight:700;
  font-size:var(--fs-md);letter-spacing:.09em;line-height:1;flex:0 0 auto}
.plate::before{content:"S";background:#0b3b91;color:#ffd400;display:flex;align-items:center;
  padding:9px 6px;font-size:14px;letter-spacing:0}
.plate span{color:#16181a;padding:9px 13px;display:flex;align-items:center}
.plate.sm{font-size:var(--fs-sm)}
.plate.sm span{padding:7px 10px}
.plate.sm::before{padding:7px 5px;font-size:13px}

/* ── Tabeller ──────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto}
table.list{border-collapse:collapse;width:100%;min-width:760px}
table.list thead th{text-align:left;padding:14px 18px;font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2);
  border-bottom:1px solid var(--line);white-space:nowrap}
table.list thead th.right{text-align:right}
table.list tbody td{padding:16px 18px;border-bottom:1px solid var(--line);
  vertical-align:middle;font-size:var(--fs-sm)}
table.list tbody td.right{text-align:right;font-variant-numeric:tabular-nums}
table.list tbody tr:last-child td{border-bottom:0}
table.list tbody tr:hover{background:var(--surface-2)}
table.list tbody tr.flag-bad{box-shadow:inset 5px 0 0 var(--danger)}
table.list tbody tr.flag-warn{box-shadow:inset 5px 0 0 var(--warn)}
table.list tbody tr.grp{background:var(--surface-3)}
table.list tbody tr.grp:hover{background:var(--surface-3)}
table.list tbody tr.grp td{padding:15px 18px;font-weight:800;
  border-bottom:1px solid var(--line-strong)}
.cell-primary{font-size:var(--fs);font-weight:700;color:var(--ink);
  display:inline-flex;align-items:center;gap:9px}
.cell-primary:hover{color:var(--accent);text-decoration:underline}
.cell-hint{color:var(--ink-2);font-size:var(--fs-xs);margin-top:4px;
  max-width:46ch;overflow:hidden;text-overflow:ellipsis}
.cell-mono{font-family:var(--mono);font-size:var(--fs-xs)}
.cell-muted{color:var(--ink-3)}
.cell-truncate{display:block;max-width:42ch;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.cell-empty{color:var(--ink-3)}
.thumb{width:64px;height:44px;border-radius:8px;object-fit:cover;background:var(--surface-3);
  border:1px solid var(--line);display:block}
.thumb.blank{display:flex;align-items:center;justify-content:center;color:var(--ink-3)}
.swatch-cell{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:var(--fs-xs)}
.swatch-cell i{width:26px;height:26px;border-radius:7px;border:1px solid var(--line-strong);
  flex:0 0 auto}
.tags{display:flex;gap:6px;flex-wrap:wrap}

/* Hopfällda kopplingar i en tabellcell.
   Stängd är den en rad hög oavsett hur många poster den döljer - det är
   hela poängen. Utfälld växer bara sin egen rad. */
.hopfallt > summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  list-style:none;background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;padding:6px 12px;font-size:var(--fs-xs);font-weight:700;
  color:var(--ink-2);white-space:nowrap}
.hopfallt > summary::-webkit-details-marker{display:none}
.hopfallt > summary:hover{border-color:var(--line-strong);color:var(--ink)}
.hopfallt > summary svg{transition:transform .15s;flex:0 0 auto}
.hopfallt[open] > summary svg{transform:rotate(180deg)}
.hopfallt[open] > summary{background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent-deep)}
.hopfallt .tags{margin-top:9px;max-width:320px}

/* Adressen som knapp. Utskriven i klartext äter den halva tabellbredden. */
.lankknapp{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:var(--surface);border-radius:999px;padding:6px 13px;
  font-size:var(--fs-xs);font-weight:700;color:var(--accent);white-space:nowrap}
.lankknapp:hover{border-color:var(--accent);background:var(--accent-soft)}
.rowacts{display:flex;gap:8px;justify-content:flex-end}
.iconbtn{width:40px;height:40px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer}
.iconbtn:hover{border-color:var(--line-strong);color:var(--ink)}
.iconbtn.danger:hover{border-color:#e8c4c1;color:var(--danger);background:var(--danger-soft)}

.dot-yes,.dot-no{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-xs);
  font-weight:700;white-space:nowrap}
.dot-yes{color:var(--ok)}
.dot-no{color:var(--ink-3)}
.dot-yes::before,.dot-no::before{content:"";width:11px;height:11px;border-radius:50%}
.dot-yes::before{background:var(--ok)}
.dot-no::before{background:var(--line-strong)}

.empty{padding:80px 26px;text-align:center;color:var(--ink-3)}
.empty h3{font-size:var(--fs-lg);font-weight:800;color:var(--ink-2);margin-bottom:8px}
.empty p{margin:0 auto 22px;max-width:46ch;font-size:var(--fs-sm)}

.pager{display:flex;align-items:center;gap:14px;padding:18px 26px;
  border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-2)}
.pager .spring{margin-left:auto}

/* ── Formulär ──────────────────────────────────────────────────────── */
.form-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
@media(max-width:1240px){.form-layout{grid-template-columns:1fr}}
.fset{padding:26px;border-bottom:1px solid var(--line)}
.fset:last-of-type{border-bottom:0}
.fset > h3{font-size:var(--fs-md);font-weight:800;letter-spacing:-.01em;margin-bottom:4px}
.fset > .fh{color:var(--ink-2);font-size:var(--fs-sm);margin:0 0 20px;max-width:66ch}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.fields.one{grid-template-columns:1fr}
.field{min-width:0}
.field.wide{grid-column:1/-1}
label.f{display:block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
label.f .req{color:var(--danger);margin-left:4px}
.field input[type=text],.field input[type=email],.field input[type=url],
.field input[type=number],.field input[type=date],.field input[type=time],
.field input[type=password],.field textarea,.field select{
  width:100%;border:2px solid var(--line-strong);border-radius:var(--r-sm);padding:14px 16px;
  font-size:var(--fs);font-family:inherit;color:var(--ink);background:var(--surface)}
.field textarea{resize:vertical;line-height:1.55;min-height:110px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field .help{margin:8px 0 0;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.45}
.field .errors{margin:8px 0 0;padding:0;list-style:none;color:var(--danger);
  font-size:var(--fs-xs);font-weight:700}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--danger)}
.formbar{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);
  padding:18px 26px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;z-index:20}
/* ── Sidopaneler ────────────────────────────────────────────────────
   En klistrad panel utan egen scrollhöjd är fast i sidans scroll: hela
   sidan måste rullas ned innan panelens nedre del ens går att nå. Panelen
   får därför en egen höjd och scrollar för sig.

   overscroll-behavior stoppar kedjan åt andra hållet - när panelen tar
   slut ska sidan inte rycka till och åka i väg. */
.side{position:sticky;top:92px;display:flex;flex-direction:column;gap:18px;
  max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain;
  /* Skuggan får inte kapas av överflödet. */
  padding:2px;margin:-2px}
/* Utan den här krymper korten i stället för att panelen scrollar - flexbarn
   ger med sig när utrymmet tar slut, och innehållet kläms i stället för att
   gå att nå. */
.side > *{flex:0 0 auto}
.side-note{padding:24px}
.side-note h3{font-size:var(--fs-sm);font-weight:800;margin-bottom:10px}
.side-note p{margin:0 0 14px;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55}
.side-note p:last-child{margin-bottom:0}
.side-note dl{margin:0}
.side-note dl > div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.side-note dl > div:last-child{border-bottom:0}
.side-note dt{color:var(--ink-2)}
.side-note dd{margin:0;font-weight:700;text-align:right}

/* Reglage */
.switch{display:inline-flex;align-items:center;gap:13px;cursor:pointer;font-size:var(--fs-sm);
  font-weight:700;color:var(--ink-2)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch i{width:54px;height:32px;border-radius:999px;background:var(--line-strong);
  position:relative;transition:background .15s;flex:0 0 auto}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .15s}
.switch input:checked + i{background:var(--ok)}
.switch input:checked + i::after{transform:translateX(22px)}
.switch input:focus-visible + i{outline:3px solid var(--accent);outline-offset:2px}
.switch .on-text{display:none}
.switch input:checked ~ .lbl .on-text{display:inline}
.switch input:checked ~ .lbl .off-text{display:none}

/* Färg */
.colorfield{display:flex;align-items:center;gap:12px}
.colorfield input[type=color]{width:56px;height:52px;padding:0;border:2px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
.colorfield input[type=text]{flex:1;font-family:var(--mono)}

/* Ikon */
.iconfield{display:flex;align-items:center;gap:12px}
.iconfield .preview{width:52px;height:52px;border-radius:var(--r-sm);background:var(--surface-3);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);font-size:20px;flex:0 0 auto}
.iconfield input{flex:1;font-family:var(--mono)}

/* Etikettval */
.chips-field{border:2px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden}
.chips-head{padding:11px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;font-size:var(--fs-xs);font-weight:700;color:var(--ink-2)}
.chips-head input{flex:1;border:0;background:transparent;font-size:var(--fs-xs);
  font-family:inherit;padding:4px 0}
.chips-head input:focus{outline:none}
.chips-body{padding:16px;display:flex;flex-wrap:wrap;gap:9px;max-height:270px;overflow-y:auto}
.chip-opt{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;
  padding:9px 16px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;color:var(--ink-2)}
.chip-opt:hover{border-color:var(--ink-3);color:var(--ink)}
.chip-opt.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.chip-opt input{position:absolute;opacity:0;width:0;height:0}
.chip-opt.hidden{display:none}
.chips-none{color:var(--ink-3);font-size:var(--fs-sm)}

.chip{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;font-size:var(--fs-xs);font-weight:600;display:inline-flex;
  align-items:center;gap:7px}
.chip.extra{background:var(--plum-soft);border-color:#ddd0f0;color:#4b2b72}
.chips{display:flex;flex-wrap:wrap;gap:9px}

/* ── Mediaväljaren ─────────────────────────────────────────────────── */
.mediafield{border:2px dashed var(--line-strong);border-radius:var(--r-sm);padding:16px;
  display:flex;gap:16px;align-items:center;background:var(--surface-2)}
.mediafield.filled{border-style:solid;background:var(--surface)}
.mediafield .shot{width:110px;height:78px;border-radius:8px;object-fit:cover;
  background:var(--surface-3);border:1px solid var(--line);flex:0 0 auto}
.mediafield .shot.blank{display:flex;align-items:center;justify-content:center;color:var(--ink-3)}
.mediafield .meta{flex:1;min-width:0}
.mediafield .meta b{display:block;font-size:var(--fs-sm);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mediafield .meta span{display:block;font-size:var(--fs-xs);color:var(--ink-3);margin-top:3px}
.mediafield .acts{display:flex;gap:9px;flex-wrap:wrap;flex:0 0 auto}
.mediafield input[type=file]{position:absolute;opacity:0;width:0;height:0}

.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:26px;background:rgba(15,24,29,.55)}
.modal-box{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-lg);
  width:min(1080px,100%);max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{padding:22px 26px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:16px;flex-wrap:wrap}
.modal-head h2{font-size:var(--fs-lg);font-weight:800}
.modal-tools{padding:16px 26px;border-bottom:1px solid var(--line);display:flex;gap:12px;
  flex-wrap:wrap;align-items:center;background:var(--surface-2)}
.modal-body{padding:22px 26px;overflow-y:auto;flex:1;min-height:220px}
.modal-foot{padding:18px 26px;border-top:1px solid var(--line);display:flex;gap:12px;
  align-items:center;flex-wrap:wrap}
.grid-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:16px}
.pick-img{border:2px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:var(--surface);cursor:pointer;padding:0;text-align:left;display:block}
.pick-img:hover{border-color:var(--accent)}
.pick-img.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pick-img img{width:100%;height:126px;object-fit:cover;display:block;background:var(--surface-3)}
.pick-img .cap{padding:11px 13px;font-size:var(--fs-xs);color:var(--ink-2)}
.pick-img .cap b{display:block;color:var(--ink);font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.drop{border:2px dashed var(--line-strong);border-radius:var(--r);padding:44px 26px;
  text-align:center;color:var(--ink-2);background:var(--surface-2)}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop h3{font-size:var(--fs-md);font-weight:800;margin-bottom:6px}
.drop p{margin:0 0 18px;font-size:var(--fs-sm);color:var(--ink-3)}
.modal-msg{padding:14px 18px;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;
  margin-bottom:18px}
.modal-msg.error{background:var(--danger-soft);color:var(--danger)}
.modal-msg.ok{background:var(--ok-soft);color:var(--ok)}

/* ── Underlistor i formulär ────────────────────────────────────────── */
.inline-rows{display:flex;flex-direction:column}
.inline-row{padding:20px 26px;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;align-items:end}
.inline-row:last-of-type{border-bottom:0}
.inline-row.removed{opacity:.45}
.inline-row .drop-col{display:flex;align-items:center;gap:12px}
.inline-add{padding:18px 26px;border-top:1px solid var(--line);background:var(--surface-2)}

/* ── Sidbyggaren ───────────────────────────────────────────────────── */
.builder{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start}
@media(max-width:1240px){.builder{grid-template-columns:1fr}}
.block{display:flex;gap:18px;align-items:flex-start;padding:20px 24px;
  border-bottom:1px solid var(--line);background:var(--surface)}
.block:last-child{border-bottom:0}
.block.dragging{opacity:.45}
.block.over{box-shadow:inset 0 3px 0 var(--accent)}
.block .grip{color:var(--ink-3);cursor:grab;padding-top:6px;background:none;border:0}
.block .grip:active{cursor:grabbing}
.block .ic{width:50px;height:50px;border-radius:13px;background:var(--accent-soft);
  color:var(--accent-deep);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.block.broken .ic{background:var(--danger-soft);color:var(--danger)}
.block .bd{flex:1;min-width:0}
.block .bd h3{font-size:var(--fs-md);font-weight:800;letter-spacing:-.01em;
  display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.block .bd p{margin:5px 0 0;font-size:var(--fs-sm);color:var(--ink-2);max-width:60ch}
.block .acts{display:flex;gap:9px;flex:0 0 auto}
.lib-type{border-bottom:1px solid var(--line)}
.lib-type > summary{padding:16px 22px;cursor:pointer;display:flex;align-items:center;gap:13px;
  font-size:var(--fs-sm);font-weight:700;list-style:none}
.lib-type > summary::-webkit-details-marker{display:none}
.lib-type > summary:hover{background:var(--surface-2)}
.lib-type .n{margin-left:auto;font-size:var(--fs-xs);color:var(--ink-3);font-weight:600}
.lib-items{padding:0 22px 18px;display:flex;flex-direction:column;gap:9px}
.lib-item{display:flex;align-items:center;gap:11px;width:100%;border:1px solid var(--line);
  background:var(--surface);border-radius:var(--r-sm);padding:12px 15px;font-size:var(--fs-sm);
  cursor:pointer;text-align:left}
.lib-item:hover{border-color:var(--accent);color:var(--accent-deep)}
.lib-item .nm{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.lib-empty{color:var(--ink-3);font-size:var(--fs-xs);padding:2px 0 6px}

/* ── Kategorikort ──────────────────────────────────────────────────── */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:24px;display:flex;flex-direction:column;
  border-top:6px solid var(--accent)}
.cat.off{border-top-color:var(--line-strong);background:var(--surface-2)}
.cat-h{display:flex;align-items:flex-start;gap:15px;margin-bottom:16px}
.cat-ic{width:56px;height:56px;border-radius:15px;background:var(--accent-soft);
  color:var(--accent-deep);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.cat.off .cat-ic{background:var(--surface-3);color:var(--ink-3)}
.cat-h .nm{flex:1;min-width:0}
.cat-h h3{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.015em}
.cat-h .slug{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-3);margin-top:3px;
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat .ord{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:10px;background:var(--surface-3);color:var(--ink-2);font-weight:800;
  font-size:var(--fs-sm);font-variant-numeric:tabular-nums;flex:0 0 auto}
.cat-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.cat-foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:14px}
.cnt-pill{display:inline-flex;align-items:center;gap:7px;background:var(--surface-3);
  border-radius:999px;padding:6px 14px;font-size:var(--fs-xs);font-weight:700;
  color:var(--ink-2);font-variant-numeric:tabular-nums}
.cnt-pill.zero{background:var(--warn-soft);color:var(--warn)}
.cnt-pill.plum{background:var(--plum-soft);color:var(--plum)}

/* ── Hälsokontroll ─────────────────────────────────────────────────── */
.checks{display:flex;flex-direction:column}
.check{display:flex;align-items:center;gap:14px;padding:15px 26px;
  border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.check:last-child{border-bottom:0}
.check .ic{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;background:var(--warn-soft);color:var(--warn)}
.check .ic.bad{background:var(--danger-soft);color:var(--danger)}
.check .txt{flex:1;min-width:0}
.check .txt b{font-weight:800}
.check .fix{color:var(--accent);font-weight:700;font-size:var(--fs-xs);white-space:nowrap}
.check .fix:hover{text-decoration:underline}

/* ── Flaggor på tjänster ───────────────────────────────────────────── */
.flags{display:flex;gap:6px;flex-wrap:wrap}
.flag{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;background:var(--surface-3);color:var(--ink-3)}
.flag.on{background:var(--accent-soft);color:var(--accent-deep)}
.price{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.price.none{color:var(--warn)}
.grp-cell{display:flex;align-items:center;gap:13px}
.grp-cell .swatch{width:12px;height:26px;border-radius:4px;flex:0 0 auto;background:var(--accent)}
.grp-cell .cnt{color:var(--ink-2);font-weight:600;font-size:var(--fs-xs)}

/* ── Aktiviteter ───────────────────────────────────────────────────── */
.split-2{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:22px;align-items:start}
@media(max-width:1240px){.split-2{grid-template-columns:1fr}}
.act{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:16px 26px;
  border:0;border-bottom:1px solid var(--line);background:var(--surface)}
.act:last-child{border-bottom:0}
.act:hover{background:var(--surface-2)}
.act.on{background:var(--accent-soft)}
.act .nm{font-size:var(--fs);font-weight:700;flex:1;min-width:0}
.act .bar{width:120px;height:10px;border-radius:999px;background:var(--surface-3);
  overflow:hidden;flex:0 0 auto}
.act .bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.act .bar.zero i{background:var(--warn)}
.act .use{font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);white-space:nowrap;
  font-variant-numeric:tabular-nums;min-width:96px;text-align:right}
.act .use.zero{color:var(--warn)}
.letter{padding:12px 26px;background:var(--surface-3);font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.11em;color:var(--ink-3);border-bottom:1px solid var(--line)}

/* ── Tillval ───────────────────────────────────────────────────────── */
.ups{display:flex;gap:18px;align-items:flex-start;width:100%;text-align:left;padding:22px 26px;
  border:0;border-bottom:1px solid var(--line);background:var(--surface);
  border-left:6px solid transparent}
.ups:last-child{border-bottom:0}
.ups:hover{background:var(--surface-2)}
.ups.on{background:var(--accent-soft);border-left-color:var(--accent)}
.ups.off{opacity:.55}
.ups-ic{width:50px;height:50px;border-radius:13px;background:var(--plum-soft);color:var(--plum);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ups .bd{flex:1;min-width:0}
.ups .bd h3{font-size:var(--fs-md);font-weight:800;display:flex;align-items:center;gap:12px;
  flex-wrap:wrap}
.ups .bd p{margin:6px 0 0;font-size:var(--fs-sm);color:var(--ink-2);max-width:58ch}
.ups .trig{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.ups .trig .lbl{font-size:var(--fs-xs);font-weight:700;color:var(--ink-3)}
.ups .rt{text-align:right;flex:0 0 auto;display:flex;flex-direction:column;
  align-items:flex-end;gap:10px}
.ups .amt{font-size:var(--fs-lg);font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;white-space:nowrap}
.ups .amt.quote{color:var(--ink-2);font-size:var(--fs-md)}
.ups .amt.free{color:var(--ok);font-size:var(--fs-md)}
.take{font-size:var(--fs-xs);color:var(--ink-2);font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.take .b2{display:block;width:110px;height:8px;border-radius:999px;background:var(--surface-3);
  margin-top:6px;overflow:hidden}
.take .b2 i{display:block;height:100%;background:var(--plum);border-radius:999px}
.mock{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-bottom:22px}
.mock-h{padding:11px 16px;background:var(--surface-3);font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.mock-b{padding:20px}
.offer{border:2px solid var(--line-strong);border-radius:12px;padding:18px;display:flex;
  gap:15px;align-items:flex-start}
.offer .ic{width:44px;height:44px;border-radius:12px;background:var(--plum-soft);
  color:var(--plum);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.offer h4{font-size:var(--fs);font-weight:800}
.offer p{margin:5px 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.offer .pr{margin-left:auto;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.mailrow{display:flex;gap:13px;align-items:flex-start;font-size:var(--fs-sm);margin:0}
.mailrow .dot{width:9px;height:9px;border-radius:50%;background:var(--plum);margin-top:8px;
  flex:0 0 auto}
.mailrow em{font-style:normal;color:var(--ink-2)}

/* ── Bokningar ─────────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:22px;align-items:start}
@media(max-width:1400px){.split{grid-template-columns:1fr}}
.duties{display:grid;grid-template-columns:1fr 1fr;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  overflow:hidden;margin-bottom:26px}
@media(max-width:900px){.duties{grid-template-columns:1fr}}
.duty{padding:22px 26px;display:flex;gap:16px}
.duty + .duty{border-left:1px solid var(--line)}
@media(max-width:900px){.duty + .duty{border-left:0;border-top:1px solid var(--line)}}
.duty .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;background:var(--surface-3);color:var(--ink-2)}
.duty.here .ic{background:var(--accent-soft);color:var(--accent-deep)}
.duty h3{font-size:var(--fs-md);font-weight:800}
.duty.there h3{color:var(--ink-2)}
.duty p{margin:5px 0 0;font-size:var(--fs-sm);color:var(--ink-2)}
.duty ul{margin:9px 0 0;padding-left:20px;font-size:var(--fs-sm);color:var(--ink-2)}
.duty .go{display:inline-flex;align-items:center;gap:7px;margin-top:12px;color:var(--accent);
  font-weight:700;font-size:var(--fs-sm)}
.duty .go:hover{text-decoration:underline}

.booking{display:block;width:100%;text-align:left;border:0;background:var(--surface);
  border-bottom:1px solid var(--line);border-left:6px solid transparent;padding:22px 26px}
.booking:last-child{border-bottom:0}
.booking:hover{background:var(--surface-2)}
.booking.on{background:var(--accent-soft);border-left-color:var(--accent)}
.booking.released{border-left-color:var(--danger)}
.booking.moving{border-left-color:var(--plum)}
.b-top{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:11px}
.b-name{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.015em}
.b-meta{display:flex;gap:22px;flex-wrap:wrap;color:var(--ink-2);font-size:var(--fs-sm)}
.b-serv{display:block;margin-top:10px;font-size:var(--fs)}
.b-when{display:flex;align-items:center;gap:10px;margin-top:11px;flex-wrap:wrap;
  color:var(--ink-2);font-size:var(--fs-sm);font-weight:600}
.waited{margin-left:auto;font-size:var(--fs-sm);color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.waited.late{color:var(--danger);font-weight:800}

.panel{position:sticky;top:92px}
.panel > .card{max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain}
.panel-head{padding:26px;border-bottom:1px solid var(--line)}
.panel-head h2{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.panel-head .ref{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink-3)}
.panel-body{padding:26px}
.sect{font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px}
.blk{margin-bottom:30px}
.blk:last-child{margin-bottom:0}
.rows{margin:0}
.rows > div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:var(--fs)}
.rows > div:last-child{border-bottom:0}
.rows dt{color:var(--ink-2);flex:0 0 auto}
.rows dd{margin:0;font-weight:600;text-align:right;word-break:break-word}
.notice{border-radius:var(--r-sm);padding:16px 18px;font-size:var(--fs-sm);line-height:1.5;
  display:flex;gap:13px;align-items:flex-start}
.notice.locked{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)}
.notice.hot{background:var(--danger-soft);border:1px solid #f0c9c5;color:#7d1a14}
.notice.move{background:var(--plum-soft);border:1px solid #ddd0f0;color:#4b2b72}
.notice.calm{background:var(--accent-soft);border:1px solid #c3e4f4;color:var(--accent-deep)}
.notice svg{flex:0 0 auto;margin-top:2px}
.notice a{color:var(--accent);font-weight:700;text-decoration:underline}
.quote{background:var(--surface-2);border-left:4px solid var(--line-strong);
  border-radius:0 8px 8px 0;padding:16px 18px;font-size:var(--fs);white-space:pre-wrap;
  line-height:1.6;margin:0}
.tl{position:relative;padding-left:30px}
.tl::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--line)}
.ev{position:relative;padding:0 0 22px}
.ev:last-child{padding-bottom:0}
.ev::before{content:"";position:absolute;left:-27px;top:7px;width:14px;height:14px;
  border-radius:50%;background:var(--surface);border:3px solid var(--line-strong)}
.ev.acc::before{border-color:var(--accent)}
.ev.ok::before{border-color:var(--ok)}
.ev.warn::before{border-color:var(--warn)}
.ev .when{font-size:var(--fs-xs);color:var(--ink-3);font-variant-numeric:tabular-nums}
.ev .what{font-size:var(--fs-sm);font-weight:700;margin-top:2px}
.ev .by{font-size:var(--fs-xs);color:var(--ink-2);margin-top:2px}

/* ── Startsidan ────────────────────────────────────────────────────── */
.bandrubrik{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.02em;
  margin:38px 0 4px}
.bandrubrik:first-of-type{margin-top:0}
.bandtext{color:var(--ink-2);font-size:var(--fs-sm);margin:0 0 18px;max-width:64ch}
.cards + .bandrubrik,.nyckeltal + .bandrubrik{margin-top:38px}

/* Nyckeltal.
   Ett tal utan jämförelse är brus, så varje ruta bär en rad som säger vad
   talet står i förhållande till. */
.nyckeltal{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px;margin-bottom:8px}
.ntal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:22px 24px;display:flex;flex-direction:column;
  min-width:0}
.ntal.bred{grid-column:span 2}
@media(max-width:900px){.ntal.bred{grid-column:span 1}}
.ntal .etikett{font-size:var(--fs-xs);font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.ntal .tal{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.15;
  font-variant-numeric:tabular-nums;margin-top:8px;color:var(--ink)}
.ntal .tal small{font-size:20px;font-weight:700;color:var(--ink-2);
  letter-spacing:0;margin-left:3px}
.ntal .tal.tomt{color:var(--ink-3)}
/* Riktningen står i text, inte i färg: om en lugn vecka är bra eller
   dålig beror på verkstaden, och en röd siffra som egentligen betyder
   semester är fel signal. */
.ntal .jamfor{font-size:var(--fs-xs);color:var(--ink-2);margin-top:6px;
  font-variant-numeric:tabular-nums}

/* Kurvan: en serie, tunn linje, markerad slutpunkt. */
.kurva{width:100%;height:52px;margin-top:14px;display:block;overflow:visible}
.kurva-linje{fill:none;stroke:var(--accent);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.kurva-yta{fill:var(--accent);opacity:.10}
.kurva-slut{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.kurva rect{cursor:default}

/* Ursprungsfördelning: stapel som andel, siffran bredvid. */
.ursprung{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.urad{display:flex;align-items:center;gap:12px;font-size:var(--fs-sm)}
.urad .unamn{flex:0 0 130px;color:var(--ink-2)}
.urad .ustapel{flex:1;height:10px;border-radius:999px;background:var(--surface-3);
  overflow:hidden;min-width:40px}
.urad .ustapel i{display:block;height:100%;background:var(--accent);border-radius:999px}
.urad .uantal{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;
  min-width:32px;text-align:right}

/* Avvikelser: graden står i ord bredvid ikonen. Varning och fara ligger
   för nära varandra i färgrymden för att bära skillnaden själva. */
.check .txt .grad{display:inline-block;font-size:12px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 9px;border-radius:999px;
  margin-left:8px;vertical-align:1px}
.grad-atgarda{background:var(--danger-soft);color:var(--danger)}
.grad-seover{background:var(--warn-soft);color:var(--warn)}
.check .txt .foljd{display:block;color:var(--ink-2);font-size:var(--fs-xs);
  margin-top:3px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px;
  margin-bottom:26px}
.ocard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:24px;display:flex;flex-direction:column;
  border-left:6px solid var(--line-strong)}
.ocard.bad{border-left-color:var(--danger)}
.ocard.warn{border-left-color:var(--warn)}
.ocard.calm{border-left-color:var(--accent)}
.ocard .big{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.ocard.bad .big{color:var(--danger)}
.ocard.warn .big{color:var(--warn)}
.ocard h3{font-size:var(--fs-md);font-weight:800;margin-top:6px}
.ocard p{margin:9px 0 0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5}
.ocard .go{margin-top:auto;padding-top:18px;color:var(--accent);font-weight:700;
  font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:8px}
.ocard .go:hover{text-decoration:underline}
.quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.quick a{display:flex;align-items:center;gap:14px;padding:20px 22px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);font-size:var(--fs-sm);font-weight:700;
  box-shadow:var(--shadow)}
.quick a:hover{border-color:var(--accent);color:var(--accent-deep)}
.quick .ic{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);
  color:var(--accent-deep);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.allgood{padding:44px 26px;text-align:center}
.allgood h2{font-size:var(--fs-lg);font-weight:800;margin-bottom:8px}
.allgood p{margin:0;color:var(--ink-2);font-size:var(--fs-sm)}

/* ── Media ─────────────────────────────────────────────────────────── */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.media-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.media-card img{width:100%;height:150px;object-fit:cover;background:var(--surface-3);display:block}
.media-card .cap{padding:14px 16px;font-size:var(--fs-xs);color:var(--ink-2);flex:1}
.media-card .cap b{display:block;color:var(--ink);font-weight:700;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.media-card .acts{padding:0 16px 14px;display:flex;gap:9px}
.pills{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.pill{background:var(--surface);border:2px solid var(--line);border-radius:999px;
  padding:10px 18px;font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:9px}
.pill:hover{border-color:var(--line-strong)}
.pill.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}

/* ── Inställningar ─────────────────────────────────────────────────── */
.settings-tabs{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.stab{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;background:var(--surface);
  border:2px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:700;
  color:var(--ink-2)}
.stab:hover{border-color:var(--line-strong);color:var(--ink)}
.stab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.stab.alert{border-color:#e8c4c1;color:var(--danger)}
.stab.alert.on{background:var(--danger);border-color:var(--danger);color:#fff}
.hours{width:100%;border-collapse:collapse}
.hours th{text-align:left;padding:12px 18px;font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  background:var(--surface-2);border-bottom:1px solid var(--line)}
.hours td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
.hours tr:last-child td{border-bottom:0}
.hours td{padding:12px 18px}
.hours input[type=time]{width:150px;border:2px solid var(--line-strong);
  border-radius:var(--r-sm);padding:12px 14px;font-size:var(--fs-md);
  font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.04em;
  color:var(--ink);background:var(--surface)}
.hours input[type=time]:focus{outline:none;border-color:var(--accent)}
.hours input[type=time]:hover{border-color:var(--ink-3)}
.hours select{border:2px solid var(--line-strong);border-radius:var(--r-sm);
  padding:12px 14px;font-size:var(--fs-sm);font-family:inherit;font-weight:700;
  background:var(--surface);min-width:140px;color:var(--ink);cursor:pointer}
.hours select:focus{outline:none;border-color:var(--accent)}
/* Kryssrutan i en tabellrad ska gå att träffa utan att sikta. */
.hours input[type=checkbox]{width:24px;height:24px;accent-color:var(--danger);cursor:pointer}
.hours .switch i{width:46px;height:28px}
.hours .switch i::after{width:22px;height:22px}
.hours .switch input:checked + i::after{transform:translateX(18px)}

/* En stängd dag har inga tider. Att lämna fälten aktiva och tomma ser ut
   som något man glömt fylla i - nedtonade säger att de inte gäller. */
.hours tr.stangd{background:var(--surface-2)}
.hours tr.stangd input[type=time]{opacity:.4;background:var(--surface-3)}

/* Generella tid- och datumfält utanför tabellen. */
.field input[type=time],.field input[type=date]{font-family:var(--mono);
  font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* ── Mobil ─────────────────────────────────────────────────────────── */
/* ── Mobil ──────────────────────────────────────────────────────────
   Två saker skiljer sig i grunden från skrivbordet.

   Menyn kan inte ligga ovanför innehållet. Staplad blir den en halv
   skärmhöjd som måste scrollas förbi varje gång, och den som vill åt
   bokningarna får rulla sig ned dit. Den ligger därför bakom en knapp
   och skjuts in över sidan.

   Detaljpanelen kan inte ligga under listan. Väljer man en bokning i en
   lista med fyrtio ärenden hamnar bokningen fyrtio kort längre ned - i
   praktiken oåtkomlig. Vald post tar i stället över skärmen, med en väg
   tillbaka. */
.hamburgare{display:none}
.meny-skugga{display:none}

@media(max-width:1080px){
  .app{grid-template-columns:1fr}

  /* Menyn som inskjutbar låda. */
  .hamburgare{display:inline-flex;align-items:center;justify-content:center;
    width:48px;height:48px;border-radius:var(--r-sm);border:2px solid var(--line-strong);
    background:var(--surface);color:var(--ink);flex:0 0 auto;cursor:pointer}
  .hamburgare:hover{border-color:var(--ink-3)}
  .rail{position:fixed;top:0;left:0;bottom:0;width:min(330px,86vw);height:100vh;
    z-index:90;overflow-y:auto;transform:translateX(-101%);
    transition:transform .18s ease-out;box-shadow:none}
  body.meny-oppen .rail{transform:none;box-shadow:var(--shadow-lg)}
  body.meny-oppen{overflow:hidden}
  .meny-skugga{display:block;position:fixed;inset:0;z-index:80;
    background:rgba(15,24,29,.5);opacity:0;pointer-events:none;
    transition:opacity .18s ease-out;border:0}
  body.meny-oppen .meny-skugga{opacity:1;pointer-events:auto}
  .nav{flex-direction:column;gap:26px}

  .view{padding:20px}
  h1{font-size:30px}
  .topbar{padding:0 16px;gap:12px}
  .crumb{max-width:none}
  /* Topplistens länkar tar plats som knappen behöver. */
  .topbar .toplink{font-size:var(--fs-xs)}

  /* Sidopaneler flyter med sidan i stället för att klistra. */
  .split,.split-2,.cat-layout,.act-layout,.ups-layout,.builder,.form-layout{display:block}
  .split > * + *,.split-2 > * + *,.cat-layout > * + *,.act-layout > * + *,
  .ups-layout > * + *,.builder > * + *,.form-layout > * + *{margin-top:20px}
  .side,.panel{position:static;max-height:none;overflow:visible}
  .panel > .card{max-height:none;overflow:visible}

  /* Vald post tar över skärmen. */
  body.har-val .panel,
  body.har-val .split-2 > .side{position:fixed;inset:0;z-index:70;margin:0;
    background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:0;display:block}
  body.har-val{overflow:hidden}
  body.har-val .panel > .card,
  body.har-val .split-2 > .side > .card{border:0;border-radius:0;box-shadow:none;
    min-height:100%}
  body.har-val .split-2 > .side > .card + .card{margin-top:18px}
  /* Etikett och värde får varsin rad. Sida vid sida på en telefon
     trängs de tills värdet skjuts ut ur skärmen - e-postadresser och
     datum är längre än utrymmet. */
  .rows > div{flex-direction:column;align-items:flex-start;gap:3px}
  .rows dd{text-align:left}

  .tillbaka{display:none}
  body.har-val .tillbaka{display:flex;align-items:center;gap:10px;position:sticky;
    top:0;z-index:2;width:100%;background:var(--surface);border:0;
    border-bottom:1px solid var(--line);padding:16px 20px;font-size:var(--fs-md);
    font-weight:700;color:var(--accent);cursor:pointer;text-align:left}
}
@media(max-width:700px){
  /* Adressraden är en bekvämlighet, inte information. På en telefon tar
     den plats från knappen och länkarna som faktiskt används. */
  .crumb{display:none}
  .head{align-items:stretch}
  .head .btn{width:100%}
  .btn,.iconbtn,.pill{min-height:48px}
  .fields{grid-template-columns:1fr}
  .mediafield{flex-wrap:wrap}
  .formbar{padding:14px 18px}
  .formbar .btn{flex:1 1 100%}
}