/* ========================================================================
   SYGMUND CRM — Design System v2 (audace, colorato, HubSpot-like)
   Estende il CSS inline esistente in base.html senza rompere nulla.
   ======================================================================== */

/* --- Palette estesa: aggiungiamo semantic colors + gradient ------------ */
:root {
  /* Colori semantici - vivaci ma coerenti con la palette Sygmund */
  --sg-success: #10B981;
  --sg-success-light: #D1FAE5;
  --sg-success-dark: #059669;

  --sg-info: #3B82F6;
  --sg-info-light: #DBEAFE;
  --sg-info-dark: #2563EB;

  --sg-danger: #EF4444;
  --sg-danger-light: #FEE2E2;
  --sg-danger-dark: #DC2626;

  --sg-warning: #F59327;
  --sg-warning-light: #FFF3E0;
  --sg-warning-dark: #D97706;

  --sg-pink: #EC4899;
  --sg-pink-light: #FCE7F3;

  --sg-teal: #14B8A6;
  --sg-teal-light: #CCFBF1;

  /* Gradienti hero */
  --sg-gradient-primary: linear-gradient(135deg, #2D1B69 0%, #6B5BA8 100%);
  --sg-gradient-warm: linear-gradient(135deg, #F59327 0%, #EC4899 100%);
  --sg-gradient-cool: linear-gradient(135deg, #6B5BA8 0%, #3B82F6 100%);
  --sg-gradient-success: linear-gradient(135deg, #10B981 0%, #14B8A6 100%);
  --sg-gradient-soft: linear-gradient(135deg, #FAF8F3 0%, #EFEAFF 100%);

  /* Shadow elevation più audace */
  --sg-shadow-xs: 0 1px 2px rgba(45, 27, 105, .05);
  --sg-shadow-sm: 0 2px 6px rgba(45, 27, 105, .06), 0 1px 2px rgba(45, 27, 105, .04);
  --sg-shadow-md: 0 4px 14px rgba(45, 27, 105, .08), 0 2px 4px rgba(45, 27, 105, .04);
  --sg-shadow-lg: 0 12px 32px rgba(45, 27, 105, .12), 0 4px 8px rgba(45, 27, 105, .06);
  --sg-shadow-xl: 0 24px 48px rgba(45, 27, 105, .16);
  --sg-shadow-glow: 0 0 0 4px rgba(245, 147, 39, .15);

  /* Spaziature 4px-base */
  --sg-space-1: .25rem;
  --sg-space-2: .5rem;
  --sg-space-3: .75rem;
  --sg-space-4: 1rem;
  --sg-space-6: 1.5rem;
  --sg-space-8: 2rem;
  --sg-space-12: 3rem;

  /* Border radius scale */
  --sg-radius-sm: 6px;
  --sg-radius: 10px;
  --sg-radius-md: 14px;
  --sg-radius-lg: 18px;
  --sg-radius-xl: 24px;
  --sg-radius-full: 9999px;

  /* Transitions */
  --sg-transition: all .18s cubic-bezier(.4, 0, .2, 1);
  --sg-transition-fast: all .12s ease;
  --sg-transition-slow: all .35s cubic-bezier(.4, 0, .2, 1);
}

/* --- Tipografia: Inter + scale curata ---------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  letter-spacing: -.005em;
}
h1 { font-weight: 800; letter-spacing: -.022em; }
h2 { font-weight: 700; letter-spacing: -.018em; }
h3, h4 { font-weight: 700; letter-spacing: -.014em; }
h5, h6 { font-weight: 600; letter-spacing: -.010em; }

/* --- Buttons: più audaci, hover lift, focus rings ---------------------- */
.btn {
  font-weight: 600;
  letter-spacing: -.005em;
  transition: var(--sg-transition);
  position: relative;
  border-radius: var(--sg-radius);
}
.btn-primary {
  background: var(--sg-gradient-primary);
  border: none;
  box-shadow: var(--sg-shadow-sm);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--sg-gradient-primary);
  transform: translateY(-1px);
  box-shadow: var(--sg-shadow-md);
}
.btn-warning, .btn-accent {
  background: var(--sg-gradient-warm);
  border: none;
  color: #fff;
  box-shadow: var(--sg-shadow-sm);
}
.btn-warning:hover, .btn-accent:hover {
  background: var(--sg-gradient-warm);
  transform: translateY(-1px);
  box-shadow: var(--sg-shadow-md);
  color: #fff;
}
.btn:active { transform: translateY(0) !important; }
.btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }
.btn:focus-visible { outline: none; box-shadow: var(--sg-shadow-glow); }

/* --- Cards: hover lift, gradient borders opzionali ---------------------- */
.card {
  border-radius: var(--sg-radius-md);
  transition: var(--sg-transition);
  box-shadow: var(--sg-shadow-xs);
}
.card.card-hover { cursor: pointer; }
.card.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--sg-shadow-md);
  border-color: transparent;
}
.card-elevated { box-shadow: var(--sg-shadow-md); border: none; }

/* --- KPI cards: big numbers con gradient ------------------------------ */
.kpi-card {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--sg-radius-lg);
  background: var(--sg-card);
  border: 1px solid var(--sg-border);
  overflow: hidden;
  transition: var(--sg-transition);
  box-shadow: var(--sg-shadow-xs);
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--sg-shadow-lg); }
.kpi-card .kpi-icon {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 44px; height: 44px;
  border-radius: var(--sg-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.kpi-card .kpi-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--sg-muted);
  margin-bottom: .35rem;
}
.kpi-card .kpi-value {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--sg-ink);
  line-height: 1.1;
}
.kpi-card .kpi-subtitle {
  font-size: .85rem;
  color: var(--sg-muted);
  margin-top: .25rem;
}
.kpi-card .kpi-delta {
  font-size: .8rem;
  font-weight: 600;
  margin-top: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.kpi-card .kpi-delta.up { color: var(--sg-success-dark); }
.kpi-card .kpi-delta.down { color: var(--sg-danger-dark); }

/* Variants colorati per KPI cards */
.kpi-card.kpi-primary .kpi-icon { background: var(--sg-primary-tint); color: var(--sg-primary); }
.kpi-card.kpi-success .kpi-icon { background: var(--sg-success-light); color: var(--sg-success-dark); }
.kpi-card.kpi-warning .kpi-icon { background: var(--sg-warning-light); color: var(--sg-warning-dark); }
.kpi-card.kpi-info .kpi-icon { background: var(--sg-info-light); color: var(--sg-info-dark); }
.kpi-card.kpi-danger .kpi-icon { background: var(--sg-danger-light); color: var(--sg-danger-dark); }
.kpi-card.kpi-pink .kpi-icon { background: var(--sg-pink-light); color: var(--sg-pink); }

/* --- Hero card: grande, gradient, illustrato -------------------------- */
.hero-card {
  background: var(--sg-gradient-primary);
  color: #fff;
  border-radius: var(--sg-radius-lg);
  padding: 2rem 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sg-shadow-md);
}
.hero-card::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(245, 147, 39, .25) 0%, transparent 70%);
  pointer-events: none;
}
.hero-card::after {
  content: '';
  position: absolute;
  bottom: -50%; left: -5%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(236, 72, 153, .18) 0%, transparent 70%);
  pointer-events: none;
}
.hero-card h1, .hero-card h2 { color: #fff; font-weight: 800; }
.hero-card p { color: rgba(255, 255, 255, .85); }
.hero-card .hero-actions { position: relative; z-index: 1; }

/* --- Avatar / iniziali colorate --------------------------------------- */
.avatar {
  width: 38px; height: 38px;
  border-radius: var(--sg-radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.avatar-sm { width: 28px; height: 28px; font-size: .75rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; }
.avatar-xl { width: 80px; height: 80px; font-size: 1.5rem; }

/* Color seeds per avatar (deterministico via class avatar-c1..avatar-c8) */
.avatar-c1 { background: linear-gradient(135deg, #6B5BA8, #2D1B69); }
.avatar-c2 { background: linear-gradient(135deg, #F59327, #D97706); }
.avatar-c3 { background: linear-gradient(135deg, #10B981, #059669); }
.avatar-c4 { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.avatar-c5 { background: linear-gradient(135deg, #EC4899, #BE185D); }
.avatar-c6 { background: linear-gradient(135deg, #14B8A6, #0F766E); }
.avatar-c7 { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.avatar-c8 { background: linear-gradient(135deg, #F43F5E, #BE123C); }

/* --- Badge: filled e outlined, accent colors -------------------------- */
.badge { font-weight: 600; font-size: .72rem; padding: .35em .75em; border-radius: var(--sg-radius-full); }
.badge-soft-success { background: var(--sg-success-light); color: var(--sg-success-dark); }
.badge-soft-info { background: var(--sg-info-light); color: var(--sg-info-dark); }
.badge-soft-warning { background: var(--sg-warning-light); color: var(--sg-warning-dark); }
.badge-soft-danger { background: var(--sg-danger-light); color: var(--sg-danger-dark); }
.badge-soft-primary { background: var(--sg-primary-tint); color: var(--sg-primary); }
.badge-soft-pink { background: var(--sg-pink-light); color: var(--sg-pink); }
.badge-soft-teal { background: var(--sg-teal-light); color: var(--sg-teal); }

/* --- Empty states ----------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--sg-muted);
}
.empty-state .empty-icon {
  font-size: 4rem;
  background: var(--sg-gradient-soft);
  width: 96px; height: 96px;
  border-radius: var(--sg-radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  color: var(--sg-primary-light);
}
.empty-state h3 { color: var(--sg-ink); font-size: 1.15rem; margin-bottom: .25rem; }
.empty-state p { font-size: .9rem; max-width: 400px; margin: 0 auto; }

/* --- Funnel mini-progress --------------------------------------------- */
.funnel-mini {
  display: flex;
  gap: 4px;
  align-items: stretch;
  height: 38px;
}
.funnel-step {
  flex: 1;
  border-radius: var(--sg-radius-sm);
  padding: .35rem .5rem;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  cursor: pointer;
  transition: var(--sg-transition);
}
.funnel-step:hover { transform: scaleY(1.05); box-shadow: var(--sg-shadow-md); }
.funnel-step .funnel-count { font-size: .95rem; font-weight: 800; line-height: 1; }
.funnel-step .funnel-label { font-size: .65rem; opacity: .9; text-transform: uppercase; letter-spacing: .3px; }
.funnel-step.fs-lead { background: var(--sg-muted); }
.funnel-step.fs-qualified { background: var(--sg-info); }
.funnel-step.fs-engaged { background: var(--sg-warning); }
.funnel-step.fs-meeting_scheduled { background: var(--sg-pink); }
.funnel-step.fs-proposal,
.funnel-step.fs-in_discussion { background: var(--sg-primary); }
.funnel-step.fs-negotiation { background: var(--sg-warning-dark); }
.funnel-step.fs-won { background: var(--sg-success); }
.funnel-step.fs-nurture { background: var(--sg-warning-dark); }
.funnel-step.fs-lost { background: var(--sg-danger); opacity: .6; }

/* --- Dashboard Today section card hover-effects ----------------------- */
.action-card {
  display: block;
  padding: 1.25rem;
  border-radius: var(--sg-radius-md);
  background: var(--sg-card);
  border: 1px solid var(--sg-border);
  text-decoration: none;
  color: var(--sg-ink);
  transition: var(--sg-transition);
}
.action-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sg-shadow-md);
  border-color: var(--sg-primary-light);
  color: var(--sg-ink);
}
.action-card .action-icon {
  width: 48px; height: 48px;
  border-radius: var(--sg-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: .85rem;
}
.action-card.ac-primary .action-icon { background: var(--sg-primary-tint); color: var(--sg-primary); }
.action-card.ac-warning .action-icon { background: var(--sg-warning-light); color: var(--sg-warning-dark); }
.action-card.ac-success .action-icon { background: var(--sg-success-light); color: var(--sg-success-dark); }
.action-card.ac-info .action-icon { background: var(--sg-info-light); color: var(--sg-info-dark); }
.action-card .action-title { font-weight: 700; font-size: 1rem; }
.action-card .action-desc { font-size: .82rem; color: var(--sg-muted); margin-top: .15rem; }

/* --- List rows con avatar e hover ------------------------------------- */
.list-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--sg-radius);
  transition: var(--sg-transition-fast);
  border: 1px solid transparent;
}
.list-row:hover {
  background: var(--sg-bg);
  border-color: var(--sg-border);
}
.list-row .list-avatar { flex-shrink: 0; }
.list-row .list-content { flex: 1; min-width: 0; }
.list-row .list-title { font-weight: 600; color: var(--sg-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .list-subtitle { font-size: .82rem; color: var(--sg-muted); }
.list-row .list-meta { color: var(--sg-muted); font-size: .8rem; flex-shrink: 0; }

/* --- Page header hero (per pagine dettaglio) -------------------------- */
.detail-hero {
  background: var(--sg-gradient-primary);
  color: #fff;
  border-radius: var(--sg-radius-lg);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.detail-hero::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(245, 147, 39, .25) 0%, transparent 60%);
}
.detail-hero h1, .detail-hero h2 { color: #fff; }
.detail-hero .subtitle { color: rgba(255, 255, 255, .8); }
.detail-hero .quick-actions { position: relative; z-index: 1; }

/* --- Tabs migliorati -------------------------------------------------- */
.nav-tabs {
  border: none;
  gap: .25rem;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--sg-border);
}
.nav-tabs .nav-link {
  border: none;
  color: var(--sg-muted);
  font-weight: 600;
  border-radius: var(--sg-radius) var(--sg-radius) 0 0;
  padding: .65rem 1.1rem;
  position: relative;
  transition: var(--sg-transition);
}
.nav-tabs .nav-link:hover { color: var(--sg-primary); background: var(--sg-primary-tint); }
.nav-tabs .nav-link.active {
  color: var(--sg-primary);
  background: transparent;
  font-weight: 700;
}
.nav-tabs .nav-link.active::after {
  content: '';
  position: absolute;
  left: 1rem; right: 1rem; bottom: -6px;
  height: 3px;
  background: var(--sg-gradient-warm);
  border-radius: 2px;
}

/* --- Pipeline Kanban v2: header colorati, card lift ------------------- */
.pipeline-col-header {
  padding: .75rem 1rem;
  border-radius: var(--sg-radius) var(--sg-radius) 0 0;
  font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .9rem;
  color: #fff;
}
.pipeline-col-header.col-lead { background: var(--sg-muted); }
.pipeline-col-header.col-qualified { background: var(--sg-info); }
.pipeline-col-header.col-engaged { background: var(--sg-warning); }
.pipeline-col-header.col-meeting_scheduled { background: var(--sg-pink); }
.pipeline-col-header.col-proposal,
.pipeline-col-header.col-in_discussion { background: var(--sg-primary); }
.pipeline-col-header.col-negotiation { background: var(--sg-warning-dark); }
.pipeline-col-header.col-won { background: var(--sg-success); }
.pipeline-col-header.col-lost { background: var(--sg-danger); }
.pipeline-col-header.col-nurture { background: var(--sg-warning-dark); }
.pipeline-col-header .col-count {
  background: rgba(255, 255, 255, .25);
  border-radius: var(--sg-radius-full);
  padding: 0 .55em;
  font-size: .78rem;
  font-weight: 700;
}

.pipeline-card {
  background: var(--sg-card);
  border-radius: var(--sg-radius);
  padding: .85rem;
  border: 1px solid var(--sg-border);
  box-shadow: var(--sg-shadow-xs);
  cursor: pointer;
  transition: var(--sg-transition);
  margin-bottom: .65rem;
}
.pipeline-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sg-shadow-md);
}
.pipeline-card.dragging {
  opacity: .4;
  transform: rotate(2deg) scale(.98);
}

/* --- Inbox: layout 3-pane con preview --------------------------------- */
.inbox-shell {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1rem;
  height: calc(100vh - 130px);
}
.inbox-list-pane {
  background: var(--sg-card);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.inbox-list-header {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--sg-border);
  font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
}
.inbox-message-row {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--sg-border);
  cursor: pointer;
  transition: var(--sg-transition-fast);
  display: flex; gap: .75rem; align-items: flex-start;
}
.inbox-message-row:hover { background: var(--sg-bg); }
.inbox-message-row.unread { background: linear-gradient(90deg, var(--sg-primary-tint) 0%, transparent 80%); }
.inbox-message-row.unread .msg-from, .inbox-message-row.unread .msg-subject { font-weight: 700; }
.inbox-message-row .msg-from { font-size: .9rem; }
.inbox-message-row .msg-subject { font-size: .9rem; color: var(--sg-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-message-row .msg-snippet { font-size: .82rem; color: var(--sg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-message-row .msg-date { font-size: .75rem; color: var(--sg-muted); flex-shrink: 0; }

/* --- Filter chips ----------------------------------------------------- */
.filter-chips {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-bottom: 1rem;
}
.filter-chip {
  padding: .35em .85em;
  border-radius: var(--sg-radius-full);
  background: var(--sg-card);
  border: 1px solid var(--sg-border);
  font-size: .82rem;
  font-weight: 600;
  color: var(--sg-ink);
  cursor: pointer;
  transition: var(--sg-transition-fast);
  display: inline-flex; align-items: center; gap: .35rem;
  text-decoration: none;
}
.filter-chip:hover { border-color: var(--sg-primary-light); color: var(--sg-primary); }
.filter-chip.active {
  background: var(--sg-primary);
  color: #fff;
  border-color: var(--sg-primary);
}
.filter-chip .chip-count {
  background: rgba(0, 0, 0, .08);
  border-radius: var(--sg-radius-full);
  padding: 0 .45em;
  font-size: .72rem;
}
.filter-chip.active .chip-count { background: rgba(255, 255, 255, .25); }

/* --- Quick action floating bar (bulk actions) ------------------------- */
.bulk-bar {
  position: sticky;
  bottom: 1rem;
  margin: 1rem auto;
  max-width: 720px;
  background: var(--sg-ink);
  color: #fff;
  border-radius: var(--sg-radius-full);
  padding: .65rem 1.25rem;
  box-shadow: var(--sg-shadow-lg);
  display: flex; align-items: center; gap: 1rem;
  z-index: 100;
}
.bulk-bar .bulk-count { font-weight: 700; }
.bulk-bar .btn { background: rgba(255, 255, 255, .15); border: none; color: #fff; }
.bulk-bar .btn:hover { background: rgba(255, 255, 255, .25); color: #fff; }

/* --- Animazioni ------------------------------------------------------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.fade-in-up { animation: fadeInUp .35s cubic-bezier(.4, 0, .2, 1); }
.pulse { animation: pulse 2s ease-in-out infinite; }

/* ========================================================================
   MOBILE / RESPONSIVE — design mobile-first per uso da smartphone
   ======================================================================== */

/* Tap target minimi: bottoni e link almeno 44px su touch */
@media (max-width: 991.98px) {
  .btn { min-height: 44px; padding: .5rem 1rem; }
  .btn-sm { min-height: 38px; padding: .45rem .85rem; font-size: .9rem; }
  .btn-lg { min-height: 52px; }

  /* Form inputs più alti per touch */
  .form-control, .form-select { min-height: 44px; font-size: 16px; /* evita zoom iOS */ }
  .form-control-sm, .form-select-sm { min-height: 38px; font-size: 15px; }
}

/* --- Sidebar drawer su mobile ------------------------------------------ */
@media (max-width: 991.98px) {
  /* Sidebar diventa offcanvas drawer */
  .sidebar-mobile-toggle {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: none;
    background: var(--sg-primary-tint);
    border-radius: var(--sg-radius);
    color: var(--sg-primary);
    margin-right: .5rem;
  }
  .sidebar-mobile-toggle:hover { background: var(--sg-primary); color: #fff; }

  /* Quando offcanvas attivo, sidebar drawer */
  aside.sidebar.offcanvas-lg {
    background: var(--sg-card);
    width: 280px !important;
    max-width: 85vw;
    box-shadow: var(--sg-shadow-xl);
  }
  aside.sidebar.offcanvas-lg.show { display: block; }

  /* Backdrop scuro quando drawer aperto */
  .offcanvas-backdrop.show { opacity: .55; }

  /* Layout: main full-width su mobile */
  main.col-md-10 { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 1rem !important; }
  aside.col-md-2 { display: none; }

  /* Navbar più compatta */
  .navbar-brand { font-size: 1rem; }
  .navbar-brand img { width: 32px; height: 32px; }
  .navbar-brand .brand-tagline { display: none; }

  /* Nascondi elementi navbar non essenziali su mobile */
  .navbar .btn-outline-secondary[onclick*="openSearch"],
  .navbar a[href*="tasks"]:not(.dropdown-item),
  .navbar a[href*="admin_refresh"]:not(.dropdown-item) { display: none !important; }
}

/* Da lg in su, sidebar normale (col-md-2 = 16.666%, non auto-width che sforerebbe la row) */
@media (min-width: 992px) {
  .sidebar-mobile-toggle { display: none !important; }
  aside.sidebar.offcanvas-lg {
    position: relative !important;
    transform: none !important;
    visibility: visible !important;
    width: 16.6666667% !important;  /* Bootstrap col-md-2 — era 'auto' e faceva wrap del main sotto */
    flex: 0 0 16.6666667% !important;
    max-width: 16.6666667% !important;
  }
}

/* --- Hero card: layout compatto anche su viewport stretto (zoom browser alto) ---- */
/* Senza questa rule, a Chrome zoom 125-150% la hero esplode in altezza e spinge i KPI sotto la viewport */
@media (max-width: 1199.98px) {
  .hero-card {
    padding: 1.25rem;
  }
  .hero-card h1 { font-size: 1.6rem; }
  .hero-card p { font-size: .95rem; }
}

/* --- Hero / KPI cards: layout mobile --------------------------------- */
@media (max-width: 768px) {
  .hero-card {
    padding: 1.25rem 1.25rem;
    border-radius: var(--sg-radius-md);
  }
  .hero-card h1 { font-size: 1.4rem; }
  .hero-card p { font-size: .92rem; }
  .hero-card .hero-actions { margin-top: 1rem; text-align: left !important; }
  .hero-card .hero-actions .btn { display: inline-block; margin-bottom: .5rem; }

  .kpi-card { padding: 1rem; }
  .kpi-card .kpi-value { font-size: 1.5rem; }
  .kpi-card .kpi-icon { width: 36px; height: 36px; font-size: 1.1rem; top: .75rem; right: .75rem; }
  .kpi-card .kpi-label { font-size: .65rem; }

  .detail-hero { padding: 1.25rem; border-radius: var(--sg-radius-md); }
  .detail-hero h1 { font-size: 1.3rem; }
  .detail-hero .avatar-xl { width: 56px !important; height: 56px !important; font-size: 1.2rem; }
  .detail-hero .quick-actions { margin-top: 1rem; text-align: left !important; }
  .detail-hero .quick-actions .btn { margin-bottom: .35rem; }

  .action-card { padding: 1rem; }
  .action-card .action-icon { width: 40px; height: 40px; font-size: 1.2rem; margin-bottom: .5rem; }

  .funnel-mini { flex-wrap: wrap; height: auto; }
  .funnel-step { flex: 1 1 calc(50% - 4px); min-width: 0; padding: .5rem; }

  .inbox-shell { grid-template-columns: 1fr; height: auto; gap: .5rem; }

  /* Page title su mobile: stack invece di space-between */
  .page-title { flex-direction: column; align-items: flex-start; gap: .75rem; }
  .page-title h1 { font-size: 1.3rem; }

  /* Filter chips su mobile: scroll orizzontale snap */
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .filter-chip { scroll-snap-align: start; flex-shrink: 0; }
}

/* --- Tabelle responsive: compatte su mobile, hide colonne secondarie -- */
@media (max-width: 768px) {
  /* Tabella più compatta */
  .table-responsive {
    border-radius: var(--sg-radius-md);
    background: var(--sg-card);
  }
  .table-responsive .table-hover {
    margin-bottom: 0;
    font-size: .85rem;
  }
  .table-responsive .table-hover thead th {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: .5rem .4rem;
    white-space: nowrap;
  }
  .table-responsive .table-hover tbody td {
    padding: .55rem .4rem;
    vertical-align: middle;
  }
  /* Avatar più piccolo nelle liste su mobile */
  .table-responsive .avatar-sm {
    width: 24px; height: 24px; font-size: .65rem;
  }
  /* Badge più piccoli */
  .table-responsive .badge,
  .table-responsive .badge-stage,
  .table-responsive .badge-soft-success,
  .table-responsive .badge-soft-info,
  .table-responsive .badge-soft-warning,
  .table-responsive .badge-soft-danger,
  .table-responsive .badge-soft-primary,
  .table-responsive .badge-ln {
    font-size: .65rem;
    padding: .2em .55em;
  }

  /* Hide colonne secondarie nelle liste — usa data-mobile-hide o classi specifiche */
  /* Lista CONTATTI: nascondi Email separata, Ruolo, LinkedIn separato, Email status, Cleanup, Ultima interazione */
  .table-responsive table.table-hover thead th:nth-child(1),  /* checkbox */
  .table-responsive table.table-hover tbody td:nth-child(1) {
    display: none;
  }

  /* Mobile-hide: classi opzionali da applicare a colonne secondarie */
  .mobile-hide { display: none !important; }
}

/* Tablet: mostra ancora più info */
@media (min-width: 576px) and (max-width: 991px) {
  .table-responsive .table-hover { font-size: .9rem; }
}

/* --- Lista contatti su mobile: nasconde colonne specifiche ----------- */
@media (max-width: 768px) {
  /* Nasconde: Email (3), Ruolo (5), LinkedIn (7), Email status (8), Cleanup (9), Ultima interazione (10) */
  .contacts-table thead th:nth-child(3),
  .contacts-table tbody td:nth-child(3),
  .contacts-table thead th:nth-child(5),
  .contacts-table tbody td:nth-child(5),
  .contacts-table thead th:nth-child(7),
  .contacts-table tbody td:nth-child(7),
  .contacts-table thead th:nth-child(8),
  .contacts-table tbody td:nth-child(8),
  .contacts-table thead th:nth-child(9),
  .contacts-table tbody td:nth-child(9),
  .contacts-table thead th:nth-child(10),
  .contacts-table tbody td:nth-child(10) { display: none; }

  /* Lista AZIENDE: nasconde Sito, Settore, Dimensione, Owner */
  .accounts-table thead th:nth-child(2),
  .accounts-table tbody td:nth-child(2),
  .accounts-table thead th:nth-child(3),
  .accounts-table tbody td:nth-child(3),
  .accounts-table thead th:nth-child(4),
  .accounts-table tbody td:nth-child(4),
  .accounts-table thead th:nth-child(7),
  .accounts-table tbody td:nth-child(7) { display: none; }

  /* Lista TASK: nasconde Tipo (2), Contatto (3), Priorità (5), Stato (6) */
  .tasks-table thead th:nth-child(2),
  .tasks-table tbody td:nth-child(2),
  .tasks-table thead th:nth-child(3),
  .tasks-table tbody td:nth-child(3),
  .tasks-table thead th:nth-child(5),
  .tasks-table tbody td:nth-child(5) { display: none; }
}

/* --- Pipeline kanban: scroll orizzontale ottimizzato ----------------- */
@media (max-width: 768px) {
  .pipeline-wrap {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .pipeline-col {
    flex: 0 0 85%;
    scroll-snap-align: start;
    max-width: 320px;
  }
}

/* --- Inbox mobile: layout adattato ---------------------------------- */
@media (max-width: 768px) {
  .inbox-message-row {
    padding: .75rem;
    gap: .5rem;
  }
  .inbox-message-row .msg-from { font-size: .85rem; }
  .inbox-message-row .msg-subject { font-size: .85rem; }
  .inbox-message-row .msg-snippet { font-size: .78rem; }
}

/* --- Form mobile: full width single column ---------------------------- */
@media (max-width: 768px) {
  /* Card body forms: ridotto padding */
  .card-body { padding: 1rem; }

  /* Form a 2-col: diventano 1-col forced */
  form .col-md-6, form .col-md-4, form .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* --- Dropdown menu touch-friendly ------------------------------------ */
@media (max-width: 991.98px) {
  .dropdown-menu .dropdown-item {
    padding: .65rem 1rem;
    font-size: .95rem;
  }
}

/* --- Bulk action bar mobile: full width sticky bottom --------------- */
@media (max-width: 768px) {
  .bulk-bar {
    border-radius: var(--sg-radius);
    margin: 0 -1rem;
    max-width: none;
    flex-wrap: wrap;
    padding: .5rem .75rem;
    gap: .35rem;
    font-size: .85rem;
  }
  .bulk-bar .btn { min-height: 36px; padding: .35rem .65rem; font-size: .85rem; }
}

/* --- Empty state ridotto su mobile ---------------------------------- */
@media (max-width: 576px) {
  .empty-state { padding: 2rem 1rem; }
  .empty-state .empty-icon { width: 72px; height: 72px; font-size: 2.5rem; }
  .empty-state h3 { font-size: 1rem; }
}

/* --- Login responsive ----------------------------------------------- */
@media (max-width: 576px) {
  .sg-login-hero { padding: 1rem; }
}

/* --- Navbar dropdown utente: full-width mobile ---------------------- */
@media (max-width: 576px) {
  .dropdown-menu-end { right: 0; left: auto; min-width: 240px; }
}

/* --- Tom Select su mobile ------------------------------------------- */
@media (max-width: 768px) {
  .ts-control { min-height: 44px !important; font-size: 16px !important; }
  .ts-dropdown { font-size: 15px; }
}

/* --- Page footer ---------------------------------------------------- */
@media (max-width: 768px) {
  .page-footer { padding: 1rem .5rem; font-size: .75rem; }
}

/* --- Badge erogatore servizio (Task #93) ---------------------------- */
.badge-provider {
  font-size: .68rem;
  font-weight: 700;
  padding: .25em .6em;
  border-radius: var(--sg-radius-full);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.badge-provider-LOV { background: #DDD6F0; color: #4527A0; }
.badge-provider-CISES { background: #CCFBF1; color: #0F766E; }

/* --- Filtro pipeline live (Task #95) ------------------------------- */
.pipeline-filter-bar {
  position: sticky; top: 0;
  z-index: 50;
  background: var(--sg-bg);
  padding: .65rem 0;
  margin-bottom: .5rem;
  border-bottom: 1px solid transparent;
}
.pipeline-filter-bar input {
  width: 100%;
  max-width: 480px;
  padding: .55rem 1rem;
  border-radius: var(--sg-radius-full);
  border: 2px solid var(--sg-border);
  font-size: .95rem;
  transition: var(--sg-transition);
}
.pipeline-filter-bar input:focus {
  outline: none;
  border-color: var(--sg-primary-light);
  box-shadow: 0 0 0 4px rgba(45, 27, 105, .1);
}
.pipeline-filter-bar .filter-count {
  margin-left: 1rem; color: var(--sg-muted); font-size: .85rem;
}
.pipeline-card.filtered-out {
  opacity: .12;
  pointer-events: none;
  filter: saturate(.3);
}
.pipeline-card.filtered-match {
  border-color: var(--sg-warning) !important;
  box-shadow: 0 0 0 2px rgba(245, 147, 39, .25), var(--sg-shadow-md) !important;
}

/* --- Inbox: link cliccabile su email mittente (Task #92) ------------ */
.email-link-add {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem;
  background: var(--sg-warning-light);
  color: var(--sg-warning-dark);
  padding: .15em .5em;
  border-radius: var(--sg-radius-full);
  cursor: pointer;
  margin-left: .5rem;
  text-decoration: none;
  transition: var(--sg-transition-fast);
}
.email-link-add:hover {
  background: var(--sg-warning);
  color: #fff;
}
.email-link-existing {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem;
  background: var(--sg-success-light);
  color: var(--sg-success-dark);
  padding: .15em .5em;
  border-radius: var(--sg-radius-full);
  text-decoration: none;
  margin-left: .5rem;
}
.email-link-existing:hover {
  background: var(--sg-success);
  color: #fff;
}

/* --- Email body sandbox (Task #94) ---------------------------------- */
.email-body-frame {
  width: 100%;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-radius);
  background: #fff;
  min-height: 200px;
  max-height: 70vh;
  overflow: auto;
  padding: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--sg-ink);
}
.email-body-frame img { max-width: 100%; height: auto; }
.email-body-frame table { max-width: 100%; }
.email-body-frame * { max-width: 100% !important; }
.email-body-frame pre { white-space: pre-wrap; word-wrap: break-word; }

/* ============================================================================
   FIX: forza il main a non centrare/giustificare il contenuto in fondo.
   Se per qualche ragione la row Bootstrap usa align-items=stretch o center,
   queste regole assicurano che il main scorra naturalmente dall'alto.
   ============================================================================ */
body > .container-fluid > .row {
  align-items: flex-start !important;  /* colonne in cima, non stretched */
}
main.col-md-10 {
  align-self: flex-start !important;
  min-height: auto !important;
}


/* =========================================================================
   RESPONSIVE GLOBAL OVERHAUL (Task #107-110)
   3 breakpoint: 380/480 phone-narrow, 481-991 tablet, 992+ desktop
   ========================================================================= */

/* ---- Page title: in colonna sotto 576px per non spezzare button group ---- */
@media (max-width: 575.98px) {
  .page-title {
    flex-direction: column;
    align-items: flex-start !important;
    gap: .65rem;
  }
  .page-title h1 { font-size: 1.4rem; }
  .page-title .btn-group, .page-title > .d-flex { width: 100%; flex-wrap: wrap; }
}

/* ---- Filter chips: scrollabili invece che andare a capo ---- */
@media (max-width: 767.98px) {
  .filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: .35rem;
    -webkit-overflow-scrolling: touch;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .filter-chips::-webkit-scrollbar { height: 4px; }
  .filter-chip { flex-shrink: 0; }
}

/* ---- LISTE: card-stack pieno per tabelle senza classe specifica ---- */
@media (max-width: 575.98px) {
  /* Tabella generica con .table-stack-mobile diventa card stack */
  .table-stack-mobile thead { display: none; }
  .table-stack-mobile tbody, .table-stack-mobile tr, .table-stack-mobile td { display: block; width: 100%; }
  .table-stack-mobile tr {
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius);
    margin-bottom: .65rem;
    padding: .5rem;
    background: var(--sg-card);
  }
  .table-stack-mobile td { border: none; padding: .35rem .5rem; }
  .table-stack-mobile td:first-child { font-weight: 600; font-size: 1rem; }
}

/* ---- KPI cards (Dashboard + Analytics): Bootstrap col-md-3 responsive ---- */
/* Su tablet portrait (768-991) le col-md-3 sono troppo strette (25% = ~170px),
   forziamo 2 colonne (50%) per dare respiro alle KPI */
@media (min-width: 768px) and (max-width: 991.98px) {
  .row.g-3 > .col-md-3 {
    flex: 0 0 auto;
    width: 50%;
  }
}
/* Mobile narrow: KPI card compatte */
@media (max-width: 575.98px) {
  .kpi-card {
    padding: .85rem !important;
    min-height: auto !important;
  }
  .kpi-card .kpi-value, .kpi-card .display-6, .kpi-card .display-5 {
    font-size: 1.4rem !important;
    line-height: 1.2;
  }
  .kpi-card .kpi-label, .kpi-card small {
    font-size: .72rem !important;
  }
  .kpi-card .kpi-icon { font-size: 1.4rem !important; }
}
/* Phone narrow: 2 KPI per riga (anziché 1) */
@media (min-width: 380px) and (max-width: 575.98px) {
  .row.g-3 > .col-md-3, .row.g-3 > .col-md-4, .row.g-3 > .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .row.g-3 { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
}
/* Phone XS: 1 KPI per riga */
@media (max-width: 379.98px) {
  .row.g-3 > [class*="col-"] { width: 100% !important; }
}

/* ---- Dashboard: card-body padding più compatto su mobile ---- */
@media (max-width: 575.98px) {
  .card-body { padding: .85rem; }
  .card-header { padding: .65rem .85rem; font-size: .9rem; }
}

/* ---- Analytics: chart container fluido ---- */
.chart-container, .analytics-chart {
  position: relative;
  width: 100%;
  height: 320px;
}
@media (max-width: 767.98px) {
  .chart-container, .analytics-chart { height: 240px; }
}
@media (max-width: 380px) {
  .chart-container, .analytics-chart { height: 200px; }
}

/* ---- Pagina DETTAGLIO (contatto, azienda, deal): header gradient compatto ---- */
@media (max-width: 767.98px) {
  .detail-hero {
    padding: 1rem !important;
    border-radius: var(--sg-radius) !important;
  }
  .detail-hero h1, .detail-hero h2 {
    font-size: 1.3rem; margin-bottom: .25rem;
  }
  .detail-hero .small, .detail-hero .text-muted { font-size: .8rem; }
  .detail-hero .btn { padding: .35rem .65rem; font-size: .85rem; }
  /* Tasti azione del hero in fila o stacked sotto ai 480 */
  .detail-hero .d-flex.gap-2 { flex-wrap: wrap; gap: .35rem !important; }
}
@media (max-width: 480px) {
  .detail-hero { padding: .85rem !important; }
  .detail-hero h1, .detail-hero h2 { font-size: 1.15rem; }
}

/* ---- Tab navigation orizzontale scrollabile su mobile ---- */
@media (max-width: 767.98px) {
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 2px solid var(--sg-border);
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link {
    flex-shrink: 0;
    white-space: nowrap;
    padding: .5rem .85rem;
    font-size: .85rem;
  }
}

/* ---- Sidebar profilo dettaglio: Bootstrap col-md-4/col-md-8 stack su tablet ---- */
/* Le pagine dettaglio usano Bootstrap col-md-4 (sidebar) + col-md-8 (main).
   Su tablet portrait (768-991) le sidebar diventano strette: meglio stack singola colonna */
@media (max-width: 991.98px) {
  .detail-hero ~ .row > .col-md-4,
  .detail-hero ~ .row > .col-md-8,
  .detail-hero ~ .row > .col-lg-4,
  .detail-hero ~ .row > .col-lg-8 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ---- INBOX message row: layout compatto su mobile ---- */
/* La inbox è già a colonna singola (.inbox-message-row per riga), serve solo */
/* assicurarsi che il subject e snippet non strappino il layout */
@media (max-width: 575.98px) {
  .inbox-message-row {
    flex-wrap: wrap;
    padding: .65rem !important;
    gap: .35rem !important;
  }
  .inbox-message-row .avatar { width: 32px; height: 32px; font-size: .9rem; }
  .inbox-message-row .msg-from { font-size: .85rem; font-weight: 600; }
  .inbox-message-row .msg-subject { font-size: .85rem; }
  .inbox-message-row .msg-snippet { font-size: .75rem; max-height: 2.4em; overflow: hidden; }
  .inbox-message-row .msg-date { font-size: .7rem; }
}

/* ---- Form / pulsanti azione: full-width su narrow ---- */
@media (max-width: 480px) {
  .form-actions {
    flex-direction: column;
    align-items: stretch !important;
    gap: .5rem;
  }
  .form-actions .btn { width: 100%; }
}

/* ---- Modal full-screen su mobile narrow ---- */
@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100vh;
  }
  .modal-content {
    border-radius: 0;
    min-height: 100vh;
  }
}

/* ---- Search bar globale (Cmd+K) ---- */
@media (max-width: 575.98px) {
  .global-search-modal .form-control { font-size: 16px; }  /* evita zoom iOS */
}

/* ---- Bottoni: hit-area touch friendly (44px Apple guideline) ---- */
@media (max-width: 767.98px) {
  .btn-sm { min-height: 38px; }
  .btn-icon, .btn-link { min-height: 38px; min-width: 38px; }
}

/* ---- Container: padding fluido ---- */
@media (max-width: 575.98px) {
  .container, .container-fluid { padding-left: .75rem; padding-right: .75rem; }
}

/* ---- Print: layout pulito senza sidebar ---- */
@media print {
  .sidebar, .navbar, .page-footer, .filter-chips, .btn { display: none !important; }
  .container, .main-content { padding: 0 !important; max-width: 100% !important; }
}

.email-body-frame a { color: var(--sg-primary); }