/* ═══════════════════════════════════════════════════════════════════════════
   ETR Service Ringe — Mobile Dashboard
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --c-primary:        #1c3f6e;
  --c-primary-mid:    #2d6db5;
  --c-primary-pale:   #e8f0fb;
  --c-primary-light:  #c5d8f4;
  --c-accent:         #f07800;
  --c-accent-light:   #fff3e0;
  --c-accent-dark:    #c45e00;

  --c-bg:             #f5f6f8;
  --c-surface:        #ffffff;
  --c-surface-warm:   #fefcf8;

  --c-text:           #1c2433;
  --c-text-muted:     #5c6778;
  --c-text-faint:     #9aa3b2;
  --c-border:         #e4e8ef;
  --c-border-strong:  #ccd3df;

  --c-success:        #1e7a4f;
  --c-success-light:  #e4f4ec;
  --c-warning:        #b06a00;
  --c-warning-light:  #fef3e2;
  --c-danger:         #b83030;
  --c-danger-light:   #fdecea;
  --c-purple:         #6b46c1;
  --c-purple-light:   #f0ebff;
  --c-grey-light:     #f0f0f0;

  /* Status colors */
  --c-status-new:     var(--c-primary-mid);
  --c-status-ready:   var(--c-success);
  --c-status-done:    var(--c-text-faint);
  --c-status-await:   var(--c-warning);
  --c-status-quote:   var(--c-purple);
  --c-status-draft:   var(--c-text-faint);

  --shadow-sm:   0 1px 3px rgba(28, 36, 51, .06), 0 1px 2px rgba(28, 36, 51, .04);
  --shadow-card: 0 2px 8px rgba(28, 36, 51, .08), 0 1px 3px rgba(28, 36, 51, .05);
  --shadow-sheet:0 -8px 32px rgba(28, 36, 51, .12);

  --radius-card:  14px;
  --radius-chip:  999px;
  --radius-btn:   12px;
  --radius-input: 12px;
  --radius-sheet: 22px;

  /* Global layout rhythm — every page hangs off these two values */
  --content-pad: 16px;   /* content → screen edge, identical on all pages */
  --content-max: 540px;  /* app column width (centered on wide screens)   */

  /* Motion */
  --dur:       .2s;
  --dur-slow:  .3s;
  --ease:      cubic-bezier(.32, .72, 0, 1);
  --focus-ring: 0 0 0 3px rgba(45, 109, 181, .18);

  /* --header-h is the header's TOTAL rendered height, incl. the iOS status
     bar / notch / Dynamic Island inset. The header itself turns that inset
     into top padding (see .app-header) so its content strip stays a fixed
     50px (close to iOS's native 44pt nav-bar convention); every other rule
     below positions off this same total, so the inset only ever needs to be
     accounted for once. Android/desktop resolve the env() to 0, so this is a
     no-op there. */
  --header-h:  calc(50px + env(safe-area-inset-top, 0px));
  --datenav-h: 52px;
  --quickjump-h: 44px;
  --tabbar-h:  54px; /* close to iOS's native 49pt tab-bar content height */

  --top-chrome: calc(var(--header-h) + var(--datenav-h) + var(--quickjump-h));
  --bottom-safe: env(safe-area-inset-bottom, 0px);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", Consolas, "Courier New", monospace;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.5;
  overscroll-behavior: none;
  min-height: 100dvh;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 20px;
  z-index: 200;
  box-shadow: 0 2px 12px rgba(28, 63, 110, .3);
  padding-top: env(safe-area-inset-top, 0);
}

.app-header__brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
button.app-header__brand {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
a.app-header__brand--link {
  text-decoration: none;
  color: inherit;
}
.app-header__logo {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
}
.app-header__subtitle {
  font-size: .85rem;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  letter-spacing: .02em;
}
.app-header__refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: rgba(255,255,255,.75);
  transition: color .2s, background .2s;
}
.app-header__refresh:hover  { color: #fff; background: rgba(255,255,255,.1); }
.app-header__refresh:active { background: rgba(255,255,255,.18); }
.icon-refresh { width: 20px; height: 20px; transition: transform .35s ease; }
.icon-refresh.spinning { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Date nav ────────────────────────────────────────────────────────────── */
.date-nav {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  height: var(--datenav-h);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  z-index: 190;
  box-shadow: var(--shadow-sm);
}
.date-nav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: var(--c-primary-mid);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.date-nav__arrow svg { width: 22px; height: 22px; }
.date-nav__arrow:active { background: var(--c-primary-pale); }
.date-nav__label {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
  gap: 0;
  min-width: 0;
}
.date-nav__day  {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-text-faint);
}
.date-nav__date {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
}

/* ── Quick-jump ──────────────────────────────────────────────────────────── */
.quickjump {
  position: fixed;
  top: calc(var(--header-h) + var(--datenav-h));
  left: 0; right: 0;
  height: var(--quickjump-h);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  z-index: 180;
}
.quickjump__btn {
  height: 30px;
  padding: 0 14px;
  border-radius: var(--radius-chip);
  font-size: .8rem;
  font-weight: 600;
  background: var(--c-primary-pale);
  color: var(--c-primary-mid);
  transition: background .15s, transform .1s;
  white-space: nowrap;
}
.quickjump__btn:active { background: var(--c-primary-light); transform: scale(.96); }
.quickjump__btn.active {
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(28,63,110,.25);
}
.quickjump__btn--open-case {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── Main content ────────────────────────────────────────────────────────── */
.app-main {
  margin-top: var(--top-chrome);
  padding: 16px var(--content-pad) calc(var(--tabbar-h) + var(--bottom-safe) + 20px);
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* ── Views ───────────────────────────────────────────────────────────────── */
.view.hidden { display: none; }

/* ── Ticket cards ────────────────────────────────────────────────────────── */
.ticket-list { display: flex; flex-direction: column; gap: 10px; }

.ticket-card {
  background: var(--c-surface);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 10px rgba(28,36,51,.08), 0 1px 3px rgba(28,36,51,.05);
  padding: 14px 16px 16px;
  cursor: pointer;
  border-left: 5px solid var(--c-border);
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  text-align: left;
}
.ticket-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-primary);
  opacity: 0;
  transition: opacity .1s;
  pointer-events: none;
}
.ticket-card:active::after { opacity: .03; }
.ticket-card:active         { transform: scale(.985); box-shadow: var(--shadow-sm); }

/* Status left-border colors */
.ticket-card--new    { border-left-color: var(--c-status-new);   }
.ticket-card--ready  { border-left-color: var(--c-status-ready); }
.ticket-card--done   { border-left-color: var(--c-status-done); opacity: .45; }
.ticket-card--awaiting { border-left-color: var(--c-status-await); }
.ticket-card--quote  { border-left-color: var(--c-status-quote); }
.ticket-card--draft  { border-left-color: var(--c-status-draft); }

.ticket-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.ticket-card__time {
  font-size: 1rem;
  font-weight: 800;
  color: var(--c-primary);
  white-space: nowrap;
  letter-spacing: -.01em;
}

.status-badge {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-chip);
  white-space: nowrap;
  flex-shrink: 0;
}
.status-badge--new     { background: var(--c-primary-pale);  color: var(--c-primary-mid); }
.status-badge--ready   { background: var(--c-success-light); color: var(--c-success); }
.status-badge--done    { background: var(--c-grey-light);    color: var(--c-text-faint); }
.status-badge--awaiting{ background: var(--c-warning-light); color: var(--c-warning); }
.status-badge--quote   { background: var(--c-purple-light);  color: var(--c-purple); }
.status-badge--draft   { background: var(--c-grey-light);    color: var(--c-text-faint); }

.ticket-card__customer {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 2px;
}
.ticket-card__address {
  font-size: .85rem;
  color: var(--c-text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ticket-card__address svg { flex-shrink: 0; opacity: .5; }

.ticket-card__desc {
  font-size: .88rem;
  color: var(--c-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.tag-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-chip {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-chip);
  white-space: nowrap;
}

/* "Anden adresse" override pill */
.alt-address-pill {
  display: inline-flex;
  align-items: center;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-warning);
  background: var(--c-warning-light);
  border: 1px solid #f0c070;
  padding: 3px 9px;
  border-radius: var(--radius-chip);
  margin-left: 6px;
  white-space: nowrap;
}
/* "Anden adresse" tagged but no override address was entered — more urgent
   than the informational pill above, so it gets the danger palette instead. */
.alt-address-pill--missing {
  color: var(--c-danger);
  background: var(--c-danger-light);
  border-color: rgba(184, 48, 48, .3);
}

/* Prominent warning banner shown in the detail panel's customer card. */
.alt-address-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--c-danger-light);
  border: 1px solid rgba(184, 48, 48, .25);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: .83rem;
  font-weight: 600;
  color: var(--c-danger);
  line-height: 1.4;
}
.alt-address-warning svg { flex-shrink: 0; margin-top: 1px; width: 16px; height: 16px; }

/* ── Skeleton ────────────────────────────────────────────────────────────── */
.skeleton-card {
  background: var(--c-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px 16px;
  border-left: 4px solid var(--c-border);
}
.skeleton-line {
  border-radius: 6px;
  background: linear-gradient(90deg, #e8eaf0 25%, #f4f5f8 50%, #e8eaf0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  height: 14px;
  margin-bottom: 8px;
}
.skeleton-line--short  { width: 45%; }
.skeleton-line--medium { width: 65%; }
.skeleton-line--long   { width: 85%; }
.skeleton-line--full   { width: 100%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Day summary row ─────────────────────────────────────────────────────── */
.day-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 14px;
}
.day-summary__text {
  font-size: .73rem;
  font-weight: 600;
  color: var(--c-text-faint);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.day-summary__route {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--c-primary-mid);
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 8px;
  border: 1.5px solid var(--c-primary-light);
  background: transparent;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1;
}
.day-summary__route:hover  { background: var(--c-primary-pale); }
.day-summary__route:active { background: var(--c-primary-pale); border-color: var(--c-primary-mid); }
.day-summary__route svg    { flex-shrink: 0; }
.day-summary__pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.case-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.case-search-input {
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-text);
  height: 30px;
  padding: 0 8px;
  border-radius: var(--radius-chip);
  border: 1.5px solid var(--c-primary-light);
  background: var(--c-surface);
  width: 88px;
  outline: none;
  transition: border-color .15s;
}
.case-search-input:focus  { border-color: var(--c-primary-mid); }
.case-search-input--error { border-color: var(--c-danger) !important; }
.case-search-go {
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-primary-mid);
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-chip);
  border: none;
  background: var(--c-primary-pale);
  transition: background .15s;
  white-space: nowrap;
  cursor: pointer;
}
.case-search-go:hover    { background: var(--c-primary-light); }
.case-search-go:active   { background: var(--c-primary-light); transform: scale(.96); }
.case-search-go:disabled { opacity: .5; cursor: default; }
.case-search-cancel {
  font-size: 1rem;
  line-height: 1;
  color: var(--c-text-faint);
  height: 30px;
  padding: 0 8px;
  border-radius: var(--radius-chip);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color .15s;
}
.case-search-cancel:hover { color: var(--c-text-muted); }

/* ── State boxes (empty / error) ─────────────────────────────────────────── */
.state-box {
  text-align: center;
  padding: 48px 24px 32px;
}
.state-box__icon  { font-size: 2.5rem; margin-bottom: 12px; }
.state-box__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.state-box__sub   { font-size: .9rem; color: var(--c-text-muted); margin-bottom: 20px; }
.state-box--error .state-box__title { color: var(--c-danger); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-btn);
  font-size: .95rem;
  font-weight: 600;
  transition: background .15s, transform .1s, box-shadow .15s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn--primary   { background: var(--c-primary);  color: #fff; }
.btn--success   { background: var(--c-success);  color: #fff; }
.btn--outline   {
  background: transparent;
  color: var(--c-primary-mid);
  border: 1.5px solid var(--c-border-strong);
}
.btn--primary:hover { background: var(--c-primary-mid); }
.btn--success:hover { filter: brightness(1.06); }
.btn--outline:hover { background: var(--c-primary-pale); border-color: var(--c-primary-light); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.btn-row .btn { width: 100%; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.tab-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--tabbar-h) + var(--bottom-safe));
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  display: flex;
  box-shadow: 0 -2px 12px rgba(28, 36, 51, .06);
  z-index: 200;
  padding-bottom: var(--bottom-safe);
}
.tab-bar__tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--c-text-faint);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
  transition: color .2s;
  padding-top: 8px;
}
.tab-bar__tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--c-primary);
  transform: translateX(-50%) scaleX(0);
  transition: transform var(--dur) var(--ease);
}
.tab-bar__tab--active::before { transform: translateX(-50%) scaleX(1); }
.tab-bar__tab--active { color: var(--c-primary); }
.tab-bar__tab--active .tab-bar__icon {
  background: var(--c-primary-pale);
  border-radius: 10px;
  box-shadow: 0 0 0 7px var(--c-primary-pale);
}
.tab-bar__icon { width: 22px; height: 22px; }

/* ── Week view ───────────────────────────────────────────────────────────── */
.week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.week-nav__btn {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--c-primary-mid);
  font-size: .82rem;
  font-weight: 600;
  padding: 8px 4px;
}
.week-nav__btn svg { width: 18px; height: 18px; }
.week-nav__label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--c-text-muted);
  text-align: center;
}

.week-grid { display: flex; flex-direction: column; gap: 6px; }

.week-row {
  background: var(--c-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background .12s, transform .1s;
  border-left: 4px solid transparent;
}
.week-row:active   { transform: scale(.985); background: var(--c-primary-pale); }
.week-row--today   { border-left-color: var(--c-accent); }
.week-row--empty   { opacity: .55; cursor: default; }
.week-row--empty:active { transform: none; background: var(--c-surface); }

.week-row__day {
  min-width: 52px;
}
.week-row__dayname {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-faint);
}
.week-row__daydate {
  font-size: .95rem;
  font-weight: 700;
  color: var(--c-text);
}
.week-row--today .week-row__daydate { color: var(--c-accent); }

.week-row__tasks { flex: 1; min-width: 0; }
.week-row__dots  { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 4px; }
.week-row__dot   { width: 8px; height: 8px; border-radius: 50%; }
.week-row__times {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.week-row__time-chip {
  font-size: .7rem;
  font-weight: 600;
  background: var(--c-primary-pale);
  color: var(--c-primary-mid);
  padding: 2px 7px;
  border-radius: var(--radius-chip);
}
.week-row__empty-label {
  font-size: .82rem;
  color: var(--c-text-faint);
  font-style: italic;
}

.week-row__count {
  font-size: .75rem;
  font-weight: 700;
  color: var(--c-text-faint);
  flex-shrink: 0;
}

/* ── Sheet (shared bottom-sheet component) ───────────────────────────────── */
/* One component drives both the case detail panel (.detail-*) and the timer
   sheets (.sheet-overlay / .sheet). Same dim, slide-up, handle and header. */
.detail-overlay,
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 48, .5);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity var(--dur) ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.detail-overlay.visible,
.sheet-overlay.visible    { opacity: 1; }
.detail-overlay.hidden,
.sheet-overlay.hidden     { display: none; }

/* A sheet opened from *within* an already-open sheet (e.g. "Tilføj
   kommentar" launched from inside the case detail panel) must paint above
   it rather than relying on DOM order at the same z-index. */
.sheet-overlay--stacked { z-index: 320; }

.detail-sheet,
.sheet {
  width: 100%;
  max-height: 92dvh;
  background: var(--c-surface);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-sheet);
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease);
  /* Only 12px of deliberate breathing room — var(--bottom-safe) alone already
     clears the iPhone home-indicator gesture area below that. */
  padding-bottom: calc(12px + var(--bottom-safe));
  -webkit-overflow-scrolling: touch;
}
.detail-overlay.visible .detail-sheet,
.sheet-overlay.visible .sheet { transform: translateY(0); }

.sheet--tall { display: flex; flex-direction: column; min-height: 72dvh; }

.detail-sheet__handle,
.sheet__handle {
  width: 36px; height: 4px;
  border-radius: 2px;
  background: var(--c-border);
  margin: 12px auto 0;
}
.detail-sheet__header,
.sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 20px 0;
  gap: 12px;
}
.detail-sheet__title-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.detail-sheet__title,
.sheet__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
}
.sheet__title { flex: 1; min-width: 0; }
.detail-header-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.detail-sheet__close,
.sheet__close {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -7px;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: var(--c-text-muted);
  background: var(--c-bg);
  flex-shrink: 0;
  transition: background .15s;
}
.detail-sheet__close svg,
.sheet__close svg { width: 18px; height: 18px; }
.detail-sheet__close:active,
.sheet__close:active { background: var(--c-border); }
.detail-sheet__close:hover,
.sheet__close:hover { background: var(--c-border); }

.detail-sheet__body,
.sheet__body { padding: 16px 20px 0; }

/* Shared sheet action row (Annuller / Gem, primary right) */
.sheet__actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.sheet__actions .btn { flex: 1; }

/* Fills the remaining height in a .sheet--tall so its inner list scrolls */
.sheet__body--fill { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ── Detail sections ─────────────────────────────────────────────────────── */
.detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.detail-time {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-primary);
}

.detail-divider {
  height: 1px;
  background: var(--c-border);
  margin: 14px 0;
}

.detail-section { margin-bottom: 16px; }
.detail-section__label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--c-text-faint);
  margin-bottom: 6px;
}
.detail-section__content {
  font-size: .95rem;
  color: var(--c-text);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Robot code box ──────────────────────────────────────────────────────── */
.robot-code-box {
  background: var(--c-accent-light);
  border: 1.5px solid rgba(240,120,0,.25);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
  text-align: center;
}
.robot-code-box__label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
  margin-bottom: 8px;
}
.robot-code-box__single {
  font-family: var(--font-mono);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--c-primary);
  line-height: 1;
}
.robot-code-box__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}
.robot-code-chip {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--c-primary);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border-strong);
  border-radius: 10px;
  padding: 6px 16px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.robot-code-chip:active { background: var(--c-primary-pale); border-color: var(--c-primary-light); }

/* ── Robot code — add button & inline form ───────────────────────────────── */
.robot-code-add {
  margin-bottom: 4px;
}
.robot-code-add-btn {
  width: 100%;
  padding: 13px 16px;
  background: var(--c-primary-pale);
  color: var(--c-primary-mid);
  border: 1.5px dashed var(--c-primary-light);
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.robot-code-add-btn:active { background: var(--c-primary-light); }

.robot-code-add-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.robot-code-add-input {
  flex: 1;
  min-width: 0;
  font-size: 1.8rem;
  font-weight: 700;
  font-family: var(--font-mono);
  text-align: center;
  letter-spacing: .25em;
  padding: 10px 8px;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface);
  color: var(--c-text);
  -webkit-appearance: none;
}
.robot-code-add-input:focus { outline: none; border-color: var(--c-primary-mid); }
.robot-code-add-input--error { border-color: var(--c-danger) !important; }

.robot-code-add-save {
  padding: 10px 20px;
  background: var(--c-primary-mid);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
}
.robot-code-add-save:disabled { opacity: .5; }
.robot-code-add-save:active:not(:disabled) { filter: brightness(.9); }

.robot-code-add-cancel {
  padding: 10px 14px;
  background: var(--c-surface);
  color: var(--c-text-muted);
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  font-size: .9rem;
  white-space: nowrap;
}
.robot-code-add-cancel:active { background: var(--c-border); }

/* ── Add machine button ──────────────────────────────────────────────────── */
.add-machine-btn {
  width: 100%;
  padding: 11px 16px;
  background: var(--c-primary-pale);
  color: var(--c-primary-mid);
  border: 1.5px dashed var(--c-primary-light);
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  margin-top: 10px;
}
.add-machine-btn:active { background: var(--c-primary-light); }

/* ── Machine scan form ───────────────────────────────────────────────────── */
.machine-scan-hint {
  text-align: center;
  font-size: .82rem;
  color: var(--c-text-muted);
  padding: 6px 0 2px;
  margin: 0;
}
.machine-form {
  padding: 6px 0 12px;
}
.machine-form__group {
  margin-bottom: 14px;
}
.machine-form__label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-faint);
  margin-bottom: 5px;
}
.machine-form__input {
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  padding: 11px 13px;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface);
  color: var(--c-text);
  -webkit-appearance: none;
}
.machine-form__input:focus {
  outline: none;
  border-color: var(--c-primary-mid);
}
.machine-form__error {
  font-size: .85rem;
  color: var(--c-danger);
  margin-top: -6px;
  margin-bottom: 10px;
}
.machine-form__save-btn {
  flex: 1;
  padding: 13px 20px;
  background: var(--c-primary-mid);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  font-size: .95rem;
  text-align: center;
}
.machine-form__save-btn:disabled { opacity: .5; }
.machine-form__save-btn:active:not(:disabled) { filter: brightness(.9); }

/* ── Developer error log ─────────────────────────────────────────────────── */
.dev-log-wrap {
  padding: 12px 16px 10px;
  border-top: 1px solid var(--c-border);
}
.dev-log-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dev-log-hdr__title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-faint);
}
.dev-log-hdr__actions { display: flex; gap: 6px; }
.dev-log-btn {
  font-size: .78rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 6px;
  background: var(--c-surface-alt);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
}
.dev-log-btn--danger { color: var(--c-danger); }
.dev-log-entries {
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dev-log-empty {
  display: block;
  font-size: .82rem;
  color: var(--c-text-faint);
  padding: 4px 0;
}
.dev-log-entry {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--c-surface-alt);
}
.dev-log-entry__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.dev-log-entry__status {
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  flex-shrink: 0;
}
.dev-log-entry__status--5xx { background: #fee2e2; color: #b91c1c; }
.dev-log-entry__status--4xx { background: #fef3c7; color: #92400e; }
.dev-log-entry__path {
  font-size: .78rem;
  font-family: monospace;
  color: var(--c-text-muted);
  flex: 1;
  word-break: break-all;
}
.dev-log-entry__time {
  font-size: .72rem;
  color: var(--c-text-faint);
  flex-shrink: 0;
}
.dev-log-entry__body {
  font-size: .72rem;
  font-family: monospace;
  color: var(--c-text);
  background: var(--c-bg);
  border-radius: 5px;
  padding: 6px 8px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 120px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  user-select: text;
  -webkit-user-select: text;
}

/* ── Customer info ───────────────────────────────────────────────────────── */
.customer-card {
  background: var(--c-primary-pale);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.customer-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 4px;
}
.customer-card__address {
  font-size: .88rem;
  color: var(--c-text-muted);
  margin-bottom: 4px;
}
.customer-card__note {
  font-size: .85rem;
  color: var(--c-text-muted);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--c-primary-light);
  white-space: pre-wrap;
  word-break: break-word;
}
.customer-card__note--empty { color: var(--c-text-faint); font-style: italic; }

.customer-card__note-wrap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--c-primary-light);
}
.customer-card__note-wrap .customer-card__note {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.customer-card__note-edit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--c-primary-mid);
  background: var(--c-primary-pale);
  margin-top: 1px;
}
.customer-card__note-edit:active { background: var(--c-primary-light); }
@media (hover: hover) {
  .customer-card__note-edit:hover { background: var(--c-primary-light); }
}

/* ── Linkified phone numbers / case-number references (in notes) ─────────── */
.note-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 4px;
  padding: 0 2px;
  margin: 0 -2px;
}
.note-link svg { flex-shrink: 0; }
.note-link--phone { color: var(--c-primary); }
.note-link--phone:active { background: var(--c-primary-pale); }
.note-link--case { color: var(--c-primary-mid); }
.note-link--case:active { background: var(--c-primary-pale); }
.note-link--loading { opacity: .55; pointer-events: none; }
@media (hover: hover) {
  .note-link--phone:hover { background: var(--c-primary-pale); }
  .note-link--case:hover  { background: var(--c-primary-pale); }
}

/* ── Articles list ───────────────────────────────────────────────────────── */
.articles-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.article-item {
  background: var(--c-bg);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.article-item__title { font-size: .92rem; font-weight: 700; color: var(--c-text); }
.article-item__meta  { font-size: .8rem; color: var(--c-text-faint); font-family: var(--font-mono); }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* NOTE: an earlier "tabs move into header / 860px content / centered dialog"
   desktop treatment used to live here. It predated (and directly fought with)
   the unified design-system pass below — competing max-widths on .app-main,
   a near-invisible header-nav tab bar, and a detail-sheet that broke away from
   the shared .sheet component. Removed in favour of the single desktop
   treatment in the "Design pass" section at the end of this file. */

/* ── Login page ─────────────────────────────────────────────────────────── */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100dvh; padding: 24px 16px; background: var(--c-bg);
}
.login-card {
  background: var(--c-surface); border-radius: 20px;
  box-shadow: 0 8px 40px rgba(28,36,51,.12);
  padding: 40px 40px 36px; width: 100%; max-width: 400px;
}
.login-brand { display:flex; align-items:baseline; gap:6px; margin-bottom:28px; justify-content:center; text-decoration:none; color:inherit; }
.login-brand__logo { font-size:1.5rem; font-weight:800; color:var(--c-primary); letter-spacing:.04em; }
.login-brand__sub  { font-size:.9rem; font-weight:500; color:var(--c-text-faint); }
.login-title { font-size:1.35rem; font-weight:700; color:var(--c-text); margin-bottom:20px; text-align:center; }
.login-error {
  background:var(--c-danger-light); border:1px solid rgba(184,48,48,.25);
  border-radius:10px; padding:10px 14px; font-size:.88rem; color:var(--c-danger); margin-bottom:16px;
}
@keyframes login-shake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}
.login-error--shake { animation: login-shake .35s ease; }
.login-form { display:flex; flex-direction:column; gap:16px; }
.login-field { display:flex; flex-direction:column; gap:6px; }
.login-field label { font-size:.82rem; font-weight:600; color:var(--c-text-muted); }
.login-field input {
  height:46px; padding:0 14px; border:1.5px solid var(--c-border);
  border-radius:10px; font-size:.95rem; font-family:var(--font); color:var(--c-text);
  background:var(--c-surface); transition:border-color .15s, box-shadow .15s; outline:none;
}
.login-field input:focus { border-color:var(--c-primary-mid); box-shadow:0 0 0 3px rgba(45,109,181,.15); }
.login-remember { display:flex; align-items:center; gap:8px; font-size:.88rem; color:var(--c-text-muted); cursor:pointer; }
.login-remember input[type="checkbox"] { width:16px; height:16px; accent-color:var(--c-primary); }
.login-submit {
  width:100%; height:48px; background:var(--c-primary); color:#fff;
  border-radius:var(--radius-btn); font-size:.95rem; font-weight:600;
  transition:background .15s, transform .1s; font-family:var(--font);
}
.login-submit:hover    { background:var(--c-primary-mid); }
.login-submit:active   { transform:scale(.98); }
.login-submit:disabled { opacity:.65; cursor:not-allowed; transform:none; }

/* ── Header user area ───────────────────────────────────────────────────── */
.app-header__user {
  display:flex; align-items:center; gap:12px; margin-right:8px;
}
.app-header__user-name { font-size:.8rem; color:rgba(255,255,255,.65); font-weight:500; }
.app-header__user-link {
  font-size:.78rem; font-weight:600; color:rgba(255,255,255,.55);
  padding:4px 10px; border-radius:6px; border:1px solid rgba(255,255,255,.2);
  transition:background .15s, color .15s; white-space:nowrap;
}
.app-header__user-link:hover { background:rgba(255,255,255,.1); color:#fff; }

/* ── Shared header: page nav (used by admin pages) ──────────────────────── */
.app-header__pagenav {
  display:flex; align-items:center; gap:4px;
}
.app-header__pagenav-link {
  font-size:.78rem; font-weight:600;
  color:rgba(255,255,255,.6); text-decoration:none;
  padding:5px 10px; border-radius:6px;
  transition:background .15s, color .15s; white-space:nowrap;
}
.app-header__pagenav-link:hover { background:rgba(255,255,255,.1); color:#fff; }
.app-header__pagenav-link--active { color:#fff; }

/* ── Admin page ─────────────────────────────────────────────────────────── */
.admin-body { background:var(--c-bg); min-height:100dvh; }
.admin-header {
  background:var(--c-primary); color:#fff; height:56px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; position:sticky; top:0; z-index:100;
  box-shadow:0 2px 12px rgba(28,63,110,.3);
}
.admin-header__brand { display:flex; align-items:baseline; gap:6px; }
.admin-header__logo  { font-size:1.2rem; font-weight:800; color:#fff; letter-spacing:.04em; }
.admin-header__sub   { font-size:.8rem; color:rgba(255,255,255,.5); font-weight:500; }
.admin-header__nav   { display:flex; align-items:center; gap:8px; }
.admin-nav-link {
  font-size:.82rem; font-weight:600; color:rgba(255,255,255,.6);
  padding:6px 12px; border-radius:8px; transition:background .15s, color .15s; text-decoration:none;
}
.admin-nav-link:hover   { color:#fff; background:rgba(255,255,255,.1); }
.admin-nav-link--active { background:rgba(255,255,255,.15); color:#fff; }
.admin-nav-link--logout { border:1px solid rgba(255,255,255,.2); }

.admin-content { max-width:860px; margin:0 auto; padding:calc(var(--header-h) + 22px) var(--content-pad) 44px; }
.admin-section-title { font-size:1.3rem; font-weight:700; color:var(--c-text); margin-bottom:20px; }

.admin-card {
  background:var(--c-surface); border-radius:var(--radius-card);
  box-shadow:var(--shadow-card); overflow:hidden; margin-bottom:24px;
}
.admin-card__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--c-border);
}
.admin-card__title { font-size:.95rem; font-weight:700; color:var(--c-text); }
.admin-table { width:100%; border-collapse:collapse; }
.admin-table th {
  text-align:left; font-size:.7rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--c-text-faint); padding:10px 20px;
  border-bottom:1px solid var(--c-border); white-space:nowrap;
}
.admin-table td { padding:12px 20px; font-size:.9rem; color:var(--c-text); border-bottom:1px solid var(--c-border); }
.admin-table tr:last-child td { border-bottom:none; }
.admin-table tr:hover td { background:var(--c-bg); }

.role-badge {
  font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:2px 8px; border-radius:var(--radius-chip);
}
.role-badge--admin { background:var(--c-primary-pale); color:var(--c-primary); }
.role-badge--user  { background:var(--c-grey-light); color:var(--c-text-muted); }
.role-badge--demo  { background:var(--c-accent-light); color:var(--c-accent-dark, #c45e00); }

.btn--danger { background:var(--c-danger); color:#fff; }
.btn--danger:hover { background:#a02828; }
.btn--sm { height:36px; padding:0 14px; font-size:.82rem; border-radius:10px; }

.btn-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px;
  background:transparent; border:none; cursor:pointer;
  color:var(--c-text-faint); transition:background .15s, color .15s;
}
.btn-icon svg { width:18px; height:18px; display:block; }
.btn-icon--delete:hover { background:var(--c-danger-light); color:var(--c-danger); }

/* ── Modal overlay ─────────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(20,30,48,.5); z-index:400;
  display:flex; align-items:center; justify-content:center; padding:24px;
  backdrop-filter:blur(2px);
}
.modal-overlay.hidden { display:none; }
.modal {
  background:var(--c-surface); border-radius:20px; padding:32px;
  width:100%; max-width:440px;
  box-shadow:0 16px 48px rgba(28,36,51,.2);
}
.modal__title { font-size:1.15rem; font-weight:700; margin-bottom:24px; color:var(--c-text); }
.form-field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.form-field label { font-size:.82rem; font-weight:600; color:var(--c-text-muted); }
.form-field input, .form-field select {
  height:44px; padding:0 12px; border:1.5px solid var(--c-border); border-radius:10px;
  font-size:.9rem; font-family:var(--font); color:var(--c-text); background:var(--c-surface);
  transition:border-color .15s; outline:none;
}
.form-field input:focus, .form-field select:focus {
  border-color:var(--c-primary-mid); box-shadow:0 0 0 3px rgba(45,109,181,.12);
}
.form-error {
  background:var(--c-danger-light); border:1px solid rgba(184,48,48,.2);
  border-radius:8px; padding:8px 12px; font-size:.85rem; color:var(--c-danger); margin-bottom:12px;
}
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }

/* ── Lager view ─────────────────────────────────────────────────────────── */
/* No own edge padding — the wrapper sits inside .app-main, which owns the
   global gutter. This keeps every view exactly --content-pad from the edge. */
.lager-wrap { padding: 0; }

.lager-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.lager-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  font-size: .9rem;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--radius-btn);
  border: 1.5px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text);
  outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
.lager-input:focus { border-color: var(--c-primary-mid); box-shadow: var(--focus-ring); }
.lager-search-btn {
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 700;
  height: 42px;
  padding: 0 16px;
  border-radius: var(--radius-btn);
  background: var(--c-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}
.lager-search-btn:active { background: var(--c-primary-mid); }
.lager-reset-btn {
  font-family: var(--font);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 10px;
  height: 38px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-faint);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.lager-reset-btn:active { color: var(--c-danger); border-color: var(--c-danger); }
.lager-scan-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-btn);
  border: 1.5px solid var(--c-border-strong);
  background: var(--c-surface);
  color: var(--c-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.lager-scan-btn:active,
.lager-scan-btn.active { background: var(--c-primary-pale); color: var(--c-primary-mid); border-color: var(--c-primary-light); }

.lager-cam-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: 16px;
}
.lager-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lager-cam-close {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.55);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lager-result-area { display: flex; flex-direction: column; gap: 12px; }

.lager-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px;
  gap: 12px;
}
.lager-idle-icon { width: 40px; height: 40px; color: var(--c-text-faint); }
.lager-idle-text { font-size: .85rem; color: var(--c-text-faint); text-align: center; }

.lager-loading {
  padding: 32px;
  text-align: center;
  color: var(--c-text-faint);
  font-size: .85rem;
}
.lager-no-results {
  padding: 32px;
  text-align: center;
  color: var(--c-text-faint);
  font-size: .85rem;
}
.lager-no-results--error { color: var(--c-danger); }

.lager-card {
  background: var(--c-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lager-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
}
.lager-card__productno {
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-text-faint);
  letter-spacing: .04em;
  font-family: var(--font-mono);
}
.lager-card__grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.lager-card__info {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.lager-card__info-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--c-text-faint);
  text-transform: uppercase;
  letter-spacing: .05em;
  min-width: 64px;
  flex-shrink: 0;
}
.lager-card__info-value {
  font-size: .92rem;
  font-weight: 600;
  color: var(--c-text);
}
.lager-card__info-value--stock-ok   { color: var(--c-success); }
.lager-card__info-value--stock-low  { color: var(--c-warning); }
.lager-card__info-value--stock-none { color: var(--c-danger); }
.lager-card__hq-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-primary-mid);
  padding: 8px 14px;
  border-radius: var(--radius-btn);
  border: 1.5px solid var(--c-primary-light);
  background: transparent;
  text-decoration: none;
  transition: background .15s;
  align-self: flex-start;
}
.lager-card__hq-btn:hover  { background: var(--c-primary-pale); }
.lager-card__hq-btn:active { background: var(--c-primary-pale); }

/* ── Settings view ──────────────────────────────────────────────────────── */
.settings-groups {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 14px 0 44px;   /* -10px top vs. before, per design pass */
}
.settings-group-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--c-text-faint);
  margin-bottom: 7px;
  padding: 0 4px;
}
.settings-group-items {
  background: var(--c-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  min-height: 54px;
  border-bottom: 1px solid var(--c-border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row__icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--c-primary-pale);
  color: var(--c-primary-mid);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.settings-row__icon--danger {
  background: var(--c-danger-light);
  color: var(--c-danger);
}
.settings-row__label {
  flex: 1;
  font-size: .95rem;
  color: var(--c-text);
  font-weight: 500;
}
.settings-row--link {
  cursor: pointer;
  transition: background .12s;
  text-decoration: none;
}
.settings-row--link:active { background: var(--c-bg); }
.settings-row--danger .settings-row__label { color: var(--c-danger); }

/* ── Detail action grid ──────────────────────────────────────────────────── */
.btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-border);
  margin: 20px -20px calc(-12px - var(--bottom-safe));
  padding-bottom: var(--bottom-safe);
}

.btn-grid-item {
  background: var(--c-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 12px 20px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-text-muted);
  text-decoration: none;
  font-family: var(--font);
  border: none;
  cursor: pointer;
  transition: background .12s;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  line-height: 1.25;
}

.btn-grid-item:active    { filter: brightness(.92); }
.btn-grid-item svg       { width: 26px; height: 26px; flex-shrink: 0; }
.btn-grid-item--maps     { background: #fbbc04; color: #1c2433; }
.btn-grid-item--call     { background: #34a853; color: #fff; }
.btn-grid-item--crm      { background: #1a73e8; color: #fff; }
.btn-grid-item--scan     { color: var(--c-primary); }

/* ── Scan-entry button (detail panel footer) ────────────────────────────── */
.btn--scan-entry {
  width: 100%;
  margin-top: 10px;
  padding: 13px 16px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: .95rem;
  font-weight: 600;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  transition: opacity .15s;
}
.btn--scan-entry:active { opacity: .8; }
.btn--scan-entry svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Scanner mode (inside detail panel body) ────────────────────────────── */

/* Camera */
.scan-cam-wrap {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
  margin: -4px 0 0;
}
.scan-cam-wrap video {
  width: 100%;
  /* A fixed wide/short strip (not the camera's real 4:3-ish shape) — matches the
     shape of a barcode itself, so "does it fit in this strip" is a direct visual
     check, with no black bars regardless of what aspect ratio the camera actually
     negotiates (native BarcodeDetector on Android doesn't request one at all).
     Cropping here only affects what's *displayed* — the decoder always reads the
     full camera frame regardless of CSS, so nothing outside this strip is lost
     from the scan itself; cropping the view just removes the useless margins. */
  aspect-ratio: 2.4 / 1;
  object-fit: cover;
  display: block;
}
.scan-cam-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.scan-cam-box {
  position: relative;
  width: min(70%, 240px);
  aspect-ratio: 3 / 1;
  box-shadow: 0 0 0 2000px rgba(0,0,0,.38);
}
/* Machine mode's GS1-128 barcode packs far more bars into the same width than a
   product EAN-13. At a fixed low camera resolution (chosen for decode speed),
   a barcode framed to fit the normal 70%-wide guide sits too far from the
   camera to resolve reliably — a wider guide nudges the user to hold it closer
   and larger in frame, without changing the resolution/speed tradeoff at all. */
.scan-cam-box--wide {
  width: min(94%, 340px);
}
.scan-cam-box::before, .scan-cam-box::after,
.scan-cam-box > span::before, .scan-cam-box > span::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-style: solid;
  border-color: rgba(255,255,255,.9);
}
.scan-cam-box::before       { top:0;    left:0;  border-width:3px 0 0 3px; border-radius:4px 0 0 0; }
.scan-cam-box::after        { top:0;    right:0; border-width:3px 3px 0 0; border-radius:0 4px 0 0; }
.scan-cam-box > span::before { bottom:0; left:0;  border-width:0 0 3px 3px; border-radius:0 0 0 4px; }
.scan-cam-box > span::after  { bottom:0; right:0; border-width:0 3px 3px 0; border-radius:0 0 4px 0; }
.scan-cam-line {
  position: absolute;
  left: 2px; right: 2px;
  height: 2px;
  background: var(--c-accent);
  box-shadow: 0 0 8px var(--c-accent);
  animation: scan-sweep 1.8s ease-in-out infinite;
}
@keyframes scan-sweep {
  0%   { top: 6%;  opacity: 1; }
  46%  { top: 94%; opacity: 1; }
  49%  { top: 94%; opacity: 0; }
  52%  { top: 6%;  opacity: 0; }
  55%  { top: 6%;  opacity: 1; }
  100% { top: 6%;  opacity: 1; }
}

/* Status badge — floats inside the camera wrap, bottom-left */
.scan-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  pointer-events: none;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 10px 12px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.scan-badge--on   { background: var(--c-success); color: #fff; }
.scan-badge--wait { background: rgba(80,90,110,.85); color: #fff; }
.scan-badge--err  { background: var(--c-danger); color: #fff; }

/* (scan-just-added removed — row animation handles feedback) */

/* Materials list */
.scan-materials {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 6px;
}
.scan-mat-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--c-border);
}
.scan-mat-hdr__title {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-text-muted);
}
.scan-mat-hdr__total {
  font-size: .85rem;
  font-weight: 700;
  color: var(--c-text);
}
.scan-mat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--c-border);
}
.scan-mat-item:last-child { border-bottom: none; }
.scan-mat-item__info { flex: 1; min-width: 0; }
.scan-mat-item__name {
  font-size: .88rem;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scan-mat-item__no { font-size: .72rem; color: var(--c-text-muted); margin-top: 1px; }
.scan-mat-item__nums { text-align: right; flex-shrink: 0; }
.scan-mat-item__qty { font-size: .72rem; color: var(--c-text-muted); }
.scan-mat-item__price { font-size: .88rem; font-weight: 600; color: var(--c-text); }
.scan-mat-empty {
  padding: 18px 14px;
  font-size: .85rem;
  color: var(--c-text-faint);
  text-align: center;
}

/* Row highlight animation when just added/updated */
@keyframes mat-row-in {
  0%   { background: var(--c-success-light); }
  100% { background: transparent; }
}
.scan-mat-item.just-added { animation: mat-row-in 1.4s ease-out; }

/* Trash button on each material row */
.scan-mat-del {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--c-text-faint);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
.scan-mat-del:active { background: var(--c-danger-light); color: var(--c-danger); }
.scan-mat-del svg { width: 16px; height: 16px; pointer-events: none; }
.scan-mat-del:disabled { opacity: .35; }

/* Camera glow feedback animations */
@keyframes glow-ok-anim {
  0%   { box-shadow: 0 0 0 0 rgba(30, 122, 79, 0);   }
  25%  { box-shadow: 0 0 0 10px rgba(30, 122, 79, .55); }
  100% { box-shadow: 0 0 0 0 rgba(30, 122, 79, 0);   }
}
@keyframes glow-err-anim {
  0%   { box-shadow: 0 0 0 0 rgba(184, 48, 48, 0);   }
  20%  { box-shadow: 0 0 0 12px rgba(184, 48, 48, .6); }
  60%  { box-shadow: 0 0 0 10px rgba(184, 48, 48, .4); }
  100% { box-shadow: 0 0 0 0 rgba(184, 48, 48, 0);   }
}
.scan-cam-wrap.glow-ok  { animation: glow-ok-anim  .55s ease-out; }
.scan-cam-wrap.glow-err { animation: glow-err-anim .65s ease-out; }

/* Back button */
.scan-back-btn {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 4px;
  padding: 11px 16px;
  background: transparent;
  color: var(--c-text-muted);
  border: 1.5px solid var(--c-border);
  border-radius: 12px;
  font-size: .88rem;
  font-weight: 600;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background .12s;
}
.scan-back-btn:active { background: var(--c-bg); }
.scan-back-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Scanner bottom bar (Tilbage + Hurtig tilføj) ───────────────────────── */
.scan-bottom-bar {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.scan-bottom-bar .scan-back-btn {
  flex: 1;
  margin-top: 0;
  margin-bottom: 0;
  width: auto;
}

/* Quick-add trigger button */
.qa-trigger-btn {
  flex: 1;
  padding: 11px 14px;
  background: var(--c-accent-light);
  color: var(--c-accent-dark, #c45e00);
  border: 1.5px solid rgba(240,120,0,.25);
  border-radius: 12px;
  font-size: .88rem;
  font-weight: 700;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: background .12s;
}
.qa-trigger-btn:active { background: #ffe0b2; }

/* ── Quick-add bottom sheet ─────────────────────────────────────────────── */
.qa-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,0);
  transition: background .28s ease;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.qa-overlay--open {
  background: rgba(0,0,0,.45);
  pointer-events: auto;
}
.qa-sheet {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--c-surface);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-sheet);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
  max-height: 70dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.qa-overlay--open .qa-sheet {
  transform: translateY(0);
}
.qa-sheet-handle {
  width: 36px; height: 4px;
  background: var(--c-border-strong);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}
.qa-sheet-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.qa-sheet-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
}
.qa-sheet-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c-bg);
  border: none;
  font-size: .95rem;
  color: var(--c-text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s;
}
.qa-sheet-close:active { background: var(--c-border); }
.qa-sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 8px;
  flex: 1;
}

/* ── Quick-add item groups (shared by sheet) ────────────────────────────── */
.qa-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--c-border);
}
.qa-group:last-child { border-bottom: none; }
.qa-group-lbl {
  width: 100%;
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-text-faint);
  margin-bottom: -2px;
}

/* Simple one-tap button */
.qa-btn {
  padding: 7px 14px;
  background: var(--c-primary-pale);
  color: var(--c-primary);
  border: none;
  border-radius: var(--radius-chip);
  font-size: .85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .12s, background .12s, color .12s;
  line-height: 1.2;
}
.qa-btn:active   { opacity: .7; }
.qa-btn:disabled { opacity: .38; cursor: default; }
.qa-btn--ok      { background: var(--c-success-light) !important; color: var(--c-success) !important; }

/* Qty row (needs_qty items) */
.qa-qty-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.qa-qty-lbl {
  font-size: .85rem;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
}

/* Stepper control */
.qa-stepper {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
}
.qa-step {
  width: 30px;
  height: 30px;
  background: var(--c-bg);
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background .1s;
}
.qa-step:active { background: var(--c-primary-pale); }
.qa-step-n {
  min-width: 28px;
  text-align: center;
  font-size: .9rem;
  font-weight: 700;
  color: var(--c-text);
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1.5px solid var(--c-border);
  border-right: 1.5px solid var(--c-border);
}

/* Qty confirm button */
.qa-add-btn {
  padding: 6px 13px;
  background: var(--c-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .12s;
  line-height: 1.2;
}
.qa-add-btn:active   { opacity: .8; }
.qa-add-btn:disabled { opacity: .38; cursor: default; }

/* ── Camera pause state ─────────────────────────────────────────────────── */
.scan-pause-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38vw;
  max-height: 210px;
  gap: 10px;
  background: #111;
}
.scan-pause-icon {
  width: 36px;
  height: 36px;
  color: rgba(255,255,255,.3);
  flex-shrink: 0;
}
.scan-pause-label {
  font-size: .78rem;
  font-weight: 500;
  color: rgba(255,255,255,.45);
  letter-spacing: .02em;
}
.scan-resume-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  padding: 9px 18px;
  background: var(--c-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .12s;
}
.scan-resume-btn:active { opacity: .8; }

/* ── Missing-barcodes admin page ───────────────────────────────────────── */
.mb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.mb-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--c-text-faint);
}
.mb-empty__icon { font-size: 2.5rem; margin-bottom: 12px; }
.mb-empty__text { font-size: 1rem; font-weight: 600; }

.mb-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mb-card {
  background: var(--c-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-left: 4px solid var(--c-border);
  transition: opacity .3s;
}
.mb-card--deleting { opacity: 0; }
.mb-card__thumb {
  flex-shrink: 0;
  width: 72px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
}
.mb-card__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-faint);
  font-size: .7rem;
}
.mb-card__info { flex: 1; min-width: 0; }
.mb-card__barcode {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: .05em;
}
.mb-card__date {
  font-size: .78rem;
  color: var(--c-text-faint);
  margin-top: 2px;
}

.mb-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mb-lightbox.open { display: flex; }
.mb-lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.mb-lightbox__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.2rem; cursor: pointer;
  border: none;
}

/* ── Quick-add admin page ───────────────────────────────────────────────── */
.qa-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.qa-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--c-text-faint);
}
.qa-empty__icon { font-size: 2.5rem; margin-bottom: 12px; }
.qa-empty__text { font-size: 1rem; font-weight: 600; }

.qa-list { display: flex; flex-direction: column; gap: 8px; }

.qa-group-hdr {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  padding: 4px 0 2px;
  margin-top: 8px;
}
.qa-group-hdr:first-child { margin-top: 0; }

.qa-item {
  background: var(--c-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-left: 4px solid var(--c-border);
  transition: opacity .3s;
}
.qa-item--deleting { opacity: 0; }

.qa-sort-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.qa-sort-btn {
  width: 26px;
  height: 22px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-text-muted);
  font-size: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s;
}
.qa-sort-btn:hover     { background: var(--c-primary-pale); color: var(--c-primary); }
.qa-sort-btn:active    { background: var(--c-primary-pale); }
.qa-sort-btn:disabled  { opacity: .25; cursor: default; }

.qa-item__info { flex: 1; min-width: 0; }
.qa-item__label {
  font-weight: 700;
  font-size: .95rem;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qa-item__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.qa-item__pno {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--c-text-muted);
}
.qa-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-chip);
}
.qa-badge--qty { background: var(--c-accent-light); color: var(--c-accent-dark, #c45e00); }
.qa-badge--grp { background: var(--c-primary-pale); color: var(--c-primary); }

.qa-item__actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Demo-permissions admin page ────────────────────────────────────────── */
.dp-list { display: flex; flex-direction: column; }

.dp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--c-border);
}
.dp-row:last-child { border-bottom: none; }

.dp-row--child { padding-left: 38px; background: var(--c-bg); }
.dp-row--disabled { opacity: .45; pointer-events: none; }

.dp-row__text { flex: 1; min-width: 0; }
.dp-row__label { font-size: .9rem; font-weight: 600; color: var(--c-text); }
.dp-row__desc  { font-size: .78rem; color: var(--c-text-faint); margin-top: 2px; }

/* CSS-only toggle switch */
.dp-toggle { display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.dp-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.dp-toggle__track {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--c-border);
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}
.dp-toggle__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s;
}
.dp-toggle__input:checked + .dp-toggle__track {
  background: var(--c-primary);
}
.dp-toggle__input:checked + .dp-toggle__track::after {
  transform: translateX(20px);
}
.dp-toggle__input:focus-visible + .dp-toggle__track {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Feedback bar */
.dp-feedback {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 500;
  margin-bottom: 14px;
}
.dp-feedback--ok    { background: var(--c-success-light); color: var(--c-success); }
.dp-feedback--error { background: var(--c-danger-light);  color: var(--c-danger); }
.dp-feedback.hidden { display: none; }

/* ── Timeline day view ───────────────────────────────────────────────────── */
.timeline {
  display: flex;
  margin: 4px 0 8px;
}

.timeline__labels {
  position: relative;
  width: 46px;
  flex-shrink: 0;
  overflow: visible;
}

.timeline__label {
  position: absolute;
  right: 10px;
  font-size: .67rem;
  font-weight: 600;
  color: var(--c-text-faint);
  white-space: nowrap;
  letter-spacing: .01em;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.timeline__events {
  position: relative;
  flex: 1;
  min-width: 0;
  border-left: 1.5px solid var(--c-border);
  overflow: visible;
}

.timeline__grid-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-border);
  pointer-events: none;
}

.timeline__grid-line--half {
  background: transparent;
  border-top: 1px dashed var(--c-border-strong);
  opacity: 0.5;
}

.timeline__now {
  position: absolute;
  left: -5px;
  right: 0;
  height: 2px;
  background: var(--c-danger);
  z-index: 3;
  pointer-events: none;
}

.timeline__now::before {
  content: '';
  position: absolute;
  left: 0;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-danger);
}

.timeline__event {
  position: absolute;
  left: 8px;
  right: 0;
  padding-bottom: 5px;
}

/* ── Timeline event card (calendar-style) ────────────────────────────────── */
.tl-event {
  height: 100%;
  overflow: hidden;
  padding: 10px 10px 8px 9px;
  border: 1.5px solid var(--c-primary-light);
  border-radius: 6px;
  background: var(--c-surface);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  -webkit-tap-highlight-color: transparent;
  transition: filter .1s;
}
.tl-event:active { filter: brightness(.96); }

.tl-event--done  { opacity: .55; }
.tl-event--draft { opacity: .55; }

.tl-event__name {
  font-size: .86rem;
  font-weight: 700;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  flex-shrink: 0;
}

.tl-event__addr {
  font-size: .72rem;
  color: var(--c-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  flex-shrink: 0;
}

.tl-event__desc {
  font-size: .72rem;
  color: var(--c-text-muted);
  line-height: 1.35;
  flex-shrink: 0;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tl-event__tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  margin-top: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.tl-event__tags .tag-chip {
  font-size: .6rem;
  padding: 1px 6px;
}

.timeline__untimed-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-text-faint);
  margin-bottom: 6px;
  padding: 0 2px;
}

/* ── Landscape blocker ──────────────────────────────────────────────────── */
.landscape-blocker {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-primary);
  color: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
}
.landscape-blocker__icon { font-size: 2.8rem; }
.landscape-blocker__text { font-size: 1.1rem; font-weight: 700; }
.landscape-blocker__sub  { font-size: .85rem; opacity: .65; }

/* Show on phones in landscape (height < 500px rules out desktops) */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .landscape-blocker { display: flex; }
}

/* ── Timer (tidsregistrering) ───────────────────────────────────────────── */
.timer-wrap { padding: 0; }

.timer-banner {
  background: var(--c-warning-light);
  color: var(--c-warning);
  border: 1px solid #f0d9b0;
  border-radius: var(--radius-card);
  padding: 12px 14px;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 14px;
}

.timer-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.timer-card {
  background: var(--c-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
}
.timer-card--accent { background: var(--c-primary); color: #fff; }
.timer-card__label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-text-faint);
  margin-bottom: 6px;
}
.timer-card--accent .timer-card__label { color: rgba(255,255,255,.65); }
.timer-card__value {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.timer-card__value--neg { color: var(--c-danger); }
.timer-card--accent .timer-card__value--neg { color: #ffb4b4; }
.timer-card__sub {
  font-size: .72rem;
  color: var(--c-text-muted);
  margin-top: 4px;
  line-height: 1.35;
}
.timer-card--accent .timer-card__sub { color: rgba(255,255,255,.78); }

.timer-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.timer-btn-main { flex: 1.4; }
.timer-actions .btn { height: 46px; font-size: .92rem; }
.timer-actions .btn--outline { flex: 1; }

.timer-recent__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.timer-recent__title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-text-faint);
}
.timer-month-link {
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-primary-mid);
  padding: 4px 0;
}
.timer-recent__list {
  background: var(--c-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.timer-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--c-border);
  cursor: pointer;
}
.timer-entry:last-child { border-bottom: none; }
.timer-entry:active { background: var(--c-primary-pale); }
.timer-entry__left { flex: 1; min-width: 0; }
.timer-entry__date {
  font-size: .88rem;
  font-weight: 700;
  text-transform: capitalize;
}
.timer-entry__date--sat { color: var(--c-accent-dark); }
.timer-entry__meta { font-size: .76rem; color: var(--c-text-muted); }
.timer-entry__meta--timeoff { color: var(--c-purple); font-weight: 600; }
.timer-entry__meta--payout  { color: var(--c-success); font-weight: 600; }
.timer-entry__note {
  font-size: .72rem;
  color: var(--c-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timer-entry__hours {
  font-size: .95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.timer-entry__hours--spend { color: var(--c-purple); }

.timer-empty {
  text-align: center;
  color: var(--c-text-faint);
  font-size: .85rem;
  padding: 26px 16px;
  line-height: 1.7;
}
.timer-empty--error { color: var(--c-danger); }

/* Timer sheets reuse the shared .sheet component (see "Sheet" section). */
.timer-btn-delete {
  flex: 0 0 auto !important;
  color: var(--c-danger);
  border: 1px solid var(--c-danger-light);
  background: var(--c-danger-light);
  border-radius: var(--radius-btn);
  padding: 0 16px;
  font-weight: 600;
}

.timer-form-error {
  background: var(--c-danger-light);
  color: var(--c-danger);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.timer-field { display: block; margin-bottom: 12px; }
.timer-field__label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-text-muted);
  margin-bottom: 5px;
}
.timer-field-row { display: flex; gap: 10px; }
.timer-field-row .timer-field { flex: 1; }

.timer-input {
  width: 100%;
  height: 44px;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--radius-btn);
  padding: 0 12px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--c-surface);
  color: var(--c-text);
}
.timer-input:focus { outline: none; border-color: var(--c-primary-mid); box-shadow: var(--focus-ring); }
.timer-input--sm { height: 38px; width: 110px; font-size: .9rem; text-align: right; }

.comment-textarea {
  width: 100%;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--radius-btn);
  padding: 10px 12px;
  font-size: .95rem;
  font-family: inherit;
  line-height: 1.5;
  background: var(--c-surface);
  color: var(--c-text);
  resize: vertical;
  margin-bottom: 4px;
}
.comment-textarea:focus { outline: none; border-color: var(--c-primary-mid); box-shadow: var(--focus-ring); }

/* ── Comments list (case detail) ─────────────────────────────────────────── */
.comment-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--c-primary-mid);
  padding: 4px 0 10px;
}
.comment-toggle::before {
  content: '';
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .15s;
}
.comment-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.comment-list__empty {
  font-size: .85rem;
  color: var(--c-text-faint);
  padding: 2px 0 4px;
}
.comment-list__empty--error { color: var(--c-danger); }
.comment-item {
  background: var(--c-bg);
  border-radius: 10px;
  padding: 10px 12px;
}
.comment-item__meta {
  font-size: .7rem;
  font-weight: 700;
  color: var(--c-text-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
.comment-item__text {
  font-size: .9rem;
  color: var(--c-text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.timer-field--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.timer-field--toggle .timer-field__label { margin-bottom: 0; }

.timer-switch { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; }
.timer-switch input { opacity: 0; width: 0; height: 0; }
.timer-switch__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--c-border-strong);
  transition: background .15s;
}
.timer-switch__track::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .15s;
}
.timer-switch input:checked + .timer-switch__track { background: var(--c-success); }
.timer-switch input:checked + .timer-switch__track::before { transform: translateX(20px); }

.timer-preview {
  font-size: .86rem;
  font-weight: 600;
  color: var(--c-primary-mid);
  min-height: 1.3em;
  margin-top: 2px;
  white-space: pre-line;
  line-height: 1.5;
}
.timer-preview--warn { color: var(--c-warning); }

.timer-segment {
  display: flex;
  background: var(--c-bg);
  border-radius: var(--radius-btn);
  padding: 3px;
  margin-bottom: 14px;
}
.timer-segment__btn {
  flex: 1;
  height: 38px;
  border-radius: 9px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--c-text-muted);
}
.timer-segment__btn--active {
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--shadow-sm);
}

/* Month overlay */
.timer-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.timer-month-nav__btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 1.4rem;
  color: var(--c-primary-mid);
  background: var(--c-primary-pale);
}
.timer-month-nav__label {
  font-size: 1rem;
  font-weight: 800;
  text-transform: capitalize;
}
.timer-month-body { flex: 1; overflow-y: auto; }

.timer-week { margin-bottom: 16px; }
.timer-week__hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-text-faint);
  padding: 0 2px 6px;
}
.timer-week__sum { font-weight: 700; text-transform: none; letter-spacing: 0; }
.timer-week__sum--ot { color: var(--c-accent-dark); }
.timer-week .timer-entry {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  margin-bottom: 6px;
}
.timer-month-total {
  text-align: center;
  font-size: .86rem;
  font-weight: 700;
  color: var(--c-text-muted);
  padding: 10px 0 4px;
  border-top: 2px solid var(--c-border);
}

/* Settings group */
.timer-settings { padding: 4px 16px 12px; }
.timer-settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  border-bottom: 1px solid var(--c-border);
}
.timer-settings__row:last-of-type { border-bottom: none; }
.timer-settings__label { font-size: .88rem; color: var(--c-text); }
.timer-settings__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 12px;
}
.timer-settings__feedback { font-size: .8rem; font-weight: 600; }
.timer-settings__feedback--ok  { color: var(--c-success); }
.timer-settings__feedback--err { color: var(--c-danger); }

/* Leder/Revisor role badges (admin/users.php) */
.role-badge--leder   { background: var(--c-purple-light);  color: var(--c-purple); }
.role-badge--revisor { background: var(--c-success-light); color: var(--c-success); }

/* ── Time overview dashboard (admin/time-overview.php) ────────────────────
   A real table, not stacked mobile cards — this page's primary reader is
   the bookkeeper, on a desktop browser, scanning a whole team at once. */
.to-month-nav { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.to-month-nav__btn {
  width:34px; height:34px; border-radius:9px; font-size:1.15rem; font-weight:700;
  color:var(--c-primary-mid); background:var(--c-primary-pale);
  transition:background .15s;
}
.to-month-nav__label { font-size:.95rem; font-weight:800; text-transform:capitalize; min-width:112px; text-align:center; }

.to-stats-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:16px; margin-bottom:24px;
}
.to-stat-card {
  background:var(--c-surface); border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  padding:18px 20px; border-left:4px solid var(--c-border-strong);
}
.to-stat-card--warning { border-left-color:var(--c-warning); }
.to-stat-card--purple  { border-left-color:var(--c-purple); }
.to-stat-card--success { border-left-color:var(--c-success); }
.to-stat-card__label {
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c-text-faint); margin-bottom:6px;
}
.to-stat-card__value { font-size:1.75rem; font-weight:800; color:var(--c-text); font-variant-numeric:tabular-nums; }
.to-stat-card__value--warning { color:var(--c-warning); }
.to-stat-card__value--purple  { color:var(--c-purple); }
.to-stat-card__value--success { color:var(--c-success); }
.to-stat-card__sub { font-size:.78rem; color:var(--c-text-muted); margin-top:3px; }

.to-table th:not(:first-child), .to-table td:not(:first-child) { text-align:right; }
.to-table th:last-child { text-align:center; width:48px; }
.to-table tbody tr.to-row td:last-child { text-align:center; width:48px; }
.to-table tbody tr { cursor:pointer; }
.to-table .to-email { font-weight:700; }
.to-table .to-balance { font-weight:800; font-size:1.02rem; font-variant-numeric:tabular-nums; }
.to-table .to-balance--danger { color:var(--c-danger); }
.to-table .to-sub { font-size:.74rem; color:var(--c-text-faint); font-weight:400; margin-top:2px; }
.to-table .to-empty-cell { color:var(--c-text-faint); }

.to-pill {
  display:inline-block; font-size:.74rem; font-weight:700; padding:4px 10px;
  border-radius:var(--radius-chip); white-space:nowrap;
}
.to-pill + .to-pill { margin-top:4px; }
.to-pill--warning { background:var(--c-warning-light); color:var(--c-warning); }
.to-pill--purple  { background:var(--c-purple-light);  color:var(--c-purple); }

.to-expand-btn { transition:transform var(--dur) var(--ease); }
.to-expand-btn.is-open { transform:rotate(180deg); }

.to-detail-row.hidden { display:none; }
.to-detail-row td { padding:0; background:var(--c-bg); }
.to-detail-inner { padding:16px 22px; }

.to-week-hdr {
  display:flex; justify-content:space-between; gap:10px;
  font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--c-text-faint); margin:14px 0 4px;
}

/* Per-entry breakdown as ONE continuous table (not one table per week) so
   the browser sizes the date/time columns against every row's content at
   once — that's what keeps every clock time left-aligned under the next,
   instead of each week silently picking its own column widths. */
.to-entry-table { width:100%; border-collapse:collapse; margin-bottom:4px; table-layout:auto; }
.to-entry-table td {
  padding:4px 12px 4px 0; font-size:.82rem; color:var(--c-text-muted);
  vertical-align:baseline; border:none; text-align:left;
}
.to-entry-table tr:last-child td { padding-bottom:6px; }
.to-entry-table td:last-child { padding-right:0; }
.to-entry-table .to-entry-date  { white-space:nowrap; padding-left:4px; }
.to-entry-table .to-entry-time  { white-space:nowrap; font-variant-numeric:tabular-nums; }
.to-entry-table .to-entry-time--strong { font-weight:700; color:var(--c-text); }
.to-entry-table .to-entry-note  { color:var(--c-text-faint); width:100%; }
.to-entry-table .to-entry-hours {
  font-weight:700; color:var(--c-text); text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.to-entry-table .to-entry-hours--payout { color:var(--c-purple); }

.to-entry-table tr.to-entry-group .to-week-hdr { padding-left:4px; }

.to-entry-table tr.to-entry-group td { padding:0; }
.to-entry-table tr.to-entry-group .to-week-hdr { margin:14px 0 4px; }
.to-entry-table tr.to-entry-group:first-child .to-week-hdr { margin-top:0; }

@media (max-width: 560px) {
  .to-entry-table, .to-entry-table tbody, .to-entry-table tr, .to-entry-table td { display:block; width:auto; }
  .to-entry-table tr { padding:4px 0 8px; border-bottom:1px dashed var(--c-border); }
  .to-entry-table tr:last-child { border-bottom:none; }
  .to-entry-table tr.to-entry-group { padding:0; border-bottom:none; }
  .to-entry-table td { padding:0 !important; }
  .to-entry-table .to-entry-hours { text-align:left; margin-top:2px; }
}

@media (hover: hover) {
  .to-month-nav__btn:hover { background:var(--c-primary-light); }
  .to-table tbody tr:hover td { background:var(--c-primary-pale); }
}

/* Below the desktop breakpoint the table folds into label/value rows —
   still scannable, just stacked instead of columnar. */
@media (max-width: 720px) {
  .to-table thead { display:none; }
  .to-table, .to-table tbody, .to-table tr, .to-table td { display:block; width:100%; }
  .to-table tbody tr { border-bottom:1px solid var(--c-border); padding:12px 16px; }
  .to-table tbody tr:last-child { border-bottom:none; }
  .to-table td {
    border:none; padding:4px 0 !important; text-align:right !important;
    display:flex; align-items:center; justify-content:space-between; gap:10px; width:auto;
  }
  .to-table td::before { content:attr(data-label); font-weight:600; color:var(--c-text-muted); text-align:left; }
  .to-table .to-email {
    display:block; text-align:left !important; padding:0 0 8px !important; font-size:1.02rem;
  }
  .to-table .to-email::before { content:none; }
  .to-table td:last-child { justify-content:flex-end; padding-top:8px !important; }
  .to-table td:last-child::before { content:none; }
  .to-detail-row td { display:block; padding:0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Design pass — desktop framing, hover affordances, motion
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pointer devices get hover feedback; touch devices skip it (no sticky hover).
   These mirror each element's existing :active state for consistency. */
@media (hover: hover) {
  .timer-entry:hover,
  .settings-row--link:hover,
  .week-row:hover           { background: var(--c-primary-pale); }
  .quickjump__btn:hover     { background: var(--c-primary-light); }
  .timer-month-link:hover   { text-decoration: underline; }
  .timer-month-nav__btn:hover { background: var(--c-primary-light); }
}

/* On wider screens the mobile-first app becomes a centered column framed by an
   ambient backdrop, instead of a phone layout stretched across the viewport. */
@media (min-width: 640px) {
  /* Scoped to the main app (body.app-body). Admin pages keep their wider,
     table-friendly layout and are unaffected. */
  body.app-body {
    background:
      radial-gradient(1100px 560px at 50% -8%, rgba(45, 109, 181, .10), transparent 62%),
      linear-gradient(180deg, #eef1f5 0%, #e6eaf0 100%);
    background-attachment: fixed;
  }
  /* The app "pane": sits behind the content but above the ambient backdrop. */
  body.app-body::before {
    content: '';
    position: fixed;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--content-max);
    background: var(--c-bg);
    box-shadow: 0 0 0 1px var(--c-border), 0 18px 60px rgba(28, 36, 51, .16);
    z-index: -1;
    pointer-events: none;
  }
  /* Constrain the fixed chrome to the same column and centre it. */
  .app-body .app-header,
  .app-body .date-nav,
  .app-body .quickjump,
  .app-body .tab-bar {
    max-width: var(--content-max);
    margin-inline: auto;
  }
  /* Admin pages share the ambient backdrop (but keep their wider content). */
  body.admin-body {
    background:
      radial-gradient(1100px 560px at 50% -8%, rgba(45, 109, 181, .08), transparent 62%),
      linear-gradient(180deg, #eef1f5 0%, #e6eaf0 100%);
    background-attachment: fixed;
  }
  .admin-body .app-header { max-width: 860px; margin-inline: auto; }

  /* Sheets stay a bottom sheet (same component everywhere) but narrow to a
     centered drawer instead of spanning the full viewport width. Flex
     auto-margins do the centering — .detail-overlay/.sheet-overlay are flex
     rows, so this needs no other layout change. */
  .detail-sheet,
  .sheet {
    max-width: 640px;
    margin-inline: auto;
  }
}