/*
 * liquid-dashboards-v500.css
 * Porta le pagine autenticate Student/Instructor (dashboard, corsi, profilo, certificati,
 * notifiche, billing, wishlist, learning-hub, zona-insegnanti) nel design liquid del sito.
 * Tecnica del dark-bridge: TUTTO scopato sotto .lp-shell-unified (wrapper del LiquidUnifiedLayout)
 * con specificità 0,2,0 -> vince sugli <style> inline delle pagine (0,1,0) senza toccarne il markup.
 */

.lp-shell-unified {
  --dsh-blue: #4A90E2;
  --dsh-blue-light: #7FB1E8;
  --dsh-orange: #E87C2A;
  --dsh-orange-light: #F89B4D;
  --dsh-cream: #FAF7F0;
  --dsh-cream-soft: rgba(250, 247, 240, .78);
  --dsh-cream-mute: rgba(250, 247, 240, .56);
  --dsh-cream-faint: rgba(250, 247, 240, .36);
  --dsh-glass: rgba(10, 14, 19, .55);
  --dsh-glass-hi: rgba(17, 22, 29, .68);
  --dsh-border: rgba(250, 247, 240, .08);
  --dsh-border-hi: rgba(250, 247, 240, .16);
  --dsh-ok: #2fbf71;
  --dsh-warn: #e8a13a;
  --dsh-danger: #e5484d;
  --dsh-radius: 16px;
  --dsh-radius-sm: 10px;
  --dsh-font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --dsh-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ---- Page wrappers: spaziatura + tipografia liquid ---- */
.lp-shell-unified .dashboard-layout,
.lp-shell-unified .mc-page,
.lp-shell-unified .certificates-page,
.lp-shell-unified .notifications-page,
.lp-shell-unified .profile-page,
.lp-shell-unified .wishlist-page,
.lp-shell-unified .bh-page,
.lp-shell-unified .lh-page,
.lp-shell-unified .zi-page,
.lp-shell-unified .instructor-page {
  color: var(--dsh-cream);
  font-family: var(--dsh-font-body);
  padding: 28px 0 60px;
}
.lp-shell-unified .container-max,
.lp-shell-unified .bh-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* ---- Headings ---- */
.lp-shell-unified .dashboard-layout h1,
.lp-shell-unified .dashboard-layout h2,
.lp-shell-unified [class$="-page"] h1,
.lp-shell-unified [class$="-page"] h2,
.lp-shell-unified .hero-title,
.lp-shell-unified .bh-title,
.lp-shell-unified .card-title,
.lp-shell-unified .course-title {
  font-family: var(--dsh-font-display);
  letter-spacing: -.02em;
  color: var(--dsh-cream);
}
.lp-shell-unified .hero-subtitle,
.lp-shell-unified .bh-subtitle,
.lp-shell-unified .author-title {
  color: var(--dsh-cream-mute);
}

/* ---- Breadcrumb ---- */
.lp-shell-unified .breadcrumb-nav { margin-bottom: 18px; }
.lp-shell-unified .breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.lp-shell-unified .breadcrumb-item { color: var(--dsh-cream-mute); text-decoration: none; }
.lp-shell-unified .breadcrumb-item.active { color: var(--dsh-cream); font-weight: 600; }
.lp-shell-unified .breadcrumb-separator { color: var(--dsh-cream-faint); }

/* ---- Cards: superfici glass liquid ---- */
.lp-shell-unified .clean-card,
.lp-shell-unified .stat-card,
.lp-shell-unified .stat-box,
.lp-shell-unified .id-stat-card,
.lp-shell-unified .bh-card,
.lp-shell-unified .bh-stat,
.lp-shell-unified .lh-card,
.lp-shell-unified .zi-card,
.lp-shell-unified .certificate-card,
.lp-shell-unified .benefit-card,
.lp-shell-unified .course-item,
.lp-shell-unified .step-card,
.lp-shell-unified .stat-item,
.lp-shell-unified .faq-item,
.lp-shell-unified .preference-item,
.lp-shell-unified .dashboard-layout .card,
.lp-shell-unified [class$="-page"] .card {
  background: var(--dsh-glass);
  border: 1px solid var(--dsh-border);
  border-radius: var(--dsh-radius);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  color: var(--dsh-cream);
  transition: border-color .2s, transform .2s;
}
.lp-shell-unified .clean-card:hover,
.lp-shell-unified .stat-card:hover,
.lp-shell-unified .lh-card:hover,
.lp-shell-unified .zi-card:hover,
.lp-shell-unified .certificate-card:hover,
.lp-shell-unified .benefit-card:hover,
.lp-shell-unified .course-item:hover {
  border-color: rgba(232, 124, 42, .38);
  transform: translateY(-2px);
}
.lp-shell-unified .card-header,
.lp-shell-unified .bh-card-header { border-bottom: 1px solid var(--dsh-border); color: var(--dsh-cream); }

/* ---- Stat numbers ---- */
.lp-shell-unified .stat-value,
.lp-shell-unified .stat-number,
.lp-shell-unified .bh-stat-val,
.lp-shell-unified .stat-text {
  font-family: var(--dsh-font-display);
  font-weight: 650;
  color: var(--dsh-cream);
  font-variant-numeric: tabular-nums;
}
.lp-shell-unified .stat-label,
.lp-shell-unified .bh-stat-label,
.lp-shell-unified .pref-label {
  color: var(--dsh-cream-mute);
  font-size: 12.5px;
}

/* ---- Icone accento ---- */
.lp-shell-unified .stat-icon-wrapper,
.lp-shell-unified .lh-ico,
.lp-shell-unified .zi-ico,
.lp-shell-unified .benefit-icon,
.lp-shell-unified .empty-icon,
.lp-shell-unified .bh-empty-icon {
  color: var(--dsh-orange);
}

/* ---- Buttons: pill liquid ---- */
.lp-shell-unified .dashboard-layout .btn,
.lp-shell-unified [class$="-page"] .btn,
.lp-shell-unified .bh-btn {
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--dsh-font-body);
  transition: transform .15s, background .15s, border-color .15s;
}
.lp-shell-unified .btn-primary,
.lp-shell-unified .bh-btn-primary,
.lp-shell-unified .hero-cta .btn-primary {
  background: var(--dsh-orange);
  border-color: var(--dsh-orange);
  color: #fff;
  box-shadow: 0 8px 24px rgba(232, 124, 42, .32);
}
.lp-shell-unified .btn-primary:hover,
.lp-shell-unified .bh-btn-primary:hover {
  background: var(--dsh-orange-light);
  border-color: var(--dsh-orange-light);
  transform: translateY(-1px);
}
.lp-shell-unified .btn-outline,
.lp-shell-unified .btn-outline-primary,
.lp-shell-unified .btn-secondary,
.lp-shell-unified .bh-btn-outline {
  background: var(--dsh-glass-hi);
  border: 1px solid var(--dsh-border-hi);
  color: var(--dsh-cream);
}
.lp-shell-unified .btn-outline:hover,
.lp-shell-unified .bh-btn-outline:hover { border-color: var(--dsh-orange); color: var(--dsh-cream); }
.lp-shell-unified .btn-outline-danger { border-color: rgba(229, 72, 77, .5); color: #ff8a8e; background: rgba(229, 72, 77, .1); }

/* ---- Badges / pills ---- */
.lp-shell-unified .certificate-badge,
.lp-shell-unified .bh-badge {
  border-radius: 999px;
  font-weight: 600;
  font-size: 11.5px;
}

/* ---- Tables ---- */
.lp-shell-unified .bh-table,
.lp-shell-unified .dashboard-layout table {
  width: 100%;
  border-collapse: collapse;
  color: var(--dsh-cream-soft);
}
.lp-shell-unified .bh-table th,
.lp-shell-unified .dashboard-layout th {
  font-family: var(--dsh-font-display);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dsh-cream-faint);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--dsh-border);
}
.lp-shell-unified .bh-table td,
.lp-shell-unified .dashboard-layout td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(250, 247, 240, .05);
}

/* ---- Empty / loading / error states ---- */
.lp-shell-unified .empty-state,
.lp-shell-unified .bh-empty,
.lp-shell-unified .loading-state,
.lp-shell-unified .error-state {
  background: var(--dsh-glass);
  border: 1px solid var(--dsh-border);
  border-radius: var(--dsh-radius);
  color: var(--dsh-cream-soft);
  text-align: center;
  padding: 40px 24px;
}
.lp-shell-unified .empty-title { color: var(--dsh-cream); font-family: var(--dsh-font-display); }
.lp-shell-unified .empty-description,
.lp-shell-unified .empty-text { color: var(--dsh-cream-mute); }
.lp-shell-unified .spinner {
  border-color: rgba(250, 247, 240, .18);
  border-top-color: var(--dsh-orange);
}

/* ---- Section titles ---- */
.lp-shell-unified .activity-section,
.lp-shell-unified .courses-section,
.lp-shell-unified .earnings-section,
.lp-shell-unified .benefits-section,
.lp-shell-unified .how-it-works-section,
.lp-shell-unified .faq-section,
.lp-shell-unified .cta-section { color: var(--dsh-cream); }

/* ---- Toggle switch (preferenze/profilo) ---- */
.lp-shell-unified .toggle-slider { background: rgba(250, 247, 240, .14); }
.lp-shell-unified .toggle-switch input:checked + .toggle-slider { background: var(--dsh-orange); }

/* ---- Grid helpers che alcune pagine usano nudi ---- */
.lp-shell-unified .dashboard-grid,
.lp-shell-unified .certificates-grid,
.lp-shell-unified .benefits-grid,
.lp-shell-unified .faq-grid {
  display: grid;
  gap: 18px;
}

/* ---- Rete di sicurezza: SVG decorativi (streak flame) mai a piena pagina anche
        se il bundle scoped Blazor non caricasse (evita il "cerchio nero" gigante). ---- */
.lp-shell-unified .streak-counter { display: inline-flex; align-items: center; gap: .6rem; }
.lp-shell-unified .streak-flame { width: 2.5rem !important; height: 2.5rem !important; flex: 0 0 auto; display: inline-flex; }
.lp-shell-unified .streak-flame svg { width: 100% !important; height: 100% !important; }

/* ---- Footer bar: FISSA per decisione esplicita utente (2026-07-23) — la barra
        liquid-footer resta bloccata a piè viewport come sul backup, NON scorre col testo.
        Il problema che questa regola risolveva (barra che copriva il contenuto) è ora
        gestito nel modo giusto: riserva di spazio via padding-bottom su .lp-main-content
        (liquid-navbar-footer-v100.css) + nav della barra nascosta su viewport stretti.
        NON ripristinare position:static qui: scollega la barra su TUTTE le pagine. ---- */

/* ---- Spaziatura professionale: ritmo verticale tra sezioni + padding interno card.
        Le pagine avevano welcome-banner/streak/grid attaccati (margin 0) e card con padding 0. ---- */
.lp-shell-unified .welcome-banner { padding: 26px 28px !important; margin-bottom: 22px !important; border-radius: 16px; }
.lp-shell-unified .dashboard-progress-row { margin-bottom: 24px !important; }
.lp-shell-unified .dashboard-grid { gap: 20px !important; }
.lp-shell-unified .clean-card > .card-header,
.lp-shell-unified .bh-card > .bh-card-header { padding: 18px 22px !important; }
.lp-shell-unified .clean-card > .card-content { padding: 20px 22px 22px !important; }
.lp-shell-unified .stat-card,
.lp-shell-unified .stat-box,
.lp-shell-unified .lh-card,
.lp-shell-unified .zi-card,
.lp-shell-unified .certificate-card,
.lp-shell-unified .benefit-card,
.lp-shell-unified .step-card,
.lp-shell-unified .bh-stat { padding: 20px 22px !important; }
.lp-shell-unified .card-header h2,
.lp-shell-unified .card-header h3,
.lp-shell-unified .card-title { margin: 0 !important; }
/* card generiche non-header/content: assicura un padding minimo se a filo */
.lp-shell-unified .clean-card { padding: 0; }