/* MAVEMY platform interface. Self-hosted, no external fonts or scripts (strict Content-Security-Policy).
   Phase 1.6a: the design system (status colours, type and spacing scale; every text colour at least 4.5:1 on every
   surface) and the app shell: a fixed sidebar on desktop, a disclosure menu (<details>, no script) on smaller screens.
   Icons are CSS masks with data: SVGs, so the markup keeps its text.
   Graphic rebuild F1 (2026-10-29): the tokens below are measured from the definitive reference
   (design-references/mavemy-dashboard-reference.jpg, docs/ONTWERP-F0.md): a near-black sidebar and top bar, a light
   grey content area with white cards, MAVEMY blue. Surfaces and chart colours keep the measured values; text colours
   keep the measured hue, darkened only as far as WCAG AA (4.5:1) needs. Inter is served by the platform itself. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/InterVariable.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("fonts/InterVariable-Italic.woff2") format("woff2"); }
:root {
  /* Neutrals (reference: title ± #0b0d14, subtitle #3c404b / #575f6c, card border ± #e8e9ee, table head #f9fafc) */
  --ink: #0b0d14;
  --text: #1f2430;
  --muted: #575f6c;
  --faint: #5e6673;
  --line: #e8e9ee;
  --line-2: #f0f1f4;
  --line-strong: #d5d8df;
  --bg: #f5f6fa;
  --card: #ffffff;
  --surface: #f9fafc;
  --hover: #f3f6fd;
  /* The dark sidebar (reference #161c24; organisation card and hover #272f3a; current page #2460e7) */
  --sidebar: #161c24;
  --sidebar-ink: #ffffff;
  --sidebar-text: #e6eaf3;
  --sidebar-faint: #9aa3b2;
  --sidebar-hover: #272f3a;
  --sidebar-active: #2460e7;
  --sidebar-line: #2a323d;
  /* The dark top bar and its search field (reference #181e27, field #2a323d, text #d7dfec) */
  --topbar: #181e27;
  --topbar-field: #2a323d;
  --topbar-text: #d7dfec;
  --notify-dot: #f85b56;
  --avatar: #6e7588;
  /* Brand: MAVEMY blue (active item #2460e7, link #1752da, word mark "MY" #1a54e3) */
  --accent: #2460e7;
  --accent-hover: #1a4fc9;
  --accent-soft: #e6edfd;
  --accent-line: #c5d5fa;
  --accent-ring: rgba(36, 96, 231, .28);
  --link: #1752da;
  --brand-gradient: linear-gradient(135deg, #3b7bf6 0%, #1a54e3 100%);
  /* Status colours (text / background / border); backgrounds as measured, text darkened to AA */
  --green: #17774e; --green-soft: #d8f4e6; --green-line: #b3e5cb;
  --amber: #8a4d05; --amber-soft: #fcefd6; --amber-line: #f1d6a2;
  --slate: #4b5563; --slate-soft: #eef0f4; --slate-line: #dcdfe7;
  --red: #b3262f; --red-soft: #fde4e5; --red-line: #f6c4c7;
  --blue: #1752da; --blue-soft: #e6edfd; --blue-line: #c5d5fa;
  --violet: #4b3fe0; --violet-soft: #e9e9fe; --violet-line: #d3d1fc;
  /* Icon tiles of the KPI cards and quick actions (surface + icon colour, as measured) */
  --tile-violet: #e9e9fe; --tile-violet-icon: #5f53fb;
  --tile-green: #e2f6ed; --tile-green-icon: #1cb171;
  --tile-red: #fde4e5; --tile-red-icon: #c44a57;
  --tile-blue: #e6edfd; --tile-blue-icon: #1057fd;
  --action-blue: #2262f4; --action-violet: #7466f5;
  /* Trends (text) and charts (marks): trend text darkened to AA, chart marks as measured */
  --trend-up: #1a7f53; --trend-down: #c43a42;
  --chart-ok: #23a26f; --chart-fail: #c25458; --chart-axis: #575f6c; --chart-grid: #f0f0f2;
  /* Shape, depth, type, space (reference: cards 12px, fields and buttons 8px, status pills 6px) */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
  --shadow-pop: 0 12px 32px rgba(11, 13, 20, .14), 0 2px 6px rgba(11, 13, 20, .06);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --text-xs: 12px; --text-sm: 13px; --text-md: 15px; --text-lg: 18px; --text-xl: 32px;
  --sidebar-width: 268px;
  --topbar-height: 66px;
  --content-pad: 24px;
  --gap: 16px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--text-md)/1.55 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { color: var(--ink); line-height: 1.25; margin: 0; letter-spacing: -.018em; }
h1 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.024em; }
h2 { font-size: var(--text-lg); font-weight: 700; }
h3 { font-size: .95rem; font-weight: 650; }
code { font-family: var(--mono); font-size: .88em; background: var(--slate-soft); border: 1px solid var(--line); border-radius: 6px; padding: .05em .4em; }
:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; border-radius: 6px; }

.sr-only, .sr-only-th { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -48px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 30; text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); margin: .35rem 0 0; }

/* ---- App shell (phase 1.6a) ---- */
.env-banner { background: var(--ink); color: #ece9f6; font-size: 12.5px; text-align: center; padding: 6px 16px; letter-spacing: .01em; }
.shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: calc(100vh - 31px); }
.shell-plain { grid-template-columns: minmax(0, 1fr); }
.shell-main { display: flex; flex-direction: column; min-width: 0; }
.sidebar { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; padding: 18px 14px 20px; background: var(--sidebar); border-right: 1px solid var(--sidebar-line); color: var(--sidebar-text); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--brand-gradient); color: #fff; font-weight: 800; box-shadow: 0 1px 2px rgba(15, 31, 61, .35); }
.sidebar .brand { padding: 4px 8px; color: var(--sidebar-ink); }
.sidebar .brand:hover { color: var(--sidebar-ink); }
.nav-title { margin: 0 10px 6px; font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.sidebar .nav-title { color: var(--sidebar-faint); }
.sidenav, .mobilenav { display: grid; gap: 2px; }
.sidenav a, .mobilenav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--muted); font-weight: 550; text-decoration: none; white-space: nowrap; }
.sidenav a::before, .mobilenav a::before, .menu-button::before { content: ""; flex: none; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--icon) center / 18px 18px no-repeat; mask: var(--icon) center / 18px 18px no-repeat; }
.sidenav a:hover, .mobilenav a:hover { background: var(--hover); color: var(--ink); }
.mobilenav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-hover); font-weight: 650; }
.sidenav a { color: var(--sidebar-text); }
.sidenav a:hover { background: var(--sidebar-hover); color: var(--sidebar-ink); }
.sidenav a[aria-current="page"] { background: var(--sidebar-active); color: var(--sidebar-ink); font-weight: 650; }
.sidebar-foot { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--sidebar-line); font-size: 12.5px; color: var(--sidebar-faint); }
.topbar { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line); }
.topbar-inner { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 32px; }
.topbar .brand { display: none; }
.shell-plain .topbar .brand { display: inline-flex; }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--card); }
.lang a { text-decoration: none; color: var(--muted); font-size: 12.5px; font-weight: 650; padding: 4px 10px; border-radius: 999px; }
.lang a[aria-current="true"] { background: var(--ink); color: #fff; }
.user { display: flex; align-items: center; gap: 10px; }
.user-name { color: var(--text); font-weight: 550; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-form { margin: 0; }
.mobile-nav { display: none; }
.menu-button { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 12px; background: var(--card); }
.menu-button::-webkit-details-marker { display: none; }
.mobile-nav[open] .menu-button { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hover); }
.mobilenav { position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); z-index: 20; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 8px; }
.main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 32px 48px; flex: 1; }
.foot { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px 28px; color: var(--faint); font-size: 12.5px; }
.icon-overview { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E"); }
.icon-inquiries { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); }
.icon-automation { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E"); }
.icon-usage { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M8 17v-5'/%3E%3Cpath d='M13 17V8'/%3E%3Cpath d='M18 17v-9'/%3E%3C/svg%3E"); }
.icon-team { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.icon-companies { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01'/%3E%3C/svg%3E"); }
.icon-processing { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E"); }
.icon-menu { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E"); }

/* Buttons and fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600; border-radius: var(--radius-sm); padding: 9px 16px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-quiet { background: var(--card); color: var(--text); border-color: var(--line); }
.btn-quiet:hover { background: var(--slate-soft); color: var(--ink); }
input[type="search"], input[type="email"], input[type="password"] { font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 12px; width: 100%; }
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.field { display: grid; gap: 6px; font-weight: 550; color: var(--ink); }
.stack { display: grid; gap: 16px; margin-top: 20px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }

/* Alerts */
.alert { border-radius: var(--radius-sm); padding: 10px 14px; margin: 16px 0 0; border: 1px solid; }
.alert-error { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
.alert-info { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue); }

/* Login */
.login { max-width: 420px; margin: 40px auto; padding: 32px; }

/* Toolbar */
.toolbar { padding: 16px; display: grid; gap: 14px; }
.search { display: flex; gap: 10px; }
.search input { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 550; }
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.chip-count { background: var(--slate-soft); color: var(--slate); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 700; }
.chip[aria-current="true"] .chip-count { background: #fff; color: var(--accent); }
.result-count { color: var(--muted); font-size: 13.5px; margin: 18px 2px 10px; }

/* Table */
.table-wrap { overflow: hidden; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 18px; }
.table td { padding: 14px 18px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.row-link { font-weight: 650; color: var(--ink); text-decoration: none; }
.row-link:hover { color: var(--accent); text-decoration: underline; }
.sub { display: block; color: var(--faint); font-size: 12.5px; font-family: var(--mono); }
.empty { padding: 36px; text-align: center; }
.empty-title { font-weight: 650; color: var(--ink); margin: 0; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; border-radius: 999px; padding: 3px 10px; border: 1px solid; white-space: nowrap; }
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-active { color: var(--green); background: var(--green-soft); border-color: var(--green-line); }
.badge-deactivated { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-line); }
.badge-archived { color: var(--slate); background: var(--slate-soft); border-color: var(--slate-line); }
.badge-test { color: var(--blue); background: var(--blue-soft); border-color: var(--blue-line); }

/* Company detail */
.crumbs { margin-bottom: 14px; font-size: 14px; }
.crumbs a { text-decoration: none; font-weight: 550; }
.company-head { padding: 24px; }
.company-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.facts { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 18px 0 0; }
.facts dt { color: var(--muted); font-size: 12.5px; }
.facts dd { margin: 2px 0 0; font-weight: 550; color: var(--ink); }
.readonly-note { margin: 18px 0 0; font-size: 13px; color: var(--slate); background: var(--slate-soft); border: 1px dashed var(--slate-line); border-radius: var(--radius-sm); padding: 8px 12px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0; }
.stat { padding: 18px 20px; display: grid; gap: 2px; }
.stat-value { font-size: 1.6rem; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: 13px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 8px 0 16px; overflow-x: auto; }
.tabs a { text-decoration: none; color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.grid-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
.section { padding: 22px 24px; scroll-margin-top: 90px; }
.details { display: grid; margin: 14px 0 0; }
.details > div { display: grid; grid-template-columns: minmax(150px, 42%) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.details > div:last-child { border-bottom: 0; }
.details dt { color: var(--muted); font-size: 14px; }
.details dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.empty-value { color: var(--faint); font-style: italic; }
.hint { display: block; color: var(--faint); font-size: 12.5px; margin-top: 2px; }
.color-value { display: flex; align-items: center; gap: 8px; }
.swatch { flex: none; }
.meta { color: var(--faint); font-size: 12.5px; margin: 12px 0 0; }

/* History */
.timeline { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.timeline-item { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 12px 16px; background: var(--surface); }
.timeline-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.timeline-action { font-weight: 650; color: var(--ink); }
.timeline-head .muted { margin: 0; font-size: 13px; }
.timeline-note { margin: 8px 0 0; font-size: 14px; }
.changes { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13.5px; table-layout: fixed; }
.changes th, .changes td { text-align: left; padding: 6px 8px; border-top: 1px solid var(--line-2); vertical-align: top; overflow-wrap: anywhere; }
.changes thead th { color: var(--faint); font-weight: 600; font-size: 12px; border-top: 0; }
.changes tbody th { color: var(--muted); font-weight: 550; width: 34%; }
.changes .from { color: var(--muted); }
.changes .from .val { text-decoration: line-through; text-decoration-color: var(--faint); }
.changes .from.is-empty .val { text-decoration: none; color: var(--faint); font-style: italic; }
.changes .to { color: var(--ink); font-weight: 550; }
.pager { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

.message { max-width: 560px; margin: 40px auto; padding: 32px; text-align: center; }

/* Tablet */
@media (max-width: 960px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* Phone: the table becomes a list of cards */
@media (max-width: 680px) {
  .wrap { padding: 0 16px; }
  h1 { font-size: 1.4rem; }
  .search { flex-wrap: wrap; }
  .search input { flex-basis: 100%; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
  .table tbody tr:last-child { border-bottom: 0; }
  .table td { padding: 4px 0; border: 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .table td::before { content: attr(data-label); color: var(--muted); font-size: 13px; text-align: left; }
  .table td:first-child { display: block; text-align: left; margin-bottom: 4px; }
  .table td:first-child::before { content: none; }
  .table .num { text-align: right; }
  .stats { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .stat { padding: 14px; }
  .stat-value { font-size: 1.3rem; }
  .details > div { grid-template-columns: 1fr; gap: 2px; }
  .company-head, .section { padding: 18px; }
  .login, .message { padding: 24px; margin: 20px auto; }
  /* History: each change becomes a small card (field, then was / now side by side). */
  .changes, .changes tbody { display: block; table-layout: auto; }
  .changes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .changes tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--line-2); }
  .changes tbody th { grid-column: 1 / -1; width: auto; border: 0; padding: 0; }
  .changes td { border: 0; padding: 0; }
  .changes td::before { content: attr(data-label); display: block; color: var(--faint); font-size: 11.5px; font-style: normal; font-weight: 500; }
  .timeline-item { padding: 12px; }
}

/* ---- Managing companies (phase 1.4c) ---- */
.btn-caution { background: var(--card); color: var(--amber); border-color: var(--amber-line); }
.btn-caution:hover { background: var(--amber-soft); color: var(--amber); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #912018; color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.alert-success { background: var(--green-soft); border-color: var(--green-line); color: var(--green); margin: 0 0 16px; }
.alert-warning { background: var(--amber-soft); border-color: var(--amber-line); color: #7a4504; margin: 0 0 16px; }
.alert p { margin: 0; }
.alert p + p { margin-top: 6px; }
.error-summary { margin: 0 0 16px; }
.error-summary ul { margin: 8px 0 0; padding-left: 20px; }
.error-summary a { color: var(--red); }
.company-form { display: grid; gap: 16px; }
.form-section { margin: 0; padding: 20px 24px 24px; min-width: 0; }
.form-section > legend { font-size: 1.05rem; font-weight: 650; color: var(--ink); padding: 0 6px; margin-left: -6px; float: left; width: 100%; margin-bottom: 14px; overflow-wrap: anywhere; }
/* The legend floats (so it sits inside the card, not on its border). Everything after it starts below it: a grid or
   flex box (a new formatting context) next to a float of full width is otherwise squeezed beside it or pushed past the
   right edge (phase 1.9e fix). */
.form-section > legend ~ * { clear: both; }
/* Fields that follow each other directly in a section (the message after the contact grid, a company's own questions)
   keep the same distance as inside the grid. */
.form-section > :not(legend) + :not(legend) { margin-top: 16px; }
/* minmax(0, 1fr): a column never grows past its share because of a long word, URL or option (1fr alone = minmax(auto, 1fr)). */
.form-grid { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.field-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; min-width: 0; }
.field-block label, .label-like { font-weight: 600; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.field-tag { color: var(--faint); font-weight: 500; font-size: 12.5px; }
.field-hint { margin: 0; color: var(--faint); font-size: 12.5px; overflow-wrap: anywhere; }
.field-error { margin: 0; color: var(--red); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
/* Text boxes only: checkboxes, radio buttons, colour and file inputs keep their own size (a checkbox stretched to the
   full width pushed its label out of the field: phase 1.9e fix). */
.field-block input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field-block select, .field-block textarea { font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 12px; width: 100%; max-width: 100%; min-width: 0; }
.field-block input[type="file"] { font: inherit; font-size: 14px; color: var(--text); width: 100%; max-width: 100%; min-width: 0; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: #fff; }
.field-block input[type="checkbox"], .field-block input[type="radio"] { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.field-block textarea { resize: vertical; min-height: 80px; }
.field-block input[type="color"] { width: 64px; height: 40px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; }
.field-block select:focus, .field-block textarea:focus, .field-block input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.has-error input, .has-error select, .has-error textarea { border-color: var(--red) !important; background: #fffafa; }
/* Two-step code: six one-digit boxes (ui-mfa.tsx OtpField, shown by mfa-code.js). The selector outweighs the general
   field rule above, so the boxes keep their own size; focus uses the same purple border and ring. */
.otp-boxes { display: flex; gap: 8px; max-width: 360px; }
.otp-boxes[hidden] { display: none; }
.field-block .otp-boxes input.otp-box:not([type="color"]):not([type="checkbox"]):not([type="radio"]) { flex: 1 1 0; min-width: 0; max-width: 52px; height: 56px; padding: 0; text-align: center; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); border-radius: 10px; caret-color: var(--accent); }
.field-block .otp-boxes input.otp-box:not([type="color"]):not([type="checkbox"]):not([type="radio"]):focus { border: 2px solid var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.otp-box::selection { background: var(--accent-soft); color: var(--ink); }
.btn:disabled, .btn:disabled:hover { opacity: .55; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--accent); }
.fixed-value { margin: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.confirm { max-width: 640px; margin: 8px auto; padding: 28px; }
.confirm h1 { font-size: 1.4rem; }
.confirm > p { margin: 12px 0 0; }
.status-move { display: flex; align-items: center; gap: 8px; }
@media (max-width: 680px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-section { padding: 16px; }
  .page-head { flex-wrap: wrap; align-items: flex-start; }
  .confirm { padding: 20px; }
}

/* ---- Automation configuration (phase 1.5c-2) ---- */
.badge-config-active { color: var(--green); background: var(--green-soft); border-color: var(--green-line); }
.badge-config-draft { color: var(--blue); background: var(--blue-soft); border-color: var(--blue-line); }
.badge-config-archived { color: var(--slate); background: var(--slate-soft); border-color: var(--slate-line); }
.tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.plain-list { margin: 0; padding-left: 18px; }
.plain-list li + li { margin-top: 2px; }
.words { display: flex; flex-wrap: wrap; gap: 6px; }
.word { background: var(--slate-soft); border: 1px solid var(--slate-line); border-radius: 999px; padding: 1px 9px; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.para { margin: 0; }
.para + .para { margin-top: 6px; }
.muted-inline { color: var(--muted); font-weight: 500; }
.section-title { margin: 0; font-size: 1.2rem; }
.sub-title { font-size: 1.05rem; margin: 22px 0 0; }
.editor { gap: 14px; }
.row-card { margin: 0; padding: 18px 22px 20px; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.row-card > legend { font-weight: 650; color: var(--ink); padding: 0 6px; margin-left: -6px; max-width: 100%; overflow-wrap: anywhere; }
.row-new { border-style: dashed; background: var(--surface); }
.key { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.span-2 { grid-column: 1 / -1; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; }
.check { display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 550; color: var(--ink); font-size: 14px; cursor: pointer; max-width: 100%; }
.check > span { min-width: 0; overflow-wrap: anywhere; }
.check input { margin: 3px 0 0; width: 17px; height: 17px; flex: none; accent-color: var(--accent); }
.check .field-hint { display: block; font-weight: 400; }
.check-group { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.check-group > legend { font-weight: 600; color: var(--ink); font-size: 14px; padding: 0; }
.check-group .checks { margin-top: 8px; }
.row-card.check-group { padding: 18px 22px 20px; border: 1px solid var(--line); margin: 0; }
.row-card.check-group > legend { padding: 0 6px; margin-left: -6px; font-size: 1rem; font-weight: 650; }
.check-group.has-error .checks { outline: 1px solid var(--red); outline-offset: 6px; border-radius: 4px; }
/* Not sticky: a fixed bar would cover the field that has the keyboard focus (WCAG 2.4.11). */
.editor-actions { align-items: center; border-top: 1px solid var(--line); padding: 12px 0; }
.confirm.wide { max-width: 760px; }
.choice-group { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.choice-group > legend { font-weight: 650; color: var(--ink); margin-bottom: 8px; padding: 0; }
.choice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice-extra { flex: 1 1 260px; }
.choice-link { font-size: 14px; font-weight: 550; white-space: nowrap; }
.compare td:not(:first-child), .compare th:not(:first-child) { font-variant-numeric: tabular-nums; }
@media (max-width: 680px) {
  .row-card, .row-card.check-group { padding: 14px; }
  .checks { flex-direction: column; gap: 10px; }
  .editor-actions .field-hint { flex-basis: 100%; }
  .tabs a { padding: 10px 10px; }
  .choice { align-items: flex-start; }
}
.row-card > .field-hint + .form-grid, .row-card > .check-group + .form-grid { margin-top: 16px; }
.row-card > .field-hint + .checks { margin-top: 10px; }
/* Editor (phase 1.5c-3b): section tabs are save buttons; rows can be moved. */
.editor-tabs { margin-bottom: 0; }
.tab-button, .tab-current { font: inherit; font-weight: 600; padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; white-space: nowrap; }
.tab-button { color: var(--muted); cursor: pointer; }
.tab-button:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.tab-current { color: var(--accent); border-bottom-color: var(--accent); }
.changed-dot { color: var(--amber); font-size: 10px; margin-left: 6px; vertical-align: middle; }
.row-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.btn-small { padding: 4px 10px; font-size: 13px; min-height: 0; }
.row-actions { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }

/* ---- Company list: configuration status and accounts (phase 1.5c-3c-1) ---- */
.cell-stack { display: inline-grid; gap: 4px; justify-items: start; }
.hint-inline { color: var(--muted); font-size: 12.5px; }
.badge-warning { color: #7a4504; background: var(--amber-soft); border-color: var(--amber-line); }
@media (max-width: 680px) {
  .table td .cell-stack { justify-items: end; }
}

/* ---- Company page: accounts and access (phase 1.5c-3c-2) ---- */
.accounts-rights { margin-top: 24px; }

/* ---- Inquiries: suggested classification and processing (phase 1.5d-5) ---- */
.badge-urgent { color: var(--red); background: var(--red-soft); border-color: var(--red-line); }
.signals, .reasons { margin-top: 16px; }
.signals h3, .reasons h3 { font-size: 14px; margin-bottom: 8px; }
.reasons ul { margin: 0; padding-left: 20px; }
.reasons li + li { margin-top: 4px; }
/* A long shared link (the public inquiry form) wraps instead of running off a phone screen. */
.link-break { overflow-wrap: anywhere; }

/* ---- AI usage and the processing overview (phase 1.5d-5) ---- */
.budgets { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin: 12px 0; }
.budget { display: grid; gap: 6px; }
.budget-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.budget-label { font-weight: 650; color: var(--ink); }
.budget-amount { font-variant-numeric: tabular-nums; }
.budget meter { width: 100%; height: 12px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.usage-days { margin: 24px 0; }
.usage-table td, .usage-table th[scope="row"] { font-variant-numeric: tabular-nums; }
.usage-table th[scope="row"] { text-align: left; font-weight: 600; }
.usage-table tfoot th, .usage-table tfoot td { font-weight: 700; border-top: 2px solid var(--line); }
.row-quiet td { color: var(--muted); }
@media (max-width: 680px) {
  .budgets { grid-template-columns: 1fr; }
  .usage-table tfoot, .usage-table tfoot tr { display: block; width: 100%; }
  .usage-table tfoot tr { padding: 14px 16px; }
  .usage-table th[scope="row"] { display: block; width: 100%; padding: 0 0 4px; border: 0; }
  .usage-table tfoot td { border-top: 0; }
  .usage-table td:first-child { display: flex; text-align: right; margin-bottom: 0; }
  .usage-table td:first-child::before { content: attr(data-label); }
}
.quiet-cell { color: var(--muted); }
@media (max-width: 680px) {
  .usage-table tr.row-quiet { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
  .usage-table tr.row-quiet th[scope="row"] { width: auto; padding: 0; }
  .usage-table td.quiet-cell { display: block; width: auto; padding: 0; text-align: right; }
  .usage-table td.quiet-cell::before { content: none; }
}
/* History entries that record facts instead of changes (phase 1.5d). */
.audit-facts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 8px 0 0; font-size: 13.5px; }
.audit-facts div { display: flex; gap: 6px; }
.audit-facts dt { color: var(--muted); }
.audit-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* ---- Design system refinements (phase 1.6a) ---- */
.card { border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.page-head { margin-bottom: 24px; }
.page-head .muted { max-width: 78ch; }
.btn { border-radius: var(--radius-sm); padding: 8px 14px; font-size: 14px; transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
.btn-primary { background: var(--accent); box-shadow: 0 1px 2px rgba(15, 31, 61, .3), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-quiet { border-color: var(--line-strong); box-shadow: 0 1px 1px rgba(20, 18, 31, .04); }
.btn-quiet:hover { background: var(--hover); border-color: var(--accent-line); color: var(--ink); }
.search select { font: inherit; font-size: 14px; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; }
.search select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.table th { background: var(--surface); color: var(--muted); font-size: 11.5px; letter-spacing: .06em; }
.table td { border-bottom-color: var(--line-2); }
.table tbody tr:hover { background: var(--hover); }
.chip:hover { border-color: var(--accent-line); }
.stat { display: grid; gap: 4px; padding: 18px 20px; }
.stat-label { order: -1; color: var(--muted); font-size: 13px; font-weight: 550; }
.stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
.alert { border-radius: var(--radius-sm); }
.section h2 { margin-bottom: 2px; }
.timeline-item { border-left-color: var(--accent); background: var(--surface); }
/* Status colours, used consistently: new = violet, in progress = blue, to review = amber, done = green,
   error / urgent = red, closed = grey. */
.badge { font-size: 12px; padding: 3px 9px; }
.badge-st-new { color: var(--violet); background: var(--violet-soft); border-color: var(--violet-line); }
.badge-st-info { color: var(--blue); background: var(--blue-soft); border-color: var(--blue-line); }
.badge-st-review { color: #7a4504; background: var(--amber-soft); border-color: var(--amber-line); }
.badge-st-done { color: var(--green); background: var(--green-soft); border-color: var(--green-line); }
.badge-st-error { color: var(--red); background: var(--red-soft); border-color: var(--red-line); }
.badge-st-closed { color: var(--slate); background: var(--slate-soft); border-color: var(--slate-line); }
/* With the sidebar the content column is narrower: two columns only where they fit. */
@media (max-width: 1199px) {
  .shell:not(.shell-plain) .grid-2 { grid-template-columns: 1fr; }
}

/* ---- App shell on smaller screens (phase 1.6a) ---- */
@media (max-width: 959px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .topbar .brand { display: inline-flex; }
  .mobile-nav { display: block; }
  .topbar-inner { padding: 0 20px; }
  .main { padding: 24px 20px 40px; }
  .foot { padding: 0 20px 24px; }
}
@media (max-width: 680px) {
  .topbar-inner { padding: 0 12px; gap: 8px; min-height: 52px; }
  .topbar-end { gap: 8px; }
  .user-name { display: none; }
  .brand-name { font-size: 14px; }
  .main { padding: 20px 16px 36px; }
  .foot { padding: 0 16px 20px; }
  h1 { font-size: 1.4rem; }
  .stat { padding: 14px; }
  .stat-value { font-size: 1.35rem; }
}
@media (max-width: 380px) {
  .brand-name { display: none; }
}
/* Phase 1.6a fixes found by the browser check: the logo has a solid fallback colour under its gradient; a wide table
   scrolls inside its card instead of being cut off; the phone top bar keeps the brand mark, menu, language and
   sign-out within 390px. */
.brand-mark { background-color: #1a54e3; background-image: var(--brand-gradient); }
.table-wrap { overflow-x: auto; }
@media (max-width: 680px) {
  .brand-name { display: none; }
  .topbar .btn-quiet { padding: 6px 10px; font-size: 13px; }
  .lang a { padding: 4px 8px; }
  .menu-button { padding: 6px 10px; }
}
/* The sidebar column keeps its colour and edge down to the end of long pages (the sidebar itself is sticky). */
.shell:not(.shell-plain) { background: linear-gradient(90deg, var(--sidebar) 0, var(--sidebar) calc(var(--sidebar-width) - 1px), var(--line) calc(var(--sidebar-width) - 1px), var(--line) var(--sidebar-width), transparent var(--sidebar-width)); }
@media (max-width: 959px) {
  .shell:not(.shell-plain) { background: none; }
}
.icon-settings { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E"); }

/* ---- Company dashboard and settings (phase 1.6b) ---- */
/* Large monitors: use more of the width (content stays readable: text blocks keep their own max width). */
.main, .foot { max-width: 1560px; }
@media (min-width: 1800px) {
  .main, .foot { max-width: 1720px; }
}
.eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-hover); }
.dash-head { align-items: flex-end; }
.dash-head .company-title { gap: 10px 14px; }
.head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.action-alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
.action-alert .btn { flex: none; }
.stats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 20px; }
.stat-link { text-decoration: none; color: inherit; border-top: 3px solid var(--accent-line); transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.stat-link:hover { border-color: var(--accent-line); border-top-color: var(--accent); box-shadow: var(--shadow-pop); color: inherit; }
.stat-link:focus-visible { border-radius: var(--radius); }
.stat-hint { color: var(--faint); font-size: 12.5px; }
.stat-warn { border-top-color: #f0b54a; }
.stat-warn .stat-value { color: #7a4504; }
.stat-alert { border-top-color: #e5675c; }
.stat-alert .stat-value { color: var(--red); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.dash-main, .dash-side { display: grid; gap: 16px; min-width: 0; }
.section-head h2 { margin: 0; }
.inq-list { list-style: none; margin: 4px -12px 0; padding: 0; }
.inq-list li + li { border-top: 1px solid var(--line-2); }
.inq-item { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text); }
.inq-item:hover { background: var(--hover); color: var(--text); }
.inq-main { display: grid; gap: 2px; min-width: 0; }
.inq-name { font-weight: 650; color: var(--ink); }
.inq-subject { color: var(--muted); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inq-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; flex: none; max-width: 60%; }
.inq-meta .cell-stack { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inq-time { color: var(--faint); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.list-empty { margin: 8px 0 0; color: var(--muted); }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.settings-side { display: grid; gap: 16px; min-width: 0; }
.settings-grid .facts { margin-top: 14px; }
.rights-title { margin-top: 18px; }
.rights { margin: 8px 0 0; padding-left: 20px; }
.rights li + li { margin-top: 2px; }
@media (max-width: 1199px) {
  .stats-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-grid, .settings-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-5 .stat-link:last-child { grid-column: 1 / -1; }
  .head-actions { width: 100%; }
  .head-actions .btn { flex: 1 1 auto; }
  .inq-item { flex-direction: column; align-items: stretch; }
  .inq-meta { justify-content: flex-start; max-width: none; }
  .inq-subject { white-space: normal; }
}

/* ---- Inquiry management (phase 1.6c) ---- */
.share-bar { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 20px; padding: 14px 20px; margin-bottom: 16px; }
.share-bar h2 { font-size: .95rem; }
.share-bar .muted { margin: 0; grid-column: 2; grid-row: 1; font-size: 13.5px; }
.share-bar .share-link { margin: 0; grid-column: 1 / -1; font-size: 13.5px; }
.view-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.view-tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; }
.view-tab:hover { border-color: var(--accent-line); color: var(--ink); }
.view-tab[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.view-tab[aria-current="page"] .chip-count { background: rgba(255, 255, 255, .18); color: #fff; }
.view-review .chip-count { background: var(--amber-soft); color: #7a4504; }
.view-urgent .chip-count, .view-failed .chip-count { background: var(--red-soft); color: var(--red); }
.filter-bar { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(5, minmax(120px, 1fr)) auto; gap: 10px 12px; align-items: end; padding: 14px 16px; margin: 0 0 12px; }
.filter-field { display: grid; gap: 4px; min-width: 0; }
.filter-field label { font-size: 12px; font-weight: 650; color: var(--muted); }
.filter-field input, .filter-field select { font: inherit; font-size: 14px; color: var(--ink); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; width: 100%; min-width: 0; }
.filter-field input:focus, .filter-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; font-size: 13.5px; }
.active-filters-label { color: var(--muted); font-weight: 600; }
.chip-filter { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hover); padding: 4px 10px; }
.chip-filter:hover { border-color: var(--accent); color: var(--accent-hover); }
.clear-filters { font-weight: 600; margin-left: 4px; }
.inbox-table td { padding-top: 11px; padding-bottom: 11px; }
.inbox-table td:first-child { box-shadow: inset 3px 0 0 transparent; }
.inbox-table tr.row-review td:first-child { box-shadow: inset 3px 0 0 #f0b54a; }
.inbox-table tr.row-failed td:first-child { box-shadow: inset 3px 0 0 #e5675c; }
.inbox-table tr.row-failed { background: #fffafa; }
.subject-line { display: block; color: var(--ink); font-weight: 550; }
.excerpt { display: block; max-width: 52ch; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-plain { display: block; color: var(--faint); font-size: 12.5px; }
.inbox-table time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.inquiry-head { padding: 20px 24px; margin-bottom: 16px; }
.inquiry-head h1 { margin: 10px 0 4px; }
.inquiry-meta { margin: 0; color: var(--muted); }
.inquiry-meta strong { color: var(--ink); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; }
.detail-main, .detail-side { display: grid; gap: 16px; min-width: 0; }
.detail-side { position: sticky; top: 72px; }
.message-body { max-width: 75ch; font-size: 15px; line-height: 1.65; }
.message-body p { margin: 10px 0 0; }
.details-stacked > div { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
.flow { list-style: none; margin: 14px 0 0; padding: 0; }
.flow-item { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 4px 12px; padding: 0 0 16px; }
.flow-item:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.flow-dot { width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; background: var(--card); border: 3px solid var(--slate-line); }
.flow-done .flow-dot { border-color: var(--green); }
.flow-alert .flow-dot { border-color: var(--red); }
.flow-info .flow-dot { border-color: var(--blue); }
.flow-neutral .flow-dot { border-color: var(--accent); }
.flow-title { margin: 0; font-weight: 600; color: var(--ink); }
.flow-meta { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.flow-time { color: var(--faint); font-size: 12.5px; white-space: nowrap; padding-top: 2px; }
@media (max-width: 1399px) {
  .filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-search { grid-column: 1 / -1; }
  .filter-actions { align-self: end; }
}
@media (max-width: 1199px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-side { position: static; }
}
@media (max-width: 680px) {
  .filter-bar { grid-template-columns: 1fr 1fr; padding: 12px; }
  .filter-actions .btn { width: 100%; }
  .share-bar { grid-template-columns: 1fr; }
  .share-bar .muted { grid-column: 1; grid-row: auto; }
  .excerpt { white-space: normal; max-width: none; }
  .inbox-table tr.row-review { box-shadow: inset 4px 0 0 #f0b54a; }
  .inbox-table tr.row-failed { box-shadow: inset 4px 0 0 #e5675c; }
  .inbox-table tr.row-review td:first-child, .inbox-table tr.row-failed td:first-child { box-shadow: none; }
  .flow-item { grid-template-columns: 18px minmax(0, 1fr); }
  .flow-time { grid-column: 2; padding: 0; }
  .inquiry-head { padding: 16px; }
}
/* Phase 1.6c, after the browser check: the inbox table keeps to the card width (fixed column shares; long subjects and
   excerpts wrap or end in an ellipsis instead of pushing "Received" out of view), and on laptop widths the filters fit
   on one line under the search field. */
@media (min-width: 960px) {
  .inbox-table { table-layout: fixed; }
  .inbox-table th:nth-child(1) { width: 21%; }
  .inbox-table th:nth-child(2) { width: 33%; }
  .inbox-table th:nth-child(3) { width: 17%; }
  .inbox-table th:nth-child(4) { width: 15%; }
  .inbox-table th:nth-child(5) { width: 14%; }
  .inbox-table td { overflow-wrap: anywhere; }
  .inbox-table .excerpt { max-width: 100%; }
  .inbox-table .row-link, .inbox-table .sub { overflow-wrap: anywhere; }
}
@media (max-width: 1399px) and (min-width: 1200px) {
  .filter-bar { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; }
}
@media (max-width: 1199px) and (min-width: 681px) {
  .filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Tablet (no sidebar, 681-959px): the inbox is shown as cards, like on a phone. */
@media (min-width: 681px) and (max-width: 959px) {
  .inbox-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .inbox-table, .inbox-table tbody, .inbox-table tr, .inbox-table td { display: block; width: 100%; }
  .inbox-table tr { padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
  .inbox-table tbody tr:last-child { border-bottom: 0; }
  .inbox-table td { padding: 4px 0; border: 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .inbox-table td::before { content: attr(data-label); color: var(--muted); font-size: 13px; text-align: left; }
  .inbox-table td:first-child { display: block; text-align: left; margin-bottom: 4px; }
  .inbox-table td:first-child::before { content: none; }
  .inbox-table td .cell-stack { justify-items: end; }
  .inbox-table .excerpt { white-space: normal; max-width: none; }
  .inbox-table tr.row-review { box-shadow: inset 4px 0 0 #f0b54a; }
  .inbox-table tr.row-failed { box-shadow: inset 4px 0 0 #e5675c; }
  .inbox-table tr.row-review td:first-child, .inbox-table tr.row-failed td:first-child { box-shadow: none; }
}
/* Inbox cards (phone and tablet): subject + excerpt and date + channel stack under each other, right-aligned. */
@media (max-width: 959px) {
  .inbox-table td:nth-child(2), .inbox-table td:nth-child(5) { display: grid; grid-template-columns: minmax(80px, auto) minmax(0, 1fr); column-gap: 12px; text-align: right; }
  .inbox-table td:nth-child(2)::before, .inbox-table td:nth-child(5)::before { grid-row: 1 / span 2; }
  .inbox-table td:nth-child(2) > *, .inbox-table td:nth-child(5) > * { grid-column: 2; }
}

/* ---- Automation page (phase 1.6d) ---- */
/* Status at the top: active configuration, automatic processing, available AI budget. */
.auto-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; }
.status-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-top: 3px solid var(--line-strong); min-width: 0; }
.status-card.status-ok { border-top-color: #3fae6a; }
.status-card.status-warn { border-top-color: #f0b54a; }
.status-title { margin: 0; font-size: 13px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.status-value { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.status-value .badge { font-size: 13px; padding: 4px 11px; letter-spacing: 0; }
.status-text { margin: 0; color: var(--text); font-size: 14px; }
.status-sub { display: block; margin: 0; color: var(--muted); font-size: 13px; }
.status-text .status-sub { margin-top: 2px; }
.status-link { margin: auto 0 0; padding-top: 4px; font-size: 14px; font-weight: 600; }
.status-card .readonly-note { margin: 0; }
.status-card .budgets { margin: 0; }
.checklist { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.checklist li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.check-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; }
.check-ok .check-mark { color: var(--green); background: var(--green-soft); }
.check-no .check-mark { color: var(--red); background: var(--red-soft); }
.check-value { color: var(--muted); font-size: 12.5px; }
.check-no .check-value { color: var(--red); font-weight: 600; }
/* What runs now, and the contents of the configuration. */
.auto-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 16px; align-items: start; margin: 0 0 16px; }
.auto-main, .auto-side { display: grid; gap: 16px; min-width: 0; }
.what-list { list-style: none; margin: 10px 0 0; padding: 0; }
.what-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.what-main { display: grid; gap: 2px; min-width: 0; }
.what-title { font-weight: 650; color: var(--ink); }
.what-text { color: var(--muted); font-size: 13.5px; max-width: 70ch; }
.what-item .badge { flex: none; margin-top: 2px; }
.content-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.content-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; box-shadow: none; min-width: 0; }
.content-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.content-card-head h3 { margin: 0; font-size: 1rem; }
.content-count { font-size: 1.4rem; font-weight: 700; color: var(--accent-hover); font-variant-numeric: tabular-nums; }
.content-meta { margin: 0; color: var(--muted); font-size: 13px; }
.content-card .empty-value { margin: 0; font-size: 13.5px; }
.word-more { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hover); }
.content-facts { margin: 0; display: grid; gap: 6px; font-size: 13.5px; }
.content-facts div { display: flex; justify-content: space-between; gap: 12px; }
.content-facts dt { color: var(--muted); }
.content-facts dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.content-card-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: auto 0 0; padding-top: 6px; font-size: 14px; font-weight: 600; }
.next-step { margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 13.5px; color: var(--text); }
.next-step strong { color: var(--accent-hover); }
/* Version history: counts per status and the row of the version in use / the working draft marked at the left. */
.version-counts { display: flex; flex-wrap: wrap; gap: 8px 14px; list-style: none; margin: 0; padding: 0; }
.version-counts li { display: inline-flex; align-items: center; gap: 6px; }
.version-count { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.versions-table td.version-cell { box-shadow: inset 3px 0 0 transparent; }
.versions-table td.version-active { box-shadow: inset 3px 0 0 #3fae6a; }
.versions-table td.version-working { box-shadow: inset 3px 0 0 #6c8ff0; }
.versions-table td.version-cell .sub { font-family: var(--font); }
.versions-table td.version-active .sub { color: var(--green); font-weight: 600; }
.versions-table td.version-working .sub { color: var(--blue); font-weight: 600; }
/* Editor: the sections are numbered steps; on wide screens a step rail at the left of the form. */
.editor-tabs { counter-reset: step; }
.editor-tabs .tab-button::before, .editor-tabs .tab-current::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; font-size: 11.5px; font-weight: 700; background: var(--slate-soft); color: var(--slate); vertical-align: 1px; }
.editor-tabs .tab-current::before { background: var(--accent); color: #fff; }
.editor-step { margin: 0; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-hover); }
.editor-step + .section-title { margin-top: -10px; }
.editor-body { display: grid; gap: 14px; min-width: 0; }
@media (min-width: 1200px) {
  .editor { grid-template-columns: 230px minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .editor > .editor-body { grid-column: 2; }
  .editor > .editor-tabs { grid-column: 1; grid-row: 1; position: sticky; top: 72px; flex-direction: column; gap: 2px; border-bottom: 0; border-right: 1px solid var(--line); margin: 0; padding-right: 12px; overflow: visible; }
  .editor-tabs .tab-button, .editor-tabs .tab-current { text-align: left; white-space: normal; border-bottom: 0; border-radius: var(--radius-sm); margin: 0; padding: 9px 10px; }
  .editor-tabs .tab-button:hover { background: var(--hover); }
  .editor-tabs .tab-current { background: var(--accent-soft); }
}
@media (max-width: 1199px) {
  .auto-status { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .auto-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1099px) {
  .auto-status { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .content-cards { grid-template-columns: minmax(0, 1fr); }
  .what-item { flex-direction: column; }
  .status-card { padding: 16px; }
  .status-value { font-size: 1.2rem; }
}
/* Phase 1.6d, after the browser check: between phone and wide desktop the version history is shown as cards (it has too
   many columns for the content column next to the sidebar); the editor's steps and a version's section links wrap
   instead of scrolling sideways. */
@media (min-width: 681px) and (max-width: 1199px) {
  .versions-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .versions-table, .versions-table tbody, .versions-table tr, .versions-table td { display: block; width: 100%; }
  .versions-table tr { padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
  .versions-table tbody tr:last-child { border-bottom: 0; }
  .versions-table td { padding: 4px 0; border: 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .versions-table td::before { content: attr(data-label); color: var(--muted); font-size: 13px; text-align: left; flex: none; }
  .versions-table td.version-cell { display: block; text-align: left; margin-bottom: 4px; padding-left: 10px; }
  .versions-table td.version-cell::before { content: none; }
  .versions-table .row-actions { justify-content: flex-end; }
}
@media (max-width: 680px) {
  .versions-table td.version-cell { padding-left: 10px; }
}
@media (max-width: 1199px) {
  .editor-tabs { flex-wrap: wrap; overflow: visible; row-gap: 2px; }
}
@media (max-width: 680px) {
  .tabs { flex-wrap: wrap; overflow: visible; }
  .tabs a, .tab-button, .tab-current { padding: 8px 10px; }
}

/* ---- AI usage and cost analysis (phase 1.6e) ---- */
.page-head:has(.period-chips) { flex-wrap: wrap; }
.period-chips { flex: none; }
.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 16px; }
.usage-stats .stat-value { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.budget-notice { margin: 0 0 16px; }
/* Page grid: on wide screens the chart and the records left, the budget and the explanation right. */
.usage-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 0 16px; }
.usage-grid > * { min-width: 0; margin: 0; }
@media (min-width: 1400px) {
  .usage-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); grid-template-areas: "chart budget" "chart how" "table how"; grid-template-rows: auto auto 1fr; }
  .usage-chart { grid-area: chart; }
  .usage-budget { grid-area: budget; }
  .usage-days { grid-area: table; }
  .usage-how { grid-area: how; }
  .usage-budget .budgets { grid-template-columns: 1fr; }
}
.section-note { margin: 0; font-size: 13.5px; }
/* Budget bars: the native meter (green, amber from 75%, red from 90%) with marks at 75% and 90%. */
.budget-bar { position: relative; padding: 3px 0; }
.budget meter { display: block; width: 100%; height: 12px; }
.budget meter::-webkit-meter-bar { background: var(--slate-soft); border: 1px solid var(--line-strong); border-radius: 6px; height: 12px; }
.budget meter::-webkit-meter-optimum-value { background: #2f9e5b; border-radius: 6px; }
.budget meter::-webkit-meter-suboptimum-value { background: #d98a10; border-radius: 6px; }
.budget meter::-webkit-meter-even-less-good-value { background: #d03b2f; border-radius: 6px; }
.budget meter::-moz-meter-bar { background: #2f9e5b; border-radius: 6px; }
.budget meter:-moz-meter-sub-optimum::-moz-meter-bar { background: #d98a10; }
.budget meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: #d03b2f; }
.budget-marks { position: absolute; inset: 0; pointer-events: none; }
.budget-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: .45; border-radius: 1px; }
.budget-mark-75 { left: 75%; }
.budget-mark-90 { left: 90%; }
.budget-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.budget-pct { font-size: 13px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.budget-level { justify-self: start; font-size: 12.5px; font-weight: 650; border-radius: 999px; padding: 2px 10px; border: 1px solid; }
.budget-level-warn { color: #7a4504; background: var(--amber-soft); border-color: var(--amber-line); }
.budget-level-alert, .budget-level-full { color: var(--red); background: var(--red-soft); border-color: var(--red-line); }
/* The chart: an SVG for the bars (stretches with the card), HTML for the labels (never shrinks). */
.usage-chart .section-head { margin-bottom: 4px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; color: var(--muted); }
.chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.swatch-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.key-settled, .key-ok { background: var(--accent); }
.key-reserved { background: #d98a10; }
.key-failed { background: #d03b2f; }
.key-estimated { background: transparent; border: 2px dashed var(--muted); }
.chart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; height: 240px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chart-y span { line-height: 1; transform: translateY(-1px); }
.chart-plot { position: relative; min-width: 0; }
.chart-svg { display: block; width: 100%; height: 240px; overflow: visible; }
.chart-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-base { stroke: var(--line-strong); stroke-width: 1; }
.chart-hit { fill: transparent; }
.chart-day:hover .chart-hit { fill: var(--hover); }
.bar-settled, .bar-ok { fill: var(--accent); }
.bar-reserved { fill: #d98a10; }
.bar-failed { fill: #d03b2f; }
.chart-today .bar-settled, .chart-today .bar-ok { fill: var(--accent-hover); }
.chart-empty { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); width: min(90%, 460px); margin: 0; padding: 10px 14px; text-align: center; font-size: 13.5px; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.chart-x { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.chart-foot { margin: 10px 0 0; font-size: 13.5px; }
/* How costs are counted. */
.how-list { display: grid; gap: 12px; margin: 12px 0 0; }
.how-list dt { display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--ink); }
.how-list dd { margin: 2px 0 0 20px; color: var(--text); font-size: 14px; }
.how-zero-title { margin: 20px 0 4px; font-size: 1rem; scroll-margin-top: 90px; }
.how-text { margin: 0 0 10px; font-size: 14px; }
/* Records: compact rows, readable on wide screens. */
.usage-table th, .usage-table td { padding-top: 8px; padding-bottom: 8px; }
.usage-table td:not(:first-child), .usage-table th[scope="col"]:not(:first-child) { text-align: right; }
.usage-table .sub { font-family: var(--font); }
#dagtabel { scroll-margin-top: 90px; }
@media (max-width: 1199px) {
  .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .chart-y, .chart-svg { height: 180px; }
  .chart-empty { top: 64px; }
  .usage-table td:not(:first-child) { text-align: right; }
  .how-list dd { margin-left: 0; }
}
/* Narrow cards (the dashboard's side column, the automation status block): the two budgets under each other. */
.dash-side .budgets, .status-card .budgets { grid-template-columns: minmax(0, 1fr); }
.budget, .budget meter { min-width: 0; }
/* Found by the 1.6e browser check (present since 1.6b, only without an active configuration): a long badge in a
   details row ("Geen actieve configuratie") didn't wrap and pushed the dashboard's side column off screen at 1366px. */
.details dd { min-width: 0; }
.details dd .badge { white-space: normal; }
/* Phase 1.6e, after looking at the screenshots: the day column of the records reads like the other cells (no header
   shading or capitals); the allowed models' prices as a short list (a table didn't fit the side card). */
.usage-table tbody th[scope="row"], .usage-table tfoot th[scope="row"] { background: transparent; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); }
.price-list { margin: 8px 0 10px; display: grid; gap: 8px; }
.price-list > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.price-list dt code { font-size: 12.5px; overflow-wrap: anywhere; }
.price-list dd { margin: 4px 0 0; font-size: 13.5px; color: var(--text); }
.price-list strong { color: var(--ink); font-variant-numeric: tabular-nums; }
/* Above phone width the day stays on one line (it wrapped into two lines on a tablet); the tokens too where it fits. */
@media (min-width: 681px) {
  .usage-table th[scope="row"] time { white-space: nowrap; }
}
@media (min-width: 1200px) {
  .usage-table td[data-label="Tokens (in / uit)"], .usage-table td[data-label="Tokens (in / out)"] { white-space: nowrap; }
}

/* ---- Administrator's platform dashboard (phase 1.6f) ---- */
.dash-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; }
.dash-chart { min-width: 0; margin: 0; }
.dash-chart .chart-y, .dash-chart .chart-svg { height: 200px; }
.dash-chart .chart-empty { top: 76px; }
.issue-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.issue { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid; font-size: 12.5px; font-weight: 650; text-decoration: none; }
.issue::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.issue-error { color: var(--red); background: var(--red-soft); border-color: var(--red-line); }
.issue-warn { color: #7a4504; background: var(--amber-soft); border-color: var(--amber-line); }
.issue:hover { text-decoration: underline; }
.attention-list { list-style: none; margin: 12px 0 0; padding: 0; }
.attention-list > li { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr); gap: 6px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-2); }
.attention-name { font-weight: 650; overflow-wrap: anywhere; }
.issue-list > li { display: block; padding: 0; border: 0; }
.co-section { margin: 24px 0 0; }
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.co-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-top: 3px solid var(--green-line); min-width: 0; }
.co-card.co-attention { border-top-color: #f0b54a; }
.co-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; }
.co-name { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.co-name a { color: var(--ink); text-decoration: none; }
.co-name a:hover { color: var(--accent); text-decoration: underline; }
.co-meta { margin: -4px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.co-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.co-figures div { display: grid; gap: 1px; }
.co-figures dt { color: var(--muted); font-size: 12.5px; }
.co-figures dd { margin: 0; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.co-figures .co-bad dd { color: var(--red); }
.co-budget { display: grid; gap: 4px; }
.co-budget meter { display: block; width: 100%; height: 10px; }
.co-budget meter::-webkit-meter-bar { background: var(--slate-soft); border: 1px solid var(--line-strong); border-radius: 6px; height: 10px; }
.co-budget meter::-webkit-meter-optimum-value { background: #2f9e5b; border-radius: 6px; }
.co-budget meter::-webkit-meter-suboptimum-value { background: #d98a10; border-radius: 6px; }
.co-budget meter::-webkit-meter-even-less-good-value { background: #d03b2f; border-radius: 6px; }
.co-budget .budget-pct { font-size: 12.5px; }
.co-ok { margin: 0; color: var(--green); font-size: 13px; font-weight: 600; }
.co-ok:empty { display: none; }
.co-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: auto 0 0; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: 14px; font-weight: 600; }
@media (max-width: 1199px) {
  .dash-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .attention-list > li { grid-template-columns: minmax(0, 1fr); }
  .co-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-chart .chart-y, .dash-chart .chart-svg { height: 160px; }
  .dash-chart .chart-empty { top: 52px; }
}
/* Found by the 1.6f browser check on an administrator's company page at 768-1024px (present since phase 1.5c-3c):
   a wide accounts table made its grid column grow instead of scrolling inside its own box, and the section links
   scrolled sideways. Grid and card children may shrink; section links wrap below the wide layout. */
.grid-2 > *, .section, .card { min-width: 0; }
/* Screen-reader-only texts in a table (position: absolute) stay inside the scrolling box instead of widening the page. */
.table-wrap { max-width: 100%; position: relative; }
@media (max-width: 1199px) {
  .tabs { flex-wrap: wrap; overflow: visible; }
}

/* Handling inquiries (phase 1.7c): action buttons, the original-inquiry choice and the status history. */
.handling-actions { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.choice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.choice-list .choice { justify-content: flex-start; flex-wrap: nowrap; align-items: flex-start; }
.choice-list .choice input { margin-top: 3px; flex: none; }
.choice-group.has-error .choice { border-color: var(--red-line); }
.inq-history { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.inq-history > li { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 14px; background: var(--surface); min-width: 0; }
.inq-history p { margin: 0; }
.inq-history .muted { margin-top: 4px; font-size: 13px; }
.inq-history-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.inq-history-note { margin-top: 8px !important; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Invitations and password reset (phase 1.7c). */
.cell-sub { display: block; color: var(--faint); font-size: 13px; overflow-wrap: anywhere; }
.link-output { width: 100%; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; }
.login-help { margin: 16px 0 0; font-size: 14px; }
.login .details { margin: 12px 0; }
/* A card or section right after a table card keeps the usual distance (team page, phase 1.7c). */
.table-wrap.card + .section, .table-wrap.card + .card { margin-top: 16px; }
/* AI reply drafts (phase 1.8c): the text as the customer would read it (line breaks kept), never sent by MAVEMY. */
.draft-card { border-left: 3px solid var(--accent); }
.draft-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.draft-subject { margin: 14px 0 0; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.draft-text { margin: 8px 0 0; max-width: 75ch; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 15px; line-height: 1.65; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.draft-original { margin: 14px 0 0; }
.draft-original > summary { cursor: pointer; font-weight: 550; }
.draft-reasons { margin: 6px 0 0; padding-left: 20px; }
.field-block textarea.draft-body { min-height: 320px; line-height: 1.6; }
/* Privacy (phase 1.8d): a shield. */
.icon-privacy { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
/* E-mail (phase 1.8e): an envelope; the inquiry's message list. */
.icon-mail { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
.mail-list { display: grid; gap: 6px; }
/* Customers (phase 1.9a): a person icon; the list's three filters; inquiries of a customer; compact forms. */
.icon-customers { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.filter-bar.customers-filter { grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(140px, 1fr)) auto; }
.customer-inquiries { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 0; }
.customer-inquiries li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.customer-inquiries li:last-child { border-bottom: 0; }
.customer-inquiry-end { display: flex; align-items: center; gap: 10px; }
.stack-tight { display: grid; gap: 10px; margin-top: 10px; }
.inline-details { margin-top: 12px; }
.inline-details summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; }
.pre-line { white-space: pre-line; }
.pager { align-items: center; }
@media (max-width: 680px) {
  .filter-bar.customers-filter { grid-template-columns: 1fr 1fr; }
  .filter-bar.customers-filter .filter-search { grid-column: 1 / -1; }
  .customer-inquiry-end { width: 100%; justify-content: space-between; }
}
/* Onboarding (phase 1.9b): a flag icon; the progress steps (a row on wide screens, a compact grid on phones); choice
   cards for templates; the dashboard card with its progress bar. */
.icon-start { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/%3E%3Cpath d='M4 22v-7'/%3E%3C/svg%3E"); }
.onboarding-progress { padding: 14px 16px; margin-bottom: 16px; }
.onboarding-count { margin: 0 0 8px; font-size: 13px; }
.onboarding-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.onboarding-step a, .onboarding-step > span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--muted); text-decoration: none; font-size: 14px; min-height: 44px; }
.onboarding-step a:hover { border-color: var(--accent); color: var(--ink); }
.onboarding-step.is-current a { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 650; }
.onboarding-step.is-done a { color: var(--ink); }
.onboarding-dot { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 12px; font-weight: 700; }
.onboarding-step.is-done .onboarding-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.onboarding-step.is-current .onboarding-dot { border-color: var(--accent); color: var(--accent); }
.onboarding-label { min-width: 0; overflow-wrap: anywhere; }
.onboarding-actions { margin-top: 16px; }
.template-choices { display: grid; gap: 10px; }
.choice-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; background: #fff; }
.choice-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.choice-card input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.choice-card > span { display: grid; gap: 4px; }
.choice-card .badge { justify-self: start; }
.link-field { width: 100%; font: inherit; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--slate-soft); }
.next-steps { margin: 0 0 16px; padding-left: 18px; display: grid; gap: 8px; }
.onboarding-bar { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; margin: 8px 0 12px; }
.onboarding-bar > span { display: block; height: 100%; width: 0; background: var(--accent); }
.onboarding-bar-1 > span { width: 25%; }
.onboarding-bar-2 > span { width: 50%; }
.onboarding-bar-3 > span { width: 75%; }
.onboarding-bar-4 > span { width: 100%; }
@media (max-width: 680px) {
  .onboarding-steps { grid-template-columns: 1fr 1fr; }
  .onboarding-step.is-current { grid-column: 1 / -1; }
  .onboarding-actions { flex-direction: column-reverse; align-items: stretch; }
  .onboarding-actions .btn { text-align: center; }
}
/* Subscriptions (phase 1.9c): a card icon, the package icon, compact action forms in the administration. */
.icon-billing { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); }
.icon-admins { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.icon-plans { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8l9 5 9-5z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E"); }
.admin-bill-actions { margin: 14px 0; }
.admin-bill-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.admin-bill-form select, .admin-bill-form input:not([type="checkbox"]) { font: inherit; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 680px) {
  .admin-bill-form { align-items: stretch; flex-direction: column; }
}

/* ---- Extended forms (phase 1.9d): the form builder, the public form's own fields and attachments ---- */
.icon-form { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.form-share { display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: start; }
.form-share .link-field { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; }
.form-share-tips li { margin: 4px 0; }
.qr-box { margin: 0; display: grid; justify-items: center; gap: 8px; }
.qr-box img { width: 180px; height: 180px; image-rendering: pixelated; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.form-field-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.form-field-list .row-card { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; }
.form-field-list .row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.form-field-list .inline-form { display: inline; margin: 0; }
.form-check { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.form-check input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; }
.form-intro { padding: 16px 20px; margin-bottom: 16px; overflow-wrap: anywhere; }
.form-intro p { margin: 0 0 8px; }
.form-intro p:last-child { margin-bottom: 0; }
.public-form .choice-group { margin-bottom: 16px; }
.public-form .choice-group .choice { justify-content: flex-start; flex-wrap: nowrap; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.public-form .choice-group .choice input { width: 18px; height: 18px; flex: none; }
.public-form input[type="file"] { font: inherit; max-width: 100%; }
.thanks { text-align: left; }
.thanks-mark { font-size: 2rem; line-height: 1; margin: 0 0 8px; color: var(--green); }
.thanks-steps { padding-left: 1.2em; }
.attachment-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.attachment-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; overflow-wrap: anywhere; }
.attachment-list img { width: 120px; height: 90px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-sm); }
@media (max-width: 680px) {
  .form-share { grid-template-columns: 1fr; }
  .qr-box { justify-items: start; }
  .form-field-list .row-actions .btn { min-height: 40px; min-width: 40px; }
}
/* Access requests (migration 037): the menu icon (a life buoy) and the request's own text as written. */
.icon-access { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M5.6 5.6l3.6 3.6M14.8 14.8l3.6 3.6M18.4 5.6l-3.6 3.6M9.2 14.8l-3.6 3.6'/%3E%3C/svg%3E"); }
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- MAVEMY Bookings (phase B2): agenda, tabs, configuration ---- */
.icon-bookings { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01'/%3E%3C/svg%3E"); }
.field-label { font-weight: 550; color: var(--ink); }
.bk-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.bk-tabs a { padding: 9px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); font-weight: 600; text-decoration: none; }
.bk-tabs a:hover { color: var(--ink); }
.bk-tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.bk-agenda { padding: 16px; }
.bk-agenda-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 12px; }
.bk-view-switch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.bk-view-switch a { padding: 6px 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.bk-view-switch a[aria-current="page"] { background: var(--accent); color: #fff; }
.bk-date-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.bk-date-title { margin-left: 8px; font-size: 1.02rem; }
.bk-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.bk-filter input, .bk-filter select, .bk-hours input, .bk-hours-pair input { font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 6px 8px; }
.bk-summary { margin: 0 0 10px; }
.bk-grid-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.bk-day { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 520px; table-layout: fixed; }
.bk-day th, .bk-day td { border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); padding: 0; vertical-align: top; }
.bk-day thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.bk-day .bk-time-col { width: 64px; padding: 2px 8px; font-size: 12px; color: var(--muted); font-weight: 600; background: var(--surface); text-align: right; }
.bk-day tr.bk-hour > * { border-top: 1px solid var(--line); }
.bk-time-minor { color: var(--faint); font-weight: 500; }
.bk-staff-name { display: block; font-weight: 650; color: var(--ink); }
.bk-staff-hours { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.bk-cell { height: 26px; }
.bk-cell-open { background: #fff; }
.bk-cell-open:hover { background: var(--accent-soft); }
.bk-free { display: block; height: 100%; min-height: 26px; }
.bk-cell-closed { background: repeating-linear-gradient(135deg, var(--slate-soft) 0 6px, #eceef3 6px 12px); }
.bk-cell-booked { padding: 2px; background: #fff; }
.bk-appt { display: grid; gap: 1px; height: 100%; min-height: 24px; padding: 4px 8px; border-radius: 6px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--ink); text-decoration: none; font-size: 12.5px; line-height: 1.35; overflow: hidden; }
a.bk-appt:hover { background: #e2ebff; color: var(--ink); }
.bk-appt-time { font-weight: 700; color: var(--accent-hover); }
.bk-appt-what { font-weight: 600; }
.bk-appt-who, .bk-appt-staff { color: var(--muted); overflow-wrap: anywhere; }
.bk-appt-held { border-left-color: var(--amber); background: var(--amber-soft); }
.bk-appt-held .bk-appt-time { color: var(--amber); }
.bk-appt-completed { border-left-color: var(--green); background: var(--green-soft); }
.bk-appt-completed .bk-appt-time { color: var(--green); }
.bk-appt-no_show { border-left-color: var(--red); background: var(--red-soft); }
.bk-appt-no_show .bk-appt-time { color: var(--red); }
.bk-appt-cancelled { border-left-color: var(--line-strong); background: var(--slate-soft); }
.bk-appt-cancelled .bk-appt-time, .bk-appt-cancelled .bk-appt-what { color: var(--slate); text-decoration: line-through; }
.bk-appt .badge { justify-self: start; }
.bk-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 12px 0 0; padding: 0; font-size: 12.5px; color: var(--muted); }
.bk-legend li::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 3px; border: 1px solid var(--line-strong); }
.bk-legend-open::before { background: #fff; }
.bk-legend-closed::before { background: repeating-linear-gradient(135deg, var(--slate-soft) 0 3px, #e3e6ed 3px 6px); }
.bk-legend-booked::before { background: var(--accent-soft); border-color: var(--accent) !important; }
.bk-legend-held::before { background: var(--amber-soft); border-color: var(--amber) !important; }
.bk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bk-cancelled { margin-top: 16px; padding: 16px; }
.bk-cancelled h2 { margin-bottom: 10px; }
.bk-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.bk-week-day { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; min-width: 0; background: #fff; }
.bk-week-day.is-today { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.bk-week-day h3 { margin: 0 0 6px; font-size: .9rem; }
.bk-week-day h3 a { color: var(--ink); text-decoration: none; }
.bk-week-day h3 a:hover { color: var(--accent); }
.bk-week-hours, .bk-week-summary { list-style: none; margin: 0 0 8px; padding: 0; font-size: 12px; color: var(--muted); display: grid; gap: 2px; }
.bk-week-staff { font-weight: 650; color: var(--text); }
.bk-week-empty { font-size: 12.5px; margin: 0; }
.bk-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-slot { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; font-variant-numeric: tabular-nums; }
.bk-slot:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); font-weight: 650; }
.bk-slot-staff { color: var(--muted); }
.bk-hours th[scope="row"] { white-space: nowrap; }
.bk-hours tr.has-error th { color: var(--red); }
.bk-hours-pair { display: inline-flex; align-items: center; gap: 4px; }
.bk-exception { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.bk-link-url code { overflow-wrap: anywhere; }
.bk-qr { margin: 0; display: grid; justify-items: start; gap: 6px; }
.bk-qr img { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; padding: 8px; }
@media (max-width: 1100px) { .bk-week { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .bk-week { grid-template-columns: minmax(0, 1fr); }
  .bk-filter { margin-left: 0; }
  .bk-hours, .bk-hours thead, .bk-hours tbody, .bk-hours tr, .bk-hours th, .bk-hours td { display: block; }
  .bk-hours thead { display: none; }
  .bk-hours tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
}

/* ---- MAVEMY Bookings, public pages (phase B3): mobile first, one column, large tap targets ---- */
.bp { max-width: 720px; margin: 0 auto; display: grid; gap: 20px; }
.bp-head h1 { font-size: 1.5rem; }
.bp-steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: bp; }
.bp-steps li { flex: 1; counter-increment: bp; padding: 8px 6px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; }
.bp-steps li::before { content: counter(bp) ". "; }
.bp-steps li.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.bp-steps li.is-done { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hover); }
.bp-section { display: grid; gap: 10px; }
.bp-section h2 { font-size: 1.05rem; }
.bp-services, .bp-chips, .bp-days { list-style: none; margin: 0; padding: 0; }
.bp-services { display: grid; gap: 8px; }
.bp-service { display: grid; gap: 2px; padding: 14px 16px; min-height: 56px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; }
.bp-service:hover { border-color: var(--accent); color: var(--ink); }
.bp-service.is-chosen { border: 2px solid var(--accent); background: var(--accent-soft); padding: 13px 15px; }
.bp-service-name { font-weight: 700; }
.bp-service-desc, .bp-service-meta { color: var(--muted); font-size: 14px; }
.bp-service-meta strong { color: var(--ink); }
.bp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-chip, .bp-day { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bp-chip:hover, .bp-day:hover { border-color: var(--accent); color: var(--accent-hover); }
.bp-chip.is-chosen, .bp-day.is-chosen { background: var(--accent); border-color: var(--accent); color: #fff; }
.bp-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.bp-day { border-radius: var(--radius-sm); flex: none; }
.bp-other-day { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.bp-other-day input { font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; min-height: 44px; }
.bp-empty { margin: 0; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); }
.bp-time-form { display: grid; gap: 12px; }
.bp-time-form fieldset { border: 0; margin: 0; padding: 0; }
.bp-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.bp-slot { position: relative; display: block; }
.bp-slot input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bp-slot span { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; font-weight: 650; font-variant-numeric: tabular-nums; }
.bp-slot input:hover + span { border-color: var(--accent); }
.bp-slot input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.bp-slot input:focus-visible + span { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.bp-cta { width: 100%; min-height: 50px; font-size: 1rem; }
.bp-card { padding: 20px; }
.bp-summary { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 12px 0 0; }
.bp-summary dt { color: var(--muted); }
.bp-summary dd { margin: 0; font-weight: 600; color: var(--ink); }
.bp-held-until { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--amber-soft); color: var(--amber); font-weight: 600; }
.bp .field-block input { width: 100%; min-height: 48px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; }
.bp .field-block input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.bp-privacy { font-size: 13.5px; margin: 0; }
.bp-back { justify-self: center; }
.bp-done { text-align: center; display: grid; gap: 12px; justify-items: center; }
.bp-done .bp-summary { text-align: left; }
.bp-cancel-link { margin: 6px 0 0; font-weight: 650; }
@media (min-width: 640px) {
  .bp-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-cta { width: auto; }
}

/* ---- App shell after the reference design (graphic rebuild F2) ----
   Measured at 1536 px: sidebar 268 wide (#161c24), word mark in a 66 px band level with the top bar, organisation card
   58 high and 12 from the edges, menu items 44 high with the current page as a blue pill, the account at the bottom
   under a divider; top bar 66 high (#181e27) with a search field (#2a323d) and the account on the right. */
:root {
  --icon-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01M12 6h.01M16 6h.01M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.shell { min-height: 100vh; background: var(--bg); }
/* The test-environment note sits above the top bar in the content column, so the sidebar runs the full height. */
.env-banner { background: #0b0d14; color: #d7dfec; }
.sidebar { gap: 0; padding: 0 12px; background: var(--sidebar); border-right: 0; color: var(--sidebar-text); }
.sidebar-brand { display: flex; align-items: center; min-height: var(--topbar-height); padding: 0 16px; margin: 0 -12px 20px; }
.brand { gap: 0; }
.wordmark { font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #ffffff; }
.wordmark-my { color: #1a54e3; background: linear-gradient(180deg, #4f86f7 0%, #1a54e3 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sidebar .brand, .topbar .brand { padding: 0; color: #ffffff; }
.sidebar .brand:hover, .topbar .brand:hover { color: #ffffff; }
.org-card { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 12px; margin-bottom: 16px; background: var(--sidebar-hover); border-radius: var(--radius-sm); color: var(--sidebar-ink); min-width: 0; }
.org-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; background: #3a4350; }
.org-icon::before { content: ""; width: 20px; height: 20px; background-color: #e6eaf3; -webkit-mask: var(--icon-building) center / 20px 20px no-repeat; mask: var(--icon-building) center / 20px 20px no-repeat; }
.org-text { display: grid; min-width: 0; line-height: 1.3; }
.org-name { font-size: 14.5px; font-weight: 600; color: var(--sidebar-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-sub { font-size: 13px; color: var(--sidebar-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-sub::first-letter { text-transform: uppercase; }
.sidenav { gap: 2px; }
.sidenav a, .sidebar-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-sm); color: var(--sidebar-text); font-size: var(--text-md); font-weight: 500; text-decoration: none; white-space: nowrap; }
.sidenav a::before, .sidebar-link::before { content: ""; flex: none; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--icon) center / 20px 20px no-repeat; mask: var(--icon) center / 20px 20px no-repeat; }
.sidenav a:hover, .sidebar-link:hover { background: var(--sidebar-hover); color: var(--sidebar-ink); }
.sidenav a[aria-current="page"] { background: var(--sidebar-active); color: var(--sidebar-ink); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.sidebar-bottom { margin-top: auto; padding-top: 24px; }
.sidebar-bottom .sidebar-link { margin-bottom: 12px; }
.user-card { display: flex; align-items: center; gap: 12px; margin: 0 -12px; padding: 16px 20px 18px; border-top: 1px solid var(--sidebar-line); min-width: 0; }
.avatar { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--avatar); color: #ffffff; font-size: 16px; font-weight: 600; line-height: 1; }
.user-card-text, .account-text { display: grid; min-width: 0; line-height: 1.3; text-align: left; }
.user-card-name { font-size: 14.5px; font-weight: 600; color: var(--sidebar-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card-role, .account-role { font-size: 12.5px; color: var(--sidebar-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card-role::first-letter, .account-role::first-letter { text-transform: uppercase; }

/* The dark top bar */
.topbar { background: var(--topbar); border-bottom: 0; color: var(--topbar-text); }
.topbar-inner { min-height: var(--topbar-height); padding: 0 var(--content-pad); gap: 16px; }
.topbar-search { display: flex; align-items: center; gap: 10px; width: min(422px, 40%); height: 40px; padding: 0 14px; border-radius: var(--radius-sm); background: var(--topbar-field); color: var(--topbar-text); font-size: 14px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-search::before { content: ""; flex: none; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--icon) center / 18px 18px no-repeat; mask: var(--icon) center / 18px 18px no-repeat; }
.topbar-search:hover { color: #ffffff; background: #333c48; }
.topbar-end { gap: 16px; }
.lang { border-color: var(--topbar-field); background: transparent; }
.lang a { color: var(--topbar-text); }
.lang a:hover { color: #ffffff; }
.lang a[aria-current="true"] { background: var(--topbar-field); color: #ffffff; }
.account-menu { position: relative; }
.account-button { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: var(--radius-sm); cursor: pointer; list-style: none; color: var(--sidebar-ink); }
.account-button::-webkit-details-marker { display: none; }
.account-button::after { content: ""; flex: none; width: 16px; height: 16px; margin-left: 4px; background-color: var(--topbar-text); -webkit-mask: var(--icon-chevron) center / 16px 16px no-repeat; mask: var(--icon-chevron) center / 16px 16px no-repeat; }
.account-button:hover, .account-menu[open] .account-button { background: var(--topbar-field); }
.account-text .user-name { color: var(--sidebar-ink); font-size: 14.5px; font-weight: 600; max-width: 22ch; }
.account-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 25; width: 260px; display: grid; gap: 4px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); color: var(--text); }
.account-email { margin: 0; padding: 8px 10px 10px; border-bottom: 1px solid var(--line-2); font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.account-panel .user-security { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); font-weight: 500; text-decoration: none; }
.account-panel .user-security::before { content: ""; flex: none; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--icon) center / 18px 18px no-repeat; mask: var(--icon) center / 18px 18px no-repeat; }
.account-panel .user-security:hover { background: var(--hover); color: var(--ink); }
.account-panel .inline-form .btn { width: 100%; justify-content: flex-start; }
.topbar :focus-visible, .sidebar :focus-visible { outline-color: rgba(120, 160, 255, .8); }

/* Content area: 24 px gutters on the light grey surface */
.main { max-width: none; padding: 28px var(--content-pad) 48px; }
.foot { max-width: none; padding: 0 var(--content-pad) 24px; }

/* Icons of the shell */
.icon-search { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.icon-security { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }

/* Smaller screens: the menu behind "Menu" in the dark top bar, as a dark panel with the organisation card */
@media (max-width: 959px) {
  .topbar .brand { display: inline-flex; }
  .topbar .wordmark { font-size: 22px; }
  .menu-button { background: transparent; border-color: var(--topbar-field); color: var(--sidebar-ink); }
  .mobile-nav[open] .menu-button { background: var(--topbar-field); border-color: var(--topbar-field); color: #ffffff; }
  .mobilenav-panel { position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); z-index: 20; display: grid; gap: 8px; padding: 12px; background: var(--sidebar); border: 1px solid var(--sidebar-line); border-radius: var(--radius); box-shadow: var(--shadow-pop); max-height: calc(100vh - 90px); overflow-y: auto; }
  .mobilenav-panel .org-card { margin-bottom: 4px; }
  .mobilenav { position: static; display: grid; gap: 2px; padding: 0; background: transparent; border: 0; box-shadow: none; }
  .mobilenav a { min-height: 44px; padding: 0 14px; gap: 12px; color: var(--sidebar-text); font-size: var(--text-md); font-weight: 500; }
  .mobilenav a:hover { background: var(--sidebar-hover); color: var(--sidebar-ink); }
  .mobilenav a[aria-current="page"] { background: var(--sidebar-active); color: var(--sidebar-ink); font-weight: 500; }
  .topbar-search { width: 40px; padding: 0 11px; font-size: 0; gap: 0; }
  .topbar-inner { padding: 0 20px; }
  .main { padding: 24px 20px 40px; }
  .foot { padding: 0 20px 24px; }
}
@media (max-width: 680px) {
  .topbar-inner { padding: 0 12px; gap: 8px; min-height: 56px; }
  .topbar .wordmark { font-size: 20px; }
  .account-text, .account-button::after { display: none; }
  .account-button { padding: 2px; }
  .avatar { width: 32px; height: 32px; font-size: 14px; }
  .account-panel { width: min(280px, calc(100vw - 24px)); }
  .main { padding: 20px 16px 36px; }
  .foot { padding: 0 16px 20px; }
}
@media (max-width: 380px) {
  .topbar-search { display: none; }
}

/* ---- Components after the reference design (graphic rebuild F3) ----
   The building blocks of ui-components.tsx, and the existing classes (cards, figures, badges, tables, buttons, fields,
   charts) brought to the same style, so every page follows without changing its markup. Measured at 1536 px: cards
   white with a #e8e9ee border and 12 px corners, 16 px between cards; KPI cards 136 high with a 56 px icon tile; table
   header #f9fafc and rows of 41 px; status pills with 6 px corners; chart green #23a26f and red #c25458. */

/* Icons (decorative CSS masks; the text next to them says what they mean) */
.ico { display: inline-block; flex: none; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.ico-play { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15a1 1 0 0 0 1.5.86l12.5-7.5a1 1 0 0 0 0-1.72L8.5 3.64A1 1 0 0 0 7 4.5z'/%3E%3C/svg%3E"); }
.ico-check { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.5 2.7 2.7L16.5 9.5'/%3E%3C/svg%3E"); }
.ico-cross { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E"); }
.ico-users { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.ico-user { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E"); }
.ico-inbox { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); }
.ico-calendar { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.ico-bolt { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E"); }
.ico-mail { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
.ico-plus { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ico-building { --icon: var(--icon-building); }
.ico-clock { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ico-chart { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M8 17v-5M13 17V8M18 17v-9'/%3E%3C/svg%3E"); }
.ico-settings { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
.ico-database { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.66 3.58 3 8 3s8-1.34 8-3V5M4 12c0 1.66 3.58 3 8 3s8-1.34 8-3'/%3E%3C/svg%3E"); }
.ico-alert { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.ico-folder { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.ico-link { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }

/* Tones: icon tiles and event circles (surface + icon colour as measured) */
.tile-violet { background: var(--tile-violet); color: var(--tile-violet-icon); }
.tile-green { background: var(--tile-green); color: var(--tile-green-icon); }
.tile-red { background: var(--tile-red); color: var(--tile-red-icon); }
.tile-blue { background: var(--tile-blue); color: var(--tile-blue-icon); }
.tile-amber { background: var(--amber-soft); color: #c27a0e; }
.tile-slate { background: var(--slate-soft); color: var(--slate); }

/* Cards and panels */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel { padding: 20px 20px 18px; min-width: 0; }
.panel-body { min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.panel-head h2, .panel-head h3 { margin: 0; font-size: var(--text-lg); font-weight: 700; color: var(--ink); }
.panel-link, .btn-arrow { display: inline-flex; align-items: center; gap: 6px; }
.panel-link { margin-left: auto; color: var(--link); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.panel-link:hover { color: var(--accent-hover); text-decoration: underline; }
.panel-link::after, .btn-arrow::after { content: "→"; font-weight: 500; }
.panel-head .dropdown + .panel-link, .panel-head .dropdown { margin-left: auto; }

/* KPI cards */
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 0 0 var(--gap); }
.kpi { display: flex; align-items: flex-start; gap: 20px; min-height: 136px; padding: 20px; color: inherit; text-decoration: none; min-width: 0; }
.kpi-link { transition: box-shadow .12s ease, border-color .12s ease; }
.kpi-link:hover { border-color: var(--accent-line); box-shadow: var(--shadow-pop); color: inherit; }
.kpi-tile { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius); }
.kpi-tile .ico { width: 28px; height: 28px; }
.kpi-body { display: grid; gap: 2px; min-width: 0; padding-top: 4px; }
.kpi-label { color: var(--text); font-size: 14.5px; font-weight: 500; }
.kpi-value { color: var(--ink); font-size: var(--text-xl); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-hint, .kpi-trend { color: var(--muted); font-size: 13.5px; }
.kpi-trend { display: inline-flex; align-items: center; gap: 4px; }
.kpi-trend::before { flex: none; font-weight: 700; }
.trend-up { color: var(--trend-up); }
.trend-up::before { content: "↑"; }
.trend-down { color: var(--trend-down); }
.trend-down::before { content: "↑"; display: inline-block; transform: rotate(180deg); }
.trend-flat::before { content: "→"; }

/* The existing figures (stat cards) in the KPI style: label 14.5/500, figure 32/700; no coloured top edge except the
   warning and alert cards, whose edge says so. */
.stat { gap: 4px; padding: 20px; }
.stat-label { color: var(--text); font-size: 14.5px; font-weight: 500; }
.stat-value { font-size: var(--text-xl); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.stat-hint { color: var(--muted); font-size: 13.5px; }
.stat-link { border-top: 1px solid var(--line); }
.stat-link:hover { border-color: var(--accent-line); border-top-color: var(--accent-line); }
.stat-link.stat-warn { border-top: 3px solid #f0b54a; }
.stat-link.stat-alert { border-top: 3px solid #e5675c; }

/* Status pills (and the existing badges in the same shape: 6 px corners, no border) */
.pill, .badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-xs); padding: 4px 10px; font-size: 13.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.badge { border-width: 0; }
.pill-green { background: var(--green-soft); color: var(--green); }
.pill-red { background: var(--red-soft); color: var(--red); }
.pill-blue { background: var(--blue-soft); color: var(--blue); }
.pill-violet { background: var(--violet-soft); color: var(--violet); }
.pill-amber { background: var(--amber-soft); color: var(--amber); }
.pill-slate { background: var(--slate-soft); color: var(--slate); }

/* Tables: a light header row in normal case, rows of 41 px */
.table th { padding: 9px 16px; background: var(--surface); color: var(--text); font-size: 14.5px; font-weight: 500; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--line); }
.table td { padding: 9px 16px; font-size: 14.5px; border-bottom: 1px solid var(--line-2); }
.table tbody tr:hover { background: var(--hover); }
.table-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.table-ref { border: 1px solid var(--line); border-radius: var(--radius-sm); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.table-ref thead th:first-child { border-top-left-radius: var(--radius-sm); }
.table-ref thead th:last-child { border-top-right-radius: var(--radius-sm); }

/* Buttons: 40 high, 8 px corners; primary MAVEMY blue, secondary white with a light border */
.btn { min-height: 40px; padding: 8px 16px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; }
.btn-primary { background: var(--accent); color: #ffffff; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.btn-primary:hover { background: var(--accent-hover); color: #ffffff; }
.btn-quiet { background: var(--card); color: var(--ink); border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.btn-quiet:hover { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-sm { min-height: 36px; padding: 6px 14px; font-size: 14px; }

/* Fields: 40 high, 8 px corners; select lists with their own chevron (an inline data: image, allowed by the policy) */
input[type="search"], input[type="email"], input[type="password"], input[type="text"], input[type="number"], input[type="date"], input[type="tel"], input[type="url"], select, textarea { font: inherit; font-size: 14.5px; color: var(--ink); background-color: #ffffff; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
input[type="search"], input[type="email"], input[type="password"], input[type="text"], input[type="number"], input[type="date"], input[type="tel"], input[type="url"], select { min-height: 40px; }
select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23575f6c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px 14px; }
input::placeholder, textarea::placeholder { color: #6b7280; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* Dropdown and period picker (<details> with links) */
.dropdown { position: relative; display: inline-block; }
.dropdown-button { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-size: 14.5px; font-weight: 500; cursor: pointer; list-style: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.dropdown-button::-webkit-details-marker { display: none; }
.dropdown-button::after { content: ""; flex: none; width: 16px; height: 16px; margin-left: 4px; background-color: var(--muted); -webkit-mask: var(--icon-chevron) center / 16px 16px no-repeat; mask: var(--icon-chevron) center / 16px 16px no-repeat; }
.dropdown-button:hover, .dropdown[open] .dropdown-button { border-color: var(--line-strong); background: var(--surface); }
.dropdown-label { overflow: hidden; text-overflow: ellipsis; }
.dropdown-menu { position: absolute; top: calc(100% + 6px); z-index: 15; min-width: 100%; display: grid; gap: 2px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); }
.dropdown-end .dropdown-menu { right: 0; }
.dropdown-start .dropdown-menu { left: 0; }
.dropdown-menu a { display: block; padding: 8px 12px; border-radius: var(--radius-xs); color: var(--text); text-decoration: none; white-space: nowrap; font-size: 14.5px; }
.dropdown-menu a:hover { background: var(--hover); color: var(--ink); }
.dropdown-menu a[aria-current="true"] { background: var(--accent-soft); color: var(--blue); font-weight: 600; }
.period-picker .dropdown-button { min-height: 50px; padding: 0 18px; gap: 12px; border-radius: var(--radius-sm); }
.period-picker .ico { width: 20px; height: 20px; color: var(--ink); }

/* Charts: green succeeded, red failed (as measured), light solid grid lines */
.chart-legend { font-size: 14.5px; color: var(--text); gap: 4px 24px; }
.chart-panel .swatch-key { border-radius: 50%; }
.key-ok { background: var(--chart-ok); }
.key-failed { background: var(--chart-fail); }
.bar-ok { fill: var(--chart-ok); }
.bar-failed { fill: var(--chart-fail); }
.chart-today .bar-ok { fill: #1d8b5f; }
.chart-grid { stroke: #ececf0; stroke-dasharray: none; }
.chart-y, .chart-x { color: var(--chart-axis); font-size: 13px; }

/* Recent events */
.events { list-style: none; margin: 0; padding: 0; display: grid; }
.event { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.event:last-child { border-bottom: 0; }
.event-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.event-icon .ico { width: 20px; height: 20px; }
.event-text { display: grid; min-width: 0; line-height: 1.35; }
.event-title { color: var(--ink); font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere; }
.event-detail { color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
.event-time { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Quick actions */
.quick-actions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.quick-action { display: grid; gap: 4px; height: 100%; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: inherit; text-decoration: none; box-shadow: var(--shadow); }
.quick-action:hover { border-color: var(--accent-line); box-shadow: var(--shadow-pop); color: inherit; }
.qa-tile { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: var(--radius-sm); color: #ffffff; }
.qa-tile .ico { width: 20px; height: 20px; }
.qa-blue { background: var(--action-blue); }
.qa-violet { background: var(--action-violet); }
.qa-title { color: var(--ink); font-size: 14.5px; font-weight: 600; }
.qa-text { color: var(--muted); font-size: 13.5px; }

/* Organisation overview */
.org-overview { display: grid; min-width: 0; }
.org-overview-head { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.org-overview-icon { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.org-overview-icon .ico { width: 26px; height: 26px; }
.org-overview-text { display: grid; min-width: 0; flex: 1; }
.org-overview-name { color: var(--ink); font-size: var(--text-md); font-weight: 700; overflow-wrap: anywhere; }
.org-overview-sub { color: var(--muted); font-size: 13.5px; }
.org-overview-list { margin: 0; display: grid; }
.org-overview-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.org-overview-list > div:last-child { border-bottom: 0; }
.org-overview-list dt { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 14.5px; }
.org-overview-list dt .ico { width: 18px; height: 18px; color: var(--text); }
.org-overview-list dt a { color: inherit; text-decoration: none; }
.org-overview-list dt a:hover { color: var(--link); text-decoration: underline; }
.org-overview-list dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }

/* Empty, loading and error states */
.empty-state { display: grid; justify-items: center; gap: 6px; padding: 32px 16px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 50%; background: var(--slate-soft); color: var(--slate); }
.empty-icon .ico { width: 24px; height: 24px; }
.empty-state .empty-title { margin: 0; color: var(--ink); font-weight: 600; }
.empty-text { margin: 0 0 6px; max-width: 46ch; color: var(--muted); font-size: 14px; }
.loading-state { display: grid; gap: 12px; padding: 16px 0; color: var(--muted); font-size: 14px; }
.loading-line { display: inline-flex; align-items: center; gap: 10px; }
.spinner { flex: none; width: 18px; height: 18px; border: 2px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; animation: mavemy-spin .8s linear infinite; }
.skeleton-rows { display: grid; gap: 10px; }
.skeleton { display: block; height: 14px; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--line-2) 0%, #f8f9fb 50%, var(--line-2) 100%); background-size: 200% 100%; animation: mavemy-shimmer 1.4s ease-in-out infinite; }
.skeleton:nth-child(3n + 2) { width: 82%; }
.skeleton:nth-child(3n) { width: 64%; }
@keyframes mavemy-spin { to { transform: rotate(360deg); } }
@keyframes mavemy-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .spinner, .skeleton { animation: none; }
}
.error-state { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--red-line); border-radius: var(--radius-sm); background: #fff7f7; }
.error-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--red-soft); color: var(--red); }
.error-icon .ico { width: 18px; height: 18px; }
.error-body { display: grid; gap: 2px; min-width: 0; }
.error-title { color: var(--red); font-weight: 600; }
.error-text { color: var(--text); font-size: 14px; }
.error-retry { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--link); }

/* Components on smaller screens */
@media (max-width: 1199px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .kpi-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .kpi { min-height: 0; padding: 16px; gap: 16px; }
  .kpi-tile { width: 48px; height: 48px; }
  .kpi-value { font-size: 28px; }
  .stat-value { font-size: 1.5rem; }
  .panel { padding: 16px; }
  .quick-actions { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .table td { padding: 4px 0; border: 0; }
  .table-ref { border-radius: var(--radius-sm); }
  .table-ref thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dropdown-menu { max-width: calc(100vw - 32px); }
  .period-picker .dropdown-button { min-height: 44px; }
}

/* ---- The platform dashboard after the reference design (graphic rebuild F4) ----
   Measured at 1536 px (content 1220 wide): header with title and period picker (291 × 50), four KPI cards of 136 high,
   the table (765) next to the chart (442) 316 high, and three equal panels of ± 329 high; 16 px between them. */
.kpi { gap: 24px; }
.dash-ref-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 24px; }
.dash-ref-head .period-picker { margin-top: 4px; }
.dash-ref-head h1 { font-size: var(--text-xl); line-height: 1.2; }
.dash-ref-sub { margin: 2px 0 0; color: var(--muted); font-size: 16px; }
.dash-ref-head .period-picker .dropdown-button { min-width: 291px; justify-content: flex-start; }
.dash-ref-head .period-picker .dropdown-label { flex: 1; }
.dash-ref-main { display: grid; grid-template-columns: minmax(0, 765fr) minmax(0, 442fr); gap: var(--gap); margin: 0 0 var(--gap); align-items: stretch; }
.dash-ref-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 0 0 var(--gap); align-items: stretch; }
.dash-ref-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: 0 0 var(--gap); align-items: start; }
.dash-ref-more > :only-child { grid-column: 1 / -1; }
.dash-ref .panel { min-height: 316px; }
.dash-ref-row .panel { min-height: 329px; }
/* The table: a light header band and row lines, no frame (as in the reference) */
.dash-ref .table-ref { border: 0; border-radius: 0; }
.dash-ref .table-ref thead th { height: 36px; padding: 0 12px; }
.dash-ref .table-ref td { padding: 0 12px; }
.dash-ref .table-ref thead th:first-child, .dash-ref .table-ref thead th:last-child { border-radius: 0; }
.dash-ref .table-ref td { height: 41px; white-space: nowrap; }
.dash-ref .table-ref .row-link { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-weight: 500; color: var(--ink); }
.dash-ref-table .table-scroll { margin: 0; padding: 0; }
/* The chart in the panel next to the table: the reference's 20 px padding and a lower plot */
.dash-ref .dash-chart { padding: 20px; }
.dash-ref .dash-chart .section-head { margin-bottom: 14px; }
.dash-ref .dash-chart .section-head h2 { font-size: var(--text-lg); font-weight: 700; }
.dash-ref .dash-chart .chart-legend { margin-bottom: 16px; }
.dash-ref-main .dash-chart .chart-y, .dash-ref-main .dash-chart .chart-svg { height: 150px; }
.dash-ref-main .dash-chart .chart-empty { top: 40px; }
.dash-ref .dash-chart .chart-x { margin-top: 10px; }
/* Quick actions: 2 × 2 cards */
.dash-ref-row .quick-actions { row-gap: 13px; }
.dash-ref-row .quick-action { min-height: 116px; gap: 2px; padding: 14px 14px 12px; }
.dash-ref-row .qa-tile { margin-bottom: 10px; }
.dash-ref-row .org-overview-list > div { padding: 7px 0; }
.dash-ref-row .org-overview-head { padding-bottom: 12px; margin-bottom: 4px; }
/* Needs attention, in the style of the reference's recent events: an icon circle, the company and its reasons */
.dash-attention .attention-list { margin: 0; }
.dash-attention .attention-list > li { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 9px 0; border-top: 0; border-bottom: 1px solid var(--line-2); }
.dash-attention .attention-list > li:last-child { border-bottom: 0; }
.dash-attention .attention-list > li::before { content: ""; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; background: var(--tile-red) var(--icon-alert-dot) center / 18px 18px no-repeat; }
.dash-attention .attention-name { color: var(--ink); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.dash-attention .attention-name:hover { color: var(--link); text-decoration: underline; }
.dash-attention .issue-list { grid-column: 2; }
.dash-attention .issue { border: 0; border-radius: var(--radius-xs); padding: 2px 8px; font-size: 13px; font-weight: 500; }
:root { --icon-alert-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c44a57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.dash-ref .co-section { margin-top: 8px; }

/* Smaller screens */
@media (max-width: 1199px) {
  .dash-ref-main { grid-template-columns: minmax(0, 1fr); }
  .dash-ref-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-ref-row > :last-child { grid-column: 1 / -1; }
  .dash-ref .panel, .dash-ref-row .panel { min-height: 0; }
}
@media (max-width: 820px) {
  .dash-ref-row, .dash-ref-more { grid-template-columns: minmax(0, 1fr); }
  .dash-ref-row > :last-child { grid-column: auto; }
}
@media (max-width: 680px) {
  .dash-ref-head { flex-direction: column; margin-bottom: 20px; }
  .dash-ref-head h1 { font-size: 1.6rem; }
  .dash-ref-sub { font-size: 15px; }
  .dash-ref-head .period-picker, .dash-ref-head .period-picker .dropdown-button { width: 100%; min-width: 0; }
  .dash-ref .table-ref td { height: auto; }
  .dash-ref-row .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ---- Company dashboard and MAVEMY Bookings after the reference design (graphic rebuild F5) ---- */
/* Company dashboard: the inquiry lists in the panels (rows like the reference's table and events) */
.dash-ref .company-title { gap: 8px 14px; }
.dash-ref-head .head-actions { flex: none; margin-top: 4px; }
.dash-ref .action-alert { margin: 0 0 var(--gap); }
.dash-ref .onboarding, .dash-ref > .card:not(.panel) { margin-bottom: var(--gap); }
.dash-ref-table .inq-list, .dash-attention-inq .inq-list { margin: 0; padding: 0; display: grid; gap: 0; }
.dash-ref-table .inq-list > li, .dash-attention-inq .inq-list > li { border-bottom: 1px solid var(--line-2); }
.dash-ref-table .inq-list > li:last-child, .dash-attention-inq .inq-list > li:last-child { border-bottom: 0; }
.dash-ref-table .inq-item, .dash-attention-inq .inq-item { min-height: 52px; padding: 8px 10px; border-radius: var(--radius-sm); }
.dash-ref-table .inq-name, .dash-attention-inq .inq-name { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.dash-attention-inq .inq-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.dash-attention-inq .inq-meta { justify-content: flex-start; flex-wrap: wrap; }
.dash-ref .list-empty { margin: 0; padding: 24px 8px; text-align: center; color: var(--muted); }
.dash-ref-row .details { margin: 0; }
.dash-ref-more-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-ref-more-3 > .card { margin: 0; padding: 20px; }
.dash-ref-more-3 > .card h2 { font-size: var(--text-lg); font-weight: 700; margin-bottom: 8px; }
@media (max-width: 1199px) { .dash-ref-more-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .dash-ref-more-3 { grid-template-columns: minmax(0, 1fr); } }

/* Bookings: header, section tabs as a segmented control */
.bk-head { margin-bottom: 20px; }
.bk-head .company-title { gap: 8px 12px; }
.bk-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--gap); padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: var(--shadow); }
.bk-tabs a { padding: 7px 14px; border: 0; margin: 0; border-radius: var(--radius-sm); color: var(--text); font-size: 14.5px; font-weight: 500; }
.bk-tabs a:hover { background: var(--surface); color: var(--ink); }
.bk-tabs a[aria-current="page"] { background: var(--accent); color: #ffffff; }

/* The agenda card and its toolbar */
.bk-agenda { padding: 20px; }
.bk-agenda-head { gap: 12px 16px; margin-bottom: 14px; }
.bk-view-switch { padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.bk-view-switch a { padding: 6px 14px; border-radius: 6px; color: var(--text); font-weight: 500; }
.bk-view-switch a[aria-current="page"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.bk-date-nav .btn { min-height: 36px; padding: 6px 12px; }
.bk-date-title { margin-left: 6px; font-size: var(--text-lg); font-weight: 700; }
.bk-filter input, .bk-filter select { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.bk-filter .btn { min-height: 36px; }
.bk-summary { margin: 0 0 12px; color: var(--muted); font-size: 14px; }

/* Day grid: 15-minute rows, a column per staff member with its colour, free / booked / closed clearly apart */
.bk-grid-wrap { border-radius: var(--radius); }
.bk-day thead th { padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.bk-day thead th.bk-staff-col { border-bottom: 3px solid var(--tone-line); }
.bk-staff-col { position: relative; padding-left: 52px !important; }
.bk-staff-col .bk-staff-avatar { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
.bk-staff-avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tone-soft); color: var(--tone-text); font-size: 13px; font-weight: 700; flex: none; }
.bk-staff-name { font-size: 14.5px; font-weight: 600; }
.bk-staff-hours { font-size: 12.5px; }
.bk-day .bk-time-col { width: 60px; padding: 0 10px; font-size: 12.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.bk-time-minor { font-size: 11.5px; color: var(--faint); font-weight: 500; }
.bk-cell { height: 28px; }
.bk-free { min-height: 28px; }
.bk-cell-open:hover { background: var(--accent-soft); }
.bk-cell-closed { background: repeating-linear-gradient(135deg, #f3f4f7 0 6px, #e9ebf0 6px 12px); }
.bk-cell-booked { padding: 2px 3px; }
.bk-appt { gap: 1px; padding: 5px 9px; border-radius: var(--radius-xs); font-size: 13px; line-height: 1.3; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.bk-appt-confirmed { border-left: 3px solid var(--tone-line); background: var(--tone-soft); }
a.bk-appt-confirmed:hover { background: var(--tone-soft); filter: brightness(.97); }
.bk-appt-confirmed .bk-appt-time { color: var(--tone-text); }
.bk-appt-who, .bk-appt-staff { color: #4b5260; }
/* Six staff tones (line / soft / text; the text colours meet AA on their soft surface) */
.bk-tone-0 { --tone-line: #2460e7; --tone-soft: #e6edfd; --tone-text: #1752da; }
.bk-tone-1 { --tone-line: #1cb171; --tone-soft: #e2f6ed; --tone-text: #17774e; }
.bk-tone-2 { --tone-line: #d98a10; --tone-soft: #fcefd6; --tone-text: #8a4d05; }
.bk-tone-3 { --tone-line: #6d5ef6; --tone-soft: #ecebfe; --tone-text: #4b3fe0; }
.bk-tone-4 { --tone-line: #d6457a; --tone-soft: #fde7ef; --tone-text: #a3264f; }
.bk-tone-5 { --tone-line: #0e9aa7; --tone-soft: #def5f7; --tone-text: #0b6e77; }
/* Legend: swatches as in the grid */
.bk-legend { gap: 8px 20px; margin-top: 14px; font-size: 13px; color: var(--text); }
.bk-legend li::before { width: 14px; height: 14px; border-radius: 4px; }
.bk-legend-closed::before { background: repeating-linear-gradient(135deg, #f3f4f7 0 3px, #e3e6ed 3px 6px); }
.bk-legend-booked::before { background: var(--accent-soft); border-color: var(--accent) !important; border-left-width: 3px !important; }

/* Week: the staff with their colour, then a card per day (Saturday and Sunday as any other day) */
.bk-staff-legend { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0; }
.bk-staff-legend li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 14px; font-weight: 500; color: var(--ink); }
.bk-staff-legend .bk-staff-avatar { width: 26px; height: 26px; font-size: 12px; }
.bk-week { gap: 10px; }
.bk-week-day { padding: 12px; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.bk-week-day.is-today { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent), var(--shadow); }
.bk-week-day h3 { margin: 0 0 8px; font-size: 14.5px; font-weight: 700; }
.bk-week-hours { gap: 4px; font-size: 12.5px; }
.bk-week-staff { display: inline-flex; align-items: center; gap: 5px; }
.bk-week-staff::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tone-line); flex: none; }
.bk-week .bk-list { gap: 6px; }
.bk-week .bk-appt { font-size: 12.5px; }

/* Lists, forms and the booking page in the panel style */
.bk-cancelled { padding: 20px; }
.bk-exception { min-height: 44px; border-radius: var(--radius-sm); background: var(--card); }
.bk-slot { min-height: 40px; padding: 6px 12px; border-color: var(--line-strong); background: var(--card); }
.bk-slot:hover { border-color: var(--accent-line); }
.bk-hours input, .bk-hours-pair input { min-height: 38px; }
.bk-qr img { border-radius: var(--radius); }

/* Bookings on smaller screens: tabs scroll sideways, the toolbar stacks, the grid scrolls inside its card */
@media (max-width: 760px) {
  /* F8: the tabs wrap instead of scrolling sideways, so the current one is always in view */
  .bk-tabs { display: flex; flex-wrap: wrap; max-width: 100%; }
  .bk-tabs a { white-space: nowrap; flex: 1 1 auto; text-align: center; padding: 8px 10px; }
  .bk-agenda { padding: 14px; }
  .bk-agenda-head { align-items: stretch; }
  .bk-date-title { flex-basis: 100%; margin: 4px 0 0; font-size: 16px; }
  .bk-filter { width: 100%; }
  .bk-filter input, .bk-filter select { flex: 1 1 140px; min-width: 0; }
  .bk-day { min-width: 0; }
  .bk-day thead th.bk-staff-col { min-width: 150px; }
  .bk-staff-col { padding-left: 46px !important; }
  .bk-staff-col .bk-staff-avatar { left: 10px; width: 28px; height: 28px; }
  .bk-day .bk-time-col { width: 52px; padding: 0 6px; }
  .bk-cell, .bk-free { height: 32px; min-height: 32px; }
}
/* Bookings lists (services, staff): names as quiet links, as in the reference table */
.bk-head ~ .table-wrap .table td:first-child > a { color: var(--ink); font-weight: 600; text-decoration: none; }
.bk-head ~ .table-wrap .table td:first-child > a:hover { color: var(--link); text-decoration: underline; }
/* The booking page: its sections are cards (unlike the inquiry page, where detail-main/side are plain wrappers) */
.card.detail-main, .card.detail-side { padding: 20px; gap: 12px; align-content: start; }
.card.detail-main > h2, .card.detail-side > h2 { margin: 0; font-size: var(--text-lg); font-weight: 700; }
.detail-grid + .card.detail-main { margin-top: var(--gap); }

/* ---- Bookings agenda: visual finishing (2026-10-29) ----
   Display only. The toolbar in two rows (the date with its step buttons and the day/week switch; the filters on a
   light band), a compact 15-minute timeline, staff columns clearly apart, and five distinct states: free (white),
   break (warm hatching), closed (grey), appointment (a card in the staff member's colour) and held (amber). */
.bk-agenda { padding: 0; overflow: hidden; }
.bk-agenda-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nav switch" "filter filter"; gap: 14px 16px; align-items: center; margin: 0; padding: 18px 20px 0; }
.bk-date-nav { grid-area: nav; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.bk-date-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.bk-date-title::first-letter { text-transform: uppercase; }
.bk-step { display: inline-flex; align-items: center; gap: 4px; }
.bk-step .btn { min-height: 34px; padding: 4px 12px; font-size: 14px; }
.bk-step .btn[aria-label] { width: 34px; padding: 0; font-size: 18px; line-height: 1; }
.bk-view-switch { grid-area: switch; justify-self: end; }
.bk-filter { grid-area: filter; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 -20px; padding: 10px 20px; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bk-filter input, .bk-filter select { min-height: 36px; background-color: var(--card); }
.bk-filter select { min-width: 190px; }
.bk-agenda > .bk-summary { margin: 0; padding: 12px 20px 10px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.bk-agenda > .empty { margin: 0 20px 20px; }
.bk-agenda > .bk-grid-wrap { margin: 0 20px; }
.bk-agenda > .bk-legend { margin: 0; padding: 14px 20px 18px; }
.bk-agenda > .bk-staff-legend { margin: 0; padding: 12px 20px 4px; }
.bk-agenda > .bk-week { padding: 12px 20px 20px; }

/* The day grid */
.bk-grid-wrap { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.bk-day thead th { position: sticky; top: 0; z-index: 2; background: var(--card); }
.bk-day thead th.bk-staff-col { padding: 10px 12px 9px 50px !important; border-right: 2px solid #e4e7ed; border-bottom: 3px solid var(--tone-line); }
.bk-day thead th.bk-time-col { background: var(--card); border-right: 1px solid var(--line); }
.bk-staff-col .bk-staff-avatar { left: 12px; width: 28px; height: 28px; font-size: 12.5px; }
.bk-staff-name { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.bk-staff-hours { margin-top: 1px; font-size: 12px; line-height: 1.3; color: var(--muted); }
.bk-day td.bk-cell { border-right: 2px solid #e4e7ed; border-bottom: 1px solid #f1f2f5; }
.bk-day tr > td.bk-cell:last-child, .bk-day thead th.bk-staff-col:last-child { border-right: 0; }
.bk-day tr.bk-hour > * { border-top: 1px solid #dde1e8; }
.bk-day tbody .bk-time-col { width: 56px; height: 22px; padding: 0 8px 0 0; vertical-align: top; text-align: right; border-right: 1px solid var(--line); background: var(--card); font-size: 12px; font-weight: 600; line-height: 1; color: var(--ink); }
.bk-day tbody tr.bk-hour .bk-time-col { padding-top: 4px; }
.bk-time-minor { display: inline-block; padding-top: 4px; font-size: 10.5px; font-weight: 500; color: #8a91a0; }
.bk-cell { height: 22px; }
.bk-free { position: relative; min-height: 22px; }
/* Free: white; on hover a "+" to add an appointment at that time */
.bk-cell-open { background: var(--card); }
.bk-cell-open:hover { background: var(--accent-soft); }
.bk-cell-open:hover .bk-free::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); font-weight: 700; font-size: 15px; line-height: 1; }
.bk-free:focus-visible { outline-offset: -3px; border-radius: 4px; }
/* Closed (outside the hours): plain grey; break (between two blocks): warm hatching */
.bk-cell-closed { background: #f1f2f5; }
.bk-cell-closed.bk-cell-break { background: repeating-linear-gradient(135deg, #fdf5e6 0 6px, #f7e8cb 6px 12px); }
/* Appointments: cards in the staff member's colour: time and service on the first line, the customer below */
.bk-cell-booked { padding: 2px 4px; vertical-align: top; background: var(--card); }
.bk-day .bk-appt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; column-gap: 6px; row-gap: 1px; height: 100%; min-height: 18px; overflow: hidden; padding: 4px 8px; border-radius: var(--radius-xs); border-left-width: 4px; font-size: 12px; line-height: 1.3; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.bk-appt-time { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-appt-what { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-day .bk-appt-who, .bk-day .bk-appt-staff, .bk-day .bk-appt .badge { grid-column: 1 / -1; }
.bk-appt-who { font-weight: 500; color: #3c424f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.bk-appt-confirmed:hover { filter: none; box-shadow: 0 0 0 2px var(--tone-line); }
.bk-appt-held { border-left: 4px solid #d98a10; background: repeating-linear-gradient(135deg, var(--amber-soft) 0 6px, #f8e3b8 6px 12px); }

/* Legend: the same five states as the grid */
.bk-legend { gap: 8px 22px; font-size: 13px; color: var(--text); }
.bk-legend li { display: inline-flex; align-items: center; }
.bk-legend li::before { width: 16px; height: 16px; margin-right: 8px; border-radius: 4px; border: 1px solid var(--line-strong); }
.bk-legend-open::before { background: var(--card); }
.bk-legend-break::before { background: repeating-linear-gradient(135deg, #fdf5e6 0 3px, #f2dfb9 3px 6px); border-color: #ecd3a5 !important; }
.bk-legend-closed::before { background: #f1f2f5; }
.bk-legend-booked::before { background: var(--accent-soft); border-color: var(--accent-line) !important; border-left: 4px solid var(--accent) !important; }
.bk-legend-held::before { background: var(--amber-soft); border-color: #ecd3a5 !important; border-left: 4px solid #d98a10 !important; }

/* Week: day cards with a clear head, appointments as the same cards */
.bk-week-day { display: flex; flex-direction: column; gap: 8px; padding: 0; overflow: hidden; }
.bk-week-day h3 { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line-2); background: var(--surface); font-size: 14px; }
.bk-week-day h3 a { display: block; }
.bk-week-day h3 a::first-letter { text-transform: uppercase; }
.bk-week-day.is-today { box-shadow: var(--shadow); border-color: var(--accent); }
.bk-week-day.is-today h3 { background: var(--accent-soft); border-bottom-color: var(--accent-line); }
.bk-week-day.is-today h3 a { color: var(--blue); }
.bk-week-hours { margin: 0; padding: 0 12px; gap: 3px; font-size: 12px; }
.bk-week .bk-list, .bk-week-empty { padding: 0 12px 12px; }
.bk-week-empty { font-size: 12.5px; color: var(--muted); }
.bk-week .bk-appt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; padding: 6px 8px; border-left-width: 4px; border-radius: var(--radius-xs); font-size: 12px; line-height: 1.35; }
.bk-week .bk-appt-what, .bk-week .bk-appt-who, .bk-week .bk-appt-staff, .bk-week .bk-appt .badge { grid-column: 1 / -1; }
.bk-week .bk-appt-what { white-space: normal; }

/* Phone: the toolbar stacked, filters two across, the grid a little taller per row for touch */
@media (max-width: 760px) {
  .bk-agenda-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nav" "switch" "filter"; gap: 10px; padding: 14px 14px 4px; }
  .bk-date-nav { justify-content: space-between; }
  .bk-date-title { flex-basis: 100%; margin: 0; font-size: 18px; }
  .bk-view-switch { justify-self: stretch; display: grid; grid-template-columns: 1fr 1fr; text-align: center; }
  .bk-filter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .bk-filter select { min-width: 0; }
  .bk-filter .btn { grid-column: 1 / -1; }
  .bk-agenda > .bk-summary { padding: 10px 14px 8px; }
  .bk-agenda > .bk-grid-wrap { margin: 0 14px; }
  .bk-agenda > .bk-legend, .bk-agenda > .bk-staff-legend { padding-left: 14px; padding-right: 14px; }
  .bk-agenda > .bk-week { padding: 10px 14px 14px; }
  .bk-day thead th.bk-staff-col { min-width: 132px; padding: 8px 8px 7px 42px !important; }
  .bk-staff-col .bk-staff-avatar { left: 8px; width: 26px; height: 26px; }
  .bk-staff-name { font-size: 13.5px; }
  .bk-staff-hours { font-size: 11px; }
  .bk-day tbody .bk-time-col { width: 46px; height: 26px; padding-right: 6px; }
  .bk-cell, .bk-free { height: 26px; min-height: 26px; }
  .bk-day .bk-appt { padding: 3px 6px; font-size: 11.5px; }
  .bk-day .bk-appt-what { grid-column: 1 / -1; }
}

/* ---- Every other page in the reference style (graphic rebuild F6) ----
   Shared rules only, so each page follows the same components: the page head as on the dashboards, cards and their
   titles, tabs as one segmented control, empty lists in the empty-state style, check rows, names in tables, forms,
   alerts and detail rows. Display only; the markup and the functions of the pages are unchanged. */

/* Page head: title 32/700 with a 16 px subtitle (reference); the small eyebrow above some titles stays, quieter */
.page-head { align-items: flex-start; margin-bottom: 24px; }
.page-head h1 { line-height: 1.2; }
.page-head .muted { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 82ch; }
.page-head .head-actions { flex: none; margin-top: 4px; }
.eyebrow { margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--blue); }
.crumbs { margin: 0 0 14px; font-size: 14px; }
.crumbs a { font-weight: 500; }

/* Cards and sections: 20 px padding, titles 18/700, a section link like the panels' "View all" */
.section { padding: 20px; }
.card.section h2, .section-head h2 { font-size: var(--text-lg); font-weight: 700; }
.card.section > h2 + .muted, .card.section > h2 + p { margin-top: 4px; }
.section-head { margin-bottom: 12px; }
.section-head > a:not(.btn) { font-size: 14.5px; font-weight: 500; text-decoration: none; }
.section-head > a:not(.btn):hover { text-decoration: underline; }
.grid-2, .settings-grid, .detail-grid { gap: var(--gap); }
.main > .card + .card, .main > .card + .section, .main > .section + .card { margin-top: var(--gap); }
.form-section { padding: 20px; }
.form-section > legend { font-size: var(--text-lg); font-weight: 700; }

/* Tabs: one segmented control everywhere (as in Bookings), the current one blue */
.tabs:not(.editor-tabs) { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; margin: 4px 0 var(--gap); padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: var(--shadow); overflow: visible; }
.tabs:not(.editor-tabs) a { margin: 0; padding: 7px 14px; border: 0; border-radius: var(--radius-sm); color: var(--text); font-size: 14.5px; font-weight: 500; }
.tabs:not(.editor-tabs) a:hover { background: var(--surface); color: var(--ink); border: 0; }
.tabs:not(.editor-tabs) a[aria-current="page"] { background: var(--accent); color: #ffffff; }
.editor-tabs { border-bottom-color: var(--line); }
/* The inbox's view tabs and the filter chips: the current one in MAVEMY blue */
.view-tab { padding: 7px 14px; border-color: var(--line); font-size: 14.5px; font-weight: 500; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.view-tab[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.chip { padding: 6px 12px; font-size: 14px; font-weight: 500; }
.chip[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--blue); }

/* Empty lists and cards: the empty-state style (centred, muted, room around it) */
.empty, .card > .list-empty, .section > .list-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.card.empty { display: grid; justify-items: center; gap: 6px; }
.list-empty { color: var(--muted); }

/* Check rows: the box next to its text (not pushed to the far side), the platform's blue */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
label.choice { justify-content: flex-start; flex-wrap: nowrap; gap: 12px; cursor: pointer; }
label.choice input { flex: none; width: 18px; height: 18px; margin: 0; }
.choice { border-radius: var(--radius-sm); padding: 12px 16px; background: var(--card); }

/* Tables: names in the first column as quiet links (the row's subject), not blue underlined text */
.table tbody td:first-child > a:not(.btn):not(.row-link) { color: var(--ink); font-weight: 600; text-decoration: none; }
.table tbody td:first-child > a:not(.btn):not(.row-link):hover { color: var(--link); text-decoration: underline; }
.table-wrap.card { overflow: hidden; }
.table-wrap.card > .table thead th:first-child, .table-wrap.card > .table tbody td:first-child { padding-left: 20px; }

/* Detail rows (label / value) and facts */
.details > div { padding: 10px 0; }
.details dt { color: var(--muted); font-size: 14px; }
.details dd { color: var(--ink); font-size: 14.5px; }
.facts dt { font-size: 13px; }

/* Alerts and notes: 8 px corners, a little more room, 14.5 px text */
.alert { padding: 12px 16px; font-size: 14.5px; line-height: 1.5; }
.readonly-note { border-radius: var(--radius-sm); }
.field-hint, .hint { font-size: 13px; color: var(--muted); }

@media (max-width: 680px) {
  .page-head { flex-direction: column; margin-bottom: 18px; }
  .page-head .muted { font-size: 15px; }
  .page-head .head-actions { width: 100%; }
  .tabs:not(.editor-tabs) { display: flex; flex-wrap: wrap; }
  .tabs:not(.editor-tabs) a { flex: 1 1 auto; white-space: nowrap; text-align: center; padding: 8px 10px; }
  .section, .form-section { padding: 16px; }
  .table-wrap.card > .table tbody td:first-child { padding-left: 0; }
}
/* A card holding only a "nothing here" line: the empty-state look */
.card > p.muted:only-child { margin: 0; padding: 28px 16px; text-align: center; }

/* ---- Public and sign-in pages after the reference design (graphic rebuild F7) ----
   Display only: the same tokens, type and components as the signed-in pages. Sign-in, two-step code, password reset,
   invitation and help share one calm card; the public booking flow is laid out for a phone first (each step a card,
   big touch targets, the confirm button in reach); the public inquiry form and the cancel page follow the same cards.
   No markup, route or security change: the code stays six boxes (mfa-code.js), every form posts as before. */
:root {
  --icon-lock-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232460e7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  --icon-calendar-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232460e7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --icon-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
/* A soft MAVEMY-blue glow behind the public pages (no image file: a CSS gradient) */
.shell-plain .main { background: radial-gradient(900px 340px at 50% -120px, rgba(36, 96, 231, .10), rgba(36, 96, 231, 0) 70%); }

/* Sign-in, two-step code, password, invitation, help: one calm card */
.login.card, .message.card, .confirm.card { border-radius: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .08); }
.login { max-width: 440px; margin: 48px auto 24px; padding: 36px 36px 28px; }
.login::before { content: ""; display: block; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 12px; background: var(--accent-soft) var(--icon-lock-blue) center / 24px 24px no-repeat; }
.login h1 { font-size: 28px; line-height: 1.2; }
.login > .muted { margin-top: 8px; font-size: 15px; line-height: 1.55; }
.login .stack { gap: 18px; margin-top: 24px; }
.login .field { gap: 8px; font-size: 14.5px; font-weight: 600; }
.login input[type="email"], .login input[type="password"], .login input[type="text"] { min-height: 46px; padding: 10px 14px; font-size: 16px; }
.login form > .btn, .login .form-actions .btn { width: 100%; min-height: 46px; font-size: 15px; }
.login .alert { margin-top: 18px; }
.login-help { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 14px; line-height: 1.9; text-align: center; }
.login-help + .login-help { margin-top: 0; padding-top: 0; border-top: 0; }
.login-help a { font-weight: 500; }
.login .details { margin: 16px 0; }
/* The two-step code: six boxes filling the card's width, 56 px high */
.login .otp-boxes { max-width: none; gap: 10px; justify-content: space-between; }
.field-block .otp-boxes input.otp-box:not([type="color"]):not([type="checkbox"]):not([type="radio"]) { max-width: 56px; border-radius: 10px; }
/* Message pages (signed out, link used, not allowed) and confirmations */
.message { max-width: 520px; margin: 48px auto 24px; padding: 36px; }
.message h1 { font-size: 26px; }
.confirm { padding: 28px 32px; }
.thanks-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 28px; }

/* Public inquiry form: the company's name as the title, sections as cards, a full-width send button on a phone */
.public-form .form-section { border-radius: var(--radius); }
.public-form .form-actions .btn-primary { min-height: 46px; padding: 10px 24px; font-size: 15px; }

/* Public booking: phone first. The company and "online appointment" on top, the three steps as a progress bar,
   each step a card, big touch targets, the chosen service / staff / day / time in MAVEMY blue. */
.bp { max-width: 640px; gap: 16px; }
.bp-head { display: grid; gap: 4px; }
.bp-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.bp-head .eyebrow::before { content: ""; width: 16px; height: 16px; background: var(--icon-calendar-blue) center / 16px 16px no-repeat; }
.bp-head h1 { font-size: 28px; line-height: 1.2; }
.bp-head .muted { margin-top: 2px; font-size: 15px; }
.bp-steps { gap: 8px; }
.bp-steps li { position: relative; padding: 10px 6px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; }
.bp-steps li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 999px; background: var(--line); }
.bp-steps li.is-current { background: transparent; color: var(--blue); }
.bp-steps li.is-current::after, .bp-steps li.is-done::after { background: var(--accent); }
.bp-steps li.is-done { background: transparent; color: var(--ink); }
.bp-section { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); gap: 12px; }
.bp-section h2 { font-size: 17px; font-weight: 700; }
.bp-service { position: relative; padding: 14px 44px 14px 16px; border-color: var(--line); border-radius: var(--radius-sm); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.bp-service:hover { border-color: var(--accent-line); }
.bp-service.is-chosen { border: 2px solid var(--accent); padding: 13px 43px 13px 15px; background: var(--accent-soft); }
.bp-service.is-chosen::after { content: ""; position: absolute; right: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--accent) var(--icon-check-white) center / 14px 14px no-repeat; }
.bp-service-name { font-size: 15.5px; font-weight: 600; }
.bp-service-meta strong { font-weight: 700; }
.bp-chip, .bp-day { min-height: 44px; border-color: var(--line-strong); font-weight: 500; }
.bp-day { min-width: 76px; }
.bp-chip.is-chosen, .bp-day.is-chosen { font-weight: 600; box-shadow: 0 1px 2px rgba(36, 96, 231, .3); }
.bp-other-day input { background-color: var(--card); }
.bp-slots { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.bp-slot span { min-height: 48px; border-color: var(--line-strong); font-weight: 600; font-size: 15px; }
.bp-empty { border-radius: var(--radius-sm); background: var(--surface); text-align: center; }
.bp-cta { min-height: 52px; border-radius: 10px; font-size: 16px; }
.bp-card { padding: 22px; border-radius: var(--radius); }
.bp-summary { gap: 8px 16px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface); }
.bp-held-until { border-radius: var(--radius-sm); font-size: 14.5px; }
.bp .field-block input { border-radius: 10px; }
.bp-done .thanks-mark { margin-bottom: 4px; }

@media (max-width: 680px) {
  .login, .message { margin: 20px auto; padding: 26px 22px 22px; border-radius: 14px; }
  .login h1 { font-size: 24px; }
  .login .otp-boxes { gap: 6px; }
  .confirm { padding: 22px 18px; }
  .public-form .form-actions .btn-primary { width: 100%; }
  .bp { gap: 12px; }
  .bp-head h1 { font-size: 24px; }
  .bp-section { padding: 16px 14px; }
  .bp-steps li { font-size: 12px; }
  /* The time form's confirm button stays within reach while choosing a time */
  .bp-time-form .bp-cta { position: sticky; bottom: 12px; z-index: 3; box-shadow: 0 8px 24px rgba(36, 96, 231, .35); }
}

/* Migration 043: the link to the company's privacy statement in the booking flow, and its hosted text (paragraphs kept) */
.bp-privacy-link { margin: 4px 0 0; font-size: 14px; text-align: center; }
.bp-privacy-link a { font-weight: 500; }
.bp-statement p { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.65; margin: 12px 0 0; }
.bp-statement h1 { margin-top: 4px; }