/* ===== ГЛОБАЛЬНІ СТИЛІ ТА ФОН (оновлено) ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* фактична висота вашого .fixed-header */
  --header-h: 56px;

  /* vars для сайдбара */
  --sidebar-w: 260px;
  --side-bg: #f7f7f7;
  --side-br: #e2e2e2;
  --side-tx: #1f2937;
  --side-muted: #6b7280;
  --side-hov: #eef2ff;
}

html, body { height: 100%; }

body {
  transition: opacity .5s ease-in-out;
  padding-top: 0 !important;                   /* отступ управляет класс has-fixed-header */
  font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background: #f2f4f5;
  background-size: cover;
  color: #333;
}

/* Додавайте цей клас на сторінках з фіксованим хедером */
body.has-fixed-header { padding-top: var(--header-h) !important; }

/* Захист від колапсу margin першого елемента під фікс-хедером */
body.has-fixed-header > *:first-child { margin-top: 0 !important; }

h1 {
  text-align: center;
  color: #5a5a5a;
  margin: 20px 0;
  font-size: 1.4rem;
  font-weight: 600;
}

/* важно: не трогаем th глобально */
h2 { color: #0048bf; }

p { text-align: center; font-size: 1rem; color: #666666; }

/* ===== ТЁМНАЯ ТЕМА (фон и базовые цвета) ===== */
body.dark { background: #1e1e1e; color: #f5f5f5; }
body.dark a { color: #1e90ff; }
body.dark .container { background-color: #121212; color: #e0e0e0; }

/* ===== Таблицы «responsive-table» (и компания) — локальные цвета ===== */
.responsive-table { background: #f3e6da; }
.responsive-table tbody tr:nth-child(even),
.responsive-table tr:nth-child(even) { background: #e5d8cc; }
body.dark .responsive-table { background: #282828; }
body.dark .responsive-table tbody tr:nth-child(even),
body.dark .responsive-table tr:nth-child(even) { background: #40403f; }
body.dark .report-container { background-color: #121212; color: #e0e0e0; }
body.dark .result-container { background: #121212; }
body.dark h1, body.dark h2 { color: #fff; }

/* ===== ФИКСИРОВАННЫЙ ХЕДЕР ===== */
.fixed-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: #495f99;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;     /* слева кнопка Меню, справа действия */
  padding: 0 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 30000;
}
.fixed-header .company-name { /* сохранено для совместимости со старым html */
  font-size: 1.2rem;
  font-weight: 600;
  color: #f0f0f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Кнопка «Меню» (десктоп и мобайл) ===== */
.hamburger{
  /* против «распухания» из глобальных стилей кнопок */
  flex: 0 0 auto !important;
  width: auto !important;
  inline-size: auto !important;
  max-width: none !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  height: 44px;
  padding: 0 14px;
  line-height: 1;
  white-space: nowrap;

  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;

  transition: background .2s ease, transform .15s ease, border-color .2s ease;
}
.hamburger i{ font-size:18px; line-height:1; }
.hamburger:hover{ background: rgba(255,255,255,.15); transform: translateY(-1px); }
body.sidebar-open .hamburger{ background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.45); }

/* мобайл — чуть крупнее, но без роста на таблицах */
@media (max-width: 1024px){
  .hamburger{
    height: 40px;
    padding: 0 16px;
    font-size: 15px;
  }
}

/* ===== ПРАВАЯ ЗОНА (ник, тумблер, тема) ===== */
.user-actions { display: flex; align-items: center; gap: 12px; position: relative; }
.user-button {
  background: none; border: none; font-size: 16px; color: white; cursor: pointer;
  padding: 5px 10px; transition: opacity .3s;
}
.user-button i { margin-left: 5px; }
.user-button:hover { opacity: .8; }
.user-button{ white-space: nowrap; max-width: none; }

/* Полностью отключаем старое выпадающее меню пользователя */
.user-menu, .user-dropdown { display: none !important; }

/* Тёмная тема для хедера */
body.dark .fixed-header { background-color: #282828; color: #ffffff; }

/* ===== ТУМБЛЕР РОЛИ ===== */
.fixed-header .user-actions .role-toggle{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid rgba(0,0,0,.12);
  padding:.25rem .6rem; border-radius:9999px;
  background:#fff; cursor:pointer; font-size:.85rem;
  color:#111;
  white-space:nowrap; user-select:none;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition:transform .12s ease, opacity .12s ease, background .2s;
  margin-right:.25rem;
}
.fixed-header .user-actions .role-toggle .fa{ font-size:.9rem; color:inherit; }
.fixed-header .user-actions .role-toggle .role-badge{ font-weight:600; letter-spacing:.2px; }
.fixed-header .user-actions .role-toggle:hover{ transform:translateY(-1px); }
.fixed-header .user-actions .role-toggle:focus-visible{ outline:2px solid #76a9ff; outline-offset:2px; }
body.dark .fixed-header .user-actions .role-toggle{
  background:#1f2937; border-color:rgba(255,255,255,.15); color:#e5e7eb; box-shadow:0 1px 3px rgba(0,0,0,.4);
}

/* ===== Кнопка темы ===== */
#theme-button {
  background: none;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
  transition: background-color .3s ease, transform .2s ease;
}
#theme-button:hover { background-color: rgba(255,255,255,.2); transform: scale(1.1); }

/* Ник показываем только на десктопе */
.user-name-desktop{ display:none; align-items:center; gap:.4rem; font-weight:600; }
.user-name-desktop .fa{opacity:.9}
@media (min-width: 1025px){
  .user-name-desktop{ display:inline-flex; }
}

/* ===== «Семейства» таблиц (оформление) ===== */
.responsive-table,
.brand-table,
.client-table,
.user-table,
.company-table,
.details-table{
  width:100%;
  border-collapse:collapse;
  background:#f3e6da;
  color:#333;
  font-size:16px;
  border-radius:5px;
  overflow:hidden;
  box-shadow:0 2px 5px rgba(0,0,0,.2);
}
.responsive-table th,
.brand-table th,
.client-table th,
.user-table th,
.company-table th,
.details-table th{
  background:#e0d5c8; color:#333; padding:10px; text-align:left; font-weight:bold; border-bottom:2px solid #ccc;
}
.responsive-table td,
.brand-table td,
.client-table td,
.user-table td,
.company-table td,
.details-table td{ padding:10px; border-bottom:1px solid #ddd; }

/* Зебра */
.responsive-table tbody tr:nth-child(even),
.brand-table tbody tr:nth-child(even),
.client-table tbody tr:nth-child(even),
.user-table tbody tr:nth-child(even),
.company-table tbody tr:nth-child(even),
.details-table tbody tr:nth-child(even){ background:#e5d8cc; }
.responsive-table tbody tr:nth-child(odd),
.brand-table tbody tr:nth-child(odd),
.client-table tbody tr:nth-child(odd),
.user-table tbody tr:nth-child(odd),
.company-table tbody tr:nth-child(odd),
.details-table tbody tr:nth-child(odd){ background:#f3e6da; }

/* Тёмные версии семейств */
body.dark .responsive-table,
body.dark .brand-table,
body.dark .client-table,
body.dark .user-table,
body.dark .company-table,
body.dark .details-table{ background:#282828; color:#e0e0e0; }
body.dark .responsive-table th,
body.dark .brand-table th,
body.dark .client-table th,
body.dark .user-table th,
body.dark .company-table th,
body.dark .details-table th{ background:#333; color:#ffffff; border-bottom:2px solid #444; }
body.dark .responsive-table td,
body.dark .brand-table td,
body.dark .client-table td,
body.dark .user-table td,
body.dark .company-table td,
body.dark .details-table td{ border-bottom:1px solid #444; }
body.dark .responsive-table tbody tr:nth-child(even),
body.dark .brand-table tbody tr:nth-child(even),
body.dark .client-table tbody tr:nth-child(even),
body.dark .user-table tbody tr:nth-child(even),
body.dark .company-table tbody tr:nth-child(even),
body.dark .details-table tbody tr:nth-child(even){ background:#40403f; }
body.dark .responsive-table tbody tr:nth-child(odd),
body.dark .brand-table tbody tr:nth-child(odd),
body.dark .client-table tbody tr:nth-child(odd),
body.dark .user-table tbody tr:nth-child(odd),
body.dark .company-table tbody tr:nth-child(odd),
body.dark .details-table tbody tr:nth-child(odd){ background:#282828; }

/* Особые стили детализации */
body.dark .details-table th{ background:#333; color:#ffffff; border:none; }
body.dark .details-table .supplier-row td{ background:#444 !important; font-weight:bold; }
body.dark .details-table .supplier-total{ background:#4c3b3b !important; font-weight:bold; color:#ffffff !important; }

/* Выравнивание некоторых колонок */
.client-table th:nth-child(1),
.client-table th:nth-child(8),
.client-table th:nth-child(9),
.client-table td:nth-child(1),
.client-table td:nth-child(8),
.client-table td:nth-child(9){ text-align:center; font-weight:bold; }

/* Ссылки в таблицах */
body.dark .client-table td a,
body.dark .brand-table td a,
body.dark .company-table td a{ color:#69a9ff; }
body.dark .client-table td a:hover,
body.dark .brand-table td a:hover,
body.dark .company-table td a:hover{ color:#ff79c6; }

/* ===== Desktop: отступ контента и сворачивание сайдбара ===== */
@media (min-width: 1025px){
  body.with-sidebar{ padding-left: var(--sidebar-w); }
  body.sidebar-collapsed.with-sidebar{ padding-left: 0 !important; }
}

/* На десктопе подложка никогда не активна */
@media (min-width: 1025px){
  .sb-backdrop{ display:none !important; }
}