/* ============================================================
   Däckhotell v2 — app.css
   Plain CSS (Tailwind is loaded from CDN; @apply/@layer unavailable).
   Order: tokens → base → buttons → forms → cards/KPI → badges → occupancy →
   position grid → sidebar → table → search → toast → modal → animation
   utilities → keyframes → responsive table → reduced motion.
   ============================================================ */
:root{
  --slate-50:#F8FAFC; --slate-100:#F1F5F9; --slate-200:#E2E8F0; --slate-300:#CBD5E1;
  --slate-400:#94A3B8; --slate-500:#64748B; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1E293B; --slate-900:#0F172A;
  --accent-50:#F2FAFA; --accent-100:#DAF1F1; --accent-200:#B4E2E3; --accent-300:#7FCBCE;
  --accent-500:#1F8F97; --accent-600:#14747D; --accent-700:#125E67;
  --success-50:#F0FBF5; --success-100:#DCF5E7; --success-600:#047857; --success-700:#036B45;
  --danger-50:#FEF3F2; --danger-100:#FDE4E1; --danger-600:#D64545; --danger-700:#B03636;
  --sommar-50:#FDF6EC; --sommar-100:#F7E8D0; --sommar-700:#976314;
  --vinter-50:#EFF4FB; --vinter-100:#DCE7F5; --vinter-700:#3A628F;
  --r-sm:.375rem; --r:.5rem; --r-lg:.75rem; --r-xl:.875rem; --r-2xl:1rem;
  --sh-soft:0 1px 2px 0 rgb(15 23 42/.04);
  --sh-card:0 1px 2px 0 rgb(15 23 42/.04),0 1px 3px 0 rgb(15 23 42/.04);
  --sh-pop:0 4px 16px -4px rgb(15 23 42/.10),0 1px 3px 0 rgb(15 23 42/.05);
  --sh-modal:0 20px 48px -16px rgb(15 23 42/.28);
  --e-out:cubic-bezier(.22,.61,.36,1);
  --t-fast:120ms; --t-base:160ms; --t-page:200ms; --t-bar:240ms;
  --sidebar-w:240px; --sidebar-w-collapsed:64px;
}

*{ -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }
body{ font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--slate-50); color:var(--slate-900); }
:focus-visible{ outline:2px solid var(--accent-500); outline-offset:2px; border-radius:var(--r-sm); }
.num,.regnr,td.num,th.num{ font-variant-numeric:tabular-nums; }
.regnr{ text-transform:uppercase; font-weight:600; letter-spacing:.06em; }
.skip-link{ position:absolute; left:.5rem; top:-3rem; z-index:100; background:#fff; color:var(--slate-900);
  padding:.5rem .75rem; border-radius:var(--r); box-shadow:var(--sh-pop);
  min-height:44px; display:inline-flex; align-items:center; }
.skip-link:focus{ top:.5rem; }

/* `hidden` is the initial state of half the check-in fragment (chip, warning, owner block, every
   position grid). Tailwind's Play CDN compiles utilities lazily from a MutationObserver, so on a
   page that has no .hidden element yet the class does not exist when an AJAX fragment is injected
   and everything flashes visible for a frame — and focusFirst() then focuses a field that is about
   to disappear. Own the utility instead of waiting for the JIT. */
.hidden{ display:none !important; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:44px;
  padding:.625rem 1.125rem; border:1px solid transparent; border-radius:var(--r); font-size:.9375rem;
  font-weight:600; line-height:1.2; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background-color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out),
             color var(--t-fast) var(--e-out); }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }
.btn-sm{ min-height:36px; padding:.375rem .75rem; font-size:.8125rem; }
.btn-lg{ min-height:48px; padding:.75rem 1.25rem; font-size:1rem; }
.btn-block{ width:100%; }
.btn-primary{ background:var(--accent-600); color:#fff; }
.btn-primary:hover{ background:var(--accent-700); }
.btn-secondary{ background:#fff; color:var(--slate-700); border-color:var(--slate-200); box-shadow:var(--sh-soft); }
.btn-secondary:hover{ background:var(--slate-50); border-color:var(--slate-300); }
.btn-link{ display:inline-flex; align-items:center; gap:.375rem; min-height:36px; padding:.25rem .125rem;
  background:none; border:0; font-size:.875rem; font-weight:500; color:var(--slate-600);
  text-decoration:none; cursor:pointer; }
.btn-link:hover{ color:var(--accent-700); text-decoration:underline; }
.btn-danger-link{ display:inline-flex; align-items:center; gap:.375rem; min-height:36px; padding:.25rem .125rem;
  background:none; border:0; font-size:.875rem; font-weight:500; color:var(--danger-700);
  text-decoration:none; cursor:pointer; }
.btn-danger-link:hover{ text-decoration:underline; }
.btn-danger-link[disabled],.btn-danger-link[aria-disabled="true"]{ opacity:.45; pointer-events:none; text-decoration:none; }
.btn-confirm{ background:var(--danger-600); color:#fff; }   /* modal only */
.btn-confirm:hover{ background:var(--danger-700); }
.btn.is-busy{ pointer-events:none; color:transparent !important; position:relative; }
.btn.is-busy::after{ content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px;
  border:2px solid rgb(255 255 255/.5); border-top-color:#fff; border-radius:50%;
  animation:dk-spin 600ms linear infinite; }
.btn-secondary.is-busy::after{ border-color:var(--slate-300); border-top-color:var(--slate-600); }

/* ---------- forms ---------- */
.field{ display:block; }
.label{ display:block; font-size:.8125rem; font-weight:600; color:var(--slate-700); margin-bottom:.375rem; }
.label .req{ color:var(--danger-600); margin-left:.125rem; }
.input,.select{ display:block; width:100%; min-height:44px; padding:.625rem .75rem; background:#fff;
  border:1px solid var(--slate-200); border-radius:var(--r); font-size:.9375rem; color:var(--slate-900);
  box-shadow:var(--sh-soft);
  transition:border-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out); }
.input::placeholder{ color:var(--slate-400); }
.input:hover,.select:hover{ border-color:var(--slate-300); }
.input:focus,.select:focus{ outline:none; border-color:var(--accent-500);
  box-shadow:0 0 0 3px var(--accent-100); }
.input[readonly]{ background:var(--slate-50); color:var(--slate-600); box-shadow:none; }
.input[disabled],.select[disabled]{ background:var(--slate-50); color:var(--slate-400); }
.select{ appearance:none; padding-right:2.5rem; background-repeat:no-repeat;
  background-position:right .75rem center; background-size:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748B'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5'/%3E%3C/svg%3E"); }
.input-regnr{ text-transform:uppercase; letter-spacing:.1em; font-weight:600; }
.input-lg{ min-height:56px; font-size:1.125rem; }
.input-xl{ width:100%; height:76px; padding:0 1rem; text-align:center; text-transform:uppercase;
  font-size:clamp(1.75rem,6vw,2.25rem); font-weight:700; letter-spacing:.1em;
  font-variant-numeric:tabular-nums; background:#fff; border:1px solid var(--slate-200);
  border-radius:var(--r-xl); color:var(--slate-900); box-shadow:var(--sh-card);
  transition:border-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out); }
.input-xl::placeholder{ color:var(--slate-300); letter-spacing:.1em; }
.input-xl:focus{ outline:none; border-color:var(--accent-500); box-shadow:0 0 0 4px var(--accent-100); }
@media (max-width:639px){ .input-xl{ height:60px; } }
.help{ margin-top:.375rem; font-size:.75rem; color:var(--slate-500); }
.err{ margin-top:.375rem; font-size:.75rem; font-weight:500; color:var(--danger-700); }
.has-error .input,.has-error .select{ border-color:var(--danger-600); }
.has-error .input:focus{ box-shadow:0 0 0 3px var(--danger-100); }
.checkbox{ width:20px; height:20px; accent-color:var(--accent-600); border-radius:var(--r-sm); }
.alert{ display:flex; gap:.625rem; padding:.75rem .875rem; border:1px solid; border-radius:var(--r-lg);
  font-size:.875rem; }
.alert-info{ background:var(--accent-50); border-color:var(--accent-100); color:var(--accent-700); }
.alert-danger{ background:var(--danger-50); border-color:var(--danger-100); color:var(--danger-700); }
.alert-success{ background:var(--success-50); border-color:var(--success-100); color:var(--success-700); }

/* segmented two-button toggle (Sommar/Vinter, Befintlig/Ny kund) */
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.seg-item{ position:relative; }
.seg-item input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.seg-item span{ display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:56px;
  padding:.75rem 1rem; background:#fff; border:1px solid var(--slate-200); border-radius:var(--r-lg);
  font-size:.9375rem; font-weight:600; color:var(--slate-700);
  transition:border-color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out),
             color var(--t-fast) var(--e-out); }
.seg-item input:hover + span{ border-color:var(--slate-300); }
.seg-item input:checked + span{ background:var(--accent-50); border-color:var(--accent-500);
  color:var(--accent-700); box-shadow:inset 0 0 0 1px var(--accent-500); }
.seg-item input:focus-visible + span{ outline:2px solid var(--accent-500); outline-offset:2px; }
.seg-sm .seg-item span{ min-height:44px; font-size:.875rem; }

/* ---------- cards & KPI ---------- */
.card{ background:#fff; border:1px solid var(--slate-200); border-radius:var(--r-xl);
  box-shadow:var(--sh-card); }
.card-pad{ padding:1.25rem; }
.kpi{ background:#fff; border:1px solid var(--slate-200); border-radius:var(--r-xl);
  box-shadow:var(--sh-card); padding:1.25rem; }
.kpi-label{ font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--slate-500); }
.kpi-value{ margin-top:.375rem; font-size:2.5rem; line-height:1.05; font-weight:700;
  color:var(--slate-900); font-variant-numeric:tabular-nums; }
.kpi-sub{ margin-top:.25rem; font-size:.8125rem; color:var(--slate-500); }
@media (max-width:639px){ .kpi{ padding:1rem; } .kpi-value{ font-size:2rem; } }

/* ---------- badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:.3125rem; padding:.125rem .5rem; border:1px solid;
  border-radius:9999px; font-size:.6875rem; font-weight:600; letter-spacing:.02em; }
.badge-sommar{ background:var(--sommar-50); border-color:var(--sommar-100); color:var(--sommar-700); }
.badge-vinter{ background:var(--vinter-50); border-color:var(--vinter-100); color:var(--vinter-700); }
.badge-stored{ background:var(--success-50); border-color:var(--success-100); color:var(--success-700); }
.badge-out{ background:var(--slate-100); border-color:var(--slate-200); color:var(--slate-600); }
.badge-off{ background:var(--danger-50); border-color:var(--danger-100); color:var(--danger-700); }

/* ---------- occupancy bar ---------- */
.occ{ height:8px; border-radius:9999px; background:var(--slate-100); overflow:hidden; }
.occ-fill{ display:block; height:100%; width:0; border-radius:9999px; background:var(--slate-400);
  transition:width var(--t-bar) var(--e-out); }
.occ-fill[data-level="high"]{ background:var(--accent-600); }   /* > 90 % only */

/* ---------- position grid ---------- */
.pos-grid{ display:grid; gap:.5rem; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); }
.grid-pos{ position:relative; min-height:48px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.125rem; padding:.25rem; border:1px solid var(--slate-200);
  border-radius:var(--r); background:#fff; text-decoration:none;
  transition:border-color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out),
             transform var(--t-fast) var(--e-out); }
.pos-num{ font-size:.625rem; font-weight:600; color:var(--slate-400); font-variant-numeric:tabular-nums; }
.pos-regnr{ font-size:.6875rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--slate-900); max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.grid-pos-free{ background:#fff; border-style:dashed; border-color:var(--slate-300); cursor:pointer; }
.grid-pos-free:hover{ border-color:var(--accent-500); background:var(--accent-50); transform:translateY(-1px); }
.grid-pos-stored{ background:var(--slate-50); border-color:var(--slate-200); }
.grid-pos-stored:hover{ background:var(--slate-100); }
.grid-pos-disabled{ cursor:not-allowed; color:var(--slate-400); border-color:var(--slate-200);
  background:repeating-linear-gradient(45deg,#fff,#fff 5px,var(--slate-100) 5px,var(--slate-100) 10px); }
.grid-pos[aria-pressed="true"]{ border-style:solid; border-color:var(--accent-600);
  background:var(--accent-50); box-shadow:inset 0 0 0 1px var(--accent-600); }
.grid-pos[aria-pressed="true"]::after{ content:"✓"; position:absolute; top:2px; right:4px;
  font-size:.625rem; font-weight:700; color:var(--accent-700); }
.pos-legend{ display:flex; flex-wrap:wrap; gap:1rem; font-size:.75rem; color:var(--slate-500); }
.pos-swatch{ display:inline-block; width:14px; height:14px; border-radius:4px; vertical-align:-2px;
  margin-right:.375rem; border:1px solid var(--slate-300); }

/* ---------- sidebar ---------- */
.sidebar{ position:fixed; inset-block:0; left:0; z-index:40; width:var(--sidebar-w);
  display:flex; flex-direction:column; background:#fff; border-right:1px solid var(--slate-200);
  transition:width var(--t-base) var(--e-out), transform var(--t-base) var(--e-out); }
.sidebar-hd{ display:flex; align-items:center; gap:.625rem; height:56px; padding:0 .75rem;
  border-bottom:1px solid var(--slate-200); flex:none; }
.sidebar-brand{ display:flex; flex-direction:column; min-width:0; }
.sidebar-brand b{ font-size:.9375rem; font-weight:700; color:var(--slate-900); letter-spacing:-.01em; }
.sidebar-brand small{ font-size:.6875rem; color:var(--slate-500); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.sidebar-toggle{ margin-left:auto; display:grid; place-items:center; width:36px; height:36px;
  border-radius:var(--r-sm); color:var(--slate-500); background:none; border:0; cursor:pointer; flex:none; }
.sidebar-toggle:hover{ background:var(--slate-100); color:var(--slate-700); }
/* the collapse toggle is desktop-only: below lg the sidebar is an off-canvas menu with no rail,
   so collapsing it there changes nothing on screen (the hamburger in the mobile bar stays). */
.sidebar .sidebar-toggle{ display:none; }
@media (min-width:1024px){ .sidebar .sidebar-toggle{ display:grid; } }
.sidebar-nav{ flex:1; overflow-y:auto; padding:.5rem; }
.nav-link{ position:relative; display:flex; align-items:center; gap:.75rem; min-height:44px;
  margin:.125rem 0; padding:.5rem .625rem; border-radius:var(--r); font-size:.875rem;
  font-weight:500; color:var(--slate-600); text-decoration:none; border:0; background:none; width:100%;
  text-align:left; cursor:pointer;
  transition:background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out); }
.nav-link:hover{ background:var(--slate-100); color:var(--slate-900); }
.nav-link .ico{ width:20px; height:20px; flex:none; }
.nav-link.is-active{ background:var(--accent-50); color:var(--accent-700); font-weight:600; }
.nav-link.is-active::before{ content:""; position:absolute; left:-.5rem; top:.375rem; bottom:.375rem;
  width:2px; border-radius:9999px; background:var(--accent-600); }
.nav-foot{ margin-top:auto; padding:.5rem 0 .75rem; border-top:1px solid var(--slate-200); flex:none; }
.nav-user{ padding:.625rem 1.125rem .25rem; font-size:.75rem; color:var(--slate-500);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* collapsed (desktop icon rail) — driven by body.sidebar-collapsed, set by an inline pre-paint
   script (layout.html) so the sidebar never flashes full-width on load. */
@media (min-width:1024px){
  body.sidebar-collapsed .sidebar{ width:var(--sidebar-w-collapsed); }
  body.sidebar-collapsed .sidebar .nav-label,
  body.sidebar-collapsed .sidebar .sidebar-brand,
  body.sidebar-collapsed .sidebar .nav-user{ display:none; }
  body.sidebar-collapsed .sidebar .sidebar-hd{ justify-content:center; padding:0; }
  body.sidebar-collapsed .sidebar .sidebar-toggle{ margin:0; }
  body.sidebar-collapsed .sidebar .nav-link{ justify-content:center; padding:.5rem 0; }
}
.app-shell{ padding-left:0; transition:padding-left var(--t-base) var(--e-out); }
@media (min-width:1024px){
  .app-shell{ padding-left:var(--sidebar-w); }
  body.sidebar-collapsed .app-shell{ padding-left:var(--sidebar-w-collapsed); }
}
/* mobile off-canvas — always full width with labels; the collapsed rail is desktop-only (above) */
@media (max-width:1023px){
  .sidebar{ width:var(--sidebar-w); transform:translateX(-100%); box-shadow:var(--sh-modal); }
  .sidebar.is-open{ transform:none; }
}
.scrim{ position:fixed; inset:0; z-index:30; background:rgb(15 23 42/.4);
  animation:dk-fade var(--t-fast) linear both; }
.topbar-mobile{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.625rem;
  height:56px; padding:0 .75rem; background:#fff; border-bottom:1px solid var(--slate-200); }
.topbar-mobile b{ font-size:.9375rem; font-weight:700; color:var(--slate-900); }
.topbar-mobile .sidebar-toggle{ margin-left:0; width:44px; height:44px; }   /* v5 §2: tap target (the bar only renders < 1024 px) */

/* ---------- page header ---------- */
.back-link{ display:inline-flex; align-items:center; gap:.25rem; font-size:.8125rem; color:var(--slate-500);
  text-decoration:none; }
.back-link:hover{ color:var(--accent-700); }
.page-hd{ display:flex; flex-direction:column; gap:.75rem; margin-bottom:1.5rem; }
@media (min-width:640px){ .page-hd{ flex-direction:row; align-items:center; justify-content:space-between; } }
.page-title{ font-size:1.5rem; font-weight:600; letter-spacing:-.01em; color:var(--slate-900); }
@media (min-width:640px){ .page-title{ font-size:1.75rem; } }

/* ---------- table ---------- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.875rem; }
.table thead th{ background:var(--slate-50); color:var(--slate-500); font-size:.6875rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; text-align:left; padding:.625rem 1rem;
  border-bottom:1px solid var(--slate-200); white-space:nowrap; }
.table tbody td{ padding:.75rem 1rem; border-bottom:1px solid var(--slate-100); color:var(--slate-700);
  vertical-align:middle; }
.table tbody tr:last-child td{ border-bottom:0; }
.table tbody tr:hover{ background:var(--slate-50); }
.table .col-actions{ text-align:right; white-space:nowrap; }
.row-link{ cursor:pointer; }
.empty{ padding:3rem 1.5rem; text-align:center; }
.empty-title{ font-size:1rem; font-weight:600; color:var(--slate-700); }
.empty-text{ margin-top:.375rem; font-size:.875rem; color:var(--slate-500); max-width:26rem; margin-left:auto; margin-right:auto; }
.empty-cta{ margin-top:-1.5rem; padding:0 1.5rem 3rem; text-align:center; }  /* v5: only /search */

/* ---------- dashboard search results / comboboxes ---------- */
.result-list{ background:#fff; border:1px solid var(--slate-200); border-radius:var(--r-xl);
  box-shadow:var(--sh-card); overflow:hidden; animation:dk-fade var(--t-fast) linear both; }
.result-item{ display:flex; align-items:center; gap:.75rem; width:100%; min-height:60px;
  padding:.75rem 1rem; border-bottom:1px solid var(--slate-100); text-align:left; text-decoration:none;
  background:#fff; color:inherit; cursor:pointer; border-left:0; border-right:0; border-top:0; }
.result-item:last-child{ border-bottom:0; }
.result-item:hover,.result-item.is-active{ background:var(--slate-50); }
.result-item.is-active{ box-shadow:inset 2px 0 0 0 var(--accent-600); }
.result-regnr{ flex:none; width:6.5rem; font-size:1rem; }
.result-name{ flex:1 1 auto; min-width:0; font-size:.875rem; color:var(--slate-600);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-loc{ flex:none; font-size:.875rem; font-weight:600; color:var(--slate-900); text-align:right; }
.result-loc.is-empty{ color:var(--slate-400); font-weight:500; }
.result-msg{ padding:1rem; text-align:center; font-size:.875rem; color:var(--slate-500); }
.combo-panel{ position:absolute; z-index:10; left:0; right:0; top:calc(100% + .25rem);
  max-height:min(16rem,45dvh); overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:#fff; border:1px solid var(--slate-200); border-radius:var(--r-lg); box-shadow:var(--sh-pop);
  animation:dk-fade var(--t-fast) linear both; }
@media (max-width:639px){ .combo-panel{ max-height:min(14rem,38dvh); } }
mark.hl{ background:var(--accent-100); color:inherit; border-radius:2px; padding:0 1px; }
.hint-empty{ color:var(--accent-700); font-weight:500; }

/* ---------- toast ---------- */
.toast-stack{ position:fixed; z-index:80; right:1rem; bottom:1rem; display:flex; flex-direction:column;
  gap:.5rem; width:min(24rem,calc(100vw - 2rem)); pointer-events:none; }
.toast{ pointer-events:auto; display:flex; gap:.625rem; align-items:flex-start; padding:.75rem .875rem;
  background:#fff; border:1px solid var(--slate-200); border-left:3px solid var(--slate-300);
  border-radius:var(--r-lg); box-shadow:var(--sh-pop); font-size:.875rem; color:var(--slate-700);
  animation:dk-toast-in var(--t-base) var(--e-out) both; }
.toast.is-leaving{ animation:dk-toast-out var(--t-fast) var(--e-out) both; }
.toast-success{ border-left-color:var(--success-600); }
.toast-error{ border-left-color:var(--danger-600); }
.toast-close{ margin-left:auto; flex:none; color:var(--slate-400); background:none; border:0;
  cursor:pointer; padding:.125rem; }
.toast-close:hover{ color:var(--slate-700); }

/* ---------- modal shell v2 (v5): capped panel, scrolling body, sticky header + footer ---------- */
.modal-overlay{ position:fixed; inset:0; z-index:70; display:flex; align-items:center;
  justify-content:center; padding:1rem; overflow:hidden;      /* v5: the PANEL scrolls, not the overlay */
  background:rgb(15 23 42/.45); }
.modal-overlay[hidden]{ display:none; }
.modal-overlay.is-open{ animation:dk-fade 150ms linear both; }
.modal-overlay.is-closing{ animation:dk-fade-out 120ms linear both; }

.modal{ --modal-pad:1.5rem;
  width:min(26rem,100%);
  max-height:calc(100vh - 2rem); max-height:calc(100dvh - 2rem);   /* vh first = fallback */
  display:flex; flex-direction:column; min-height:0; overflow:hidden;  /* clip the sticky footer to the radius */
  background:#fff; border-radius:var(--r-2xl); box-shadow:var(--sh-modal);
  animation:dk-modal-in 180ms var(--e-out) both; }
.modal-overlay.is-closing .modal{ animation:dk-modal-out 120ms var(--e-out) both; }
.modal-sm{ width:min(26rem,100%); }
.modal-md{ width:min(32rem,100%); }
.modal-lg{ width:min(44rem,100%); }
.modal-xl{ width:min(60rem,100%); }

/* THE fix for the tallest-modal overflow: keep the flex column unbroken through the injection wrapper. */
.modal > [data-modal-content]{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }

.modal-hd{ flex:none; display:flex; align-items:flex-start; gap:1rem;
  padding:1.25rem var(--modal-pad) .75rem; background:#fff; }
.modal-hd-plain{ padding-bottom:0; }
.modal-title{ flex:1 1 auto; font-size:1.0625rem; font-weight:600; color:var(--slate-900); }
.modal-close{ flex:none; margin:-.25rem -.5rem 0 0; display:grid; place-items:center;
  width:44px; height:44px; border:0; background:none; color:var(--slate-400); cursor:pointer;
  border-radius:var(--r-sm); }
.modal-close:hover{ color:var(--slate-700); background:var(--slate-50); }

.modal-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; padding:0 var(--modal-pad);
  /* The footer is sticky ON TOP of this scrollport, so scroll-into-view must stop short of it or
     the newly focused field lands under the buttons. Dack.modal measures the real footer into
     --modal-footer-h on every swap/resize; 7rem is the pre-measure fallback. */
  scroll-padding-bottom:var(--modal-footer-h,7rem); }
.modal-text{ margin-top:.375rem; font-size:.875rem; color:var(--slate-500); }

/* Footer slot: the form's own button row, pinned to the bottom of the scrollport. One rule for
   every modal — form modals (.form-actions) and the confirm modal (.modal-actions) alike. */
.modal-body .form-actions,
.modal-body .modal-actions{
  position:sticky; bottom:0; z-index:20;                      /* above .combo-panel (z-index 10) */
  margin:1rem calc(var(--modal-pad) * -1) 0; padding:.75rem var(--modal-pad);
  padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0px));
  background:#fff; border-top:1px solid var(--slate-200); }
.card-flat{ border:0; box-shadow:none; padding:0; background:transparent; }
.modal-body .form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; }
/* .form-actions-stack is the full-page (no-JS) layout; in the footer the row wins, so the primary
   spans the width instead of shrinking to its text inside a centred column. */
.modal-body .form-actions-stack{ flex-direction:row; }
.modal-body .form-actions > .btn-primary{ flex:1 1 auto; }   /* spans the footer row on a phone */
.modal-body .form-actions [data-checkin-helper]{ order:-1; flex:1 0 100%; margin:0; }
@media (min-width:640px){ .modal-body .form-actions > .btn-primary{ flex:0 0 auto; } }
.modal-body .modal-actions{ display:flex; flex-direction:column-reverse; gap:.5rem; }
@media (min-width:440px){ .modal-body .modal-actions{ flex-direction:row; justify-content:flex-end; } }

/* Full-screen sheet under 640 px, safe-area insets respected. */
@media (max-width:639px){
  .modal-overlay{ padding:0; align-items:stretch; }
  /* Sheet: the body fills the screen and the button row is pushed to its bottom. position:sticky
     alone only pins while the body overflows, which left 40–75 % of a short sheet blank white.
     !important because Tailwind's space-y-* utility (.space-y-4 > :not([hidden]) ~ :not([hidden]),
     specificity 0,3,0) sits on these very forms and the Play CDN injects it AFTER app.css — the
     same cascade trap .hidden already documents above. */
  .modal-body{ display:flex; flex-direction:column; }
  .modal-body > form{ flex:1 0 auto; display:flex; flex-direction:column; }
  .modal-body > form > .form-actions,
  .modal-body > .modal-actions{ margin-top:auto !important; }
  .modal,.modal-sm,.modal-md,.modal-lg,.modal-xl{
    --modal-pad:1rem;
    width:100%; max-width:none; height:100dvh; max-height:100dvh;
    border-radius:0; box-shadow:none; }
  .modal-hd{ padding-top:calc(1.25rem + env(safe-area-inset-top,0px)); }
  .modal-body,.modal-body .form-actions,.modal-body .modal-actions{
    padding-inline:max(var(--modal-pad), env(safe-area-inset-left,0px)); }
  .modal-body .form-actions,.modal-body .modal-actions{
    margin-inline:calc(max(var(--modal-pad), env(safe-area-inset-left,0px)) * -1); }
}
body.no-scroll{ overflow:hidden; }

/* check-in only: three controls that are too wide to share a phone row (order overridden by the
   sticky-footer rule above when inside a modal). */
.form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding-top:.5rem; }
.form-actions-stack{ flex-direction:column; align-items:stretch; gap:.75rem; }
@media (min-width:640px){ .form-actions-stack{ flex-direction:row; align-items:center; } }

/* swap of the panel content after a 422 */
.modal-swap{ animation:dk-fade var(--t-fast) linear both; }

/* ---------- check-in: vehicle autocomplete chip ---------- */
.chip-vehicle{ display:flex; align-items:center; gap:.5rem; margin-top:.25rem; padding:.625rem .75rem;
  border:1px solid var(--slate-200); background:var(--slate-50); border-radius:var(--r-lg); font-size:.875rem; }
.chip-clear{ margin-left:auto; flex:none; border:0; background:none; color:var(--slate-400); cursor:pointer;
  font-size:1.125rem; line-height:1; padding:.125rem .25rem; }
.chip-clear:hover{ color:var(--slate-700); }

/* ---------- check-in: chosen-shelf chip (v6), mirrors .chip-vehicle ----------
   The row's height is defined by the "Byt hylla" .btn-link (min-height 36px desktop / 44px mobile),
   NOT by padding stacked on top of it: .625rem block padding made the chip 58/66px, taller than the
   44/64px .chip-vehicle it mirrors and enough to push the grid more than 64px below the point where
   the cards row started (picker-v6-design §7 V1). .25rem block padding + a 2.75rem min-height keeps
   the 44px tap target and lands the chip at 46px desktop / 54px phone. */
.chip-shelf{ display:flex; align-items:center; gap:.5rem; margin-top:.25rem; padding:.25rem .75rem;
  min-height:2.75rem; border:1px solid var(--slate-200); border-radius:var(--r-lg); background:var(--slate-50); }
.chip-shelf-text{ font-size:.875rem; font-weight:600; color:var(--slate-900); min-width:0; flex:1 1 auto; }
.chip-shelf-change{ flex:none; margin-left:auto; }
/* collapsed state only: the chip labels the grid directly under it, so .5rem instead of mt-3's
   .75rem — keeps the grid's top inside the 64px budget on a 44px-tap-target phone too. */
.chip-shelf:not(.hidden) ~ .pos-grid{ margin-top:.5rem; }

/* ---------- check-in footer mirror (v6): left of the primary "Checka in" button ---------- */
.place-mirror{ margin:0; font-size:.8125rem; font-weight:600; color:var(--slate-900); }
.place-mirror-muted{ font-weight:500; color:var(--slate-500); }
.modal-body .form-actions .place-mirror{ order:-1; flex:1 0 100%; }
@media (min-width:640px){ .modal-body .form-actions .place-mirror{ flex:0 0 auto; margin-right:auto; } }
/* "Skriv ut etikett direkt" lives in the footer next to the primary button: own row on a phone,
   inline before the buttons on wider screens. */
.form-actions [data-print-labels-row]{ min-height:2.875rem; }
.modal-body .form-actions [data-print-labels-row]{ order:-1; flex:1 0 100%; }
@media (min-width:640px){ .modal-body .form-actions [data-print-labels-row]{ flex:0 0 auto; order:0; } }

/* ---------- check-in: shelf-cards position picker (M3, server-rendered) ---------- */
.shelf-cards{ display:flex; flex-wrap:wrap; gap:.5rem; }
.shelf-card{ flex:1 1 9.5rem; max-width:14rem; min-height:76px; display:flex; flex-direction:column;
  align-items:flex-start; gap:.25rem; padding:.625rem .75rem; background:#fff; text-align:left;
  border:1px solid var(--slate-200); border-radius:var(--r-lg); cursor:pointer;
  transition:border-color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out); }
.shelf-card:hover:not([disabled]){ border-color:var(--slate-300); background:var(--slate-50); }
.shelf-card[aria-pressed="true"]{ border-color:var(--accent-600); background:var(--accent-50);
  box-shadow:inset 0 0 0 1px var(--accent-600); }
.shelf-card[disabled]{ opacity:.45; cursor:not-allowed; }
.shelf-card-name{ font-size:.9375rem; font-weight:700; color:var(--slate-900); }
.shelf-card-free{ font-size:.75rem; color:var(--slate-500); }
.shelf-card .occ{ width:100%; margin-top:.125rem; }

/* ---------- animation utilities ---------- */
.anim-page{ animation:dk-fade-up var(--t-page) var(--e-out) both; }
.anim-in{ animation:dk-fade var(--t-fast) linear both; }

/* ---------- keyframes (eight: dk-scale-in retired for dk-modal-in/out, v3) ---------- */
@keyframes dk-fade      { from{opacity:0} to{opacity:1} }
@keyframes dk-fade-up   { from{opacity:0; transform:translate3d(0,6px,0)} to{opacity:1; transform:none} }
@keyframes dk-fade-out  { from{opacity:1} to{opacity:0} }
@keyframes dk-modal-in  { from{opacity:0; transform:translate3d(0,8px,0) scale(.98)} to{opacity:1; transform:none} }
@keyframes dk-modal-out { from{opacity:1; transform:none} to{opacity:0; transform:translate3d(0,8px,0) scale(.98)} }
@keyframes dk-toast-in  { from{opacity:0; transform:translate3d(16px,0,0)} to{opacity:1; transform:none} }
@keyframes dk-toast-out { from{opacity:1; transform:none} to{opacity:0; transform:translate3d(16px,0,0)} }
@keyframes dk-spin      { to{ transform:rotate(360deg) } }

/* ---------- responsive table (< md) ---------- */
@media (max-width:767px){
  .table-stack thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .table-stack,.table-stack tbody,.table-stack tr,.table-stack td{ display:block; width:100%; }
  .table-stack tr{ background:#fff; border:1px solid var(--slate-200); border-radius:var(--r-lg);
    box-shadow:var(--sh-soft); padding:.25rem; margin-bottom:.625rem; }
  .table-stack td{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.5rem .75rem; border-bottom:0; text-align:right; }
  .table-stack td::before{ content:attr(data-label); flex:none; font-size:.6875rem; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); text-align:left; }
  .table-stack td[data-label=""]::before{ content:none; }
  .table-stack td.col-primary{ font-size:1rem; font-weight:600; color:var(--slate-900);
    border-bottom:1px solid var(--slate-100); }
}

/* ---------- mobile tap targets (v5): every control reaches 44px on a phone ---------- */
@media (max-width:639px){
  .btn-sm{ min-height:44px; }
  .btn-link,.btn-danger-link{ min-height:44px; }
  .toast-close{ min-height:44px; min-width:44px; }
  /* The vehicle chip's clear "×" was 20×22. Negative margins let it eat the chip's own padding
     (.625rem/.75rem) so the box grows to 44 px without making the chip taller. */
  .chip-clear{ min-width:44px; min-height:44px; display:grid; place-items:center;
    margin:-.625rem -.75rem -.625rem auto; }
  /* The whole "Skriv ut etikett direkt" row is the tap target, not just the 20 px checkbox. */
  .check-row{ min-height:44px; }
}

/* ---------- help (v7) ---------- */
.help-intro{ margin-top:.5rem; max-width:44rem; font-size:.9375rem; color:var(--slate-600); }
.help-toc{ display:flex; flex-wrap:wrap; gap:.25rem .75rem; }
.help-toc a{ display:inline-flex; align-items:center; min-height:36px; padding:.25rem 0;
  font-size:.8125rem; color:var(--slate-500); }
.help-toc a:hover{ color:var(--accent-700); text-decoration:underline; }
@media (min-width:1024px){ .help-toc{ position:sticky; top:1.5rem; align-self:start; flex-direction:column;
  gap:0; } }
.help-card{ scroll-margin-top:4.5rem; }          /* clears the sticky mobile topbar */
.help-card h2{ font-size:1.0625rem; font-weight:600; color:var(--slate-900); }
.help-steps,.help-list{ margin:.75rem 0 0; padding-left:1.25rem; }
.help-steps{ list-style:decimal; }
.help-list{ list-style:disc; }
.help-steps li,.help-list li{ margin-top:.375rem; font-size:.875rem; line-height:1.5;
  color:var(--slate-700); }
.help-steps strong,.help-list strong,.help-card p strong{ font-weight:600; color:var(--slate-900); }
.help-card p{ margin-top:.75rem; font-size:.875rem; line-height:1.5; color:var(--slate-700); }
.code-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:.875rem; }
.code-head p{ margin:0; font-size:.75rem; font-weight:600; color:var(--slate-700); }
.code-block{ margin-top:.375rem; padding:.75rem .875rem; background:var(--slate-50);
  border:1px solid var(--slate-200); border-radius:var(--r-lg); overflow-x:auto; }
.code-block code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.75rem; line-height:1.5; color:var(--slate-800);
  white-space:pre-wrap; overflow-wrap:anywhere; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .grid-pos-free:hover{ transform:none !important; }
}