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

:root {
    --sunny-background: #fafafa;
    --sunny-foreground: #18181b;
    --sunny-card: #ffffff;
    --sunny-muted: #f4f4f5;
    --sunny-muted-foreground: #71717a;
    --sunny-border: #e4e4e7;
    --sunny-primary: #18181b;
    --sunny-primary-foreground: #fafafa;
    --sunny-ring: rgba(24, 24, 27, 0.14);
    --sunny-radius: 0.625rem;
}

html.dark {
    --sunny-background: #09090b;
    --sunny-foreground: #fafafa;
    --sunny-card: #18181b;
    --sunny-muted: #27272a;
    --sunny-muted-foreground: #a1a1aa;
    --sunny-border: rgba(255, 255, 255, 0.1);
    --sunny-primary: #fafafa;
    --sunny-primary-foreground: #18181b;
    --sunny-ring: rgba(250, 250, 250, 0.18);
}

body,
.fi-body,
.fi-main {
    background: var(--sunny-background) !important;
    color: var(--sunny-foreground) !important;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

.fi-topbar > nav,
.fi-sidebar,
.fi-sidebar-header {
    background: color-mix(in srgb, var(--sunny-card) 96%, transparent) !important;
    border-color: var(--sunny-border) !important;
    box-shadow: none !important;
}

.fi-sidebar {
    border-right: 1px solid var(--sunny-border) !important;
}

.fi-sidebar-header {
    border-bottom: 1px solid var(--sunny-border) !important;
}

.fi-sidebar-nav {
    padding: 0.75rem !important;
}

.fi-sidebar-nav-groups {
    gap: 0.6rem !important;
}

.fi-sidebar-group {
    gap: 0.25rem !important;
}

.fi-sidebar-group-button {
    min-height: 2.25rem !important;
    border-radius: calc(var(--sunny-radius) - 2px) !important;
    padding: 0.45rem 0.5rem !important;
    color: var(--sunny-muted-foreground) !important;
}

.fi-sidebar-group-button:hover {
    background: var(--sunny-muted) !important;
    color: var(--sunny-foreground) !important;
}

.fi-sidebar-group-label {
    color: var(--sunny-foreground) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.fi-sidebar-group-icon,
.fi-sidebar-group-collapse-button {
    color: var(--sunny-muted-foreground) !important;
}

.fi-sidebar-group-items,
.fi-sidebar-sub-group-items {
    gap: 0.15rem !important;
}

.fi-sidebar-item-button {
    min-height: 2.15rem !important;
    margin: 0 !important;
    padding: 0.45rem 0.625rem !important;
    border-radius: calc(var(--sunny-radius) - 2px) !important;
    color: var(--sunny-muted-foreground) !important;
    transition: background-color 150ms ease, color 150ms ease;
}

.fi-sidebar-item-button:hover,
.fi-sidebar-item-active .fi-sidebar-item-button {
    background: var(--sunny-muted) !important;
    color: var(--sunny-foreground) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    box-shadow: inset 3px 0 0 var(--sunny-primary) !important;
}

.fi-sidebar-item-label {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}

.fi-sidebar-item-icon,
.fi-sidebar-item-button-icon,
.fi-sidebar-group-button-icon {
    color: currentColor !important;
}

.sunny-locale-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    border: 1px solid var(--sunny-border);
    border-radius: calc(var(--sunny-radius) - 2px);
    background: var(--sunny-card);
    padding: 0.18rem;
}

.sunny-locale-switcher__item {
    display: inline-flex;
    min-width: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--sunny-radius) - 4px);
    color: var(--sunny-muted-foreground);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4rem;
    text-decoration: none;
}

.sunny-locale-switcher__item:hover,
.sunny-locale-switcher__item.is-active {
    background: var(--sunny-muted);
    color: var(--sunny-foreground);
}

.sunny-locale-switcher-simple {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-wizard,
.fi-in-entry-wrp,
.fi-modal-window,
.fi-dropdown-panel {
    background: var(--sunny-card) !important;
    border: 1px solid var(--sunny-border) !important;
    border-radius: var(--sunny-radius) !important;
    box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04) !important;
}

.fi-section-header,
.fi-ta-header,
.fi-modal-header {
    background: var(--sunny-card) !important;
    border-color: var(--sunny-border) !important;
}

.fi-section-content,
.fi-ta-content,
.fi-modal-content {
    background: var(--sunny-card) !important;
}

.fi-ta-header-cell,
.fi-ta-cell {
    border-color: var(--sunny-border) !important;
}

.fi-ta-header-cell {
    background: var(--sunny-muted) !important;
    color: var(--sunny-muted-foreground) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.fi-ta-row {
    border-color: var(--sunny-border) !important;
    transition: background-color 150ms ease;
}

.fi-ta-row:hover {
    background: color-mix(in srgb, var(--sunny-muted) 72%, transparent) !important;
    box-shadow: none !important;
}

.fi-btn {
    border-radius: calc(var(--sunny-radius) - 2px) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.fi-btn-color-primary {
    background: var(--sunny-primary) !important;
    color: var(--sunny-primary-foreground) !important;
}

.fi-btn-color-gray,
.fi-btn-outlined {
    border-color: var(--sunny-border) !important;
    background: var(--sunny-card) !important;
    color: var(--sunny-foreground) !important;
}

.fi-btn:hover {
    box-shadow: none !important;
}

.fi-input-wrp,
.fi-select-input,
.fi-fo-text-input input,
.fi-fo-textarea textarea,
.fi-fo-select select,
.fi-fo-date-time-picker button,
.fi-fo-date-picker button {
    background: var(--sunny-card) !important;
    border-color: var(--sunny-border) !important;
    border-radius: calc(var(--sunny-radius) - 2px) !important;
    color: var(--sunny-foreground) !important;
    box-shadow: none !important;
}

.fi-input-wrp:focus-within,
.fi-fo-text-input input:focus,
.fi-fo-textarea textarea:focus,
.fi-fo-select select:focus {
    border-color: var(--sunny-primary) !important;
    box-shadow: 0 0 0 3px var(--sunny-ring) !important;
}

.fi-badge {
    border-radius: 999px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.fi-tabs,
.fi-tabs-item {
    border-radius: calc(var(--sunny-radius) - 2px) !important;
}

.fi-tabs {
    background: var(--sunny-muted) !important;
    border: 1px solid var(--sunny-border) !important;
    padding: 0.25rem !important;
}

.fi-tabs-item-active {
    background: var(--sunny-card) !important;
    box-shadow: 0 1px 2px rgba(24, 24, 27, 0.06) !important;
}

.loading-backdrop {
    background: color-mix(in srgb, var(--sunny-background) 75%, transparent);
    backdrop-filter: blur(8px);
}