/* ==========================================================================
   SATRIA KOPERASI - Modern SaaS Design System & Micro-Animations
   Executive TNI AD Cooperative UI Enhancements (2026 Standard)
   ========================================================================== */

/* 1. Global Typography, Canvas & Clean Base */
body,
.fi-body,
.fi-panel,
html {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Modern background canvas with subtle Linear/Vercel dot matrix mesh texture */
.fi-main,
.fi-layout {
    background-color: #f8fafc !important;
    background-image:
        radial-gradient(at 100% 0%, rgba(16, 185, 129, 0.05) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(59, 130, 246, 0.035) 0px, transparent 50%),
        radial-gradient(rgba(148, 163, 184, 0.15) 1px, transparent 1px) !important;
    background-size: 100% 100%, 100% 100%, 28px 28px !important;
}

.dark .fi-main,
.dark .fi-layout {
    background-color: #0b130e !important;
    background-image:
        radial-gradient(at 100% 0%, rgba(16, 185, 129, 0.08) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(30, 58, 43, 0.25) 0px, transparent 50%),
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
    background-size: 100% 100%, 100% 100%, 28px 28px !important;
}

/* Subtle modern scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(22, 163, 74, 0.25);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(22, 163, 74, 0.5);
}

/* 2. Glassmorphism for Topbar & Modern Header */
.fi-topbar {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 1px 2px -1px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s ease;
}

.dark .fi-topbar {
    background: rgba(13, 22, 17, 0.88) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

/* ==========================================================================
   Topbar Global Search & Table Search - Animated Gradient Border & Polish
   ========================================================================== */

@keyframes searchGradientRotate {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Global Search Container */
.fi-global-search {
    position: relative;
}

.fi-global-search-field {
    position: relative;
    width: 100%;
}

/* Outer Wrapper (Pill Shape with Relative Context for Pseudo-border) */
.fi-global-search-field .fi-input-wrp,
.fi-ta-search-field .fi-input-wrp {
    position: relative !important;
    border-radius: 9999px !important;
    background-color: rgba(241, 245, 249, 0.85) !important;
    border: 1.5px solid rgba(203, 213, 225, 0.8) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: visible !important;
}

.dark .fi-global-search-field .fi-input-wrp,
.dark .fi-ta-search-field .fi-input-wrp {
    background-color: rgba(22, 33, 25, 0.75) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}

/* Animated Gradient Border Pseudo-element (Inactive state) */
.fi-global-search-field .fi-input-wrp::before,
.fi-ta-search-field .fi-input-wrp::before {
    content: '' !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: 9999px !important;
    padding: 2px !important;
    background: linear-gradient(135deg, #15803d, #22c55e, #10b981, #eab308, #22c55e, #15803d) !important;
    background-size: 300% 300% !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease, filter 0.35s ease !important;
    z-index: 1 !important;
}

/* Active / Focus State - Trigger Animated Gradient Border & Glow */
.fi-global-search-field .fi-input-wrp:focus-within,
.fi-ta-search-field .fi-input-wrp:focus-within {
    background-color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 20px -2px rgba(22, 163, 74, 0.25), 0 0 0 1px rgba(22, 163, 74, 0.15) !important;
    transform: translateY(-1px) !important;
}

.fi-global-search-field .fi-input-wrp:focus-within::before,
.fi-ta-search-field .fi-input-wrp:focus-within::before {
    opacity: 1 !important;
    animation: searchGradientRotate 3.5s linear infinite !important;
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.45)) !important;
}

/* Dark Mode Active State */
.dark .fi-global-search-field .fi-input-wrp:focus-within,
.dark .fi-ta-search-field .fi-input-wrp:focus-within {
    background-color: rgba(14, 24, 17, 0.95) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 24px -2px rgba(34, 197, 94, 0.35), 0 0 0 1px rgba(74, 222, 128, 0.25) !important;
}

.dark .fi-global-search-field .fi-input-wrp::before,
.dark .fi-ta-search-field .fi-input-wrp::before {
    background: linear-gradient(135deg, #16a34a, #4ade80, #34d399, #fbbf24, #4ade80, #16a34a) !important;
    background-size: 300% 300% !important;
}

.dark .fi-global-search-field .fi-input-wrp:focus-within::before,
.dark .fi-ta-search-field .fi-input-wrp:focus-within::before {
    filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.55)) !important;
}

/* Fix Inner Input - Reset all conflicting styles to eliminate double borders */
.fi-global-search-field input,
.fi-global-search-field .fi-input,
.fi-ta-search-field input,
.fi-ta-search-field .fi-input {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0.875rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    color: #1e293b !important;
    transform: none !important;
    translate: none !important;
}

.dark .fi-global-search-field input,
.dark .fi-global-search-field .fi-input,
.dark .fi-ta-search-field input,
.dark .fi-ta-search-field .fi-input {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #f1f5f9 !important;
}

.fi-global-search-field input:focus,
.fi-global-search-field .fi-input:focus,
.fi-ta-search-field input:focus,
.fi-ta-search-field .fi-input:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    translate: none !important;
}

/* Icon & Suffix Shortcut Styling */
.fi-global-search-field .fi-input-wrp-prefix svg,
.fi-ta-search-field .fi-input-wrp-prefix svg {
    color: #64748b !important;
    transition: color 0.25s ease, transform 0.25s ease !important;
}

.fi-global-search-field .fi-input-wrp:focus-within .fi-input-wrp-prefix svg,
.fi-ta-search-field .fi-input-wrp:focus-within .fi-input-wrp-prefix svg {
    color: #16a34a !important;
    transform: scale(1.1) !important;
}

.dark .fi-global-search-field .fi-input-wrp:focus-within .fi-input-wrp-prefix svg,
.dark .fi-ta-search-field .fi-input-wrp:focus-within .fi-input-wrp-prefix svg {
    color: #4ade80 !important;
}

.fi-global-search-field kbd,
.fi-global-search-field .fi-input-wrp-suffix {
    border-radius: 0.375rem !important;
    font-weight: 600 !important;
    font-size: 0.725rem !important;
    letter-spacing: 0.025em !important;
    transition: all 0.25s ease !important;
}

/* Topbar Notification & Action Icon Animations */
@keyframes bellSway {
    0% {
        rotate: 0deg;
    }

    20% {
        rotate: 14deg;
    }

    40% {
        rotate: -12deg;
    }

    60% {
        rotate: 8deg;
    }

    80% {
        rotate: -4deg;
    }

    100% {
        rotate: 0deg;
    }
}

.fi-topbar-database-notifications-btn,
.fi-topbar-database-notifications-btn button {
    translate: 0 0;
    scale: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fi-topbar-database-notifications-btn:hover button,
.fi-topbar-database-notifications-btn:hover svg {
    animation: bellSway 0.6s ease-in-out;
    color: #16a34a !important;
}

/* Topbar User Menu Trigger Micro-Interaction */
.fi-user-menu-trigger {
    translate: 0 0;
    scale: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 0.65rem !important;
    padding: 0.25rem 0.45rem !important;
}

.fi-user-menu-trigger:hover {
    translate: 0 -1px;
    background-color: rgba(22, 163, 74, 0.08) !important;
}

.dark .fi-user-menu-trigger:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* 3. SIDEBAR NAVIGATION - PRESTIGE TACTICAL EMERALD (2026 STANDARD) */
.fi-sidebar {
    background: #ffffff !important;
    border-right: 1px solid rgba(226, 232, 240, 0.85) !important;
}

.dark .fi-sidebar {
    background: #0d1611 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   BRAND HEADER LOGO - PRESTIGE MILITARY EMBLEM & TYPOGRAPHY
   ========================================================================== */

.satria-brand-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.2rem 0.25rem;
    text-decoration: none !important;
}

.satria-brand-emblem {
    width: 2.45rem;
    height: 2.45rem;
    min-width: 2.45rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #14532d 0%, #0d2e18 100%);
    border: 1.5px solid rgba(74, 222, 128, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    box-shadow: 0 4px 12px rgba(20, 83, 45, 0.35), 0 0 14px rgba(74, 222, 128, 0.2);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

.satria-brand-header:hover .satria-brand-emblem {
    transform: scale(1.08) rotate(3deg);
    box-shadow: 0 6px 18px rgba(20, 83, 45, 0.5), 0 0 20px rgba(74, 222, 128, 0.35);
}

.satria-brand-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.satria-brand-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.15;
}

.satria-brand-title-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.satria-brand-name {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.dark .satria-brand-name {
    color: #f8fafc;
}

.satria-brand-pill,
.satria-brand-badge-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    padding: 0.18rem 0.52rem !important;
    border-radius: 9999px !important;
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(74, 222, 128, 0.4) !important;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35) !important;
    vertical-align: middle !important;
}

.dark .satria-brand-pill,
.dark .satria-brand-badge-tag {
    background: linear-gradient(135deg, #14532d 0%, #166534 100%) !important;
    border-color: rgba(74, 222, 128, 0.5) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.satria-brand-desc {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #64748b;
    text-transform: uppercase;
}

.dark .satria-brand-desc {
    color: #94a3b8;
}

/* ==========================================================================
   SIDEBAR FOOTER - FROSTED EXECUTIVE BADGE
   ========================================================================== */

.satria-sidebar-footer {
    padding: 0.55rem 0.75rem;
    margin: 0.35rem 0.6rem 0.5rem;
    border: 1px solid rgba(226, 232, 240, 0.85);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 0.85rem;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: all 0.25s ease;
}

.dark .satria-sidebar-footer {
    background: rgba(15, 23, 19, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.satria-sidebar-footer:hover {
    border-color: rgba(16, 185, 129, 0.4);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08);
    translate: 0 -1.5px;
}

.satria-footer-expanded {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.satria-footer-header-row {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 0.15rem;
}

.satria-footer-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.satria-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: livePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.85);
    }
}

.satria-footer-badge-text {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #15803d;
}

.dark .satria-footer-badge-text {
    color: #86efac;
}

.satria-footer-tour-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: rgba(22, 163, 74, 0.1);
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-radius: 0.5rem;
    padding: 0.15rem 0.45rem;
    font-size: 0.6rem;
    font-weight: 700;
    color: #14532d;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dark .satria-footer-tour-btn {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.3);
    color: #86efac;
}

.satria-footer-tour-btn:hover {
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35);
    transform: scale(1.04);
}

.satria-footer-tour-icon {
    width: 0.75rem;
    height: 0.75rem;
}

.satria-footer-author {
    font-size: 0.68rem;
    color: #475569;
    font-weight: 500;
}

.dark .satria-footer-author {
    color: #94a3b8;
}

.satria-author-name {
    color: #0f172a;
    font-weight: 700;
}

.dark .satria-author-name {
    color: #f8fafc;
}

.satria-footer-unit {
    font-size: 0.58rem;
    color: #64748b;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.dark .satria-footer-unit {
    color: #94a3b8;
}

.satria-footer-mini-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.1rem;
}

.satria-footer-mini-btn span {
    font-size: 0.65rem;
    font-weight: 800;
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    padding: 0.15rem 0.4rem;
    border-radius: 0.45rem;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.fi-sidebar-item {
    margin-bottom: 0.25rem;
}

.fi-sidebar-item-btn {
    translate: 0 0;
    scale: 1;
    rotate: 0deg;
    border-radius: 0.75rem !important;
    position: relative;
    padding: 0.58rem 0.85rem !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Inactive Sidebar Item Hover: Smooth glide right & modern soft green tint */
.fi-sidebar-item-btn:hover {
    translate: 3px 0 !important;
    background-color: rgba(22, 163, 74, 0.075) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

.dark .fi-sidebar-item-btn:hover {
    background-color: rgba(74, 222, 128, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-label {
    color: #14532d !important;
    font-weight: 600 !important;
}

.dark .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
    color: #f0fdf4 !important;
}

.fi-sidebar-item-icon {
    scale: 1;
    rotate: 0deg;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    scale: 1.14 !important;
    color: #16a34a !important;
}

.dark .fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: #86efac !important;
}

/* ACTIVE SIDEBAR ITEM - LUXURIOUS MODERN FLOATING CAPSULE */
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn {
    background: linear-gradient(135deg, #1b4e2b 0%, #266b3c 100%) !important;
    border: 1px solid rgba(74, 222, 128, 0.3) !important;
    box-shadow: 0 4px 16px -2px rgba(27, 78, 43, 0.38), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
    border-radius: 0.85rem !important;
    translate: 0 0 !important;
}

/* Remove any awkward thick left block on the active button */
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn::before {
    display: none !important;
}

/* Active Item Label: Pure, crisp, bright white text */
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn>.fi-sidebar-item-label,
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    letter-spacing: -0.01em !important;
}

/* Active Item Icon: Luminous mint glow */
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn>.fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #86efac !important;
    filter: drop-shadow(0 0 6px rgba(134, 239, 172, 0.55));
    scale: 1.08 !important;
}

/* ==========================================================================
   SIDEBAR MENU BADGE STYLING - CRYSTAL CLEAR TEXT CONTRAST
   ========================================================================== */

.fi-sidebar-item-badge-ctn {
    display: inline-flex !important;
    align-items: center !important;
    margin-inline-start: auto !important;
}

.fi-sidebar-item-badge-ctn .fi-badge {
    border-radius: 9999px !important;
    padding: 0.14rem 0.55rem !important;
    min-width: 1.5rem !important;
    height: 1.35rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* 1. Badge on ACTIVE Sidebar Item: Crisp White Pill with Deep Dark Green Text */
.fi-sidebar-item.fi-active .fi-sidebar-item-badge-ctn .fi-badge {
    background-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-badge-ctn .fi-badge,
.fi-sidebar-item.fi-active .fi-sidebar-item-badge-ctn .fi-badge *,
.fi-sidebar-item.fi-active .fi-sidebar-item-badge-ctn .fi-badge .fi-badge-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-badge-ctn .fi-badge-label-ctn span {
    color: #14532d !important;
    -webkit-text-fill-color: #14532d !important;
    font-weight: 800 !important;
}

/* Warning badge on ACTIVE item */
.fi-sidebar-item.fi-active .fi-sidebar-item-badge-ctn .fi-badge[class*="fi-color-warning"],
.fi-sidebar-item.fi-active .fi-sidebar-item-badge-ctn .fi-badge[class*="fi-color-warning"] * {
    color: #92400e !important;
    -webkit-text-fill-color: #92400e !important;
}

/* 2. Badge on INACTIVE Sidebar Item: Soft colored pill with matching dark text */
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-badge-ctn .fi-badge {
    background-color: #dcfce7 !important;
    border: 1px solid #bbf7d0 !important;
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-badge-ctn .fi-badge,
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-badge-ctn .fi-badge *,
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-badge-ctn .fi-badge .fi-badge-label,
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-badge-ctn .fi-badge-label-ctn span {
    color: #15803d !important;
    -webkit-text-fill-color: #15803d !important;
    font-weight: 800 !important;
}

.dark .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-badge-ctn .fi-badge {
    background-color: rgba(6, 78, 59, 0.45) !important;
}

/* Warning badge on Inactive item (e.g. Pinjaman 3) */
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-badge-ctn .fi-badge[class*="fi-color-warning"] {
    background-color: #fef3c7 !important;
    border-color: #fde68a !important;
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-badge-ctn .fi-badge[class*="fi-color-warning"],
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-badge-ctn .fi-badge[class*="fi-color-warning"] * {
    color: #b45309 !important;
    -webkit-text-fill-color: #b45309 !important;
}

.dark .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-badge-ctn .fi-badge[class*="fi-color-warning"] {
    background-color: rgba(120, 53, 15, 0.45) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

.dark .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-badge-ctn .fi-badge[class*="fi-color-warning"],
.dark .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-badge-ctn .fi-badge[class*="fi-color-warning"] * {
    color: #fcd34d !important;
    -webkit-text-fill-color: #fcd34d !important;
}

/* Sidebar Group Header Modern Styling */
.fi-sidebar-group {
    margin-top: 0.6rem !important;
    margin-bottom: 0.25rem !important;
}

.fi-sidebar-group-btn {
    border-radius: 0.65rem !important;
    padding: 0.35rem 0.6rem !important;
    transition: all 0.2s ease !important;
}

.fi-sidebar-group-btn:hover {
    background-color: rgba(22, 163, 74, 0.06) !important;
}

.dark .fi-sidebar-group-btn:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.fi-sidebar-group-label {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
}

.dark .fi-sidebar-group-label {
    color: #94a3b8 !important;
}

.fi-sidebar-group-btn:hover .fi-sidebar-group-label {
    color: #16a34a !important;
}

/* Sidebar Group Sub-item Tree Lines */
.fi-sidebar-item-grouped-border {
    border-color: rgba(226, 232, 240, 0.85) !important;
}

.dark .fi-sidebar-item-grouped-border {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 4. BUTTONS & ACTIONS - MODERN EXECUTIVE TNI AD FINTECH */
.fi-btn {
    border-radius: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    position: relative;
    overflow: hidden;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fi-btn:not([disabled]):active {
    scale: 0.98 !important;
}

/* Primary Buttons - Modern Tactical Emerald Gradient */
.fi-btn-color-primary {
    background: linear-gradient(135deg, #1b4e2b 0%, #266b3c 100%) !important;
    border: none !important;
    box-shadow: 0 4px 12px -1px rgba(27, 78, 43, 0.32) !important;
    color: #ffffff !important;
}

.fi-btn-color-primary,
.fi-btn-color-primary *,
.fi-btn-color-primary .fi-btn-label,
.fi-btn-color-primary span,
.fi-btn-color-primary svg {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.fi-btn-color-primary:not([disabled]):hover {
    background: linear-gradient(135deg, #226338 0%, #2e7d47 100%) !important;
    box-shadow: 0 8px 22px -3px rgba(27, 78, 43, 0.42), 0 4px 8px -2px rgba(27, 78, 43, 0.2) !important;
    translate: 0 -2px !important;
}

/* Shimmer Sheen Animation on Primary Buttons */
.fi-btn-color-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-20deg);
    transition: all 0.6s ease;
    pointer-events: none;
}

.fi-btn-color-primary:not([disabled]):hover::after {
    left: 140%;
}

/* Outlined Buttons */
.fi-btn.fi-outlined:not([disabled]):hover {
    background-color: rgba(22, 163, 74, 0.08) !important;
    border-color: #16a34a !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.14) !important;
}

.dark .fi-btn.fi-outlined:not([disabled]):hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: #86efac !important;
}

/* Icon Buttons */
.fi-icon-btn {
    scale: 1;
    rotate: 0deg;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 0.55rem !important;
}

.fi-icon-btn:hover {
    scale: 1.12 !important;
    rotate: 3deg !important;
    background-color: rgba(22, 163, 74, 0.1) !important;
}

.dark .fi-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* 5. WIDGETS MODERNIZATION & AESTHETICS */
@keyframes widgetFadeInUp {
    from {
        opacity: 0;
        translate: 0 14px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

.fi-wi-widget {
    animation: widgetFadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* STATS OVERVIEW CARDS - MODERN STRIPE/LINEAR METRICS */
.fi-wi-stats-overview-stat {
    translate: 0 0;
    scale: 1;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    border-radius: 1.25rem !important;
    padding: 1.25rem 1.4rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 6px 16px -4px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
}

/* Top Decorative Gradient Accent Line */
.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    opacity: 0.8;
    transition: height 0.2s ease, opacity 0.2s ease;
}

.dark .fi-wi-stats-overview-stat {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

/* Stat Card Hover: Float 3D + Soft Ambient Shadow */
.fi-wi-stats-overview-stat:hover {
    translate: 0 -4px !important;
    border-color: rgba(16, 185, 129, 0.45) !important;
    box-shadow: 0 14px 28px -4px rgba(0, 0, 0, 0.08), 0 6px 12px -2px rgba(16, 185, 129, 0.12) !important;
}

.fi-wi-stats-overview-stat:hover::before {
    height: 4.5px;
    opacity: 1;
}

.dark .fi-wi-stats-overview-stat:hover {
    border-color: rgba(134, 239, 172, 0.4) !important;
    box-shadow: 0 20px 36px -6px rgba(0, 0, 0, 0.55), 0 8px 16px -4px rgba(16, 185, 129, 0.2) !important;
}

/* Stat Values Typography */
.fi-wi-stats-overview-stat-value {
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    font-variant-numeric: tabular-nums;
    color: #0f172a !important;
}

.dark .fi-wi-stats-overview-stat-value {
    color: #f8fafc !important;
}

/* Stat Icon Micro-bounce on Card Hover */
.fi-wi-stats-overview-stat:hover .fi-icon {
    scale: 1.15;
    transition: scale 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* CHART WIDGETS (.fi-wi-chart) - MODERN 2026 CARD CONTAINER */
.fi-wi-chart .fi-section {
    background: #ffffff !important;
    border-radius: 1.25rem !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 8px 24px -4px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden;
    position: relative;
}

.dark .fi-wi-chart .fi-section {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

/* Chart Section Header Decorative Accent Bar */
.fi-wi-chart .fi-section-header-heading {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
}

.dark .fi-wi-chart .fi-section-header-heading {
    color: #f8fafc !important;
}

.fi-wi-chart .fi-section-header-heading::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.15rem;
    border-radius: 9999px;
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    flex-shrink: 0;
}

.fi-wi-chart .fi-section-header-description {
    font-size: 0.78rem !important;
    color: #64748b !important;
    margin-top: 0.2rem !important;
}

.dark .fi-wi-chart .fi-section-header-description {
    color: #94a3b8 !important;
}

.fi-wi-chart .fi-section:hover {
    translate: 0 -3px;
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.07) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

.dark .fi-wi-chart .fi-section:hover {
    box-shadow: 0 16px 30px -4px rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Chart Canvas Animations & Interactive Modern Hover Filter */
.fi-wi-chart canvas {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s ease !important;
}

.fi-wi-chart:hover canvas {
    filter: drop-shadow(0 6px 16px rgba(16, 185, 129, 0.12));
}

.dark .fi-wi-chart:hover canvas {
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));

    /* Table Widget (.fi-wi-table & TransaksiTerbaruWidget) */
    .fi-wi-table .fi-section {
        border-radius: 1.25rem !important;
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
        overflow: hidden;
    }

    .dark .fi-wi-table .fi-section {
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    /* Table Row Smooth Hover */
    .fi-ta-row {
        transition: background-color 0.18s ease !important;
    }

    .fi-ta-row:hover {
        background-color: rgba(75, 107, 82, 0.045) !important;
    }

    .dark .fi-ta-row:hover {
        background-color: rgba(255, 255, 255, 0.035) !important;
    }

    /* Kwitansi & Table Action Button Hover */
    .fi-ta-actions .fi-btn {
        border-radius: 0.55rem !important;
        font-weight: 700 !important;
    }

    .fi-ta-actions .fi-btn:hover {
        translate: 0 -1.5px !important;
        box-shadow: 0 4px 10px rgba(62, 92, 69, 0.3) !important;
    }

    /* Modern Pill Badges */
    .fi-badge {
        border-radius: 9999px !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        padding-inline: 0.65rem !important;
        transition: all 0.2s ease !important;
    }

    .fi-badge:hover {
        scale: 1.05;
    }

    /* Satria Assistant Chat specific animations */
    @keyframes messageSlideIn {
        from {
            opacity: 0;
            transform: translateY(10px) scale(0.95);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .chat-message-enter {
        animation: messageSlideIn 0.3s ease-out forwards;
    }

    /* Typing indicator dots */
    .typing-dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #6E8E77;
        animation: typing 1.4s infinite ease-in-out both;
    }

    .typing-dot:nth-child(1) {
        animation-delay: -0.32s;
    }

    .typing-dot:nth-child(2) {
        animation-delay: -0.16s;
    }

    .typing-dot:nth-child(3) {
        animation-delay: 0s;
    }

    @keyframes typing {

        0%,
        80%,
        100% {
            transform: scale(0);
            opacity: 0.5;
        }

        40% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* Smooth scrollbar for chat */
    .chat-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .chat-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .chat-scroll::-webkit-scrollbar-thumb {
        background-color: rgba(110, 142, 119, 0.4);
        border-radius: 10px;
    }

    .chat-scroll::-webkit-scrollbar-thumb:hover {
        background-color: rgba(110, 142, 119, 0.7);
    }

    /* Markdown styling for Satria Assistant */
    .satria-prose {
        font-size: 0.815rem;
        line-height: 1.5;
        word-break: break-word;
        color: #1e293b;
    }

    .satria-prose p {
        margin-bottom: 0.6rem;
    }

    .satria-prose p:last-child {
        margin-bottom: 0;
    }

    .satria-prose strong {
        font-weight: 700;
        color: #1f2e22;
    }

    .satria-prose ul {
        list-style-type: disc;
        padding-left: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .satria-prose ol {
        list-style-type: decimal;
        padding-left: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .satria-prose li {
        margin-bottom: 0.2rem;
    }

    /* Filament Breezy & Profile Page Beautification */
    .fi-page-my-profile svg,
    [class*="filament-breezy"] svg {
        max-width: 1.5rem !important;
        max-height: 1.5rem !important;
    }

    /* Allow QR code SVGs to render at appropriate square size */
    .fi-page-my-profile svg[viewBox="0 0 29 29"],
    .fi-page-my-profile svg[viewBox="0 0 33 33"],
    .fi-page-my-profile svg[viewBox="0 0 37 37"],
    .fi-page-my-profile div[style*="max-width: 140px"] svg,
    .fi-page-my-profile div[style*="width: 140px"] svg {
        max-width: 140px !important;
        max-height: 140px !important;
        width: 130px !important;
        height: 130px !important;
    }

    .fi-page-my-profile h3 svg,
    .fi-page-my-profile h4 svg,
    [class*="filament-breezy"] h3 svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
        flex-shrink: 0;
        display: inline-block;
    }

    .fi-page-my-profile .fi-section-content-ctn {
        padding: 1.25rem !important;
    }

    .fi-page-my-profile .fi-btn-color-primary,
    .fi-page-my-profile form button[type="submit"] {
        background-color: #3e5c45 !important;
        color: #ffffff !important;
        border-radius: 0.5rem !important;
        font-weight: 600 !important;
        padding: 0.5rem 1.25rem !important;
        font-size: 0.875rem !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .fi-page-my-profile .fi-btn-color-primary:hover,
    .fi-page-my-profile form button[type="submit"]:hover {
        background-color: #293d2e !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
    }

    /* Compact Aesthetic Sidebar Footer */
    .satria-sidebar-footer {
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border-radius: 0.75rem !important;
    }

    .satria-sidebar-footer:hover {
        border-color: rgba(75, 107, 82, 0.4) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    }

    .dark .satria-sidebar-footer {
        background: rgba(17, 26, 20, 0.75) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    .dark .satria-sidebar-footer:hover {
        border-color: rgba(134, 239, 172, 0.3) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    }

    .dark .satria-sidebar-footer strong {
        color: #f8fafc !important;
    }

    .dark .satria-sidebar-footer div {
        color: #94a3b8 !important;
    }

    /* ==========================================================================
   SATRIA KOPERASI - SaaS Onboarding & Product Tour Styles
   ========================================================================== */

    .satria-tour-container {
        font-family: inherit;
        z-index: 999999 !important;
    }

    /* Backdrop & Spotlight Overlay */
    .satria-tour-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.82);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        transition: background 0.3s ease;
        z-index: 100000;
    }

    .satria-tour-backdrop.has-spotlight {
        background: transparent;
    }

    /* Spotlight Cutout Box */
    .satria-spotlight-box {
        position: fixed;
        box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.82), 0 0 25px 4px rgba(110, 142, 119, 0.7);
        border: 2px solid #6E8E77;
        pointer-events: none;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 100001;
    }

    .satria-spotlight-pulse {
        position: absolute;
        inset: -4px;
        border-radius: inherit;
        border: 2px solid rgba(110, 142, 119, 0.4);
        animation: spotlightPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes spotlightPulse {

        0%,
        100% {
            opacity: 0.8;
            transform: scale(1);
        }

        50% {
            opacity: 0;
            transform: scale(1.04);
        }
    }

    .satria-spotlight-badge {
        position: absolute;
        top: -28px;
        left: 0;
        background: #3E5C45;
        color: #ffffff;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        padding: 0.2rem 0.6rem;
        border-radius: 0.375rem;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        white-space: nowrap;
        animation: fadeIn 0.3s ease-out;
    }

    /* Modals & Tooltip Containers */
    .satria-modal-wrapper {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        z-index: 100002;
        overflow-y: auto;
    }

    .satria-tooltip-anchor {
        z-index: 100002;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Card Styling */
    .satria-tour-card {
        background: #ffffff;
        border: 1px solid rgba(62, 92, 69, 0.15);
        border-radius: 1.25rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
        padding: 1.5rem;
        color: #1e293b;
        position: relative;
        max-width: 100%;
    }

    .dark .satria-tour-card {
        background: #111a14;
        border-color: rgba(255, 255, 255, 0.12);
        color: #f1f5f9;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    }

    .satria-welcome-card {
        width: 100%;
        max-width: 520px;
    }

    .satria-step-card {
        width: 100%;
        max-width: 440px;
    }

    .satria-success-card {
        width: 100%;
        max-width: 480px;
    }

    /* Header Elements */
    .satria-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    .satria-tour-brand-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: rgba(22, 163, 74, 0.08);
        border: 1px solid rgba(22, 163, 74, 0.2);
        padding: 0.25rem 0.65rem;
        border-radius: 9999px;
    }

    .dark .satria-tour-brand-pill {
        background: rgba(74, 222, 128, 0.12);
        border-color: rgba(74, 222, 128, 0.25);
    }

    .satria-brand-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #10b981;
    }

    .satria-brand-title {
        font-size: 0.75rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        color: #293d2e;
    }

    .dark .satria-brand-title {
        color: #94af9b;
    }

    .satria-badge-tag {
        font-size: 0.62rem;
        font-weight: 700;
        background: #3e5c45;
        color: #ffffff;
        padding: 0.1rem 0.4rem;
        border-radius: 0.25rem;
    }

    .satria-step-badge {
        display: inline-flex;
        align-items: center;
    }

    .satria-step-pill {
        font-size: 0.72rem;
        font-weight: 700;
        color: #3e5c45;
        background: #eef3ef;
        border: 1px solid rgba(62, 92, 69, 0.2);
        padding: 0.2rem 0.6rem;
        border-radius: 9999px;
    }

    .dark .satria-step-pill {
        color: #a7f3d0;
        background: rgba(6, 78, 59, 0.4);
        border-color: rgba(16, 185, 129, 0.3);
    }

    .satria-close-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        color: #94a3b8;
        background: transparent;
        border: 1px solid transparent;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .satria-close-btn:hover {
        color: #1e293b;
        background: #f1f5f9;
        border-color: #e2e8f0;
    }

    .dark .satria-close-btn:hover {
        color: #ffffff;
        background: #1e293b;
        border-color: #334155;
    }

    /* Welcome Visual */
    .satria-welcome-visual {
        display: flex;
        justify-content: center;
        margin: 0.5rem 0 1.25rem;
    }

    .satria-avatar-glow {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .satria-icon-emblem {
        width: 68px;
        height: 68px;
        border-radius: 1.25rem;
        background: linear-gradient(135deg, #3E5C45 0%, #293D2E 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 20px -3px rgba(41, 61, 46, 0.4);
        border: 2px solid rgba(255, 255, 255, 0.2);
        animation: floatIcon 3s ease-in-out infinite;
    }

    @keyframes floatIcon {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-6px);
        }
    }

    /* Titles & Descriptions */
    .satria-tour-title {
        font-size: 1.25rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.35;
        margin-bottom: 0.5rem;
    }

    .dark .satria-tour-title {
        color: #f8fafc;
    }

    .satria-tour-desc {
        font-size: 0.875rem;
        color: #475569;
        line-height: 1.5;
        margin-bottom: 1.25rem;
    }

    .dark .satria-tour-desc {
        color: #94a3b8;
    }

    /* Feature Grid in Welcome Modal */
    .satria-feature-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }

    @media (max-width: 640px) {
        .satria-feature-grid {
            grid-template-columns: 1fr;
        }
    }

    .satria-feature-item {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.6rem 0.75rem;
        border-radius: 0.75rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
    }

    .dark .satria-feature-item {
        background: rgba(30, 41, 59, 0.5);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .satria-feat-icon {
        width: 32px;
        height: 32px;
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .satria-feat-text {
        display: flex;
        flex-direction: column;
    }

    .satria-feat-text strong {
        font-size: 0.78rem;
        color: #1e293b;
        font-weight: 700;
    }

    .dark .satria-feat-text strong {
        color: #e2e8f0;
    }

    .satria-feat-text span {
        font-size: 0.68rem;
        color: #64748b;
    }

    .dark .satria-feat-text span {
        color: #94a3b8;
    }

    /* Step Tooltip Elements */
    .satria-step-hero {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 0.5rem;
    }

    .satria-hero-icon {
        width: 36px;
        height: 36px;
        border-radius: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .satria-step-title {
        font-size: 1.05rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.3;
    }

    .dark .satria-step-title {
        color: #f8fafc;
    }

    .satria-step-desc {
        font-size: 0.84rem;
        color: #475569;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .dark .satria-step-desc {
        color: #94a3b8;
    }

    /* Highlight Lists */
    .satria-highlight-list {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        margin-bottom: 1.25rem;
    }

    .satria-hl-item {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 0.78rem;
        line-height: 1.4;
        color: #334155;
    }

    .dark .satria-hl-item {
        color: #cbd5e1;
    }

    .satria-hl-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #3e5c45;
        margin-top: 0.4rem;
        flex-shrink: 0;
    }

    .dark .satria-hl-dot {
        background-color: #6ee7b7;
    }

    .satria-hl-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        font-size: 0.68rem;
        font-weight: 800;
        flex-shrink: 0;
        margin-top: 0.1rem;
    }

    /* Mini Info Cards Grid */
    .satria-info-cards-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        margin-bottom: 1.25rem;
    }

    .satria-mini-card {
        padding: 0.5rem 0.6rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
    }

    .dark .satria-mini-card {
        background: rgba(30, 41, 59, 0.4);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .satria-mc-label {
        font-size: 0.74rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 0.15rem;
    }

    .dark .satria-mc-label {
        color: #f1f5f9;
    }

    .satria-mc-desc {
        font-size: 0.66rem;
        color: #64748b;
        line-height: 1.35;
    }

    .dark .satria-mc-desc {
        color: #94a3b8;
    }

    /* Visual Angsuran Box */
    .satria-angsuran-visual {
        padding: 0.75rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        margin-bottom: 1.25rem;
    }

    .dark .satria-angsuran-visual {
        background: rgba(30, 41, 59, 0.4);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .satria-av-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.74rem;
        margin-bottom: 0.4rem;
    }

    .satria-av-label {
        font-weight: 700;
        color: #1e293b;
    }

    .dark .satria-av-label {
        color: #f1f5f9;
    }

    .satria-av-percent {
        font-size: 0.68rem;
        font-weight: 700;
        color: #059669;
    }

    .dark .satria-av-percent {
        color: #34d399;
    }

    .satria-av-bar-bg {
        width: 100%;
        height: 6px;
        background: #e2e8f0;
        border-radius: 9999px;
        overflow: hidden;
        margin-bottom: 0.65rem;
    }

    .dark .satria-av-bar-bg {
        background: #334155;
    }

    .satria-av-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #10b981 0%, #059669 100%);
        border-radius: 9999px;
        transition: width 0.6s ease;
    }

    .satria-av-details {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        border-top: 1px dashed #e2e8f0;
        padding-top: 0.5rem;
    }

    .dark .satria-av-details {
        border-top-color: #334155;
    }

    .satria-av-detail-item {
        display: flex;
        flex-direction: column;
    }

    .satria-av-dt-label {
        font-size: 0.64rem;
        color: #64748b;
    }

    .dark .satria-av-dt-label {
        color: #94a3b8;
    }

    .satria-av-dt-val {
        font-size: 0.72rem;
        color: #1e293b;
    }

    .dark .satria-av-dt-val {
        color: #f1f5f9;
    }

    /* Notification Preview */
    .satria-notif-preview {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 1.25rem;
    }

    .satria-np-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.45rem 0.6rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
    }

    .dark .satria-np-item {
        background: rgba(30, 41, 59, 0.4);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .satria-np-icon {
        font-size: 0.8rem;
        font-weight: 800;
    }

    .satria-np-text {
        font-size: 0.74rem;
        color: #334155;
    }

    .dark .satria-np-text {
        color: #cbd5e1;
    }

    /* Success Modal */
    .satria-success-badge-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
    }

    .satria-success-pulse-ring {
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: rgba(16, 185, 129, 0.15);
        animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

    .satria-success-icon-circle {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: #d1fae5;
        border: 2px solid #a7f3d0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
    }

    .dark .satria-success-icon-circle {
        background: rgba(6, 78, 59, 0.5);
        border-color: rgba(16, 185, 129, 0.4);
    }

    .satria-success-checklist {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin: 1rem 0 1.25rem;
    }

    .satria-sc-item {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.55rem 0.75rem;
        border-radius: 0.6rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        font-size: 0.78rem;
        color: #334155;
    }

    .dark .satria-sc-item {
        background: rgba(30, 41, 59, 0.4);
        border-color: rgba(255, 255, 255, 0.08);
        color: #cbd5e1;
    }

    .satria-sc-icon {
        font-size: 1rem;
        flex-shrink: 0;
    }

    .satria-checkbox-container {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.25rem;
    }

    .satria-checkbox-label {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        user-select: none;
    }

    .satria-custom-checkbox {
        width: 16px;
        height: 16px;
        accent-color: #3e5c45;
        border-radius: 0.25rem;
        cursor: pointer;
    }

    .satria-checkbox-text {
        font-size: 0.8rem;
        color: #475569;
        font-weight: 500;
    }

    .dark .satria-checkbox-text {
        color: #94a3b8;
    }

    /* Card Footer & Navigation */
    .satria-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding-top: 0.75rem;
        border-top: 1px solid #f1f5f9;
    }

    .dark .satria-card-footer {
        border-top-color: rgba(255, 255, 255, 0.08);
    }

    .satria-progress-indicator {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .satria-dot {
        width: 7px;
        height: 7px;
        border-radius: 9999px;
        background: #cbd5e1;
        cursor: pointer;
        transition: all 0.25s ease;
    }

    .dark .satria-dot {
        background: #475569;
    }

    .satria-dot.active {
        width: 20px;
        background: #3e5c45;
    }

    .dark .satria-dot.active {
        background: #10b981;
    }

    .satria-dot.completed {
        background: #6e8e77;
    }

    .dark .satria-dot.completed {
        background: #059669;
    }

    .satria-btn-group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .satria-btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.45rem 1rem;
        font-size: 0.82rem;
        font-weight: 700;
        border-radius: 0.5rem;
        background: #3e5c45;
        color: #ffffff;
        border: none;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(62, 92, 69, 0.25);
        transition: all 0.2s ease;
    }

    .satria-btn-primary:hover {
        background: #293d2e;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(62, 92, 69, 0.35);
    }

    .satria-btn-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.45rem 0.85rem;
        font-size: 0.82rem;
        font-weight: 600;
        border-radius: 0.5rem;
        background: #f1f5f9;
        color: #475569;
        border: 1px solid #e2e8f0;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .satria-btn-secondary:hover {
        background: #e2e8f0;
        color: #1e293b;
    }

    .dark .satria-btn-secondary {
        background: #1e293b;
        border-color: #334155;
        color: #cbd5e1;
    }

    .dark .satria-btn-secondary:hover {
        background: #334155;
        color: #ffffff;
    }

    /* Modal Transition helpers */
    .satria-modal-enter {
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .satria-modal-leave {
        transition: all 0.2s ease-in;
    }

    /* Filament & Watchdog Modal Proportional Sizing */
    .fi-modal-description svg:not(.fi-loading-indicator),
    .fi-modal-content svg.w-4:not(.fi-loading-indicator),
    .fi-modal-content svg.inline:not(.fi-loading-indicator) {
        width: 1.125rem !important;
        height: 1.125rem !important;
        max-width: 1.125rem !important;
        max-height: 1.125rem !important;
        vertical-align: -0.15em;
        flex-shrink: 0;
    }

    .fi-modal-window {
        border-radius: 1rem !important;
    }

    /* Ensure inactive loading indicators remain hidden */
    .fi-btn .fi-loading-indicator[x-cloak],
    .fi-btn .fi-loading-indicator[style*="display: none"],
    .fi-loading-indicator[x-cloak],
    .fi-loading-indicator[style*="display: none"],
    [x-cloak] {
        display: none !important;
    }

    /* Prevent duplicate loading indicator spinners in buttons */
    .fi-btn svg.fi-loading-indicator~svg.fi-loading-indicator,
    .fi-btn .fi-loading-indicator~.fi-loading-indicator {
        display: none !important;
    }

    /* Quick Actions Widget Styling (Light & Dark Mode) */
    .fi-quick-action-card {
        background-color: rgba(249, 250, 251, 0.85);
        border: 1px solid rgba(229, 231, 235, 0.9);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .fi-quick-action-card .fi-quick-action-icon-wrapper {
        background-color: rgba(75, 107, 82, 0.12);
        color: #3b5340;
    }

    .fi-quick-action-card .fi-quick-action-title {
        color: #111827;
        font-weight: 700;
    }

    .fi-quick-action-card .fi-quick-action-desc {
        color: #4b5563;
    }

    .fi-quick-action-card:hover {
        background-color: #ffffff;
        border-color: #4b6b52;
        box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }

    .fi-quick-action-card:hover .fi-quick-action-title {
        color: #2d4533;
    }

    /* Dark Mode Overrides for Quick Actions */
    .dark .fi-quick-action-card {
        background-color: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: none !important;
    }

    .dark .fi-quick-action-card .fi-quick-action-icon-wrapper {
        background-color: rgba(75, 107, 82, 0.28) !important;
        color: #86efac !important;
    }

    .dark .fi-quick-action-card .fi-quick-action-title {
        color: #ffffff !important;
        font-weight: 700 !important;
    }

    .dark .fi-quick-action-card .fi-quick-action-desc {
        color: #cbd5e1 !important;
    }

    .dark .fi-quick-action-card:hover {
        background-color: rgba(75, 107, 82, 0.2) !important;
        border-color: rgba(134, 239, 172, 0.5) !important;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
        transform: translateY(-2px) !important;
    }

    .dark .fi-quick-action-card:hover .fi-quick-action-title {
        color: #86efac !important;
    }

    /* ==========================================================================
   Filament Breezy My Profile Proportional Enhancements
   ========================================================================== */
    .filament-breezy-profile-card {
        transition: all 0.25s ease;
    }

    .filament-breezy-profile-card .fi-section {
        border-radius: 1rem !important;
        overflow: hidden !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    }

    .dark .filament-breezy-profile-card .fi-section {
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        background-color: rgba(255, 255, 255, 0.02) !important;
        box-shadow: none !important;
    }

    /* Ensure aside section layout on desktop is balanced (1:2 ratio) */
    @media (min-width: 768px) {
        .filament-breezy-profile-card .fi-section-aside {
            display: grid !important;
            grid-template-columns: minmax(220px, 1fr) 2fr !important;
            gap: 2rem !important;
            align-items: start !important;
        }
    }

    .filament-breezy-profile-card .fi-section-header-heading {
        font-size: 1.125rem !important;
        font-weight: 700 !important;
        color: var(--gray-900, #111827) !important;
    }

    .dark .filament-breezy-profile-card .fi-section-header-heading {
        color: #ffffff !important;
    }

    .filament-breezy-profile-card .fi-section-header-description {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        color: var(--gray-500, #6b7280) !important;
        margin-top: 0.35rem !important;
    }

    .dark .filament-breezy-profile-card .fi-section-header-description {
        color: #94a3b8 !important;
    }