:root {
    --sidebar-w: 250px;
    --sidebar-bg: #2f353a;
    --accent: #20a8d8;
}

body { background: #eef1f4; font-size: .925rem; }

.app { display: flex; min-height: 100vh; }

.sidebar { width: var(--sidebar-w); background: var(--sidebar-bg) !important; flex-shrink: 0; }
@media (min-width: 992px) {
    .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.sidebar-brand { display: flex; align-items: center; gap: .5rem; padding: 1rem 1.25rem; font-weight: 600; font-size: 1.05rem; background: rgba(0,0,0,.2); color: #fff; }
.sidebar .nav-title { padding: .9rem 1.25rem .35rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8a93a2; }
.sidebar .nav-link { color: rgba(255,255,255,.8); padding: .55rem 1.25rem; display: flex; gap: .6rem; align-items: center; border-left: 3px solid transparent; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,.08); border-left-color: var(--accent); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 1rem; background: #fff; border-bottom: 1px solid #d8dbe0; padding: .4rem 1rem; position: sticky; top: 0; z-index: 1020; }
.content { padding: 1.25rem; }
@media (max-width: 575.98px) { .content { padding: .75rem; } }

.card { border: 1px solid #d8dbe0; border-radius: .35rem; margin-bottom: 1.25rem; }
.card-header { background: #f7f8fa; font-weight: 600; }

.page-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.page-head h1 { font-size: 1.4rem; margin: 0; }

.table-grid th { white-space: nowrap; background: #f7f8fa; }
.table-grid th a { color: inherit; text-decoration: none; }
.table-grid th a:hover { color: var(--accent); }
.table-grid .filtri th { background: #fff; font-weight: normal; }
.table-grid .filtri .form-control, .table-grid .filtri .form-select { min-width: 5rem; }
.table-grid td { vertical-align: middle; }
.azioni { white-space: nowrap; text-align: right; }
.azioni form { display: inline; }

.kpi { color: #fff; border: 0; text-align: center; }
.kpi .valore { font-size: 1.8rem; font-weight: 600; }
.kpi .etichetta { text-transform: uppercase; font-size: .8rem; letter-spacing: .03em; }

.dettaglio th { width: 30%; background: #f7f8fa; font-weight: 600; }

.ts-wrapper.form-select, .ts-wrapper.form-control { padding: 0; }

@media print {
    .sidebar, .topbar, .no-print, .alert { display: none !important; }
    body { background: #fff; }
    .content { padding: 0; }
    .card { border: 0; }
}