/* ==========================================================================
   LABSINCU — authentication screens
   ==========================================================================

   One design for every auth screen. Before this there were three: login and
   register used a dark 420px card, the password screens rendered a split-panel
   layout whose stylesheet did not exist anywhere (so they arrived unstyled),
   and the email/SMS verification screens used a plain Bootstrap card. Moving
   between them - "Forgot password?" from the sign-in form, say - changed the
   look of the site mid-flow.

   The class vocabulary is the one the password screens already used
   (auth-shell, auth-illustration-panel, auth-form-card, ...); this is the
   stylesheet that was missing, with login, register and verification migrated
   onto it.

   Colours come from tokens.css. Direction-sensitive properties are logical, so
   the whole thing mirrors in Arabic without a second stylesheet.
   ========================================================================== */

.auth-page {
    --auth-radius: 18px;
    /* These screens now sit inside the normal site layout, between the header
       and the footer, so they size to their content rather than the viewport. */
    padding: clamp(28px, 5vw, 64px) 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(124, 92, 255, .10), transparent 42%),
        radial-gradient(circle at 88% 78%, rgba(124, 92, 255, .08), transparent 45%),
        #f6f5fb;
}

.auth-shell {
    max-width: 1060px;
    margin-inline: auto;
    background: #fff;
    border-radius: var(--auth-radius);
    box-shadow: 0 24px 60px -28px rgba(24, 16, 56, .32);
    overflow: hidden;
}

/* ---------- Brand panel ---------- */

.auth-illustration-panel {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 44px 42px;
    color: #fff;
    background: linear-gradient(155deg, var(--brand-900) 0%, var(--brand-700) 58%, var(--brand-500) 100%);
    overflow: hidden;
}

/* A faint measurement grid rather than a stock illustration - this is a
   laboratory and conformity platform, and a ruled grid is the closest honest
   visual its world has. */
.auth-illustration-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at 30% 20%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 30% 20%, #000 0%, transparent 72%);
    pointer-events: none;
}

.auth-illustration-panel > * {
    position: relative;
    z-index: 1;
}

.auth-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .3px;
    color: #fff;
    margin-bottom: 40px;
}

.auth-logo img {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.auth-logo:hover,
.auth-logo:focus-visible {
    color: #fff;
}

.auth-illustration-title {
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 12px;
    text-wrap: balance;
}

.auth-illustration-text {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
    margin: 0 0 28px;
    max-width: 42ch;
}

.auth-benefits-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.auth-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
}

.auth-benefits-list i {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, .13);
    font-size: 13px;
}

.auth-panel-footer {
    margin-top: auto;
    padding-top: 32px;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
}

.auth-panel-footer a {
    color: #fff;
    text-decoration: underline;
}

/* ---------- Form panel ---------- */

.auth-form-panel {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 44px 42px;
}

.auth-form-card {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
}

.auth-form-header {
    margin-bottom: 26px;
}

.auth-form-header h1 {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-heading, #101828);
    margin: 0 0 8px;
}

.auth-form-header p {
    margin: 0;
    font-size: 14.5px;
    color: var(--color-text-light, #8a94a6);
}

.auth-form-header p strong {
    color: var(--color-heading, #101828);
}

/* Tabs between Sign in and Register */
.auth-tabs {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: var(--brand-tint, #f1edff);
    margin-bottom: 26px;
}

.auth-tab {
    padding: 8px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-text, #5b3df0);
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.auth-tab:hover,
.auth-tab:focus-visible {
    color: var(--brand-900, #3700b3);
}

.auth-tab.active {
    background: #fff;
    color: var(--color-heading, #101828);
    box-shadow: 0 2px 8px rgba(24, 16, 56, .12);
}

.auth-form .form-label,
.auth-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-heading, #101828);
    margin-bottom: 6px;
}

.auth-input-group {
    position: relative;
}

.auth-input-icon {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--color-text-light, #8a94a6);
    pointer-events: none;
}

.auth-form .form-control,
.auth-form .form-select,
.auth-input {
    width: 100%;
    height: 48px;
    border: 1px solid var(--color-border, #e7e6ef);
    border-radius: 11px;
    background: #fff;
    font-size: 14.5px;
    color: var(--color-heading, #101828);
    padding-inline: 14px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.auth-form textarea.form-control { height: auto; padding-block: 12px; }

/* Only inputs that actually carry an icon get the extra inset. */
.auth-input-group > .auth-input-icon ~ .form-control,
.auth-input-group > .auth-input-icon ~ .auth-input {
    padding-inline-start: 40px;
}

.auth-form .form-control:focus,
.auth-form .form-select:focus,
.auth-input:focus {
    outline: none;
    border-color: var(--brand, #7c5cff);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 124, 92, 255), .18);
}

.auth-form .form-control::placeholder {
    color: #b3bac6;
}

.password-toggle-btn {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: var(--color-text-light, #8a94a6);
    padding: 4px;
    line-height: 1;
    cursor: pointer;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus-visible {
    color: var(--brand-text, #5b3df0);
}

.auth-form .invalid-feedback,
.auth-exist-feedback {
    display: block;
    font-size: 12.5px;
    color: #a81f2d;
    margin-top: 5px;
}

.auth-form .form-control.is-invalid,
.auth-input.is-invalid {
    border-color: #a81f2d;
}

.auth-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.auth-form .form-check-label {
    font-size: 13.5px;
    font-weight: 400;
    color: var(--color-text, #5f6b7a);
    margin: 0;
}

.auth-form .form-check-input:checked {
    background-color: var(--brand, #7c5cff);
    border-color: var(--brand, #7c5cff);
}

.auth-link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand-text, #5b3df0);
}

.auth-link:hover,
.auth-link:focus-visible {
    color: var(--brand-900, #3700b3);
    text-decoration: underline;
}

.auth-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 11px;
    background: var(--brand, #7c5cff);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease, transform .12s ease;
}

.auth-submit-btn:hover:not(:disabled),
.auth-submit-btn:focus-visible:not(:disabled) {
    background: var(--brand-hover, #6a45f0);
    color: #fff;
}

.auth-submit-btn:active:not(:disabled) { transform: translateY(1px); }
.auth-submit-btn:disabled { opacity: .7; cursor: progress; }

.auth-switch-text {
    margin-top: 22px;
    text-align: center;
    font-size: 14px;
    color: var(--color-text-light, #8a94a6);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    font-size: 12.5px;
    color: var(--color-text-light, #8a94a6);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border, #e7e6ef);
}

.auth-form .alert {
    border-radius: 11px;
    font-size: 14px;
}

.auth-note {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--brand-tint, #f1edff);
    font-size: 13px;
    color: var(--brand-text, #5b3df0);
}

/* Verification code inputs (partials/verification_code) */
.auth-form .verification-code {
    display: flex;
    gap: 10px;
    justify-content: center;
    direction: ltr;
}

.auth-form .verification-code input {
    width: 48px;
    height: 56px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    border: 1px solid var(--color-border, #e7e6ef);
    border-radius: 11px;
}

.auth-form .verification-code input:focus {
    outline: none;
    border-color: var(--brand, #7c5cff);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 124, 92, 255), .18);
}

/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {
    .auth-page { padding: 24px 0 40px; }

    /* The brand panel becomes a compact header strip rather than a wall of
       colour above the form. */
    .auth-illustration-panel { padding: 26px 26px 22px; }
    .auth-illustration-panel .auth-benefits-list,
    .auth-illustration-panel .auth-panel-footer { display: none; }
    .auth-logo { margin-bottom: 18px; }
    .auth-illustration-text { margin-bottom: 0; }
    .auth-form-panel { padding: 30px 26px 34px; }
}

@media (max-width: 575.98px) {
    .auth-page { padding: 16px 0 28px; }
    .auth-shell { border-radius: 0; box-shadow: none; }
    .auth-form-card { max-width: none; }
    .auth-form .verification-code input { width: 42px; height: 50px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-submit-btn,
    .auth-tab,
    .auth-input { transition: none; }
}