:root {
    --sacofi-surface: #ffffff;
    --sacofi-surface-muted: #f8fafc;
    --sacofi-surface-strong: #eef2f7;
    --sacofi-page: #f4f7fb;
    --sacofi-border: #cbd5e1;
    --sacofi-border-strong: #94a3b8;
    --sacofi-text: #0f172a;
    --sacofi-text-soft: #334155;
    --sacofi-text-muted: #475569;
    --sacofi-text-faint: #64748b;
    --sacofi-hover: #f1f5f9;
    --sacofi-focus: rgba(37, 99, 235, 0.3);
    --sacofi-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.05);
}

.dark {
    --sacofi-surface: #0f172a;
    --sacofi-surface-muted: #162033;
    --sacofi-surface-strong: #1e293b;
    --sacofi-page: #0b1220;
    --sacofi-border: #334155;
    --sacofi-border-strong: #475569;
    --sacofi-text: #f8fafc;
    --sacofi-text-soft: #e2e8f0;
    --sacofi-text-muted: #cbd5e1;
    --sacofi-text-faint: #94a3b8;
    --sacofi-hover: #1e293b;
    --sacofi-focus: rgba(96, 165, 250, 0.35);
    --sacofi-shadow: 0 1px 2px rgba(2, 6, 23, 0.45), 0 10px 28px rgba(2, 6, 23, 0.28);
}

.sacofi-environment-banner {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-color: var(--sacofi-border) !important;
    color: var(--sacofi-text) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.05);
}

.dark .sacofi-environment-banner {
    background-color: rgba(15, 23, 42, 0.94) !important;
}

.sacofi-environment-banner .bg-white,
.sacofi-environment-banner .border-slate-200 {
    border-color: var(--sacofi-border) !important;
}

.sacofi-environment-banner .bg-white {
    background-color: var(--sacofi-surface) !important;
}

.sacofi-environment-banner .text-slate-900 {
    color: var(--sacofi-text) !important;
}

.sacofi-environment-banner .text-slate-700 {
    color: var(--sacofi-text-soft) !important;
}

.sacofi-environment-banner .text-slate-600,
.sacofi-environment-banner .text-slate-500 {
    color: var(--sacofi-text-muted) !important;
}

.sacofi-ui-shell {
    color: var(--sacofi-text);
}

.fi-body,
.fi-layout,
.fi-main-ctn,
.fi-main {
    background-color: var(--sacofi-page) !important;
}

.fi-topbar {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid var(--sacofi-border) !important;
    backdrop-filter: blur(10px);
}

.dark .fi-topbar {
    background-color: rgba(11, 18, 32, 0.9) !important;
}

.fi-topbar-item-button,
.fi-sidebar-item-button,
.fi-sidebar-group-button,
.fi-dropdown-list-item,
.fi-tabs-item {
    color: var(--sacofi-text-soft) !important;
}

.fi-topbar-item-button:hover,
.fi-topbar-item-button:focus-visible,
.fi-sidebar-item-button:hover,
.fi-sidebar-group-button:hover,
.fi-dropdown-list-item:hover,
.fi-tabs-item:hover {
    background-color: var(--sacofi-hover) !important;
}

.fi-topbar-item.fi-active .fi-topbar-item-button,
.fi-tabs-item.fi-active,
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-group.fi-active > .fi-sidebar-group-button {
    background-color: var(--sacofi-surface-muted) !important;
    color: var(--sacofi-text) !important;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.22);
}

@media (min-width: 640px) {
    .fi-page .fi-header {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    .fi-page .fi-header > div:last-child {
        width: 100%;
        margin-top: 0 !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        flex-wrap: wrap;
    }

    .fi-page .fi-header > div:last-child .fi-ac {
        width: 100%;
        justify-content: flex-start !important;
        align-items: center !important;
        row-gap: 0.75rem;
    }
}

.sacofi-ui-shell .bg-white {
    background-color: var(--sacofi-surface) !important;
}

.sacofi-ui-shell .bg-slate-50 {
    background-color: var(--sacofi-surface-muted) !important;
}

.sacofi-ui-shell .bg-slate-100 {
    background-color: var(--sacofi-surface-strong) !important;
}

.sacofi-ui-shell .bg-slate-900,
.sacofi-ui-shell .bg-slate-800,
.sacofi-environment-banner .bg-slate-900,
.sacofi-environment-banner .bg-slate-800 {
    background-color: #0f172a !important;
}

.sacofi-ui-shell .bg-emerald-700 {
    background-color: #047857 !important;
    color: #ffffff !important;
}

.sacofi-ui-shell .bg-rose-700 {
    background-color: #be123c !important;
    color: #ffffff !important;
}

.sacofi-ui-shell .hover\:bg-slate-800:hover,
.sacofi-environment-banner .hover\:bg-slate-800:hover {
    background-color: #1e293b !important;
}

.sacofi-ui-shell .hover\:bg-emerald-800:hover {
    background-color: #065f46 !important;
    color: #ffffff !important;
}

.sacofi-ui-shell .hover\:bg-rose-800:hover {
    background-color: #9f1239 !important;
    color: #ffffff !important;
}

.sacofi-ui-shell .text-white,
.sacofi-environment-banner .text-white,
.sacofi-ui-shell .bg-slate-900,
.sacofi-ui-shell .bg-slate-800,
.sacofi-environment-banner .bg-slate-900,
.sacofi-environment-banner .bg-slate-800 {
    color: #ffffff !important;
}

.sacofi-ui-shell .border-slate-200,
.sacofi-ui-shell .border-slate-300,
.sacofi-ui-shell .divide-slate-100,
.sacofi-ui-shell .divide-slate-200 {
    border-color: var(--sacofi-border) !important;
}

.sacofi-ui-shell .ring-gray-950\/10,
.sacofi-ui-shell .ring-gray-950\/5 {
    --tw-ring-color: rgba(100, 116, 139, 0.22) !important;
}

.dark .sacofi-ui-shell .ring-white\/10,
.dark .sacofi-ui-shell .ring-white\/20 {
    --tw-ring-color: rgba(148, 163, 184, 0.2) !important;
}

.sacofi-ui-shell .text-slate-900 {
    color: var(--sacofi-text) !important;
}

.sacofi-ui-shell .text-slate-800,
.sacofi-ui-shell .text-slate-700 {
    color: var(--sacofi-text-soft) !important;
}

.sacofi-ui-shell .text-slate-600 {
    color: var(--sacofi-text-muted) !important;
}

.sacofi-ui-shell .text-slate-500 {
    color: var(--sacofi-text-faint) !important;
}

.sacofi-ui-shell .shadow-sm {
    box-shadow: var(--sacofi-shadow) !important;
}

.sacofi-ui-shell .hover\:bg-slate-50:hover,
.sacofi-ui-shell .hover\:bg-slate-100:hover {
    background-color: var(--sacofi-hover) !important;
}

.sacofi-ui-shell .hover\:bg-white:hover {
    background-color: var(--sacofi-surface) !important;
}

.sacofi-ui-shell .hover\:border-slate-300:hover {
    border-color: var(--sacofi-border-strong) !important;
}

.sacofi-ui-shell a[href],
.sacofi-ui-shell button,
.sacofi-ui-shell [role='button'],
.sacofi-environment-banner a[href],
.sacofi-environment-banner button {
    outline: none;
}

.sacofi-ui-shell a[href]:focus-visible,
.sacofi-ui-shell button:focus-visible,
.sacofi-ui-shell [role='button']:focus-visible,
.sacofi-environment-banner a[href]:focus-visible,
.sacofi-environment-banner button:focus-visible,
.fi-btn:focus-visible,
.fi-icon-btn:focus-visible,
.fi-dropdown-list-item-btn:focus-visible,
.fi-tabs-item-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--sacofi-focus) !important;
    border-radius: 0.75rem;
}

.fi-input-wrp {
    border-color: var(--sacofi-border-strong) !important;
    background-color: var(--sacofi-surface) !important;
    box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.03) !important;
}

.dark .fi-input-wrp {
    background-color: var(--sacofi-surface-muted) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}

.fi-input-wrp:focus-within {
    border-color: rgb(var(--primary-600)) !important;
    box-shadow: 0 0 0 2px var(--sacofi-focus) !important;
}

.fi-input,
.fi-select-input,
.fi-input-wrp input,
.fi-input-wrp textarea,
.fi-input-wrp select {
    color: var(--sacofi-text) !important;
}

.fi-input::placeholder,
.fi-input-wrp input::placeholder,
.fi-input-wrp textarea::placeholder,
.fi-select-input::placeholder {
    color: var(--sacofi-text-faint) !important;
    opacity: 1 !important;
}

.fi-fo-field-wrp-label span,
.fi-fo-field-wrp-helper-text,
.fi-section-header-description,
.fi-tabs-item-btn {
    color: var(--sacofi-text-muted) !important;
}

.fi-fo-field-wrp-error-message {
    color: #b91c1c !important;
}

.dark .fi-fo-field-wrp-error-message {
    color: #fda4af !important;
}

.fi-ta-table thead th,
.fi-ta-header-cell {
    color: var(--sacofi-text-soft) !important;
}

.fi-ta-table thead,
.fi-ta-header {
    background-color: var(--sacofi-surface-muted) !important;
}

.fi-ta-table tbody tr:nth-child(even),
.fi-ta-record:nth-child(even) {
    background-color: rgba(148, 163, 184, 0.08) !important;
}

.dark .fi-ta-table tbody tr:nth-child(even),
.dark .fi-ta-record:nth-child(even) {
    background-color: rgba(148, 163, 184, 0.1) !important;
}

.fi-ta-table tbody tr:hover,
.fi-ta-record:hover {
    background-color: var(--sacofi-hover) !important;
}

.fi-pagination-overview {
    color: var(--sacofi-text-muted) !important;
}

.fi-pagination-items {
    background-color: var(--sacofi-surface) !important;
    box-shadow: var(--sacofi-shadow) !important;
}

.fi-modal-window,
.fi-section,
.fi-dropdown-panel {
    background-color: var(--sacofi-surface) !important;
    border-color: var(--sacofi-border) !important;
    box-shadow: var(--sacofi-shadow) !important;
}

.dark .fi-modal-window,
.dark .fi-section,
.dark .fi-dropdown-panel {
    background-color: var(--sacofi-surface) !important;
}

.fi-section-header-heading,
.fi-modal-heading,
.fi-topbar-item.fi-active .fi-topbar-item-label,
.fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--sacofi-text) !important;
}

.fi-modal-description,
.fi-dropdown-header-label,
.fi-sidebar-group-label,
.fi-sidebar-item-label {
    color: var(--sacofi-text-muted) !important;
}

.fi-ta-table tbody td,
.fi-ta-record {
    color: var(--sacofi-text-soft) !important;
}

.fi-ta-empty-state,
.fi-section-content-ctn {
    color: var(--sacofi-text-muted) !important;
}

@media (max-width: 1600px) {
    .sacofi-ui-shell .text-xs.leading-5 {
        line-height: 1.45;
    }

    .sacofi-ui-shell table {
        font-size: 0.92rem;
    }
}