/* V7 Padel — единый слой тем
 * Загружается ПОСЛЕ локальных <style> блоков. Override через html[data-theme="..."]
 * имеет специфичность (0,1,1) и побеждает :root (0,1,0). 3 темы: tiffany / dark / v7.
 * Источник переменных: theme.js (localStorage['v7-theme']).
 */

/* ---- GLOBAL DEFAULTS (light / tiffany) ---- */
:root {
  --bg: #f5f7f9;
  --surface: #ffffff;
  --surface2: #f1f5f9;
  --border: rgba(15,23,42,0.08);
  --border-hover: rgba(15,23,42,0.18);
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --accent: #0ABAB5;
  --accent-soft: rgba(10,186,181,0.1);
  --accent-border: rgba(10,186,181,0.25);
  --shadow: 0 1px 3px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06);
  --good: #13c296;
  --bad: #e74c3c;
  --warn: #f39c12;
  --radius: 16px;
}

html[data-theme="tiffany"] {
  /* Same as :root defaults — explicit for specificity */
  --bg: #f5f7f9;
  --surface: #ffffff;
  --surface2: #f1f5f9;
  --border: rgba(15,23,42,0.08);
  --border-hover: rgba(15,23,42,0.18);
  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;
  --accent: #0ABAB5;
  --accent-soft: rgba(10,186,181,0.1);
  --accent-border: rgba(10,186,181,0.25);
  --shadow: 0 1px 3px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06);
  --good: #13c296;
  --bad: #e74c3c;
  --warn: #f39c12;
}

html[data-theme="dark"] {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface2: #0b1220;
  --border: rgba(148,163,184,0.12);
  --border-hover: rgba(148,163,184,0.28);
  --text: #f1f5f9;
  --text2: #cbd5e1;
  --text3: #64748b;
  --accent: #7C3AED;
  --accent-soft: rgba(124,58,237,0.14);
  --accent-border: rgba(124,58,237,0.3);
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
  --good: #13c296;
  --bad: #e74c3c;
  --warn: #f39c12;
}

html[data-theme="v7"] {
  --bg: #000000;
  --surface: #111111;
  --surface2: #1a1a1a;
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(255,255,255,0.18);
  --text: #f5f5f7;
  --text2: #a1a1a6;
  --text3: #6e6e73;
  --accent: #d4f03a;
  --accent-soft: rgba(212,240,58,0.1);
  --accent-border: rgba(212,240,58,0.22);
  --shadow: 0 1px 2px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.5);
  --good: #13c296;
  --bad: #e74c3c;
  --warn: #f39c12;
}

/* ---- БАЗА: body, nav, footer перебиваем через высокую специфичность ---- */
html[data-theme] body { background: var(--bg) !important; color: var(--text) !important; }

html[data-theme="tiffany"] nav { background: rgba(255,255,255,0.85) !important; border-bottom-color: var(--border) !important; }
html[data-theme="dark"]    nav { background: rgba(15,23,42,0.82) !important; border-bottom-color: var(--border) !important; }
html[data-theme="v7"]      nav { background: rgba(0,0,0,0.8) !important;     border-bottom-color: var(--border) !important; }

html[data-theme] nav .nav-logo { color: var(--text) !important; }
html[data-theme] nav .nav-logo em,
html[data-theme] .footer-logo em,
html[data-theme] .stat-n em,
html[data-theme] .hero-eye { color: var(--accent) !important; }
html[data-theme] nav .nav-links a { color: var(--text2) !important; }
html[data-theme] nav .nav-links a:hover { color: var(--text) !important; }

html[data-theme] .nav-pill { background: var(--accent-soft) !important; border-color: var(--accent-border) !important; color: var(--accent) !important; }

html[data-theme] footer { border-top-color: var(--border) !important; }
html[data-theme] .footer-logo, html[data-theme] .footer-text { color: var(--text3) !important; }

/* ---- КАРТОЧКИ ---- */
html[data-theme] .card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; box-shadow: var(--shadow); }
html[data-theme] .card:hover { border-color: var(--border-hover) !important; }
html[data-theme] .card-desc, html[data-theme] .card-list-item { color: var(--text2) !important; }
html[data-theme] .card-num, html[data-theme] .card-arrow { color: var(--text3) !important; border-color: var(--border) !important; }
html[data-theme] .card-list { border-top-color: var(--border) !important; }

html[data-theme] .tag-now  { background: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent-border) !important; }
html[data-theme] .tag-soon { background: transparent !important; color: var(--text3) !important; border-color: var(--border) !important; }

/* В tiffany / dark — цветные карточки становятся нейтральными (accent вместо красок)
   В v7 — оставляем оригинальные краски для сочности. */
html[data-theme="tiffany"] .card.green  .card-title,
html[data-theme="tiffany"] .card.teal   .card-title,
html[data-theme="tiffany"] .card.blue   .card-title,
html[data-theme="tiffany"] .card.orange .card-title,
html[data-theme="tiffany"] .card.pink   .card-title,
html[data-theme="tiffany"] .card.purple .card-title,
html[data-theme="tiffany"] .card.yellow .card-title,
html[data-theme="tiffany"] .card.cyan   .card-title { color: var(--text) !important; }

html[data-theme="dark"] .card.green  .card-title,
html[data-theme="dark"] .card.teal   .card-title,
html[data-theme="dark"] .card.blue   .card-title,
html[data-theme="dark"] .card.orange .card-title,
html[data-theme="dark"] .card.pink   .card-title,
html[data-theme="dark"] .card.purple .card-title,
html[data-theme="dark"] .card.yellow .card-title,
html[data-theme="dark"] .card.cyan   .card-title { color: var(--text) !important; }

html[data-theme="tiffany"] .card.featured { background: linear-gradient(140deg, #e6fbfa 0%, #ffffff 55%) !important; border-color: var(--accent-border) !important; }
html[data-theme="dark"]    .card.featured { background: linear-gradient(140deg, #1a1240 0%, #1e293b 55%) !important; border-color: var(--accent-border) !important; }
html[data-theme="tiffany"] .card.featured .card-title { color: var(--accent) !important; }
html[data-theme="dark"]    .card.featured .card-title { color: var(--accent) !important; }

/* ---- HERO (index.html) ---- */
html[data-theme="tiffany"] .hero-glow { background: radial-gradient(circle, rgba(10,186,181,0.08) 0%, transparent 65%) !important; }
html[data-theme="dark"]    .hero-glow { background: radial-gradient(circle, rgba(124,58,237,0.08) 0%, transparent 65%) !important; }
html[data-theme] .hero h1 { color: var(--text) !important; }
html[data-theme] .hero h1 .muted { color: var(--text3) !important; }
html[data-theme] .hero-sub { color: var(--text2) !important; }
html[data-theme] .stat-n { color: var(--text) !important; }
html[data-theme] .stat-l { color: var(--text3) !important; }
html[data-theme] .section-intro h2 { color: var(--text) !important; }
html[data-theme] .section-intro p, html[data-theme] .section-intro-label { color: var(--text2) !important; }

/* ---- DASHBOARD / DATA общие классы ---- */
html[data-theme] .kpi, html[data-theme] .kpi-card, html[data-theme] .panel, html[data-theme] .block,
html[data-theme] .stat-box, html[data-theme] .metric, html[data-theme] .table-wrap {
  background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important;
}
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3, html[data-theme] h4 { color: var(--text); }
html[data-theme] table { color: var(--text); }
html[data-theme] th { color: var(--text2) !important; border-color: var(--border) !important; background: var(--surface2) !important; }
html[data-theme] td { border-color: var(--border) !important; }
html[data-theme] tr:hover td { background: var(--surface2) !important; }
html[data-theme] .muted, html[data-theme] small { color: var(--text3) !important; }
html[data-theme] a { color: var(--accent); }
html[data-theme] input, html[data-theme] select, html[data-theme] textarea {
  background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important;
}
html[data-theme] input::placeholder { color: var(--text3) !important; }
html[data-theme] button.primary, html[data-theme] .btn-primary {
  background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important;
}
/* v7 theme: accent is bright yellow-green, needs dark text for contrast */
html[data-theme="v7"] button.primary, html[data-theme="v7"] .btn-primary {
  color: #000 !important;
}
html[data-theme="v7"] .theme-switcher button.active { color: #000; }

/* ---- TEAM LINK: скрываем в тёме tiffany (CEO не видит внутреннюю кухню) ---- */
html[data-theme="tiffany"] .team-link,
html[data-theme="tiffany"] a.team-link,
html[data-theme="tiffany"] .brain-link { display: none !important; }

/* ---- NAV BASE (moved from individual pages) ---- */
ul.nav-links { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; }

/* ---- HAMBURGER MENU (mobile ≤ 768px) ---- */
.nav-burger {
  display: none; /* hidden on desktop */
  appearance: none; background: transparent; border: 0;
  width: 36px; height: 36px; padding: 6px;
  cursor: pointer; flex-direction: column; justify-content: center; gap: 5px;
  margin-right: 8px;
}
.nav-burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--text2); transition: all .25s;
}
/* Animate to X when open */
nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .nav-burger { display: flex; }
  ul.nav-links {
    display: none !important;
    position: absolute; top: 56px; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    flex-direction: column; padding: 8px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 99;
  }
  nav.nav-open ul.nav-links { display: flex !important; }
  .nav-links a { line-height: 44px !important; padding: 0 24px !important; }
  .nav-links a:hover { background: var(--surface2); }
  .nav-pill { display: none; }
}

/* ---- ПЕРЕКЛЮЧАТЕЛЬ ТЕМ ---- */
.theme-switcher {
  position: fixed; top: 10px; right: 14px; z-index: 500;
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 100px; box-shadow: var(--shadow);
  font-family: 'Inter', -apple-system, sans-serif;
}
.theme-switcher button {
  appearance: none; background: transparent; border: 0;
  color: var(--text3); width: 30px; height: 30px; border-radius: 50%;
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.theme-switcher button:hover { color: var(--text); background: var(--surface2); }
.theme-switcher button.active { color: #fff; background: var(--accent); }

/* Nav с padding справа чтоб переключатель не налезал (для страниц без сайдбара) */
@media (min-width: 961px) {
  html[data-theme] nav:not(.v7-sidebar-skip) { padding-right: 140px !important; }
}

/* ---- SIDEBAR THEME OVERRIDES ---- */
html[data-theme] .v7-sidebar { background: var(--surface) !important; border-right-color: var(--border) !important; }
html[data-theme] .sb-header { border-bottom-color: var(--border) !important; }
html[data-theme] .sb-logo { color: var(--text) !important; }
html[data-theme] .sb-logo em { color: var(--accent) !important; }
html[data-theme] .sb-logo-icon { background: var(--accent) !important; }
html[data-theme="v7"] .sb-logo-icon,
html[data-theme="tiffany"] .sb-logo-icon { color: #000 !important; }
html[data-theme="dark"] .sb-logo-icon { color: #fff !important; }
html[data-theme] .sb-group-label { color: var(--text3) !important; }
html[data-theme] .sb-item { color: var(--text2) !important; }
html[data-theme] .sb-item:hover { background: var(--surface2) !important; color: var(--text) !important; }
html[data-theme] .sb-item.active { background: var(--accent-soft) !important; color: var(--accent) !important; }
html[data-theme] .sb-footer { border-top-color: var(--border) !important; }
html[data-theme] .sb-role { color: var(--accent) !important; }
html[data-theme] .sb-logout { color: var(--text3) !important; border-color: var(--border) !important; }
html[data-theme] .sb-logout:hover { color: var(--text) !important; border-color: var(--border-hover) !important; }
html[data-theme] .sb-toggle { color: var(--text3) !important; }
html[data-theme] .sb-toggle:hover { color: var(--text) !important; background: var(--surface2) !important; }
/* Tiffany: hide team/brain links like before */
html[data-theme="tiffany"] .v7-sidebar .team-link,
html[data-theme="tiffany"] .v7-sidebar .brain-link { display: none !important; }

/* ---- ROLE PICKER MODAL (только на index.html) ---- */
.role-picker-backdrop {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(10px) saturate(140%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  font-family: 'Inter', -apple-system, sans-serif;
}
.role-picker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 44px 36px 36px;
  max-width: 560px; width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.role-picker-eye { font-size: 11px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.role-picker h2 { font-size: 30px; font-weight: 600; letter-spacing: -0.8px; color: var(--text); margin-bottom: 10px; }
.role-picker p { font-size: 15px; color: var(--text2); margin-bottom: 32px; font-weight: 300; }
.role-picker-options { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.role-picker-btn {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 14px 18px; cursor: pointer; text-align: center;
  transition: all .25s; color: var(--text);
  appearance: none; font-family: inherit;
}
.role-picker-btn:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.role-picker-btn .ico { display: block; font-size: 30px; margin-bottom: 12px; line-height: 1; }
.role-picker-btn strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.role-picker-btn span { display: block; font-size: 11px; color: var(--text3); letter-spacing: .3px; }
@media (max-width: 560px) { .role-picker-options { grid-template-columns: 1fr; } .role-picker { padding: 32px 20px 24px; } .role-picker h2 { font-size: 24px; } }


/* =========================================================================
   MOBILE RESPONSIVE HELPERS (добавлено 2026-04-17 после жалобы «таблицы не
   листаются вправо», правил # 10 в 12_WORKING_WITH_CLAUDE.md).

   Правила:
   1. Любая .table-wrap получает horizontal scroll на узких экранах, вместо
      скрытия колонок через display:none — пусть пользователь свайпает.
   2. Chart.js канвасы имеют minimum-height чтобы не схлопнулись + touch-
      friendly legend labels.
   3. KPI-grid на очень узких экранах — 1 колонка.
   ========================================================================= */

/* Мобильный горизонтальный scroll для широких таблиц */
@media (max-width: 760px) {
  .table-wrap, .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table, .table-responsive table {
    min-width: 640px;  /* хватит чтобы все колонки были читаемы */
  }
  /* Подсказка «можно свайпать» — тонкая тень справа */
  .table-wrap {
    background-image:
      linear-gradient(to right, var(--surface, #fff), var(--surface, #fff)),
      linear-gradient(to right, var(--surface, #fff), var(--surface, #fff)),
      linear-gradient(to right, rgba(0,0,0,0.08), rgba(255,255,255,0)),
      linear-gradient(to left,  rgba(0,0,0,0.08), rgba(255,255,255,0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

/* Графики Chart.js: удерживаем minimum height чтобы не схлопывались */
@media (max-width: 600px) {
  .chart-wrap, .chart-box {
    min-height: 220px;
  }
  .chart-wrap.short {
    min-height: 180px;
  }
  .chart-wrap.tall {
    min-height: 260px;
  }
}

/* KPI ряд на очень узком экране — 1 колонка, без сжатия цифр */
@media (max-width: 480px) {
  .kpi-row, .kpi-grid {
    grid-template-columns: 1fr !important;
  }
}