@layer theme {
    :root {
        /* Step A: Bridge Filament's native variables to Tailwind tokens if needed */
        --color-primary-50: var(--primary-50, #fffbeb);
        --color-primary-500: var(--primary-500, #ef4444);
        --color-primary-600: var(--primary-600, #dc2626);

        --legacy-bg-page: #fff7e4;
        --legacy-bg-sidebar: #f8e4bf;
        --legacy-bg-surface: #fffdf8;
        --legacy-bg-topbar: #e08f2a;
        --legacy-bg-topbar-dark: #c41f00;

        --legacy-text-primary: #4a2e18;
        --legacy-text-muted: #8e5d34;

        --legacy-border: #ebb170;
        --legacy-border-strong: #de8f46;

        --legacy-primary-50:  #fff8f2;
        --legacy-primary-100: #fee8d8;
        --legacy-primary-200: #fcd2b0;
        --legacy-primary-300: #f8b581;
        --legacy-primary-400: #f28f4d;
        --legacy-primary-500: #df621f;
        --legacy-primary-600: #c34d12;
        --legacy-primary-700: #a13e0f;
        --legacy-primary-800: #873610;
        --legacy-primary-900: #6f300f;
        --legacy-primary-950: #3d1708;
    }
}

@layer base {
    html.fi {
        --primary-50: var(--legacy-primary-50);
        --primary-100: var(--legacy-primary-100);
        --primary-200: var(--legacy-primary-200);
        --primary-300: var(--legacy-primary-300);
        --primary-400: var(--legacy-primary-400);
        --primary-500: var(--legacy-primary-500);
        --primary-600: var(--legacy-primary-600);
        --primary-700: var(--legacy-primary-700);
        --primary-800: var(--legacy-primary-800);
        --primary-900: var(--legacy-primary-900);
        --primary-950: var(--legacy-primary-950);
    }
}

@layer components {

    /* ==========================================================================
    Filament Core Framework Class Overrides
    ========================================================================== */

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

    .fi-topbar {
        background: linear-gradient(90deg, var(--legacy-bg-topbar) 0%, var(--legacy-bg-topbar-dark) 100%) !important;
        color: #3f240f !important;
    }

    .fi-topbar-open-sidebar-btn .fi-icon,
    .fi-topbar-close-collapse-sidebar-btn .fi-icon {
        color: #fff8ee !important;
    }

    .fi-sidebar.fi-main-sidebar {
        background-color: var(--legacy-bg-sidebar) !important;
        border-inline-end: 1px solid #ddb47c !important;
    }

    .fi-sidebar-header {
        background: #f5deb4!important;
        border-bottom: 1px solid #ddb47c !important;
    }

    .fi-sidebar-group-label, 
    .fi-sidebar-group-collapse-btn .fi-icon {
        color: #3f240f !important;
        font-weight: 600 !important;
        font-size: 1rem !important;
    }

    .fi-sidebar-group-btn,
    .fi-sidebar-item-label,
    .fi-sidebar-item-icon,
    .fi-global-search-field .fi-icon,
    .fi-topbar .fi-dropdown-panel .fi-dropdown-header span,
    .fi-topbar .fi-dropdown-panel .fi-dropdown-header .fi-icon,
    .fi-topbar .fi-dropdown-panel .fi-dropdown-list .fi-icon,
    .fi-topbar .fi-dropdown-panel .fi-dropdown-list .fi-dropdown-list-item-label {
        color: #3f240f !important;
    }

    .fi-sidebar-item-btn {
        column-gap: calc(var(--spacing) * 2) !important;
    }

    .fi-sidebar-item.fi-active .fi-sidebar-item-btn,
    .fi-sidebar-item-btn:hover,
    .fi-sidebar-group-btn:hover {
        background-color: #f3d4a0 !important;
        color: #3f240f !important;
        border-radius: 0.5rem !important;
        padding-left: 0.875rem;
    }

    .fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border,
    .fi-sidebar-item-grouped-border-part,
    .fi-sidebar-item-grouped-border-part-not-first,
    .fi-sidebar-item-grouped-border-part-not-last {
        background-color: #cf5a18 !important;
    }

    .fi-header,
    .fi-page,
    .fi-section,
    .fi-widget,
    .fi-ta,
    .fi-in,
    .fi-form,
    .fi-modal-window {
        color: var(--legacy-text-primary) !important;
    }

    .fi-section,
    .fi-widget,
    .fi-ta,
    .fi-modal-window {
        background: var(--legacy-bg-surface) !important;
        border: none !important;
        border-radius: 10px !important;
        box-shadow: 0 6px 14px rgba(176, 89, 23, 0.12) !important;
    }

    /* KPI cards should remain transparent on overview dashboard. */
    .fi-wi-stats-overview .fi-section, 
    .fi-wi-stats-overview .fi-section-content {
        box-shadow: none !important;
        background-color: transparent !important;
    }

    .fi-section-header-heading,
    .fi-ta-header-heading,
    .fi-page-heading,
    .fi-main h1,
    .fi-main h2,
    .fi-main h3 {
        color: #c33f0f !important;
    }

    .fi-input,
    .fi-select-input,
    .fi-textarea,
    .fi-checkbox-input,
    .fi-radio-input {
        border-color: var(--legacy-border) !important;
    }

    .fi-header-heading {
        margin-top: 2rem !important;
    }

    .fi-input:focus,
    .fi-select-input:focus,
    .fi-textarea:focus {
        border-color: var(--legacy-border-strong) !important;
        box-shadow: 0 0 0 3px rgba(223, 98, 31, 0.15) !important;
    }

    .fi-btn.fi-btn-color-primary,
    .fi-ac-btn-action.fi-color-primary {
        background-color: var(--legacy-primary-600) !important;
        border-color: var(--legacy-primary-700) !important;
        color: #fffaf4 !important;
    }

    .fi-btn.fi-btn-color-primary:hover,
    .fi-ac-btn-action.fi-color-primary:hover {
        background-color: var(--legacy-primary-700) !important;
        color: #fffaf4 !important;
    }

    .fi-ta-table thead tr,
    .fi-ta-header,
    .fi-ta-header-ctn {
        background-color: #fff5e8 !important;
    }

    .fi-ta-table tr:nth-child(even) {
        background-color: #fff5e8 !important;
    }

    .fi-badge {
        border-color: #e3a45e !important;
    }

    .fi-link,
    .fi-main a {
        color: var(--legacy-primary-700) !important;
    }

    .fi-link:hover,
    .fi-main a:hover {
        color: var(--legacy-primary-800) !important;
    }

    @media (max-width: 1024px) {
        .fi-sidebar.fi-main-sidebar {
            box-shadow: 0 18px 45px rgba(90, 44, 14, 0.35) !important;
        }
    }

    .fi-simple-layout {
        min-height: 100vh;
        background:
            radial-gradient(circle at 10% 5%, rgba(223, 98, 31, 0.12), transparent 28%),
            radial-gradient(circle at 88% 12%, rgba(195, 77, 18, 0.1), transparent 30%),
            var(--legacy-bg-page);
    }

    .fi-simple-main-ctn {
        padding: 2.5rem 1rem;
    }

    .fi-simple-main {
        max-width: 32rem;
        background: transparent !important;
        box-shadow: none !important;
    }

    .fi-simple-page-content {
        background: var(--legacy-bg-surface);
        border: 1px solid var(--legacy-border-strong);
        border-radius: 1rem;
        box-shadow: 0 14px 36px rgba(124, 58, 18, 0.2);
        padding: 1.5rem;
        row-gap: calc(var(--spacing) * 4) !important;
    }

    .fi-simple-header {
        padding: 0.25rem 0 0rem;
    }

    .fi-simple-header .fi-logo {
        display: block;
        margin: 0 auto 0.75rem;
        width: auto;
        height: 5.5rem !important;
        max-width: min(18rem, 80vw);
        object-fit: contain;
        content: url('../logos/invoice-logo.png');
    }

    .fi-simple-header-heading {
        color: #bc3f12;
        font-weight: 700;
        text-align: center;
    }

    .fi-simple-header-subheading {
        color: var(--legacy-text-muted);
        text-align: center;
    }

    .fi-simple-page .fi-form,
    .fi-simple-page .fi-section,
    .fi-simple-page .fi-in {
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .fi-simple-page .fi-input,
    .fi-simple-page .fi-select-input,
    .fi-simple-page .fi-textarea {
        background: #fffaf1;
        border-color: #e7b982;
    }

    .fi-simple-page .fi-btn.fi-btn-color-primary,
    .fi-simple-page .fi-ac-btn-action.fi-color-primary {
        background: linear-gradient(180deg, #df621f, #bf470f);
        border-color: #9e3b0d;
    }

    .fi-simple-page .fi-btn.fi-btn-color-primary:hover,
    .fi-simple-page .fi-ac-btn-action.fi-color-primary:hover {
        background: linear-gradient(180deg, #ca5416, #a9400c);
    }
}