/* ==========================================================================
   VERA by SBS — responsive.css
   Breakpoints: ≤1200 laptop · ≤1024 tablet · ≤768 mobile · ≤480 small phone
   ========================================================================== */

@media (max-width: 1200px) {
  .overview-grid, .grid--main-side { grid-template-columns: minmax(0, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gantt { --gantt-table-w: 300px; }
}

/* ----- Tablet: sidebar becomes an off-canvas drawer ------------------------------ */
@media (max-width: 1024px) {
  .app-shell, .app-shell[data-sidebar="collapsed"] { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(300px, 86vw);
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .app-shell[data-nav-open="true"] .sidebar { transform: none; }
  .app-shell[data-nav-open="true"] .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sidebar) - 1);
    background: rgba(13, 26, 46, 0.4);
    animation: fade-in var(--dur) var(--ease);
  }
  /* Collapsed state does not apply to the drawer */
  .app-shell[data-sidebar="collapsed"] .brand-product,
  .app-shell[data-sidebar="collapsed"] .brand-product__by,
  .app-shell[data-sidebar="collapsed"] .nav__label,
  .app-shell[data-sidebar="collapsed"] .nav__group-title,
  .app-shell[data-sidebar="collapsed"] .org-switcher__text,
  .app-shell[data-sidebar="collapsed"] .sidebar__user-text { display: revert; }
  .app-shell[data-sidebar="collapsed"] .nav__badge { display: inline-flex; }
  .app-shell[data-sidebar="collapsed"] .nav__item { justify-content: flex-start; }
  .app-shell[data-sidebar="collapsed"] .sidebar__brand { justify-content: flex-start; padding: 0 var(--space-4); }
  .app-shell[data-sidebar="collapsed"] .brand-logo--full { display: block; }
  .app-shell[data-sidebar="collapsed"] .brand-logo--mark { display: none; }
  .app-shell[data-sidebar="collapsed"] .sidebar__footer { flex-direction: row; }
  .sidebar-collapse { display: none; }

  .topbar { padding: 0 var(--space-4); }
  .topbar .topbar__menu { display: inline-flex; }
  .content { padding: var(--space-5) var(--space-4); }
  .project-header { margin: calc(var(--space-5) * -1) calc(var(--space-4) * -1) 0; padding: var(--space-4) var(--space-4) 0; }
  .gantt { --gantt-table-w: 260px; }
  .gantt__head-cols, .gantt__cols { grid-template-columns: minmax(0, 1fr) 64px; }
  .gantt__col-start { display: none; }
}

/* ----- Mobile -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root { --control-h: 40px; --control-h-sm: 34px; --header-h: 56px; }

  .topbar__search { display: none; }
  .topbar .topbar__search-btn { display: inline-flex; }
  .topbar .topbar__brand { display: flex; align-items: center; gap: var(--space-2); }
  .topbar__brand .brand-logo { height: 22px; }

  .content { padding: var(--space-4) var(--space-3) calc(72px + env(safe-area-inset-bottom)); }
  .project-header { margin: calc(var(--space-4) * -1) calc(var(--space-3) * -1) 0; padding: var(--space-4) var(--space-3) 0; }

  .page-header { align-items: flex-start; }
  .page-header__actions { width: 100%; }
  .page-header__actions > .btn--primary { flex: 1; }
  .page-title { font-size: var(--text-lg); }

  .grid--2, .grid--3, .form-row, .form-row--3, .detail-fields, .detail-fields--3 { grid-template-columns: minmax(0, 1fr); }
  .grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .grid--cards { grid-template-columns: minmax(0, 1fr); }
  .stat { padding: var(--space-3) var(--space-4); }
  .stat__value { font-size: var(--text-xl); }
  .card__header { padding: var(--space-4) var(--space-4) 0; }
  .card__body { padding: var(--space-3) var(--space-4) var(--space-4); }
  .list-item, .notification { padding-left: var(--space-4); padding-right: var(--space-4); }

  /* Filters stack and stretch */
  .filter-bar { align-items: stretch; }
  .filter-bar .search { max-width: none; min-width: 100%; }
  .filter-bar .select, .filter-bar .input { flex: 1 1 140px; min-width: 0; }

  /* Tables become stacked cards when marked responsive */
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--gray-100); }
  .table--stack td { padding: 3px 0; border: 0; display: flex; justify-content: space-between; gap: var(--space-3); text-align: right; }
  .table--stack td::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--text-xs); text-align: left; flex-shrink: 0; }
  .table--stack td[data-label=""]::before, .table--stack td:not([data-label])::before { display: none; }
  .table--stack td.cell-primary { display: block; text-align: left; padding-bottom: var(--space-2); }
  .table--stack td.cell-primary::before { display: none; }
  .table--stack .num { text-align: right; }

  /* Task rows: hide secondary columns */
  .task-row { grid-template-columns: 20px minmax(0, 1fr) auto; padding: var(--space-3); }
  .task-row__extra { display: none; }

  /* Modals become bottom sheets, drawers go full-screen */
  .overlay { align-items: flex-end; padding: 0; }
  .modal, .modal--sm, .modal--lg { max-width: none; max-height: 92vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .modal__header { padding: var(--space-4) var(--space-4) 0; }
  .modal__body { padding: var(--space-3) var(--space-4); }
  .modal__footer { padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .modal__footer .btn { flex: 1; }
  .drawer, .drawer--wide { width: 100%; }
  .drawer__body { padding: var(--space-4); }

  .toast-region { left: var(--space-3); right: var(--space-3); bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; }

  /* Gantt: narrow name column, timeline scrolls horizontally */
  .gantt { --gantt-table-w: 150px; --gantt-row-h: 42px; height: 72vh; min-height: 360px; }
  .gantt__head-cols, .gantt__cols { grid-template-columns: minmax(0, 1fr); padding: 0 var(--space-2); }
  .gantt__col-due { display: none; }
  .gantt-bar { top: 10px; height: 22px; }
  .gantt-bar__handle { width: 14px; }
  .gantt-bar__link { display: none; }
  .gantt-baseline { top: 34px; }
  .gantt-milestone { top: 13px; }
  .gantt-controls { width: 100%; }

  /* Board: columns snap, one per viewport */
  .board { gap: var(--space-2); scroll-snap-type: x mandatory; margin: 0 calc(var(--space-3) * -1); padding: 0 var(--space-3) var(--space-3); }
  .board__column { flex-basis: 86vw; max-height: none; }

  /* Calendar: compact month cells; dot-style items */
  .calendar__day { min-height: 64px; padding: 3px; }
  .cal-item { font-size: 10px; padding: 1px 4px; }
  .calendar__weekday { padding: var(--space-1) 0; font-size: 10px; }
  .calendar__grid--week { grid-template-columns: minmax(0, 1fr); }
  .calendar__grid--week .calendar__day { min-height: 0; border-right: 0; }

  .auth-layout { grid-template-columns: minmax(0, 1fr); }
  .auth-layout__panel { display: none; }
  .auth-layout__form { align-items: flex-start; padding-top: var(--space-10); }
  .auth-card .brand-logo--lg { height: 40px; }

  /* Bottom navigation */
  .mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 10px rgba(16, 32, 56, 0.05);
  }

  .risk-matrix { font-size: 10px; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dd { margin-bottom: var(--space-2); }
}

/* ----- Small phones ------------------------------------------------------------------- */
@media (max-width: 480px) {
  .grid--stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .stat__label { font-size: var(--text-xs); }
  .segmented__item { padding: 0 var(--space-2); }
  .gantt { --gantt-table-w: 120px; }
  .project-header__meta { gap: var(--space-2); }
}

/* ----- Touch devices: larger hit targets ------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  .btn--sm { min-height: 36px; }
  .menu__item { padding: var(--space-3); }
  .nav__item { height: 44px; }
  .gantt-bar__link { display: none; }
  .kcard { cursor: default; }
}

/* ----- Print (reports) ------------------------------------------------------------------- */
@media print {
  .sidebar, .topbar, .mobile-tabbar, .page-header__actions, .filter-bar, .toast-region { display: none; }
  .app-shell { display: block; }
  .content { padding: 0; max-width: none; }
  .card { box-shadow: none; break-inside: avoid; }
}