/* ═══════════════════════════════════════════════════════════════════════
 * responsive-v2.css — Mobile breakpoints + bottom-sheet pattern (v200.0)
 *
 * Решает UX-проблему #7 (Mobile UX 4/10): desktop-first → mobile-first для
 * критичных компонентов: модалки → bottom-sheet, sidebar → drawer, tables → cards.
 *
 * Breakpoints (mobile-first):
 *   sm: 0    — 640px  (по умолчанию = mobile)
 *   md: 641  — 1023px (tablet)
 *   lg: 1024 — 1279px (laptop)
 *   xl: 1280+         (desktop)
 *
 * Принцип «Progressive Enhancement»: базовые стили — для mobile, потом @media
 * добавляют сложности для больших экранов. Это обратно desktop-first подходу.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─── BOTTOM-SHEET для модалок на mobile ─── */

@media (max-width: 640px) {
  /* Любая v2-модалка превращается в bottom-sheet */
  .v2-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .v2-modal {
    width: 100%;
    max-width: 100%;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-height: 92vh;
    animation: v2SheetIn var(--duration-slow) var(--ease-out);
  }
  /* Sheet header — drag-handle */
  .v2-modal-hd::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--border-2);
    border-radius: var(--r-full);
  }
  .v2-modal-hd { position: relative; padding-top: var(--sp-5); }

  /* Legacy совместимость: старые .modal тоже превращаем */
  .ux-modal > div,
  .ux-dialog-box {
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: flex-end !important;
    margin-top: auto !important;
  }
  .ux-modal { align-items: flex-end !important; padding: 0 !important; }
}
@keyframes v2SheetIn {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* ─── DRAWER для sidebar на mobile ─── */

@media (max-width: 640px) {
  /* Сайдбар скрывается по умолчанию, открывается через бургер */
  body:not(.sidebar-open) .sidebar,
  body:not(.sidebar-open) #sb-rail {
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-out);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: var(--z-overlay);
    box-shadow: var(--shadow-2xl);
  }
  body.sidebar-open .sidebar,
  body.sidebar-open #sb-rail {
    transform: translateX(0);
  }
  /* Overlay при открытом sidebar */
  body.sidebar-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: calc(var(--z-overlay) - 1);
  }
}

/* ─── TABLES → CARDS на mobile ─── */

@media (max-width: 640px) {
  .v2-table-responsive,
  .v2-table-responsive thead { display: none; }
  .v2-table-responsive tbody,
  .v2-table-responsive tr,
  .v2-table-responsive td {
    display: block;
    width: 100%;
  }
  .v2-table-responsive tbody tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
  }
  .v2-table-responsive tbody td {
    padding: var(--sp-1) 0;
    border: none;
  }
  .v2-table-responsive tbody td[data-label]::before {
    content: attr(data-label) ': ';
    font-weight: var(--fw-medium);
    color: var(--text-3);
    margin-right: var(--sp-1);
  }
}

/* ─── KANBAN: горизонтальный → stage-tabs на mobile ─── */

@media (max-width: 768px) {
  /* Канбан-стейджи на мобиле — один за раз с верхними табами */
  .kanban-stage,
  .pipeline-stage {
    width: 100% !important;
    min-width: 100% !important;
  }
  /* Скрываем все стейджи кроме активного */
  .kanban-stage:not(.is-active-mobile),
  .pipeline-stage:not(.is-active-mobile) {
    display: none;
  }
  /* Stage selector табы наверху */
  .kanban-mobile-tabs {
    display: flex !important;
    gap: var(--sp-2);
    padding: var(--sp-2);
    overflow-x: auto;
    scrollbar-width: none;
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: var(--z-sticky);
    border-bottom: 1px solid var(--border);
  }
  .kanban-mobile-tabs::-webkit-scrollbar { display: none; }
}
@media (min-width: 769px) {
  .kanban-mobile-tabs { display: none; }
}

/* ─── STICKY BOTTOM ACTION-BAR на mobile ─── */

@media (max-width: 640px) {
  .v2-mobile-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: var(--sp-2) var(--sp-3);
    padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0));
    display: flex;
    gap: var(--sp-2);
    z-index: var(--z-sticky);
    box-shadow: var(--shadow-lg);
  }
  .v2-mobile-action-bar .v2-btn { flex: 1; }
}
@media (min-width: 641px) {
  .v2-mobile-action-bar { display: none; }
}

/* ─── CARD STACK на mobile (вместо grid 3-cols) ─── */

@media (max-width: 640px) {
  .v2-card-grid,
  .stats-grid,
  .an-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── TYPOGRAPHY scale на mobile (-1 step) ─── */

@media (max-width: 640px) {
  body {
    font-size: var(--fs-md);
  }
  .v2-modal-title { font-size: var(--fs-md); }
  .v2-stat-value { font-size: var(--fs-xl); }
  /* Заголовки на мобиле меньше */
  h1 { font-size: var(--fs-xl); }
  h2 { font-size: var(--fs-lg); }
  h3 { font-size: var(--fs-md); }
}

/* ─── INPUT/BUTTON высота больше на mobile (touch-target 44px) ─── */

@media (max-width: 640px) {
  .v2-input,
  .v2-select,
  .v2-btn {
    min-height: 44px;  /* Apple HIG: минимум 44px для touch */
    font-size: var(--fs-md);
  }
  .v2-btn-sm { min-height: 36px; }
}

/* ─── SAFE AREA для iOS (notch + home-indicator) ─── */

@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ─── HOVER только на устройствах с мышью ─── */

@media (hover: none) and (pointer: coarse) {
  .v2-btn:hover,
  .v2-card-interactive:hover {
    background: inherit;
    transform: none;
  }
}

/* ─── LANDSCAPE на phone: компактнее ─── */

@media (max-height: 480px) and (orientation: landscape) {
  .v2-modal { max-height: 96vh; }
  .v2-modal-body { padding: var(--sp-3) var(--sp-4); }
}