/*
 * RESPONSIVE PIU' ORDINATO (29/09) — telefono e tablet stretto.
 * Stesso margine laterale (16px) in tutte le sezioni, intestazioni "titolo sopra, azioni sotto"
 * uguali, griglie compatte al posto delle schede a tutta altezza, niente testi tagliati.
 * Caricato DOPO channel-redesign.css (app.js lo sposta in fondo), per questo vince senza
 * dover alzare la specificita' ovunque; i !important servono solo contro gli stili in linea.
 */
@media (max-width: 768px) {
  :root { --m-margine: 16px; --m-spazio: 12px; --m-raggio: 14px; }

  /* ── barra in alto: il numerino delle notifiche intero (prima tagliato in una "I") ── */
  .top-nav #notifications-btn { position: relative !important; overflow: visible !important; }
  .top-nav #notifications-btn .notification-badge {
    position: absolute !important; top: -4px !important; right: -4px !important; left: auto !important;
    min-width: 18px !important; height: 18px !important; padding: 0 5px !important; box-sizing: border-box !important;
    font-size: 10.5px !important; font-weight: 700 !important; line-height: 1 !important;
    border-radius: 9px !important; border: 2px solid #fff !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transform: none !important; overflow: visible !important;
    background: #ef4444 !important; color: #fff !important;
  }
  .top-nav #notifications-btn .notification-badge:empty { display: none !important; }

  /* intestazioni generiche delle sezioni (Team e altre, stili in linea): stesso margine di 16px */
  #main-content [style*="padding: 20px; border-bottom"][style*="display: flex; align-items: center"] { padding: 12px var(--m-margine) !important; }

  /* ── Dashboard ── */
  .dashboard-redesign { padding-left: var(--m-margine) !important; padding-right: var(--m-margine) !important; }
  .dashboard-redesign__header { gap: var(--m-spazio) !important; }
  .dashboard-redesign__actions { display: flex !important; gap: 8px !important; width: 100% !important; }
  .dashboard-redesign__date { flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 12.5px !important; }
  .dashboard-redesign__refresh { flex: 0 0 auto !important; width: auto !important; padding: 0 14px !important; align-self: stretch !important; height: auto !important; min-height: 40px !important; }
  /* quattro contatori in 2x2 invece di uno per riga */
  .dashboard-redesign__metrics { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .dashboard-redesign__metric { flex-direction: column !important; align-items: flex-start !important; padding: 14px !important; gap: 10px !important; min-height: 0 !important; margin: 0 !important; }
  .dashboard-redesign__metric svg { display: none !important; }
  .dashboard-redesign__panels { gap: var(--m-spazio) !important; }
  /* "Ultimi messaggi ricevuti": titolo sopra, tendina e "Vedi tutti" sotto (prima si sovrapponevano) */
  .dashboard-redesign__panel-header { flex-wrap: wrap !important; gap: 8px !important; row-gap: 10px !important; height: auto !important; }
  .dashboard-redesign__panel-header > :first-child { flex: 1 1 100% !important; min-width: 0 !important; }
  .dashboard-redesign__chart-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; }

  /* ── Canali ── */
  #channels-grid { padding-left: var(--m-margine) !important; padding-right: var(--m-margine) !important; gap: var(--m-spazio) !important; }

  /* ── Rubriche: titolo, poi ricerca e "Nuova rubrica" sulla stessa riga ── */
  #main-content .addressbooks-header { padding: 14px var(--m-margine) !important; text-align: left !important; }
  .addressbooks-header > div:nth-child(2) { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: stretch !important; gap: 8px !important; margin-top: 10px !important; }
  .addressbooks-header > div:nth-child(2) > div { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; }
  .addressbooks-header #create-addressbook-btn { flex: 0 0 auto !important; white-space: nowrap !important; margin: 0 !important; }
  #addressbooks-content { padding: 0 !important; }
  #main-content .addressbooks-grid { padding: var(--m-spazio) var(--m-margine) !important; gap: var(--m-spazio) !important; }
  .addressbook-card { margin: 0 !important; }

  /* ── Etichette: schede con margine e senza i vuoti enormi fra l'una e l'altra ── */
  #main-content .page-header { padding-left: var(--m-margine) !important; padding-right: var(--m-margine) !important; }
  #labels-grid { padding: 0 var(--m-margine) var(--m-margine) !important; gap: var(--m-spazio) !important; }
  #labels-grid .label-card { margin: 0 !important; padding: 16px !important; border-radius: var(--m-raggio) !important; }

  /* ── Automazioni / Attivita': la barra "sezioni" e' un menu, non un secondo titolo ── */
  .auto-sidebar-header, .todo-sidebar-header { min-height: 44px !important; padding-left: var(--m-margine) !important; background: #f8f9fc !important; border-bottom: 1px solid #eef0f5 !important; }
  .auto-sidebar-header span, .todo-sidebar-header span { font-size: 13.5px !important; font-weight: 600 !important; color: #4b5563 !important; }
  .auto-sidebar-header .auto-sidebar-icon, .todo-sidebar-header .todo-sidebar-icon { width: 26px !important; height: 26px !important; font-size: 12px !important; }
  .auto-main { padding-left: var(--m-margine) !important; padding-right: var(--m-margine) !important; }
  .auto-header { padding-left: 0 !important; padding-right: 0 !important; }

  /* ── Attivita' ── */
  .todo-header { padding: 10px var(--m-margine) !important; }
  .todo-search-wrap { position: relative !important; }
  .todo-search-wrap > i { position: absolute !important; left: 12px !important; top: 50% !important; transform: translateY(-50%) !important; pointer-events: none !important; }
  .todo-search-wrap .todo-search-input { padding-left: 36px !important; }
  .todo-list { padding-left: 10px !important; padding-right: 10px !important; }
  /* filtri: date sulla stessa riga, utente e stato affiancati, "Applica" sotto */
  .todo-dash-filters { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 12px !important; }
  .todo-dash-filters > div:first-child { grid-column: 1 / -1 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important; }
  .todo-dash-filters > div:first-child > input { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; }
  .todo-dash-filters > div:first-child > i, .todo-dash-filters > div:first-child > span { flex: 0 0 auto !important; width: auto !important; }
  .todo-dash-filters .select2-container { width: 100% !important; min-width: 0 !important; }
  .todo-dash-filters #dash-apply-btn { grid-column: 1 / -1 !important; height: 36px !important; }
  /* contatori in 2 colonne invece di uno per schermata */
  #dash-content > div:first-child { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  #dash-content > div:first-child > div { padding: 12px !important; min-height: 0 !important; margin: 0 !important; }

  /* ── Impostazioni: schede in riga scorrevole con margine ── */
  .settings-tabs, .settings-nav { padding-left: var(--m-margine) !important; padding-right: var(--m-margine) !important; scroll-padding-left: var(--m-margine); }
}

@media (max-width: 768px) {
  [data-theme="dark"] .auto-sidebar-header, [data-theme="dark"] .todo-sidebar-header { background: #1a2230 !important; border-color: #2a3441 !important; }
  [data-theme="dark"] .auto-sidebar-header span, [data-theme="dark"] .todo-sidebar-header span { color: #d1d5db !important; }
  [data-theme="dark"] .top-nav #notifications-btn .notification-badge { border-color: #111827 !important; }
}

/* telefoni molto stretti (< 360px): contatori della dashboard di nuovo uno per riga */
@media (max-width: 359px) {
  .dashboard-redesign__metrics, .dashboard-redesign__chart-grid, #dash-content > div:first-child { grid-template-columns: 1fr !important; }
}

/* ═══ Barra laterale su telefono: la stessa barra scura del computer, come cassetto (29/09) ═══ */
.sidebar-chiudi-mobile { display: none; }
#sidebar-mobile-velo { display: none; }
@media (max-width: 768px) {
  /* la versione bianca ridotta non si apre piu' */
  #quick-sidebar-menu.mobile-open { display: none !important; }
  #quick-sidebar-overlay.active { display: none !important; }

  .app-container > aside.sidebar {
    position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: auto !important;
    width: min(300px, 86vw) !important; height: 100dvh !important; max-height: none !important;
    display: flex !important; flex-direction: column !important;
    transform: translateX(-105%) !important; transition: transform .25s ease, box-shadow .25s ease !important;
    z-index: 10070 !important; border: 0 !important; border-radius: 0 18px 18px 0 !important;
    background: #171a35 !important; overflow: hidden !important; visibility: hidden;
  }
  .app-container > aside.sidebar.show { transform: translateX(0) !important; visibility: visible; box-shadow: 18px 0 50px rgba(8, 8, 34, .45) !important; }
  #sidebar-mobile-velo { display: block; position: fixed; inset: 0; z-index: 10060; background: rgba(15, 23, 42, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  #sidebar-mobile-velo.attivo { opacity: 1; pointer-events: auto; }
  body.sidebar-mobile-aperta { overflow: hidden; }

  /* contenuto del cassetto: logo, workspace, voci leggibili, fondo con Upgrade e profilo */
  .app-container > aside.sidebar .sidebar-chiudi-mobile {
    display: flex; position: absolute; top: 14px; right: 12px; z-index: 2; width: 36px; height: 36px;
    align-items: center; justify-content: center; border: 0; border-radius: 10px;
    background: rgba(255, 255, 255, .08); color: #d7dbef; font-size: 15px; cursor: pointer;
  }
  .app-container > aside.sidebar .app-sidebar-brand { height: 64px !important; padding: 0 60px 0 18px !important; flex-shrink: 0; }
  .app-container > aside.sidebar .app-sidebar-brand .brand-logo-full { display: block !important; width: 128px !important; }
  .app-container > aside.sidebar .app-sidebar-brand .brand-logo-mini { display: none !important; }
  .app-container > aside.sidebar .app-sidebar-workspace { height: 44px !important; margin: 12px 14px 0 !important; padding: 0 12px !important; font-size: 14px !important; border-radius: 10px !important; flex-shrink: 0; }
  .app-container > aside.sidebar .app-sidebar-workspace span { display: block !important; }
  .app-container > aside.sidebar .sidebar-nav { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; padding: 16px 12px 12px !important; }
  .app-container > aside.sidebar .nav-item { min-height: 46px !important; padding: 11px 14px !important; margin: 0 0 4px !important; font-size: 15px !important; border-radius: 10px !important; gap: 14px !important; }
  .app-container > aside.sidebar .nav-item i { width: 20px !important; font-size: 16px !important; }
  .app-container > aside.sidebar .nav-item span { display: inline !important; }
  .app-container > aside.sidebar .app-sidebar-footer { flex-shrink: 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important; border-top: 1px solid rgba(255, 255, 255, .06); }
  .app-container > aside.sidebar .app-sidebar-upgrade { margin: 0 0 10px !important; }
  .app-container > aside.sidebar .app-sidebar-profile { width: 100% !important; min-height: 52px !important; border-radius: 12px !important; }
  .app-container > aside.sidebar .app-sidebar-profile span, .app-container > aside.sidebar .app-sidebar-profile strong, .app-container > aside.sidebar .app-sidebar-profile small { display: revert !important; }
}

/* ═══ Pannello notifiche su telefono: dentro lo schermo, a tutta larghezza (29/09) ═══ */
@media (max-width: 768px) {
  #notifications-dropdown.notifications-dropdown {
    position: fixed !important; left: 10px !important; right: 10px !important; top: 60px !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    max-height: calc(100dvh - 76px) !important; overflow-y: auto !important; overscroll-behavior: contain;
    transform: none !important; border-radius: 16px !important; z-index: 10050 !important;
    box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .3), 0 18px 50px rgba(17, 24, 39, .25) !important;
  }
}

/* cassetto: stessi colori e forme della barra del computer (quelle regole valgono solo >768px) */
@media (max-width: 768px) {
  .app-container > aside.sidebar { color: #f8f8ff !important; }
  .app-container > aside.sidebar .app-sidebar-brand { display: flex !important; align-items: center !important; border-bottom: 1px solid rgba(255,255,255,.055) !important; cursor: pointer; }
  .app-container > aside.sidebar .app-sidebar-brand img { height: auto !important; max-height: 52px !important; object-fit: contain; object-position: left center; }
  .app-container > aside.sidebar .app-sidebar-workspace {
    display: flex !important; align-items: center !important; gap: 10px !important;
    color: #cfd3e7 !important; border: 0 !important; background: #262b49 !important;
    font: inherit; font-weight: 600 !important; text-align: left !important; cursor: pointer; width: auto !important;
  }
  .app-container > aside.sidebar .app-sidebar-workspace > i:first-child { color: #bec4dc !important; }
  .app-container > aside.sidebar .app-sidebar-workspace span { min-width: 0; flex: 1 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-container > aside.sidebar .app-sidebar-workspace > i:last-child { color: #aeb4cc !important; font-size: 12px !important; }
  .app-container > aside.sidebar .nav-item { display: flex !important; align-items: center !important; border: 0 !important; color: #c3c7dd !important; font-weight: 600 !important; opacity: 1 !important; transform: none !important; background: transparent; text-decoration: none !important; }
  .app-container > aside.sidebar .nav-item i { color: #aeb4d3 !important; text-align: center; }
  .app-container > aside.sidebar .nav-item:active { background: rgba(255,255,255,.075) !important; }
  .app-container > aside.sidebar .nav-item.active { color: #fff !important; background: linear-gradient(105deg, #6d4ae4, #5632c7) !important; box-shadow: 0 4px 12px rgba(78, 47, 191, .32) !important; border-left: 0 !important; }
  .app-container > aside.sidebar .nav-item.active i { color: #fff !important; }
  .app-container > aside.sidebar .nav-item::before, .app-container > aside.sidebar .nav-item::after { display: none !important; }
  .app-container > aside.sidebar .app-sidebar-footer { margin-top: auto !important; }
  .app-container > aside.sidebar .app-sidebar-upgrade { position: relative; display: flex !important; flex-direction: column; gap: 5px; padding: 14px !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 12px !important; color: #fff !important; background: #23264a !important; }
  .app-container > aside.sidebar .app-sidebar-upgrade.hidden { display: none !important; }
  .app-container > aside.sidebar .app-sidebar-upgrade .upgrade-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #8b90ad; background: transparent; font-size: 12px; cursor: pointer; }
  .app-container > aside.sidebar .app-sidebar-upgrade .upgrade-head { display: flex; align-items: center; gap: 8px; }
  .app-container > aside.sidebar .app-sidebar-upgrade .upgrade-head i { color: #ffcc55; font-size: 15px; }
  .app-container > aside.sidebar .app-sidebar-upgrade .upgrade-head strong { font-size: 14px; }
  .app-container > aside.sidebar .app-sidebar-upgrade > small, .app-container > aside.sidebar .app-sidebar-profile small { color: #b9bed5 !important; font-size: 12px !important; line-height: 1.3; }
  .app-container > aside.sidebar .app-sidebar-upgrade .upgrade-cta { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 10px; color: #fff !important; background: linear-gradient(105deg, #6d4ae4, #5632c7); font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; }
  .app-container > aside.sidebar .app-sidebar-profile { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px !important; border: 0 !important; color: #fff !important; text-align: left; background: rgba(255,255,255,.04) !important; cursor: pointer; }
  .app-container > aside.sidebar .app-sidebar-profile > span:nth-child(2) { display: grid !important; min-width: 0; gap: 2px; }
  .app-container > aside.sidebar .app-sidebar-profile strong { overflow: hidden; font-size: 14px !important; text-overflow: ellipsis; white-space: nowrap; }
  .app-container > aside.sidebar .app-sidebar-profile > i { margin-left: auto; color: #aeb4d3 !important; font-size: 14px; }
  .app-container > aside.sidebar .app-sidebar-profile > span:first-child { width: 36px; height: 36px; display: grid !important; place-items: center; flex: 0 0 36px; border-radius: 50%; color: #26223f !important; background: #edf0fb !important; font-size: 13px; font-weight: 700; }
}

/* notifiche su telefono: linguette su una riga scorrevole, testata e fondo sempre visibili */
@media (max-width: 768px) {
  #notifications-dropdown .notifications-header { position: sticky; top: 0; z-index: 2; background: var(--bg-primary, #fff); padding-left: 16px !important; padding-right: 16px !important; }
  #notifications-dropdown .notifications-filter-tabs {
    flex-wrap: nowrap !important; overflow-x: auto !important; gap: 6px !important;
    padding: 8px 16px 10px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  #notifications-dropdown .notifications-filter-tabs::-webkit-scrollbar { display: none; }
  #notifications-dropdown .notif-filter-tab { flex: 0 0 auto !important; height: 32px !important; white-space: nowrap !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; gap: 5px; }
  #notifications-dropdown .notif-tab-suorigo { flex-basis: auto !important; width: auto !important; order: 0 !important; }
  #notifications-dropdown .notifications-piede { position: sticky; bottom: 0; z-index: 2; background: var(--bg-primary, #fff); }
}
@media (max-width: 768px) {
  [data-theme="dark"] #notifications-dropdown .notifications-header, [data-theme="dark"] #notifications-dropdown .notifications-piede { background: #1a2230; }
}

/* ═══ Dispositivi a tocco (30/09): niente pulsanti che compaiono solo "passandoci sopra".
   Su iPhone, se il tocco fa comparire qualcosa di nascosto, Safari usa quel primo tocco solo
   per mostrarlo e NON apre: in rubrica il contatto non si apriva. Qui restano sempre visibili. ═══ */
@media (hover: none) {
  .wa-contact-row .contact-actions,
  .todo-card-actions, .todo-ft-menu,
  .wa-sched-sidebar-cancel, .wa-thumb-remove,
  .wa-app .wa-media-dl, .wa-views-btn,
  #current-perms-list .perm-delete-btn { opacity: 1 !important; transition: none !important; }
  .wa-contact-row, .addressbook-card { -webkit-tap-highlight-color: rgba(99, 102, 241, .12); }
  .addressbook-card:hover { transform: none !important; }
}

/* ═══ Rubrica aperta su telefono (30/09): ═══ */
@media (max-width: 768px) {
  /* la testata "Rubriche / Cerca rubrica / Nuova rubrica" serve solo nell'elenco */
  .addressbooks-view:has(.ab-dettaglio) .addressbooks-header { display: none !important; }
  #addressbooks-content .ab-dettaglio { padding: 12px var(--m-margine) 28px; gap: 14px !important; }

  /* testata: freccia compatta, nome grande, Duplica/Elimina piccoli affiancati */
  .ab-dettaglio .ab-det-testa { gap: 10px !important; }
  .ab-dettaglio #ab-back-btn { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
  .ab-dettaglio .ab-det-nome h3 { font-size: 21px !important; line-height: 1.25; }
  .ab-dettaglio .ab-det-nome p { font-size: 13.5px; }
  .ab-dettaglio .ab-det-azioni { display: flex !important; gap: 8px !important; }
  .ab-dettaglio .ab-det-azioni .btn { height: 38px; font-size: 13.5px; border: 1px solid var(--border-color, #e5e7eb) !important; border-radius: 10px; background: var(--card-bg, #fff); }

  /* schede: pillole su una riga che scorre, a filo del margine */
  .ab-dettaglio .ab-det-schede {
    gap: 6px !important; padding: 2px var(--m-margine) 4px !important; margin: 0 calc(-1 * var(--m-margine)) !important;
    width: calc(100% + 2 * var(--m-margine)) !important; max-width: none !important; box-sizing: border-box; border-bottom: 0 !important;
    scroll-padding-left: var(--m-margine);
  }
  .ab-dettaglio .ab-det-schede .tab-btn {
    height: 36px; padding: 0 14px !important; border-radius: 18px !important; font-size: 13.5px !important;
    border: 1px solid var(--border-color, #e5e7eb) !important; background: var(--card-bg, #fff) !important;
    display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important;
  }
  .ab-dettaglio .ab-det-schede .tab-btn.active { background: var(--primary, #6366f1) !important; border-color: var(--primary, #6366f1) !important; color: #fff !important; }
  .ab-dettaglio .ab-det-schede .tab-btn::after { display: none !important; }

  /* ricerca a tutta larghezza; sotto etichette + azioni; "Nuovo contatto" pieno */
  .ab-dettaglio .ab-contatti-barra { display: grid !important; grid-template-columns: 1fr auto; gap: 8px !important; }
  .ab-dettaglio .ab-contatti-cerca { grid-column: 1 / -1; max-width: none !important; }
  .ab-dettaglio .ab-contatti-cerca input, .ab-dettaglio .ab-contatti-etichette { height: 42px; font-size: 15px; }
  .ab-dettaglio .ab-contatti-etichette { min-width: 0 !important; width: 100% !important; }
  .ab-dettaglio #contacts-bulk-actions-btn { height: 42px; padding: 0 12px; white-space: nowrap; font-size: 13.5px; }
  .ab-dettaglio #add-contact-btn { grid-column: 1 / -1; height: 44px; justify-content: center; }

  /* righe dei contatti: il nome ha lo spazio, tipo sotto forma di pallino piccolo */
  .ab-dettaglio .wa-contact-row { padding: 10px 12px !important; gap: 10px !important; min-height: 64px; }
  .ab-dettaglio .wa-contact-avatar, .ab-dettaglio .wa-contact-avatar img { width: 42px !important; height: 42px !important; }
  .ab-dettaglio .wa-contact-info { flex: 1 1 auto; min-width: 0; }
  .ab-dettaglio .wa-contact-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
  .ab-dettaglio .wa-contact-type { flex: 0 0 auto; font-size: 10.5px !important; padding: 2px 7px !important; }
  .ab-dettaglio .contact-checkbox { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; }
  .ab-dettaglio .contact-actions { flex: 0 0 auto; }
  .ab-dettaglio .contact-actions .btn { width: 36px; height: 36px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }

  /* numeri di pagina: su due righe ordinate invece che sparpagliati */
  .ab-dettaglio #contacts-pagination { justify-content: center !important; text-align: center; padding: 12px !important; }
  .ab-dettaglio #contacts-pagination > * { flex: 1 1 100%; justify-content: center; }
}
/* telefoni stretti: toccare la riga apre gia' il contatto, quindi la matita non serve e il nome respira */
@media (max-width: 480px) {
  .ab-dettaglio .contact-actions .btn[title="Modifica"] { display: none !important; }
  .ab-dettaglio .wa-contact-type { display: none !important; }
}

/* ═══ Rubrica aperta, altre schede su telefono (30/09) ═══ */
@media (max-width: 768px) {
  /* niente scatola dentro la scatola: le schede erano rientrate di ~45px per lato */
  .ab-dettaglio .ab-tab > .card { padding: 0 !important; margin: 0 !important; }
  .ab-dettaglio .ab-tab > #lists-main-container { padding: 12px !important; }
  .ab-dettaglio .ab-tab > .card > div { padding-left: 14px !important; padding-right: 14px !important; }

  /* testate con titolo + comandi: titolo sopra, comandi sotto a tutta larghezza */
  .ab-dettaglio #ab-tab-permissions .card > div:first-child > div,
  .ab-dettaglio #ab-tab-field-permissions .card > div:first-child,
  .ab-dettaglio #ab-tab-fields > div:first-child,
  .ab-dettaglio #ab-tab-permissions .card > div:nth-child(2) > div:first-child { flex-wrap: wrap !important; gap: 10px !important; }
  .ab-dettaglio #ab-visibility-select { width: 100% !important; }
  .ab-dettaglio #ab-tab-field-permissions .card > div:first-child > div:last-child { width: 100%; justify-content: flex-start !important; }
  .ab-dettaglio #ab-tab-fields > div:first-child > h4 { flex: 1 1 100%; }
  .ab-dettaglio #ab-tab-fields > div:first-child > div { flex: 1 1 100%; }
  .ab-dettaglio #ab-tab-fields > div:first-child > div .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; gap: 6px; padding: 0 10px; font-size: 13.5px; }
  .ab-dettaglio #ab-tab-lists > div:first-child { flex-wrap: wrap; gap: 8px !important; }
  .ab-dettaglio #ab-tab-lists > div:first-child .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; }

  /* Impostazioni campi: nome del campo su una riga, i due interruttori sotto (prima si sovrapponevano) */
  .ab-dettaglio .field-row, .ab-dettaglio .custom-field-row { flex-wrap: wrap !important; row-gap: 8px !important; padding: 12px 14px !important; }
  .ab-dettaglio .field-row > div:nth-child(2), .ab-dettaglio .custom-field-row > div:nth-child(2) { flex: 1 1 calc(100% - 40px) !important; }
  .ab-dettaglio #fields-container, .ab-dettaglio #custom-fields-container { padding: 0 !important; }
  .ab-dettaglio .field-row > label { flex: 1 1 0 !important; min-width: 0; justify-content: flex-start; gap: 8px !important; margin: 0 !important; padding-left: 26px; position: static !important; font-size: 13px !important; }
  .ab-dettaglio .field-row > label > span { white-space: nowrap; position: static !important; }
  .ab-dettaglio .field-row > label + label { padding-left: 8px; }

  /* Permessi campi: tabella larga che scorre di lato, colonna "Campo" ferma */
  .ab-dettaglio #ab-tab-field-permissions table { min-width: 760px; }
  .ab-dettaglio #ab-tab-field-permissions th:first-child,
  .ab-dettaglio #ab-tab-field-permissions td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card-bg, #fff); min-width: 130px; width: 130px !important; }
  .ab-dettaglio #ab-tab-field-permissions thead th:first-child { background: var(--bg-secondary, #f8f9fc); }

  /* Import / Export: le due schede una sotto l'altra, senza rientri doppi */
  .ab-dettaglio #ab-tab-import .card > div:nth-child(2) { grid-template-columns: 1fr !important; }
}

/* ═══ Tema chiaro/scuro su telefono ═══
   30/09: la luna della barra era nascosta (mobile.css tiene solo cerca, campanella e profilo).
   01/10: la luna torna nella barra in alto anche su telefono, accanto alla campanella. Per farla
   stare insieme al logo e ai due selettori, fino a 420px la barra si stringe un poco (spazi da 4px,
   logo un filo piu' basso, selettori da 36px). Sotto i 360px non c'e' posto: resta la voce
   "Modalità scura" nel menu del profilo. */
#user-dropdown .tema-solo-telefono { display: none; }
@media (max-width: 768px) {
  body #app .top-nav .nav-right > #dark-mode-toggle#dark-mode-toggle.icon-btn {
    display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 auto;
  }
}
@media (max-width: 420px) {
  body #app nav.top-nav.top-nav { padding: 0 8px !important; gap: 4px !important; }
  body #app .top-nav .nav-left, body #app .top-nav .nav-right { gap: 4px !important; }
  body #app .top-nav .selectors-container { gap: 4px !important; }
  body #app .top-nav .logo-img { height: 22px !important; min-width: 0 !important; }
  body #app .top-nav #workspace-dropdown-btn, body #app .top-nav #channel-dropdown-btn {
    width: 36px !important; min-width: 36px !important; max-width: 36px !important; padding: 6px !important;
  }
  body #app .top-nav .user-avatar { width: 36px !important; height: 36px !important; }
}
@media (max-width: 359px) {
  body #app .top-nav .nav-right > #dark-mode-toggle#dark-mode-toggle.icon-btn { display: none !important; }
  #user-dropdown .tema-solo-telefono { display: flex !important; align-items: center; gap: 8px; }
}
/* Barra in alto su tablet (01/10): i selettori Workspace/Canale crescevano col nome (nei Canali con
   una larghezza minima fissa, channel-redesign.css): tra 481 e 1100px si accavallavano tra loro
   (tablet in verticale) o finivano sopra la casella Cerca (iPad Air/Pro in verticale, 820-834px).
   Ora si stringono e il nome finisce con "…"; sopra i 768px la casella Cerca si accorcia e il
   percorso "› Dashboard" accanto al workspace si nasconde. */
@media (min-width: 481px) and (max-width: 768px) {
  body #app .top-nav #workspace-dropdown-btn, body #app .top-nav #channel-dropdown-btn {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
  }
}
@media (min-width: 769px) and (max-width: 1100px) {
  body #app .top-nav .global-search { width: 170px !important; }
  body #app .top-nav .top-nav-breadcrumb { display: none !important; }
  body #app .top-nav #workspace-dropdown-btn, body #app .top-nav #channel-dropdown-btn {
    min-width: 0 !important; max-width: 160px !important;
  }
}

/* ═══ Canali su telefono (01/10) ═══
   Logo: su computer vive nella barra laterale scura (channel-redesign.css lo toglie dalla barra in
   alto), su telefono quella barra e' un cassetto chiuso: nei Canali il logo spariva del tutto. */
@media (max-width: 768px) {
  body:is(.vista-email, .vista-channels, .vista-chat, .vista-internal-chat):not(#_) .top-nav .logo-img { display: block !important; }
}
/* Chat WhatsApp aperta su telefono: freccina del menu del messaggio DENTRO la nuvoletta (fuori
   finiva oltre il bordo dello schermo), niente foto accanto a ogni messaggio (il nome e' in
   testata e nella nuvoletta), testata con nome leggibile: Cerca, Note e Messaggi programmati
   stanno nel menu ⋮. */
@media (max-width: 640px) {
  .wa-app .wa-msg .wa-msg-menu-btn, .wa-app .wa-msg.in .wa-msg-menu-btn {
    top: 3px !important; right: 3px !important; left: auto !important; transform: none !important;
    width: 24px !important; height: 24px !important; font-size: 11px !important; border-radius: 50% !important;
    background: rgba(255,255,255,.82) !important; color: #54656f !important;
  }
  .wa-app .wa-msg-menu-btn::after { display: none !important; }
  /* la riga del mittente (nome + numero) lascia lo spazio alla freccina, come il testo */
  .wa-app .wa-msg .wa-group-author { padding-right: 26px; }
  .wa-app .wa-msg-avatar { display: none !important; }
  /* ...ma il pallino di chi ha scritto una NOTA resta (la scritta col nome non c'e' piu'), piu' piccolo */
  .wa-app .wa-msg-avatar.wa-nota-autore { display: block !important; flex-basis: 22px; width: 22px; height: 22px; margin-left: 4px; }
  .wa-app .wa-msg-avatar.wa-nota-autore .wa-msg-avatar-iniziali { font-size: .56rem; }
  /* senza avatar l'elenco delle attivita' parte dal bordo */
  .wa-msg-colonna { --att-av: 28px; --att-av-d: 22px; }
  .wa-msg-colonna.in > .wa-att-sotto { margin-left: 0; }
  .wa-msg-colonna.in .wa-att-item { align-items: flex-start; }
  #wa-header #wa-search-msg-btn, #wa-header #wa-notes-btn, #wa-header #wa-header-schedule-btn { display: none !important; }
  #wa-header .wa-header-left { min-width: 0; flex: 1 1 auto; }
  #wa-header .wa-header-info { min-width: 0; }
}
.wa-header-dropdown .wa-hdr-solo-telefono { display: none; }
@media (max-width: 640px) {
  .wa-header-dropdown .wa-hdr-solo-telefono { display: flex; align-items: center; gap: 10px; }
  .wa-header-dropdown .wa-hdr-solo-telefono i { width: 16px; color: #54656f; text-align: center; }
  [data-theme="dark"] .wa-app .wa-msg .wa-msg-menu-btn { background: rgba(17,27,33,.75) !important; color: #d9e1e5 !important; }
}

/* ═══ Email su telefono (01/10): la colonna delle conversazioni scorre dentro quando si sceglie un
   contatto (classe .open, email.js); freccia ← per tornare ai contatti ═══ */
.email-threads-header .email-mobile-back { display: none; }
@media (max-width: 768px) {
  .email-threads-header { display: grid !important; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
  .email-threads-header .email-mobile-back {
    display: inline-flex; grid-row: span 2; width: 36px; height: 36px; align-items: center; justify-content: center;
    border: 0; border-radius: 10px; background: transparent; color: #374151; font-size: 16px; cursor: pointer;
  }
  .email-threads-header .email-mobile-back:active { background: rgba(99, 102, 241, .1); }
  .email-threads-header h3, .email-threads-header p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 !important; }
  [data-theme="dark"] .email-threads-header .email-mobile-back { color: #e5e7eb; }
}