/*
 * MemberFlow "calm glass" theme for the Filament admin (/admin) and platform (/platform) panels.
 * Plain CSS layered over Filament's own stylesheet, so no Vite theme build is needed.
 * Light values sit on :root; .dark (set by Filament on <html>) switches to the night palette.
 */

:root {
    --mf-bg: #edf0f6;
    --mf-o1: rgba(90, 210, 180, .42);
    --mf-o2: rgba(170, 150, 255, .40);
    --mf-o3: rgba(120, 170, 255, .40);
    --mf-glass: rgba(255, 255, 255, .55);
    --mf-glass-strong: rgba(255, 255, 255, .88);
    --mf-stroke: rgba(255, 255, 255, .85);
    --mf-hi: rgba(255, 255, 255, .9);
    --mf-shadow: rgba(40, 50, 90, .10);
    --mf-faint: rgba(16, 19, 28, .06);
    --mf-input: rgba(255, 255, 255, .72);
    --mf-a1: #0e8a6e;
    --mf-a2: #2f63d6;
    --mf-on: #ffffff;
    --mf-ring: rgba(47, 99, 214, .14);
    --mf-sel-shadow: rgba(30, 60, 120, .22);
    --mf-blur: 18px;
}

.dark {
    --mf-bg: #0a0f1c;
    --mf-o1: rgba(64, 200, 170, .30);
    --mf-o2: rgba(140, 110, 255, .26);
    --mf-o3: rgba(70, 130, 255, .22);
    --mf-glass: rgba(255, 255, 255, .055);
    --mf-glass-strong: rgba(20, 26, 42, .90);
    --mf-stroke: rgba(255, 255, 255, .11);
    --mf-hi: rgba(255, 255, 255, .10);
    --mf-shadow: rgba(0, 0, 0, .35);
    --mf-faint: rgba(232, 236, 245, .08);
    --mf-input: rgba(255, 255, 255, .05);
    --mf-a1: #7ce0c3;
    --mf-a2: #8fb8ff;
    --mf-on: #0a0f1c;
    --mf-ring: rgba(124, 224, 195, .18);
    --mf-sel-shadow: rgba(0, 0, 0, .4);
}

/* The platform console uses lavender so staff can tell the two panels apart at a glance. */
.fi-panel-platform { --mf-a1: #6a4fd8; --mf-a2: #2f63d6; --mf-ring: rgba(106, 79, 216, .16); }
.dark .fi-panel-platform { --mf-a1: #b9a6ff; --mf-a2: #8fb8ff; --mf-ring: rgba(185, 166, 255, .2); }

/* ---------- Canvas & soft light ---------- */
.fi-body { background-color: var(--mf-bg) !important; }

.mf-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* Static soft light. Radial gradients are already soft, so no blur filter is needed, and keeping
   them still means the glass panels above are not re-blurred on every animation frame. */
.mf-orb { position: absolute; border-radius: 50%; }
.mf-orb-1 { width: 760px; height: 760px; left: -240px; top: -280px; background: radial-gradient(circle, var(--mf-o1), transparent 68%); }
.mf-orb-2 { width: 860px; height: 860px; right: -300px; top: 14%; background: radial-gradient(circle, var(--mf-o2), transparent 68%); }
.mf-orb-3 { width: 680px; height: 680px; left: 28%; bottom: -340px; background: radial-gradient(circle, var(--mf-o3), transparent 68%); }

.fi-layout, .fi-simple-layout { position: relative; z-index: 1; }

/* ---------- Glass surfaces ---------- */
.fi-body .fi-topbar,
.fi-body .fi-sidebar,
.fi-body .fi-sidebar-header,
.fi-body .fi-section:not(.fi-section-not-contained),
.fi-body .fi-ta-ctn,
.fi-body .fi-wi-stats-overview-stat,
.fi-body .fi-simple-main {
    background-color: var(--mf-glass) !important;
    -webkit-backdrop-filter: blur(var(--mf-blur)) saturate(150%);
    backdrop-filter: blur(var(--mf-blur)) saturate(150%);
    box-shadow: inset 0 1px 0 var(--mf-hi), 0 20px 50px var(--mf-shadow) !important;
    border: 1px solid var(--mf-stroke);
}

.fi-body .fi-sidebar-header { box-shadow: none !important; border: 0; background-color: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fi-body .fi-topbar { box-shadow: inset 0 -1px 0 var(--mf-stroke) !important; border: 0; }
.fi-body .fi-sidebar { border-width: 0 1px 0 0; box-shadow: none !important; }

.fi-body .fi-section:not(.fi-section-not-contained),
.fi-body .fi-ta-ctn,
.fi-body .fi-wi-stats-overview-stat { border-radius: 24px; }
.fi-body .fi-simple-main { border-radius: 28px; }

/* Tables sit directly on the glass. */
.fi-body .fi-ta-ctn thead tr,
.fi-body .fi-ta-ctn .fi-ta-header-cell,
.fi-body .fi-ta-ctn .fi-ta-header,
.fi-body .fi-ta-ctn .fi-ta-header-toolbar { background-color: transparent !important; }
.fi-body .fi-ta-row { transition: background-color .25s; }
.fi-body .fi-ta-row:hover { background-color: var(--mf-faint) !important; }

/* Inputs, dropdowns and modals stay readable: more opaque glass. */
.fi-body .fi-input-wrp { background-color: var(--mf-input) !important; }
.fi-body .fi-dropdown-panel,
.fi-body .fi-modal-window {
    background-color: var(--mf-glass-strong) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    backdrop-filter: blur(28px) saturate(160%);
    border: 1px solid var(--mf-stroke);
}
.fi-body .fi-modal-window { border-radius: 26px; }

/* Stats cards lift gently on hover. */
.fi-body .fi-wi-stats-overview-stat { transition: transform .35s cubic-bezier(.2, .7, .2, 1), background-color .35s; }
.fi-body .fi-wi-stats-overview-stat:hover { transform: translateY(-3px); }
.fi-body .fi-wi-stats-overview-stat-value { letter-spacing: -.03em; font-weight: 500; }

/* ---------- Selected state: a strong gradient pill ---------- */
.fi-body .fi-sidebar-item-btn { position: relative; z-index: 1; background-color: transparent; border-radius: 14px; transition: background-color .25s, color .35s; }
.fi-body .fi-sidebar-item-btn:hover { background-color: var(--mf-faint); }

.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-body .fi-tabs-item.fi-active {
    background: linear-gradient(135deg, var(--mf-a1), var(--mf-a2)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 22px var(--mf-sel-shadow), 0 0 0 3px var(--mf-ring);
}
.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-icon,
.fi-body .fi-tabs-item.fi-active,
.fi-body .fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-body .fi-tabs-item.fi-active .fi-icon { color: var(--mf-on) !important; font-weight: 600; }
.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-grouped-border-part { background-color: var(--mf-on) !important; }
.fi-body .fi-tabs-item { border-radius: 12px; transition: color .35s, background-color .25s; }

/* With JavaScript, one shared pill slides between menu items instead of each item lighting up. */
.fi-body .fi-sidebar-nav { position: relative; }
.mf-nav-pill {
    position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--mf-a1), var(--mf-a2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 22px var(--mf-sel-shadow), 0 0 0 3px var(--mf-ring);
    transition: transform .55s cubic-bezier(.3, 1.25, .5, 1), width .3s ease, height .3s ease;
}
.mf-nav-pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 55%); }
.fi-body .mf-has-pill .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: transparent !important; box-shadow: none; }
.fi-body .fi-sidebar-item-icon { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.fi-body .fi-sidebar-item.fi-active .fi-sidebar-item-icon { transform: scale(1.1); }

/* Branch directory uses the existing glass surfaces in a responsive grid. */
.mf-branch-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mf-branch-label { font-size: .875rem; opacity: .7; overflow-wrap: anywhere; }
.mf-branch-number { display: block; font-size: 2rem; line-height: 1.3; margin-top: .5rem; }
.mf-branch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mf-branch-empty { grid-column: 1 / -1; text-align: center; padding: 2rem 1rem; }
.mf-branch-empty h2 { font-size: 1.15rem; font-weight: 600; }
.mf-branch-empty p { max-width: 34rem; margin: .75rem auto 0; opacity: .7; }
.mf-branch-note { margin-top: .75rem; opacity: .7; font-size: .875rem; }
@media (max-width: 640px) { .mf-branch-stats, .mf-branch-grid { grid-template-columns: 1fr; } }

.mf-theme-toggle { display:flex; align-items:center; gap:.65rem; width:100%; padding:.65rem .85rem; border-radius:.75rem; cursor:pointer; color:inherit; }
.mf-theme-toggle:hover { background:var(--mf-faint); }
.mf-theme-toggle svg { width:1.25rem; height:1.25rem; }
.fi-main { animation:mf-appear .25s ease-out both; }
.fi-body .fi-sidebar-item-btn { transition:color .2s ease, background-color .2s ease; }

/* ---------- Motion ---------- */
.fi-body .fi-wi-stats-overview-stat,
.fi-body .fi-wi-chart,
.fi-body .fi-ta-ctn,
.fi-body .fi-simple-main { animation: mf-appear .4s cubic-bezier(.2, .7, .2, 1) both; }
.fi-body .fi-wi-stats-overview-stat:nth-child(2) { animation-delay: .03s; }
.fi-body .fi-wi-stats-overview-stat:nth-child(3) { animation-delay: .06s; }
.fi-body .fi-wi-stats-overview-stat:nth-child(4) { animation-delay: .09s; }
.fi-body .fi-wi-stats-overview-stat:nth-child(5) { animation-delay: .12s; }
@keyframes mf-appear {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* Lighter blur on phones keeps scrolling smooth. */
@media (max-width: 768px) {
    :root { --mf-blur: 12px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root { --mf-glass: rgba(255, 255, 255, .92); }
    .dark { --mf-glass: rgba(20, 26, 42, .92); }
}

@media (prefers-reduced-motion: reduce) {
    .mf-orb, .mf-nav-pill, .fi-body * { animation: none !important; transition: none !important; }
}