/* Application shell layout: sidebar, topbar, content area, page routing.
 *
 * Root layout is CSS Grid, not flex-with-explicit-heights: a flex row
 * where the sidebar had its own `height:100vh` while `.main`'s content
 * could be taller OR shorter than one viewport made the sidebar's dark
 * background visibly end before/after the real page bottom on pages
 * whose content differs a lot from viewport height (e.g. the Campaign
 * Wizard's per-step content). Grid's default `align-items: stretch`
 * makes `.sidebar` and `.main` ALWAYS exactly the same height (the
 * taller of the two, whatever that is) with no manual sync needed — the
 * inner `.sidebar-inner` wrapper is what actually gets `position:sticky`
 * + its own `max-height:100vh` + scroll, independent of the outer grid
 * cell's real height. Fix this at the root only — never re-patch this
 * per-page with local margin/height hacks.
 */
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text);
  font-size: var(--text-base); -webkit-font-smoothing: antialiased;
}
/* #app-shell wraps sidebar+main (см. index.html) — отдельный login screen
   рендерится ВНЕ этой обёртки (#login-root), до того как известно, кто
   залогинен, поэтому grid здесь, не на body напрямую. */
#app-shell { display: grid; grid-template-columns: var(--shell-sidebar-w) 1fr; min-height: 100vh; }
a { color: inherit; }
svg.icon { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- sidebar ---------- */
.sidebar {
  background: var(--sidebar-bg); color: var(--sidebar-text); min-width: 0; border-right:1px solid var(--sidebar-border);
  /* deliberately no explicit height here — stretches to match .main via grid */
}
.sidebar-inner {
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; max-height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }
.brand-wordmark { color:#0d1b3d; font-size:20px; font-weight:800; letter-spacing:-.045em; line-height:1; }
.brand-wordmark span { color:#ff3366; }
.brand .tag { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .08em; margin-top:4px; }

/* context switcher — the 4 top-level UX spaces from the directive */
.context-switch { display: flex; flex-direction: column; gap: 2px; padding: 0 10px 14px; }
.context-btn {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--sidebar-text); transition: background var(--duration-fast);
}
.context-btn svg { width: 16px; height: 16px; opacity: .8; }
.context-btn:hover { background: var(--sidebar-bg-raised); color: var(--sidebar-text-hover); }
.context-btn.active { background: var(--sidebar-active-bg); color: var(--sidebar-text-hover); }
.context-btn.active svg { opacity: 1; color: var(--primary-active); }

.sidebar-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-tertiary); padding: 14px 20px 6px;
}
nav.nav-list { display: flex; flex-direction: column; gap: 1px; padding: 0 10px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--sidebar-text); cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast); white-space: nowrap;
}
.nav-item:hover { background: var(--sidebar-bg-raised); color: var(--sidebar-text-hover); }
.nav-item.active { background: var(--sidebar-active-bg); color: var(--sidebar-text-hover); font-weight:600; }
.nav-item.active svg { color: var(--primary-active); }
.nav-item svg { width: 16px; height: 16px; opacity: .85; flex-shrink: 0; }

.sidebar-footer { margin-top: auto; padding: 14px 20px; font-size: 11px; color: var(--text-tertiary); border-top: 1px solid var(--sidebar-border); }

/* ---------- main area ---------- */
.main { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 0 28px; height: var(--shell-topbar-h); background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5; flex-shrink: 0;
}
.topbar-title { display: flex; flex-direction: column; }
.topbar h1 { font-size: var(--text-lg); }
.topbar .crumb { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: var(--sp-3); }
.refresh-indicator { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }

/* POST-REVIEW CORRECTION PASS п.3: 1240px оставлял ~450px пустого гуттера
   с обеих сторон на 1920px+ экранах — операционные таблицы (NOC/Operators/
   Message Explorer/Billing) выглядели "воткнутыми" в угол огромного
   пустого поля. 1600px даёт таблицам реально использовать пространство;
   формы/wizard не затронуты — у них свой узкий .flow-container (760px),
   намеренно не растягивается "чтобы заполнить" (см. ту же директиву). */
.content { padding: 26px 28px 64px; max-width: 1600px; width: 100%; margin: 0 auto; }
/* FINAL CORRECTION PASS п.7: operational screens (NOC/Operators/Routing/
   Logs/Message Explorer) держат плотные datasets — 1600px их зря обрезает
   на широких мониторах. Business/customer screens (Campaigns/Audience/
   Billing/Pricing и т.п.) сознательно остаются на 1600px — комфортный
   SaaS-layout, не задача "растянуть каждый экран" (директива явно
   предупреждает против обеих крайностей). */
.content.content--operational { max-width: 2000px; }
.page { display: none; }
.page.active { display: block; }
.page-stack { display: flex; flex-direction: column; gap: 20px; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: 4px; }
.page-header h1 { font-size: var(--text-2xl); }
.page-header .sub { font-size: var(--text-base); color: var(--text-secondary); margin-top: 4px; }
.page-header .actions { display: flex; gap: 8px; flex-shrink: 0; }

/* full-page flows (wizard) replace .content entirely */
.flow-page { display: none; position: fixed; inset: 0; background: var(--bg); z-index: 40; overflow-y: auto; flex-direction: column; }
.flow-page.active { display: flex; }
.flow-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
.flow-body { flex: 1; overflow-y: auto; }
.flow-container { max-width: 760px; margin: 0 auto; padding: 32px 28px 80px; }
.flow-footer {
  position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border);
  padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}

/* ---------- responsive ---------- */
/* ---------- login screen ---------- */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 20px; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 32px 30px; }
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.login-wordmark { font-size:26px; }
.login-sub { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.login-heading { font-size: var(--text-xl); margin: 0 0 20px; }
.login-error { font-size: 12.5px; color: var(--danger-strong); background: var(--danger-soft); border-radius: var(--radius-sm); padding: 8px 11px; }
.login-hint { font-size: 11.5px; color: var(--text-tertiary); margin-top: 18px; line-height: 1.5; }
.login-hint code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; font-size: 11px; }

/* ---------- "Acting as" — staff working inside a shared/tenant-scoped
   module from the Admin Platform must pick which customer explicitly
   (директива п.2) rather than silently touching whichever account a page
   happened to fetch first. ---------- */
.acting-as { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.acting-as label { color: var(--text-tertiary); font-weight: 600; white-space: nowrap; }
.acting-as select { max-width: 220px; }

@media (max-width: 900px) {
  #app-shell { display: block; } /* stacked: sidebar becomes a normal-flow top bar, no grid row-matching needed */
  .sidebar-inner { position: static; height: auto; max-height: none; overflow: visible; flex-direction: row; align-items: center; overflow-x: auto; padding: 8px 10px; }
  .brand { padding: 4px 10px; }
  .brand .tag { display: none; }
  .context-switch { flex-direction: row; padding: 0 6px; }
  .sidebar-section-label { display: none; }
  nav.nav-list { flex-direction: row; padding: 0 6px; }
  .nav-item { flex-shrink: 0; }
  .sidebar-footer { display: none; }
  .main { min-height: 0; }
  .topbar, .content { padding-left: 16px; padding-right: 16px; }
  .flow-container { padding-left: 16px; padding-right: 16px; }
  th, td { padding: 10px 12px; }
}

@media (max-width: 700px) {
  .topbar { height:auto; min-height:var(--shell-topbar-h); padding-top:10px; padding-bottom:10px; flex-wrap:wrap; align-items:flex-start; }
  .topbar-title, .topbar-right { min-width:0; }
  .topbar-right { width:100%; flex-wrap:wrap; }
  .acting-as { min-width:0; flex-wrap:wrap; }
  .acting-as select { max-width:100%; min-width:0; }
  .content { padding-top:18px; padding-bottom:40px; }
  .page-header .actions { width:100%; flex-wrap:wrap; }
  .page-header .actions .btn { flex:1 1 auto; }
  .drawer-body, .modal-body { padding:16px; }
  .flow-topbar, .flow-footer { padding-left:16px; padding-right:16px; gap:12px; }
  .flow-footer { flex-wrap:wrap; }
  .stepper { padding-left:16px; padding-right:16px; overflow-x:auto; }

  /* Older screens still express their detail/form grids inline. Collapse
     every such content grid at the shared responsive boundary so labels,
     helper copy and values cannot escape cards or drawers. */
  .page [style*="grid-template-columns:"],
  .drawer-body [style*="grid-template-columns:"],
  .modal-body [style*="grid-template-columns:"],
  .flow-container [style*="grid-template-columns:"] {
    grid-template-columns:minmax(0,1fr) !important;
  }
  .toast-stack { left:12px; right:12px; bottom:12px; align-items:stretch; }
  .toast { max-width:none; overflow-wrap:anywhere; }
}