/* Se vuoi cambiare globalmente l’opacità, modifica solo questa variabile: */
:root {
  /*--bs-bg-alpha-opacity: 0.2;*/
}

/* Alpha-background per tutti i colori standard di Bootstrap 5 */
.bg-primary-alpha   { background-color: rgba(var(--bs-primary-rgb),   var(--bs-bg-alpha-opacity)) !important; }
.bg-secondary-alpha { background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-alpha-opacity)) !important; }
.bg-info-alpha      { background-color: rgba(var(--bs-info-rgb),      var(--bs-bg-alpha-opacity)) !important; }
.bg-light-alpha     { background-color: rgba(var(--bs-light-rgb),     var(--bs-bg-alpha-opacity)) !important; }
.bg-dark-alpha      { background-color: rgba(var(--bs-dark-rgb),      var(--bs-bg-alpha-opacity)) !important; }

/* Imposta una larghezza fissa per ogni "quadratino" */
.custom-box {
  /* Puoi modificare la larghezza a seconda delle tue esigenze */
  flex: 0 0 200px;
}

/* Assicura che la Card abbia un'altezza minima fissa */
.custom-box .card {
  height: 130px; /* Regola l'altezza in base al contenuto desiderato */
}

/* Se vuoi un maggiore controllo sulle righe interne, ad esempio ridurre i margini: */
.name-row { min-height: 1.5em; }
.icon-row { min-height: 1.5em; }
.text-row { min-height: 1.2em; }

/* tutti i nav-item / btn-group / topbar-btn in header in primo piano */
header.navbar .navbar-nav .nav-item,
header.navbar .btn-group,
header.navbar .topbar-btn {
  position: relative;
  z-index: 5000 !important;
}

/* assicuriamoci che il button non vada a capo */
.topbar-btn {
  white-space: nowrap;
}

/* nascondi sempre gli expandable */
.topbar-btn .expandable {
  display: none !important;
  transition: all 0.2s ease;
  white-space: nowrap;  /* evita a capo interno */
}

/* al hover/focus li mostro come inline-flex, quindi orizzontali e allineati */
.topbar-btn:hover .expandable,
.topbar-btn:focus .expandable {
  display: inline-flex !important;
  align-items: center;
  gap: .25rem;       /* spazio tra badge e slash */
}

/* allineo verticalmente icona e badge */
.topbar-btn i,
.topbar-btn .expandable > * {
  vertical-align: middle;
}

/* RIDEFINIZIONE colori base bootstrap */
.header–pastel {
  filter: saturate(0.6) brightness(1.1);
}

/* assicura che il wrapper non clippi */
#wrapper_monitoraggio {
  overflow: visible !important;
  white-space: nowrap;  
}

/* 1) Assicuriamoci che né l’header né il wrapper clipino mai i figli */
header.navbar,
header.navbar .container-fluid,
#wrapper_monitoraggio {
  overflow: visible !important;
  position: relative !important;
}

/* 2) di base i box stanno “ritagliati” a 55px */
.monitor-box {
  max-height: 55px;
  overflow: hidden;
}

.monitor-popover {
  position: absolute;
  background: #fff9c4;      /* giallo pastello chiaro */
  border: 1px solid #ffd54f; /* bordo giallo pieno */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: .5rem;
  z-index: 3000;
  max-width: 90vw;          /* limiti ragionevoli */
  overflow: auto;
  white-space: normal;
}