/* Il tema e i componenti vengono da Radzen (standard / standard-dark); qui solo gli aggiustamenti. */
html, body { margin: 0; height: 100%; }
/* Il tema non imposta font e colori sul body: senza questo il testo cade sul serif del browser. */
body {
    font-family: var(--rz-text-font-family, "Segoe UI", system-ui, sans-serif);
    font-size: 15px;
    background: var(--rz-body-background-color, Canvas);
    color: var(--rz-text-color, CanvasText);
}
/* Nel tema scuro la scala base-* e' invertita (base-100 e' chiaro): per i fondi si usano le variabili semantiche. */
.shell { min-height: 100vh; }
.topbar { padding: 8px 16px; border-bottom: 1px solid rgba(128, 128, 128, .3); background: var(--rz-header-background-color); margin: 0 !important; }
.topbar .rz-text-h5 { color: var(--rz-text-title-color); }
.rz-badge { text-transform: none; letter-spacing: 0; font-weight: 600; }
.rz-datatable, .rz-data-grid { font-size: .95rem; }
.topbar-logo { width: 32px; height: 32px; }

.main-tabs { flex: 1; }
.page { padding: 16px; }
.page .w-sm { width: 130px; }
.page .w-xs { width: 90px; }

/* Login a due colonne: pannello di marca + modulo. */
.login-split { display: grid; grid-template-columns: minmax(320px, 1.1fr) minmax(360px, 1fr); min-height: 100vh; }
.login-brand {
    position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; color: #fff; overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 183, 77, .30), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(236, 64, 122, .28), transparent 42%),
        radial-gradient(circle at 80% 15%, rgba(124, 179, 66, .25), transparent 38%),
        linear-gradient(145deg, #0f2a4a 0%, #1b4b82 55%, #12365f 100%);
}
.brand-inner { margin: auto 0; max-width: 460px; }
.brand-logo { width: 112px; height: 112px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
.login-brand h1 { font-size: 2.8rem; margin: 16px 0 8px; font-weight: 700; letter-spacing: .5px; }
.brand-tagline { font-size: 1.2rem; line-height: 1.5; opacity: .92; margin: 0 0 32px; }
.brand-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; opacity: .95; }
.brand-points li { display: flex; align-items: center; gap: 10px; }
.brand-footer { font-size: .85rem; opacity: .7; }

.login-form-side { display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--rz-body-background-color); }
.login-form { width: 100%; max-width: 380px; }
.login-field { width: 100%; }
.login-submit { width: 100%; }
.login-sub { color: var(--rz-text-secondary-color, #9aa0a6); }
.login-env { display: flex; align-items: center; gap: 6px; justify-content: center; }
.login-env-icon { font-size: 1rem !important; }

@media (max-width: 820px) {
    .login-split { grid-template-columns: 1fr; }
    .login-brand { display: none; }
}

.tile { cursor: pointer; min-width: 170px; user-select: none; }
.tile.on { outline: 2px solid var(--rz-primary, #2c7be5); }

.grid { width: 100%; }

.detail dl, .versione dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0; font-size: .85rem; }
.detail dt, .versione dt { opacity: .65; }
.detail dd, .versione dd { margin: 0; }
.section-title { display: flex; align-items: center; gap: 6px; margin: 0 !important; }
.versione.old { opacity: .75; }
.descr { white-space: pre-wrap; font: inherit; font-size: .85rem; margin: 8px 0; }