/* =============================================
   CRI Vue overrides
   =============================================
   Override Vue-specific sopra il design system del centralino. Il
   centralino è PHP server-side: i dropdown si aprono via `:hover` puro
   CSS oppure con classe `.show` aggiunta in JS. Il nostro MainLayout.vue
   gestisce gli stati con `:class="{ 'cri-open': userMenuOpen }"` per
   evitare gli stutter del solo hover sui touch screen: qui aggiungiamo
   il selettore equivalente.

   Tutti gli override DEVONO essere additive: niente modifiche al
   centralino base. Quando il centralino aggiorna il suo design,
   sincronizziamo cri-style.css + cri-app.css e questo file resta.
*/

/* === Dropdown navbar: alias .cri-open ↔ .show del centralino === */
.cri-nav-dropdown.cri-open > .cri-nav-dropdown-menu {
  display: block;
}

/* Trigger ben cliccabile (Vue lo rende come <button>, il centralino come <a>) */
.cri-nav-dropdown .cri-nav-dropdown-trigger {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--cri-radius, 6px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cri-dark);
  font-size: 14px;
  font-weight: 500;
}
.cri-nav-dropdown .cri-nav-dropdown-trigger:hover {
  background: var(--cri-gray-light);
}

.cri-nav-dropdown-caret {
  font-size: 10px;
  margin-left: 2px;
  opacity: 0.7;
}

.cri-nav-dropdown-divider {
  display: block;
  height: 1px;
  background: var(--cri-gray-light);
  margin: 4px 0;
}

.cri-nav-user-header {
  padding: 10px 14px 6px;
  color: var(--cri-dark);
  font-size: 13px;
  border-bottom: 1px solid var(--cri-gray-light);
  margin-bottom: 4px;
}
.cri-nav-user-header strong {
  display: block;
  font-weight: 700;
}
.cri-nav-user-header small {
  display: block;
  font-size: 11px;
  color: var(--cri-gray);
  margin-top: 2px;
}

/* === Container largo per gestionale operativo ===
   Il `.cri-container` del centralino ha max-width: 1200px, ottimale per
   un sito istituzionale ma stretto per una console dispatcher su monitor
   grandi (FullHD/2K). Lo allarghiamo e usiamo padding laterale modesto. */
.cri-container {
  max-width: 1600px;
  padding: 0 24px;
}
/* Sotto i 1280px lasciamo il container fluido (no overflow orizzontale). */
@media (max-width: 1280px) {
  .cri-container { max-width: 100%; padding: 0 16px; }
}

/* Pagine operative (Sala Operativa, console CAD) usano full-width */
.cri-container-fluid {
  max-width: 100%;
  padding: 0 16px;
  margin: 0 auto;
}

/* === Cantiere context bar (banner sopra al main quando attivo) === */
.mf-banner {
  background: linear-gradient(180deg, #FFF4E5 0%, #FFE9CC 100%);
  border-bottom: 2px solid var(--cri-orange);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.mf-banner strong {
  color: var(--cri-orange);
}
.mf-title {
  font-weight: 500;
}
.mf-spacer {
  flex: 1;
}
.mf-banner .mf-btn {
  margin-left: auto;
}