/* ==========================================================================
   Дашборд «Репин» — оформление в стиле Roistat (светлый B2B-SaaS).
   Отдельный стиль ТОЛЬКО для Laravel-приложения (/app). Legacy /static/style.css
   не затрагивается. Сайдбар + верхняя панель + карточки + аккуратные таблицы.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800&display=swap');

:root {
    --bg:          #f3f5f9;
    --surface:     #ffffff;
    --surface-2:   #f8fafc;
    --border:      #e7ecf3;
    --border-soft: #eef2f7;
    --text:        #10213a;
    --text-2:      #475569;
    --muted:       #8a98ad;
    --accent:      #2f80ed;
    --accent-600:  #1f6fe0;
    --accent-tint: #eaf2fe;
    --good:        #12a150;
    --good-tint:   #e8f7ee;
    --warn:        #c77700;
    --warn-tint:   #fdf3e1;
    --bad:         #e5484d;
    --bad-tint:    #fdecec;
    --radius:      14px;
    --radius-sm:   9px;
    --shadow:      0 1px 2px rgba(16,33,58,.04), 0 8px 24px -12px rgba(16,33,58,.12);
    --sidebar-w:   238px;
}

* { box-sizing: border-box; }

/* Скроллбар всегда виден — иначе ширина окна (и vw-шрифты) скачет между страницами */
html { overflow-y: scroll; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-600); }

/* ---------- Каркас ---------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--surface);
    border-right: 1px solid var(--border);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 18px 14px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 16px;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -.01em;
}
.brand .logo {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--accent), #6aa6ff);
    color: #fff;
    display: grid; place-items: center;
    font-size: 15px; font-weight: 800;
    box-shadow: 0 4px 10px -3px rgba(47,128,237,.6);
}
.brand small { display: block; color: var(--muted); font-weight: 500; font-size: 11px; letter-spacing: 0; }

.nav-group { margin-top: 14px; }
.nav-group-title {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted);
    padding: 4px 10px; margin-bottom: 2px;
}
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-weight: 500;
    transition: background .12s, color .12s;
}
.nav-item svg { width: 17px; height: 17px; flex: 0 0 17px; stroke: currentColor; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-tint); color: var(--accent-600); font-weight: 600; }
.nav-item.disabled { color: var(--muted); pointer-events: none; opacity: .65; }
.nav-item.disabled .soon {
    margin-left: auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); background: var(--surface-2);
    border: 1px solid var(--border); padding: 1px 6px; border-radius: 20px;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    min-height: 62px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px 16px; padding: 10px 22px; flex-wrap: wrap;
    position: sticky; top: 0; z-index: 20;
}
.topbar-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.topbar h1 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.topbar .sub { color: var(--muted); font-weight: 500; font-size: 12px; }

.content { padding: clamp(10px, 1vw, 18px) clamp(12px, 1.1vw, 20px); width: 100%; min-width: 0; overflow-x: clip; }

/* ---------- Период ---------- */
.period { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.period .field {
    display: flex; align-items: center; gap: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 5px 9px;
}
.period input[type=date] {
    border: 0; background: transparent; font: inherit; color: var(--text);
    font-variant-numeric: tabular-nums; outline: none; width: 112px;
}
.period-select {
    padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer;
}
.period-select:hover { border-color: var(--accent); }
.period .presets { display: flex; gap: 4px; }
.period .preset {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 7px; padding: 6px 10px; font: inherit; font-size: 12.5px;
    color: var(--text-2); cursor: pointer; transition: all .12s;
}
.period .preset:hover { border-color: var(--accent); color: var(--accent-600); }
.btn {
    background: var(--accent); color: #fff; border: 0;
    border-radius: 8px; padding: 7px 14px; font: inherit; font-weight: 600;
    cursor: pointer; transition: background .12s;
}
.btn:hover { background: var(--accent-600); }
.btn-ghost { background: transparent; border: 0; color: var(--muted); cursor: pointer; font: inherit; padding: 6px 8px; }
.btn-ghost:hover { color: var(--bad); }

.user { display: flex; align-items: center; gap: 10px; }
.user .avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--accent-tint); color: var(--accent-600);
    display: grid; place-items: center; font-weight: 700; font-size: 13px;
}

/* ---------- Карточки ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.card + .card { margin-top: 18px; }
.card-head { padding: clamp(9px, 0.9vw, 14px) clamp(12px, 1vw, 18px); border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card-head h2 { font-size: clamp(12.5px, 0.95vw, 14px); font-weight: 700; margin: 0; }
.card-note { color: var(--muted); font-size: clamp(10.5px, 0.78vw, 12px); padding: 10px 16px; }

/* ---------- Лента показателей ---------- */
/* Базовая «плоская» лента (страницы анализа) — единый ribbon-card. */
.stat-strip {
    display: flex;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 16px;
}
.stat {
    flex: 1 1 auto;            /* тянутся и заполняют всю ширину, без пустых ячеек */
    min-width: 100px;
    max-width: 260px;          /* при переносе одиночная карточка не растягивается на весь ряд */
    padding: clamp(8px, 0.7vw, 12px) clamp(11px, 0.95vw, 16px);
    border-right: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}
.stat .v { font-size: clamp(15px, 1.05vw, 18px); font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat .l { margin-top: 3px; font-size: clamp(9px, 0.6vw, 10px); font-weight: 600; text-transform: uppercase; letter-spacing: .045em; color: var(--muted); }
.stat.is-shipped { background: rgba(47,128,237,.045); }
.stat .v.good { color: var(--good); } .stat .v.warn { color: var(--warn); } .stat .v.bad { color: var(--bad); }

/* Сгруппированная лента — единый модуль: строка «Деньги + Качество», ниже «Воронка».
   Карточка одна, группы внутри разделены линиями. */
.stat-strip.stat-grouped {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.stat-row {
    display: flex;
    flex-wrap: wrap;             /* на узких экранах группа целиком переносится */
    align-items: stretch;
}
.stat-row + .stat-row { border-top: 1px solid var(--border); }
.stat-group {
    flex: var(--n, 1) 1 0;      /* ширина пропорциональна числу метрик (--n) → ячейки одной ширины */
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.stat-row .stat-group + .stat-group { border-left: 1px solid var(--border); }
.stat-group-head {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-2);
    background: var(--surface-2);
}
.stat-group-head svg { width: 15px; height: 15px; flex: 0 0 15px; }
.stat-group.g-money   .stat-group-head svg { color: var(--good); }
.stat-group.g-funnel  .stat-group-head svg { color: var(--accent); }
.stat-group.g-quality .stat-group-head svg { color: var(--warn); }
.stat-group-body { display: flex; flex-wrap: nowrap; flex: 1; }   /* метрики группы — в одну линию */
.stat-grouped .stat { flex: 1 1 auto; min-width: 66px; max-width: none; border-bottom: 0; padding: clamp(7px, 0.6vw, 11px) clamp(8px, 0.7vw, 12px); }
.stat-grouped .stat .v { font-size: clamp(13px, 0.92vw, 16px); }
.stat-grouped .stat .l { white-space: nowrap; }
.stat-grouped .stat-group-body .stat:last-child { border-right: 0; }

.crumbs-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.breadcrumb { font-size: 13px; color: var(--text-2); margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.scope-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.scope-select {
    padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); font: inherit; font-size: 13px; color: var(--text); cursor: pointer; max-width: 220px;
}
.scope-select:hover { border-color: var(--accent); }

/* Переключатель уровней (Дни · Кампании · Группы · Объявления) */
.level-tabs { display: flex; gap: 5px; margin-bottom: 14px; flex-wrap: wrap; }
.level-tab {
    padding: 6px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 500; color: var(--text-2);
    background: var(--surface); border: 1px solid var(--border);
    transition: all .12s;
}
.level-tab:hover { border-color: var(--accent); color: var(--accent-600); }
.level-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.breadcrumb .sep { color: var(--muted); }

/* ---------- Таблицы ---------- */
.table-wrapper { width: 100%; overflow: auto; max-height: calc(100vh - 255px); }
.data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: clamp(11.5px, 0.85vw, 13.5px); }
.data-table thead th {
    position: sticky; top: 0; z-index: 5;          /* шапка прилипает при прокрутке таблицы */
    background: var(--surface-2);
    font-size: clamp(9.5px, 0.64vw, 11px); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--muted); text-align: center; white-space: nowrap;
    padding: clamp(5px, 0.48vw, 7px) clamp(8px, 0.72vw, 11px);
    border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 var(--border);
}
.data-table thead th:first-child { text-align: left; }
.data-table tbody td {
    padding: clamp(5px, 0.45vw, 7px) clamp(8px, 0.72vw, 11px); text-align: center; white-space: nowrap;
    line-height: 1.3; border-bottom: 1px solid var(--border-soft); color: var(--text);
}
.data-table tbody td:first-child { text-align: left; font-weight: 500; }
.data-table tbody tr:hover td { background: var(--accent-tint); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .muted { color: var(--muted); }

.row-total td {
    font-weight: 700;
    background: var(--surface-2) !important;
    border-top: 2px solid var(--border);
    border-bottom: 0;
}

/* Название (дрилл): узкая колонка с обрезкой и тултипом на весь текст при наведении */
.data-table tbody td.name-cell { max-width: clamp(150px, 18vw, 280px); text-align: left; }
.name-cell a, .name-cell .nm {
    display: block; max-width: clamp(150px, 18vw, 280px); text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Канал: точка-маркер + название */
.ch-name { display: inline-flex; align-items: center; gap: 9px; }
.ch-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: var(--accent); }

/* Бейджи ДРР / метрик по порогам */
.metric { display: inline-block; padding: 1px 8px; border-radius: 20px; font-weight: 600; font-size: clamp(11px, 0.72vw, 12.5px); }
.metric.good { background: var(--good-tint); color: var(--good); }
.metric.warn { background: var(--warn-tint); color: var(--warn); }
.metric.bad  { background: var(--bad-tint);  color: var(--bad);  }

/* Группа «отправленные» — мягкая заливка колонок, чтобы отделить второй срез */
.col-shipped { background: rgba(47,128,237,.035); }
.data-table tbody tr:hover td.col-shipped { background: var(--accent-tint); }
.th-group { color: var(--accent-600) !important; }

/* ---------- Фильтры ---------- */
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
.btn-filter {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 500;
    background: var(--surface); border: 1px solid var(--border); color: var(--text-2); cursor: pointer;
}
.btn-filter:hover { border-color: var(--accent); color: var(--accent-600); }
.btn-filter.has-active { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-600); }
.filter-count { font-size: 11px; font-weight: 700; background: var(--accent); color: #fff; border-radius: 20px; padding: 0 6px; }
.filter-rowcount { font-size: 12px; color: var(--muted); }
.name-search {
    padding: 6px 11px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--surface); font: inherit; font-size: 13px; min-width: 190px; color: var(--text);
}
.name-search:focus { outline: none; border-color: var(--accent); }
.preset-pick { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }

.filter-panel {
    position: fixed; z-index: 100;              /* fixed — не обрезается карточкой (overflow:hidden) */
    width: min(620px, 94vw); background: var(--surface);
    border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px -12px rgba(16,33,58,.28);
    padding: 14px; text-align: left;
    max-height: calc(100vh - 90px); overflow: auto;
}
.filter-panel[hidden] { display: none; }
.filter-group { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--surface-2); }
.filter-group + .filter-or { display: block; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--muted); margin: 8px 0; }
.filter-cond { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.filter-cond:last-child { margin-bottom: 0; }
.filter-cond .and { font-size: 10px; font-weight: 700; color: var(--muted); width: 22px; flex: 0 0 22px; }
.filter-cond select, .filter-cond input {
    font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border);
    border-radius: 7px; background: var(--surface); color: var(--text); min-width: 0;
}
.filter-cond .f-col { flex: 2 1 0; }
.filter-cond .f-op { flex: 1 1 0; }
.filter-cond .f-val { flex: 1.4 1 0; }
.filter-cond .f-del { flex: 0 0 26px; width: 26px; padding: 6px 0; text-align: center; color: var(--muted); background: none; border: 0; cursor: pointer; font-size: 16px; line-height: 1; }
.filter-cond .f-del:hover { color: var(--bad); }
.filter-addcond { margin-top: 6px; font-size: 12px; color: var(--accent-600); background: none; border: 0; cursor: pointer; padding: 2px 0; }
.filter-panel .f-addgroup { margin-top: 4px; font-size: 12.5px; color: var(--accent-600); background: none; border: 1px dashed var(--border); border-radius: 8px; cursor: pointer; padding: 7px; width: 100%; }
.filter-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.filter-actions .spacer { flex: 1; }
.filter-presets { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.filter-presets-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.preset-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; margin: 0 6px 6px 0; border: 1px solid var(--border); border-radius: 20px; font-size: 12.5px; cursor: pointer; background: var(--surface); }
.preset-chip:hover { border-color: var(--accent); }
.preset-chip .x { color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; }
.preset-chip .x:hover { color: var(--bad); }
.preset-save { display: flex; gap: 6px; margin-top: 4px; }
.preset-save input { flex: 1; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; }
.data-table tbody tr.f-hidden { display: none; }
.data-table tbody td.copyable { cursor: copy; }   /* копируются только ID (кампании, группы, объявления) */
.data-table tbody td.copied { background: var(--good-tint) !important; }
.copy-toast {
    position: fixed; z-index: 200; transform: translateX(-50%);
    background: var(--text); color: #fff; font-size: 12px; font-weight: 500;
    padding: 4px 9px; border-radius: 6px; pointer-events: none; box-shadow: var(--shadow);
}
.copy-toast[hidden] { display: none; }

/* Подсветка строк-дублей и метка «в выручке» (клиенты) */
.data-table tbody tr.dup-row td { background: var(--warn-tint); }
.dup-badge { color: var(--warn); font-weight: 700; font-size: 11px; margin-left: 4px; }
.rev-yes { color: var(--good); font-weight: 700; }
.rev-no { color: var(--muted); }

/* ---------- Логин ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px;
    background: radial-gradient(1200px 600px at 50% -10%, #e8f0ff 0%, var(--bg) 55%); }
.login-card {
    width: 100%; max-width: 380px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 18px; padding: 32px 30px;
    box-shadow: var(--shadow);
}
.login-card .brand { padding: 0 0 22px; }
.login-card label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.login-card input {
    width: 100%; padding: 11px 12px; margin-bottom: 16px;
    border: 1px solid var(--border); border-radius: 10px; font: inherit;
    background: var(--surface-2); transition: border-color .12s, background .12s;
}
.login-card input:focus { outline: none; border-color: var(--accent); background: #fff; }
.login-card .btn { width: 100%; padding: 11px; font-size: 15px; }
.login-err { color: var(--bad); font-size: 13px; margin-bottom: 12px; background: var(--bad-tint); padding: 8px 12px; border-radius: 8px; }

/* ---------- KPI-карточки (Дашборд) ---------- */
.kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 14px;
}
.kpi {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: clamp(10px, 1vw, 16px) clamp(12px, 1.1vw, 18px);
}
.kpi .kv { font-size: clamp(18px, 1.5vw, 24px); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .kv.good { color: var(--good); } .kpi .kv.warn { color: var(--warn); } .kpi .kv.bad { color: var(--bad); }
.kpi .kl { margin-top: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* ---------- График динамики ---------- */
.chart-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend .lg::before { content: ''; width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.chart-legend .lg-rev::before { background: rgba(47,128,237,.55); }
.chart-legend .lg-leads::before { background: var(--muted); border-radius: 50%; }
.chart-legend .lg-orders::before { background: var(--good); border-radius: 50%; }
.chart { width: 100%; height: clamp(180px, 22vw, 240px); display: block; overflow: visible; }
.chart .grid { stroke: var(--border-soft); stroke-width: 1; }
.chart .bar-rev { fill: rgba(47,128,237,.5); }
.chart .bar-rev:hover { fill: var(--accent); }
.chart .line-leads { fill: none; stroke: var(--muted); stroke-width: 2; }
.chart .line-orders { fill: none; stroke: var(--good); stroke-width: 2; }
.chart-x { position: relative; height: 16px; margin-top: 2px; font-size: 10px; color: var(--muted); }
.chart-x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

/* ---------- Воронка ---------- */
.funnel { padding: 16px clamp(12px, 1.4vw, 22px) 6px; }
.funnel-stage { margin-bottom: 4px; }
.funnel-bar-wrap { display: flex; align-items: center; gap: 12px; }
.funnel-bar {
    background: linear-gradient(90deg, var(--accent), #6aa6ff);
    color: #fff; border-radius: 8px; min-height: 38px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 14px; gap: 14px; transition: width .3s ease; min-width: 120px;
}
.funnel-name { font-weight: 600; white-space: nowrap; }
.funnel-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.funnel-pct { color: var(--text-2); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.funnel-link { display: flex; align-items: center; gap: 12px; padding: 5px 0 5px 14px; font-size: 12px; }
.funnel-conv { font-size: 12px; }
.funnel-lost { color: var(--muted); }

/* ---------- Когортный мини-бар ---------- */
.cohort-cell { display: flex; flex-direction: column; gap: 4px; }
.cohort-bar { display: block; height: 4px; width: 100%; max-width: 160px; background: var(--border-soft); border-radius: 3px; overflow: hidden; }
.cohort-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* ---------- Бейдж статуса (как на старом дашборде) ---------- */
.status-cell { white-space: nowrap; }
.status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px 3px 8px; border-radius: 20px;
    font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.status-badge svg { width: 13px; height: 13px; flex: 0 0 13px; }
.status-badge-active  { background: var(--good-tint); color: var(--good); }
.status-badge-stopped { background: var(--bad-tint);  color: var(--bad); }
.status-badge-warn    { background: var(--warn-tint); color: var(--warn); }
.status-badge-deleted { background: var(--surface-2); color: var(--muted); }
.status-badge-other   { background: var(--surface-2); color: var(--text-2); }
.status-badge-other svg, .status-badge-deleted svg { width: 9px; height: 9px; flex-basis: 9px; }

/* ---------- Дрилл-ячейки (сверка) ---------- */
/* Вся ячейка ведёт в «Клиенты и заказы». Подсветка при наведении
   подсказывает, что цифру можно «раскрыть». */
.data-table tbody td[data-drill] { position: relative; cursor: pointer; }
.data-table tbody td[data-drill]::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; right: 0;
    background: linear-gradient(90deg, rgba(47,128,237,.12), transparent);
    opacity: 0; transition: opacity .1s; pointer-events: none;
}
.data-table tbody td[data-drill]:hover::before { opacity: 1; }
.data-table tbody td[data-drill]::after {
    content: '⤢';
    position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    font-size: 10px; color: var(--accent); opacity: 0; transition: opacity .1s; pointer-events: none;
}
.data-table tbody td[data-drill]:hover::after { opacity: .9; }

/* Ссылки-дриллы на нетабличных показателях (лента, воронка, KPI) */
.stat .v a { color: inherit; border-bottom: 1px dashed var(--muted); }
.stat .v a:hover { color: var(--accent-600); border-color: var(--accent); }
.kpi .kv a { color: inherit; border-bottom: 1px dashed var(--border); }
.kpi .kv a:hover { color: var(--accent-600); }
.funnel-bar a.funnel-count { color: #fff; text-decoration: underline; text-underline-offset: 2px; text-decoration-style: dotted; }
.funnel-bar a.funnel-count:hover { text-decoration-style: solid; }

/* ---------- Баннер сверки на «Клиенты и заказы» ---------- */
.drill-banner {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    background: var(--accent-tint); border: 1px solid var(--accent);
    border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 14px;
    color: var(--accent-600); font-size: 13px;
}
.drill-banner-title { font-weight: 700; }
.drill-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; color: var(--text); }
.drill-chip b { color: var(--muted); font-weight: 600; }
.drill-reset { margin-left: auto; color: var(--accent-600); font-weight: 600; }
.drill-reset:hover { color: var(--bad); }

/* ---------- Мелочи ---------- */
.empty { text-align: center; color: var(--muted); padding: 28px 0; }

@media (max-width: 880px) {
    .sidebar { display: none; }
    .content { padding: 16px; }
    .topbar { padding: 0 16px; }
}

/* Страница менеджеров: переключатель режима, разворот отделов */
.page-head { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 4px; }
.mode-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mode-switch .seg { padding: 6px 14px; font-size: 13px; color: var(--text-2); text-decoration: none; }
.mode-switch .seg.active { background: var(--accent); color: #fff; }
.mode-hint { margin: 2px 0 16px; color: var(--muted); }
.mgr-table .row-dept { font-weight: 600; background: var(--surface-2); }
.mgr-table .row-mgr .mgr-name { padding-left: 32px; font-weight: 400; }
.dept-toggle { border: none; background: none; cursor: pointer; font-size: 14px; margin-right: 6px; color: var(--muted); }
/* Метки эффективности: тест / основа / сжигает */
.badge-eff {
    display: inline-block; min-width: 16px; height: 16px; line-height: 16px;
    border-radius: 4px; font-size: 11px; font-weight: 600; text-align: center;
    margin-right: 5px; padding: 0 3px; cursor: help; float: left;
}
.badge-test { background: var(--accent-tint); color: var(--accent); }
.badge-core { background: var(--good-tint, #e7f7ee); color: var(--good, #16a34a); }
.badge-burn { background: var(--bad-tint, #fdeaea); color: var(--bad, #ef4444); }
.badge-chips { display: inline-flex; gap: 6px; margin-left: 12px; }
.badge-chip {
    border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
    padding: 3px 10px; font-size: 12px; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.badge-chip:hover { border-color: var(--accent); color: var(--accent); }
.badge-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* История сущности по дням: кнопка у названия + выезжающая панель */
.dynamics-btn {
    border: none; background: none; cursor: pointer; padding: 0 5px 0 0;
    color: var(--muted); line-height: 1;
    /* float, а не inline: .nm/.ad-name — блоки с overflow:hidden, они обтекают
       кнопку и встают в одну строку с иконкой вместо переноса под неё */
    float: left; margin-top: 2px;
}
.dynamics-btn:hover { color: var(--accent); }
.dyn-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 40; }
.dyn-drawer {
    position: fixed; right: 0; top: 0; bottom: 0; width: min(1180px, 96vw); z-index: 41;
    background: var(--surface); border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(15, 23, 42, .12); display: flex; flex-direction: column;
}
/* Панель закрыта по умолчанию: display у классов перебивает браузерное [hidden] */
.dyn-overlay[hidden], .dyn-drawer[hidden] { display: none; }
.dyn-head {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.dyn-title { font-size: 15px; font-weight: 600; }
.dyn-sub { font-size: 12px; color: var(--muted); }
.dyn-groups { margin-left: auto; display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.dyn-group { border: none; background: none; padding: 6px 14px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.dyn-group.active { background: var(--accent); color: #fff; }
.dyn-close { border: none; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }
.dyn-close:hover { color: var(--text); }
.dyn-body { flex: 1; overflow: auto; padding: 12px 18px 18px; }
.dyn-loading, .dyn-error, .dyn-empty { padding: 24px; color: var(--muted); }
.dyn-error { color: var(--bad); }
.dyn-table { font-size: 12px; }
.dyn-table tbody tr.dyn-total td { font-weight: 600; background: var(--surface-2); }
.data-table tr.row-ad .ad-name { overflow: hidden; }

/* Разворот дня до объявлений на странице «по дням» */
.day-toggle { border: none; background: none; cursor: pointer; font-size: 14px; margin-right: 6px; color: var(--muted); }
.data-table tr.row-ad td { background: var(--surface-2); font-weight: 400; }
.data-table tr.row-ad .ad-name { padding-left: 28px; }
.data-table tr.row-ad-tail td { font-style: italic; }
.data-table tr.row-tail-item .ad-name-deep { padding-left: 46px; }
.data-table tr.row-acc td { background: var(--surface-2); }
.data-table tr.row-acc .acc-name { padding-left: 28px; font-weight: 500; }
.data-table tr.row-ad .ad-name.lvl-acc { padding-left: 46px; }
.data-table tr.row-tail-item .ad-name-deep.lvl-acc { padding-left: 64px; }
.data-table tr.row-acc-msg td { padding-left: 46px; font-style: italic; }
.link-btn {
    border: none; background: none; padding: 0; font: inherit; cursor: pointer;
    color: var(--accent); text-decoration: underline;
}
.link-btn:hover { color: var(--accent-600); }
.data-table tr.row-tail-item td { color: var(--text-2); }
.data-table tr.row-tail-more td { font-style: italic; }
.badge-off { font-size: 11px; color: var(--bad); background: var(--bad-tint); border-radius: 4px; padding: 0 5px; }

/* Предпросмотр креатива: кнопка у названия + модальное окно */
.creative-btn {
    border: none; background: none; cursor: pointer; padding: 0 5px 0 0;
    color: var(--muted); line-height: 1; float: left; margin-top: 2px;
}
.creative-btn:hover { color: var(--accent); }
.crv-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 50; }
.crv-modal {
    position: fixed; z-index: 51; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(560px, 94vw); max-height: 90vh; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 18px 48px -16px rgba(15, 23, 42, .45);
}
.crv-overlay[hidden], .crv-modal[hidden] { display: none; }
.crv-head {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.crv-title { font-size: 14px; font-weight: 600; }
.crv-head .dyn-close { margin-left: auto; }
.crv-body { padding: 14px 16px 18px; overflow: auto; }
.crv-loading, .crv-empty { color: var(--muted); padding: 18px 0; }
.crv-error { color: var(--bad); padding: 12px 0; }
.crv-retry {
    border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
    padding: 3px 10px; font: inherit; font-size: 12px; color: var(--text-2); cursor: pointer;
}
.crv-stage { display: flex; justify-content: center; background: var(--surface-2); border-radius: var(--radius-sm); }
.crv-media { max-width: 100%; max-height: 52vh; border-radius: var(--radius-sm); }
.crv-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.crv-thumb {
    border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
    padding: 3px 10px; font: inherit; font-size: 12px; color: var(--text-2); cursor: pointer;
}
.crv-thumb.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.crv-note { margin-top: 10px; font-size: 12px; color: var(--warn); }
.crv-ad-title { margin-top: 14px; font-size: 15px; font-weight: 600; }
.crv-ad-text { margin-top: 6px; color: var(--text-2); white-space: pre-line; }
.crv-cta { display: inline-block; margin-top: 12px; font-weight: 600; }
.crv-cta-off { color: var(--muted); font-weight: 500; }
.crv-legal { margin-top: 12px; font-size: 11px; color: var(--muted); }

/* ===== Страница «Эффективность»: сетка день × объявление ===== */
/* Фильтры-переключатели в шапке карточки — те же чипы, что у меток эффективности. */
a.badge-chip { text-decoration: none; }
.eff-note { padding: 0 16px 10px; font-size: clamp(10.5px, 0.72vw, 12px); color: var(--muted); }

.eff-wrap { max-height: calc(100vh - 300px); }
.eff-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.eff-table th, .eff-table td { vertical-align: top; }
.eff-table .eff-name { width: 360px; min-width: 360px; position: sticky; left: 0; z-index: 2; background: var(--surface); }
/* Шапка — на общем сером фоне таблиц дашборда (.data-table thead th). */
.eff-table thead th { position: sticky; z-index: 3; background: var(--surface-2); }
/* Высота строки дат задана жёстко и совпадает с top строки сводки: иначе между
   двумя «липкими» строками остаётся щель, сквозь которую едет содержимое. */
.eff-table thead tr:first-child th { top: 0; height: 34px; box-sizing: border-box; }
.eff-table thead tr.eff-summary th { top: 34px; }
.eff-table thead th.eff-name { z-index: 4; }
.eff-table .eff-day { width: 160px; min-width: 160px; text-align: left; }

/* Размеры шрифтов — clamp'ами, как во всём дашборде (.data-table, .stat). */
.eff-ad-title, .eff-acc-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eff-ad-id, .eff-ad-path, .eff-acc-sub { font-size: clamp(9.5px, 0.68vw, 11px); color: var(--muted);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Шапка ячейки (название, ID, путь): отступ справа резервирует место под
   крупную плашку зоны, чтобы текст не заезжал под неё. */
.eff-head { padding-right: 96px; }
/* Итоги за период под названием: две ровные строки метрик на всю ширину. */
.eff-tot { display: flex; gap: 6px; align-items: center; font-size: clamp(9.5px, 0.68vw, 11px);
           color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; }
.eff-tot .dot { color: var(--border, #d5dae1); }
/* Плашка зоны — главный сигнал строки: крупный ДРР (или «Нет продаж» /
   «Нет расхода») в правом верхнем углу ячейки. Контейнер позиционирования —
   сам td.eff-name: sticky тоже создаёт containing block для absolute. */
.eff-zone { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column;
            align-items: center; justify-content: center; min-width: 64px; max-width: 88px;
            padding: 5px 10px; border-radius: 8px; text-align: center;
            font-size: clamp(14px, 1.05vw, 17px); font-weight: 700; line-height: 1.15; }
.eff-zone small { font-size: clamp(8.5px, 0.6vw, 10px); font-weight: 600;
                  letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.eff-zone.zone-green  { background: var(--good-tint, #e7f7ee); color: var(--good, #16a34a); }
.eff-zone.zone-yellow { background: var(--warn-tint, #fff6e5); color: var(--warn, #d97706); }
.eff-zone.zone-red, .eff-zone.zone-nosales { background: var(--bad-tint, #fdeaea); color: var(--bad, #ef4444); }
/* Текстовые плашки («Нет продаж», «Нет расхода») — чуть мельче цифры ДРР. */
.eff-zone.zone-nosales, .eff-zone.zone-nospend { font-size: clamp(11px, 0.8vw, 13px); white-space: normal; }
.eff-zone.zone-nospend { background: var(--surface-2); color: var(--muted); }

/* Дневные ячейки: базовый nowrap таблиц тут вреден — длинная строка (шестизначный
   расход + лиды) вылезала в соседнюю ячейку. Переносим по словам внутри ячейки. */
.eff-cell { border-left: 1px solid var(--border, #eceff3); }
/* Селектор с tbody — иначе базовый nowrap таблиц (.data-table tbody td)
   перебивает по специфичности, и длинная строка вылезает в соседнюю ячейку. */
.eff-table tbody td.eff-cell { white-space: normal; }
.eff-cell span { white-space: nowrap; }
/* Расход и лиды — flex-парой без «·»: пока влезают, стоят рядом; при нехватке
   ширины «Лиды N» опускаются на строку ниже без болтающегося разделителя. */
.cell-spend { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 8px; }

/* Третий уровень разворота: строки отдельных объявлений креатива —
   с отступом и приглушённо, чтобы читались как вложенные. */
.eff-row-ent .eff-name { padding-left: 34px; }
.eff-row-ent .eff-ad-id { color: var(--text-2, #4b5563); font-weight: 600; }

/* «Этот креатив есть в другом кабинете» — мелкая строка-ссылка в шапке ячейки. */
.eff-elsewhere { font-size: clamp(9.5px, 0.68vw, 11px); color: var(--muted);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eff-elsewhere a { color: var(--accent, #3b82f6); text-decoration: none; }
.eff-elsewhere a:hover { text-decoration: underline; }

/* Подсветка строки, к которой привела ссылка ?hl= из другого кабинета. */
@keyframes effRowHl {
    0%, 60% { box-shadow: inset 0 0 0 999px rgba(59, 130, 246, .14); }
    100%    { box-shadow: none; }
}
.eff-row-hl td { animation: effRowHl 2.6s ease-out; }
.eff-cell[data-cell-name] { cursor: pointer; }
.eff-cell[data-cell-name]:hover { outline: 1px solid var(--accent); outline-offset: -1px; }
.cell-drr { font-size: clamp(12.5px, 0.92vw, 15px); font-weight: 700; line-height: 1.25; }
.cell-spend { font-size: clamp(9.5px, 0.68vw, 11px); font-weight: 600; }
.cell-sales { font-size: clamp(9.5px, 0.68vw, 11px); }
.cell-cpl { font-size: clamp(9.5px, 0.68vw, 11px); color: var(--muted); }
.cell-dash { color: var(--muted); }

.cell-green { background: var(--good-tint, #e7f7ee); } .cell-green .cell-drr { color: var(--good, #16a34a); }
.cell-yellow { background: var(--warn-tint, #fff6e5); } .cell-yellow .cell-drr { color: var(--warn, #d97706); }
.cell-red, .cell-nosales { background: var(--bad-tint, #fdeaea); }
.cell-red .cell-drr, .cell-nosales .cell-drr { color: var(--bad, #ef4444); }
.cell-nosales .cell-drr { font-size: 13px; }
/* Продажи есть, а расхода нет — судить не о чем: нейтральный фон, не зелёный. */
.cell-nospend { background: var(--surface-2); }
.cell-nospend .cell-drr { color: var(--muted); font-size: clamp(10.5px, 0.75vw, 12.5px); }
.eff-table tbody tr:hover td.cell-nospend { background: var(--surface-2); }
.cell-none { background: transparent; }

/* Наведение на строку (.data-table tbody tr:hover td) иначе перебивает цвет
   зоны — а цвет зоны и есть смысл этой страницы. Специфичность выше за счёт
   класса .eff-table и селектора по td.cell-*. */
.eff-table tbody tr:hover td.cell-green  { background: var(--good-tint, #e7f7ee); }
.eff-table tbody tr:hover td.cell-yellow { background: var(--warn-tint, #fff6e5); }
.eff-table tbody tr:hover td.cell-red,
.eff-table tbody tr:hover td.cell-nosales { background: var(--bad-tint, #fdeaea); }