/* ERP Benrabia — page de connexion (core/templates/admin/login.html) */

.erp-login-body {
    --lg-bg: #f6f8f7;
    --lg-card: #ffffff;
    --lg-text: #0f1f1a;
    --lg-muted: #5d6b66;
    --lg-border: #dfe6e3;
    --lg-input: #f9fbfa;
    --lg-accent: var(--color-primary-600, #059669);
    --lg-accent-hover: var(--color-primary-700, #047857);
    --lg-ring: color-mix(in oklch, var(--lg-accent) 22%, transparent);
    --lg-danger: #dc2626;
    --lg-danger-bg: #fef2f2;
    --lg-info-bg: #ecfdf5;
    background: var(--lg-bg) !important;
    color: var(--lg-text);
    font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Kufi Arabic", Arial, sans-serif;
}
.dark .erp-login-body {
    --lg-bg: #0b1411;
    --lg-card: #111c18;
    --lg-text: #e8efec;
    --lg-muted: #93a39d;
    --lg-border: #24332e;
    --lg-input: #0d1714;
    --lg-danger: #f87171;
    --lg-danger-bg: rgba(220, 38, 38, .12);
    --lg-info-bg: rgba(16, 185, 129, .1);
}

.erp-login {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}
@media (min-width: 1024px) {
    .erp-login { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* ── Panneau de marque ─────────────────────────────── */
.erp-login-brand {
    display: none;
    position: relative;
    overflow: hidden;
    color: #ecfdf5;
    background:
        radial-gradient(120% 90% at 100% 0%, var(--color-primary-700, #047857) 0%, transparent 60%),
        linear-gradient(160deg, var(--color-primary-900, #064e3b) 0%, var(--color-primary-950, #022c22) 100%);
}
@media (min-width: 1024px) {
    .erp-login-brand { display: flex; align-items: center; }
}
.erp-login-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
}
.erp-login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    animation: erp-float 14s ease-in-out infinite;
}
.erp-login-orb-1 {
    width: 420px; height: 420px;
    background: var(--color-primary-400, #34d399);
    top: -140px; left: -120px;
    opacity: .35;
}
.erp-login-orb-2 {
    width: 340px; height: 340px;
    background: #2dd4bf;
    bottom: -120px; right: -80px;
    opacity: .25;
    animation-delay: -7s;
}
@keyframes erp-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, 24px) scale(1.08); }
}

.erp-login-brand-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
    padding: 3.5rem 3rem;
}
.erp-login-mark {
    display: grid;
    place-items: center;
    width: 3.5rem; height: 3.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}
.erp-login-mark .material-symbols-outlined { font-size: 1.9rem; color: #fff; }
.erp-login-eyebrow {
    margin: 0 0 .6rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--color-primary-300, #6ee7b7);
}
.erp-login-brand h1 {
    margin: 0;
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    line-height: 1.2;
    font-weight: 800;
    color: #fff;
}
.erp-login-lead {
    margin: 1rem 0 0;
    font-size: 1.02rem;
    line-height: 1.85;
    color: rgba(236, 253, 245, .78);
}
.erp-login-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.erp-login-features li {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: .95rem;
    color: rgba(236, 253, 245, .9);
}
.erp-login-features .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 2.2rem; height: 2.2rem;
    flex: none;
    border-radius: .65rem;
    font-size: 1.2rem;
    background: rgba(255, 255, 255, .08);
    color: var(--color-primary-300, #6ee7b7);
}
.erp-login-companies {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.erp-login-company {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .85rem .9rem;
    border-radius: .85rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: background .2s, transform .2s;
}
.erp-login-company:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }
.erp-login-company-code {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--color-primary-300, #6ee7b7);
}
.erp-login-company-name {
    font-size: .84rem;
    color: #fff;
    direction: ltr;
    text-align: right;
    line-height: 1.35;
}

/* ── Formulaire ─────────────────────────────────────── */
.erp-login-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 1rem;
}
.erp-login-card {
    width: 100%;
    max-width: 26rem;
    padding: 2.25rem 2rem;
    border-radius: 1.25rem;
    background: var(--lg-card);
    border: 1px solid var(--lg-border);
    box-shadow: 0 1px 2px rgba(15, 31, 26, .04), 0 20px 50px -20px rgba(15, 31, 26, .18);
    animation: erp-rise .5s cubic-bezier(.2, .8, .2, 1) both;
}
@media (max-width: 480px) {
    .erp-login-card { padding: 1.75rem 1.25rem; }
}
@keyframes erp-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.erp-login-mobile-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.75rem;
    font-size: 1.05rem;
}
@media (min-width: 1024px) { .erp-login-mobile-brand { display: none; } }
.erp-login-mark-sm {
    width: 2.6rem; height: 2.6rem;
    border-radius: .75rem;
    background: var(--lg-accent);
    border: 0;
}
.erp-login-mark-sm .material-symbols-outlined { font-size: 1.4rem; }

.erp-login-head h2 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--lg-text);
}
.erp-login-head p {
    margin: .45rem 0 1.75rem;
    color: var(--lg-muted);
    font-size: .95rem;
}

.erp-login-alert {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    padding: .8rem .9rem;
    border-radius: .75rem;
    background: var(--lg-danger-bg);
    color: var(--lg-danger);
    font-size: .88rem;
    line-height: 1.6;
    border: 1px solid color-mix(in srgb, var(--lg-danger) 25%, transparent);
}
.erp-login-alert p { margin: 0; }
.erp-login-alert .material-symbols-outlined { font-size: 1.2rem; flex: none; margin-top: .1rem; }
.erp-login-alert-info {
    background: var(--lg-info-bg);
    color: var(--lg-accent);
    border-color: color-mix(in srgb, var(--lg-accent) 25%, transparent);
}

.erp-login-form { display: flex; flex-direction: column; gap: 1.1rem; }
.erp-login-field label {
    display: block;
    margin-bottom: .45rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--lg-text);
}
.erp-login-input {
    position: relative;
    display: flex;
    align-items: center;
    height: 3rem;
    border-radius: .8rem;
    background: var(--lg-input);
    border: 1.5px solid var(--lg-border);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.erp-login-input:focus-within {
    border-color: var(--lg-accent);
    background: var(--lg-card);
    box-shadow: 0 0 0 4px var(--lg-ring);
}
.erp-login-input.has-error { border-color: var(--lg-danger); }
.erp-login-input > .material-symbols-outlined {
    flex: none;
    padding-inline: .85rem .25rem;
    font-size: 1.25rem;
    color: var(--lg-muted);
    transition: color .15s;
}
.erp-login-input:focus-within > .material-symbols-outlined { color: var(--lg-accent); }
.erp-login-input input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 .5rem;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--lg-text);
    font: inherit;
    font-size: .975rem;
}
.erp-login-input input::placeholder { color: var(--lg-muted); opacity: .7; }
.erp-login-input input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px var(--lg-input) inset !important;
    -webkit-text-fill-color: var(--lg-text);
}
.erp-login-eye {
    display: grid;
    place-items: center;
    width: 2.4rem; height: 2.4rem;
    margin-inline-end: .3rem;
    border: 0;
    border-radius: .6rem;
    background: transparent;
    color: var(--lg-muted);
    cursor: pointer;
}
.erp-login-eye:hover { background: var(--lg-border); color: var(--lg-text); }
.erp-login-eye:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 1px; }
.erp-login-eye .material-symbols-outlined { font-size: 1.2rem; }

.erp-login-error,
.erp-login-caps {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .45rem 0 0;
    font-size: .8rem;
    color: var(--lg-danger);
}
.erp-login-caps { color: #b45309; }
.dark .erp-login-caps { color: #fbbf24; }
.erp-login-caps[hidden] { display: none; }
.erp-login-caps .material-symbols-outlined { font-size: 1rem; }

.erp-login-row { display: flex; justify-content: flex-end; margin-top: -.35rem; }
.erp-login-link {
    font-size: .85rem;
    font-weight: 600;
    color: var(--lg-accent);
    text-decoration: none;
}
.erp-login-link:hover { text-decoration: underline; }

.erp-login-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 3rem;
    margin-top: .4rem;
    border: 0;
    border-radius: .8rem;
    background: linear-gradient(180deg, var(--color-primary-500, #10b981), var(--lg-accent));
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--lg-accent) 70%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .2);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.erp-login-submit:hover { filter: brightness(1.05); transform: translateY(-1px); }
.erp-login-submit:active { transform: translateY(0); }
.erp-login-submit:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--lg-ring); }
.erp-login-arrow { font-size: 1.15rem; transition: transform .2s; }
.erp-login-submit:hover .erp-login-arrow { transform: translateX(-4px); }
.erp-login-spinner {
    display: none;
    width: 1.1rem; height: 1.1rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    animation: erp-spin .7s linear infinite;
}
.erp-login-submit.is-loading { pointer-events: none; opacity: .9; }
.erp-login-submit.is-loading .erp-login-arrow { display: none; }
.erp-login-submit.is-loading .erp-login-spinner { display: inline-block; }
@keyframes erp-spin { to { transform: rotate(360deg); } }

.erp-login-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--lg-border);
    font-size: .78rem;
    color: var(--lg-muted);
}
.erp-login-foot .material-symbols-outlined { font-size: 1rem; }
.erp-login-copy { margin: 0; font-size: .78rem; color: var(--lg-muted); }

@media (prefers-reduced-motion: reduce) {
    .erp-login-orb, .erp-login-card, .erp-login-spinner { animation: none; }
}

/* ── Page de déconnexion (registration/logged_out.html) ── */
.erp-logout-card { text-align: center; }
.erp-logout-card .erp-login-mobile-brand { justify-content: center; }
.erp-logout-icon {
    display: grid;
    place-items: center;
    width: 4.5rem; height: 4.5rem;
    margin: .25rem auto 1.5rem;
    border-radius: 50%;
    background: var(--lg-info-bg);
    color: var(--lg-accent);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--lg-accent) 8%, transparent);
    animation: erp-pop .5s .15s cubic-bezier(.2, 1.4, .4, 1) both;
}
.erp-logout-icon .material-symbols-outlined { font-size: 2.1rem; }
@keyframes erp-pop {
    from { opacity: 0; transform: scale(.6); }
    to { opacity: 1; transform: none; }
}
.erp-logout-head p { margin-bottom: 1.75rem; }
.erp-logout-btn { display: flex; width: 100%; text-decoration: none; }
.erp-logout-btn:hover { color: #fff; }
.erp-logout-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: 1.25rem 0 0;
    font-size: .82rem;
    color: var(--lg-muted);
}
.erp-logout-tip .material-symbols-outlined { font-size: 1.05rem; color: #d97706; }
@media (prefers-reduced-motion: reduce) { .erp-logout-icon { animation: none; } }