@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap");

:root {
    --ai-timeline-bg: #f8fafc; /* Light mode matching old setting */
    
    /* Global AI Variables */
    --ai-bg: #f8fafc;
    --ai-bg-card: #ffffff;
    --ai-bg-subtle: #f1f5f9;
    --ai-border: #e2e8f0;
    --ai-text-primary: #0f172a;
    --ai-text-secondary: #334155;
    --ai-text-muted: #64748b;
    --ai-code-bg: #1e293b;
    --ai-code-text: #38bdf8;
    --ai-font: "Inter", -apple-system, system-ui, sans-serif;
    --ai-tag-bg: #ecfdf5;
    --ai-tag-text: #065f46;
    --ai-tag-border: #d1fae5;

    /* Status Colors */
    --ai-color-success: #22c55e;
    --ai-color-danger: #ef4444;
    --ai-color-warning: #f59e0b;
    --ai-color-info: #3b82f6;

    /* Legacy gen variables */
    --gen-green: #22c55e;
    --gen-red: #ef4444;
    --gen-border: #e2e8f0;
}

.dark {
    --ai-timeline-bg: #111827; /* Dark mode matching original timeline */
    
    --ai-bg: #09090b;
    --ai-bg-card: #111827;
    --ai-bg-subtle: #020617;
    --ai-border: #1e293b;
    --ai-text-primary: #f8fafc;
    --ai-text-secondary: #cbd5e1;
    --ai-text-muted: #94a3b8;
    --ai-code-bg: #000000;
    --ai-code-text: #4ade80;
    --ai-tag-bg: #064e3b;
    --ai-tag-text: #10eb91;
    --ai-tag-border: #065f46;

    /* Legacy gen variables - Dark */
    --gen-green: #10b981;
    --gen-red: #f43f5e;
    --gen-border: #1e293b;
}
.fi-body {
    background-color: var(--gray-100);
}
.fi-body:where(.dark,.dark *) {
    background-color: #0f1117;
}
.fi-sidebar-nav:where(.dark,.dark *) {
    background: #1a1d24;
}
.fi-ta-ctn:where(.dark,.dark *) {
    background-color: #1a1d24;
}
.fi-topbar:where(.dark, .dark *) {
    background-color: #1a1d24;
}
.fi-tabs.fi-contained:where(.dark,.dark *) {
    background-color: #1a1d24;
}
.fi-sc-tabs-tab.fi-active:where(.dark,.dark *) {
    background-color: #1a1d24;
}
.fi-section.fi-section-has-header:where(.dark,.dark *) {
    background-color: #1a1d24;
}
.fi-section-content-ctn .fi-wi-stats-overview-stat:where(.dark,.dark *) {
    background: #1a1d24;
}
li.fi-sidebar-item.fi-active:where(.dark,.dark *) > a {
    background: rgba(251, 146, 60, 0.12) !important;
    color: #fb923c !important;
    border-radius: 8px;
}
li.fi-sidebar-item.fi-active:where(.dark,.dark *) > a svg {
    color: #fb923c !important;
}
li.fi-sidebar-item.fi-active:where(.dark,.dark *) > a span {
    color: #fb923c !important;
    font-weight: 600 !important;
}

.seo-rules-table-repeater.fi-fo-table-repeater {
    overflow: hidden;
    border: 1px solid rgb(229 231 235);
    border-radius: 8px;
    background: #ffffff;
}

.seo-rules-table-repeater.fi-fo-table-repeater table {
    width: 100%;
    background: transparent;
}

.seo-rules-table-repeater.fi-fo-table-repeater thead tr,
.seo-rules-table-repeater.fi-fo-table-repeater tbody tr {
    background: transparent;
}

.seo-rules-table-repeater.fi-fo-table-repeater th {
    background: rgb(249 250 251);
    border-color: rgb(229 231 235);
    color: rgb(55 65 81);
    font-weight: 700;
}

.seo-rules-table-repeater.fi-fo-table-repeater td {
    border-color: rgb(229 231 235);
    background: #ffffff;
}

.seo-rules-table-repeater.fi-fo-table-repeater .fi-input-wrp {
    background: #ffffff;
}

.dark .seo-rules-table-repeater.fi-fo-table-repeater {
    border-color: #2b2f38;
    background: #1a1d24;
}

.dark .seo-rules-table-repeater.fi-fo-table-repeater th {
    background: #1a1d24;
    border-color: #2b2f38;
    color: #f8fafc;
}

.dark .seo-rules-table-repeater.fi-fo-table-repeater td {
    border-color: #2b2f38;
    background: #1a1d24;
}

.dark .seo-rules-table-repeater.fi-fo-table-repeater .fi-input-wrp {
    background: #22252d;
    border-color: #3b404b;
}

.dark .seo-rules-table-repeater.fi-fo-table-repeater .fi-input {
    color: #f8fafc;
}