/* ============================================
   Layout Structure — Sistema layout applicativo
   ============================================

   Gerarchia:
   MudLayout
     MudAppBar (fixed, 50px, z-index 1300)
     MudDrawer (sidebar, gestito da MudBlazor)
     MudMainContent
       .app-content (contenitore neutro, dimensionato)
         @Body → inietta il componente pagina:
           .page-index  → no scroll, grid autosufficiente
           .page-detail → scroll interno, sticky header + tab
           (default)    → scroll libero (Home, Settings, Dashboard)
       .app-footer (footer globale, 50px, logo + email + copyright)

   ============================================ */

/* ============================================
   Z-index stratificazione globale
   Usato da AppDialog, LoaderOverlay, overlay generici.
   Garantisce che i loader di pagina stiano SOTTO i dialog (bug fix storico).
   ============================================ */
:root {
	--app-z-base:              1;
	--app-z-page-content:      10;

	--app-z-drawer:            1100;
	--app-z-appbar:            1200;
	--app-z-page-loader:       1250;  /* loader pagina — SOTTO il dialog */

	--app-z-dialog-backdrop:   1299;
	--app-z-dialog:            1300;  /* default MudBlazor */

	--app-z-popover:           1400;  /* default MudBlazor */
	--app-z-dialog-loader:     1450;  /* loader dentro dialog aperto */
	--app-z-tooltip:           1500;
	--app-z-snackbar:          1600;
}

/* ── Contenitore principale ──
   Dimensionato per riempire lo spazio sotto l'AppBar.
   Comportamento default: scroll libero (per Home, Settings, Dashboard, TreeView). */
.app-content {
	height: calc(100vh - var(--app-topbar-h) - var(--app-footer-h));
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
}

/* ── FOOTER GLOBALE ──
   Posizionato fixed in fondo al viewport, copre tutta la larghezza
   inclusa l'area sotto il drawer laterale. */
.app-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--app-footer-h);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: #fafafa;
	border-top: 1px solid #e0e0e0;
	padding: 0 16px;
	font-size: var(--grc-fs-caption);
	color: #666;
	z-index: 5;
}

.app-footer img {
	height: 22px;
	width: auto;
}

.app-footer a {
	color: #666;
	text-decoration: none;
}

.app-footer a:hover {
	text-decoration: underline;
}

/* ── PAGE-INDEX ──
   La griglia (.index-grid-wrapper) e la HubPage (.hub-page)
   calcolano la propria altezza direttamente dal viewport
   con calc(100vh - var(--app-topbar-h)).
   Non serve propagare height ai wrapper Blazor intermedi. */

/* ── PAGE-DETAIL (identificato dalla presenza di .detail-sticky-header) ──
   Lo scroll è su .app-content (default).
   Lo sticky header si ancora al top del scroll container. */

.detail-sticky-header {
	position: sticky;
	top: 0;
	z-index: 4;
	background: white;
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: 4px;
}

/* Tab bar ancore sezioni — wrap su più righe quando sono troppe per una riga sola.
   Niente overflow-x: con molte ancore (es. Asset ~17) lo sticky header cresce in
   altezza invece di nascondere le tab dietro uno scroll orizzontale senza controlli.
   Lo scroll-spy misura l'altezza dello sticky in modo lazy → si adatta da solo. */
.detail-tab-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: 6px;
	padding: 0 1%;
	background: #fafafa;
	border-top: 1px solid #e8e8e8;
}

.detail-tab {
	padding: 10px 18px;
	font-size: var(--grc-fs-sm);
	color: #666;
	cursor: pointer;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	text-decoration: none;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
	user-select: none;
}

.detail-tab:hover {
	color: #333;
	background: #f0f0f0;
}

.detail-tab-active {
	color: #d4940a;
	border-bottom-color: #f0ad4e;
	font-weight: 600;
	background: white;
}

/* Spaziatura tra sticky header e primo pannello */
.detail-sticky-header + * {
	margin-top: 16px;
}

/* Spazio in fondo per scrollare l'ultimo pannello sotto i tab.
   Si attiva solo quando .detail-sticky-header è presente. */
.app-content:has(.detail-sticky-header)::after {
	content: '';
	display: block;
	height: 60vh;
}

/* ── Sidebar ── */
.mud-drawer-content .nav-menu {
	height: 100%;
}

/* ── SETTINGS SEARCH — stati match/dim ── */
/* Tab bar: sezione senza match attenuata */
.detail-tab-dimmed {
	opacity: 0.4;
}

.detail-tab-dimmed:hover {
	opacity: 0.7;
}

.setting-match-row td {
	background-color: #fff8e7 !important;
}

.setting-focused-row td {
	background-color: #ffe8b0 !important;
	animation: settingRowFocusedFlash 0.4s ease-out;
}

.setting-dim-row td {
	opacity: 0.4;
}

@keyframes settingRowFocusedFlash {
	0%   { background-color: #ffd480; }
	100% { background-color: #ffe8b0; }
}

/* Search match nei Detail (prefisso grc-search-* per dominio chiaro) */
.grc-search-match {
	background-color: #fff8e7;
	border-radius: 4px;
	transition: background-color 0.15s ease;
}

.grc-search-focused {
	background-color: #ffe8b0 !important;
	animation: grcSearchFocusedFlash 0.4s ease-out;
}

.grc-search-panel-dim {
	opacity: 0.4;
	transition: opacity 0.15s ease;
}

@keyframes grcSearchFocusedFlash {
	0%   { background-color: #ffd480; }
	100% { background-color: #ffe8b0; }
}

/* Modalità storico (?asOf=) */
:root {
	--grc-snapshot-color: #1B55DB;
}

/* Cornice fissa sull'area contenuto: .app-content è il contenitore di scroll (non scrolla lui
   stesso), quindi il bordo resta fermo, aderisce all'area pagina e non viene mai tagliato.
   .grc-snapshot-border è il marker renderizzato dal Detail in modalità storico. */
.app-content:has(.grc-snapshot-border) {
	border: 3px solid var(--grc-snapshot-color);
}

/* Chip "Storico al ..." nel header */
.grc-snapshot-chip,
.grc-snapshot-chip .mud-icon-root {
	color: var(--grc-snapshot-color) !important;
	border-color: var(--grc-snapshot-color) !important;
}