/**
 * Тема в стиле Yandex DataLens / Gravity UI (светлая аналитическая панель).
 * Подключается из header_styles() на всех страницах приложения.
 */
:root {
    --dl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --dl-bg-page: #eef0f4;
    --dl-bg-surface: #ffffff;
    --dl-bg-secondary: #f5f6f8;
    --dl-bg-hover: #f0f1f4;
    --dl-border: rgba(0, 0, 0, 0.08);
    --dl-border-strong: rgba(0, 0, 0, 0.15);
    --dl-text-primary: rgba(0, 0, 0, 0.85);
    --dl-text-secondary: rgba(0, 0, 0, 0.55);
    --dl-text-hint: rgba(0, 0, 0, 0.4);
    --dl-primary: #4c82ff;
    --dl-primary-hover: #3a6fe8;
    --dl-primary-active: #2f5fd4;
    --dl-primary-muted: rgba(76, 130, 255, 0.12);
    --dl-primary-text: #ffffff;
    --dl-danger: #e9033a;
    --dl-danger-bg: #fff0f3;
    --dl-success: #2fc26e;
    --dl-info-bg: #e8f0ff;
    --dl-info-text: #1a5ad9;
    --dl-radius-xs: 4px;
    --dl-radius-s: 6px;
    --dl-radius-m: 8px;
    --dl-radius-l: 12px;
    --dl-shadow-s: 0 1px 3px rgba(0, 0, 0, 0.06);
    --dl-shadow-m: 0 4px 16px rgba(0, 0, 0, 0.08);
    --dl-focus-ring: 0 0 0 2px rgba(76, 130, 255, 0.35);
}

/* ——— Базовая страница ——— */
html {
    font-size: 14px;
}

body {
    font-family: var(--dl-font) !important;
    background: var(--dl-bg-page) !important;
    color: var(--dl-text-primary) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    background: var(--dl-bg-page) !important;
    box-shadow: none !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
    background: var(--dl-bg-page) !important;
    padding: 20px 24px 28px !important;
}

/* ——— Кнопки ——— */
.btn,
button.btn,
.back-btn {
    background: var(--dl-primary) !important;
    color: var(--dl-primary-text) !important;
    border: 1px solid var(--dl-primary) !important;
    border-radius: var(--dl-radius-s) !important;
    font-family: var(--dl-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
    text-decoration: none !important;
    display: inline-block;
    line-height: 1.35;
}

.btn:hover,
button.btn:hover,
.back-btn:hover {
    background: var(--dl-primary-hover) !important;
    border-color: var(--dl-primary-hover) !important;
    color: var(--dl-primary-text) !important;
    transform: none !important;
    box-shadow: var(--dl-shadow-s) !important;
}

.btn:active,
button.btn:active,
.back-btn:active {
    background: var(--dl-primary-active) !important;
    border-color: var(--dl-primary-active) !important;
    transform: none !important;
}

/* Вторичные / сброс / серые кнопки */
.btn[style*="6c757d"],
button[style*="6c757d"],
#pmTimeResetBtn,
#reportsBuildBtn + button,
.filters-actions-row button[style*="6c757d"],
.filters-actions-row .btn[style*="background: #6c757d"],
button.btn-secondary,
.btn-secondary {
    background: var(--dl-bg-surface) !important;
    color: var(--dl-text-primary) !important;
    border: 1px solid var(--dl-border-strong) !important;
}

.btn[style*="6c757d"]:hover,
button[style*="6c757d"]:hover,
#pmTimeResetBtn:hover,
.btn-secondary:hover {
    background: var(--dl-bg-hover) !important;
    border-color: var(--dl-border-strong) !important;
    color: var(--dl-text-primary) !important;
}

.quick-period-btn {
    background: var(--dl-bg-surface) !important;
    color: var(--dl-text-secondary) !important;
    border: 1px solid var(--dl-border) !important;
    border-radius: var(--dl-radius-s) !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}

.quick-period-btn:hover {
    background: var(--dl-primary-muted) !important;
    border-color: var(--dl-primary) !important;
    color: var(--dl-primary) !important;
}

.quick-period-btn:active {
    background: var(--dl-primary-muted) !important;
}

/* ——— Поля ввода ——— */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea,
.date-range-input,
.dept-emp-input,
.filter-group input,
.filter-group select {
    font-family: var(--dl-font) !important;
    font-size: 13px !important;
    color: var(--dl-text-primary) !important;
    background: var(--dl-bg-surface) !important;
    border: 1px solid var(--dl-border-strong) !important;
    border-radius: var(--dl-radius-s) !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

input:focus,
select:focus,
textarea:focus,
.date-range-input:focus {
    outline: none !important;
    border-color: var(--dl-primary) !important;
    box-shadow: var(--dl-focus-ring) !important;
}

.filter-group label,
.filters label {
    color: var(--dl-text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* ——— Фильтры и карточки ——— */
.filters,
.filter-panel,
.pie-chart-wrapper,
.pm-bar-chart-wrapper,
.pm-summary-table-wrap,
.chart-container,
.report-card,
.time-kpi-card,
.pm-mgmt-kpi-card,
.pie-charts-container .pie-chart-wrapper,
.dept-emp-dropdown {
    background: var(--dl-bg-surface) !important;
    border: 1px solid var(--dl-border) !important;
    border-radius: var(--dl-radius-m) !important;
    box-shadow: var(--dl-shadow-s) !important;
}

.filters {
    padding: 16px 18px !important;
    gap: 14px !important;
}

.filters h2 {
    color: var(--dl-text-primary) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* ——— Таблицы ——— */
table,
.report-table,
.pm-summary-table,
.table-container table {
    border-collapse: collapse;
    font-size: 13px;
    background: var(--dl-bg-surface);
    border: 1px solid var(--dl-border);
    border-radius: var(--dl-radius-m);
    overflow: hidden;
}

table th,
.report-table th,
.pm-summary-table th {
    background: var(--dl-bg-secondary) !important;
    color: var(--dl-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    border-bottom: 1px solid var(--dl-border) !important;
    padding: 10px 12px !important;
    text-align: left;
}

table td,
.report-table td,
.pm-summary-table td {
    border-bottom: 1px solid var(--dl-border) !important;
    padding: 8px 12px !important;
    color: var(--dl-text-primary);
}

table tbody tr:hover td {
    background: var(--dl-bg-hover);
}

table tbody tr:last-child td {
    border-bottom: none !important;
}

/* ——— Сообщения ——— */
.error,
.alert-danger {
    background: var(--dl-danger-bg) !important;
    color: var(--dl-danger) !important;
    border: 1px solid rgba(233, 3, 58, 0.2) !important;
    border-radius: var(--dl-radius-m) !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
}

.info,
.alert-info {
    background: var(--dl-info-bg) !important;
    color: var(--dl-info-text) !important;
    border: 1px solid rgba(76, 130, 255, 0.25) !important;
    border-radius: var(--dl-radius-m) !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
}

.loading {
    color: var(--dl-text-secondary) !important;
    font-size: 14px !important;
}

/* ——— Заголовки страниц в контенте ——— */
.content > h2,
.pm-summary-table-wrap > h2,
.chart-container > h2 {
    color: var(--dl-text-primary) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 14px !important;
}

/* ——— KPI / виджеты ——— */
.time-kpi-card,
.pm-mgmt-kpi-card {
    border-radius: var(--dl-radius-m) !important;
}

.time-kpi-card--total,
.pm-mgmt-kpi-card--accent {
    border-color: rgba(76, 130, 255, 0.25) !important;
    background: linear-gradient(180deg, #f4f7ff 0%, var(--dl-bg-surface) 100%) !important;
}

.time-kpi-card-value,
.pm-mgmt-kpi-value {
    color: var(--dl-text-primary) !important;
}

.time-kpi-card-sub strong,
.pm-mgmt-kpi-value--pct {
    color: var(--dl-primary) !important;
}

/* ——— Flatpickr ——— */
.flatpickr-calendar {
    font-family: var(--dl-font) !important;
    border-radius: var(--dl-radius-m) !important;
    border: 1px solid var(--dl-border) !important;
    box-shadow: var(--dl-shadow-m) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--dl-primary) !important;
    border-color: var(--dl-primary) !important;
}

.flatpickr-day.inRange {
    background: var(--dl-primary-muted) !important;
    border-color: var(--dl-primary-muted) !important;
}

/* ——— Dropdown фильтров ——— */
.dept-emp-dropdown {
    border-radius: var(--dl-radius-m) !important;
    box-shadow: var(--dl-shadow-m) !important;
    border: 1px solid var(--dl-border) !important;
}

.dept-emp-controls {
    padding: 4px 8px !important;
    background: var(--dl-bg-secondary) !important;
    border-bottom: 1px solid var(--dl-border) !important;
}

.dept-emp-controls-row {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.dept-emp-controls button,
.dept-emp-controls-row button,
.dropdown-controls button {
    padding: 2px 6px !important;
    min-height: 0 !important;
    background: var(--dl-bg-surface) !important;
    border: 1px solid var(--dl-border) !important;
    color: var(--dl-text-primary) !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    cursor: pointer;
}

.dept-emp-controls button:hover,
.dept-emp-controls-row button:hover,
.dropdown-controls button:hover {
    background: var(--dl-bg-hover, #eef1f4) !important;
}

.dropdown-controls {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--dl-border);
    background: var(--dl-bg-secondary);
}

.dept-emp-dept-row:hover,
.dept-emp-emp-row:hover,
.dept-emp-item:hover {
    background: var(--dl-bg-hover) !important;
}

/* ——— Отчёты — карточки списка ——— */
.report-card {
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.report-card:hover {
    border-color: var(--dl-primary) !important;
    box-shadow: var(--dl-shadow-m) !important;
    transform: translateY(-1px) !important;
}

.report-card h3 {
    color: var(--dl-text-primary) !important;
}

.report-card p {
    color: var(--dl-text-secondary) !important;
}

/* ——— Подсказки в заголовках таблиц ——— */
.col-header-info {
    border-color: var(--dl-border-strong) !important;
    background: var(--dl-bg-secondary) !important;
    color: var(--dl-text-secondary) !important;
}

.col-header-info:focus-visible {
    outline: 2px solid var(--dl-primary) !important;
}

.col-header-help-popover {
    border-radius: var(--dl-radius-m) !important;
    border: 1px solid var(--dl-border) !important;
    box-shadow: var(--dl-shadow-m) !important;
}

/* ——— Тур по странице ——— */
.page-tour-btn-primary {
    background: var(--dl-primary) !important;
    border-color: var(--dl-primary) !important;
}

.page-tour-card {
    border-radius: var(--dl-radius-m) !important;
    box-shadow: var(--dl-shadow-m) !important;
}

/* ——— Шапка (дополнительно к _header.html) ——— */
.header-row {
    border-bottom: 1px solid var(--dl-border);
}

/* ——— Модальные окна (admin и др.) ——— */
.modal-overlay,
.modal-backdrop {
    background: rgba(0, 0, 0, 0.35) !important;
}

.modal,
.modal-content,
.modal-dialog {
    border-radius: var(--dl-radius-m) !important;
    border: 1px solid var(--dl-border) !important;
    box-shadow: var(--dl-shadow-m) !important;
}

/* ——— Alpine / вкладки админки ——— */
[role="tablist"] button,
.tabs button,
.tab-btn {
    font-family: var(--dl-font);
    font-size: 13px;
}

/* ——— Ссылки в контенте ——— */
.content a:not(.btn):not(.back-btn):not(.header-nav-link):not(.report-card) {
    color: var(--dl-primary);
    text-decoration: none;
}

.content a:not(.btn):not(.back-btn):not(.header-nav-link):not(.report-card):hover {
    text-decoration: underline;
}

/* ——— Чекбоксы ——— */
input[type="checkbox"] {
    accent-color: var(--dl-primary);
}

/* ——— Совместимость: старый тёмный акцент (#1a1a1a) в inline-стилях ——— */
button[style*="1a1a1a"],
input[type="submit"][style*="1a1a1a"],
input[type="button"][style*="1a1a1a"],
a[style*="background: #1a1a1a"],
a[style*="background:#1a1a1a"],
.btn[style*="1a1a1a"] {
    background: var(--dl-primary) !important;
    border-color: var(--dl-primary) !important;
    color: var(--dl-primary-text) !important;
}

button[style*="1a1a1a"]:hover,
input[type="submit"][style*="1a1a1a"]:hover,
a[style*="background: #1a1a1a"]:hover {
    background: var(--dl-primary-hover) !important;
    border-color: var(--dl-primary-hover) !important;
}

/* Заголовки в контенте (перекрывают локальные #1a1a1a) */
.content h1,
.content h2,
.content h3,
.content h4,
.report-card h3,
.login-header h1 {
    color: var(--dl-text-primary) !important;
}

/* Админка: вкладки и активные элементы */
.admin-tabs button.active,
.admin-tab.active,
.tab.active,
[data-active="true"].tab-btn {
    color: var(--dl-primary) !important;
    border-bottom-color: var(--dl-primary) !important;
}

.admin-tabs button,
.admin-tab,
.tab-btn {
    color: var(--dl-text-secondary);
    border-bottom: 2px solid transparent;
}

.admin-tabs button:hover,
.tab-btn:hover {
    color: var(--dl-text-primary);
    background: var(--dl-bg-hover);
}

/* Select2 / Tom Select (если используются) */
.ts-control,
.select2-container--default .select2-selection--single {
    border-color: var(--dl-border-strong) !important;
    border-radius: var(--dl-radius-s) !important;
    font-family: var(--dl-font) !important;
    font-size: 13px !important;
}

/* Chart.js легенда */
.chartjs-legend li,
.chart-legend li {
    font-family: var(--dl-font);
    font-size: 12px;
    color: var(--dl-text-secondary);
}

/* Переключатели вида графика */
.chart-type-toggle button.active,
.chart-toggle-btn.active {
    background: var(--dl-primary-muted) !important;
    color: var(--dl-primary) !important;
    border-color: var(--dl-primary) !important;
}

.chart-type-toggle button,
.chart-toggle-btn {
    background: var(--dl-bg-surface) !important;
    border: 1px solid var(--dl-border-strong) !important;
    color: var(--dl-text-secondary) !important;
    border-radius: var(--dl-radius-s) !important;
    font-size: 12px !important;
}

/* ——— Админ-панель ——— */
.tab.active {
    color: var(--dl-primary) !important;
    border-bottom-color: var(--dl-primary) !important;
    background: var(--dl-primary-muted) !important;
}

.tab:hover {
    color: var(--dl-text-primary) !important;
    background: var(--dl-bg-hover) !important;
}

.admin-section {
    background: var(--dl-bg-secondary) !important;
    border: 1px solid var(--dl-border) !important;
    border-radius: var(--dl-radius-m) !important;
    box-shadow: var(--dl-shadow-s) !important;
}

.admin-section h2 {
    color: var(--dl-text-primary) !important;
}

.info-box {
    background: var(--dl-info-bg) !important;
    border-left-color: var(--dl-primary) !important;
    color: var(--dl-info-text) !important;
}

.btn-danger {
    background: var(--dl-danger) !important;
    border-color: var(--dl-danger) !important;
}

.btn-success {
    background: var(--dl-success) !important;
    border-color: var(--dl-success) !important;
}