/*
 * Tema della piattaforma sopra Tabler (Bootstrap 5).
 * Per adattare i colori all'identità del cliente basta modificare le variabili qui sotto.
 */
:root,
[data-bs-theme="light"] {
    --app-primary: #1d4e89;
    --app-primary-dark: #163b68;
    --app-primary-rgb: 29, 78, 137;

    --tblr-primary: var(--app-primary);
    --tblr-primary-rgb: var(--app-primary-rgb);
    --tblr-primary-darken: var(--app-primary-dark);
    --tblr-primary-lt: rgba(var(--app-primary-rgb), 0.1);
    --tblr-primary-text-emphasis: var(--app-primary-dark);
    --tblr-primary-bg-subtle: rgba(var(--app-primary-rgb), 0.08);
    --tblr-primary-border-subtle: rgba(var(--app-primary-rgb), 0.3);
    --tblr-link-color: var(--app-primary);
    --tblr-link-color-rgb: var(--app-primary-rgb);
    --tblr-link-hover-color: var(--app-primary-dark);
    --tblr-link-hover-color-rgb: 22, 59, 104;
}

.btn-primary {
    --tblr-btn-bg: var(--app-primary);
    --tblr-btn-border-color: var(--app-primary);
    --tblr-btn-hover-bg: var(--app-primary-dark);
    --tblr-btn-hover-border-color: var(--app-primary-dark);
    --tblr-btn-active-bg: var(--app-primary-dark);
    --tblr-btn-active-border-color: var(--app-primary-dark);
    --tblr-btn-color: #fff;
    --tblr-btn-hover-color: #fff;
    --tblr-btn-active-color: #fff;
}

.btn-outline-primary {
    --tblr-btn-color: var(--app-primary);
    --tblr-btn-border-color: var(--app-primary);
    --tblr-btn-hover-bg: var(--app-primary);
    --tblr-btn-hover-border-color: var(--app-primary);
    --tblr-btn-hover-color: #fff;
}

/* Menu laterale nel colore principale */
.navbar-app {
    background: var(--app-primary) !important;
}
.navbar-app .nav-link.active,
.navbar-app .nav-item.active > .nav-link {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
}
.navbar-app .navbar-brand {
    white-space: normal;
    min-width: 0;
}
.navbar-app .navbar-brand-name {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Marchio: monogramma nel colore principale (nessun logo di terzi) */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: 10px;
    background: #fff;
    color: var(--app-primary);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}
.brand-mark-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.25rem;
    border-radius: 14px;
}

/* Pagine di accesso: fascia colorata in alto, scheda che la sovrappone */
.page-auth {
    background: linear-gradient(180deg, var(--app-primary) 0, var(--app-primary) 15rem, var(--tblr-bg-surface-secondary, #f6f8fb) 15rem);
    min-height: 100vh;
}
.page-auth .auth-container {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.page-auth .auth-brand,
.page-auth .auth-brand .h2 {
    color: #fff;
}

/* Testi inseriti dagli utenti con a capo */
.pre-line {
    white-space: pre-line;
}

/* Numeri grandi nelle schede della dashboard */
.stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
}

/* Schede di progetto: su schermi stretti scorrono in orizzontale invece di allargare la pagina */
.nav-tabs-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}
.nav-tabs-scroll .nav-link {
    white-space: nowrap;
}

/* Il contenuto non deve mai allargare la pagina oltre lo schermo */
.page-wrapper {
    min-width: 0;
}
.page-pretitle {
    overflow-wrap: anywhere;
}

/* Albero delle competenze: rientro per livello */
.tree-label { display: inline-block; }
.tree-depth-2 { padding-left: 1.25rem; }
.tree-depth-3 { padding-left: 2.5rem; }
.tree-depth-4 { padding-left: 3.75rem; }
.tree-depth-5 { padding-left: 5rem; }
.tree-depth-6 { padding-left: 6.25rem; }
@media (max-width: 575.98px) {
    .tree-depth-2 { padding-left: 0.5rem; }
    .tree-depth-3 { padding-left: 1rem; }
    .tree-depth-4 { padding-left: 1.5rem; }
    .tree-depth-5 { padding-left: 2rem; }
    .tree-depth-6 { padding-left: 2.5rem; }
}

/* Layout fluido: i moduli lunghi restano leggibili anche su schermi molto larghi */
.form-readable {
    max-width: 60rem;
}

/* Inserimento punteggi */
.score-row + .score-row {
    border-top: 1px solid var(--tblr-border-color);
}
.score-input {
    width: 6.5rem;
}
.indicator-weights {
    max-height: 22rem;
    overflow-y: auto;
}

/* Barre di avanzamento senza stili inline (vietati dalla CSP): larghezza a passi del 5% */
.pw-0 { width: 0; } .pw-5 { width: 5%; } .pw-10 { width: 10%; } .pw-15 { width: 15%; } .pw-20 { width: 20%; }
.pw-25 { width: 25%; } .pw-30 { width: 30%; } .pw-35 { width: 35%; } .pw-40 { width: 40%; } .pw-45 { width: 45%; }
.pw-50 { width: 50%; } .pw-55 { width: 55%; } .pw-60 { width: 60%; } .pw-65 { width: 65%; } .pw-70 { width: 70%; }
.pw-75 { width: 75%; } .pw-80 { width: 80%; } .pw-85 { width: 85%; } .pw-90 { width: 90%; } .pw-95 { width: 95%; }
.pw-100 { width: 100%; }

/* Barra in alto */
.topbar {
    background: #fff;
    min-height: 3.25rem;
}

/* Password temporanea mostrata una sola volta */
.temp-password {
    font-family: var(--tblr-font-monospace);
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    user-select: all;
}