/* ============================================================================
   dashboard.css — стили страниц входа и смены пароля.
   Подключают ТОЛЬКО registration/login.html и registration/pwchange_*.html.
   Кабинеты (система кабинетов /app/) используют app.css; старые оболочки
   base/manager_base/supply_base и collapse.js удалены (коммит a3e07d9).
   ========================================================================== */

/* ---- 1. Токены ------------------------------------------------------------ */
:root{
  /* нейтрали (с зелёным подтоном — выбраны, не дефолтны) */
  --bg:#f1f4ef; --card:#ffffff; --ink:#14231c; --muted:#5f6b59; --faint:#8a9383;
  --line:#e3e8df; --line-2:#eef1ec; --tint:#eaefe6;

  /* бренд (по умолчанию — финаналитика / teal) */
  --brand:#0f4051; --brand-dark:#052d24; --brand-hover:#0c3340; --accent:#e1fcad;
  --on-brand:#ffffff; --night:#052d24;

  /* семантика статусов: фон + текст (пары) + насыщенный (solid) */
  --pos:#2f7d4f;  --pos-bg:#e7f6cf; --pos-ink:#33520f;
  --warn:#cf9c2e; --warn-bg:#fdf3d7; --warn-ink:#7a5c11;
  --neg:#c2453a;  --neg-bg:#f7d9d5; --neg-ink:#7c1d12;
  --info:#3b73b9; --info-bg:#e1eefc; --info-ink:#1f4f8a;
  --neu-bg:#eef1ec; --neu-ink:#5f6b59;
  --watch:#8a5cc2; --watch-bg:#efe6f8; --watch-ink:#5c3a86;

  /* тени — нейтральные (не «зелёные»), одно семейство на 3 ступени */
  --shadow-rgb:20,35,28;
  --sh-sm:0 1px 2px rgba(var(--shadow-rgb),.06), 0 1px 3px rgba(var(--shadow-rgb),.09);
  --sh-md:0 6px 22px rgba(var(--shadow-rgb),.12);
  --sh-lg:0 16px 40px rgba(var(--shadow-rgb),.20);

  /* шкала отступов (шаг 4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;

  /* радиусы (3 ступени) */
  --r-sm:8px; --r-md:12px; --r-pill:999px;

  /* типографика */
  --font:"Montserrat",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Unbounded","Montserrat",-apple-system,"Segoe UI",sans-serif;
  --t-caption:11px; --t-small:12px; --t-body:13px; --t-base:14px;
  --t-sub:16px; --t-display:20px; --t-kpi:22px;

  --wrap:1280px;
}

/* темы направлений — переопределяют ТОЛЬКО бренд-триаду; всё остальное следует */
body.theme-fin{ --brand:#0f4051; --brand-dark:#052d24; --brand-hover:#0c3340; --accent:#e1fcad; }
body.theme-mgr{ --brand:#b8893a; --brand-dark:#4a3413; --brand-hover:#9c7430; --accent:#ffdf9e; }
body.theme-sup{ --brand:#2f6f7d; --brand-dark:#123c46; --brand-hover:#285f6b; --accent:#bfe6f0; }

/* ---- 2. База / сброс ------------------------------------------------------ */
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:var(--t-base); }

/* Дисплейный шрифт — заголовки и крупные числа */
.display,.kpi .value{ font-family:var(--font-display); letter-spacing:-.01em; }

/* Фокус — видимый на всём интерактиве (чинит снятый ранее outline) */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; border-radius:2px; }

/* Уважать «меньше движения» */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* ---- 3. Каркас: шапка ----------------------------------------------------- */
header{ background:var(--brand-dark); color:#fff; padding:var(--s3) var(--s5);
  display:flex; align-items:center; gap:14px; box-shadow:var(--sh-sm); }
header .logo{ height:24px; display:block; }
header .brand-sub{ color:var(--accent); font-size:var(--t-body); font-weight:500; letter-spacing:.3px;
  padding-left:14px; border-left:1px solid rgba(255,255,255,.20); }
header nav{ display:flex; gap:var(--s1); margin-left:var(--s3); flex-wrap:wrap; }
header nav a{ color:rgba(255,255,255,.74); text-decoration:none; font-size:var(--t-body); font-weight:600;
  padding:6px 12px; border-radius:var(--r-sm); transition:background .12s,color .12s; }
header nav a:hover{ background:rgba(255,255,255,.12); color:#fff; }
header nav a.active{ background:var(--accent); color:var(--brand-dark); }
header nav a.soon{ color:rgba(255,255,255,.45); cursor:default; border:1px dashed rgba(255,255,255,.22); }
header nav a.soon:hover{ background:transparent; color:rgba(255,255,255,.45); }
header .spacer{ flex:1; }
header .user{ color:rgba(255,255,255,.74); font-size:var(--t-body); }
header form{ margin:0; }
header button.logout,header button.refresh{ background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.22); border-radius:var(--r-sm); padding:6px 12px; cursor:pointer;
  font-size:var(--t-body); font-family:inherit; transition:background .12s; }
header button.refresh{ padding:6px 10px; font-size:var(--t-base); line-height:1; min-width:50px;
  text-align:center; font-variant-numeric:tabular-nums; }
header button.logout:hover,header button.refresh:hover{ background:rgba(255,255,255,.12); }
header button.refresh:disabled{ cursor:progress; }
header .sync-msg{ color:var(--accent); font-size:var(--t-small); white-space:nowrap; }
@keyframes syncpulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }
header button.refresh.syncing{ animation:syncpulse 1s ease-in-out infinite; cursor:progress; }

/* подвкладки направления «Финансовая аналитика» */
.subnav{ background:var(--brand); box-shadow:var(--sh-sm); }
.subnav .inner{ max-width:var(--wrap); margin:0 auto; padding:0 var(--s5); display:flex; gap:var(--s1); flex-wrap:wrap; }
.subnav a{ color:rgba(255,255,255,.78); text-decoration:none; font-size:12.5px; font-weight:600;
  padding:9px 12px; border-bottom:2px solid transparent; }
.subnav a:hover{ color:#fff; }
.subnav a.active{ color:#fff; border-bottom-color:var(--accent); }

/* ---- 4. Каркас: контент --------------------------------------------------- */
main{ max-width:var(--wrap); margin:0 auto; padding:var(--s5); }
h2.section{ font-size:var(--t-base); text-transform:uppercase; letter-spacing:.6px; font-weight:700;
  color:var(--brand); margin:var(--s6) 0 var(--s3); }
.section-head{ display:flex; align-items:center; gap:var(--s3); margin:var(--s6) 0 var(--s3); flex-wrap:wrap; }
.section-head h2.section{ margin:0; }

.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-sm); padding:var(--s4); }

.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--s3); }
.kpi .label{ color:var(--muted); font-size:var(--t-small); margin-bottom:6px; }
.kpi .value{ font-size:var(--t-kpi); font-weight:700; font-variant-numeric:tabular-nums; }
.kpi .value.green{ color:var(--pos); } .kpi .value.red{ color:var(--neg); }

.grid2{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--s4); }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); }
@media (max-width:900px){ .grid2{ grid-template-columns:1fr; } }
@media (max-width:980px){ .grid3{ grid-template-columns:1fr; } }
@media (max-width:1100px){ .grid4{ grid-template-columns:repeat(2,1fr); } }

canvas{ max-height:320px; }

/* ---- 5. Таблицы ----------------------------------------------------------- */
table{ width:100%; border-collapse:collapse; font-size:var(--t-body); }
th,td{ text-align:left; padding:var(--s2) 10px; border-bottom:1px solid var(--line); }
th{ color:var(--muted); font-weight:600; vertical-align:middle; }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* улучшение таблиц (tableenhance.js): «№», ручной ресайз, авто-ширина */
table.enh{ table-layout:auto; }
th.enh-num,td.enh-num{ width:1%; white-space:nowrap; text-align:right; color:var(--muted);
  font-variant-numeric:tabular-nums; padding-right:var(--s3); user-select:none; }
table.enh th{ position:relative; }
table.enh th::after{ content:""; position:absolute; top:0; right:0; width:8px; height:100%;
  cursor:col-resize; z-index:2; }
table.enh th:hover::after{ background:var(--brand); opacity:.22; }

/* ---- 6. Кнопки, пилюли, сегменты ------------------------------------------ */
.btn{ background:var(--brand); color:var(--on-brand); border:none; border-radius:var(--r-sm);
  padding:var(--s2) var(--s4); cursor:pointer; font-size:var(--t-body); font-weight:600;
  font-family:inherit; transition:background .12s; }
.btn:hover{ background:var(--brand-hover); }
.btn.secondary{ background:var(--tint); color:var(--ink); }
.btn.secondary:hover{ background:var(--neu-bg); }
.btn.xs{ padding:4px 9px; font-size:var(--t-caption); }

.muted{ color:var(--muted); }

.pill{ display:inline-block; padding:2px 8px; border-radius:var(--r-pill); font-size:var(--t-caption); }
.pill.income{ background:var(--pos-bg); color:var(--pos-ink); }
.pill.expense{ background:var(--neg-bg); color:var(--neg-ink); }
.fxpill{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:var(--r-pill);
  font-size:10.5px; font-weight:700; background:var(--info-bg); color:var(--info-ink); vertical-align:1px; }

.seg{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; flex-wrap:wrap; }
.seg button{ border:none; background:#fff; padding:5px 12px; font-size:var(--t-small); cursor:pointer;
  color:var(--muted); border-right:1px solid var(--line); font-variant-numeric:tabular-nums; font-family:inherit; }
.seg button:last-child{ border-right:none; }
.seg button:hover{ background:var(--neu-bg); }
.seg button.active{ background:var(--brand); color:#fff; font-weight:600; }

a.drill{ color:var(--brand); text-decoration:none; border-bottom:1px dashed var(--muted); cursor:pointer; }
a.drill:hover{ color:var(--brand-dark); border-bottom-style:solid; }

/* ---- 7. Статус-тэги: ЕДИНЫЙ канон (заменяет .sb-*/.gr-*/.abc-*/.rp-*/.t-*) - */
.tag{ display:inline-flex; align-items:center; gap:.4em; border-radius:var(--r-pill);
  padding:2px 9px; font-size:var(--t-caption); font-weight:700; line-height:1.45; white-space:nowrap; }
.tag.pos{ background:var(--pos-bg); color:var(--pos-ink); }
.tag.warn{ background:var(--warn-bg); color:var(--warn-ink); }
.tag.neg{ background:var(--neg-bg); color:var(--neg-ink); }
.tag.info{ background:var(--info-bg); color:var(--info-ink); }
.tag.neu{ background:var(--neu-bg); color:var(--neu-ink); }
.tag.watch{ background:var(--watch-bg); color:var(--watch-ink); }

/* цветная точка-индикатор (единый набор зон) */
.dot{ display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; }
.dot.pos{ background:var(--pos); } .dot.warn{ background:var(--warn); }
.dot.neg{ background:var(--neg); } .dot.info{ background:var(--info); }
.dot.watch{ background:var(--watch); } .dot.neu{ background:var(--muted); }

/* ---- 8. Панель фильтров / тулбар ------------------------------------------ */
.filters-bar{ position:sticky; top:0; z-index:500; padding:var(--s2) var(--s3);
  border-radius:0 0 var(--r-md) var(--r-md); box-shadow:var(--sh-md); }
.filters,.toolbar{ display:flex; flex-wrap:wrap; gap:6px var(--s2); align-items:flex-end; }
.filters .f,.toolbar .f{ display:flex; flex-direction:column; gap:2px; }
.filters label,.toolbar label{ font-size:10.5px; color:var(--muted); white-space:nowrap; }
.filters select,.filters input,.toolbar select,.toolbar input{ padding:4px 6px; border:1px solid var(--line);
  border-radius:7px; background:#fff; font-size:var(--t-small); min-width:96px; max-width:150px; font-family:inherit; }
.filters .btn{ padding:5px 12px; font-size:var(--t-small); }

/* Секции 9 «Мультивыбор» и 10 «Сворачиваемые блоки» удалены: их использовал
   только старый UI (multiselect.js/collapse.js на base.html), страницы входа
   этих классов не содержат. Мультивыбор кабинетов стилизует app.css. */

/* ---- 11. Справка «?» + поповер -------------------------------------------- */
.help{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
  border-radius:50%; background:var(--neu-bg); color:var(--muted); font-size:10px; font-weight:700;
  cursor:pointer; margin-left:6px; vertical-align:middle; user-select:none; flex:none;
  line-height:1; text-transform:none; letter-spacing:0; }
.help:hover,.help:focus-visible{ background:var(--brand); color:#fff; }
#helpPop{ position:fixed; z-index:1000; max-width:330px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--sh-lg); padding:var(--s3) 14px; font-size:12.5px;
  line-height:1.55; color:var(--ink); display:none; text-transform:none; letter-spacing:0; font-weight:400; }
#helpPop h4{ margin:0 0 6px; font-size:12.5px; color:var(--brand); font-weight:700; }
#helpPop p{ margin:0; }

/* ---- 12. Диалог (единый, доступный) --------------------------------------- */
.dialog-backdrop{ position:fixed; inset:0; background:rgba(var(--shadow-rgb),.45); z-index:900;
  display:flex; align-items:center; justify-content:center; padding:var(--s4); }
.dialog{ background:var(--card); border-radius:var(--r-md); box-shadow:var(--sh-lg);
  max-width:560px; width:100%; max-height:85vh; overflow:auto; padding:var(--s5); }
.dialog h3{ font-size:var(--t-sub); font-weight:700; margin:0 0 var(--s3); }
.dialog .actions{ display:flex; gap:var(--s2); justify-content:flex-end; margin-top:var(--s4); }

/* ---- 13. Мобильная адаптивность (гибрид) ---------------------------------- */
@media (max-width:720px){
  header{ flex-wrap:wrap; padding:10px 12px; gap:var(--s2) 10px; }
  header nav{ order:3; width:100%; margin-left:0; }
  header .brand-sub,header .codever,header .sync-msg,header .spacer{ display:none; }
  header .user{ margin-left:auto; }
  .subnav .inner{ padding:0 12px; overflow-x:auto; }
  main{ padding:12px; }
  h2.section,.section-head{ margin:18px 0 10px; }
  .kpis{ grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:var(--s2); }
  .kpi .value{ font-size:18px; }
  .card{ padding:12px; }
  .card:not(.filters-bar){ overflow-x:auto; }
  .filters-bar{ position:static; }
  .grid2,.grid3,.grid4{ grid-template-columns:1fr; }
  .filters .f{ flex:1 1 150px; }
  .filters select,.filters input{ max-width:none; width:100%; }
  .ms,.ms-btn{ width:100%; max-width:none; }
  .tbl-wrap{ border:1px solid var(--line); border-radius:var(--r-md); }
  /* ключевые таблицы (.cards) → карточки «поле: значение» */
  table.cards{ min-width:0 !important; }
  table.cards thead{ display:none; }
  table.cards,table.cards tbody,table.cards tr,table.cards td{ display:block; width:auto; }
  table.cards tr{ border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s2) 10px; margin-bottom:10px;
    background:var(--card); box-shadow:var(--sh-sm); }
  table.cards td{ border:none; padding:var(--s1) 0; display:flex; justify-content:space-between; gap:var(--s3);
    text-align:right; }
  table.cards td[data-label]::before{ content:attr(data-label); color:var(--muted); font-size:var(--t-caption);
    font-weight:600; text-align:left; flex:0 0 44%; }
  table.cards td:first-child{ font-weight:700; font-size:var(--t-base); text-align:left;
    border-bottom:1px solid var(--line); margin-bottom:var(--s1); padding-bottom:6px; }
  table.cards td:first-child::before{ display:none; }
  table.enh th.enh-num,table.enh td.enh-num{ display:none; }
  table.enh th::after{ display:none; }
  table.cards td.enh-num + td{ font-weight:700; font-size:var(--t-base); text-align:left;
    border-bottom:1px solid var(--line); margin-bottom:var(--s1); padding-bottom:6px; }
  table.cards td.enh-num + td::before{ display:none; }
}