<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', config('mexco.apps.super.name')) · {{ config('mexco.platform') }}</title>
    @include('partials.mexco-favicon')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
    @include('partials.mexco-admin-theme')
    <style>
        * { box-sizing: border-box; }
        body { margin: 0; font-family: Inter, system-ui, sans-serif; background: var(--bg); color: var(--ink); }
        a { text-decoration: none; color: inherit; }
        .shell { display: flex; min-height: 100vh; }

        .sidebar {
            width: var(--sidebar-w); background: var(--sidebar); color: #94A3B8;
            position: fixed; inset: 0 auto 0 0; z-index: 200;
            display: flex; flex-direction: column;
        }
        .sidebar-brand {
            height: auto;
            min-height: var(--header-h);
            padding: .65rem 1rem;
            display: flex; align-items: center; justify-content: center;
            background: linear-gradient(180deg, #FAF8FF 0%, #FFFFFF 100%);
            border-bottom: 1px solid var(--border); flex-shrink: 0;
        }
        .sidebar-brand .logo {
            width: auto; max-width: 100%; height: auto;
            max-height: 58px;
            object-fit: contain; display: block;
        }
        .sidebar-welcome {
            padding: 1.5rem 1.25rem 1.15rem;
            border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0;
        }
        .sidebar-welcome .greeting {
            font-size: .72rem; font-weight: 600; text-transform: uppercase;
            letter-spacing: .08em; color: #64748B; margin: 0 0 .35rem;
        }
        .sidebar-welcome .hello {
            font-size: 1rem; font-weight: 700; color: #F1F5F9;
            margin: 0 0 .35rem; line-height: 1.35;
        }
        .sidebar-welcome .sub {
            font-size: .78rem; color: #94A3B8; margin: 0; line-height: 1.45;
        }
        .sidebar-nav { padding: 1rem .85rem .5rem; flex: 1; overflow-y: auto; }
        .nav-section {
            font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
            color: #64748B; padding: .45rem .9rem .35rem;
        }
        .nav-link {
            display: flex; align-items: center; gap: .7rem; padding: .72rem .9rem;
            border-radius: 10px; font-size: .875rem; font-weight: 500; color: #94A3B8;
            margin-bottom: .15rem; transition: .15s;
        }
        .nav-link svg { width: 20px; height: 20px; flex-shrink: 0; opacity: .85; }
        .nav-link:hover { background: rgba(255,255,255,.06); color: #E2E8F0; }
        .nav-link.active { background: var(--primary); color: #fff; }
        .nav-link.active svg { opacity: 1; }
        .nav-link .nav-label { flex: 1; min-width: 0; }
        .nav-badge {
            min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
            background: #EF4444; color: #fff; font-size: .68rem; font-weight: 800;
            display: inline-grid; place-items: center; line-height: 1; flex-shrink: 0;
            box-shadow: 0 0 0 2px rgba(15, 23, 42, .35);
        }
        .nav-link.active .nav-badge {
            background: #fff; color: #DC2626; box-shadow: none;
        }
        .campus-alert {
            display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
            padding: .9rem 1.1rem; margin-bottom: 1.25rem; border-radius: 12px;
            background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA;
            font-size: .875rem; font-weight: 500;
        }
        .campus-alert-main { display: flex; align-items: center; gap: .75rem; min-width: 0; }
        .campus-alert-count {
            min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px;
            background: #EF4444; color: #fff; font-size: .8rem; font-weight: 800;
            display: inline-grid; place-items: center; flex-shrink: 0;
        }
        .campus-alert a.btn-outline {
            border-color: #FECACA; color: #991B1B; background: #fff;
        }
        .campus-alert a.btn-outline:hover { background: #FEE2E2; }
        .sidebar-note {
            margin: .5rem .85rem 1rem; padding: .9rem; border-radius: 12px;
            background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
        }
        .sidebar-note strong {
            display: block; font-size: .78rem; font-weight: 700; color: #E2E8F0; margin-bottom: .25rem;
        }
        .sidebar-note p {
            margin: 0; font-size: .74rem; color: #94A3B8; line-height: 1.45;
        }
        .sidebar-foot {
            padding: 1rem .85rem; border-top: 1px solid rgba(255,255,255,.08);
        }
        .sidebar-foot form button {
            width: 100%; padding: .6rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
            background: rgba(255,255,255,.05); color: #CBD5E1; font-size: .82rem; font-weight: 600; cursor: pointer;
        }
        .sidebar-foot form button:hover { background: rgba(255,255,255,.1); }

        .main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
        .topbar {
            background: var(--card); border-bottom: 1px solid var(--border);
            height: var(--header-h); min-height: var(--header-h);
            padding: 0 1.75rem; display: flex; align-items: center; justify-content: space-between;
            position: sticky; top: 0; z-index: 100;
        }
        .topbar-left .crumb {
            font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
        }
        .topbar-left .page { font-size: 1rem; font-weight: 700; color: var(--ink); margin-top: .1rem; }
        .topbar-right { display: flex; align-items: center; gap: 1rem; }
        .user-name { font-size: .875rem; font-weight: 600; }
        .user-role { font-size: .75rem; color: var(--muted); }
        .user-menu {
            display: flex; align-items: center; gap: .65rem; cursor: pointer;
            padding: .35rem .5rem .35rem .35rem; border-radius: 12px; list-style: none;
        }
        .user-menu:hover { background: #F8FAFC; }
        .user-avatar {
            width: 40px; height: 40px; border-radius: 50%;
            background: var(--primary); display: grid; place-items: center;
            color: #fff; font-weight: 700; font-size: .85rem;
        }
        .chev { color: var(--muted); width: 16px; height: 16px; }
        .user-dropdown { position: relative; }
        .user-dropdown > summary { list-style: none; }
        .user-dropdown > summary::-webkit-details-marker { display: none; }
        .user-dropdown-menu {
            position: absolute; top: calc(100% + .35rem); right: 0; min-width: 180px;
            background: #fff; border: 1px solid var(--border); border-radius: 12px;
            box-shadow: 0 4px 16px rgba(15,23,42,.08); padding: .35rem; z-index: 300;
        }
        .user-dropdown-menu button {
            width: 100%; text-align: left; border: none; background: transparent;
            padding: .65rem .85rem; border-radius: 8px; font-size: .875rem; font-weight: 500;
            color: var(--mexco-danger); cursor: pointer;
        }
        .user-dropdown-menu button:hover { background: #FEF2F2; }

        .content { padding: 1.75rem; flex: 1; }
        .pg-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
        .pg-head h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 .25rem; letter-spacing: -.02em; }
        .pg-head p { margin: 0; color: var(--muted); font-size: .875rem; max-width: 52rem; line-height: 1.45; }
        .pg-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

        .card {
            background: var(--card); border: 1px solid var(--border); border-radius: 14px;
            box-shadow: 0 1px 3px rgba(15,23,42,.04);
        }
        .btn-purple {
            background: var(--primary); color: #fff; border: none; border-radius: 10px;
            padding: .55rem 1rem; font-weight: 600; font-size: .875rem;
            display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
        }
        .btn-purple:hover { background: var(--primary-dark); color: #fff; }
        .btn-outline {
            background: #fff; color: var(--ink); border: 1px solid var(--border); border-radius: 10px;
            padding: .55rem 1rem; font-weight: 600; font-size: .875rem;
            display: inline-flex; align-items: center; gap: .4rem;
        }
        .btn-outline:hover { background: #F8FAFC; color: var(--ink); }
        .btn-sm { padding: .35rem .75rem; font-size: .78rem; border-radius: 8px; }
        .btn-danger { background: #FEE2E2; color: var(--mexco-danger); border: none; font-weight: 600; cursor: pointer; border-radius: 8px; }
        .btn-danger:hover { background: #FECACA; }

        .alert-flash { padding: .85rem 1rem; border-radius: 12px; margin-bottom: 1.25rem; font-size: .875rem; font-weight: 500; }
        .alert-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
        .alert-danger { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

        .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
        @media (max-width: 992px) { .stat-row { grid-template-columns: repeat(2, 1fr); } .main { margin-left: 0; } .sidebar { display: none; } }
        .stat-card { padding: 1.15rem 1.2rem; }
        .stat-label { font-size: .78rem; color: var(--muted); font-weight: 500; }
        .stat-num { font-size: 1.65rem; font-weight: 800; margin-top: .25rem; }

        .tbl-wrap { overflow-x: auto; }
        .data-tbl { width: 100%; border-collapse: collapse; font-size: .875rem; }
        .data-tbl th {
            font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600;
            text-align: left; padding: .85rem 1.15rem; border-bottom: 1px solid var(--border); white-space: nowrap; background: #FAFBFC;
        }
        .data-tbl td { padding: .85rem 1.15rem; border-bottom: 1px solid #F1F5F9; vertical-align: middle; }
        .data-tbl tbody tr:hover { background: #FAFBFC; }
        .data-tbl tbody tr:last-child td { border-bottom: 0; }
        .cell-name { font-weight: 600; color: var(--ink); }
        .cell-sub { font-size: .82rem; color: var(--muted); }
        .mono { font-family: ui-monospace, monospace; font-size: .82rem; }
        .status-pill {
            display: inline-block; padding: .25rem .65rem; border-radius: 99px;
            font-size: .72rem; font-weight: 600; background: var(--primary-soft); color: var(--primary-dark);
        }
        .status-pill.success { background: #ECFDF5; color: var(--mexco-success); }
        .status-pill.muted { background: #F1F5F9; color: var(--muted); }
        .status-pill.accent { background: #E0F2FE; color: #0369A1; }

        .form-panel { padding: 1.5rem; }
        .form-panel h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .35rem; }
        .form-panel .panel-lead { margin: 0 0 1.15rem; color: var(--muted); font-size: .85rem; line-height: 1.45; }
        .form-row { margin-bottom: 1rem; }
        .form-label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; }
        .form-input {
            width: 100%; padding: .6rem .85rem; border: 1px solid var(--border);
            border-radius: 10px; font-size: .875rem; background: #fff;
        }
        .form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
        .form-hint { font-size: .78rem; color: var(--muted); margin-top: .25rem; line-height: 1.4; }
        .action-group { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; align-items: center; }

        .cap-grid { display: grid; gap: .75rem; }
        .cap-card {
            display: flex; gap: .85rem; align-items: flex-start;
            padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: #FAFBFC;
        }
        .cap-card input[type="checkbox"] {
            width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--primary); flex: none;
        }
        .cap-card .cap-title { font-size: .875rem; font-weight: 700; margin: 0 0 .25rem; }
        .cap-card .cap-desc { font-size: .8rem; color: var(--muted); margin: 0; line-height: 1.45; }
        .form-stack { display: grid; gap: 1rem; max-width: 820px; }
        .section-card { padding: 1.25rem 1.35rem; }

        @stack('styles')
    </style>
    @stack('head')
</head>
<body>
@php
    $r = request()->route()?->getName() ?? '';
    $pageTitle = trim($__env->yieldContent('title')) ?: config('mexco.apps.super.name');
@endphp
<div class="shell">
    <aside class="sidebar">
        <div class="sidebar-brand">
            @include('partials.mexco-brand', ['app' => 'super', 'class' => 'logo'])
        </div>
        <div class="sidebar-welcome">
            <div class="greeting">{{ config('mexco.apps.super.name') }}</div>
            <div class="hello">Platform control</div>
            <p class="sub">Create events, assign organisers, and grant requested capabilities.</p>
        </div>
        <nav class="sidebar-nav">
            <div class="nav-section">Main</div>
            @foreach([
                ['mexco.super.dashboard', 'Dashboard', 'grid'],
                ['mexco.super.organisations', 'Organisations', 'users'],
                ['mexco.super.events', 'Events & access', 'flag'],
            ] as [$route, $label, $icon])
                @php
                    $active = $route === 'mexco.super.dashboard'
                        ? $r === $route
                        : str_starts_with((string) $r, $route);
                @endphp
                <a href="{{ route($route) }}" class="nav-link {{ $active ? 'active' : '' }}">
                    @include('admin.partials.nav-icon', ['icon' => $icon])
                    {{ $label }}
                </a>
            @endforeach

            <div class="nav-section">Platform</div>
            <a href="{{ route('mexco.super.organisers') }}" class="nav-link {{ str_starts_with((string) $r, 'mexco.super.organisers') ? 'active' : '' }}">
                @include('admin.partials.nav-icon', ['icon' => 'shield'])
                Organiser access
            </a>

            <div class="nav-section">SaaS management</div>
            @foreach([
                ['mexco.super.plans', 'Plans & features', 'layers'],
                ['mexco.super.features', 'Feature catalogue', 'list'],
                ['mexco.super.addons', 'Add-ons', 'puzzle'],
                ['mexco.super.campus', 'Campus Sponsorship', 'flag'],
                ['mexco.super.billing', 'Billing & invoices', 'layers'],
            ] as [$route, $label, $icon])
                @php
                    $active = str_starts_with((string) $r, $route);
                    $showCampusBadge = $route === 'mexco.super.campus' && ($pendingCampusCount ?? 0) > 0;
                @endphp
                <a href="{{ $showCampusBadge ? route('mexco.super.campus', ['status' => 'pending']) : route($route) }}" class="nav-link {{ $active ? 'active' : '' }}">
                    @include('admin.partials.nav-icon', ['icon' => $icon])
                    <span class="nav-label">{{ $label }}</span>
                    @if($showCampusBadge)
                        <span class="nav-badge" title="{{ $pendingCampusCount }} awaiting approval">{{ $pendingCampusCount > 99 ? '99+' : $pendingCampusCount }}</span>
                    @endif
                </a>
            @endforeach

            <div class="nav-section">Insights</div>
            @foreach([
                ['mexco.super.analytics', 'Analytics', 'grid'],
                ['mexco.super.reports', 'Reports', 'list'],
                ['mexco.super.audit', 'Audit log', 'shield'],
                ['mexco.super.notifications', 'Notifications', 'flag'],
                ['mexco.super.support', 'Support', 'users'],
            ] as [$route, $label, $icon])
                @php $active = str_starts_with((string) $r, $route); @endphp
                <a href="{{ route($route) }}" class="nav-link {{ $active ? 'active' : '' }}">
                    @include('admin.partials.nav-icon', ['icon' => $icon])
                    {{ $label }}
                </a>
            @endforeach

            <div class="nav-section">System</div>
            @foreach([
                ['mexco.super.health', 'System health', 'grid'],
                ['mexco.super.admins', 'Admin users', 'shield'],
                ['mexco.super.settings', 'Settings', 'layers'],
            ] as [$route, $label, $icon])
                @php $active = str_starts_with((string) $r, $route); @endphp
                <a href="{{ route($route) }}" class="nav-link {{ $active ? 'active' : '' }}">
                    @include('admin.partials.nav-icon', ['icon' => $icon])
                    {{ $label }}
                </a>
            @endforeach
        </nav>
        <div class="sidebar-note">
            <strong>Organiser capabilities</strong>
            <p>Voting and floor plan stay locked until you grant them on each event.</p>
        </div>
        <div class="sidebar-foot">
            <form method="POST" action="{{ route('mexco.super.logout') }}">
                @csrf
                <button type="submit">Sign out</button>
            </form>
        </div>
    </aside>

    <div class="main">
        <header class="topbar">
            <div class="topbar-left">
                <div class="crumb">{{ config('mexco.platform') }}</div>
                <div class="page">{{ $pageTitle }}</div>
            </div>
            <div class="topbar-right">
                <details class="user-dropdown">
                    <summary class="user-menu">
                        <div class="user-avatar">SA</div>
                        <div>
                            <div class="user-name">{{ session('meetup_super_admin_name', 'Super Admin') }}</div>
                            <div class="user-role">{{ config('mexco.apps.super.tagline') }}</div>
                        </div>
                        <svg class="chev" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>
                    </summary>
                    <div class="user-dropdown-menu">
                        <form method="POST" action="{{ route('mexco.super.logout') }}">
                            @csrf
                            <button type="submit">Sign out</button>
                        </form>
                    </div>
                </details>
            </div>
        </header>

        <main class="content">
            @if(($pendingCampusCount ?? 0) > 0 && ! str_starts_with((string) $r, 'mexco.super.campus'))
                <div class="campus-alert" role="alert">
                    <div class="campus-alert-main">
                        <span class="campus-alert-count">{{ $pendingCampusCount > 99 ? '99+' : $pendingCampusCount }}</span>
                        <div>
                            <strong>{{ $pendingCampusCount }}</strong>
                            campus sponsorship {{ $pendingCampusCount === 1 ? 'request' : 'requests' }}
                            need{{ $pendingCampusCount === 1 ? 's' : '' }} approval.
                        </div>
                    </div>
                    <a href="{{ route('mexco.super.campus', ['status' => 'pending']) }}" class="btn-outline btn-sm">Review now</a>
                </div>
            @endif
            @if(session('success'))
                <div class="alert-flash alert-success">{{ session('success') }}</div>
            @endif
            @if(session('error'))
                <div class="alert-flash alert-danger">{{ session('error') }}</div>
            @endif
            @yield('content')
        </main>
    </div>
</div>
@stack('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
