/*
 * BIM Brain — tema grafico B² per l'app (desktop e mobile).
 *
 * Solo aspetto: nessun dato, link, connessione o logica viene toccato. Le regole valgono
 * solo quando bbm-mobile.js ha riconosciuto il guscio dell'app (classe "bbm-theme" su <html>):
 * landing, login e pagine pubbliche restano come sono. Se lo script non parte, l'app resta
 * con la grafica di prima.
 *
 * Linguaggio dell'ecosistema B², come b2-hub.it: Blu Majorelle + Giallo Ocra, forme a pillola,
 * molto bianco, titoli in Outfit. Minimale, con un solo gesto forte: il "sole" ocra che sorge
 * nella fascia Majorelle della commessa.
 *
 * Diritti: Outfit è sotto SIL Open Font License 1.1 (licenza in /assets/fonts/OFL-Outfit.txt),
 * ospitato nel sito, nessuna chiamata a Google. Nessuna immagine esterna: solo CSS.
 * Colori presi da b2-website/app/globals.css (Majorelle oklch(0.52 0.205 278), Ocra oklch(0.76 0.132 78)).
 */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/outfit-var.woff') format('woff');
}

html.bbm-theme,
html.bbm {
  --bbm-majorelle: #5450DA;
  --bbm-majorelle-deep: #3932A0;
  --bbm-majorelle-soft: #ECEBFC;
  --bbm-mist: #F3F3FA;
  --bbm-ocra: #DFA642;
  --bbm-ocra-soft: #FEF1DA;
  --bbm-ocra-ink: #6B4A0E;
  --bbm-lava: #2E2E2E;
  --bbm-muted: #6B6F87;
  --bbm-display: 'Outfit', Inter, system-ui, sans-serif;
  --bbm-ease: cubic-bezier(.16, 1, .3, 1);
}
html.bbm-theme { accent-color: var(--bbm-majorelle); }
html.bbm-theme ::selection { background: var(--bbm-majorelle); color: #FFFFFF; }

/* ── Fondo: bianco appena azzurrato al posto del beige ─────────────────── */
html.bbm-theme .bbm-root { background: var(--bbm-mist) !important; }

/* ── Titoli in Outfit ───────────────────────────────────────────────────── */
html.bbm-theme .bbm-main h1,
html.bbm-theme .bbm-main h2,
html.bbm-theme .bbm-main h3 {
  font-family: var(--bbm-display) !important;
  font-weight: 650 !important;   /* il nero (900) di Outfit stringe gli spazi tra le parole */
  letter-spacing: -.005em !important;
  word-spacing: .04em;
}

/* ── Colore d'azione: il verde dell'app diventa Majorelle, il nero diventa lava ── */
html.bbm-theme .bbm-root button[class*="bg-[#0D6E47]"],
html.bbm-theme .bbm-root a[class*="bg-[#0D6E47]"] {
  background: var(--bbm-majorelle) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(84, 80, 218, .26) !important;
}
html.bbm-theme .bbm-root button[class*="bg-[#0D6E47]"]:hover,
html.bbm-theme .bbm-root a[class*="bg-[#0D6E47]"]:hover { background: var(--bbm-majorelle-deep) !important; }
html.bbm-theme .bbm-main button[class~="bg-black"],
html.bbm-theme .bbm-main button[class~="bg-neutral-900"] { background: var(--bbm-lava) !important; }
html.bbm-theme .bbm-main button[class*="bg-[#0D6E47]"],
html.bbm-theme .bbm-main button[class~="bg-black"],
html.bbm-theme .bbm-main button[class~="bg-neutral-900"] { border-radius: 999px !important; }
/* gli altri blu e viola dei pulsanti (indigo, blue, violet) si allineano al Majorelle */
html.bbm-theme .bbm-root button:is([class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-indigo-700"], [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-violet-500"], [class~="bg-violet-600"], [class~="bg-violet-700"]),
html.bbm-theme .bbm-root a:is([class~="bg-indigo-600"], [class~="bg-blue-600"], [class~="bg-violet-600"]) {
  background-color: var(--bbm-majorelle) !important;
  color: #FFFFFF !important;
}
html.bbm-theme .bbm-root button:is([class~="bg-indigo-500"], [class~="bg-indigo-600"], [class~="bg-indigo-700"], [class~="bg-blue-500"], [class~="bg-blue-600"], [class~="bg-blue-700"], [class~="bg-violet-500"], [class~="bg-violet-600"], [class~="bg-violet-700"]):hover { background-color: var(--bbm-majorelle-deep) !important; }
/* pulsante tondo dell'assistente in basso a destra (desktop): il "sole" ocra, come al centro della barra mobile */
html.bbm-theme div[class~="fixed"][class~="bottom-8"][class~="right-6"] > button[class~="rounded-full"][class~="h-16"] {
  background: var(--bbm-ocra) !important;
  color: var(--bbm-lava) !important;
  border: 5px solid #FFFFFF;
  box-shadow: 0 10px 26px rgba(196, 136, 30, .38) !important;
}
html.bbm-theme div[class~="fixed"][class~="bottom-8"][class~="right-6"] > button[class~="rounded-full"][class~="h-16"]:hover { background: #E9B65C !important; }
html.bbm-theme div[class~="fixed"][class~="bottom-8"][class~="right-6"] > button[class~="rounded-full"][class~="h-16"] svg { color: var(--bbm-lava) !important; }
html.bbm-theme .bbm-root [class~="text-[#0D6E47]"] { color: var(--bbm-majorelle) !important; }
html.bbm-theme .bbm-root [class*="bg-[#EAFBF1]"] { background: var(--bbm-majorelle-soft) !important; border-color: rgba(84, 80, 218, .18) !important; }

html.bbm-theme .bbm-root button:focus-visible,
html.bbm-theme .bbm-root a:focus-visible,
html.bbm-theme .bbm-root select:focus-visible {
  outline: 2px solid var(--bbm-majorelle) !important;
  outline-offset: 2px;
}

/* ── Grigi chiari dell'app: più scuri, leggibili (4,9:1 sul bianco) ────── */
html.bbm-theme .bbm-root [class~="text-neutral-300"],
html.bbm-theme .bbm-root [class~="text-neutral-400"],
html.bbm-theme .bbm-main [class~="text-neutral-500"],
html.bbm-theme .bbm-main [class~="text-gray-300"],
html.bbm-theme .bbm-main [class~="text-gray-400"],
html.bbm-theme .bbm-main [class~="text-gray-500"],
html.bbm-theme .bbm-main [class~="text-slate-400"],
html.bbm-theme .bbm-main [class~="text-zinc-400"] { color: var(--bbm-muted) !important; }
html.bbm-theme .bbm-main input::placeholder,
html.bbm-theme .bbm-main textarea::placeholder { color: var(--bbm-muted) !important; opacity: 1; }

/* ── Sidebar: pillole, voce attiva Majorelle ───────────────────────────── */
html.bbm-theme .bbm-root > aside { border-right-color: rgba(84, 80, 218, .10) !important; }
html.bbm-theme .bbm-root > aside nav > button { border-radius: 999px !important; transition: background-color .2s var(--bbm-ease), color .2s var(--bbm-ease); }
html.bbm-theme .bbm-root > aside nav > button:not([class*="bg-[#0D6E47]"]):hover { background: var(--bbm-majorelle-soft) !important; color: var(--bbm-majorelle-deep) !important; }
html.bbm-theme .bbm-root > aside nav > button[class*="bg-[#0D6E47]"] {
  background: var(--bbm-majorelle) !important;
  box-shadow: 0 4px 14px rgba(84, 80, 218, .30) !important;
}
html.bbm-theme .bbm-root > aside nav > p {
  font-family: var(--bbm-display);
  letter-spacing: .14em !important;
}
/* riquadro "commessa attiva": ocra */
html.bbm-theme .bbm-root > aside nav > div[class*="bg-[#EAFBF1]"] {
  background: var(--bbm-ocra-soft) !important;
  border-color: rgba(223, 166, 66, .45) !important;
  border-radius: 18px !important;
}
html.bbm-theme .bbm-root > aside nav > div[class*="bg-[#EAFBF1]"] p { color: var(--bbm-ocra-ink) !important; }
html.bbm-theme .bbm-root > aside nav > div[class*="bg-[#EAFBF1]"] p + p { font-family: var(--bbm-display); font-weight: 600 !important; }

/* ── Fascia della commessa: Majorelle con il "sole" ocra ───────────────── */
html.bbm-theme .bbm-main > div.sticky:first-child {
  overflow: hidden;
  background: var(--bbm-majorelle) !important;
  border-bottom: 0 !important;
  box-shadow: 0 6px 18px rgba(57, 50, 160, .20) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.bbm-theme .bbm-main > div.sticky:first-child::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -52px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--bbm-ocra);
  pointer-events: none;
}
html.bbm-theme .bbm-main > div.sticky:first-child > * { position: relative; z-index: 1; }
html.bbm-theme .bbm-main > div.sticky:first-child select {
  color: #FFFFFF !important;
  font-family: var(--bbm-display) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: -.005em;
}
html.bbm-theme .bbm-main > div.sticky:first-child select option { color: var(--bbm-lava); }
html.bbm-theme .bbm-main > div.sticky:first-child svg { color: rgba(255, 255, 255, .85) !important; }
html.bbm-theme .bbm-main > div.sticky:first-child > div:first-child > div:first-child {
  background: rgba(255, 255, 255, .16) !important;
  border-color: transparent !important;
  border-radius: 999px !important;
}
html.bbm-theme .bbm-main > div.sticky:first-child > div:first-child > div:first-child svg { color: #FFFFFF !important; }
html.bbm-theme .bbm-main > div.sticky:first-child span[class~="rounded-full"][class~="border"] {
  background: #FFFFFF !important;
  border-color: transparent !important;
  color: var(--bbm-majorelle-deep) !important;
}
/* scorciatoie a destra (solo desktop): pillole chiare sul blu, non spariscono sul sole */
html.bbm-theme .bbm-main > div.sticky:first-child > div:last-child button {
  border-radius: 999px !important;
  box-shadow: none !important;
}
html.bbm-theme .bbm-main > div.sticky:first-child > div:last-child button[class~="bg-neutral-100"] {
  background: rgba(255, 255, 255, .16) !important;
  color: #FFFFFF !important;
}
html.bbm-theme .bbm-main > div.sticky:first-child > div:last-child button[class~="bg-neutral-100"]:hover { background: rgba(255, 255, 255, .26) !important; }
html.bbm-theme .bbm-main > div.sticky:first-child > div:last-child button[class*="bg-[#0D6E47]"] {
  background: #FFFFFF !important;
  color: var(--bbm-majorelle-deep) !important;
}
html.bbm-theme .bbm-main > div.sticky:first-child > div:last-child button[class*="bg-[#0D6E47]"] svg { color: var(--bbm-majorelle-deep) !important; }
html.bbm-theme .bbm-main > div.sticky:first-child > div:last-child button[class*="bg-[#0D6E47]"]:hover { background: var(--bbm-ocra-soft) !important; }

/* ── Assistente: intestazione bianca, niente viola acceso ──────────────── */
html.bbm-theme .bbm-root div[class~="bg-indigo-600"][class~="text-white"][class~="justify-between"][class~="flex-shrink-0"] {
  background: #FFFFFF !important;
  color: var(--bbm-majorelle) !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(84, 80, 218, .12);
}
html.bbm-theme .bbm-root div[class~="bg-indigo-600"][class~="text-white"][class~="justify-between"][class~="flex-shrink-0"] [class~="text-white"],
html.bbm-theme .bbm-root div[class~="bg-indigo-600"][class~="text-white"][class~="justify-between"][class~="flex-shrink-0"] svg { color: var(--bbm-majorelle) !important; }
html.bbm-theme .bbm-root div[class~="bg-indigo-600"][class~="text-white"][class~="justify-between"][class~="flex-shrink-0"] [class*="bg-white/10"] {
  background: var(--bbm-ocra-soft) !important;
  border-color: transparent !important;
  color: var(--bbm-ocra-ink) !important;
  border-radius: 999px !important;
}
html.bbm-theme .bbm-root div[class~="bg-indigo-600"][class~="text-white"][class~="justify-between"][class~="flex-shrink-0"] [class~="text-indigo-100/70"] { color: var(--bbm-ocra-ink) !important; }
html.bbm-theme .bbm-root div[class~="bg-indigo-600"][class~="text-white"][class~="justify-between"][class~="flex-shrink-0"] h2 { font-size: 16px !important; }
/* casella della chat: pillola, invio ocra */
html.bbm-theme .bbm-main form textarea {
  border-radius: 26px !important;
  border-color: rgba(84, 80, 218, .25) !important;
  padding-left: 20px !important;
  background: #FFFFFF !important;
}
html.bbm-theme .bbm-main form textarea:focus { border-color: var(--bbm-majorelle) !important; box-shadow: 0 0 0 3px rgba(84, 80, 218, .14) !important; }
html.bbm-theme .bbm-main form button[type="submit"] {
  border-radius: 50% !important;
  background: var(--bbm-ocra) !important;
  color: var(--bbm-lava) !important;
}
html.bbm-theme .bbm-main form button[type="submit"]:disabled { background: #ECEAF4 !important; color: #8E90A6 !important; }

@media (prefers-reduced-motion: reduce) {
  html.bbm-theme .bbm-root > aside nav > button { transition: none !important; }
}

/* ==========================================================================
   SITO PUBBLICO: home (.bb-landing) e accesso (.bb-login)
   La veste esistente (landing-restyle.css) usa poche variabili di colore: qui le
   portiamo a Majorelle/Ocra come b2-hub.it e sostituiamo gli angoli smussati con le
   forme morbide di b2-hub.it. Selettori "body …" per prevalere senza toccare quel file.
   Nessun testo, link o funzione cambia.
   ========================================================================== */
body .bb-landing,
body .bb-login {
  --navy: #5450DA;          /* Majorelle */
  --navy-deep: #3932A0;
  --copper: #DFA642;        /* Ocra */
  --copper-ink: #6B4A0E;
  --ink: #2E2E2E;           /* pietra lavica */
  --ink-soft: #565A73;
  --tone: #F3F3FA;
  --tone-2: #ECEBFC;
  --font-display: 'Outfit', 'Inter', ui-sans-serif, system-ui, sans-serif;
}
body .bb-landing ::selection { background: #5450DA; color: #FFFFFF; }

/* titoli in Outfit, come b2-hub.it */
body .bb-landing :is(h1, h2),
body .bb-login :is(h1, h2, .text-2xl) {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}
body .bb-landing h3 { font-family: 'Outfit', 'Inter', sans-serif; font-weight: 600; letter-spacing: -0.01em; }

/* forme: niente smussi, pulsanti a pillola, schede arrotondate */
body .bb-landing :is([class*="px-8"][class*="py-4"], [class*="px-6"][class*="py-2.5"], [class*="px-6"][class*="py-3"],
  [class*="rounded-[2.5rem]"], [class*="rounded-[2rem]"], [class*="h-[300px]"], [class*="h-12 w-12 rounded-full"]),
body .bb-landing > nav [class*="gap-8"] a[href="/spoolforge"] > span { clip-path: none; }
body .bb-landing [class*="rounded"] { border-radius: 14px; }
body .bb-landing :is([class*="rounded-[2.5rem]"], [class*="rounded-[2rem]"], [class*="rounded-3xl"]) { border-radius: 28px; }
body .bb-landing :is(a, button)[class*="px-8"],
body .bb-landing :is(a, button)[class*="px-6"],
body .bb-landing :is(a, button)[class*="px-5"],
body .bb-landing :is(a, button)[class*="px-4"],
body .bb-landing [class*="rounded-full"] { border-radius: 999px; }
body .bb-login > div[class*="max-w-md"] { border-radius: 28px; clip-path: none; }
html body .bb-login :is(button, input, select)[class] { border-radius: 999px; clip-path: none; }
html body .bb-login :is(input, select)[class] { padding-left: 18px; }
html body .bb-login [class~="bg-neutral-100"][class~="p-1"][class] { border-radius: 999px; }

/* il sole ocra che sorge dietro il titolo, con un riflesso Majorelle: un solo gesto, nessuna immagine */
body .bb-landing > header { isolation: isolate; }
body .bb-landing > header::before,
body .bb-landing > header::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
body .bb-landing > header::before {
  width: clamp(220px, 30vw, 420px);
  height: clamp(220px, 30vw, 420px);
  right: max(-120px, -8vw);
  top: 90px;
  background: #DFA642;
}
body .bb-landing > header::after {
  width: clamp(90px, 10vw, 150px);
  height: clamp(90px, 10vw, 150px);
  left: max(-40px, -3vw);
  bottom: 40px;
  background: #5450DA;
}
@media (max-width: 640px) {
  body .bb-landing > header::before { width: 150px; height: 150px; right: -75px; top: 64px; }
  body .bb-landing > header::after { display: none; }
}
html body .bb-login button[class~="bg-black"][class],
html body .bb-login button[class~="bg-amber-500"][class] { border-radius: 999px; clip-path: none; }
body .bb-landing [class*="bg-[#09447D]"] { background-color: #3932A0; }