{{-- Shared sub-nav strip + base styles used by every /admin/ai/* page. --}}
@push('styles')
<style>
    /* ── Sub-nav strip ───────────────────────────────────────────── */
    .ai-subnav {
        display: flex; gap: 6px; flex-wrap: wrap;
        padding: 10px 14px;
        background: #f8fafc;
        border: 1px solid #e2e8f0; border-radius: 12px;
        margin: 0 auto 18px;
        max-width: 1200px;
    }
    .ai-subnav__item {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 14px;
        font-size: 13px; font-weight: 700;
        color: #475569;
        background: transparent;
        border: 1px solid transparent; border-radius: 8px;
        text-decoration: none;
        transition: all .12s;
    }
    .ai-subnav__item:hover {
        color: #4338ca; background: #eef2ff;
    }
    .ai-subnav__item--active {
        color: #4338ca; background: #fff;
        border-color: #c7d2fe;
        box-shadow: 0 1px 2px rgba(15,23,42,.05);
    }
    .ai-subnav__count {
        display: inline-block;
        padding: 1px 8px;
        font-size: 11px; font-weight: 700;
        background: #ede9fe; color: #5b21b6;
        border-radius: 999px;
    }

    /* ── Generic card + tables — reused across all 4 pages ───────── */
    .ai-page { max-width: 1200px; margin: 16px auto 0; display: grid; gap: 16px; }

    .ai-card {
        background: #fff;
        border: 1px solid #eef2f7;
        border-radius: 14px;
        box-shadow: 0 1px 2px rgba(15,23,42,.03);
        overflow: hidden;
    }
    .ai-card__head {
        padding: 14px 20px;
        border-bottom: 1px solid #f1f5f9;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .ai-card__head h3 { margin: 0; font-size: 14px; font-weight: 700; color: #0f172a; }
    .ai-card__body { padding: 0; }

    .ai-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
    .ai-tbl th, .ai-tbl td {
        padding: 11px 14px; text-align: start; vertical-align: top;
        border-bottom: 1px solid #f1f5f9;
    }
    .ai-tbl th {
        font-size: 11.5px; font-weight: 700; color: #64748b;
        text-transform: uppercase; letter-spacing: .03em;
        background: #f8fafc;
    }
    .ai-tbl tbody tr:hover { background: #fafbff; }
    .ai-tbl tr:last-child td { border-bottom: 0; }

    .ai-pill {
        display: inline-block;
        padding: 2px 9px;
        font-size: 11.5px; font-weight: 700;
        border-radius: 999px;
        white-space: nowrap;
    }
    .ai-pill--read     { background: #dbeafe; color: #1e40af; }
    .ai-pill--full     { background: #ede9fe; color: #5b21b6; }
    .ai-pill--write    { background: #fef3c7; color: #92400e; }
    .ai-pill--create   { background: #d1fae5; color: #065f46; }
    .ai-pill--open     { background: #d1fae5; color: #065f46; }
    .ai-pill--closed   { background: #f1f5f9; color: #475569; }
    .ai-pill--running  { background: #fef3c7; color: #92400e; }
    .ai-pill--queued   { background: #dbeafe; color: #1e40af; }
    .ai-pill--completed{ background: #d1fae5; color: #065f46; }
    .ai-pill--failed   { background: #fecaca; color: #b91c1c; }
    .ai-pill--paused   { background: #f1f5f9; color: #475569; }
    .ai-pill--pending  { background: #fef3c7; color: #92400e; }
    .ai-pill--approved { background: #d1fae5; color: #065f46; }
    .ai-pill--rejected { background: #fecaca; color: #b91c1c; }
    .ai-pill--applied  { background: #d1fae5; color: #065f46; }
    .ai-pill--stale    { background: #f1f5f9; color: #475569; }

    .ai-empty { padding: 22px; color: #94a3b8; font-style: italic; text-align: center; }

    .ai-filter-bar {
        display: flex; gap: 8px; flex-wrap: wrap;
        padding: 12px 16px;
        background: #fafbff;
        border-bottom: 1px solid #f1f5f9;
    }
    .ai-filter-bar select,
    .ai-filter-bar input[type="text"],
    .ai-filter-bar input[type="date"],
    .ai-filter-bar input[type="number"] {
        padding: 6px 10px;
        font-size: 12.5px;
        background: #fff;
        border: 1px solid #e2e8f0; border-radius: 8px;
        color: #0f172a;
    }
    .ai-filter-bar button {
        padding: 6px 14px;
        background: #4f46e5; color: #fff;
        border: 0; border-radius: 8px;
        font-size: 12.5px; font-weight: 700; cursor: pointer;
    }
    .ai-filter-bar a.reset {
        padding: 6px 10px;
        color: #64748b; font-size: 12.5px;
        text-decoration: none;
    }
    .ai-filter-bar a.reset:hover { color: #4338ca; }

    .ai-flash {
        max-width: 1200px; margin: 0 auto 16px;
        padding: 12px 16px;
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
        color: #065f46;
        border-radius: 10px;
        font-size: 13.5px; font-weight: 600;
    }

    /* Progress bar (tasks) */
    .ai-progress {
        position: relative;
        height: 8px;
        background: #f1f5f9;
        border-radius: 999px;
        overflow: hidden;
    }
    .ai-progress__fill {
        position: absolute; top: 0; left: 0; bottom: 0;
        background: linear-gradient(90deg, #6366f1, #8b5cf6);
        border-radius: 999px;
        transition: width .25s;
    }
    .ai-mini { font-size: 11.5px; color: #64748b; }
    .ai-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: #334155; }
    .ai-link { color: #4338ca; text-decoration: none; font-weight: 700; }
    .ai-link:hover { text-decoration: underline; }

    /* Diff card on change_request show */
    .ai-diff { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 0; font-size: 13px; }
    .ai-diff__hdr { padding: 8px 12px; font-weight: 700; color: #475569; background: #f8fafc; border-bottom: 1px solid #f1f5f9; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
    .ai-diff__cell { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; word-break: break-word; }
    .ai-diff__cell--from { background: #fef2f2; color: #991b1b; }
    .ai-diff__cell--to   { background: #ecfdf5; color: #064e3b; }
</style>
@endpush

@php
    $aiNavItems = [
        ['route' => 'admin.ai.sessions.index',             'label' => __('admin.ai.nav.sessions')],
        ['route' => 'admin.ai.activity.index',             'label' => __('admin.ai.nav.activity')],
        ['route' => 'admin.ai.tasks.index',                'label' => __('admin.ai.nav.tasks')],
        ['route' => 'admin.ai.rollback.range',             'label' => __('admin.ai.nav.rollback')],
        ['route' => 'admin.ai.connectors.index',           'label' => __('admin.ai.nav.connectors')],
        ['route' => 'admin.ai.oauth-sessions.index',       'label' => __('admin.ai.nav.oauth_sessions')],
    ];
    $currentRoute = request()->route()?->getName();
@endphp

<div class="ai-subnav">
    @foreach ($aiNavItems as $item)
        <a href="{{ route($item['route']) }}"
           class="ai-subnav__item {{ $currentRoute === $item['route'] ? 'ai-subnav__item--active' : '' }}">
            {{ $item['label'] }}
        </a>
    @endforeach
</div>

@if (session('status'))
    <div class="ai-flash">{{ session('status') }}</div>
@endif