/* ============================================================================
   Стилистика 4D Финансист для портала «Четвёртое Измерение».
   Портирована из 4d-fin/static/v2/css/*.
   Правило: серый sidebar в обеих темах; без эмодзи (иконки — SVG через icon()).
   ============================================================================ */

/* ── Тёмная тема (переопределение) ──────────────────────────────────────── */
:root,
:root[data-theme="dark"],
html[data-theme="dark"] {
  /* Токены Финансист */
  --uiBackgroundGrey: #1c1f24;
  --uiBackgroundWhite: #23262d;
  --ui01: #2f3339;
  --ui02: #3d4148;
  --ui03: #4f545c;
  --ui04: #6b7280;
  --uiMainNav01: #1c1f24;    /* серый sidebar в тёмной */
  --uiMainNav02: #2a2f38;    /* hover */
  --uiMainNav04: #a3a9b8;    /* текст в nav */
  --text01: #e5e9f0;
  --text02: #c4cad4;
  --text03: #8b93b5;
  --text04: #525966;
  --text09: #e5e9f0;
  --interactive01: var(--accent, #e00a17);
  --interactive02: #3d4148;
  --hoverPrimary: var(--accent-hover, #b80813);
  --highlightUi01: #2b241a;
  --highlightUi02: #1c1f24;
  --focus: var(--accent, #e00a17);
}

/* ── Светлая тема ──────────────────────────────────────────────────────── */
:root[data-theme="light"],
html[data-theme="light"] {
  --uiBackgroundGrey: #f4f5f7;
  --uiBackgroundWhite: #ffffff;
  --ui01: #e5e7eb;
  --ui02: #d1d5db;
  --ui03: #9ca3af;
  --ui04: #6b7280;
  --uiMainNav01: #e8e9ed;    /* серый sidebar в светлой */
  --uiMainNav02: #dedfe4;    /* hover */
  --uiMainNav04: #4b5563;    /* текст в nav */
  --text01: #12151c;
  --text02: #252b39;
  --text03: #6b7280;
  --text04: #9ca3af;
  --text05: #ffffff;
  --text09: #ffffff;
  --interactive01: var(--accent, #e00a17);
  --hoverPrimary: var(--accent-hover, #b80813);
  --highlightUi01: #fdece9;
  --highlightUi02: #f6f6f9;
  --focus: var(--accent, #e00a17);
}

/* ── Типографика ───────────────────────────────────────────────────────── */
html, body {
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "tnum" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  background: var(--uiBackgroundGrey);
  color: var(--text01);
}

/* ── Sidebar (серый в обеих темах) ─────────────────────────────────────── */
.sidebar {
  background: var(--uiMainNav01) !important;
  border-right: 1px solid var(--ui01);
}
.sidebar-logo {
  background: var(--uiMainNav01);
  border-bottom: 1px solid var(--ui01);
}
.sidebar-logo h2 { color: var(--text01) !important; letter-spacing: 0.4px; }
.sidebar-logo span { color: var(--text03) !important; }

.nav-section {
  color: var(--text03) !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 14px 16px 6px !important;
}
.nav-item {
  color: var(--uiMainNav04) !important;
  border-left: 3px solid transparent;
  font-weight: 400;
  font-size: 13px;
  padding: 9px 14px !important;
  display: flex; align-items: center; gap: 10px;
  transition: color .12s, background .12s;
}
.nav-item:hover {
  background: var(--uiMainNav02) !important;
  color: var(--text01) !important;
}
.nav-item.active {
  background: var(--uiMainNav02) !important;
  color: var(--interactive01) !important;
  border-left-color: var(--interactive01) !important;
  font-weight: 500;
}
.nav-item .icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: currentColor; }
.nav-item svg { width: 16px; height: 16px; stroke-width: 1.8; }

.sidebar-user {
  background: var(--uiMainNav01);
  border-top: 1px solid var(--ui01);
}
.sidebar-user .name { color: var(--text01); }
.sidebar-user .role { color: var(--text03); }

/* ── Топбар ─────────────────────────────────────────────────────────────── */
.topbar, .top-bar, .page-header {
  background: var(--uiBackgroundWhite);
  border-bottom: 1px solid var(--ui01);
}

/* ── Кнопки в стиле Финансиста ─────────────────────────────────────────── */
.btn {
  font-family: inherit;
  border-radius: 3px;
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.btn:not(.btn-sm):not(.btn--icon) { height: 36px; padding: 6px 16px; font-size: 13px; }
.btn-primary, .btn.btn--primary {
  background: var(--interactive01); color: #fff; border: none; font-weight: 600;
}
.btn-primary:hover, .btn.btn--primary:hover { background: var(--hoverPrimary); }
.btn-secondary, .btn.btn--secondary {
  background: transparent; color: var(--text02);
  border: 1px solid var(--ui02); font-weight: 400;
}
.btn-secondary:hover, .btn.btn--secondary:hover {
  border-color: var(--text02); color: var(--text01);
}
.btn-ghost, .btn.btn--ghost {
  background: transparent; color: var(--interactive01); border: none;
}

/* ── Инпуты, селекты ───────────────────────────────────────────────────── */
.form-input, .form-select, input.form-input, select.form-input, textarea.form-input {
  background: var(--uiBackgroundWhite);
  border: 1px solid var(--ui02);
  border-radius: 3px;
  color: var(--text01);
  height: 34px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 13px;
  transition: border-color .12s, box-shadow .12s;
}
.form-input:focus, .form-select:focus, textarea.form-input:focus {
  outline: none;
  border-color: var(--interactive01);
  box-shadow: 0 0 0 3px rgba(224, 10, 23, 0.15);
}

/* ── Таблицы в стиле Финансиста ────────────────────────────────────────── */
.table, table.table {
  background: var(--uiBackgroundWhite);
  border: 1px solid var(--ui01);
  border-radius: 3px;
  overflow: hidden;
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
.table th {
  background: var(--uiBackgroundGrey);
  color: var(--text02);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ui01);
}
.table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ui01);
  color: var(--text01);
  font-feature-settings: "tnum" 1;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--highlightUi01); }

/* ── KPI-карточки ───────────────────────────────────────────────────────── */
.card, .kpi {
  background: var(--uiBackgroundWhite);
  border: 1px solid var(--ui01);
  border-radius: 3px;
  padding: 14px 16px;
}
.card:hover, .kpi:hover {
  border-color: var(--ui02);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* ── Empty state без эмодзи ─────────────────────────────────────────────── */
.empty-state {
  background: var(--uiBackgroundWhite);
  border: 1px solid var(--ui01);
  border-radius: 3px;
  padding: 60px 24px;
  text-align: center;
  color: var(--text03);
}
.empty-state .icon,
.empty-state svg { color: var(--text03); opacity: 0.5; }

/* ── Скролл-бар финтабло ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(124, 128, 136, 0.35);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(124, 128, 136, 0.55); }

/* ── Метрика/CJM — вкладки ─────────────────────────────────────────────── */
.metrika-tabs button {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text03);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 0;
  transition: color .12s, border-color .12s;
}
.metrika-tabs button:hover { color: var(--text01); }
.metrika-tabs button.is-active {
  color: var(--interactive01);
  border-bottom-color: var(--interactive01);
  font-weight: 600;
}

/* ── Chart-canvas box ──────────────────────────────────────────────────── */
canvas { max-width: 100%; }

/* ── Toast в стиле Финансиста ──────────────────────────────────────────── */
#toast, .toast, .app-toast {
  background: var(--uiBackgroundWhite);
  color: var(--text01);
  border-left: 3px solid var(--interactive01);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border-radius: 3px;
  padding: 12px 16px;
  font-size: 14px;
}

/* ── Alert-инфо/warning/danger — универсальные ─────────────────────────── */
.alert {
  padding: 10px 14px;
  border-radius: 3px;
  border-left: 3px solid var(--interactive01);
  background: var(--highlightUi01);
  color: var(--text01);
  font-size: 13px;
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert-info    { border-left-color: #3887ff; background: rgba(56,135,255,0.08); }
.alert-warning { border-left-color: #febd2b; background: rgba(254,189,43,0.10); }
.alert-danger  { border-left-color: #d04545; background: rgba(208,69,69,0.08); }

/* ── Плавное переключение темы ─────────────────────────────────────────── */
html { transition: background-color .2s ease, color .2s ease; }
.sidebar, .nav-item, .card, .table, .form-input, .form-select, .btn {
  transition: background-color .15s, border-color .15s, color .15s;
}

/* ── theme-toggle кнопка ─────────────────────────────────────────────── */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--ui02);
  border-radius: 3px;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text02);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.theme-toggle:hover { background: var(--uiBackgroundGrey); color: var(--text01); border-color: var(--ui03); }
.theme-toggle svg { width: 16px; height: 16px; }

/* ── icon-span сброс — SVG в тексте не съезжает ────────────────────────── */
.icon, [data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}
.icon svg, [data-icon] svg { display: block; }

/* ── Chat-компоненты (переопределяем под финансист-стиль) ──────────────── */
.chat-item {
  border-radius: 3px;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.chat-item:hover { background: var(--uiBackgroundGrey); border-color: var(--ui01); }
.chat-item.active {
  background: var(--highlightUi01);
  border-left: 3px solid var(--interactive01);
}

/* ── Modal Финансист-стиль (переопределение) ───────────────────────────── */
.modal, .wp-modal {
  background: var(--uiBackgroundWhite);
  border-radius: 3px;
  border: 1px solid var(--ui01);
  box-shadow: 0 24px 80px rgba(18,21,28,0.28), 0 8px 24px rgba(18,21,28,0.14);
}
.modal-header, .wp-modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--ui01);
  background: var(--uiBackgroundWhite);
}
.modal-header h3, .wp-modal-header h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text01);
  margin: 0;
}

/* ── Badge/Chip Финансист-стиль ────────────────────────────────────────── */
.badge, .chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}
.badge-info    { background: rgba(56,135,255,0.10); color: #3887ff; }
.badge-success { background: rgba(83,186,32,0.10); color: #53ba20; }
.badge-warning { background: rgba(254,189,43,0.14); color: #a17300; }
.badge-danger  { background: rgba(208,69,69,0.10); color: #d04545; }
.badge-neutral { background: var(--ui01); color: var(--text02); }

/* ── Section-title — заголовок секции страницы ─────────────────────────── */
.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text01);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title svg { color: var(--interactive01); }

/* ── Dropdown/select Финансист (нативные) ──────────────────────────────── */
select, .form-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888a8d' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px !important;
  appearance: none;
  -webkit-appearance: none;
}

/* ── WP-модуль (Закупки) — Финансист-стиль ─────────────────────────────── */
.wp-tab {
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text03);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.wp-tab:hover { color: var(--text01); }
.wp-tab.active {
  color: var(--interactive01);
  border-bottom-color: var(--interactive01);
  font-weight: 600;
}
.wp-empty { color: var(--text03); font-size: 13px; }
.wp-warn {
  padding: 10px 14px;
  background: rgba(208,69,69,0.06);
  border-left: 3px solid #d04545;
  color: var(--text01);
  border-radius: 3px;
  font-size: 13px;
}
.wp-ok-bar {
  padding: 10px 14px;
  background: rgba(83,186,32,0.08);
  border-left: 3px solid #53ba20;
  color: var(--text01);
  border-radius: 3px;
  font-size: 13px;
}

/* ── Печать CJM-карты в PDF ────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .top-bar, .theme-toggle,
  .metrika-tabs, #metrikaPeriod, #metrikaCustomPeriod, #metrikaRefresh,
  #cjmMapChannel + label, button {
    display: none !important;
  }
  .cjm-journey, .cjm-stage {
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  body { background: #fff !important; }
}

/* ── CJM: фоновая полоска обновления ───────────────────────────────────── */
@keyframes cjmProg {
  0%   { opacity: .3; transform: scaleX(0); transform-origin: left; }
  50%  { opacity: .7; transform: scaleX(0.6); }
  100% { opacity: .3; transform: scaleX(1); transform-origin: right; }
}

/* ── CJM карта: контейнеры под темы ────────────────────────────────────── */
.cjm-stage, .cjm-journey {
  background: var(--uiBackgroundWhite) !important;
  color: var(--text01);
}
.cjm-stage {
  transition: transform .12s ease, box-shadow .12s ease;
}
.cjm-stage:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ── Кнопка с индикатором загрузки ─────────────────────────────────────── */
.btn.is-loading {
  opacity: 0.7;
  cursor: progress;
}
.btn.is-loading svg {
  animation: btn-spin 1.2s linear infinite;
}
@keyframes btn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Adaptive mobile: sidebar сворачивается ────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    height: 100vh;
    width: 260px;
    z-index: 100;
    transition: left .22s ease;
  }
  .sidebar.open { left: 0; }
  .main-content { margin-left: 0 !important; }
}

/* ── Статус-точки (для FAQ и таблиц) ───────────────────────────────────── */
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--text3);
}
.dot-crit    { background: #dc3545; }
.dot-low     { background: #f39c12; }
.dot-order   { background: #3498db; }
.dot-ok      { background: #27ae60; }
.dot-nosales { background: #6c757d; }

/* ── Индикатор синка МС в топбаре ─────────────────────────────────────── */
.ms-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  transition: background .15s ease, border-color .15s ease;
}
.ms-sync-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0;
  flex-shrink: 0;
}
.ms-sync-badge:hover { border-color: var(--border); }
.ms-sync-ok       .dot { background: #27ae60; }
.ms-sync-warn     .dot { background: #f39c12; }
.ms-sync-stale    .dot { background: #dc3545; }
.ms-sync-running  .dot { background: #3498db; animation: ms-blink 1.2s ease-in-out infinite; }
.ms-sync-unknown  .dot { background: #6c757d; }
.ms-sync-notoken  .dot { background: #dc3545; }
.ms-sync-ok       { color: var(--text2); }
.ms-sync-warn     { color: var(--text1); background: rgba(243,156,18,.08); }
.ms-sync-stale    { color: var(--text1); background: rgba(220,53,69,.10); }
.ms-sync-running  { color: var(--text1); background: rgba(52,152,219,.10); }
.ms-sync-notoken  { color: var(--text1); background: rgba(220,53,69,.10); }
@keyframes ms-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@media (max-width: 768px) {
  .ms-sync-badge .lbl { display: none; }
  .ms-sync-badge { padding: 4px 6px; }
}

/* icon inline alignment inside buttons */
.btn .icon, .wp-tab .icon, h3 .icon, h4 .icon { vertical-align: middle; }
.btn .icon svg, h3 .icon svg, h4 .icon svg { display: inline-block; vertical-align: middle; }
.icon { display: inline-flex; align-items: center; }