/* ============================================================
   LOGIN PAGE — InfraVet
   Pure flex layout, 100vh, no fixed/absolute (sauf toast)
   ============================================================ */

/* === ANIMATIONS === */
@keyframes panelFadeLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes panelSlideRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes tileAppear {
    from { opacity: 0; transform: scale(0.7) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes toastSlideIn {
    from { transform: translateX(110%); }
    to   { transform: translateX(0); }
}
@keyframes toastSlideOut {
    from { transform: translateX(0); }
    to   { transform: translateX(110%); }
}

/* === WRAPPER (body = flex row, 100vh) === */
.login-wrapper {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e1b4b 100%);
}

/* === PANNEAU DECORATIF GAUCHE === */
.login-deco {
    width: 33.333%;
    flex-shrink: 0;
    background: url('/images/auth-one-bg.jpg') center / cover no-repeat;
    animation: panelFadeLeft 1s ease-out 0.4s both;
}
.login-deco-overlay {
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.82);
}

/* === PANNEAU PRINCIPAL === */
.login-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.08);
    animation: panelSlideRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    overflow: hidden;
}

/* === HEADER === */
.login-header {
    flex-shrink: 0;
    padding: 1.25rem 2rem;
    text-align: right;
    border-bottom: 1px solid #e2e8f0;
}
.login-header-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 0.25rem;
}
.login-header-brand img {
    height: 36px;
}
.login-header-brand .logo-light {
    display: block;
}
.login-header-brand .logo-dark {
    display: none;
}
.login-header-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}
.login-header-date {
    font-size: 0.82rem;
    color: #94a3b8;
    margin: 0;
}

/* === CONTENEUR CENTRAL (entre header et footer) === */
.login-middle {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* === BODY (seul scrollable) === */
.login-body {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* === GRILLE DE TUILES === */
.login-grid {
    --tile-size: 110px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: 640px;
    margin: 2rem auto 2rem;
}

/* === TUILE === */
.login-tile {
    position: relative;
    width: var(--tile-size);
    height: var(--tile-size);
    cursor: pointer;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
    transition: transform 0.3s ease, filter 0.3s ease;
    opacity: 0;
    animation: tileAppear 0.5s ease-out forwards;
    display: block;
}
.login-tile:hover,
.login-tile.active {
    transform: translateY(-5px) scale(1.06);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.18));
}

/* Forme octogonale */
.login-tile-shape {
    width: 100%;
    height: 100%;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background 0.3s ease;
    background: linear-gradient(180deg, var(--hex-bg-soft) 0%, var(--hex-bg-deep) 100%);
}
.login-tile:hover .login-tile-shape,
.login-tile.active .login-tile-shape {
    background: var(--hex-hover);
}

/* Avatar */
.login-tile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    background: var(--hex-accent);
    color: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.login-tile-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.login-tile:hover .login-tile-avatar,
.login-tile.active .login-tile-avatar {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 12px rgba(255, 255, 255, 0.2);
}

/* Prénom */
.login-tile-name {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--hex-accent);
    transition: color 0.3s ease;
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.login-tile:hover .login-tile-name,
.login-tile.active .login-tile-name {
    color: #fff;
}

/* Badge raccourci clavier (bulle centrée sous le nom) */
.login-tile-shortcut {
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    background: var(--hex-accent);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.login-tile:hover .login-tile-shortcut,
.login-tile.active .login-tile-shortcut {
    background: rgba(255, 255, 255, 0.35);
}

/* === FORMULAIRE PASSWORD DESKTOP === */
.login-form-desktop {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}
.login-form-desktop .form-control {
    border-radius: 10px;
    padding: 0.6rem 1rem;
    border: 2px solid #e2e8f0;
}
.login-form-desktop .form-control:focus {
    border-color: #1e293b;
    box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1);
}

/* Champ password avec toggle oeil */
.login-pw-field {
    position: relative;
    flex: 1;
}
.login-pw-field .form-control {
    padding-right: 2.5rem;
}
.login-pw-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 1.1rem;
    line-height: 1;
}
.login-pw-eye:hover {
    color: #1e293b;
}

/* Bouton Connexion */
.login-btn-submit {
    border-radius: 10px;
    padding: 0.6rem 1rem;
    font-weight: 600;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: none;
    color: #fff;
}
.login-btn-submit:hover {
    background: linear-gradient(135deg, #334155, #1e293b);
    color: #fff;
}
.login-btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Numpad */
.login-numpad .btn {
    border-radius: 10px;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.5rem;
}
.login-numpad .btn-outline-primary {
    color: #1e293b;
    border-color: #cbd5e1;
    background: #fff;
}
.login-numpad .btn-outline-primary:hover {
    color: #fff;
    background: #1e293b;
    border-color: #1e293b;
}
.login-numpad .btn-outline-primary:active,
.login-numpad .btn-outline-primary.active,
.login-numpad .btn-outline-primary:active:focus {
    color: #fff !important;
    background: #7ecdc1 !important;
    border-color: #7ecdc1 !important;
    box-shadow: none !important;
}
.login-numpad .btn-outline-danger {
    color: #dc2626;
    border-color: #fecaca;
}
.login-numpad .btn-outline-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
.login-numpad .btn-outline-success {
    color: #16a34a;
    border-color: #bbf7d0;
}
.login-numpad .btn-outline-success:hover {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

/* Toggle clavier numérique */
.login-btn-numpad-toggle {
    color: #1e293b !important;
    border: 1px solid #1e293b !important;
    border-radius: 10px !important;
    background: #fff !important;
}
.login-btn-numpad-toggle:hover {
    color: #fff !important;
    background: #1e293b !important;
    border-color: #1e293b !important;
}

/* Lien mot de passe oublié */
.login-forgot {
    text-align: center;
    margin-top: 1rem;
}
.login-forgot a {
    color: #64748b;
    font-size: 0.82rem;
    text-decoration: none;
}
.login-forgot a:hover {
    color: #3b82f6;
}
.login-forgot a.disabled {
    pointer-events: none;
    opacity: 0.6;
}

/* === FOOTER === */
.login-footer {
    flex-shrink: 0;
    padding: 0.75rem 2rem;
    text-align: center;
    font-size: 0.78rem;
    color: #94a3b8;
    border-top: 1px solid #e2e8f0;
}

/* === TOAST === */
.login-toast {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    padding: 0.75rem 1.25rem;
    background: #dc2626;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: -4px 4px 20px rgba(220, 38, 38, 0.3);
    transform: translateX(110%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0 0 0 10px;
}
.login-toast.visible {
    transform: translateX(0);
}
.login-toast.success {
    background: #16a34a;
    box-shadow: -4px 4px 20px rgba(22, 163, 74, 0.3);
}
.login-toast.warning {
    background: #d97706;
    box-shadow: -4px 4px 20px rgba(217, 119, 6, 0.3);
}
.login-toast-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.login-toast-close:hover {
    color: #fff;
}

/* ============================================================
   PASSWORD CHANGE PAGE
   ============================================================ */
.pwchange-card {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: 2rem;
}
.pwchange-header {
    text-align: center;
    margin-bottom: 2rem;
}
.pwchange-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.pwchange-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem;
}
.pwchange-subtitle {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0;
}
.pwchange-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
    display: block;
}
.pwchange-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}
.pwchange-card .form-control {
    border-radius: 10px;
    padding: 0.6rem 1rem;
    border: 2px solid #e2e8f0;
}
.pwchange-card .form-control:focus {
    border-color: #1e293b;
    box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1);
}
.pwchange-links {
    text-align: center;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pwchange-links a {
    color: #64748b;
    font-size: 0.82rem;
    text-decoration: none;
}
.pwchange-links a:hover {
    color: #3b82f6;
}
.pwchange-links a.disabled {
    pointer-events: none;
    opacity: 0.6;
}

/* Succès */
.pwchange-success {
    text-align: center;
    padding: 3rem 1rem;
}
.pwchange-success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: tileAppear 0.5s ease-out;
}

/* === PANEL PASSWORD MOBILE (masqué en desktop) === */
.login-pw-mobile {
    display: none;
}

/* ============================================================
   TABLETTE (768px — 1200px)
   ============================================================ */
@media (max-width: 1200px) {
    .login-deco { width: 35%; }
    .login-main { /* flex:1 reste */ }

    .login-grid { --tile-size: 95px; max-width: 540px; }
    .login-tile-avatar { width: 34px; height: 34px; font-size: 13px; }
    .login-tile-name { font-size: 0.52rem; }
}

/* Toggle numpad masqué entre 768 et 992 */
@media (max-width: 992px) {
    .login-numpad-toggle { display: none !important; }
}

/* ============================================================
   MOBILE (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Panneau gauche disparaît */
    .login-deco { display: none; }

    /* Main 100% avec image en filigrane sombre */
    .login-main {
        width: 100%;
        box-shadow: none;
        background:
            linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)),
            url('/images/auth-one-bg.jpg') center / cover no-repeat;
    }

    /* Middle : position relative pour le close button du panel */
    .login-middle {
        position: relative;
    }

    /* Header mobile : row horizontal */
    .login-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: unset;
        padding: 1rem 1.25rem;
    }
    .login-header-brand {
        justify-content: flex-start;
        margin-bottom: 0;
    }
    .login-header-text {
        text-align: right;
    }

    /* Logos : inverser pour fond sombre */
    .login-header-brand .logo-light { display: none; }
    .login-header-brand .logo-dark { display: block; }

    /* Header/Footer fond sombre */
    .login-header { background: rgba(15, 23, 42, 0.95); border-bottom-color: rgba(255,255,255,0.1); }
    .login-header-title { color: #fff; }
    .login-header-date { color: rgba(255,255,255,0.6); }
    .login-footer { background: rgba(15, 23, 42, 0.95); border-top-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }

    /* Body mobile : centrer verticalement */
    .login-body {
        justify-content: center;
    }

    /* Grille mobile */
    .login-grid { --tile-size: 110px; max-width: 580px; }
    .login-tile-avatar { width: 40px; height: 40px; font-size: 15px; }
    .login-tile-name { font-size: 0.6rem; max-width: 90px; }

    /* Masquer form desktop */
    .login-form-desktop { display: none; }

    /* Panel password mobile */
    .login-pw-mobile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        overflow-y: auto;
        padding: 2rem 1.5rem;
        flex-shrink: 0;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        /* Occupe l'espace entre header et footer via flex */
        flex: 0 0 0;
        height: 0;
        overflow: hidden;
    }
    .login-pw-mobile.open {
        transform: translateX(0);
        flex: 1;
        height: auto;
        overflow-y: auto;
    }
    .login-pw-close {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        background: #f1f5f9;
        border: none;
        font-size: 1.5rem;
        color: #1e293b;
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background 0.2s;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .login-pw-close:hover {
        background: #e2e8f0;
    }
    /* Bouton Connexion masqué sur mobile (le numpad suffit) */
    .login-pw-mobile .login-btn-submit { display: none; }
    .login-pw-user {
        text-align: center;
        margin-bottom: 1.5rem;
    }
    .login-pw-user-name {
        font-size: 1.25rem;
        font-weight: 700;
        color: #1e293b;
    }
    .login-pw-user-email {
        font-size: 0.82rem;
        color: #64748b;
    }
    .login-pw-form {
        width: 100%;
        max-width: 280px;
    }
    .login-pw-form .form-control {
        border-radius: 10px;
        padding: 0.6rem 1rem;
        border: 2px solid #e2e8f0;
    }
    .login-pw-form .form-control:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    /* Toast mobile : pleine largeur, slide vertical */
    .login-toast {
        left: 0;
        right: 0;
        max-width: 100%;
        border-radius: 0;
        padding: 1rem 1.25rem;
        transform: translateY(-110%);
    }
    .login-toast.visible {
        transform: translateY(0);
    }

    /* Password-change card mobile : fond glass */
    .pwchange-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 16px;
        padding: 1.5rem;
        max-width: 340px;
    }
    .pwchange-title { color: #1e293b; }
    .pwchange-links a { color: #64748b; }
    .pwchange-submit { display: none; }
    .pwchange-numpad { display: block !important; }

    /* Body masqué quand pw-panel ouvert */
    .login-body.hidden-mobile {
        display: none;
    }
}