/*
 * BIM Brain — vista mobile. Caricato solo sotto i 900px (attributo media in index.html)
 * e attivo solo quando bbm-mobile.js mette la classe "bbm" su <html>:
 * senza lo script, nessuna di queste regole si applica.
 *
 * Solo impaginazione per telefono e tablet in verticale. Colori, carattere e forme
 * arrivano da bbm-theme.css, uguale per desktop e mobile.
 */

html.bbm {
  --bbm-bar-h: 70px;
  --bbm-bar: calc(var(--bbm-bar-h) + env(safe-area-inset-bottom, 0px));
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* ── Guscio: lo spazio sopra la barra in basso ─────────────────────────── */
html.bbm.bbm-app .bbm-root {
  height: calc(100dvh - var(--bbm-bar)) !important;
}
@supports not (height: 100dvh) {
  html.bbm.bbm-app .bbm-root { height: calc(100vh - var(--bbm-bar)) !important; }
}

/* Altezze calcolate su 100vh dentro le schermate: riempiono lo spazio rimasto */
html.bbm .bbm-main [class*="h-[calc(100vh"],
html.bbm .bbm-main [class*="h-[calc(100dvh"],
html.bbm .bbm-main .h-screen {
  height: auto !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
}

/* ── Sidebar → menu a scomparsa ────────────────────────────────────────── */
html.bbm .bbm-root > aside {
  position: fixed !important;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(86vw, 320px) !important;
  z-index: 1001;
  transform: translateX(-104%);
  transition: transform .34s var(--bbm-ease), box-shadow .34s var(--bbm-ease);
  border-radius: 0 28px 28px 0;
  border-right: 0 !important;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html.bbm.bbm-drawer-open .bbm-root > aside {
  transform: none;
  box-shadow: 16px 0 48px rgba(57, 50, 160, .30);
}
/* maniglia di ridimensionamento: inutile al tocco */
html.bbm .bbm-root > aside > div[class*="cursor-col-resize"] { display: none !important; }
html.bbm .bbm-root > aside nav > button { min-height: 48px; border-radius: 999px !important; }
html.bbm .bbm-root > aside [class~="text-[9px]"],
html.bbm .bbm-root > aside [class~="text-[8.5px]"] { font-size: 11px !important; }

#bbm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(36, 32, 104, .38);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--bbm-ease);
}
html.bbm.bbm-drawer-open #bbm-overlay { opacity: 1; pointer-events: auto; }

/* ── Barra di navigazione in basso ─────────────────────────────────────── */
#bbm-bar { display: none; }
html.bbm.bbm-app #bbm-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45; /* sopra i contenuti e la barra commessa, sotto i modali (z-50) */
  height: var(--bbm-bar);
  padding: 0 6px env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: stretch;
  background: #FFFFFF;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -8px 28px rgba(57, 50, 160, .10);
}
html.bbm.bbm-drawer-open #bbm-bar { z-index: 1002; }
#bbm-bar button {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  border: 0;
  background: none;
  padding: 10px 0 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--bbm-muted);
  font: 500 12px/1.1 var(--bbm-display);
  cursor: pointer;
  touch-action: manipulation;
  transition: color .2s var(--bbm-ease);
}
#bbm-bar button[hidden] { display: none; }
#bbm-bar .bbm-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 30px;
  border-radius: 999px;
  transition: background-color .25s var(--bbm-ease), transform .2s var(--bbm-ease);
}
#bbm-bar .bbm-pill svg { width: 23px; height: 23px; stroke-width: 1.9; }
#bbm-bar .bbm-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* voce attiva: pillola Majorelle chiara, icona e testo Majorelle */
#bbm-bar button[aria-current="page"]:not(.bbm-fab) { color: var(--bbm-majorelle); font-weight: 600; }
#bbm-bar button[aria-current="page"]:not(.bbm-fab) .bbm-pill { background: var(--bbm-majorelle-soft); }
#bbm-bar button[aria-current="page"]:not(.bbm-fab) .bbm-pill svg { stroke-width: 2.2; }
#bbm-bar button:not(.bbm-fab):active .bbm-pill { transform: scale(.92); }

/* Assistente: il "sole" ocra al centro, rialzato */
#bbm-bar .bbm-fab { color: var(--bbm-lava); justify-content: flex-end; font-weight: 600; }
#bbm-bar .bbm-fab .bbm-pill {
  position: absolute;
  top: -24px;
  left: 50%;
  width: 62px;
  height: 62px;
  margin-left: -31px;
  border-radius: 50%;
  background: var(--bbm-ocra);
  color: var(--bbm-lava);
  border: 5px solid #FFFFFF;
  box-shadow: 0 8px 20px rgba(196, 136, 30, .38);
  transition: transform .24s var(--bbm-ease), background-color .24s var(--bbm-ease), color .24s var(--bbm-ease), box-shadow .24s var(--bbm-ease);
}
#bbm-bar .bbm-fab .bbm-pill svg { width: 28px; height: 28px; stroke-width: 2.1; }
#bbm-bar .bbm-fab[aria-current="page"] { color: var(--bbm-majorelle); }
#bbm-bar .bbm-fab[aria-current="page"] .bbm-pill {
  background: var(--bbm-majorelle);
  color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(84, 80, 218, .42), 0 0 0 4px var(--bbm-ocra-soft);
}
#bbm-bar .bbm-fab:active .bbm-pill { transform: scale(.93); }

#bbm-bar button:focus-visible { outline: none; }
#bbm-bar button:focus-visible .bbm-pill { outline: 2px solid var(--bbm-majorelle); outline-offset: 3px; }

@media (max-width: 359px) {
  #bbm-bar button { font-size: 10.5px; }
  #bbm-bar .bbm-pill { width: 48px; }
  #bbm-bar .bbm-fab .bbm-pill { width: 56px; height: 56px; margin-left: -28px; top: -20px; }
}
@media (prefers-reduced-motion: reduce) {
  html.bbm .bbm-root > aside, #bbm-overlay, #bbm-bar button, #bbm-bar .bbm-pill { transition: none !important; }
}

/* ── Barra della commessa: una riga, angoli arrotondati, niente scorciatoie doppie ── */
html.bbm .bbm-main > div.sticky:first-child {
  padding: 12px 16px 14px !important;
  padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  gap: 8px !important;
  border-radius: 0 0 24px 24px;
}
html.bbm .bbm-main > div.sticky:first-child::after { right: -34px; bottom: -46px; }
html.bbm .bbm-main > div.sticky:first-child > div:last-child { display: none !important; }
html.bbm .bbm-main > div.sticky:first-child > div:first-child { flex: 1 1 auto; min-width: 0; }
html.bbm .bbm-main > div.sticky:first-child select {
  max-width: calc(100vw - 160px) !important;
  min-height: 36px;
  font-size: 17px !important;
}
html.bbm .bbm-main > div.sticky:first-child > div:first-child > div:first-child { width: 36px !important; height: 36px !important; }
html.bbm .bbm-main div[class~="bg-indigo-600"][class~="text-white"][class~="justify-between"][class~="flex-shrink-0"] { padding: 12px 16px !important; }
html.bbm .bbm-main div[class~="bg-indigo-600"][class~="text-white"][class~="justify-between"][class~="flex-shrink-0"] h2 { font-size: 17px !important; }

/* Assistente fluttuante: su mobile c'è la voce "Assistente" nella barra in basso */
html.bbm.bbm-app div[class~="fixed"][class~="bottom-8"][class~="right-6"][class~="pointer-events-none"] { display: none !important; }

/* ── Leggibilità: niente testi sotto i 12px ────────────────────────────── */
html.bbm .bbm-main [class~="text-[7px]"],
html.bbm .bbm-main [class~="text-[7.5px]"],
html.bbm .bbm-main [class~="text-[8px]"],
html.bbm .bbm-main [class~="text-[8.5px]"],
html.bbm .bbm-main [class~="text-[9px]"],
html.bbm .bbm-main [class~="text-[9.5px]"],
html.bbm .bbm-main [class~="text-[10px]"],
html.bbm .bbm-main [class~="text-[10.5px]"],
html.bbm .bbm-main [class~="text-[11px]"],
html.bbm .bbm-main [class~="text-[11.5px]"],
html.bbm [class*="fixed"][class*="inset-0"] [class~="text-[8px]"],
html.bbm [class*="fixed"][class*="inset-0"] [class~="text-[9px]"],
html.bbm [class*="fixed"][class*="inset-0"] [class~="text-[10px]"],
html.bbm [class*="fixed"][class*="inset-0"] [class~="text-[11px]"] {
  font-size: 12px !important;
  letter-spacing: .02em !important;
}
html.bbm .bbm-main > div.sticky:first-child span[class~="rounded-full"][class~="border"] { font-size: 12px !important; }

/* Aree di tocco: nessun pulsante sotto i 40px di altezza */
html.bbm .bbm-main button:not([disabled]),
html.bbm .bbm-main [role="button"],
html.bbm .bbm-main a[class*="flex"] { min-height: 40px; }
html.bbm .bbm-main button:has(> svg:only-child) { min-width: 40px; }

/* Titoli da desktop troppo grandi per un telefono */
html.bbm .bbm-main [class~="text-6xl"],
html.bbm .bbm-main [class~="text-5xl"] { font-size: 32px !important; line-height: 1.15 !important; }
html.bbm .bbm-main [class~="text-4xl"] { font-size: 28px !important; line-height: 1.2 !important; }
html.bbm .bbm-main [class~="text-3xl"] { font-size: 24px !important; line-height: 1.25 !important; }

/* Campi a 16px: nessuno zoom automatico quando si tocca un campo */
html.bbm input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html.bbm textarea,
html.bbm select {
  font-size: 16px !important;
}

/* ── Spazi: meno margini da desktop ────────────────────────────────────── */
html.bbm .bbm-main [class~="p-8"],
html.bbm .bbm-main [class~="p-10"],
html.bbm .bbm-main [class~="p-12"] { padding: 16px !important; }
html.bbm .bbm-main [class~="px-8"],
html.bbm .bbm-main [class~="px-10"],
html.bbm .bbm-main [class~="px-12"] { padding-left: 16px !important; padding-right: 16px !important; }
html.bbm .bbm-main [class~="py-10"],
html.bbm .bbm-main [class~="py-12"] { padding-top: 20px !important; padding-bottom: 20px !important; }

/* ── Tabelle: scorrono in orizzontale dentro la pagina, senza rompere il layout ── */
html.bbm .bbm-main table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Elementi visibili solo al passaggio del mouse: sul touch restano visibili ── */
html.bbm [class*="group-hover:opacity-100"] { opacity: 1 !important; }
html.bbm [class*="group-hover:visible"] { visibility: visible !important; }

/* ── Pulsanti fluttuanti: sopra la barra in basso ──────────────────────── */
html.bbm.bbm-app [class~="fixed"][class*="bottom-"]:not([class*="inset-0"]) {
  bottom: calc(var(--bbm-bar) + 12px) !important;
}

/* ── Modali: quasi a tutto schermo, con scorrimento ────────────────────── */
html.bbm [class~="fixed"][class~="inset-0"] > div[class*="max-w-"] {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}

/* ── Griglie: telefoni stretti ─────────────────────────────────────────── */
@media (max-width: 599px) {
  html.bbm .bbm-main [class~="grid-cols-3"] { grid-template-columns: minmax(0, 1fr) !important; }
  html.bbm .bbm-main [class~="grid-cols-4"],
  html.bbm .bbm-main [class~="grid-cols-5"],
  html.bbm .bbm-main [class~="grid-cols-6"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html.bbm .bbm-main [class~="p-6"] { padding: 16px !important; }
  html.bbm .bbm-main [class~="px-6"] { padding-left: 16px !important; padding-right: 16px !important; }

  /* Pannelli affiancati con larghezza fissata (es. cartelle + registro documenti): uno sopra l'altro */
  html.bbm .bbm-main div.flex.flex-1.overflow-hidden:has(> div.flex-shrink-0.border-r[style*="width"]) {
    flex-direction: column;
    overflow-y: auto !important;
  }
  html.bbm .bbm-main div.flex.flex-1.overflow-hidden > div.flex-shrink-0.border-r[style*="width"] {
    width: 100% !important;
    max-height: 38vh;
    overflow-y: auto;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
  }
  html.bbm .bbm-main div.flex.flex-1.overflow-hidden:has(> div.flex-shrink-0.border-r[style*="width"]) > [class~="w-1/3"] {
    width: 100% !important;
    border-left: 0 !important;
  }
}