*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #f1f5f9;
    --surface: #ffffff;
    --border: #e2e8f0;
    --text: #0f172a;
    --muted: #64748b;
    --primary: #059669;
    --primary-dark: #047857;
    --gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
    --radius: 12px;
    --shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px 48px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.topbar h1 {
    font-size: 1.35rem;
    font-weight: 700;
}

.topbar p {
    color: var(--muted);
    font-size: 0.92rem;
    margin-top: 4px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
}

.badge--system {
    background: #fef3c7;
    color: #b45309;
}

.badge--active {
    background: #d1fae5;
    color: #047857;
}

.badge--inactive {
    background: #fee2e2;
    color: #b91c1c;
}

/* Пометка недавно обновлённых данных */
.badge--updated {
    background: #dc2626;
    color: #fff;
    border: 1px solid #b91c1c;
}

.card--updated {
    border-left: 4px solid #dc2626;
    box-shadow: 0 0 0 1px #fecaca;
}

.update-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 16px;
    font-size: 0.85rem;
    color: #6b7280;
}

.update-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dc2626;
    flex: none;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.data-table th,
.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    text-align: left;
}

.data-table th {
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow);
}

.stat-card .label {
    color: var(--muted);
    font-size: 0.85rem;
}

.stat-card .value {
    font-size: 1.6rem;
    font-weight: 700;
    margin-top: 6px;
}

.stat-card--link {
    position: relative;
}

.stat-card__link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.stat-card__link:hover {
    text-decoration: underline;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.card h2 {
    font-size: 1.05rem;
    width: 100%;
}

.card p {
    color: var(--muted);
    font-size: 0.92rem;
}

.card-meta {
    font-size: 0.85rem;
    color: var(--muted);
}

.card-actions {
    margin-top: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 8px;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
    text-decoration: none;
}

.btn-secondary {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    text-decoration: none;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 24px;
}

.panel h2 {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.description-block {
    background: #ecfdf5;
    border-left: 4px solid #059669;
    padding: 14px 16px;
    border-radius: 0 8px 8px 0;
    margin-top: 12px;
    font-size: 0.92rem;
    color: var(--muted);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

th,
td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
}

input,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
}

textarea {
    min-height: 72px;
    resize: vertical;
}

.form-actions {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.admin-delete-form {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}

.btn-danger-outline {
    color: #b91c1c;
    border-color: #fecaca;
}

.btn-danger-outline:hover {
    background: #fef2f2;
    border-color: #f87171;
}

.notice {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
    padding: 14px 16px;
    border-radius: var(--radius);
    font-size: 0.92rem;
    margin-bottom: 24px;
}

.notice--phone {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.notice--phone a {
    display: inline-block;
    margin-top: 6px;
    font-weight: 600;
    word-break: break-all;
}

.notice-hint {
    display: block;
    margin-top: 8px;
    font-size: 0.85rem;
    opacity: 0.85;
}

.back-link {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 0.92rem;
}

/* Top navigation */
.top-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    width: 100%;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

/* Обёртка вокруг меню и выхода. На широком экране прозрачна — просто ряд,
   как было. На телефоне превращается в выпадающую панель. */
.top-nav__panel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    flex-wrap: wrap;
}

/* Бургер: три полоски. Виден только на телефоне, ниже в медиазапросе. */
.top-nav__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    cursor: pointer;
}
.top-nav__burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #475569;
}

.top-nav__menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    flex-wrap: wrap;
}

.top-nav__link {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    padding-bottom: 3px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.top-nav__link:hover {
    color: #334155 !important;
    text-decoration: none !important;
}

.top-nav__link--active {
    color: #0f172a !important;
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.top-nav__logout-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
    flex-shrink: 0;
}

.top-nav__logout {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: transparent;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.top-nav__logout:hover {
    color: #dc2626;
    text-decoration-color: #dc2626;
}

.directory-group {
    margin-bottom: 32px;
}

.directory-group__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--muted);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.directory-group .card h3 {
    font-size: 1.05rem;
    margin-bottom: 8px;
}

/* Profile */
.profile-card__main {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.profile-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #047857;
    font-size: 1.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 3px solid #fff;
    box-shadow: 0 2px 12px rgba(5, 150, 105, 0.15);
}

.profile-card__info h2 {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.profile-card__role {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.profile-details {
    display: grid;
    gap: 10px;
}

.profile-details__row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
    font-size: 0.9rem;
}

.profile-details dt {
    color: var(--muted);
    font-weight: 600;
}

.profile-details dd {
    margin: 0;
}

.profile-photo-hint {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}

.profile-admin-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.patient-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 14px;
}

.patient-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.patient-section__head h2 {
    margin: 0;
}

.patient-section__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bg);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.patient-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 10px;
}

.patient-search {
    flex: 1 1 220px;
    max-width: 420px;
}

.patient-search input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    background: white;
}

.patient-toolbar__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.patient-filter-hint,
.patient-empty-filter {
    margin: 0 0 8px;
}

.patient-blocks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.patient-block {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    overflow: hidden;
}

.patient-block[hidden] {
    display: none;
}

.patient-block--add {
    margin-top: 12px;
    border-style: dashed;
    background: #fafbfc;
}

.patient-block__summary {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.patient-block__summary::-webkit-details-marker {
    display: none;
}

.patient-block__title {
    font-weight: 600;
    color: #0f172a;
    min-width: 0;
}

.patient-block__meta {
    font-size: 0.82rem;
    color: var(--muted);
    white-space: nowrap;
}

.patient-block__chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.patient-block[open] .patient-block__chevron {
    transform: rotate(45deg);
}

.patient-block__body {
    padding: 0 14px 14px;
    border-top: 1px solid var(--border);
}

.patient-block__edit {
    padding-top: 14px;
    margin-bottom: 12px;
}

.patient-block__fields {
    margin-bottom: 10px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 640px) {
    .patient-block__summary {
        grid-template-columns: 1fr auto;
    }

    .patient-block__meta {
        grid-column: 1 / -1;
        white-space: normal;
    }
}

.patient-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.patient-card__head h3 {
    font-size: 1rem;
}

.patient-card__phone {
    font-size: 0.85rem;
    color: var(--muted);
}

.patient-visits-table {
    font-size: 0.85rem;
}

.patient-visits-table th,
.patient-visits-table td {
    padding: 8px 10px;
}

.profile-edit-form {
    margin-top: 12px;
}

.form-actions--inline {
    margin-top: 12px;
    margin-bottom: 0;
}

.patient-card__edit {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--border);
}

.patient-card__fields {
    margin-bottom: 10px;
}

.visit-add-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}

.visit-add-grid {
    margin-bottom: 10px;
}

.panel-nested {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.panel-nested h3 {
    font-size: 1rem;
    margin-bottom: 12px;
}

select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    background: var(--surface);
}

button {
    font-family: inherit;
}

/* Compact table buttons */
.btn-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.3;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

a.btn-mini:hover {
    text-decoration: none;
    background: #f1f5f9;
    border-color: #94a3b8;
    color: var(--text);
}

.btn-mini:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.btn-mini--active {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: var(--primary);
}

.btn-mini--danger {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fff;
}

.btn-mini--danger:hover {
    background: #fef2f2;
    border-color: #f87171;
}

.table-wrap {
    overflow-x: auto;
    margin-top: 12px;
}

.col-password {
    min-width: 160px;
}

.col-actions {
    min-width: 140px;
}

/* Legacy nav (kept for compatibility) */
.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.nav-link {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
}

.nav-link:hover {
    color: var(--text);
    background: var(--bg);
    text-decoration: none;
}

.nav-link--active {
    color: var(--primary);
    background: #ecfdf5;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-left: 10px;
    border-left: 1px solid var(--border);
}

.user-info {
    font-size: 0.85rem;
    color: var(--muted);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.82rem;
}

.btn-block {
    width: 100%;
}

/* Auth */
.auth-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
}

.auth-card h1 {
    font-size: 1.25rem;
}

.auth-subtitle {
    color: var(--muted);
    font-size: 0.92rem;
    margin-top: 4px;
    margin-bottom: 20px;
}

.auth-hint {
    margin-top: 16px;
    font-size: 0.82rem;
    color: var(--muted);
    text-align: center;
}

.form-field {
    margin-bottom: 14px;
}

.alert {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.alert--error {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    background: white;
}

/* Dashboard cards */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 8px;
}

.dashboard-stat {
    background: var(--bg);
    border-radius: 8px;
    padding: 12px 14px;
}

.dashboard-stat__label {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
}

.dashboard-stat__value {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    margin-top: 4px;
}

.dashboard-stat--highlight .dashboard-stat__value {
    color: var(--primary);
}

.dashboard-card--placeholder p {
    margin-top: auto;
}

.dashboard-card__action {
    margin-top: 12px;
    margin-bottom: 0;
}

/* Clickable dashboard cards */
.dashboard-grid {
    align-items: stretch;
}

.dashboard-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-card-link:hover {
    transform: translateY(-2px);
}

.dashboard-card-link:hover .card {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
    border-color: #cbd5e1;
}

.dashboard-card-link--muted {
    opacity: 0.92;
}

.dashboard-card-link .card {
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.dashboard-card-link__hint {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 500;
}

.dashboard-card-link:hover .dashboard-card-link__hint {
    color: var(--primary);
}

.dashboard-card .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Dashboard detail */
.dashboard-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.dashboard-stat--card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.dashboard-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.chart-panel h2 {
    font-size: 1rem;
    margin-bottom: 16px;
}

/* Funnel chart */
.chart-funnel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chart-funnel__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chart-funnel__label {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: #334155;
}

.chart-funnel__track {
    height: 10px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}

.chart-funnel__fill {
    height: 100%;
    background: linear-gradient(90deg, #059669, #10b981);
    border-radius: 999px;
    min-width: 4%;
}

/* Bar chart */
.chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    min-height: 180px;
    padding-top: 8px;
}

.chart-bars__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.chart-bars__bar-wrap {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.chart-bars__bar-wrap--stack {
    align-items: stretch;
}

.chart-bars__bar {
    width: 70%;
    max-width: 48px;
    border-radius: 6px 6px 2px 2px;
    min-height: 4px;
    transition: height 0.3s ease;
}

.chart-stack {
    width: 70%;
    max-width: 48px;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 6px;
    overflow: hidden;
}

.chart-stack__part--ok {
    background: #059669;
}

.chart-stack__part--bad {
    background: #ef4444;
}

.chart-bars__value {
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
}

.chart-bars__label {
    font-size: 0.72rem;
    color: var(--muted);
    text-align: center;
}

/* Donut chart */
.chart-donut-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.chart-donut {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.chart-donut__hole {
    position: absolute;
    inset: 22%;
    background: var(--surface);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chart-donut__total {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
}

.chart-donut__caption {
    font-size: 0.72rem;
    color: var(--muted);
}

.chart-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 160px;
}

.chart-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: #334155;
}

.chart-legend li strong {
    margin-left: auto;
}

.chart-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chart-legend__dot--ok {
    background: #059669;
}

.chart-legend__dot--bad {
    background: #ef4444;
}

.chart-legend--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--muted);
}

.chart-legend--inline span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Horizontal bars */
.chart-hbars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chart-hbars__row {
    display: grid;
    grid-template-columns: 120px 1fr 48px;
    align-items: center;
    gap: 10px;
}

.chart-hbars__label {
    font-size: 0.85rem;
    color: #475569;
}

.chart-hbars__track {
    height: 10px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}

.chart-hbars__fill {
    height: 100%;
    border-radius: 999px;
    min-width: 2%;
}

.chart-hbars__value {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
    color: #334155;
}

.hidden {
    display: none !important;
}

.hint {
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 6px;
}

/* Фраза «5 168 звонков — это 3 902 обращения» над карточками трафика. Это
   вывод блока, а не подпись к нему: набирать её размером подсказки — прятать
   ровно то, ради чего блок сделан. */
.traffic-lead {
    font-size: 1.05rem;
    color: var(--text);
    margin: 0 0 12px;
}

.hint--demo {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
}

.alert--success {
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.muted {
    color: var(--muted);
}

.password-cell {
    font-size: 0.88rem;
    background: #f8fafc;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

.password-cell--masked {
    color: var(--muted);
    user-select: none;
}

.password-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.password-row--inline {
    vertical-align: middle;
    margin-left: 4px;
}

.btn-icon-eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #f8f9fa;
    color: #495057;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.btn-icon-eye:hover {
    color: #2d6a4f;
    border-color: #2d6a4f;
    background: #e9f5ef;
}

.btn-icon-eye svg {
    width: 20px;
    height: 20px;
}

.btn-icon-eye.password-toggle--visible {
    color: #2d6a4f;
    border-color: #2d6a4f;
    background: #e9f5ef;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.btn-icon:hover {
    color: var(--primary);
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.btn-icon--sm {
    width: 28px;
    height: 28px;
}

.btn-icon--input {
    width: 36px;
    height: 36px;
}

.btn-icon--success {
    color: var(--primary);
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.btn-icon svg {
    width: 16px;
    height: 16px;
}

.password-toggle--visible {
    color: var(--primary);
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.action-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.input-with-btn,
.input-with-icon {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-with-btn input,
.input-with-icon input {
    flex: 1;
    min-width: 0;
}

.form-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.form-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.form-section__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    margin-bottom: 12px;
}

.form-field-full {
    margin-top: 0;
}

.form-field-full + .specialty-field {
    margin-top: 14px;
}

.specialty-field {
    margin-top: 14px;
}

.specialty-field[hidden] {
    display: none !important;
}

.form-section--password {
    margin-top: 24px;
}

.table-actions {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.inline-form {
    display: inline;
}

.form-span-2 {
    grid-column: span 2;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text);
    margin-top: 24px;
}

.form-section .checkbox-label {
    margin-top: 0;
}

.checkbox-label input {
    width: auto;
}

@media (max-width: 640px) {
    .form-span-2 {
        grid-column: span 1;
    }
}

.price-toolbar {
    margin-bottom: 20px;
}

.price-search {
    max-width: 420px;
}

.price-toolbar__hint {
    margin-top: 10px;
    margin-bottom: 0;
}

.price-groups {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.price-group__title {
    margin: 0 0 16px;
    font-size: 1.15rem;
}

.price-category + .price-category {
    margin-top: 20px;
}

.price-category__title {
    margin: 0 0 10px;
    font-size: 0.98rem;
    color: var(--muted);
}

.price-table-wrap {
    overflow-x: auto;
}

.price-table__col-price {
    width: 120px;
    white-space: nowrap;
    text-align: right;
}

.price-empty-filter {
    margin-top: 12px;
}

/* Дашборд «МедАнгел (демо)» */
.md-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 18px 0 24px;
}
.md-kpi {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
}
.md-kpi-label { font-size: 12px; color: #6b7280; }
.md-kpi-value { font-size: 26px; font-weight: 750; margin: 4px 0 2px; letter-spacing: -0.01em; color: #0b0b0b; }
.md-kpi-sub { font-size: 11px; color: #9ca3af; }
.md-bar-row {
    display: grid;
    grid-template-columns: 160px 1fr 72px;
    align-items: center;
    gap: 10px;
    margin: 7px 0;
}
.md-bar-label {
    font-size: 12.5px;
    color: #52514e;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.md-bar-track { background: #f0efec; border-radius: 5px; height: 20px; overflow: hidden; }
.md-bar-fill { height: 100%; border-radius: 5px; min-width: 3px; }
.md-bar-val { font-size: 12.5px; font-weight: 700; color: #0b0b0b; }
.md-note { font-size: 12px; color: #86857f; margin-top: 12px; }

/* Справочники — Этап 2: тулбар, правка, импорт/экспорт */
.dir-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.dir-toolbar #directory-search {
    flex: 1 1 260px;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
}
.dir-toolbar #directory-status-filter {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
}
.dir-toolbar__spacer { flex: 1 1 auto; }
.dir-import { display: inline; margin: 0; }
/* Ячейка действий — обычная ячейка таблицы.
   07.09.2026 владелец: «нажал деактивировать и правая колонка полетела
   далеко». `display: flex` на <td> выключает ячейку из колоночной модели:
   браузер подставляет анонимную ячейку, столбец перестаёт считаться вместе
   с остальными, и от него тянется лишняя черта. Раньше в ячейке лежали три
   кнопки в ряд и flex был к месту, теперь там одна кнопка «⋮».
   `width: 1%` — способ сказать «шириной по содержимому»: остаток ширины
   уходит соседним столбцам, и кнопка стоит вплотную к статусу. */
/* Статус и действия жмутся к правому краю по содержимому, свободная
   ширина достаётся имени и филиалу: значок «⋮» должен стоять рядом со
   статусом, а не улетать от него через полстраницы. */
/* min-width: max-content — против обрезки. Обёртка `.fold__in` несёт
   `overflow: hidden` ради плавного сворачивания, а элемент с обрезкой не
   сообщает наружу свою минимальную ширину: она считается нулевой. Вместе
   с `width: 1%` это давало столбец уже содержимого — значок «АКТИВЕН»
   резало справа. Здесь и в действиях содержимое и так не переносится,
   поэтому max-content безопасен; остальным столбцам его ставить нельзя —
   длинные названия перестанут переноситься. */
.cell-status { width: 1%; white-space: nowrap; }
.row-actions { width: 1%; white-space: nowrap; text-align: right; }
.row-actions form { margin: 0; }
.btn-danger {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #f0b4b4;
}
.btn-danger:hover { background: #fecaca; }
.edit-row > td { background: #f8fafc; }
.inline-edit {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding: 6px 2px;
}
.inline-edit input {
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
}
.inline-edit input[name="item_name"],
.inline-edit input[name="comment"] { flex: 1 1 200px; }
.import-report {
    margin: 14px 0;
    padding: 12px 16px;
    border-radius: 10px;
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-size: 14px;
}
.import-report--warn { background: #fef3c7; border-color: #f0d98a; color: #92400e; }
.import-report ul { margin: 8px 0 0; padding-left: 18px; }
/* Полка направлений в справочнике врачей: свести врача к направлению просили
   на разборе 20.08.2026 — «сколько к лору записалось вообще», а не по услуге. */
.specialty-shelf__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.specialty-shelf__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
        border: 1px solid #d7dce5; border-radius: 999px; background: #fff;
        color: #2c3444; text-decoration: none; font-size: 13px; line-height: 1.5; }
.chip:hover { border-color: #9fb0cc; }
.chip b { font-weight: 600; color: #5b6b86; }
.chip--on { background: #2a78d6; border-color: #2a78d6; color: #fff; }
.chip--on b { color: #dbe8fa; }
.chip--sm { padding: 2px 8px; font-size: 12px; }

/* Служебные справочники строками: короткий перечень не должен весить столько
   же, сколько 46 врачей. Просьба владельца 21.08.2026 — «прижать таблицей». */
.dir-compact { width: 100%; border-collapse: collapse; }
.dir-compact tr { border-bottom: 1px solid #eef1f6; }
.dir-compact tr:last-child { border-bottom: none; }
.dir-compact td { padding: 9px 12px 9px 0; vertical-align: middle; }
.dir-compact__name a { color: #2c3444; text-decoration: none; font-weight: 500; }
.dir-compact__name a:hover { color: #2a78d6; text-decoration: underline; }
.dir-compact__count { width: 60px; color: #5b6b86; font-variant-numeric: tabular-nums; }
.dir-compact__code { width: 200px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }

/* Фильтр учётных записей по роли — админка. Служебные роли идут первыми,
   врачей 46 из 53, и без фильтра список читается плохо. */
.role-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .75rem 0 1rem;
}

.role-filter {
    border: 1px solid var(--border, #d8d8d8);
    background: transparent;
    border-radius: 999px;
    padding: .3rem .8rem;
    font: inherit;
    font-size: .88rem;
    color: inherit;
    cursor: pointer;
    line-height: 1.4;
}

.role-filter:hover {
    border-color: var(--accent, #c30013);
}

.role-filter span {
    opacity: .55;
    font-variant-numeric: tabular-nums;
    margin-left: .25rem;
}

.role-filter.is-active {
    background: var(--accent, #c30013);
    border-color: var(--accent, #c30013);
    color: #fff;
}

.role-filter.is-active span {
    opacity: .75;
}

/* Несопоставленные линии колл-трекинга: строка видна, но помечена — прятать
   её нельзя, иначе неполная картина выглядит полной. */

/* Таблицы дашбордов. Тема приложения светлая — цвета берём из палитры
   :root, а не придумываем. 24.08.2026 я по ошибке принёс сюда тёмные
   подложки из доски задач, и на белом фоне получилась чересполосица. */
.data-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.data-table th {
    text-align: left;
    font-weight: 600;
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.data-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
/* Заголовок числовой колонки обязан стоять над своими числами. Без этой
   строки подписи жались влево, а значения вправо — колонки «съезжали».
   Правило то же, что и у ячеек: первая колонка текстовая, остальные числа. */
.data-table th:not(:first-child) { text-align: right; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #f8fafc; }

/* Числа — моноширинные и по правому краю: иначе разряды не сравнить взглядом. */
.data-table td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.cell--phone { font-family: ui-monospace, Menlo, monospace; color: var(--text); }
.cell--warn { color: var(--warning); font-weight: 600; }

/* Строка, требующая внимания: подсветка мягкая, читаемость не страдает. */
.row--unmapped td { background: #fffbeb; }
.row--unmapped td:first-child { color: var(--warning); }

/* Блок «источник не подключён»: пунктир отличает его от блоков с данными. */
.panel--pending { border: 1px dashed var(--border); background: #fbfdff; }
.panel--pending h2 { color: var(--muted); }

/* Полоска объёма в таблице по часам: доля от пикового часа. Глазом ряд чисел
   не читается, а форма нагрузки видна сразу. */
.cell--bar { width: 120px; padding-right: 0 !important; }
.cell--bar span { display: block; height: 8px; border-radius: 4px; background: var(--primary); opacity: .55; }

/* Сворачиваемые разделы дашборда и поле-интервал дат. */


details.fold { border-top: 1px solid var(--border); }
details.fold:last-of-type { border-bottom: 1px solid var(--border); }
details.fold > summary {
    display: flex; align-items: baseline; gap: .6rem;
    padding: .8rem .2rem; cursor: pointer; list-style: none; font-weight: 600;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; opacity: .45; font-weight: 400; }
details.fold[open] > summary::before { content: "▾"; }
.fold__count { margin-left: auto; font-weight: 400; color: #888; font-size: .9rem; }
.fold__body { padding: 0 0 1.1rem .2rem; }
.cell--muted { color: #888; }

/* Календарь-интервал. Полоса между датами — залитый фон у промежуточных дней,
   у краёв она скруглена только снаружи, чтобы читалась как одна лента. */
.cal { position: relative; display: inline-block; }
.cal__trigger {
    font: inherit; background: #fff; border: 1px solid var(--border);
    border-radius: 8px; padding: .45rem .8rem; cursor: pointer;
}
.cal__trigger:hover { border-color: var(--accent, #c30013); }
.cal__pop {
    position: absolute; z-index: 30; top: calc(100% + .4rem); left: 0;
    background: #fff; border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.12); padding: .7rem; width: 17.5rem;
}
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.cal__month { font-weight: 600; text-transform: capitalize; }
.cal__nav { border: 0; background: transparent; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: .2rem .5rem; color: #555; }
.cal__nav:hover { color: var(--accent, #c30013); }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__dow span { text-align: center; font-size: .72rem; color: #999; padding-bottom: .25rem; }
.cal__day {
    border: 0; background: transparent; font: inherit; cursor: pointer;
    padding: .35rem 0; text-align: center; border-radius: 0;
}
.cal__day:hover { background: #f0f0f0; }
.cal__day.is-inside { background: #fde8ea; }
.cal__day.is-edge { background: var(--accent, #c30013); color: #fff; }
.cal__day.is-start { border-radius: 6px 0 0 6px; }
.cal__day.is-end { border-radius: 0 6px 6px 0; }
.cal__day.is-start.is-end { border-radius: 6px; }
.cal__hint { margin: .5rem 0 0; font-size: .78rem; color: #999; }

/* Пресеты периода: три небольшие кнопки вместо выпадающего списка. */
.periods { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.periods__btn {
    font: inherit; font-size: .88rem; background: #fff; border: 0;
    border-right: 1px solid var(--border); padding: .4rem .75rem; cursor: pointer; color: #333;
}
.periods__btn:last-child { border-right: 0; }
.periods__btn:hover { background: #f5f5f5; }
.periods__btn.is-on { background: var(--accent, #c30013); color: #fff; }

/* Строка фильтров: пресеты, источник и календарь в один ряд, календарь
   раскрывается под ними. Кнопки «Показать» нет — и пресеты, и выбор дат
   отправляют форму сами. */
.dash-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.dash-filters__row .filter-inline {
    display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: #555;
}
.dash-filters__row .filter-inline select {
    font: inherit; padding: .38rem .5rem; border: 1px solid var(--border);
    border-radius: 8px; background: #fff; max-width: 15rem;
}

/* Четыре главных числа блока звонков. Крупная цифра, короткая подпись,
   пояснение мелким — чтобы не приходилось гадать, что это значит. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin: .2rem 0 1.2rem; }
.tile { border: 1px solid var(--border); border-radius: 10px; padding: .9rem 1rem; background: #fff; }
.tile__value { display: block; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile__label { display: block; font-weight: 600; margin: .25rem 0 .3rem; }
.tile__note { display: block; font-size: .8rem; line-height: 1.35; color: #777; }
.tile--good .tile__value { color: #2e9e5b; }
.tile--bad .tile__value { color: #c30013; }
.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Длинные таблицы в раскрывающихся разделах: показываем первые строки. */
tr.row--capped { display: none; }
.table-more {
    margin: .4rem 0 0; padding: .35rem .8rem; font: inherit; font-size: .88rem;
    background: transparent; border: 1px solid var(--border); border-radius: 8px;
    cursor: pointer; color: #555;
}
.table-more:hover { border-color: var(--accent, #c30013); color: var(--accent, #c30013); }

/* Номер и время не должны переноситься: «+7 905 ***-91-» и «21» на разных
   строках читаются как два разных номера. */
.cell--phone, .data-table td:nth-child(2) { white-space: nowrap; }

/* Логотип клиники в шапке. Продукт внутренний, и принадлежность должна
   читаться с первого взгляда, а не из заголовка вкладки. */
.top-nav__brand { display: inline-flex; align-items: center; margin-right: auto; flex: none; }
.top-nav__brand img { display: block; height: 34px; width: auto; }
@media (max-width: 720px) {
    .top-nav__brand { margin-right: auto; }
    .top-nav__brand img { height: 26px; }
}

/* Панель выгрузки внизу дашборда: пояснение слева, кнопка справа. */
.export-panel{display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-top:24px}
.export-panel h2{margin:0 0 4px}
.export-panel .hint{margin:0;max-width:62ch}

/* Первый заход: приглашение выбрать условия вместо готового отчёта. */
.pick{max-width:70ch}
.pick__list{margin:12px 0;padding-left:20px;line-height:1.7}
.pick__list li{margin-bottom:4px}

/* Тонкая настройка: второй и третий ряды панели фильтров. */
.dash-filters__row--fine{margin-top:10px;flex-wrap:wrap;gap:12px}
.dash-filters__row--multi{margin-top:12px;align-items:flex-end;gap:18px;flex-wrap:wrap}
.filter-multi{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600}
.filter-multi select{min-width:230px;padding:4px}
.filter-multi .hint{font-weight:400;margin:0}
.filter-reset{padding-bottom:4px}

/* Сочетание фильтров, которое всегда даёт пусто. */
.warn{margin:10px 0 0;padding:8px 12px;border-radius:8px;font-size:13px;
  background:#fdf3e7;border:1px solid #f0d3a8;color:#7a4a12}

/* Предупреждение, что показана выборка, а не всё. */
.scope{margin:-4px 0 14px;padding:8px 12px;border-radius:8px;font-size:13px;
  background:#eef4fb;border:1px solid #cfe0f2;color:#28527a}
.tile--muted .tile__value{color:#9aa4b2}

/* ── Панель отбора: все поля одного вида ──
   Раньше здесь соседствовали кнопки, списки и боксы с прокруткой. Разнобой
   заставлял каждый раз соображать, как взаимодействовать с полем. Теперь
   сетка одинаковых карточек: подпись сверху, контрол снизу, высота общая. */
/* Полоса чипов (T-061). Отбор занимает место по количеству ВЫБРАННОГО, а не
   по количеству возможного: раньше одиннадцать полей ели четверть первого
   экрана, из них восемь сообщали «я ничего не ограничиваю».

   Подписи над полями в полосе убраны намеренно: «Все филиалы», «Любой исход»,
   «Все каналы» называют себя сами. В дополнительных подписи ОСТАЮТСЯ —
   там есть «Неважно», которое без подписи не значит ничего.

   Больше 6–8 фильтров горизонтальная полоса не держит (разборы паттернов
   фильтрации), поэтому на виду пять, остальное за «+ фильтр». */
/* Свёрнутое поле есть в разметке, но не показано: раскрытие должно быть
   мгновенным, без похода на сервер. */
.is-folded{display:none}

/* Мягкая смена страницы вместо мигания. Отбор уходит обычной формой GET —
   значит каждый выбор это переход, и браузер честно перерисовывает всё с
   белой вспышкой. Одно правило превращает переход в плавное растворение;
   там, где браузер этого не умеет, всё работает как раньше. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

.filters__row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters__row .f{flex-direction:row;align-items:center;gap:0}
.filters__row .f__name{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.filters__row .f__control{width:auto;border-radius:999px;padding:0 14px;height:36px}
.filters__row .f__control--plain{padding:0}
/* Кнопки периода в полосе — по содержимому, а не равными долями. `flex:1`
   из сетки делил ширину поровну, и «2 недели» переносилось внутрь кнопки
   высотой 36 px: вторая строка обрезалась, оставалась «2». */
.filters__row .periods__btn{flex:0 0 auto;white-space:nowrap;padding:0 12px}
.filters__row .cal{grid-column:auto}

/* Выбранное подсвечено и читается с одного взгляда. Правило T-061:
   применённый отбор виден ВСЕГДА — иначе человек делает выводы по числам,
   отобранным по тому, чего он не видит. */
.f__control.is-set{border-color:#059669;background:#ecfdf5;color:#047857;
  font-weight:600}
.f__control.is-set:hover{border-color:#047857}
.filters__row .f__more{border-style:dashed;color:#5b6b7f}

/* Крестик снимает ОДИН отбор. Общий сброс уже был, но он убирает всё сразу,
   а спрашивают обычно «а без филиала?» — при сохранённом периоде, исходе и
   канале. Пересобирать отбор заново после каждого такого вопроса и есть та
   работа, ради избавления от которой затевалась переделка. */
.chip-x{margin-left:-8px;margin-right:2px;padding:0 8px 0 4px;height:36px;
  display:inline-flex;align-items:center;color:#047857;text-decoration:none;
  font-size:13px;line-height:1;border:1px solid #059669;border-left:0;
  border-radius:0 999px 999px 0;background:#ecfdf5}
.chip-x:hover{background:#d1fae5;color:#065f46}
.filters__row .f__control.is-set{border-right:0;border-radius:999px 0 0 999px;
  padding-right:8px}
/* У настроенного чипа стрелка списка убрана: рядом стоит крестик, и вдвоём
   они читаются как мусор в углу. Стрелка нужна там, где отбор ещё не сделан
   и её задача — позвать открыть список; у заполненного чипа эту роль играет
   само значение. */
.filters__row select.f__control.is-set{appearance:none;-webkit-appearance:none;
  background-image:none}
/* В дополнительных поле устроено иначе: подпись сверху, контрол снизу,
   колонка. Крестик там становился ТРЕТЬЕЙ строкой и растягивался на всю
   ширину — зелёный прямоугольник под полем (владелец 07.09.2026: «зелёные
   прямоугольники слетают… на первом вообще умер»). Виновата не разметка:
   в колоночном флексе дочерний элемент по умолчанию тянется поперёк оси.

   Поэтому здесь крестик снимается с потока и прижимается к правому краю
   самого поля, а не строки. `bottom:0` попадает точно на контрол, потому что
   он последний в колонке. */
.filters__grid--extra .f{position:relative}
.filters__grid--extra .chip-x{position:absolute;right:0;bottom:0;height:38px;
  border-radius:0 8px 8px 0;margin:0;padding:0 10px}
.filters__grid--extra .f__control.is-set{border-radius:8px 0 0 8px;
  padding-right:34px}

/* Телефон: полоса переносится, но не превращается в столбец из одиннадцати
   полей — в этом и был смысл переделки (см. T-053, T-056). */
@media (max-width:720px){
  .filters__row{gap:6px}
  .filters__row .f__control{height:34px;padding:0 12px;font-size:13px}
  .filters__row .cal .f__control{width:100%}
}

.filters__grid{display:grid;gap:12px 16px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.f{display:flex;flex-direction:column;gap:4px;min-width:0}
.f__name{font-size:12px;font-weight:600;color:#5b6b7f;letter-spacing:.01em}
.f__control{height:38px;padding:0 10px;border:1px solid #cfd8e3;border-radius:8px;
  background:#fff;font:inherit;font-size:14px;color:#1f2937;width:100%;
  text-align:left;cursor:pointer;appearance:auto}
.f__control:hover{border-color:#9db3cc}
.f__control:focus{outline:2px solid #1f6feb;outline-offset:1px}
.f__control:disabled{color:#9aa4b2;background:#f5f7fa}
/* Календарь — единственное поле не-списком: интервал дат списком не выбрать.
   Выглядит как остальные, поэтому в общем ряду не выделяется. */
.cal{position:relative}
.filters__foot{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;margin:14px 0 0;font-size:13px;color:#5b6b7f}
.filters__reset{white-space:nowrap}
/* Кнопки периода внутри общей сетки: тот же рост и рамка, что у списков,
   но без стрелки — это не выбор из списка, а три быстрых кнопки. */
.f__control--plain{display:flex;padding:0;gap:0;overflow:hidden;cursor:default}
.f__control--plain .periods__btn{flex:1;border:0;border-right:1px solid #cfd8e3;
  background:#fff;font:inherit;font-size:13px;cursor:pointer;color:#334}
.f__control--plain .periods__btn:last-child{border-right:0}
.f__control--plain .periods__btn.is-on{background:#d42427;color:#fff}
/* Календарь: интервал дат не должен переноситься на две строки и распирать
   ряд. Ячейка шире соседних, текст в одну строку и мельче при нехватке места. */
.filters__grid .cal{grid-column:span 2}
.cal__trigger{display:flex;align-items:center}
.cal__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-variant-numeric:tabular-nums}
@media (max-width:900px){.filters__grid .cal{grid-column:span 1}}

/* ── Каскад отбора и списки с галочками ──
   Одиннадцать полей на первом экране — одиннадцать решений до первого числа.
   Видны период, даты и филиал; остальное открывается кнопкой «+ поле». */
.f__more{display:flex;align-items:center;justify-content:center;gap:6px;
  border-style:dashed;color:#5b6b7f;font-size:13px;background:#fbfcfe}
.f__more:hover{border-color:#9db3cc;color:#1f2937}
/* Дополнительные — отдельным рядом под основным, с отбивкой: это не
   продолжение цепочки, а склад редко нужного. */
.filters__grid--extra{margin-top:12px;padding-top:12px;border-top:1px dashed #e1e8f0}
.filters__extra{border:0;background:transparent;font:inherit;font-size:13px;
  color:#5b6b7f;cursor:pointer;padding:0;text-decoration:underline dotted}
.filters__extra:hover{color:#1f2937}

/* Список с галочками: устройство и вид те же, что у календаря. */
.ms{position:relative}
.ms__trigger{display:flex;align-items:center}
.ms__value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms__pop{position:absolute;z-index:30;top:100%;left:0;margin-top:6px;
  min-width:240px;max-width:340px;background:#fff;border:1px solid #cfd8e3;
  border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.12);padding:8px}
/* Каналов тринадцать, и в один экран телефона они не встают: прокрутка
   внутри карточки, а не растянутая на всю страницу панель. */
.ms__list{max-height:260px;overflow-y:auto;display:flex;flex-direction:column}
.ms__item{display:flex;align-items:center;gap:8px;padding:6px 8px;
  border-radius:6px;font-size:14px;cursor:pointer}
.ms__item:hover{background:#f4f7fb}
/* Ширину и отступы гасим явно: глобальное `input,textarea{width:100%}`
   (строка ~333, живёт с 20.08.2026) растягивает галочку на всю ширину списка,
   и подпись канала выезжает за границу — список выглядит как столбец пустых
   квадратиков. Владелец 07.09.2026: «а что тут должно быть?». Ошибка жила со
   дня появления списков с галочками (26.08), просто никто их не открывал. */
.ms__item input{margin:0;flex:none;width:auto;padding:0}
.ms__foot{display:flex;justify-content:space-between;align-items:center;
  gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid #eef2f7}
.ms__clear{border:0;background:transparent;font:inherit;font-size:13px;
  color:#5b6b7f;cursor:pointer;padding:4px}
.ms__clear:hover{color:#1f2937}
.ms__apply{border:1px solid #d42427;background:#d42427;color:#fff;font:inherit;
  font-size:13px;padding:6px 14px;border-radius:8px;cursor:pointer}
.ms__apply:hover{background:#b81f22;border-color:#b81f22}

/* ── Телефон: 720 пикселей и уже ──
   Дашборды верстались под широкий экран, и владелец 01.09.2026 сказал прямо:
   «с телефона пока тяжело смотреть». Разъезжаются в первую очередь таблицы —
   их на витринах больше десятка: каналы, операторы, дни, часы, корзины
   ожидания, скорость перезвона.

   Выбран горизонтальный прокрут внутри таблицы, а не перестроение строк в
   карточки. Причина: числа в этих таблицах читают СРАВНИВАЯ — «в десять
   утра SLA просел, а в одиннадцать нет». Карточки такое сравнение убивают,
   потому что соседние значения оказываются на разных экранах.

   Правки только в css: шаблоны не тронуты, откатить можно одним куском. */
@media (max-width: 720px) {
    .layout { padding: 16px 12px 32px; }
    .panel { padding: 14px; border-radius: 10px; }

    /* Таблица прокручивается сама, без обёртки в разметке. display:block
       нужен именно для этого: у table прокрутка не работает. */
    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Полоса прокрутки видна всегда: иначе человек не догадается, что
           таблицу можно тянуть, и решит, что колонки обрезаны. */
        scrollbar-width: thin;
    }
    .data-table th,
    .data-table td {
        padding: 9px 8px;
        white-space: nowrap;
    }

    /* Тень у правого края — единственный намёк, что таблицу можно тянуть.
       На телефоне полоса прокрутки прячется до касания, и без этой подсказки
       колонки выглядят обрезанными, а не уехавшими.

       Приём известный: две пары градиентов, «крышки» цвета фона прокручиваются
       вместе с содержимым (attachment: local) и закрывают тени, когда таблица
       домотана до края. То есть тень видна ровно тогда, когда есть куда
       мотать, — и исчезает сама. */
    .data-table {
        background:
            linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)) left center,
            linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) right center,
            radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .13), transparent) left center,
            radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .13), transparent) right center;
        background-repeat: no-repeat;
        background-size: 30px 100%, 30px 100%, 13px 100%, 13px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    /* Первая колонка примерзает к краю: при прокрутке вправо видно, к чему
       относится число. Без неё через две колонки уже непонятно, чей это час
       и какой оператор. */
    .data-table th:first-child,
    .data-table td:first-child {
        position: sticky;
        left: 0;
        background: var(--surface);
        /* Тень отделяет примёрзшую колонку от уезжающих под неё. */
        box-shadow: 1px 0 0 var(--border);
        z-index: 1;
    }
    .data-table tr:hover td:first-child { background: #f8fafc; }

    /* Плитки сводки: по две в ряд вместо трёх-четырёх. Одна на всю ширину
       выглядит пустой, три не помещаются и обрезают подписи. */
    .dashboard-summary {
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
        gap: 8px;
    }
    .dashboard-stat__value { font-size: 1.35rem; }

    /* Панель отбора: поля в одну колонку, календарь не растягивается на два
       столбца — растягивать не на чем. */
    .filters__grid { grid-template-columns: 1fr; gap: 10px; }
    .filters__grid .cal { grid-column: span 1; }
    /* Шторка снизу вместо всплывающей карточки. На 390 px карточка, привязанная
       к кнопке, либо вылезает за экран, либо ужимается до нечитаемой — а выбор
       каналов это тринадцать строк. Разборы паттернов советуют для телефона
       ровно это: панель на всю ширину, выезжающая снизу.

       `position:fixed` и `inset:auto 0 0 0` отвязывают карточку от кнопки:
       она больше не пытается поместиться рядом с чипом. */
    .ms__pop, .cal__pop {
        position: fixed;
        inset: auto 0 0 0;
        min-width: 0;
        max-width: none;
        width: 100%;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -8px 30px rgba(15, 23, 42, .18);
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        z-index: 40;
    }
    .ms__list { max-height: 46vh; }
    /* Кнопки шторки крупнее: попасть пальцем в 28 px нельзя. */
    .ms__item { padding: 10px 12px; }
    .ms__apply, .ms__clear { min-height: 40px; }

    /* Подвал панели отбора: ссылка сброса под текстом, а не рядом. */
    .filters__foot { gap: 8px; }

    /* Выгрузка: кнопка под пояснением, а не сбоку — иначе текст сжимается
       в столбик из двух слов. */
    .export-panel { flex-direction: column; align-items: flex-start; gap: 12px; }

    .topbar { flex-wrap: wrap; gap: 8px; }
    h1 { font-size: 1.35rem; }

    /* Меню строкой не помещается и переносится на вторую строку, съедая
       экран под самой нужной частью страницы. Прячем за бургер справа. */
    .top-nav { gap: 12px; flex-wrap: nowrap; }
    .top-nav__burger { display: flex; flex: none; }

    .top-nav__panel {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 40;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 200px;
        padding: 8px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
    }
    .top-nav { position: relative; }
    .top-nav.is-open .top-nav__panel { display: flex; }

    /* Пункты в столбик и во всю ширину панели: попасть пальцем в строку
       высотой в текст трудно, поэтому у каждой своя площадь нажатия. */
    .top-nav__menu { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
    .top-nav__link, .top-nav__logout {
        display: block;
        width: 100%;
        padding: 10px 10px;
        border-radius: 8px;
        border-bottom: none;
        text-align: left;
    }
    .top-nav__link--active { background: #eef2f7; }
    .top-nav__logout-form { width: 100%; }

    /* Примёрзшая колонка занимала слишком много: владелец 02.09.2026 —
       «листаю и не видно что вообще написано». Причина в nowrap: длинное
       название канала растягивало столбец на пол-экрана, и на числа места
       не оставалось. Разрешаем перенос и ограничиваем ширину: текст виден
       целиком, но в две строки, а не в одну длинную. */
    .data-table th:first-child,
    .data-table td:first-child {
        /* Перенос по пробелам вместо одной длинной строки: «Оториноларинголог
           (ЛОР)» ляжет в две строки и перестанет занимать пол-экрана. */
        white-space: normal;
        max-width: 34vw;
        /* Минимум обязателен. Без него браузер сжимает столбец до одного
           символа, и «06:00» встаёт вертикально по букве в строке — поймано
           на первом снимке. word-break здесь тоже нельзя: он рвёт даже там,
           где переносить нечего. */
        min-width: 5rem;
    }
}


/* Строка справочника. Фона нет: подсветка «недавно изменено» была красной и
   загоралась на всех строках сразу после синхронизации — красный читается как
   ошибка, а сообщение «изменено везде» не сообщает ничего. Осталась только
   реакция на наведение, чтобы глаз не терял строку по горизонтали. */
#directory-items-body tr[data-directory-row]:hover { background: #f0fdf4; }

/* Действия строки: одна кнопка, меню по нажатию. */
.row-menu { position: relative; display: inline-block; }
.row-menu__btn {
    border: 1px solid transparent; background: none; cursor: pointer;
    font-size: 18px; line-height: 1; color: #94a3b8;
    padding: 2px 9px; border-radius: 6px;
}
.row-menu__btn:hover, .row-menu__btn[aria-expanded="true"] {
    background: #f1f5f9; color: #0f172a; border-color: #e2e8f0;
}
.row-menu__list {
    position: absolute; right: 0; top: 100%; z-index: 30; min-width: 190px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 9px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12); padding: 5px;
}
.row-menu__list form { margin: 0; }
.row-menu__item {
    display: block; width: 100%; text-align: left; border: 0; background: none;
    font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 6px;
    cursor: pointer; color: #0f172a;
}
.row-menu__item:hover { background: #f1f5f9; }
/* Удаление отделено чертой и цветом: соседство с «Изменить» делало его таким
   же обычным действием, хотя на элемент справочника ссылаются визиты. */
.row-menu__item--danger { color: #dc2626; border-top: 1px solid #f1f5f9; border-radius: 0 0 6px 6px; }
.row-menu__item--danger:hover { background: #fef2f2; }


/* Заголовок группы направлений в справочнике врачей. Не «ещё один фильтр», а
   структура: таблица сразу разложена, отбирать нечего. */
.group-row > td { background: #f8fafc; padding: 7px 10px; border-top: 1px solid #e2e8f0; }
.group-row__toggle {
    border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700;
    color: #334155; cursor: pointer; padding: 2px 4px; border-radius: 5px;
    display: inline-flex; align-items: center; gap: 8px;
}
.group-row__toggle:hover { background: #eef2f7; }
.group-row__toggle::before { content: "▾"; font-size: 10px; color: #94a3b8; }
.group-row__count {
    font-weight: 600; font-size: 11.5px; color: #64748b;
    background: #e2e8f0; border-radius: 10px; padding: 1px 7px;
}


/* Сворачивание группы направлений.

   Высоту ячейки таблицы анимировать нельзя: у `display: table-cell` высота —
   это минимум, а не размер. Поэтому анимируется блок внутри ячейки:
   grid-template-rows от 1fr к 0fr, содержимое обрезается по нему. Отступы,
   черта снизу и прозрачность едут тем же темпом, иначе от свёрнутой строки
   остаётся полоска в пару пикселей, а от семи — заметная лесенка. */
#directory-items-body td > .fold {
    display: grid; grid-template-rows: 1fr;
    transition: grid-template-rows .22s ease, opacity .16s ease;
}
#directory-items-body td > .fold > .fold__in { overflow: hidden; min-height: 0; }
#directory-items-body tr[data-directory-row] > td {
    transition: padding-top .22s ease, padding-bottom .22s ease, border-bottom-width .22s ease;
}
#directory-items-body tr.row--folded > td {
    padding-top: 0; padding-bottom: 0; border-bottom-width: 0;
}
#directory-items-body tr.row--folded > td > .fold { grid-template-rows: 0fr; opacity: 0; }

/* Стрелка заголовка поворачивается, а не подменяется другим знаком: подмена
   символа — это скачок, а тут всё едет. */
.group-row__toggle::before { transition: transform .22s ease; }
.group-row__toggle[aria-expanded="false"]::before { transform: rotate(-90deg); }

@media (prefers-reduced-motion: reduce) {
    #directory-items-body td > .fold,
    #directory-items-body tr[data-directory-row] > td,
    .group-row__toggle::before { transition: none; }
}


/* Заголовок-кнопка. Выглядит как обычный заголовок, пока на него не навели:
   таблицу читают в сотню раз чаще, чем сортируют, и шапка не должна пестреть
   кнопками. Стрелка появляется только у столбца, по которому сортируют. */
.th-sort {
    border: 0; background: none; padding: 0; cursor: pointer;
    font: inherit; color: inherit; text-transform: inherit;
    letter-spacing: inherit; font-weight: inherit;
    display: inline-flex; align-items: center; gap: 5px;
}
.th-sort:hover { color: #0f172a; }
.th-sort::after { content: "↕"; font-size: 10px; color: #cbd5e1; opacity: 0; }
.th-sort:hover::after { opacity: 1; }
.th-sort[aria-sort]::after { opacity: 1; color: #0f766e; }
.th-sort[aria-sort="ascending"]::after { content: "↑"; }
.th-sort[aria-sort="descending"]::after { content: "↓"; }


/* Описание в карточке справочника — три строки. У «Источников пациентов»
   оно на шесть строк, и карточка растягивала весь ряд: рядом с ней «Филиалы»
   стояли с ладонью пустоты снизу. Полный текст никуда не делся — он на самой
   странице справочника и в подсказке при наведении. */
.card-note {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}


/* Ширину требуем у самой обёртки, а не у ячейки. Ячейке ставить бесполезно:
   её max-content считается по содержимому, а содержимое — блок с обрезкой,
   он сообщает наружу ноль. Здесь содержимое не переносится, поэтому
   max-content безопасен; остальным столбцам его ставить нельзя — длинные
   названия перестанут переноситься и разнесут таблицу. */
#directory-items-body .cell-status > .fold > .fold__in,
#directory-items-body .row-actions > .fold > .fold__in { min-width: max-content; }


/* Чип направления в строке врача — ссылка, а не подпись. 08.09.2026 владелец
   искал этот отбор и не нашёл: «это в какой вкладке, где?». Кликабельность
   должна быть видна, но не кричать — таблицу читают чаще, чем отбирают. */
a.chip--sm { cursor: pointer; transition: background .12s ease, border-color .12s ease; }
a.chip--sm:hover { background: #f0fdf4; border-color: #86c8a4; color: #14532d; }

/* Плашка включённого отбора. Без неё три строки вместо пятидесяти читаются
   как «справочник пуст», а пути назад нет вовсе. */
.filter-note {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 12px; padding: 9px 12px;
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 9px;
    font-size: 13.5px; color: #14532d;
}
.filter-note__label { color: #4b6b57; }
.filter-note__count { color: #4b6b57; }
.filter-note__reset { margin-left: auto; color: #166534; text-decoration: none; font-weight: 600; }
.filter-note__reset:hover { text-decoration: underline; }


/* Привязка приложения-аутентификатора (T-057). */
.twofa-qr{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.twofa-qr img{border:1px solid #e2e8f0;border-radius:12px;background:#fff;padding:8px}
.twofa-secret{font-size:15px;letter-spacing:.08em;word-break:break-all;
  background:#f1f5f9;padding:6px 10px;border-radius:8px;display:inline-block}
.twofa-codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px;list-style:none;padding:0;margin:14px 0}
.twofa-codes code{font-size:16px;letter-spacing:.06em}
.panel--warn{border-left:4px solid #d97706}
.twofa-confirm{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.twofa-confirm input{width:auto;font-size:20px;letter-spacing:.25em;
  text-align:center;max-width:180px}
@media (max-width:720px){.twofa-qr{gap:14px}.twofa-qr img{width:200px;height:200px}}


/* Полоса «требует сопоставления» на главной справочников. Жёлтая, а не
   красная: это не поломка, а несделанная работа. */
.notice--pending {
    display: block; margin: 0 0 16px; padding: 12px 14px;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
    color: #78350f; text-decoration: none; font-size: 14px;
}
.notice--pending:hover { background: #fef3c7; }
.notice--pending strong { font-size: 16px; }
/* Два действия одно под другим, а не в строку: в строку они растягивали
   столбец шире экрана и «Завести новым» обрезалось. Класс row-actions здесь
   не годится — он задуман под одну кнопку «⋮» и нарочно тянется по
   содержимому. */
.match-actions { width: 320px; }
.match-form { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; }
.match-form:last-child { margin-bottom: 0; }
.match-form select, .match-form input { flex: 1; min-width: 0; }
.match-form .btn { white-space: nowrap; }

/* Пояснение к назначению поля рядом с подписью. */
.field-note{font-weight:400;color:#64748b;font-size:12px}


/* Даты в форме правки: подпись, а не поле. */
.edit-dates { font-size: 12px; color: #64748b; margin-left: 6px; white-space: nowrap; }

/* Дашборд источников: приглушённая строка «канал неизвестен» и метка площадки. */
.row--muted td{color:#64748b}
.tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:#eef2f7;color:#475569;font-size:11px;white-space:nowrap}
.num--bad{color:#dc2626;font-weight:600}

/* Кнопка скачивания запасных кодов рядом с пояснением. */
.twofa-save{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}

/* Пульт собственника: сравнение с прошлым периодом и честно пустые блоки. */
.delta{font-weight:600}
.delta--up{color:#059669}
.delta--down{color:#dc2626}
.delta--none{color:#94a3b8;font-weight:400}
.dashboard-stat__value--bad{color:#dc2626}
.panel--pending{border-left:4px solid #94a3b8;background:#fbfcfd}
.pending-list{margin:10px 0 0;padding-left:20px;line-height:1.9}
.pending-list b{color:#334155}

/* ==============================
   ТЁМНАЯ ТЕМА
   ============================== */

/* CSS-переменные — срабатывают до загрузки JS (инлайн-скрипт в <head>) */
[data-theme="dark"] {
    --bg: #0f172a;
    --surface: #1e293b;
    --border: #334155;
    --text: #f1f5f9;
    --muted: #94a3b8;
    --primary: #10b981;
    --primary-dark: #059669;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

/* Запасной вариант: системная тёмная тема до того, как JS выставил data-theme */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0f172a;
        --surface: #1e293b;
        --border: #334155;
        --text: #f1f5f9;
        --muted: #94a3b8;
        --primary: #10b981;
        --primary-dark: #059669;
        --shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    }
}

/* Навигация */
[data-theme="dark"] .top-nav__burger span { background: #94a3b8; }
[data-theme="dark"] .top-nav__link { color: #94a3b8 !important; }
[data-theme="dark"] .top-nav__link:hover { color: #cbd5e1 !important; }
[data-theme="dark"] .top-nav__link--active { color: #f1f5f9 !important; }
[data-theme="dark"] .top-nav__logout { color: #94a3b8; }

/* Заголовки таблиц */
[data-theme="dark"] .data-table th { color: #94a3b8; background: #1e293b; }
[data-theme="dark"] th { color: #94a3b8; }

/* Бейджи статусов */
[data-theme="dark"] .badge--system   { background: #451a03; color: #fbbf24; }
[data-theme="dark"] .badge--active   { background: #064e3b; color: #34d399; }
[data-theme="dark"] .badge--inactive { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .badge--updated  { background: #7f1d1d; color: #fca5a5; border-color: #991b1b; }
[data-theme="dark"] .card--updated   { box-shadow: 0 0 0 1px #7f1d1d; }

/* Информационные блоки */
[data-theme="dark"] .description-block { background: #064e3b; border-color: #059669; color: #a7f3d0; }
[data-theme="dark"] .notice           { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; }
[data-theme="dark"] .notice--phone    { background: #064e3b; border-color: #059669; color: #a7f3d0; }
[data-theme="dark"] .notice--pending  { background: #1c1917; border-color: #78716c; color: #d6d3d1; }
[data-theme="dark"] .notice--pending:hover { background: #292524; }
[data-theme="dark"] .import-report--warn { background: #422006; border-color: #92400e; color: #fde68a; }
[data-theme="dark"] .panel--pending   { background: #1e293b; border-color: #475569; }

/* Алерты */
[data-theme="dark"] .alert--error   { background: #450a0a; border-color: #991b1b; color: #fca5a5; }

/* Поля форм */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #1e293b;
    border-color: #475569;
    color: #f1f5f9;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #64748b; }
[data-theme="dark"] select option { background: #1e293b; }

/* Мини-кнопки в таблицах */
[data-theme="dark"] .btn-mini              { background: #1e293b; border-color: #475569; color: #cbd5e1; }
[data-theme="dark"] .btn-mini:hover,
[data-theme="dark"] a.btn-mini:hover       { background: #334155; border-color: #64748b; color: #f1f5f9; }
[data-theme="dark"] .btn-mini--active      { background: #064e3b; border-color: #059669; color: #34d399; }
[data-theme="dark"] .btn-mini--danger      { background: #1e293b; border-color: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .btn-mini--danger:hover { background: #450a0a; border-color: #991b1b; }

/* Контекстное меню строки */
[data-theme="dark"] .row-menu__item--danger:hover { background: #450a0a; }

/* Вспомогательные теги и метки */
[data-theme="dark"] .tag        { background: #334155; color: #94a3b8; }
[data-theme="dark"] .f__control.is-set { background: #064e3b; border-color: #059669; color: #34d399; }

/* Кнопка переключения темы в шапке */
.top-nav__start {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    flex: none;
}
.top-nav__start .top-nav__brand { margin-right: 0; }

.top-nav__theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    color: var(--muted);
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.top-nav__theme:hover { color: var(--text); background: var(--bg); }
.top-nav__theme svg  { display: block; }