/* Дизайн-токены дашборда → Bootstrap (единый стиль со всеми разделами).
   Тёмная тема — через data-bs-theme (ставится в utils.js); Bootstrap-переменные
   адаптируются сами, поэтому отдельный [data-theme=dark] больше не нужен. */
:root {
  --bg:        var(--bs-tertiary-bg);
  --card-bg:   var(--bs-body-bg);
  --border:    var(--bs-border-color);
  --border-strong: var(--bs-border-color);
  --text:      var(--bs-body-color);
  --muted:     var(--bs-secondary-color);
  --blue:      var(--se-blue-ink);
  --green:     var(--bs-success);
  --amber:     var(--bs-warning);
  --red:       var(--bs-danger);
  --purple:    var(--bs-purple);
  --cyan:      var(--bs-cyan);
  --plot-bg:   transparent;
  --plot-grid: var(--bs-border-color);
  --plot-font: var(--bs-body-color);
}

/* Alpine: спрятать до инициализации */
[x-cloak] { display: none !important; }

body           { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; transition: background .2s, color .2s; }
.navbar        { position: sticky; top: 0; z-index: 100; }   /* фон/границы — нативный Bootstrap (bg-body-tertiary) */
.filter-panel  { background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 12px 20px; position: sticky; top: 45px; z-index: 99; }
@media (max-width: 767px) {
  .filter-panel { position: static; padding: 10px 12px; }
  /* поля по 2 в ряд, во всю ширину ячейки */
  .filter-panel > .d-flex { gap: .5rem !important; }
  .filter-panel > .d-flex > div { flex: 1 1 47%; min-width: 47%; }
  .filter-panel .form-select { width: 100% !important; }
  /* input-group во всю ширину, поле растягивается флексом, кнопка остаётся в строке */
  .filter-panel .input-group { width: 100% !important; flex-wrap: nowrap; }
  .filter-panel .input-group > .form-control { width: 1% !important; flex: 1 1 auto; }
  /* ряд кнопок — на всю ширину и переносится */
  .filter-panel > .d-flex > div.d-flex { flex-basis: 100%; min-width: 100%; flex-wrap: wrap; }
  .filter-panel > .d-flex > div.d-flex > * { flex: 1 1 auto; }
  .filter-panel .btn { white-space: nowrap; }
  /* сворачиваемый блок фильтров (управляется Alpine) */
  .filters-collapsed { display: none !important; }
}
.filters-toggle { display: none; }
@media (max-width: 767px) { .filters-toggle { display: inline-flex; } }
.filter-panel label { font-size: .75rem; color: var(--muted); margin-bottom: 2px; }
.filter-panel .form-control,
.filter-panel .form-select {
  background: var(--bg); color: var(--text); border-color: var(--border); font-size: .85rem;
}
.filter-panel .form-control:focus,
.filter-panel .form-select:focus { border-color: var(--blue); box-shadow: none; }

.kpi-card      { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04); transition: background .2s; }
.kpi-label     { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.kpi-value     { font-size: 1.75rem; font-weight: 700; margin: 4px 0 0; line-height: 1; }
.kpi-blue   { color: var(--blue); }
.kpi-green  { color: var(--green); }
.kpi-amber  { color: var(--amber); }
.kpi-purple { color: var(--purple); }
.kpi-cyan   { color: var(--cyan); }

.chart-card    { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04); transition: background .2s; overflow: hidden; }
.chart-title   { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }

.main-content  { padding: 20px; }
.badge-stat    { font-size: .7rem; padding: 3px 8px; border-radius: 20px; }

/* Table theming */
.table          { --bs-table-bg: transparent; --bs-table-border-color: var(--border); --bs-table-color: var(--text); --bs-table-hover-bg: rgba(128,128,128,.07); font-size: .82rem; }
.table thead th { color: var(--muted); font-weight: 600; border-bottom-color: var(--border); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.table tfoot td { border-top: 2px solid var(--border); color: var(--text); }
.hourly-header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }
.hourly-badges  { display: flex; gap: 10px; font-size: .8rem; flex-wrap: wrap; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Бейдж активного фильтра */
.filter-badge { display:inline-block; padding:2px 10px; margin:2px 4px; border-radius:12px; font-weight:600; }

/* Таймер сессии + кнопка продления (единый вид во всех разделах) */
.sess{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .5rem;border-radius:.4rem;font-size:.8rem}
.sess-warn{background:#fff7e6;color:#cf1322;font-weight:700}
.sess-ext{border:0;background:transparent;cursor:pointer;color:inherit;font:inherit;font-size:1rem;line-height:1;padding:0}
.sess-ext:hover{opacity:.6}

/* ===================================================================
   Solux Brand v1 (стиль B Солид-премиум) — единый источник: brand/tokens.json
   Оранжевый = действие (primary), светло-синий = бренд/акцент.
   Переопределяем Bootstrap 5.3.3 CDN (компонентные --bs-btn-* у CDN
   захардкожены — без пересборки SASS их нужно задавать на компонентах).
   =================================================================== */
:root{
  --se-orange:#F57C00; --se-orange-rgb:245,124,0; --se-orange-600:#E66F00; --se-orange-700:#D96400;
  --se-blue:#29B6F6;   --se-blue-rgb:41,182,246;  --se-blue-ink:#0277BD;
  /* Bootstrap primary → бренд-оранжевый; info/link → синий */
  --bs-primary:#F57C00; --bs-primary-rgb:245,124,0;
  --bs-info:#29B6F6;    --bs-info-rgb:41,182,246;
  --bs-link-color:#0277BD; --bs-link-color-rgb:2,119,189; --bs-link-hover-color:#015f97;
  --bs-border-radius:.6rem; --bs-border-radius-sm:.4rem; --bs-border-radius-lg:.9rem;
  --bs-body-font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
}
[data-bs-theme=dark]{
  --se-orange:#FF9800; --se-blue:#4FC3F7; --se-blue-ink:#4FC3F7;
  --bs-primary:#FF9800; --bs-primary-rgb:255,152,0;
  --bs-info:#4FC3F7; --bs-info-rgb:79,195,247;
  --bs-link-color:#4FC3F7; --bs-link-color-rgb:79,195,247; --bs-link-hover-color:#81d4fa;
}
.btn-primary{
  --bs-btn-bg:var(--se-orange); --bs-btn-border-color:var(--se-orange);
  --bs-btn-hover-bg:var(--se-orange-600); --bs-btn-hover-border-color:var(--se-orange-600);
  --bs-btn-active-bg:var(--se-orange-700); --bs-btn-active-border-color:var(--se-orange-700);
  --bs-btn-disabled-bg:var(--se-orange); --bs-btn-disabled-border-color:var(--se-orange);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
}
.btn-outline-primary{
  --bs-btn-color:var(--se-blue-ink); --bs-btn-border-color:var(--se-orange);
  --bs-btn-hover-bg:var(--se-orange); --bs-btn-hover-border-color:var(--se-orange); --bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--se-orange); --bs-btn-active-border-color:var(--se-orange); --bs-btn-active-color:#fff;
}
.btn-info{ --bs-btn-bg:var(--se-blue); --bs-btn-border-color:var(--se-blue); --bs-btn-color:#063a52;
  --bs-btn-hover-bg:#1ea7e8; --bs-btn-hover-border-color:#1ea7e8; --bs-btn-hover-color:#063a52; }
.text-primary{ color:var(--se-orange)!important; }
.bg-primary,.text-bg-primary{ background-color:var(--se-orange)!important; color:#fff!important; }
.border-primary{ border-color:var(--se-orange)!important; }
.text-info{ color:var(--se-blue-ink)!important; }
.bg-info{ background-color:var(--se-blue)!important; }
.link-primary,a.text-primary{ color:var(--se-blue-ink)!important; }
.nav-pills{ --bs-nav-pills-link-active-bg:var(--se-orange); }
.spinner-border,.spinner-grow{ color:var(--se-orange); }
.progress{ --bs-progress-bar-bg:var(--se-orange); }
.form-control:focus,.form-select:focus{ border-color:var(--se-orange);
  box-shadow:0 0 0 .2rem rgba(var(--se-orange-rgb),.18); }
.form-check-input:checked{ background-color:var(--se-orange); border-color:var(--se-orange); }
.form-check-input:focus{ border-color:var(--se-orange); box-shadow:0 0 0 .2rem rgba(var(--se-orange-rgb),.18); }
/* фильтр-чипы / toggle-кнопки (btn-check) в бренд-оранж */
.btn-check:checked+.btn-outline-primary{ background:var(--se-orange); color:#fff; }
/* Навбар — тонкая оранжевая акцент-полоса сверху (стиль B) */
.navbar{ border-top:3px solid var(--se-orange)!important; }
.navbar-brand img{ border-radius:0!important; }   /* новый цветной лого — не кружком */