/* ============================================================================
   layout.css — la struttura della pagina: navbar, barra laterale, contenitori
   ============================================================================

   Caricato da base/_head.html per ogni pagina. Era `navigation.css`; il nome è
   cambiato perché qui sta la STRUTTURA, non solo la navigazione — e perché un
   file che si chiama come una delle cose che contiene attira dentro di sé tutto
   il resto.

   Ogni `@media` di questo file usa `min-width`: il caso stretto è la regola di
   base. Vedi la nota normativa in cima a tokens.css.
   ============================================================================ */

/* ===== NAVBAR ENHANCEMENTS ===== */
.app-header {
  background: var(--vaitony-bg-primary);
  border-bottom: 1px solid var(--vaitony-border-light);
  box-shadow: var(--vaitony-shadow-sm);
  transition: all var(--vaitony-transition-base);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
}

[data-bs-theme="dark"] .app-header {
  background: rgba(33, 37, 41, 0.95);
  border-bottom-color: var(--vaitony-border-dark);
}

.navbar-nav .nav-link {
  position: relative;
  color: var(--vaitony-text-secondary);
  transition: all var(--vaitony-transition-fast);
  padding: var(--vaitony-space-2) var(--vaitony-space-3);
  border-radius: var(--vaitony-radius-base);
  display: flex;
  align-items: center;
  gap: var(--vaitony-space-2);
}

.navbar-nav .nav-link:hover {
  color: var(--vaitony-primary-600);
  background: var(--vaitony-primary-50);
}

.navbar-nav .nav-link i {
  font-size: 1.25rem;
  transition: all var(--vaitony-transition-fast);
}

.navbar-nav .nav-link:hover i {
  transform: scale(1.1);
}

/* Breadcrumb styling */
.breadcrumb {
  margin: 0;
  background: transparent;
  padding: 0;
}

.breadcrumb-item {
  font-size: var(--vaitony-font-size-sm);
  color: var(--vaitony-text-secondary);
}

.breadcrumb-item a {
  color: var(--vaitony-text-secondary);
  text-decoration: none;
  transition: all var(--vaitony-transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--vaitony-space-1);
}

.breadcrumb-item a:hover {
  color: var(--vaitony-primary-600);
}

.breadcrumb-item.active {
  color: var(--vaitony-primary-600);
  font-weight: var(--vaitony-font-weight-semibold);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--vaitony-text-hint);
  font-size: 0.875rem;
}

/* User dropdown */
.user-menu .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--vaitony-space-2);
  padding: var(--vaitony-space-2) var(--vaitony-space-3);
  border-radius: var(--vaitony-radius-base);
  transition: all var(--vaitony-transition-fast);
}

.user-menu .dropdown-toggle:hover {
  background: var(--vaitony-primary-50);
}

.user-menu .user-image {
  border: 2px solid var(--vaitony-border-light);
  transition: all var(--vaitony-transition-fast);
}

.user-menu .dropdown-toggle:hover .user-image {
  border-color: var(--vaitony-primary-500);
  transform: scale(1.05);
}

.user-menu .dropdown-menu {
  border-radius: var(--vaitony-radius-lg);
  border: 1px solid var(--vaitony-border-light);
  box-shadow: var(--vaitony-shadow-lg);
  margin-top: var(--vaitony-space-2);
  overflow: hidden;
  animation: vaitony-fadeInDown var(--vaitony-transition-fast);
  min-width: 280px;
}

.user-header {
  background: var(--vaitony-gradient-primary);
  padding: var(--vaitony-space-6) var(--vaitony-space-4);
  text-align: center;
  border: none;
}

.user-header img {
  width: 80px;
  height: 80px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  margin-bottom: var(--vaitony-space-3);
  box-shadow: var(--vaitony-shadow-md);
}

.user-header p {
  color: white;
  margin: 0;
  font-weight: var(--vaitony-font-weight-semibold);
}

.user-header small {
  opacity: 0.9;
  font-size: var(--vaitony-font-size-sm);
}

.user-body {
  padding: var(--vaitony-space-4);
  background: var(--vaitony-bg-secondary);
}

.user-body a {
  color: var(--vaitony-text-secondary);
  text-decoration: none;
  transition: all var(--vaitony-transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--vaitony-space-2);
}

.user-body a:hover {
  color: var(--vaitony-primary-600);
}

.user-footer {
  padding: var(--vaitony-space-3);
  background: var(--vaitony-bg-primary);
  border-top: 1px solid var(--vaitony-border-light);
}

.user-footer .btn {
  transition: all var(--vaitony-transition-fast);
  font-size: var(--vaitony-font-size-sm);
  padding: var(--vaitony-space-2) var(--vaitony-space-4);
  border-radius: var(--vaitony-radius-base);
}

.user-footer .btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--vaitony-shadow-sm);
}

/* Fullscreen toggle */
.nav-link[data-lte-toggle="fullscreen"] {
  position: relative;
}

.nav-link[data-lte-toggle="fullscreen"] i {
  transition: all var(--vaitony-transition-base);
}

.nav-link[data-lte-toggle="fullscreen"]:hover i {
  transform: rotate(90deg) scale(1.1);
}

/* ===== IL CONTENUTO VA NELLA SUA CELLA DELLA GRIGLIA =====

   UN DIFETTO VECCHIO, trovato dal test di responsività (PROMPT 27). AdminLTE dispone la
   pagina con una griglia a due colonne e tre aree nominate: `lte-app-sidebar` a sinistra,
   `lte-app-header`, `lte-app-main` e `lte-app-footer` a destra. Il tema assegna quelle aree
   a `.app-header`, `.app-main` e `.app-footer`.

   Il nostro layout però avvolge `<main class="app-main">` dentro un `<div
   class="content-wrapper">`, quindi il figlio diretto della griglia è il div — che NON ha
   nessuna area assegnata. Il browser lo colloca da sé, nella prima cella libera.

   Su schermo largo non si vedeva: la barra laterale occupa la colonna di sinistra e il
   contenuto finisce comunque a destra. Su schermo stretto la barra laterale esce dal flusso
   (il tema la rende `fixed`), la colonna di sinistra resta libera, e il contenuto ci finisce
   dentro — lasciando alla testata i 32px avanzati e portando la pagina a 519px su uno
   schermo da 375px. Ogni schermata dell'applicazione scorreva di lato.

   Una riga, e la cella è quella giusta a ogni larghezza. */

.app-wrapper > .content-wrapper {
  grid-area: lte-app-main;
  min-width: 0;
}

/* ===== SIDEBAR ENHANCEMENTS ===== */
.app-sidebar {
  background: var(--vaitony-bg-secondary);
  border-right: 1px solid var(--vaitony-border-light);
  box-shadow: var(--vaitony-shadow-sm);
  transition: all var(--vaitony-transition-base);
}

/* Sidebar brand */
.sidebar-brand {
  padding: var(--vaitony-space-4);
  border-bottom: 1px solid var(--vaitony-border-light);
}

.brand-link {
  display: flex;
  align-items: center;
  gap: var(--vaitony-space-3);
  padding: var(--vaitony-space-3);
  border-radius: var(--vaitony-radius-lg);
  text-decoration: none;
  transition: all var(--vaitony-transition-base);
  background: rgba(255, 255, 255, 0.05);
}

.brand-link:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.02);
}

.brand-image {
  width: 40px;
  height: 40px;
  transition: all var(--vaitony-transition-base);
}

.brand-link:hover .brand-image {
  transform: rotate(5deg) scale(1.1);
}

.brand-text {
  font-size: var(--vaitony-font-size-xl);
  font-weight: var(--vaitony-font-weight-bold);
  color: white;
  letter-spacing: -0.5px;
}

/* Sidebar menu */
.sidebar-menu {
  padding: var(--vaitony-space-4) var(--vaitony-space-3);
}

.sidebar-menu .nav-item {
  margin-bottom: var(--vaitony-space-2);
}

.sidebar-menu .nav-link {
  display: flex;
  align-items: center;
  gap: var(--vaitony-space-3);
  padding: var(--vaitony-space-3) var(--vaitony-space-4);
  color: rgba(255, 255, 255, 0.8);
  border-radius: var(--vaitony-radius-base);
  transition: all var(--vaitony-transition-fast);
  position: relative;
  overflow: hidden;
}

.sidebar-menu .nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transition: width var(--vaitony-transition-fast);
}

.sidebar-menu .nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  transform: translateX(4px);
}

.sidebar-menu .nav-link:hover::before {
  width: 4px;
}

.sidebar-menu .nav-link.active {
  background: var(--vaitony-gradient-primary);
  color: white;
  box-shadow: var(--vaitony-shadow-sm);
}

.sidebar-menu .nav-link.active::before {
  width: 0;
}

.sidebar-menu .nav-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: all var(--vaitony-transition-fast);
}

.sidebar-menu .nav-link:hover .nav-icon {
  transform: scale(1.15);
}

.sidebar-menu .nav-link.active .nav-icon {
  animation: vaitony-pulse 2s infinite;
}

.sidebar-menu .nav-arrow {
  margin-left: auto;
  transition: all var(--vaitony-transition-fast);
  font-size: 0.875rem;
}

.sidebar-menu .nav-item.menu-open > .nav-link .nav-arrow {
  transform: rotate(90deg);
}

/* Treeview submenu */
.nav-treeview {
  padding-left: var(--vaitony-space-6);
  margin-top: var(--vaitony-space-2);
  animation: vaitony-fadeInDown var(--vaitony-transition-fast);
}

.nav-treeview .nav-link {
  padding: var(--vaitony-space-2) var(--vaitony-space-4);
  font-size: var(--vaitony-font-size-sm);
}

.nav-treeview .nav-icon {
  font-size: 1rem;
}

/* ===== LA BARRA LATERALE E LA NAVBAR SUGLI SCHERMI STRETTI =====

   QUI C'ERANO REGOLE CHE ROMPEVANO LA PAGINA, e il test di responsività le ha trovate.
   `navigation.css` ridichiarava `.app-sidebar` come `position: fixed; left: -280px` dentro
   una `@media (max-width: 992px)`. Ma AdminLTE dispone l'intera pagina con una griglia
   CSS — `grid-template-areas: "lte-app-sidebar lte-app-header" …` — e la barra laterale è
   una CELLA di quella griglia, che il tema fa uscire dallo schermo con `margin-left: -250px`.

   Dichiararla `fixed` la toglieva dalla griglia: la colonna della barra spariva, la
   testata veniva spinta a destra di 250px e la pagina diventava 519px larga su uno schermo
   da 375px. Ogni schermata dell'applicazione scorreva di lato, e nessuno se n'era accorto
   perché non c'era niente che lo misurasse (`tests/test_responsive.py`, PROMPT 27).

   Il tema la barra a scomparsa la fa già, e la fa bene. Qui si aggiunge SOLO ciò che gli
   manca: la velatura che dice che il contenuto sotto è ancora lì, e le etichette della
   navbar che spariscono quando non c'è spazio. Mobile-first: il caso stretto è la regola
   di base, e da 992px in su si aggiunge. */

.sidebar-expand::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--vaitony-z-fixed) - 1);
  animation: vaitony-fadeIn var(--vaitony-transition-fast);
}

/* Sulla navbar stretta restano le icone: il testo accanto a sei voci non ci sta, e
   mandarlo a capo rompe l'altezza della barra. */
.navbar-nav .nav-link {
  padding: var(--vaitony-space-2);
}

.navbar-nav .nav-link span {
  display: none;
}

.breadcrumb-item {
  font-size: var(--vaitony-font-size-xs);
}

.user-menu .dropdown-menu {
  min-width: 240px;
}

.user-header img {
  width: 60px;
  height: 60px;
}

@media (min-width: 768px) {
  .breadcrumb-item {
    font-size: var(--vaitony-font-size-sm);
  }

  .user-menu .dropdown-menu {
    min-width: 280px;
  }

  .user-header img {
    width: 90px;
    height: 90px;
  }
}

@media (min-width: 992px) {
  /* Da qui la barra laterale è una colonna accanto al contenuto: niente velatura, e le
     etichette della navbar tornano. */
  .sidebar-expand::before {
    content: none;
  }

  .navbar-nav .nav-link {
    padding: var(--vaitony-space-2) var(--vaitony-space-3);
  }

  .navbar-nav .nav-link span {
    display: inline;
  }
}

/* ===== ACCESSIBILITY ===== */
.sidebar-menu .nav-link:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

.navbar-nav .nav-link:focus-visible {
  outline: 2px solid var(--vaitony-primary-500);
  outline-offset: 2px;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== LOADING STATE ===== */
.sidebar-wrapper.loading {
  opacity: 0.6;
  pointer-events: none;
}

.sidebar-wrapper.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: var(--vaitony-radius-full);
  animation: vaitony-spin 0.8s linear infinite;
  z-index: 10;
}

/* ===== SMOOTH TRANSITIONS ===== */
.app-header,
.app-sidebar,
.sidebar-menu .nav-link,
.navbar-nav .nav-link {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   La navbar non deve mai allargare la pagina (PROMPT 31)
   ============================================================================

   È una difesa, non una correzione: il difetto vero — il percorso di navigazione
   che compariva a 768px dove non c'era spazio — è stato corretto in
   `be/navbar.html`. Questa regola fa in modo che la prossima voce aggiunta alla
   navbar si tronchi invece di spingere fuori la pagina, perché quel difetto non
   si vede finché non lo si misura a una larghezza precisa.
   ============================================================================ */

.app-header .container-fluid {
  min-width: 0;
  flex-wrap: nowrap;
}

.app-header .navbar-nav {
  min-width: 0;
}

/* Il nome dell'utente si tronca invece di allargare la barra. */
.app-header .user-menu .nav-link {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}