/* ═══════════════════════════════════════════════════════
   RESPONSIVE — ottimizzazione mobile/tablet
   Caricato PER ULTIMO così le regole vincono sempre.
   ═══════════════════════════════════════════════════════ */

/* ── TABLET/MOBILE: scroll orizzontale della tabella ── */
/* Lo scroll X avviene sul corpo del gruppo (il genitore diretto della tabella),
   perché .list-group ha overflow:hidden per gli angoli arrotondati. */
@media (max-width: 900px) {
  .list-view, #pv-task-list { min-width: 0; }
  .list-group-body {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .list-group-body::-webkit-scrollbar { height: 5px; }
  .list-group-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 4px; }
  .list-table { min-width: 820px; }
}

/* ── MOBILE (≤768px) ── */
@media (max-width: 768px) {

  /* Sidebar: fuori schermo, si apre con hamburger (vince su liquid-glass) */
  #sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 82vw; min-width: 0; max-width: 300px;
    transform: translateX(-100%);
    z-index: 1000;
  }
  #sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.30); }
  #sidebar { padding-top: env(safe-area-inset-top); }
  #btn-logout { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  #sidebar-overlay { z-index: 999; }
  #sidebar-overlay.show { display: block; }

  /* Main a tutta larghezza */
  #main { width: 100%; min-width: 0; }

  .hamburger { display: flex !important; }

  /* Header compatto + rispetto safe-area iOS (notch/status bar) */
  #app-header {
    padding: 0 12px;
    padding-top: env(safe-area-inset-top);
    padding-left: max(12px, env(safe-area-inset-left));
    height: calc(54px + env(safe-area-inset-top));
    gap: 6px;
  }
  .header-title { font-size: 14px; }

  /* Hamburger: area di tap ampia e sempre sopra a tutto */
  .hamburger {
    display: flex !important;
    width: 44px; height: 44px;
    margin-left: -6px;
    align-items: center; justify-content: center;
    gap: 5px;
    position: relative;
    z-index: 30;
    flex-shrink: 0;
  }
  .hamburger span { width: 22px; height: 2.5px; }
  #header-actions .toolbar-btn,
  #btn-archive-launch { padding: 6px 10px !important; font-size: 12px !important; }

  /* Tab vista: scorrevoli in orizzontale, niente a capo */
  .view-tabs {
    padding: 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .view-tabs::-webkit-scrollbar { display: none; }
  .view-tab { padding: 0 10px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }

  /* Toolbar: scorrevole, compatta */
  .toolbar {
    padding: 8px 12px;
    gap: 6px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar-btn { flex-shrink: 0; padding: 7px 12px; }
  .toolbar-search { flex-shrink: 0; }
  .toolbar-search input { width: 110px; }

  /* Contenuto: la tabella scorre in orizzontale, niente taglio */
  #content { -webkit-overflow-scrolling: touch; }
  .list-view { padding: 12px 10px 40px; }

  /* Tabella scorrevole con colonne a larghezza fissa (niente sovrapposizione header) */
  .list-table { min-width: 760px; }
  .col-elemento { width: 200px; min-width: 200px; }
  .col-commenti { width: 44px; }
  .col-persona  { width: 90px; }
  .col-stato    { width: 130px; }
  .col-data     { width: 110px; }
  .col-timeline { width: 150px; }
  .col-note     { width: 140px; }
  .list-table thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Tap target più grandi sulle righe */
  .list-row td { padding: 11px 10px; }
  .status-badge { padding: 4px 11px; }
  .avatar, .avatar-add { width: 28px; height: 28px; }

  /* Header gruppo */
  .list-group { margin-bottom: 16px; }

  /* Calendario: celle più basse, testo più piccolo, scorrevole se serve */
  .calendar-view { padding: 12px 10px 40px; }
  .calendar-grid { min-width: 0; }
  .calendar-day { min-height: 72px; padding: 4px 3px; }
  .day-num { font-size: 11px; width: 20px; height: 20px; margin-bottom: 3px; }
  .calendar-dow { padding: 6px 2px; font-size: 9px; letter-spacing: .5px; }
  .cal-item { font-size: 10px; padding: 1px 4px; }
  .calendar-month-label { font-size: 14px; min-width: 0; }
  .calendar-nav { flex-wrap: wrap; gap: 6px; }

  /* Person view: card più piccole, scroll orizzontale della barra */
  .pv-selector { padding: 12px 12px 10px; }
  .pv-person-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .pv-person-grid::-webkit-scrollbar { display: none; }
  .pv-person-card { min-width: 66px; flex-shrink: 0; padding: 8px 10px; }
  .pv-avatar { width: 34px; height: 34px; }
  #pv-task-list { min-width: 0; }

  /* Modali: a tutta larghezza con margini ridotti */
  #modal-container > div > div,
  #modal-container [style*="max-width:480px"],
  #modal-container [style*="max-width:440px"] {
    max-width: 100% !important;
    width: 100% !important;
    padding: 24px 18px !important;
    border-radius: 14px !important;
  }

  /* Pannello commenti a tutta larghezza */
  #comments-panel { width: 100%; }

  /* Popup timeline / dropdown stato: non escono dallo schermo */
  .timeline-popup { left: 12px !important; right: 12px; min-width: 0 !important; width: auto; }

  /* Logo/workspace */
  .sidebar-logo { height: 40px; }
}

/* ── MOBILE PICCOLO (≤400px) ── */
@media (max-width: 400px) {
  .toolbar-btn.primary span,
  .toolbar-btn.primary { font-size: 12px; }
  .toolbar-search input { width: 80px; }
  .calendar-day { min-height: 64px; }
}