/* Light gateway dashboard. Loaded after the Filament theme. */

.fi-body {
    background: #f4f6f8;
    color: #0f172a;
}

.fi-main {
    background: transparent;
}

.fi-sidebar {
    background: #ffffff;
    border-right: 1px solid #e7edf3;
}

.fi-sidebar-header {
    background: #ffffff;
    box-shadow: none;
    border-bottom: 1px solid #eef2f6;
    height: 4.25rem;
}

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

.fi-sidebar-item-button {
    border-radius: 10px;
    margin-inline: 0.35rem;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-button {
    background: color-mix(in srgb, var(--primary-600, #12875a) 12%, white);
    color: var(--primary-700, #0f6b46);
}

.fi-sidebar-group-label {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.68rem;
    color: #94a3b8;
}

.fi-topbar nav {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: none;
    border-bottom: 1px solid #e7edf3;
}

.fi-header-heading {
    letter-spacing: -0.03em;
    font-weight: 600;
    color: #0f172a;
}

.fi-header-subheading {
    color: #64748b;
}

.fi-wi-stats-overview-stats-ctn {
    gap: 1rem;
}

.fi-wi-stats-overview-stat {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 1.15rem 1.2rem;
}

.fi-wi-stats-overview-stat-label {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.fi-wi-stats-overview-stat-value {
    margin-top: 0.3rem;
    font-size: 1.6rem;
    line-height: 1.15;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}

.fi-wi-stats-overview-stat-description {
    margin-top: 0.35rem;
    padding: 0;
    background: transparent;
    box-shadow: none;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 500;
}

.fi-wi-stats-overview-stat .h-fit.rounded-lg {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary-500, #12875a) 14%, white);
}

.fi-wi-stats-overview-stat-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.fi-section,
.fi-wi-chart,
.fi-ta-ctn,
.fi-fo-component-ctn .fi-section {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.fi-section-header {
    border-bottom: 1px solid #eef2f6;
}

.fi-section-content-ctn {
    border: none;
}

.fi-ta thead > tr {
    background: #f8fafc;
}

.fi-ta thead th,
.fi-ta-header-cell {
    color: #64748b;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

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

.fi-btn {
    border-radius: 10px;
    font-weight: 600;
}

.fi-input-wrp,
.fi-select-input,
.fi-fo-date-time-picker {
    border-radius: 10px;
}

.fi-badge {
    border-radius: 999px;
    font-weight: 600;
}

.fi-simple-layout {
    background:
        radial-gradient(900px 420px at 10% -10%, color-mix(in srgb, var(--primary-400, #34d399) 18%, transparent), transparent 60%),
        #f4f6f8;
}

.fi-simple-main {
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.vbcpay-account-health .h-4.rounded-full {
    height: 0.4rem;
}

.dark .fi-body {
    background: #0b1120;
    color: #e2e8f0;
}

.dark .fi-sidebar,
.dark .fi-sidebar-header,
.dark .fi-topbar nav,
.dark .fi-section,
.dark .fi-wi-chart,
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat,
.dark .fi-simple-main {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.08);
}

.dark .fi-header-heading,
.dark .fi-wi-stats-overview-stat-value {
    color: #f8fafc;
}

.dark .fi-ta thead > tr,
.dark .fi-ta-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background: color-mix(in srgb, var(--primary-400, #34d399) 16%, transparent);
    color: #d1fae5;
}

.dark .fi-wi-stats-overview-stat .h-fit.rounded-lg {
    background: color-mix(in srgb, var(--primary-400, #34d399) 18%, transparent);
}

@media (max-width: 768px) {
    .fi-wi-stats-overview-stat-value {
        font-size: 1.35rem;
    }
}