/**
 * STEM System — единая разметка layout
 * Классы: .stem-layout, [data-layout], .stem-sidebar, .stem-main, .stem-content-area, .stem-top-bar
 * 
 * Использование:
 *   <div class="stem-layout" data-layout="sidebar|simple|fullscreen">
 *     <aside class="stem-sidebar">...</aside>
 *     <main class="stem-main">
 *       <div class="stem-top-bar">...</div>
 *       <div class="stem-content-area">...</div>
 *     </main>
 *   </div>
 */

:root {
  --stem-sidebar-width: 280px;
  --stem-sidebar-bg: #1F1F1F;
  --stem-top-bar-bg: #ffffff;
  --stem-content-padding: 20px;
}

/* ========== БАЗОВЫЙ LAYOUT ========== */
.stem-layout {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100lvh;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
}

/* ========== SIDEBAR — боковая панель + контент ========== */
.stem-layout[data-layout="sidebar"] {
  flex-direction: row;
}
.stem-layout[data-layout="sidebar"] .stem-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ========== SIMPLE — контейнер без sidebar ========== */
.stem-layout[data-layout="simple"] {
  flex-direction: column;
}
.stem-layout[data-layout="simple"] .stem-main {
  flex: 1;
  width: 100%;
}
.stem-layout[data-layout="simple"] .stem-content-area {
  max-width: 100%;
}

/* ========== FULLSCREEN — фиксированный overlay ========== */
.stem-layout[data-layout="fullscreen"] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483647;
  background: var(--stem-bg, #f3f4f6);
  overflow: auto;
  isolation: isolate;
}

/* ========== SIDEBAR (общие стили) ========== */
.stem-layout .stem-sidebar,
.stem-layout .sidebar.stem-sidebar,
/* Совместимость: sidebar внутри stem-layout */
.stem-layout[data-layout="sidebar"] .sidebar {
  width: var(--stem-sidebar-width);
  min-width: 260px;
  flex-shrink: 0;
  background: var(--stem-sidebar-bg);
  color: white;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 20px rgba(0,0,0,0.1);
}
.stem-layout .stem-sidebar .sidebar-header,
.stem-layout .sidebar .sidebar-header {
  padding: 20px;
  background: var(--stem-sidebar-bg);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.stem-layout .stem-sidebar .sidebar-header h1,
.stem-layout .sidebar .sidebar-header h1 { font-size: 16px; font-weight: 800; }
.stem-layout .stem-sidebar .sidebar-header p,
.stem-layout .sidebar .sidebar-header p { font-size: 12px; opacity: 0.7; margin-top: 4px; }
.stem-layout .stem-sidebar .sidebar-nav,
.stem-layout .sidebar .sidebar-nav { padding: 16px 12px; flex: 1; flex-direction: column; display: flex; }
.stem-layout .stem-sidebar .sidebar-nav-item,
.stem-layout .sidebar .sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  margin-bottom: 2px;
  border-radius: var(--stem-radius, 8px);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  font-weight: 500;
}
.stem-layout .stem-sidebar .sidebar-nav-item:hover,
.stem-layout .sidebar .sidebar-nav-item:hover { background: rgba(255,255,255,0.1); color: white; }
.stem-layout .stem-sidebar .sidebar-nav-item.active,
.stem-layout .sidebar .sidebar-nav-item.active {
  background: linear-gradient(135deg, var(--stem-primary, #3b82f6) 0%, var(--stem-primary-dark, #2563eb) 100%);
  color: white;
}
.stem-sidebar .sidebar-nav-icon,
.sidebar .sidebar-nav-icon { font-size: 16px; width: 24px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }

/* ========== MAIN — основная область ========== */
.stem-main,
.stem-layout .main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: visible;
  min-width: 0;
}

/* ========== TOP BAR — верхняя панель ========== */
.stem-top-bar {
  background: var(--stem-top-bar-bg);
  padding: 16px var(--stem-content-padding);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  flex-shrink: 0;
}
.stem-top-bar h2 { font-size: 16px; font-weight: 800; color: var(--stem-text, #1f2937); }

/* ========== CONTENT AREA — область контента ========== */
.stem-content-area,
.stem-layout .content-area {
  flex: 1;
  overflow-y: visible;
  overflow-x: hidden;
  padding: var(--stem-content-padding);
  min-height: 0;
}

/*
 * Оболочка как в admin.css / «Распределение» (cabinet-distribution + admin-layout):
 * html/body фиксируются по высоте окна, overflow на document выключен, скролл внутри колонок.
 * Без этого на iPhone PWA остаётся светлая полоса и «плывёт» высота.
 * Не трогаем: прямой ребёнок .admin-layout (страница уже с admin.css), fullscreen stem-layout.
 */
html:has(body > .stem-page-header):not(:has(#stemLoginBoot)):not(:has(body > .admin-layout)):not(:has(body > .stem-layout[data-layout="fullscreen"]:first-child)) {
  height: 100%;
  min-height: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  overflow: hidden;
  width: 100%;
}
html:has(body > .stem-page-header):not(:has(#stemLoginBoot)):not(:has(body > .admin-layout)):not(:has(body > .stem-layout[data-layout="fullscreen"]:first-child)) body {
  height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
/* Задания (tasks_*): первый блок — header.top-bar, не .stem-page-header */
html:has(body > header.tasks-top-bar):not(:has(#stemLoginBoot)):not(:has(body > .admin-layout)):not(:has(body > .stem-layout[data-layout="fullscreen"]:first-child)) {
  height: 100%;
  min-height: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  overflow: hidden;
  width: 100%;
}
html:has(body > header.tasks-top-bar):not(:has(#stemLoginBoot)):not(:has(body > .admin-layout)):not(:has(body > .stem-layout[data-layout="fullscreen"]:first-child)) body {
  height: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
body:has(> .stem-page-header):not(:has(#stemLoginBoot)):not(:has(> .admin-layout)):not(:has(> .stem-layout[data-layout="fullscreen"]:first-child)) > .stem-page-header,
body:has(> header.tasks-top-bar):not(:has(#stemLoginBoot)):not(:has(> .admin-layout)):not(:has(> .stem-layout[data-layout="fullscreen"]:first-child)) > header.tasks-top-bar {
  flex-shrink: 0;
}
body:has(> .stem-page-header):not(:has(#stemLoginBoot)):not(:has(> .admin-layout)):not(:has(> .stem-layout[data-layout="fullscreen"]:first-child)) > #stem-header-actions {
  flex-shrink: 0;
}
/* Основной блок — как .admin-layout: flex 1 1 0 + max-height 100% */
body:has(> .stem-page-header):not(:has(#stemLoginBoot)):not(:has(> .admin-layout)):not(:has(> .stem-layout[data-layout="fullscreen"]:first-child)) > .stem-layout:not([data-layout="fullscreen"]) {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0 !important;
  max-height: 100%;
  overflow: hidden;
}
/* Контейнеры без .stem-layout (заказы, уведомления, дашборд, аналитика…).
   min-height: 94vh — иначе в колонке под хедером контент схлопывается (в частности витрина/чаты).
   Во фрейме кабинета см. html.stem-in-iframe — там остаётся min-height: 0 для цепочки flex. */
body:has(> .stem-page-header):not(:has(#stemLoginBoot)):not(:has(> .admin-layout)):not(:has(> .stem-layout[data-layout="fullscreen"]:first-child)) > *:not(.stem-page-header):not(#stem-header-actions):not(.stem-layout):not(script):not(.modal-overlay):not(.cell-context-menu):not(.status-dropdown):not(#stemOrdersCreateModalHost) {
  flex: 1 1 0;
  min-width: 0;
  min-height: 94vh !important;
  max-height: 100%;
  overflow: hidden;
}
body:has(> header.tasks-top-bar):not(:has(#stemLoginBoot)):not(:has(> .admin-layout)):not(:has(> .stem-layout[data-layout="fullscreen"]:first-child)) > *:not(header.tasks-top-bar):not(#stem-header-actions):not(.stem-layout):not(script):not(.modal-overlay):not(.cell-context-menu):not(.status-dropdown):not(#stemOrdersCreateModalHost) {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
/* Задания: иначе правило с «> *» перебивает .main-content { overflow-y: auto } в tasks-shop.css */
body:has(> header.tasks-top-bar):not(:has(#stemLoginBoot)):not(:has(> .admin-layout)):not(:has(> .stem-layout[data-layout="fullscreen"]:first-child)) > main,
body:has(> header.tasks-top-bar):not(:has(#stemLoginBoot)):not(:has(> .admin-layout)):not(:has(> .stem-layout[data-layout="fullscreen"]:first-child)) > main.main-content {
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Длинные списки: прокрутка внутри основной колонки */
body:has(> .stem-page-header):not(:has(#stemLoginBoot)):not(:has(> .admin-layout)):not(:has(> .stem-layout[data-layout="fullscreen"]:first-child)) > .container {
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body:has(> .stem-page-header):not(:has(#stemLoginBoot)):not(:has(> .admin-layout)):not(:has(> .stem-layout[data-layout="fullscreen"]:first-child)) > .notif-page,
body:has(> .stem-page-header):not(:has(#stemLoginBoot)):not(:has(> .admin-layout)):not(:has(> .stem-layout[data-layout="fullscreen"]:first-child)) > #notifRoot.notif-page {
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body:has(> .stem-page-header):not(:has(#stemLoginBoot)):not(:has(> .admin-layout)):not(:has(> .stem-layout[data-layout="fullscreen"]:first-child)) > .dashboard-root {
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body:has(> .stem-page-header):not(:has(#stemLoginBoot)):not(:has(> .admin-layout)):not(:has(> .stem-layout[data-layout="fullscreen"]:first-child)) > #analyticsApp {
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body:has(> .stem-page-header):not(:has(#stemLoginBoot)):not(:has(> .admin-layout)):not(:has(> .stem-layout[data-layout="fullscreen"]:first-child)) > .salon-page {
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body:has(> .stem-page-header):not(:has(#stemLoginBoot)):not(:has(> .admin-layout)):not(:has(> .stem-layout[data-layout="fullscreen"]:first-child)) > #settingsContent.settings-page {
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Бухгалтерия: #buhApp — корень контента; без overflow-y: auto прокрутка блокируется (body с overflow:hidden, см. правила html/body с .stem-page-header). */
body:has(> .stem-page-header):not(:has(#stemLoginBoot)):not(:has(> .admin-layout)):not(:has(> .stem-layout[data-layout="fullscreen"]:first-child)) > #buhApp {
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/*
 * Страница открыта во фрейме кабинета (admin): у body max-height:100vh/100dvh относится к вьюпорту вкладки,
 * а не к высоте iframe — на iOS контент короче iframe, снизу белая полоса до поворота.
 * Класс stem-in-iframe ставит stem-header.js (сразу на html, на body после DOMContentLoaded).
 */
html.stem-in-iframe {
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: hidden;
  width: 100%;
}
html.stem-in-iframe body {
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
html.stem-in-iframe body > .stem-layout:not([data-layout="fullscreen"]),
html.stem-in-iframe body > *:not(.stem-page-header):not(#stem-header-actions):not(script):not(.modal-overlay):not(.cell-context-menu):not(.status-dropdown):not(#stemOrdersCreateModalHost):not(.wp-page) {
  max-height: none !important;
}

/* Во фрейме кабинета: body/html с overflow:hidden — прокрутка только в колонке под хедером.
   !important: перебить страничные стили, иначе после правок max(lvh) снаружи ломается цепочка. */
html.stem-in-iframe body:has(> .stem-page-header) > *:not(.stem-page-header):not(#stem-header-actions):not(.stem-layout):not(script):not(.modal-overlay):not(.cell-context-menu):not(.status-dropdown):not(#stemOrdersCreateModalHost) {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0 !important;
  max-height: 100%;
  overflow: hidden;
}
html.stem-in-iframe body:has(> .stem-page-header) > .container,
html.stem-in-iframe body:has(> .stem-page-header) > .notif-page,
html.stem-in-iframe body:has(> .stem-page-header) > #notifRoot.notif-page,
html.stem-in-iframe body:has(> .stem-page-header) > .dashboard-root,
html.stem-in-iframe body:has(> .stem-page-header) > #analyticsApp,
html.stem-in-iframe body:has(> .stem-page-header) > .salon-page,
html.stem-in-iframe body:has(> .stem-page-header) > #settingsContent.settings-page,
html.stem-in-iframe body:has(> .stem-page-header) > #buhApp,
/* Приёмка / инвентаризация: .receiving-layout — корень контента; иначе overflow:hidden с flex ломает прокрутку в iframe. */
html.stem-in-iframe body:has(> .stem-page-header) > .receiving-layout {
  overflow-x: clip !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
html.stem-in-iframe body:has(> .stem-page-header) > .stem-layout:not([data-layout="fullscreen"]) {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0 !important;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html.stem-in-iframe .stem-layout:not([data-layout="fullscreen"]) .stem-main,
html.stem-in-iframe .stem-layout:not([data-layout="fullscreen"]) .main-content {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html.stem-in-iframe .stem-layout:not([data-layout="fullscreen"]) .stem-content-area,
html.stem-in-iframe .stem-layout:not([data-layout="fullscreen"]) .content-area {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
html.stem-in-iframe body:has(> header.tasks-top-bar) > main,
html.stem-in-iframe body:has(> header.tasks-top-bar) > main.main-content {
  overflow-x: clip !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Новый заказ: data-skip-stem-header — нет .stem-page-header в правилах выше */
html.stem-in-iframe body:has(> .stem-new-order-topbar) {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html.stem-in-iframe body:has(> .stem-new-order-topbar) > .stem-new-order-topbar {
  flex-shrink: 0;
}
html.stem-in-iframe body:has(> .stem-new-order-topbar) > main {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}