/* Matjari workspace theme, shared by the Console and Store panels. */
.fi-body {
    --matjari-ground: #f0f3f8;
    --matjari-surface: #ffffff;
    --matjari-field: #f7f9fc;
    --matjari-line: #e1e7ef;
    --matjari-nav: #172334;
    --matjari-nav-hover: #243449;
    --matjari-shadow: 0 2px 4px rgb(20 35 55 / 2%), 0 8px 24px rgb(20 35 55 / 4%);
    background-color: var(--matjari-ground);
}

.dark .fi-body {
    --matjari-ground: #0e1623;
    --matjari-surface: #192434;
    --matjari-field: #202d3e;
    --matjari-line: #2c3a4d;
    --matjari-nav: #111c2c;
    --matjari-nav-hover: #243449;
    --matjari-shadow: 0 4px 20px rgb(0 0 0 / 12%);
}

.fi-body .fi-topbar {
    background-color: var(--matjari-surface);
    border-bottom: 1px solid var(--matjari-line);
    box-shadow: none;
}

.fi-body .fi-sidebar {
    background-color: var(--matjari-nav);
    border-inline-end: 1px solid rgb(255 255 255 / 6%);
}

/* Keep tenant logos on a neutral surface without recoloring their artwork. */
.fi-body .fi-sidebar-header {
    background-color: var(--matjari-surface);
}

.fi-body .fi-sidebar-nav {
    padding-block: 1.5rem;
    scrollbar-color: #53647b var(--matjari-nav);
}

.fi-body .fi-sidebar-nav-groups {
    row-gap: 1.75rem;
}

.fi-body .fi-sidebar-group-label {
    color: #a7b7cc;
    font-size: 0.8125rem;
    font-weight: 600;
}

.fi-body .fi-sidebar-group-btn > .fi-icon,
.fi-body .fi-sidebar-item-btn > .fi-icon {
    color: #9eb1c9;
}

.fi-body .fi-sidebar-item-label {
    color: #dce5f1;
}

.fi-body .fi-sidebar-item-btn {
    min-height: 2.75rem;
    padding-block: 0.625rem;
    padding-inline: 0.875rem;
    border-radius: 0.5rem;
    transition: background-color 160ms ease;
}

.fi-body .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover,
.fi-body .fi-sidebar-group-dropdown-trigger-btn:hover {
    background-color: var(--matjari-nav-hover);
}

.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: color-mix(in srgb, var(--primary-500) 28%, var(--matjari-nav));
}

.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0.75rem;
    width: 3px;
    border-radius: 2px;
    background-color: var(--primary-300);
}

.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: #ffffff;
}

.fi-body .fi-sidebar-item-btn:focus-visible,
.fi-body .fi-sidebar-group-btn:focus-visible {
    outline: 2px solid var(--primary-300);
    outline-offset: 2px;
}

.fi-body .fi-sidebar-footer {
    border-color: #344256;
}

.fi-body .fi-sidebar-database-notifications-btn-label,
.fi-body .fi-sidebar-database-notifications-btn > .fi-icon,
.fi-body .fi-sidebar-group-dropdown-trigger-btn > .fi-icon {
    color: #dce5f1;
}

.fi-body .fi-sidebar-database-notifications-btn:hover {
    background-color: var(--matjari-nav-hover);
}

.fi-body .fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-body .fi-section.fi-aside > .fi-section-content-ctn,
.fi-body .fi-ta-ctn,
.fi-body .fi-wi-stats-overview-stat,
.fi-body .fi-modal-window,
.fi-body .fi-dropdown-panel {
    background-color: var(--matjari-surface);
    border-radius: 0.75rem;
    box-shadow: var(--matjari-shadow), 0 0 0 1px var(--matjari-line);
}

.fi-body .fi-header {
    padding-block-end: 1.25rem;
    border-bottom: 1px solid var(--matjari-line);
}

.fi-body .fi-header-heading {
    font-weight: 700;
    letter-spacing: 0;
}

.fi-body .fi-section-header {
    padding-block: 1.125rem;
}

.fi-body .fi-section-header-heading {
    font-weight: 600;
}

.fi-body .fi-btn,
.fi-body .fi-input-wrp {
    border-radius: 0.5rem;
    transition: background-color 160ms ease;
}

.fi-body .fi-btn {
    font-weight: 600;
}

.fi-body .fi-input-wrp {
    background-color: var(--matjari-surface);
}

/* Preserve Filament's validation, disabled, and focused input states. */
.fi-body .fi-input-wrp:not(.fi-invalid):not(.fi-disabled):not(:focus-within) {
    box-shadow: 0 0 0 1px var(--matjari-line);
}

.fi-body .fi-input-wrp.fi-disabled {
    background-color: var(--matjari-field);
}

.fi-body .fi-badge {
    border-radius: 0.375rem;
}

.fi-body .fi-tabs {
    background-color: var(--matjari-field);
    border-radius: 0.625rem;
}

.fi-body .fi-tabs-item {
    border-radius: 0.375rem;
}

.fi-body .fi-tabs-item.fi-active {
    background-color: var(--matjari-surface);
    box-shadow: 0 1px 4px rgb(15 23 42 / 8%);
}

.fi-body .fi-ta-header-cell {
    background-color: var(--matjari-field);
    padding-block: 0.875rem;
    font-weight: 600;
}

.fi-body .fi-ta-row:not(.fi-selected):hover {
    background-color: var(--matjari-field);
}

.fi-body .fi-ta-pagination {
    background-color: var(--matjari-field);
    border-end-start-radius: 0.75rem;
    border-end-end-radius: 0.75rem;
}

.fi-body .fi-wi-stats-overview-stat {
    --stat-chart-line-tension: 0.25;
}

.fi-body .fi-wi-stats-overview-stat-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.fi-body .fi-wi-chart {
    --chart-line-tension: 0.25;
    --chart-point-radius: 2;
    --chart-bar-border-radius: 4;
}

/* The sign-in screen echoes the navy navigation shell. */
.fi-body:has(.fi-simple-main) {
    background-color: var(--matjari-nav);
    background-image: radial-gradient(ellipse at top right, #2c4961, transparent 65%);
}

.fi-body .fi-simple-main {
    background-color: var(--matjari-surface);
    border-radius: 1rem;
    box-shadow: 0 24px 80px rgb(0 0 0 / 22%), 0 0 0 1px rgb(255 255 255 / 8%);
}

@media (min-width: 64rem) {
    .fi-body .fi-main {
        padding-inline: 2rem;
    }

    .fi-body .fi-page {
        row-gap: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-body .fi-sidebar-item-btn,
    .fi-body .fi-btn,
    .fi-body .fi-input-wrp {
        transition: none;
    }
}