<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'HRMS') — Human Resource Management System</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

@php
    $user   = auth()->user();
    $th     = $user->theme_config ?: config('themes.navy', []);
    $sbDark = ($user->sidebar_style ?? 'dark') === 'dark';
    $themes = config('themes', []);
    $isDark = $th['dark'] ?? false;
    $sbTextColor   = $sbDark ? 'rgba(255,255,255,.6)'  : 'rgba(0,0,0,.62)';
    $sbSecColor    = $sbDark ? 'rgba(255,255,255,.3)'  : 'rgba(0,0,0,.35)';
    $sbHoverColor  = $sbDark ? 'rgba(255,255,255,.07)' : 'rgba(0,0,0,.05)';
    $sbBorderColor = $sbDark ? 'rgba(255,255,255,.06)' : 'rgba(0,0,0,.07)';
    $sbBrandBg     = $sbDark ? ($th['sb_brand_bg'] ?? 'linear-gradient(135deg,#001122,#002244)') : ($th['sb_brand_light'] ?? '#ffffff');
    $sbBg          = $sbDark ? ($th['sb_bg'] ?? '#050e1c') : ($th['sb_bg_light'] ?? '#f8fafc');
    $sbLogoColor   = $sbDark ? '#0a1628' : ($th['primary'] ?? '#003366');
@endphp

<style>
:root {
    --brand-primary:    {{ $th['primary']        ?? '#003366' }};
    --brand-accent:     {{ $th['accent']         ?? '#0055b3' }};
    --brand-gold:       {{ $th['gold']           ?? '#D4AF37' }};
    --sb-bg:         {{ $sbBg }};
    --sb-brand-bg:   {{ $sbBrandBg }};
    --nav-active-bg: {{ $th['nav_active']     ?? 'linear-gradient(135deg,#0055b3,#003d80)' }};
    --nav-active-sh: {{ $th['nav_active_shadow'] ?? '0 3px 12px rgba(0,85,179,.3)' }};
    --sb-text:       {{ $sbTextColor }};
    --sb-sec:        {{ $sbSecColor }};
    --sb-hover:      {{ $sbHoverColor }};
    --sb-border:     {{ $sbBorderColor }};
    --body-bg:       {{ $th['body_bg']        ?? '#f0f4f8' }};
    --card-bg:       {{ $th['card_bg']        ?? '#ffffff' }};
    --card-border:   {{ $th['card_border']    ?? '#f1f5f9' }};
    --topbar-bg:     {{ $th['topbar_bg']      ?? '#ffffff' }};
    --topbar-border: {{ $th['topbar_border']  ?? '#e2e8f0' }};
    --text-1:        {{ $th['text_1']         ?? '#1a2332' }};
    --text-2:        {{ $th['text_2']         ?? '#64748b' }};
    --text-3:        {{ $th['text_3']         ?? '#94a3b8' }};
    --input-focus:   {{ $th['input_focus']    ?? 'rgba(0,51,102,.12)' }};
    --sidebar-w:     260px;
    --topbar-h:      64px;
}
* { box-sizing: border-box; }
body { font-family:'Plus Jakarta Sans',sans-serif; background:var(--body-bg); color:var(--text-1); min-height:100vh; }

/* Sidebar */
.sidebar { position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);background:var(--sb-bg);z-index:1040;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1); }
.sidebar::-webkit-scrollbar{width:3px;} .sidebar::-webkit-scrollbar-thumb{background:rgba(128,128,128,.2);border-radius:3px;}
.sidebar-brand { padding:1.1rem 1.35rem 1rem;background:var(--sb-brand-bg);border-bottom:1px solid var(--sb-border);flex-shrink:0; }
.brand-logo { width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--brand-gold),#b8860b);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1rem;color:{{ $sbLogoColor }};box-shadow:0 4px 14px rgba(212,175,55,.4);flex-shrink:0; }
.brand-name { color:{{ $sbDark ? '#fff' : 'var(--text-1)' }};font-weight:700;font-size:.88rem;line-height:1.2; }
.brand-sub  { color:var(--sb-sec);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase; }
.sidebar-nav { padding:.6rem .65rem 2rem;flex:1; }
.nav-section-label { font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-sec);padding:1rem .75rem .3rem;font-weight:700; }
.sidebar-link { display:flex;align-items:center;gap:.65rem;padding:.55rem .85rem;border-radius:10px;color:var(--sb-text);text-decoration:none;font-size:.82rem;font-weight:500;transition:all .15s;margin-bottom:2px; }
.sidebar-link:hover { color:{{ $sbDark ? '#fff' : 'var(--brand-primary)' }};background:var(--sb-hover); }
.sidebar-link.active { background:var(--nav-active-bg);color:#fff;font-weight:700;box-shadow:var(--nav-active-sh); }
.sidebar-link .nav-icon { width:18px;font-size:.9rem;flex-shrink:0;opacity:.85; }
.sidebar-link.active .nav-icon { opacity:1; }
.nav-badge { margin-left:auto;background:#ef4444;color:#fff;border-radius:12px;font-size:.6rem;padding:.15em .5em;font-weight:700; }
.sidebar-footer { padding:.85rem 1rem;border-top:1px solid var(--sb-border);flex-shrink:0; }
.sb-user-av { width:32px;height:32px;border-radius:50%;background:var(--nav-active-bg);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.72rem;flex-shrink:0; }
.sb-user-name { color:{{ $sbDark ? '#fff' : 'var(--text-1)' }};font-size:.78rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sb-user-role { color:var(--sb-sec);font-size:.62rem; }
.sb-logout { width:100%;background:rgba(128,128,128,.1);color:var(--sb-text);border:none;border-radius:7px;padding:.38rem;font-size:.72rem;cursor:pointer;font-family:inherit;font-weight:600;transition:background .15s; }
.sb-logout:hover { background:rgba(128,128,128,.2); }

/* Topbar */
.topbar { position:fixed;top:0;left:var(--sidebar-w);right:0;height:var(--topbar-h);background:var(--topbar-bg);border-bottom:1px solid var(--topbar-border);z-index:1030;display:flex;align-items:center;padding:0 1.5rem;gap:.75rem;box-shadow:0 1px 6px rgba(0,0,0,.05); }
.topbar-title { font-weight:800;font-size:1rem;color:var(--brand-primary);flex:1; }
.topbar-btn { background:var(--body-bg);border:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-2);font-size:.92rem;cursor:pointer;position:relative;transition:background .15s; }
.topbar-btn:hover { background:var(--card-border); }
.topbar-av { width:36px;height:36px;border-radius:50%;background:var(--nav-active-bg);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.75rem;cursor:pointer;border:2px solid var(--topbar-border); }
.notif-dot { position:absolute;top:-1px;right:-1px;width:8px;height:8px;border-radius:50%;background:#ef4444;border:2px solid var(--topbar-bg); }

/* Main */
.main-content { margin-left:var(--sidebar-w);margin-top:var(--topbar-h);min-height:calc(100vh - var(--topbar-h));padding:1.75rem; }

/* Cards */
.card { border:none;border-radius:16px;background:var(--card-bg);box-shadow:0 1px 3px rgba(0,0,0,.05),0 4px 16px rgba(0,0,0,.06); }
.card-header { background:transparent;border-bottom:1px solid var(--card-border);padding:1.1rem 1.35rem;font-weight:700;font-size:.9rem;border-radius:16px 16px 0 0;color:var(--text-1); }
.card-body { padding:1.35rem; }

/* Stat cards */
.stat-card { border-radius:16px;padding:1.2rem 1.35rem;border:none;box-shadow:0 2px 12px rgba(0,0,0,.1); }
.stat-card .stat-icon { width:50px;height:50px;border-radius:13px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:.65rem; }
.stat-card .stat-value { font-size:2rem;font-weight:900;line-height:1;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35); }
.stat-card .stat-label { font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.92);margin-top:.2rem;text-shadow:0 1px 2px rgba(0,0,0,.3); }
/* All stat card backgrounds use fixed dark-to-medium gradients so white text is always legible
   regardless of active theme. Never use CSS theme variables here. */
.sc-primary { background:linear-gradient(135deg,#003366,#0055b3); }
.sc-success  { background:linear-gradient(135deg,#0d6c2d,#1da851); }
.sc-warning  { background:linear-gradient(135deg,#b8560a,#f97316); }
.sc-danger   { background:linear-gradient(135deg,#8b1c1c,#dc2626); }
.sc-info     { background:linear-gradient(135deg,#075985,#0ea5e9); }
.sc-gold     { background:linear-gradient(135deg,#78450a,#b8860b); }
.sc-purple   { background:linear-gradient(135deg,#4c1d95,#7c3aed); }
.sc-teal     { background:linear-gradient(135deg,#134e4a,#0d9488); }

/* Tables */
.table > thead > tr > th { background:{{ $isDark ? 'rgba(255,255,255,.03)' : '#f8fafc' }};border-bottom:2px solid var(--card-border);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2);font-weight:700;padding:.85rem 1rem;white-space:nowrap; }
.table > tbody > tr > td { padding:.8rem 1rem;vertical-align:middle;font-size:.83rem;border-bottom:1px solid var(--card-border);color:var(--text-1); }
.table > tbody > tr:hover > td { background:{{ $isDark ? 'rgba(255,255,255,.03)' : '#f8fafc' }}; }
.table > tbody > tr:last-child > td { border-bottom:none; }

/* Badges */
.badge { font-weight:600;letter-spacing:.02em;padding:.32em .7em;border-radius:6px; }

/* Buttons */
.btn { font-weight:600;font-size:.83rem;border-radius:10px;padding:.48rem 1.1rem; }
.btn-primary { background:var(--brand-primary);border-color:var(--brand-primary);color:#fff; }
.btn-primary:hover { filter:brightness(1.12);border-color:transparent;color:#fff; }
.btn-outline-primary { color:var(--brand-primary);border-color:var(--brand-primary); }
.btn-outline-primary:hover { background:var(--brand-primary);color:#fff;border-color:var(--brand-primary); }
.btn-sm { padding:.3rem .75rem;font-size:.78rem;border-radius:8px; }
.btn-icon { width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:8px; }

/* Forms */
.form-control,.form-select { border-radius:10px;border-color:var(--topbar-border);font-size:.84rem;padding:.52rem .9rem;background:var(--card-bg);color:var(--text-1); }
.form-control:focus,.form-select:focus { border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--input-focus);background:var(--card-bg);color:var(--text-1); }
.form-label { font-weight:600;font-size:.8rem;color:var(--text-1);margin-bottom:.3rem; }

/* Alerts */
.alert { border-radius:12px;border:none;font-size:.85rem; }
.alert-success { background:#d1fae5;color:#065f46; }
.alert-danger  { background:#fee2e2;color:#991b1b; }
.alert-warning { background:#fef3c7;color:#92400e; }
.alert-info    { background:#dbeafe;color:#1e40af; }

/* Avatar */
.avatar { border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0; }
.avatar-sm { width:30px;height:30px;font-size:.7rem; }
.avatar-md { width:40px;height:40px;font-size:.9rem; }
.avatar-lg { width:64px;height:64px;font-size:1.4rem; }
.avatar-xl { width:80px;height:80px;font-size:1.7rem;border-radius:18px; }

/* Timeline */
.timeline { position:relative; }
.timeline::before { content:'';position:absolute;left:16px;top:0;bottom:0;width:2px;background:var(--card-border); }
.timeline-item { display:flex;gap:.9rem;margin-bottom:1.2rem;position:relative; }
.timeline-icon { width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;z-index:1;box-shadow:0 0 0 3px var(--body-bg); }
.timeline-body { flex:1;background:{{ $isDark ? 'rgba(255,255,255,.04)' : '#f8fafc' }};border-radius:12px;padding:.9rem 1rem; }

/* Page header */
.page-header { margin-bottom:1.75rem; }
.page-header h1 { font-size:1.5rem;font-weight:900;color:var(--brand-primary);margin:0; }
.breadcrumb { font-size:.76rem;margin:0;background:none;padding:0; }
.breadcrumb-item a { color:var(--text-2);text-decoration:none; }
.breadcrumb-item.active,.breadcrumb-item+.breadcrumb-item::before { color:var(--text-3); }

/* Progress */
.progress { border-radius:6px;background:var(--card-border); }
.progress-bar { border-radius:6px; }

/* Theme Panel */
.theme-panel { position:fixed;top:var(--topbar-h);right:0;width:296px;background:var(--card-bg);border-left:1px solid var(--topbar-border);box-shadow:-8px 0 32px rgba(0,0,0,.12);z-index:1035;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);height:calc(100vh - var(--topbar-h));overflow-y:auto;padding:1.25rem; }
.theme-panel.open { transform:translateX(0); }
.theme-swatch { display:flex;align-items:center;gap:.75rem;width:100%;padding:.58rem .75rem;border-radius:10px;border:2px solid var(--topbar-border);background:var(--card-bg);cursor:pointer;transition:all .15s;font-family:inherit;color:var(--text-1);text-align:left;margin-bottom:.35rem; }
.theme-swatch:hover { border-color:var(--brand-primary);background:var(--body-bg); }
.theme-swatch.active { border-color:var(--brand-primary);background:var(--body-bg); }
.swatch-dot { width:22px;height:22px;border-radius:6px;flex-shrink:0; }
.swatch-name { font-size:.82rem;font-weight:700;flex:1; }
.swatch-sub { font-size:.67rem;color:var(--text-2); }
.theme-group-label { font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-2);margin:.9rem 0 .45rem; }

/* Mobile */
@media(max-width:991.98px) {
    .sidebar { transform:translateX(-100%); }
    .sidebar.show { transform:translateX(0);box-shadow:0 0 0 100vw rgba(0,0,0,.45); }
    .topbar { left:0; }
    .main-content { margin-left:0;padding:1rem; }
    .theme-panel { width:100%;max-width:300px; }
}
</style>
@stack('styles')
</head>
<body>

<div id="sidebarOverlay" onclick="closeSidebar()" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1039;"></div>

<!-- ── Sidebar ──────────────────────────────────────────────── -->
<aside class="sidebar" id="sidebar">
    <div class="sidebar-brand">
        <div class="d-flex align-items-center gap-2">
            <div class="brand-logo">{{ strtoupper(substr(config('hrms.company_code', 'HR'),0,2)) }}</div>
            <div>
                <div class="brand-name">{{ config('hrms.company', config('app.name', 'HRMS')) }}</div>
                <div class="brand-sub">HR Management System</div>
            </div>
        </div>
    </div>

    <nav class="sidebar-nav">
        <div class="nav-section-label">Main</div>
        <a href="{{ route('dashboard') }}" class="sidebar-link {{ request()->routeIs('dashboard') ? 'active' : '' }}">
            <i class="bi bi-speedometer2 nav-icon"></i>
            @if($user->isPresident() || $user->isSuperAdmin()) Executive Dashboard
            @elseif($user->isHrAdmin()) HR Dashboard
            @elseif($user->isDeptHead()) Dept. Overview
            @else My Dashboard
            @endif
        </a>

        @if($user->canAccess('employees'))
        <div class="nav-section-label">Workforce</div>
        <a href="{{ route('employees.index') }}" class="sidebar-link {{ request()->routeIs('employees.*') ? 'active' : '' }}">
            <i class="bi bi-people nav-icon"></i> Employees
        </a>
        @endif

        <div class="nav-section-label">My Work</div>
        <a href="{{ route('profile') }}" class="sidebar-link {{ request()->routeIs('profile') ? 'active' : '' }}">
            <i class="bi bi-person-circle nav-icon"></i> My Profile
        </a>
        <a href="{{ route('leaves.index') }}" class="sidebar-link {{ request()->routeIs('leaves.*') ? 'active' : '' }}">
            <i class="bi bi-calendar-check nav-icon"></i>
            {{ $user->isEmployee() ? 'My Leaves' : 'Leave Management' }}
            @php
                $leaveBadge = 0;
                if ($user->isDeptHead())
                    $leaveBadge = \App\Models\Leave::where('status','pending')->whereHas('employee',fn($q)=>$q->where('department_id',$user->getDepartmentIdAttribute()))->count();
                elseif ($user->isHrOrAdmin())
                    $leaveBadge = \App\Models\Leave::where('status','dept_approved')->count();
                elseif ($user->isPresident())
                    $leaveBadge = \App\Models\Leave::where('status','hr_approved')->count();
            @endphp
            @if($leaveBadge > 0)<span class="nav-badge">{{ $leaveBadge }}</span>@endif
        </a>
        <a href="{{ route('attendance.index') }}" class="sidebar-link {{ request()->routeIs('attendance.*') ? 'active' : '' }}">
            <i class="bi bi-clock-history nav-icon"></i> Attendance
        </a>

        <div class="nav-section-label">Performance</div>
        <a href="{{ route('performance.index') }}" class="sidebar-link {{ request()->routeIs('performance.*') ? 'active' : '' }}">
            <i class="bi bi-bar-chart-steps nav-icon"></i>
            {{ $user->isEmployee() ? 'My Evaluations' : 'Performance Eval.' }}
        </a>
        @if($user->canAccess('discipline'))
        <a href="{{ route('discipline.index') }}" class="sidebar-link {{ request()->routeIs('discipline.*') ? 'active' : '' }}">
            <i class="bi bi-shield-exclamation nav-icon"></i> Discipline
        </a>
        @endif

        <div class="nav-section-label">Development</div>
        <a href="{{ route('training.index') }}" class="sidebar-link {{ request()->routeIs('training.*') ? 'active' : '' }}">
            <i class="bi bi-mortarboard nav-icon"></i> Training
        </a>

        @if($user->canAccess('payroll'))
        <div class="nav-section-label">Finance</div>
        <a href="{{ route('payroll.index') }}" class="sidebar-link {{ request()->routeIs('payroll.*') ? 'active' : '' }}">
            <i class="bi bi-currency-dollar nav-icon"></i> Payroll
        </a>
        @endif
    </nav>

    <div class="sidebar-footer">
        <div class="d-flex align-items-center gap-2 mb-2">
            <div class="sb-user-av">{{ strtoupper(substr($user->name,0,2)) }}</div>
            <div class="overflow-hidden flex-1">
                <div class="sb-user-name">{{ $user->name }}</div>
                <div class="sb-user-role">{{ $user->role_label }}</div>
            </div>
        </div>
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button type="submit" class="sb-logout"><i class="bi bi-box-arrow-right me-1"></i> Sign Out</button>
        </form>
    </div>
</aside>

<!-- ── Topbar ────────────────────────────────────────────────── -->
<header class="topbar">
    <button class="topbar-btn d-lg-none" onclick="toggleSidebar()"><i class="bi bi-list" style="font-size:1.2rem;"></i></button>
    <div class="topbar-title d-none d-sm-block">@yield('page-title','Dashboard')</div>
    <div class="d-flex align-items-center gap-2 ms-auto">
        <div class="dropdown">
            <button class="topbar-btn" data-bs-toggle="dropdown">
                <i class="bi bi-bell"></i><span class="notif-dot"></span>
            </button>
            <div class="dropdown-menu dropdown-menu-end shadow-lg border-0 p-2" style="width:300px;border-radius:16px;background:var(--card-bg);border:1px solid var(--topbar-border)!important;">
                <h6 class="px-2 py-1 mb-1 fw-bold" style="font-size:.83rem;color:var(--text-1);">Notifications</h6>
                <a href="{{ route('leaves.index') }}" class="d-block px-2 py-2 rounded-2 text-decoration-none" style="font-size:.8rem;color:var(--text-1);">
                    <div class="fw-semibold">Leave requests pending</div>
                    <div style="color:var(--text-2);">@if($leaveBadge > 0) {{ $leaveBadge }} requests await your review @else All caught up! @endif</div>
                </a>
            </div>
        </div>
        <button class="topbar-btn" id="themeToggleBtn" onclick="toggleThemePanel()" title="Appearance">
            <i class="bi bi-palette"></i>
        </button>
        <div class="dropdown">
            <div class="topbar-av" data-bs-toggle="dropdown">{{ strtoupper(substr($user->name,0,2)) }}</div>
            <div class="dropdown-menu dropdown-menu-end shadow-lg border-0 p-2" style="min-width:200px;border-radius:14px;background:var(--card-bg);border:1px solid var(--topbar-border)!important;">
                <div class="px-3 py-2 mb-1">
                    <div class="fw-bold" style="font-size:.84rem;color:var(--text-1);">{{ $user->name }}</div>
                    <div style="font-size:.74rem;color:var(--text-2);">{{ $user->role_label }}</div>
                </div>
                <div class="dropdown-divider" style="border-color:var(--card-border);"></div>
                <a class="dropdown-item rounded-2" href="{{ route('profile') }}" style="font-size:.83rem;color:var(--text-1);"><i class="bi bi-person me-2"></i>My Profile</a>
                <button class="dropdown-item rounded-2" onclick="toggleThemePanel()" style="font-size:.83rem;color:var(--text-1);background:none;border:none;width:100%;text-align:left;padding:.35rem 1rem;cursor:pointer;font-family:inherit;"><i class="bi bi-palette me-2"></i>Appearance</button>
                <div class="dropdown-divider" style="border-color:var(--card-border);"></div>
                <form method="POST" action="{{ route('logout') }}">@csrf
                    <button type="submit" class="dropdown-item rounded-2 text-danger" style="font-size:.83rem;"><i class="bi bi-box-arrow-right me-2"></i>Sign Out</button>
                </form>
            </div>
        </div>
    </div>
</header>

<!-- ── Theme Panel ───────────────────────────────────────────── -->
<div class="theme-panel" id="themePanel">
    <div class="d-flex align-items-center justify-content-between mb-3">
        <div class="fw-bold" style="font-size:.95rem;color:var(--text-1);"><i class="bi bi-palette me-2" style="color:var(--brand-primary);"></i>Appearance</div>
        <button onclick="closeThemePanel()" style="background:none;border:none;cursor:pointer;color:var(--text-2);font-size:1.1rem;padding:.1rem;"><i class="bi bi-x-lg"></i></button>
    </div>

    <div class="theme-group-label">Colour Theme</div>
    @foreach($themes as $key => $t)
    <form method="POST" action="{{ route('theme.update') }}" class="d-block">
        @csrf
        <input type="hidden" name="theme" value="{{ $key }}">
        <button type="submit" class="theme-swatch {{ ($user->theme ?? 'navy') === $key ? 'active' : '' }}">
            <span class="swatch-dot" style="background:{{ $t['primary'] }};"></span>
            <span class="swatch-name">{{ $t['icon'] }} {{ $t['name'] }}</span>
            <span class="swatch-sub">{{ $t['sub'] }}</span>
            @if(($user->theme ?? 'navy') === $key)<i class="bi bi-check-circle-fill ms-auto" style="color:var(--brand-primary);font-size:.85rem;"></i>@endif
        </button>
    </form>
    @endforeach

    <div class="theme-group-label" style="margin-top:1.25rem;">Sidebar Style</div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:.4rem;">
        <form method="POST" action="{{ route('theme.update') }}">@csrf
            <input type="hidden" name="sidebar_style" value="dark">
            <button type="submit" class="theme-swatch {{ ($user->sidebar_style ?? 'dark') === 'dark' ? 'active' : '' }}" style="justify-content:center;padding:.5rem;">
                <i class="bi bi-moon" style="font-size:.85rem;"></i><span style="font-size:.8rem;font-weight:700;margin-left:.4rem;">Dark</span>
            </button>
        </form>
        <form method="POST" action="{{ route('theme.update') }}">@csrf
            <input type="hidden" name="sidebar_style" value="light">
            <button type="submit" class="theme-swatch {{ ($user->sidebar_style ?? 'dark') === 'light' ? 'active' : '' }}" style="justify-content:center;padding:.5rem;">
                <i class="bi bi-sun" style="font-size:.85rem;"></i><span style="font-size:.8rem;font-weight:700;margin-left:.4rem;">Light</span>
            </button>
        </form>
    </div>

    <div class="theme-group-label" style="margin-top:1.25rem;">Signed In As</div>
    <div class="d-flex align-items-center gap-2 p-2 rounded-3" style="background:var(--body-bg);">
        <div class="avatar avatar-sm" style="background:var(--nav-active-bg);color:#fff;">{{ strtoupper(substr($user->name,0,2)) }}</div>
        <div><div style="font-size:.8rem;font-weight:700;color:var(--text-1);">{{ $user->name }}</div>
        <span class="badge bg-{{ $user->role_badge }}" style="font-size:.66rem;">{{ $user->role_label }}</span></div>
    </div>

    <div class="mt-3 pt-3" style="border-top:1px solid var(--card-border);">
        <form method="POST" action="{{ route('theme.update') }}">
            @csrf
            <input type="hidden" name="theme" value="navy">
            <input type="hidden" name="sidebar_style" value="dark">
            <button type="submit" class="btn btn-sm btn-outline-secondary w-100" style="color:var(--text-2);border-color:var(--topbar-border);font-size:.78rem;">
                <i class="bi bi-arrow-counterclockwise me-1"></i> Reset to Default
            </button>
        </form>
    </div>
</div>

<!-- ── Main Content ───────────────────────────────────────────── -->
<main class="main-content">
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show d-flex align-items-center gap-2 mb-3">
        <i class="bi bi-check-circle-fill"></i>{{ session('success') }}
        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
    </div>
    @endif
    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center gap-2 mb-3">
        <i class="bi bi-exclamation-triangle-fill"></i>{{ session('error') }}
        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
    </div>
    @endif
    @if($errors->any())
    <div class="alert alert-danger mb-3">
        <i class="bi bi-exclamation-triangle-fill me-2"></i><strong>Please fix:</strong>
        <ul class="mb-0 mt-1 ps-3" style="font-size:.84rem;">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
    </div>
    @endif
    @yield('content')
</main>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
function toggleSidebar(){ const s=document.getElementById('sidebar'),o=document.getElementById('sidebarOverlay'); s.classList.toggle('show'); o.style.display=s.classList.contains('show')?'block':'none'; }
function closeSidebar(){ document.getElementById('sidebar').classList.remove('show'); document.getElementById('sidebarOverlay').style.display='none'; }
let _tp=false;
function toggleThemePanel(){ _tp=!_tp; document.getElementById('themePanel').classList.toggle('open',_tp); }
function closeThemePanel(){ _tp=false; document.getElementById('themePanel').classList.remove('open'); }
document.addEventListener('click',e=>{ if(!_tp)return; const p=document.getElementById('themePanel'),b=document.getElementById('themeToggleBtn'); if(p&&b&&!p.contains(e.target)&&!b.contains(e.target))closeThemePanel(); });
setTimeout(()=>{ document.querySelectorAll('.alert.fade.show').forEach(el=>{ try{bootstrap.Alert.getOrCreateInstance(el)?.close();}catch(e){} }); },5000);
</script>
@stack('scripts')
</body>
</html>
