@extends('layouts.app')

@section('title', 'Audit Trail')
@section('page-title', 'Audit Trail')
@section('page-subtitle', 'Track logins, staff actions, member portal activity, and system events')

@section('content')
@php
    $formatAction = fn (?string $action) => $action ? str($action)->replace('_', ' ')->headline() : 'System activity';
    $formatSubject = fn (?string $type) => $type ? str(class_basename($type))->headline() : 'General';
    $filters = $filters ?? [];
    $activeFilters = collect($filters)->filter(fn ($value) => filled($value))->count();
    $statCards = [
        ['Today', number_format($stats['today'] ?? 0), 'Activities recorded today', 'bi-calendar-check', 'blue'],
        ['Security', number_format($stats['security'] ?? 0), 'Login, logout, and access events', 'bi-shield-lock', 'green'],
        ['Staff actions', number_format($stats['staff_actions'] ?? 0), 'Admin and staff activity today', 'bi-person-badge', 'amber'],
        ['Member portal', number_format($stats['member_actions'] ?? 0), 'Member self-service actions today', 'bi-phone', 'teal'],
    ];
    $timelineGroups = $logs->getCollection()->groupBy(fn ($log) => $log->created_at?->format('Y-m-d') ?? 'unknown');
    $paginationSummary = $logs->total() > 0
        ? 'Showing '.number_format($logs->firstItem()).' to '.number_format($logs->lastItem()).' of '.number_format($logs->total()).' records'
        : 'No audit records found';
    $paginationStart = max(1, $logs->currentPage() - 2);
    $paginationEnd = min($logs->lastPage(), $logs->currentPage() + 2);
    $paginationPages = $logs->lastPage() > 0 ? range($paginationStart, $paginationEnd) : [];
    $dayLabel = function (string $date): string {
        if ($date === 'unknown') {
            return 'Unknown date';
        }

        $day = \Illuminate\Support\Carbon::parse($date);

        return match (true) {
            $day->isToday() => 'Today',
            $day->isYesterday() => 'Yesterday',
            default => app_date($day),
        };
    };
    $actionTone = function (?string $action): string {
        return match (true) {
            str_contains((string) $action, 'login') || str_contains((string) $action, 'logout') => 'security',
            str_contains((string) $action, 'approved') || str_contains((string) $action, 'verified') => 'approved',
            str_contains((string) $action, 'rejected') || str_contains((string) $action, 'canceled') || str_contains((string) $action, 'suspended') => 'danger',
            str_contains((string) $action, 'pending') || str_contains((string) $action, 'submitted') => 'pending',
            default => 'neutral',
        };
    };
@endphp

<section class="audit-hero mb-4">
    <div class="audit-hero-copy">
        <span>Account Center</span>
        <h2>Know exactly what is happening inside the tenant workspace.</h2>
        <p>Review who logged in, what they changed, the module affected, when it happened, and the device or IP address used.</p>
    </div>
    <div class="audit-metric-grid">
        @foreach($statCards as [$label, $value, $hint, $icon, $tone])
            <div class="audit-metric {{ $tone }}">
                <i class="bi {{ $icon }}"></i>
                <span>{{ $label }}</span>
                <strong>{{ $value }}</strong>
                <small>{{ $hint }}</small>
            </div>
        @endforeach
    </div>
</section>

<div class="audit-layout">
    <div class="audit-main">
        <div class="card border-0 shadow-sm audit-card">
            <div class="audit-card-head">
                <div class="audit-title-block">
                    <div class="audit-title-icon"><i class="bi bi-activity"></i></div>
                    <div>
                        <span>Audit log</span>
                        <h3>System activity timeline</h3>
                        <p>Follow every login, approval, posting, update, and member portal action in a clear timeline.</p>
                    </div>
                </div>
                <div class="audit-head-meta">
                    <div>
                        <strong>{{ number_format($logs->total()) }}</strong>
                        <span>Total records</span>
                    </div>
                    <div>
                        <strong>{{ number_format($logs->count()) }}</strong>
                        <span>Showing now</span>
                    </div>
                    <div class="audit-filter-count">
                        <i class="bi bi-funnel"></i>
                        {{ $activeFilters }} active
                    </div>
                </div>
            </div>

            <form method="GET" class="audit-filter-panel">
                <div class="audit-filter-label audit-filter-intro">
                    <i class="bi bi-sliders"></i>
                    <div>
                        <strong>Filter activity</strong>
                        <span>User, action, module, IP, or date.</span>
                    </div>
                </div>
                <div class="audit-search-field audit-filter-wide">
                    <label class="form-label">Search activity</label>
                    <input type="search" name="q" value="{{ $filters['q'] ?? '' }}" class="form-control" placeholder="Action, description, user, email, phone, IP">
                </div>
                <div>
                    <label class="form-label">Actor</label>
                    <select name="user_id" class="form-select">
                        <option value="">All users</option>
                        @foreach($actors as $actor)
                            <option value="{{ $actor->id }}" @selected((int) ($filters['user_id'] ?? 0) === $actor->id)>
                                {{ $actor->name }} - {{ $actor->roleLabel() }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="form-label">Actor type</label>
                    <select name="actor_type" class="form-select">
                        <option value="">All types</option>
                        <option value="staff" @selected(($filters['actor_type'] ?? '') === 'staff')>Staff / admin</option>
                        <option value="member" @selected(($filters['actor_type'] ?? '') === 'member')>Member</option>
                        <option value="system" @selected(($filters['actor_type'] ?? '') === 'system')>System</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">Action</label>
                    <select name="action" class="form-select">
                        <option value="">All actions</option>
                        @foreach($actions as $action)
                            <option value="{{ $action }}" @selected(($filters['action'] ?? '') === $action)>{{ $formatAction($action) }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="form-label">Module</label>
                    <select name="subject_type" class="form-select">
                        <option value="">All modules</option>
                        @foreach($subjectTypes as $type)
                            <option value="{{ $type }}" @selected(($filters['subject_type'] ?? '') === $type)>{{ $formatSubject($type) }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="form-label">IP address</label>
                    <input name="ip" value="{{ $filters['ip'] ?? '' }}" class="form-control" placeholder="127.0.0.1">
                </div>
                <div>
                    <label class="form-label">From</label>
                    <input type="date" name="from" value="{{ $filters['from'] ?? '' }}" class="form-control">
                </div>
                <div>
                    <label class="form-label">To</label>
                    <input type="date" name="to" value="{{ $filters['to'] ?? '' }}" class="form-control">
                </div>
                <div class="audit-filter-actions audit-filter-action-cell">
                    <button class="btn btn-primary"><i class="bi bi-search me-1"></i> Filter</button>
                    @if($activeFilters > 0)
                        <a href="{{ route('tenant.audit-trail.index') }}" class="btn btn-light">Clear</a>
                    @endif
                </div>
            </form>

            <div class="audit-pagination-bar">
                <div>
                    <strong>{{ $paginationSummary }}</strong>
                    <span>Newest activity appears first.</span>
                </div>
                <div class="audit-pagination-links">
                    @if($logs->hasPages())
                        <nav class="audit-pager" aria-label="Audit trail pagination">
                            @if($logs->onFirstPage())
                                <span class="audit-page-link disabled">Prev</span>
                            @else
                                <a class="audit-page-link" href="{{ $logs->previousPageUrl() }}">Prev</a>
                            @endif

                            @if($paginationStart > 1)
                                <a class="audit-page-link" href="{{ $logs->url(1) }}">1</a>
                                @if($paginationStart > 2)
                                    <span class="audit-page-dots">...</span>
                                @endif
                            @endif

                            @foreach($paginationPages as $page)
                                @if($page === $logs->currentPage())
                                    <span class="audit-page-link active">{{ $page }}</span>
                                @else
                                    <a class="audit-page-link" href="{{ $logs->url($page) }}">{{ $page }}</a>
                                @endif
                            @endforeach

                            @if($paginationEnd < $logs->lastPage())
                                @if($paginationEnd < $logs->lastPage() - 1)
                                    <span class="audit-page-dots">...</span>
                                @endif
                                <a class="audit-page-link" href="{{ $logs->url($logs->lastPage()) }}">{{ $logs->lastPage() }}</a>
                            @endif

                            @if($logs->hasMorePages())
                                <a class="audit-page-link" href="{{ $logs->nextPageUrl() }}">Next</a>
                            @else
                                <span class="audit-page-link disabled">Next</span>
                            @endif
                        </nav>
                    @endif
                </div>
            </div>

            <div class="audit-timeline-shell">
                @forelse($timelineGroups as $date => $dayLogs)
                    <div class="audit-day-group">
                        <div class="audit-day-label">
                            <span>{{ $dayLabel($date) }}</span>
                            <small>{{ number_format($dayLogs->count()) }} activit{{ $dayLogs->count() === 1 ? 'y' : 'ies' }}</small>
                        </div>

                        <div class="audit-timeline-list">
                            @foreach($dayLogs as $log)
                                @php
                                    $tone = $actionTone($log->action);
                                    $device = str((string) $log->user_agent)->limit(52);
                                    $actorName = $log->user?->name ?? 'System';
                                    $actorInitial = str($actorName)->substr(0, 1)->upper();
                                @endphp
                                <article class="audit-event-card {{ $tone }}">
                                    <div class="audit-event-time">
                                        <strong>{{ $log->created_at?->format('h:i A') ?? '-' }}</strong>
                                        <span>{{ $log->created_at?->diffForHumans() ?? '' }}</span>
                                    </div>
                                    <div class="audit-event-line">
                                        <span></span>
                                    </div>
                                    <div class="audit-event-body">
                                        <div class="audit-event-top">
                                            <div class="audit-event-actor">
                                                <div class="audit-event-avatar">{{ $actorInitial }}</div>
                                                <div>
                                                    <strong>{{ $actorName }}</strong>
                                                    <span>{{ $log->user?->roleLabel() ?? 'Automated event' }}</span>
                                                </div>
                                            </div>
                                            <div class="audit-event-actions">
                                                <span class="audit-action-pill {{ $tone }}">{{ $formatAction($log->action) }}</span>
                                                <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="modal" data-bs-target="#auditLog{{ $log->id }}">
                                                    <i class="bi bi-eye me-1"></i> View
                                                </button>
                                            </div>
                                        </div>

                                        <p>{{ $log->description ?: 'No description recorded.' }}</p>

                                        <div class="audit-event-meta">
                                            <span><i class="bi bi-box me-1"></i>{{ $formatSubject($log->subject_type) }}{{ $log->subject_id ? ' #'.$log->subject_id : '' }}</span>
                                            <span><i class="bi bi-router me-1"></i>{{ $log->ip_address ?: 'No IP' }}</span>
                                            <span><i class="bi bi-display me-1"></i>{{ $device ?: 'Unknown device' }}</span>
                                        </div>
                                    </div>
                                </article>
                            @endforeach
                        </div>
                    </div>
                @empty
                    <div class="audit-empty-state">
                        <i class="bi bi-activity"></i>
                        <strong>No activity matches your filter.</strong>
                        <span>Try clearing the filters or widening the date range.</span>
                    </div>
                @endforelse
            </div>

            <div class="audit-pagination-bar audit-pagination-bar-bottom">
                <div>
                    <strong>{{ $paginationSummary }}</strong>
                    <span>Use filters above to narrow the activity list.</span>
                </div>
                <div class="audit-pagination-links">
                    @if($logs->hasPages())
                        <nav class="audit-pager" aria-label="Audit trail pagination">
                            @if($logs->onFirstPage())
                                <span class="audit-page-link disabled">Prev</span>
                            @else
                                <a class="audit-page-link" href="{{ $logs->previousPageUrl() }}">Prev</a>
                            @endif

                            @if($paginationStart > 1)
                                <a class="audit-page-link" href="{{ $logs->url(1) }}">1</a>
                                @if($paginationStart > 2)
                                    <span class="audit-page-dots">...</span>
                                @endif
                            @endif

                            @foreach($paginationPages as $page)
                                @if($page === $logs->currentPage())
                                    <span class="audit-page-link active">{{ $page }}</span>
                                @else
                                    <a class="audit-page-link" href="{{ $logs->url($page) }}">{{ $page }}</a>
                                @endif
                            @endforeach

                            @if($paginationEnd < $logs->lastPage())
                                @if($paginationEnd < $logs->lastPage() - 1)
                                    <span class="audit-page-dots">...</span>
                                @endif
                                <a class="audit-page-link" href="{{ $logs->url($logs->lastPage()) }}">{{ $logs->lastPage() }}</a>
                            @endif

                            @if($logs->hasMorePages())
                                <a class="audit-page-link" href="{{ $logs->nextPageUrl() }}">Next</a>
                            @else
                                <span class="audit-page-link disabled">Next</span>
                            @endif
                        </nav>
                    @endif
                </div>
            </div>
        </div>

        @foreach($logs as $log)
            @php($propertiesJson = json_encode($log->properties ?? [], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES))
            <div class="modal fade" id="auditLog{{ $log->id }}" tabindex="-1" aria-labelledby="auditLog{{ $log->id }}Label" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content border-0 shadow">
                        <div class="modal-header">
                            <div>
                                <h2 class="modal-title h5" id="auditLog{{ $log->id }}Label">{{ $formatAction($log->action) }}</h2>
                                <div class="text-muted small">{{ app_datetime($log->created_at, true) }} by {{ $log->user?->name ?? 'System' }}</div>
                            </div>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="audit-detail-box">
                                        <span>Actor</span>
                                        <strong>{{ $log->user?->name ?? 'System' }}</strong>
                                        <small>{{ $log->user?->email ?? $log->user?->roleLabel() ?? 'Automated or background event' }}</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="audit-detail-box">
                                        <span>Module / record</span>
                                        <strong>{{ $formatSubject($log->subject_type) }}</strong>
                                        <small>{{ $log->subject_id ? 'Record ID #'.$log->subject_id : 'No record ID' }}</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="audit-detail-box">
                                        <span>IP address</span>
                                        <strong>{{ $log->ip_address ?: '-' }}</strong>
                                        <small>{{ $log->created_at?->diffForHumans() }}</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="audit-detail-box">
                                        <span>Action code</span>
                                        <strong>{{ $log->action }}</strong>
                                        <small>Saved exactly as recorded by the system.</small>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-semibold">Description</label>
                                    <div class="audit-description">{{ $log->description ?: 'No description recorded.' }}</div>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-semibold">Device / browser</label>
                                    <div class="audit-description">{{ $log->user_agent ?: 'Unknown device' }}</div>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-semibold">Extra data</label>
                                    <pre class="audit-json mb-0">{{ $propertiesJson ?: '{}' }}</pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <aside class="audit-side">
        <div class="card border-0 shadow-sm audit-side-card">
            <div class="audit-side-head">
                <span>Last 7 days</span>
                <h3>Recent actors</h3>
                <p>People with recent recorded activity in this tenant workspace.</p>
            </div>
            <div class="audit-actor-list">
                @forelse($recentActors as $actor)
                    <div class="audit-actor">
                        <div class="audit-avatar">{{ str($actor['user']->name)->substr(0, 1)->upper() }}</div>
                        <div>
                            <strong>{{ $actor['user']->name }}</strong>
                            <span>{{ $actor['user']->roleLabel() }} | {{ number_format($actor['count']) }} action{{ $actor['count'] === 1 ? '' : 's' }}</span>
                            <small>{{ $formatAction($actor['last_action']) }} {{ $actor['last_seen']?->diffForHumans() }}</small>
                        </div>
                    </div>
                @empty
                    <div class="audit-empty-side">
                        <i class="bi bi-person-lines-fill"></i>
                        <span>No recent actor yet.</span>
                    </div>
                @endforelse
            </div>
        </div>
    </aside>
</div>

<style>
.audit-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 1rem;
    align-items: stretch;
}
.audit-hero-copy,
.audit-metric,
.audit-card,
.audit-side-card {
    border-radius: 8px;
}
.audit-hero-copy {
    padding: 1.4rem;
    background: #0f172a;
    color: #fff;
}
.audit-hero-copy span,
.audit-card-head span,
.audit-side-head span {
    display: block;
    color: #94a3b8;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}
.audit-hero-copy h2,
.audit-card-head h3,
.audit-side-head h3 {
    margin: .3rem 0;
    letter-spacing: 0;
}
.audit-hero-copy p,
.audit-card-head p,
.audit-side-head p {
    margin: 0;
    color: #64748b;
}
.audit-hero-copy p {
    color: #cbd5e1;
    max-width: 720px;
}
.audit-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.audit-metric {
    padding: 1rem;
    color: #fff;
    min-height: 136px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.audit-metric i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.18);
}
.audit-metric span,
.audit-metric small {
    color: rgba(255,255,255,.78);
}
.audit-metric strong {
    font-size: 1.55rem;
    line-height: 1;
}
.audit-metric.blue { background: #1d4ed8; }
.audit-metric.green { background: #047857; }
.audit-metric.amber { background: #b45309; }
.audit-metric.teal { background: #0f766e; }
.audit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1rem;
    align-items: start;
}
.audit-card {
    overflow: hidden;
}
.audit-card-head,
.audit-side-head {
    padding: 1.1rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}
.audit-card-head {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}
.audit-title-block {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    min-width: 0;
}
.audit-title-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: #0f172a;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    font-size: 1.25rem;
}
.audit-head-meta {
    display: flex;
    gap: .6rem;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.audit-head-meta > div:not(.audit-filter-count) {
    min-width: 112px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: .55rem .7rem;
    background: #fff;
}
.audit-head-meta strong,
.audit-head-meta span {
    display: block;
}
.audit-head-meta strong {
    color: #0f172a;
    font-size: 1rem;
}
.audit-head-meta span {
    color: #64748b;
    font-size: .76rem;
    font-weight: 700;
}
.audit-filter-count {
    white-space: nowrap;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
    border-radius: 999px;
    padding: .4rem .65rem;
    font-weight: 800;
    font-size: .82rem;
    align-self: center;
}
.audit-filter-panel {
    padding: .75rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
    align-items: end;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.audit-filter-intro {
    grid-column: span 1;
}
.audit-filter-wide {
    grid-column: span 2;
}
.audit-filter-action-cell {
    grid-column: span 1;
}
.audit-filter-label {
    min-height: 54px;
    display: flex;
    gap: .55rem;
    align-items: center;
    padding: .55rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}
.audit-filter-label i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #eef2ff;
    color: #3730a3;
}
.audit-filter-label strong,
.audit-filter-label span {
    display: block;
}
.audit-filter-label strong {
    color: #0f172a;
    font-size: .9rem;
}
.audit-filter-label span {
    color: #64748b;
    font-size: .74rem;
}
.audit-search-field {
    grid-column: auto;
}
.audit-filter-panel .form-label {
    margin-bottom: .22rem;
    color: #475569;
    font-size: .72rem;
    font-weight: 800;
}
.audit-filter-panel .form-control,
.audit-filter-panel .form-select {
    min-height: 36px;
    padding-top: .36rem;
    padding-bottom: .36rem;
    font-size: .86rem;
}
.audit-filter-actions {
    display: flex;
    gap: .5rem;
    min-width: 0;
}
.audit-filter-actions .btn {
    min-height: 36px;
    padding: .36rem .65rem;
    font-weight: 800;
    flex: 1 1 auto;
}
.audit-pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}
.audit-pagination-bar-bottom {
    border-top: 1px solid #e2e8f0;
    border-bottom: 0;
}
.audit-pagination-bar strong,
.audit-pagination-bar span {
    display: block;
}
.audit-pagination-bar strong {
    color: #0f172a;
    font-size: .92rem;
}
.audit-pagination-bar span {
    color: #64748b;
    font-size: .8rem;
}
.audit-pagination-links {
    min-width: 0;
}
.audit-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .35rem;
}
.audit-page-link,
.audit-page-dots {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #dbeafe;
    background: #fff;
    color: #155e75;
    font-weight: 800;
    font-size: .84rem;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    padding: 0 .65rem;
}
.audit-page-link:hover {
    background: #eff6ff;
    color: #0f172a;
}
.audit-page-link.active {
    background: #155e75;
    border-color: #155e75;
    color: #fff;
}
.audit-page-link.disabled {
    color: #94a3b8;
    background: #f8fafc;
    border-color: #e2e8f0;
    cursor: not-allowed;
}
.audit-page-dots {
    border-color: transparent;
    background: transparent;
    color: #94a3b8;
    min-width: 20px;
    padding: 0 .15rem;
}
.audit-timeline-shell {
    padding: 1rem;
    background: #f8fafc;
}
.audit-day-group + .audit-day-group {
    margin-top: 1.25rem;
}
.audit-day-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .7rem;
}
.audit-day-label span {
    color: #0f172a;
    font-weight: 900;
    letter-spacing: 0;
}
.audit-day-label small {
    color: #64748b;
    font-weight: 800;
}
.audit-timeline-list {
    display: grid;
    gap: .8rem;
}
.audit-event-card {
    display: grid;
    grid-template-columns: 92px 28px minmax(0, 1fr);
    gap: .75rem;
    align-items: stretch;
}
.audit-event-time {
    padding-top: .8rem;
    text-align: right;
}
.audit-event-time strong,
.audit-event-time span {
    display: block;
}
.audit-event-time strong {
    color: #0f172a;
    font-size: .9rem;
}
.audit-event-time span {
    color: #64748b;
    font-size: .76rem;
}
.audit-event-line {
    position: relative;
    display: flex;
    justify-content: center;
}
.audit-event-line::before {
    content: "";
    width: 2px;
    height: 100%;
    background: #dbeafe;
    border-radius: 999px;
}
.audit-event-line span {
    position: absolute;
    top: .95rem;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #bfdbfe;
    background: #64748b;
}
.audit-event-card.security .audit-event-line span { background: #2563eb; }
.audit-event-card.approved .audit-event-line span { background: #059669; }
.audit-event-card.danger .audit-event-line span { background: #dc2626; }
.audit-event-card.pending .audit-event-line span { background: #d97706; }
.audit-event-body {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    padding: .85rem;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .04);
}
.audit-event-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    min-width: 0;
}
.audit-event-actor {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .65rem;
    align-items: center;
    min-width: 0;
}
.audit-event-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #0f172a;
    color: #fff;
    font-weight: 900;
}
.audit-event-actor strong,
.audit-event-actor span {
    display: block;
}
.audit-event-actor strong {
    color: #0f172a;
}
.audit-event-actor span {
    color: #64748b;
    font-size: .82rem;
}
.audit-event-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 360px;
}
.audit-event-body p {
    margin: .75rem 0;
    color: #334155;
    line-height: 1.5;
}
.audit-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.audit-event-meta span {
    max-width: 100%;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    border-radius: 999px;
    padding: .32rem .58rem;
    font-size: .78rem;
    font-weight: 700;
}
.audit-action-pill {
    width: fit-content;
    max-width: 260px;
    border-radius: 999px;
    padding: .34rem .7rem;
    font-weight: 800;
    font-size: .78rem;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    text-align: center;
}
.audit-action-pill.security { background: #dbeafe; color: #1d4ed8; }
.audit-action-pill.approved { background: #dcfce7; color: #047857; }
.audit-action-pill.danger { background: #fee2e2; color: #b91c1c; }
.audit-action-pill.pending { background: #fef3c7; color: #92400e; }
.audit-action-pill.neutral { background: #e2e8f0; color: #334155; }
.audit-empty-state {
    min-height: 260px;
    display: grid;
    place-items: center;
    gap: .35rem;
    text-align: center;
    color: #64748b;
}
.audit-empty-state i {
    font-size: 2.4rem;
    color: #94a3b8;
}
.audit-empty-state strong,
.audit-empty-state span {
    display: block;
}
.audit-empty-state strong {
    color: #0f172a;
}
.audit-detail-box,
.audit-description,
.audit-json {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 8px;
    padding: .85rem;
}
.audit-detail-box span,
.audit-detail-box small {
    display: block;
    color: #64748b;
}
.audit-json {
    color: #0f172a;
    max-height: 260px;
    overflow: auto;
    font-size: .82rem;
}
.audit-side-card {
    overflow: hidden;
}
.audit-side-head {
    display: block;
}
.audit-actor-list {
    display: grid;
    gap: .75rem;
    padding: 1rem;
}
.audit-actor {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: .75rem;
    align-items: start;
}
.audit-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #0f172a;
    color: #fff;
    font-weight: 900;
}
.audit-actor strong,
.audit-actor span,
.audit-actor small {
    display: block;
}
.audit-actor span,
.audit-actor small {
    color: #64748b;
    font-size: .82rem;
}
.audit-empty-side {
    display: grid;
    place-items: center;
    gap: .5rem;
    color: #64748b;
    padding: 1.5rem;
    text-align: center;
}
@media (max-width: 1199.98px) {
    .audit-hero,
    .audit-layout {
        grid-template-columns: 1fr;
    }
    .audit-filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .audit-filter-label,
    .audit-search-field,
    .audit-filter-action-cell {
        grid-column: span 2;
    }
    .audit-side {
        order: -1;
    }
}
@media (max-width: 767.98px) {
    .audit-metric-grid,
    .audit-filter-panel {
        grid-template-columns: 1fr;
    }
    .audit-title-block,
    .audit-event-top {
        align-items: flex-start;
    }
    .audit-title-icon {
        width: 40px;
        height: 40px;
    }
    .audit-filter-label,
    .audit-search-field,
    .audit-filter-action-cell {
        grid-column: auto;
    }
    .audit-card-head {
        display: block;
    }
    .audit-head-meta {
        margin-top: 1rem;
        justify-content: flex-start;
    }
    .audit-filter-count {
        width: fit-content;
        margin-top: .75rem;
    }
    .audit-pagination-bar {
        display: grid;
    }
    .audit-pagination-links .pagination {
        justify-content: flex-start;
    }
    .audit-pager {
        justify-content: flex-start;
    }
    .audit-event-card {
        grid-template-columns: 1fr;
        gap: .35rem;
    }
    .audit-event-time {
        text-align: left;
        padding-top: 0;
        display: flex;
        justify-content: space-between;
        gap: .75rem;
    }
    .audit-event-line {
        display: none;
    }
    .audit-event-top {
        display: grid;
    }
    .audit-event-actions {
        justify-content: flex-start;
        max-width: none;
    }
    .audit-action-pill {
        max-width: 100%;
        text-align: left;
    }
    .audit-event-meta span {
        border-radius: 8px;
    }
}
</style>
@endsection
