/* CRM theme — modern SaaS look layered over Filament (unlayered CSS overrides Filament's layered styles). */
:root {
    --crm-bg: #f5f6fa; --crm-surface: #ffffff; --crm-border: #e8eaf1; --crm-border-strong: #d9dce7;
    --crm-text: #0f172a; --crm-muted: #667085; --crm-sidebar: #0e1122; --crm-sidebar-2: #161a33;
    --crm-radius: 14px; --crm-radius-sm: 10px;
    --crm-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px rgba(16, 24, 40, .05);
    --crm-shadow-lg: 0 12px 32px -12px rgba(16, 24, 40, .18);
}
.dark {
    --crm-bg: #0b0d17; --crm-surface: #12152a; --crm-border: #1f2440; --crm-border-strong: #2a3052;
    --crm-text: #e7e9f3; --crm-muted: #8b91ad; --crm-sidebar: #080a14; --crm-sidebar-2: #0d1020;
}
body.fi-body { background: var(--crm-bg); color: var(--crm-text); -webkit-font-smoothing: antialiased; }

/* Sidebar */
.fi-sidebar { background: linear-gradient(180deg, var(--crm-sidebar) 0%, var(--crm-sidebar-2) 100%); border-inline-end: 1px solid rgba(255, 255, 255, .04); }
.fi-sidebar, .fi-sidebar-nav { scrollbar-color: rgba(255, 255, 255, .14) transparent; }
.fi-sidebar-header, .fi-sidebar .fi-sidebar-header-ctn { background: transparent; box-shadow: none; border: 0; }
.fi-sidebar .fi-logo { color: #fff; font-weight: 800; letter-spacing: -.02em; }
.fi-sidebar-nav { padding-inline: .75rem; }
.fi-sidebar-nav-groups { gap: 1.25rem; }
.fi-sidebar-group-label { color: rgba(255, 255, 255, .38); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fi-sidebar-group-btn .fi-icon, .fi-sidebar-group-collapse-btn { color: rgba(255, 255, 255, .35); }
.fi-sidebar-item-btn { border-radius: 10px; transition: background .15s ease, color .15s ease; }
.fi-sidebar-item-label { color: rgba(255, 255, 255, .74); font-weight: 500; }
.fi-sidebar-item-icon { color: rgba(255, 255, 255, .5); }
.fi-sidebar-item-btn:hover { background: rgba(255, 255, 255, .06); }
.fi-sidebar-item-btn:hover .fi-sidebar-item-label, .fi-sidebar-item-btn:hover .fi-sidebar-item-icon { color: #fff; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: linear-gradient(135deg, var(--primary-600), var(--primary-500)); box-shadow: 0 6px 16px -6px var(--primary-600); }
.fi-sidebar-item.fi-active .fi-sidebar-item-label, .fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: #fff; }
.fi-sidebar .fi-badge { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }

/* Topbar */
.fi-topbar { background: color-mix(in srgb, var(--crm-surface) 82%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--crm-border); box-shadow: none; }
.fi-topbar .fi-logo { font-weight: 800; letter-spacing: -.02em; }
.fi-topbar .fi-global-search-field .fi-input-wrp { background: var(--crm-bg); border-color: transparent; }

/* Page header */
.fi-header-heading { font-size: 1.65rem; font-weight: 800; letter-spacing: -.025em; color: var(--crm-text); }
.fi-header-subheading { color: var(--crm-muted); }
.fi-breadcrumbs-item-label { color: var(--crm-muted); font-size: .8rem; }

/* Cards */
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat {
    background: var(--crm-surface); border: 1px solid var(--crm-border); border-radius: var(--crm-radius); box-shadow: var(--crm-shadow);
}
.fi-section-header { border-bottom: 1px solid var(--crm-border); }
.fi-section-header-heading { font-weight: 700; letter-spacing: -.01em; }
.fi-section-header-description { color: var(--crm-muted); }
.fi-fo-repeater-item { border-radius: 12px; background: color-mix(in srgb, var(--crm-bg) 50%, var(--crm-surface)); }

/* Tables */
.fi-ta-header-ctn, .fi-ta-header-toolbar { border-color: var(--crm-border); }
.fi-ta-table > thead { background: color-mix(in srgb, var(--crm-bg) 60%, var(--crm-surface)); }
.fi-ta-header-cell { color: var(--crm-muted); font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.fi-ta-table > tbody > tr { transition: background .12s ease; }
.fi-ta-table > tbody > tr:hover { background: color-mix(in srgb, var(--primary-500) 4%, transparent); }
.fi-ta-table td, .fi-ta-table th { border-color: var(--crm-border); }
.fi-ta-empty-state-icon-bg { background: color-mix(in srgb, var(--primary-500) 10%, transparent); }

/* Stats */
.fi-wi-stats-overview-stat { position: relative; overflow: hidden; }
.fi-wi-stats-overview-stat::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--primary-500), var(--primary-300)); }
.fi-wi-stats-overview-stat-value { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; direction: ltr; text-align: start; }
.fi-wi-stats-overview-stat-label { color: var(--crm-muted); font-weight: 600; }

/* Controls */
.fi-btn { border-radius: var(--crm-radius-sm); font-weight: 600; transition: transform .08s ease, box-shadow .15s ease; }
.fi-btn:active { transform: translateY(1px); }
.fi-btn.fi-color-primary:not(.fi-outlined) { background: linear-gradient(135deg, var(--primary-600), var(--primary-500)); box-shadow: 0 6px 14px -6px var(--primary-600); }
.fi-input-wrp { border-radius: var(--crm-radius-sm); }
.fi-input-wrp:focus-within { box-shadow: 0 0 0 1px var(--primary-500), 0 0 0 4px color-mix(in srgb, var(--primary-500) 16%, transparent); }
.fi-badge { border-radius: 999px; font-weight: 600; }
.fi-tabs { border-radius: 12px; background: var(--crm-surface); border: 1px solid var(--crm-border); box-shadow: var(--crm-shadow); }
.fi-dropdown-panel, .fi-modal-window { border-radius: 16px; box-shadow: var(--crm-shadow-lg); }
.fi-modal-close-overlay { backdrop-filter: blur(3px); }
.fi-avatar { box-shadow: 0 0 0 2px var(--crm-surface), 0 0 0 3px var(--crm-border-strong); }

/* Login / simple pages */
.fi-simple-layout {
    background: radial-gradient(1200px 600px at 100% 0%, color-mix(in srgb, var(--primary-500) 22%, transparent), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, color-mix(in srgb, #06b6d4 16%, transparent), transparent 60%), var(--crm-bg);
}
.fi-simple-main { background: color-mix(in srgb, var(--crm-surface) 94%, transparent); border: 1px solid var(--crm-border); border-radius: 20px; box-shadow: var(--crm-shadow-lg); }
.fi-simple-header-heading { font-weight: 800; letter-spacing: -.02em; }

* { scrollbar-width: thin; }
