/* ================================================================
   CHATLIFY — Mobile & Responsive Stylesheet
   Breakpoints:
     ≤ 1200px → large tablet / small laptop
     ≤  768px → tablet / large phone
     ≤  600px → small tablet / phone landscape
     ≤  480px → smartphone standard
     ≤  320px → schermi molto piccoli
     ≤  359px → very compact (iPhone SE, etc.)
   ================================================================ */

/* ----------------------------------------------------------------
   1. RESET & VIEWPORT
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* ================================================================
   0. SAFE AREA INSETS — notch support (iPhone X+, Android)
   ================================================================ */

/* Overlay sidebar — gestione globale (non solo mobile) */
#quick-sidebar-overlay {
  display: none !important;
  position: fixed;
  /* Parte sotto la navbar per coprire solo l'area del drawer */
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10049;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 480px) {
  #quick-sidebar-overlay { top: 52px; }
  /* Drawer allineato alla navbar a 52px */
  .quick-sidebar-menu,
  .quick-sidebar-menu.always-visible {
    top: 52px !important;
    height: calc(100dvh - 52px) !important;
  }
  .quick-sidebar-menu .quick-sidebar-header {
    height: 52px !important;
    min-height: 52px !important;
  }
}
#quick-sidebar-overlay.active {
  display: block !important;
}
@supports (padding-top: env(safe-area-inset-top)) {
  .top-nav {
    padding-top: env(safe-area-inset-top);
  }
  @media (max-width: 768px) {
    .quick-sidebar-menu {
      padding-bottom: env(safe-area-inset-bottom);
    }
    .whatsapp-input-bar,
    .chat-input-bar,
    .message-input-area {
      padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    }
    .app-container {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}

/* ================================================================
   BREAKPOINT A — ≤ 1200px  (large tablet / small laptop)
   ================================================================ */

/* A1. Quick sidebar — stay visible but narrower */
@media (max-width: 1200px) {
  :root {
    --quick-sidebar-width: 52px;
    --quick-sidebar-expanded-width: 260px;
  }
}

/* A2. Top nav — reduce horizontal padding */
@media (max-width: 1200px) {
  .top-nav {
    padding: 0 16px !important;
    gap: 10px;
  }
}

/* A3. Stats grid — 2 columns */
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* A4. Charts grid — 1 column */
@media (max-width: 1200px) {
  .charts-grid {
    grid-template-columns: 1fr !important;
  }
}

/* A5. WhatsApp layout — narrower contacts panel */
@media (max-width: 1200px) {
  .whatsapp-layout .wa-contacts-panel,
  .whatsapp-layout .contacts-panel,
  .whatsapp-layout .left-panel {
    width: 300px !important;
    min-width: 260px !important;
    flex-shrink: 0;
  }
}

/* A6. Email sidebar — narrower */
@media (max-width: 1200px) {
  .email-sidebar,
  .email-folders-panel {
    width: 220px !important;
    min-width: 200px !important;
  }
}

/* A7. Page containers — tighter padding */
@media (max-width: 1200px) {
  .page-container,
  .content-area,
  .view-container {
    padding: 16px !important;
  }
}

/* A8. Modals — slightly narrower */
@media (max-width: 1200px) {
  .modal.modal-xl { width: 90vw !important; max-width: 90vw !important; }
  .modal.modal-lg { width: 85vw !important; max-width: 85vw !important; }
}

/* A9. Dashboard 2-column widget grid stays 2 columns at 1200px */
@media (max-width: 1200px) {
  .dashboard-widget-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* A10. Sidebar / main layout — reduce sidebar width */
@media (max-width: 1200px) {
  .sidebar { width: 180px !important; }
  .main-content { margin-left: 180px !important; }
}

/* ================================================================
   BREAKPOINT B — ≤ 768px  (tablet / large phone)
   ================================================================ */

/* B1. Quick sidebar — overlay drawer instead of fixed strip */
@media (max-width: 768px) {
  :root {
    --quick-sidebar-width: 0px;
    --quick-sidebar-expanded-width: 280px;
  }

  /* Hide the quick sidebar completely on mobile — shown only when .open */
  .quick-sidebar-menu,
  .quick-sidebar-menu.always-visible {
    display: none !important;
    transform: translateX(-100%);
    width: var(--quick-sidebar-expanded-width) !important;
    z-index: 10060;
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
    /* Parte SOTTO la navbar (56px) — evita sfasamento click vs posizione visiva */
    top: 56px !important;
    height: calc(100dvh - 56px) !important;
  }

  /* Drawer header: stessa altezza della navbar mobile (56px) */
  .quick-sidebar-menu .quick-sidebar-header {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    flex-shrink: 0;
  }

  /* When hamburger is tapped, JS adds .mobile-open — show as full drawer */
  .quick-sidebar-menu.always-visible.open,
  .quick-sidebar-menu.open,
  .quick-sidebar-menu.mobile-open {
    display: flex !important;
    transform: translateX(0) !important;
    overflow-y: auto;
  }

  /* Pulsante chiudi (X) visibile nel drawer su mobile */
  .sidebar-close-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background 0.2s;
  }
  .sidebar-close-btn:hover { background: var(--bg-hover, rgba(0,0,0,0.08)); }

  /* Show item labels even without hover — !important necessario per battere la specificità
     di styles.css: .always-visible:not(:hover) .quick-sidebar-item span { display: none } */
  .quick-sidebar-menu.always-visible .quick-sidebar-item {
    justify-content: flex-start !important;
    padding: 12px 20px !important;
    gap: 14px !important;
    border-left: 3px solid transparent !important;
    position: static !important;
    min-height: 52px !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
  }
  .quick-sidebar-menu.always-visible .quick-sidebar-item:last-child {
    border-bottom: none !important;
  }
  /* Item attivo — ripristina il colore del bordo sinistro e background */
  .quick-sidebar-menu.always-visible .quick-sidebar-item.active {
    border-left-color: var(--primary-color, #6366f1) !important;
    background: rgba(99, 102, 241, 0.08) !important;
  }
  .quick-sidebar-menu.always-visible .quick-sidebar-item.active i {
    color: var(--primary-color, #6366f1) !important;
  }
  .quick-sidebar-menu.always-visible .quick-sidebar-item.active span {
    color: var(--primary-color, #6366f1) !important;
    font-weight: 600 !important;
  }
  /* Feedback al tap (touch devices) */
  .quick-sidebar-menu.always-visible .quick-sidebar-item:active {
    background: rgba(99, 102, 241, 0.12) !important;
  }
  .quick-sidebar-menu.always-visible .quick-sidebar-item span {
    opacity: 1 !important;
    display: inline !important;
    font-size: 0.95rem !important;
  }
  .quick-sidebar-menu.always-visible .quick-sidebar-item i {
    width: 26px;
    height: 26px;
    font-size: 1.05rem;
    color: var(--text-secondary, #6b7280);
  }

  /* Drawer header su mobile: nasconde l'icona ☰ ridondante, mostra "Menu" + X */
  .quick-sidebar-menu.always-visible .quick-sidebar-header {
    justify-content: flex-start;
    padding: 0 16px;
    gap: 10px;
    background: var(--sidebar-bg, #fff) !important;
    border-bottom: 2px solid var(--primary-color, #6366f1) !important;
  }
  .quick-sidebar-menu.always-visible .quick-sidebar-menu-icon {
    display: none !important; /* ☰ nascosta nel drawer — è già nel navbar */
  }
  /* styles.css nasconde .wd-sticky-nav-title con :not(:hover) (specificità 0,0,5,0) —
     serve !important per forzare la visibilità quando il drawer è aperto su mobile */
  .quick-sidebar-menu.mobile-open .quick-sidebar-header .wd-sticky-nav-title {
    display: block !important;
    opacity: 1 !important;
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color, #6366f1) !important;
    text-align: left;
  }

  /* When open (JS adds .mobile-open) — slide in */
  .quick-sidebar-menu.always-visible.open,
  .quick-sidebar-menu.mobile-open {
    transform: translateX(0) !important;
  }

  /* App layout — no left margin */
  body.quick-sidebar-visible .app-container { margin-left: 0 !important; }
  body.quick-sidebar-visible .main-content { margin-left: 0 !important; }

  /* Mobile menu toggle button in top-nav */
  #mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-primary, #1f2937);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
  }
  #mobile-menu-toggle:hover { background: var(--bg-secondary, #f3f4f6); }

  /* Overlay backdrop — regola globale in cima al file; qui è solo un reminder */
}

@media (min-width: 769px) {
  #mobile-menu-toggle { display: none !important; }
  .sidebar-close-btn { display: none !important; }
}

/* ----------------------------------------------------------------
   3. TOP NAV
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .top-nav {
    padding: 0 12px !important;
    height: 56px !important;
    min-height: 56px;
    gap: 8px;
    flex-wrap: nowrap;
    align-content: center;
    overflow: visible;
    width: 100% !important;
    box-sizing: border-box;
  }

  body.quick-sidebar-visible .top-nav {
    padding-left: 12px !important;
  }
  /* Su mobile il sidebar è un drawer in overlay, non sposta il nav-left */
  body.quick-sidebar-visible .top-nav .nav-left {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  /* Forza override del padding-left:100px che styles.css imposta su desktop */
  body.quick-sidebar-visible .top-nav .nav-left,
  .top-nav .nav-left {
    padding-left: 0 !important;
  }

  /* nav-left e nav-right non crescono oltre il disponibile */
  .nav-left {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 6px !important;
  }

  .logo-img {
    height: 30px !important;
    max-width: 120px !important;
    flex-shrink: 1;
    min-width: 50px;
  }

  /* Global search — solo icona lente su mobile; al tap apre SearchModal */
  .global-search {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px !important;
    width: 40px !important;
    max-width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    margin: 0;
    background: transparent;
    transition: background 0.2s;
  }
  .global-search:hover,
  .global-search:active {
    background: var(--bg-secondary, #f3f4f6);
  }

  /* Nasconde l'input — su mobile si usa il SearchModal */
  .global-search .search-input {
    display: none !important;
  }

  /* Icona lente centrata e cliccabile */
  .global-search .search-icon {
    position: static !important;
    transform: none !important;
    font-size: 1.05rem !important;
    color: var(--text-primary, #1f2937) !important;
    pointer-events: none;
    line-height: 1;
  }

  /* Search results non mostrati inline su mobile (usa SearchModal) */
  .global-search #search-results {
    display: none !important;
  }

  /* nav-right: solo notifiche + avatar, no wrapping */
  .nav-right {
    display: flex;
    align-items: center;
    margin-left: auto;
    min-width: 0;
    flex-shrink: 0 !important;
    gap: 6px !important;
  }

  #notifications-btn {
    position: relative;
  }

  .notification-badge {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    line-height: 16px;
    font-size: 10px !important;
    top: -3px !important;
    right: -3px !important;
  }

  /* Mostra bell + user-menu + global-search, nasconde il resto */
  .nav-right > *:not(#notifications-btn):not(.user-menu):not(.global-search):not(#mobile-menu-toggle) {
    display: none !important;
  }

  /* Icon buttons più compatti */
  .icon-btn, .btn-icon {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 0.9rem !important;
    flex-shrink: 0;
  }

  /* Workspace/channel selectors: adaptive layout */
  .selectors-container {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0 !important;
    max-width: min(100%, 440px);
    overflow: visible;
  }

  .workspace-selector,
  .channel-selector {
    flex: 1 1 0;
    min-width: 0;
    max-width: calc(50% - 2px);
    margin-left: 0 !important;
  }

  /* Workspace/channel selector button IDs used in index.html */
  #workspace-dropdown-btn,
  #channel-dropdown-btn {
    padding: 6px 8px !important;
    font-size: 12px !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }

  #current-workspace-name,
  #current-channel-name {
    display: inline-block !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    vertical-align: bottom;
  }

  #workspace-dropdown,
  #channel-dropdown {
    min-width: min(92vw, 320px) !important;
    max-width: calc(100vw - 16px) !important;
    left: 0 !important;
    right: auto !important;
  }

  /* Nascondi il testo "+" aggiungi workspace */
  .workspace-add-btn span,
  #add-workspace-btn span {
    display: none !important;
  }

  .selectors-container {
    flex-shrink: 1 !important;
  }

  .search-results {
    max-height: min(55vh, 380px) !important;
    z-index: 10120 !important;
  }
}

@media (max-width: 480px) {
  .logo-img {
    max-width: 92px !important;
    height: 26px !important;
  }

  #mobile-menu-toggle {
    width: 36px;
    height: 36px;
  }

  .selectors-container {
    max-width: min(100%, 300px);
  }

  .workspace-selector,
  .channel-selector {
    max-width: calc(50% - 2px);
  }

  #current-workspace-name,
  #current-channel-name {
    font-size: 11.5px;
  }

  /* Su 480px rimane icon-only (stessa logica ≤768px) */
  .global-search {
    flex: 0 0 36px !important;
    width: 36px !important;
    max-width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
  }

  /* Selettori workspace/canale: mostra solo icona su schermi stretti */
  #current-workspace-name,
  #current-channel-name {
    display: none !important;
  }

  #workspace-dropdown-btn .fa-chevron-down,
  #channel-dropdown-btn .fa-chevron-down {
    display: none !important;
  }

  #workspace-dropdown-btn,
  #channel-dropdown-btn {
    padding: 6px 8px !important;
    justify-content: center !important;
    min-width: 36px !important;
    max-width: 40px !important;
  }
}

@media (max-width: 359px) {
  .logo-img {
    display: none;
  }

  .selectors-container {
    max-width: min(100%, 250px);
  }

  .workspace-selector,
  .channel-selector {
    max-width: calc(50% - 2px);
  }

  #current-workspace-name,
  #current-channel-name {
    font-size: 11px;
  }

  #workspace-dropdown-btn,
  #channel-dropdown-btn {
    padding: 6px !important;
    gap: 4px;
  }
}

/* ----------------------------------------------------------------
   4. MAIN CONTENT & APP CONTAINER
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Prevent any horizontal scroll at root level */
  body {
    overflow-x: hidden !important;
    max-width: 100vw;
  }

  /* Hide classic sidebar off-screen on mobile (navigation via quick-sidebar/hamburger) */
  .sidebar {
    position: fixed !important;
    left: -280px !important;
    width: 260px !important;
    z-index: 1000;
    transition: left 0.3s ease !important;
  }
  .sidebar.show {
    left: 0 !important;
  }

  .app-container {
    margin-left: 0 !important;
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    /* Corregge il disallineamento con top-nav da 56px (styles.css usa 60px) */
    height: calc(100dvh - 56px) !important;
  }

  /* fullscreen mode (email/chat): aggiusta il top per la navbar mobile da 56px */
  body.fullscreen-mode .app-container {
    height: 100dvh !important;
    padding-top: 56px !important;
  }

  .main-content.fullscreen {
    top: 56px !important;
    height: calc(100dvh - 56px) !important;
  }

  /* app-container: altezza corretta con navbar da 56px (non 60px desktop) */
  .app-container {
    height: calc(100dvh - 56px) !important;
  }

  .main-content {
    margin-left: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: calc(100vh - 56px) !important;
    height: calc(100dvh - 56px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;  /* era overflow:hidden che bloccava anche lo scroll verticale */
  }

  /* chat.css imposta height:100dvh-60px senza media query — override per mobile (nav 56px) */
  .main-content:has(.whatsapp-layout) {
    height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
  }

  /* Tutti gli elementi figli di main-content non possono essere più larghi del viewport */
  .main-content > * {
    max-width: 100%;
    box-sizing: border-box;
  }

  .main-content * {
    min-width: 0;
  }

  /* Media e contenuti embedded non devono forzare overflow orizzontale */
  .main-content img,
  .main-content video,
  .main-content svg,
  .main-content canvas,
  .main-content iframe {
    max-width: 100% !important;
  }

  .main-content img,
  .main-content video {
    height: auto !important;
  }

  /* Layout flessibili usati in più viste: su mobile devono poter collassare */
  .main-content .row,
  .main-content .flex-row,
  .main-content .split-row,
  .main-content .two-column,
  .main-content .two-col,
  .main-content .double-column {
    flex-direction: column !important;
  }

  .main-content .row > *,
  .main-content .flex-row > *,
  .main-content .split-row > *,
  .main-content .two-column > *,
  .main-content .two-col > *,
  .main-content .double-column > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .main-content [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Testo lungo (URL, email, codici) non deve uscire dal contenitore */
  .main-content p,
  .main-content span,
  .main-content td,
  .main-content li,
  .main-content .message-preview,
  .main-content .email-preview,
  .main-content .msg-body {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }

  .main-content table {
    width: 100% !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main-content td,
  .main-content th {
    min-width: 0;
  }

  /* Padding interno uniforme per tutte le view del main content */
  .main-content .breadcrumb,
  .main-content .page-header,
  .main-content .stats-grid,
  .main-content .charts-grid,
  .main-content .dashboard-widgets-row {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* breadcrumb: meno padding verticale su mobile */
  .breadcrumb {
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
  }

  /* stats-grid: forza 1 colonna se lo spazio è troppo stretto */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 12px !important;
    box-sizing: border-box;
  }

  /* stat-card: padding ridotto su mobile */
  .stat-card {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .stat-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.9rem !important;
    flex-shrink: 0;
  }

  .stat-info .stat-value {
    font-size: 1.3rem !important;
  }

  .stat-info .stat-label {
    font-size: 0.75rem !important;
  }

  /* page-header: stacked e compatto */
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 12px !important;
    box-sizing: border-box;
  }

  .page-header h2 {
    font-size: 1.1rem !important;
    margin-bottom: 2px !important;
  }

  .page-header .page-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ----------------------------------------------------------------
   5. WHATSAPP LAYOUT — 3-panel → 1-panel with slide navigation
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  /* B5. Message input area — larger touch target */
  .message-input-area,
  .wa-input-area,
  .chat-input-wrapper {
    padding: 8px 12px !important;
  }

  .message-input-area textarea,
  .wa-input-area textarea,
  .chat-input-wrapper textarea {
    font-size: 16px !important; /* prevent iOS zoom */
    min-height: 40px;
  }
}

@media (min-width: 769px) {
  .mobile-back-btn { display: none !important; }
}

/* ----------------------------------------------------------------
   6. EMAIL LAYOUT — sidebar + content stack vertically on mobile
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .email-layout,
  .email-container,
  [class*="email-layout"] {
    flex-direction: column;
  }

  .email-sidebar,
  .email-folders-panel,
  [class*="email-sidebar"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 200px;
    overflow-y: auto;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    flex-shrink: 0;
  }

  .email-main,
  .email-content,
  [class*="email-content"] {
    flex: 1;
    overflow-y: auto;
  }
}

/* ----------------------------------------------------------------
   7. CARDS & GRID LAYOUTS
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Channels grid → single column */
  #channels-grid > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Dashboard cards → single column */
  .dashboard-cards,
  .stats-grid,
  .card-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Tables → horizontal scroll */
  .table-responsive,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  /* 769–1200px: 2 columns for cards */
  .dashboard-cards,
  .stats-grid,
  .card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ----------------------------------------------------------------
   8. MODALS — full-screen on mobile
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal,
  .modal-container,
  .modal.modal-lg,
  .modal.modal-xl {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    overflow-y: auto;
  }

  /* Auto-overlay modals (auto-modal class) */
  .auto-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .auto-overlay {
    align-items: flex-end !important;
  }
}

/* ----------------------------------------------------------------
   9. FORMS & INPUTS — larger touch targets
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important; /* prevent iOS Safari zoom on focus */
    min-height: 44px;
    padding: 10px 14px;
  }

  .btn, button.btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
  }

  .btn-sm { min-height: 36px; padding: 8px 12px; }
  .btn-xs { min-height: 30px; padding: 6px 10px; }

  /* Form groups full-width */
  .form-row { flex-direction: column !important; gap: 12px !important; }
  .form-group { width: 100% !important; }
}

/* ----------------------------------------------------------------
   10. AUTOMATIONS SIDEBAR — collapse on mobile
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .auto-page { flex-direction: column; }

  .auto-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    height: auto;
    max-height: 56px;
    overflow: hidden;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color, #222);
    transition: max-height 0.3s ease;
    flex-shrink: 0;
  }

  .auto-sidebar.expanded { max-height: 60vh; overflow-y: auto; }

  .auto-sidebar-header {
    cursor: pointer;
    padding: 0 16px;
    height: 56px;
    min-height: 56px;
  }

  /* Add chevron for collapse indicator */
  .auto-sidebar-header::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    display: inline-block;
    margin-left: auto;
    font-size: 14px;
    color: var(--text-secondary, #777);
    transition: transform 0.3s;
  }
  .auto-sidebar.expanded .auto-sidebar-header::after { transform: rotate(180deg); }

  .auto-main { flex: 1; overflow: hidden; }
}

/* ----------------------------------------------------------------
   11. ADDRESSBOOK / CONTACTS VIEW
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .addressbook-layout,
  .contacts-layout {
    flex-direction: column !important;
  }

  .ab-sidebar,
  .contacts-sidebar {
    width: 100% !important;
    height: auto !important;
    max-height: 180px;
    overflow-y: auto;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
  }
}

/* ----------------------------------------------------------------
   13. MISC UTILITIES
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Hide desktop-only elements */
  .hide-mobile { display: none !important; }
  /* Show mobile-only elements */
  .show-mobile { display: block !important; }
  .show-mobile-flex { display: flex !important; }

  /* Padding adjustments */
  .page-container,
  .content-area,
  .view-container {
    padding: 12px !important;
  }

  /* Scrollable panels must use overflow properly */
  .scrollable-panel { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* Avatar / icons smaller on mobile */
  .avatar-lg { width: 40px !important; height: 40px !important; font-size: 16px !important; }

  /* Notification bell badge — dimensioni gestite dalla sezione 3 (top-nav) */
}

@media (min-width: 769px) {
  .hide-mobile { display: initial; }
  .show-mobile, .show-mobile-flex { display: none !important; }
}

/* ----------------------------------------------------------------
   14. INTERMEDIATE (769–1200px) ADJUSTMENTS
   ---------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1200px) {
  /* Sidebar stays visible but narrower */
  .quick-sidebar-menu.always-visible { width: var(--quick-sidebar-width); }

  /* Main sidebar narrower */
  .sidebar { width: 160px !important; }
  .main-content { margin-left: 160px !important; }

  /* Contacts panel slightly narrower */
  .whatsapp-layout .wa-contacts-panel,
  .whatsapp-layout .contacts-panel,
  .whatsapp-layout .left-panel {
    width: 300px !important;
    min-width: 260px !important;
    flex-shrink: 0;
  }

  /* Modals */
  .modal.modal-lg, .modal.modal-xl {
    width: 92vw !important;
    max-width: 92vw !important;
  }

  /* Stats 2 cols in 769–1200 range */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ================================================================
   BREAKPOINT C — ≤ 480px  (small phone)
   ================================================================ */
@media (max-width: 480px) {
  /* Nav even more compact */
  .top-nav { padding: 0 8px !important; height: 52px !important; gap: 6px; }
  .main-content { height: calc(100vh - 52px) !important; height: calc(100dvh - 52px) !important; }
  .app-container { height: calc(100dvh - 52px) !important; }
  body.fullscreen-mode .app-container { padding-top: 52px !important; }
  .main-content.fullscreen { top: 52px !important; height: calc(100dvh - 52px) !important; }

  /* Sidebar drawer parte sotto navbar da 52px su telefoni piccoli */
  .quick-sidebar-menu,
  .quick-sidebar-menu.always-visible {
    top: 52px !important;
    height: calc(100dvh - 52px) !important;
  }

  /* Single-column everything */
  .stats-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .charts-grid { grid-template-columns: 1fr !important; }
  .dashboard-cards, .card-grid { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* Stat cards more compact */
  .stat-card { padding: 14px 12px !important; }
  .stat-icon { width: 40px !important; height: 40px !important; font-size: 1rem !important; }
  .stat-info h4 { font-size: 12px !important; }
  .stat-info .stat-value { font-size: 1.4rem !important; }

  /* Page padding minimal */
  .page-container,
  .content-area,
  .view-container { padding: 8px !important; }

  /* Page header stacked */
  .page-header { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .page-header h2 { font-size: 1.1rem !important; }
  .page-header .page-actions { width: 100%; }
  .page-header .page-actions .btn { width: 100%; justify-content: center; }

  /* Cards */
  .card { border-radius: 10px !important; }
  .card-header { padding: 12px 14px !important; }
  .card-body { padding: 12px 14px !important; }

  /* Modals — full screen bottom sheet */
  .modal,
  .modal-container,
  .modal.modal-lg,
  .modal.modal-xl {
    max-height: 96vh !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* Forms — full width, compact */
  .form-row { flex-direction: column !important; gap: 8px !important; }
  .form-group { width: 100% !important; }
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], textarea, select { min-height: 40px !important; font-size: 16px !important; padding: 8px 12px !important; }
  .btn { min-height: 40px !important; padding: 8px 14px !important; font-size: 13px !important; }
  .btn-sm { min-height: 32px !important; padding: 6px 10px !important; }

  /* Message bubbles wider */
  .wa-message-bubble,
  .message-bubble { max-width: 88% !important; }

  /* Chat input area */
  .message-input-area textarea,
  .wa-input-area textarea,
  .chat-input-wrapper textarea { min-height: 36px !important; }
  .whatsapp-input-bar { padding: 6px 8px !important; }

  /* Timeline compact */
  .timeline-item { padding-left: 28px !important; }
  .timeline-marker { width: 10px !important; height: 10px !important; left: 4px !important; }

  /* Avatars */
  .avatar-lg { width: 36px !important; height: 36px !important; font-size: 14px !important; }

  /* Buttons in card headers — icon only */
  .card-header .btn-sm .btn-text { display: none !important; }

  /* Hide desktop-secondary elements */
  .hide-480 { display: none !important; }
  .show-480 { display: block !important; }
  .show-480-flex { display: flex !important; }

  /* Notification badge */
  .notification-badge { min-width: 14px !important; height: 14px !important; font-size: 8px !important; }

  /* Email layout — minimal sidebar */
  .email-sidebar, .email-folders-panel { max-height: 140px !important; }

  /* Address book sidebar */
  .ab-sidebar, .contacts-sidebar { max-height: 140px !important; }

  /* Channel grid */
  #channels-grid > div { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ================================================================
   CHAT / WHATSAPP LAYOUT — full mobile panel navigation
   ================================================================ */
@media (max-width: 768px) {
  /* Contacts list + chat window stack: show one at a time */
  .whatsapp-layout,
  .wa-layout,
  [class*="whatsapp-layout"] {
    flex-direction: row !important;
    overflow: hidden;
    position: relative;
  }

  /* Contacts panel full width by default */
  .wa-contacts-panel,
  .whatsapp-layout .contacts-panel,
  .whatsapp-layout .left-panel,
  .whatsapp-sidebar {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute !important;
    z-index: 10;
    top: 0; left: 0; bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Chat window: always takes the full width on mobile */
  .wa-chat-panel,
  .whatsapp-layout .chat-panel,
  .whatsapp-layout .right-panel,
  .whatsapp-main {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    flex: 1 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* JS adds .slide-out to .whatsapp-sidebar when a chat is selected */
  .whatsapp-sidebar.slide-out {
    transform: translateX(-100%) !important;
    pointer-events: none;
    visibility: hidden; /* libera gli eventi touch al pannello sottostante */
  }
  /* Quando la sidebar è visibile, blocca lo scroll del pannello chat */
  .whatsapp-sidebar:not(.slide-out) {
    touch-action: pan-y;
  }

  /* Legacy .chat-open approach (retained for compatibility) */
  .whatsapp-layout.chat-open .wa-contacts-panel,
  .whatsapp-layout.chat-open .contacts-panel,
  .whatsapp-layout.chat-open .left-panel {
    transform: translateX(-100%);
  }
  .whatsapp-layout.chat-open .wa-chat-panel,
  .whatsapp-layout.chat-open .chat-panel,
  .whatsapp-layout.chat-open .right-panel {
    transform: translateX(0);
  }

  /* Back button in chat header — show on mobile */
  .mobile-back-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: none; border: none;
    cursor: pointer;
    color: var(--text-primary, #1f2937);
    font-size: 1.1rem;
    border-radius: 8px;
    flex-shrink: 0;
  }

  /* Chat header compact */
  .wa-chat-header,
  .chat-header {
    padding: 10px 12px !important;
    gap: 8px;
  }

  /* Hide detail/right-info panel on mobile */
  .wa-info-panel,
  .chat-info-panel,
  .contact-detail-panel {
    display: none !important;
  }

  /* Message bubbles */
  .wa-message-bubble,
  .message-bubble {
    max-width: 85% !important;
  }

  /* Message media (images/video) max width */
  .wa-message-bubble img,
  .message-bubble img {
    max-width: 100% !important;
    border-radius: 8px;
  }

  /* Message input bar */
  .whatsapp-input-bar,
  .chat-input-bar {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  /* Emoji / attachment buttons on mobile */
  .wa-emoji-btn,
  .wa-attach-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
  }

  /* Search bar in contacts panel */
  .wa-search-input,
  .contacts-search input {
    font-size: 16px !important;
  }

  /* Prevent tap highlight on interactive elements */
  .quick-sidebar-item,
  .chat-list-item,
  .wa-chat-item,
  .btn,
  button {
    -webkit-tap-highlight-color: transparent;
  }

  /* Improve touch targets: min 44px */
  .chat-list-item,
  .wa-chat-item {
    min-height: 64px;
  }

  /* Context menu: show above finger */
  .context-menu {
    max-height: 70vh !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ================================================================
   DOCUMENTS EDITOR — responsive panel
   ================================================================ */
@media (max-width: 768px) {
  /* Editor panel full-width on mobile */
  .doc-editor-panel {
    width: 100vw !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Header compact */
  .doc-editor-panel > div:first-child {
    padding: 8px 12px !important;
    gap: 6px !important;
  }

  /* Hide folder selector on very small screens — movable to a secondary row */
  .doc-editor-panel #doc-editor-folder {
    max-width: 120px;
    font-size: 0.72rem !important;
  }

  /* Table editor toolbar wrap */
  #tbl-add-row, #tbl-add-col {
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
  }

  /* Table horizontal scroll */
  #doc-table-editor {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ================================================================
   TASK / TODO DETAIL PANEL — mobile slide-in
   ================================================================ */
@media (max-width: 768px) {
  /* Task detail panel full screen — hidden off-screen by default */
  .task-detail-panel,
  .todo-detail-panel,
  #task-detail-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 9000;
    border-radius: 0 !important;
    border-left: none !important;
    box-shadow: none !important;
    /* Keep completely hidden until JS adds .show */
    display: none !important;
    right: auto !important;
  }
  /* Visible when .show is added by JS */
  .task-detail-panel.show,
  .todo-detail-panel.show,
  #task-detail-panel.show {
    display: flex !important;
    pointer-events: auto !important;
  }

  /* Todo layout — stack vertically */
  .todo-page {
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Todo sidebar — compact but readable mobile navigation */
  .todo-sidebar {
    width: 100% !important;
    height: auto !important;
    max-height: clamp(160px, 32vh, 280px);
    overflow-y: auto;
    transition: max-height 0.3s ease;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
    flex-shrink: 0 !important;
    min-width: 0 !important;
  }

  .todo-sidebar-resize,
  #todo-sidebar-resize {
    display: none !important;
  }

  .todo-nav {
    padding: 4px 8px 10px !important;
  }

  .todo-nav-item {
    padding: 9px 12px !important;
    margin-bottom: 2px;
    border-left: none !important;
    border-radius: 10px;
    font-size: 13px !important;
  }

  .todo-nav-item.active {
    border-left: none !important;
    box-shadow: inset 2px 0 0 var(--primary, #6366f1);
  }

  .todo-nav-divider {
    margin: 6px 8px !important;
  }

  .todo-nav-badge {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  /* Sidebar header: compact strip */
  .todo-sidebar-header {
    padding: 8px 12px !important;
    min-height: 44px;
    cursor: pointer;
    align-items: center !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
  }

  .todo-sidebar-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
    flex-shrink: 0;
  }

  .todo-sidebar.mobile-expanded {
    max-height: clamp(240px, 52vh, 420px) !important;
    overflow-y: auto;
  }

  /* Chevron indicator in sidebar header */
  .todo-sidebar-header::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    display: inline-block;
    margin-left: auto;
    font-size: 13px;
    color: var(--text-secondary, #9ca3af);
    transition: transform 0.3s;
  }
  .todo-sidebar.mobile-expanded .todo-sidebar-header::after {
    transform: rotate(180deg);
  }

  /* Todo main area takes remaining height, handles its own scroll */
  .todo-main {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Todo list: scrollable area */
  .todo-list {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 6px 10px !important;
  }

  /* Header: compact, wrap actions to second row */
  .todo-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    align-items: center !important;
  }

  .todo-header-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    flex-shrink: 0;
  }

  .todo-header-subtitle { display: none !important; }

  .todo-header-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-left: 0 !important;
  }

  .todo-search-wrap {
    flex: 1 !important;
    min-width: 120px !important;
  }

  /* Export button: hide on mobile (accessible via other means) */
  .todo-export-wrap { display: none !important; }

  /* Add button: compact */
  .todo-add-btn {
    flex-shrink: 0 !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
  }

  /* Toolbar/filters: horizontally scrollable */
  .todo-toolbar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 12px !important;
    flex-shrink: 0;
  }
  .todo-toolbar::-webkit-scrollbar { display: none; }

  /* Quick-add: compact */
  .todo-quick-add {
    padding: 8px 12px !important;
    flex-shrink: 0;
  }

  /* Task cards: compact */
  .todo-card {
    padding: 10px 12px !important;
  }

  /* Dashboard: all grid rows → 1 column on mobile */
  .todo-dashboard > div {
    grid-template-columns: 1fr !important;
  }

  /* Dashboard filter bar: stack vertically */
  .todo-dash-filters,
  .todo-dash-filters > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .todo-dash-filters input[type="date"],
  .todo-dash-filters select,
  .todo-dash-filters button {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Charts: reduce height on mobile */
  .todo-dashboard canvas {
    max-height: 180px !important;
  }

  /* Docs grid → 1 column */
  .docs-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Bulk actions bar sticky bottom */
  .doc-bulk-bar,
  .todo-bulk-bar {
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
    gap: 6px !important;
  }
}

/* ================================================================
   SETTINGS / FORMS PAGES
   ================================================================ */
@media (max-width: 768px) {
  /* Settings tabs → scrollable horizontal row */
  .settings-tabs,
  .nav-tabs {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    scrollbar-width: none;
  }
  .settings-tabs::-webkit-scrollbar,
  .nav-tabs::-webkit-scrollbar { display: none; }

  /* Two-column settings layout → single column */
  .settings-layout,
  .settings-grid {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }

  .settings-sidebar {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
  }

  /* Channel settings form fields */
  .channel-settings-form .form-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
}

/* ================================================================
   CAMPAIGNS / EMAIL TEMPLATES
   ================================================================ */
@media (max-width: 768px) {
  .campaigns-layout,
  .template-layout {
    flex-direction: column !important;
  }

  .campaigns-sidebar,
  .template-sidebar {
    width: 100% !important;
    max-height: 160px;
    overflow-y: auto;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
  }
}

/* ================================================================
   TABLES — always horizontally scrollable
   ================================================================ */
@media (max-width: 768px) {
  .table-container,
  .data-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }

  /* Ensure TH/TD don't wrap text making columns too wide */
  .data-table th,
  .data-table td {
    white-space: nowrap;
  }
}

/* ================================================================
   FLOATING ACTION BUTTONS (FAB) — bottom-right
   ================================================================ */
@media (max-width: 768px) {
  .fab-btn,
  .floating-action-btn {
    position: fixed !important;
    bottom: 72px;
    right: 16px;
    z-index: 800;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
  }
}

/* ================================================================
   NOTIFICATIONS / TOASTS
   ================================================================ */
@media (max-width: 768px) {
  .toast-container,
  .notifications-container {
    bottom: 16px !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    width: auto !important;
  }

  .toast {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ================================================================
   CONTEXT MENUS & DROPDOWNS — prevent overflow off screen
   ================================================================ */
@media (max-width: 768px) {
  .context-menu,
  .dropdown-menu {
    max-width: calc(100vw - 24px) !important;
    max-height: 60vh !important;
    overflow-y: auto;
  }
}

/* ================================================================
   DASHBOARD
   ================================================================ */
@media (max-width: 768px) {
  .dashboard-widget-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .dashboard-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .dashboard-header .header-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .dashboard-header .header-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ================================================================
   BREAKPOINT 600px — tablet piccolo / phone landscape
   ================================================================ */
@media (max-width: 600px) {
  /* Stats grid: 1 colonna su schermi ≤ 600px (troppo stretta a 2 col su ~360px) */
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  /* Griglia card generiche: 1 colonna */
  .cards-grid,
  .grid-2col,
  .grid-3col {
    grid-template-columns: 1fr !important;
  }

  /* Template / campaigns grid → 1 colonna */
  .templates-grid,
  .campaigns-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Addressbook grid → 1 colonna */
  .addressbooks-grid,
  .contacts-grid {
    grid-template-columns: 1fr !important;
  }

  /* Modal: dialog centrato (override bottom-sheet del breakpoint 768px) */
  .modal-overlay {
    align-items: center !important;
    padding: 16px !important;
  }

  .modal,
  .modal-container,
  .modal.modal-lg,
  .modal.modal-xl {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    max-height: 88vh !important;
  }

  /* Form: tutti i campi a larghezza piena */
  .form-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .form-group {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Tabelle: scroll orizzontale garantito */
  .table-container,
  .data-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ================================================================
   BREAKPOINT 480px — smartphone standard (iPhone 14, Galaxy S)
   ================================================================ */
@media (max-width: 480px) {
  /* Top nav ancora più compatta */
  .top-nav {
    padding: 0 8px !important;
    gap: 6px !important;
  }

  /* Stats: 1 colonna su schermi stretti */
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  /* stat-card orizzontale compatto */
  .stat-card {
    padding: 8px 10px !important;
    gap: 8px !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .stat-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
  }

  .stat-info .stat-value {
    font-size: 1.1rem !important;
  }

  .stat-info .stat-label {
    font-size: 0.65rem !important;
  }

  /* page-header: solo titolo + btn impilati */
  .page-header {
    padding: 8px 10px !important;
  }

  .page-header h1,
  .page-header h2 {
    font-size: 1rem !important;
  }

  /* Bottoni: testo nascosto, solo icona dove possibile */
  .btn-text-hide-480,
  .page-actions .btn span:not(.icon) {
    display: none !important;
  }

  /* Breadcrumb: meno elementi visibili */
  .breadcrumb {
    font-size: 0.72rem !important;
    gap: 4px !important;
    padding: 6px 10px !important;
  }

  /* Sidebar Todo/Automations header */
  .todo-sidebar {
    max-height: 60vh !important;
    overflow-y: auto !important;
  }

  .todo-sidebar.mobile-expanded {
    max-height: clamp(220px, 48vh, 360px) !important;
  }

  .auto-sidebar {
    max-height: 48px !important;
  }

  /* Modal: full-screen */
  .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-height: 100dvh !important;
  }

  .modal-header {
    padding: 10px 14px !important;
  }

  .modal-body {
    padding: 12px 14px !important;
  }

  /* Charts non crescono oltre il viewport */
  .chart-container,
  canvas {
    max-width: 100% !important;
  }

  /* Tabella: font ridotto */
  .data-table th,
  .data-table td {
    font-size: 0.75rem !important;
    padding: 6px 8px !important;
  }

  /* Nascondi colonne secondarie nelle tabelle */
  .col-hide-480 {
    display: none !important;
  }

  /* Dropdown menu: più largo */
  .dropdown-menu {
    min-width: 180px !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* ================================================================
   BREAKPOINT 320px — schermi molto piccoli / Galaxy A serie base
   ================================================================ */
@media (max-width: 320px) {
  /* Top nav minimale */
  .top-nav {
    padding: 0 6px !important;
    height: 48px !important;
    gap: 4px !important;
  }

  .main-content {
    height: calc(100vh - 48px) !important;
    height: calc(100dvh - 48px) !important;
  }

  /* Drawer allineato alla navbar a 48px */
  #quick-sidebar-overlay { top: 48px !important; }
  .quick-sidebar-menu,
  .quick-sidebar-menu.always-visible {
    top: 48px !important;
    height: calc(100dvh - 48px) !important;
  }
  .quick-sidebar-menu .quick-sidebar-header {
    height: 48px !important;
    min-height: 48px !important;
  }

  /* Bottoni super-compatti */
  .btn {
    padding: 5px 8px !important;
    font-size: 11px !important;
    min-height: 34px !important;
  }

  .icon-btn,
  .btn-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.8rem !important;
  }

  /* Font base ridotto */
  body {
    font-size: 13px !important;
  }

  /* stat-card ultra-compatto */
  .stat-card {
    padding: 6px 8px !important;
  }

  .stat-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.75rem !important;
  }

  .stat-info .stat-value {
    font-size: 1rem !important;
  }

  /* Page padding minimo */
  .page-container,
  .content-area,
  .view-container {
    padding: 4px !important;
  }

  /* Modal full-screen con scrollbar */
  .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    height: 100dvh !important;
    overflow-y: auto !important;
  }

  /* Nascondi elementi decorativi non essenziali */
  .hide-320 { display: none !important; }
}

/* ================================================================
   VERY SMALL SCREENS (≤ 359px) — iPhone SE, compact Android
   ================================================================ */
@media (max-width: 359px) {
  .top-nav { height: 48px !important; padding: 0 6px !important; }
  .main-content { height: calc(100vh - 48px) !important; height: calc(100dvh - 48px) !important; }
  /* Drawer allineato alla navbar a 48px */
  #quick-sidebar-overlay { top: 48px !important; }
  .quick-sidebar-menu,
  .quick-sidebar-menu.always-visible {
    top: 48px !important;
    height: calc(100dvh - 48px) !important;
  }
  .quick-sidebar-menu .quick-sidebar-header {
    height: 48px !important;
    min-height: 48px !important;
  }

  .page-container,
  .content-area,
  .view-container { padding: 6px !important; }

  #mobile-menu-toggle { width: 30px !important; height: 30px !important; font-size: 0.95rem !important; }

  /* Tighter message bubbles */
  .wa-message-bubble,
  .message-bubble { max-width: 94% !important; }

  /* Smaller avatars */
  .avatar-lg { width: 30px !important; height: 30px !important; font-size: 13px !important; }

  /* Compact buttons */
  .btn { padding: 6px 10px !important; font-size: 12px !important; min-height: 36px !important; }

  /* Modals: full screen, no border radius */
  .modal { max-height: 100dvh !important; border-radius: 0 !important; }

  /* Compact chat input */
  .whatsapp-input-bar { padding: 4px 6px !important; }

  /* Stat cards ultra-compact */
  .stat-card { padding: 10px 10px !important; }
  .stat-icon { width: 34px !important; height: 34px !important; font-size: 0.85rem !important; }
}

/* ================================================================
   NUOVI FIX MOBILE — aggiunti
   ================================================================ */

/* ----------------------------------------------------------------
   15. CHAT HEADER — compatto su mobile
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .chat-header {
    padding: 8px 12px !important;
    min-height: 52px !important;
    gap: 8px !important;
  }

  .chat-header-info h3 {
    font-size: 0.88rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
  }

  .chat-subtitle {
    font-size: 0.68rem !important;
  }

  /* Nasconde i bottoni secondari (cerca, info) — tenuto solo l'essenziale */
  .chat-header-actions .btn-icon:not(:first-child):not(:last-child) {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .chat-header {
    padding: 6px 10px !important;
    min-height: 48px !important;
  }

  .chat-header-info h3 {
    font-size: 0.82rem !important;
    max-width: 120px;
  }

  /* Tieni solo l'ultimo bottone (menu/azioni) */
  .chat-header-actions .btn-icon:not(:last-child) {
    display: none !important;
  }
}

/* ----------------------------------------------------------------
   16. GLOBAL SEARCH — full-width su mobile
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .search-container,
  .nav-search,
  .global-search-wrapper {
    flex: 1 !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .search-container input,
  .nav-search input,
  .global-search-wrapper input {
    width: 100% !important;
    font-size: 16px !important;
  }
}

/* ----------------------------------------------------------------
   17. AVATAR PROFILE DROPDOWN — non tracima su ≤480px
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Dropdown utente: ancorato a destra, non esce dallo schermo */
  .user-dropdown,
  .profile-dropdown,
  .avatar-dropdown {
    right: 0 !important;
    left: auto !important;
    width: calc(100vw - 16px) !important;
    max-width: 320px !important;
    top: 48px !important;
  }
}

/* ----------------------------------------------------------------
   18. WHATSAPP QR MODAL — adattato a schermi piccoli
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .wsp-qr-modal-overlay,
  .whatsapp-qr-overlay,
  .wa-connect-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .wsp-qr-modal-overlay > div,
  .whatsapp-qr-overlay > div,
  .wa-connect-modal > div,
  .wa-qr-dialog {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    padding: 20px 16px 32px !important;
  }

  /* QR code ridimensionato per schermi piccoli */
  .wa-qr-dialog canvas,
  .wa-qr-dialog img[alt*="QR"],
  #wsp-qr-canvas,
  #wa-qr-img {
    width: 200px !important;
    height: 200px !important;
    max-width: 80vw !important;
  }
}

@media (max-width: 480px) {
  .wsp-qr-modal-overlay > div,
  .whatsapp-qr-overlay > div,
  .wa-connect-modal > div,
  .wa-qr-dialog {
    padding: 16px 12px 28px !important;
  }

  #wsp-qr-canvas,
  #wa-qr-img {
    width: 180px !important;
    height: 180px !important;
  }
}

/* ================================================================
   SETTINGS VIEW — responsive completo
   ================================================================ */
@media (max-width: 768px) {
  .settings-container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Sidebar tabs → barra orizzontale scrollabile */
  .settings-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 8px !important;
    gap: 4px !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
  }
  .settings-tabs::-webkit-scrollbar { display: none; }

  .settings-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  .settings-content {
    flex: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 16px 12px !important;
    border-radius: 0 0 12px 12px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .settings-section {
    padding: 12px !important;
  }

  /* Form grids 2-col → 1-col */
  .settings-form-grid,
  .settings-row,
  .form-row {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* -------------------------------------------------------
     FIX CRITICO: Grid con inline style dentro settings
     Sovrascrive display:grid + grid-template-columns inline
     dentro ogni tab delle impostazioni con !important
     ------------------------------------------------------- */
  .settings-content [style*="grid-template-columns"],
  .settings-tab-content [style*="grid-template-columns"],
  #general-tab [style*="grid-template-columns"],
  #members-tab [style*="grid-template-columns"],
  #security-tab [style*="grid-template-columns"],
  #utilities-tab [style*="grid-template-columns"],
  #api-tab [style*="grid-template-columns"],
  #filters-tab [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Logo upload inline flex → colonna */
  .settings-content [style*="display:flex"][style*="align-items:center"],
  #general-tab [style*="display:flex"][style*="align-items:center"] {
    flex-wrap: wrap !important;
  }

  /* Input/select/textarea 100% dentro settings */
  .settings-content input,
  .settings-content select,
  .settings-content textarea,
  .settings-tab-content input,
  .settings-tab-content select,
  .settings-tab-content textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* previene zoom iOS */
  }

  /* Bottoni azione → larghezza piena */
  .settings-content .btn,
  .settings-tab-content .btn {
    min-width: 0 !important;
  }
}

/* ================================================================
   TEMPLATES VIEW — responsive completo
   ================================================================ */
@media (max-width: 768px) {
  .templates-container {
    padding: 12px !important;
  }

  .templates-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .templates-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .templates-search {
    flex: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .templates-filter {
    width: 100% !important;
  }

  .templates-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .template-card {
    margin-bottom: 0 !important;
  }

  .template-card-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .template-card-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

@media (max-width: 480px) {
  .template-card-actions .btn {
    flex: 1 !important;
    justify-content: center !important;
  }
}

/* ================================================================
   CHANNELS VIEW — header azioni responsive
   ================================================================ */
@media (max-width: 768px) {
  /* Barra header canali: bottoni affiancati → wrap */
  .d-flex.align-items-center[style*="justify-content:end"],
  .d-flex.align-items-center[style*="justify-content: end"] {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }

  /* Channel grid cards → 1 col su mobile */
  #channels-grid {
    grid-template-columns: 1fr !important;
  }

  /* Riduci padding header canali */
  [style*="padding: 20px; border-bottom"][style*="display: flex; align-items: center"] {
    padding: 10px 12px !important;
  }
}

@media (max-width: 480px) {
  /* Bottoni header canali full-width su schermini */
  .d-flex.align-items-center[style*="justify-content"] .btn {
    font-size: 12px !important;
    padding: 7px 10px !important;
  }

  /* Bottoni specifici canali: icona + testo abbreviato */
  #trash-channels-btn,
  #manage-perms-btn,
  #add-channel-btn {
    padding: 7px 10px !important;
    font-size: 12px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap;
  }
}

@media (max-width: 320px) {
  /* Su schermi 320px i bottoni azioni vanno su 2-3 righe */
  #trash-channels-btn,
  #manage-perms-btn,
  #add-channel-btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ================================================================
   ADDRESSBOOKS VIEW — responsive completo
   ================================================================ */
@media (max-width: 768px) {
  .addressbooks-view {
    height: auto !important;
    min-height: 100% !important;
  }

  .addressbooks-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  /* Fila search + btn → colonna */
  .addressbooks-header > div:last-child {
    flex-direction: column !important;
    width: 100% !important;
  }

  .addressbooks-header input[type="text"],
  .addressbooks-header input[type="search"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Grid rubriche: minmax(320px) rompe su mobile → 1 col */
  .addressbooks-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .addressbook-card {
    padding: 14px !important;
  }

  .addressbook-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ================================================================
   CALENDAR VIEW — btn-group responsive
   ================================================================ */
@media (max-width: 768px) {
  /* Header calendario: stack verticale e controlli fluidi */
  .page-header.mb-4 {
    align-items: stretch !important;
    gap: 10px !important;
  }

  .page-header.mb-4 > .d-flex.gap-2,
  .page-header > div.d-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .page-header.mb-4 .btn-group {
    flex-wrap: wrap !important;
    width: 100%;
    min-width: 0;
  }

  .page-header.mb-4 .btn-group .btn {
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  #calendar-toolbar .h4 {
    font-size: 1rem !important;
    line-height: 1.35;
  }

  #calendar-toolbar .text-muted {
    font-size: 0.78rem;
  }

  /* Day view: keep two columns but compact and readable */
  .google-calendar-day-view {
    grid-template-columns: 48px 1fr !important;
    border-radius: 10px;
  }

  .google-calendar-hour-label {
    min-height: 46px !important;
    font-size: 0.66rem !important;
    padding: 5px 6px 0 2px !important;
  }

  .google-calendar-hour-slot,
  .google-calendar-empty-slot {
    min-height: 46px !important;
    height: 46px !important;
  }

  .google-calendar-events-container {
    padding: 2px 4px !important;
  }

  .google-calendar-event {
    padding: 3px 6px !important;
    gap: 5px !important;
  }

  .google-calendar-event-time {
    min-width: 30px !important;
    font-size: 0.62rem !important;
  }

  .google-calendar-event-title {
    font-size: 0.74rem !important;
  }

  /* Week view: allow controlled horizontal scroll instead of broken compression */
  .calendar-week-grid {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .calendar-week-header,
  .calendar-week-row {
    min-width: 640px;
  }

  .calendar-week-time-header,
  .calendar-week-time-label {
    width: 44px;
    min-width: 44px;
    font-size: 0.68rem;
  }

  .calendar-week-cell {
    min-height: 72px;
    padding: 6px;
  }

  /* Month/year cards: avoid giant cell heights on mobile */
  .calendar-cell {
    min-height: 82px !important;
    padding: 0.35rem !important;
  }

  .calendar-cell.calendar-square {
    min-height: 88px !important;
    padding: 0.4rem !important;
  }

  .calendar-cell.calendar-weekday {
    font-size: 0.74rem !important;
    padding: 0.45rem 0.2rem !important;
  }

  .calendar-cell.calendar-square .calendar-date {
    font-size: 0.84rem !important;
    margin-bottom: 0.3rem !important;
  }

  .cal-pill {
    font-size: 0.62rem !important;
    padding: 2px 5px !important;
  }
}

@media (max-width: 480px) {
  /* Calendar header: titolo + controlli in colonna */
  .page-header.mb-4 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .page-header.mb-4 > div:last-child {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .page-header.mb-4 .btn-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  /* I 4 bottoni vista (Giorno/Settimana/Mese/Anno) su 2 righe */
  .page-header.mb-4 .btn-group .btn {
    flex: 1 !important;
    min-width: 0 !important;
    justify-content: center !important;
    font-size: 0.78rem !important;
    padding: 8px 6px !important;
  }

  #calendar-toolbar .h4 {
    font-size: 0.92rem !important;
  }

  /* Day view extra compact */
  .google-calendar-day-view {
    grid-template-columns: 42px 1fr !important;
  }

  .google-calendar-hour-label {
    font-size: 0.62rem !important;
  }

  .google-calendar-event-title {
    font-size: 0.7rem !important;
  }

  .google-calendar-event-badge {
    display: none;
  }

  /* Week view min width tuned for very small phones */
  .calendar-week-header,
  .calendar-week-row {
    min-width: 560px;
  }

  .calendar-week-day-number {
    font-size: 1rem;
  }

  /* Month grid compact */
  .calendar-row {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .calendar-cell {
    min-height: 74px !important;
    padding: 0.25rem !important;
  }

  .calendar-cell.calendar-square {
    min-height: 78px !important;
    padding: 0.3rem !important;
  }

  .cal-month-pills {
    gap: 3px;
  }

  .cal-pill {
    font-size: 0.58rem !important;
    padding: 1px 4px !important;
    gap: 3px;
  }
}

@media (max-width: 359px) {
  .calendar-week-header,
  .calendar-week-row {
    min-width: 520px;
  }

  .google-calendar-day-view {
    grid-template-columns: 38px 1fr !important;
  }
}

/* ================================================================
   DASHBOARD — widget row (inline grid) → 1 col su mobile
   ================================================================ */
@media (max-width: 768px) {
  .dashboard-widgets-row {
    grid-template-columns: 1fr !important;
  }

  /* Fallback per altri inline grid a 2 colonne nel dashboard */
  .main-content div[style*="grid-template-columns:1fr 1fr"],
  .main-content div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   AUTOMATIONS — sidebar toggle (JS aggiunge .expanded)
   ================================================================ */
@media (max-width: 768px) {
  .auto-page {
    flex-direction: column !important;
    height: auto !important;
  }

  .auto-sidebar {
    width: 100% !important;
    max-height: 56px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    flex-shrink: 0;
  }

  .auto-sidebar.expanded {
    max-height: 60vh;
    overflow-y: auto;
  }

  .auto-sidebar-header {
    cursor: pointer !important;
    user-select: none;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .auto-sidebar-header::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 13px;
    color: var(--text-secondary, #9ca3af);
    transition: transform 0.3s;
  }

  .auto-sidebar.expanded .auto-sidebar-header::after {
    transform: rotate(180deg);
  }

  .auto-main {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 12px !important;
  }
}

/* ----------------------------------------------------------------
   19. COMPOSE BAR — ottimizzato per touch
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Area input WhatsApp — padding laterale ridotto per guadagnare spazio */
  .whatsapp-input-bar,
  .wa-compose-bar,
  .compose-area {
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  /* Pulsanti icona nella barra (emoji, allegati) */
  .whatsapp-input-bar .btn-icon,
  .wa-compose-bar .btn-icon,
  .compose-icon-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
    flex-shrink: 0;
  }

  /* Pulsante invia sempre visibile e touch-friendly */
  .send-btn,
  #send-message-btn,
  .wa-send-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    flex-shrink: 0;
  }

  /* Input testo */
  #chat-input,
  .wa-message-input,
  .compose-textarea {
    font-size: 16px !important;
    min-height: 38px !important;
    max-height: 120px !important;
    padding: 8px 10px !important;
    border-radius: 20px !important;
  }
}

@media (max-width: 480px) {
  /* Su schermi piccoli nasconde i bottoni secondari del compose (+, emoji) */
  .whatsapp-input-bar .compose-extra-btn,
  .wa-compose-bar .compose-extra-btn {
    display: none !important;
  }

  /* Solo il bottone + principale rimane */
  .whatsapp-input-bar .compose-plus-btn,
  .wa-compose-bar .compose-plus-btn {
    display: inline-flex !important;
  }
}

/* ----------------------------------------------------------------
   20. PLATFORM ADMIN — griglia adattiva su mobile
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .pa-main-grid {
    grid-template-columns: 1fr !important;
  }

  .pa-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .pa-header {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .pa-header-actions {
    width: 100% !important;
  }

  .pa-header-actions button {
    flex: 1 !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  .pa-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   GLOBAL CONSISTENCY — regole trasversali a tutti i breakpoint
   Garantiscono che nessun elemento esca dal viewport a qualsiasi larghezza
   ================================================================ */

/* Regola universale anti-overflow su tutti i mobile */
@media (max-width: 768px) {

  /* 1. Tutti i flex container con bottoni devono wrappare */
  .page-actions,
  .header-actions,
  .view-actions,
  .toolbar-actions,
  .modal-footer,
  .card-header .actions,
  .d-flex.gap-2,
  .d-flex.gap-3 {
    flex-wrap: wrap !important;
  }

  /* 2. Elementi dentro main-content non escono dal viewport */
  .main-content *:not(.modal):not(.modal-overlay):not(.dropdown-menu):not(.context-menu):not(.quick-sidebar-menu) {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 3. Immagini sempre adattate */
  img {
    max-width: 100% !important;
    height: auto;
  }

  /* 4. Input e select a larghezza piena nei form */
  .modal-body input[type="text"],
  .modal-body input[type="email"],
  .modal-body input[type="password"],
  .modal-body input[type="number"],
  .modal-body select,
  .modal-body textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* 5. Pre/code non esplodono */
  pre, code {
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
  }

  /* 6. Badge numerici compatti */
  .badge, .count-badge, .notification-badge {
    min-width: 16px;
    height: 16px;
    font-size: 9px !important;
    padding: 0 4px !important;
  }
}

/* Modal bottom-sheet su schermi ≤600px */
@media (max-width: 600px) {
  .modal {
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
  }
}

/* ================================================================
   FIX: Chat/WhatsApp heights hardcoded to 60px in chat.css
   Top-nav is 56px on mobile (≤768px) and 52px on small phones (≤480px)
   ================================================================ */
@media (max-width: 768px) {
  /* chat.css hardcodes calc(100dvh - 60px) — override for 56px nav */
  .main-content:has(.whatsapp-layout) {
    height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
  }

  .chat-container {
    height: calc(100dvh - 56px) !important;
  }

  /* email.css: tg-panel-body uses height:100vh which overflows the
     fixed main-content.fullscreen container — use 100% instead */
  .tg-panel-body {
    height: 100% !important;
  }
}

@media (max-width: 480px) {
  /* Top-nav shrinks to 52px — fix fullscreen and chat layout heights */
  .main-content:has(.whatsapp-layout) {
    height: calc(100dvh - 52px) !important;
    max-height: calc(100dvh - 52px) !important;
  }

  .chat-container {
    height: calc(100dvh - 52px) !important;
  }

  /* Fullscreen mode (email/chat): adjust for 52px nav */
  body.fullscreen-mode .app-container {
    padding-top: 52px !important;
  }

  .main-content.fullscreen {
    top: 52px !important;
    height: calc(100dvh - 52px) !important;
  }

  .tg-panel-body {
    height: 100% !important;
  }
}

/* ================================================================
   FIX: .tg-viewer — email thread viewer width on mobile
   email.css sets width: calc(100% - 320px) which becomes tiny
   on mobile where the sidebar stacks above. Override to 100%.
   ================================================================ */
@media (max-width: 768px) {
  .tg-viewer {
    width: 100% !important;
    right: -100vw;
  }
  .tg-viewer.open {
    right: 0 !important;
  }
}

/* ================================================================
   FIX: iOS safe-area-inset-bottom
   On iPhones with notch/Dynamic Island (viewport-fit=cover),
   the home indicator overlaps the bottom edge. Add safe-area
   padding to elements anchored at the bottom of the screen.
   ================================================================ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .whatsapp-input-bar,
    .wa-compose-bar,
    .compose-area,
    .chat-input-bar {
      padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
    }

    .modal {
      padding-bottom: env(safe-area-inset-bottom);
    }

    .app-container {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}

/* ================================================================
   FIX: MODAL CUSTOM TODO — bottom-sheet su mobile
   .todo-create-modal non usa la classe .modal standard, quindi
   non riceve le regole bottom-sheet automatiche. Fix esplicito.
   ================================================================ */
@media (max-width: 768px) {
  .todo-create-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .todo-create-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92dvh !important;
    padding: 16px 16px 24px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* form-row nel todo-modal → colonna su mobile (todo.css ha specificità 0,0,2,0;
     questo selettore ha 0,0,2,0 ma caricato dopo → vince) */
  .todo-create-modal .form-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .todo-create-modal .form-row .form-group {
    flex: none !important;
    width: 100% !important;
  }

  /* modal-actions: pulsanti full-width impilati su schermi piccoli */
  .todo-create-modal .modal-actions {
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }

  .todo-create-modal .modal-cancel,
  .todo-create-modal .modal-submit {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 14px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Custom field modal (cf-modal overlay) — bottom sheet */
  #todo-cf-modal-overlay {
    align-items: flex-end !important;
  }

  #todo-cf-modal-overlay > div {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* Folder modal — bottom sheet */
  .todo-folder-modal-overlay {
    align-items: flex-end !important;
  }

  .todo-folder-modal-overlay > div {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 88dvh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* type grid nel cf-modal: 2 colonne invece di 4 su mobile */
  #cf-modal-type-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ================================================================
   FIX: SELECT2 su mobile — dropdown allineato e z-index corretto
   Select2 inietta il dropdown fuori dal DOM (in body) e può
   finire sotto altri elementi su mobile.
   ================================================================ */
@media (max-width: 768px) {
  .select2-dropdown {
    z-index: 10100 !important;
    max-width: calc(100vw - 16px) !important;
  }

  .select2-container--default .select2-results__options {
    max-height: 200px !important;
  }
}

/* ================================================================
   FIX: CHANNELS GRID — card canali troppo larghe su mobile
   ================================================================ */
@media (max-width: 600px) {
  .channels-grid,
  #channels-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }
}

/* ================================================================
   FIX: TODO VIEW — layout sidebar + main su mobile
   ================================================================ */
@media (max-width: 768px) {
  .todo-layout,
  .todo-page {
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .todo-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 56px;
    overflow: hidden;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
    flex-shrink: 0;
    transition: max-height 0.3s ease;
  }

  .todo-sidebar.mobile-expanded {
    max-height: 60vh !important;
    overflow-y: auto !important;
  }

  .todo-main {
    flex: 1 !important;
    overflow-y: auto !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  /* Intestazione sidebar cliccabile come toggle */
  .todo-sidebar-header {
    cursor: pointer;
    user-select: none;
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
  }
}

/* ================================================================
   FIX: AUTOMATIONS — form builder su mobile
   ================================================================ */
@media (max-width: 600px) {
  .auto-builder,
  .automation-builder {
    flex-direction: column !important;
  }

  .auto-step-card,
  .automation-step {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ================================================================
   FIX: EMAIL VIEW — composer e viewer su mobile
   ================================================================ */
@media (max-width: 768px) {
  /* Compose email toolbar a capo */
  .email-compose-toolbar,
  .compose-toolbar {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* Header email: nascondi colonne secondarie */
  .email-header-meta,
  .email-detail-meta {
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* Attachment list compatto */
  .email-attachments {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Reply area: bottoni stacked */
  .email-reply-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ================================================================
   FIX: ADDRESSBOOKS — tabella contatti su mobile
   ================================================================ */
@media (max-width: 600px) {
  .contacts-table-wrapper,
  .ab-contacts-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Nascondi colonne extra su mobile */
  .ab-col-secondary {
    display: none !important;
  }
}

/* ================================================================
   FIX: PAGE HEADER con filtri — su mobile wrappa su righe
   ================================================================ */
@media (max-width: 600px) {
  .filters-bar,
  .filter-row,
  .search-filter-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .filters-bar input,
  .filters-bar select,
  .filter-row input,
  .filter-row select {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ================================================================
   FIX: CARD HEADER ACTIONS — wrappa su mobile
   ================================================================ */
@media (max-width: 480px) {
  .card-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .card-header-actions,
  .card-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ================================================================
   MIGLIORIE RESPONSIVE — mfix10
   Sezioni: Settings, Teams, Chat Panel, Calendar, Campaigns,
            Dashboard, Permission Matrix, Email, Profile, Typography
   ================================================================ */

/* ---------------------------------------------------------------
   FIX UNIVERSALE: inline grid-template-columns → 1-col su mobile
   Copre TUTTI i div con grid a 2+ colonne definite inline style
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Qualsiasi div con grid 2-colonne inline → colonna singola */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* 3+ colonne → anche 1-col */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Tutti i div con display:grid inline → colonna */
  [style*="display:grid"],
  [style*="display: grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  /* Su schermi piccoli: anche grid a 2-col da repeat(auto-fit/fill) */
  [style*="grid-template-columns:repeat(auto"],
  [style*="grid-template-columns: repeat(auto"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------
   SETTINGS — fix grid override (advanced.css usa display:grid)
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  .settings-container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Logo upload: verticale su schermi piccoli */
  .logo-upload-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .logo-preview {
    width: 80px !important;
    height: 80px !important;
  }

  /* Form groups dentro settings: label sempre sopra */
  .settings-section .form-group,
  .settings-tab-content .form-group {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .settings-section .form-group label,
  .settings-tab-content .form-group label {
    margin-bottom: 4px !important;
    width: 100% !important;
  }
  .settings-section .form-group input,
  .settings-section .form-group select,
  .settings-section .form-group textarea,
  .settings-tab-content .form-group input,
  .settings-tab-content .form-group select,
  .settings-tab-content .form-group textarea {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Permission matrix: scroll orizzontale */
  .permission-matrix {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    display: block !important;
  }
  .permission-matrix table {
    min-width: 480px !important;
    width: max-content !important;
  }
}

/* ---------------------------------------------------------------
   TEAMS — card layout responsive
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  #teams-grid {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .team-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }
  /* Team tabs (members/workspaces/settings) → scrollable */
  .team-tabs-bar,
  [class*="team-tab"] {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
}
@media (max-width: 480px) {
  .team-card {
    padding: 16px !important;
  }
  /* Team member avatars: ridimensionati */
  .team-member-avatar,
  .member-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.75rem !important;
  }
}

/* ---------------------------------------------------------------
   CHAT PANEL (slide-in detail panel, non-WA)
   Su mobile diventa overlay full-width dal fondo
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  .chat-panel:not(.wa-chat-panel):not(.whatsapp-layout .chat-panel) {
    width: 100vw !important;
    max-width: 100vw !important;
    right: -100vw !important;
    border-radius: 20px 20px 0 0 !important;
    top: auto !important;
    bottom: 0 !important;
    height: 92dvh !important;
    position: fixed !important;
  }
  .chat-panel.open:not(.wa-chat-panel) {
    right: 0 !important;
  }
  /* Email panel 3-col → stack */
  .email-panel-3col {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .email-panel-conversations,
  .email-panel-thread,
  .email-panel-details {
    height: auto !important;
    max-height: 45dvh !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
  }
}

/* ---------------------------------------------------------------
   CAMPAIGNS — grid e stats responsive
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  .campaigns-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  /* Barra azioni campagna: wrap */
  .campaign-actions,
  .campaigns-header,
  .campaigns-filter-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Stats bar 2-col */
  .campaign-stats-grid,
  .campaign-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* Detail stats 3-col → 1-col */
  .campaign-detail-stats,
  [class*="campaign-"] .stats-row {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  .campaign-stats-grid,
  .campaign-stats {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------
   CALENDAR — celle e header su schermi piccoli
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Header controlli calendario */
  .calendar-header,
  .cal-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .calendar-header .view-switcher,
  .cal-view-switcher {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .calendar-header button,
  .cal-header button {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  /* Celle giorno: testo più piccolo */
  .calendar-day,
  .google-calendar-day-cell {
    font-size: 11px !important;
    padding: 2px !important;
  }
  .calendar-day-number,
  .cal-day-number {
    font-size: 12px !important;
    width: 22px !important;
    height: 22px !important;
  }
  /* Evento compatto */
  .calendar-event,
  .google-calendar-event {
    font-size: 10px !important;
    padding: 1px 3px !important;
    margin-bottom: 1px !important;
  }
}
@media (max-width: 480px) {
  /* 7-col grid: riduce ancora di più il font */
  .calendar-row {
    font-size: 10px !important;
  }
  .calendar-weekdays .calendar-day,
  .google-calendar-weekday {
    font-size: 9px !important;
  }
}

/* ---------------------------------------------------------------
   DASHBOARD — widget row e analytics
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  /* dashboard-widgets-row usa inline style grid → forziamo flex col */
  .dashboard-widgets-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .dashboard-widgets-row > * {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Analytics chart cards */
  .analytics-chart-card,
  .chart-card {
    padding: 12px !important;
  }
  .analytics-chart-card canvas,
  .chart-card canvas {
    max-height: 200px !important;
  }
  /* Filtri analytics: stack */
  .analytics-filters,
  .dashboard-filters {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .analytics-filters select,
  .analytics-filters input,
  .dashboard-filters select,
  .dashboard-filters input {
    width: 100% !important;
  }
}

/* ---------------------------------------------------------------
   EMAIL — compose dialog e thread viewer su mobile
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Compose dialog: pannello bottom-sheet */
  .email-compose-dialog,
  .compose-window {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 92dvh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 10050 !important;
  }
  /* To/CC/BCC header row: wrap */
  .compose-recipients,
  .compose-header-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  /* Pulsanti compose toolbar: icone più piccole */
  .compose-toolbar button,
  .email-toolbar-btn {
    padding: 6px 8px !important;
    font-size: 0.85rem !important;
  }
  /* Toolbar wrapping */
  .compose-toolbar,
  .email-compose-toolbar {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  /* Email thread list colonne */
  .email-thread-item,
  .email-list-item {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .email-thread-subject {
    font-size: 0.85rem !important;
  }
  .email-thread-preview {
    font-size: 0.78rem !important;
  }
}

/* ---------------------------------------------------------------
   NOTES — editor su mobile
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  .notes-layout,
  .notes-container {
    flex-direction: column !important;
  }
  .notes-sidebar,
  .notes-list-panel {
    width: 100% !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
  }
  .notes-editor,
  .note-content-panel {
    flex: 1 !important;
    min-height: 300px !important;
  }
}

/* ---------------------------------------------------------------
   AUTOMATIONS — node/flow builder su mobile
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  .auto-builder,
  .automation-canvas {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .auto-trigger-cards,
  .automation-trigger-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .auto-action-list {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------
   PROFILE / MEMBRI — avatar e form
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  .profile-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }
  .profile-avatar-section {
    margin: 0 auto !important;
  }
  .profile-form-grid,
  .member-form-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ---------------------------------------------------------------
   TYPOGRAPHY — titoli e badge su schermi piccoli
   --------------------------------------------------------------- */
@media (max-width: 480px) {
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }

  /* Page header subtitle */
  .page-header p.text-muted,
  .page-header .subtitle {
    font-size: 0.8rem !important;
  }

  /* Bottoni nella topnav: solo icona */
  .top-nav .btn span:not(.badge),
  .top-nav .btn .btn-label {
    display: none !important;
  }

  /* Input più grandi per touch */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important; /* previene zoom automatico iOS */
  }
}

/* ---------------------------------------------------------------
   TABLE OVERFLOW — tutte le tabelle dati con scroll orizzontale
   --------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Wrapper già presente: assicura scroll */
  .table-responsive,
  .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    display: block !important;
  }
  /* Tabelle senza wrapper: applica scroll direttamente */
  .data-table,
  .members-table,
  .contacts-table,
  .campaigns-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100% !important;
  }
  /* Celle tabella: padding ridotto */
  .data-table td,
  .data-table th,
  table td,
  table th {
    padding: 8px 10px !important;
    font-size: 0.82rem !important;
  }
}

/* ================================================================
   BUG FIX mfix12 — Tabelle overflow, trash grid, permissions,
   modal-body table, settings overflow:hidden che clippava le tabelle
   ================================================================ */
@media (max-width: 768px) {

  /* ---------------------------------------------------------------
     1. Settings: parent div con overflow:hidden clippava la tabella
        dei filtri → rendiamo scrollabile orizzontalmente
     --------------------------------------------------------------- */
  .settings-tab-content [style*="overflow:hidden"],
  .settings-content [style*="overflow:hidden"],
  #filters-tab [style*="overflow:hidden"] {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  /* Tabelle dentro settings: scroll orizzontale */
  .settings-tab-content .table,
  .settings-content .table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100% !important;
  }

  /* ---------------------------------------------------------------
     2. Permessi (permissions.js): tabella 7 colonne senza wrapper
     --------------------------------------------------------------- */
  #permissions-container .table,
  #permissions-container table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100% !important;
  }

  /* ---------------------------------------------------------------
     3. Modal-body: tabelle dentro i modal (newsletter history, ecc.)
     --------------------------------------------------------------- */
  .modal-body .table,
  .modal-body table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100% !important;
  }
  /* Ripristina task-meta (tabella per stampa, non interattiva) */
  .task-meta { display: table !important; white-space: normal; }

  /* ---------------------------------------------------------------
     4. Trash grid canali: card 33% → full width su mobile
     --------------------------------------------------------------- */
  #trash-grid [style*="min-width:280px"],
  #trash-grid [style*="min-width: 280px"],
  #trash-grid [style*="width:calc(33.333%"],
  #trash-grid [style*="width: calc(33.333%"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #trash-grid > div {
    flex-direction: column !important;
  }

  /* ---------------------------------------------------------------
     5. Variables table (channelSettings) e send history
     --------------------------------------------------------------- */
  .variables-list .table,
  .variable-category .table,
  #sendHistoryBody table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100% !important;
  }

  /* ---------------------------------------------------------------
     6. Qualsiasi div parent con overflow:hidden che wrappa una table
        dentro .main-content: previene clipping su mobile
     --------------------------------------------------------------- */
  .main-content [style*="overflow:hidden"] > table,
  .main-content [style*="overflow: hidden"] > table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ================================================================
   FIX: TUTTI I MODAL — bottom-sheet universale su mobile (mfix9)
   Copre i modal con CLASSI CSS (non inline-style).
   I modal inline-style sono gestiti dal MutationObserver in index.html
   ================================================================ */
@media (max-width: 768px) {
  /* Overlay con CLASSI: allineamento al bottom */
  .modal-overlay,
  .wsp-modal-overlay,
  .wsp-qr-modal-overlay,
  .whatsapp-qr-overlay,
  .auto-overlay,
  .email-health-modal-overlay,
  [class*="-modal-overlay"],
  [class*="-overlay"] {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  /* Inner modal box: bottom-sheet */
  .modal-overlay > .modal,
  .modal-overlay > .modal-content,
  .modal-overlay > div,
  .wsp-modal-overlay > div,
  .wsp-qr-modal-overlay > div,
  .whatsapp-qr-overlay > div,
  .auto-overlay > div,
  .email-health-modal-overlay > div,
  [class*="-modal-overlay"] > div,
  [class*="-modal-overlay"] > .modal,
  [class*="-modal-overlay"] > .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Modal standard di Utils.createModal */
  .modal.modal-sm,
  .modal.modal-md,
  .modal.modal-lg,
  .modal.modal-xl {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    margin: 0 !important;
  }

  /* Contenuto interno dei modal: no padding eccessivo */
  .modal .modal-body,
  .modal-overlay > .modal .modal-body {
    max-height: 60dvh !important;
    overflow-y: auto !important;
  }

  /* Grid 2-col → 1-col nei modal su mobile */
  .modal .form-grid-2,
  [class*="-modal"] .form-grid-2 {
    grid-template-columns: 1fr !important;
  }
}