/* ================================================================
   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; }

/* ================================================================
   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);
  }

  /* 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;
  }

  /* 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: 14px 20px !important;
    gap: 14px !important;
    border-left: 3px solid transparent !important;
    position: static !important;
  }
  .quick-sidebar-menu.always-visible .quick-sidebar-item span {
    opacity: 1 !important;
    display: inline !important;
  }
  .quick-sidebar-menu.always-visible .quick-sidebar-item i { width: 26px; height: 26px; font-size: 1.1rem; }
  .quick-sidebar-menu.always-visible .quick-sidebar-header { justify-content: flex-start; padding: 0 16px; }
  .quick-sidebar-menu.always-visible .quick-sidebar-header .wd-sticky-nav-title { opacity: 1; display: block; }
  .quick-sidebar-menu.always-visible .quick-sidebar-menu-icon { margin-right: 0.5rem; margin-left: 0; }

  /* 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 when sidebar open */
  #quick-sidebar-overlay { display: none; }
  .quick-sidebar-overlay.active { display: block !important; }
}

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

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

  body.quick-sidebar-visible .top-nav {
    padding-left: 12px !important;
  }
  body.quick-sidebar-visible .top-nav .nav-left {
    margin-left: 0 !important;
    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: hidden;
  }

  /* Nasconde la global search (troppo larga — 320px) e usa solo icona search se necessario */
  .global-search {
    display: none !important;
  }

  /* nav-right: solo notifiche + avatar, no wrapping */
  .nav-right {
    flex-shrink: 0 !important;
    gap: 4px !important;
  }

  /* Mostra solo bell + user-menu + mobile-menu-toggle, nasconde il resto */
  .nav-right > *:not(#notifications-btn):not(.user-menu):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;
  }

  /* Testo workspace selectors: solo icona */
  .selectors-container .workspace-name-text,
  .selectors-container .channel-name-text {
    display: none !important;
  }

  /* Workspace selector compatto */
  #workspace-selector-btn,
  .workspace-selector-btn {
    padding: 6px 8px !important;
    font-size: 12px !important;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

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

  /* Selectors container non si espande oltre il necessario */
  .selectors-container {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow: hidden;
    max-width: 160px;
  }
}

/* ----------------------------------------------------------------
   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;
  }

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

  /* 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 */
  .notification-badge { min-width: 16px; height: 16px; font-size: 11px; }
}

@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; gap: 6px; }
  .main-content { height: calc(100vh - 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;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    position: absolute !important;
    z-index: 10;
    top: 0; left: 0; bottom: 0;
  }

  /* Chat window hidden off-screen to the right until .chat-open */
  .wa-chat-panel,
  .whatsapp-layout .chat-panel,
  .whatsapp-layout .right-panel,
  .whatsapp-main {
    width: 100vw !important;
    min-width: 100vw !important;
    flex: 1 !important;
  }

  /* JS adds .slide-out to .whatsapp-sidebar when a chat is selected */
  .whatsapp-sidebar.slide-out {
    transform: translateX(-100%) !important;
    pointer-events: none;
  }

  /* 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;
  }
}

/* ================================================================
   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 — collapsed strip, tappable header to expand */
  .todo-sidebar {
    width: 100% !important;
    height: auto !important;
    max-height: 48px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    flex-shrink: 0 !important;
    min-width: 0 !important;
  }

  /* Sidebar header: compact strip */
  .todo-sidebar-header {
    padding: 8px 16px !important;
    min-height: 48px;
    cursor: pointer;
    align-items: center !important;
  }

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

  .todo-sidebar.mobile-expanded {
    max-height: 65vh;
    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,
  .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;
  }

  /* 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; }

  .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) {
  .waha-qr-modal-overlay,
  .whatsapp-qr-overlay,
  .wa-connect-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .waha-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"],
  #waha-qr-canvas,
  #wa-qr-img {
    width: 200px !important;
    height: 200px !important;
    max-width: 80vw !important;
  }
}

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

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

/* ================================================================
   SETTINGS VIEW — responsive completo
   ================================================================ */
@media (max-width: 768px) {
  .settings-container {
    flex-direction: column !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;
    padding: 12px !important;
    border-radius: 0 0 12px 12px !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;
  }
}

/* ================================================================
   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 */
  .page-header.mb-4 > .d-flex.gap-2,
  .page-header > div.d-flex {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .btn-group {
    flex-wrap: wrap !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;
  }

  /* I 4 bottoni vista (Giorno/Settimana/Mese/Anno) su 2 righe */
  .btn-group .btn {
    flex: 1 !important;
    min-width: calc(50% - 4px) !important;
    justify-content: center !important;
  }

  /* Calendario celle compatte */
  #calendar-container table {
    font-size: 11px !important;
  }

  #calendar-container td,
  #calendar-container th {
    padding: 2px 1px !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;
  }
}

/* ================================================================
   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);
    }
  }
}