<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — Login.vue
//  Location: resources/js/Pages/Auth/Login.vue
//
//  Layout:
//    Mobile  → full-screen background photo + dark overlay,
//              form card floats over it
//    Desktop → two columns: photo left (60%) | form right (40%)
//
//  Wired to Laravel Breeze's existing auth routes.
//  No Socialite — standard email/password only.
// ══════════════════════════════════════════════════════════════════

// 1. Imports
import { ref, computed, onMounted } from 'vue';
import { Head, Link, router, useForm } from '@inertiajs/vue3';
import { useAuthStore }             from '@/Stores/useAuthStore';
import { useAuthTranslations }      from '@/Composables/useAuthTranslations';
import AboutInPracticeModal         from '@/Components/Auth/AboutInPracticeModal.vue';
import { aboutInPractice }          from '@/lang/aboutInPractice';

// 2. No layout — this page manages its own full-screen shell
//    so the background photo can fill the entire viewport

// 3. Props from Laravel Breeze
const props = defineProps({
    canResetPassword: {
        type: Boolean,
        default: true,
    },
    status: {
        type: String,
        default: null,
    },
});

// 4. Store
const authStore = useAuthStore();
const { t } = useAuthTranslations();

// 5. Reactive state
const showPassword = ref(false);
const showAboutModal = ref(false);

// 6. Inertia form
const form = useForm({
    email:    '',
    password: '',
    remember: false,
    locale:   authStore.locale,
});

// 7. Computed
const isDark  = computed(() => authStore.isDark);
const isRtl   = computed(() => authStore.isRtl);
const locale  = computed(() => authStore.locale);

const aboutCopy = computed(() =>
    locale.value === 'ar' ? aboutInPractice.ar : aboutInPractice.en
);

const verificationMessage = computed(() => {
    if (!form.errors.needs_verification) {
        return '';
    }

    return form.errors.verification_code_sent === '1'
        ? t('verification_required_code_sent')
        : t('verification_required');
});

// 8. Methods
function toggleTheme() {
    const next = authStore.theme === 'navy' ? 'dark' : 'navy';
    authStore.setThemeLocal(next);
    localStorage.setItem('ip_theme', next);
}

function toggleLocale() {
    const next = locale.value === 'en' ? 'ar' : 'en';
    authStore.setLocaleLocal(next);
    router.post(route('guest.locale'), { locale: next });
}

function submit() {
    form.locale = authStore.locale;
    form.post(route('login'), {
        onFinish: () => form.reset('password'),
    });
}

// 9. Lifecycle
onMounted(() => {
    authStore.setThemeLocal(localStorage.getItem('ip_theme') ?? 'navy');
    authStore.setLocaleLocal(localStorage.getItem('ip_locale') ?? 'en');
});
</script>

<template>
    <Head title="Sign In" />

    <div class="ip-login" :data-theme="authStore.theme" :dir="isRtl ? 'rtl' : 'ltr'">

        <!-- ═══════════════════════════════════════════════════════
             BACKGROUND PHOTO — fills entire page
        ════════════════════════════════════════════════════════════ -->
        <div class="ip-login__bg">
            <!-- Dark overlay so text is readable -->
            <div class="ip-login__bg-overlay" />
        </div>

        <!-- ═══════════════════════════════════════════════════════
             CONTROLS — top right (theme + locale)
        ════════════════════════════════════════════════════════════ -->
        <div class="ip-login__controls">
            <button class="ip-login__ctrl-btn" @click="toggleLocale" :title="locale === 'en' ? 'العربية' : 'English'">
                <span class="ip-login__ctrl-label">{{ locale === 'en' ? 'ع' : 'EN' }}</span>
            </button>
            <button class="ip-login__ctrl-btn" @click="toggleTheme" :title="isDark ? 'Navy theme' : 'Dark theme'">
                <svg v-if="isDark" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
                </svg>
                <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                </svg>
            </button>
        </div>

        <!-- ═══════════════════════════════════════════════════════
             LEFT PANEL — brand + tagline (desktop only)
        ════════════════════════════════════════════════════════════ -->
        <div class="ip-login__left">

            <!-- Brand — logo-light for dark photo background -->
            <div class="ip-login__brand">
                <img
                    src="/images/logo-light.png"
                    alt="InPractice"
                    class="ip-login__brand-img"
                />
            </div>

            <!-- Headline -->
            <div class="ip-login__hero">
                <p class="ip-login__hero-label">Finance · Marketing · Sales</p>
                <h1 class="ip-login__hero-title">Where Pros Get Ahead.</h1>
                <p class="ip-login__hero-sub">
                    InPractice is the private club for Finance, Marketing, and Sales professionals across Egypt and the GCC — built to sharpen your edge, expand your network, and open new income streams.
                </p>
            </div>

            <!-- Feature cards — 6 pillars -->
            <div class="ip-login__feature-grid">

                <div class="ip-login__feature-card">
                    <div class="ip-login__feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>
                    </div>
                    <div>
                        <p class="ip-login__feature-name">{{ locale === 'ar' ? 'حالات عملية' : 'Practice Cases' }}</p>
                        <p class="ip-login__feature-desc">{{ locale === 'ar' ? '200+ سيناريو حقيقي' : '200+ real scenarios' }}</p>
                    </div>
                </div>

                <div class="ip-login__feature-card">
                    <div class="ip-login__feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                    </div>
                    <div>
                        <p class="ip-login__feature-name">{{ locale === 'ar' ? 'اسأل الأعضاء' : 'Ask Members' }}</p>
                        <p class="ip-login__feature-desc">{{ locale === 'ar' ? 'إجابات من محترفين حقيقيين' : 'Answers from real peers' }}</p>
                    </div>
                </div>

                <div class="ip-login__feature-card">
                    <div class="ip-login__feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10"/><path d="M12 6v6l4 2"/><path d="M18 2l4 4-4 4"/><path d="M22 2l-4 4"/></svg>
                    </div>
                    <div>
                        <p class="ip-login__feature-name">{{ locale === 'ar' ? 'شارك المعرفة' : 'Share Knowledge' }}</p>
                        <p class="ip-login__feature-desc">{{ locale === 'ar' ? 'ابنِ سمعتك المهنية' : 'Build your reputation' }}</p>
                    </div>
                </div>

                <div class="ip-login__feature-card">
                    <div class="ip-login__feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
                    </div>
                    <div>
                        <p class="ip-login__feature-name">{{ locale === 'ar' ? 'استطلاعات' : 'Surveys' }}</p>
                        <p class="ip-login__feature-desc">{{ locale === 'ar' ? 'بيانات تخدم عملك' : 'Data that matters' }}</p>
                    </div>
                </div>

                <div class="ip-login__feature-card">
                    <div class="ip-login__feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    </div>
                    <div>
                        <p class="ip-login__feature-name">{{ locale === 'ar' ? 'نادي التوظيف' : 'Job Club' }}</p>
                        <p class="ip-login__feature-desc">{{ locale === 'ar' ? 'فرصتك بشروطك' : 'Your next role, your terms' }}</p>
                    </div>
                </div>

                <div class="ip-login__feature-card">
                    <div class="ip-login__feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                    </div>
                    <div>
                        <p class="ip-login__feature-name">{{ locale === 'ar' ? 'ساعد واكسب' : 'Help &amp; Earn' }}</p>
                        <p class="ip-login__feature-desc">{{ locale === 'ar' ? 'فرص فريلانس بخبرتك' : 'Freelance your expertise' }}</p>
                    </div>
                </div>

            </div>

            <!-- Bottom tagline -->
            <p class="ip-login__tagline">Practice, Connect & Earn.</p>

        </div>

        <!-- ═══════════════════════════════════════════════════════
             RIGHT PANEL — the actual login form
        ════════════════════════════════════════════════════════════ -->
        <div class="ip-login__right">
            <div class="ip-login__card">

                <!-- Mobile brand — logo-dark on white card background -->
                <div class="ip-login__mobile-brand">
                    <img
                        src="/images/logo-dark.png"
                        alt="InPractice"
                        class="ip-login__mobile-brand-img"
                    />
                </div>

                <!-- Card heading -->
                <div class="ip-login__card-header">
                    <h2 class="ip-login__card-title">
                        {{ locale === 'ar' ? 'أهلاً بعودتك!' : 'Welcome Back!' }}
                    </h2>
                    <p class="ip-login__card-sub">
                        {{ locale === 'ar' ? 'سجّل دخولك للمتابعة' : 'Sign in to continue' }}
                    </p>
                    <button
                        type="button"
                        class="ip-login__about-trigger"
                        @click="showAboutModal = true"
                    >
                        <i class="ti ti-info-circle" aria-hidden="true" />
                        {{ aboutCopy.trigger }}
                    </button>
                </div>

                <AboutInPracticeModal
                    :open="showAboutModal"
                    :locale="locale"
                    @close="showAboutModal = false"
                />

                <!-- Status message (password reset success etc.) -->
                <div v-if="status" class="ip-login__status">
                    {{ status }}
                </div>

                <!-- ── FORM ─────────────────────────────────── -->
                <form @submit.prevent="submit" class="ip-login__form" novalidate>

                    <!-- Email -->
                    <div class="ip-form-group">
                        <label class="ip-login__label" for="email">
                            {{ locale === 'ar' ? 'البريد الإلكتروني' : 'Email Address' }}
                        </label>
                        <div class="ip-login__input-wrap">
                            <svg class="ip-login__input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>
                            </svg>
                            <input
                                id="email"
                                v-model="form.email"
                                type="email"
                                class="ip-login__input"
                                :class="{ 'ip-login__input--error': form.errors.email }"
                                :placeholder="locale === 'ar' ? 'بريدك الإلكتروني' : 'your@email.com'"
                                autocomplete="username"
                                required
                                autofocus
                            />
                        </div>
                        <p v-if="form.errors.email && !form.errors.needs_verification" class="ip-login__error">{{ form.errors.email }}</p>
                        <div
                            v-if="form.errors.needs_verification"
                            class="ip-login__status ip-login__status--warn"
                        >
                            <p>{{ verificationMessage }}</p>
                            <Link
                                :href="route('verification.notice', { email: form.email })"
                                class="ip-login__forgot"
                                style="display:inline-block;margin-top:8px;"
                            >
                                {{ t('go_to_verification') }}
                            </Link>
                        </div>
                    </div>

                    <!-- Password -->
                    <div class="ip-form-group">
                        <label class="ip-login__label" for="password">
                            {{ locale === 'ar' ? 'كلمة المرور' : 'Password' }}
                        </label>
                        <div class="ip-login__input-wrap">
                            <svg class="ip-login__input-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                            </svg>
                            <input
                                id="password"
                                v-model="form.password"
                                :type="showPassword ? 'text' : 'password'"
                                class="ip-login__input ip-login__input--with-toggle"
                                :class="{ 'ip-login__input--error': form.errors.password }"
                                :placeholder="locale === 'ar' ? 'كلمة المرور' : 'Enter password'"
                                autocomplete="current-password"
                                required
                            />
                            <button
                                type="button"
                                class="ip-login__toggle-pw"
                                @click="showPassword = !showPassword"
                                :aria-label="showPassword ? 'Hide password' : 'Show password'"
                            >
                                <!-- Eye open -->
                                <svg v-if="!showPassword" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
                                </svg>
                                <!-- Eye closed -->
                                <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/>
                                </svg>
                            </button>
                        </div>
                        <p v-if="form.errors.password" class="ip-login__error">{{ form.errors.password }}</p>
                    </div>

                    <!-- Remember me + Forgot password -->
                    <div class="ip-login__row">
                        <label class="ip-login__remember">
                            <input
                                v-model="form.remember"
                                type="checkbox"
                                class="ip-login__checkbox"
                            />
                            <span>{{ locale === 'ar' ? 'تذكّرني' : 'Remember me' }}</span>
                        </label>

                        <Link
                            v-if="canResetPassword"
                            :href="route('password.request')"
                            class="ip-login__forgot"
                        >
                            {{ locale === 'ar' ? 'نسيت كلمة المرور؟' : 'Forgot password?' }}
                        </Link>
                    </div>

                    <!-- Submit button -->
                    <button
                        type="submit"
                        class="ip-btn ip-btn--primary ip-btn--full ip-login__submit"
                        :disabled="form.processing"
                    >
                        <svg v-if="form.processing" class="ip-login__spinner" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/>
                        </svg>
                        <span>{{ locale === 'ar' ? 'تسجيل الدخول' : 'Sign In' }}</span>
                    </button>

                </form>

                <!-- Divider -->
                <div class="ip-login__divider">
                    <span>{{ locale === 'ar' ? 'ليس لديك حساب؟' : "Don't have an account?" }}</span>
                </div>

                <!-- Register link -->
                <Link :href="route('register')" class="ip-btn ip-btn--outline ip-btn--full">
                    {{ locale === 'ar' ? 'انضم مجاناً' : 'Join for Free' }}
                </Link>

            </div>
        </div>

    </div>
</template>

<style scoped>
/* ══════════════════════════════════════════════════════════════
   LOGIN PAGE — full-screen, two-column on desktop
══════════════════════════════════════════════════════════════ */

/* ── Root shell ──────────────────────────────────────────────── */
.ip-login {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Background photo ────────────────────────────────────────── */
.ip-login__bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: url('/images/login-bg.jpg');
    background-size: 80%;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #0F2044;
    
}

.ip-login__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(15, 32, 68, 0.91) 0%,
        rgba(15, 32, 68, 0.82) 40%,
        rgba(15, 32, 68, 0.55) 65%,
        rgba(15, 32, 68, 0.30) 100%
    );
}

/* Dark theme overlay is deeper */
[data-theme="dark"] .ip-login__bg-overlay {
    background: linear-gradient(
        105deg,
        rgba(20, 29, 43, 0.93) 0%,
        rgba(20, 29, 43, 0.85) 40%,
        rgba(20, 29, 43, 0.58) 65%,
        rgba(20, 29, 43, 0.32) 100%
    );
}

/* ── Top-right controls ──────────────────────────────────────── */
.ip-login__controls {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 10;
    display: flex;
    gap: var(--space-2);
}

[dir="rtl"] .ip-login__controls {
    right: auto;
    left: var(--space-4);
}

.ip-login__ctrl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #FFFFFF;
    cursor: pointer;
    transition: background var(--transition-fast);
    backdrop-filter: blur(8px);
}

.ip-login__ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

.ip-login__ctrl-label {
    font-size: 13px;
    font-weight: var(--fw-bold);
}

/* ── Left panel — desktop only ───────────────────────────────── */
.ip-login__left {
    display: none; /* hidden on mobile */
}

/* ── Right panel — the form ──────────────────────────────────── */
.ip-login__right {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    /* On mobile add safe area at top for notch */
    padding-top: max(var(--space-12), env(safe-area-inset-top));
    padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
    
}

/* ── Login card ──────────────────────────────────────────────── */
.ip-login__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
}

[data-theme="dark"] .ip-login__card {
    background: rgba(27, 37, 55, 0.95);
    border-color: rgba(45, 62, 87, 0.80);
}

/* ── Mobile brand (shows inside card on mobile) ──────────────── */
.ip-login__mobile-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    justify-content: center;
}

/* ── Brand logo — desktop left panel ─────────────────────────── */
.ip-login__brand {
    display: flex;
    align-items: flex-start;
    
}

.ip-login__brand-img {
    height: 96px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25));
}

/* ── Mobile brand inside card ────────────────────────────────── */
.ip-login__mobile-brand {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-5);
}

.ip-login__mobile-brand-img {
    height: 68px;
    width: auto;
    object-fit: contain;
}

/* ── Card header ─────────────────────────────────────────────── */
.ip-login__card-header {
    margin-bottom: var(--space-5);
    text-align: center;
}

.ip-login__card-title {
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
    letter-spacing: -0.01em;
}

.ip-login__card-sub {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.ip-login__about-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-3);
    padding: 0;
    border: none;
    background: none;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity var(--transition-fast);
}

.ip-login__about-trigger:hover {
    opacity: 0.8;
}

.ip-login__about-trigger i {
    font-size: 1rem;
    text-decoration: none;
}

/* ── Status bar ──────────────────────────────────────────────── */
.ip-login__status {
    background: var(--color-success-soft);
    color: var(--color-success);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    margin-bottom: var(--space-4);
    text-align: center;
}

/* ── Form ────────────────────────────────────────────────────── */
.ip-login__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* ── Label ───────────────────────────────────────────────────── */
.ip-login__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

/* ── Input wrapper ───────────────────────────────────────────── */
.ip-login__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ip-login__input-icon {
    position: absolute;
    left: var(--space-3);
    color: var(--color-text-muted);
    pointer-events: none;
    flex-shrink: 0;
}

[dir="rtl"] .ip-login__input-icon {
    left: auto;
    right: var(--space-3);
}

/* ── Input ───────────────────────────────────────────────────── */
.ip-login__input {
    width: 100%;
    min-height: var(--touch-target);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    padding: 0 var(--space-4) 0 calc(var(--space-3) + 16px + var(--space-3));
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

[dir="rtl"] .ip-login__input {
    padding: 0 calc(var(--space-3) + 16px + var(--space-3)) 0 var(--space-4);
}

.ip-login__input--with-toggle {
    padding-right: calc(var(--space-3) + 16px + var(--space-3));
}

[dir="rtl"] .ip-login__input--with-toggle {
    padding-right: calc(var(--space-3) + 16px + var(--space-3));
    padding-left: calc(var(--space-3) + 16px + var(--space-3));
}

.ip-login__input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.ip-login__input--error {
    border-color: var(--color-danger);
}

.ip-login__input--error:focus {
    box-shadow: 0 0 0 3px var(--color-danger-soft);
}

.ip-login__input::placeholder {
    color: var(--color-text-muted);
}

/* ── Password toggle ─────────────────────────────────────────── */
.ip-login__toggle-pw {
    position: absolute;
    right: var(--space-3);
    color: var(--color-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}

[dir="rtl"] .ip-login__toggle-pw {
    right: auto;
    left: var(--space-3);
}

.ip-login__toggle-pw:hover {
    color: var(--color-text-primary);
}

/* ── Error text ──────────────────────────────────────────────── */
.ip-login__error {
    font-size: var(--text-xs);
    color: var(--color-danger);
    margin-top: var(--space-1);
}

/* ── Remember + forgot row ───────────────────────────────────── */
.ip-login__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: var(--space-2) 0 var(--space-4);
    gap: var(--space-3);
}

.ip-login__remember {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.ip-login__checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.ip-login__forgot {
    font-size: var(--text-sm);
    color: var(--color-primary);
    font-weight: var(--fw-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--transition-fast);
}

.ip-login__forgot:hover {
    opacity: 0.75;
}

/* ── Submit button ───────────────────────────────────────────── */
.ip-login__submit {
    font-size: var(--text-md);
    letter-spacing: 0.02em;
    gap: var(--space-2);
}

/* ── Spinner ─────────────────────────────────────────────────── */
.ip-login__spinner {
    animation: ip-spin 0.8s linear infinite;
}

@keyframes ip-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Divider ─────────────────────────────────────────────────── */
.ip-login__divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0 var(--space-4);
}

.ip-login__divider::before,
.ip-login__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.ip-login__divider span {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP LAYOUT — two columns at 768px+
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    /* Switch to row layout */
    .ip-login {
        flex-direction: row;
    }

    /* Show the left panel */
    .ip-login__left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        z-index: 1;
        flex: 0 0 55%;
        padding: var(--space-8) var(--space-10);
    }

    /* Right panel becomes fixed width */
    .ip-login__right {
        flex: 0 0 45%;
        background: transparent;
        backdrop-filter: none;
        border-left: none;
        padding: var(--space-8) var(--space-8);
    }

    [data-theme="dark"] .ip-login__right {
        background: transparent;
    }

    /* Hide mobile brand inside card */
    .ip-login__mobile-brand {
        display: none;
    }

    /* Card on desktop — no card shadow needed, panel provides depth */
    .ip-login__card {
        background: var(--color-surface);
        max-width: 380px;
        box-shadow: var(--shadow-float);
    }
}

/* ── Brand block ─────────────────────────────────────────────── */
.ip-login__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ── Hero text ───────────────────────────────────────────────── */
.ip-login__hero {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-6) 0 var(--space-5);
}

.ip-login__hero-label {
    font-size: 1.5rem;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #1D9E75;
    margin-bottom: var(--space-4);
    margin-top: 0px;
}

.ip-login__hero-title {
    font-size: 46px;
    font-weight: var(--fw-bold);
    color: #FFFFFF;
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-4);
}

.ip-login__hero-sub {
    font-size: var(--text-md);
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.7;
    max-width: 440px;
}

/* ── Feature card grid ───────────────────────────────────────── */
.ip-login__feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: var(--space-6);
}

.ip-login__feature-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: transparent;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ip-login__feature-card:hover {
    border-color: rgba(29, 158, 117, 0.50);
    background: rgba(29, 158, 117, 0.06);
}

.ip-login__feature-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: rgba(29, 158, 117, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1D9E75;
    flex-shrink: 0;
}

.ip-login__feature-name {
    font-size: 12px;
    font-weight: var(--fw-semibold);
    color: #FFFFFF;
    line-height: 1.3;
    margin: 0;
}

.ip-login__feature-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.50);
    line-height: 1.4;
    margin: 0;
}

/* ── Bottom tagline ──────────────────────────────────────────── */
.ip-login__tagline {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: #FFFFFF;
    letter-spacing: 0.02em;
    opacity: 0.90;
}
</style>