/* BAM Vision account menu placement.
   Tablet/desktop/PWA: every account popover is anchored above the sidebar profile.
   Phone: existing top-right behaviour remains unchanged.

   10 AGOSTO 2026 - PERCHE' SU IPAD IL PANNELLO FINIVA IN ALTO.
   Questa regola nasce il 26 luglio e agisce sulla classe .bam-account-menu, che
   la disegna bam-screen-shell-native.js. Ma quel file NON e' piu' caricato da
   app.html: la classe non esiste piu' e la regola correggeva un menu che non si
   apre. Intanto, dal 25 luglio, il pannello vero lo disegna
   bam-account-logout-fix.js - nato per rendere affidabile la disconnessione da
   telefono - con classe .bam-account-logout-panel, che questa regola non
   nominava. Due rattoppi per lo stesso problema che si erano persi di vista.
   Qui il pannello vero viene finalmente ancorato sopra il profilo, come tutti
   gli altri. Il rattoppo JS resta: e' lui che fa funzionare la disconnessione. */
@media (min-width: 700px) {
  .bam-account-logout-panel {
    left: 16px !important;
    right: auto !important;
    top: auto !important;
    bottom: 92px !important;
    width: min(320px, calc(100vw - 32px)) !important;
    transform: none !important;
    margin: 0 !important;
  }

  .bam-account-menu,
  .bam-account-menu-top,
  .bam-account-top .bam-account-menu,
  .bam-sidebar .bam-account-menu {
    position: fixed !important;
    left: 16px !important;
    right: auto !important;
    top: auto !important;
    bottom: 92px !important;
    width: 194px !important;
    max-width: calc(100vw - 32px) !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 10020 !important;
  }
}

/* --------------------------------------------------------------------------
   Affina: una foto, un campo, un pulsante.
   -------------------------------------------------------------------------- */
#bam-affina {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(3, 12, 26, .82);
  display: grid;
  place-items: center;
  padding: 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#bam-affina .bam-affina-box {
  width: min(1040px, 100%);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  background: #071c34;
  border: 1px solid rgba(216, 173, 90, .3);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

#bam-affina header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

#bam-affina header span {
  font-size: 10px;
  letter-spacing: .18em;
  color: #d8ad5a;
}

#bam-affina header h3 {
  margin: 2px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  color: #e8dcc8;
}

#bam-affina header button {
  border: 0;
  background: transparent;
  color: #aeb8c8;
  font-size: 30px;
  line-height: 1;
  padding: 0 6px;
}

#bam-affina .bam-affina-corpo {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 20px;
  padding: 20px;
}

#bam-affina img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

#bam-affina .bam-affina-campo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#bam-affina label {
  font-size: 13px;
  color: #aeb8c8;
}

#bam-affina textarea {
  flex: 1;
  min-height: 190px;
  resize: vertical;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(4, 16, 31, .9);
  color: #e8dcc8;
  font: 15px/1.5 Inter, system-ui, sans-serif;
}

#bam-affina small {
  color: #8fa0b6;
  font-size: 12px;
}

#bam-affina .bam-primary {
  min-height: 50px;
  justify-content: center;
}

@media (max-width: 820px) {
  #bam-affina .bam-affina-corpo {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }
  #bam-affina textarea { min-height: 150px; }
}

/* Affinamento: stato della lavorazione dentro la stessa pagina. */
#bam-affina .bam-affina-lavoro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

#bam-affina .bam-affina-kicker {
  font-size: 10px;
  letter-spacing: .18em;
  color: #d8ad5a;
}

#bam-affina .bam-affina-lavoro h4 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  color: #e8dcc8;
  font-weight: 500;
}

#bam-affina .bam-affina-barra {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}

#bam-affina .bam-affina-barra i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b8893a, #e2c078);
  transition: width .6s ease;
}

#bam-affina .bam-affina-lavoro p {
  margin: 0;
  font-size: 13px;
  color: #8fa0b6;
}

/* Rotella accanto allo stato: il broker vede che il lavoro sta girando
   anche quando la percentuale resta ferma per qualche secondo. */
#bam-affina .bam-affina-rotella {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid rgba(232, 220, 200, .22);
  border-top-color: #d8ad5a;
  animation: bam-affina-giro .8s linear infinite;
}

@keyframes bam-affina-giro {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #bam-affina .bam-affina-rotella { animation-duration: 2.4s; }
}

/* Numero d'ordine sulla vista selezionata: si legge sopra la spunta dorata. */
.bam-active-result > span.bam-ordine-scelta {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font: 700 15px/1 Inter, system-ui, sans-serif;
  color: #071c34;
  letter-spacing: 0;
}

.bam-active-result > span.bam-ordine-scelta svg,
.bam-active-result > span.bam-ordine-scelta i { display: none !important; }