/* SWP Online - Tema panel admin BIRU (redesign 2026-09-26, pengganti tema kuning-hitam).
   File statis: tidak butuh npm build. Berlaku untuk SEMUA halaman admin. */

:root {
    --swp-navy: #062463;
    --swp-blue-800: #0A3386;
    --swp-blue-700: #0B47B5;
    --swp-blue-600: #1565E0;
    --swp-blue-500: #1E88F5;
    --swp-sky: #38BDF8;
    --swp-bg: #EEF4FB;
    --swp-card-border: #DCE7F5;
}

body.fi-body { background-color: var(--swp-bg) !important; }

/* ---------- Sidebar biru ---------- */
.fi-sidebar.fi-main-sidebar {
    background: linear-gradient(180deg, #0B3C9C 0%, #0A2F7D 45%, #071F57 100%) !important;
    border-right: 0 !important;
}
.fi-sidebar-nav { background: transparent !important; padding-top: .5rem !important; }
.fi-sidebar-header { background: transparent !important; }

.fi-sidebar-item-btn {
    color: #E2E8F0 !important;
    border-radius: 10px !important;
    padding-block: .65rem !important;
    transition: background-color .15s;
}
.fi-sidebar-item-btn .fi-sidebar-item-label { color: #E2E8F0 !important; font-size: .95rem; font-weight: 500; }
.fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item-btn .fi-icon { color: #CBD5E1 !important; }
.fi-sidebar-item-btn:hover { background-color: rgba(255, 255, 255, 0.08) !important; }

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(90deg, var(--swp-blue-500), var(--swp-blue-600)) !important;
    box-shadow: 0 6px 18px rgba(30, 136, 245, 0.45);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon { color: #fff !important; font-weight: 600; }

.fi-sidebar-group-label,
.fi-sidebar-group-btn { color: #E2E8F0 !important; }
.fi-sidebar-group-btn .fi-icon,
.fi-sidebar-group-collapse-btn,
.fi-sidebar-group-collapse-btn .fi-icon { color: #CBD5E1 !important; }
.fi-sidebar-nav-groups > li + li,
.fi-sidebar-group:not(:first-child) { border-top: 0; }

/* Logo AQUA di atas sidebar (render hook SIDEBAR_START) */
.swp-sb-logo {
    margin: 0 0 .75rem; padding: 1.1rem 1rem .9rem;
    background: #fff; border-bottom-right-radius: 38px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    display: flex; align-items: center; justify-content: center;
}
.swp-sb-logo img { width: 150px; height: auto; display: block; }

/* Hiasan bawah sidebar (render hook SIDEBAR_FOOTER) */
.swp-sb-foot {
    position: relative; padding: 1.25rem 1.25rem 1.5rem; overflow: hidden;
    display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem;
}
.swp-sb-foot::before {
    content: ""; position: absolute; left: -30%; right: -30%; bottom: -40px; height: 120px;
    background: radial-gradient(ellipse at 30% 100%, rgba(56, 189, 248, 0.45), transparent 60%),
                radial-gradient(ellipse at 80% 100%, rgba(30, 136, 245, 0.35), transparent 65%);
    pointer-events: none;
}
.swp-sb-foot svg.swp-drop { position: relative; width: 44px !important; height: 56px !important; filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.7)); }
.swp-sb-foot p {
    position: relative; margin: 0; text-align: right; line-height: 1.15;
    font-size: .95rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: rgba(191, 219, 254, 0.55);
}

/* ---------- Topbar biru ---------- */
.fi-topbar-ctn { box-shadow: none !important; }
.fi-topbar {
    background: linear-gradient(90deg, var(--swp-blue-800) 0%, var(--swp-blue-700) 55%, #0E57D0 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    min-height: 4.25rem;
}
.fi-topbar .fi-logo { color: #fff !important; }
.fi-topbar .fi-icon-btn, .fi-topbar .fi-icon-btn .fi-icon { color: #fff !important; }

/* Brand teks di topbar (render hook TOPBAR_LOGO_AFTER) */
.swp-tb-brand { display: flex; align-items: center; gap: .7rem; margin-inline-start: .25rem; }
.swp-tb-brand svg { width: 34px !important; height: 34px !important; flex-shrink: 0; }
.swp-tb-brand b { display: block; color: #fff; font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.swp-tb-brand small { display: block; color: #DBEAFE; font-size: .75rem; }

/* Pencarian global: kotak putih membulat */
.fi-topbar .fi-global-search .fi-input-wrp {
    background: rgba(255, 255, 255, 0.95) !important; border-radius: 10px !important;
    --tw-ring-shadow: 0 0 #0000 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    min-width: 0;
}

/* Nama & peran admin di samping avatar (render hook USER_MENU_BEFORE) */
.swp-tb-user { text-align: right; line-height: 1.15; margin-inline-end: .6rem; }
.swp-tb-user b { display: block; color: #fff; font-size: .95rem; font-weight: 700; }
.swp-tb-user small { display: block; color: #DBEAFE; font-size: .75rem; }
.fi-topbar .fi-user-menu .fi-avatar { width: 2.6rem !important; height: 2.6rem !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); }

/* Layar besar: sidebar penuh setinggi layar (logo di pojok kiri atas), topbar di kanannya */
@media (min-width: 1024px) {
    .fi-sidebar.fi-main-sidebar {
        position: fixed !important; top: 0 !important; left: 0; height: 100vh !important; z-index: 31;
        display: flex; flex-direction: column;
    }
    .fi-sidebar.fi-main-sidebar .fi-sidebar-nav { flex: 1 1 auto; overflow-y: auto; }
    /* Pembungkus sidebar tetap memakan lebar sidebar (sidebar-nya sendiri fixed) */
    .fi-layout > div:has(> .fi-main-sidebar.fi-sidebar-open) { width: var(--sidebar-width); flex-shrink: 0; }
    .fi-topbar-ctn { padding-inline-start: var(--sidebar-width); }
    .fi-topbar .fi-topbar-start > a:not(.swp-tb-brand) { display: none; }
    .fi-topbar .fi-global-search .fi-input-wrp { min-width: 20rem; }
}
@media (max-width: 1023.98px) {
    .swp-sb-logo, .swp-tb-user { display: none; }
    .swp-tb-brand small { display: none; }
    .swp-tb-brand b { font-size: 1.1rem; }
}

/* ---------- Konten: kartu putih lembut ---------- */
.fi-section {
    background: #fff !important;
    border: 1px solid var(--swp-card-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(15, 50, 110, 0.06) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}
.fi-header-heading { color: #0B2A5B !important; font-weight: 800 !important; }

.fi-ta-ctn {
    border-radius: 14px !important;
    border: 1px solid var(--swp-card-border) !important;
    box-shadow: 0 6px 20px rgba(15, 50, 110, 0.06) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}
.fi-ta-header-cell { background-color: #EAF2FD !important; }
.fi-ta-header-cell-label { color: #1E4FA8 !important; font-weight: 700 !important; }

/* Pil status di tabel admin (formatStateUsing memakai class Tailwind yang tidak ada di CSS panel) */
.fi-ta span.rounded-full { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .65rem; border-radius: 9999px; font-size: .72rem; font-weight: 600; border: 1px solid transparent; }
.fi-ta span.bg-amber-50 { background: #FEF3C7; color: #B45309; border-color: #FCD34D; }
.fi-ta span.bg-red-50 { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
.fi-ta span.bg-rose-50 { background: #FFE4E6; color: #BE123C; border-color: #FDA4AF; }
.fi-ta span.bg-emerald-50, .fi-ta span.bg-green-50 { background: #D1FAE5; color: #047857; border-color: #6EE7B7; }
.fi-ta span.bg-teal-50 { background: #CCFBF1; color: #0F766E; border-color: #5EEAD4; }
.fi-ta span.bg-blue-50 { background: #DBEAFE; color: #1D4ED8; border-color: #93C5FD; }
.fi-ta span.bg-zinc-50, .fi-ta span.bg-zinc-100 { background: #F4F4F5; color: #52525B; border-color: #D4D4D8; }
.fi-ta span.text-amber-600 { color: #D97706; font-size: .72rem; font-weight: 700; margin-top: .25rem; }