/* assets/dark_dropdown.css


/* Для всієї сторінки */
body, .Select-control, .Select-menu-outer {
    background-color: #23272b !important;
    color: #eeeeee !important;
}

/* Основне поле Dropdown */
.Select-control, .Select-menu {
    background-color: #23272b !important;
    color: #eeeeee !important;
    border-color: #888 !important;
}

/* Вибраний елемент */
.Select-value-label, .Select-value, .Select-placeholder {
    color: #eeeeee !important;
}

/* Всі опції в списку */
.VirtualizedSelectOption {
    background-color: #23272b !important;
    color: #eeeeee !important;
}

/* Ховер по опції */
.VirtualizedSelectFocusedOption, .Select-option.is-focused {
    background-color: #3a3f44 !important;
    color: #fff !important;
}

/* Активна опція */
.Select-option.is-selected {
    background-color: #198754 !important;  /* зелений Bootstrap */
    color: #fff !important;
}
/* Для кастомних Tabs */
.custom-tabs .dash-tabs {
    background: #181818 !important;
    border: none !important;
    box-shadow: none !important;
}
.custom-tabs .tab {
    background: #23272b !important;
    color: #bdbdbd !important;
    border: none !important;
    padding: 12px 22px !important;
    border-radius: 10px 10px 0 0 !important;
    margin-right: 2px !important;
    font-weight: bold;
    font-size: 17px;
    transition: background 0.3s, color 0.3s;
}
.custom-tabs .tab--selected {
    background: #2d8cff !important;
    color: #fff !important;
    border: none !important;
    font-size: 18px;
    box-shadow: 0 4px 12px #0018;
    outline: none;
}
.custom-tabs .tab:hover {
    background: #314369 !important;
    color: #fff !important;
}

.custom-tabs {
    width: 100% !important;
}

/* Змінює контейнер вкладок на flex для рівного розтягування */
.custom-tabs .dash-tabs-container {
    display: flex !important;
    width: 100% !important;
}

/* Контейнери самих Tab */
.custom-tabs .tab {
    flex: 1 1 0 !important;   /* ← дає рівномірний розподіл */
    text-align: center !important;
    min-width: 120px;         /* мінімальна ширина для адаптивності */
    margin-right: 2px !important;
}

body, .dash-graph, .js-plotly-plot, .dash-loading, .dash-spinner {
    background-color: #181818 !important;
}

.dash-loading {
    background-color: #181818 !important;
    opacity: 1 !important;
}

:root{
  --sidebar-w: 240px;          /* можеш 280px, але 240 компактніше */
  --sidebar-w-collapsed: 72px; /* вузький стан */
  --bg: #181818;
  --bg-pane: #23272b;
}

/* головна сітка */
@media (min-width: 769px) {
  #layout { display: flex; min-height: 100vh; background: var(--bg); }
  #sidebar-wrap {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    position: sticky; top: 0; height: 100vh;
    background: var(--bg-pane);
    border-right: 1px solid #2d2d2d;
    overflow: hidden;
    transition: width .2s ease;
  }
  #sidebar-wrap.collapsed { width: var(--sidebar-w-collapsed); flex-basis: var(--sidebar-w-collapsed); }
  #sidebar-wrap > div { height: calc(100vh - 44px); overflow-y: auto; }
  #content { flex: 1 1 auto; min-width: 0; }
}

/* мобільний drawer */
/* базова поведінка: сайдбар схований і неклікабельний */
#sidebar-wrap {
  position: fixed;
  inset: 0 auto 0 0;       /* лівий сайдбар */
  z-index: 1000;
  height: 100vh;
  width: 92vw;
  max-width: 420px;
  transform: translateX(-110%);
  pointer-events: none;
  transition: transform .25s ease;
}

/* бекдроп за замовчуванням вимкнений */
#sidebar-backdrop {
  display: none;
}

/* коли відкритий (клас .open додаєш у JS/колбеком) */
#sidebar-wrap.open {
  transform: translateX(0);
  pointer-events: auto;
}

#sidebar-wrap.open ~ #sidebar-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,.45);
}

/* кнопка */
.hamburger {
  position: fixed;
  top: 10px; left: 12px;
  z-index: 1100;
  font-size: 22px;
  padding: 8px 12px;
  border-radius: 10px;
  border: none;
  background: #2d8cff;
  color: #fff;
}

/* мобільні дрібниці — вже підганяй у @media за потреби */
@media (max-width: 768px) {
  #sidebar-wrap > div { height: calc(100vh - 44px); overflow-y: auto; }
  .collapse-btn { display: none; }
  #content { padding-top: 56px; }
}


/* ===== Трохи поліру для графіків і вкладок ===== */
.custom-tabs { width: 100% !important; }
.dash-graph, .js-plotly-plot { background-color: var(--bg) !important; }

/* Робимо основні картки/панелі на темному фоні більш контрастними */
.card, .panel, .dbc-card {
  background: #1b1f24; border: 1px solid #2a2f36; border-radius: 12px;
}


/* Адаптивна сітка для трьох графіків */
.kpi-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;           /* мобільний: 1 колонка */
}
@media (min-width: 900px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; } /* планшет: 2 */
}
@media (min-width: 1280px) {
  .kpi-grid { grid-template-columns: 1fr 1fr 1fr; } /* десктоп: 3 */
}
.kpi-card { background: #1b1f24; border: 1px solid #2a2f36; border-radius: 12px; }

.navbar, header {
  position: sticky;   /* або fixed, але з нормальною висотою */
  top: 0;
  height: 56px;       /* будь-яка явна висота */
  z-index: 1000;
}