/* Matjari's soft appearance, shared by the Console and Store panels. */
.fi-body {
    --matjari-ground: #f5f7f9;
    --matjari-surface: #ffffff;
    --matjari-field: #f7f9fb;
    --matjari-line: #e3e8ee;
    --matjari-shadow: 0 3px 16px rgb(20 35 50 / 4%);
    background-color: var(--matjari-ground);
}

.dark .fi-body {
    --matjari-ground: #10171e;
    --matjari-surface: #18222c;
    --matjari-field: #1d2935;
    --matjari-line: #2d3a47;
    --matjari-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}

.fi-body .fi-sidebar,
.fi-body .fi-sidebar-header,
.fi-body .fi-topbar {
    background-color: var(--matjari-surface);
    box-shadow: none;
}

.fi-body .fi-topbar {
    border-bottom: 1px solid var(--matjari-line);
}

.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-simple-main,
.fi-body .fi-modal-window,
.fi-body .fi-dropdown-panel {
    background-color: var(--matjari-surface);
    border-radius: 1rem;
    box-shadow: var(--matjari-shadow), 0 0 0 1px var(--matjari-line);
}

.fi-body .fi-sidebar-item-btn,
.fi-body .fi-btn,
.fi-body .fi-badge,
.fi-body .fi-tabs-item {
    border-radius: 0.625rem;
}

.fi-body .fi-sidebar-item-btn {
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
}

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

.fi-body .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover {
    background-color: var(--matjari-field);
}

.fi-body .fi-input-wrp {
    background-color: var(--matjari-field);
    border-radius: 0.875rem;
}

/* Keep Filament's validation rings and focus indicators intact. */
.fi-body .fi-input-wrp:not(.fi-invalid):not(:focus-within) {
    box-shadow: 0 0 0 1px var(--matjari-line);
}

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

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

.fi-body .fi-ta-header,
.fi-body .fi-ta-header-toolbar,
.fi-body .fi-ta-filters,
.fi-body .fi-ta-content,
.fi-body .fi-ta-pagination {
    background-color: transparent;
}

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

@media (min-width: 40rem) {
    .fi-body .fi-ta-text:not(.fi-inline),
    .fi-body .fi-ta-cell:has(.fi-ta-actions),
    .fi-body .fi-ta-cell:has(.fi-ta-record-checkbox) {
        padding-block: 0.625rem;
    }
}

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

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

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

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

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

/* Logical borders preserve the navigation hierarchy in both Arabic and English. */
.fi-body .fi-sidebar {
    border-inline-end: 1px solid var(--matjari-line);
}

.fi-body .fi-sidebar-nav {
    padding-block: 1.5rem;
}

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

.fi-body .fi-sidebar-item-btn {
    min-height: 2.625rem;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-500) 20%, transparent);
}

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

.fi-body .fi-btn {
    font-weight: 600;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.fi-body .fi-input-wrp {
    transition: background-color 160ms ease;
}

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

.fi-body .fi-ta-header-cell {
    font-weight: 600;
}

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

.fi-body .fi-wi-stats-overview-stat {
    border-block-start: 3px solid color-mix(in srgb, var(--primary-500) 55%, var(--matjari-line));
    --stat-chart-line-tension: 0.35;
}

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

.fi-body.fi-simple-layout {
    background-image: radial-gradient(ellipse at top, color-mix(in srgb, var(--primary-500) 10%, transparent), transparent 65%);
}

.fi-body .fi-simple-main {
    border-block-start: 3px solid var(--primary-500);
}

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