/* ════════════════════════════════════════════════════════════════════════
   BULU Agency — Unified Design System
   Glass Dark + Futuristic
   ════════════════════════════════════════════════════════════════════════ */

/* ── Fonts: Satoshi (UI) + JetBrains Mono (data) — Piano #17 restyle ──────── */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ── Piano #17: Industrial Cyberpunk / Modern Enterprise palette ────────── */
  --bg-0: #0f172a;   /* background (slate-900) */
  --bg-1: #1a2235;   /* elevated bg */
  --bg-2: #1e293b;   /* surface (slate-800) */
  --glass-bg: rgba(30, 41, 59, 0.55);
  --glass-bg-solid: rgba(30, 41, 59, 0.85);
  --glass-border: rgba(51, 65, 85, 0.7);        /* #334155 */
  --glass-border-hover: rgba(71, 85, 105, 0.9); /* #475569 */
  --glass-border-strong: #475569;
  --text: #f1f5f9;
  --text-2: #94a3b8;
  --text-3: #64748b;
  --text-4: #475569;
  --accent: #3b82f6;            /* primary blue */
  --accent-2: #60a5fa;
  --accent-soft: rgba(59, 130, 246, 0.15);
  --accent-glow: rgba(59, 130, 246, 0.35);
  --cyan: #38bdf8;
  --cyan-glow: rgba(56, 189, 248, 0.3);
  --green: #10b981;             /* success emerald */
  --green-glow: rgba(16, 185, 129, 0.25);
  --yellow: #f59e0b;            /* warning amber */
  --yellow-glow: rgba(245, 158, 11, 0.25);
  --red: #f43f5e;               /* error rose */
  --red-glow: rgba(244, 63, 94, 0.25);
  --orange: #fb923c;
  --c-bulu: #60a5fa;
  --c-pro: #10b981;
  --c-rist: #f59e0b;
  --grad-hero: linear-gradient(135deg, #3b82f6 0%, #38bdf8 100%);
  --grad-hero-soft: linear-gradient(135deg, rgba(59,130,246,0.18) 0%, rgba(56,189,248,0.10) 100%);
  --grad-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --grad-orange: linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);
  --grad-card: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(56, 189, 248, 0.02));
  --r-xs: 6px; --r-sm: 12px; --r-md: 12px; --r-lg: 20px; --r-xl: 24px;
  --sh-glow: 0 0 15px rgba(59, 130, 246, 0.5);
  --sh-card: 0 4px 24px rgba(0, 0, 0, 0.35);
  --sh-lg: 0 20px 50px rgba(0, 0, 0, 0.4);

  /* ── Phase 3 step 3.1: extended tokens ────────────────────────────────── */
  /* Typography scale (base 13px = 0.8125rem) */
  --fs-xs:    10px;    /* tiny labels, badges */
  --fs-sm:    11px;    /* helper text, secondary */
  --fs-base:  13px;    /* default body */
  --fs-md:    14px;    /* important body */
  --fs-lg:    16px;    /* h4, lead paragraph */
  --fs-xl:    20px;    /* h3 */
  --fs-2xl:   24px;    /* h2 */
  --fs-3xl:   30px;    /* h1 */
  --fs-4xl:   40px;    /* hero */

  /* Line heights */
  --lh-tight:  1.2;    /* headlines */
  --lh-snug:   1.4;    /* subheads */
  --lh-normal: 1.55;   /* body */
  --lh-loose:  1.8;    /* prose */

  /* Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-wider:  0.08em;
  --ls-caps:   0.12em;  /* per uppercase labels */

  /* Spacing scale (4-based, semi-fluid) */
  --s-0: 0;
  --s-1: 2px;
  --s-2: 4px;
  --s-3: 6px;
  --s-4: 8px;
  --s-5: 10px;
  --s-6: 12px;
  --s-7: 16px;
  --s-8: 20px;
  --s-9: 24px;
  --s-10: 32px;
  --s-11: 40px;
  --s-12: 48px;
  --s-13: 64px;
  --s-14: 80px;

  /* Z-index scale */
  --z-base:           1;
  --z-dropdown:       50;
  --z-sticky:         100;
  --z-fixed:          200;
  --z-modal-backdrop: 800;
  --z-modal:          900;
  --z-popover:        950;
  --z-toast:          1000;
  --z-tooltip:        1100;

  /* Transitions */
  --tr-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-normal:  250ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-slow:    400ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-bounce:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --tr-easeout: 250ms cubic-bezier(0, 0, 0.2, 1);

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  /* Focus ring (a11y, used in step 3.4) */
  --focus-ring:        0 0 0 3px var(--accent-soft);
  --focus-ring-strong: 0 0 0 3px var(--accent);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }

body {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px; line-height: 1.55;
  background: var(--bg-0); color: var(--text);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(59, 130, 246, 0.10), transparent 50%),
    radial-gradient(ellipse 60% 40% at 85% 100%, rgba(56, 189, 248, 0.06), transparent 50%),
    radial-gradient(ellipse 40% 30% at 10% 50%, rgba(16, 185, 129, 0.04), transparent 50%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: rgba(109, 94, 255, 0.4); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: rgba(139,146,180,0.15); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139,146,180,0.3); }

/* TOPBAR */
.topbar {
  position: sticky; top: 0; z-index: 100;
  height: 60px; padding: 0 28px;
  display: flex; align-items: center; gap: 4px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  background: rgba(10, 11, 20, 0.72);
  border-bottom: 1px solid var(--glass-border);
}
.topbar-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 15px; margin-right: 24px; color: var(--text);
}
.topbar-brand .logo-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--grad-hero); box-shadow: 0 0 16px var(--accent-glow);
}
.topbar-brand .brand-sep { color: var(--text-4); margin: 0 2px; font-weight: 400; }
.topbar-brand .brand-sub { color: var(--text-3); font-weight: 500; font-size: 13px; }
.topbar-nav { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.nav-link {
  color: var(--text-2); padding: 7px 14px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; transition: all 0.18s ease;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.nav-link:hover { background: rgba(139, 146, 180, 0.08); color: var(--text); }
.nav-link.active {
  background: var(--grad-hero-soft); color: var(--accent-2);
  box-shadow: inset 0 0 0 1px rgba(109, 94, 255, 0.3);
}
.topbar-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.topbar-right .live-dot {
  font-size: 11px; color: var(--text-3);
  display: flex; align-items: center; gap: 6px;
}
.topbar-right .live-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* ── Piano #17: status-pulse + progress-glow ──────────────────────────────── */
@keyframes status-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.9); } }
@keyframes progress-glow { 0%, 100% { box-shadow: 0 0 8px rgba(59, 130, 246, 0.4); } 50% { box-shadow: 0 0 18px rgba(59, 130, 246, 0.75); } }
.status-pulse { animation: status-pulse 2s infinite ease-in-out; }
.progress-glow { animation: progress-glow 3s infinite ease-in-out; }
.logout-btn {
  color: var(--text-3); font-size: 12px; padding: 6px 12px;
  border-radius: var(--r-sm); transition: color 0.2s, background 0.2s;
}
.logout-btn:hover { color: var(--red); background: rgba(255, 106, 138, 0.06); }

/* LAYOUT */
.container { max-width: 1280px; margin: 0 auto; padding: 32px 24px 64px; }
.container-full { max-width: 1440px; margin: 0 auto; padding: 32px 28px 64px; }
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px; gap: 20px; flex-wrap: wrap;
}
.page-title {
  font-size: 24px; font-weight: 700; color: var(--text);
  letter-spacing: -0.5px; line-height: 1.2;
}
.page-sub { font-size: 13px; color: var(--text-3); margin-top: 6px; }

/* GLASS CARDS */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  transition: border-color 0.2s, transform 0.2s;
}
.glass:hover { border-color: var(--glass-border-hover); }
.glass-lg { padding: 24px; border-radius: var(--r-lg); }
.glass-pad { padding: 20px; }

/* KPI CARDS */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; margin-bottom: 28px;
}
.kpi-card {
  position: relative; padding: 22px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  overflow: hidden; transition: all 0.25s;
}
.kpi-card::before {
  content: ''; position: absolute; inset: 0;
  background: var(--grad-card); opacity: 0;
  transition: opacity 0.3s; pointer-events: none;
}
.kpi-card:hover { border-color: rgba(109, 94, 255, 0.35); transform: translateY(-2px); }
.kpi-card:hover::before { opacity: 1; }
.kpi-label {
  font-size: 11px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.8px;
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.kpi-label .kpi-icon {
  width: 26px; height: 26px; display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 7px; background: var(--accent-soft);
  color: var(--accent-2); font-size: 14px;
}
.kpi-value {
  font-size: 32px; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, var(--text) 20%, var(--text-2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums; letter-spacing: -0.5px;
}
.kpi-sub { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.kpi-card.accent .kpi-value { background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi-card.green .kpi-value { background: var(--grad-green); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi-card.yellow .kpi-value { background: var(--grad-orange); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi-card.green .kpi-icon  { background: rgba(52, 234, 192, 0.12); color: var(--green); }
.kpi-card.yellow .kpi-icon { background: rgba(251, 196, 71, 0.12); color: var(--yellow); }
.kpi-card.red .kpi-icon    { background: rgba(255, 106, 138, 0.1); color: var(--red); }
.kpi-card.cyan .kpi-icon   { background: rgba(75, 196, 255, 0.12); color: var(--cyan); }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--glass-border);
  background: rgba(139, 146, 180, 0.06);
  color: var(--text); transition: all 0.18s; white-space: nowrap;
}
.btn:hover { background: rgba(139, 146, 180, 0.12); border-color: var(--glass-border-hover); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad-hero); border: none; color: #fff; box-shadow: 0 0 24px var(--accent-glow); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 32px var(--accent-glow); }
.btn-success { background: var(--grad-green); border: none; color: #063124; }
.btn-success:hover { transform: translateY(-1px); box-shadow: 0 0 24px var(--green-glow); }
.btn-warn { background: var(--grad-orange); border: none; color: #3a2604; }
.btn-warn:hover { transform: translateY(-1px); }
.btn-danger { background: rgba(255, 106, 138, 0.1); border: 1px solid rgba(255, 106, 138, 0.3); color: var(--red); }
.btn-danger:hover { background: rgba(255, 106, 138, 0.18); }
.btn-ghost { background: transparent; border: 1px solid var(--glass-border); color: var(--text-2); }
.btn-ghost:hover { color: var(--text); border-color: var(--glass-border-hover); }
.btn-sm { padding: 5px 11px; font-size: 11px; }
.btn-lg { padding: 12px 22px; font-size: 14px; }

/* BADGES */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  border: 1px solid transparent; white-space: nowrap;
}
.badge-accent  { background: rgba(109, 94, 255, 0.12); color: var(--accent-2); border-color: rgba(109, 94, 255, 0.3); }
.badge-green   { background: rgba(52, 234, 192, 0.1); color: var(--green); border-color: rgba(52, 234, 192, 0.25); }
.badge-yellow  { background: rgba(251, 196, 71, 0.12); color: var(--yellow); border-color: rgba(251, 196, 71, 0.3); }
.badge-red     { background: rgba(255, 106, 138, 0.12); color: var(--red); border-color: rgba(255, 106, 138, 0.3); }
.badge-cyan    { background: rgba(75, 196, 255, 0.12); color: var(--cyan); border-color: rgba(75, 196, 255, 0.3); }
.badge-neutral { background: rgba(139, 146, 180, 0.08); color: var(--text-3); border-color: var(--glass-border); }

.c-tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
}
.c-tag.ai_bulu  { background: rgba(155, 139, 255, 0.15); color: var(--c-bulu); }
.c-tag.web_pro  { background: rgba(52, 234, 192, 0.12); color: var(--c-pro); }
.c-tag.web_rist { background: rgba(251, 196, 71, 0.12); color: var(--c-rist); }
.c-tag.all      { background: rgba(139, 146, 180, 0.1); color: var(--text-2); }

/* TABLES */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; padding: 10px 14px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-3); font-weight: 600;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(15, 17, 32, 0.3);
}
.tbl td {
  padding: 13px 14px; color: var(--text-2);
  border-bottom: 1px solid var(--glass-border); vertical-align: middle;
}
.tbl tr { transition: background 0.15s; }
.tbl tr:hover td { background: rgba(109, 94, 255, 0.04); }
.tbl tr:last-child td { border-bottom: none; }
.tbl .cell-val { color: var(--text); font-weight: 600; }
.tbl .cell-dim { color: var(--text-3); }

/* INPUTS */
.input, .select, textarea.input {
  background: rgba(15, 17, 32, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm); padding: 10px 13px;
  color: var(--text); font-size: 13px; font-family: inherit;
  transition: border-color 0.2s, background 0.2s; outline: none; width: 100%;
}
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--accent);
  background: rgba(15, 17, 32, 0.9);
  box-shadow: 0 0 0 3px rgba(109, 94, 255, 0.15);
}
.input::placeholder { color: var(--text-4); }
textarea.input { resize: vertical; min-height: 80px; line-height: 1.5; }

/* SECTION HEADER */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 32px 0 16px 0; gap: 16px; flex-wrap: wrap;
}
.section-title {
  font-size: 17px; font-weight: 700; color: var(--text);
  letter-spacing: -0.2px; display: flex; align-items: center; gap: 10px;
}
.section-sub { font-size: 12px; color: var(--text-3); font-weight: 500; }

/* GRIDS */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-2-1 { grid-template-columns: 1fr; }
}

/* ACCOUNT FILTER */
.account-filter {
  display: inline-flex; gap: 4px;
  margin: 0 0 24px 0; padding: 5px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}
.account-filter a {
  color: var(--text-3); padding: 7px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600; transition: all 0.18s;
  display: inline-flex; align-items: center; gap: 5px;
}
.account-filter a:hover { color: var(--text); background: rgba(139, 146, 180, 0.06); }
.account-filter a.active { color: var(--text); background: rgba(109, 94, 255, 0.15); box-shadow: inset 0 0 0 1px rgba(109, 94, 255, 0.3); }
.account-filter a.active[href*="web_pro"]  { background: rgba(52, 234, 192, 0.12); box-shadow: inset 0 0 0 1px rgba(52, 234, 192, 0.3); color: var(--c-pro); }
.account-filter a.active[href*="web_rist"] { background: rgba(251, 196, 71, 0.12); box-shadow: inset 0 0 0 1px rgba(251, 196, 71, 0.3); color: var(--c-rist); }

/* ALERT */
.alert {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: var(--r-md);
  font-size: 14px; margin-bottom: 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.2s; cursor: pointer;
}
.alert-green {
  background: rgba(52, 234, 192, 0.08);
  border: 1px solid rgba(52, 234, 192, 0.25);
  color: var(--green);
  box-shadow: 0 0 20px rgba(52, 234, 192, 0.1);
}
.alert-green:hover { background: rgba(52, 234, 192, 0.13); box-shadow: 0 0 30px rgba(52, 234, 192, 0.2); }
.alert-yellow {
  background: rgba(251, 196, 71, 0.08);
  border: 1px solid rgba(251, 196, 71, 0.25);
  color: var(--yellow);
}
.alert strong { color: var(--text); font-weight: 700; }

/* INSIGHT BOX */
.insight-box {
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(109, 94, 255, 0.08) 0%, rgba(75, 196, 255, 0.03) 100%);
  border: 1px solid rgba(109, 94, 255, 0.2);
  border-radius: var(--r-md); margin-bottom: 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.insight-box-title {
  font-size: 11px; font-weight: 700; color: var(--accent-2);
  text-transform: uppercase; letter-spacing: 0.8px;
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.insight-box p { color: var(--text-2); font-size: 13px; line-height: 1.65; }
.insight-box strong { color: var(--text); }

/* CHART */
.chart-wrap { position: relative; height: 220px; }
.chart-wrap.tall { height: 280px; }
.chart-wrap.short { height: 160px; }

/* EMPTY */
.empty { color: var(--text-3); font-size: 13px; text-align: center; padding: 32px 20px; font-style: italic; }

/* PROGRESS */
.prog-bar { background: rgba(139, 146, 180, 0.1); border-radius: 4px; height: 5px; overflow: hidden; margin-top: 6px; }
.prog-fill { height: 100%; border-radius: 4px; background: var(--grad-hero); transition: width 0.4s ease; }
.prog-fill.green { background: var(--grad-green); }
.prog-fill.yellow { background: var(--grad-orange); }

/* REPLY CARDS */
.reply-card {
  padding: 20px; background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  margin-bottom: 14px; transition: border-color 0.2s;
}
.reply-card:hover { border-color: var(--glass-border-hover); }
.reply-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.reply-card-name { font-weight: 600; font-size: 15px; color: var(--text); }
.reply-card-email { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.reply-card-subject {
  font-size: 13px; color: var(--text-2); margin-bottom: 12px;
  padding: 8px 12px; background: rgba(15, 17, 32, 0.4);
  border-radius: var(--r-xs); border-left: 2px solid var(--accent);
}
.ai-draft-box {
  background: linear-gradient(135deg, rgba(109, 94, 255, 0.06), rgba(75, 196, 255, 0.02));
  border: 1px solid rgba(109, 94, 255, 0.18);
  border-radius: var(--r-sm); padding: 14px; margin-bottom: 12px;
}
.ai-label {
  font-size: 11px; font-weight: 700; color: var(--accent-2);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 8px; display: flex; align-items: center; gap: 5px;
}
.ai-draft-text { color: var(--text); font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.edit-panel, .schedule-panel {
  display: none; margin-top: 12px; padding: 14px;
  background: rgba(15, 17, 32, 0.5); border-radius: var(--r-sm);
  border: 1px solid var(--glass-border);
}
.edit-panel.active, .schedule-panel.active { display: block; }
.edit-panel textarea { width: 100%; min-height: 120px; margin-bottom: 10px; }
.reply-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* UTILITIES */
.text-dim { color: var(--text-3); }
.text-muted { color: var(--text-4); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: 6px; } .gap-2 { gap: 10px; } .gap-3 { gap: 16px; }
.nowrap { white-space: nowrap; }
.full-width { width: 100%; }

/* FADE IN */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.container > * { animation: fadeUp 0.4s ease backwards; }
.container > *:nth-child(1) { animation-delay: 0.05s; }
.container > *:nth-child(2) { animation-delay: 0.1s; }
.container > *:nth-child(3) { animation-delay: 0.15s; }
.container > *:nth-child(4) { animation-delay: 0.2s; }

/* ═══════════════════════════════════════════════════════════════════════
   LEGACY COMPATIBILITY — mappa classi/var vecchie al nuovo look
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Variabili legacy remappate */
  --bg: var(--bg-0);
  --surface: var(--bg-1);
  --surface2: var(--bg-2);
  --card: var(--bg-2);
  --card2: var(--bg-2);
  --border: var(--glass-border);
  --border2: var(--glass-border-hover);
  --text3: var(--text-3);
  --text2: var(--text-2);
  --indigo: var(--accent);
  --indigo-bg: var(--accent-soft);
  --blue: var(--cyan);
  --blue-bg: rgba(75, 196, 255, 0.12);
  --teal: var(--green);
  --teal-bg: rgba(52, 234, 192, 0.12);
  --amber: var(--yellow);
  --amber-bg: rgba(251, 196, 71, 0.12);
}

/* Override body/container per coerenza glass */
body.legacy-body { background: var(--bg-0); }

/* Legacy topbar → stile glass */
.topbar {
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  background: rgba(10, 11, 20, 0.72) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  height: 60px !important;
  padding: 0 28px !important;
}
.topbar h1, .topbar-brand h1 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: normal !important;
  margin: 0;
}
.topbar .dot {
  width: 10px !important; height: 10px !important; border-radius: 50% !important;
  background: var(--grad-hero) !important;
  box-shadow: 0 0 16px var(--accent-glow) !important;
  display: inline-block !important;
}
.topbar-brand { display: flex !important; align-items: center !important; gap: 10px !important; margin-right: 24px !important; }
.topbar-right { margin-left: auto !important; display: flex !important; gap: 12px !important; align-items: center !important; }

/* Legacy .logout */
.logout {
  color: var(--text-3) !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  border-radius: var(--r-sm) !important;
  text-decoration: none !important;
  transition: color 0.2s, background 0.2s;
}
.logout:hover { color: var(--red) !important; background: rgba(255, 106, 138, 0.06) !important; }

/* Legacy .kpi-grid / .kpi */
.kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 28px !important;
}
.kpi {
  position: relative !important;
  padding: 22px !important;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden;
  transition: all 0.25s;
}
.kpi:hover { border-color: rgba(109, 94, 255, 0.35) !important; transform: translateY(-2px); }
.kpi .label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 12px !important;
  display: block !important;
}
.kpi .value {
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.5px !important;
  margin: 0 !important;
}
.kpi .sub {
  font-size: 12px !important;
  color: var(--text-3) !important;
  margin-top: 6px !important;
}
.kpi-icon {
  position: absolute !important;
  top: 18px; right: 18px;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-2);
  font-size: 16px !important;
  opacity: 0.8;
}

/* Colori KPI per classe */
.kpi.blue .value  { background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi.blue .kpi-icon { background: rgba(75, 196, 255, 0.12); color: var(--cyan); }
.kpi.green .value { background: var(--grad-green); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi.green .kpi-icon { background: rgba(52, 234, 192, 0.12); color: var(--green); }
.kpi.teal .value  { color: var(--green) !important; background: var(--grad-green); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi.teal .kpi-icon { background: rgba(52, 234, 192, 0.12); color: var(--green); }
.kpi.amber .value { background: var(--grad-orange); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi.amber .kpi-icon { background: rgba(251, 196, 71, 0.12); color: var(--yellow); }
.kpi.red .kpi-icon { background: rgba(255, 106, 138, 0.12); color: var(--red); }
.kpi.red .value  { color: var(--red) !important; background: none; -webkit-text-fill-color: var(--red); }

/* Container body */
.container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 32px 24px 64px !important;
}

/* Legacy .chart-card */
.chart-card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--r-md) !important;
  padding: 20px !important;
  margin-bottom: 20px;
}

/* Legacy .section-header + .section-title */
.section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 32px 0 16px 0 !important;
  gap: 16px;
  flex-wrap: wrap;
}
.section-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -0.2px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Legacy .btn generic */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 9px 16px !important;
  border-radius: var(--r-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 1px solid var(--glass-border) !important;
  background: rgba(139, 146, 180, 0.06) !important;
  color: var(--text) !important;
  transition: all 0.18s !important;
}
.btn:hover {
  background: rgba(139, 146, 180, 0.12) !important;
  border-color: var(--glass-border-hover) !important;
}
.btn-sm {
  padding: 5px 11px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}

/* Legacy reply items */
.reply-list { margin-top: 16px; }
.reply-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--r-sm) !important;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.reply-item:hover { border-color: var(--glass-border-hover) !important; }
.reply-name {
  font-weight: 600;
  color: var(--text) !important;
  font-size: 14px;
}
.reply-email { font-size: 12px; color: var(--text-3) !important; margin-top: 2px; }
.reply-date { font-size: 12px; color: var(--text-3) !important; }

/* Legacy reply-alert (banner) */
.reply-alert {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  border-radius: var(--r-md) !important;
  font-size: 14px !important;
  margin-bottom: 20px !important;
  background: rgba(52, 234, 192, 0.08) !important;
  border: 1px solid rgba(52, 234, 192, 0.25) !important;
  color: var(--green) !important;
  box-shadow: 0 0 20px rgba(52, 234, 192, 0.1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all 0.2s !important;
  cursor: pointer !important;
}
.reply-alert:hover {
  background: rgba(52, 234, 192, 0.13) !important;
  box-shadow: 0 0 30px rgba(52, 234, 192, 0.2) !important;
}
.reply-alert strong { color: var(--text) !important; font-weight: 700 !important; }

/* Legacy account filter bar */
.account-filter-bar {
  display: inline-flex !important;
  gap: 4px !important;
  margin: 20px 24px !important;
  padding: 5px !important;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  max-width: 1280px;
}
.account-filter-bar a {
  color: var(--text-3) !important;
  padding: 7px 14px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.18s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-decoration: none !important;
}
.account-filter-bar a:hover { color: var(--text) !important; background: rgba(139, 146, 180, 0.06) !important; }
.account-filter-bar a.active { color: var(--text) !important; background: rgba(109, 94, 255, 0.15) !important; box-shadow: inset 0 0 0 1px rgba(109, 94, 255, 0.3) !important; }
.account-filter-bar a.active[href*="web_pro"]  { background: rgba(52, 234, 192, 0.12) !important; box-shadow: inset 0 0 0 1px rgba(52, 234, 192, 0.3) !important; color: var(--c-pro) !important; }
.account-filter-bar a.active[href*="web_rist"] { background: rgba(251, 196, 71, 0.12) !important; box-shadow: inset 0 0 0 1px rgba(251, 196, 71, 0.3) !important; color: var(--c-rist) !important; }

/* Legacy tables */
.table, table.prospect-table, table.leads-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.prospect-table th, table.leads-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3) !important;
  font-weight: 600;
  border-bottom: 1px solid var(--glass-border) !important;
  background: rgba(15, 17, 32, 0.3) !important;
}
table.prospect-table td, table.leads-table td {
  padding: 12px;
  color: var(--text-2) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  vertical-align: middle;
}
table.prospect-table tr:hover td, table.leads-table tr:hover td { background: rgba(109, 94, 255, 0.04) !important; }

/* Legacy badges inline */
.badge.sent, .badge.good { background: rgba(52, 234, 192, 0.12) !important; color: var(--green) !important; border: 1px solid rgba(52, 234, 192, 0.25) !important; }
.badge.error, .badge.none { background: rgba(255, 106, 138, 0.12) !important; color: var(--red) !important; border: 1px solid rgba(255, 106, 138, 0.25) !important; }
.badge.unsent { background: rgba(251, 196, 71, 0.12) !important; color: var(--yellow) !important; border: 1px solid rgba(251, 196, 71, 0.25) !important; }
.badge.poor, .badge.ok { background: rgba(75, 196, 255, 0.12) !important; color: var(--cyan) !important; border: 1px solid rgba(75, 196, 255, 0.25) !important; }

/* Legacy modal */
.modal-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.modal-box {
  background: var(--glass-bg-solid) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid var(--glass-border-hover) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-lg) !important;
}
.modal-cancel {
  background: rgba(139, 146, 180, 0.1) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text-2) !important;
}
.modal-confirm {
  background: var(--grad-hero) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
}

/* Legacy input/select in forms */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="datetime-local"], select, textarea {
  background: rgba(15, 17, 32, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(109, 94, 255, 0.15);
}

/* Filter tabs (status filter in dashboard) */
.filter-tabs, .table-controls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.filter-tab {
  padding: 6px 13px;
  background: rgba(139, 146, 180, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
}
.filter-tab:hover { color: var(--text); background: rgba(139, 146, 180, 0.1); }
.filter-tab.active { color: var(--accent-2); background: var(--accent-soft); border-color: rgba(109, 94, 255, 0.3); }

/* Last update pill */
#last-update {
  font-size: 11px;
  color: var(--text-3);
  background: rgba(15, 17, 32, 0.4);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
}

/* MARKDOWN */
.md-content { color: var(--text-2); font-size: 14px; line-height: 1.7; }
.md-content h1, .md-content h2, .md-content h3 { color: var(--text); font-weight: 700; margin: 24px 0 12px 0; letter-spacing: -0.3px; }
.md-content h1 { font-size: 24px; background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.md-content h2 { font-size: 19px; padding-top: 8px; }
.md-content h3 { font-size: 15px; color: var(--accent-2); }
.md-content p { margin-bottom: 12px; }
.md-content ul, .md-content ol { margin: 8px 0 16px 20px; }
.md-content li { margin-bottom: 6px; }
.md-content strong { color: var(--text); font-weight: 700; }
.md-content code { background: rgba(109, 94, 255, 0.1); padding: 2px 6px; border-radius: 4px; font-family: 'SF Mono', Consolas, monospace; font-size: 12px; color: var(--accent-2); }
.md-content blockquote { border-left: 3px solid var(--accent); padding: 2px 0 2px 14px; margin: 12px 0; color: var(--text-2); background: rgba(109, 94, 255, 0.04); }

/* ── REPLY BUTTON STYLES ─────────────────────────────────────────── */
.btn-approve { background: var(--grad-green); border: none; color: #063124; padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; }
.btn-approve:hover { transform: translateY(-1px); box-shadow: 0 0 16px var(--green-glow); }
.btn-edit { background: rgba(99,179,237,.1); border: 1px solid rgba(99,179,237,.25); color: var(--cyan); padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; }
.btn-edit:hover { background: rgba(99,179,237,.18); }
.btn-schedule { background: rgba(246,173,85,.1); border: 1px solid rgba(246,173,85,.25); color: var(--yellow); padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; }
.btn-archive { background: rgba(255,106,138,.1); border: 1px solid rgba(255,106,138,.25); color: var(--red); padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; }
.btn-manual { background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.3); color: #a78bfa; padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all .15s; }
.btn-manual:hover { background: rgba(139,92,246,.2); }
.btn-send-edited { background: var(--grad-hero); border: none; color: #fff; padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.btn-ai-rework { background: rgba(99,179,237,.1); border: 1px solid rgba(99,179,237,.25); color: var(--cyan); padding: 7px 14px; border-radius: 8px; font-size: 12px; cursor: pointer; }
.generate-draft-btn { background: var(--grad-hero); border: none; color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; margin-bottom: 6px; }


/* ════════════════════════════════════════════════════════════════════════
   Phase 3 step 3.1: utility classes basate su tokens
   Convenzione: text-* (font-size), fw-* (weight), lh-* (line-height),
                 ls-* (letter-spacing), tone-* (color),
                 mt-/mb-/ml-/mr-/mx-/my-/m-, pt-/pb-/...-px (spacing).
   ════════════════════════════════════════════════════════════════════════ */
/* Typography */
.text-xs   { font-size: var(--fs-xs); }
.text-sm   { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-md   { font-size: var(--fs-md); }
.text-lg   { font-size: var(--fs-lg); }
.text-xl   { font-size: var(--fs-xl); }
.text-2xl  { font-size: var(--fs-2xl); }
.text-3xl  { font-size: var(--fs-3xl); }
.text-4xl  { font-size: var(--fs-4xl); }

.fw-regular  { font-weight: var(--fw-regular); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }

.lh-tight  { line-height: var(--lh-tight); }
.lh-snug   { line-height: var(--lh-snug); }
.lh-normal { line-height: var(--lh-normal); }
.lh-loose  { line-height: var(--lh-loose); }

.ls-tight  { letter-spacing: var(--ls-tight); }
.ls-wide   { letter-spacing: var(--ls-wide); }
.ls-wider  { letter-spacing: var(--ls-wider); }
.ls-caps   { letter-spacing: var(--ls-caps); text-transform: uppercase; }

/* Tonalità testo (usa palette esistente) */
.tone-text   { color: var(--text); }
.tone-text-2 { color: var(--text-2); }
.tone-text-3 { color: var(--text-3); }
.tone-text-4 { color: var(--text-4); }
.tone-accent { color: var(--accent-2); }
.tone-cyan   { color: var(--cyan); }
.tone-green  { color: var(--green); }
.tone-yellow { color: var(--yellow); }
.tone-red    { color: var(--red); }
.tone-orange { color: var(--orange); }

/* Spacing utilities (margin) */
.m-0 { margin: var(--s-0); } .m-2 { margin: var(--s-2); } .m-3 { margin: var(--s-3); }
.m-4 { margin: var(--s-4); } .m-5 { margin: var(--s-5); } .m-6 { margin: var(--s-6); }
.m-7 { margin: var(--s-7); } .m-8 { margin: var(--s-8); } .m-9 { margin: var(--s-9); } .m-10{ margin: var(--s-10); }

.mt-0 { margin-top: var(--s-0); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); } .mt-9 { margin-top: var(--s-9); } .mt-10{ margin-top: var(--s-10); }

.mb-0 { margin-bottom: var(--s-0); } .mb-2 { margin-bottom: var(--s-2); } .mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); } .mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }
.mb-7 { margin-bottom: var(--s-7); } .mb-8 { margin-bottom: var(--s-8); } .mb-9 { margin-bottom: var(--s-9); } .mb-10{ margin-bottom: var(--s-10); }

.mx-auto { margin-left: auto; margin-right: auto; }

/* Spacing utilities (padding) */
.p-0 { padding: var(--s-0); } .p-2 { padding: var(--s-2); } .p-3 { padding: var(--s-3); }
.p-4 { padding: var(--s-4); } .p-5 { padding: var(--s-5); } .p-6 { padding: var(--s-6); }
.p-7 { padding: var(--s-7); } .p-8 { padding: var(--s-8); } .p-9 { padding: var(--s-9); } .p-10{ padding: var(--s-10); }

.px-3 { padding-left: var(--s-3); padding-right: var(--s-3); }
.px-4 { padding-left: var(--s-4); padding-right: var(--s-4); }
.px-6 { padding-left: var(--s-6); padding-right: var(--s-6); }
.px-7 { padding-left: var(--s-7); padding-right: var(--s-7); }
.py-3 { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.py-4 { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.py-6 { padding-top: var(--s-6); padding-bottom: var(--s-6); }

/* Gap (per flex/grid) */
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); } .gap-7 { gap: var(--s-7); }
.gap-8 { gap: var(--s-8); } .gap-9 { gap: var(--s-9); } .gap-10{ gap: var(--s-10); }

/* Flex helpers */
.flex      { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col  { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-1 { flex: 1 1 0%; }

/* Reduced motion (a11y) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   Phase 3 step 3.2: componenti CSS riusabili
   I componenti esistenti (.btn, .badge, .input, .alert, .modal-overlay,
   .table) restano invariati per backward compat. Qui aggiungo nuovi.
   Naming: nome-componente. Modifier: nome-componente--variant.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Card (variante semplificata) ─────────────────────────────────────── */
.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: var(--s-7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--tr-fast), transform var(--tr-fast);
}
.card:hover { border-color: var(--glass-border-hover); }
.card--solid { background: var(--bg-1); backdrop-filter: none; -webkit-backdrop-filter: none; }
.card--bordered { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.card--lg { padding: var(--s-9); border-radius: var(--r-lg); }
.card--sm { padding: var(--s-5); border-radius: var(--r-sm); }
.card--interactive { cursor: pointer; }
.card--interactive:hover { transform: translateY(-2px); box-shadow: var(--sh-card); }

.card__title {
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  color: var(--text); margin-bottom: var(--s-3);
  display: flex; align-items: center; gap: var(--s-3);
}
.card__subtitle { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--s-5); }
.card__body { color: var(--text-2); }
.card__footer {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--glass-border);
  display: flex; justify-content: flex-end; gap: var(--s-4);
}

/* ── Metric card (KPI per dashboard) ──────────────────────────────────── */
.metric-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: var(--s-7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative; overflow: hidden;
  transition: border-color var(--tr-fast), transform var(--tr-fast);
}
.metric-card::before {
  content: ""; position: absolute; inset: 0;
  background: var(--grad-card); opacity: 0;
  transition: opacity var(--tr-normal); pointer-events: none;
}
.metric-card:hover { border-color: var(--glass-border-hover); transform: translateY(-2px); }
.metric-card:hover::before { opacity: 1; }
.metric-card__label {
  font-size: var(--fs-sm); color: var(--text-3);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  font-weight: var(--fw-medium);
  display: flex; align-items: center; gap: var(--s-3);
}
.metric-card__value {
  font-size: var(--fs-3xl); font-weight: var(--fw-bold);
  color: var(--text); line-height: var(--lh-tight);
  margin-top: var(--s-3);
  font-variant-numeric: tabular-nums;
}
.metric-card__delta {
  margin-top: var(--s-3); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.metric-card__delta--up   { color: var(--green); }
.metric-card__delta--down { color: var(--red); }

/* ── Form field (etichetta + input + hint) ────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
.field__label {
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--text-2); letter-spacing: var(--ls-wide);
}
.field__label--required::after { content: " *"; color: var(--red); }
.field__hint { font-size: var(--fs-xs); color: var(--text-3); }
.field__error { font-size: var(--fs-xs); color: var(--red); margin-top: var(--s-2); }
.field__row { display: flex; gap: var(--s-5); }
.field__row > .field { flex: 1; }

/* ── Chip / Tag (metadati piccoli, diversi da badge) ──────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-5);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  border-radius: 999px;
  background: rgba(139, 146, 180, 0.08);
  color: var(--text-2);
  border: 1px solid var(--glass-border);
  transition: background var(--tr-fast);
  user-select: none;
}
.chip:hover { background: rgba(139, 146, 180, 0.15); }
.chip--accent { background: var(--accent-soft); color: var(--accent-2); border-color: rgba(109,94,255,0.3); }
.chip--green  { background: rgba(52,234,192,0.1); color: var(--green); border-color: rgba(52,234,192,0.25); }
.chip--cyan   { background: rgba(75,196,255,0.1); color: var(--cyan); border-color: rgba(75,196,255,0.25); }
.chip--yellow { background: rgba(251,196,71,0.12); color: var(--yellow); border-color: rgba(251,196,71,0.3); }
.chip--red    { background: rgba(255,106,138,0.1); color: var(--red); border-color: rgba(255,106,138,0.25); }
.chip__remove {
  margin-left: var(--s-2); cursor: pointer; opacity: 0.6;
  background: none; border: none; color: inherit;
  padding: 0; font-size: var(--fs-md); line-height: 1;
}
.chip__remove:hover { opacity: 1; }

/* ── Toast (notifica scorrevole) ──────────────────────────────────────── */
.toast {
  position: fixed; bottom: var(--s-9); right: var(--s-9);
  z-index: var(--z-toast);
  background: var(--glass-bg-solid);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-7);
  display: flex; align-items: center; gap: var(--s-5);
  box-shadow: var(--sh-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: var(--fs-md);
  max-width: 380px;
  animation: toast-in var(--tr-easeout) both;
}
.toast--success { border-left: 4px solid var(--green); }
.toast--error   { border-left: 4px solid var(--red); }
.toast--warn    { border-left: 4px solid var(--yellow); }
.toast--info    { border-left: 4px solid var(--cyan); }
.toast__icon { font-size: var(--fs-xl); flex-shrink: 0; }
.toast__body { flex: 1; color: var(--text); }
.toast__close {
  background: none; border: none; color: var(--text-3);
  cursor: pointer; padding: var(--s-2);
  transition: color var(--tr-fast);
}
.toast__close:hover { color: var(--text); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Tooltip (testuale, attivato da [data-tooltip]) ───────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + var(--s-3)); left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: var(--s-3) var(--s-5);
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--text);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--tr-fast), transform var(--tr-fast);
  z-index: var(--z-tooltip);
}
[data-tooltip]:hover::before {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ── Dropdown menu (toggleable) ───────────────────────────────────────── */
.dropdown { position: relative; display: inline-block; }
.dropdown__menu {
  position: absolute; top: calc(100% + var(--s-3)); right: 0;
  min-width: 180px;
  background: var(--glass-bg-solid);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: var(--s-3);
  display: none;
  z-index: var(--z-dropdown);
  animation: dropdown-in var(--tr-fast) both;
}
.dropdown--open .dropdown__menu { display: block; }
.dropdown__item {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-base); color: var(--text-2);
  border-radius: var(--r-xs);
  cursor: pointer; user-select: none;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.dropdown__item:hover { background: rgba(139,146,180,0.08); color: var(--text); }
.dropdown__item--danger:hover { color: var(--red); }
.dropdown__divider { height: 1px; background: var(--glass-border); margin: var(--s-3) 0; }
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: var(--s-2);
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: var(--s-7);
}
.tab {
  padding: var(--s-5) var(--s-7);
  font-size: var(--fs-md); font-weight: var(--fw-medium);
  color: var(--text-3); cursor: pointer; user-select: none;
  border-bottom: 2px solid transparent;
  transition: color var(--tr-fast), border-color var(--tr-fast);
  background: none; border-top: none; border-left: none; border-right: none;
}
.tab:hover { color: var(--text-2); }
.tab--active { color: var(--accent-2); border-bottom-color: var(--accent); }

/* ── Empty state ──────────────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: var(--s-12) var(--s-7);
  color: var(--text-3);
}
.empty-state__icon {
  font-size: 48px; margin-bottom: var(--s-5);
  opacity: 0.5;
}
.empty-state__title {
  font-size: var(--fs-lg); font-weight: var(--fw-semibold);
  color: var(--text-2); margin-bottom: var(--s-3);
}
.empty-state__text { font-size: var(--fs-base); margin-bottom: var(--s-7); }

/* ── Skeleton (loading placeholder) ───────────────────────────────────── */
.skeleton {
  display: block;
  background: linear-gradient(90deg,
    rgba(139,146,180,0.05) 0%,
    rgba(139,146,180,0.12) 50%,
    rgba(139,146,180,0.05) 100%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--r-xs);
}
.skeleton--text  { height: 1em; margin-bottom: var(--s-3); }
.skeleton--title { height: 1.4em; width: 60%; margin-bottom: var(--s-5); }
.skeleton--block { height: 100px; }
.skeleton--circle { border-radius: 50%; aspect-ratio: 1; }
@keyframes skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Spinner ──────────────────────────────────────────────────────────── */
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid var(--glass-border);
  border-top-color: var(--accent-2);
  border-radius: 50%;
  animation: spinner-spin 0.7s linear infinite;
}
.spinner--lg { width: 32px; height: 32px; border-width: 3px; }
.spinner--sm { width: 12px; height: 12px; border-width: 2px; }
@keyframes spinner-spin {
  to { transform: rotate(360deg); }
}

/* ── Divider ──────────────────────────────────────────────────────────── */
.divider {
  height: 1px; background: var(--glass-border);
  margin: var(--s-7) 0; border: 0;
}
.divider--vertical { width: 1px; height: auto; align-self: stretch; margin: 0 var(--s-5); }
.divider--labeled {
  display: flex; align-items: center; gap: var(--s-5);
  margin: var(--s-7) 0;
}
.divider--labeled::before, .divider--labeled::after {
  content: ""; flex: 1; height: 1px; background: var(--glass-border);
}
.divider--labeled span {
  font-size: var(--fs-xs); color: var(--text-3);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
}

/* ── Keyboard key (kbd) ──────────────────────────────────────────────── */
kbd, .kbd {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xs);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--fs-xs);
  color: var(--text-2);
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

/* ── Avatar (iniziali tonde) ─────────────────────────────────────────── */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--grad-hero);
  color: #fff; font-weight: var(--fw-semibold);
  font-size: var(--fs-sm); text-transform: uppercase;
  flex-shrink: 0;
}
.avatar--sm { width: 24px; height: 24px; font-size: var(--fs-xs); }
.avatar--lg { width: 48px; height: 48px; font-size: var(--fs-md); }

/* ── Progress bar ─────────────────────────────────────────────────────── */
.progress {
  height: 6px; background: rgba(139,146,180,0.08);
  border-radius: 999px; overflow: hidden;
}
.progress__bar {
  height: 100%; background: var(--grad-hero);
  border-radius: 999px;
  transition: width var(--tr-normal);
}
.progress--lg { height: 10px; }
.progress--sm { height: 4px; }

/* ── Dialog (modale strutturato) ─────────────────────────────────────── */
.dialog-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 11, 20, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal-backdrop);
  display: flex; align-items: center; justify-content: center;
  animation: dialog-fade var(--tr-normal) both;
}
.dialog {
  background: var(--bg-1);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--r-lg);
  padding: var(--s-9);
  box-shadow: var(--sh-lg);
  max-width: 560px; width: calc(100% - var(--s-12));
  max-height: calc(100vh - var(--s-14));
  overflow-y: auto;
  z-index: var(--z-modal);
  animation: dialog-pop var(--tr-easeout) both;
}
.dialog__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: var(--s-7); gap: var(--s-7);
}
.dialog__title {
  font-size: var(--fs-xl); font-weight: var(--fw-semibold);
  color: var(--text); line-height: var(--lh-tight);
}
.dialog__subtitle {
  font-size: var(--fs-base); color: var(--text-3);
  margin-top: var(--s-2);
}
.dialog__body { color: var(--text-2); font-size: var(--fs-base); line-height: var(--lh-normal); }
.dialog__footer {
  margin-top: var(--s-9); padding-top: var(--s-5);
  border-top: 1px solid var(--glass-border);
  display: flex; justify-content: flex-end; gap: var(--s-4);
}
@keyframes dialog-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-pop {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Inline status indicators ─────────────────────────────────────────── */
.dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
  background: var(--text-3);
}
.dot--green  { background: var(--green); box-shadow: 0 0 8px var(--green-glow); }
.dot--red    { background: var(--red); box-shadow: 0 0 8px var(--red-glow); }
.dot--yellow { background: var(--yellow); box-shadow: 0 0 8px var(--yellow-glow); }
.dot--cyan   { background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
.dot--pulse { animation: dot-pulse 1.5s ease-in-out infinite; }
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}


/* ════════════════════════════════════════════════════════════════════════
   Phase 3 step 3.3: layout & navigation extension
   I componenti esistenti (.topbar, .container, .page-header) restano.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Page shell (struttura standard) ──────────────────────────────────── */
.page-shell {
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}
.page-shell--with-sidebar {
  flex-direction: row;
}

/* ── Sidebar (opzionale per pagine con menu laterale) ────────────────── */
.sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--bg-1);
  border-right: 1px solid var(--glass-border);
  padding: var(--s-7) var(--s-5);
  overflow-y: auto;
  position: sticky; top: 60px;
  height: calc(100vh - 60px);
  z-index: var(--z-sticky);
}
.sidebar__section {
  margin-bottom: var(--s-9);
}
.sidebar__title {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  color: var(--text-3);
  padding: 0 var(--s-5) var(--s-4);
}
.sidebar__nav {
  display: flex; flex-direction: column; gap: var(--s-1);
}
.sidebar__link {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-base); font-weight: var(--fw-medium);
  color: var(--text-2);
  transition: background var(--tr-fast), color var(--tr-fast);
  text-decoration: none;
}
.sidebar__link:hover { background: rgba(139,146,180,0.08); color: var(--text); }
.sidebar__link--active {
  background: var(--accent-soft); color: var(--accent-2);
  border-left: 2px solid var(--accent);
  padding-left: calc(var(--s-5) - 2px);
}
.sidebar__icon { font-size: var(--fs-md); flex-shrink: 0; opacity: 0.85; }
.sidebar__count {
  margin-left: auto;
  font-size: var(--fs-xs); padding: 1px var(--s-3);
  background: var(--bg-2); border-radius: 999px;
  color: var(--text-3);
}

/* ── Page main (contenuto principale, complement di sidebar) ─────────── */
.page-main {
  flex: 1; min-width: 0;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-5) 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
  list-style: none;
  flex-wrap: wrap;
}
.breadcrumb__item { display: flex; align-items: center; gap: var(--s-3); }
.breadcrumb__link {
  color: var(--text-3);
  text-decoration: none;
  transition: color var(--tr-fast);
}
.breadcrumb__link:hover { color: var(--text-2); }
.breadcrumb__separator {
  color: var(--text-4); user-select: none;
  font-size: var(--fs-xs);
}
.breadcrumb__item--current { color: var(--text); font-weight: var(--fw-medium); }

/* ── Page actions (a destra dell'header) ─────────────────────────────── */
.page-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--s-4);
}
.page-header--flex {
  display: flex; align-items: flex-start; flex-wrap: wrap;
  gap: var(--s-7); margin-bottom: var(--s-9);
}
.page-header--flex .page-title-block { flex: 1; min-width: 200px; }

/* ── Sub-navigation (tabs di pagina) ─────────────────────────────────── */
.subnav {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: var(--s-9);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--glass-border);
  position: sticky; top: 60px;
  background: var(--bg-0);
  z-index: var(--z-sticky);
  margin-top: calc(-1 * var(--s-7));
  padding-top: var(--s-5);
}
.subnav__link {
  padding: var(--s-4) var(--s-6);
  font-size: var(--fs-base); font-weight: var(--fw-medium);
  color: var(--text-3);
  border-radius: var(--r-xs);
  text-decoration: none;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.subnav__link:hover { background: rgba(139,146,180,0.06); color: var(--text-2); }
.subnav__link--active {
  background: var(--accent-soft); color: var(--accent-2);
}
.subnav__count {
  margin-left: var(--s-3);
  font-size: var(--fs-xs); padding: 1px var(--s-3);
  background: rgba(0,0,0,0.25); border-radius: 999px;
}

/* ── Sticky action bar (CTA fissati in basso) ────────────────────────── */
.sticky-bar {
  position: sticky; bottom: 0;
  margin-top: var(--s-9);
  padding: var(--s-5) var(--s-7);
  background: var(--glass-bg-solid);
  border-top: 1px solid var(--glass-border);
  border-radius: var(--r-md) var(--r-md) 0 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-7); flex-wrap: wrap;
  z-index: var(--z-sticky);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.2);
}
.sticky-bar__info { color: var(--text-2); font-size: var(--fs-sm); }
.sticky-bar__actions { display: flex; gap: var(--s-4); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--glass-border);
  padding: var(--s-9) 0;
  margin-top: var(--s-12);
  text-align: center;
  font-size: var(--fs-xs); color: var(--text-4);
}
.footer__brand { color: var(--accent-2); font-weight: var(--fw-semibold); }
.footer__links {
  display: flex; gap: var(--s-7); justify-content: center;
  margin-bottom: var(--s-4); flex-wrap: wrap;
}
.footer__link {
  color: var(--text-3); text-decoration: none;
  transition: color var(--tr-fast);
}
.footer__link:hover { color: var(--text-2); }

/* ── Quick search / Command palette trigger ──────────────────────────── */
.quick-search {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  background: var(--bg-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: var(--fs-base);
  cursor: pointer;
  min-width: 200px;
  transition: border-color var(--tr-fast), background var(--tr-fast);
}
.quick-search:hover { border-color: var(--glass-border-hover); background: var(--glass-bg); }
.quick-search__icon { opacity: 0.7; }
.quick-search__placeholder { flex: 1; color: var(--text-3); }
.quick-search__shortcut {
  display: inline-flex; gap: var(--s-2);
  font-size: var(--fs-xs); color: var(--text-4);
}

/* ── Mobile bottom-nav ───────────────────────────────────────────────── */
.bottom-nav {
  display: none;  /* mostrato solo su small screens */
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: var(--z-fixed);
  background: var(--glass-bg-solid);
  border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: var(--s-3) var(--s-4);
  padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
}
.bottom-nav__list {
  display: flex; justify-content: space-around;
  list-style: none; padding: 0; margin: 0;
}
.bottom-nav__link {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-3); min-width: 60px;
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--text-3);
  text-decoration: none;
  border-radius: var(--r-xs);
  transition: color var(--tr-fast), background var(--tr-fast);
}
.bottom-nav__link:hover, .bottom-nav__link--active {
  color: var(--accent-2);
}
.bottom-nav__icon { font-size: var(--fs-xl); }

/* ── Section divider con titolo ──────────────────────────────────────── */
.section-divider {
  display: flex; align-items: center; gap: var(--s-5);
  margin: var(--s-12) 0 var(--s-7);
}
.section-divider__title {
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  color: var(--text); white-space: nowrap;
  display: flex; align-items: center; gap: var(--s-3);
}
.section-divider__line {
  flex: 1; height: 1px; background: var(--glass-border);
}

/* ── Grid layout helpers (responsive col system) ─────────────────────── */
.grid       { display: grid; gap: var(--s-7); }
.grid--2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar { width: 200px; }
  .container, .container-full { padding: var(--s-7) var(--s-5) var(--s-12); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .topbar { padding: 0 var(--s-5); }
  .topbar-nav { display: none; }
  .page-shell--with-sidebar { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto;
    position: static; border-right: none;
    border-bottom: 1px solid var(--glass-border);
  }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .bottom-nav { display: block; }
  body { padding-bottom: 72px; }  /* spazio per bottom-nav */
  .page-header--flex { flex-direction: column; align-items: stretch; }
  .page-actions { margin-left: 0; }
  .subnav { position: static; margin-top: 0; padding-top: 0; }
}

@media (max-width: 480px) {
  .container, .container-full { padding: var(--s-5) var(--s-4) var(--s-12); }
  .page-title { font-size: var(--fs-2xl); }
  .quick-search { min-width: auto; flex: 1; }
}


/* ════════════════════════════════════════════════════════════════════════
   Phase 3 step 3.4: typography standardization + WCAG accessibility
   ════════════════════════════════════════════════════════════════════════ */

/* ── Heading scale (h1-h6 + .h1-.h6) ─────────────────────────────────── */
h1, .h1 {
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
h2, .h2 {
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}
h3, .h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text);
}
h4, .h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text);
}
h5, .h5 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--text);
}
h6, .h6 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-2);
}

/* ── Body text utilities ─────────────────────────────────────────────── */
.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--text-2);
}
.small {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.muted { color: var(--text-3); }
.subtle { color: var(--text-4); }
.strong { font-weight: var(--fw-semibold); color: var(--text); }
.numeric { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ── Prose (per testo lungo: descrizioni, blog, ecc.) ────────────────── */
.prose {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--text-2);
  max-width: 65ch;
}
.prose > * + * { margin-top: var(--s-5); }
.prose h1, .prose h2, .prose h3, .prose h4 {
  margin-top: var(--s-9);
  margin-bottom: var(--s-5);
}
.prose ul, .prose ol { padding-left: var(--s-7); }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover { text-decoration-thickness: 2px; }
.prose code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--bg-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-xs);
  color: var(--text);
  border: 1px solid var(--glass-border);
}
.prose blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--s-7);
  color: var(--text-3);
  font-style: italic;
}

/* ── Focus visible (a11y critico) ────────────────────────────────────── */
/* Disabilita outline default solo per click mouse (NOT keyboard) */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent) !important;
  z-index: var(--z-base);
  position: relative;
}
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-success:focus-visible,
.btn-warn:focus-visible,
.btn-danger:focus-visible,
.btn-ghost:focus-visible {
  box-shadow: var(--focus-ring-strong);
  border-color: transparent;
}
.input:focus-visible,
.select:focus-visible,
textarea.input:focus-visible {
  box-shadow: var(--focus-ring-strong);
  border-color: var(--accent);
}
a:focus-visible {
  border-radius: var(--r-xs);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Skip link (a11y per screen reader navigation) ──────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-5);
  z-index: var(--z-tooltip);
  padding: var(--s-4) var(--s-7);
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: top var(--tr-fast);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: var(--s-5);
}

/* ── Visually hidden (sr-only) ───────────────────────────────────────── */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ── ARIA state styling ──────────────────────────────────────────────── */
[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
  pointer-events: none;
}
[aria-disabled="true"],
button[disabled],
input[disabled],
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
[aria-invalid="true"],
.is-invalid {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 1px var(--red) !important;
}
[aria-invalid="true"]:focus-visible,
.is-invalid:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,106,138,0.25) !important;
}
.is-valid {
  border-color: var(--green) !important;
}
[aria-current="page"],
[aria-current="step"] {
  font-weight: var(--fw-semibold);
}
[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}
.chevron {
  display: inline-block;
  transition: transform var(--tr-fast);
}

/* ── Form validation messages ────────────────────────────────────────── */
.field--error .field__label { color: var(--red); }
.field--success .field__label { color: var(--green); }

/* ── Hover/Focus state per keyboard navigation ───────────────────────── */
[tabindex="0"]:hover,
[role="button"]:hover {
  cursor: pointer;
}
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
  box-shadow: var(--focus-ring);
  border-radius: var(--r-xs);
}

/* ── High-contrast mode override (per utenti con bassa visione) ──────── */
@media (prefers-contrast: more) {
  :root {
    --text: #ffffff;
    --text-2: #d4d8e8;
    --text-3: #9098b8;
    --glass-border: rgba(168, 175, 230, 0.35);
    --glass-border-hover: rgba(168, 175, 230, 0.55);
  }
  .btn, .input, .card {
    border-width: 2px;
  }
  :focus-visible {
    outline: 3px solid var(--accent) !important;
    outline-offset: 2px !important;
  }
}

/* ── Print styles (a11y: stampa pulita) ──────────────────────────────── */
@media print {
  body { background: white !important; color: black !important; }
  .topbar, .sidebar, .bottom-nav, .sticky-bar, .footer { display: none !important; }
  .card, .metric-card, .dialog {
    background: white !important;
    border: 1px solid #ccc !important;
    color: black !important;
    box-shadow: none !important;
  }
  a { color: black !important; text-decoration: underline !important; }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #666;
  }
  .no-print { display: none !important; }
}

/* ── Color blindness aware: pattern + colore (no solo colore) ────────── */
.status-ok::before    { content: "✓ "; color: var(--green); font-weight: var(--fw-bold); }
.status-warn::before  { content: "⚠ "; color: var(--yellow); font-weight: var(--fw-bold); }
.status-error::before { content: "✗ "; color: var(--red); font-weight: var(--fw-bold); }
.status-info::before  { content: "ⓘ "; color: var(--cyan); font-weight: var(--fw-bold); }

/* ── Selection (testo selezionato) ───────────────────────────────────── */
::selection { background: var(--accent); color: #fff; }
::-moz-selection { background: var(--accent); color: #fff; }

/* ── Min tap target size 44x44 (WCAG 2.5.5 Target Size AAA) ──────────── */
@media (pointer: coarse) {
  .btn, button, [role="button"], a.btn,
  .nav-link, .sidebar__link, .subnav__link, .bottom-nav__link {
    min-height: 44px;
    min-width: 44px;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   Phase 3 step 3.5: animazioni & micro-interactions
   Tutte rispettano prefers-reduced-motion (override globale in step 3.1).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes library ───────────────────────────────────────────────── */
@keyframes anim-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes anim-fade-out  { from { opacity: 1; } to { opacity: 0; } }
@keyframes anim-slide-up  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes anim-slide-down{ from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes anim-slide-left  { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes anim-slide-right { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes anim-zoom-in   { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes anim-zoom-out  { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.92); } }
@keyframes anim-pulse     { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes anim-ping      { 75%,100% { transform: scale(2); opacity: 0; } }
@keyframes anim-shake     {
  0%,100% { transform: translateX(0); }
  10%,30%,50%,70%,90% { transform: translateX(-4px); }
  20%,40%,60%,80% { transform: translateX(4px); }
}
@keyframes anim-shimmer   {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes anim-bounce    {
  0%,100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50%     { transform: translateY(-25%); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
@keyframes anim-glow      {
  0%,100% { box-shadow: 0 0 8px var(--accent-glow); }
  50%     { box-shadow: 0 0 24px var(--accent-glow); }
}
@keyframes anim-rotate    { to { transform: rotate(360deg); } }
@keyframes anim-checkmark {
  0%   { stroke-dashoffset: 50; }
  100% { stroke-dashoffset: 0; }
}

/* ── Utility classes per anim ────────────────────────────────────────── */
.anim-fade-in    { animation: anim-fade-in    var(--tr-normal) both; }
.anim-fade-out   { animation: anim-fade-out   var(--tr-normal) both; }
.anim-slide-up   { animation: anim-slide-up   var(--tr-easeout) both; }
.anim-slide-down { animation: anim-slide-down var(--tr-easeout) both; }
.anim-slide-left  { animation: anim-slide-left  var(--tr-easeout) both; }
.anim-slide-right { animation: anim-slide-right var(--tr-easeout) both; }
.anim-zoom-in    { animation: anim-zoom-in    var(--tr-bounce) both; }
.anim-pulse      { animation: anim-pulse      2s ease-in-out infinite; }
.anim-shake      { animation: anim-shake      0.5s ease-in-out; }
.anim-bounce     { animation: anim-bounce     1s infinite; }
.anim-glow       { animation: anim-glow       2s ease-in-out infinite; }
.anim-spin       { animation: anim-rotate     1s linear infinite; }

/* Stagger delay (per liste/grid) */
.anim-stagger > * { animation: anim-slide-up var(--tr-easeout) both; }
.anim-stagger > *:nth-child(1)  { animation-delay: 0.05s; }
.anim-stagger > *:nth-child(2)  { animation-delay: 0.10s; }
.anim-stagger > *:nth-child(3)  { animation-delay: 0.15s; }
.anim-stagger > *:nth-child(4)  { animation-delay: 0.20s; }
.anim-stagger > *:nth-child(5)  { animation-delay: 0.25s; }
.anim-stagger > *:nth-child(6)  { animation-delay: 0.30s; }
.anim-stagger > *:nth-child(7)  { animation-delay: 0.35s; }
.anim-stagger > *:nth-child(8)  { animation-delay: 0.40s; }
.anim-stagger > *:nth-child(9)  { animation-delay: 0.45s; }
.anim-stagger > *:nth-child(10) { animation-delay: 0.50s; }
.anim-stagger > *:nth-child(n+11) { animation-delay: 0.55s; }

/* ── Hover micro-interactions ────────────────────────────────────────── */
.hover-lift {
  transition: transform var(--tr-fast), box-shadow var(--tr-fast);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-card);
}

.hover-glow {
  transition: box-shadow var(--tr-normal);
}
.hover-glow:hover {
  box-shadow: var(--sh-glow);
}

.hover-scale {
  transition: transform var(--tr-fast);
}
.hover-scale:hover { transform: scale(1.03); }
.hover-scale:active { transform: scale(0.98); }

.hover-bright {
  transition: filter var(--tr-fast);
}
.hover-bright:hover { filter: brightness(1.15); }

.hover-tilt {
  transition: transform var(--tr-normal);
}
.hover-tilt:hover { transform: perspective(800px) rotateY(-3deg) rotateX(2deg); }

/* ── Button press animation ──────────────────────────────────────────── */
.btn, .btn-primary, .btn-success, .btn-warn, .btn-danger, .btn-ghost {
  transition: background var(--tr-fast), border-color var(--tr-fast),
              color var(--tr-fast), transform var(--tr-fast),
              box-shadow var(--tr-fast);
}
.btn:active, .btn-primary:active, .btn-success:active,
.btn-warn:active, .btn-danger:active, .btn-ghost:active {
  transform: scale(0.96);
  transition-duration: 75ms;
}

/* ── Ripple effect (tappabile, JS-friendly) ──────────────────────────── */
.ripple {
  position: relative;
  overflow: hidden;
}
.ripple::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
                              rgba(255,255,255,0.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--tr-normal);
  pointer-events: none;
}
.ripple:active::after {
  opacity: 1;
  transition-duration: 0ms;
}

/* ── Card hover with gradient shine ──────────────────────────────────── */
.card-shine {
  position: relative; overflow: hidden;
}
.card-shine::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(125deg,
              transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 600ms ease-out;
  pointer-events: none;
}
.card-shine:hover::before {
  transform: translateX(100%);
}

/* ── Loading shimmer (per skeleton e altri) ──────────────────────────── */
.shimmer {
  background: linear-gradient(90deg,
    rgba(139,146,180,0.05) 0%,
    rgba(139,146,180,0.15) 50%,
    rgba(139,146,180,0.05) 100%);
  background-size: 200% 100%;
  animation: anim-shimmer 1.5s ease-in-out infinite;
}

/* ── Number count-up effect (rendered tabular for smooth count) ──────── */
.count-up {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  display: inline-block;
  transition: color var(--tr-normal);
}

/* ── Page transition (fade-in di tutta la pagina al load) ────────────── */
.page-enter {
  animation: anim-slide-up var(--tr-easeout) both;
}

/* ── Form field focus animation (label "lift") ───────────────────────── */
.field--floating { position: relative; padding-top: var(--s-7); }
.field--floating .field__label {
  position: absolute; top: var(--s-7); left: var(--s-5);
  pointer-events: none;
  transition: top var(--tr-fast), font-size var(--tr-fast), color var(--tr-fast);
  background: var(--bg-1); padding: 0 var(--s-3);
}
.field--floating .input:focus + .field__label,
.field--floating .input:not(:placeholder-shown) + .field__label,
.field--floating .field__label--lifted {
  top: 0; font-size: var(--fs-xs);
  color: var(--accent-2);
}

/* ── Tooltip arrow + animation ───────────────────────────────────────── */
[data-tooltip]::after {
  content: ""; position: absolute;
  bottom: calc(100% - 4px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--glass-border-strong);
  opacity: 0;
  transition: opacity var(--tr-fast), transform var(--tr-fast);
  pointer-events: none;
  z-index: var(--z-tooltip);
}
[data-tooltip]:hover::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ── Notification badge dot pulse ────────────────────────────────────── */
.has-notification {
  position: relative;
}
.has-notification::after {
  content: ""; position: absolute;
  top: -4px; right: -4px;
  width: 10px; height: 10px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--bg-1);
  animation: anim-pulse 2s ease-in-out infinite;
}
.has-notification--ping::before {
  content: ""; position: absolute;
  top: -4px; right: -4px;
  width: 10px; height: 10px;
  background: var(--red);
  border-radius: 50%;
  animation: anim-ping 1.5s cubic-bezier(0,0,0.2,1) infinite;
  pointer-events: none;
}

/* ── Scroll-driven animations (entry) ────────────────────────────────── */
@supports (animation-timeline: view()) {
  .anim-on-scroll {
    animation: anim-slide-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

/* ── Animazioni state-based (per JS) ─────────────────────────────────── */
.is-saving { animation: anim-pulse 1s ease-in-out infinite; }
.is-loading { cursor: progress; opacity: 0.85; }
.is-success-flash { animation: anim-pulse 0.8s ease-in-out 2; color: var(--green); }
.is-error-shake { animation: anim-shake 0.5s ease-in-out; }
.is-saved-checkmark { color: var(--green); animation: anim-zoom-in var(--tr-bounce) both; }

/* ── Confetti-friendly (compatibilità con JS confetti) ───────────────── */
.confetti-canvas {
  position: fixed; inset: 0;
  pointer-events: none; z-index: var(--z-tooltip);
}
/* ════════════════════════════════════════════════════════════════════════
   M7.13 — UI refactor (2026-05-14)
   • Font globale: Michroma (display)
   • Topbar compatto: home-icon, brand "BULU AGENCY", nav minimale, no roadmap
   ════════════════════════════════════════════════════════════════════════ */

/* Piano #17: font UI = Satoshi (importato in cima al file), data = JetBrains Mono */

/* Font globale — Satoshi */
html, body {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  letter-spacing: 0.005em;
}

/* Inputs / textarea / button ereditano */
input, textarea, select, button {
  font-family: inherit;
}

/* Code/mono = JetBrains Mono (IDs, timestamp, path) */
code, pre, .mono, [class*="font-mono"] {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace !important;
}

/* Heading: Satoshi bold */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Numeri grandi KPI — più "tight" */
.kpi-value, .number-xl, .stat-num, .big-num {
  font-family: 'Satoshi', sans-serif;
  letter-spacing: -0.02em;
}

/* ── TOPBAR REFACTOR (M7.13) ──────────────────────────────────────────────── */

/* Brand "home" link */
.topbar-brand .brand-home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.topbar-brand .brand-home h1 {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  margin: 0;
  color: var(--text);
}
.topbar-brand .brand-home:hover h1 {
  color: var(--accent-2);
}

/* Home icon nel nav */
.nav-link.nav-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
}
.nav-link.nav-home svg {
  display: block;
}
.nav-link.nav-home:hover svg {
  color: var(--accent-2);
}

/* Nav links — un filo più piccoli per Michroma (display font è larghissimo) */
.topbar-nav .nav-link {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* Piano #17: Satoshi è più compatto di Michroma → torna a 14px */
body {
  font-size: 14px;
}