/* ============================================================
   HomesReach – Auth Premium Styles
   Layout: centered two-column card (dark photo left, form right)
   Mirrors the Filament admin login card structure.
   ============================================================ */

/* ── Page shell — centers the card ─────────────────────── */
.auth-body {
    background: #eef2f7;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}

/* ── Two-column card ────────────────────────────────────── */
.auth-card {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    width: 100%;
    max-width: 1280px;
    min-height: 640px;
    border-radius: 1.75rem;
    overflow: hidden;
    box-shadow:
        0 32px 80px -24px rgba(15, 23, 42, 0.28),
        0 8px 24px -8px  rgba(15, 23, 42, 0.12);
}

/* ── LEFT: Photo showcase panel ────────────────────────── */
.auth-showcase {
    position: relative;
    background-color: #1a0e06;
    background-image: url('https://images.unsplash.com/photo-1582407947304-fd86f028f716?w=800&auto=format&fit=crop&q=80');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
}

.auth-showcase-overlay {
    background: linear-gradient(
        158deg,
        rgba(10,  5, 0, 0.74) 0%,
        rgba(10,  5, 0, 0.42) 55%,
        rgba(10,  5, 0, 0.66) 100%
    );
}

/* Warm glow — bottom-left */
.auth-showcase-glow-bl {
    position: absolute;
    left: -3rem;
    bottom: 1.5rem;
    width: 16rem;
    height: 16rem;
    border-radius: 9999px;
    background: rgba(194, 65, 12, 0.28);
    filter: blur(60px);
    z-index: 5;
    pointer-events: none;
}

/* Warm glow — top-right */
.auth-showcase-glow-tr {
    position: absolute;
    right: -3rem;
    top: -2rem;
    width: 13rem;
    height: 13rem;
    border-radius: 9999px;
    background: rgba(249, 115, 22, 0.16);
    filter: blur(55px);
    z-index: 5;
    pointer-events: none;
}

/* Illustration card at the bottom of showcase */
.auth-illustration-card {
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    padding: 1.5rem 1.25rem 1rem;
    display: flex;
    justify-content: center;
}

/* ── House illustration ─────────────────────────────────── */
.auth-house {
    position: relative;
    width: min(11rem, 100%);
    aspect-ratio: 1 / 1;
}

.auth-house-roof {
    position: absolute;
    left: 16%; right: 16%; bottom: 54%; height: 18%;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    background: linear-gradient(180deg, #a16207 0%, #7c2d12 100%);
}

.auth-house-body {
    position: absolute;
    left: 22%; right: 22%; bottom: 18%; height: 42%;
    border-radius: 1.25rem 1.25rem 0.75rem 0.75rem;
    background: linear-gradient(180deg, #ffffff 0%, #e9ecff 100%);
}

.auth-house-door {
    position: absolute;
    left: 44%; width: 12%; bottom: 18%; height: 20%;
    background: linear-gradient(180deg, #7c2d12 0%, #431407 100%);
    border-radius: 0.5rem;
}

.auth-house-window {
    position: absolute;
    width: 14%; height: 12%;
    background: linear-gradient(180deg, #7c2d12 0%, #431407 100%);
    border-radius: 0.4rem;
    bottom: 37%;
}

.auth-house-window--left  { left: 28%; }
.auth-house-window--right { right: 28%; }

.auth-house-platform {
    position: absolute;
    left: 10%; right: 10%; bottom: 8%; height: 11%;
    border-radius: 9999px;
    background: linear-gradient(180deg, rgba(251,146,60,0.96) 0%, rgba(194,65,12,0.92) 100%);
}

/* ── RIGHT: Form panel ──────────────────────────────────── */
.auth-panel {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: clamp(1.75rem, 4vw, 3.25rem) clamp(2rem, 5vw, 4rem);
}

/* Thin custom scrollbar */
.auth-panel::-webkit-scrollbar { width: 4px; }
.auth-panel::-webkit-scrollbar-track { background: transparent; }
.auth-panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.10); border-radius: 99px; }

.auth-panel-logo { margin-bottom: 1.5rem; }

.auth-panel-heading { margin-bottom: 1.25rem; }

.auth-panel-divider {
    height: 1px;
    background: #f1f5f9;
    margin-bottom: 1.5rem;
}

/* ── Input fields ───────────────────────────────────────── */
.auth-field {
    width: 100%;
    border-radius: 0.75rem;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    padding: 0.875rem 1rem;
    color: #0f172a;
    font-size: 0.9rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    outline: none;
}

.auth-field::placeholder { color: #94a3b8; }

.auth-field:focus {
    border-color: rgb(234 88 12);
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.10);
}

.auth-field-error { border-color: rgb(239 68 68); }

.auth-field-error:focus {
    border-color: rgb(239 68 68);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

/* ── Primary CTA button ─────────────────────────────────── */
.auth-primary-button {
    display: block;
    width: 100%;
    border-radius: 0.75rem;
    background: linear-gradient(180deg, #111827 0%, #1f2937 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.9rem 1.5rem;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.40);
}

.auth-primary-button:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #1f2937 0%, #374151 100%);
    box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.50);
}

.auth-primary-button:active { transform: translateY(0); }

/* ── Social buttons ─────────────────────────────────────── */
.auth-social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.auth-social-button:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

/* ── "Or" divider ───────────────────────────────────────── */
.auth-divider {
    position: relative;
    text-align: center;
    margin: 1.25rem 0;
}

.auth-divider::before {
    content: '';
    position: absolute;
    inset: 50% 0 auto;
    border-top: 1px solid #e2e8f0;
}

.auth-divider span {
    position: relative;
    display: inline-block;
    background: #ffffff;
    padding: 0 1rem;
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 500;
}

/* ── Demo credentials block ─────────────────────────────── */
.auth-demo-block {
    margin-top: 1.5rem;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 0.875rem 1rem;
}

.auth-demo-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.auth-demo-key-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    background: #f1f5f9;
    color: #64748b;
    flex-shrink: 0;
}

.auth-demo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.auth-demo-chip {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 0.625rem 0.75rem;
    min-width: 0;
}

.auth-demo-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

/* ── Theme switcher row — bottom of form panel ──────────── */
.auth-theme-row {
    margin-top: auto;
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.auth-theme-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #94a3b8;
}

/* ── Mobile: single column, hide showcase ───────────────── */
@media (max-width: 1023px) {
    .auth-body {
        padding: 1rem;
        align-items: flex-start;
    }

    .auth-card {
        grid-template-columns: 1fr;
        min-height: unset;
        max-width: 28rem;
        box-shadow:
            0 20px 60px -16px rgba(15, 23, 42, 0.22),
            0 4px 16px -4px rgba(15, 23, 42, 0.08);
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .auth-showcase { display: none; }

    .auth-panel { padding: 2rem 1.75rem; }
}

/* ── Compact spacing on shorter viewports ───────────────── */
@media (max-height: 780px) {
    .auth-panel {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .auth-panel-logo  { margin-bottom: 1rem; }
    .auth-panel-heading { margin-bottom: 0.875rem; }
    .auth-panel-divider { margin-bottom: 1rem; }

    .auth-field { padding-top: 0.75rem; padding-bottom: 0.75rem; }

    .auth-primary-button { padding-top: 0.8rem; padding-bottom: 0.8rem; }

    .auth-demo-block { margin-top: 1rem; }

    .auth-theme-row { padding-top: 1rem; }
}


/* ============================================================
   DARK MODE
   ============================================================ */

html.theme-dark .auth-body { background: #111111; }

/* Card shadow — softer on dark */
html.theme-dark .auth-card {
    box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 0.55),
                0 8px 24px -8px  rgba(0, 0, 0, 0.35);
}

/* Form panel */
html.theme-dark .auth-panel {
    background: #252525;
}

html.theme-dark .auth-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
}

html.theme-dark .auth-panel-divider {
    background: rgba(255, 255, 255, 0.07);
}

/* Headings and labels */
html.theme-dark .auth-panel .text-slate-900 { color: #ffffff !important; }
html.theme-dark .auth-panel .text-slate-800 { color: #ebebf5 !important; }
html.theme-dark .auth-panel .text-slate-700 { color: #d1d1d6 !important; }
html.theme-dark .auth-panel .text-slate-600 { color: #8e8e93 !important; }
html.theme-dark .auth-panel .text-slate-500 { color: #636366 !important; }
html.theme-dark .auth-panel .text-slate-400 { color: #636366 !important; }
html.theme-dark .auth-panel label          { color: #d1d1d6 !important; }

/* Inputs */
html.theme-dark .auth-field {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}

html.theme-dark .auth-field::placeholder { color: #636366; }

html.theme-dark .auth-field:focus {
    border-color: rgb(234 88 12);
    box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.14);
}

html.theme-dark .auth-field-error { border-color: rgb(239 68 68); }

/* Primary button — gold on dark */
html.theme-dark .auth-primary-button {
    background: linear-gradient(180deg, #c9a56a 0%, #b8935a 100%);
    color: #141414;
    box-shadow: none;
}

html.theme-dark .auth-primary-button:hover {
    background: linear-gradient(180deg, #d4b07a 0%, #c9a56a 100%);
    box-shadow: none;
}

/* Social buttons */
html.theme-dark .auth-social-button {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.10);
    color: #ebebf5;
}

html.theme-dark .auth-social-button:hover {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.14);
}

/* "Or" divider */
html.theme-dark .auth-divider::before { border-top-color: rgba(255,255,255,0.08); }

html.theme-dark .auth-divider span {
    background: #252525;
    color: #636366;
}

/* Remember me / Terms row */
html.theme-dark .auth-panel .flex.cursor-pointer {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #ebebf5;
}

html.theme-dark .auth-panel .flex.cursor-pointer:hover {
    background: rgba(255, 255, 255, 0.07);
}

/* Demo block */
html.theme-dark .auth-demo-block {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.08);
}

html.theme-dark .auth-demo-block .text-slate-800 { color: #ffffff   !important; }
html.theme-dark .auth-demo-block .text-slate-700 { color: #d1d1d6   !important; }
html.theme-dark .auth-demo-block .text-slate-500 { color: #636366   !important; }

html.theme-dark .auth-demo-key-icon {
    background: #2c2c2e;
    color: #8e8e93;
}

html.theme-dark .auth-demo-chip {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.07);
}

html.theme-dark .auth-demo-chip .text-slate-800 { color: #ffffff !important; }
html.theme-dark .auth-demo-chip .text-slate-400 { color: #8e8e93 !important; }

html.theme-dark .auth-demo-chip .bg-blue-50    { background: rgba(37,  99, 235, 0.18) !important; color: #60a5fa !important; }
html.theme-dark .auth-demo-chip .bg-teal-50    { background: rgba(15, 118, 110, 0.18) !important; color: #2dd4bf !important; }
html.theme-dark .auth-demo-chip .bg-orange-50  { background: rgba(234,  88,  12, 0.18) !important; color: #fb923c !important; }
html.theme-dark .auth-demo-chip .bg-purple-50  { background: rgba(126,  34, 206, 0.18) !important; color: #c084fc !important; }
html.theme-dark .auth-demo-chip .bg-emerald-50 { background: rgba(  5, 150, 105, 0.18) !important; color: #34d399 !important; }
html.theme-dark .auth-demo-chip .bg-cyan-50    { background: rgba(  8, 145, 178, 0.18) !important; color: #22d3ee !important; }

/* Theme row */
html.theme-dark .auth-theme-label { color: #636366; }

/* Alert banners inside the form */
html.theme-dark .auth-panel .bg-red-50 {
    background: rgba(244, 63, 94, 0.10) !important;
    border-color: rgba(244, 63, 94, 0.22) !important;
    color: #fb7185 !important;
}

html.theme-dark .auth-panel .bg-emerald-50 {
    background: rgba(52, 211, 153, 0.10) !important;
    border-color: rgba(52, 211, 153, 0.22) !important;
    color: #34d399 !important;
}

/* Verify-email info block */
html.theme-dark .auth-panel .bg-slate-50 {
    background: #2c2c2e !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #8e8e93 !important;
}

/* Secondary button (logout etc.) */
html.theme-dark .auth-panel .border-slate-200 {
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Links */
html.theme-dark .auth-panel a.text-orange-600,
html.theme-dark .auth-panel a.font-semibold.text-orange-600 { color: #c9a56a; }

html.theme-dark .auth-panel a.text-orange-600:hover,
html.theme-dark .auth-panel a.font-semibold.text-orange-600:hover { color: #d4b07a; }

/* Show/hide password icon */
html.theme-dark .auth-panel .text-slate-400 { color: #636366; }
html.theme-dark .auth-panel .hover\:text-slate-600:hover { color: #8e8e93; }

/* Border-top separator lines */
html.theme-dark .auth-panel .border-t { border-top-color: rgba(255,255,255,0.07) !important; }