/* ═══════════════════════════════════════════════════════
   NCC MANAGER — FASE 1.1: MOBILE-FIRST ENHANCEMENTS
   Includere DOPO il <style> esistente in index.html
   ═══════════════════════════════════════════════════════ */

/* ── 1. BASE MOBILE-FIRST (touch targets specifici calendario) ──
 * 2026-05-03 cleanup: regole comuni (.btn, .btn-sm, .modal-close+detail-close+notif-panel-close,
 * .combo-btn, .tappa-rm, .mchip-x) spostate in shared-base.css per essere disponibili anche
 * in event_editor.php. Restano qui solo le regole specifiche del calendario principale.
 */
.day-add {
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  border-radius: 10px;
  font-size: 20px;
}
.s-item {
  padding: 12px 14px;
  min-height: 44px;
}
.month-btn {
  width: 40px; height: 40px;
  min-width: 40px;
  font-size: 18px;
}
.cal-vt-btn {
  padding: 8px 14px;
  min-height: 36px;
}
.perm-check {
  min-height: 40px;
  padding: 6px 10px;
}
.ana-item button {
  width: 36px; height: 36px;
  min-width: 36px;
  opacity: 1; /* sempre visibili su mobile, no hover */
}

/* ── 2. FORM INPUT — solo regole responsive mobile-specific ──
 * 2026-05-03 cleanup: .fg input/select/textarea (sizing + zoom iOS), .fg select arrow,
 * .fg label, .fg input:-webkit-autofill spostati in shared-base.css.
 * Resta solo .fg-row stack mobile (specifico responsive).
 */

/* Form row: stack su mobile, affiancati da 600px+ */
.fg-row, .fg-row3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* ── 3. CALENDARIO MOBILE-FIRST ── */

/* Base: 5 colonne essenziali per mobile */
.cal-head, .svc-row {
  grid-template-columns: 12px 50px 16px 1fr 1fr;
  font-size: 12px;
}
.svc-row > div {
  padding: 8px 5px;
  font-size: 12px;
}
.hide-mob, .hide-tab, .hide-wide, .hide-desk {
  display: none !important;
}

/* Day header mobile */
.day-header {
  padding: 10px 10px;
  gap: 6px;
}
.day-num {
  font-size: 15px;
  min-width: 28px;
}
.day-name {
  font-size: 11px;
}

/* Month bar mobile */
.month-bar {
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.month-bar h2 {
  font-size: 18px;
  min-width: auto;
}
.month-stats {
  width: 100%;
  margin-left: 0;
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.mstat {
  font-size: 11px;
  white-space: nowrap;
}

/* ── 4. TOPBAR MOBILE ── */
#topbar {
  padding: 10px 12px;
  gap: 6px;
}
#topbar h1 {
  font-size: 14px;
}
.tb-actions {
  gap: 4px;
}
.notif-bell {
  font-size: 18px;
}

/* ── 5. CONTENT AREA ── */
#content {
  padding: 12px 10px 80px; /* extra bottom per FAB AI */
}

/* ── 6. MODAL & DETAIL MOBILE ── */
.modal {
  width: 100%;
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 14px 14px 0 0;
  margin-top: auto;
}
.modal-body {
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}
.modal-head {
  padding: 14px 16px;
}
.modal-foot {
  padding: 12px 16px;
  flex-wrap: wrap;
}

/* Detail card: full width bottom sheet su mobile */
.detail-card {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 16px 16px 0 0;
}
.detail-body {
  padding: 14px 16px;
  -webkit-overflow-scrolling: touch;
}
.detail-foot {
  flex-wrap: wrap;
  padding: 12px 16px;
  gap: 8px;
}
.detail-actions {
  padding: 0 16px 10px;
  gap: 6px;
}
.d-row {
  flex-direction: column;
  gap: 8px;
}

/* ── 7. DASHBOARD MOBILE ── */
.dash-kpi {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.kpi-card {
  padding: 14px 14px;
}
.kpi-value {
  font-size: 24px;
}
.kpi-label {
  font-size: 10px;
}
.dash-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}
.dash-panel {
  padding: 16px;
}

/* ── 8. SIDEBAR (già gestito, rinforzo) ── */
#sidebar {
  position: fixed;
  left: -260px;
  height: 100%;
  transition: left .3s cubic-bezier(.16,1,.3,1);
  box-shadow: var(--shadow-lg);
  z-index: 100 !important;
}
#sidebar.open {
  left: 0;
}
.sb-toggle {
  display: flex !important;
}

/* Overlay scuro quando sidebar aperta — z-index SOTTO la sidebar */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 29;
  display: none;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-overlay.open {
  display: block;
}

/* ── 9. NOTIFICHE PANEL MOBILE ── */
.notif-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
  animation: slideLeft .25s ease;
}
@keyframes slideLeft {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* ── 10. PULL-TO-REFRESH INDICATOR ── */
.ptr-indicator {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-60px);
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  z-index: 200;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  box-shadow: var(--shadow);
  pointer-events: none;
}
.ptr-indicator.visible {
  transform: translateX(-50%) translateY(70px);
}
.ptr-indicator.loading {
  transform: translateX(-50%) translateY(70px);
}
.ptr-spinner {
  display: inline-block;
  animation: spin .8s linear infinite;
}

/* ── 11. SWIPE NAVIGATION HINT ── */
.swipe-hint {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  z-index: 60;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  box-shadow: var(--shadow);
}
.swipe-hint.left { left: 10px; }
.swipe-hint.right { right: 10px; }
.swipe-hint.show { opacity: 1; }

/* ── 12. CONNECTION STATUS BANNER ── */
.conn-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 250;
  text-align: center;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  transform: translateY(-100%);
  transition: transform .3s ease;
}
.conn-banner.show {
  transform: translateY(0);
}
.conn-banner.offline {
  background: var(--amber);
  color: #1a1a2e;
}
.conn-banner.online {
  background: var(--green);
  color: #fff;
}
.conn-banner.syncing {
  background: var(--accent);
  color: #fff;
}

/* ── 13. LOADING BUTTON STATE ── */
/* .btn.loading: spostato in shared-base.css (2026-05-03 cleanup) */

/* ── 14. VALIDATION ERRORS ── */
/* .fg.has-error e .fg .field-error: spostati in shared-base.css (2026-05-03 cleanup) */

/* ── 15. TOAST MIGLIORATO ── */
/* Container: stack ancorato in basso; l'offset 90px è applicato SOLO se il FAB AI è visibile
   (regola in index.html: body:has(.ai-fab.enabled) #toastStack{bottom:90px}).
   Così se l'assistente è disattivato i toast stanno a 24px dal bordo, non sprecano spazio. */
#toastStack {
  max-width: calc(100vw - 32px);
}
/* Singoli toast: tipografia mobile-friendly (padding-right mantenuto per il pulsante ×) */
.toast-item {
  font-size: 13px;
  padding: 12px 34px 12px 20px;
  border-radius: 14px;
}

/* ── 16. SKELETON LOADING ── */
.skeleton {
  background: linear-gradient(90deg, var(--bg2) 25%, var(--bg3) 50%, var(--bg2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-row {
  height: 44px;
  margin-bottom: 6px;
  border-radius: 8px;
}
.skeleton-card {
  height: 100px;
  border-radius: var(--r);
}

/* ═══════════════════════════════════════
   RESPONSIVE BREAKPOINTS (MOBILE-FIRST)
   ═══════════════════════════════════════ */

/* ── TABLET (≥600px) ── */
@media (min-width: 600px) {
  .fg-row { grid-template-columns: 1fr 1fr; }
  .fg-row3 { grid-template-columns: 1fr 1fr 1fr; }
  
  .cal-head, .svc-row {
    grid-template-columns: 14px 58px 18px 1fr 1fr 1fr 1fr;
  }
  .hide-tab { display: block !important; }
  
  #content { padding: 16px 18px 40px; }
  .day-num { font-size: 17px; min-width: 32px; }
  .month-bar h2 { font-size: 20px; }
  .month-stats { width: auto; margin-left: auto; flex-wrap: wrap; }
  
  .modal { max-width: 680px; border-radius: 16px; margin: auto; max-height: 90vh; }
  .notif-panel { width: 380px; max-width: calc(100vw - 24px); top: 54px; bottom: auto; max-height: 70vh; border-radius: 14px; position: absolute; animation: fadeScale .2s ease; }
  
  .dash-kpi { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .d-row { flex-direction: row; gap: 16px; }
  
  #topbar { padding: 14px 20px; gap: 10px; }
  #topbar h1 { font-size: 16px; }
  .notif-bell { font-size: 20px; }
}

/* ── SMALL DESKTOP (≥860px) ── */
@media (min-width: 860px) {
  #sidebar {
    position: relative;
    left: 0 !important;
    box-shadow: none;
  }
  .sb-toggle { display: none !important; }
  .sidebar-overlay { display: none !important; }
  
  #topbar { padding: 14px 24px; }
  #topbar h1 { font-size: 18px; }
  #content { padding: 20px 24px 40px; }
}

/* ── MEDIUM DESKTOP (≥960px) ── */
@media (min-width: 960px) {
  .cal-head, .svc-row {
    grid-template-columns: 14px 58px 18px 1fr 1fr 1fr 1fr 100px 110px 74px;
  }
  .hide-mob { display: block !important; }
  
  .dash-grid { grid-template-columns: 1fr 1fr; }
}

/* ── LARGE DESKTOP (≥1200px) ── */
@media (min-width: 1200px) {
  .cal-head, .svc-row {
    grid-template-columns: 14px 58px 18px 1fr 1fr 1fr 1fr 100px 110px 1fr 74px;
  }
  .hide-wide { display: block !important; }
  .hide-desk { display: block !important; }
  
  .dash-kpi { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
}

/* ── SAFE AREA (iPhone notch) ── */
@supports (padding: env(safe-area-inset-bottom)) {
  #content {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  .ai-fab {
    bottom: calc(24px + env(safe-area-inset-bottom));
  }
  .modal-foot, .detail-foot {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  #toastStack {
    bottom: calc(24px + env(safe-area-inset-bottom));
  }
  body:has(.ai-fab.enabled) #toastStack {
    bottom: calc(90px + env(safe-area-inset-bottom));
  }
}