/* ─────────────────────────────────────────────────────────────────
   auth.css — shared styles for login, forgot-password, reset-password
   ───────────────────────────────────────────────────────────────── */

html, body { height: 100%; }

body {
    min-height: 100vh;
    background-color: var(--body-bg);
}

.login-wrapper { min-height: 100vh; }

/* ── Left panel — fixed grid-column width (col-md-8/col-lg-8 in the markup). Bounded
   by design: a shrink-to-image's-own-aspect-ratio approach was tried twice and broke
   both times — vertically (square image forced to fill width overflowed height) and
   horizontally (square image forced to fill height overflowed width, since our source
   graphic is square and desktop viewports are wide, not square). A fixed percentage
   column can't overflow in either direction, which is worth more here than pixel-perfect
   full-bleed. ── */
.left-panel {
    background: var(--body-bg);
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Blurred, full-bleed echo of the same auth graphic, filling every edge of the panel.
   The sharp foreground copy (.auth-illustration-full) uses object-fit: contain to stay
   fully uncropped, which leaves flat letterbox strips wherever the panel's aspect ratio
   doesn't match the image — this backdrop fills that space with a soft blur of the same
   picture instead of a flat color seam. */
.left-panel::before {
    content: '';
    position: absolute;
    inset: -40px;
    background-image: url('/images/tende-auth.png');
    background-size: cover;
    background-position: center;
    filter: blur(40px) brightness(0.9);
    z-index: 0;
}

/* ── Right panel ── */
.right-panel {
    min-height: 100vh;
    background: #ffffff;
}

.login-card {
    width: 100%;
    max-width: 380px;
}

/* ── Logo ── */
.logo-circle {
    width: 72px;
    height: 72px;
    background: var(--sidebar-bg);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 8px 24px rgba(var(--brand-primary-rgb), 0.25);
}

.logo-circle i {
    font-size: 2rem;
    color: #fff;
}

/* ── Company branding logo (per-company, served via /auth/branding/logo_horiz) — hidden
   via the img's own onerror handler when a company hasn't uploaded one. ── */
.auth-company-logo-horiz {
    max-height: 40px;
    max-width: 220px;
    object-fit: contain;
}

/* ── Form controls ── */
.form-control {
    border-radius: 8px;
    padding: 0.65rem 1rem;
    border-color: var(--border-light);
    font-size: 0.92rem;
}

.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.15);
}

.input-group-text {
    border-radius: 8px 0 0 8px;
    background: var(--surface-input);
    border-color: var(--border-light);
    color: var(--text-muted);
}

.input-group .form-control {
    border-radius: 0 8px 8px 0;
}

/* ── Primary button ── */
.btn-login {
    background-color: var(--brand-primary-dark) !important;
    background: var(--brand-primary-dark) !important;
    border: 1px solid var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 0.7rem !important;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn-login:hover,
.btn-login:focus,
.btn-login:focus-visible,
.btn-login.btn-primary:hover,
.btn-login.btn-primary:focus,
.btn-login.btn-primary:focus-visible {
    background-color: var(--brand-primary-darker) !important;
    border-color: var(--brand-primary-darker) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.35) !important;
}

.btn-login:active,
.btn-login.btn-primary:active {
    background-color: var(--brand-primary-darker) !important;
    border-color: var(--brand-primary-darker) !important;
    color: #fff !important;
    transform: translateY(0);
}

/* ── Divider ── */
.divider {
    height: 1px;
    background: var(--border-faint);
}

/* ── Icon box (success states) ── */
.icon-box {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--brand-light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.icon-box i {
    font-size: 1.75rem;
    color: var(--brand-primary);
}

/* ── Auth: brand illustration, full-bleed across the whole left panel
   (login/forgot-password/reset-password/two-factor) ── */
.auth-illustration-full {
    /* Sharp foreground copy, fully contained (never cropped) inside the fixed-width
       .left-panel. The blurred ::before backdrop fills any letterbox space around it. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 1;
}

/* ── Login: illustration placeholder ── */
.placeholder-illustration {
    background: rgba(255, 255, 255, 0.08);
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4/3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
}

.placeholder-illustration i {
    font-size: 4rem;
    margin-bottom: 1rem;
}

/* ── Login: stat cards ── */
.stat-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
}

/* ── Forgot Password: step items ── */
.step-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
}

.step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* ── Two-Factor: OTP input row ── */
.otp-group {
    display: flex;
    gap: 0.625rem;
    justify-content: center;
}
.otp-input {
    width: 48px;
    height: 52px;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    border: 1.5px solid var(--border-light);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    color: var(--text-heading);
}
.otp-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15);
}
.otp-input.is-invalid {
    border-color: var(--status-danger);
    box-shadow: 0 0 0 3px rgba(var(--status-danger-rgb), 0.12);
}

/* ── Reset Password: tip items ── */
.tip-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 0.875rem 1.125rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-align: left;
}

.tip-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ── Reset Password: strength meter ── */
.strength-bar-wrap {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.strength-bar-wrap .bar {
    height: 4px;
    border-radius: 2px;
    flex: 1;
    background: var(--border-medium);
    transition: background 0.3s;
}

/* ── Reset Password: show/hide password toggle ── */
.toggle-pw {
    background: var(--surface-input);
    border-left: 0;
    border-radius: 0 8px 8px 0 !important;
    cursor: pointer;
}

.toggle-pw:hover { background: var(--border-medium); }

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.15);
}

/* ── Responsive ── */

/* Extra large (≥ 1400px) */
@media (min-width: 1400px) {
    .login-card {
        max-width: 420px;
    }

    .placeholder-illustration {
        max-width: 480px;
    }

    .left-content {
        max-width: 540px !important;
    }
}

/* Large (992–1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .login-card {
        max-width: 360px;
    }

    .placeholder-illustration {
        max-width: 360px;
    }

}

/* Medium / tablet (768–991px): left panel is visible, panels are col-md-8 / col-md-4 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .left-panel {
        padding: 0 !important;
    }

    .login-card {
        max-width: 320px;
    }

    .placeholder-illustration {
        max-width: 300px;
        aspect-ratio: 4/3;
    }

    .stat-card {
        padding: 0.6rem 1rem !important;
    }

    .stat-card .fs-4 {
        font-size: 1.1rem !important;
    }

    .step-item,
    .tip-item {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    .logo-circle {
        width: 60px;
        height: 60px;
    }

    .logo-circle i {
        font-size: 1.6rem;
    }
}

/* Small (576–767px): left panel hidden by d-none d-md-flex, full-width form */
@media (min-width: 576px) and (max-width: 767.98px) {
    .right-panel {
        min-height: 100vh;
        padding: 3rem 2rem !important;
        align-items: center !important;
    }

    .login-card {
        max-width: 440px;
    }

    .logo-circle {
        width: 64px;
        height: 64px;
    }

    .logo-circle i {
        font-size: 1.75rem;
    }
}

/* Extra small / mobile (≤ 575px) */
@media (max-width: 575.98px) {
    .right-panel {
        min-height: 100vh;
        padding: 2rem 1.25rem !important;
        align-items: flex-start !important;
        padding-top: 2.5rem !important;
    }

    .login-card {
        max-width: 100%;
    }

    .logo-circle {
        width: 56px;
        height: 56px;
    }

    .logo-circle i {
        font-size: 1.5rem;
    }

    .form-control {
        font-size: 0.875rem;
        padding: 0.6rem 0.875rem;
    }

    .btn-login {
        padding: 0.6rem;
        font-size: 0.9rem;
    }

    .strength-bar-wrap .bar {
        height: 3px;
    }

    .otp-group {
        gap: 0.4rem;
    }
    .otp-input {
        width: 38px;
        height: 44px;
        font-size: 1.1rem;
    }
}

/* Shared mobile styles (≤ 767px — left panel hidden range) */
@media (max-width: 767.98px) {
    .left-panel {
        min-height: 260px;
        padding: 2rem 1.5rem !important;
    }

    .right-panel {
        min-height: unset;
    }

    .placeholder-illustration {
        max-width: 280px;
        aspect-ratio: 16/9;
    }
}

/* Landscape phones (height ≤ 500px) — prevent form from being cut off */
@media (max-height: 500px) and (orientation: landscape) {
    .login-wrapper {
        min-height: unset;
    }

    .right-panel {
        min-height: unset;
        align-items: flex-start !important;
        padding: 1.5rem 1.5rem !important;
    }

    .logo-circle {
        width: 48px;
        height: 48px;
        margin-bottom: 0.5rem !important;
    }

    .logo-circle i {
        font-size: 1.25rem;
    }

    .login-card .text-center.mb-4 {
        margin-bottom: 0.75rem !important;
    }

    .divider.mb-4 {
        margin-bottom: 0.75rem !important;
    }

    .mb-3 {
        margin-bottom: 0.5rem !important;
    }

    .mb-4 {
        margin-bottom: 0.75rem !important;
    }
}

/* === login.php === */

/* Forgot-password / back-to-signin anchor colour */
.auth-link {
    color: var(--brand-primary);
}

/* === forgot-password.php === */

/* Left-panel content max-width constraint (shared across forgot/reset/two-factor) */
.auth-left-content-wide {
    max-width: 460px;
}

/* Left-panel icon circle (shared across forgot/reset/two-factor) */
.auth-panel-icon {
    background: rgba(255, 255, 255, 0.12);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Icon inside auth-panel-icon */
.auth-panel-icon i {
    font-size: 2.2rem;
    color: #fff;
}

/* Step / tip — title text size */
.auth-step-title {
    font-size: 0.9rem;
}

/* Step — description text size */
.auth-step-desc {
    font-size: 0.8rem;
}

/* Small note below success message */
.auth-note-sm {
    font-size: 0.78rem;
}

/* === reset-password.php === */

/* Tip — title text size (slightly smaller than step title) */
.auth-tip-title {
    font-size: 0.88rem;
}

/* Tip — description text size */
.auth-tip-desc {
    font-size: 0.78rem;
}

/* Error alert inside right panel (border-radius + size) */
.auth-alert-inline {
    border-radius: 8px;
    font-size: 0.875rem;
}

/* Strength-meter label */
.auth-strength-label {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* Password match message */
.auth-match-msg {
    font-size: 0.75rem;
}

/* === two-factor.php === */

/* OTP-screen error alert */
.auth-alert-otp {
    font-size: 0.82rem;
}

/* Resend-code button (link style) */
.auth-resend-btn {
    color: var(--brand-primary);
    font-size: 0.82rem;
}