/* =============================================================
   LIQUID GLASS — SUPERFICI ("liquid glass dosato")
   Spec: docs/superpowers/specs/2026-08-02-liquid-glass-design-system.md §4
   Layer: surfaces — deviazioni per learning space, admin, portal

   Regola: il vetro resta solo sul chrome di navigazione/contenimento
   (navbar, sidebar, pannelli fluttuanti, dropdown, modal, toast,
   badge/chip, auth panel, footer). Le superfici di CONTENUTO
   (card corso, card dashboard, curriculum, player, recensioni)
   diventano solide: stessa famiglia cromatica, zero backdrop-filter.

   Attivo solo sotto [data-ds="lg"] — vedi lg-tokens.css.

   NOTA CASCADE: i CSS legacy (liquid-courses-v320, liquid-dashboards-v500,
   liquid-design-system-v100, liquid-learn-v320) NON usano @layer, e le
   regole non-layerate vincono su quelle layerate a parita' di origine.
   Le proprieta' di materiale che devono battere quei file portano quindi
   !important: e' deliberato e circoscritto a questo layer di deviazioni.
   ============================================================= */

@layer surfaces {

  /* ── Superfici solide di contenuto ─────────────────────────
     Classi reali dal markup (verificate sui Razor, v4.4.0):
       .lp-card, .lp-content-panel  -> pannelli DS (Pricing, FAQ, AIAssistant…)
       .lc-card                     -> card corso nel catalogo (Courses/Index)
       .course-card-premium         -> Components/CourseCard
       .stat-card, .section-card,
       .course-item                 -> Pages/Dashboard
       .review-card                 -> Pages/Courses/Detail
       .ll-curr-item                -> curriculum (Pages/Learn)
       .ll-player-wrap              -> player video (Pages/Learn)
       .ll-ai-bubble                -> pannello AI tutor (Pages/Learn) */
  :root[data-ds="lg"] :is(
    .lp-card, .lp-content-panel, .lc-card, .course-card-premium,
    .stat-card, .section-card, .course-item, .review-card,
    .ll-curr-item, .ll-player-wrap, .ll-ai-bubble
  ) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: var(--lg-surface) !important;
    border: 1px solid var(--lg-surface-edge) !important;
    box-shadow: var(--lg-shadow-2) !important;
  }

  /* Raggio concentrico solo sulle card vere e proprie (§4):
     le righe di curriculum e il player tengono il proprio raggio. */
  :root[data-ds="lg"] :is(
    .lp-card, .lp-content-panel, .lc-card, .course-card-premium,
    .stat-card, .section-card, .review-card
  ) {
    border-radius: var(--lg-r-card) !important;
  }

  /* Niente lensing ereditato da lg-components sulle card di contenuto:
     il ::before rifrattivo resta solo sul chrome di navigazione. */
  :root[data-ds="lg"] :is(
    .lp-card, .lp-content-panel, .lc-card, .course-card-premium,
    .stat-card, .section-card, .course-item, .review-card,
    .ll-curr-item, .ll-player-wrap, .ll-ai-bubble
  )::before {
    content: none;
  }

  /* ── Chrome che RESTA vetro ────────────────────────────────
     lg-components copre gia' .lp-navbar, .lp-panel, .lp-auth-panel,
     .lp-dropdown, .lp-modal, .lp-toast, .lp-badge: non si toccano.
     Qui si estende la taglia lg-3 a .auth-card, la classe reale
     usata da Pages/Login.razor (non passa per AuthFormTemplate). */
  :root[data-ds="lg"] .auth-card {
    position: relative;
    backdrop-filter: blur(var(--lg-3)) saturate(var(--lg-sat)) !important;
    -webkit-backdrop-filter: blur(var(--lg-3)) saturate(var(--lg-sat)) !important;
    background-color: var(--lg-fill) !important;
    border: 1px solid var(--lg-edge) !important;
    border-radius: var(--lg-r-panel) !important;
    box-shadow:
      inset 0 1px 0 var(--lg-spec-top),
      inset 0 -1px 0 var(--lg-spec-bottom),
      var(--lg-shadow-3) !important;
  }

  /* ── Area admin ────────────────────────────────────────────
     Solo sfondo di base coerente col tema dark (--admin-bg-base e'
     gia' #06090D in admin-liquid-v500.css: qui si copre il wrapper,
     senza !important cosi' le superfici admin esistenti vincono).
     Il footer dell'area admin e' lavoro Razor di una fase successiva. */
  :root[data-ds="lg"] .lp-shell-unified[data-route-kind="admin"] {
    background-color: var(--lg-surface);
    background-color: #06090D;
  }

  /* ── CTA primaria: testo scuro su arancio (mockup liquid-glass-v2) ──
     Bianco su --c-orange (#E87C2A) e' ~2.8:1, sotto WCAG AA; il testo
     scuro #1A0F06 sale a 6.6:1. Vale per tutte le CTA primarie del sito
     (hero, navbar "Accedi", buy-box, form auth) sotto data-ds=lg. */
  :root[data-ds="lg"] .btn-primary {
    color: #1A0F06 !important;
    font-weight: 700;
  }

  /* ── Fallback: come lg-material/lg-components ────────────── */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root[data-ds="lg"] .auth-card {
      background-color: rgba(12, 16, 30, 0.92) !important;
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    :root[data-ds="lg"] .auth-card {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background-color: rgba(12, 16, 30, 0.94) !important;
    }
  }
  @media (forced-colors: active) {
    :root[data-ds="lg"] :is(
      .lp-card, .lp-content-panel, .lc-card, .course-card-premium,
      .stat-card, .section-card, .course-item, .review-card,
      .ll-curr-item, .ll-player-wrap, .ll-ai-bubble, .auth-card
    ) {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background-color: Canvas !important;
      border: 1px solid CanvasText !important;
      box-shadow: none !important;
    }
  }
}