@extends('layouts.admin')

@section('title')
    @yield('fwp_title')
@endsection

@section('content-header')
    <h1>
        Firewall-Plus
        @hasSection('fwp_subtitle')
            <small>@yield('fwp_subtitle')</small>
        @endif
    </h1>
    <ol class="breadcrumb">
        <li><a href="{{ route('admin.index') }}">Admin</a></li>
        <li class="active">Firewall-Plus</li>
    </ol>
@endsection

@section('content')
<style>
    /* Dark / inverted skins: keep striped tables readable (no white rows + pale text). */
    .fwp-admin-table.table-striped > tbody > tr:nth-of-type(odd),
    .fwp-admin-table.table-striped > tbody > tr:nth-of-type(odd) > td {
        background-color: rgba(255, 255, 255, 0.06) !important;
        color: inherit !important;
    }
    .fwp-admin-table.table-striped > tbody > tr:nth-of-type(even),
    .fwp-admin-table.table-striped > tbody > tr:nth-of-type(even) > td {
        background-color: transparent !important;
        color: inherit !important;
    }
    .fwp-admin-table.table-hover > tbody > tr:hover > td {
        background-color: rgba(255, 255, 255, 0.09) !important;
    }
    .fwp-modal .modal-body { text-align: left; }

    /* Bootstrap 3 accordions (panel-default) default to white; blend into dark AdminLTE. */
    .fwp-admin-wrap .panel.panel-default {
        background-color: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: none;
    }
    .fwp-admin-wrap .panel.panel-default > .panel-heading {
        background-color: rgba(255, 255, 255, 0.07);
        border-color: rgba(255, 255, 255, 0.1);
        color: inherit;
    }
    .fwp-admin-wrap .panel.panel-default > .panel-heading + .panel-collapse > .panel-body {
        background-color: rgba(0, 0, 0, 0.18);
        border-top-color: rgba(255, 255, 255, 0.08);
        color: inherit;
    }
    .fwp-admin-wrap .panel.panel-default .panel-title > a {
        color: rgba(255, 255, 255, 0.95);
        text-decoration: none;
    }
    .fwp-admin-wrap .panel.panel-default .panel-title > a.collapsed {
        color: rgba(255, 255, 255, 0.78);
    }
    .fwp-admin-wrap .panel.panel-default .panel-title .text-muted {
        color: rgba(255, 255, 255, 0.5) !important;
    }
    .fwp-admin-wrap .panel-group .panel + .panel {
        margin-top: 8px;
    }
    .fwp-admin-wrap a.fwp-bound-toggle.collapsed .fwp-bound-chevron {
        transform: rotate(-90deg);
    }
    /* Accordion headers: keep white text (no default blue link / focus ring). */
    .fwp-admin-wrap a.fwp-bound-toggle,
    .fwp-admin-wrap a.fwp-bound-toggle:focus,
    .fwp-admin-wrap a.fwp-bound-toggle:hover,
    .fwp-admin-wrap a.fwp-bound-toggle:active,
    .fwp-admin-wrap a.fwp-bound-toggle:visited {
        color: rgba(255, 255, 255, 0.96) !important;
        text-decoration: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    .fwp-admin-wrap a.fwp-bound-toggle strong {
        color: inherit !important;
        font-weight: 600;
    }
    .fwp-admin-wrap a.fwp-bound-toggle .text-muted {
        color: rgba(255, 255, 255, 0.5) !important;
    }
    /* Tab content must not overflow the box horizontally */
    .fwp-admin-wrap .fwp-tabs-box > .tab-content,
    .fwp-admin-wrap .fwp-tabs-box .tab-content {
        overflow-x: hidden;
        max-width: 100%;
    }
    .fwp-admin-wrap .fwp-tabs-box .box-body.table-responsive {
        overflow-x: auto;
    }
    /* Sub-tabs inside box headers (Apply queue / Audit logs / etc.) */
    .fwp-admin-wrap .nav-tabs.fwp-sub-tabs {
        border-bottom: none !important;
        margin-bottom: -1px;
    }
    .fwp-admin-wrap .nav-tabs.fwp-sub-tabs > li > a {
        color: rgba(255, 255, 255, 0.65) !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 2px solid transparent !important;
    }
    .fwp-admin-wrap .nav-tabs.fwp-sub-tabs > li > a:hover,
    .fwp-admin-wrap .nav-tabs.fwp-sub-tabs > li > a:focus {
        color: rgba(255, 255, 255, 0.90) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: none !important;
        border-bottom: 2px solid transparent !important;
        outline: none !important;
    }
    .fwp-admin-wrap .nav-tabs.fwp-sub-tabs > li.active > a,
    .fwp-admin-wrap .nav-tabs.fwp-sub-tabs > li.active > a:hover,
    .fwp-admin-wrap .nav-tabs.fwp-sub-tabs > li.active > a:focus {
        color: #fff !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 2px solid rgba(0, 172, 193, 0.85) !important;
    }
    /* Pagination footer: no white container leaking out of the box */
    .fwp-admin-wrap .box > .box-footer {
        background: transparent !important;
        border-top-color: rgba(255, 255, 255, 0.08) !important;
    }
    .fwp-admin-wrap .box > .box-footer .pagination {
        margin: 6px 0 0;
    }
    /* Filter rows: gaps + contain inputs (no overflow / flush fields). */
    .fwp-admin-wrap .fwp-filter-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 16px;
        align-items: flex-end;
        margin-bottom: 4px;
        max-width: 100%;
    }
    .fwp-admin-wrap .fwp-filter-cell {
        flex: 1 1 200px;
        min-width: 0;
        max-width: 100%;
    }
    .fwp-admin-wrap .fwp-filter-cell--grow {
        flex: 2 1 260px;
    }
    .fwp-admin-wrap .fwp-filter-cell .form-control {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .fwp-admin-wrap .fwp-filter-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        margin-top: 12px;
    }
    .fwp-admin-wrap .fwp-tabs-box .box-header .fwp-sub-tabs {
        margin-bottom: -1px;
        border-bottom: none !important;
    }
    /* Help/muted text: make it visible without being full white */
    .fwp-admin-wrap .help-block,
    .fwp-admin-wrap .fwp-help-text {
        color: rgba(255, 255, 255, 0.72) !important;
    }
    .fwp-admin-wrap .text-muted,
    .fwp-admin-wrap small.text-muted {
        color: rgba(255, 255, 255, 0.60) !important;
    }
    /* Centered pagination across all admin FWP pages */
    .fwp-admin-wrap .box-footer .pagination,
    .fwp-admin-wrap .box-footer > nav {
        display: flex;
        justify-content: center;
        margin: 4px 0 0;
        float: none !important;
    }
    /* box-footer inside tab-panes (not direct .box children): same transparent treatment */
    .fwp-admin-wrap .fwp-tabs-box .tab-pane .box-footer,
    .fwp-admin-wrap .fwp-tabs-box .tab-pane .box > .box-footer {
        background: transparent !important;
        border-top-color: rgba(255, 255, 255, 0.08) !important;
    }
    /* Override transparency/blur from third-party themes on all Firewall-Plus containers */
    .fwp-admin-wrap *,
    .fwp-admin-wrap .bg-gray-600,
    .fwp-admin-wrap .bg-gray-700,
    .fwp-admin-wrap .bg-neutral-700,
    .fwp-admin-wrap [class*="Modal__"],
    .fwp-admin-wrap [class*="Dialog"] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* Ensure dialog/modal panels have solid backgrounds */
    .fwp-admin-wrap [role="dialog"] > div:not([class*="inset-0"]):not([class*="fixed"]) {
        background-color: var(--pageSecondary, hsl(209, 20%, 25%)) !important;
    }
    /* Override any transparent bg-* classes inside Firewall-Plus */
    .fwp-admin-wrap .bg-gray-600:not([class*="transparent"]),
    .fwp-admin-wrap .bg-gray-700:not([class*="transparent"]),
    .fwp-admin-wrap .bg-neutral-600:not([class*="transparent"]),
    .fwp-admin-wrap .bg-neutral-700:not([class*="transparent"]) {
        background-color: var(--pageSecondary, hsl(209, 20%, 25%)) !important;
    }
</style>
    <div class="fwp-admin-wrap">
        @include('admin.firewallplus.partials.nav-tabs', ['active' => $fwpTab ?? 'nodes'])
        @yield('fwp')
    </div>
@endsection