{{--
    Premium UI layer for the SuperAdmin (SaaS owner) area only.

    Rendered ONLY on `admin.*` routes, so the tenant app keeps its own look.
    Instead of rewriting every admin view, this restyles the theme classes the
    admin pages already use (.page-header-breadcrumb, .custom-card, .table,
    .badge, buttons, KPI cards, forms, pagination) into one consistent,
    modern/premium design.

    Palette: RED / WHITE / GREY / BLACK. Black→red gradient hero, red accents,
    zinc-grey neutrals. (Semantic status badges keep their meaning-colours.)

    Everything is scoped under `.app-content` so the shared sidebar/header
    chrome is left to partials.app-theme.
--}}
@if (request()->routeIs('admin.*'))
<style>
    :root {
        --aa-red:#dc2626; --aa-red-d:#b91c1c; --aa-red-soft:#fee2e2;
        --aa-ink:#18181b; --aa-ink-2:#3f3f46; --aa-muted:#71717a; --aa-faint:#a1a1aa;
        --aa-line:#e9e9ec; --aa-line-2:#f4f4f5; --aa-canvas:#f6f6f7; --aa-card:#ffffff;
        --aa-shadow:0 10px 30px -18px rgba(24,24,27,.45);
        --aa-shadow-sm:0 4px 14px -10px rgba(24,24,27,.4);
        --aa-r:1rem; --aa-r-sm:.7rem;
    }

    /* Softer page canvas behind the cards */
    .app-content { background: var(--aa-canvas); }

    /* ============================================================
       SuperAdmin chrome — retint the SHARED sidebar/header red.
       This whole <style> only renders on admin.* routes, so these
       token + sidebar overrides never reach the tenant web app.
       ============================================================ */
    :root {
        --primary-rgb: 220, 38, 38;        /* Bootstrap primary → red */
        --wk-accent: #dc2626; --wk-accent-2: #ef4444; --wk-ring: rgba(220,38,38,.18);
    }
    .app-sidebar .side-menu__item.active,
    .app-sidebar .slide.active .side-menu__item { background: rgba(220,38,38,.09) !important; border-radius:.6rem; }
    .app-sidebar .side-menu__item.active .side-menu__icon,
    .app-sidebar .slide.active .side-menu__icon { color:#dc2626 !important; fill:#dc2626 !important; }
    .app-sidebar .slide-menu .slide.active .side-menu__item,
    .app-sidebar .side-menu__item.active .side-menu__label { color:#dc2626 !important; }
    .app-header .header-link:hover, .app-header a.text-primary { color:#dc2626 !important; }

    /* ============================================================
       Page header  →  premium black→red gradient hero
       ============================================================ */
    .app-content .page-header-breadcrumb {
        position: relative; overflow: hidden;
        background: linear-gradient(120deg, #18181b 0%, #7f1d1d 52%, #dc2626 100%);
        border-radius: var(--aa-r); color: #fff;
        padding: 1.05rem 1.25rem !important;
        margin: 1.1rem 0 1.25rem !important;
        box-shadow: 0 16px 34px -22px rgba(220,38,38,.75);
    }
    .app-content .page-header-breadcrumb::after {
        content:""; position:absolute; right:-46px; top:-70px; width:210px; height:210px;
        border-radius:50%; background:rgba(255,255,255,.10); pointer-events:none;
    }
    .app-content .page-header-breadcrumb::before {
        content:""; position:absolute; right:90px; bottom:-100px; width:180px; height:180px;
        border-radius:50%; background:rgba(255,255,255,.06); pointer-events:none;
    }
    .app-content .page-header-breadcrumb > * { position: relative; z-index: 2; }
    .app-content .page-header-breadcrumb h4 { color:#fff !important; font-weight:800; letter-spacing:.2px; }
    .app-content .page-header-breadcrumb p,
    .app-content .page-header-breadcrumb .text-muted { color: rgba(255,255,255,.85) !important; }
    .app-content .page-header-breadcrumb .breadcrumb,
    .app-content .page-header-breadcrumb .breadcrumb-item,
    .app-content .page-header-breadcrumb .breadcrumb-item a,
    .app-content .page-header-breadcrumb .breadcrumb-item.active { color: rgba(255,255,255,.8) !important; }

    /* Header action buttons → glassy / solid-white so they read on the gradient */
    .app-content .page-header-breadcrumb .btn {
        border: 1px solid rgba(255,255,255,.30);
        background: rgba(255,255,255,.16); color:#fff !important;
        font-weight:600; backdrop-filter: blur(2px);
    }
    .app-content .page-header-breadcrumb .btn:hover { background: rgba(255,255,255,.26); }
    .app-content .page-header-breadcrumb .btn i { color:#fff !important; }
    .app-content .page-header-breadcrumb .btn-primary,
    .app-content .page-header-breadcrumb .btn.btn-light {
        background:#fff !important; color:var(--aa-red-d) !important; border:none;
        box-shadow:0 8px 18px -10px rgba(0,0,0,.4);
    }
    .app-content .page-header-breadcrumb .btn-primary i,
    .app-content .page-header-breadcrumb .btn.btn-light i { color:var(--aa-red-d) !important; }
    /* The lifted collapsible filter toggle keeps its own white styling */
    .app-content .page-header-breadcrumb .filter-toggle { background:#fff; color:#3f3f46; border:none; }

    /* ============================================================
       Cards & panels
       ============================================================ */
    .app-content .card,
    .app-content .card.custom-card {
        background: var(--aa-card);
        border: 1px solid var(--aa-line) !important;
        border-radius: var(--aa-r) !important;
        box-shadow: var(--aa-shadow) !important;
    }
    .app-content .card .card-header {
        background: transparent; border-bottom: 1px solid var(--aa-line-2);
        padding: .95rem 1.15rem; min-height: 0;
    }
    .app-content .card .card-title,
    .app-content .card .card-header h5 {
        font-weight: 800; color: var(--aa-ink); font-size: .98rem; margin: 0; letter-spacing:.1px;
    }
    .app-content .card .card-body { padding: 1.1rem 1.15rem; }
    .app-content .card .card-body.p-0 { padding: 0; }
    .app-content .card .card-footer {
        background: transparent; border-top: 1px solid var(--aa-line-2); padding: .8rem 1.15rem;
    }

    /* ============================================================
       KPI / stat cards  (row > col-xl-3 > .custom-card)
       — top red accent strip to anchor the palette
       ============================================================ */
    .app-content [class*="col-"] > .card.custom-card {
        position: relative; overflow: hidden;
        transition: transform .15s ease, box-shadow .15s ease;
    }
    .app-content [class*="col-"] > .card.custom-card::before {
        content:""; position:absolute; left:0; top:0; height:3px; width:100%;
        background: linear-gradient(90deg, var(--aa-red), #f87171);
    }
    .app-content [class*="col-"] > .card.custom-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 36px -20px rgba(24,24,27,.5) !important;
    }
    /* Big KPI numbers */
    .app-content .card-body > h4.fw-semibold,
    .app-content .card-body h4.fw-semibold.mb-0 {
        font-weight: 800 !important; color: var(--aa-ink); font-size: 1.55rem; letter-spacing:-.2px;
    }
    .app-content .card-body > .text-muted.d-block { font-size:.7rem; text-transform:uppercase; letter-spacing:.4px; font-weight:700; color:var(--aa-faint) !important; }

    /* Round, soft stat icons (the .avatar squares the theme uses) */
    .app-content .avatar { border-radius: .8rem !important; }
    .app-content .avatar.avatar-md { width: 3rem; height: 3rem; }

    /* ============================================================
       Tables  →  airy, premium
       ============================================================ */
    .app-content .table { margin: 0; color: var(--aa-ink-2); border-color: var(--aa-line-2); }
    .app-content .table > :not(caption) > * > * { background: transparent; }
    .app-content .table thead th {
        text-transform: uppercase; font-size: .68rem; letter-spacing: .5px;
        font-weight: 800; color: var(--aa-faint);
        background: #fafafa; border-bottom: 1px solid var(--aa-line) !important;
        padding: .8rem 1.1rem; white-space: nowrap;
    }
    .app-content .table tbody td {
        padding: .85rem 1.1rem; border-bottom: 1px solid var(--aa-line-2);
        vertical-align: middle; font-size: .875rem;
    }
    .app-content .table tbody tr:last-child td { border-bottom: 0; }
    .app-content .table.table-hover tbody tr { transition: background .12s ease; }
    .app-content .table.table-hover tbody tr:hover td { background: #fafafa; }
    .app-content .table a.fw-semibold,
    .app-content .table a.text-primary { color: var(--aa-red) !important; font-weight: 700; text-decoration: none; }
    .app-content .table a.fw-semibold:hover,
    .app-content .table a.text-primary:hover { text-decoration: underline; }

    /* ============================================================
       Badges  →  soft rounded pills
       (status colours kept for meaning; primary → red, secondary → grey)
       ============================================================ */
    .app-content .badge {
        border-radius: 999px; font-weight: 700; font-size: .7rem;
        padding: .32rem .65rem; letter-spacing: .2px;
    }
    .app-content .badge.bg-success-transparent { background:#dcfce7 !important; color:#15803d !important; }
    .app-content .badge.bg-danger-transparent  { background:var(--aa-red-soft) !important; color:var(--aa-red-d) !important; }
    .app-content .badge.bg-warning-transparent { background:#fef3c7 !important; color:#b45309 !important; }
    .app-content .badge.bg-info-transparent    { background:#f4f4f5 !important; color:#3f3f46 !important; }
    .app-content .badge.bg-secondary-transparent { background:#f4f4f5 !important; color:#52525b !important; }
    .app-content .badge.bg-primary-transparent { background:var(--aa-red-soft) !important; color:var(--aa-red-d) !important; }

    /* ============================================================
       Buttons
       ============================================================ */
    .app-content .btn { border-radius: var(--aa-r-sm); font-weight: 600; letter-spacing:.1px; }
    .app-content .btn-sm { border-radius: .55rem; }
    .app-content .btn-primary {
        background: linear-gradient(135deg, var(--aa-red) 0%, var(--aa-red-d) 100%);
        border: none; box-shadow: 0 10px 20px -12px rgba(220,38,38,.8);
    }
    .app-content .btn-primary:hover { filter: brightness(1.05); }
    .app-content .btn-secondary,
    .app-content .btn-dark {
        background: linear-gradient(135deg, #27272a 0%, #18181b 100%);
        border: none; color:#fff;
    }
    .app-content .btn-primary-light { background:var(--aa-red-soft); color:var(--aa-red-d); border:none; }
    .app-content .btn-primary-light:hover { background:#fecaca; color:var(--aa-red-d); }
    .app-content .btn-info-light { background:#f4f4f5; color:#3f3f46; border:none; }
    .app-content .btn-success-light { background:#dcfce7; color:#15803d; border:none; }
    .app-content .btn-warning-light { background:#fef3c7; color:#b45309; border:none; }
    .app-content .btn-danger-light { background:var(--aa-red-soft); color:var(--aa-red-d); border:none; }
    .app-content .btn-dark-light { background:#e9e9ec; color:#27272a; border:none; }
    /* Outline-primary → red */
    .app-content .btn-outline-primary { color:var(--aa-red-d); border-color:var(--aa-red); }
    .app-content .btn-outline-primary:hover { background:var(--aa-red); border-color:var(--aa-red); color:#fff; }
    /* Action-cell icon buttons sit nicely together */
    .app-content td .btn-sm + .btn-sm,
    .app-content td form + form .btn-sm,
    .app-content td form + .btn-sm { margin-left: .25rem; }

    /* ============================================================
       Forms
       ============================================================ */
    .app-content .form-control,
    .app-content .form-select {
        border-radius: var(--aa-r-sm); border: 1px solid #e2e2e6;
        background: #fff; color: var(--aa-ink); font-size: .875rem;
    }
    .app-content .form-control:focus,
    .app-content .form-select:focus {
        border-color: var(--aa-red);
        box-shadow: 0 0 0 3px rgba(220,38,38,.14);
    }
    .app-content .form-label { font-weight: 600; color: var(--aa-ink-2); font-size: .82rem; margin-bottom: .3rem; }
    .app-content .form-check-input:checked { background-color: var(--aa-red); border-color: var(--aa-red); }
    .app-content .form-switch .form-check-input:checked { background-color: var(--aa-red); border-color: var(--aa-red); }

    /* ============================================================
       Pagination
       ============================================================ */
    .app-content .pagination { gap: .25rem; }
    .app-content .page-link {
        border: 1px solid var(--aa-line); border-radius: .55rem !important;
        color: var(--aa-ink-2); font-weight: 600; font-size: .82rem; margin: 0 1px;
    }
    .app-content .page-item.active .page-link {
        background: var(--aa-red); border-color: var(--aa-red); color: #fff;
    }
    .app-content .page-link:hover { background: var(--aa-red-soft); color: var(--aa-red-d); }

    /* ============================================================
       Misc accents → red
       ============================================================ */
    .app-content a.text-primary, .app-content .text-primary { color: var(--aa-red) !important; }
    .app-content .bg-primary { background-color: var(--aa-red) !important; }
    .app-content .nav-tabs .nav-link.active { color: var(--aa-red-d); border-bottom-color: var(--aa-red); }
    .app-content .progress-bar { background-color: var(--aa-red); }

    /* ============================================================
       Alerts (flash messages) — softer
       ============================================================ */
    .app-content .alert { border: 1px solid var(--aa-line); border-radius: var(--aa-r-sm); box-shadow: var(--aa-shadow-sm); }

    /* ============================================================
       Mobile: hero & header stay tidy
       ============================================================ */
    @media (max-width: 767.98px) {
        .app-content .page-header-breadcrumb { padding: .9rem 1rem !important; }
        .app-content .card-body > h4.fw-semibold { font-size: 1.3rem; }
    }
</style>
@endif