<?php
/**
 * Shared <style> block for the three standalone auth pages (login,
 * forgot-password, reset-password) — none of them extend layouts/main.php
 * (they render before/without a tenant nav), so this is `include`d instead
 * to avoid repeating the same ~50 lines three times. Relies on $primaryColor,
 * $secondaryColor, and $heroImage already being set (via safe_hex_color(),
 * never esc(..., 'css') — see app/Helpers/theme_helper.php) in the
 * including view before this file is included.
 */
?>
<style>
    :root { --brand: <?= $primaryColor ?>; --brand-accent: <?= $secondaryColor ?>; }
    * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
    body { min-height: 100vh; }
    .login-shell { min-height: 100vh; }
    .brand-mark { width: 48px; height: 48px; border-radius: 12px; background: var(--brand); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; flex-shrink: 0; }
    .brand-name { font-weight: 800; font-size: 1.35rem; color: #16182b; letter-spacing: -0.02em; }
    .icon-circle { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 12%, white); display: flex; align-items: center; justify-content: center; color: var(--brand); font-size: 1.5rem; }
    .form-col { background: #fff; }
    .input-icon { position: relative; }
    .input-icon i:not(.toggle-eye) { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9ca3af; }
    .input-icon input { padding-left: 40px; }
    .input-icon .toggle-eye { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); left: auto; cursor: pointer; }
    .btn-brand {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--brand);
        --bs-btn-border-color: var(--brand);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--brand);
        --bs-btn-hover-border-color: var(--brand);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--brand);
        --bs-btn-active-border-color: var(--brand);
        font-weight: 600;
    }
    .btn-brand:hover { filter: brightness(0.92); }
    .info-box { background: color-mix(in srgb, var(--brand) 8%, white); border-radius: 10px; padding: 0.85rem 1rem; }
    .hero-col { position: relative; background: #111 url('<?= $heroImage ?>') center/cover no-repeat; }
    .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,26,0.35) 0%, rgba(17,17,26,0.55) 55%, rgba(17,17,26,0.92) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 3rem; }
    .hero-headline { color: #fff; font-weight: 800; font-size: 2.1rem; letter-spacing: -0.02em; line-height: 1.15; }
    .hero-sub { color: rgba(255,255,255,0.85); font-size: 1.05rem; max-width: 30rem; }
    .feature-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; padding: 1rem; color: #fff; }
    .feature-card > i { color: var(--brand-accent); font-size: 1.3rem; }
    .feature-card .title { font-weight: 700; font-size: 0.92rem; margin: 0 0 0.1rem; }
    .feature-card .desc { font-size: 0.78rem; color: rgba(255,255,255,0.75); margin: 0; }
    .trust-badge { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 0.85rem 1rem; color: rgba(255,255,255,0.9); font-size: 0.82rem; }
    .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand) 20%, transparent); }
    @media (max-width: 991.98px) { .hero-col { display: none; } }
</style>
