/* ── LOCK NAV ITEM ──────────────────────────────────────────── */
.nav-lock { margin-left: auto; color: var(--stone); opacity: 0.55; flex-shrink: 0; }
.nav-item.locked { opacity: 0.5; cursor: default; }
.nav-item.locked:hover { background: transparent; color: var(--steel); }

/* ── DARK MODE TOGGLE BUTTON ────────────────────────────── */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  color: var(--steel);
  cursor: pointer;
  transition: all var(--ease);
  background: var(--canvas);
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--surface); color: var(--primary); }
.theme-toggle .icon-sun  { display: block; }
.theme-toggle .icon-moon { display: none; }
html.dark .theme-toggle .icon-sun  { display: none; }
html.dark .theme-toggle .icon-moon { display: block; }

/* ============================================================
   APP SHELL
   ============================================================ */
#app-screen { display: none; height: 100vh; }
#app-screen.visible { display: block; }
.app-shell { display: flex; height: 100vh; }

/* ── SIDEBAR (cream paper, светлый) ───────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--hairline);
  transition: width .22s ease, min-width .22s ease;
}
/* Сворачивание сайдбара кнопкой-стрелкой в шапке */
.app-shell.sidebar-collapsed .sidebar {
  width: 0; min-width: 0; border-right: none; overflow: hidden;
}
.sidebar-toggle svg { transition: transform .22s ease; }
.app-shell.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

.sidebar-brand {
  padding: 22px 18px 18px;
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 12px;
}

/* ── Brand icon — янтарный «mf» ──────────────────────────── */
.brand-icon {
  width: 36px; height: 36px;
  background: var(--accent);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Onest', sans-serif; font-weight: 800; font-size: 16px;
  color: var(--primary-deep);
  box-shadow: 0 2px 8px rgba(201,153,74,0.3);
  flex-shrink: 0;
}
.brand-icon svg { display: none; }
.brand-icon::before { content: 'mf'; }

.brand-name {
  font-family: 'Onest', sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--ink-deep);
}
.brand-name span { color: var(--primary); }
.brand-sub {
  font-size: 10px; color: var(--stone);
  letter-spacing: 1.2px; text-transform: uppercase;
  margin-top: 2px;
  font-weight: 500;
}

.sidebar-section { padding: 18px 12px 6px; }
.sidebar-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--stone);
  padding: 0 10px; margin-bottom: 6px;
}

/* ── Nav items ───────────────────────────────────────────── */
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  color: var(--slate);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all var(--ease);
  user-select: none;
  position: relative;
}
.nav-item:hover {
  background: rgba(31,29,24,0.04);
  color: var(--ink);
}
.nav-item.active {
  background: rgba(27,104,80,0.14);
  color: var(--primary-deep);
  font-weight: 600;
}
.nav-item.active::before {
  content: ''; position: absolute;
  left: -12px; top: 7px; bottom: 7px;
  width: 3px; background: var(--primary);
  border-radius: 0 3px 3px 0;
}
.nav-ic {
  width: 30px; height: 30px; flex-shrink: 0; box-sizing: border-box;
  padding: 7px; border-radius: 8px;
  background: var(--canvas); color: var(--primary); opacity: 1;
  box-shadow: 0 1px 2px rgba(20,18,14,0.06);
}
.nav-item.active .nav-ic { opacity: 1; }
/* Навигация в общем залитом прямоугольнике: иконки — белые чипы на зелёной панели */
.nav-panel {
  background: var(--primary-soft);
  border-radius: 14px;
  padding: 6px;
  margin: 4px 6px 6px;
}
.nav-badge {
  margin-left: auto;
  background: var(--accent);
  color: var(--primary-deep);
  font-size: 10px; font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-full);
}

/* ── Sidebar footer (источники) ──────────────────────────── */
.sidebar-footer {
  margin-top: auto;
  padding: 14px 12px 18px;
  border-top: 1px solid var(--hairline);
}
.sidebar-source-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
}
.src-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.src-label { font-size: 11px; color: var(--slate); flex: 1; font-weight: 500; }
.src-pill {
  font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--r-full);
}
.src-pill.ok   { background: var(--primary-soft); color: var(--primary-deep); }
.src-pill.warn { background: var(--accent-soft);  color: var(--accent-deep); }
.src-pill.off  { background: var(--tint-gray);    color: var(--stone); }

/* ── CONTENT AREA ────────────────────────────────────────── */
.content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* ── TOPBAR ──────────────────────────────────────────────── */
/* Высокий z-index, БЕЗ isolation — иначе avatar-dropdown окажется
   запертым в собственном stacking context и не сможет вылететь
   поверх контента страницы (карточек, плиток KPI). */
.topbar {
  height: 60px;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center;
  padding: 0 28px; gap: 14px;
  flex-shrink: 0;
  position: relative;
  z-index: 1000;
}
.topbar-title {
  font-family: 'Onest', sans-serif;
  font-size: 20px; font-weight: 600;
  color: var(--ink-deep); letter-spacing: -0.025em;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ── Pill tabs (период) ──────────────────────────────────── */
.pill-tabs {
  display: flex; gap: 2px;
  padding: 3px;
  background: var(--surface);
  border-radius: var(--r-md);
}
.pill-tab {
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-size: 12px; font-weight: 500;
  color: var(--slate);
  transition: all var(--ease);
  white-space: nowrap;
  border: none;
}
.pill-tab:hover { color: var(--ink); }
.pill-tab.active {
  background: var(--canvas);
  color: var(--ink);
  box-shadow: var(--sh-sm);
  font-weight: 600;
}

/* ── Period select (компактный выбор периода + свой период) ── */
.period-select { position: relative; }
.period-trigger {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--hairline);
  font-size: 12px; font-weight: 500; color: var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: border-color var(--ease), background var(--ease);
}
.period-trigger:hover { border-color: var(--hairline-strong); }
.period-menu {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 230px; padding: 6px;
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-md); box-shadow: 0 8px 28px rgba(0,0,0,0.14);
}
.period-menu.open { display: block; }
.period-opt {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--charcoal); border: none; background: none;
  cursor: pointer; transition: background var(--ease);
}
.period-opt:hover { background: var(--surface-soft); }
.period-opt-active { background: var(--primary-soft); color: var(--primary-deep); font-weight: 600; }
.period-sep { height: 1px; background: var(--hairline); margin: 6px 4px; }
.period-custom { padding: 4px; }
.period-custom-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--stone); font-weight: 600; margin-bottom: 6px;
}
.period-custom-row { display: flex; align-items: center; gap: 6px; }
.period-date {
  flex: 1; min-width: 0; height: 30px; padding: 0 6px;
  border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
  font-size: 12px; color: var(--ink); background: var(--canvas);
}
.period-apply {
  width: 100%; margin-top: 8px; padding: 7px;
  border-radius: var(--r-sm); border: none; cursor: pointer;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 600;
  transition: background var(--ease);
}
.period-apply:hover { background: var(--primary-deep); }

/* ── Topbar icon buttons ─────────────────────────────────── */
/* transition только по конкретным свойствам (не all) — иначе при
   смене темы CSS-переменные плавно меняются по transform/opacity
   и кнопка «исчезает» на момент анимации */
.topbar-icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  color: var(--slate);
  transition: background var(--ease), border-color var(--ease), color var(--ease);
  position: relative;
  background: var(--canvas);
  -webkit-tap-highlight-color: transparent;
}
.topbar-icon-btn:hover { background: var(--surface); border-color: var(--hairline-strong); color: var(--ink); }
.topbar-icon-btn:focus { outline: none; }
.topbar-icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.notif-dot {
  position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px;
  background: var(--accent); border-radius: 50%;
  border: 1.5px solid var(--canvas);
}

/* ── User avatar ─────────────────────────────────────────── */
/* Без transition и без :active transform — иначе при клике
   получается визуальный «дёрг» (особенно если параллельно
   идёт re-flow от Chart.js или подгрузки данных) */
.user-avatar {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: white;
  cursor: pointer; position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.user-avatar:hover { box-shadow: 0 2px 6px rgba(27,104,80,0.25); }

/* ── Avatar dropdown ─────────────────────────────────────── */
/* Очень высокий z-index чтобы гарантированно был поверх любых
   карточек / графиков / sticky-headers на странице */
.avatar-dropdown {
  position: absolute; top: 42px; right: 0;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 6px;
  min-width: 200px;
  box-shadow: var(--sh-lg);
  z-index: 9999;
  display: none;
  animation: fadeDown 0.15s cubic-bezier(.4,0,.2,1);
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.avatar-dropdown.open { display: block; }
.dropdown-item {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--charcoal);
  cursor: pointer;
  transition: background var(--ease);
  display: flex; align-items: center; gap: 10px;
  font-weight: 500;
}
.dropdown-item:hover { background: var(--surface); }
.dropdown-item.danger { color: var(--semantic-error); }
.dropdown-separator { height: 1px; background: var(--hairline); margin: 4px 0; }

/* ── PAGE container ──────────────────────────────────────── */
.page {
  flex: 1;
  overflow-y: auto;
  padding: 28px;
  background: var(--surface);
}

/* ── PAGE ANIMATIONS ─────────────────────────────────────── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.page > * { animation: pageIn 0.25s cubic-bezier(.4, 0, .2, 1) both; }
.page > *:nth-child(2) { animation-delay: 0.04s; }
.page > *:nth-child(3) { animation-delay: 0.08s; }
.page > *:nth-child(4) { animation-delay: 0.12s; }