/*
 * "Wally" theme — gradient-accented wallet-dashboard reskin (floating
 * pill sidebar, solid-white active nav state, vivid gradient stat cards).
 * Scoped entirely under .theme-wally so it only applies to users who have
 * selected it in their profile (see app/Filament/Pages/EditProfile.php).
 * Supports both of Filament's light/dark modes via .theme-wally (light)
 * and .theme-wally.dark (dark) variants.
 */

.theme-wally {
    --wally-radius: 1.5rem;
    --wally-gradient-a-start: #38bdf8;
    --wally-gradient-a-end: #6366f1;
    --wally-gradient-b-start: #ec4899;
    --wally-gradient-b-end: #8b5cf6;
}

/* Chrome backdrop */

.theme-wally:not(.dark) {
    --wally-bg: #f1eefb;
    --wally-surface: #ffffff;
    --wally-border: #e4def8;
}

.theme-wally.dark {
    --wally-bg: #150f24;
    --wally-surface: #1d1733;
    --wally-border: rgba(167, 139, 255, 0.18);
}

.theme-wally .fi-main-ctn {
    background-color: var(--wally-bg);
}

/* Floating, fully-rounded sidebar "card" */

.theme-wally .fi-sidebar {
    margin: 1rem;
    border-radius: var(--wally-radius);
    background-color: var(--wally-surface);
    border: 1px solid var(--wally-border);
    box-shadow: 0 20px 40px -16px color-mix(in oklab, var(--primary-600) 30%, transparent);
    height: calc(100% - 2rem);
}

.theme-wally .fi-sidebar-header {
    border-bottom: 1px solid var(--wally-border);
}

.theme-wally .fi-sidebar-item-btn {
    border-radius: 9999px;
}

/* Active nav item: solid pill, light surface, dark text — matches the
   reference mockup's white "Wallet" pill on a dark sidebar. */

.theme-wally .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: var(--wally-surface);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.theme-wally.dark .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: #fff;
}

.theme-wally.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.theme-wally.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #1d1733;
}

.theme-wally .fi-sidebar-group-label {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.6875rem;
    opacity: 0.7;
}

/* Topbar: pill search + circular icon buttons */

.theme-wally .fi-topbar-ctn .fi-topbar {
    background-color: transparent;
    border-bottom: none;
    box-shadow: none;
}

.theme-wally .fi-topbar .fi-icon-btn {
    border-radius: 9999px;
    background-color: var(--wally-surface);
    border: 1px solid var(--wally-border);
}

/* Glass cards: sections, tables, modals */

.theme-wally .fi-sc-section,
.theme-wally .fi-ta-ctn,
.theme-wally .fi-modal-window {
    background-color: var(--wally-surface);
    border: 1px solid var(--wally-border);
    border-radius: var(--wally-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.theme-wally.dark .fi-sc-section,
.theme-wally.dark .fi-ta-ctn,
.theme-wally.dark .fi-modal-window {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* Stat widgets: vivid gradient accent cards, alternating hues */

.theme-wally .fi-wi-stats-overview-stat {
    border: none;
    border-radius: var(--wally-radius);
    overflow: hidden;
    color: #fff;
}

.theme-wally .fi-wi-stats-overview-stat:nth-of-type(3n + 1) {
    background: linear-gradient(135deg, var(--wally-gradient-a-start), var(--wally-gradient-a-end));
}

.theme-wally .fi-wi-stats-overview-stat:nth-of-type(3n + 2) {
    background: linear-gradient(135deg, var(--wally-gradient-b-start), var(--wally-gradient-b-end));
}

.theme-wally .fi-wi-stats-overview-stat:nth-of-type(3n) {
    background-color: var(--wally-surface);
    border: 1px solid var(--wally-border);
    color: inherit;
}

.theme-wally .fi-wi-stats-overview-stat:nth-of-type(3n + 1) .fi-wi-stats-overview-stat-label,
.theme-wally .fi-wi-stats-overview-stat:nth-of-type(3n + 1) .fi-wi-stats-overview-stat-value,
.theme-wally .fi-wi-stats-overview-stat:nth-of-type(3n + 2) .fi-wi-stats-overview-stat-label,
.theme-wally .fi-wi-stats-overview-stat:nth-of-type(3n + 2) .fi-wi-stats-overview-stat-value {
    color: #fff;
}

/* Buttons: pill-shaped, gradient primary action */

.theme-wally .fi-btn {
    border-radius: 9999px;
}

.theme-wally .fi-btn.fi-color-primary {
    background: linear-gradient(135deg, var(--wally-gradient-a-start), var(--wally-gradient-a-end));
    box-shadow: 0 8px 20px color-mix(in oklab, var(--primary-600) 45%, transparent);
}

/* Inputs: pill search/text fields */

.theme-wally .fi-input,
.theme-wally .fi-select-input {
    border-radius: 9999px;
    background-color: color-mix(in oklab, var(--wally-surface) 60%, var(--wally-bg) 40%);
}

/* Badges */

.theme-wally .fi-badge {
    border-radius: 9999px;
}