/* BNI LT United – modern light theme: soft glass, gradients and subtle motion.
   Plain CSS on top of Filament's stylesheet (no build step). Honors prefers-reduced-motion. */
:root {
    --club-red: #cf2030;
    --club-red-dark: #a3121f;
    --club-ink: #0f172a;
    --club-radius: 16px;
    --club-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -8px rgba(15, 23, 42, .10);
    --club-shadow-hover: 0 2px 4px rgba(15, 23, 42, .05), 0 18px 36px -12px rgba(207, 32, 48, .22);
}

/* Page background: airy mesh with a warm red and a cool blue glow */
.fi-body, body.fi-body {
    background:
        radial-gradient(900px 500px at 8% -10%, rgba(207, 32, 48, .07), transparent 60%),
        radial-gradient(800px 500px at 100% 0%, rgba(59, 130, 246, .08), transparent 55%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) fixed;
}

/* Glass top bar and sidebar */
.fi-topbar { backdrop-filter: saturate(160%) blur(14px); background: rgba(255, 255, 255, .72) !important; border-bottom: 1px solid rgba(226, 232, 240, .8); }
.fi-sidebar { background: rgba(255, 255, 255, .78) !important; backdrop-filter: blur(16px); border-right: 1px solid rgba(226, 232, 240, .8); }
.fi-sidebar-group-label { letter-spacing: .06em; text-transform: uppercase; font-size: .68rem; font-weight: 700; color: #94a3b8; }

/* Sidebar items: slide on hover, gradient pill when active */
.fi-sidebar-item-btn { border-radius: 12px; transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover { transform: translateX(3px); background: rgba(207, 32, 48, .06); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(135deg, var(--club-red) 0%, var(--club-red-dark) 100%);
    box-shadow: 0 8px 18px -8px rgba(207, 32, 48, .6);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn * { color: #fff !important; }

/* Cards: rounded, soft shadow, lift on hover */
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-wi-chart {
    border-radius: var(--club-radius) !important;
    box-shadow: var(--club-shadow) !important;
    border: 1px solid rgba(226, 232, 240, .9) !important;
    background: rgba(255, 255, 255, .92) !important;
    transition: transform .22s ease, box-shadow .22s ease;
}
.fi-section:hover, .fi-ta-ctn:hover, .fi-wi-stats-overview-stat:hover, .fi-wi-chart:hover { box-shadow: var(--club-shadow-hover) !important; }
.fi-wi-stats-overview-stat:hover { transform: translateY(-3px); }

/* KPI cards: accent bar + gradient numbers */
.fi-wi-stats-overview-stat { position: relative; overflow: hidden; }
.fi-wi-stats-overview-stat::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--club-red), #f97316 55%, #3b82f6);
}
.fi-wi-stats-overview-stat-value {
    font-weight: 800; letter-spacing: -.02em;
    background: linear-gradient(135deg, var(--club-ink), #475569);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Headings */
.fi-header-heading { font-weight: 800; letter-spacing: -.02em; background: linear-gradient(90deg, var(--club-ink) 30%, var(--club-red)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Buttons: gradient primary with glow, gentle lift */
.fi-btn { border-radius: 12px; transition: transform .16s ease, box-shadow .2s ease, filter .2s ease; }
.fi-btn:hover { transform: translateY(-1px); }
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-btn-color-gray) {
    background-image: linear-gradient(135deg, var(--club-red) 0%, var(--club-red-dark) 100%);
    box-shadow: 0 8px 18px -8px rgba(207, 32, 48, .65);
}
.fi-btn.fi-color-primary:not(.fi-outlined):hover { box-shadow: 0 12px 24px -8px rgba(207, 32, 48, .8); filter: saturate(1.1); }

/* Tables: row hover, pill badges */
.fi-ta-row { transition: background-color .15s ease; }
.fi-ta-row:hover { background: rgba(207, 32, 48, .035) !important; }
.fi-badge { border-radius: 999px; font-weight: 600; }

/* Entrance animation: widgets and sections fade up in sequence */
@keyframes club-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fi-wi-widget, .fi-page-content > *, .fi-section, .fi-ta-ctn { animation: club-rise .55s cubic-bezier(.2, .7, .2, 1) both; }
.fi-wi-widget:nth-child(2) { animation-delay: .05s; } .fi-wi-widget:nth-child(3) { animation-delay: .1s; }
.fi-wi-widget:nth-child(4) { animation-delay: .15s; } .fi-wi-widget:nth-child(5) { animation-delay: .2s; }
.fi-wi-widget:nth-child(6) { animation-delay: .25s; } .fi-wi-widget:nth-child(n+7) { animation-delay: .3s; }

/* Login: animated gradient mesh with floating blobs and a glass card */
.fi-simple-layout {
    background: linear-gradient(120deg, #fff1f2, #eff6ff, #fdf2f8, #fff7ed);
    background-size: 300% 300%; animation: club-flow 16s ease infinite; position: relative; overflow: hidden;
}
.fi-simple-layout::before, .fi-simple-layout::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; z-index: 0; animation: club-float 14s ease-in-out infinite;
}
.fi-simple-layout::before { width: 420px; height: 420px; background: #fb7185; top: -120px; left: -100px; }
.fi-simple-layout::after { width: 460px; height: 460px; background: #60a5fa; bottom: -160px; right: -120px; animation-delay: -6s; }
.fi-simple-main-ctn { position: relative; z-index: 1; }
.fi-simple-main { backdrop-filter: blur(18px) saturate(160%); background: rgba(255, 255, 255, .72) !important; border: 1px solid rgba(255, 255, 255, .8); border-radius: 22px !important; box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .25) !important; }
@keyframes club-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes club-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* KPI row: the widget's own wrapper stays flat so only the stat cards read as cards */
.fi-wi-stats-overview .fi-section, .fi-wi-stats-overview > .fi-section { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.fi-wi-stats-overview .fi-section:hover { box-shadow: none !important; }