/* ===========================================================================
   Money-Wise admin theme — brand the Filament panel to match the front end.
   Loaded via a render hook (see AdminPanelProvider). Plain CSS (no @layer) so
   it wins over Filament's layered defaults. Brand: navy + sky on Sora/Jakarta.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    --mw-navy-950: #0d142e;
    --mw-navy-900: #15204a;
    --mw-navy-800: #1c2b5f;
    --mw-navy-700: #28366a;
    --mw-navy-300: #91a4d6;
    --mw-navy-200: #b9c6e7;
    --mw-wise-400: #58b9e6;
    --mw-wise-300: #8ed4f2;
}

/* ---- Base typography ---------------------------------------------------- */
.fi-body,
.fi-simple-layout,
.mw-auth {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}
.fi-header-heading,
.fi-section-header-heading,
.fi-wi-stats-overview-stat-value,
.fi-modal-heading,
.fi-ta-header-heading,
.fi-fo-field-wrp-label {
    font-family: 'Sora', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}
.fi-header-heading {
    color: var(--mw-navy-900);
    font-weight: 800;
    letter-spacing: -0.025em;
}

/* ---- Sidebar (dark navy chrome) ----------------------------------------- */
.fi-sidebar,
.fi-sidebar-nav {
    background: linear-gradient(185deg, #0d142e 0%, #15204a 60%, #1a2657 100%) !important;
    border-right: 0 !important;
}
.fi-sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}
.fi-sidebar .fi-logo {
    color: #fff !important;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
}
/* nav items */
.fi-sidebar .fi-sidebar-item-btn {
    border-radius: 0.7rem;
    transition: background 0.18s ease, color 0.18s ease;
}
.fi-sidebar .fi-sidebar-item-label {
    color: var(--mw-navy-200);
    font-weight: 600;
}
.fi-sidebar .fi-sidebar-item-icon {
    color: #6a82c4;
}
.fi-sidebar .fi-sidebar-item-btn:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}
.fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
    color: #fff;
}
.fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: var(--mw-wise-300);
}
/* active item */
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: linear-gradient(90deg, rgba(88, 185, 230, 0.22), rgba(88, 185, 230, 0.04)) !important;
    box-shadow: inset 3px 0 0 0 var(--mw-wise-400);
}
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #fff;
    font-weight: 700;
}
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--mw-wise-400);
}
/* group labels */
.fi-sidebar .fi-sidebar-group-label {
    color: #5d6fa8 !important;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.66rem;
    font-weight: 700;
}
/* collapse / sidebar buttons */
.fi-sidebar .fi-icon-btn { color: var(--mw-navy-200); }

/* ---- Topbar (dark navy chrome) ------------------------------------------ */
.fi-topbar > nav,
.fi-topbar {
    background: rgba(13, 20, 46, 0.92) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}
.fi-topbar .fi-icon-btn,
.fi-topbar .fi-topbar-item-icon,
.fi-topbar .fi-dropdown-trigger .fi-icon-btn {
    color: var(--mw-navy-200) !important;
}
.fi-topbar .fi-dropdown-trigger span,
.fi-topbar .fi-user-menu-trigger span {
    color: #eef1f9 !important;
}
.fi-topbar .fi-input,
.fi-topbar .fi-global-search-field .fi-input {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* ---- Main content surface ----------------------------------------------- */
.fi-main {
    background-color: #f5f8fe;
    background-image:
        linear-gradient(rgba(245, 248, 254, 0.965), rgba(245, 248, 254, 0.965)),
        url('/images/pattern-kitenge.svg');
    background-size: auto, 380px;
    background-attachment: fixed, fixed;
}

/* ---- Cards / sections --------------------------------------------------- */
.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-fo-component-ctn > .fi-section {
    border-radius: 1.25rem !important;
    border: 1px solid rgba(28, 43, 95, 0.07) !important;
    box-shadow: 0 14px 36px -22px rgba(13, 20, 46, 0.35) !important;
}

/* ---- Stat widgets ------------------------------------------------------- */
.fi-wi-stats-overview-stat {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 48px -22px rgba(13, 20, 46, 0.4) !important;
}
.fi-wi-stats-overview-stat-value {
    font-weight: 800;
    color: var(--mw-navy-900);
    letter-spacing: -0.02em;
}
.fi-wi-stats-overview-stat-label {
    font-weight: 600;
    color: #4b64ac;
}

/* ---- Buttons ------------------------------------------------------------ */
.fi-btn {
    border-radius: 0.7rem;
    font-weight: 700;
}
.fi-btn.fi-color-primary {
    --tw-bg-opacity: 1;
    background-color: var(--mw-navy-800);
}
.fi-btn.fi-color-primary:hover {
    background-color: var(--mw-navy-700);
}

/* ---- Tables ------------------------------------------------------------- */
.fi-ta-header-heading {
    color: var(--mw-navy-900);
    font-weight: 800;
}
.fi-ta-row:hover {
    background-color: rgba(88, 185, 230, 0.05) !important;
}

/* ---- Misc --------------------------------------------------------------- */
.fi-badge.fi-color-primary {
    color: var(--mw-navy-800);
}
.fi-link.fi-color-primary,
a.fi-link {
    color: #2787b8;
}
