/* Shared dashboard surfaces; loaded after legacy page styles. */
.crm-dashboard, .doctor-dashboard {
    --doc-card-bg: var(--ui-surface);
    --doc-card-border: var(--ui-border);
    --doc-card-shadow: var(--ui-shadow);
    --doc-muted: var(--ui-text-muted);
    --doc-title: var(--ui-text);
    --doc-soft-bg: var(--ui-surface-muted);
    min-width: 0;
    overflow-wrap: anywhere;
}
.ui-panel, .crm-dashboard .dashboard-stat-card {
    background: var(--ui-surface);
    color: var(--ui-text);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    padding: 1rem;
    margin-bottom: 1rem;
}
.ui-heading, .ui-actions, .ui-period {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}
.ui-heading h1 { font-size: clamp(1.3rem, 3vw, 1.8rem); margin: 0; }
.ui-actions { justify-content: flex-start; margin-bottom: 1rem; }
.ui-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 1rem; }
.ui-kpi strong { display: block; font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.ui-kpi span, .ui-muted, .crm-dashboard .stat-label { color: var(--ui-text-muted); }
.crm-dashboard .stat-number { color: var(--ui-text); }
.ui-chart-row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(80px, 3fr) auto; align-items: center; gap: .75rem; margin: .6rem 0; }
.ui-chart-row meter { width: 100%; height: 1.5rem; accent-color: var(--ui-accent); }
.ui-empty { padding: 1.5rem; text-align: center; color: var(--ui-text-muted); background: var(--ui-surface-muted); border-radius: var(--ui-radius-sm); }
.crm-dashboard .table-responsive, .doctor-dashboard .table-responsive { max-width: 100%; }
.crm-dashboard table { min-width: 480px; }
.crm-dashboard .card-header, .doctor-dashboard .doc-card-header { flex-wrap: wrap; gap: .75rem; }
.crm-dashboard .activity-chart { background: var(--ui-surface-muted); }
.crm-dashboard .warning-item { background: var(--ui-warning-soft); color: var(--ui-text); }
:where(a, button, [tabindex]):focus-visible { outline: 3px solid var(--ui-accent, #557594) !important; outline-offset: 3px; }
/* Поля форм (input/select/textarea) исключены: у них уже есть фокус-рамка
   через box-shadow (unified-shell.css / main.css / Bootstrap), а outline давал
   вторую обводку. Явно гасим outline, чтобы обводка была одинарной. */
:where(input, select, textarea):focus-visible { outline: none !important; }
.sidebar :where(a, button):focus-visible { outline-color: white !important; outline-offset: -3px; }
/* --- Единственная фокус-рамка у полей форм --------------------------------
   Фокус поля раньше рисовал сразу две обводки: цветную рамку и яркое
   цветное «свечение» (box-shadow-кольцо; в светлой теме — светло-фиолетовое
   из dark-theme.css:481-487). Из-за этого вокруг поля появлялась вторая
   рамка. Оставляем только рамку, а кольцо заменяем мягкой нейтральной
   тенью без яркого цвета. Состояния валидации (.is-invalid/.is-valid)
   намеренно не трогаем. */
.form-control:not(.is-invalid):not(.is-valid):focus,
.form-select:not(.is-invalid):not(.is-valid):focus,
textarea:not(.is-invalid):not(.is-valid):focus,
select:not(.is-invalid):not(.is-valid):focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.is-invalid):not(.is-valid):focus,
.form-control:not(.is-invalid):not(.is-valid):focus-visible,
.form-select:not(.is-invalid):not(.is-valid):focus-visible,
textarea:not(.is-invalid):not(.is-valid):focus-visible,
select:not(.is-invalid):not(.is-valid):focus-visible,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.is-invalid):not(.is-valid):focus-visible {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    outline: none !important;
}
/* select2 (одиночный/мультивыбор и поле поиска) — то же: мягкая тень вместо
   цветного кольца. Покрываем обе используемые темы: --default и --bootstrap-5. */
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--multiple:focus-within,
.select2-container--default .select2-search__field:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5 .select2-selection--single:focus,
.select2-container--bootstrap-5 .select2-selection--multiple:focus-within,
.select2-container--bootstrap-5 .select2-search__field:focus {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}
@media (max-width: 768px) {
    .ui-period { width: 100%; }
    .ui-period select { flex: 1; width: auto; }
    .ui-actions .btn { flex: 1 1 140px; min-height: 44px; }
    .crm-dashboard.container-fluid { padding: 0 !important; }
    .doctor-dashboard .doc-widget { padding: .85rem; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}