:root {
    --bg: #eef1f7;
    --card-bg: #ffffff;
    --border: #e2e7f0;
    --border-strong: #cdd5e2;
    --text: #1f2940;
    --text-muted: #6b7590;
    --accent: #3b5bdb;
    --accent-dark: #2f4bc4;
    --accent-soft: #eef1fd;
    --head-bg: #f4f6fb;
    --channel-bg: #eaf0ff;
    --channel-border: #c9d6f7;
    --total-bg: #1f2940;
    --total-text: #ffffff;
    --leads-color: #e8590c;
    --radius: 12px;
    --shadow: 0 8px 24px rgba(31, 41, 64, 0.06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
                 Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    background: linear-gradient(160deg, #eef1f7 0%, #e4e9f5 100%) fixed;
    color: var(--text);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;

    /* Тема Slim Select (мультивыбор каналов) */
    --ss-primary-color: var(--accent);
    --ss-focus-color: var(--accent);
    --ss-border-color: var(--border-strong);
    --ss-border-radius: 8px;
    --ss-main-height: 38px;
    --ss-option-height: 32px;
}

/* ---------- Каркас: левое меню + контент ---------- */
.layout {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}
.content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px 28px 60px;
}

/* ---------- Левое меню дашборда ---------- */
.sidebar {
    flex: 0 0 248px;
    width: 248px;
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
    background: #1f2940;
    color: #c3cce4;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 18px;
    color: #fff;
}
.sidebar-brand-mark {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--leads-color));
    color: #fff;
    font-weight: 800;
    font-size: 16px;
}
.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    font-size: 15px;
    font-weight: 700;
}
.sidebar-brand-text small {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #8f9bbd;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #c3cce4;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.sidebar-link.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(59, 91, 219, 0.35);
}
.sidebar-icon { flex: 0 0 auto; width: 20px; height: 20px; }

.sidebar-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
}
.sidebar-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #2c3960;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}
.sidebar-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sidebar-user-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-login { font-size: 11px; color: #8f9bbd; }
.sidebar-logout {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    color: #c3cce4;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-logout:hover { background: rgba(232, 89, 12, 0.18); color: #ffb27a; }
.sidebar-logout .sidebar-icon { width: 18px; height: 18px; }

/* ---------- Заголовок страницы ---------- */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: 6px 4px 22px;
}
.page-title {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-title::before {
    content: "";
    width: 6px;
    height: 30px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--accent), var(--leads-color));
}
.page-subtitle {
    margin: 6px 0 0 16px;
    color: var(--text-muted);
    font-size: 15px;
}

/* ---------- Форма выбора периода ---------- */
form.month-year-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 4px 24px;
    padding: 14px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
form.month-year-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
form.month-year-form select {
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    background: var(--head-bg);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
    outline: none;
}
form.month-year-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
form.month-year-form button {
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, var(--accent), var(--accent-dark));
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    cursor: pointer;
    margin-left: auto;
    box-shadow: 0 3px 8px rgba(59, 91, 219, 0.28);
    transition: transform 0.08s ease, filter 0.15s ease;
}
form.month-year-form button:hover { filter: brightness(1.05); }
form.month-year-form button:active { transform: translateY(1px); }

/* Мультивыбор каналов (Slim Select) */
form.month-year-form .channel-select { min-width: 240px; flex: 1 1 240px; max-width: 460px; }
form.month-year-form .ss-main {
    font-size: 15px;
    font-family: inherit;
    background: var(--head-bg);
}
form.month-year-form .ss-main .ss-values .ss-placeholder { color: var(--text-muted); }
form.month-year-form .ss-main .ss-values .ss-value {
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
}

/* ---------- Таблица ---------- */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 4px 20px;
    border-radius: var(--radius);
    background: var(--card-bg);
}
.table-leads {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background: var(--card-bg);
    font-size: 14px;
    white-space: nowrap;
}
.table-leads th, .table-leads td {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
    text-align: center;
}
.table-leads tr.metric-group-start > th,
.table-leads tr.metric-group-start > td {
    border-top: 2px solid var(--border-strong);
}
.table-leads tbody.channel-spacer td {
    height: 20px;
    padding: 0;
    border: 0;
    background: #e9edf5;
    line-height: 0;
    font-size: 0;
}
.table-leads th:last-child, .table-leads td:last-child { border-right: none; }
.table-leads thead th { border-bottom: none; }

.table-leads td.num, .table-leads th { font-variant-numeric: tabular-nums; }
.table-leads td.num { color: var(--text); }
.metric-leads td.num { color: var(--leads-color); }

/* ---------- Единая шапка таблицы ---------- */
.table-leads thead th {
    background: var(--total-bg);
    color: #cbd3e6;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 8px;
    position: sticky;
    top: 0;
    z-index: 2;
}
.table-leads thead th.corner-cell {
    text-align: left;
    color: #ffffff;
    background: var(--total-bg);
    min-width: 150px;
}
.table-leads thead th.day-cell { color: #ffffff; }
.table-leads thead th.day-cell a {
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    min-width: 22px;
    border-radius: 6px;
    padding: 2px 5px;
    transition: background 0.15s ease, color 0.15s ease;
}
.table-leads thead th.day-cell a:hover { background: rgba(255, 255, 255, 0.18); }
.table-leads thead th.total-cell {
    background: #2c3960;
    color: #ffffff;
    border-left: 1px solid #46537a;
}

/* ---------- Шапка с днями внутри канала (спокойная, не акцентная) ---------- */
.table-leads tr.channel-head th {
    background: var(--head-bg);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px;
}
.table-leads tr.channel-head th.corner-cell {
    text-align: left;
    color: var(--text-muted);
    background: var(--head-bg);
    min-width: 150px;
}
.table-leads tr.channel-head th.day-cell { color: var(--text-muted); }
.table-leads tr.channel-head th.day-cell a {
    color: var(--accent-dark);
    text-decoration: none;
    display: inline-block;
    min-width: 22px;
    border-radius: 6px;
    padding: 2px 5px;
    transition: background 0.15s ease, color 0.15s ease;
}
.table-leads tr.channel-head th.day-cell a:hover { background: var(--accent-soft); color: var(--accent); }
.table-leads tr.channel-head th.total-cell {
    background: #e9edf8;
    color: var(--accent-dark);
    border-left: none;
    border-right: 1px solid var(--border-strong);
}

/* ---------- Полоса-заголовок канала ---------- */
tr.channel-band td {
    background: linear-gradient(90deg, #1f2940, #27324e);
    border-top: 1px solid #1b2338;
    border-bottom: 1px solid #1b2338;
    text-align: left;
    padding: 10px 14px;
}
.channel-band .band-name {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.01em;
}
.channel-band .band-stats {
    float: right;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}
.channel-band .band-stats b { color: #ffffff; }

/* Управление загрузкой внешней статистики (справа в полосе канала) */
.channel-band .band-actions {
    float: right;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}
.channel-band .ad-status { color: #ffffff; text-align: right; }
.channel-band .ad-load-btn:disabled { opacity: 0.55; cursor: default; }
.channel-band .ad-load-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    color: var(--accent-dark);
    background: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.channel-band .ad-load-btn:hover:not(.loading) { background: #e6ebfd; }
.channel-band .ad-load-btn.loading { opacity: 0.85; pointer-events: none; }
/* Прелоадер на кнопке во время загрузки */
.channel-band .ad-load-btn.loading::before {
    content: "";
    width: 12px;
    height: 12px;
    margin-right: 7px;
    border: 2px solid rgba(47, 75, 196, 0.3);
    border-top-color: var(--accent-dark);
    border-radius: 50%;
    animation: ad-spin 0.7s linear infinite;
}
@keyframes ad-spin { to { transform: rotate(360deg); } }

/* Статус загрузки: «Успешно» / «Ошибка» */
.channel-band .ad-status { font-size: 12px; font-weight: 600; line-height: 1.4; }
.channel-band .ad-status:empty { display: none; }
.channel-band .ad-status-ok { color: #b7efc5; }
.channel-band .ad-status-err { color: #ffb4ab; }

/* Иконка с текстом ошибки (открывает модалку) */
.channel-band .ad-note-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    color: #ffb4ab;
    background: rgba(255, 255, 255, 0.14);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.channel-band .ad-note-btn[hidden] { display: none; }
.channel-band .ad-note-btn:hover { background: rgba(255, 255, 255, 0.28); }

/* Модалка с текстом ошибки */
.ad-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    padding: 20px;
    background: rgba(31, 41, 64, 0.5);
    align-items: center;
    justify-content: center;
}
.ad-modal.ad-modal-open { display: flex; }
.ad-modal-box {
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    overflow: auto;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}
.ad-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.ad-modal-title { font-weight: 700; color: var(--text); }
.ad-modal-close {
    padding: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
}
.ad-modal-body {
    padding: 16px 18px;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------- Затраты на специалистов ---------- */
.metric-specialist .specialist-cell {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}
.metric-specialist .specialist-cell:hover { background: #e6ebfd; }
.metric-specialist .specialist-cell.specialist-empty {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.metric-total-cost th.row-label { font-weight: 700; }
.metric-total-cost .total-cost-cell { background: #e9edf8; }

/* Ручная группа «Продажи / новые клиенты» */
.metric-sales .sales-day-cell, .metric-finance .finance-day-cell { padding: 0; }
.metric-sales .sales-day-input, .metric-finance .finance-day-input {
    width: 100%;
    min-width: 40px;
    box-sizing: border-box;
    padding: 8px 2px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.metric-sales .sales-day-input::placeholder, .metric-finance .finance-day-input::placeholder { color: #b9c3d3; }
.metric-sales .sales-day-input:hover, .metric-finance .finance-day-input:hover { background: #eef2fb; }
.metric-sales .sales-day-input:focus, .metric-finance .finance-day-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: #ffffff;
}
.metric-sales .sales-day-input::-webkit-outer-spin-button,
.metric-sales .sales-day-input::-webkit-inner-spin-button,
.metric-finance .finance-day-input::-webkit-outer-spin-button,
.metric-finance .finance-day-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.metric-sales .sales-day-input, .metric-finance .finance-day-input { -moz-appearance: textfield; }
.metric-sales .sales-total-cell { background: #eef3ff; }
.metric-finance .finance-total-cell { background: #f4f6fb; }

/* Расчётные показатели по лидам (CPL CRM, CR, CPQL) */
.metric-calc th.row-label { font-weight: 600; color: var(--text-muted); }
.metric-calc .calc-cell { color: var(--text); }

/* Раскрывающиеся группы строк */
.metric-parent { cursor: pointer; }
.metric-parent:focus { outline: 2px solid var(--accent-soft); outline-offset: -2px; }
.metric-toggle {
    display: inline-block;
    width: 14px;
    margin-right: 6px;
    font-family: serif;
    font-size: 11px;
    line-height: 1;
    text-align: center;
    color: var(--text-muted);
}
/* Стрелка раскрытия — справа в ячейке главной строки */
.metric-parent .metric-toggle {
    float: right;
    margin: 0 0 0 8px;
}
.metric-detail.is-collapsed { display: none; }
.metric-detail th.row-label {
    padding-left: 28px;
    font-weight: 600;
    color: var(--text-muted);
}
.metric-detail td { background: #fafbff; }
.metric-detail:hover th.row-label,
.metric-detail:hover td { background: #eef2fb; }

/* Окно ввода суммы */
.specialist-channel {
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-muted);
}
.specialist-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.specialist-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 16px;
    color: var(--text);
    background: #ffffff;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
}
.specialist-input:focus {
    outline: 2px solid var(--accent-soft);
    border-color: var(--accent);
}
.specialist-error {
    margin-top: 8px;
    font-size: 13px;
    color: #c0392b;
}
.specialist-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}
.specialist-actions button {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.specialist-cancel { background: var(--head-bg); color: var(--text); }
.specialist-save { background: var(--accent); color: #ffffff; }
.specialist-save:disabled { opacity: 0.6; cursor: default; }

/* ---------- Кнопка загрузки статистики по всем каналам (в блоке итогов) ---------- */
.summary-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

/* Панель над таблицей: развернуть/свернуть все строки */
.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 4px 10px;
}
.table-toggle-all {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--accent-dark);
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.table-toggle-all:hover { background: #e6ebfd; }

.ad-load-all-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    color: #ffffff;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.ad-load-all-btn:hover:not(.loading) { background: var(--accent-dark); }
.ad-load-all-btn.loading { opacity: 0.85; pointer-events: none; }
.ad-load-all-btn.loading::before {
    content: "";
    width: 13px;
    height: 13px;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: ad-spin 0.7s linear infinite;
}
.ad-all-status { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.ad-all-status.ad-status-ok { color: #2a7a3f; }
.ad-all-status.ad-status-err { color: #c0392b; }

/* ---------- Строки метрик ---------- */
.metric-row { background: var(--card-bg); }
.metric-row th.row-label {
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    background: #fafbfe;
    border-right: 1px solid var(--border);
}
.metric-row:hover td, .metric-row:hover th.row-label { background: #eef2fb; }

/* Иконка «i» с пояснением показателя */
.metric-row th.row-label .metric-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    padding: 0;
    font-size: 10px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    color: var(--text-muted);
    background: var(--head-bg);
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.metric-row th.row-label .metric-info-btn:hover {
    color: var(--accent-dark);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.metric-leads td {
    background: #fff8f2;
}
.metric-leads th.row-label {
    background: #fff3e8;
    color: #b3470f;
    font-weight: 700;
}
.metric-leads:hover td, .metric-leads:hover th.row-label { background: #ffe9d7; }

/* ---------- Колонка итого (первая, перед днями) ---------- */
.table-leads td.total-cell,
.table-leads th.total-cell {
    background: #f2f4fb;
    color: var(--accent-dark);
    font-weight: 700;
    border-left: none;
    border-right: 1px solid var(--border-strong);
}
.metric-leads td.total-cell { background: #ffe3cc; color: #b3470f; }
.metric-leads:hover td.total-cell { background: #ffd7b8; }
.table-leads td.total-cell:empty, .table-leads th.total-cell:empty { display: none; }

/* ---------- Блок итогов за период ---------- */
.summary {
    margin: 0 4px 22px;
    padding: 18px 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.summary-title {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: var(--head-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.summary-label {
    font-size: 12px;
    color: var(--text-muted);
}
.summary-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}
.summary-item-qual .summary-value { color: var(--leads-color); }
.summary-item-other .summary-value { color: var(--text-muted); }
.summary-item-ad { background: var(--accent-soft); }
.summary-item-empty .summary-value { color: var(--text-muted); }
.summary-item-total-cost {
    background: #f7f9ff;
    border-color: var(--accent);
}
.summary-item-total-cost .summary-value { color: var(--accent-dark); }

/* Итоговая таблица за месяц */
.summary-table-wrap { margin: 0; }
.summary-table { font-size: 13px; }
.summary-table th,
.summary-table td { padding: 8px 10px; text-align: right; }
.summary-table th.summary-channel-cell,
.summary-table td.summary-channel-cell { text-align: left; font-weight: 600; }
.summary-table thead th.summary-channel-cell {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--head-bg);
}
.summary-table tbody td.summary-channel-cell,
.summary-table tbody th.summary-channel-cell {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card-bg);
}
.summary-table tbody tr:nth-child(even) th.summary-channel-cell { background: #fafbfe; }
.summary-table .summary-total-row th.summary-channel-cell { background: #e9edf8; }
.summary-table thead th {
    background: var(--head-bg);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}
.summary-table th.summary-col-data,
.summary-table td.summary-col-data { background: #ffffff; }
.summary-table th.summary-col-calc,
.summary-table td.summary-col-calc { background: #eef1f6; }
.summary-table thead th.summary-col-data { background: #f7f9fc; }
.summary-table thead th.summary-col-calc { background: #e7ecf4; }
.summary-table .summary-total-row th,
.summary-table .summary-total-row td {
    font-weight: 700;
    border-top: 2px solid var(--border-strong);
}
.summary-table .summary-total-row .summary-col-data { background: #e4e9f4; }
.summary-table .summary-total-row .summary-col-calc { background: #dce2ee; }
.summary-total-note {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--text-muted);
    white-space: normal;
    max-width: 240px;
}

.metric-ad td.num.empty,
.metric-ad td.total-cell.empty { color: var(--text-muted); font-weight: 400; }

/* ---------- Период / источник данных ---------- */
.data-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 4px 18px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.data-meta .source-switch { margin: 0; flex: 1 1 auto; }
.data-meta .data-source-note { margin: 0; }
/* Внутри заголовка блок не должен иметь собственных внешних отступов */
.page-header .data-meta { margin: 0; }

/* ---------- Источник данных (онлайн / дамп) ---------- */
.source-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
}
.source-switch-label { color: var(--text-muted); }
.source-switch-link {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    color: var(--text);
    background: var(--card-bg);
}
.source-switch-link.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.source-switch-refresh {
    margin-left: auto;
    background: none;
    border: none;
    border-bottom: 1px dashed var(--text-muted);
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
}
.source-switch-refresh:hover { border-bottom-style: solid; }
.data-source-note {
    margin: 0 4px 14px;
    font-size: 13px;
    color: var(--text-muted);
}
.data-source-note.warn { color: #b3470f; }
.data-source-note code {
    background: var(--head-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12px;
}

/* ---------- Кнопка обновления дампа ---------- */
.refresh-form { margin: 0; }

/* ---------- Детальные таблицы (leads.php) ---------- */
h3.detail-source {
    margin: 26px 6px 8px;
    font-size: 20px;
    font-weight: 800;
    padding-left: 12px;
    border-left: 4px solid var(--accent);
}
h3.detail-source .detail-source-total {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}
h4.detail-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 6px 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.badge {
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 10px;
}
.table-leads tr.detail-head th {
    background: var(--head-bg);
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    font-weight: 700;
    padding: 9px 10px;
}
.table-leads td.date-cell { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.table-leads td.name-cell { text-align: left; }
.table-leads td.service-cell {
    text-align: left;
    white-space: normal;
    min-width: 140px;
    color: #7a6248;
    font-size: 13px;
}
.table-leads td a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.table-leads td a:hover { text-decoration: underline; }
.table-leads .volume-cell { font-weight: 700; font-variant-numeric: tabular-nums; }
.table-detail tr:nth-child(even):not(.channel-band) td { background: rgba(244, 246, 251, 0.6); }
.table-detail tr:hover:not(.channel-band) td { background: #eef2fb; }

.ta-right { text-align: right !important; }
.ta-center { text-align: center !important; }
.muted { color: var(--text-muted); }

.empty {
    margin: 20px 6px;
    padding: 30px;
    text-align: center;
    color: var(--text-muted);
    background: var(--card-bg);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    font-size: 15px;
}

@media (max-width: 820px) {
    .layout { flex-direction: column; }
    .sidebar {
        position: static;
        width: 100%;
        flex: 0 0 auto;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        padding: 10px 12px;
        overflow: visible;
    }
    .sidebar-brand { padding: 0 8px 0 2px; }
    .sidebar-nav { flex-direction: row; flex-wrap: wrap; flex: 1 1 auto; }
    .sidebar-link { padding: 8px 10px; font-size: 13px; }
    .sidebar-footer {
        margin: 0 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding-top: 0;
        border-top: none;
    }
    .sidebar-user-login { display: none; }
    .sidebar-user-name { max-width: 130px; }
}

@media (max-width: 640px) {
    .content { padding: 16px 10px 40px; }
    .page-title { font-size: 21px; }
    form.month-year-form button { margin-left: 0; width: 100%; }
}

/* ---------- Страница входа ---------- */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
form.login-card {
    width: 100%;
    max-width: 360px;
    padding: 28px 28px 24px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}
.login-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.login-subtitle {
    margin: 4px 0 20px;
    font-size: 14px;
    color: var(--text-muted);
}
.login-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.login-input {
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    background: var(--head-bg);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 9px 12px;
    margin-bottom: 16px;
    outline: none;
}
.login-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-button {
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, var(--accent), var(--accent-dark));
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(59, 91, 219, 0.28);
    transition: transform 0.08s ease, filter 0.15s ease;
}
.login-button:hover { filter: brightness(1.05); }
.login-button:active { transform: translateY(1px); }
.login-error {
    margin-bottom: 16px;
    padding: 10px 12px;
    font-size: 13px;
    color: #b3470f;
    background: #fff3e8;
    border: 1px solid #f3d3b8;
    border-radius: 8px;
}

/* ---------- Пояснительная записка ---------- */
.note {
    max-width: 980px;
    margin: 0 4px 36px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text);
}
.note-meta {
    margin: 0 0 20px;
    font-size: 12px;
    color: var(--text-muted);
}
.note-section { margin-bottom: 30px; }
.note-section h2 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}
.note-section h3 {
    margin: 20px 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-dark);
}
.note-section p { margin: 8px 0; }
.note-section ul,
.note-section ol { margin: 8px 0; padding-left: 22px; }
.note-section li { margin: 4px 0; }
.note-section li ul { margin: 4px 0; }
.note-formula {
    margin: 10px 0;
    padding: 10px 14px;
    background: var(--head-bg);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--text);
}
.note-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 18px;
    font-size: 13px;
}
.note-table th,
.note-table td {
    padding: 8px 10px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.note-table th {
    background: var(--head-bg);
    font-weight: 700;
}
.note-table tbody tr:nth-child(even) td { background: #fafbff; }
.note-code {
    padding: 1px 5px;
    background: var(--head-bg);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}
/* ---------- Пояснительная записка: таблица показателей ---------- */
.notes-intro {
    max-width: 980px;
    margin: 0 4px 18px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text);
}
.notes-intro p { margin: 0 0 10px; }
.notes-legend { font-size: 13px; color: var(--text-muted); }

/* Таблица повторяет .table-leads, но вместо чисел — пояснения,
   поэтому ячейкам разрешён перенос строк. */
.notes-table,
.notes-table th,
.notes-table td { white-space: normal; }
.notes-table th,
.notes-table td { vertical-align: top; }
.notes-table thead th.notes-desc-head {
    background: var(--total-bg);
    color: #ffffff;
    text-align: left;
}
.notes-table th.row-label {
    width: 300px;
    min-width: 240px;
    text-align: left;
    font-size: 13px;
    line-height: 1.45;
}
.notes-table td.notes-desc {
    text-align: left;
    line-height: 1.6;
    color: var(--text);
    font-size: 13px;
}
.notes-table .channel-band td { white-space: normal; }

/* Формула в тексте пояснения */
.notes-formula {
    display: inline-block;
    margin: 3px 0;
    padding: 1px 7px;
    background: var(--head-bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text);
    white-space: normal;
}

/* Пометка об источнике данных */
.notes-source {
    display: inline-block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-muted);
}

@media (max-width: 720px) {
    .note-table { display: block; overflow-x: auto; }
    .notes-table th.row-label { width: auto; min-width: 170px; }
}

/* ---------- Страница дампов ---------- */
.dump-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}
.dump-status-ok { color: #1f6f3a; background: #e3f6e9; }
.dump-status-err { color: #a5281b; background: #fdecea; }
.dump-status-missing { color: #6b7590; background: #eef1f7; }

.dump-month-note {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #c0392b;
}

.dump-note-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 22px;
    min-height: 20px;
    margin-left: 6px;
    padding: 2px 7px;
    color: #a5281b;
    background: #fdecea;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
    transition: background 0.15s ease;
}
.dump-note-btn:hover { background: #f7d4cf; }
.dump-note-btn.dump-note-btn-muted {
    color: #6b7590;
    background: #eef1f7;
}
.dump-note-btn.dump-note-btn-muted:hover { background: #dfe4ef; }

.dump-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.dump-actions a { white-space: nowrap; }

.dump-refresh-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    color: var(--accent-dark);
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft);
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.dump-refresh-btn:hover:not(:disabled) { background: #e6ebfd; }
.dump-refresh-btn:disabled { opacity: 0.7; cursor: default; }
.dump-refresh-btn.loading::before {
    content: "";
    width: 11px;
    height: 11px;
    margin-right: 7px;
    border: 2px solid rgba(47, 75, 196, 0.3);
    border-top-color: var(--accent-dark);
    border-radius: 50%;
    animation: ad-spin 0.7s linear infinite;
}

.dump-refresh-status { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.dump-refresh-status.dump-refresh-ok { color: #2a7a3f; }
.dump-refresh-status.dump-refresh-err { color: #c0392b; }

/* Обновление отдельного сервиса в ячейке статуса */
.dump-service-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    color: var(--accent-dark);
    background: var(--accent-soft);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.dump-service-refresh:hover:not(:disabled) { background: #e6ebfd; }
.dump-service-refresh:disabled { opacity: 0.6; cursor: default; }
.dump-service-refresh-blocked { color: #6b7590; background: #eef1f7; }
.dump-service-refresh.dump-service-refresh-blocked:hover { background: #dfe4ef; }
.dump-service-refresh.loading svg { display: none; }
.dump-service-refresh.loading::before {
    content: "";
    width: 11px;
    height: 11px;
    border: 2px solid rgba(47, 75, 196, 0.3);
    border-top-color: var(--accent-dark);
    border-radius: 50%;
    animation: ad-spin 0.7s linear infinite;
}

.dump-refresh-status.dump-refresh-warn { color: #b26a00; }

.dump-service-updated {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.2;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Прогресс обновления сервисов */
.dump-note-btn[hidden],
.dump-service-spinner[hidden],
.dump-service-wait[hidden],
.dump-service-updated[hidden] { display: none; }

.dump-service-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    vertical-align: middle;
    border: 2px solid rgba(47, 75, 196, 0.25);
    border-top-color: var(--accent-dark);
    border-radius: 50%;
    animation: ad-spin 0.7s linear infinite;
}

.dump-service-wait {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #b26a00;
    white-space: nowrap;
}

.dump-month-row.dump-row-updating td { background: #f4f7ff; }
.dump-service-cell.is-updating { background: #eaf0ff; }