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