/* TSK Group CRM v3.0 — стили отчётов (rp-*).
   Базовые модули (base/components/layout/...) подключены отдельными <link>
   в index.html ПЕРЕД этим файлом — порядок каскада сохранён. */

/* Секция отчётов кладёт контент напрямую в .document-section (overflow:hidden),
   без .table-container как у списков — поэтому даём вертикальный скролл самой секции.
   Иначе высокий контент (KPI + графики + таблицы) обрезается без скроллбара. */
#reportsSection {
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- REPORTS PREMIUM UI FIXES --- */
.rp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
/* Единственное определение карточки KPI. Раньше их было два: этот блок и
   такой же в конце файла (перенесённый из инлайн-<style>), который молча
   перебивал border/radius/padding — правка «верхнего» ничего не меняла. */
.rp-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.rp-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--primary) 25%, transparent);
}
.rp-kpi-label {
    font-size: var(--text-2xs);
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rp-kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
/* Токены, а не хардкод: раньше здесь стоял rgba(30,41,59,.7) !important —
   в светлой теме тулбар оставался тёмно-синим, а подпись «Период:»
   (var(--text-muted)) сливалась с ним до нечитаемости. */
.reports-toolbar {
    background: color-mix(in srgb, var(--surface) 82%, transparent) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm);
}
.chart-card {
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border) !important;
}

/* --- Skeleton loaders --- */
@keyframes rp-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.rp-skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.04) 100%);
    background-size: 800px 100%;
    animation: rp-shimmer 1.4s linear infinite;
    border-radius: var(--radius-sm);
    display: inline-block;
}
/* На светлом фоне белый градиент невидим — скелетон выглядел бы «пустотой» */
[data-theme="light"] .rp-skeleton {
    background: linear-gradient(90deg,
        rgba(15,23,42,0.04) 0%,
        rgba(15,23,42,0.09) 50%,
        rgba(15,23,42,0.04) 100%);
    background-size: 800px 100%;
}
.rp-kpi-skeleton {
    height: 88px;
}
.rp-chart-skeleton {
    width: 100%;
    height: 100%;
    min-height: 260px;
    border-radius: var(--radius-sm);
}
.rp-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 220px;
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
    padding: 20px;
}
.rp-empty i {
    margin-right: 6px;
    opacity: 0.5;
}

/* --- Clickable chart/row affordance --- */
.rp-tab {
    transition: background 0.15s, border-color 0.15s;
}
.rp-tab:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
}
/* Hover строк менеджеров/воронки/застрявших не дублируем: эти строки получают
   класс .is-clickable (a11y.js) и единый паттерн из components.css. */

/* Кликабельные KPI-карточки (drill-down) */
.rp-kpi-clickable {
    cursor: pointer;
}
.rp-kpi-clickable:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    box-shadow: var(--shadow);
}
/* Итоговая строка таблицы менеджеров */
.rp-managers-total td {
    font-weight: 700;
    border-top: 2px solid var(--border);
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

/* --- Responsive: collapse report grids on narrow screens --- */
@media (max-width: 960px) {
    #reportsSection .reports-toolbar {
        position: static !important;
    }
    #reportsSection > div[style*="grid-template-columns:2fr 1fr"],
    #reportsSection > div[style*="grid-template-columns: 2fr 1fr"],
    #reportsSection > div[style*="grid-template-columns:1fr 1fr"],
    #reportsSection > div[style*="grid-template-columns: 1fr 1fr"],
    #reportsSection > div[style*="grid-template-columns:1fr 1fr 1fr"],
    #reportsSection > div[style*="grid-template-columns: 1fr 1fr 1fr"],
    #rpPaneFunnel > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    #rpPaneSummary > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    .rp-kpi-value {
        font-size: var(--text-2xl);
    }
    .reports-toolbar .form-control {
        max-width: 100% !important;
        flex: 1 1 140px;
    }
    #rpDrillModal .modal-content {
        max-width: 96vw !important;
    }
}
@media (max-width: 600px) {
    .rp-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    }
    .rp-kpi-value {
        font-size: 18px;
    }
}


/* --- Перенесено из инлайн-блока <style> в index.html.
   Дубль .rp-kpi-card убран — его свойства слиты в единственное определение
   выше по файлу (см. комментарий там). --- */
.rp-tab.active { color: var(--text) !important; border-bottom-color: var(--primary) !important; }
.rp-tab:hover { color: var(--text); }
.rp-kpi-card .rp-kpi-label { font-size:var(--text-2xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.rp-kpi-card .rp-kpi-value { font-size:var(--text-2xl); font-weight: 700; color: var(--text); }
.rp-kpi-card .rp-kpi-delta { font-size:var(--text-2xs); font-weight: 500; display:inline-flex; align-items:center; gap:3px; }
.rp-kpi-card .rp-kpi-delta.up { color: var(--success); }
.rp-kpi-card .rp-kpi-delta.down { color: var(--danger); }
.rp-kpi-card .rp-kpi-delta.flat { color: var(--text-muted); }
/* Итоговая строка и заглушки — не кликабельны; строки менеджеров курсор
   получают из общего паттерна .is-clickable, поэтому :not() обязателен. */
#rpManagersBody tr:not(.is-clickable) { cursor: default; }
#rpManagersTable th.sortable-th { cursor: pointer; user-select: none; }
#rpManagersTable th.sortable-th:hover { color: var(--primary); }