/* ══ ТЁМНАЯ ТЕМА ════════════════════════════════════════════════════════ */
:root {
  --bg:          #111214;
  --bg-card:     #1a1c20;
  --bg-hover:    #22252b;
  --border:      #2a2d34;
  --yellow:      #fff550;   /* RAL 1016 Sulfur Yellow */
  --yellow-dim:  #d4c800;
  --grey:        #8b9099;
  --grey-light:  #c4c8d0;
  --white:       #eef0f3;
  --red:         #e05252;
  --green:       #52b788;
  --font:        'Inter', system-ui, sans-serif;
  --mono:        'PT Mono', 'JetBrains Mono', monospace;

  --folder-hdr:  #1c1f27;
  --row-odd:     #161820;
  --row-even:    #131518;
  --row-detail-odd:  #1a1d24;
  --row-detail-even: #171a20;
  --plan-bg:     transparent;
  --plan-border: var(--border);
  --sep-bg:      #0c0d0f;
  --shadow:      0 2px 14px rgba(0,0,0,0.5);
}

/* ══ СВЕТЛАЯ ТЕМА ════════════════════════════════════════════════════════ */
html.light {
  --bg:          #f0f0f0;   /* светло-серый RAL 7035 */
  --bg-card:     #ffffff;
  --bg-hover:    #e8e8e8;
  --border:      #bebebe;   /* RAL 7035 #BEBEBE */
  --yellow:      #fff550;   /* RAL 1016 — читается на сером корпоративном фоне */
  --yellow-dim:  #d4c800;
  --grey:        #555555;
  --grey-light:  #222222;
  --white:       #000000;   /* Jet Black RAL 9005 */
  --red:         #c0392b;
  --green:       #1a7a4a;

  --folder-hdr:  #bebebe;   /* RAL 7035 */
  --row-odd:     #ffffff;
  --row-even:    #f5f5f5;
  --row-detail-odd:  #fafafa;
  --row-detail-even: #f2f2f2;
  --plan-bg:     transparent;
  --plan-border: var(--border);
  --sep-bg:      #e0e0e0;
  --shadow:      0 2px 8px rgba(0,0,0,0.10);
}

/* ══ RESET ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--yellow); text-decoration: none; }
a:hover { color: var(--yellow-dim); }

/* ══ ТОПБАР ══════════════════════════════════════════════════════════════ */
.topbar {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 54px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 0;
}

/* Druk Wide Cyr Bold — подключаем через Google или CDN если доступен,
   иначе Arial Black как fallback */
.topbar-logo {
  font-family: 'Druk Wide Cyr', 'DrukWideCyr-Bold', Impact, 'Arial Black', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--yellow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 32px;
  text-decoration: none;
}

.nav-tab {
  display: flex; align-items: center;
  height: 54px; padding: 0 16px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  color: var(--grey);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  text-decoration: none;
}
.nav-tab:hover  { color: var(--white); }
.nav-tab.active { color: var(--yellow); border-bottom-color: var(--yellow); }

/* ── Переключатель тем ── */
.theme-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
}
.theme-side {
  padding: 5px 12px;
  color: var(--grey);
  background: transparent;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.theme-side.active {
  background: var(--yellow);
  color: #000;
}
html.light .theme-side.active { color: #000; }

/* ══ КОНТЕНТ ════════════════════════════════════════════════════════════ */
.content { max-width: 1300px; margin: 0 auto; padding: 28px 24px; }

/* ══ КАРТОЧКА ═══════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 20px 24px; margin-bottom: 20px;
}
.card-title {
  font-size: 11px; font-weight: 700; color: var(--grey);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px;
}

/* ══ ИСТОРИЯ ════════════════════════════════════════════════════════════ */
.history-item {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 24px; border-bottom: 1px solid var(--border);
  margin: 0 -24px; transition: background 0.1s;
  text-decoration: none; color: inherit;
}
.history-item:last-child { border-bottom: none; }
.history-item:hover { background: var(--bg-hover); }
.history-date  { font-size: 15px; font-weight: 600; color: var(--white); min-width: 160px; }
.history-meta  { font-size: 12px; color: var(--grey); display: flex; gap: 16px; }
.history-arrow { margin-left: auto; color: var(--grey); font-size: 18px; }

/* ══ ФИЛЬТРЫ ════════════════════════════════════════════════════════════ */
.filter-tabs { display: flex; gap: 4px; }

.filter-tab {
  padding: 6px 16px; border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  color: var(--grey); background: transparent;
  border: 1px solid var(--border); cursor: pointer; transition: all 0.15s;
}
.filter-tab:hover { color: var(--white); border-color: var(--grey); }
.filter-tab.active { background: var(--yellow); color: #000; border-color: var(--yellow); }

.cmp-btn {
  padding: 5px 12px; border-radius: 5px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 600;
  color: var(--grey); background: transparent;
  border: 1px solid var(--border); cursor: pointer; transition: all 0.15s;
}
.cmp-btn:hover { color: var(--white); border-color: var(--grey); }
.cmp-btn.active { background: var(--yellow); color: #000; border-color: var(--yellow); }

/* ══ ПОИСК ══════════════════════════════════════════════════════════════ */
.search-input {
  width: 100%; max-width: 260px; padding: 7px 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; color: var(--white); font-size: 13px;
  outline: none; transition: border-color 0.15s;
  font-family: var(--mono);
}
.search-input:focus { border-color: var(--yellow); }
.search-input::placeholder { color: var(--grey); }

/* ══ ХЛЕБНЫЕ КРОШКИ ════════════════════════════════════════════════════ */
.breadcrumb { font-size: 13px; color: var(--grey); }
.breadcrumb a { color: var(--grey); }
.breadcrumb a:hover { color: var(--yellow); }
.breadcrumb span { margin: 0 6px; }

/* ══ ПАПКА-ГРУППА ═══════════════════════════════════════════════════════ */
.folder-wrap {
  margin-bottom: 24px;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  /* НЕТ overflow:hidden — иначе sticky thead не работает */
}

.folder-label {
  padding: 10px 16px; background: var(--folder-hdr);
  border-bottom: 2px solid var(--yellow);
  font-size: 11px; font-weight: 700; color: var(--yellow);
  text-transform: uppercase; letter-spacing: 0.1em;
  border-radius: 7px 7px 0 0;  /* скругление сверху вместо wrap */
}
html.light .folder-label { color: #333; }

.folder-body { background: var(--bg-card); }
.folder-body table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; table-layout: fixed; }

.folder-body thead th {
  padding: 7px 10px; text-align: left;
  color: var(--grey); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border); white-space: nowrap;
  background: rgba(0,0,0,0.18);
  /* sticky убран — не работает при window scroll */
}
html.light .folder-body thead th { background: rgba(0,0,0,0.05); }
.folder-body thead th.right { text-align: right; }

/* Зебра для тела таблицы — и ингредиенты и п/ф одинаково */
.folder-body tbody tr:nth-child(odd)  { background: var(--row-odd); }
.folder-body tbody tr:nth-child(even) { background: var(--row-even); }
.folder-body tbody tr.row-plan        { background: var(--plan-bg) !important; }
.folder-body tbody tr.row-sep         { background: var(--sep-bg) !important; }

.folder-body tbody tr { border-bottom: 1px solid rgba(42,45,52,0.4); transition: background 0.1s; }
html.light .folder-body tbody tr { border-bottom: 1px solid var(--border); }
.folder-body tbody tr:hover { background: var(--bg-hover) !important; }

.folder-body td { padding: 8px 10px; color: var(--grey-light); white-space: nowrap; font-family: var(--mono); font-size: 12px; }
.folder-body td.right  { text-align: right; }
.folder-body td.price  { font-family: var(--mono); font-size: 12px; }
.folder-body td.name {
  color: var(--white); font-weight: 600;
  text-transform: capitalize;
  font-family: var(--mono); font-size: 12px;
  max-width: 220px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ── Строки п/ф / продукции ── */
tr.row-plan td {
  border-top: 2px solid var(--border) !important;
  font-weight: 600;
  color: var(--white);
  cursor: pointer;
}

/* Название п/ф — мигает при наведении, кликабельно */
.plan-name-link {
  cursor: pointer; transition: color 0.15s, opacity 0.15s;
}
.plan-name-link:hover { color: var(--yellow); opacity: 0.85; }

tr.row-line td.ing-name { padding-left: 28px; font-size: 12px; color: var(--grey-light); }
tr.row-labour td { color: var(--green); font-size: 12px; }
tr.row-labour td.ing-name { padding-left: 28px; }
tr.row-unit td { color: var(--grey); font-size: 12px; font-style: italic; border-top: 1px solid var(--border) !important; }
tr.row-sep td { height: 6px; padding: 0; border: none !important; }

/* ── Стрелка раскрытия ── */
.row-arrow {
  text-align: right; padding-right: 14px !important;
  color: var(--grey); font-size: 11px; width: 28px;
  transition: color 0.15s;
}
tr.row-plan:hover .row-arrow { color: var(--yellow); }

/* ══ ГРАФИК ═════════════════════════════════════════════════════════════ */
.chart-wrap { height: 320px; width: 100%; }

/* ══ СКРОЛЛБАР ══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--grey); }

.folder-body { overflow: visible; }

html.light .topbar-logo { color: #333333; }
html.light .nav-tab.active { color: #333333; border-bottom-color: var(--yellow); }

/* Светлая тема — названия п/ф без жёлтого */
html.light tr.row-plan td { color: #111 !important; }
html.light .plan-name-link { color: #111 !important; }
html.light .plan-name-link:hover { color: #555 !important; }

/* Эффект жидкого стекла для sticky-панели и topbar */
.topbar {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

/* Sticky thead — стекло */
.folder-body thead th {
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
}

/* Sticky panel */
.sticky-panel {
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}

/* Tooltip адаптивный */
html.light #tip {
  background: #fff;
  border-color: #bebebe;
  color: #111;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Плавающий заголовок таблицы */
.float-thead {
  position: fixed;
  z-index: 80;
  display: none;
  pointer-events: none;
  overflow: hidden;
  border-bottom: 2px solid var(--yellow);
  margin-top: -1px;  /* убирает брешь */
}
.float-thead table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.float-thead th {
  padding: 7px 10px;
  color: var(--grey); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap; text-align: left;
  font-family: var(--mono);
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}
html.light .float-thead th { background: rgba(0,0,0,0.05); }
.float-thead th.right { text-align: right; }

/* Колонка НАЗВАНИЕ шире — фиксируем пропорции */
.folder-body table col.col-name  { width: 26%; }
.folder-body table col.col-price { width: 12%; }
.folder-body table col.col-old   { width: 11%; }
.folder-body table col.col-diff  { width: 11%; }
.folder-body table col.col-pct   { width: 8%; }
.folder-body table col.col-qty   { width: 7%; }
.folder-body table col.col-ing   { width: 13%; }
.folder-body table col.col-src   { width: 12%; }
.folder-body table col.col-arr   { width: 28px; }

.diff-up   { color: rgb(210, 90, 90); }
.diff-down { color: rgb(70, 170, 120); }
html.light .diff-up   { color: #b71c1c !important; }
html.light .diff-down { color: #1b5e20 !important; }

tr.row-plan td.price { font-weight: 400; }
tr.row-plan td.price.diff-up   { color: rgb(210, 90, 90); }
tr.row-plan td.price.diff-down { color: rgb(70, 170, 120); }
html.light tr.row-plan td.price.diff-up   { color: #b71c1c; }
html.light tr.row-plan td.price.diff-down { color: #1b5e20; }

/* Закрываем брешь перед float-thead через sticky-panel */
.sticky-panel::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 3px;
  background: var(--bg);
  z-index: 79;  /* под float-thead (80) */
}
.sticky-panel { position: relative; background: var(--bg) !important; }

/* Hover на plan-name-link */
.plan-name-link {
  display: inline-block;
  transition: color 0.15s;
  padding: 2px 6px;
  border-radius: 4px;
  margin: -2px -6px;
}
.plan-name-link:hover {
  color: var(--yellow);
  background: rgba(255,245,80,0.10);
}
html.light .plan-name-link:hover {
  background: rgba(155,120,0,0.08);
}

/* Светлая тема diff цвета — более высокая специфичность */
/* Светлая тема — цвета разницы */
html.light .diff-up   { color: #c62828 !important; }
html.light .diff-down { color: #2e7d32 !important; }
/* Переопределяем всё что может перекрывать */
html.light td.diff-up,
html.light td.diff-up.price,
html.light td.diff-up.right,
html.light .folder-body td.diff-up,
html.light tr td.diff-up { color: #c62828 !important; }

html.light td.diff-down,
html.light td.diff-down.price,
html.light td.diff-down.right,
html.light .folder-body td.diff-down,
html.light tr td.diff-down { color: #2e7d32 !important; }

/* Ячейки с автоматическим tooltip при обрезке */
.src-cell, .folder-body td.name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}