<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — AppLayout.vue
//  Location: resources/js/Layouts/AppLayout.vue
//
//  Mobile  (<768px): sticky header + fixed bottom nav (5 tabs) +
//                    drop-up sheets for Practice & Ask / Job Club
//  Desktop (≥768px): sticky header with search + left sidebar
//                    (nav links + hub switcher) + main content slot
//
//  Both themes handled entirely by CSS variables from app.css.
//  data-theme is set on <html> by useAuthStore — this layout
//  just reads authStore.theme for the toggle button icon.
// ══════════════════════════════════════════════════════════════════

import { ref, computed, onMounted, watch } from 'vue';
import { usePage, Link, router }           from '@inertiajs/vue3';
import { useAuthStore }                    from '@/Stores/useAuthStore';
import { useNotificationStore }            from '@/Stores/useNotificationStore';

const props = defineProps({
    title: { type: String, default: '' },
});

const authStore         = useAuthStore();
const notificationStore = useNotificationStore();
const page              = usePage();
const avatarOpen        = ref(false);
// ── Flash toast ───────────────────────────────────────────────────
const showFlash    = ref(false);
const flashMessage = ref('');
const flashType    = ref('success');

// ── Drop-up (mobile only) ─────────────────────────────────────────
const activeDropup = ref(null); // null | 'practice' | 'jobclub'

// ── Sidebar expandable groups (desktop only) ──────────────────────
// Auto-open if currently on a practice or forum route
const practiceOpen = ref(
    route().current('member.cases.*') ||
    route().current('member.forum.*') ||
    route().current('member.share.*') ||
    route().current('member.surveys.*')
);

// ── Computed ──────────────────────────────────────────────────────
const auth           = computed(() => page.props.auth);
const locale         = computed(() => authStore.locale);
const isDark         = computed(() => authStore.theme === 'dark');
const hasUnread      = computed(() => notificationStore.hasUnread);

const avatarInitials = computed(() => {
    const name  = auth.value?.user?.name ?? '';
    const parts = name.trim().split(' ').filter(Boolean);
    if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
    if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
    return 'IP';
});

// ── Help link — maps current route to the right tutorial section ──
const helpSection = computed(() => {
    if (route().current('member.cases.*'))    return 'cases';
    if (route().current('member.forum.*'))    return 'forum';
    if (route().current('member.share.*'))    return 'share';
    if (route().current('member.surveys.*'))  return 'surveys';
    if (route().current('member.cv.*'))       return 'jobclub';
    if (route().current('member.jobs.*'))     return 'jobclub';
    if (route().current('member.freelance.*'))return 'freelance';
    if (route().current('member.profile.*')) return 'profile';
    return 'welcome';
});

const helpUrl = computed(() => `/help/inpractice-help.html#${helpSection.value}`);

// ── Methods ───────────────────────────────────────────────────────
function toggleTheme() {
    authStore.setTheme(isDark.value ? 'navy' : 'dark');
}

function toggleLocale() {
    authStore.setLocale(locale.value === 'en' ? 'ar' : 'en');
}

function toggleDropup(id) {
    activeDropup.value = activeDropup.value === id ? null : id;
}

function closeDropup() {
    activeDropup.value = null;
}

function showFlashToast(message, type = 'success') {
    flashMessage.value = message;
    flashType.value    = type;
    showFlash.value    = true;
    setTimeout(() => { showFlash.value = false; }, 3500);
}

// ── Lifecycle ─────────────────────────────────────────────────────
onMounted(() => {
    if (auth.value?.user) authStore.init(auth.value.user);
    notificationStore.init(page.props.unread_count ?? 0);
    const flash = page.props.flash ?? {};
    if (flash.success) showFlashToast(flash.success, 'success');
    if (flash.error)   showFlashToast(flash.error,   'error');

    // Close avatar dropdown on outside click
    document.addEventListener('click', (e) => {
        if (!e.target.closest('.l-avatar-wrap')) avatarOpen.value = false;
    });
});

watch(() => page.props.flash, (flash) => {
    if (!flash) return;
    if (flash.success) showFlashToast(flash.success, 'success');
    if (flash.error)   showFlashToast(flash.error,   'error');
});
</script>

<template>
    <div class="ip-app">

        <!-- ══════════════════════════════════════════════════════
             HEADER — sticky, both mobile and desktop
        ═══════════════════════════════════════════════════════════ -->
        <header class="l-header">
            <!-- Logo -->
            <Link :href="route('member.dashboard')" class="l-logo">
                <div class="l-logo-box">IP</div>
                <span class="l-logo-text">
                    IN<span>PRACTICE</span>
                </span>
            </Link>

            <!-- Desktop search bar — hidden on mobile -->
            <div class="l-search">
                <i class="ti ti-search" aria-hidden="true"></i>
                <span>{{ locale === 'ar' ? 'ابحث في الحالات والمنشورات...' : 'Search cases, posts…' }}</span>
            </div>

            <!-- Header actions -->
            <div class="l-header-right">
                <!-- Locale toggle -->
                <button class="l-hdr-btn" @click="toggleLocale"
                        :title="locale === 'en' ? 'Switch to Arabic' : 'Switch to English'">
                    <span class="l-locale-lbl">{{ locale === 'en' ? 'ع' : 'EN' }}</span>
                </button>

                <!-- Theme toggle -->
                <button class="l-hdr-btn" @click="toggleTheme"
                        :title="isDark ? 'Switch to Navy' : 'Switch to Dark'">
                    <i :class="isDark ? 'ti ti-sun' : 'ti ti-moon'" aria-hidden="true"></i>
                </button>

                <!-- Help button -->
                <a :href="helpUrl" target="_blank" rel="noopener" class="l-hdr-btn"
                   :title="locale === 'ar' ? 'دليل الاستخدام' : 'How to use this page'">
                    <i class="ti ti-help" aria-hidden="true"></i>
                </a>

                <!-- Bell -->
                <button class="l-bell" @click="notificationStore.toggle()"
                        :aria-label="locale === 'ar' ? 'الإشعارات' : 'Notifications'">
                    <i class="ti ti-bell" aria-hidden="true"></i>
                    <span v-if="hasUnread" class="l-bell-dot"></span>
                </button>

                <!-- Avatar + dropdown -->
                <div class="l-avatar-wrap" @click.stop="avatarOpen = !avatarOpen">
                    <div class="l-avatar">{{ avatarInitials }}</div>

                    <transition name="avatar-drop">
                        <div v-if="avatarOpen" class="l-avatar-menu">
                            <div class="l-avatar-menu__name">{{ auth?.user?.name }}</div>
                            <div class="l-avatar-menu__nick">@{{ auth?.user?.nickname }}</div>
                            <div class="l-avatar-menu__divider"></div>
                            <Link :href="route('member.profile.index')" class="l-avatar-menu__item">
                                <i class="ti ti-user"></i>
                                {{ locale === 'ar' ? 'ملفي الشخصي' : 'My Profile' }}
                            </Link>
                            <a :href="helpUrl" target="_blank" rel="noopener" class="l-avatar-menu__item">
                                <i class="ti ti-help"></i>
                                {{ locale === 'ar' ? 'دليل الاستخدام' : 'How to Use' }}
                            </a>
                            <div class="l-avatar-menu__divider"></div>
                            <Link :href="route('logout')" method="post" as="button" class="l-avatar-menu__item l-avatar-menu__item--danger">
                                <i class="ti ti-logout"></i>
                                {{ locale === 'ar' ? 'تسجيل الخروج' : 'Log Out' }}
                            </Link>
                        </div>
                    </transition>
                </div>
            </div>
        </header>

        <!-- ══════════════════════════════════════════════════════
             BODY — sidebar on desktop, plain on mobile
        ═══════════════════════════════════════════════════════════ -->
        <div class="l-body">

            <!-- DESKTOP SIDEBAR — hidden on mobile via CSS -->
            <aside class="l-sidebar">
                <!-- Navigation links -->
                <div class="l-sb-section">
                    <div class="l-sb-label">
                        {{ locale === 'ar' ? 'التنقل' : 'Navigation' }}
                    </div>

                    <Link :href="route('member.dashboard')"
                          class="l-sb-nav"
                          :class="{ 'l-sb-nav--active': route().current('member.dashboard') }">
                        <i class="ti ti-home" aria-hidden="true"></i>
                        {{ locale === 'ar' ? 'الرئيسية' : 'Dashboard' }}
                    </Link>

                    <!-- Practice & Ask — expandable group -->
                    <button
                        class="l-sb-nav l-sb-nav--group"
                        :class="{ 'l-sb-nav--active': route().current('member.cases.*') || route().current('member.forum.*') || route().current('member.share.*') || route().current('member.surveys.*') }"
                        @click="practiceOpen = !practiceOpen">
                        <i class="ti ti-books" aria-hidden="true"></i>
                        <span class="l-sb-group-label">{{ locale === 'ar' ? 'تعلم واسأل' : 'Practice & Ask' }}</span>
                        <i class="ti l-sb-chevron"
                           :class="practiceOpen ? 'ti-chevron-up' : 'ti-chevron-down'"
                           aria-hidden="true"></i>
                    </button>

                    <!-- Sub-links — visible when group is open -->
                    <div v-if="practiceOpen" class="l-sb-sub">
                        <Link :href="route('member.cases.index')"
                              class="l-sb-sub-link"
                              :class="{ 'l-sb-sub-link--active': route().current('member.cases.*') }">
                            <i class="ti ti-file-text" aria-hidden="true"></i>
                            {{ locale === 'ar' ? 'الحالات' : 'Cases' }}
                        </Link>
                        <Link :href="route('member.forum.index')"
                              class="l-sb-sub-link"
                              :class="{ 'l-sb-sub-link--active': route().current('member.forum.*') }">
                            <i class="ti ti-message-question" aria-hidden="true"></i>
                            {{ locale === 'ar' ? 'اسأل الأعضاء' : 'Ask Members' }}
                        </Link>
                        <Link :href="route('member.share.index')"
                              class="l-sb-sub-link"
                              :class="{ 'l-sb-sub-link--active': route().current('member.share.*') }">
                            <i class="ti ti-share" aria-hidden="true"></i>
                            {{ locale === 'ar' ? 'شارك المعرفة' : 'Share Knowledge' }}
                        </Link>
                        <Link :href="route('member.surveys.index')"
                              class="l-sb-sub-link"
                              :class="{ 'l-sb-sub-link--active': route().current('member.surveys.*') }">
                            <i class="ti ti-list-check" aria-hidden="true"></i>
                            {{ locale === 'ar' ? 'الاستبيانات' : 'Surveys' }}
                        </Link>
                    </div>

                    <Link :href="route('member.jobs.index')"
                          class="l-sb-nav"
                          :class="{ 'l-sb-nav--active': route().current('member.jobs.*') || route().current('member.cv.*') }">
                        <i class="ti ti-id-badge" aria-hidden="true"></i>
                        {{ locale === 'ar' ? 'نادي الوظائف' : 'Job Club' }}
                    </Link>

                    <Link :href="route('member.freelance.index')" class="l-sb-nav">
                        <i class="ti ti-briefcase" aria-hidden="true"></i>
                        {{ locale === 'ar' ? 'اكسب' : 'Help & Earn' }}
                    </Link>

                    <Link :href="route('member.profile.index')" class="l-sb-nav">
                        <i class="ti ti-user" aria-hidden="true"></i>
                        {{ locale === 'ar' ? 'ملفي' : 'Profile' }}
                    </Link>

                    <!-- Help link — always last in sidebar nav -->
                    <a :href="helpUrl" target="_blank" rel="noopener" class="l-sb-nav l-sb-nav--help">
                        <i class="ti ti-help" aria-hidden="true"></i>
                        {{ locale === 'ar' ? 'دليل الاستخدام' : 'How to Use' }}
                    </a>
                </div>

                <div class="l-sb-divider"></div>

                <!-- Hub switcher — populated by slot prop from Dashboard -->
                <div class="l-sb-section">
                    <div class="l-sb-label">
                        {{ locale === 'ar' ? 'تخصصاتك' : 'Your Hubs' }}
                    </div>
                    <slot name="sidebar-hubs" />
                </div>
            </aside>

            <!-- MAIN CONTENT -->
            <main class="l-main">
                <slot />
            </main>
        </div>

        <!-- ══════════════════════════════════════════════════════
             MOBILE BOTTOM NAV — hidden on desktop via CSS
        ═══════════════════════════════════════════════════════════ -->
        <nav class="l-nav" role="navigation"
             :aria-label="locale === 'ar' ? 'القائمة الرئيسية' : 'Main navigation'">

            <Link :href="route('member.dashboard')" class="l-nav-item"
                  :class="{ 'l-nav-item--active': route().current('member.dashboard') }"
                  @click="closeDropup">
                <div class="l-nav-box">
                    <i class="ti ti-home" aria-hidden="true"></i>
                </div>
                <span class="l-nav-lbl">{{ locale === 'ar' ? 'الرئيسية' : 'Home' }}</span>
            </Link>

            <button class="l-nav-item"
                    :class="{ 'l-nav-item--active': activeDropup === 'practice' }"
                    @click="toggleDropup('practice')">
                <div class="l-nav-box">
                    <i class="ti ti-books" aria-hidden="true"></i>
                </div>
                <span class="l-nav-lbl">{{ locale === 'ar' ? 'تعلم واسأل' : 'Practice & Ask' }}</span>
            </button>

            <button class="l-nav-item"
                    :class="{ 'l-nav-item--active': activeDropup === 'jobclub' }"
                    @click="toggleDropup('jobclub')">
                <div class="l-nav-box">
                    <i class="ti ti-id-badge" aria-hidden="true"></i>
                </div>
                <span class="l-nav-lbl">{{ locale === 'ar' ? 'نادي الوظائف' : 'Job Club' }}</span>
            </button>

            <Link :href="route('member.freelance.index')" class="l-nav-item" @click="closeDropup">
                <div class="l-nav-box">
                    <i class="ti ti-briefcase" aria-hidden="true"></i>
                </div>
                <span class="l-nav-lbl">{{ locale === 'ar' ? 'اكسب' : 'Help & Earn' }}</span>
            </Link>

            <Link :href="route('member.profile.index')" class="l-nav-item" @click="closeDropup">
                <div class="l-nav-box">
                    <i class="ti ti-user" aria-hidden="true"></i>
                </div>
                <span class="l-nav-lbl">{{ locale === 'ar' ? 'ملفي' : 'Profile' }}</span>
            </Link>
        </nav>

        <!-- ══════════════════════════════════════════════════════
             DROP-UP: Practice & Ask
        ═══════════════════════════════════════════════════════════ -->
        <Transition name="dropup">
            <div v-if="activeDropup === 'practice'"
                 class="l-dropup-overlay" @click="closeDropup">
                <div class="l-dropup-sheet" @click.stop>
                    <div class="l-dropup-handle"></div>
                    <div class="l-dropup-title">{{ locale === 'ar' ? 'تعلم واسأل' : 'Practice & Ask' }}</div>

                    <!-- Cases — LIVE -->
                    <Link :href="route('member.cases.index')" class="l-dropup-item" @click="closeDropup">
                        <div class="l-di-icon l-di-icon--teal">
                            <i class="ti ti-file-text" aria-hidden="true"></i>
                        </div>
                        <div class="l-di-text">
                            <div class="l-di-title">{{ locale === 'ar' ? 'الحالات' : 'Cases' }}</div>
                            <div class="l-di-sub">{{ locale === 'ar' ? 'سيناريوهات أعمال حقيقية' : 'Real business scenarios to practice' }}</div>
                        </div>
                    </Link>

                    <!-- Ask Members — LIVE -->
                    <Link :href="route('member.forum.index')" class="l-dropup-item" @click="closeDropup">
                        <div class="l-di-icon l-di-icon--blue">
                            <i class="ti ti-message-question" aria-hidden="true"></i>
                        </div>
                        <div class="l-di-text">
                            <div class="l-di-title">{{ locale === 'ar' ? 'اسأل الأعضاء' : 'Ask Members 4 Opinion' }}</div>
                            <div class="l-di-sub">{{ locale === 'ar' ? 'اطرح مشكلة، احصل على إجابات' : 'Post a problem, get real answers' }}</div>
                        </div>
                    </Link>

                    <!-- Share Knowledge — LIVE -->
                    <Link :href="route('member.share.index')" class="l-dropup-item" @click="closeDropup">
                        <div class="l-di-icon l-di-icon--coral">
                            <i class="ti ti-share" aria-hidden="true"></i>
                        </div>
                        <div class="l-di-text">
                            <div class="l-di-title">{{ locale === 'ar' ? 'شارك المعرفة' : 'Share Knowledge' }}</div>
                            <div class="l-di-sub">{{ locale === 'ar' ? 'ملفات ومقالات للمجتمع' : 'PDFs, posts, articles for the community' }}</div>
                        </div>
                    </Link>

                    <!-- Surveys — LIVE -->
                    <Link :href="route('member.surveys.index')" class="l-dropup-item" @click="closeDropup">
                        <div class="l-di-icon l-di-icon--purple">
                            <i class="ti ti-list-check" aria-hidden="true"></i>
                        </div>
                        <div class="l-di-text">
                            <div class="l-di-title">{{ locale === 'ar' ? 'الاستبيانات' : 'Surveys' }}</div>
                            <div class="l-di-sub">{{ locale === 'ar' ? 'أنشئ أو استجب' : 'Create or respond to member surveys' }}</div>
                        </div>
                    </Link>
                </div>
            </div>
        </Transition>

        <!-- ══════════════════════════════════════════════════════
             DROP-UP: Job Club
        ═══════════════════════════════════════════════════════════ -->
        <Transition name="dropup">
            <div v-if="activeDropup === 'jobclub'"
                 class="l-dropup-overlay" @click="closeDropup">
                <div class="l-dropup-sheet" @click.stop>
                    <div class="l-dropup-handle"></div>
                    <div class="l-dropup-title">{{ locale === 'ar' ? 'نادي الوظائف' : 'Job Club' }}</div>

                    <!-- CV Pool — LIVE -->
                    <Link :href="route('member.cv.pool')" class="l-dropup-item" @click="closeDropup">
                        <div class="l-di-icon l-di-icon--teal">
                            <i class="ti ti-user-circle" aria-hidden="true"></i>
                        </div>
                        <div class="l-di-text">
                            <div class="l-di-title">{{ locale === 'ar' ? 'مجمع السير الذاتية' : 'CV Pool' }}</div>
                            <div class="l-di-sub">{{ locale === 'ar' ? 'ملف مجهول — أصحاب العمل يجدونك' : 'Anonymous profile — employers find you' }}</div>
                        </div>
                    </Link>

                    <!-- Job Listings — LIVE -->
                    <Link :href="route('member.jobs.index')" class="l-dropup-item" @click="closeDropup">
                        <div class="l-di-icon l-di-icon--blue">
                            <i class="ti ti-building" aria-hidden="true"></i>
                        </div>
                        <div class="l-di-text">
                            <div class="l-di-title">{{ locale === 'ar' ? 'إعلانات الوظائف' : 'Job Listings' }}</div>
                            <div class="l-di-sub">{{ locale === 'ar' ? 'تصفح الفرص وانشر وظائفك' : 'Browse opportunities and post your own' }}</div>
                        </div>
                    </Link>
                </div>
            </div>
        </Transition>

        <!-- ══════════════════════════════════════════════════════
             FLASH TOAST
        ═══════════════════════════════════════════════════════════ -->
        <Transition name="toast">
            <div v-if="showFlash" class="l-toast"
                 :class="flashType === 'error' ? 'l-toast--error' : 'l-toast--success'"
                 role="alert" aria-live="polite">
                <i :class="flashType === 'error' ? 'ti ti-x' : 'ti ti-check'" aria-hidden="true"></i>
                <span>{{ flashMessage }}</span>
            </div>
        </Transition>

    </div>
</template>

<style scoped>
/* ── App shell ───────────────────────────────────────────────── */
.ip-app {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* ── Header ──────────────────────────────────────────────────── */
.l-header {
    background: var(--color-header-bg);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: var(--z-dropdown);
    box-shadow: var(--shadow-header);
    transition: background var(--transition-slow);
}

.l-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex-shrink: 0;
}

.l-logo-box {
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
    flex-shrink: 0;
}

.l-logo-text {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.07em;
}

.l-logo-text span { color: var(--color-primary); }

/* Desktop search — hidden mobile */
.l-search {
    display: none;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    padding: 6px 14px;
    color: #9aafc9;
    font-size: 12px;
    width: 220px;
    cursor: pointer;
    flex-shrink: 0;
}

.l-search i { font-size: 14px; }

.l-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.l-hdr-btn {
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 7px;
    color: #9aafc9;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.l-hdr-btn:hover { color: #fff; background: rgba(255,255,255,0.14); }

.l-locale-lbl {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.l-bell {
    position: relative;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 7px;
    color: #9aafc9;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.l-bell:hover { color: #fff; }

.l-bell-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    border: 1.5px solid var(--color-header-bg);
}

.l-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* ── Body layout ─────────────────────────────────────────────── */
.l-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* ── Sidebar — desktop only ──────────────────────────────────── */
.l-sidebar {
    display: none; /* mobile: hidden */
    width: 210px;
    flex-shrink: 0;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    flex-direction: column;
    transition: background var(--transition-theme), border-color var(--transition-theme);
}

.l-sb-section {
    padding: 14px 10px 8px;
}

.l-sb-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0 8px;
    margin-bottom: 6px;
}

.l-sb-nav {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    margin-bottom: 2px;
}

.l-sb-nav i { font-size: 16px; flex-shrink: 0; }

.l-sb-nav:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.l-sb-nav--active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: 700;
}

/* ── Sidebar expandable group ────────────────────────────────── */
.l-sb-nav--group {
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
}
[dir="rtl"] .l-sb-nav--group { text-align: right; }

.l-sb-group-label {
    flex: 1;
    text-align: left;
}
[dir="rtl"] .l-sb-group-label { text-align: right; }

.l-sb-chevron {
    font-size: 12px !important;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Sub-links container */
.l-sb-sub {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 2px;
    padding-left: 14px;
}
[dir="rtl"] .l-sb-sub { padding-left: 0; padding-right: 14px; }

.l-sb-sub-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    border-left: 2px solid transparent;
}
[dir="rtl"] .l-sb-sub-link { border-left: none; border-right: 2px solid transparent; }

.l-sb-sub-link i { font-size: 14px; flex-shrink: 0; }

.l-sb-sub-link:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.l-sb-sub-link--active {
    color: var(--color-primary);
    font-weight: 700;
    border-left-color: var(--color-primary);
    background: var(--color-primary-soft);
}
[dir="rtl"] .l-sb-sub-link--active {
    border-left-color: transparent;
    border-right-color: var(--color-primary);
}

.l-sb-divider {
    height: 1px;
    background: var(--color-border);
    margin: 4px 10px;
}

/* ── Main content ─────────────────────────────────────────────── */
.l-main {
    flex: 1;
    overflow-y: auto;
    /* Mobile: add bottom padding for fixed nav */
    padding-bottom: 72px;
}

/* ── Mobile bottom nav ───────────────────────────────────────── */
.l-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-nav-bg);
    border-top: 1px solid var(--color-header-border);
    display: flex;
    align-items: center;
    padding: 6px 0;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    z-index: var(--z-dropdown);
    transition: background var(--transition-theme);
}

.l-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 2px 0;
}

.l-nav-box {
    width: 34px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 19px;
    color: var(--color-nav-icon);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.l-nav-lbl {
    font-size: 8px;
    font-weight: 600;
    color: var(--color-nav-label);
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.01em;
    transition: color var(--transition-fast);
}

/* Active state: teal box behind icon */
.l-nav-item--active .l-nav-box {
    background: var(--color-primary);
    color: #fff;
}

.l-nav-item--active .l-nav-lbl {
    color: var(--color-primary);
}

/* ── Drop-up overlay ─────────────────────────────────────────── */
.l-dropup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 32, 68, 0.52);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.l-dropup-sheet {
    background: var(--color-surface);
    border-radius: 20px 20px 0 0;
    padding: 8px 0 32px;
    transition: background var(--transition-theme);
}

.l-dropup-handle {
    width: 36px;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    margin: 10px auto 14px;
}

.l-dropup-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0 20px 8px;
}

.l-dropup-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.l-dropup-item:hover { background: var(--color-surface-alt); }

.l-di-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

/* Icon color variants */
.l-di-icon--teal   { background: #E1F5EE; color: #1D9E75; }
.l-di-icon--blue   { background: #E6F1FB; color: #378ADD; }
.l-di-icon--coral  { background: #FAECE7; color: #D85A30; }
.l-di-icon--purple { background: #F3F0FE; color: #7c3aed; }

.l-di-text { flex: 1; min-width: 0; }

.l-di-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.l-di-sub {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Coming soon items */
.l-dropup-item--soon {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

.l-di-soon-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 2px 7px;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

/* ── Drop-up transition ──────────────────────────────────────── */
.dropup-enter-active { transition: opacity 0.2s ease; }
.dropup-leave-active { transition: opacity 0.18s ease; }
.dropup-enter-from,
.dropup-leave-to     { opacity: 0; }

.dropup-enter-active .l-dropup-sheet { transition: transform 0.25s cubic-bezier(0.32,0.72,0,1); }
.dropup-leave-active .l-dropup-sheet { transition: transform 0.2s ease; }
.dropup-enter-from .l-dropup-sheet,
.dropup-leave-to   .l-dropup-sheet   { transform: translateY(100%); }

/* ── Flash toast ─────────────────────────────────────────────── */
.l-toast {
    position: fixed;
    bottom: 88px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    z-index: var(--z-toast);
    white-space: nowrap;
    box-shadow: var(--shadow-float);
}

.l-toast--success { background: var(--color-primary); color: #fff; }
.l-toast--error   { background: var(--color-danger);  color: #fff; }

.toast-enter-active, .toast-leave-active { transition: all 0.25s ease; }
.toast-enter-from,   .toast-leave-to     {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.95);
}

/* ── Avatar dropdown ─────────────────────────────────────────── */
.l-avatar-wrap {
    position: relative;
    cursor: pointer;
}

.l-avatar-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 200px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    z-index: var(--z-dropdown);
    overflow: hidden;
}

[dir="rtl"] .l-avatar-menu {
    right: auto;
    left: 0;
}

.l-avatar-menu__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-primary);
    padding: 12px 16px 2px;
}

.l-avatar-menu__nick {
    font-size: 12px;
    color: var(--color-text-muted);
    padding: 0 16px 10px;
}

.l-avatar-menu__divider {
    height: 1px;
    background: var(--color-border);
    margin: 0;
}

.l-avatar-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.l-avatar-menu__item:hover {
    background: var(--color-surface-alt);
}

.l-avatar-menu__item--danger {
    color: var(--color-danger);
}

.l-avatar-menu__item i {
    font-size: 16px;
    flex-shrink: 0;
}

/* Dropdown animation */
.avatar-drop-enter-active { transition: all 0.15s ease; }
.avatar-drop-leave-active { transition: all 0.12s ease; }
.avatar-drop-enter-from,
.avatar-drop-leave-to {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
}

/* ── Help sidebar link — subtle teal tint to stand out ───────── */
.l-sb-nav--help {
    color: var(--color-primary);
    opacity: 0.75;
    margin-top: 4px;
}

.l-sb-nav--help:hover {
    opacity: 1;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP BREAKPOINT ≥768px
   - Show sidebar
   - Hide mobile nav
   - Remove bottom padding from main (nav gone)
   - Show search bar
   - Sidebar becomes flex column
════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .l-search  { display: flex; }
    .l-sidebar { display: flex; }
    .l-nav     { display: none; }
    .l-main    { padding-bottom: 0; }
    .l-toast   { bottom: 24px; }
}
</style>