/* UI refinement using unslop by Damir Sokolovsky (@heydamir), CC BY 4.0. */

/* 1. Spacing and 2. color: a calm work surface around clinical data. */
:root[data-theme="light"] {
  --bg: #f5f7f8;
  --surface: #ffffff;
  --surface-subtle: #f0f3f5;
  --border: #d9e0e4;
  --text: #1b2930;
  --muted: #586a73;
  --primary: #096487;
  --primary-hover: #074e6a;
  --card-shadow: 0 1px 2px rgba(20, 39, 48, .05);
  --danger: #b83735;
  --success: #237454;
  --warning: #a45f1d;
  --info: #096487;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151b1f;
  --surface: #1d262b;
  --surface-subtle: #263138;
  --border: #39464d;
  --text: #edf2f3;
  --muted: #a4b5bc;
  --primary: #75c7e0;
  --primary-hover: #96d7ea;
  --card-shadow: none;
  --danger: #ec7772;
  --success: #80c4a4;
  --warning: #e0ae78;
  --info: #75c7e0;
  --button-primary: #0b607f;
  --button-primary-hover: #0a4e68;
}

/* Dark theme: every dialog and nested control uses the same graphite ramp. */
:root[data-theme="dark"] .error-alert { background: #493334; color: #efb6af; }
:root[data-theme="dark"] .profile-menu-panel,
:root[data-theme="dark"] .row-actions-menu,
:root[data-theme="dark"] .duration-options,
:root[data-theme="dark"] .price-breakdown,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .audit-details { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: none; }
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer { background: var(--surface); border-color: var(--border); }
:root[data-theme="dark"] .modal-body { background: var(--surface); color: var(--text); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: var(--surface); color: var(--text); border-color: var(--border); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--muted); opacity: 1; }
:root[data-theme="dark"] .questionnaire-card.missing { background: #342f25; border-color: #66533a; }
:root[data-theme="dark"] .questionnaire-card.generated { background: #25343c; border-color: #426070; }
:root[data-theme="dark"] .questionnaire-card.signed { background: #283a32; border-color: #426650; }
:root[data-theme="dark"] .questionnaire-status.missing { color: #e9c995; background: #423a2e; border-color: #66533a; }
:root[data-theme="dark"] .questionnaire-status.generated { color: #a6d6e6; background: #233d4a; border-color: #426070; }
:root[data-theme="dark"] .questionnaire-status.signed { color: #a8d4b7; background: #294336; border-color: #426650; }
:root[data-theme="dark"] .questionnaire-modal-body { background: var(--bg); }
/* The questionnaire sheet remains white because it previews the printed document. */
:root[data-theme="dark"] .questionnaire-sheet input,
:root[data-theme="dark"] .questionnaire-sheet textarea { color: #111; border-color: #777; background: transparent; color-scheme: light; }
:root[data-theme="dark"] .questionnaire-sheet th { background: #fff; color: #111; }
:root[data-theme="dark"] .status-badge.active,
:root[data-theme="dark"] .egfr-safe { color: #a8d4b7; background: #294336; }
:root[data-theme="dark"] .status-badge.inactive,
:root[data-theme="dark"] .egfr-critical { color: #efb6af; background: #493334; }
:root[data-theme="dark"] .egfr-warning { color: #e9c995; background: #423a2e; }
:root[data-theme="dark"] .egfr-missing { color: var(--muted); background: var(--surface-subtle); }
:root[data-theme="dark"] .egfr-pointer { background: #edf2f3; color: #151b1f; }
:root[data-theme="dark"] .egfr-pointer::after { border-top-color: #edf2f3; }
:root[data-theme="dark"] .audit-result-denied,
:root[data-theme="dark"] .audit-result-failure,
:root[data-theme="dark"] .danger-text { color: #efb6af; }
:root[data-theme="dark"] .audit-result-success,
:root[data-theme="dark"] .audit-result-completed { color: #a8d4b7; }
:root[data-theme="dark"] .restore-warnings { color: #e9c995; }
:root[data-theme="dark"] .calendar-day-summary.full { color: #efb6af; }
:root[data-theme="dark"] .pagination-page.active { background: #0b607f; border-color: #0b607f; color: #fff; }
:root[data-theme="dark"] .fc .fc-day-today { background: #24343b !important; }
:root[data-theme="dark"] .fc .fc-timegrid-slot-lane:hover,
:root[data-theme="dark"] .fc .fc-daygrid-day:hover { background: #263138; }
:root[data-theme="dark"] .fc .fc-event { box-shadow: none; }
:root[data-theme="dark"] .calendar-event-new { background: #423a2e !important; border-color: #e9c995 !important; color: #e9c995 !important; }
:root[data-theme="dark"] .calendar-event-confirmed { background: #233d4a !important; border-color: #a6d6e6 !important; color: #a6d6e6 !important; }
:root[data-theme="dark"] .calendar-event-completed { background: #294336 !important; border-color: #a8d4b7 !important; color: #a8d4b7 !important; }
:root[data-theme="dark"] .calendar-event-cancelled,
:root[data-theme="dark"] .calendar-event-no_show { background: #493334 !important; border-color: #efb6af !important; color: #efb6af !important; }
:root[data-theme="dark"] .calendar-event-new .fc-event-main,
:root[data-theme="dark"] .calendar-event-confirmed .fc-event-main,
:root[data-theme="dark"] .calendar-event-completed .fc-event-main,
:root[data-theme="dark"] .calendar-event-cancelled .fc-event-main,
:root[data-theme="dark"] .calendar-event-no_show .fc-event-main { color: inherit; }
:root[data-theme="dark"] .dpi { --dpi-hover-background: #263138; --dpi-hover-color: #edf2f3; --dpi-selected-background: #0b607f; --dpi-selected-color: #fff; --dpi-focus-ring: #75c7e0; }

body { line-height: 1.45; }
header { min-height: 68px; padding: 8px 28px; }
main { max-width: 1600px; padding: 24px 28px 40px; }
.brand-logo { height: 48px; }
.profile-avatar, #btn-refresh svg { width: 18px; height: 18px; flex: none; }

.control-panel { gap: 0; margin-bottom: 20px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--card-shadow); }
.search-filter-box, .management-actions { align-items: center; gap: 8px; }
.management-actions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.search-filter-box #filter-search { min-width: 240px; flex: 1 1 280px; }
.search-filter-box select { min-width: 144px; }
.search-filter-box #filter-sort { min-width: 176px; }
.management-actions #btn-create-order { margin-left: auto; }

.bulk-orders, .advanced-filters { padding: 16px 20px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--card-shadow); }
.bulk-orders { gap: 8px 12px; }
.bulk-orders-hint, #orders-selection-count { color: var(--muted); font-size: 12px; }
#orders-selection-count { font-variant-numeric: tabular-nums; }

/* 3. Icons and 4. copy use plain labels except for actions with no text. */
button, input, select, textarea { font-size: 14px; }
button { min-height: 36px; padding: 8px 14px; border-radius: 8px; background: var(--button-primary, var(--primary)); font-weight: 500; gap: 8px; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease; }
button:hover { opacity: 1; background: var(--button-primary-hover, var(--primary-hover)); }
button.secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
button.secondary:hover { background: var(--surface-subtle); border-color: var(--muted); }
button.danger { background: var(--danger); }
button.danger:hover { background: #982d2b; }
:root[data-theme="dark"] button.danger:hover { background: #b85854; }
button:disabled { cursor: not-allowed; opacity: .45; }
button.icon-btn { width: 36px; min-width: 36px; padding: 0; }
input, select, textarea { min-height: 36px; padding: 8px 12px; border-radius: 8px; }
input[type="checkbox"], input[type="radio"] { min-height: 0; accent-color: var(--primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }
.profile-menu-trigger { max-width: min(60vw, 320px); }
.profile-menu-panel { padding: 8px; border-radius: 10px; box-shadow: 0 12px 28px rgba(14, 31, 40, .14); }
.profile-menu-panel button { justify-content: flex-start; }

/* 5. Type and 6. layout: keep names, times and results easy to scan. */
h2, h3, h4, .section-heading h4, .modal-header h3 { font-weight: 500; letter-spacing: 0; }
strong, b, .order-card-header strong { font-weight: 600; }
th { padding: 12px 14px; color: var(--muted); background: var(--surface-subtle); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
td { padding: 12px 14px; font-size: 13px; line-height: 1.4; }
.table-wrapper { border-radius: 12px; box-shadow: var(--card-shadow); }
.order-row { transition: background-color 150ms ease; }
.order-row:hover { background: var(--surface-subtle); }
.order-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.order-row td[data-label="Дата"] strong { display: inline-flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.order-row td[data-label="Дата"] strong::before { content: ""; width: 3px; height: 18px; flex: none; align-self: center; border-radius: 2px; background: var(--primary); }
.order-row td[data-label="Оплата"] strong, .pagination-bar, .kpi-grid strong { font-variant-numeric: tabular-nums; }
.phone-copy { font-weight: 500; }
.pagination-bar { gap: 12px; margin-top: 16px; padding: 0 4px; }

.badge, .result-status, .questionnaire-status, .egfr-badge, .status-badge, .child-badge { border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.badge-new { color: #7d5619; background: #f5edda; }
.badge-confirmed { color: #145b78; background: #e4f1f5; }
.badge-checkedin { color: #145b78; background: #e4f1f5; }
.badge-completed, .result-issued { color: #276748; background: #e5f1e9; }
.badge-cancelled, .badge-no_show { color: #9e4541; background: #f8e9e7; }
.child-badge { color: var(--muted); background: var(--surface-subtle); }
.result-not_ready { color: var(--muted); background: var(--surface-subtle); }
.result-ready { color: #145b78; background: #e4f1f5; }
:root[data-theme="dark"] .badge-new { color: #e9c995; background: #423a2e; }
:root[data-theme="dark"] .badge-confirmed, :root[data-theme="dark"] .badge-checkedin, :root[data-theme="dark"] .result-ready { color: #a6d6e6; background: #233d4a; }
:root[data-theme="dark"] .badge-completed, :root[data-theme="dark"] .result-issued { color: #a8d4b7; background: #294336; }
:root[data-theme="dark"] .badge-cancelled, :root[data-theme="dark"] .badge-no_show { color: #efb6af; background: #493334; }
:root[data-theme="dark"] .child-badge, :root[data-theme="dark"] .result-not_ready { color: var(--muted); background: var(--surface-subtle); }

.order-card { gap: 12px; padding: 16px; border-radius: 12px; box-shadow: var(--card-shadow); }
.order-card-header { gap: 12px; padding-bottom: 12px; }
.order-card-fields { gap: 12px 16px; }
.order-card-field-label { color: var(--muted); font-size: 12px; font-weight: 500; text-transform: none; }
.order-card-footer { padding-top: 12px; }

/* 7. Details: shared framing across all editor, report and administration views. */
.card, .user-admin-section, .user-card, .backup-section, .questionnaire-card, .schedule-settings-body > section { border-radius: 12px; box-shadow: var(--card-shadow); }
.login-card { max-width: 420px; padding: 32px; border-radius: 16px; }
.login-card h2 { font-size: 24px; line-height: 1.2; font-weight: 500; margin-bottom: 8px; }
.login-card p { margin-bottom: 24px; font-size: 14px; }
.login-card button[type="submit"] { width: 100%; min-height: 44px; margin-top: 8px; }
.login-container { padding: 32px; }

.modal-overlay { padding: 16px; background: rgba(13, 26, 33, .58); }
.modal { max-height: calc(100dvh - 32px); border-radius: 16px; box-shadow: 0 24px 56px rgba(14, 31, 40, .22); }
.modal-header { min-height: 64px; padding: 16px 24px; }
.modal-header h3 { font-size: 20px; }
.modal-body { padding: 24px; gap: 20px; }
.modal-footer { padding: 16px 24px; gap: 8px; border-radius: 0 0 16px 16px; }
.form-grid-2, .form-grid-3 { gap: 16px; }
.form-group label, .fieldset legend { color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.fieldset { border-radius: 12px; }
.advanced-filters .filter-grid { gap: 16px; }
.flag-filters { margin-top: 16px; padding-top: 16px; gap: 12px 20px; }
.user-admin-section { padding: 20px; background: var(--surface); }
.user-card { padding: 16px; }
.permission-grid { gap: 12px; }
.backup-section { padding: 20px; }
.backup-drop-zone { border-width: 1px; border-radius: 12px; }
.backup-catalog td::before { font-weight: 500; text-transform: none; }
.catalog-category-name { font-weight: 600; text-transform: none; }
.restore-table-list { border-radius: 10px; }
.row-actions-menu { border-radius: 10px; box-shadow: 0 12px 28px rgba(14, 31, 40, .16); }
.audit-data, .audit-related-item { border-radius: 10px; }
.audit-result { font-weight: 500; }
.kpi-grid { gap: 12px; margin: 24px 0; }
.kpi-grid article { padding: 20px; border-radius: 12px; }
.kpi-grid strong { color: var(--text); font-size: 28px; font-weight: 500; }
.kpi-grid.is-loading article::after { content: none; animation: none; }
.report-details { gap: 12px; padding: 20px; border: 1px solid var(--border); }
.report-actions { gap: 8px; margin-top: 20px; }

/* 8. The calendar is the product's visual moment. */
.calendar-section { gap: 16px; }
.calendar-toolbar, .calendar-status-filter { gap: 8px; }
.calendar-status-filter { padding: 12px 16px; border-radius: 12px; background: var(--surface); }
#calendar-root, #calendar-unscheduled { border-radius: 12px; box-shadow: var(--card-shadow); }
#calendar-root { padding: 12px; }
#calendar-unscheduled { padding: 16px; }
#calendar-unscheduled h3 { margin-bottom: 12px; font-weight: 500; }
.calendar-unscheduled-item { padding: 12px; border-radius: 8px; }
.calendar-view-switch button.active { background: var(--primary); box-shadow: none; }
:root[data-theme="dark"] .calendar-view-switch button.active { background: #0b607f; color: #fff; }
.calendar-day-summary { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); border-radius: 4px; }
.egfr-missing { animation: none; }
.egfr-pointer { transition: none; }

/* 9. Motion stays with feedback and respects reduced-motion settings. */
@media (prefers-reduced-motion: reduce) {
  button, input, select, textarea, .order-row, .toast { transition: none; }
}

@media (max-width: 1120px) {
  .management-actions #btn-create-order { margin-left: 0; }
}

@media (max-width: 860px) {
  header { min-height: 60px; padding: 8px 16px; }
  main { padding: 16px; }
  .control-panel { padding: 16px; }
  .search-filter-box #filter-search { min-width: 0; }
  .modal-body { padding: 20px; }
}

@media (max-width: 600px) {
  main { padding: 12px; }
  .control-panel { padding: 12px; margin-bottom: 16px; }
  .management-actions { margin-top: 12px; padding-top: 12px; }
  .bulk-orders, .advanced-filters { padding: 12px; }
  .login-container { padding: 16px; }
  .login-card { padding: 24px; }
  .modal-overlay { padding: 8px; }
  .modal { max-height: calc(100dvh - 16px); }
  .modal-header { min-height: 56px; padding: 12px 16px; }
  .modal-body { padding: 16px; }
  .modal-footer { padding: 12px 16px; flex-wrap: wrap; }
  .modal-footer button { min-height: 40px; }
  .kpi-grid { gap: 8px; }
  .kpi-grid article { padding: 16px; }
  .kpi-grid strong { font-size: 24px; }
  #calendar-root { padding: 4px; }
}