/* ============================================================
   Uniqore Engine — Responsive layer
   Loaded LAST (after engine.css / premium.css / signature.css).
   Pure CSS, no JS. Breakpoints: 1024 / 900 / 768 / 480.
   Uses theme variables only — no hardcoded colors.
   ============================================================ */

/* ── Tablet: tighten generous desktop grids (≤1024px) ───────── */
@media (max-width:1024px){
  .dash-grid{grid-template-columns:1fr}
  .an-grid{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
  .main{padding:18px;max-width:100%}
}

/* ── Sidebar → narrow icon-rail (≤900px) ────────────────────── */
/* Collapse the 230px sidebar into a 58px icon rail. Labels,
   section headers and brand name hidden; icons centered. */
@media (max-width:900px){
  body.nav-sidebar .app{grid-template-columns:58px 1fr}
  body.nav-sidebar .sidebar{padding:14px 6px;align-items:center}
  body.nav-sidebar .brand{padding:6px 0 14px;justify-content:center}
  body.nav-sidebar .brand__name{display:none}
  body.nav-sidebar .nav-group{display:none}
  body.nav-sidebar .nav__lbl{display:none}
  body.nav-sidebar .nav__badge{position:absolute;top:4px;right:4px;margin:0}
  body.nav-sidebar .nav__item{
    justify-content:center;padding:0;width:44px;height:44px;
    position:relative;margin:0 auto;
  }
  body.nav-sidebar .nav__ic{width:18px}
  /* action buttons in the rail: icon-sized, centered */
  body.nav-sidebar .bar-actions{align-items:center;gap:8px}
  body.nav-sidebar .bar-actions .btn,
  body.nav-sidebar .bar-actions .btn-ghost{
    width:44px;height:44px;padding:0;display:inline-flex;
    align-items:center;justify-content:center;overflow:hidden;
  }
}

/* ── Topbar themes: scrollable horizontal nav (≤900px) ──────── */
@media (max-width:900px){
  body.nav-topbar .topbar{gap:12px;padding:0 12px;overflow-x:auto;
    -webkit-overflow-scrolling:touch}
  body.nav-topbar .nav{flex-wrap:nowrap}
  body.nav-topbar .nav__item{white-space:nowrap;flex-shrink:0}
}

/* ── Stack content grids to single column (≤768px) ──────────── */
@media (max-width:768px){
  .kpi-row{grid-template-columns:repeat(2,1fr)} /* 2-up on phones */
  .att-row{grid-template-columns:1fr}
  .dash-grid,
  .an-grid,
  .settings-grid,
  .team-grid,
  .kb-grid,
  .intg-grid{grid-template-columns:1fr}

  /* smaller frame on mobile */
  .main{padding:12px}
  .page-title{font-size:17px}

  /* tables: guaranteed horizontal scroll, no page break */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .table-wrap table{min-width:560px}
  thead th{padding:9px 10px}
  tbody td{padding:9px 10px}

  /* kanban: swipe-scroll, narrower columns */
  .kanban{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .k-col{min-width:240px;scroll-snap-align:start}

  /* search input shouldn't force overflow */
  .t-input--search{min-width:0;width:100%}
  .bar-actions{flex-wrap:wrap}

  /* topbar hide labels when cramped, keep icons */
  body.nav-topbar .nav__lbl{display:none}
}

/* ── Slide-over / modal panels full-width (≤768px) ──────────── */
@media (max-width:768px){
  .panel{width:100vw;max-width:100vw}
  .panel--modal{width:94vw;max-width:94vw;max-height:88vh}
  .overlay--center{padding:0 3vw}
}

/* ── Touch targets ≥44px (≤768px) ───────────────────────────── */
@media (max-width:768px){
  body.nav-topbar .nav__item{min-height:44px;display:inline-flex;align-items:center}
  .btn,.btn-ghost,.btn-danger{min-height:44px;display:inline-flex;
    align-items:center;justify-content:center}
  .icon-btn{width:40px;height:40px}
  .subnav__item{min-height:38px;display:inline-flex;align-items:center}
}

/* ── Small phones (≤480px) ──────────────────────────────────── */
@media (max-width:480px){
  .kpi-row{grid-template-columns:1fr}   /* 1-up KPIs */
  .kpi__val{font-size:22px}
  .main{padding:10px}
  .page-title{font-size:16px}
  .table-wrap table{min-width:480px}
  .bar-row__label{width:96px}
  .detail-grid{grid-template-columns:1fr}
}

/* ═══ РОСКОШНЫЙ МОБИЛЬНЫЙ РЕЖИМ (≤640px) ═══════════════════════
   Таблица превращается в карточки: каждая запись — отдельная
   карточка с крупным заголовком и полями «подпись — значение».
   Никакого горизонтального скролла. */
@media (max-width:640px){
  /* убрать боковой скролл — таблица становится колонкой карточек */
  .table-wrap{overflow:visible}
  .table-wrap table,table{min-width:0;width:100%;display:block;border:0}
  thead{display:none}
  tbody{display:block}
  tbody tr{
    display:block;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:12px;
    box-shadow:var(--shadow-sm);position:relative;
  }
  tbody tr.is-selected{border-color:var(--ring);box-shadow:0 0 0 1px var(--ring)}
  tbody tr td{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:7px 0;border:0;text-align:right;
  }
  tbody tr td::before{
    content:attr(data-label);flex:0 0 auto;text-align:left;
    color:var(--text3);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
    font-family:var(--font-ui);font-weight:500;
  }
  /* заголовок карточки (первичное поле) — крупно, на всю ширину, без подписи */
  tbody tr td.cell-primary{
    display:block;padding:0 36px 11px 0;margin-bottom:9px;text-align:left;
    border-bottom:1px solid var(--border);
  }
  tbody tr td.cell-primary::before{display:none}
  tbody tr td.cell-primary .cell-open{display:flex;align-items:center;gap:12px}
  tbody tr td.cell-primary .cell-open b{font-size:15.5px;line-height:1.35;font-weight:600;white-space:normal}
  .row-thumb{width:44px;height:44px}
  .row-thumb .ic{width:20px;height:20px}
  /* чекбокс массового выбора — компактно в угол */
  tbody td.row-check{position:absolute;top:13px;right:13px;padding:0;width:auto}
  tbody td.row-check::before{display:none}
  tbody td.row-check .tbl-check{width:18px;height:18px}
  /* статус-бейдж — отдельной строкой справа */
  tbody td[data-key="__stage"]{padding-top:10px}
  /* денежные/акцентные значения чуть крупнее для читаемости */
  tbody td.cell-acc{font-weight:600;color:var(--text)}

  /* ── дашборд: число и график вертикально, график убираем (обрезался) ── */
  .hero{flex-direction:column;gap:12px}
  .hero__spark{display:none}
  .hero__val{font-size:30px;letter-spacing:-.02em;line-height:1.1}
  .kpi__val{font-size:23px}

  /* тулбар и фильтры компактные, чипы свайпом */
  .toolbar{flex-wrap:wrap;gap:8px}
  .toolbar .t-select{flex:1 1 130px}
  .view-chips{overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;flex-wrap:nowrap;scrollbar-width:none}
  .view-chips::-webkit-scrollbar{display:none}
  .subnav{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ═══ ПАНЕЛИ И ФОРМЫ НА МОБИЛЕ — нативное ощущение (≤640px) ═══
   Деталь выезжает сбоку, форма — снизу (bottom-sheet), на весь экран.
   Табы и степпер свайпом, кнопки закреплены, поля 16px (iOS не зумит). */
@media (max-width:640px){
  /* slide-over деталь — весь экран, плавный выезд справа */
  .panel{width:100vw;max-width:100vw;animation:uqPanelIn .26s cubic-bezier(.22,1,.36,1)}
  /* форма — bottom-sheet: на весь низ, со скруглением сверху, выезд снизу */
  .overlay--center{padding:0;align-items:flex-end}
  .panel--modal{width:100vw;max-width:100vw;max-height:94vh;border-radius:20px 20px 0 0;border:0;animation:uqSheetUp .3s cubic-bezier(.22,1,.36,1)}

  .panel__head{padding:15px 16px}
  .panel__title{font-size:17px}
  .panel__body{padding:14px 16px;gap:11px}

  /* поля детали — плотные строки с разделителем (меньше скролла) */
  .detail-grid{gap:0}
  .detail-field{padding:10px 0;border-bottom:1px solid var(--border)}
  .detail-field:last-child{border-bottom:0}

  /* табы детали — ровный горизонтальный свайп, без переносов */
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;flex-wrap:nowrap;scrollbar-width:none;gap:4px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;flex-shrink:0;padding:10px 6px}

  /* степпер статусов — свайп вместо переноса в две строки */
  .stage-track{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .stage-track::-webkit-scrollbar{display:none}
  .stage-step{flex-shrink:0;padding:8px 13px;font-size:12.5px;min-height:38px;display:inline-flex;align-items:center}

  /* футер с кнопками — закреплён внизу, всегда под пальцем */
  .panel__foot{position:sticky;bottom:0;background:var(--surface);margin:14px -16px 0;padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--border);gap:10px}
  .panel__foot .btn{flex:1;justify-content:center}

  /* поля формы — в столбец, 16px чтобы iOS не зумил при фокусе */
  .f-row{flex-direction:column;gap:11px}
  .t-input,.t-select,.t-input--full{font-size:16px}
}
@keyframes uqPanelIn{from{transform:translateX(100%);opacity:.6}to{transform:translateX(0);opacity:1}}
@keyframes uqSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ── Respect reduced motion for any added smooth scrolling ───── */
@media (prefers-reduced-motion:reduce){
  .kanban,.table-wrap,.topbar{scroll-behavior:auto}
  .panel,.panel--modal{animation:none}
}