<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — Admin/Cases/Form.vue
//  Location: resources/js/Pages/Admin/Cases/Form.vue
//
//  Create and Edit form for cases.
//  Two tabs: English (required) | Arabic (optional — added later)
//
//  Fields:
//    Classification: hub, topic slug, topic name EN+AR, layer,
//                    difficulty, sectors (multi-select), read time
//    Content EN:     title, subtitle, situation, challenge questions
//                    (dynamic list), solution, bigger lesson,
//                    skills taught (dynamic list)
//    Content AR:     same fields, all optional
//
//  Rules:
//    - English tab is always required
//    - Arabic tab is optional — case can be published without it
//    - Uses router.post / router.put — Inertia handles redirect + flash
//    - Validation errors shown inline under each field
//    - Both themes work (admin always navy but CSS vars handle it)
//    - Project Bible compliant — no business logic, no DB calls
// ══════════════════════════════════════════════════════════════════

import { ref, computed }    from 'vue';
import { Head, Link, router } from '@inertiajs/vue3';
import { useForm }            from '@inertiajs/vue3';
import AdminLayout            from '@/Layouts/AdminLayout.vue';

// ── Props — from AdminCaseService.create() / .edit() ──────────────
const props = defineProps({
    case:    { type: Object, default: null },   // null = create mode
    hubs:    { type: Array,  required: true },
    sectors: { type: Array,  required: true },
});

// ── Mode ──────────────────────────────────────────────────────────
const isEditing = computed(() => !!props.case);
const pageTitle = computed(() => isEditing.value ? 'Edit Case' : 'New Case');

// ── Active tab ────────────────────────────────────────────────────
const activeTab = ref('en');

// ── Form — Inertia useForm for automatic error binding ────────────
const form = useForm({
    // Classification
    hub_id:        props.case?.hub_id        ?? '',
    topic_slug:    props.case?.topic_slug    ?? '',
    topic_name_en: props.case?.topic_name_en ?? '',
    topic_name_ar: props.case?.topic_name_ar ?? '',
    layer:         props.case?.layer         ?? 'generic',
    difficulty:    props.case?.difficulty    ?? 'beginner',
    sector_ids:    props.case?.sector_ids    ?? [],
    read_time_minutes: props.case?.read_time_minutes ?? 10,
    sort_order:    props.case?.sort_order    ?? 0,

    // English content
    title_en:               props.case?.title_en               ?? '',
    subtitle_en:            props.case?.subtitle_en            ?? '',
    situation_en:           props.case?.situation_en           ?? '',
    challenge_questions_en: props.case?.challenge_questions_en ?? [''],
    solution_en:            props.case?.solution_en            ?? '',
    bigger_lesson_en:       props.case?.bigger_lesson_en       ?? '',
    skills_taught_en:       props.case?.skills_taught_en       ?? [''],

    // Arabic content
    title_ar:               props.case?.title_ar               ?? '',
    subtitle_ar:            props.case?.subtitle_ar            ?? '',
    situation_ar:           props.case?.situation_ar           ?? '',
    challenge_questions_ar: props.case?.challenge_questions_ar ?? [''],
    solution_ar:            props.case?.solution_ar            ?? '',
    bigger_lesson_ar:       props.case?.bigger_lesson_ar       ?? '',
    skills_taught_ar:       props.case?.skills_taught_ar       ?? [''],
});

// ── Dynamic list helpers — Challenge Questions ────────────────────
function addQuestion(lang) {
    if (lang === 'en') form.challenge_questions_en.push('');
    else               form.challenge_questions_ar.push('');
}

function removeQuestion(lang, index) {
    if (lang === 'en') {
        if (form.challenge_questions_en.length > 1)
            form.challenge_questions_en.splice(index, 1);
    } else {
        if (form.challenge_questions_ar.length > 1)
            form.challenge_questions_ar.splice(index, 1);
    }
}

// ── Dynamic list helpers — Skills Taught ─────────────────────────
function addSkill(lang) {
    if (lang === 'en') form.skills_taught_en.push('');
    else               form.skills_taught_ar.push('');
}

function removeSkill(lang, index) {
    if (lang === 'en') {
        if (form.skills_taught_en.length > 1)
            form.skills_taught_en.splice(index, 1);
    } else {
        if (form.skills_taught_ar.length > 1)
            form.skills_taught_ar.splice(index, 1);
    }
}

// ── Sector toggle ─────────────────────────────────────────────────
function toggleSector(id) {
    const idx = form.sector_ids.indexOf(id);
    if (idx === -1) form.sector_ids.push(id);
    else            form.sector_ids.splice(idx, 1);
}

function sectorSelected(id) {
    return form.sector_ids.includes(id);
}

// ── Submit ────────────────────────────────────────────────────────
function submit() {
    if (isEditing.value) {
        form.put(route('admin.cases.update', props.case.id), {
            onError: () => {
                // If errors are on English fields, switch to EN tab
                const enFields = ['title_en', 'situation_en', 'solution_en',
                    'bigger_lesson_en', 'challenge_questions_en', 'skills_taught_en',
                    'hub_id', 'topic_slug', 'topic_name_en', 'difficulty', 'layer'];
                const hasEnError = enFields.some(f => form.errors[f]);
                if (hasEnError) activeTab.value = 'en';
            },
        });
    } else {
        form.post(route('admin.cases.store'), {
            onError: () => {
                const enFields = ['title_en', 'situation_en', 'solution_en',
                    'bigger_lesson_en', 'challenge_questions_en', 'skills_taught_en',
                    'hub_id', 'topic_slug', 'topic_name_en', 'difficulty', 'layer'];
                const hasEnError = enFields.some(f => form.errors[f]);
                if (hasEnError) activeTab.value = 'en';
            },
        });
    }
}

// ── Arabic completion indicator ───────────────────────────────────
const arComplete = computed(() =>
    !!(form.title_ar && form.situation_ar && form.solution_ar && form.bigger_lesson_ar)
);
</script>

<template>
    <AdminLayout :title="pageTitle">
        <Head :title="pageTitle" />

        <div class="form-page">

            <!-- ── Page header ────────────────────────────────── -->
            <div class="form-header">
                <div class="form-header__left">
                    <Link :href="route('admin.cases.index')" class="back-link">
                        <i class="ti ti-arrow-left"></i>
                        Back to Cases
                    </Link>
                    <h1 class="form-title">{{ pageTitle }}</h1>
                    <p v-if="isEditing" class="form-subtitle">
                        Case ID: {{ props.case.id }} &mdash; {{ props.case.title_en }}
                    </p>
                </div>

                <div class="form-header__actions">
                    <Link :href="route('admin.cases.index')" class="btn btn--ghost">
                        Cancel
                    </Link>
                    <button
                        class="btn btn--primary"
                        :disabled="form.processing"
                        @click="submit">
                        <i class="ti ti-device-floppy"></i>
                        {{ form.processing ? 'Saving...' : (isEditing ? 'Save Changes' : 'Create Case') }}
                    </button>
                </div>
            </div>

            <div class="form-body">

                <!-- ── LEFT: Classification card ─────────────── -->
                <aside class="form-sidebar">

                    <div class="card">
                        <div class="card__heading">Classification</div>

                        <!-- Hub -->
                        <div class="field">
                            <label class="field__label">Hub <span class="req">*</span></label>
                            <select v-model="form.hub_id" class="field__select">
                                <option value="">Select hub...</option>
                                <option
                                    v-for="hub in hubs"
                                    :key="hub.id"
                                    :value="hub.id">
                                    {{ hub.name_en }}
                                </option>
                            </select>
                            <p v-if="form.errors.hub_id" class="field__error">{{ form.errors.hub_id }}</p>
                        </div>

                        <!-- Difficulty -->
                        <div class="field">
                            <label class="field__label">Difficulty <span class="req">*</span></label>
                            <select v-model="form.difficulty" class="field__select">
                                <option value="beginner">Beginner</option>
                                <option value="intermediate">Intermediate</option>
                                <option value="advanced">Advanced</option>
                            </select>
                            <p v-if="form.errors.difficulty" class="field__error">{{ form.errors.difficulty }}</p>
                        </div>

                        <!-- Layer -->
                        <div class="field">
                            <label class="field__label">Layer <span class="req">*</span></label>
                            <select v-model="form.layer" class="field__select">
                                <option value="generic">Generic</option>
                                <option value="sector_specific">Sector Specific</option>
                            </select>
                            <p v-if="form.errors.layer" class="field__error">{{ form.errors.layer }}</p>
                        </div>

                        <!-- Topic Slug -->
                        <div class="field">
                            <label class="field__label">
                                Topic Slug <span class="req">*</span>
                                <span class="field__hint">snake_case e.g. cash_flow</span>
                            </label>
                            <input
                                v-model="form.topic_slug"
                                type="text"
                                class="field__input"
                                placeholder="cash_flow"
                            />
                            <p v-if="form.errors.topic_slug" class="field__error">{{ form.errors.topic_slug }}</p>
                        </div>

                        <!-- Topic Name EN -->
                        <div class="field">
                            <label class="field__label">Topic Name (EN) <span class="req">*</span></label>
                            <input
                                v-model="form.topic_name_en"
                                type="text"
                                class="field__input"
                                placeholder="Cash Flow Management"
                            />
                            <p v-if="form.errors.topic_name_en" class="field__error">{{ form.errors.topic_name_en }}</p>
                        </div>

                        <!-- Topic Name AR -->
                        <div class="field">
                            <label class="field__label">Topic Name (AR) <span class="req">*</span></label>
                            <input
                                v-model="form.topic_name_ar"
                                type="text"
                                class="field__input field__input--rtl"
                                placeholder="إدارة التدفق النقدي"
                                dir="rtl"
                            />
                            <p v-if="form.errors.topic_name_ar" class="field__error">{{ form.errors.topic_name_ar }}</p>
                        </div>

                        <!-- Read Time -->
                        <div class="field">
                            <label class="field__label">Read Time (minutes)</label>
                            <input
                                v-model.number="form.read_time_minutes"
                                type="number"
                                min="1"
                                max="60"
                                class="field__input field__input--sm"
                            />
                        </div>

                        <!-- Sort Order -->
                        <div class="field">
                            <label class="field__label">Sort Order</label>
                            <input
                                v-model.number="form.sort_order"
                                type="number"
                                min="0"
                                class="field__input field__input--sm"
                            />
                            <p class="field__hint-block">Lower = appears first in lists</p>
                        </div>
                    </div>

                    <!-- Sectors card -->
                    <div class="card" v-if="form.layer === 'sector_specific'">
                        <div class="card__heading">Sectors</div>
                        <p class="card__desc">Select the sectors this case applies to.</p>
                        <div class="sector-grid">
                            <button
                                v-for="sector in sectors"
                                :key="sector.id"
                                type="button"
                                class="sector-chip"
                                :class="{ 'sector-chip--active': sectorSelected(sector.id) }"
                                @click="toggleSector(sector.id)">
                                {{ sector.name_en }}
                            </button>
                        </div>
                        <p v-if="form.errors.sector_ids" class="field__error">{{ form.errors.sector_ids }}</p>
                    </div>

                    <!-- Mobile submit -->
                    <button
                        class="btn btn--primary btn--full"
                        :disabled="form.processing"
                        @click="submit">
                        <i class="ti ti-device-floppy"></i>
                        {{ form.processing ? 'Saving...' : (isEditing ? 'Save Changes' : 'Create Case') }}
                    </button>

                </aside>

                <!-- ── RIGHT: Content tabs ────────────────────── -->
                <div class="form-main">

                    <!-- Tab switcher -->
                    <div class="tabs">
                        <button
                            class="tab"
                            :class="{ 'tab--active': activeTab === 'en' }"
                            @click="activeTab = 'en'">
                            <i class="ti ti-language"></i>
                            English
                            <span class="tab__req">Required</span>
                        </button>
                        <button
                            class="tab"
                            :class="{ 'tab--active': activeTab === 'ar' }"
                            @click="activeTab = 'ar'">
                            <i class="ti ti-language-arabic"></i>
                            العربية
                            <span v-if="arComplete" class="tab__badge tab__badge--done">
                                <i class="ti ti-check"></i> Complete
                            </span>
                            <span v-else class="tab__badge tab__badge--optional">Optional</span>
                        </button>
                    </div>

                    <!-- ── ENGLISH TAB ──────────────────────── -->
                    <div v-show="activeTab === 'en'" class="tab-content">

                        <!-- Title EN -->
                        <div class="field">
                            <label class="field__label">Title <span class="req">*</span></label>
                            <input
                                v-model="form.title_en"
                                type="text"
                                class="field__input"
                                placeholder="The Business That Was Profitable But Broke"
                            />
                            <p v-if="form.errors.title_en" class="field__error">{{ form.errors.title_en }}</p>
                        </div>

                        <!-- Subtitle EN -->
                        <div class="field">
                            <label class="field__label">
                                Subtitle
                                <span class="field__hint">Optional — one line summary shown on cards</span>
                            </label>
                            <input
                                v-model="form.subtitle_en"
                                type="text"
                                class="field__input"
                                placeholder="Why profit and cash are not the same thing"
                            />
                            <p v-if="form.errors.subtitle_en" class="field__error">{{ form.errors.subtitle_en }}</p>
                        </div>

                        <!-- Situation EN -->
                        <div class="field">
                            <label class="field__label">
                                The Situation <span class="req">*</span>
                                <span class="field__hint">Set the scene. Egyptian/GCC context. Min 100 chars.</span>
                            </label>
                            <textarea
                                v-model="form.situation_en"
                                class="field__textarea field__textarea--tall"
                                placeholder="You are the finance manager at a mid-sized manufacturing company in Cairo..."
                            ></textarea>
                            <p v-if="form.errors.situation_en" class="field__error">{{ form.errors.situation_en }}</p>
                        </div>

                        <!-- Challenge Questions EN -->
                        <div class="field">
                            <label class="field__label">
                                Challenge Questions <span class="req">*</span>
                                <span class="field__hint">What should the member think through before seeing the solution?</span>
                            </label>
                            <div class="dynamic-list">
                                <div
                                    v-for="(q, index) in form.challenge_questions_en"
                                    :key="index"
                                    class="dynamic-list__row">
                                    <span class="dynamic-list__num">{{ index + 1 }}</span>
                                    <input
                                        v-model="form.challenge_questions_en[index]"
                                        type="text"
                                        class="field__input"
                                        :placeholder="`Question ${index + 1}...`"
                                    />
                                    <button
                                        v-if="form.challenge_questions_en.length > 1"
                                        type="button"
                                        class="dynamic-list__remove"
                                        @click="removeQuestion('en', index)">
                                        <i class="ti ti-x"></i>
                                    </button>
                                </div>
                            </div>
                            <button type="button" class="add-btn" @click="addQuestion('en')">
                                <i class="ti ti-plus"></i> Add Question
                            </button>
                            <p v-if="form.errors.challenge_questions_en" class="field__error">{{ form.errors.challenge_questions_en }}</p>
                        </div>

                        <!-- Solution EN -->
                        <div class="field">
                            <label class="field__label">
                                Solution & Best Practice <span class="req">*</span>
                                <span class="field__hint">Full breakdown. Markdown supported — use | tables |, **bold**, - lists. Min 200 chars.</span>
                            </label>
                            <textarea
                                v-model="form.solution_en"
                                class="field__textarea field__textarea--xlarge"
                                placeholder="The root cause is the disconnect between accrual accounting and cash reality..."
                            ></textarea>
                            <p v-if="form.errors.solution_en" class="field__error">{{ form.errors.solution_en }}</p>
                        </div>

                        <!-- Bigger Lesson EN -->
                        <div class="field">
                            <label class="field__label">
                                The Bigger Lesson <span class="req">*</span>
                                <span class="field__hint">The principle that applies broadly — one strong paragraph.</span>
                            </label>
                            <textarea
                                v-model="form.bigger_lesson_en"
                                class="field__textarea"
                                placeholder="Profit is an accounting concept. Cash is reality..."
                            ></textarea>
                            <p v-if="form.errors.bigger_lesson_en" class="field__error">{{ form.errors.bigger_lesson_en }}</p>
                        </div>

                        <!-- Skills Taught EN -->
                        <div class="field">
                            <label class="field__label">
                                Skills Taught <span class="req">*</span>
                                <span class="field__hint">What will the member be able to do after this case?</span>
                            </label>
                            <div class="dynamic-list">
                                <div
                                    v-for="(skill, index) in form.skills_taught_en"
                                    :key="index"
                                    class="dynamic-list__row">
                                    <span class="dynamic-list__num">{{ index + 1 }}</span>
                                    <input
                                        v-model="form.skills_taught_en[index]"
                                        type="text"
                                        class="field__input"
                                        :placeholder="`Skill ${index + 1}...`"
                                    />
                                    <button
                                        v-if="form.skills_taught_en.length > 1"
                                        type="button"
                                        class="dynamic-list__remove"
                                        @click="removeSkill('en', index)">
                                        <i class="ti ti-x"></i>
                                    </button>
                                </div>
                            </div>
                            <button type="button" class="add-btn" @click="addSkill('en')">
                                <i class="ti ti-plus"></i> Add Skill
                            </button>
                            <p v-if="form.errors.skills_taught_en" class="field__error">{{ form.errors.skills_taught_en }}</p>
                        </div>

                    </div><!-- /EN tab -->

                    <!-- ── ARABIC TAB ────────────────────────── -->
                    <div v-show="activeTab === 'ar'" class="tab-content" dir="rtl">

                        <div class="ar-notice">
                            <i class="ti ti-info-circle"></i>
                            Arabic content is optional. The case can be published with English only.
                            Arabic content will be shown to members who switch to Arabic.
                        </div>

                        <!-- Title AR -->
                        <div class="field">
                            <label class="field__label">العنوان</label>
                            <input
                                v-model="form.title_ar"
                                type="text"
                                class="field__input"
                                placeholder="الشركة المربحة التي نفد منها النقد"
                                dir="rtl"
                            />
                            <p v-if="form.errors.title_ar" class="field__error">{{ form.errors.title_ar }}</p>
                        </div>

                        <!-- Subtitle AR -->
                        <div class="field">
                            <label class="field__label">العنوان الفرعي</label>
                            <input
                                v-model="form.subtitle_ar"
                                type="text"
                                class="field__input"
                                placeholder="لماذا الربح والنقد ليسا نفس الشيء"
                                dir="rtl"
                            />
                        </div>

                        <!-- Situation AR -->
                        <div class="field">
                            <label class="field__label">الموقف</label>
                            <textarea
                                v-model="form.situation_ar"
                                class="field__textarea field__textarea--tall"
                                placeholder="أنت مدير المالية في شركة تصنيع متوسطة الحجم في القاهرة..."
                                dir="rtl"
                            ></textarea>
                        </div>

                        <!-- Challenge Questions AR -->
                        <div class="field">
                            <label class="field__label">أسئلة التحدي</label>
                            <div class="dynamic-list">
                                <div
                                    v-for="(q, index) in form.challenge_questions_ar"
                                    :key="index"
                                    class="dynamic-list__row">
                                    <span class="dynamic-list__num">{{ index + 1 }}</span>
                                    <input
                                        v-model="form.challenge_questions_ar[index]"
                                        type="text"
                                        class="field__input"
                                        :placeholder="`السؤال ${index + 1}...`"
                                        dir="rtl"
                                    />
                                    <button
                                        v-if="form.challenge_questions_ar.length > 1"
                                        type="button"
                                        class="dynamic-list__remove"
                                        @click="removeQuestion('ar', index)">
                                        <i class="ti ti-x"></i>
                                    </button>
                                </div>
                            </div>
                            <button type="button" class="add-btn" @click="addQuestion('ar')">
                                <i class="ti ti-plus"></i> إضافة سؤال
                            </button>
                        </div>

                        <!-- Solution AR -->
                        <div class="field">
                            <label class="field__label">الحل وأفضل الممارسات</label>
                            <textarea
                                v-model="form.solution_ar"
                                class="field__textarea field__textarea--xlarge"
                                placeholder="السبب الجذري هو الفجوة بين محاسبة الاستحقاق وواقع النقد..."
                                dir="rtl"
                            ></textarea>
                        </div>

                        <!-- Bigger Lesson AR -->
                        <div class="field">
                            <label class="field__label">الدرس الأكبر</label>
                            <textarea
                                v-model="form.bigger_lesson_ar"
                                class="field__textarea"
                                placeholder="الربح مفهوم محاسبي. النقد هو الواقع..."
                                dir="rtl"
                            ></textarea>
                        </div>

                        <!-- Skills Taught AR -->
                        <div class="field">
                            <label class="field__label">المهارات المكتسبة</label>
                            <div class="dynamic-list">
                                <div
                                    v-for="(skill, index) in form.skills_taught_ar"
                                    :key="index"
                                    class="dynamic-list__row">
                                    <span class="dynamic-list__num">{{ index + 1 }}</span>
                                    <input
                                        v-model="form.skills_taught_ar[index]"
                                        type="text"
                                        class="field__input"
                                        :placeholder="`المهارة ${index + 1}...`"
                                        dir="rtl"
                                    />
                                    <button
                                        v-if="form.skills_taught_ar.length > 1"
                                        type="button"
                                        class="dynamic-list__remove"
                                        @click="removeSkill('ar', index)">
                                        <i class="ti ti-x"></i>
                                    </button>
                                </div>
                            </div>
                            <button type="button" class="add-btn" @click="addSkill('ar')">
                                <i class="ti ti-plus"></i> إضافة مهارة
                            </button>
                        </div>

                    </div><!-- /AR tab -->

                </div><!-- /form-main -->

            </div><!-- /form-body -->

        </div><!-- /form-page -->
    </AdminLayout>
</template>

<style scoped>
/* ── Page wrapper ────────────────────────────────────────────── */
.form-page {
    padding: 20px 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1200px;
}

/* ── Page header ─────────────────────────────────────────────── */
.form-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-header__actions {
    display: none; /* hidden on mobile — use sidebar button instead */
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
    margin-bottom: 4px;
}

.back-link:hover { color: var(--color-primary); }

.form-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text-primary);
    margin: 0;
}

.form-subtitle {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0;
}

/* ── Two-column body ─────────────────────────────────────────── */
.form-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Sidebar — classification ────────────────────────────────── */
.form-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Card ────────────────────────────────────────────────────── */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.card__heading {
    font-size: 11px;
    font-weight: 800;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

.card__desc {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: -6px 0 0;
    line-height: 1.5;
}

/* ── Fields ──────────────────────────────────────────────────── */
.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.req {
    color: var(--color-danger);
    font-size: 13px;
    line-height: 1;
}

.field__hint {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.field__hint-block {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 0;
}

.field__input,
.field__select {
    width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast);
    outline: none;
    font-family: inherit;
}

.field__input:focus,
.field__select:focus {
    border-color: var(--color-primary);
}

.field__input--sm { max-width: 100px; }
.field__input--rtl { text-align: right; }

.field__textarea {
    width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 13px;
    color: var(--color-text-primary);
    line-height: 1.7;
    resize: vertical;
    min-height: 100px;
    transition: border-color var(--transition-fast);
    outline: none;
    font-family: inherit;
}

.field__textarea:focus { border-color: var(--color-primary); }
.field__textarea--tall   { min-height: 160px; }
.field__textarea--xlarge { min-height: 260px; }

.field__error {
    font-size: 11px;
    color: var(--color-danger);
    margin: 0;
}

/* ── Dynamic list ────────────────────────────────────────────── */
.dynamic-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dynamic-list__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dynamic-list__num {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    background: rgba(29,158,117,0.10);
    border-radius: var(--radius-sm);
    padding: 3px 7px;
    flex-shrink: 0;
    min-width: 24px;
    text-align: center;
}

.dynamic-list__remove {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 5px 7px;
    display: flex;
    align-items: center;
    transition: border-color var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.dynamic-list__remove:hover {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(29,158,117,0.08);
    border: 1px dashed rgba(29,158,117,0.35);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    cursor: pointer;
    transition: background var(--transition-fast);
    align-self: flex-start;
}

.add-btn:hover { background: rgba(29,158,117,0.14); }

/* ── Sector chips ────────────────────────────────────────────── */
.sector-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sector-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.sector-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.sector-chip--active {
    background: rgba(29,158,117,0.12);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ── Tabs ────────────────────────────────────────────────────── */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 20px;
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: none;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tab:hover { color: var(--color-text-primary); }

.tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab__req {
    font-size: 10px;
    font-weight: 700;
    background: rgba(29,158,117,0.10);
    color: var(--color-primary);
    padding: 2px 6px;
    border-radius: var(--radius-pill);
}

.tab__badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
}

.tab__badge--done {
    background: rgba(29,158,117,0.12);
    color: var(--color-primary);
}

.tab__badge--optional {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

/* ── Tab content ─────────────────────────────────────────────── */
.tab-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Arabic notice ───────────────────────────────────────────── */
.ar-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(29,158,117,0.06);
    border: 1px solid rgba(29,158,117,0.18);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    direction: ltr;
    text-align: left;
}

.ar-notice i {
    color: var(--color-primary);
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), opacity var(--transition-fast);
}

.btn--primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-button);
}

.btn--primary:hover:not(:disabled) { background: var(--color-primary-light); }
.btn--primary:disabled { opacity: 0.65; cursor: not-allowed; }

.btn--ghost {
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.btn--ghost:hover { background: var(--color-bg); }
.btn--full { width: 100%; justify-content: center; }

/* ══════════════════════════════════════════════════════════════
   DESKTOP ≥768px
════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    .form-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .form-header__actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        padding-top: 20px;
    }

    .form-body {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }

    .form-sidebar {
        width: 280px;
        flex-shrink: 0;
        position: sticky;
        top: 76px; /* below admin header */
    }

    /* Hide the mobile submit button inside sidebar */
    .form-sidebar > .btn--full {
        display: none;
    }

    .form-main {
        flex: 1;
        min-width: 0;
    }

    .form-title { font-size: 22px; }
}
</style>
