.fi-panel-app {
    --color-primary: #4A86E8;
    --color-secondary: #00295C;
    --color-background: #091428;
    --color-sidebar: #171717;
    --color-white: #ffffff;
}

.fi-panel-app .fi-main,
.fi-panel-app .fi-main-ctn,
.fi-panel-app .fi-layout {
    background-color: white !important;
}

.fi-panel-app .fi-sidebar-header.ring-1 {
    --tw-ring-offset-shadow: none;
    --tw-ring-shadow: none;
}

.fi-panel-app .fi-sidebar {
    background-color: var(--color-primary) !important;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.fi-panel-app .fi-sidebar-header {
    background-color: white;
    border-bottom: 0;
}

.fi-panel-app .fi-sidebar-header > div:first-child {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

.fi-panel-app .fi-sidebar-header .fi-icon-btn {
    margin-left: auto !important;
}

.fi-panel-app .fi-sidebar-header .fi-icon-btn .fi-icon-btn-icon,
.fi-panel-app .fi-topbar .fi-icon-btn .fi-icon-btn-icon {
    color: var(--color-secondary);
}

.fi-panel-app .fi-topbar-start {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    flex-direction: row-reverse;
    gap: 0.5rem;
}

.fi-panel-app .fi-topbar-start > .fi-topbar-collapse-sidebar-btn-ctn {
    margin-left: 0;
    width: auto !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.fi-panel-app .fi-topbar-start > a,
.fi-panel-app .fi-topbar-start > .fi-logo {
    display: flex;
    align-items: center;
}

.fi-panel-app .fi-topbar-start .fi-logo {
    margin-inline-start: 0 !important;
}

.fi-panel-app .fi-sidebar-item-label,
.fi-panel-app .fi-sidebar-item-icon,
.fi-panel-app .fi-sidebar-group-label {
    color: white;
}

.fi-panel-app .fi-sidebar-item a:hover {
    background-color: #dce9ff;
}

.fi-panel-app .fi-sidebar-item a:hover span {
    color: #4a86e8;
}

.fi-panel-app .fi-sidebar-item a:hover svg {
    stroke: #4a86e8;
}

.dark .fi-panel-app .fi-main,
.dark .fi-panel-app .fi-main-ctn,
.dark .fi-panel-app .fi-layout {
    background-color: var(--color-background) !important;
}

.dark .fi-panel-app .fi-sidebar-item a:hover {
    background-color: var(--color-white);
}

.dark .fi-panel-app .fi-sidebar-item a:hover span,
.dark .fi-panel-app .fi-sidebar-item a:hover svg {
    color: var(--color-secondary);
    stroke: var(--color-secondary);
}

.dark .fi-panel-app .fi-sidebar-group-label,
.dark .fi-panel-app .fi-sidebar-item-icon,
.dark .fi-panel-app .fi-icon-btn-icon,
.dark .fi-panel-app .fi-sidebar-header .fi-icon-btn .fi-icon-btn-icon,
.dark .fi-panel-app .fi-sidebar-item-label {
    color: var(--color-white);
}

.dark .fi-panel-app .fi-header-heading {
    color: var(--color-primary);
}

.dark .fi-panel-app .fi-sidebar-nav,
.dark .fi-panel-app .overflow-x-clip .fi-sidebar-header {
    background-color: var(--color-secondary) !important;
}

.dark .fi-panel-app .fi-topbar nav {
    background-color: var(--color-background) !important;
}

/* Ensure language switch flag is always visible in topbar trigger */
.fi-panel-app .language-switch-current-flag {
    width: 1.75rem;
    height: 1.75rem;
    display: block;
}

.fi-panel-app .language-switch-option-flag {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

/* Filament v4 active sidebar item contrast fix */
.fi-panel-app .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: #dce9ff !important;
}

.fi-panel-app .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-panel-app .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-icon {
    color: var(--color-secondary) !important;
}