/* ===== Layout ===== */
body.login-bg {
    min-height: 100vh;
    background: radial-gradient(1200px 600px at 80% -10%, #4aa8ff 0%, rgba(74,168,255,0) 60%), linear-gradient(160deg,#2b6ddc 0%,#1e68c7 20%,#FF6E00 75%,#A5006E 100%);
    background-attachment: fixed;
}

/* ===== Card “vetro” ===== */
.glass-card {
    border: 0;
    border-radius: 1.25rem;
    background: rgba(255,255,255,.85);
    box-shadow: 0 20px 50px rgba(20,20,40,.25);
    backdrop-filter: saturate(120%) blur(6px);
    padding: 1.5rem;
}

/* ===== Navbar/Footer ===== */
.navbar-custom {
    background-color: #0D2261 !important;
    box-shadow: none;
}

    .navbar-custom .nav-link {
        color: rgba(255,255,255,.85) !important;
    }

        .navbar-custom .nav-link.text-info {
            color: #e6f4ff !important;
        }

.custom-footer {
    background-color: #0D2261;
    border-top: 1px solid rgba(255,255,255,.25);
}

/* ===== Contenitore login ===== */
.login-container {
    margin-inline: auto;
    max-width: 95%;
}

@media (min-width:992px) {
    .login-container {
        max-width: 680px;
    }
    /* più larga su desktop */
}

/* ===== Campi ===== */
.form-group-custom .form-control {
    padding: 1rem 1rem .75rem;
    border-radius: .8rem;
    border: 1px solid rgba(0,0,0,.08);
    background: #fff;
    transition: box-shadow .2s, border-color .2s;
}

    .form-group-custom .form-control:focus {
        border-color: #FF6E00;
        box-shadow: 0 0 0 .25rem rgba(255,110,0,.18);
    }

/* Etichetta flottante “pill” */
.label-overlay, .label-floating {
    top: -.8rem !important;
    left: .75rem !important;
    background: #f6f7fb;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.06);
    padding: .1rem .6rem !important;
}

    .label-overlay span, .label-floating span {
        color: #0D6EFD;
        font-weight: 600;
    }

/* ===== Pulsanti ===== */
.btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    white-space: nowrap;
    border: 0;
    border-radius: .9rem;
    color: #fff;
    transition: transform .25s, filter .25s, box-shadow .25s;
}

    .btn i {
        pointer-events: none;
    }

/* ACCEDI: blu -> verde */
.btn-success {
    background: linear-gradient(135deg,#006699 0%,#99CC33 100%);
    box-shadow: 0 10px 24px rgba(0,102,153,.28);
}

    .btn-success:hover {
        filter: brightness(1.08);
        box-shadow: 0 12px 28px rgba(0,102,153,.45);
        transform: scale(1.03);
    }

/* RECUPERA: viola -> arancio */
.btn-orange {
    background: linear-gradient(135deg,#990066 0%,#FF6600 100%);
    box-shadow: 0 10px 24px rgba(153,0,102,.28);
}

    .btn-orange:hover {
        filter: brightness(1.08);
        box-shadow: 0 12px 28px rgba(153,0,102,.45);
        transform: scale(1.03);
    }

/* dimensioni pulsanti */
.btn-lg {
    padding: .9rem 1.6rem;
}

@media (min-width:992px) {
    .btn-lg {
        padding: .95rem 2.6rem;
        min-width: 260px;
    }
    /* più spazio su desktop */
}

/* ===== Dettagli ===== */
.error-message {
    color: #c1121f;
    font-weight: 600;
}

.warning-message {
    border: 1px dashed rgba(255,0,0,.25);
}

.app-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

@media (max-width:576px) {
    .app-logo {
        width: 56px;
        height: 56px;
    }
}

/* 1) Card: via di mezzo su desktop */
@media (min-width: 992px) {
    .login-container {
        max-width: 560px !important; /* prima 680px */
    }
}

/* 2) Pulsanti: un po’ più compatti ma capienti su desktop */
@media (min-width: 992px) {
    .btn-lg {
        padding: .9rem 2.1rem; /* prima 2.6rem */
        min-width: 220px; /* prima 260px */
    }
}

/* 3) Evita stretching su schermi medi */
@media (768px <= width < 992px) {
    .login-container {
        max-width: 600px;
    }
}

.navbar-custom {
    background-color: #0D2261 !important;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

    .navbar-custom .navbar-brand img {
        height: 48px;
        width: auto;
    }

    .navbar-custom img {
        max-height: 60px;
    }

@media (max-width: 576px) {
    .navbar-custom img {
        max-height: 48px;
    }

    .app-logo {
        width: 120px;
        height: auto;
        border-radius: 0; /* ← Rimuove bordi arrotondati */
        background: none; /* ← Niente sfondo */
        box-shadow: none; /* ← Nessuna ombra */
    }

    /* LOGO: pulito, senza sfondo e non tagliato */
    .app-logo {
        width: 120px; /* un po' più grande */
        height: auto;
        border-radius: 0; /* niente angoli: il file è già “pulito” */
        background: transparent !important;
        object-fit: contain; /* non ritaglia */
        box-shadow: none;
    }

    /* Mobile: leggermente più piccolo se vuoi */
    @media (max-width: 576px) {
        .app-logo {
            width: 100px;
        }
    }

    /* Media query classica per la fascia 768–991 */
    @media (min-width: 768px) and (max-width: 991.98px) {
        .login-container {
            max-width: 600px;
        }
    }

    .app-logo {
        width: 140px; /* più grande */
        height: auto; /* mantiene proporzioni */
        background: none !important; /* nessun riempimento aggiunto */
        border-radius: 0 !important; /* niente angoli arrotondati */
        object-fit: contain; /* mostra tutto senza tagliare */
        box-shadow: none !important; /* nessuna ombra attorno */
        padding: 0;
    }

    /* Rendi le tab "tab-btn" uguali ai btn della login */
    .tab-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        border: 0;
        border-radius: .9rem;
        color: #fff;
        white-space: nowrap;
        padding: .9rem 1.6rem;
        transition: transform .25s, filter .25s, box-shadow .25s;
    }

        .tab-btn:hover {
            filter: brightness(1.08);
            transform: scale(1.03);
        }

        /* Mappature ai gradient esistenti */
        .tab-btn.btn-verde {
            background: linear-gradient(135deg,#006699 0%,#99CC33 100%);
            box-shadow: 0 10px 24px rgba(0,102,153,.28);
        }

        .tab-btn.btn-rosso {
            background: linear-gradient(135deg,#990066 0%,#FF6600 100%);
            box-shadow: 0 10px 24px rgba(153,0,102,.28);
        }

    /* Pulsanti a scheda con gradiente */
    .tab-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: .9rem 1.6rem;
        border: 0;
        border-radius: .9rem;
        color: #fff;
        white-space: nowrap;
        transition: transform .25s, filter .25s, box-shadow .25s;
        text-decoration: none;
    }

        .tab-btn:hover {
            filter: brightness(1.08);
            transform: translateY(-1px);
            box-shadow: 0 10px 24px rgba(0,0,0,.15);
        }

        .tab-btn:active {
            transform: translateY(0);
            filter: brightness(.98);
        }

        .tab-btn:focus-visible {
            outline: 3px solid rgba(13,110,253,.35);
            outline-offset: 2px;
        }

        /* Stati disabilitati */
        .tab-btn[disabled], .tab-btn.disabled {
            opacity: .6;
            pointer-events: none;
            filter: none;
            transform: none;
        }

        /* Gradient coerenti con la login */
        .tab-btn.btn-verde {
            background: linear-gradient(135deg,#006699 0%,#99CC33 100%);
            box-shadow: 0 10px 24px rgba(0,102,153,.28);
        }

        .tab-btn.btn-rosso {
            background: linear-gradient(135deg,#990066 0%,#FF6600 100%);
            box-shadow: 0 10px 24px rgba(153,0,102,.28);
        }

    /* Layout del gruppo */
    .bottone-gruppo {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    /* Logo OBRYD */
    .logo-OBRYD {
        max-width: 150px; /* dimensione ideale desktop */
        width: 100%; /* adattabile a mobile */
        height: auto; /* mantiene le proporzioni */
        margin-bottom: 0.5rem;
    }

    /* Titolo */
    .OBRYD-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        margin-top: 0.5rem;
        color: #0D2261;
    }

    /* Sottotitolo */
    .OBRYD-subtitle {
        font-size: 0.95rem;
        color: #444;
        max-width: 320px;
        margin: auto;
        line-height: 1.4;
    }

    /* Logo OBRYD responsive */
    .logo-OBRYD {
        max-width: 120px; /* dimensione base */
        width: 100%;
        height: auto;
        margin-bottom: 0.5rem;
    }

    /* Titolo */
    .OBRYD-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        margin-top: 0.5rem;
        color: #0D2261;
    }

    /* Sottotitolo */
    .OBRYD-subtitle {
        font-size: 0.95rem;
        color: #444;
        max-width: 320px;
        margin: auto;
        line-height: 1.4;
    }

    /* Regole responsive */
    @media (max-width: 768px) {
        .logo-OBRYD {
            max-width: 100px; /* tablet */
        }
    }

    @media (max-width: 480px) {
        .logo-OBRYD {
            max-width: 80px; /* smartphone */
        }
    }

    /* Logo OBRYD fluido */
    .logo-OBRYD {
        width: 40%;
        height: auto;
        max-width: 200px; /* opzionale: evita che su schermi grandi diventi enorme */
        margin-bottom: 0.5rem;
    }

    /* Titolo */
    .OBRYD-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        margin-top: 0.5rem;
        color: #0D2261;
    }

    /* Sottotitolo */
    .OBRYD-subtitle {
        font-size: 0.95rem;
        color: #444;
        max-width: 320px;
        margin: auto;
        line-height: 1.4;
    }