/*
 * Vanilli OS Sweden — staff interface styles.
 *
 * Scandinavian clinical-office direction: restrained, calm, high readability,
 * generous whitespace. No decorative imagery, no marketing styling, no emoji
 * status icons, no motion beyond a focus transition.
 *
 * ── COLOUR NEVER CARRIES MEANING ALONE ──────────────────────────────────────
 * Every status pill and warning has a text label. Tone classes adjust colour
 * and nothing else, so the interface remains usable in monochrome and to a
 * colour-blind reader.
 */

:root {
  /* Surfaces */
  --surface: #ffffff;
  --surface-muted: #f4f6f7;
  --surface-raised: #ffffff;

  /* Text — measured against the surfaces above for contrast */
  --text: #16211f;          /* ~14.9:1 on --surface */
  --text-muted: #4a5754;    /* ~7.4:1 on --surface */
  --text-inverse: #ffffff;

  --border: #d3dbd9;
  --border-strong: #9dabaa;
  --focus: #0b5c4e;

  /* Status — each always paired with a text label */
  --success: #17624a;
  --success-surface: #e7f2ed;
  --warning: #7a4a00;
  --warning-surface: #fbf1e2;
  --danger: #8a2321;
  --danger-surface: #fbeceb;
  --information: #17506e;
  --information-surface: #e8f1f6;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(22, 33, 31, 0.06), 0 2px 8px rgba(22, 33, 31, 0.04);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--surface-muted);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--space-3); font-weight: 600; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; margin-top: var(--space-6); }
h3 { font-size: 1rem; }
p { margin: 0 0 var(--space-3); max-width: var(--measure); }

/* ── Focus: always visible, never removed ─────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  background: var(--surface);
  color: var(--text);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  z-index: 10;
}
.skip-link:focus { left: var(--space-2); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Login ────────────────────────────────────────────────────────────────── */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
}
.login__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-6);
  width: 100%;
  max-width: 26rem;
}
.brand { font-weight: 600; letter-spacing: 0.01em; margin-bottom: var(--space-1); }
.environment { color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--space-4); }

.banner--synthetic {
  background: var(--warning-surface);
  color: var(--warning);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem;
  margin-bottom: var(--space-5);
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.field { margin-bottom: var(--space-4); }
.field--inline { display: flex; align-items: center; gap: var(--space-3); }
label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: var(--space-1); }

input, select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  min-height: 2.75rem;    /* comfortable touch target */
}
.field--inline label { margin-bottom: 0; white-space: nowrap; }
.field--inline select { width: auto; }

/* Helper text under a field. Quieter than the label, never as quiet as
   decoration: "Din e-postadress är ditt användarnamn." is the sentence that
   stops somebody typing their name into the login box, so it has to be
   readable. Kept above the AA contrast floor by using the muted token rather
   than a one-off grey. */
.field__help {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.field__error {
  color: var(--danger);
  background: var(--danger-surface);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
}

.button {
  font: inherit;
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  min-height: 2.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.button--primary {
  background: var(--focus);
  border-color: var(--focus);
  color: var(--text-inverse);
  width: 100%;
}
.button--quiet { background: transparent; }
.button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Shell ────────────────────────────────────────────────────────────────── */
.shell__header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.shell__nav ul { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.nav__link { color: var(--text-muted); text-decoration: none; padding: var(--space-1) 0; border-bottom: 2px solid transparent; }
.nav__link:hover { color: var(--text); }
/* Active state uses weight AND a rule, not colour alone. */
.nav__link--active { color: var(--text); font-weight: 600; border-bottom-color: var(--focus); }
.shell__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.shell__main { padding: var(--space-6) var(--space-5); max-width: 72rem; margin: 0 auto; }
.shell__main:focus { outline: none; }

/* ── Cards and data ───────────────────────────────────────────────────────── */
.cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: var(--space-5); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.card__value { font-size: 2rem; font-weight: 600; margin: 0; }
.card__detail { list-style: none; margin: var(--space-2) 0 0; padding: 0; color: var(--text-muted); font-size: 0.875rem; }
.card__warning { font-size: 0.875rem; margin: var(--space-2) 0 0; }
.card__warning--warning { color: var(--warning); }
.card__warning--information { color: var(--information); }

.identity, .detail, .reference__meta { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.identity dt, .detail dt, .reference__meta dt { color: var(--text-muted); font-size: 0.875rem; }
.identity dd, .detail dd, .reference__meta dd { margin: 0; }
.offices { list-style: none; padding: 0; margin: 0 0 var(--space-4); color: var(--text-muted); }

/* ── Status pills — label always present ──────────────────────────────────── */
.pill {
  display: inline-block;
  padding: 0.125rem var(--space-2);
  border-radius: 999px;
  font-size: 0.8125rem;
  border: 1px solid currentColor;
}
.pill--neutral { color: var(--text-muted); }
.pill--success { color: var(--success); background: var(--success-surface); }
.pill--information { color: var(--information); background: var(--information-surface); }
.pill--muted { color: var(--text-muted); background: var(--surface-muted); }

/* ── Tables — scrollable rather than truncated ────────────────────────────── */
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.table thead th { font-size: 0.8125rem; color: var(--text-muted); text-transform: none; }

/* ── References and warnings ──────────────────────────────────────────────── */
.references { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.reference { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.reference__title { margin-bottom: var(--space-1); }
.reference__operational { font-size: 0.875rem; color: var(--text-muted); }
.reference__operational-label { font-weight: 500; }

.warnings { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-2); }
.warning { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius); border: 1px solid currentColor; font-size: 0.875rem; }
.warning__level { font-weight: 700; }
.warning--warning { color: var(--warning); background: var(--warning-surface); }
.warning--danger { color: var(--danger); background: var(--danger-surface); }

.disclaimer { font-size: 0.875rem; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: var(--space-3); margin-top: var(--space-5); }

.message { max-width: var(--measure); }
.message h1:focus { outline: none; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .shell__header { flex-direction: column; align-items: flex-start; }
  .shell__actions { margin-left: 0; }
  .shell__main { padding: var(--space-5) var(--space-4); }
  .identity, .detail, .reference__meta { grid-template-columns: 1fr; gap: var(--space-1); }
  .identity dt, .detail dt, .reference__meta dt { margin-top: var(--space-2); }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Office-demo indicator ─────────────────────────────────────────────────
   A persistent strip under the header naming the synthetic office and role.
   Amber like the login TESTDATA notice, so "this is a demonstration" reads
   the same way everywhere. */
.shell__office-banner {
  margin: 0;
  padding: 0.4rem 1.5rem;
  background: #fdf6ec;
  border-bottom: 1px solid #8a6d3b;
  color: #8a6d3b;
  font-size: 0.9rem;
}

/* Recovery codes are transcribed by hand; monospace and spacing matter. */
.recovery-codes__code { font-family: ui-monospace, monospace; letter-spacing: 0.06em; }
.mfa__key { font-family: ui-monospace, monospace; }

/* ── MFA enrolment ─────────────────────────────────────────────────────────
   The QR is the primary path and gets the space. The manual key is a
   fallback and stays collapsed until asked for. */
.mfa__step { margin: 1.25rem 0; }
.mfa__step-heading { font-size: 1rem; margin: 0 0 0.5rem; }
.mfa__qr {
  display: flex; justify-content: center;
  padding: 0.75rem; background: #fff;
  border: 1px solid #d9d5cc; border-radius: 8px;
}
.mfa__qr svg { display: block; max-width: 100%; height: auto; }
.mfa__hint { font-size: 0.9rem; color: #4a4a4a; margin: 0.5rem 0 0; }
.mfa__manual { margin: 1rem 0; }
.mfa__manual-panel { margin-top: 0.5rem; }
.mfa__key {
  width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.05em; word-break: break-all;
}
.mfa__copied { display: inline-block; margin-left: 0.5rem; font-size: 0.85rem; color: #2f6b4f; }
.button--link {
  background: none; border: none; padding: 0; color: #16294D;
  text-decoration: underline; cursor: pointer; font-size: 0.95rem;
}
.button--quiet { margin-top: 0.5rem; }

/* ══════════════════════════════════════════════════════════════════════════
 * VANILLI OS DESIGN SYSTEM — parity with the approved staff PWA.
 *
 * Everything below re-skins the components already rendered above: the same
 * class names, the same markup, the same view models. Nothing here changes
 * behaviour, authority, or what any control does — a stylesheet cannot, and
 * this one deliberately adds no new selectors that markup would have to grow
 * to satisfy.
 *
 * The approved language (vanilli-staff-se-pwa/staff.css): warm ivory ground,
 * navy chrome and primary action, teal for anything LIVE — active navigation,
 * confirmed state, focus, hover. Serif display type for headings and figures,
 * 18px cards, 100px pills.
 *
 * ── WHAT THE BRAND MAY NOT RECOLOUR ──────────────────────────────────────
 * The safety signals keep their own colours: emergency red and interruption
 * amber are unbranded on purpose, exactly as in the original. Colour still
 * never carries meaning alone — every pill and warning keeps its text label.
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
  --v-navy: #16294D;
  --v-navy-deep: #0D1A30;
  --v-teal: #2E9C95;
  --v-teal-bright: #3FBFB4;
  --v-teal-surface: #E9F5F3;
  --v-ivory: #F7F4EC;
  --v-warm-white: #FBF9F4;
  --v-cream: #F4EFE6;
  --v-sand: #D8A96C;
  --v-line: #E7DFD1;
  --v-serif: "Fraunces", Georgia, "Times New Roman", serif;

  /* The existing tokens now resolve to the brand palette, so every component
     above inherits the design system without a single markup change. */
  --surface: #ffffff;
  --surface-muted: var(--v-warm-white);
  --surface-raised: #ffffff;
  --text: #2C2E33;
  --text-muted: #5B6678;
  --border: var(--v-line);
  --border-strong: #C9BEA9;
  --focus: var(--v-teal);
  --success: #1d6b65;
  --success-surface: var(--v-teal-surface);
  --warning: #7C5A24;
  --warning-surface: var(--v-cream);
  --danger: #a4272b;
  --danger-surface: #fdecea;
  --information: var(--v-navy);
  --information-surface: #EDF1F8;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(13, 26, 48, 0.05), 0 6px 18px rgba(13, 26, 48, 0.05);
}

body { background: var(--v-warm-white); }

/* Display type: serif headings with a teal rule, as on the original. */
h1, h2, h3, .brand, .card__value {
  font-family: var(--v-serif);
  color: var(--v-navy);
  font-weight: 600;
}
h1 { border-bottom: 2px solid var(--v-teal); padding-bottom: var(--space-2); }
h2::before {
  content: ""; display: inline-block;
  width: 10px; height: 10px; margin-right: var(--space-2);
  border-radius: 3px; background: var(--v-teal); vertical-align: 0.05em;
}

/* ── Chrome: navy header, teal rule, ivory type ───────────────────────────── */
.shell__header {
  background: linear-gradient(180deg, var(--v-navy) 0%, var(--v-navy-deep) 100%);
  border-bottom: 3px solid var(--v-teal);
  color: var(--v-ivory);
}
.shell__header .brand { color: var(--v-ivory); }
.shell__office-banner { color: #B9D9D6; }

/* Navigation as pill tabs: navy when active, teal when reached. */
.nav__link {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 100px;
  padding: var(--space-2) var(--space-4);
  color: var(--v-ivory);
  font-weight: 600;
  font-size: 0.9rem;
}
.nav__link:hover { color: #fff; border-color: var(--v-teal); background: rgba(46, 156, 149, 0.22); }
.nav__link--active {
  background: #fff;
  border-color: #fff;
  color: var(--v-navy);
  box-shadow: inset 0 -3px 0 0 var(--v-teal);
}
.shell__actions .button {
  background: transparent;
  color: var(--v-ivory);
  border-color: rgba(62, 191, 180, 0.55);
  border-radius: 100px;
  min-height: 36px;
}
.shell__actions .button:hover { border-color: var(--v-teal); background: rgba(46, 156, 149, 0.22); }
.shell__actions select { border-radius: 100px; }

/* ── Dashboard counters: navy cards, teal numerals ────────────────────────── */
.card {
  background: linear-gradient(180deg, var(--v-navy) 0%, var(--v-navy-deep) 100%);
  border-color: var(--v-navy-deep);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card h2, .card h3 { color: #C7D3E4; }
.card h2::before { display: none; }
.card__value { color: var(--v-teal-bright); font-size: 1.9rem; }
.card__detail { color: #C7D3E4; }
.card:hover { border-color: var(--v-teal); }
/* The safety counters stay unbranded. */
.card__warning--warning { color: #FFD79A; }
.card__warning--information { color: #B9D9D6; }

/* ── Buttons: navy primary, teal secondary, 100px pills ───────────────────── */
.button { border-radius: 100px; font-weight: 600; }
.button--primary {
  background: var(--v-navy);
  border: 2px solid var(--v-navy);
  color: var(--v-ivory);
}
.button--primary:hover { background: var(--v-navy-deep); border-color: var(--v-navy-deep); }
.button--quiet { color: var(--v-teal); border-color: var(--v-teal); background: transparent; }
.button--quiet:hover { background: var(--v-teal-surface); color: var(--success); }

/* ── Lists and tables: card-like rows, navy header, teal hairline ─────────── */
.table {
  border: 1px solid var(--v-navy);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.table thead th {
  background: var(--v-navy);
  color: #fff;
  font-weight: 600;
  border-bottom: 2px solid var(--v-teal);
}
.table tbody tr { border-left: 3px solid transparent; }
.table tbody tr:hover { background: var(--v-teal-surface); border-left-color: var(--v-teal); }
.table th[scope="row"] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--v-navy); }

/* ── Status pills: confirmed teal-filled, in-flight navy-outlined ─────────── */
.pill {
  padding: 0.15rem 0.7rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.pill--neutral { background: #fff; border-color: var(--v-navy); color: var(--v-navy); }
.pill--success { background: var(--v-teal); border-color: var(--v-teal); color: #fff; }
.pill--information { background: var(--information-surface); border-color: var(--v-navy); color: var(--v-navy); }
.pill--muted { background: var(--v-cream); border-color: var(--v-line); color: var(--text-muted); }
/* Urgency keeps the safety palette: amber for soon, red for same-day. */
.pill--warning { background: #fdf4e8; border-color: #b06a1a; color: #7C5A24; }
.pill--danger { background: var(--danger-surface); border-color: var(--danger); color: var(--danger); }

/* ── Detail lists get the navy spine of the original ──────────────────────── */
.identity, .detail, .reference__meta {
  background: var(--surface);
  border: 1px solid var(--v-line);
  border-left: 3px solid var(--v-navy);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}
.identity dt, .detail dt, .reference__meta dt { color: var(--v-navy); font-weight: 600; }

/* Reference and message cards match the 18px card radius. */
.reference, .login__card, .message { border-radius: var(--radius-lg); }
.login__card { border-top: 4px solid var(--v-teal); }

/* The revealed contact reads as a live value, not as body text. */
.contact-reveal {
  margin: var(--space-2) 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  color: var(--v-navy);
}
/* The preferred-time line under the requested window. */
.muted { color: var(--text-muted); font-size: 0.875rem; }

/* The SMS thread, opened below the queue table rather than inside a cell —
   a conversation needs its own width, not a table column's. */
.message-thread {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--v-navy);
  border-radius: var(--radius-lg);
}
.message-thread__list { list-style: none; margin: var(--space-2) 0; padding: 0; }
.message-thread__item {
  max-width: 32rem;
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius);
}
/* Outbound (staff → patient) and inbound (patient → staff) read as distinct
   sides of the conversation, never by colour alone — the status line under
   each bubble already carries the direction in words. */
.message-thread__item--out { margin-left: auto; background: var(--v-navy); color: #fff; }
.message-thread__item--in { background: var(--surface-muted); }
.message-thread__item p { margin: 0; }
.message-thread__item--out .muted { color: rgba(255, 255, 255, 0.75); }
.message-thread__composer { display: flex; gap: var(--space-2); align-items: flex-start; }
.message-thread__input { flex: 1; min-width: 0; }

/* Queue table: give the columns room, and let the existing scroll wrapper do
   its job rather than letting the table push past the page. */
.table-scroll {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--v-navy);
  max-width: 100%;
}
.table-scroll .table { border: 0; border-radius: 0; min-width: 52rem; }
.table td, .table th { white-space: normal; }
.table td:last-child { white-space: nowrap; }
.table td:last-child .button { display: inline-block; margin: 0 var(--space-1) var(--space-1) 0; }
.table td:last-child .contact-reveal { white-space: nowrap; }

/* ── Responsive: the header stacks, tables scroll ─────────────────────────── */
@media (max-width: 60rem) {
  .shell__header { padding: var(--space-3) var(--space-4); }
  .shell__main { padding: var(--space-5) var(--space-4); }
  .shell__nav ul { gap: var(--space-2); }
}
@media (max-width: 40rem) {
  .shell__actions { margin-left: 0; width: 100%; }
  .identity, .detail, .reference__meta { grid-template-columns: 1fr; }
}

/* ── Personal och Tillsyn ──────────────────────────────────────────────────
   The staff roster and the supervision picture. Both are dense, mostly
   tabular screens, so the additions here are layout and emphasis only — the
   pills, tables and warnings above are reused unchanged.

   Nothing in this block carries meaning by colour alone: an alerting figure
   also gets a text marker, for the same reason every pill carries its label. */

.panel {
  border: 1px solid var(--v-line);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  background: var(--surface);
}
.panel > h2 { margin-top: 0; }

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
}
.metrics dt { font-size: 0.8125rem; color: var(--text-muted); }
.metrics dd { margin: 0 0 var(--space-2); font-size: 1.25rem; font-weight: 600; }
.metric--alert { color: var(--danger); }
.metric__flag { font-weight: 700; }

.list { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: var(--space-2); }
.notes { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); }

.form--stacked { display: grid; gap: var(--space-3); margin-top: var(--space-5); max-width: 34rem; }
.form__error { color: var(--danger); }
.form__ok { color: var(--v-teal); }
.checkbox { display: flex; gap: var(--space-2); align-items: center; font-size: 0.9375rem; }
.input--compact { max-width: 22rem; }

/* A destructive action reads as one before it is pressed, and still says so
   in words — the class is emphasis, never the only signal. */
.button--danger { border-color: var(--danger); color: var(--danger); }
.button--danger:hover { background: var(--danger-surface); }

/* Personal — the section navigation.
   Buttons, not links: these are views onto one roster, not routes, and must
   not become browser history. Styled as a quiet row so it reads as a
   sub-navigation of Personal rather than competing with the main nav. */
.section-nav { margin: var(--space-4) 0 var(--space-3); }
.section-nav ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.section-nav__item {
  font: inherit; cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--v-line); border-radius: 999px;
  background: var(--surface); color: var(--v-navy);
}
.section-nav__item:hover { border-color: var(--v-navy); }
.section-nav__item--active {
  background: var(--v-navy); border-color: var(--v-navy); color: #fff; font-weight: 600;
}

/* One office membership, with its own remove control. */
.office-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin: 0 var(--space-2) var(--space-1) 0;
}

/* ── Kalender ──────────────────────────────────────────────────────────────
   A dental day, shaped the way practice software shapes one: time down the
   left, one column per chair, and the whole day legible at a glance.

   ── ON THE PASTELS ────────────────────────────────────────────────────────
   Derived from the existing brand tokens rather than picked freshly, so the
   calendar sits inside the portal instead of beside it: the teal surface is
   already --v-teal-surface, the blue already --information-surface, the sand
   already --v-cream. They are tinted, not invented.

   Colour NEVER carries the meaning on its own. Every block still prints its
   status as a word (see statusPill's own note), the fill is confirmation for
   somebody scanning a whole day, and the left bar repeats it in a third
   channel for anyone who cannot separate the fills at all. */

:root {
  /* Status fills. Light enough for --v-navy body text to sit on comfortably. */
  --cal-confirmed-fill: #E4F2EF;
  --cal-confirmed-edge: #2E9C95;
  --cal-proposed-fill:  #E8EDF7;
  --cal-proposed-edge:  #4B6BA8;
  --cal-held-fill:      #F6EEE1;
  --cal-held-edge:      #B98B4E;

  /* The grid itself. Two greys apart, so the banding reads as structure and
     not as decoration competing with the appointments. */
  --cal-line:        #EDE6D9;
  --cal-line-hour:   #DCD1BC;
  --cal-band:        #FCFAF5;
  --cal-column-alt:  #FBF8F2;
  --cal-free-hover:  var(--v-teal-surface);
}

.cal__toolbar {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: center; margin-bottom: var(--space-4);
}
.cal__modes, .cal__nav { display: flex; gap: var(--space-1); }
.cal__modes .button, .cal__nav .button { min-height: 2.25rem; }
.cal__date {
  margin: 0; font-family: var(--v-serif); font-size: 1.05rem;
  color: var(--v-navy); text-transform: capitalize;
}
.button--active {
  background: var(--v-navy); color: #fff; border-color: var(--v-navy);
}

/* The grid scrolls inside itself. A page that scrolls sideways as a whole
   takes the time column with it, and the grid cannot be read without it. */
.cal__scroll {
  overflow: auto; -webkit-overflow-scrolling: touch;
  max-height: 72vh;
  border: 1px solid var(--cal-line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* separate, not collapse: a collapsed border is painted by the table and
   disappears under position:sticky, which is what makes the header and the
   time column lose their edges as soon as anything scrolls. */
.cal__grid {
  border-collapse: separate; border-spacing: 0;
  width: 100%; min-width: 22rem;
  font-variant-numeric: tabular-nums;
}

/* ── Chair headers ─────────────────────────────────────────────────────── */
.cal__room, .cal__time-head {
  position: sticky; top: 0; z-index: 3;
  background: var(--v-navy); color: #fff;
  padding: var(--space-2) var(--space-3);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em;
  text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--v-navy-deep);
}
.cal__time-head { z-index: 4; left: 0; width: 3.75rem; min-width: 3.75rem; }
.cal__room--unassigned { font-style: italic; opacity: 0.85; }

/* ── Time column ──────────────────────────────────────────────────────── */
.cal__time {
  position: sticky; left: 0; z-index: 2;
  background: var(--cal-band); color: var(--text-muted);
  font-size: 0.6875rem; font-weight: 600;
  text-align: right; vertical-align: top;
  padding: 2px var(--space-2) 0 0;
  width: 3.75rem; min-width: 3.75rem;
  border-right: 1px solid var(--cal-line-hour);
  border-bottom: 1px solid transparent;
}
.cal__row--hour > .cal__time { color: var(--v-navy); font-size: 0.75rem; }

/* ── Rows and banding ─────────────────────────────────────────────────── */
.cal__row { height: 1.375rem; }
.cal__cell {
  padding: 0; vertical-align: top;
  border-bottom: 1px solid var(--cal-line);
  border-right: 1px solid var(--cal-line);
}
/* The hour line is the one a clinic actually reads the day by. */
.cal__row--hour > .cal__cell, .cal__row--hour > .cal__time {
  border-top: 1px solid var(--cal-line-hour);
}
/* Alternating chairs, very faintly — enough to keep a wide day's columns
   apart without turning the grid into stripes. */
.cal__cell:nth-child(odd) { background: var(--cal-column-alt); }

/* ── An empty slot is a control ───────────────────────────────────────── */
.cal__free {
  display: block; width: 100%; height: 100%; min-height: 1.375rem;
  border: 0; background: transparent; cursor: pointer; padding: 0;
  transition: background-color 90ms ease-in;
}
.cal__free:hover { background: var(--cal-free-hover); }
.cal__free:focus-visible {
  outline: 2px solid var(--focus); outline-offset: -2px;
  background: var(--cal-free-hover);
}

/* ── Appointment blocks ───────────────────────────────────────────────── */
.cal__cell--taken { padding: 1px; background: transparent; }
.cal__block {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; height: 100%; text-align: left;
  padding: 3px var(--space-2) 3px var(--space-2);
  border: 1px solid transparent;
  border-left: 4px solid var(--cal-confirmed-edge);
  border-radius: var(--radius);
  background: var(--cal-confirmed-fill); color: var(--v-navy);
  font: inherit; cursor: pointer; overflow: hidden;
  box-shadow: 0 1px 1px rgba(13, 26, 48, 0.04);
}
button.cal__block:hover { filter: brightness(0.975); }
button.cal__block:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.cal__block--success     { background: var(--cal-confirmed-fill); border-left-color: var(--cal-confirmed-edge); }
.cal__block--information { background: var(--cal-proposed-fill);  border-left-color: var(--cal-proposed-edge); }
.cal__block--neutral     { background: var(--cal-held-fill);      border-left-color: var(--cal-held-edge); }

.cal__block-time { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.01em; }
.cal__block-provider {
  font-size: 0.75rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal__block-ref {
  font-size: 0.6875rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A 15-minute block has room for one line and a pill, not four. */
.cal__block .pill { align-self: flex-start; font-size: 0.625rem; padding: 0 var(--space-1); }

.cal__closed {
  padding: var(--space-6); text-align: center; color: var(--text-muted);
  background: var(--cal-band); border: 1px dashed var(--cal-line-hour);
  border-radius: var(--radius-lg);
}

/* ── Week ─────────────────────────────────────────────────────────────── */
.cal__week { display: grid; gap: var(--space-2); padding: 0; margin: 0; }
@media (min-width: 48rem) { .cal__week { grid-template-columns: repeat(7, 1fr); } }
.cal__week-open {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: var(--space-3); border: 1px solid var(--cal-line);
  border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
  box-shadow: var(--shadow);
}
.cal__week-open:hover { background: var(--cal-band); }
.cal__week-day--today .cal__week-open {
  border-color: var(--cal-confirmed-edge); border-width: 2px;
  background: var(--cal-confirmed-fill);
}
.cal__week-day--closed .cal__week-open {
  background: var(--cal-band); color: var(--text-muted); cursor: default; box-shadow: none;
}
.cal__week-label {
  font-family: var(--v-serif); font-size: 0.9375rem; color: var(--v-navy);
  text-transform: capitalize;
}
.cal__week-count { font-size: 0.8125rem; }
.cal__week-hours { font-size: 0.75rem; }

/* ── Booking form ─────────────────────────────────────────────────────── */
.appt__form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 28rem; }
.appt__when {
  font-weight: 600; margin: 0; padding: var(--space-2) var(--space-3);
  background: var(--cal-confirmed-fill); border-left: 4px solid var(--cal-confirmed-edge);
  border-radius: var(--radius); color: var(--v-navy);
}
.appt__actions { display: flex; gap: var(--space-2); }
.field--inline { display: flex; align-items: center; gap: var(--space-2); }
.field--inline .field__label { margin: 0; white-space: nowrap; }

/* ── Klinikinställningar ───────────────────────────────────────────────────
   Sectioned like Personal and sharing its section-nav, so the two
   administration screens do not feel like different products. */

.settings { display: flex; flex-direction: column; gap: var(--space-5); }
.settings__office {
  margin: 0; font-family: var(--v-serif); font-size: 1.05rem; color: var(--v-navy);
}
.settings__block {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.settings__block h2 {
  margin: 0; font-family: var(--v-serif); font-size: 1.125rem; color: var(--v-navy);
}
.settings__saved {
  margin: 0; padding: var(--space-2) var(--space-3);
  background: var(--cal-confirmed-fill); border-left: 4px solid var(--cal-confirmed-edge);
  border-radius: var(--radius); color: var(--v-navy); font-weight: 600;
}

/* Wide tables scroll inside themselves; the page never scrolls sideways. */
.settings__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.settings__table, .settings__hours { width: 100%; border-collapse: collapse; }
.settings__table th, .settings__table td,
.settings__hours th, .settings__hours td {
  padding: var(--space-2); border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: middle;
}
.settings__table thead th {
  font-size: 0.8125rem; color: var(--text-muted); font-weight: 600;
  border-bottom: 2px solid var(--border-strong);
}
.settings__day { white-space: nowrap; font-weight: 600; color: var(--v-navy); }
.settings__closed { display: flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.settings__actions { display: flex; gap: var(--space-1); flex-wrap: wrap; }

.input--narrow { width: 6rem; }
.input--time { width: 7rem; }

/* The two money columns are never added together, so they are never aligned
   as though they were one figure: the clinic's own price is emphasised and
   the national reference sits back. */
.settings__money { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.settings__money--own { font-weight: 700; color: var(--v-navy); }
.settings__disclaimer { margin: 0; font-size: 0.8125rem; }
.settings__code-title { font-size: 0.75rem; }
.settings__warn { display: block; font-size: 0.75rem; color: var(--warning); }
.settings__row--withdrawn { background: var(--warning-surface); }
.settings__add {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end;
  padding-top: var(--space-3); border-top: 1px solid var(--border);
}

/* Removing a time. Danger tone, and the confirmation says what it does. */
.button--danger {
  background: var(--danger-surface); color: var(--danger);
  border: 1px solid currentColor;
}
.button--danger:hover { filter: brightness(0.97); }
.appt__remove { display: flex; flex-direction: column; gap: var(--space-2); }
.appt__remove-prompt { font-size: 0.8125rem; color: var(--text-muted); max-width: 26rem; }

/* ── The åtgärd under the code box ──────────────────────────────────────────
   Three states, and none of them relies on colour alone: an accepted code
   shows its official title, a superseded regulation says the price may have
   moved, and a refused code says which of the four refusals it was. The words
   carry the meaning; the tint only makes it findable. */
.appt__code-note {
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm, 6px);
  border-left: 3px solid var(--border);
  background: var(--surface-muted, #f6f7f9);
  display: flex; flex-direction: column; gap: 0.25rem;
}
.appt__code-note:empty { display: none; }
.appt__code-note--ok { border-left-color: var(--success); background: var(--success-surface); }
.appt__code-note--warning { border-left-color: var(--warning); background: var(--warning-surface); }
.appt__code-note--blocking { border-left-color: var(--danger); background: var(--danger-surface); }
.appt__code-title { font-weight: 600; font-size: 0.9375rem; }
.appt__code-message { font-size: 0.8125rem; }
.appt__code-note--blocking .appt__code-message { color: var(--danger); }
.appt__code-note--warning .appt__code-message { color: var(--warning); }
.appt__code-meta { font-size: 0.75rem; color: var(--text-muted); }
.appt__code-hint { font-size: 0.75rem; color: var(--text-muted); }
.appt__code-prices {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  align-items: baseline; font-size: 0.8125rem;
}
.appt__code-price-label { color: var(--text-muted); }
.appt__code-price { font-variant-numeric: tabular-nums; font-weight: 600; }
/* The caveat is small, but it is never absent when a number is shown. */
.appt__code-caveat { font-size: 0.6875rem; color: var(--text-muted); line-height: 1.4; }
/* Codes are short and read as numbers, so the box is short and reads as one. */
.input--code { max-width: 8rem; font-variant-numeric: tabular-nums; }

/* The calendar is being used to answer one patient's request. Stated at the
   top because the reason for standing here is easy to lose, and the next slot
   tapped would otherwise attach to somebody the person had forgotten about. */
.cal__pairing {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  justify-content: space-between;
  padding: var(--space-3); margin-bottom: var(--space-3);
  border-left: 3px solid var(--accent, var(--success));
  background: var(--success-surface); border-radius: var(--radius-sm, 6px);
  font-size: 0.875rem;
}

/* What a superseded regulation said. Set apart deliberately: indented, muted,
   under its own heading, with the price struck through — everything about the
   presentation says "this is not the current figure", because a number that
   merely sits near a warning gets read as the answer. */
.appt__code-last {
  margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  border-left: 2px dashed var(--border);
  display: flex; flex-direction: column; gap: 0.2rem;
}
.appt__code-last-heading {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-muted);
}
.appt__code-last-title { font-size: 0.875rem; color: var(--text-muted); }
.appt__code-price--stale { text-decoration: line-through; color: var(--text-muted); }
.disclaimer--warning { color: var(--warning); font-weight: 600; }

/* The actions cell in Bokningsförfrågningar.
   It had no layout rule at all, which went unnoticed while it held only small
   buttons that happened to flow. Adding "Boka tid" exposed it: .button--primary
   carries width:100% because it is a FORM SUBMIT style, so inside a table cell
   it took the full width and pushed Reservera / Bekräfta / Avslå out of sight —
   the buttons were in the DOM, painted, and unreachable.
   A table cell is not a form, so buttons inside this one size to their text. */
.row-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
}
.row-actions .button { width: auto; }
.row-actions .select--compact { flex: 0 1 14rem; min-width: 9rem; }
/* Emphasis without the form-submit style. Same navy as button--primary, and
   no width rule — this one lives in table cells and toolbars. */
.button--accent {
  background: var(--v-navy); border: 1px solid var(--v-navy); color: var(--v-ivory);
}
.button--accent:hover { background: var(--v-navy-deep); border-color: var(--v-navy-deep); }

/* Why a card shows a dash instead of an amount. A dash with no explanation is
   as uninformative as the zero it replaced — the point is to say that the
   source is empty, not merely to avoid printing 0 kr. */
.card__note {
  font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; line-height: 1.35;
}

/* ── VÄRDE ──────────────────────────────────────────────────────────────────
   Three states that must never be mistaken for each other: a measured amount,
   a real count whose price nobody configured, and a figure nobody measured.
   The amount is the only thing that gets to look like money. */
.value-cards { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .value-cards { grid-template-columns: 1fr 1fr; } }
.value-card {
  padding: var(--space-4); border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border); background: var(--surface, #fff);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.value-card--recovered { border-left: 4px solid var(--success); }
.value-card--retained  { border-left: 4px solid var(--v-navy, #16233f); }
.value-card--realised  { border-left: 4px solid var(--focus); margin-top: var(--space-3); }
.value-card--efficiency{ border-left: 4px solid var(--border); margin-top: var(--space-3); }
.value-card__support { font-size: 0.8125rem; color: var(--text-muted); }
.value-card__count { font-size: 0.9375rem; }
.value-card__amount {
  font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
/* Deliberately NOT money-sized. An unpriced count is a sentence, not a figure,
   because anything laid out like an amount gets read as one. */
.value-card__unpriced {
  font-size: 0.8125rem; color: var(--warning); max-width: 44ch; line-height: 1.4;
}
.value-card__reference { font-size: 0.75rem; color: var(--text-muted); }
.value-card__reference-label { text-transform: uppercase; letter-spacing: 0.03em; }
.value-card__meta { font-size: 0.75rem; color: var(--text-muted); }
.value-stats {
  display: grid; grid-template-columns: 1fr auto; gap: 0.3rem var(--space-3);
  align-items: baseline; margin-top: var(--space-2);
}
.value-stats dt { font-size: 0.875rem; }
.value-stats dd { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.value-stats__unmeasured {
  font-weight: 400; font-size: 0.75rem; color: var(--text-muted);
  text-align: right; max-width: 34ch;
}

/* ── KUNSKAPSSTÖD ───────────────────────────────────────────────────────────
   An exact answer and an unknown one are laid out differently on purpose. A
   confident code table and "the regulation states a condition here" must not
   share a shape, or the caveat is read as decoration on an answer. */
.kusp-results { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.kusp-card {
  border: 1px solid var(--border); border-left: 4px solid var(--success);
  border-radius: var(--radius-sm, 8px); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.kusp-card--unknown { border-left-color: var(--warning); }
.kusp-card__title { font-size: 1.0625rem; }
.kusp-card__label {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); font-weight: 600;
}
.kusp-card__rule p { font-size: 0.875rem; line-height: 1.5; }
.kusp-code { font-variant-numeric: tabular-nums; font-weight: 700; }
.kusp-price-label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.03em; }
.kusp-card__unknown { background: var(--warning-surface); padding: var(--space-3); border-radius: var(--radius-sm, 6px); }
.kusp-card__unknown-title { font-weight: 700; color: var(--warning); }
/* The regulation's own words, set apart so they are read as a quotation. */
.kusp-card__verbatim {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem;
  background: var(--surface, #fff); padding: var(--space-2); border-radius: 4px;
  white-space: pre-wrap;
}
.kusp-card__source { font-size: 0.6875rem; color: var(--text-muted); }

/* ── The towers: restrained pastel, dark text, nothing playful ─────────────
   Scoped to .control-tower and .master-tower so no clinic screen outside the
   towers changes. The rule that governs every choice here: colour is a FIELD
   behind dark navy text, never the text itself; the only saturated colour
   left is the pre-existing danger red, reserved for truly critical alerts.
   Contrast: --tower-ink on every pastel field is ≥ 9:1. */
.control-tower, .master-tower {
  --tower-ink: #16294D;          /* dark navy text over every field */
  --tower-paper: #FBF9F4;        /* warm off-white ground */
  --pastel-green: #DFF0E3;       /* healthy / active */
  --pastel-green-edge: #BCDCC6;
  --pastel-amber: #FAF0D7;       /* attention / stale */
  --pastel-amber-edge: #E8D5A4;
  --pastel-red: #F9E2E0;         /* failure / urgent (soft) */
  --pastel-red-edge: #E9BDB9;
  --pastel-blue: #E3EDF8;        /* informational / activity */
  --pastel-blue-edge: #C1D6EC;
  --pastel-lavender: #ECE8F6;    /* secondary operational metrics */
  --pastel-lavender-edge: #D2C9E9;
  background: var(--tower-paper);
  color: var(--tower-ink);
  border-radius: 10px;
}
.control-tower h1, .master-tower h1,
.control-tower h2, .master-tower h2 { color: var(--tower-ink); }

/* Status pills: pastel fields, dark ink. */
.control-tower .pill, .master-tower .pill {
  color: var(--tower-ink); border: 1px solid transparent;
}
.control-tower .pill--ok, .master-tower .pill--ok {
  background: var(--pastel-green); border-color: var(--pastel-green-edge);
}
.control-tower .pill--danger, .master-tower .pill--danger {
  background: var(--pastel-red); border-color: var(--pastel-red-edge);
}
.control-tower .pill--neutral, .master-tower .pill--neutral {
  background: var(--pastel-blue); border-color: var(--pastel-blue-edge);
}

/* KPI fields (metric lists): lavender for the secondary numbers. */
.control-tower .metrics dd, .master-tower .metrics dd {
  background: var(--pastel-lavender);
  border: 1px solid var(--pastel-lavender-edge);
  border-radius: 6px; padding: 0.125rem 0.5rem;
  color: var(--tower-ink);
}
.control-tower .metrics .metric--alert, .master-tower .metrics .metric--alert {
  background: var(--pastel-red); border-color: var(--pastel-red-edge);
  color: var(--tower-ink);
}

/* Funnel stages: one informational family, NEW slightly warmer so the queue
   that needs a human reads as the queue that needs a human. */
.control-tower td.ct-funnel, .master-tower td.ct-funnel {
  background: var(--pastel-blue); border: 1px solid var(--pastel-blue-edge);
  border-radius: 6px; text-align: center; color: var(--tower-ink);
}
.control-tower td.ct-funnel--new, .master-tower td.ct-funnel--new {
  background: var(--pastel-amber); border-color: var(--pastel-amber-edge);
  font-weight: 600;
}
.control-tower td.ct-funnel--confirmed, .master-tower td.ct-funnel--confirmed {
  background: var(--pastel-green); border-color: var(--pastel-green-edge);
}

/* Notification health cells: green field when healthy, soft red when not. */
.control-tower td.ct-chan--ok, .master-tower td.ct-chan--ok {
  background: var(--pastel-green); border: 1px solid var(--pastel-green-edge);
  border-radius: 6px; color: var(--tower-ink);
}
.control-tower td.ct-chan--fail, .master-tower td.ct-chan--fail {
  background: var(--pastel-red); border: 1px solid var(--pastel-red-edge);
  border-radius: 6px; color: var(--tower-ink);
}

/* Alert badges: amber for attention, soft red for failure. The saturated
   danger treatment is deliberately NOT redefined here — .warning--danger
   stays exactly as it is for the truly critical. */
.control-tower .warning, .master-tower .warning {
  background: var(--pastel-amber); border: 1px solid var(--pastel-amber-edge);
  border-radius: 6px; padding: 0.25rem 0.5rem;
  color: var(--tower-ink);
}
.control-tower .ct-alert--critical, .master-tower .ct-alert--critical {
  background: var(--pastel-red); border-color: var(--pastel-red-edge);
}

/* Section grouping and clinic cards: a whisper of blue, a clear edge. */
.master-tower .card {
  background: #FFFFFF;
  border: 1px solid var(--pastel-blue-edge);
  border-top: 4px solid var(--pastel-blue-edge);
  border-radius: 10px;
}
.control-tower section, .master-tower section {
  background: #FFFFFF; border: 1px solid #EDE9E0;
  border-radius: 10px; padding: var(--space-3);
  margin-top: var(--space-3);
}
.control-tower .table-scroll, .master-tower .table-scroll { background: #FFFFFF; }
.control-tower .table th, .master-tower .table th { color: var(--tower-ink); }

/* Links inside the towers sit on LIGHT fields, not the dark header the
   shared .nav__link was styled for — without this they wash out to
   ivory-on-white, which fails the towers' own contrast rule. */
.control-tower a.nav__link, .master-tower a.nav__link {
  color: var(--tower-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  background: none;
  border: none;
  padding: 0;
}
.control-tower a.nav__link:hover, .master-tower a.nav__link:hover {
  color: var(--tower-ink);
  background: var(--pastel-blue);
}

/* ── Back to top: long pages only, dark ink on a quiet field ──────────────── */
.back-to-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 5;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  border: 1px solid var(--edge, #E8E2D6);
  background: var(--surface, #fff); color: var(--text, #16294D);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(22, 41, 77, 0.12);
}
.back-to-top:hover { background: #E3EDF8; }
.appt__back { display: inline-block; margin-bottom: var(--space-2); }

/* ── Lager & inköp ─────────────────────────────────────────────────────── */
.inventory__adjust, .inventory__materials, .inventory__vanilli { margin-top: 2rem; }
.inventory__adjust-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.inventory__adjust-row .input { max-width: 14rem; }
.inventory__pending { list-style: none; padding: 0; }
.inventory__pending li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border, #e5e5e5); }
.inventory__decide { display: inline-flex; gap: 0.5rem; }
.inventory__line--attention td { font-weight: 600; }
.inventory__unmapped, .inventory__accuracy { margin: 0.25rem 0 1rem; padding-left: 1.25rem; }

/* ── Glömt lösenordet ──────────────────────────────────────────────────── */
.login__forgot { margin: 0.9rem 0 0; text-align: center; }
.login__forgot-link { font-size: 0.9rem; }

/* ── Unread badge on Bokningsförfrågningar ─────────────────────────────── */
.nav__badge { display: inline-block; margin-left: 0.4rem; min-width: 1.25rem;
  padding: 0 0.3rem; border-radius: 99px; background: #B3383B; color: #fff;
  font-size: 0.72rem; font-weight: 700; text-align: center; line-height: 1.25rem; }
.push__state { margin: 0.3rem 0 0.6rem; }

/* ── Shared-device removal on Notiser ──────────────────────────────────── */
.push__device-removal { margin-top: 1.4rem; padding-top: 1rem;
  border-top: 1px solid var(--border, #e5e5e5); display: flex;
  flex-direction: column; gap: 0.5rem; align-items: flex-start; }