/* ─── Theme base — Bootstrap 5.3.3 variables → skin tokens ──────────────────
   docs/rebranding-and-skins/03-skins.md §2. This file is STATIC and versioned; a clinic's (or the platform's) skin
   is a tiny generated stylesheet that only redefines the `--vs-*` values in :root (uploads/brand/…/theme-<sha8>.css,
   linked after this file and style.css), so nothing here changes per tenant.

   Part 1 is the DEFAULT skin («classic»), generated by scripts/build_theme_base.php from ThemeCompiler — never edit
   it by hand (tests/theme_engine.php fails when it drifts from the compiler).
   Part 2 re-points the ACTUAL variables Bootstrap's components read, for every state at once, instead of one-off
   selector patches (01-audit.md §B: the old style.css patched single selectors and left ~19 components rendering
   Bootstrap blue).

   Load order: bootstrap.css, bootstrap-icons.css, THIS FILE, style.css (app classes: .vc-navbar, .sched-*, …, via the
   var(--vc-*) aliases it declares), then the per-tenant / platform skin file if any. */

/* BEGIN compiled defaults */
/* Skin — compiled by ThemeCompiler v3, do not edit */
:root {
  --vs-accent: #17a2b8;
  --vs-accent-active: #107282;
  --vs-accent-border-subtle: #b9e3ea;
  --vs-accent-disabled: #68c3d1;
  --vs-accent-emphasis: #0e7681;
  --vs-accent-hover: #128294;
  --vs-accent-rgb: 23, 162, 184;
  --vs-accent-subtle: #e3f4f6;
  --vs-appt-attended-bg: #1e7e34;
  --vs-appt-attended-block: #29ab47;
  --vs-appt-attended-block-fg: #ffffff;
  --vs-appt-attended-border: #1e7e34;
  --vs-appt-attended-fg: #ffffff;
  --vs-appt-canceled-bg: #fbe7e9;
  --vs-appt-canceled-block: #29ab47;
  --vs-appt-canceled-block-fg: #ffffff;
  --vs-appt-canceled-border: #f5c2c7;
  --vs-appt-canceled-fg: #cb2333;
  --vs-appt-confirmed-bg: #0dcaf0;
  --vs-appt-confirmed-block: #29ab47;
  --vs-appt-confirmed-block-fg: #ffffff;
  --vs-appt-confirmed-border: #0dcaf0;
  --vs-appt-confirmed-fg: #15241f;
  --vs-appt-executed-bg: rgba(76, 62, 145, 0.16);
  --vs-appt-executed-block: #29ab47;
  --vs-appt-executed-block-fg: #ffffff;
  --vs-appt-executed-border: #4c3e91;
  --vs-appt-executed-fg: #4c3e91;
  --vs-appt-pending-bg: #fff8e1;
  --vs-appt-pending-block: repeating-linear-gradient(135deg, #29ab47 0 8px, #1e7e34 8px 16px);
  --vs-appt-pending-block-fg: #ffffff;
  --vs-appt-pending-border: #ffecb5;
  --vs-appt-pending-fg: #936900;
  --vs-btn-radius: 6px;
  --vs-card-header-bg: #1e7e34;
  --vs-card-header-border: 0;
  --vs-card-header-fg: #ffffff;
  --vs-card-radius: 12px;
  --vs-control: #1e7e34;
  --vs-control-focus-border: #83b88f;
  --vs-control-rgb: 30, 126, 52;
  --vs-danger: #dc3545;
  --vs-danger-active: #b51f2e;
  --vs-danger-border-subtle: #f5c2c7;
  --vs-danger-disabled: #e87c86;
  --vs-danger-emphasis: #cb2333;
  --vs-danger-hover: #c62232;
  --vs-danger-rgb: 220, 53, 69;
  --vs-danger-subtle: #fbe7e9;
  --vs-final: #4c3e91;
  --vs-final-edge-width: 1.5px;
  --vs-final-fill: rgba(76, 62, 145, 0.16);
  --vs-final-rgb: 76, 62, 145;
  --vs-final-text: #4c3e91;
  --vs-focus-ring: rgba(30, 126, 52, 0.25);
  --vs-focus-ring-width: .25rem;
  --vs-font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --vs-font-heading: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --vs-font-size-base: 16px;
  --vs-footer-bg: #e9f2eb;
  --vs-footer-border: #c7dfcc;
  --vs-footer-fg: #212529;
  --vs-header-bg: #1e7e34;
  --vs-header-bg-end: #124d20;
  --vs-header-bg-image: linear-gradient(135deg, #1e7e34 0%, #124d20 100%);
  --vs-header-border: transparent;
  --vs-header-fg: #ffffff;
  --vs-header-fg-muted: rgba(255, 255, 255, 0.85);
  --vs-header-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  --vs-heading: #212529;
  --vs-heading-weight: 500;
  --vs-info: #0dcaf0;
  --vs-info-active: #0a99b6;
  --vs-info-border-subtle: #b6effb;
  --vs-info-disabled: #62ddf5;
  --vs-info-emphasis: #0d7a8c;
  --vs-info-hover: #0ba9c9;
  --vs-info-rgb: 13, 202, 240;
  --vs-info-subtle: #e2f9fd;
  --vs-label-weight: 400;
  --vs-link: #1e7e34;
  --vs-link-hover: #145523;
  --vs-link-hover-rgb: 20, 85, 35;
  --vs-link-rgb: 30, 126, 52;
  --vs-logo-height: 28px;
  --vs-on-accent: #15241f;
  --vs-on-control: #ffffff;
  --vs-on-danger: #ffffff;
  --vs-on-info: #15241f;
  --vs-on-primary: #ffffff;
  --vs-on-success: #ffffff;
  --vs-on-warning: #15241f;
  --vs-page-bg: #f4f9f6;
  --vs-primary: #1e7e34;
  --vs-primary-active: #124d20;
  --vs-primary-border-subtle: #bcd8c2;
  --vs-primary-disabled: #6dab7b;
  --vs-primary-emphasis: #1d7a32;
  --vs-primary-hover: #165d26;
  --vs-primary-light: #29ab47;
  --vs-primary-pale: #e4f0e7;
  --vs-primary-rgb: 30, 126, 52;
  --vs-primary-subtle: #e4f0e7;
  --vs-radius: 6px;
  --vs-radius-lg: 8px;
  --vs-radius-sm: 4px;
  --vs-radius-xl: 16px;
  --vs-row-hover: #eff6f1;
  --vs-shadow: 0 2px 12px rgba(0, 0, 0, .07);
  --vs-shadow-hover: 0 4px 20px rgba(0, 0, 0, .12);
  --vs-stage-1-bg: #e2f9fd;
  --vs-stage-1-border: #b6effb;
  --vs-stage-1-fg: #0d7a8c;
  --vs-stage-2-bg: #0dcaf0;
  --vs-stage-2-border: #0dcaf0;
  --vs-stage-2-fg: #15241f;
  --vs-stage-3-bg: #1e7e34;
  --vs-stage-3-border: #1e7e34;
  --vs-stage-3-fg: #ffffff;
  --vs-stage-4-bg: #355e63;
  --vs-stage-4-border: #355e63;
  --vs-stage-4-fg: #ffffff;
  --vs-stage-5-bg: rgba(76, 62, 145, 0.16);
  --vs-stage-5-border: #4c3e91;
  --vs-stage-5-fg: #4c3e91;
  --vs-success: #198754;
  --vs-success-active: #0f5334;
  --vs-success-border-subtle: #badbcc;
  --vs-success-disabled: #6ab190;
  --vs-success-emphasis: #167b4b;
  --vs-success-hover: #13653f;
  --vs-success-rgb: 25, 135, 84;
  --vs-success-subtle: #e3f1ea;
  --vs-surface-bg: #ffffff;
  --vs-surface-border: #dee2e6;
  --vs-switch-knob-focus: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2383b88f'/%3e%3c/svg%3e");
  --vs-table-head-bg: #f2f7f3;
  --vs-table-head-fg: #1e7e34;
  --vs-text: #212529;
  --vs-text-muted: #5c636a;
  --vs-text-rgb: 33, 37, 41;
  --vs-warning: #ffc107;
  --vs-warning-active: #c99700;
  --vs-warning-border-subtle: #ffecb5;
  --vs-warning-disabled: #ffd75e;
  --vs-warning-emphasis: #936900;
  --vs-warning-hover: #dda600;
  --vs-warning-rgb: 255, 193, 7;
  --vs-warning-subtle: #fff8e1;
}
/* END compiled defaults */

/* ── Part 2a — Bootstrap root variables ────────────────────────────────── */
:root {
  --bs-primary: var(--vs-primary);
  --bs-primary-rgb: var(--vs-primary-rgb);
  --bs-primary-text-emphasis: var(--vs-primary-emphasis);
  --bs-primary-bg-subtle: var(--vs-primary-subtle);
  --bs-primary-border-subtle: var(--vs-primary-border-subtle);

  --bs-success: var(--vs-success);
  --bs-success-rgb: var(--vs-success-rgb);
  --bs-success-text-emphasis: var(--vs-success-emphasis);
  --bs-success-bg-subtle: var(--vs-success-subtle);
  --bs-success-border-subtle: var(--vs-success-border-subtle);
  --bs-warning: var(--vs-warning);
  --bs-warning-rgb: var(--vs-warning-rgb);
  --bs-warning-text-emphasis: var(--vs-warning-emphasis);
  --bs-warning-bg-subtle: var(--vs-warning-subtle);
  --bs-warning-border-subtle: var(--vs-warning-border-subtle);
  --bs-danger: var(--vs-danger);
  --bs-danger-rgb: var(--vs-danger-rgb);
  --bs-danger-text-emphasis: var(--vs-danger-emphasis);
  --bs-danger-bg-subtle: var(--vs-danger-subtle);
  --bs-danger-border-subtle: var(--vs-danger-border-subtle);
  --bs-info: var(--vs-info);
  --bs-info-rgb: var(--vs-info-rgb);
  --bs-info-text-emphasis: var(--vs-info-emphasis);
  --bs-info-bg-subtle: var(--vs-info-subtle);
  --bs-info-border-subtle: var(--vs-info-border-subtle);

  --bs-link-color: var(--vs-link);
  --bs-link-color-rgb: var(--vs-link-rgb);
  --bs-link-hover-color: var(--vs-link-hover);
  --bs-link-hover-color-rgb: var(--vs-link-hover-rgb);

  --bs-focus-ring-color: var(--vs-focus-ring);

  /* Bootstrap's "body-bg" is the SURFACE cards/list-groups/modals/inputs paint with; the tinted page background is set
     on <body> by style.css (var(--vs-page-bg)). Pointing it at the page colour would tint every card. */
  --bs-body-bg: var(--vs-surface-bg);
  --bs-body-color: var(--vs-text);
  --bs-body-color-rgb: var(--vs-text-rgb);
  --bs-secondary-color: var(--vs-text-muted);
  --bs-heading-color: var(--vs-heading);
  --bs-border-color: var(--vs-surface-border);
  --bs-body-font-family: var(--vs-font-body);

  --bs-border-radius: var(--vs-radius);
  --bs-border-radius-sm: var(--vs-radius-sm);
  --bs-border-radius-lg: var(--vs-radius-lg);
  --bs-border-radius-xl: var(--vs-radius-xl);
}

/* ── Part 2b — Buttons: EVERY state via the variant's own variables ──────────
   :hover / :active / .active / :disabled / .btn-check:checked + .btn / :focus-visible all read these. The disabled
   fill is the base colour (Bootstrap fades the whole button with opacity). */
.btn-primary {
  --bs-btn-color: var(--vs-on-primary);
  --bs-btn-bg: var(--vs-primary);
  --bs-btn-border-color: var(--vs-primary);
  --bs-btn-hover-color: var(--vs-on-primary);
  --bs-btn-hover-bg: var(--vs-primary-hover);
  --bs-btn-hover-border-color: var(--vs-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--vs-primary-rgb);
  --bs-btn-active-color: var(--vs-on-primary);
  --bs-btn-active-bg: var(--vs-primary-active);
  --bs-btn-active-border-color: var(--vs-primary-active);
  --bs-btn-disabled-color: var(--vs-on-primary);
  --bs-btn-disabled-bg: var(--vs-primary);
  --bs-btn-disabled-border-color: var(--vs-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--vs-link);
  --bs-btn-border-color: var(--vs-primary);
  --bs-btn-hover-color: var(--vs-on-primary);
  --bs-btn-hover-bg: var(--vs-primary);
  --bs-btn-hover-border-color: var(--vs-primary);
  --bs-btn-focus-shadow-rgb: var(--vs-primary-rgb);
  --bs-btn-active-color: var(--vs-on-primary);
  --bs-btn-active-bg: var(--vs-primary);
  --bs-btn-active-border-color: var(--vs-primary);
  --bs-btn-disabled-color: var(--vs-link);
  --bs-btn-disabled-border-color: var(--vs-primary);
}
.btn-success {
  --bs-btn-color: var(--vs-on-success);
  --bs-btn-bg: var(--vs-success);
  --bs-btn-border-color: var(--vs-success);
  --bs-btn-hover-color: var(--vs-on-success);
  --bs-btn-hover-bg: var(--vs-success-hover);
  --bs-btn-hover-border-color: var(--vs-success-hover);
  --bs-btn-focus-shadow-rgb: var(--vs-success-rgb);
  --bs-btn-active-color: var(--vs-on-success);
  --bs-btn-active-bg: var(--vs-success-active);
  --bs-btn-active-border-color: var(--vs-success-active);
  --bs-btn-disabled-color: var(--vs-on-success);
  --bs-btn-disabled-bg: var(--vs-success);
  --bs-btn-disabled-border-color: var(--vs-success);
}
.btn-outline-success {
  --bs-btn-color: var(--vs-success-emphasis);
  --bs-btn-border-color: var(--vs-success);
  --bs-btn-hover-color: var(--vs-on-success);
  --bs-btn-hover-bg: var(--vs-success);
  --bs-btn-hover-border-color: var(--vs-success);
  --bs-btn-focus-shadow-rgb: var(--vs-success-rgb);
  --bs-btn-active-color: var(--vs-on-success);
  --bs-btn-active-bg: var(--vs-success);
  --bs-btn-active-border-color: var(--vs-success);
  --bs-btn-disabled-color: var(--vs-success-emphasis);
  --bs-btn-disabled-border-color: var(--vs-success);
}
.btn-danger {
  --bs-btn-color: var(--vs-on-danger);
  --bs-btn-bg: var(--vs-danger);
  --bs-btn-border-color: var(--vs-danger);
  --bs-btn-hover-color: var(--vs-on-danger);
  --bs-btn-hover-bg: var(--vs-danger-hover);
  --bs-btn-hover-border-color: var(--vs-danger-hover);
  --bs-btn-focus-shadow-rgb: var(--vs-danger-rgb);
  --bs-btn-active-color: var(--vs-on-danger);
  --bs-btn-active-bg: var(--vs-danger-active);
  --bs-btn-active-border-color: var(--vs-danger-active);
  --bs-btn-disabled-color: var(--vs-on-danger);
  --bs-btn-disabled-bg: var(--vs-danger);
  --bs-btn-disabled-border-color: var(--vs-danger);
}
.btn-outline-danger {
  --bs-btn-color: var(--vs-danger-emphasis);
  --bs-btn-border-color: var(--vs-danger);
  --bs-btn-hover-color: var(--vs-on-danger);
  --bs-btn-hover-bg: var(--vs-danger);
  --bs-btn-hover-border-color: var(--vs-danger);
  --bs-btn-focus-shadow-rgb: var(--vs-danger-rgb);
  --bs-btn-active-color: var(--vs-on-danger);
  --bs-btn-active-bg: var(--vs-danger);
  --bs-btn-active-border-color: var(--vs-danger);
  --bs-btn-disabled-color: var(--vs-danger-emphasis);
  --bs-btn-disabled-border-color: var(--vs-danger);
}
.btn-warning {
  --bs-btn-color: var(--vs-on-warning);
  --bs-btn-bg: var(--vs-warning);
  --bs-btn-border-color: var(--vs-warning);
  --bs-btn-hover-color: var(--vs-on-warning);
  --bs-btn-hover-bg: var(--vs-warning-hover);
  --bs-btn-hover-border-color: var(--vs-warning-hover);
  --bs-btn-focus-shadow-rgb: var(--vs-warning-rgb);
  --bs-btn-active-color: var(--vs-on-warning);
  --bs-btn-active-bg: var(--vs-warning-active);
  --bs-btn-active-border-color: var(--vs-warning-active);
  --bs-btn-disabled-color: var(--vs-on-warning);
  --bs-btn-disabled-bg: var(--vs-warning);
  --bs-btn-disabled-border-color: var(--vs-warning);
}
.btn-outline-warning {
  --bs-btn-color: var(--vs-warning-emphasis);
  --bs-btn-border-color: var(--vs-warning);
  --bs-btn-hover-color: var(--vs-on-warning);
  --bs-btn-hover-bg: var(--vs-warning);
  --bs-btn-hover-border-color: var(--vs-warning);
  --bs-btn-focus-shadow-rgb: var(--vs-warning-rgb);
  --bs-btn-active-color: var(--vs-on-warning);
  --bs-btn-active-bg: var(--vs-warning);
  --bs-btn-active-border-color: var(--vs-warning);
  --bs-btn-disabled-color: var(--vs-warning-emphasis);
  --bs-btn-disabled-border-color: var(--vs-warning);
}
.btn-info {
  --bs-btn-color: var(--vs-on-info);
  --bs-btn-bg: var(--vs-info);
  --bs-btn-border-color: var(--vs-info);
  --bs-btn-hover-color: var(--vs-on-info);
  --bs-btn-hover-bg: var(--vs-info-hover);
  --bs-btn-hover-border-color: var(--vs-info-hover);
  --bs-btn-focus-shadow-rgb: var(--vs-info-rgb);
  --bs-btn-active-color: var(--vs-on-info);
  --bs-btn-active-bg: var(--vs-info-active);
  --bs-btn-active-border-color: var(--vs-info-active);
  --bs-btn-disabled-color: var(--vs-on-info);
  --bs-btn-disabled-bg: var(--vs-info);
  --bs-btn-disabled-border-color: var(--vs-info);
}
.btn-outline-info {
  --bs-btn-color: var(--vs-info-emphasis);
  --bs-btn-border-color: var(--vs-info);
  --bs-btn-hover-color: var(--vs-on-info);
  --bs-btn-hover-bg: var(--vs-info);
  --bs-btn-hover-border-color: var(--vs-info);
  --bs-btn-focus-shadow-rgb: var(--vs-info-rgb);
  --bs-btn-active-color: var(--vs-on-info);
  --bs-btn-active-bg: var(--vs-info);
  --bs-btn-active-border-color: var(--vs-info);
  --bs-btn-disabled-color: var(--vs-info-emphasis);
  --bs-btn-disabled-border-color: var(--vs-info);
}
.btn { --bs-btn-border-radius: var(--vs-btn-radius); }
.btn-sm, .btn-group-sm > .btn { --bs-btn-border-radius: var(--vs-btn-radius); }
.btn-lg, .btn-group-lg > .btn { --bs-btn-border-radius: var(--vs-btn-radius); }

/* "text-bg-*" helpers hard-code white/black text — use the derived readable colour instead */
.text-bg-primary { color: var(--vs-on-primary) !important; }
.text-bg-success { color: var(--vs-on-success) !important; }
.text-bg-warning { color: var(--vs-on-warning) !important; }
.text-bg-danger  { color: var(--vs-on-danger) !important; }
.text-bg-info    { color: var(--vs-on-info) !important; }

/* ── Part 2c — Checkboxes, radios, switches, range ─────────────────────────
   The indeterminate state (every admin table's select-all, assets/admin_table.js) needs Bootstrap's exact attribute
   selector to win on specificity. The switch knob is baked into a literal SVG data URI by Bootstrap — the compiler
   emits the recoloured URI as --vs-switch-knob-focus. */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--vs-control);
  border-color: var(--vs-control);
}
.form-check-input:focus {
  border-color: var(--vs-control-focus-border);
  box-shadow: 0 0 0 var(--vs-focus-ring-width) var(--vs-focus-ring);
}
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: var(--vs-switch-knob-focus);
}
.form-range::-webkit-slider-thumb { background-color: var(--vs-control); }
.form-range::-webkit-slider-thumb:active { background-color: var(--vs-control-focus-border); }
.form-range::-moz-range-thumb { background-color: var(--vs-control); }
.form-range::-moz-range-thumb:active { background-color: var(--vs-control-focus-border); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--vs-page-bg), 0 0 0 var(--vs-focus-ring-width) var(--vs-focus-ring); }
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px var(--vs-page-bg), 0 0 0 var(--vs-focus-ring-width) var(--vs-focus-ring); }

/* ── Part 2d — Focus of every text input and select ────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--vs-control-focus-border);
  box-shadow: 0 0 0 var(--vs-focus-ring-width) var(--vs-focus-ring);
}
.form-control, .form-select { --bs-border-radius: var(--vs-radius); }
.form-label { font-weight: var(--vs-label-weight); }

/* ── Part 2e — Components that read the primary colour ─────────────────── */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--vs-primary);
  --bs-nav-pills-link-active-color: var(--vs-on-primary);
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--vs-primary);
  --bs-dropdown-link-active-color: var(--vs-on-primary);
}
.list-group {
  --bs-list-group-active-bg: var(--vs-primary);
  --bs-list-group-active-color: var(--vs-on-primary);
  --bs-list-group-active-border-color: var(--vs-primary);
}
.pagination {
  --bs-pagination-active-bg: var(--vs-primary);
  --bs-pagination-active-color: var(--vs-on-primary);
  --bs-pagination-active-border-color: var(--vs-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 var(--vs-focus-ring-width) var(--vs-focus-ring);
}
.progress, .progress-stacked { --bs-progress-bar-bg: var(--vs-primary); }
/* Accordion active state reads --bs-primary-text-emphasis / -bg-subtle (Part 2a) — no separate override needed. */

/* App-specific rules for .card-header, .table th, the navbar and footer live in style.css itself, right after the
   rules they correct (this file loads BEFORE style.css, so a rule here would lose equal-specificity ties). */

/* ─── Status badges (03-skins.md §1 «Статусы»; preview: docs/rebranding-and-skins/assets/blue/statuses.html) ───
   Meaning, not colour: FINAL = the object reached the end of its process (Оплачено, Завершён, Выписан, Закрыт) —
   quiet, translucent fill + solid edge. SOFT = pale fill + pale edge + dark text, for bad / warning / info / good.
   STAGE 1..5 = the process scale, solid and deepening; stage 5 is the final style. Never colour alone: keep the label. */
.badge-final,
.badge-stage-5 {
  background: var(--vs-final-fill);
  color: var(--vs-final-text);
  border: var(--vs-final-edge-width) solid var(--vs-final);
}
.badge-soft-success { background: var(--vs-success-subtle); color: var(--vs-success-emphasis); border: 1px solid var(--vs-success-border-subtle); }
.badge-soft-warning { background: var(--vs-warning-subtle); color: var(--vs-warning-emphasis); border: 1px solid var(--vs-warning-border-subtle); }
.badge-soft-danger  { background: var(--vs-danger-subtle);  color: var(--vs-danger-emphasis);  border: 1px solid var(--vs-danger-border-subtle); }
.badge-soft-info    { background: var(--vs-info-subtle);    color: var(--vs-info-emphasis);    border: 1px solid var(--vs-info-border-subtle); }
.badge-stage-1 { background: var(--vs-stage-1-bg); color: var(--vs-stage-1-fg); border: 1px solid var(--vs-stage-1-border); }
.badge-stage-2 { background: var(--vs-stage-2-bg); color: var(--vs-stage-2-fg); border: 1px solid var(--vs-stage-2-border); }
.badge-stage-3 { background: var(--vs-stage-3-bg); color: var(--vs-stage-3-fg); border: 1px solid var(--vs-stage-3-border); }
.badge-stage-4 { background: var(--vs-stage-4-bg); color: var(--vs-stage-4-fg); border: 1px solid var(--vs-stage-4-border); }
/* Appointment statuses — colours come from the clinic's «Статусы записей» settings (auto = the theme's own). */
.badge-appt-pending   { background: var(--vs-appt-pending-bg);   color: var(--vs-appt-pending-fg);   border: 1px solid var(--vs-appt-pending-border); }
.badge-appt-confirmed { background: var(--vs-appt-confirmed-bg); color: var(--vs-appt-confirmed-fg); border: 1px solid var(--vs-appt-confirmed-border); }
.badge-appt-attended  { background: var(--vs-appt-attended-bg);  color: var(--vs-appt-attended-fg);  border: 1px solid var(--vs-appt-attended-border); }
.badge-appt-executed  { background: var(--vs-appt-executed-bg);  color: var(--vs-appt-executed-fg);  border: 1px solid var(--vs-appt-executed-border); }
.badge-appt-canceled  { background: var(--vs-appt-canceled-bg);  color: var(--vs-appt-canceled-fg);  border: 1px solid var(--vs-appt-canceled-border); }
.text-final { color: var(--vs-final-text) !important; }
.border-final { border-color: var(--vs-final) !important; }