:root {
  --color-bg: #f5f5fa;
  --color-surface: #ffffff;
  --color-text: #1c1e21;
  --color-muted: #767b87;
  --color-border: #e7e7f0;
  --color-accent: #6c5ce7;
  --color-accent-contrast: #ffffff;
  --color-accent-bg: #efecfd;
  --color-error: #dc2626;
  --color-error-bg: #fef2f2;
  --color-ok: #16a34a;
  --color-ok-bg: #f0fdf4;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 1px 8px rgba(16,24,40,.05);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --tile-green-bg: #e6f8ec; --tile-green-fg: #17803d;
  --tile-blue-bg: #e8f1fd; --tile-blue-fg: #1d5fb0;
  --tile-orange-bg: #fdf2e2; --tile-orange-fg: #a8631a;
  --tile-purple-bg: #f1ecfd; --tile-purple-fg: #6c4fd6;

  /* Категориальная палитра для виджета «Где сейчас деньги» (money-bar) — фиксированный
     порядок слотов, проверенный на соседних CVD-парах (dataviz skill), не переставлять. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
}

html[data-theme="dark"] {
  --color-bg: #0f1115;
  --color-surface: #1a1d23;
  --color-text: #e5e7eb;
  --color-muted: #9199a6;
  --color-border: #2d313a;
  --color-accent: #8b7cf6;
  --color-accent-contrast: #0f1115;
  --color-accent-bg: #262038;
  --color-error: #f87171;
  --color-error-bg: #3a1a1a;
  --color-ok: #4ade80;
  --color-ok-bg: #123422;
  --shadow-card: 0 1px 3px rgba(0,0,0,.3);

  --tile-green-bg: #16311f; --tile-green-fg: #4ade80;
  --tile-blue-bg: #17293e; --tile-blue-fg: #7db8f5;
  --tile-orange-bg: #3a2a12; --tile-orange-fg: #e0b03e;
  --tile-purple-bg: #2a2440; --tile-purple-fg: #b9a6f5;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
}
html[data-theme="dark"] .abc-group-green { background: #16311f; }
html[data-theme="dark"] .abc-group-orange { background: #3a2a12; }
html[data-theme="dark"] .abc-group-purple { background: #2a2440; }
html[data-theme="dark"] .abc-group-pink { background: #3a1f2c; }
html[data-theme="dark"] .abc-group-teal { background: #123330; }
html[data-theme="dark"] .abc-group-blue { background: #17293e; }
html[data-theme="dark"] .abc-group-abc { background: #1f3320; }
html[data-theme="dark"] .abc-b { color: #e0b03e; }

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Общий каркас: сайдбар + контент */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  flex: none;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 18px 12px;
  z-index: 30;
  transition: transform 200ms ease;
}
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 18px;
}
.sidebar-logo-mark {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.sidebar-logo .store-name {
  font-weight: 700;
  color: var(--color-text);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: 14px;
}
.sidebar-nav a:hover { background: var(--color-bg); text-decoration: none; }
.sidebar-nav a.active { background: var(--color-accent-bg); color: var(--color-accent); font-weight: 600; }
.sidebar-icon { flex: none; width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-submenu { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 2px 30px; }
.sidebar-submenu a { padding: 7px 10px; font-size: 13px; }

.sidebar-backdrop { display: none; }

.content-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  background: var(--color-bg);
  padding: 14px 24px 0;
}
.sidebar-toggle {
  display: none;
  margin-right: auto;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text);
}

.settings-link { color: var(--color-muted); font-size: 14px; }
.theme-toggle {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  padding: 0;
}
.theme-toggle:hover { background: var(--color-surface); }
.user-menu { position: relative; }
.user-menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text);
  padding: 6px 8px;
}
.user-menu-dropdown {
  position: absolute;
  right: 0;
  top: 36px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  min-width: 160px;
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.user-menu-dropdown a,
.user-menu-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--color-text);
}
.user-menu-dropdown a:hover,
.user-menu-dropdown button:hover { background: var(--color-bg); text-decoration: none; }

/* Layout */
.page { max-width: 1100px; margin: 0 auto; padding: 12px 24px 60px; width: 100%; }
.page-auth { max-width: 400px; padding-top: 80px; }

/* Карточки/формы */
.auth-card, .stub-card, .card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
}
.auth-card h1, .stub-card h1 { margin-top: 0; font-size: 20px; }
.muted { color: var(--color-muted); }

form label {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--color-muted);
}
form input[type="text"],
form input[type="password"],
form input[type="number"],
form input[type="date"],
form input[type="search"],
form select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
}
form input:focus, form select:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
form input:disabled {
  background: var(--color-bg);
  color: var(--color-muted);
  cursor: not-allowed;
}

.btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
}
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); }
.btn-primary:hover { opacity: .9; }
.btn-sm { padding: 5px 10px; font-size: 13px; }

.alert { padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 14px; }
.alert-error { background: var(--color-error-bg); color: var(--color-error); }
.alert-ok { background: var(--color-ok-bg); color: var(--color-ok); }
.alert-warning { background: var(--tile-orange-bg); color: var(--tile-orange-fg); }

.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.badge-error { background: var(--color-error-bg); color: var(--color-error); }
.badge-ok { background: var(--color-ok-bg); color: var(--color-ok); }
.badge-warning { background: var(--tile-orange-bg); color: var(--tile-orange-fg); }

/* Toast (ошибки HTMX) */
.toast-root {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}
.toast {
  background: #1c1e21;
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  max-width: 320px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

/* KPI-плитки */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpi-row-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kpi-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  color: inherit;
  display: block;
}
.kpi-tile:hover { text-decoration: none; }
.kpi-tile-warn { cursor: pointer; border-color: var(--color-error); }
.kpi-tile-green { background: var(--tile-green-bg); border-color: transparent; color: var(--tile-green-fg); }
.kpi-tile-blue { background: var(--tile-blue-bg); border-color: transparent; color: var(--tile-blue-fg); }
.kpi-tile-orange { background: var(--tile-orange-bg); border-color: transparent; color: var(--tile-orange-fg); }
.kpi-tile-purple { background: var(--tile-purple-bg); border-color: transparent; color: var(--tile-purple-fg); }
.kpi-value { font-size: 26px; font-weight: 700; white-space: nowrap; }
.kpi-label { font-size: 12px; color: var(--color-muted); margin-top: 2px; letter-spacing: .01em; }
.kpi-tile-green .kpi-label, .kpi-tile-blue .kpi-label,
.kpi-tile-orange .kpi-label, .kpi-tile-purple .kpi-label { color: inherit; opacity: .75; }
.kpi-delta { font-size: 13px; font-weight: 600; margin-top: 4px; }
.kpi-delta-up { color: var(--color-ok); }
.kpi-delta-down { color: var(--color-error); }
@media (max-width: 640px) {
  .kpi-row, .kpi-row-3 { grid-template-columns: repeat(2, 1fr); }
  .kpi-row-2, .two-col { grid-template-columns: 1fr; }
}

/* Виджет «Где сейчас деньги» — горизонтальный stacked bar */
.money-bar {
  display: flex;
  height: 28px;
  gap: 2px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg);
}
.money-bar-seg { min-width: 3px; transition: opacity .15s; }
.money-bar-seg:hover { opacity: .85; }
.money-bar-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 12px; font-size: 13px; }
.money-bar-legend-item { display: flex; align-items: center; gap: 6px; }
.money-bar-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Таблица себестоимости */
.costs-table tr.row-no-cost { box-shadow: inset 3px 0 0 var(--color-error); }
.history-row td { background: var(--color-bg); padding: 12px; }
.chevron-btn { font-size: 12px; }

/* Таблица закупок */
.procurement-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.procurement-table-wrap table.data-table { border: none; }
.procurement-table th, .procurement-table td {
  border-right: 1px solid var(--color-border);
}
.procurement-table th:last-child, .procurement-table td:last-child {
  border-right: none;
}
.procurement-table thead th {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.procurement-table tbody tr:hover { background: var(--color-bg); }
.procurement-table tbody tr:last-child td { border-bottom: none; }
.procurement-table th:nth-child(n+4), .procurement-table td:nth-child(n+4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.procurement-table tr.row-needs-order { box-shadow: inset 3px 0 0 var(--color-error); }
.procurement-table .order-qty-warn { color: var(--color-error); font-weight: 600; }
.procurement-name {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Импорт */
.import-dialog { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; max-width: 560px; width: 90vw; }
.import-dialog::backdrop { background: rgba(0,0,0,.35); }

/* ABC-таблица по товарам */
.abc-table { white-space: nowrap; border-collapse: separate; border-spacing: 0; }
.abc-table th, .abc-table td { padding: 6px 8px; font-size: 13px; }
.abc-group-row th { text-align: center; font-size: 11px; }
.abc-group-green { background: #e8f5e9; }
.abc-group-orange { background: #fff3e0; }
.abc-group-purple { background: #ede7f6; }
.abc-group-pink { background: #fce4ec; }
.abc-group-teal { background: #e0f2f1; }
.abc-group-blue { background: #e3f2fd; }
.abc-group-abc { background: #f1f8e9; }
.abc-totals-row { font-weight: 600; background: var(--color-bg); }
.abc-table .abc-sku-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--color-surface);
  box-shadow: 2px 0 4px -2px rgba(0,0,0,.15);
  white-space: normal;
}
.abc-table thead .abc-sku-col { z-index: 3; }
.abc-table .abc-totals-row .abc-sku-col { background: var(--color-bg); }
.abc-sku-name {
  width: 200px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.abc-scroll {
  overflow-x: auto;
  scrollbar-width: auto;
}
.abc-scroll::-webkit-scrollbar { height: 12px; }
.abc-scroll::-webkit-scrollbar-track { background: var(--color-bg); }
.abc-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 6px;
}
.abc-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-muted); }
.abc-badge {
  display: inline-block; min-width: 20px; padding: 2px 6px; border-radius: 999px;
  font-size: 12px; font-weight: 600; text-align: center; border: 1px solid currentColor;
}
.abc-a { color: var(--color-ok); }
.abc-b { color: #b8860b; }
.abc-c { color: var(--color-error); }

.abc-metric-row th.abc-sortable { cursor: pointer; user-select: none; }
.abc-metric-row th.abc-sortable:hover { background: var(--color-border); }
.abc-metric-row th.sort-asc::after,
.abc-metric-row th.sort-desc::after {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
}
.abc-metric-row th.sort-desc::after { content: "▼"; }
.abc-metric-row th.sort-asc::after { content: "▲"; }

/* Таблицы */
table.data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
table.data-table th, table.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-size: 14px;
}
table.data-table th { color: var(--color-muted); font-weight: 500; font-size: 12px; text-transform: uppercase; }

.htmx-indicator { opacity: 0; transition: opacity 150ms; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 0 0 24px rgba(0,0,0,.15);
  }
  .sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 25;
  }
  .sidebar-open .sidebar-backdrop { display: block; }
  .sidebar-toggle { display: flex; }
}

/* Точки на sparkline-графиках (app/svg_chart.py) — подсветка при наведении;
   сама подсказка рисуется поверх HTML-оверлеем ниже (.spark-*), не нативным title
   (у того задержка и не стилизовать шрифт). */
.sparkline-hit { fill: transparent; pointer-events: none; }
.sparkline-wrap { position: relative; }
.spark-overlay { position: absolute; inset: 0; }
.spark-col { position: absolute; top: 0; height: 100%; }
.spark-tip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 7px 12px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-text);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 5;
}
.spark-col-first .spark-tip { left: 0; transform: translateY(-8px); }
.spark-col-last .spark-tip { left: auto; right: 0; transform: translateY(-8px); }
.spark-col:hover .spark-tip { opacity: 1; visibility: visible; }

@media (max-width: 640px) {
  .page { padding: 12px 16px 40px; }
  .content-topbar { padding: 12px 16px 0; }
}