/* ============================================================
   responsive.css — overrides for mobile & compact-desktop
   Подключается после style.css в index.html.

   Breakpoints:
     - mobile:          ≤ 767px
     - compact desktop: 768–1199px
     - full desktop:    ≥ 1200px
   ============================================================ */

/* ============ 1. TOKENS ============ */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ============ 2. HEADER — compact desktop (768–1199) ============
   Цель: укладываем переполненную шапку в диапазоне 768–1199px:
   - main-nav: первые 4 пункта с текстом, остальные уходят в «Ещё ▾»
   - прячем плашку плана, имя пользователя, chevron
   - «+ Задача» → только иконка
   - таймер — компактный (без названия задачи)
   На ≤767 вся nav живёт в off-canvas sidebar (без изменений).
============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
  /* style.css:1381 hides .main-nav at ≤768px — restore on 768+ */
  .main-nav {
    display: flex !important;
    position: static !important;
    margin-left: var(--sp-4);
    gap: 2px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  /* style.css:7096+ делает .main-nav fixed bottom-bar на ≤768 — мы в compact этого не хотим */
  .main-nav .nav-btn {
    flex-direction: row !important;
    font-size: var(--fs-sm) !important;
    padding: var(--sp-2) var(--sp-25) !important;
    flex: 0 0 auto !important;
    min-width: 0;
    white-space: nowrap;
  }

  /* Overflow управляется JS (NavMore.recalc): на этом брейкпоинте
     первые 4 пункта остаются в шапке, всё лишнее уезжает в «Ещё».
     Кнопка «Ещё» включается через inline-style, когда есть содержимое. */

  /* Прячем второстепенные элементы правого крыла */
  .header-plan-badge { display: none !important; }
  .header-user-name { display: none; }
  .header-chevron { display: none; }

  /* «+ Задача» → компактная иконка */
  .header-add-task-btn {
    padding: 0 var(--sp-25);
    min-width: 40px;
  }
  .header-add-task-btn .btn-label { display: none; }

  /* Таймер — без подписи задачи/лейбла */
  .timer-widget .timer-task-name,
  .timer-widget .timer-label { display: none; }

  /* Настройки / user dropdown — триггеры плотнее */
  .header-right { gap: var(--sp-25); }
  .header-dropdown-trigger { padding: var(--sp-2) var(--sp-15); }
}

/* ============ 3. HEADER — mobile (≤767) ============
   Off-canvas sidebar работает из style.css. Добавляем safe-area,
   убираем дубль компонентов, которые пытаются конкурировать за место.
============================================================ */
@media (max-width: 767px) {
  .header {
    padding-top: var(--safe-top);
    padding-left: max(var(--sp-3), var(--safe-left));
    padding-right: max(var(--sp-3), var(--safe-right));
  }

  /* «Ещё» не показывается на мобильных — всё в off-canvas */
  .nav-more { display: none !important; }

  /* «+ Задача» → только «+» */
  .header-add-task-btn {
    padding: 0 var(--sp-25);
    min-width: 40px;
  }
  .header-add-task-btn .btn-label { display: none; }

  /* Таймер — компакт */
  .timer-widget .timer-task-name,
  .timer-widget .timer-label { display: none; }

  /* off-canvas sidebar — safe-area снизу */
  .sidebar,
  #mobile-sidebar {
    padding-bottom: calc(var(--sp-2) + var(--safe-bottom));
  }
}

/* ============ 4. «Ещё ▾» dropdown — стили ============ */
.nav-more {
  position: relative;
  display: none; /* включается в compact-desktop media query */
}
.nav-more-btn {
  background: transparent;
  border: none;
  padding: var(--sp-2) var(--sp-25);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.nav-more-btn:hover { background: var(--bg-hover); color: var(--text); }
.nav-more-btn.active {
  background: var(--bg-secondary);
  color: var(--text);
}
.nav-more-btn[aria-expanded="true"] .nav-more-chevron {
  transform: rotate(180deg);
}
.nav-more-chevron {
  width: 10px;
  height: 10px;
  transition: transform 0.18s;
  opacity: 0.6;
}
.nav-more-menu {
  position: absolute;
  top: calc(100% + var(--sp-1));
  left: 0;
  min-width: 200px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: var(--sp-1);
  z-index: 1000;
  display: none;
}
.nav-more-menu[data-open="true"] { display: block; }
.nav-more-menu .nav-more-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.nav-more-menu .nav-more-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.nav-more-menu .nav-more-item.active {
  background: var(--bg-secondary);
  color: var(--text);
}

/* ============ 5. MODALS — safe-area, touch, overflow ============ */
@media (max-width: 767px) {
  /* Close button — touch target 44×44 (визуал через padding) */
  .modal-close {
    width: 44px;
    height: 44px;
    padding: 8px;
    box-sizing: border-box;
  }

  /* Safe-area для низа формы/body — чтобы последняя кнопка не пряталась под home-indicator */
  .modal form,
  .modal-body {
    padding-bottom: calc(var(--sp-4) + var(--safe-bottom));
  }
  .modal-footer {
    padding-bottom: calc(var(--sp-25) + var(--safe-bottom));
  }

  /* Task-modal full-screen sheet — safe-area учтена в max-height через dvh */
  #task-modal .modal-content {
    max-height: 96dvh !important;
  }
}
@supports not (height: 100dvh) {
  @media (max-width: 767px) {
    #task-modal .modal-content {
      max-height: 96vh !important;
    }
  }
}

/* ============ 6. KANBAN — touch targets, safe-area ============ */
@media (max-width: 767px) {
  /* Высота доски учитывает iOS home-indicator */
  .kanban-board {
    height: calc(100dvh - 150px - var(--safe-bottom));
  }

  /* Touch targets для мобильной навигации по колонкам */
  .kanban-mobile-prev,
  .kanban-mobile-next {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
  /* Dot: визуал 8×8 сохраняется через padding+background-clip, touch-area 24×24 */
  .kanban-mobile-dot {
    min-width: 24px;
    min-height: 24px;
    width: 24px;
    height: 24px;
    padding: 8px;
    box-sizing: border-box;
    background-clip: content-box;
  }
}
@supports not (height: 100dvh) {
  @media (max-width: 767px) {
    .kanban-board {
      height: calc(100vh - 150px - var(--safe-bottom));
    }
  }
}

/* ============ 7. WIKI + TASK LIST ============ */
/* На planшете сжимаем боковое дерево (style.css:5369 default 260px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .wiki-sidebar { width: 220px; }
}

@media (max-width: 767px) {
  /* Task list: метаданные переносятся, длинный display-id ломается */
  .task-card .task-meta {
    flex-wrap: wrap !important;
    gap: var(--sp-15) !important;
  }
  .task-display-id {
    word-break: break-all;
  }

  /* Wiki редактор — safe-area снизу */
  .wiki-editor-body {
    padding-bottom: calc(var(--sp-4) + var(--safe-bottom));
  }
}

/* ============ 8. FAB — скрыть на мобильных, safe-area на десктопе ============ */
@media (max-width: 767px) {
  .help-fab { display: none !important; }
}
@media (min-width: 768px) {
  .help-fab {
    right: calc(24px + var(--safe-right));
    bottom: calc(24px + var(--safe-bottom));
  }
}