/*
|--------------------------------------------------------------------------
| Admin Theme - Pemerintah Desa Sepakung
|--------------------------------------------------------------------------
| Filament 3.3.x visual overrides.
| Presentation only: tidak mengubah logic, route, CRUD, atau RBAC.
|--------------------------------------------------------------------------
*/

:root {
    --sepakung-bg: #f8fafc;
    --sepakung-surface: #ffffff;
    --sepakung-sidebar: #f8fafc;
    --sepakung-border: #e2e8f0;
    --sepakung-border-soft: #edf2f7;
    --sepakung-text: #0f172a;
    --sepakung-muted: #64748b;
    --sepakung-emerald: #059669;
    --sepakung-emerald-dark: #047857;
    --sepakung-emerald-soft: #ecfdf5;
}


/* ============================================================
   MAIN LAYOUT
   ============================================================ */

.fi-body {
    background: var(--sepakung-bg);
}

.fi-main {
    background: var(--sepakung-bg);
}


/* ============================================================
   TOPBAR
   ============================================================ */

.fi-topbar nav {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--sepakung-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
    backdrop-filter: blur(10px);
}

.fi-logo {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sepakung-text);
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.fi-sidebar {
    background: var(--sepakung-sidebar);
    border-right: 1px solid var(--sepakung-border);
}

.fi-sidebar-header {
    background: var(--sepakung-surface);
    border-bottom: 1px solid var(--sepakung-border-soft);
    box-shadow: none;
}

.fi-sidebar-nav {
    padding-top: 1rem;
}

.fi-sidebar-group-label {
    color: var(--sepakung-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.035em;
}

.fi-sidebar-item-button {
    border-radius: 0.7rem;
    transition:
        background-color 150ms ease,
        color 150ms ease,
        box-shadow 150ms ease;
}

.fi-sidebar-item-button:hover {
    background: #f1f5f9;
}

.fi-sidebar-item-active > .fi-sidebar-item-button {
    background: var(--sepakung-emerald-soft);
    color: var(--sepakung-emerald-dark);
    box-shadow: inset 3px 0 0 var(--sepakung-emerald);
}

.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: var(--sepakung-emerald);
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    color: var(--sepakung-emerald-dark);
    font-weight: 700;
}


/* ============================================================
   PAGE HEADER
   ============================================================ */

.fi-header-heading {
    color: var(--sepakung-text);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.fi-header-subheading {
    color: var(--sepakung-muted);
}


/* ============================================================
   GENERIC CARDS / SECTIONS
   ============================================================ */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border: 1px solid var(--sepakung-border);
    border-radius: 1rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.025),
        0 4px 14px rgba(15, 23, 42, 0.025);
}

.fi-section {
    overflow: hidden;
}

.fi-wi-stats-overview-stat {
    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        border-color 150ms ease;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-1px);
    border-color: #cbd5e1;
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.035),
        0 8px 22px rgba(15, 23, 42, 0.045);
}


/* ============================================================
   TABLES
   ============================================================ */

.fi-ta-ctn {
    overflow: hidden;
    background: var(--sepakung-surface);
}

.fi-ta-header {
    border-bottom-color: var(--sepakung-border);
}

.fi-ta-header-cell {
    background: #f8fafc;
}

.fi-ta-header-cell-label {
    color: #334155;
    font-weight: 700;
}

.fi-ta-row {
    transition: background-color 120ms ease;
}

.fi-ta-row:hover {
    background: #f8fafc;
}


/* ============================================================
   FORMS
   ============================================================ */

.fi-input-wrp {
    border-radius: 0.75rem;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}

.fi-input-wrp:focus-within {
    box-shadow:
        0 0 0 1px rgba(5, 150, 105, 0.20),
        0 0 0 3px rgba(5, 150, 105, 0.08);
}


/* ============================================================
   BUTTONS
   ============================================================ */

.fi-btn {
    border-radius: 0.7rem;
    font-weight: 650;
}


/* ============================================================
   BADGES
   ============================================================ */

.fi-badge {
    border-radius: 9999px;
    font-weight: 650;
}


/* ============================================================
   BREADCRUMBS
   ============================================================ */

.fi-breadcrumbs-item-label {
    color: var(--sepakung-muted);
}


/* ============================================================
   DARK MODE
   ============================================================ */

.dark {
    --sepakung-bg: #0f172a;
    --sepakung-surface: #111827;
    --sepakung-sidebar: #111827;
    --sepakung-border: #263244;
    --sepakung-border-soft: #1f2937;
    --sepakung-text: #f8fafc;
    --sepakung-muted: #94a3b8;
    --sepakung-emerald-soft: rgba(5, 150, 105, 0.14);
}

.dark .fi-body,
.dark .fi-main {
    background: var(--sepakung-bg);
}

.dark .fi-sidebar,
.dark .fi-sidebar-header {
    background: var(--sepakung-sidebar);
}

.dark .fi-topbar nav {
    background: rgba(17, 24, 39, 0.96);
    border-bottom-color: var(--sepakung-border);
}

.dark .fi-sidebar-item-button:hover {
    background: rgba(51, 65, 85, 0.55);
}

.dark .fi-ta-header-cell,
.dark .fi-ta-row:hover {
    background: rgba(30, 41, 59, 0.55);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .fi-sidebar-item-button {
        border-radius: 0.65rem;
    }
}

@media (max-width: 640px) {
    .fi-section,
    .fi-ta-ctn,
    .fi-wi-stats-overview-stat {
        border-radius: 0.85rem;
    }
}


/* ============================================================
   STAGE 3E - INSTITUTIONAL UI FINE TUNING
   ============================================================ */

:root {
    --sp-navy-950: #08111f;
    --sp-navy-900: #0f172a;
    --sp-navy-800: #1e293b;
    --sp-slate-300: #cbd5e1;
    --sp-slate-400: #94a3b8;
    --sp-emerald-500: #10b981;
    --sp-emerald-600: #059669;
}


/* ------------------------------------------------------------
   SIDEBAR - institutional navy
   ------------------------------------------------------------ */

.fi-sidebar {
    background:
        linear-gradient(
            180deg,
            var(--sp-navy-900) 0%,
            #111827 100%
        ) !important;
    border-right: 1px solid var(--sp-navy-800) !important;
}

.fi-sidebar-header {
    position: relative;
    background: var(--sp-navy-900) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
    box-shadow: none !important;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.fi-sidebar-header::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            var(--sp-emerald-500),
            rgba(16, 185, 129, 0)
        );
}

.fi-sidebar-header .fi-logo {
    color: #f8fafc !important;
    line-height: 1.15;
}

.fi-sidebar-header .fi-logo::after {
    content: "Sistem Informasi & Pelayanan Desa";
    display: block;
    margin-top: 0.28rem;
    color: var(--sp-slate-400);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.fi-sidebar-nav {
    background: transparent !important;
}

.fi-sidebar-group-label {
    color: var(--sp-slate-400) !important;
    font-size: 0.67rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.055em !important;
}

.fi-sidebar-group-button {
    color: var(--sp-slate-400) !important;
}

.fi-sidebar-item-button {
    color: var(--sp-slate-300) !important;
    border: 1px solid transparent;
}

.fi-sidebar-item-label {
    color: inherit !important;
}

.fi-sidebar-item-icon {
    color: var(--sp-slate-400) !important;
}

.fi-sidebar-item-button:hover {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(148, 163, 184, 0.08);
    color: #f8fafc !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #e2e8f0 !important;
}


/* Active menu */

.fi-sidebar-item-active > .fi-sidebar-item-button {
    background:
        linear-gradient(
            90deg,
            rgba(16, 185, 129, 0.20),
            rgba(16, 185, 129, 0.08)
        ) !important;
    border-color: rgba(52, 211, 153, 0.18);
    box-shadow:
        inset 3px 0 0 var(--sp-emerald-500) !important;
    color: #ecfdf5 !important;
}

.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #34d399 !important;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    color: #f0fdf4 !important;
    font-weight: 700 !important;
}


/* Sidebar badges */

.fi-sidebar .fi-badge {
    border: 1px solid rgba(52, 211, 153, 0.20);
    background: rgba(16, 185, 129, 0.12) !important;
    color: #6ee7b7 !important;
}


/* ------------------------------------------------------------
   TOPBAR
   ------------------------------------------------------------ */

.fi-topbar nav {
    min-height: 4rem;
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.025),
        0 4px 14px rgba(15, 23, 42, 0.025) !important;
}


/* ------------------------------------------------------------
   MAIN AREA
   ------------------------------------------------------------ */

.fi-body,
.fi-main {
    background: #f4f7fb !important;
}

.fi-header-heading {
    color: #0f172a !important;
}


/* ------------------------------------------------------------
   KPI / STATS
   ------------------------------------------------------------ */

.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1rem !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.025),
        0 6px 20px rgba(15, 23, 42, 0.035) !important;
}

.fi-wi-stats-overview-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            var(--sp-emerald-600),
            #14b8a6
        );
    opacity: 0.85;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1 !important;
    box-shadow:
        0 4px 8px rgba(15, 23, 42, 0.035),
        0 12px 28px rgba(15, 23, 42, 0.055) !important;
}


/* ------------------------------------------------------------
   TABLES / SECTIONS
   ------------------------------------------------------------ */

.fi-ta-ctn,
.fi-section {
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1rem !important;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.02),
        0 6px 20px rgba(15, 23, 42, 0.03) !important;
}

.fi-ta-header {
    background: #ffffff;
}

.fi-ta-header-cell {
    background: #f8fafc !important;
}

.fi-ta-header-cell-label {
    color: #334155 !important;
    font-weight: 750 !important;
}

.fi-ta-row:hover {
    background: #f8fafc !important;
}


/* ------------------------------------------------------------
   INPUTS / BUTTONS
   ------------------------------------------------------------ */

.fi-input-wrp {
    border-radius: 0.75rem !important;
}

.fi-btn {
    border-radius: 0.72rem !important;
}


/* ------------------------------------------------------------
   DARK MODE
   ------------------------------------------------------------ */

.dark .fi-sidebar,
.dark .fi-sidebar-header {
    background: var(--sp-navy-950) !important;
}

.dark .fi-body,
.dark .fi-main {
    background: #090f1a !important;
}

.dark .fi-topbar nav {
    background: rgba(15, 23, 42, 0.97) !important;
    border-bottom-color: #263244 !important;
}

.dark .fi-wi-stats-overview-stat,
.dark .fi-ta-ctn,
.dark .fi-section {
    background: #111827;
    border-color: #263244 !important;
}

.dark .fi-ta-header-cell,
.dark .fi-ta-row:hover {
    background: rgba(30, 41, 59, 0.58) !important;
}


/* ============================================================
   STAGE 3F - FINAL SIDEBAR POLISH
   ============================================================ */

/*
 * Brand dibuat sebagai blok vertikal:
 *
 * Pemerintah Desa Sepakung
 * Sistem Informasi & Pelayanan Desa
 */
.fi-sidebar-header .fi-logo {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0.22rem !important;

    width: 100% !important;
    max-width: none !important;

    color: #f8fafc !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
    white-space: normal !important;
}

.fi-sidebar-header .fi-logo::after {
    content: "Sistem Informasi & Pelayanan Desa";
    display: block !important;

    margin: 0 !important;

    color: #94a3b8 !important;
    font-size: 0.63rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.035em !important;
}


/* ============================================================
   STAGE 3G - DASHBOARD TOP AREA
   ============================================================ */

/*
 * Topbar Filament tetap dipertahankan untuk user menu,
 * mobile navigation dan fungsi internal.
 * Pada desktop dibuat lebih compact agar tidak menjadi
 * ruang putih kosong yang terlalu dominan.
 */
@media (min-width: 1024px) {
    .fi-topbar nav {
        min-height: 3.35rem !important;
    }

    .fi-main {
        padding-top: 1.55rem !important;
    }
}


/* Page heading */
.fi-header-heading {
    line-height: 1.15 !important;
}

.fi-header-subheading {
    max-width: 48rem;
    margin-top: 0.3rem;
    color: #64748b !important;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
}


/* Header dashboard dibuat lebih compact */
.fi-header {
    row-gap: 0.25rem !important;
}


/* Mobile tetap diberi ruang yang cukup */
@media (max-width: 1023px) {
    .fi-header-subheading {
        max-width: 100%;
    }
}


/* Dark mode */
.dark .fi-header-subheading {
    color: #94a3b8 !important;
}


/* ============================================================
   STAGE 3G-H - NATIVE TOPBAR CONTEXT
   ============================================================ */

.sp-topbar-context {
    display: none;
}

@media (min-width: 1024px) {

    /*
     * Filament memakai utility h-16.
     * Jadi harus override HEIGHT, bukan min-height.
     */
    .fi-topbar nav {
        height: 3.65rem !important;
        min-height: 3.65rem !important;
    }

    .sp-topbar-context {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        min-width: 0;
    }

    .sp-topbar-context-mark {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 2rem;
        height: 2rem;
        flex: 0 0 2rem;

        border-radius: 0.65rem;

        background:
            linear-gradient(
                135deg,
                #059669,
                #047857
            );

        color: #ffffff;
        font-size: 0.8rem;
        font-weight: 900;

        box-shadow:
            0 3px 8px rgba(5, 150, 105, 0.18);
    }

    .sp-topbar-context-copy {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.15;
    }

    .sp-topbar-context-title {
        color: #0f172a;
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        white-space: nowrap;
    }

    .sp-topbar-context-subtitle {
        margin-top: 0.18rem;

        color: #64748b;
        font-size: 0.65rem;
        font-weight: 600;
        white-space: nowrap;
    }

    /*
     * Stage 3G sebelumnya menambah padding atas.
     * Kita rapatkan kembali.
     */
    .fi-main {
        padding-top: 1.15rem !important;
    }
}


/* Dark mode */

.dark .sp-topbar-context-title {
    color: #f8fafc;
}

.dark .sp-topbar-context-subtitle {
    color: #94a3b8;
}