/* ==========================================================================
   Своё поверх кита ЗЗД. brand.css / theme.css / style.css — общие с ICE,
   их здесь не трогаем (правка общих файлов ломает соседние проекты).
   ========================================================================== */

/* --------------------------------------------------------------------------
   ЦВЕТА ГРАФИКОВ
   Подобраны и проверены валидатором (OKLCH-полоса, порог насыщенности,
   различимость при дальтонизме, контраст к фону) отдельно для тёмной и
   светлой темы. Пары «приход/расход» — синий и оранжевый: красно-зелёная
   пара из брендовых --ok/--bad при дейтеранопии сливается (ΔE 3.4), эта
   различима (ΔE 21+). Смысл сквозной по всему приложению:
       золото   — начисленная выручка (API, приёмы)
       синий    — приход денег в кассу (OData)
       оранжевый— расход и чистые затраты
   -------------------------------------------------------------------------- */
:root{
  --c-revenue:#bd8340;
  --c-in:#3b86cc;
  --c-out:#c67a35;
  --c-grid:rgba(255,255,255,.07);
}
:root[data-theme="light"]{
  --c-revenue:#a9762f;
  --c-in:#2e6fb0;
  --c-out:#b56a24;
  --c-grid:rgba(6,34,71,.09);
}

/* --------------------------------------------------------------------------
   ОТМЕТКА СВЕЖЕСТИ ДАННЫХ
   -------------------------------------------------------------------------- */
.stamp{ font-family:var(--zzd-lek); font-size:12.5px; color:var(--dim);
  border:1px solid var(--line); border-radius:100px; padding:6px 12px; white-space:nowrap; }
.stamp-stale{ color:var(--warn); border-color:var(--warn-line, var(--line-2)); }

/* --------------------------------------------------------------------------
   ГРАФИКИ · столбики на CSS, без внешних библиотек
   -------------------------------------------------------------------------- */
/* Плитки KPI: auto-fill (а не auto-fit из общего style.css) — тогда одинокая
   плитка в последней строке той же ширины, что остальные, а не во всю строку. */
.stat-row{ grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); }

.chart{ margin:.2rem 0 .4rem; }
.chart-plot{ display:flex; align-items:flex-end; gap:clamp(4px,1.1vw,14px);
  height:190px; padding:10px 8px 0; border-bottom:1px solid var(--c-grid);
  overflow-x:auto; }
.cbar{ flex:1 1 0; min-width:26px; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; height:100%; }
.cbar-stack{ display:flex; align-items:flex-end; justify-content:center;
  gap:2px;                       /* 2px «воздуха» между соседними заливками */
  width:100%; height:100%; }
.cbar-fill{ position:relative; flex:1 1 0; max-width:34px; min-height:2px;
  border-radius:4px 4px 0 0;     /* скругление только на «читаемом» конце */
  background:var(--c-revenue); transition:filter .15s var(--ease, ease); }
.cbar-fill.f-in{ background:var(--c-in); }
.cbar-fill.f-out{ background:var(--c-out); }
.cbar-fill:hover{ filter:brightness(1.15); }
.cbar-lbl{ font-family:var(--zzd-lek); font-size:11.5px; color:var(--dim);
  margin-top:7px; white-space:nowrap; }
.chart-top{ display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; flex-wrap:wrap; margin-bottom:.2rem; }
.chart-max{ font-family:var(--zzd-lek); font-size:11.5px; color:var(--dim); }

/* Подсказка при наведении — своя, без библиотек */
[data-tip]{ position:relative; }
[data-tip]:hover::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%); z-index:20; white-space:nowrap;
  background:var(--card); color:var(--ink); border:1px solid var(--line-2);
  border-radius:9px; padding:7px 11px; font-family:var(--zzd-lek); font-size:12.5px;
  box-shadow:var(--card-shadow); pointer-events:none; }

/* Легенда */
.ch-legend{ display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; margin:.5rem 0 0;
  font-family:var(--zzd-lek); font-size:12.5px; color:var(--muted); }
.ch-legend span{ display:inline-flex; align-items:center; gap:.4rem; }
.ch-legend i{ width:12px; height:12px; border-radius:3px; display:inline-block; }

/* Горизонтальные полосы (клиники, врачи, статьи) */
.hbar-row{ display:grid; grid-template-columns:minmax(120px,1.6fr) 1fr auto;
  align-items:center; gap:.7rem; padding:.32rem 0; }
.hbar-name{ font-family:var(--zzd-lek); font-size:13.5px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hbar-track{ height:11px; background:var(--field); border-radius:100px; overflow:hidden; }
.hbar-fill{ height:100%; border-radius:100px; background:var(--c-revenue); }
.hbar-fill.f-out{ background:var(--c-out); }
.hbar-fill.f-in{ background:var(--c-in); }
.hbar-val{ font-family:var(--zzd-lek); font-size:13px; font-weight:700;
  color:var(--head); text-align:right; white-space:nowrap; }

/* --------------------------------------------------------------------------
   ЧИСЛОВЫЕ ТАБЛИЦЫ
   -------------------------------------------------------------------------- */
table.grid td.n, table.grid th.n{ text-align:right; font-family:var(--zzd-lek);
  white-space:nowrap; }
table.grid tr.total td{ font-weight:800; background:var(--panel-group); color:var(--head); }
.v-in{ color:var(--c-in); font-weight:700; }
.v-out{ color:var(--c-out); font-weight:700; }
.v-net-plus{ color:var(--ok); font-weight:700; }
.v-net-minus{ color:var(--bad); font-weight:700; }
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-scroll table{ min-width:640px; }
.nowrap{ white-space:nowrap; }

/* Широкие денежные таблицы (ведомость, реестр): колонок много, поэтому ужимаем
   отступы и не даём числам переноситься — иначе крайняя колонка уезжает за край. */
table.grid.compact td, table.grid.compact th{ padding:8px 10px; font-size:14px; }
table.grid.compact td.n, table.grid.compact th.n{ white-space:nowrap; width:1%; }
table.grid.compact td:first-child{ min-width:230px; }

/* --------------------------------------------------------------------------
   ДЕРЕВО (ведомость, затраты) — раскрытие по уровням
   -------------------------------------------------------------------------- */
tr.tr-lvl0 td{ font-weight:800; color:var(--head); background:var(--panel-group); }
tr.tr-lvl1 td{ font-weight:700; }
tr.tr-lvl3 td{ font-size:13.5px; color:var(--muted); }
td.tree-cell{ display:flex; align-items:center; gap:.45rem; }
.tree-pad-1{ padding-left:1.3rem; }
.tree-pad-2{ padding-left:2.6rem; }
.tree-pad-3{ padding-left:4rem; }
.tree-toggle{ flex:0 0 auto; width:18px; height:18px; line-height:16px; text-align:center;
  border:1px solid var(--line-2); border-radius:5px; background:transparent;
  color:var(--muted); cursor:pointer; font-size:11px; padding:0; }
.tree-toggle:hover{ border-color:var(--gold); color:var(--gold-2); }
.tree-spacer{ flex:0 0 auto; width:18px; }

/* --------------------------------------------------------------------------
   МЕЛОЧИ
   -------------------------------------------------------------------------- */
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1rem;
  align-items:start; }
.note{ font-size:.85rem; color:var(--muted); margin:.3rem 0 0; }
.pager{ display:flex; gap:.4rem; align-items:center; justify-content:center;
  flex-wrap:wrap; margin:1rem 0 .2rem; font-family:var(--zzd-lek); font-size:13.5px; }
.pager .cur{ color:var(--gold-2); font-weight:800; }
.kpi-hint{ font-family:var(--zzd-lek); font-size:11.5px; color:var(--dim); margin-top:3px; }
.stat-tile.tile-in{ border-left:4px solid var(--c-in); }
.stat-tile.tile-out{ border-left:4px solid var(--c-out); }
.stat-tile.tile-rev{ border-left:4px solid var(--c-revenue); }

@media print{ .no-print{ display:none !important; } }