/*
 * WiWi Finance — visual theme.
 *
 * Loaded after Filament's compiled stylesheet via the HEAD_END render hook
 * (see resources/views/filament/theme-head.blade.php). It is deliberately
 * plain CSS, not part of the Vite/Tailwind build: Filament's own rules live
 * in `@layer components`, and an unlayered stylesheet wins over any layered
 * rule regardless of specificity, so these overrides need neither a build
 * step nor `!important`.
 *
 * Layout: dark navy "chrome" (sidebar + topbar), light content, indigo accent.
 * Dark mode (html.dark) keeps the chrome and darkens the content.
 */

:root {
    --wf-chrome-top: #0f172a;
    --wf-chrome-mid: #111a36;
    --wf-chrome-bottom: #0b1020;
    --wf-chrome-border: rgba(255, 255, 255, 0.08);
    --wf-chrome-text: #cbd5e1;
    --wf-chrome-text-muted: #7c8aa5;
    --wf-chrome-text-strong: #ffffff;
    --wf-chrome-hover: rgba(255, 255, 255, 0.06);

    --wf-accent: #6366f1;
    --wf-accent-strong: #4f46e5;
    --wf-accent-soft: rgba(99, 102, 241, 0.14);
    --wf-accent-glow: rgba(99, 102, 241, 0.45);

    --wf-bg: #f3f5fa;
    --wf-surface: #ffffff;
    --wf-surface-2: #f8fafc;
    --wf-border: rgba(15, 23, 42, 0.07);
    --wf-border-strong: rgba(15, 23, 42, 0.12);
    --wf-text: #0f172a;
    --wf-text-muted: #64748b;
    --wf-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.12);
    --wf-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.05), 0 16px 32px -16px rgba(15, 23, 42, 0.2);
    --wf-radius: 1rem;
    --wf-radius-sm: 0.625rem;

    --wf-emerald: #10b981;
    --wf-rose: #f43f5e;
    --wf-amber: #f59e0b;
    --wf-sky: #0ea5e9;
    --wf-violet: #8b5cf6;
}

html.dark {
    --wf-bg: #0a0e1a;
    --wf-surface: #111827;
    --wf-surface-2: #0f1629;
    --wf-border: rgba(255, 255, 255, 0.07);
    --wf-border-strong: rgba(255, 255, 255, 0.12);
    --wf-text: #f1f5f9;
    --wf-text-muted: #94a3b8;
    --wf-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
    --wf-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.35), 0 16px 32px -16px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

.fi-body {
    background-color: var(--wf-bg);
    background-image:
        radial-gradient(1200px 500px at 15% -10%, rgba(99, 102, 241, 0.10), transparent 60%),
        radial-gradient(900px 400px at 100% 0%, rgba(16, 185, 129, 0.06), transparent 55%);
    background-attachment: fixed;
    color: var(--wf-text);
    font-feature-settings: 'tnum' 1, 'cv11' 1;
}

html.dark .fi-body {
    background-image:
        radial-gradient(1200px 500px at 15% -10%, rgba(99, 102, 241, 0.14), transparent 60%),
        radial-gradient(900px 400px at 100% 0%, rgba(16, 185, 129, 0.05), transparent 55%);
}

.fi-main {
    padding-inline: 1rem;
}

@media (min-width: 1024px) {
    .fi-main {
        padding-inline: 1.5rem;
    }
}

.fi-page-content {
    gap: 1.5rem;
}

::selection {
    background: rgba(99, 102, 241, 0.25);
}

/* Thin, unobtrusive scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.35) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 999px;
}

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

/* ------------------------------------------------------------------ */
/* Topbar — dark chrome                                                */
/* ------------------------------------------------------------------ */

.fi-topbar {
    background: linear-gradient(90deg, var(--wf-chrome-top) 0%, var(--wf-chrome-mid) 100%);
    box-shadow: inset 0 -1px 0 var(--wf-chrome-border), 0 8px 24px -16px rgba(0, 0, 0, 0.5);
    --tw-ring-color: transparent;
    color: var(--wf-chrome-text);
}

.fi-topbar .fi-icon-btn,
.fi-topbar .fi-icon-btn .fi-icon {
    color: var(--wf-chrome-text);
}

.fi-topbar .fi-icon-btn:hover {
    background: var(--wf-chrome-hover);
}

/* Global search: dark glass pill */
.fi-topbar .fi-global-search .fi-input-wrp {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    --tw-ring-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    min-width: 16rem;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.fi-topbar .fi-global-search .fi-input-wrp:focus-within {
    background: rgba(255, 255, 255, 0.1);
    --tw-ring-color: var(--wf-accent);
    box-shadow: 0 0 0 4px var(--wf-accent-soft);
}

.fi-topbar .fi-global-search .fi-input {
    color: var(--wf-chrome-text-strong);
}

.fi-topbar .fi-global-search .fi-input::placeholder {
    color: var(--wf-chrome-text-muted);
}

.fi-topbar .fi-global-search .fi-icon {
    color: var(--wf-chrome-text-muted);
}

/* Avatar: subtle ring */
.fi-topbar .fi-user-menu-trigger .fi-avatar,
.fi-topbar .fi-avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}

/* Locale switcher (resources/views/filament/locale-switcher.blade.php) */
.wf-locale {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.wf-locale a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--wf-chrome-text-muted);
    transition: color 0.15s ease, background 0.15s ease;
}

.wf-locale a:hover {
    color: var(--wf-chrome-text-strong);
}

.wf-locale a.wf-active {
    background: var(--wf-accent-strong);
    color: #fff;
    box-shadow: 0 4px 12px -4px var(--wf-accent-glow);
}

/* ------------------------------------------------------------------ */
/* Sidebar — dark chrome                                               */
/* ------------------------------------------------------------------ */

.fi-sidebar {
    background: linear-gradient(180deg, var(--wf-chrome-mid) 0%, var(--wf-chrome-top) 40%, var(--wf-chrome-bottom) 100%);
    color: var(--wf-chrome-text);
    box-shadow: inset -1px 0 0 var(--wf-chrome-border);
    --tw-ring-color: transparent;
}

@media (min-width: 1024px) {
    .fi-sidebar {
        background: linear-gradient(180deg, var(--wf-chrome-mid) 0%, var(--wf-chrome-top) 40%, var(--wf-chrome-bottom) 100%);
    }
}

.fi-body-has-topbar .fi-sidebar-header {
    background: transparent;
    --tw-ring-color: transparent;
    box-shadow: inset 0 -1px 0 var(--wf-chrome-border);
}

.fi-sidebar-nav {
    padding: 1rem 0.875rem 1.5rem;
    gap: 0.25rem;
}

.fi-sidebar-nav-groups {
    gap: 1.25rem;
}

.fi-sidebar-group-btn {
    padding: 0.25rem 0.625rem;
}

.fi-sidebar-group-label {
    font-size: 0.6563rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wf-chrome-text-muted);
}

.fi-sidebar-group-collapse-btn,
.fi-sidebar-group-collapse-btn .fi-icon {
    color: var(--wf-chrome-text-muted);
}

.fi-sidebar-group-collapse-btn:hover {
    background: var(--wf-chrome-hover);
}

.fi-sidebar-item-btn {
    position: relative;
    padding: 0.4375rem 0.625rem;
    border-radius: 0.625rem;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.fi-sidebar-item-btn > .fi-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--wf-chrome-text-muted);
    transition: color 0.15s ease;
}

.fi-sidebar-item-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--wf-chrome-text);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background: var(--wf-chrome-hover);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover > .fi-icon,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover > .fi-sidebar-item-label {
    color: var(--wf-chrome-text-strong);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.28), rgba(99, 102, 241, 0.08));
    box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.22);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-inline-start: -0.875rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    border-radius: 999px;
    background: #818cf8;
    box-shadow: 0 0 12px var(--wf-accent-glow);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: #a5b4fc;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--wf-chrome-text-strong);
    font-weight: 600;
}

.fi-sidebar-item-grouped-border-part,
.fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar-item-grouped-border-part-not-last {
    background: rgba(255, 255, 255, 0.18);
}

/* Navigation badges (e.g. overdue invoice count) */
.fi-sidebar-item-badge-ctn .fi-badge {
    font-size: 0.625rem;
    padding: 0.125rem 0.4375rem;
    min-width: 1.25rem;
    border-radius: 999px;
    box-shadow: none;
    --tw-ring-color: transparent;
}

.fi-sidebar-item-badge-ctn .fi-badge:not(.fi-color) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--wf-chrome-text);
}

.fi-sidebar-item-badge-ctn .fi-badge.fi-color-danger {
    background: var(--wf-rose);
    color: #fff;
}

.fi-sidebar-item-badge-ctn .fi-badge.fi-color-warning {
    background: var(--wf-amber);
    color: #1f1300;
}

.fi-sidebar-item-badge-ctn .fi-badge.fi-color-success {
    background: var(--wf-emerald);
    color: #fff;
}

.fi-sidebar-item-badge-ctn .fi-badge.fi-color-primary,
.fi-sidebar-item-badge-ctn .fi-badge.fi-color-info {
    background: var(--wf-accent-strong);
    color: #fff;
}

/* Tenant (company) switcher inside the sidebar: a card */
.fi-sidebar .fi-tenant-menu {
    margin: 0.875rem 0.875rem 0;
}

.fi-sidebar .fi-tenant-menu-trigger {
    padding: 0.625rem 0.75rem;
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px var(--wf-chrome-border);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.fi-sidebar .fi-tenant-menu-trigger:hover,
.fi-sidebar .fi-tenant-menu-trigger:focus-visible {
    background: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.35);
}

.fi-sidebar .fi-tenant-menu-trigger .fi-icon {
    color: var(--wf-chrome-text-muted);
}

.fi-sidebar .fi-tenant-menu-trigger-current-tenant-label {
    color: var(--wf-chrome-text-muted);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.fi-sidebar .fi-tenant-menu-trigger-tenant-name {
    color: var(--wf-chrome-text-strong);
    font-weight: 600;
    font-size: 0.8125rem;
}

.fi-sidebar .fi-tenant-menu-trigger .fi-avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

/* Sidebar close overlay on mobile */
.fi-sidebar-close-overlay {
    backdrop-filter: blur(4px);
}

/* Sidebar collapse/expand buttons */
.fi-sidebar .fi-icon-btn,
.fi-sidebar .fi-icon-btn .fi-icon {
    color: var(--wf-chrome-text-muted);
}

.fi-sidebar .fi-icon-btn:hover {
    background: var(--wf-chrome-hover);
}

/* Collapsed sidebar on desktop: center icons, hide accent bar */
.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Brand (resources/views/filament/brand.blade.php)                    */
/* ------------------------------------------------------------------ */

.wf-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
}

.wf-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    background: linear-gradient(135deg, #818cf8 0%, #4f46e5 55%, #3730a3 100%);
    box-shadow: 0 6px 16px -6px var(--wf-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.wf-brand-mark svg {
    width: 1.125rem;
    height: 1.125rem;
    color: #fff;
}

.wf-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.wf-brand-name {
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--wf-chrome-text-strong);
}

.wf-brand-sub {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #a5b4fc;
}

/* On light surfaces (login page), the wordmark switches to dark text */
.fi-simple-layout .wf-brand-name {
    color: var(--wf-text);
}

/* ------------------------------------------------------------------ */
/* Page header & typography                                            */
/* ------------------------------------------------------------------ */

.fi-header-heading {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
    background: linear-gradient(90deg, var(--wf-text) 0%, var(--wf-text) 70%, var(--wf-accent) 160%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

html.dark .fi-header-heading {
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 75%, #a5b4fc 140%);
    -webkit-background-clip: text;
    background-clip: text;
}

.fi-header-subheading {
    color: var(--wf-text-muted);
}

.fi-breadcrumbs-item-label {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.fi-breadcrumbs .fi-icon {
    opacity: 0.5;
}

/* ------------------------------------------------------------------ */
/* Cards: sections, tables, widgets                                    */
/* ------------------------------------------------------------------ */

.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-tabs:not(.fi-contained) {
    background: var(--wf-surface);
    border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow);
    --tw-ring-color: var(--wf-border);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header {
    padding: 1rem 1.25rem;
}

.fi-section-header-heading {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.fi-section-header-description {
    color: var(--wf-text-muted);
    font-size: 0.8125rem;
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside).fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn {
    border-top-color: var(--wf-border);
}

.fi-ta-ctn .fi-ta-header {
    border-bottom-color: var(--wf-border);
}

.fi-ta-header-heading {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Chart widgets: a little more breathing room */
.fi-wi-chart .fi-section-content {
    padding: 1rem 1.25rem 1.25rem;
}

/* ------------------------------------------------------------------ */
/* Stats overview (KPI cards)                                          */
/* ------------------------------------------------------------------ */

.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    padding: 1.25rem 1.375rem 1.375rem;
}

.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--wf-stat-accent, var(--wf-accent)), transparent 85%);
    opacity: 0.9;
}

.fi-wi-stats-overview-stat::after {
    content: '';
    position: absolute;
    width: 11rem;
    height: 11rem;
    inset-inline-end: -4rem;
    top: -5rem;
    border-radius: 999px;
    background: radial-gradient(closest-side, var(--wf-stat-accent, var(--wf-accent)), transparent);
    opacity: 0.08;
    pointer-events: none;
}

a.fi-wi-stats-overview-stat:hover {
    box-shadow: var(--wf-shadow-hover);
    transform: translateY(-2px);
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wf-text-muted);
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.8125rem;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label-ctn > .fi-icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--wf-stat-accent, var(--wf-accent));
}

.fi-wi-stats-overview-stat-chart > canvas {
    height: 2rem;
}

/* Leave room for the sparkline, which Filament pins to the card's bottom edge */
.fi-wi-stats-overview-stat:has(.fi-wi-stats-overview-stat-chart) {
    padding-bottom: 3.25rem;
}

/* Accent per card — set via Stat::extraAttributes(['class' => 'wf-accent-…']) */
.wf-accent-indigo { --wf-stat-accent: var(--wf-accent); }
.wf-accent-emerald { --wf-stat-accent: var(--wf-emerald); }
.wf-accent-rose { --wf-stat-accent: var(--wf-rose); }
.wf-accent-amber { --wf-stat-accent: var(--wf-amber); }
.wf-accent-sky { --wf-stat-accent: var(--wf-sky); }
.wf-accent-violet { --wf-stat-accent: var(--wf-violet); }

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */

.fi-ta-table {
    --tw-divide-opacity: 1;
}

.fi-ta-table > thead {
    background: var(--wf-surface-2);
}

.fi-ta-header-cell {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wf-text-muted);
}

.fi-ta-header-cell-sort-btn:hover {
    color: var(--wf-text);
}

.fi-ta-table > tbody > .fi-ta-row {
    border-color: var(--wf-border);
}

.fi-ta-row.fi-striped {
    background: rgba(15, 23, 42, 0.018);
}

html.dark .fi-ta-row.fi-striped {
    background: rgba(255, 255, 255, 0.025);
}

.fi-ta-row.fi-clickable:hover {
    background: var(--wf-accent-soft);
}

.fi-ta-text {
    font-variant-numeric: tabular-nums;
}

.fi-ta-cell .fi-ta-text-item {
    font-size: 0.8125rem;
}

.fi-ta-cell .fi-ta-text-description {
    font-size: 0.75rem;
    color: var(--wf-text-muted);
}

.fi-ta-group-header-row > td {
    background: var(--wf-surface-2);
}

.fi-ta-summary-row > td {
    background: var(--wf-surface-2);
    font-weight: 600;
}

.fi-ta-empty-state {
    padding: 3rem 1.5rem;
}

/* Table header toolbar (search, filters) */
.fi-ta-search-field .fi-input-wrp {
    border-radius: 999px;
}

/* ------------------------------------------------------------------ */
/* Badges                                                              */
/* ------------------------------------------------------------------ */

.fi-badge {
    border-radius: 999px;
    padding: 0.1875rem 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    --tw-ring-color: transparent;
    box-shadow: none;
}

.fi-badge:not(.fi-color) {
    background: rgba(100, 116, 139, 0.12);
    color: var(--wf-text-muted);
}

.fi-badge.fi-color {
    background: color-mix(in oklab, var(--color-500) 13%, transparent);
}

html.dark .fi-badge.fi-color {
    background: color-mix(in oklab, var(--color-400) 18%, transparent);
}

.fi-badge.fi-color .fi-icon {
    opacity: 0.9;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.fi-btn {
    border-radius: var(--wf-radius-sm);
    font-weight: 600;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease, color 0.15s ease;
}

.fi-btn:not(.fi-outlined):not(.fi-color) {
    box-shadow: inset 0 0 0 1px var(--wf-border-strong), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.fi-btn.fi-color.fi-color-primary:not(.fi-outlined) {
    background-image: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.3), 0 8px 20px -8px var(--wf-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.fi-btn.fi-color.fi-color-primary:not(.fi-outlined):hover {
    background-image: linear-gradient(135deg, #6d70f3 0%, #5650e8 100%);
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.3), 0 12px 24px -8px var(--wf-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.fi-btn.fi-color.fi-color-primary:not(.fi-outlined):active {
    transform: translateY(0);
}

.fi-btn.fi-color.fi-color-danger:not(.fi-outlined) {
    background-image: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
    box-shadow: 0 8px 20px -8px rgba(225, 29, 72, 0.5);
}

.fi-btn.fi-color.fi-color-success:not(.fi-outlined) {
    background-image: linear-gradient(135deg, #34d399 0%, #059669 100%);
    box-shadow: 0 8px 20px -8px rgba(5, 150, 105, 0.5);
}

.fi-btn.fi-color.fi-color-warning:not(.fi-outlined) {
    background-image: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    box-shadow: 0 8px 20px -8px rgba(217, 119, 6, 0.5);
}

.fi-icon-btn {
    border-radius: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Tabs (list page tabs: Сите / Неплатени / Доспеани / Платени)        */
/* ------------------------------------------------------------------ */

.fi-tabs:not(.fi-contained) {
    padding: 0.375rem;
    border-radius: 999px;
    gap: 0.25rem;
}

.fi-tabs-item {
    border-radius: 999px;
    padding: 0.4375rem 0.875rem;
    font-size: 0.8125rem;
}

.fi-tabs-item.fi-active {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 6px 16px -8px var(--wf-accent-glow);
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active > .fi-icon {
    color: #fff;
}

.fi-tabs-item.fi-active .fi-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.fi-tabs-item .fi-badge {
    font-size: 0.625rem;
    padding: 0.0625rem 0.4375rem;
    min-width: 1.25rem;
}

/* ------------------------------------------------------------------ */
/* Inputs                                                              */
/* ------------------------------------------------------------------ */

.fi-input-wrp {
    border-radius: var(--wf-radius-sm);
    --tw-ring-color: var(--wf-border-strong);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: box-shadow 0.15s ease;
}

.fi-input-wrp:focus-within {
    --tw-ring-color: var(--wf-accent);
    box-shadow: 0 0 0 4px var(--wf-accent-soft);
}

.fi-fo-field-label-content {
    font-weight: 600;
}

.fi-checkbox-input:checked,
.fi-radio-input:checked {
    background-color: var(--wf-accent-strong);
    border-color: var(--wf-accent-strong);
}

/* ------------------------------------------------------------------ */
/* Dropdowns, modals, notifications                                    */
/* ------------------------------------------------------------------ */

.fi-dropdown-panel {
    border-radius: 0.875rem;
    box-shadow: 0 20px 40px -16px rgba(15, 23, 42, 0.3), 0 0 0 1px var(--wf-border);
}

.fi-dropdown-list-item {
    border-radius: 0.5rem;
}

.fi-modal-window {
    border-radius: 1.125rem;
    box-shadow: 0 40px 80px -24px rgba(15, 23, 42, 0.45);
}

.fi-modal-close-overlay {
    backdrop-filter: blur(6px);
}

.fi-no {
    border-radius: 0.875rem;
    box-shadow: var(--wf-shadow-hover);
}

/* ------------------------------------------------------------------ */
/* Pagination                                                          */
/* ------------------------------------------------------------------ */

.fi-pagination-item {
    border-radius: 0.5rem;
}

.fi-pagination-item.fi-active {
    background: var(--wf-accent-soft);
}

.fi-pagination-item.fi-active .fi-pagination-item-label {
    color: var(--wf-accent-strong);
    font-weight: 700;
}

html.dark .fi-pagination-item.fi-active .fi-pagination-item-label {
    color: #a5b4fc;
}

/* ------------------------------------------------------------------ */
/* Empty states                                                        */
/* ------------------------------------------------------------------ */

.fi-empty-state-icon-bg {
    background: var(--wf-accent-soft);
    border-radius: 999px;
}

.fi-empty-state-icon-bg .fi-icon {
    color: var(--wf-accent-strong);
}

html.dark .fi-empty-state-icon-bg .fi-icon {
    color: #a5b4fc;
}

/* ------------------------------------------------------------------ */
/* Login & other "simple" pages                                        */
/* ------------------------------------------------------------------ */

.fi-simple-layout {
    background:
        radial-gradient(900px 600px at 10% 0%, rgba(99, 102, 241, 0.22), transparent 60%),
        radial-gradient(800px 500px at 100% 100%, rgba(16, 185, 129, 0.14), transparent 55%),
        linear-gradient(180deg, var(--wf-bg) 0%, var(--wf-bg) 100%);
}

.fi-simple-main {
    border-radius: 1.25rem;
    box-shadow: 0 30px 60px -24px rgba(15, 23, 42, 0.35), 0 0 0 1px var(--wf-border);
    background: var(--wf-surface);
}

.fi-simple-header-heading {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.fi-simple-layout .wf-brand-mark {
    width: 3rem;
    height: 3rem;
    border-radius: 0.875rem;
}

.fi-simple-layout .wf-brand-mark svg {
    width: 1.625rem;
    height: 1.625rem;
}

.fi-simple-layout .wf-brand-name {
    font-size: 1.375rem;
}

.fi-simple-layout .wf-brand-sub {
    color: var(--wf-accent-strong);
    font-size: 0.6875rem;
}

/* ------------------------------------------------------------------ */
/* Custom report pages (resources/views/filament/pages/*)              */
/* ------------------------------------------------------------------ */

/* 13px base on report pages — matches the sidebar, per project convention */
.fi-page.wf-report .fi-page-content {
    font-size: 13px;
}

.wf-report .fi-page-content > div > .rounded-xl,
.wf-report .fi-page-content .rounded-xl.border {
    border-radius: var(--wf-radius);
    border-color: var(--wf-border);
    box-shadow: var(--wf-shadow);
}

/* Report KPI cards use `text-2xl font-semibold` for the number */
.wf-report .text-2xl.font-semibold {
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

/* Report tables */
.wf-report table thead th {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wf-text-muted);
}

.wf-report table tbody tr:hover {
    background: rgba(99, 102, 241, 0.05);
}

/* Inline heroicons in the custom views carry Tailwind size utilities that
   only exist if the Vite build scanned those views. Pin the few sizes used
   so an icon never balloons to full width on a stale build. */
.fi-page svg.h-3\.5 { height: 0.875rem; }
.fi-page svg.w-3\.5 { width: 0.875rem; }
.fi-page svg.h-4 { height: 1rem; }
.fi-page svg.w-4 { width: 1rem; }
.fi-page svg.h-5 { height: 1.25rem; }
.fi-page svg.w-5 { width: 1.25rem; }
.fi-page svg.h-6 { height: 1.5rem; }
.fi-page svg.w-6 { width: 1.5rem; }
.fi-page svg.shrink-0 { flex-shrink: 0; }

/* Inline report charts (resources/views/filament/partials/chart) */
.wf-inline-chart .fi-wi-chart-frame {
    width: 100%;
}

/* ------------------------------------------------------------------ */
/* Statement header (resources/views/filament/statements/header.blade) */
/* ------------------------------------------------------------------ */

.wf-stmt-card {
    border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow);
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

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