/* ═══════════════════════════════════════════════════════════════
   LITMUSUITE ADMIN — DARK-FIRST THEME
   No light mode. No toggle. Always dark. Slate-800/900 palette.
   Last updated: 2026-03-26
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. ROOT & GLOBAL ──────────────────────────────────────── */
:root, html, html.dark {
    color-scheme: dark !important;
    --fi-body-bg: #0F172A;
}

body, .fi-layout, .fi-body {
    background-color: #0F172A !important;
    color: #E2E8F0 !important;
}

.fi-main, main {
    background-color: #0F172A !important;
}

/* ── 2. SIDEBAR ────────────────────────────────────────────── */
.fi-sidebar {
    background-color: #0F172A !important;
}

.fi-sidebar-header {
    background-color: #0F172A !important;
    border-color: #1E293B !important;
}

.fi-sidebar-nav-groups {
    background-color: #0F172A !important;
}

.fi-sidebar-item a,
.fi-sidebar-item button {
    color: #94A3B8 !important;
}

.fi-sidebar-item a:hover,
.fi-sidebar-item button:hover {
    background-color: #1E293B !important;
    color: #E2E8F0 !important;
}

.fi-sidebar-item-active a,
.fi-sidebar-item-active button {
    background-color: #1E293B !important;
    color: #F59E0B !important;
}

.fi-sidebar-group-label {
    color: #64748B !important;
}

/* ── 3. TOPBAR ─────────────────────────────────────────────── */
.fi-topbar {
    background-color: #0F172A !important;
    border-bottom-color: #1E293B !important;
}

.fi-topbar nav {
    background-color: #0F172A !important;
}

.fi-header {
    border-bottom-color: #1E293B !important;
}

/* ── 4. CARDS & SECTIONS ───────────────────────────────────── */
.fi-section,
.fi-card,
.fi-in-entry-wrp,
[class*='fi-section'] {
    background-color: #1E293B !important;
    color: #E2E8F0 !important;
    border-color: #334155 !important;
}

.fi-section-header {
    border-bottom-color: #334155 !important;
}

.fi-section-header-heading,
.fi-section .fi-section-header-heading {
    color: #F1F5F9 !important;
}

.fi-section-description,
.fi-fo-field-wrp label {
    color: #94A3B8 !important;
}

/* ── 5. TABLES ─────────────────────────────────────────────── */
.fi-ta-header-cell {
    background-color: #0F172A !important;
    color: #94A3B8 !important;
}

.fi-ta-row {
    background-color: #1E293B !important;
    color: #E2E8F0 !important;
}

.fi-ta-row:nth-child(even) {
    background-color: #1A2332 !important;
}

.fi-ta-row:hover {
    background-color: #334155 !important;
}

.fi-ta-row td {
    border-color: #334155 !important;
}

/* Table selection */
.fi-ta-row.fi-ta-row-selected,
.fi-ta-row[data-selected="true"] {
    color: #FFF !important;
}

.fi-ta-row.fi-ta-row-selected td,
.fi-ta-row:hover td {
    color: inherit !important;
}

/* Table empty state */
.fi-ta-empty-state {
    background-color: #1E293B !important;
    color: #94A3B8 !important;
}

/* Table content (the card wrapping the table) */
.fi-ta-ctn {
    background-color: #1E293B !important;
    border-color: #334155 !important;
}

/* ── 6. DROPDOWNS — THE NUCLEAR FIX ───────────────────────── */

/* Filament dropdown panels */
.fi-dropdown-panel,
div[class*="fi-dropdown-panel"] {
    background-color: #1E293B !important;
    border-color: #334155 !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4) !important;
}

/* Override the inline bg-white that Filament puts on dropdown panels */
div.fi-dropdown-panel.bg-white,
div[class*="bg-white"].fi-dropdown-panel {
    background-color: #1E293B !important;
}

/* Dropdown dividers */
.fi-dropdown-panel > .divide-y > * + * {
    border-color: #334155 !important;
}

.fi-dropdown-panel .divide-gray-100 > * + *,
.fi-dropdown-panel .divide-gray-950\/5 > * + * {
    border-color: #334155 !important;
}

/* Dropdown list items */
.fi-dropdown-list-item,
.fi-dropdown-list-item-button {
    color: #CBD5E1 !important;
}

.fi-dropdown-list-item:hover,
.fi-dropdown-list-item-button:hover {
    background-color: #334155 !important;
    color: #FFF !important;
}

/* Dropdown header */
.fi-dropdown-header {
    color: #E2E8F0 !important;
}

.fi-dropdown-header-label {
    color: #E2E8F0 !important;
}

.fi-dropdown-header-description {
    color: #94A3B8 !important;
}

/* User menu dropdown specifically */
.fi-user-menu .fi-dropdown-panel {
    background-color: #1E293B !important;
}

/* ── 7. NATIVE SELECTS & OPTIONS ───────────────────────────── */
select,
select option,
.fi-select-wrp select {
    background-color: #0F172A !important;
    color: #E2E8F0 !important;
    border-color: #334155 !important;
}

option {
    background-color: #1E293B !important;
    color: #E2E8F0 !important;
}

/* Listbox (Headless UI / Alpine select) */
[role="listbox"],
[role="listbox"] [role="option"],
ul[role="listbox"] {
    background-color: #1E293B !important;
    color: #E2E8F0 !important;
    border-color: #334155 !important;
}

[role="option"]:hover,
[role="option"][data-focus],
[role="option"][aria-selected="true"] {
    background-color: #334155 !important;
    color: #FFF !important;
}

/* Menu role (used by Headless UI) */
[role="menu"] {
    background-color: #1E293B !important;
    border-color: #334155 !important;
}

[role="menuitem"] {
    color: #CBD5E1 !important;
}

[role="menuitem"]:hover {
    background-color: #334155 !important;
    color: #FFF !important;
}

/* ── 8. FORM INPUTS ────────────────────────────────────────── */
.fi-input-wrp,
.fi-select-wrp,
.fi-textarea-wrp {
    background-color: #0F172A !important;
    border-color: #334155 !important;
    color: #E2E8F0 !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
textarea {
    background-color: #0F172A !important;
    border-color: #334155 !important;
    color: #E2E8F0 !important;
}

.fi-input-wrp:focus-within {
    border-color: #F59E0B !important;
    box-shadow: 0 0 0 1px #F59E0B !important;
}

::placeholder {
    color: #64748B !important;
}

/* Checkbox / toggle */
.fi-checkbox-input,
.fi-toggle-input {
    border-color: #475569 !important;
}

/* ── 9. MODALS ─────────────────────────────────────────────── */
.fi-modal-window,
.fi-modal-content,
[class*="fi-modal"] .fi-modal-window {
    background-color: #1E293B !important;
    border-color: #334155 !important;
    color: #E2E8F0 !important;
}

.fi-modal-header {
    border-bottom-color: #334155 !important;
}

.fi-modal-footer {
    border-top-color: #334155 !important;
    background-color: #1A2332 !important;
}

.fi-modal-heading {
    color: #F1F5F9 !important;
}

.fi-modal-description {
    color: #94A3B8 !important;
}

/* Modal overlay */
.fi-overlay,
.fi-modal-close-overlay {
    background-color: rgba(15, 23, 42, 0.7) !important;
}

/* ── 10. NOTIFICATIONS / TOASTS ────────────────────────────── */

.fi-notification {
    background-color: #1E293B !important;
    border-color: #334155 !important;
    color: #E2E8F0 !important;
}

/* ── 11. PAGINATION ────────────────────────────────────────── */
.fi-pagination-items button,
.fi-pagination-items span,
.fi-pagination-items a {
    color: #94A3B8 !important;
    border-color: #334155 !important;
}

.fi-pagination-items button:hover,
.fi-pagination-items a:hover {
    background-color: #334155 !important;
    color: #FFF !important;
}

/* Per-page select */
.fi-ta-page-selector select,
.fi-pagination select,
select[wire\\:model*="perPage"],
select[wire\\:model\\.live*="tableRecordsPerPage"] {
    background-color: #0F172A !important;
    color: #E2E8F0 !important;
    border-color: #334155 !important;
}

/* ── 12. TABS ──────────────────────────────────────────────── */
.fi-tabs-tab {
    color: #94A3B8 !important;
}

.fi-tabs-tab[aria-selected="true"],
.fi-tabs-tab.fi-active {
    color: #F59E0B !important;
    border-color: #F59E0B !important;
}

/* ── 13. BADGES ────────────────────────────────────────────── */
.fi-badge {
    border-color: #334155 !important;
}

/* ── 14. BUTTONS ───────────────────────────────────────────── */
.fi-btn {
    border-color: #334155 !important;
}

/* ── 15. STAT CARDS ────────────────────────────────────────── */
[class*="fi-wi-stats-overview-stat"] {
    background-color: #1E293B !important;
    color: #E2E8F0 !important;
    border-color: #334155 !important;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

[class*="fi-wi-stats-overview-stat"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* Compact stat layout */
.fi-wi-stats-overview-stats-ctn {
    gap: 0.75rem !important;
}

.fi-wi-stats-overview-stat {
    padding: 0.75rem 1rem !important;
    min-height: auto !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.25rem !important;
    line-height: 1.5rem !important;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.75rem !important;
    margin-top: 0 !important;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.6875rem !important;
    margin-top: 0.125rem !important;
}

@media (min-width: 1024px) {
    .fi-wi-stats-overview-stats-ctn {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .fi-wi-stats-overview-stats-ctn {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* ── 16. INFO LISTS ────────────────────────────────────────── */
.fi-in-entry-wrp-label {
    color: #94A3B8 !important;
}

.fi-in-entry-wrp-content {
    color: #E2E8F0 !important;
}

/* ── 17. AUTH / LOGIN ──────────────────────────────────────── */
.fi-simple-layout {
    background-color: #0F172A !important;
}

.fi-simple-main-ctn {
    background-color: transparent !important;
}

.fi-simple-page {
    background-color: #1E293B !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4) !important;
}

.fi-simple-page h2,
.fi-simple-page p,
.fi-simple-page label {
    color: #E2E8F0 !important;
}

.fi-simple-page a {
    color: #F59E0B !important;
}

/* ── 18. WIDGET CONTAINERS ─────────────────────────────────── */
.fi-widgets {
    background-color: transparent !important;
}

/* ── 19. FOOTER ────────────────────────────────────────────── */
.fi-footer {
    background-color: #0F172A !important;
    border-top-color: #1E293B !important;
    color: #64748B !important;
}

/* ── 20. LOADING / OVERLAY ─────────────────────────────────── */
.fi-overlay {
    background-color: rgba(15, 23, 42, 0.6) !important;
}

/* ── 21. SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0F172A;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* ── 22. CATCH-ALL: ANY bg-white or bg-gray-* ──────────────── */
/* Nuclear override: any element with Tailwind light bg classes */
.fi-body .bg-white,
.fi-body .bg-gray-50,
.fi-body .bg-gray-100,
.fi-layout .bg-white,
.fi-layout .bg-gray-50,
.fi-layout .bg-gray-100 {
    background-color: #1E293B !important;
}

.fi-body .text-gray-950,
.fi-body .text-gray-900,
.fi-body .text-gray-800,
.fi-layout .text-gray-950,
.fi-layout .text-gray-900,
.fi-layout .text-gray-800 {
    color: #E2E8F0 !important;
}

.fi-body .text-gray-700,
.fi-body .text-gray-600,
.fi-layout .text-gray-700,
.fi-layout .text-gray-600 {
    color: #94A3B8 !important;
}

.fi-body .text-gray-500,
.fi-body .text-gray-400,
.fi-layout .text-gray-500,
.fi-layout .text-gray-400 {
    color: #64748B !important;
}

.fi-body .border-gray-100,
.fi-body .border-gray-200,
.fi-body .border-gray-300,
.fi-layout .border-gray-100,
.fi-layout .border-gray-200,
.fi-layout .border-gray-300,
.fi-body .divide-gray-100 > * + *,
.fi-body .divide-gray-200 > * + * {
    border-color: #334155 !important;
}

.fi-body .ring-gray-950\/5,
.fi-layout .ring-gray-950\/5 {
    --tw-ring-color: rgba(51, 65, 85, 1) !important;
}

/* ── 23. PRODUCT BADGES ────────────────────────────────────── */
.product-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
}

.product-badge--sites {
    background-color: #1E3A5F;
    color: #93C5FD;
}

.product-badge--campaigns {
    background-color: #064E3B;
    color: #6EE7B7;
}

.product-badge--unified {
    background-color: #4C1D95;
    color: #C4B5FD;
}

/* ── 24. ALERT CARDS ───────────────────────────────────────── */
.alert-card {
    padding: 1rem;
    border-radius: 0.5rem;
    border-left-width: 4px;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.alert-card--critical {
    background-color: #991B1B;
    color: #FEE2E2;
    border-left-color: #EF4444;
}

.alert-card--warning {
    background-color: #92400E;
    color: #FEF3C7;
    border-left-color: #F59E0B;
}

.alert-card--info {
    background-color: #1E3A5F;
    color: #DBEAFE;
    border-left-color: #3B82F6;
}

.alert-card--success {
    background-color: #064E3B;
    color: #D1FAE5;
    border-left-color: #10B981;
}

/* ── 25. PRODUCT SWITCHER ──────────────────────────────────── */
.product-switcher-wrap {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

.product-switcher-tabs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.product-tab {
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 150ms ease;
    white-space: nowrap;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    background: transparent;
}

.product-tab--inactive {
    color: #9CA3AF;
}

.product-tab--inactive:hover {
    color: #D1D5DB;
}

.product-tab--active.product-tab--sites {
    background-color: #2563EB;
    color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.product-tab--active.product-tab--campaigns {
    background-color: #059669;
    color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.product-tab--active.product-tab--all {
    background-color: #7C3AED;
    color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
    .product-switcher-wrap {
        position: sticky;
        top: 0;
        z-index: 40;
        width: 100%;
        margin: 0;
        padding: 0.5rem 0.75rem;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid #1E293B;
    }

    .product-switcher-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
    }

    .product-switcher-tabs::-webkit-scrollbar {
        display: none;
    }

    .product-tab {
        flex: 1;
        text-align: center;
        padding: 0.625rem 0.75rem;
        border-radius: 0;
        min-height: 2.75rem;
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.025em;
        border-bottom: 3px solid transparent;
    }

    .product-tab--active.product-tab--sites {
        background: transparent;
        color: #2563EB;
        border-bottom-color: #2563EB;
        box-shadow: none;
    }

    .product-tab--active.product-tab--campaigns {
        background: transparent;
        color: #059669;
        border-bottom-color: #059669;
        box-shadow: none;
    }

    .product-tab--active.product-tab--all {
        background: transparent;
        color: #7C3AED;
        border-bottom-color: #7C3AED;
        box-shadow: none;
    }
}

/* ── 26. SEGMENT DROPDOWN ──────────────────────────────────── */
.segment-dropdown-panel {
    background-color: #1E293B !important;
    border: 1px solid #334155 !important;
}

.segment-dropdown-item {
    color: #CBD5E1;
    transition: background-color 150ms ease, color 150ms ease;
}

.segment-dropdown-item:hover {
    background-color: #334155;
    color: #FFF;
}

.segment-dropdown-item--active {
    background-color: #334155;
    color: #FFF;
}

/* ── 27. FILAMENT DARK CLASS OVERRIDES ─────────────────────── */
/* Filament uses dark: prefix but we want dark always */
.dark\:bg-gray-900 {
    background-color: #0F172A !important;
}

.dark\:bg-gray-800 {
    background-color: #1E293B !important;
}

.dark\:text-white {
    color: #FFF !important;
}

.dark\:text-gray-200 {
    color: #E2E8F0 !important;
}

.dark\:border-gray-700 {
    border-color: #334155 !important;
}

/* ── 28. ACTION ICONS & LINKS ──────────────────────────────── */
.fi-ta-actions a,
.fi-ta-actions button {
    color: #94A3B8 !important;
}

.fi-ta-actions a:hover,
.fi-ta-actions button:hover {
    color: #F59E0B !important;
}

/* ── 29. GLOBAL LINK COLOR ─────────────────────────────────── */
.fi-body a:not(.fi-btn):not(.fi-ta-actions a):not(.product-tab):not(.fi-sidebar-item a) {
    color: #60A5FA;
}

/* ── 30. TABLE SEARCH & FILTERS BAR ───────────────────────── */
.fi-ta-header-toolbar {
    background-color: #1E293B !important;
    border-color: #334155 !important;
}

.fi-ta-search-field input {
    background-color: #0F172A !important;
    color: #E2E8F0 !important;
    border-color: #334155 !important;
}

/* Filter form */
.fi-ta-filters-form {
    background-color: #1E293B !important;
}

/* ── 31. BREADCRUMBS ───────────────────────────────────────── */
.fi-breadcrumbs li,
.fi-breadcrumbs a {
    color: #94A3B8 !important;
}

.fi-breadcrumbs a:hover {
    color: #E2E8F0 !important;
}

/* ── 32. TOOLTIP ───────────────────────────────────────────── */
[role="tooltip"],
.tippy-box,
.tippy-content {
    background-color: #1E293B !important;
    color: #E2E8F0 !important;
    border-color: #334155 !important;
}

/* ── 33. FORCE DARK ONLY — HIDE THEME TOGGLE ──────────────── */
/* Dark mode is forced; no toggle needed */
.fi-theme-switcher,
[x-data*="theme"] button[x-on\:click*="theme"],
button[aria-label="Toggle dark mode"],
button[aria-label="Switch to light mode"],
button[aria-label="Switch to dark mode"] {
    display: none !important;
}

/* ===== Section 33: Tailwind utility class fallbacks ===== */
/* These classes are used in custom blade templates but NOT in Filament's compiled CSS */

.fi-body .grid { display: grid; }
.fi-body .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.fi-body .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (min-width: 640px) {
    .fi-body .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .fi-body .sm\:flex-row { flex-direction: row !important; }
}
@media (min-width: 768px) {
    .fi-body .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    .fi-body .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
.fi-body .flex { display: flex; }
.fi-body .flex-1 { flex: 1 1 0% !important; }
.fi-body .flex-col { flex-direction: column !important; }
.fi-body .flex-wrap { flex-wrap: wrap !important; }
.fi-body .flex-shrink-0 { flex-shrink: 0 !important; }
.fi-body .items-center { align-items: center !important; }
.fi-body .justify-between { justify-content: space-between !important; }
.fi-body .gap-2 { gap: 0.5rem !important; }
.fi-body .gap-3 { gap: 0.75rem !important; }
.fi-body .gap-4 { gap: 1rem !important; }

/* Spacing utilities */
.fi-body .mb-4 { margin-bottom: 1rem !important; }
.fi-body .mb-6 { margin-bottom: 1.5rem !important; }
.fi-body .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.fi-body .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.fi-body .py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
.fi-body .p-4 { padding: 1rem !important; }

/* Text utilities */
.fi-body .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
.fi-body .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.fi-body .text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.fi-body .text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
.fi-body .font-bold { font-weight: 700 !important; }
.fi-body .font-semibold { font-weight: 600 !important; }
.fi-body .font-medium { font-weight: 500 !important; }
.fi-body .uppercase { text-transform: uppercase !important; }
.fi-body .tracking-wider { letter-spacing: 0.05em !important; }
.fi-body .truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.fi-body .text-left { text-align: left !important; }
.fi-body .text-center { text-align: center !important; }
.fi-body .text-right { text-align: right !important; }
.fi-body .leading-tight { line-height: 1.25 !important; }

/* Dark color utilities — FORCE these since Filament doesn't compile them */
.fi-body .text-slate-100 { color: #f1f5f9 !important; }
.fi-body .text-slate-200 { color: #e2e8f0 !important; }
.fi-body .text-slate-300 { color: #cbd5e1 !important; }
.fi-body .text-slate-400 { color: #94a3b8 !important; }
.fi-body .text-slate-500 { color: #64748b !important; }
.fi-body .text-slate-600 { color: #475569 !important; }
.fi-body .text-amber-400 { color: #fbbf24 !important; }
.fi-body .text-amber-300 { color: #fcd34d !important; }
.fi-body .text-blue-300 { color: #93c5fd !important; }
.fi-body .text-emerald-300 { color: #6ee7b7 !important; }
.fi-body .text-red-300 { color: #fca5a5 !important; }
.fi-body .text-violet-300 { color: #c4b5fd !important; }

.fi-body .bg-slate-700\/50 { background-color: rgba(51,65,85,0.5) !important; }
.fi-body .bg-slate-800 { background-color: #1e293b !important; }
.fi-body .bg-slate-800\/80 { background-color: rgba(30,41,59,0.8) !important; }
.fi-body .bg-slate-900 { background-color: #0f172a !important; }
.fi-body .bg-slate-900\/50 { background-color: rgba(15,23,42,0.5) !important; }
.fi-body .bg-blue-500\/15 { background-color: rgba(59,130,246,0.15) !important; }
.fi-body .bg-emerald-500\/15 { background-color: rgba(16,185,129,0.15) !important; }
.fi-body .bg-red-500\/15 { background-color: rgba(239,68,68,0.15) !important; }
.fi-body .bg-violet-500\/15 { background-color: rgba(139,92,246,0.15) !important; }
.fi-body .bg-slate-500\/15 { background-color: rgba(148,163,184,0.15) !important; }

/* Border utilities */
.fi-body .border-slate-700\/50 { border-color: rgba(51,65,85,0.5) !important; }
.fi-body .border-b { border-bottom-width: 1px !important; }
.fi-body .border-t { border-top-width: 1px !important; }
.fi-body .rounded-xl { border-radius: 0.75rem !important; }
.fi-body .rounded-lg { border-radius: 0.5rem !important; }
.fi-body .rounded-md { border-radius: 0.375rem !important; }
.fi-body .rounded-full { border-radius: 9999px !important; }

/* Ring utilities */
.fi-body .ring-1 { box-shadow: 0 0 0 1px var(--tw-ring-color, rgba(51,65,85,0.5)) !important; }
.fi-body .ring-slate-600\/50 { --tw-ring-color: rgba(71,85,105,0.5) !important; }
.fi-body .ring-slate-700\/50 { --tw-ring-color: rgba(51,65,85,0.5) !important; }

/* Divide utilities */
.fi-body .divide-y > :not(:first-child) { border-top: 1px solid rgba(51,65,85,0.3) !important; }
.fi-body .divide-x > :not(:first-child) { border-left: 1px solid rgba(51,65,85,0.3) !important; }
.fi-body .divide-slate-700\/30 > :not(:first-child) { border-color: rgba(51,65,85,0.3) !important; }

/* Layout */
.fi-body .w-full { width: 100% !important; }
.fi-body .min-w-0 { min-width: 0 !important; }
.fi-body .overflow-hidden { overflow: hidden !important; }
.fi-body .overflow-x-auto { overflow-x: auto !important; }

/* Table hover */
.fi-body tr.hover\:bg-slate-700\/30:hover { background-color: rgba(51,65,85,0.3) !important; }
.fi-body .transition-colors { transition: background-color 0.15s ease !important; }

/* Shadow */
.fi-body .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05) !important; }

/* Tabular nums */
.fi-body .tabular-nums { font-variant-numeric: tabular-nums !important; }

/* Disabled state */
.fi-body .disabled\:opacity-40:disabled { opacity: 0.4 !important; }
.fi-body .disabled\:opacity-50:disabled { opacity: 0.5 !important; }

/* Inline-flex */
.fi-body .inline-flex { display: inline-flex; }

/* Scale hover for metric cards */
.fi-body .hover\:scale-\[1\.01\]:hover { transform: scale(1.01) !important; }

/* Text decoration */
.fi-body .hover\:underline:hover { text-decoration: underline !important; }
.fi-body .hover\:text-amber-300:hover { color: #fcd34d !important; }

/* ── 34. ALPINE x-show / x-cloak FIX ──────────────────────── */
/* Alpine sets display:none inline when x-show is false.        */
/* The .fi-body .flex !important rule was overriding it.        */
/* This ensures Alpine-controlled visibility always wins.       */
[x-cloak] { display: none !important; }
.fi-body [style*="display: none"] { display: none !important; }
.fi-body [style*="display:none"] { display: none !important; }
.fi-no { background-color: transparent !important; }

/* ══════════════════════════════════════════════════════════════
   35. GLOBAL COMPACT ADMIN — PRO DENSITY
   Makes all forms, tables, and sections tight and professional.
   Added: 2026-03-30
   ══════════════════════════════════════════════════════════════ */

/* ── 35a. COMPACT FORM SECTIONS ────────────────────────────── */
.fi-section {
    border-radius: 0.5rem !important;
}

.fi-section-content {
    padding: 0.75rem 1rem !important;
}

.fi-section-header {
    padding: 0.625rem 1rem !important;
}

.fi-section-header-heading {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* ── 35b. COMPACT FORM FIELDS ──────────────────────────────── */
.fi-fo-field-wrp {
    gap: 0.25rem !important;
}

.fi-fo-field-wrp label {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

.fi-input-wrp {
    min-height: 2.25rem !important;
}

.fi-input-wrp input,
.fi-select-wrp select,
.fi-textarea-wrp textarea {
    font-size: 0.8125rem !important;
    padding: 0.375rem 0.625rem !important;
}

.fi-textarea-wrp textarea {
    min-height: 5rem !important;
}

/* Reduce gap between form fields */
.fi-fo-component-ctn {
    gap: 0.75rem !important;
}

/* ── 35c. COMPACT TABLES ───────────────────────────────────── */
.fi-ta-header-cell {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.fi-ta-cell {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
}

.fi-ta-row {
    min-height: auto !important;
}

/* Table container: tighter padding */
.fi-ta-ctn {
    border-radius: 0.5rem !important;
}

/* Table search and header toolbar */
.fi-ta-header-toolbar {
    padding: 0.5rem 0.75rem !important;
}

/* Pagination: compact */
.fi-ta-pagination {
    padding: 0.5rem 0.75rem !important;
}

/* ── 35d. COMPACT BADGES ───────────────────────────────────── */
.fi-badge {
    font-size: 0.6875rem !important;
    padding: 0.125rem 0.5rem !important;
    font-weight: 600 !important;
}

/* ── 35e. COMPACT BUTTONS ──────────────────────────────────── */
.fi-btn-sm,
.fi-ta-actions .fi-btn {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
    gap: 0.25rem !important;
}

/* ── 35f. COMPACT ACTION ICONS ─────────────────────────────── */
.fi-ta-actions {
    gap: 0.25rem !important;
}

.fi-icon-btn-sm {
    width: 1.75rem !important;
    height: 1.75rem !important;
}

/* ── 35g. COMPACT PAGE HEADERS ─────────────────────────────── */
.fi-header {
    padding: 1rem 0 !important;
    gap: 0.75rem !important;
}

.fi-page-header-heading {
    font-size: 1.25rem !important;
}

.fi-page-header-subheading {
    font-size: 0.8125rem !important;
}

/* ── 35h. COMPACT RELATION MANAGERS ────────────────────────── */
.fi-resource-relation-manager {
    gap: 0.5rem !important;
}

/* ── 35i. COMPACT INFOLISTS ────────────────────────────────── */
.fi-in-entry-wrp {
    gap: 0.125rem !important;
    padding: 0.375rem 0 !important;
}

.fi-in-entry-wrp-label {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.fi-in-entry-wrp-content {
    font-size: 0.8125rem !important;
}

/* ── 35j. TIGHT FORM LAYOUT (2/3 + 1/3 SIDEBAR) ──────────── */
/* When forms use columns(3) with Group columnSpan 2 + 1, tighten gap */
.fi-fo-component-ctn.fi-fo-component-ctn-has-inline-label {
    gap: 0.5rem !important;
}

/* Collapsed sections: smaller toggle */
.fi-section-collapse-button {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

/* ── 35k. GLOBAL TABLE DENSITY: COMFORTABLE DEFAULT ───────── */
/* Remove excess whitespace from table containers */
.fi-ta-content {
    padding: 0 !important;
}

/* Table footer (bulk actions bar) */
.fi-ta-footer {
    padding: 0.5rem 0.75rem !important;
}

/* ── 35l. FORM GRID TIGHTENING ─────────────────────────────── */
.fi-fo-grid {
    gap: 0.75rem !important;
}

/* ── 35m. PLACEHOLDER FIELDS (read-only stats in sidebar) ──── */
.fi-fo-placeholder {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
}

/* ── 36. DATABASE NOTIFICATIONS FIX ───────────────────────── */
/* Filament topbar has overflow-x-clip which clips the fixed-position
   database notifications slide-over panel. Override to visible. */
.fi-topbar {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Ensure the database notifications slide-over renders above everything */
[data-fi-modal-id="database-notifications"] .fi-modal-close-overlay,
[data-fi-modal-id="database-notifications"] > div[class*="fixed"] {
    z-index: 50 !important;
}

/* Database notifications slide-over panel styling */
[data-fi-modal-id="database-notifications"] .fi-modal-slide-over-window {
    background-color: #1E293B !important;
    border-left: 1px solid #334155 !important;
    max-height: 100vh !important;
}

/* Notification items in the slide-over */
[data-fi-modal-id="database-notifications"] .fi-no-notification {
    background-color: #1E293B !important;
    border-color: #334155 !important;
    color: #E2E8F0 !important;
}

[data-fi-modal-id="database-notifications"] .fi-no-notification:hover {
    background-color: #334155 !important;
}