/* iManage — login-box (CSS)
   v3.5.0 — Design review + modernisation : tokenisation complète (couleurs,
            typo, transitions), OAuth en style natif iManage (fini Google Material),
            suppression du glassmorphism, focus accessibles, animations snappy,
            avatar allégé. Aucune valeur hardcodée hors cas justifié.
   v3.4.4 — largeur desktop réduite 680px → 560px.
   v3.4.3 — greeting masqué sur mobile (≤600px). */

#login_greeting_wrap {
	position: fixed;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 1060;
	pointer-events: none;
	display: none;
}

/* Police manuscrite pour le greeting du login — Caveat Bold (SIL OFL, commercial OK). */
@font-face {
	font-family: 'Caveat';
	src: url('../../fonts/CaveatBold-latin-ext.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: block;
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Caveat';
	src: url('../../fonts/CaveatBold-latin.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: block;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

#login_greeting_wrap span {
	font-family: "Caveat", cursive;
	font-size: var(--font-size-xl);
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--text-on-dark);
	white-space: nowrap;
	line-height: 1;
	display: inline-block;
	/* cross-fade ambiant entre les langues du greeting — gardé doux mais moins lent qu'avant (1.8s) */
	transition: opacity 0.8s ease-in-out;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}

/* ── Entrée du greeting : glisse du bas vers le haut ── */
@keyframes lb-greeting-rise {
	from { transform: translateY(14px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}
.lb-greeting-animated {
	animation: lb-greeting-rise var(--transition-slow) ease-out both;
}

.login-brand-col {
	/* Fond défini par l'app via app.css — ne pas surcharger ici */
	min-height: 260px;
}

/* ─── Login box redesign ──────────────────────────────── */
.lb-dialog { max-width: 520px; }
#login_box .modal-content {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
/* Sur mobile : quasi plein écran, sans marge excessive */
@media (max-width: 575.98px) {
    .lb-dialog { max-width: 100%; margin: 0.75rem; }
    #login_box .modal-content { border-radius: var(--radius-lg); }
}
@media (min-width: 576px) {
    .lb-dialog { max-width: 460px; }
}
@media (min-width: 768px) {
    .lb-dialog { max-width: 560px; }
}

/* Sidebar */
.lb-sidebar {
    background: var(--notification-bg);
    min-height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: 32px 20px;
}
.lb-sidebar-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-lg);
    /* badge translucide sur le fond accent — plus de glassmorphism (backdrop-filter retiré) */
    background: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lb-sidebar-icon-wrap .fa-utensils {
    font-size: 2rem;   /* ICÔNE */
    color: var(--text-on-dark);
}
.lb-sidebar-logo-img {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    object-fit: contain;
}
.lb-sidebar-name {
    font-size: var(--font-size-base);
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--text-on-dark);
    opacity: var(--opacity-strong);
    text-transform: uppercase;
}
.lb-sidebar-tagline {
    font-size: var(--font-size-sm);
    color: var(--text-on-dark);
    opacity: var(--opacity-muted);
    text-align: center;
    letter-spacing: 0.04em;
    max-width: 140px;
    line-height: 1.5;
}

/* Form column */
.lb-form-col {
    background: var(--paper);
    padding: 36px 32px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
@media (max-width: 767.98px) {
    .lb-form-col { padding: 28px 24px 26px; }
}
/* Sous-titre du formulaire (remplace l'inline style="font-size:.85rem") */
.lb-form-col .lb-subtitle {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

/* En-tête mobile (visible uniquement sans sidebar) */
.lb-mobile-brand {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
@media (max-width: 767.98px) {
    .lb-mobile-brand { display: flex; }
}
.lb-mobile-icon {
    width: 38px; height: 38px;
    border-radius: var(--radius-md);
    background: var(--notification-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lb-mobile-icon .fa-utensils { font-size: .9rem; color: var(--text-on-dark); }   /* ICÔNE */
/* Logo mobile (remplace l'inline style height:32px;border-radius:8px) */
.lb-mobile-logo-img { height: 32px; width: auto; border-radius: var(--radius-sm); }
.lb-mobile-name {
    font-size: var(--font-size-base);
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--ink);
    text-transform: uppercase;
}

/* ── Avatar ── */
.lb-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 26px;
}
.lb-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--notification-bg);
    border: 2px solid var(--border);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.lb-avatar.lb-avatar-has-pic {
    border-color: var(--accent-border);
    box-shadow: var(--shadow-md);
}
#lb_avatar_icon {
    font-size: 2.1rem;   /* ICÔNE */
    color: var(--text-on-dark);
    opacity: var(--opacity-strong);
    position: absolute;
    transition: opacity var(--transition);
    pointer-events: none;
}
#lb_avatar_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    position: absolute;
    top: 0; left: 0;
}

@keyframes lb-avatar-reveal {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.lb-avatar-animated {
    /* easing standard (overshoot/bounce retiré pour cohérence) */
    animation: lb-avatar-reveal var(--transition) ease-out both;
}

/* Username input */
.lb-username-input {
    text-align: center;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.01em;
}
.lb-username-input::placeholder {
    text-align: center;
    color: var(--muted);
    font-weight: 400;
}

/* Password + button group */
.lb-pwd-group {
    position: relative;
}
.lb-pwd-group .input-group-text {
    border-right: none;
    background: var(--line-soft);
}
.lb-pwd-group #user_password {
    border-left: none;
    border-right: none;
    text-align: center;
    padding-right: 32px;
}
.lb-pwd-group #user_password::placeholder {
    text-align: center;
    color: var(--muted);
}
.lb-pwd-group #user_password:focus { z-index: 2; }
.lb-submit-btn {
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    padding: 0 20px;
    font-size: var(--font-size-menu);
    min-width: 52px;
}

/* ── Pulsation du bouton quand le mot de passe est reconnu ── */
@keyframes lb-pulse {
    0%,100% { background-color: var(--accent);     border-color: var(--accent); }
    50%     { background-color: var(--accent-dark); border-color: var(--accent-dark); }
}
#login_box .lb-btn-pulse {
    animation: lb-pulse 2.8s ease-in-out infinite;
}

/* ── Bouton œil (afficher/masquer mot de passe) ── */
.lb-eye-btn {
    position: absolute !important;
    right: 72px;
    top: calc(50% + 2px);
    transform: translateY(-50%);
    z-index: 5;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--muted);
    font-size: var(--font-size-sm);
    padding: 4px 6px;
    opacity: 0.4;
    cursor: pointer;
    transition: opacity var(--transition-fast);
    line-height: 1;
    border-radius: var(--radius-xs);
}
.lb-eye-btn:hover  { opacity: 0.72; }
/* Focus visible accessible (était outline:none sans remplacement) */
.lb-eye-btn:focus-visible {
    opacity: 0.9;
    box-shadow: var(--shadow-focus) !important;
    outline: none;
}
.lb-eye-btn:active { opacity: 0.9; }

/* ── Messages d'erreur inline ── */
#login_box .lb-field-error {
    font-size: var(--font-size-sm);
    color: var(--status-danger);
    text-align: left;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--transition) ease-out, opacity var(--transition) ease-out;
    line-height: 1.4;
}
#login_box .lb-field-error.lb-error-visible {
    max-height: 52px;
    opacity: 1;
}

/* ── Shake sur mauvais mot de passe ── */
@keyframes lb-shake {
    0%,100% { transform: translateX(0); }
    15%     { transform: translateX(-7px); }
    30%     { transform: translateX(7px); }
    45%     { transform: translateX(-5px); }
    60%     { transform: translateX(5px); }
    75%     { transform: translateX(-3px); }
    90%     { transform: translateX(3px); }
}
#login_box .lb-shake { animation: lb-shake 0.46s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }

/* ── État chargement du bouton ── */
#login_box .lb-submit-btn.lb-loading { pointer-events: none; opacity: 0.8; }

/* ── Horloge sidebar ── */
.lb-sidebar-time {
    font-size: var(--font-size-lg);
    font-weight: 300;
    letter-spacing: 0.06em;
    color: var(--text-on-dark);
    opacity: var(--opacity-secondary);
    margin-top: 18px;
    font-variant-numeric: tabular-nums;
}

/* ── Avatar plus petit sur mobile ── */
@media (max-width: 575.98px) {
    .lb-avatar { width: 68px; height: 68px; }
    #lb_avatar_icon { font-size: 1.7rem; }   /* ICÔNE */
}

#login_box .btn-primary { font-weight: var(--font-weight-semibold); }

/* ── Titre login (h1 sémantique, plafonné à l'échelle iManage) ── */
.lb-title{
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  margin-top: 0;
  color: inherit;
  text-wrap: balance;
}

/* ═══════════════════════════════════════════════════════
   MOBILE FIX (audit) — overflow login sur viewport ≤ 600px
═══════════════════════════════════════════════════════ */

/* Greeting manuscrit : ornement desktop. Sur mobile le login est quasi plein
   écran — aucune place au-dessus, le greeting se posait PAR-DESSUS la boîte et
   chevauchait « Connexion ». Donc masqué sur mobile. !important bat le
   display:block inline posé par login-box.js (shown.bs.modal). */
@media (max-width: 600px) {
    #login_greeting_wrap { display: none !important; }
}

/* Dialog : limite stricte + box-sizing border-box pour empêcher tout débord */
@media (max-width: 600px) {
    #login_box .modal-dialog,
    #login_box .lb-dialog {
        max-width: calc(100vw - 16px) !important;
        width: calc(100vw - 16px) !important;
        margin: 0.5rem auto;
    }
    #login_box .modal-content {
        box-sizing: border-box;
        overflow: hidden;
        max-width: 100%;
    }
    #login_box .row > [class*="col-"] {
        max-width: 100%;
    }
    .lb-sidebar-col {
        display: none !important;
    }
    .lb-form-col {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 24px 18px !important;
    }
    .lb-mobile-brand {
        display: flex !important;
    }
    .lb-pwd-group {
        flex-wrap: nowrap;
    }
    .lb-pwd-group .form-control,
    .lb-username-input {
        min-width: 0;
    }
}

/* Anti-overflow horizontal global quand login_box est ouvert */
@media (max-width: 600px) {
    body.modal-open {
        overflow-x: hidden;
    }
}

/* ── OAuth / SSO buttons — style natif iManage (tokens) ────────────────────── */

/* Séparateur « ou » */
.lb-or-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 14px;
    color: var(--muted);
    font-size: var(--font-size-sm);
    letter-spacing: 0.04em;
}

/* Mode OAuth-only : pas de séparateur « ou » (rien au-dessus à séparer) */
.lb-oauth-only .lb-or-sep { display: none; }
.lb-oauth-only .lb-oauth-btns { margin-top: 8px; }
.lb-oauth-only .lb-oauth-btn { padding: 12px 16px; }
.lb-or-sep::before,
.lb-or-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}
.lb-or-sep span { white-space: nowrap; }

/* Conteneur des boutons */
.lb-oauth-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Bouton OAuth — style natif iManage (fini le Material Google hardcodé).
   S'adapte au dark mode via les tokens (aucun override dark nécessaire). */
.lb-oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    user-select: none;
    line-height: 1.4;
}
.lb-oauth-btn:hover {
    background: var(--bg-subtle);
    box-shadow: var(--shadow-sm);
    border-color: var(--border-strong);
}
.lb-oauth-btn:active {
    background: var(--bg-content);
    box-shadow: none;
}
.lb-oauth-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-color: var(--accent);
}

/* Icône dans le bouton */
.lb-oauth-btn .lb-oauth-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    font-size: 1.05rem;   /* ICÔNE */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.lb-oauth-btn .lb-oauth-icon svg {
    width: 18px;
    height: 18px;
}

/* ── PIN-par-email ────────────────────────────────────────────────────────── */

.lb-pin-step { animation: lb-fade-in var(--transition) ease; }
@keyframes lb-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Champ email PIN — icône flottante dans le fond, sans box */
.lb-pin-email-wrap {
    position: relative;
}
.lb-pin-email-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: .85rem;   /* ICÔNE */
    pointer-events: none;
    z-index: 4;
}
.lb-pin-email-input {
    padding-left: 36px;
    padding-right: 46px;
}
/* Bouton "envoyer PIN" — base commune aux deux layouts */
.lb-pin-send-btn {
    border-radius: var(--radius-sm) !important;
    width: 34px;
    height: 34px;
    min-width: unset;
    padding: 0;
    font-size: .875rem;   /* ICÔNE (bouton carré glyphe/spinner) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Layout compact (oauth actif) : bouton positionné en absolu dans le champ */
.lb-pin-email-wrap .lb-pin-send-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
}
/* Layout standard (sans oauth) : bouton séparé à droite, réinitialise l'absolu */
.lb-pin-send-btn--std {
    position: static !important;
    transform: none !important;
    flex-shrink: 0;
}
/* Arrondi standard pour le groupe input-group (layout non-compact) */
.lb-pin-email-group .input-group-text {
    background: var(--line-soft);
    border-right: none;
}
.lb-pin-email-group .form-control {
    border-left: none;
}

.lb-pin-input {
    text-align: center;
    font-size: var(--font-size-xl);
    letter-spacing: 0.8em;
    font-weight: 600;
    padding-left: 1.5rem; /* compensate letter-spacing center alignment */
    font-variant-numeric: tabular-nums;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.lb-pin-input::placeholder {
    letter-spacing: 0.6em;
    font-size: var(--font-size-xl);
    color: var(--muted);
}

.lb-pin-link {
    text-decoration: none !important;
    font-size: var(--font-size-sm);
}
.lb-pin-link:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Spinner inline pour le bouton "Recevoir le code" */
.lb-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--text-on-accent);
    border-radius: 50%;
    animation: lb-spin 0.7s linear infinite;
}
@keyframes lb-spin {
    to { transform: rotate(360deg); }
}