/*
 * login-mobile.css — BizExpense §K Login UX mobile + desktop fix
 * Caricato solo su _Account.cshtml. Overrides su custom.css.
 */

/* ── ux-icons CSS (necessario perché login-mobile.css non carica mobile.css) ──
   Stesse regole di mobile.css: fill/stroke non propagano via <use> dal sprite. */
.ux-icon {
    width: 20px; height: 20px; vertical-align: -4px; flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Pulsante lingua mobile + bottom sheet (identici a quelli del drawer) ── */
.be-login-lang-btn {
    display: inline-flex !important; align-items: center; gap: 5px;
    background: none; border: none; color: #337ab7; font-size: 14px;
    padding: 0; cursor: pointer;
}
.be-login-lang-chevron { width: 14px !important; height: 14px !important; }

/* Nasconde il dropdown Bootstrap lingua su mobile (sostituito dal pulsante + bottom sheet) */
body.body_login .language-pannel { display: none !important; }
/* Mostra il pulsante mobile lingua solo su <991px */
@media (min-width: 991px) {
    #login-lang-btn { display: none !important; }
    body.body_login .language-pannel { display: inline-block !important; }
}
/* Bottom sheet login — stesse regole di mobile.css (be-lang-*) */
#be-login-lang-sheet { display: none; position: fixed; top:0; left:0; right:0; bottom:0; z-index: 500; }
#be-login-lang-sheet.open { display: block; }
#be-login-lang-sheet .be-lang-overlay { position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,.5); }
#be-login-lang-sheet .be-lang-sheet {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: #fff; border-radius: 14px 14px 0 0;
    transform: translateY(100%); transition: transform .3s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
#be-login-lang-sheet.open .be-lang-sheet { transform: translateY(0); }
#be-login-lang-sheet .be-lang-handle { width: 36px; height: 4px; background: #ddd; border-radius: 2px; margin: 10px auto 8px; }
#be-login-lang-sheet .be-lang-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid #eee; }
#be-login-lang-sheet .be-lang-title { font-size: 16px; font-weight: 700; color: #231f20; }
#be-login-lang-sheet .be-lang-close { background: none; border: none; font-size: 22px; color: #555; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
#be-login-lang-sheet .be-lang-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border-bottom: 1px solid #eee; cursor: pointer; }
#be-login-lang-sheet .be-lang-row.active { background: #eef5f9; }
#be-login-lang-sheet .be-lang-iso { width: 34px; height: 22px; border: 1px solid #ddd; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #555; flex-shrink: 0; }
#be-login-lang-sheet .be-lang-row.active .be-lang-iso { border-color: #337ab7; color: #337ab7; }
#be-login-lang-sheet .be-lang-name { flex: 1; font-size: 14px; color: #231f20; }
#be-login-lang-sheet .be-lang-row.active .be-lang-name { color: #337ab7; font-weight: 600; }

/* ── Desktop (≥991px): preserva il layout vecchio e nasconde elementi mobile-only ──
   Questi override evitano la regressione sul login desktop. */
@media (min-width: 991px) {
    /* Fix toggle password su desktop: dentro @media mobile non si applica → cade nel flusso */
    .be-pwd-wrap { position: relative; }
    .be-pwd-wrap .be-field-input { padding-right: 44px; }
    .be-pwd-toggle {
        position: absolute; right: 0; top: 0;
        width: 44px; height: 100%;
        background: none; border: none;
        color: #888; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
    }

    /* Pulsante Accedi: allineato a destra come nel vecchio form */
    .be-btn-login { float: right; clear: both; }
    /* Rimetti il clearfix dopo il pulsante */
    .be-btn-login + div, .be-btn-login + .be-pwd-forgot { clear: both; }
    /* Link "Password dimenticata?" e "Torna all'accesso": nascosti su desktop
       (il link è già nella top bar come "PASSWORD SMARRITA") */
    .be-pwd-forgot { display: none !important; }
    /* Checkbox Ricordami: font normale su desktop */
    .be-remember { display: block; }
    .be-remember input[type="checkbox"] { margin-right: 4px; }
    /* be-login-body: padding equivalente al vecchio row>col-md-12 (Bootstrap 15px lati + 5px margine) */
    .be-login-body { padding: 0 20px; }
}

@media (max-width: 990px) {

    /* ── Reset container + full-width fino a 991px (come mobile.css per il main app) ── */
    body.body_login { margin: 0 !important; padding: 0 !important; }
    body.body_login .container { padding: 0 !important; }
    .box-container-login {
        width: 100% !important;        /* Bootstrap usa width, non max-width */
        max-width: 100% !important;
        padding: 0 !important;
    }
    /* Padding colonne: 10px per matchare il reference design */
    body.body_login .col-md-12 { padding: 10px !important; }
    /* Footer logo uvet: sfondo bianco + riga grigia sopra (reference design) */
    .be-login-footer-logo {
        background: #fff !important;
        padding: 16px !important;
        text-align: center;
        border-top: 1px solid #e7e7e7;
    }
    /* Copyright centrato (era text-right dal markup) */
    .box-login-footer .col-md-12 { text-align: center !important; }

    /* ── Nascondi banner giallo ── */
    body.body_login .alert.alert-warning { display: none !important; }
    /* ── Freshworks FAB: nascosto via classe be-fw-hidden (rimossa da beLoginOpenHelp()) ── */
    /* NON usare display:none !important qui: impedirebbe FreshworksWidget('open') di mostrarlo */
    body.body_login.be-fw-hidden #fc_frame,
    body.body_login.be-fw-hidden #freshworks-container { display: none !important; }
    /* Fix: widget Freshworks tagliato a destra — forza posizione e larghezza max */
    body.body_login #fc_frame {
        max-width: 100vw !important;
        right: 0 !important;
        left: auto !important;
    }

    /* ── Top bar: solo selettore lingua, bianco ── */
    body.body_login .sidebar-menu-function {
        background: #fff !important;
        border-bottom: 1px solid #e7e7e7;
        min-height: 44px;
        padding: 0 16px;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
    }
    body.body_login .sidebar-menu-function .left { display: none !important; } /* nasconde "Password smarrita" */
    body.body_login .sidebar-menu-function .right { float: none !important; }
    body.body_login .sidebar-menu-function * { color: #337ab7 !important; }

    /* ── Box login: piena larghezza, senza sfondo grigio ── */
    body.body_login .box-login {
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    body.body_login .col-md-12 { padding: 0 !important; }

    /* ── Logo e sottotitolo ── */
    .be-login-logo { text-align: center; padding: 28px 24px 6px; }
    .be-login-logo img { max-height: 48px; width: auto; }
    .be-login-subtitle {
        text-align: center; font-size: 14px; color: #777;
        margin: 6px 0 20px; padding: 0 24px;
    }

    /* ── Corpo form ── */
    .be-login-body { padding: 0 24px; }

    /* ── Campi ── */
    .be-field-group { margin-bottom: 16px; }
    .be-field-label {
        display: block; font-size: 12px; font-weight: 700;
        color: #555; margin-bottom: 5px;
    }
    .be-field-input.form-control {
        height: 48px !important;
        font-size: 16px !important;
        border-radius: 4px !important;
        border: 1px solid #ccc;
        padding: 0 12px;
    }
    .be-field-input.be-field-error-border {
        border-color: #a94442 !important;
        border-width: 1.5px !important;
    }
    .be-field-inline-error {
        display: none;
        font-size: 12px; color: #a94442; margin-top: 5px;
    }
    .be-field-inline-error .fa { margin-right: 4px; }

    /* ── Password con toggle occhio ── */
    .be-pwd-wrap { position: relative; }
    .be-pwd-wrap .be-field-input { padding-right: 44px !important; }
    .be-pwd-toggle {
        position: absolute; right: 0; top: 0;
        width: 44px; height: 48px;
        background: none; border: none;
        color: #888; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        font-size: 16px;
    }

    /* ── Checkbox Ricordami ── */
    .be-remember {
        display: flex; align-items: center; gap: 10px;
        min-height: 44px; margin-bottom: 16px;
    }
    .be-remember input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
    .be-remember label { font-size: 14px; color: #555; cursor: pointer; margin: 0; }

    /* ── Language selector: 🌐 nome_lingua ▼ (reference §K.1) ── */
    body.body_login .sidebar-menu-function .language-pannel .btn-transparent {
        color: #337ab7 !important; padding: 0 !important;
        background: none !important; border: none !important;
        display: flex !important; align-items: center; gap: 6px;
        font-size: 14px;
    }
    body.body_login .sidebar-menu-function .language-pannel-btn-gontxt { display: none !important; }
    body.body_login .sidebar-menu-function #ImageCurrentLanguage       { display: none !important; }
    body.body_login .sidebar-menu-function .language-pannel .btn-transparent::before {
        content: '\f0ac'; /* fa-globe */
        font-family: FontAwesome; font-size: 17px; color: #337ab7;
    }
    .be-lang-mobile-name { font-size: 14px; color: #337ab7; }

    /* ── Riga "Problemi di accesso?" — no-wrap, icona + testo + link ── */
    .be-login-help {
        display: flex !important; align-items: center;
        flex-wrap: nowrap !important;
        padding: 12px 0; font-size: 14px; color: #777;
    }
    .be-login-help-left { display: flex; align-items: center; gap: 6px; flex: 1; white-space: nowrap; }
    .be-login-help > a  { white-space: nowrap; color: #337ab7; text-decoration: none; flex-shrink: 0; }

    /* ── Pulsante Accedi ── */
    .be-btn-login {
        display: block !important; width: 100% !important;
        height: 50px !important; font-size: 16px !important;
        font-weight: 700; border-radius: 4px !important;
        background: #337ab7 !important; border-color: #337ab7 !important;
        color: #fff !important; text-align: center;
        margin-bottom: 0;
    }
    .be-btn-login:disabled { opacity: 0.65; cursor: wait; }

    /* ── Link Password dimenticata ── */
    .be-pwd-forgot { text-align: center; margin: 12px 0 20px; }
    .be-pwd-forgot a { font-size: 14px; color: #337ab7; text-decoration: none; }

    /* ── Banner errori ── */
    .be-login-banner {
        margin-bottom: 16px; padding: 12px 14px;
        border-radius: 4px; border-width: 1.5px; border-style: solid;
    }
    .be-login-banner--wrong { background: #f9eff0; border-color: #ebccd1; }
    .be-login-banner--blocked { background: #f9eff0; border-color: #a94442; }
    .be-login-banner-row { display: flex; align-items: flex-start; gap: 10px; }
    .be-login-banner-icon { font-size: 18px; color: #a94442; flex-shrink: 0; margin-top: 1px; }
    .be-login-banner-title { font-weight: 700; color: #a94442; font-size: 14px; }
    .be-login-banner-sub   { color: #a94442; font-size: 13px; margin-top: 2px; }
    .be-login-banner-sep   { border: none; border-top: 1px solid #ebccd1; margin: 8px 0; }
    .be-login-banner-counter { color: #8a6d3b; font-size: 13px; }

    /* ── Campi disabilitati (account bloccato) ── */
    .be-field-input:disabled {
        background: #f5f5f5 !important; border-color: #ddd !important; color: #bbb !important;
    }
    .be-field-label.be-label-disabled { color: #bbb !important; }

    /* ── Separatore ── */
    .be-login-sep { border: none; border-top: 1px solid #e7e7e7; margin: 16px 0; }

    /* ── Riga "Problemi di accesso?" ── */
    .be-login-help {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 0; font-size: 14px; color: #777;
    }
    .be-login-help-left { display: flex; align-items: center; gap: 8px; }
    .be-login-help a { color: #337ab7; text-decoration: none; font-size: 14px; }

    /* ── Footer con logo uvet ── */
    .be-login-footer-logo { text-align: center; padding: 20px 0 8px; }
    .be-login-footer-logo img { max-height: 36px; width: auto; }
    .box-login-footer { text-align: center !important; font-size: 10px; padding: 8px !important; }

    /* ── Recovery password ── */
    .be-recovery-back { color: #337ab7; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; }
    .be-recovery-title { font-size: 22px; font-weight: 700; color: #231f20; margin-bottom: 4px; }
    .be-recovery-sub   { font-size: 14px; color: #777; margin-bottom: 20px; }
    .be-captcha-wrap {
        background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px;
        padding: 12px; margin-bottom: 4px;
        display: flex; align-items: center; justify-content: space-between;
    }
    .be-captcha-code { font-size: 24px; font-weight: 700; letter-spacing: 8px; color: #333; }
    .be-captcha-actions { display: flex; flex-direction: column; gap: 4px; }
    .be-captcha-btn {
        width: 36px; height: 36px; background: #fff; border: 1px solid #ddd;
        border-radius: 4px; display: flex; align-items: center; justify-content: center;
        color: #337ab7; cursor: pointer; font-size: 14px;
    }
}