/* ============================================================
   Neomis — Industry theme for Bootstrap 5 / Blazor
   Replaces wwwroot/app.css. Load AFTER bootstrap.min.css.
   Every value comes from the token block below.
   ============================================================ */

/* Self-hosted Fira Sans / Fira Sans Condensed (latin + latin-ext + cyrillic
   subsets — see Neomis.Web/wwwroot/fonts/README.md). Industry's spec font is
   Barlow, which has no Cyrillic; Fira Sans is the agreed substitute — same
   condensed-grotesque character, full Cyrillic coverage. */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fira-sans-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fira-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fira-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/fira-sans-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/fira-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/fira-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/fira-sans-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/fira-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/fira-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fira-sans-condensed-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fira-sans-condensed-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fira-sans-condensed-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/fira-sans-condensed-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/fira-sans-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fira Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/fira-sans-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Industry tokens --- */
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-600: #7a7a7d;
  --color-neutral-800: #424244;

  --color-accent-100: #eef6ff;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;

  --color-danger: #b3261e;
  --color-success: #2f7d47;

  --font-heading: "Fira Sans Condensed", "Segoe UI", system-ui, sans-serif;
  --font-body: "Fira Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-5: 17px;
  --space-6: 20.4px;
  --space-8: 27.2px;
  /* --space-7 has no consumer yet, same as before — left out like --space-5 was until the МКБ
     panel needed it (see below). --space-9 is used by the login screen's .login-field/
     .login-form-col padding (TASK-login.md) — an undefined var() with no fallback doesn't just
     drop that one value, it invalidates the whole `padding` shorthand back to 0 on every side,
     which is exactly why the deployed login screen had zero padding everywhere instead of the
     designed inset (caught live on the Demo deployment, not from re-reading the CSS). */
  --space-9: 30.6px;

  --radius: 0;                     /* Industry is square-cornered */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);

  /* --- Bootstrap variable bridge --- */
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 15px;
  --bs-body-line-height: 1.55;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-color: var(--color-divider);
  --bs-primary: var(--color-accent);
  --bs-link-color: var(--color-accent-700);
  --bs-link-hover-color: var(--color-accent-800);
  --bs-secondary-color: var(--color-neutral-600);
  --bs-focus-ring-color: transparent;
}

html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
h1:focus { outline: none; }

a, .btn-link { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover, .btn-link:hover { color: var(--color-accent-800); }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* Focus — themed, never the browser default ------------------ */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: none;
}
.form-control:focus-visible, .form-select:focus-visible {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
}

/* ── Forms ─────────────────────────────────────────────────── */
.form-label {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.form-control, .form-select {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  box-shadow: none;
}
.form-control::placeholder { color: var(--color-neutral-600); }
.form-control:hover, .form-select:hover {
  border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
  opacity: 0.45;
  background: var(--color-surface);
  cursor: not-allowed;
}
textarea.form-control { min-height: 90px; resize: vertical; }
.form-control-sm, .form-select-sm { min-height: 30px; font-size: 13px; padding: 3px 8px; }
.input-group > .form-control, .input-group > .form-select { border-radius: 0; }

.form-check-input {
  border-color: var(--color-divider);
  border-width: 1.5px;
  border-radius: 0;
  background: var(--color-surface);
}
.form-check-input[type=radio] { border-radius: 50%; }
.form-check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.form-check-label { font-size: 14px; }

/* Validation — Blazor's own state classes -------------------- */
.form-control.invalid, .form-select.invalid, .invalid { border-color: var(--color-danger); outline: none; }
.form-control.valid.modified, .valid.modified:not([type=checkbox]) { border-color: var(--color-success); outline: none; }
.validation-message {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  color: var(--color-danger);
}
.validation-errors {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  list-style: none;
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  font-size: 13px;
  background: color-mix(in srgb, var(--color-danger) 6%, transparent);
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  text-decoration: none;
}
.btn:disabled, .btn.disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--color-bg); }

.btn-secondary, .btn-outline-secondary {
  background: transparent;
  border-color: var(--color-divider);
  color: var(--color-text);
}
.btn-secondary:hover, .btn-outline-secondary:hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  border-color: var(--color-divider);
  color: var(--color-text);
}
.btn-secondary:active, .btn-outline-secondary:active {
  background: color-mix(in srgb, var(--color-text) 14%, transparent);
  color: var(--color-text);
}

.btn-link {
  border-color: transparent;
  color: var(--color-accent-700);
  padding-inline: var(--space-1);
  text-decoration: none;
}
.btn-link:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-link:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

.btn-sm { font-size: 13px; padding: var(--space-1) var(--space-2); }
.btn-icon { width: 36px; height: 36px; padding: 0; }

/* ── Cards / plates ────────────────────────────────────────── */
.card {
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  box-shadow: none;
}
.card-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
}
.card-body { padding: var(--space-4) var(--space-6); }

/* Section number in a card header: <div class="card-header"><span class="plate-num">01</span>Личные данные</div> */
.plate-num {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}
.mono { font-family: var(--font-mono); font-size: 12px; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent) !important; }

/* ── Tables ────────────────────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--color-text);
  --bs-table-bg: transparent;
}
.table > thead > tr > th, .table th {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2);
  background: transparent;
  border-bottom: 1px solid var(--color-divider);
}
.table > tbody > tr > td, .table td {
  padding: var(--space-2);
  background: transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  vertical-align: middle;
}
.table > tbody > tr:hover > td {
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
}
.table tr.selected > td {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

/* QuickGrid, if a grid is kept somewhere ---------------------- */
.table[theme] { --quickgrid-header-background: transparent; }
.table .col-title { font: inherit; }
.table .col-sort-button { color: inherit; }

/* ── Badges / status tags ──────────────────────────────────── */
.badge, .tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: var(--radius);
}
.tag-accent, .badge.bg-primary { background: var(--color-accent-100) !important; color: var(--color-accent-800) !important; }
.tag-neutral, .badge.bg-secondary { background: var(--color-neutral-100) !important; color: var(--color-neutral-800) !important; }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); background: transparent; }

/* ── Record plates (patient list rows) ─────────────────────── */
.record-list { display: flex; flex-direction: column; gap: var(--space-4); }
.record-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px 96px;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-4);
  border: 1px solid var(--color-divider);
  background: transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.record-row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.record-row.selected {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.record-name { font-weight: 500; font-size: 15px; }
.record-sub { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.record-status { display: flex; justify-content: flex-end; gap: 6px; }

/* Detail panel ------------------------------------------------ */
.detail-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-6);
  border-left: 1px solid var(--color-divider);
}
.detail-grid {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  row-gap: 6px;
  column-gap: var(--space-3);
  font-size: 13px;
}
.detail-grid > .k {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  /* Bootstrap's .card sets word-wrap: break-word, which this grid sits inside of and inherits —
     that breaks a label like "Специальность" mid-character once it doesn't fit the key column.
     Restore normal wrapping (whole words only, or overflow) explicitly rather than mid-word. */
  overflow-wrap: normal;
  word-break: normal;
}

/* Sticky form action bar -------------------------------------- */
.form-actions {
  position: sticky;
  bottom: 0;
  z-index: 10; /* Otherwise loses to any absolutely-positioned content with an explicit z-index
                  elsewhere on the page at z-index: auto's default stacking — confirmed by hand on
                  DocumentTemplateForm.razor's GrapesJS canvas, whose own grapes.min.css sets
                  .gjs-cv-canvas { position: absolute; z-index: 1 } and painted straight over this bar
                  (its opaque background notwithstanding) until this was added. */
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-divider);
  background: var(--color-bg);
}

/* ── Navigation ────────────────────────────────────────────── */
.navbar, .top-row {
  background: transparent;
  border-bottom: 1px solid var(--color-divider);
}
.navbar-brand, .nav-brand {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.nav-link {
  font-size: 14px;
  color: var(--color-text);
  border-radius: var(--radius);
}
.nav-link:hover { color: var(--color-accent); background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.nav-link.active {
  color: var(--color-accent-800);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}
.content { padding-top: var(--space-6); }

/* ── Pagination ────────────────────────────────────────────── */
.page-link {
  min-width: 36px;
  justify-content: center;
  border-radius: var(--radius);
  border-color: var(--color-divider);
  color: var(--color-text);
  background: transparent;
  font-family: var(--font-heading);
  font-weight: 600;
}
.page-item.active .page-link {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

/* ── Modal ─────────────────────────────────────────────────── */
.modal-content {
  border-radius: var(--radius);
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--color-divider); }
.modal-title { font-family: var(--font-heading); font-weight: 600; font-size: 20px; }

/* ── Empty & loading states ────────────────────────────────── */
.state-plate {
  padding: var(--space-8);
  border: 1px solid var(--color-divider);
  text-align: center;
}
.state-plate h5 { margin: 0 0 var(--space-1); }
.skeleton-line {
  height: 11px;
  background: var(--color-neutral-200);
  margin-bottom: 9px;
}
.skeleton-line:first-child { background: var(--color-neutral-300); }

/* ── Blazor error boundary / reconnect ─────────────────────── */
.blazor-error-boundary {
  padding: var(--space-4) var(--space-6);
  background: var(--color-danger);
  color: #fff;
  font-family: var(--font-body);
}
.blazor-error-boundary::after { content: "Произошла ошибка."; }

/* ── App shell — layout 3b (left rail + top bar) ───────────── */
.page {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-4);
  background: transparent;
  border-right: 1px solid var(--color-divider);
}
/* Mark + wordmark, centered as one group in the sidebar's width. */
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
}
.sidebar-brand img { flex: 0 0 auto; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-2) var(--space-3);
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
}
.nav-icon { flex: 0 0 20px; width: 20px; height: 20px; }
.sidebar-user {
  margin-top: auto;
  font-size: 12px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.content { padding: 0; }

@media (max-width: 900px) {
  .page { grid-template-columns: 1fr; }
  .sidebar { flex-direction: row; align-items: center; gap: var(--space-4); border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .sidebar-nav { flex-direction: row; margin-left: auto; }
  .sidebar-user { display: none; }
}

.diagnosis-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  border-radius: 4px;
  padding: 1px var(--space-2);
  margin: 0 var(--space-1) var(--space-1) 0;
  font-size: 12px;
}
.btn-link-x {
  background: none;
  border: none;
  padding: 0 0 0 var(--space-1);
  color: var(--color-accent-700);
  line-height: 1;
  cursor: pointer;
}
.btn-link-x:hover { color: var(--color-danger); }
.diagnosis-picker {
  border: 1px solid var(--color-divider);
  border-radius: 6px;
  padding: var(--space-2);
  margin-top: var(--space-1);
  min-width: 280px;
}
.diagnosis-results {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--color-divider);
  border-radius: 4px;
}
.diagnosis-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-divider);
  padding: var(--space-1) var(--space-2);
  font-size: 13px;
  cursor: pointer;
}
.diagnosis-result-item:last-child { border-bottom: none; }
.diagnosis-result-item:hover { background: var(--color-accent-100); }

/* ── МКБ tree browser (/icd) — design 1a ───────────────────────
   Aligned code gutter + depth-indented name. Rows are siblings in one
   flat flow: the code column stays vertically aligned at every depth.
   Each row sets --icd-depth (0 = класс, 1 = блок, 2 = рубрика, ...). */
.icd-tree { display: flex; flex-direction: column; }
.icd-head {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.icd-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 13.6px;
  text-align: left;
  cursor: pointer;
}
.icd-row.icd-chapter { padding: 8px 0; font-size: 14px; }
.icd-row.icd-chapter + .icd-row:not(.icd-chapter) { border-top: 0; }
.icd-row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.icd-row.expanded { background: color-mix(in srgb, var(--color-text) 3%, transparent); font-weight: 500; }
.icd-row.selected {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent-800);
  font-weight: 500;
}
.icd-row.selected .icd-code { color: var(--color-accent-800); font-weight: 500; }
.icd-code { font-family: var(--font-mono); font-size: 12px; }
.icd-row.icd-chapter .icd-code, .icd-row.icd-block .icd-code { color: var(--color-accent-800); }
/* Depth: the name cell carries the indent and the guide rule, not a wrapper */
.icd-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.icd-row:not(.icd-chapter) .icd-name {
  padding-left: 22px;
  margin-left: calc(6px + (var(--icd-depth, 0) - 1) * 24px);
  border-left: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
.icd-toggle { flex: 0 0 14px; width: 14px; height: 14px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.icd-row.expanded > .icd-name > .icd-toggle, .icd-row.selected > .icd-name > .icd-toggle { color: var(--color-accent-800); }
.icd-count {
  margin-left: auto;
  padding-left: var(--space-4);
  font-family: var(--font-mono);
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

/* Node panel (right column, 340px). Fixed to the viewport, not stretched to match the tree
   column's height: unlike every other list-plus-preview page here (Patients/Doctors/... are all
   capped at ~20 rows by pagination), the МКБ tree is unpaginated and expands inline — a few
   branches open at once easily make the left column several times taller than the viewport. A
   plain grid item stretches to match its tallest sibling by default, so without align-self/sticky
   here the panel's own height matches the tree's, and `.icd-panel-footer` (`margin-top: auto`, the
   "КОПИРОВАТЬ КОД" button + note) ends up thousands of pixels down the page instead of visible near
   the panel's own bottom, as the design intends. */
.icd-panel {
  align-self: start;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  border-left: 1px solid var(--color-divider);
  padding: var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  /* --space-5 was missing from this scale (and from the handoff's own neomis-industry.css :root —
     its --space-* jumped 1/2/3/4/6/8, no 5/7), so this originally rendered as a silent no-op
     (gap: normal). Filled the gap in the scale itself (--space-5: 17px, between --space-4 and
     --space-6) rather than substituting a larger existing token. */
  gap: var(--space-5);
}
.icd-panel-code { font-family: var(--font-mono); font-size: 22px; color: var(--color-accent-800); }
.icd-panel-name { font-size: 14px; line-height: 1.35; text-wrap: pretty; }
/* Every panel block after the first gets a top divider; the label above it is
   muted ink at 50%, NOT the accent .plate-num kicker. */
.icd-panel-section {
  border-top: 1px solid var(--color-divider);
  /* Same missing-token no-op as .icd-panel's gap above, same fix. */
  padding-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.icd-panel-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.icd-path { display: flex; flex-direction: column; gap: var(--space-2); }
.icd-path-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: var(--space-3); font-size: 12.5px; }
.icd-path-row .icd-code { font-size: 11.5px; color: var(--color-accent-700); }
.icd-path-row span:last-child { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
/* 2×2 grid of stacked label-over-value pairs. Each pair MUST be wrapped in
   .icd-fact — bare <dt>/<dd> children would land in separate grid columns and
   render as a label column beside a value column, which is not the design. */
.icd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.icd-fact { display: flex; flex-direction: column; gap: 3px; }
.icd-fact dt { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin: 0; }
.icd-fact dd { font-size: 13px; margin: 0; }
/* margin-top: auto pushes this to the bottom of the panel when there's leftover flex space; the
   explicit padding-top is a guaranteed minimum gap above it for when there isn't (a long path or
   wrapped name filling most of the panel's own height) — margin:auto alone would collapse to 0 then. */
.icd-panel-footer { margin-top: auto; padding-top: var(--space-5); display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.icd-panel-footer .btn { width: 100%; font-family: var(--font-heading); letter-spacing: 0.06em; }

/* Search state — flat hit plates with match highlight and path */
.icd-hit {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: 11px 13px;
  border: 1px solid var(--color-divider);
}
.icd-hit .icd-code { font-size: 12.5px; color: var(--color-accent-800); }
.icd-hit-name { font-size: 13.6px; line-height: 1.35; }
.icd-hit-path { font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.icd-hit mark { background: color-mix(in srgb, var(--color-accent) 26%, transparent); color: var(--color-text); }

/* ── Login screen (/login) — design 1a ──────────────────────────
   Own layout, outside MainLayout: no sidebar, no page padding. Two
   columns inside a single hairline frame — steel field left, form right. */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--color-neutral-200);
}
.login-frame {
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr);
  width: 100%;
  max-width: 1180px;
  min-height: 620px;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
}
/* The one full accent field in the app besides deck dividers. */
.login-field {
  background: #24374b;
  color: #f2f2f3;
  padding: var(--space-9) var(--space-9);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
/* Brand + claim as ONE flex item, not two — with only 2 children under .login-field's
   space-between (this group, .login-build), the group stays clustered near the top; as 3 direct
   children it used to land in the vertical middle of the whole card instead (caught live — see
   CLAUDE.md's login-screen section). */
.login-top-group { display: flex; flex-direction: column; gap: var(--space-8); }
.login-brand { display: flex; align-items: center; gap: var(--space-4); }
.login-brand-name {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.login-rule { width: 64px; height: 1px; background: color-mix(in srgb, #94bce3 55%, transparent); }
.login-claim {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0.01em;
  max-width: 22ch;
  text-wrap: pretty;
}
/* Build/environment plate, bottom of the steel field: 2 cells, 1px gaps
   drawn by the container background showing through. */
.login-build {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: 330px;
  align-self: center;
  background: color-mix(in srgb, #94bce3 30%, transparent);
  border: 1px solid color-mix(in srgb, #94bce3 30%, transparent);
}
.login-build > div { background: #24374b; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.login-build dt, .login-build-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #94bce3;
  margin: 0;
}
.login-build dd, .login-build-value { font-family: var(--font-mono); font-size: 13px; margin: 0; }

.login-form-col { padding: var(--space-9) 3.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.login-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--space-6); }
.login-title { font-family: var(--font-heading); font-size: 29px; font-weight: 600; margin: 0; letter-spacing: 0.01em; }
.login-fields { display: flex; flex-direction: column; gap: var(--space-5); }
.login-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.login-note {
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  padding-top: var(--space-4);
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
/* Password field: input + reveal button share one border. */
.login-password { display: flex; border: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent); }
.login-password .form-control { border: 0; }
.login-password.invalid { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 6%, transparent); }
.login-reveal {
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-left: 1px solid var(--color-divider);
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  cursor: pointer;
}
.login-reveal:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); color: var(--color-text); }
/* Lockout plate — a framed plate, not a toast. */
.login-lockout {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 6%, transparent);
}
.login-lockout svg { flex: 0 0 16px; margin-top: 1px; color: var(--color-danger); }
.login-lockout strong { font-size: 13.5px; font-weight: 500; color: var(--color-danger); }
.login-lockout p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

@media (max-width: 900px) {
  .login-page { padding: 0; align-items: stretch; }
  .login-frame { grid-template-columns: minmax(0, 1fr); border: 0; min-height: 100vh; }
  .login-field { padding: var(--space-6); }
  .login-claim { font-size: 22px; }
  .login-build { display: none; }
  .login-form-col { padding: var(--space-6); }
}

/* ── Home dashboard (/) — design 1a ─────────────────────────────
   Registrar-facing worktop: today's day on the left, time-independent
   queues on the right. Rendered inside MainLayout's normal page padding. */
.home-page { display: flex; flex-direction: column; gap: var(--space-6); }
/* Counter strip — 4 equal cells, 1px rules drawn by the container showing
   through the gaps. Values are the totalCount the list endpoints already
   return; this is navigation, not analytics. */
.home-counters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
}
.home-counter {
  background: var(--color-surface);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
/* The handoff's own rule has no color/text-decoration reset — as a bare <a>, this rendered as a
   default blue underlined link (caught live, not from reading the CSS). */
.home-counter-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-decoration: none; color: var(--color-text); }
/* Square hairline "+" — creates a record in that section. Sits inside the
   counter cell but is its own control: never nest it in the cell's link. */
.home-counter-add {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  cursor: pointer;
}
.home-counter-add:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-800); }
.home-counter-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.home-counter-value { font-family: var(--font-mono); font-size: 23px; line-height: 1; }

.home-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6); align-items: start; }
.home-side { display: flex; flex-direction: column; gap: var(--space-6); }
.home-block { display: flex; flex-direction: column; gap: var(--space-3); }
/* Block heading: accent kicker, optional count, optional right-hand link. */
.home-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
/* Same missing anchor reset as .home-counter-body above — bare <a>, default blue underline. */
.home-block-link { font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.06em; text-decoration: none; color: var(--color-text); }

/* Today's appointments — a 4-column rule-separated list, not a .table */
.home-today-head, .home-today-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1.4fr) minmax(0, 1fr) 96px;
  align-items: center;
}
.home-today-head {
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.home-today-row {
  width: 100%;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}
.home-today-row:last-child { border-bottom: 0; }
.home-today-row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
/* The appointment happening now — the only accent row on the page. */
.home-today-row.now { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-800); font-weight: 500; }
.home-today-time { font-family: var(--font-mono); font-size: 12.5px; }
.home-today-patient { font-size: 14px; }
.home-today-doctor { font-size: 13px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.home-today-row.now .home-today-doctor { color: var(--color-accent-800); }
.home-today-status { text-align: right; }

/* Queue lists (attention, expiring contracts) — one hairline box, rows inside */
.home-list { border: 1px solid var(--color-divider); display: flex; flex-direction: column; }
.home-list > * { padding: 11px 13px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
.home-list > *:last-child { border-bottom: 0; }
a.home-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
}
a.home-list-row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); color: var(--color-text); }
.home-list-count { flex: 0 0 42px; font-family: var(--font-mono); font-size: 16px; color: var(--color-accent-800); }
.home-list-text { font-size: 13.5px; line-height: 1.3; }
.home-list-row svg { flex: 0 0 14px; margin-left: auto; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.home-contract { display: flex; flex-direction: column; gap: 3px; }
.home-contract-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: 13.5px; }
.home-contract-date { font-family: var(--font-mono); font-size: 12px; }
.home-contract-date.soon { color: var(--color-danger); }
.home-contract-num { font-family: var(--font-mono); font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
/* Announcement — the one blueprint-framed object on this page */
.home-notice { display: flex; flex-direction: column; gap: 6px; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-divider); }
.home-notice-date { font-family: var(--font-mono); font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.home-notice-text { font-size: 13.5px; line-height: 1.4; }

@media (max-width: 1100px) {
  .home-cols { grid-template-columns: minmax(0, 1fr); }
  .home-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* GrapesJS's own default theme is dark (built for a full-screen page-builder chrome) — its root
   .gjs-editor element always carries .gjs-one-bg (background-color: var(--gjs-primary-color), #444)
   regardless of panels: { defaults: [] } removing the panels themselves, and .gjs-cv-canvas-bg
   layers a further 15%-opacity black tint on top of whatever's behind it — together closer to solid
   black than GrapesJS's own "dark gray" theme would suggest (confirmed by hand: computed
   background-color of .gjs-editor is rgb(68,68,68) even with every panel gone). Caught from a
   screenshot, not assumed — the "белый лист внутри чёрного поля" look was never intended, this
   design uses a light theme throughout. Overridden with #-scoped selectors (higher specificity than
   grapesjs.min.css's own plain single-class rules) rather than !important, so this doesn't depend on
   grapes.min.css happening to load before app.css — it's injected into <head> at runtime by
   documentTemplateEditor.js's loadAssetsOnce(), well after app.css, so a plain same-specificity
   override would lose the cascade race. Canvas tint dropped to fully transparent — the light
   --color-surface backdrop alone already reads as "desk around a page" without an extra dark wash. */
#gjs-editor-container .gjs-editor {
  background-color: var(--color-surface);
}
#gjs-editor-container .gjs-cv-canvas-bg {
  background-color: transparent;
}

/* GrapesJS animates .gjs-frame's own width/height over .35s (grapes.min.css's own
   .gjs-frame-wrapper--anim rule) — cosmetic polish for smoothly resizing a device-preview frame,
   which becomes a real problem for documentTemplateEditor.js's auto-grow-to-content canvas height:
   the paragraph reflow that a page-size switch causes doesn't finish (and so doesn't report its real,
   final height) until partway through that animation, and NeomisDocumentEditor.setPageSize()'s
   one-macrotask-deferred resize read isn't long enough to wait it out — confirmed by hand (disabling
   this transition was the one change that made the very same resize read land on the correct value
   immediately instead of the stale pre-switch one). No loss switching page size — this canvas has no
   other transition-driven UI (panels are fully suppressed) to preserve. */
#gjs-editor-container .gjs-frame-wrapper--anim,
#gjs-editor-container .gjs-frame {
  transition: none;
}

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--space-3) var(--space-6);
  background: var(--color-danger);
  color: #fff;
  font-size: 13px;
}

/* ── Document template editor (/documenttemplates/{id}/edit) — 1a/1b ──
   One screen, two modes. Visual: field palette | sheet | params rail.
   Code: code pane | preview. Full-bleed inside the page padding. */
/* white, not --color-surface (the grey page backdrop) — the handoff's own literal CSS says
   --color-surface here, but compared against the actual mockup that reads wrong: .tpl-toolbar's
   3%-tint and .tpl-desk's 7%-tint (both color-mix(...,  transparent), i.e. layered ON TOP of
   whatever's behind them) only read as the intended subtle accents against a white base — against
   an already-grey frame they'd just be two greys blending into one flat field, which is exactly
   what was reported ("фон почему-то серый, хотя в мокапе серый только фон стола"). */
.tpl-frame { border: 1px solid var(--color-divider); background: #fff; display: flex; flex-direction: column; }
.tpl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); padding: var(--space-5) var(--space-6) var(--space-4); }
.tpl-head h2 { font-family: var(--font-heading); font-size: 26px; font-weight: 600; margin: 2px 0 0; letter-spacing: 0.01em; }
.tpl-head-actions { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.tpl-stamp { font-family: var(--font-mono); font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* Toolbar strip — spans the full frame width, above the columns. */
.tpl-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-text) 3%, transparent);
}
.tpl-toolbar-sep { width: 1px; height: 22px; background: var(--color-divider); }
.tpl-toolbar-right { margin-left: auto; }
/* Segmented pair (Визуально|Код, ШАБЛОН|С ДАННЫМИ, A4|A5): one hairline box,
   internal 1px rules, active half filled accent. */
.tpl-seg { display: flex; border: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent); width: fit-content; }
.tpl-seg button {
  font-family: var(--font-heading);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  cursor: pointer;
}
.tpl-seg button + button { border-left: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent); }
.tpl-seg button:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
.tpl-seg button.active { background: var(--color-accent); color: #f2f2f3; }
.tpl-seg button.active.muted { background: color-mix(in srgb, var(--color-text) 10%, transparent); color: var(--color-text); }
/* Square format buttons (Ж К Ч) and labelled insert buttons */
.tpl-tool {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.tpl-tool.square { width: 30px; padding: 0; justify-content: center; font-size: 14px; letter-spacing: 0; }
.tpl-tool:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-800); }
.tpl-tools { display: flex; gap: 6px; }
/* Not in the design handoff's own CSS — the rail's "УДАЛИТЬ" (danger outline) button needs a
   variant neomis-industry.css doesn't ship, added here following the same .tpl-tool shape/hover
   pattern rather than falling back to Bootstrap's banned .btn-outline-danger. */
.tpl-tool.danger { border-color: var(--color-danger); color: var(--color-danger); }
.tpl-tool.danger:hover { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); }

/* Visual mode: three columns */
.tpl-cols-visual { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; align-items: stretch; }
.tpl-palette { border-right: 1px solid var(--color-divider); display: flex; flex-direction: column; }
.tpl-palette-head { padding: var(--space-4) var(--space-5) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.tpl-group {
  padding: var(--space-2) var(--space-5);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  background: color-mix(in srgb, var(--color-text) 3%, transparent);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-accent-700);
}
.tpl-field-btn {
  width: 100%;
  text-align: left;
  padding: 7px var(--space-5);
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
}
.tpl-field-btn:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-800); }
/* Collections group — one visual step above the scalar groups: an accent
   tint, because clicking one of these inserts a whole table, not a plate. */
.tpl-group.collections { background: color-mix(in srgb, var(--color-accent) 10%, transparent); border-top-color: var(--color-divider); display: flex; align-items: center; gap: var(--space-2); }
.tpl-group-hint { margin-left: auto; font-family: var(--font-body); font-size: 10.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.tpl-collection-btn { display: flex; align-items: center; gap: 9px; padding: 8px var(--space-5); }
.tpl-collection-btn svg { flex: 0 0 14px; color: var(--color-accent-700); }
.tpl-collection-btn .tpl-collection-cols { margin-left: auto; flex: 0 0 auto; font-family: var(--font-mono); font-size: 10.5px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
/* Column checklist for a selected collection table (right rail) */
.tpl-colcheck { border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent); display: flex; flex-direction: column; }
.tpl-colcheck label { display: flex; align-items: center; gap: var(--space-2); padding: 6px 10px; font-size: 12.5px; cursor: pointer; }
.tpl-colcheck label + label { border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.tpl-colcheck label:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.tpl-palette-note { padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); font-size: 11.5px; line-height: 1.4; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* The sheet: a paper page on a darker desk, centered */
.tpl-desk { background: color-mix(in srgb, var(--color-text) 7%, transparent); padding: var(--space-7); display: flex; justify-content: center; align-items: flex-start; }
.tpl-sheet { background: #fff; border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent); }
/* Not in the design handoff's own CSS — caught only by measuring the real rendered layout, not by
   reading the CSS text: a flex child's own `width` (set inline per page size, see
   DocumentTemplateForm.razor's CanvasSheetStyle/PageBoxStyle) is a target flexbox is still free to
   shrink below when its container is narrower than that, unless flex-shrink is turned off — .tpl-desk
   never gets that CSS shrinking rule from the handoff either, so a shrunk .tpl-sheet's actual content
   (the GrapesJS canvas iframe, sized to the real physical page width regardless of its shrunk parent)
   visibly overlapped .tpl-rail instead of being contained. flex-shrink: 0 keeps the sheet at its true
   physical size always; overflow-x: auto on .tpl-desk gives it somewhere sane to go (a scrollbar
   inside the desk) on a narrower viewport instead of bleeding into the rail. */
.tpl-desk { overflow-x: auto; }
.tpl-sheet { flex-shrink: 0; }
/* Also missing from the handoff's own .tpl-sheet rule — same "content past one physical page gets
   clipped, not hidden behind a scrollbar" decision already established for the old .doc-page-mock
   class below (now superseded by this one and removed) — and the plain <iframe srcdoc="..."> markup
   itself carries no size of its own, so without this it would render at the browser default
   (~300×150px) instead of filling the sheet. Harmless for the canvas-wrapping .tpl-sheet (Визуально's
   ШАБЛОН view): CanvasSheetStyle sets no explicit height, so there is nothing for overflow: hidden to
   clip, and it has no <iframe> child to size in the first place. */
.tpl-sheet { overflow: hidden; }
.tpl-sheet iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Merge field inside the sheet — a plate, never editable raw text */
.tpl-mergefield {
  background: color-mix(in srgb, var(--color-accent) 20%, transparent);
  border-bottom: 1px solid var(--color-accent);
  padding: 0 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}
/* Repeating region (Scriban for-loop) — dashed accent frame + its own caption */
.tpl-region { border: 1px dashed var(--color-accent); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.tpl-region-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-accent-700);
}

/* Right rail: template + page + selection */
.tpl-rail { border-left: 1px solid var(--color-divider); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.tpl-rail-section { border-top: 1px solid var(--color-divider); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.tpl-rail-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

/* Code mode: two columns, plus a thin drag handle between them (not in the design handoff's own
   CSS — NeomisDocumentEditor.initColumnResizer overwrites this element's own grid-template-columns
   directly on drag, this is just its resting/default state and the handle's own look). */
.tpl-cols-code { display: grid; grid-template-columns: minmax(0, 1fr) 6px 420px; align-items: stretch; }
.tpl-col-resizer { cursor: col-resize; background: var(--color-divider); }
.tpl-col-resizer:hover, .tpl-col-resizer.dragging { background: var(--color-accent); }
.tpl-code { display: flex; flex-direction: column; }
.tpl-code-body { display: flex; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; }
.tpl-gutter {
  flex: 0 0 44px;
  padding: var(--space-4) 10px var(--space-4) 0;
  text-align: right;
  color: color-mix(in srgb, var(--color-text) 35%, transparent);
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  user-select: none;
}
/* Not in the design handoff's own CSS — the .tpl-scriban highlight below needs an actual element to
   apply to, which a plain <textarea> can never have (it can't color individual runs of its own
   text). .tpl-code-area-wrap holds a <pre> (the highlighted copy, read-only, behind) and the real
   <textarea> (transparent text, visible caret, in front) stacked via position:absolute so they
   occupy the exact same box — the textarea keeps working exactly as a normal one (typing, selection,
   caret) since it's still the real, focusable, front-most element; the highlighted text just shows
   through where the textarea's own text is transparent. Both kept in sync (scroll position, and the
   highlight's own content on every input) by NeomisDocumentEditor.initCodeGutterSync in JS.
   .tpl-code-area itself keeps the base padding/white-space/font values the handoff's own (now
   superseded) single-element rule had — only flex/position/color move to make room for the overlay. */
.tpl-code-area-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.tpl-code-highlight, .tpl-code-area { position: absolute; inset: 0; margin: 0; padding: var(--space-4); white-space: pre; font: inherit; }
.tpl-code-highlight { overflow: hidden; pointer-events: none; color: var(--color-text); }
.tpl-code-area { overflow-x: auto; overflow-y: auto; border: 0; background: transparent; color: transparent; caret-color: var(--color-text); resize: none; }
/* Scriban directive highlight in the code pane */
.tpl-scriban { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent-800); }
/* Template error — a plate pinned to the bottom of the code column */
.tpl-error { margin-top: auto; border-top: 1px solid var(--color-danger); background: color-mix(in srgb, var(--color-danger) 6%, transparent); padding: var(--space-3) var(--space-4); display: flex; gap: 9px; align-items: flex-start; }
.tpl-error svg { flex: 0 0 15px; margin-top: 1px; color: var(--color-danger); }
.tpl-error strong { font-size: 13px; font-weight: 500; color: var(--color-danger); }
.tpl-error p { margin: 2px 0 0; font-size: 12px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.tpl-preview-head { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tpl-busy { display: flex; align-items: center; gap: 7px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

@media (max-width: 1400px) {
  .tpl-cols-visual { grid-template-columns: 220px minmax(0, 1fr); }
  .tpl-rail { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--color-divider); }
}
@media (max-width: 1100px) {
  /* !important: overrides the inline grid-template-columns NeomisDocumentEditor.initColumnResizer
     sets while dragging — a width the user picked at a wide viewport shouldn't survive resizing the
     browser down into the single-column stacked layout below. */
  .tpl-cols-code { grid-template-columns: minmax(0, 1fr) !important; }
  .tpl-code { border-bottom: 1px solid var(--color-divider); }
  .tpl-col-resizer { display: none; }
}
/* ── Examination (/examinations, create, edit) — designs 1a/1b/1c ─────
   The list adds a checklist-progress column and a real status filter; the
   form is one two-column frame (fields left, checklist rail right) shared
   by create and edit. */

/* Status tags — five derived ExaminationStatus values. Saturation rises with
   readiness; Closed steps out of the accent family into neutral. Always
   inline-block + nowrap: these labels are two words and must not wrap. */
.exam-status {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  /* Missing from the handoff's own rule (its mockup table shows the labels in caps, same as every
     other --font-heading kicker in this design system — .plate-num, .exam-step-label, .exam-source —
     which are all hand-typed uppercase in their markup; these three are the one place the label text
     itself must stay [Display(Name)]'s real case, so the transform has to live here instead). */
  text-transform: uppercase;
}
.exam-status.created { border: 1px solid color-mix(in srgb, var(--color-text) 35%, transparent); color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.exam-status.in-progress { border: 1px solid var(--color-accent); color: var(--color-accent-700); }
.exam-status.services-completed { background: color-mix(in srgb, var(--color-accent) 22%, transparent); color: #2c455d; }
.exam-status.conclusion-given { background: var(--color-accent-800); color: #f2f2f3; }
.exam-status.closed { background: color-mix(in srgb, var(--color-text) 55%, transparent); color: #f2f2f3; }

/* Status filter — one wrapping segmented box: ВСЕ + the five statuses. */
.exam-status-filter { display: flex; flex-wrap: wrap; border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent); width: fit-content; }
.exam-status-filter button {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding: 5px 12px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  cursor: pointer;
  text-transform: uppercase; /* same fix as .exam-status above */
}
.exam-status-filter button + button { border-left: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent); }
.exam-status-filter button:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
.exam-status-filter button.active { background: var(--color-accent); color: #f2f2f3; }

/* List rows — 4 columns; status column is sized for "УСЛУГИ ЗАВЕРШЕНЫ". */
.exam-head, .exam-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 118px 156px;
  gap: var(--space-4);
  align-items: center;
}
.exam-head {
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.exam-row {
  width: 100%;
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}
.exam-row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.exam-row.selected { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-800); }
.exam-row.selected .exam-row-sub, .exam-row.selected .exam-row-package { color: var(--color-accent-800); }
.exam-row.closed, .exam-row.closed .exam-row-package { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.exam-row-name { font-size: 14px; }
.exam-row.selected .exam-row-name { font-weight: 500; }
.exam-row-sub { font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.exam-row-package { font-size: 13px; color: color-mix(in srgb, var(--color-text) 75%, transparent); min-width: 0; }

/* Checklist progress: mono counts over a square hairline track. No radius,
   no <progress>, no animation. */
.exam-progress { display: flex; flex-direction: column; gap: 5px; }
.exam-progress-nums {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.exam-progress-pct { color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.exam-progress-track { height: 6px; border: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent); display: flex; }
.exam-progress-fill { background: var(--color-accent); }
.exam-row.closed .exam-progress-fill { background: color-mix(in srgb, var(--color-text) 30%, transparent); }

/* ── Shared form frame (create + edit) ───────────────────────────── */
/* white, not --color-surface — the same handoff-vs-mockup gap already on record for .tpl-frame above:
   the literal CSS says --color-surface here too, but the mockup only tints the rail (.exam-rail's own
   3% color-mix overlay), not the whole frame. Against an already-grey frame that overlay just reads as
   one flat grey field instead of a distinct panel — reported here the same way it was for .tpl-frame
   ("серый фон у всей формы... хотя в макете серый фон только у панели"). */
.exam-frame { border: 1px solid var(--color-divider); background: #fff; display: flex; flex-direction: column; }
.exam-frame-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); padding: var(--space-5) var(--space-6) var(--space-4); }
.exam-frame-head h2 { font-family: var(--font-heading); font-size: 26px; font-weight: 600; margin: 2px 0 0; letter-spacing: 0.01em; }
/* Отмена/Сохранить + "Изменён ..." stamp — same shape as .tpl-head-actions/.tpl-stamp on
   DocumentTemplateForm.razor, not the Bootstrap d-flex/gap-2 utility classes this row started with. */
.exam-frame-head-actions { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }
.exam-stamp { font-family: var(--font-mono); font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.exam-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: stretch; }
.exam-fields { padding: var(--space-5) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.exam-step { display: flex; flex-direction: column; gap: var(--space-3); }
.exam-step + .exam-step { border-top: 1px solid var(--color-divider); padding-top: var(--space-5); }
.exam-step-label {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.exam-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.exam-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.exam-hint { font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); line-height: 1.4; }
.exam-hint.accent { color: var(--color-accent-700); }
/* Resolved single-value picker: the chosen record in a field-height box with
   its own clear button. Accent-tinted while the form is a draft. Base background matches every other
   field control (--color-surface, same grey .form-select/.form-control already use — Гражданство's
   own country <select> on PatientForm.razor is the reference point) rather than the handoff's literal
   CSS, which leaves it unset and lets it read as plain white against .exam-frame's own white
   background — it should read as a field, not blend into the frame. */
.exam-picked {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 6px 6px 11px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent);
  background: var(--color-surface);
  font-size: 13.5px;
}
.exam-picked.fresh { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-800); }
.exam-picked-clear {
  margin-left: auto;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.exam-picked.fresh .exam-picked-clear { color: var(--color-accent-800); }
/* Harmful-factor chips */
.exam-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.exam-chip { display: flex; align-items: baseline; gap: 6px; padding: 4px 6px 4px 9px; border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent); font-size: 12.5px; }
.exam-chip.fresh { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-800); }
.exam-chip-code { font-family: var(--font-mono); font-size: 11px; color: var(--color-accent-700); }
.exam-chip.fresh .exam-chip-code { color: inherit; }

/* Status progression strip (edit only) — the five derived statuses in order:
   passed steps tinted, current filled, future muted. Read-only. */
.exam-statusbar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: 11px var(--space-6); border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.exam-track { display: flex; align-items: stretch; border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent); }
.exam-track span { font-family: var(--font-heading); font-size: 11.5px; letter-spacing: 0.06em; white-space: nowrap; padding: 5px 11px; color: color-mix(in srgb, var(--color-text) 45%, transparent); text-transform: uppercase; }
.exam-track span + span { border-left: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent); }
.exam-track span.passed { background: color-mix(in srgb, var(--color-accent) 22%, transparent); color: #2c455d; }
.exam-track span.current { background: var(--color-accent-800); color: #f2f2f3; }

/* ── Checklist rail (create draft + edit live) ────────────────────── */
.exam-rail { border-left: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-text) 3%, transparent); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.exam-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.exam-rail-count { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-accent-800); }
.exam-checklist { border: 1px solid var(--color-divider); background: var(--color-surface); display: flex; flex-direction: column; }
/* Source group heading — create mode groups rows by where they came from. */
.exam-source {
  padding: 6px 11px;
  border-top: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-accent-700);
  text-transform: uppercase; /* same missing-transform fix as .exam-status above */
}
.exam-source:first-child { border-top: 0; }
.exam-source.manual { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.exam-item { display: flex; align-items: center; gap: var(--space-2); padding: 6px 7px 6px 11px; border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); font-size: 13px; }
.exam-item.done-row { align-items: flex-start; padding: 7px 7px 7px 11px; }
.exam-item-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.exam-item-meta { font-family: var(--font-mono); font-size: 10.5px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.exam-item-optional { font-size: 12px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.exam-item-code { margin-left: auto; flex: 0 0 auto; font-family: var(--font-mono); font-size: 10.5px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.exam-item-more { padding: 7px 11px; border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
/* Done / not-done marks: a check for done, a short rule for pending. Never a
   checkbox — this page cannot toggle completion (an encounter does). */
.exam-mark { flex: 0 0 14px; height: 14px; display: flex; align-items: center; justify-content: center; margin-top: 2px; color: var(--color-accent-700); }
.exam-mark-pending { width: 8px; height: 1px; background: color-mix(in srgb, var(--color-text) 35%, transparent); }
.exam-item-remove {
  margin-left: auto;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.exam-item-remove:hover { color: var(--color-danger); }
/* Excluded rows (ExaminationService.IsManuallyExcluded) — a computed service the
   operator took out. Never removed from the list: it sits at the bottom,
   struck through, out of the count, with a restore button. */
.exam-source.excluded {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.exam-source-hint {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
/* 70%, not lighter: the name is the only way the operator knows which service
   they are about to restore — the line-through and the × mark carry the state. */
.exam-item.excluded { background: color-mix(in srgb, var(--color-text) 4%, transparent); color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.exam-item.excluded .exam-item-name { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.exam-mark-excluded { color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.exam-item-restore {
  margin-left: auto;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  background: transparent;
  color: var(--color-accent-700);
  cursor: pointer;
}
.exam-item-restore:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent-800); }

/* Conclusion-requirement notice — a framed plate with its reason, not a
   muted line under the select. */
.exam-notice { display: flex; gap: 9px; align-items: flex-start; padding: var(--space-3); border: 1px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.exam-notice svg { flex: 0 0 15px; margin-top: 1px; color: var(--color-accent-700); }
.exam-notice span { font-size: 12.5px; line-height: 1.4; color: var(--color-accent-800); }

/* Search-as-you-type pickers (Patient/Organization/ServicePackage/HarmfulFactor/Service) — square,
   hairline-bordered, matching .exam-picked/.exam-row rather than the rounded-corner .diagnosis-picker
   family those fields started out reusing from Icd/Contract pages (this system's --radius:0 throughout
   .exam-frame, that one isn't). Local to ExaminationForm.razor only — .diagnosis-picker itself stays
   untouched, still used as-is on every other page that reuses it.
   .exam-picker-results floats over the form (position: absolute, anchored to .exam-picker's own
   position: relative) rather than sitting in normal flow — an in-flow list of up to 20 rows pushed
   every field below it down the page; a real dropdown overlays instead of displacing layout. */
.exam-picker { position: relative; min-width: 100%; margin-top: 0; }
.exam-picker-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent);
  background: var(--color-surface);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-text) 20%, transparent);
}
.exam-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
}
.exam-picker-item:last-child { border-bottom: none; }
.exam-picker-item:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

@media (max-width: 1200px) {
  .exam-cols { grid-template-columns: minmax(0, 1fr); }
  .exam-rail { border-left: 0; border-top: 1px solid var(--color-divider); }
  .exam-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#blazor-error-ui .reload, #blazor-error-ui .dismiss { color: #fff; margin-left: var(--space-4); cursor: pointer; }