/* ============================================================================
   Токены темы. Палитра проверена на различимость при дальтонизме и по
   контрасту к своей подложке — светлые и тёмные шаги подобраны отдельно,
   а не выведены автоматической инверсией.
   ============================================================================ */
:root {
  color-scheme: light;
  --page:        #f9f9f7;
  --surface-1:   #fcfcfb;
  --surface-2:   #f2f2ee;
  --border:      rgba(11,11,11,.10);
  --grid:        #e1e0d9;
  --axis:        #c3c2b7;

  --ink-1:       #0b0b0b;
  --ink-2:       #52514e;
  --muted:       #898781;

  --series-1:    #2a78d6;   /* текущий период */
  --series-2:    #eb6834;
  --series-3:    #1baf7a;
  --compare:     #898781;   /* период сравнения — намеренно нейтральный:
                               это та же метрика во времени, а не вторая сущность */

  --good:        #006300;
  --warning:     #fab219;
  --critical:    #d03b3b;
  --accent:      #2a78d6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page:      #0d0d0d;
    --surface-1: #1a1a19;
    --surface-2: #242422;
    --border:    rgba(255,255,255,.10);
    --grid:      #2c2c2a;
    --axis:      #383835;

    --ink-1:     #ffffff;
    --ink-2:     #c3c2b7;
    --muted:     #898781;

    --series-1:  #3987e5;
    --series-2:  #d95926;
    --series-3:  #199e70;
    --compare:   #898781;

    --good:      #0ca30c;
    --warning:   #fab219;
    --critical:  #e66767;
    --accent:    #3987e5;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page:      #0d0d0d;
  --surface-1: #1a1a19;
  --surface-2: #242422;
  --border:    rgba(255,255,255,.10);
  --grid:      #2c2c2a;
  --axis:      #383835;

  --ink-1:     #ffffff;
  --ink-2:     #c3c2b7;
  --muted:     #898781;

  --series-1:  #3987e5;
  --series-2:  #d95926;
  --series-3:  #199e70;
  --compare:   #898781;

  --good:      #0ca30c;
  --warning:   #fab219;
  --critical:  #e66767;
  --accent:    #3987e5;
}

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

body {
  background: var(--page);
  color: var(--ink-2);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
}

.ink-1 { color: var(--ink-1); }
.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--muted); }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.lbl { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }

.inp, .inp-sm, .sel {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink-1);
  padding: 8px 10px;
  font-size: 14px;
  outline: none;
}
.inp-sm { width: auto; padding: 5px 8px; font-size: 13px; }
.sel { width: auto; padding: 6px 8px; font-size: 13px; }
.inp:focus, .inp-sm:focus, .sel:focus { border-color: var(--accent); }

.btn-primary {
  background: var(--accent); color: #fff;
  border: none; border-radius: 8px;
  padding: 8px 14px; font-size: 14px; font-weight: 500;
  cursor: pointer;
}
.btn-primary:disabled { opacity: .5; cursor: default; }

.btn-ghost {
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 5px 10px; font-size: 13px; cursor: pointer;
}
.btn-ghost:hover { background: var(--surface-2); }
.btn-ghost:disabled { opacity: .4; cursor: default; }

.chip {
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid transparent; border-radius: 999px;
  padding: 4px 10px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--border); }
.chip-on { background: var(--accent); color: #fff; }

.tab {
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: 14px;
  padding: 8px 12px; border-bottom: 2px solid transparent;
}
.tab-on { color: var(--ink-1); border-bottom-color: var(--accent); }

.tabular { font-variant-numeric: tabular-nums; }
.th { padding: 6px 8px; font-weight: 500; text-align: right; white-space: nowrap; }
.td { padding: 6px 8px; text-align: right; white-space: nowrap; }
.row { border-top: 1px solid var(--border); }
.row:hover { background: var(--surface-2); }

.dash {
  width: 16px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--compare) 0 4px, transparent 4px 7px);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--axis); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* Сводная таблица позиций: много колонок, поэтому плотнее обычной */
.pivot .td, .pivot .th { padding: 4px 6px; font-size: 12px; }
.pivot td.td { text-align: center; }
.pivot .row:hover td { background: var(--surface-2); }

/* Поле даты: своё отображение дд.мм.гггг плюс нативный календарь по кнопке */
.date-field { position: relative; display: inline-flex; align-items: center; }
.date-btn {
  position: absolute; right: 4px;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: 13px; line-height: 1; padding: 2px 4px;
}
.date-btn:hover { color: var(--accent); }
.date-native {
  position: absolute; right: 6px; bottom: 0;
  width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0;
}

/* Сортировка по колонке-дате: зелёная — лучшие сверху, красная — худшие */
.pivot .sortable { cursor: pointer; user-select: none; }
.pivot .sortable:hover { color: var(--ink-1); }
.pivot .sort-asc  { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--ink-1); }
.pivot .sort-desc { background: color-mix(in srgb, var(--critical) 22%, transparent); color: var(--ink-1); }
.pivot .row-open td { background: var(--surface-2); }