/* =============================================================================
   F23 v0.16.0 — Responsive polish overrides
   Load AFTER new-era-styles.css (cascade WIN). Zero edit ai file design-system.
   Desktop >=1024px INVARIATO by construction: tutte le media query sono <1024px
   (o <640px per mobile-only). A >=1024px nessuna regola qui matcha.
   ============================================================================= */

/* ---------- utility: scrollbar-hide ---------- */
.scrollbar-hide { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ---------- F23.1 Section 2 — Tab nav scroll orizzontale touch (<1024px) ---------- */
@media (max-width: 1023px) {
  .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;            /* Firefox */
  }
  .tabs::-webkit-scrollbar { display: none; }  /* WebKit: scroll funziona, barra nascosta */
  .tab {
    flex: 0 0 auto;                   /* no strizzamento, abilita scroll */
    scroll-snap-align: start;
    min-height: 44px;                 /* touch target Apple HIG */
  }
}

/* ---------- F23.1 Section 3 — Touch targets mobile/tablet (<1024px) ---------- */
@media (max-width: 1023px) {
  .btn-primary,
  .btn-dark,
  .btn-ghost,
  .btn-del,
  .btn-push,
  .btn-triage {
    min-height: 44px;
  }
  .checkbox { min-width: 26px; min-height: 26px; }
}

/* ---------- F23.1 Section 4 — Topbar compatta su mobile (<640px) ---------- */
@media (max-width: 639px) {
  .topbar { padding: 8px 12px; }
  .brand-mark { font-size: 14px; }
  .acct { gap: 6px; }
  .acct-mail { display: none; }       /* mobile: solo avatar + Esci, email nascosta */
}

/* ---------- F23.2 Section 5 — Tabelle scroll-x + sticky col1 (<1024px) ----------
   new-era-styles.css ha .table-wrap{ overflow:hidden } → su mobile il contenuto
   delle pseudo-tabelle grid (task/live/rep) viene CLIPPATO. Override: scroll-x
   touch + min-width per leggibilità + prima colonna sticky (graceful degrade). */
@media (max-width: 1023px) {
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .trow.task-grid,
  .trow.live-grid,
  .trow.rep-grid {
    min-width: 760px;
  }
  /* sticky prima colonna: ancora la riga durante lo scroll orizzontale.
     var(--surface) propaga il bg corretto anche in dark mode. */
  .trow.task-grid > :first-child,
  .trow.live-grid > :first-child,
  .trow.rep-grid > :first-child {
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 1;
  }
}

/* ---------- F23.2 Section 7 — Bulk editor compatto mobile (<640px) ---------- */
@media (max-width: 639px) {
  .bulk-ta { min-height: 220px; padding: 16px 16px; font-size: 14px; }
  .bulk-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .bulk-bar > * { width: 100%; }
  .bulk-bar .sel-count { text-align: center; }
}

/* ---------- F23.2 Section 8 — Selbar Inbox stack mobile (F22 Push + Elimina) ---------- */
@media (max-width: 639px) {
  .selbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .sel-actions { width: 100%; display: flex; gap: 8px; }
  .sel-actions .btn-push,
  .sel-actions .btn-del { flex: 1; }
}

/* ---------- F23.3 Section 9 — KPI bar responsive (Live + Control Center) ----------
   .kpis: Live (CSS repeat(4,1fr)) + CC (inline auto-fit) → !important per battere
   l'inline style del container CC. Desktop >=1024 invariato. */
@media (max-width: 639px) {
  .kpis { grid-template-columns: 1fr !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .kpis { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- F23.3 Section 10 — Live filters chip-row stack mobile (<640px) ----------
   .filters è già flex-column; .chip-row (label + .chip-set wrap) impila label sopra. */
@media (max-width: 639px) {
  .chip-row { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* ---------- F23.3 Section 11 — Control Center sezioni responsive (class-hook) ----------
   Container CC con inline grid-template-columns auto-fill → class-hook + !important.
   Team (Tailwind grid-cols-1 lg:grid-cols-2), Alert/Anomalie (single-col) già OK. */
@media (max-width: 639px) {
  .cc-clients-grid,
  .cc-internal-grid,
  .cc-pianificare-grid,
  .cc-pipeline-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .cc-clients-grid,
  .cc-internal-grid,
  .cc-pianificare-grid,
  .cc-pipeline-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- F23.3 Section 12 — Chart canvas wrapper height responsive ----------
   .cc-am-chart-wrap ha inline height/min-height:320px → !important per ridurre mobile.
   maintainAspectRatio:false (già F21.3) fa adattare il chart all'altezza wrapper. */
@media (max-width: 639px) {
  .cc-am-chart-wrap { height: 260px !important; min-height: 260px !important; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .cc-am-chart-wrap { height: 300px !important; min-height: 300px !important; }
}

/* ---------- F23.4 Section 17 — Polish finale font + padding mobile (<640px) ----------
   Carico (.carico), Storico (.weeks) = già flex-column → 0 override.
   Report (.rep-cards) + Setup (.setup-grid) = già media@980 → 0 override.
   Report/Task/Live tables = già Section 5 scroll-x. Solo riduzione font/padding.
   Stessa specificità del design-system ma caricato dopo → no !important necessario. */
@media (max-width: 639px) {
  .page-title { font-size: 19px; }
  .sec-title { font-size: 17px; }
  .panel { padding: 14px; }
  .card { padding: 14px; }
}

/* ---------- F23.4 Section 18 — page-head stack mobile (FIX overflow Live/Mail) ----------
   Playwright harness ha rilevato overflow orizzontale (Live 440>375, Mail 443>375):
   .page-head è flex justify-between no-wrap → titolo + .live-actions (select mailbox
   "Tutte le mailbox" + bottoni) sforano i 375px e spingono la pagina. Stack column. */
@media (max-width: 639px) {
  .page-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .live-actions { width: 100%; flex-wrap: wrap; }
  .live-actions .sel,
  .live-actions select { max-width: 100%; }
}

/* ---------- F23.4 Section 19 — Mail card token break (FIX overflow Mail) ----------
   Playwright: Mail 443>375. .mcard-body ha già min-width:0 ma un token non spezzabile
   (indirizzo email lungo / subject) forza la min-content width oltre i 375px. break. */
@media (max-width: 639px) {
  .mcard-subj,
  .mcard-from,
  .mcard-snip { overflow-wrap: anywhere; word-break: break-word; }
}

/* ---------- F24.1 Section 20 — Setup PM Supervisor mobile/tablet ----------
   Form config: griglia 4-col → 2-col tablet, 1-col mobile. Righe periodi critici
   wrap (2 date input + label + rimuovi non stanno su 375px). Desktop ≥1024 invariato. */
@media (min-width: 640px) and (max-width: 1023px) {
  .pm-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-field-wide { grid-column: span 2; }
}
@media (max-width: 639px) {
  .pm-form-grid { grid-template-columns: 1fr; }
  .pm-field-wide { grid-column: span 1; }
  .pm-periodo-row { flex-wrap: wrap; }
  .pm-periodo-row input[type="text"] { flex-basis: 100%; }
  .pm-form-actions { flex-direction: column-reverse; }
  .pm-form-actions .btn-dark, .pm-form-actions .btn-ghost { width: 100%; }
}

/* ---------- F24.2 Section 21 — tab Briefing PM mobile/tablet ----------
   Card segnalazione: badge wrap (già flex-wrap), azioni footer touch ≥44px su
   2 righe, chip filtri scroll-x come tab nav, segnale row stack. Desktop ≥1024 invariato. */
@media (max-width: 1023px) {
  .pm-card-actions { gap: 12px; }
  .pm-card-actions .row-link { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 639px) {
  .pm-chip-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .pm-chip { flex: none; }
  .pm-segnale { flex-direction: column; gap: 2px; }
  .pm-segnale-meta { white-space: normal; flex-wrap: wrap; }
  .pm-card-actions { flex-direction: column; align-items: stretch; }
}

/* ---------- F24.3 Section 22 — PM bell popover mobile (<640px) ----------
   Popover assoluto ancorato a destra deborderebbe oltre 375px: lo fisso full-width
   sotto la topbar. Touch ≥44px sugli item. Desktop ≥640 invariato. */
@media (max-width: 639px) {
  .pm-bell-pop { position: fixed; left: 8px; right: 8px; top: 56px; width: auto; max-width: none; }
  .pm-bell-item { min-height: 44px; }
}