/* Shared Filament 5 theme. Both panels inherit their runtime color palettes. */
/* 01. Tokens — keep surfaces neutral; reserve primary for interactive states. */
.fi-body {
    --sharqiah-canvas: var(--gray-50);
    --sharqiah-workspace: var(--gray-50);
    --sharqiah-sidebar: #fff;
    --sharqiah-surface: #fff;
    --sharqiah-surface-muted: color-mix(in srgb, var(--gray-100) 65%, white);
    --sharqiah-elevated: #fff;
    --sharqiah-border: var(--gray-200);
    --sharqiah-border-soft: color-mix(in srgb, var(--gray-200) 65%, transparent);
    --sharqiah-heading: var(--gray-950);
    --sharqiah-text: var(--gray-700);
    --sharqiah-muted: var(--gray-500);
    --sharqiah-accent-text: var(--primary-700);
    --sharqiah-accent: var(--primary-600);
    --sharqiah-accent-soft: color-mix(in srgb, var(--primary-500) 9%, var(--sharqiah-surface));
    --sharqiah-radius-sm: 0.375rem;
    --sharqiah-radius-control: 0.5rem;
    --sharqiah-radius-card: 0.75rem;
    --sharqiah-shadow: 0 1px 2px rgb(0 0 0 / 2%), 0 4px 12px rgb(0 0 0 / 2%);
    --sharqiah-shadow-overlay: 0 12px 40px rgb(0 0 0 / 12%);
    --sharqiah-transition: 150ms ease;
    background: var(--sharqiah-canvas);
    color: var(--sharqiah-text);
}

.dark .fi-body {
    --sharqiah-canvas: var(--gray-950);
    --sharqiah-workspace: var(--gray-950);
    --sharqiah-sidebar: color-mix(in srgb, var(--gray-900) 65%, var(--gray-950));
    --sharqiah-surface: var(--gray-900);
    --sharqiah-surface-muted: color-mix(in srgb, var(--gray-800) 45%, var(--gray-900));
    --sharqiah-elevated: color-mix(in srgb, var(--gray-800) 70%, var(--gray-900));
    --sharqiah-border: color-mix(in srgb, var(--gray-400) 22%, var(--gray-900));
    --sharqiah-border-soft: color-mix(in srgb, var(--gray-400) 12%, transparent);
    --sharqiah-heading: var(--gray-100);
    --sharqiah-text: var(--gray-300);
    --sharqiah-muted: var(--gray-400);
    --sharqiah-accent: var(--primary-400);
    --sharqiah-accent-text: var(--primary-300);
    --sharqiah-accent-soft: color-mix(in srgb, var(--primary-500) 12%, var(--sharqiah-surface));
    --sharqiah-shadow: 0 1px 2px rgb(0 0 0 / 8%);
    --sharqiah-shadow-overlay: 0 16px 48px rgb(0 0 0 / 28%);
}

/* 02. Shell and navigation. Native drawer and collapse state remain in charge. */
.fi-body .fi-main-ctn {
    background: var(--sharqiah-workspace);
}

.fi-body .fi-sidebar,
.fi-body .fi-sidebar-header {
    background: var(--sharqiah-sidebar);
}

.fi-body .fi-sidebar {
    border-inline-end: 1px solid var(--sharqiah-border-soft);
    box-shadow: none;
}

.fi-body .fi-sidebar-header {
    min-height: 4rem;
    height: 4rem;
    padding-inline: 1.5rem;
    border: 0;
    box-shadow: none;
}

.fi-body .fi-sidebar-header .fi-logo {
    max-width: 10rem;
}

.fi-body .fi-sidebar-header img.fi-logo {
    object-fit: contain;
}

.fi-body .fi-sidebar-nav {
    padding: 1rem 1.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--sharqiah-border) transparent;
}

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

.fi-body .fi-sidebar-group {
    row-gap: 0.5rem;
}

.fi-body .fi-sidebar-group-label {
    color: var(--sharqiah-muted);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.035em;
}

.fi-body .fi-sidebar-item-btn {
    position: relative;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--sharqiah-radius-control);
    transition: color var(--sharqiah-transition), background-color var(--sharqiah-transition);
}

.fi-body .fi-sidebar-item-label {
    color: var(--sharqiah-text);
    font-weight: 500;
}

.fi-body .fi-sidebar-item-btn > .fi-icon {
    color: color-mix(in srgb, var(--sharqiah-muted) 85%, transparent);
}

.fi-body .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover {
    background: var(--sharqiah-surface-muted);
}

.fi-body .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-body .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover > .fi-icon {
    color: var(--sharqiah-heading);
}

.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--sharqiah-accent-soft);
    box-shadow: none;
}

.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    position: absolute;
    inset-block: 15%;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sharqiah-accent);
    content: '';
}

[dir='rtl'] .fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    border-radius: 3px 0 0 3px;
}

.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--sharqiah-accent-text);
    font-weight: 600;
}

.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--sharqiah-accent);
}

.fi-body .fi-sidebar-group-collapse-btn,
.fi-body .fi-sidebar-item-grouped-border-part {
    color: var(--sharqiah-muted);
}

.fi-body .fi-topbar-ctn {
    background: var(--sharqiah-surface);
    overflow: visible;
}

.fi-body .fi-topbar {
    min-height: 4rem;
    padding-inline: 1.25rem;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--sharqiah-border-soft);
    background: var(--sharqiah-sidebar);
    box-shadow: none;
}

.fi-body .fi-topbar .fi-global-search-ctn {
    width: min(100%, 30rem);
}

.fi-body .fi-topbar .fi-global-search-ctn .fi-input-wrp {
    --sharqiah-input-height: 2.5rem;
    min-height: var(--sharqiah-input-height);
    border-radius: var(--sharqiah-radius-control);
    background: var(--sharqiah-surface);
    box-shadow: 0 0 0 1px var(--sharqiah-border);
}

.fi-body .fi-topbar .fi-global-search-ctn .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sharqiah-accent) 35%, transparent);
}

.fi-body .fi-topbar .fi-icon-btn,
.fi-body .fi-topbar .fi-user-menu-trigger {
    border-radius: var(--sharqiah-radius-control);
    background: var(--sharqiah-surface);
}

.fi-body .fi-topbar .fi-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
}

.fi-body .fi-main {
    width: 100%;
}

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

.fi-body .fi-sc.fi-sc-has-gap:not(.fi-sc-dense) {
    gap: 1rem;
}

/* 03. Page hierarchy, sections and statistics. */
.fi-body .fi-header {
    align-items: end;
}

.fi-body .fi-header-heading,
.fi-body .fi-section-header-heading,
.fi-body .fi-ta-header-heading,
.fi-body .fi-wi-stats-overview-stat-value,
.fi-body .fi-simple-header-heading {
    color: var(--sharqiah-heading);
    font-weight: 600;
    letter-spacing: -0.025em;
}

.fi-body .fi-header-heading {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
}

.fi-body .fi-header-subheading,
.fi-body .fi-section-header-description,
.fi-body .fi-ta-header-description {
    color: var(--sharqiah-muted);
}

.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-sc-tabs.fi-contained,
.fi-body .fi-sc-wizard.fi-contained {
    border: 1px solid var(--sharqiah-border-soft);
    border-radius: var(--sharqiah-radius-card);
    background: var(--sharqiah-surface);
    box-shadow: var(--sharqiah-shadow);
}

.fi-body .fi-wi-stats-overview-stat {
    min-height: 7rem;
    padding: 1.25rem;
}

.fi-body .fi-wi-stats-overview-stat-value {
    margin-block: 0.5rem;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.fi-body .fi-wi-stats-overview-stat-label {
    color: var(--sharqiah-heading);
    font-size: 0.875rem;
}

.fi-body .fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header,
.fi-body .fi-ta-header,
.fi-body .fi-ta-header-toolbar {
    padding: 1rem 1.25rem;
}

.fi-body .fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content,
.fi-body .fi-section:not(.fi-section-not-contained).fi-divided > .fi-section-content-ctn > .fi-section-content > * {
    padding: 1.25rem;
}

.fi-body .fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer {
    padding: 1rem 1.25rem;
}

/* 04. Controls. Filament retains semantic colors and automatic button contrast. */
.fi-body .fi-btn {
    border-radius: var(--sharqiah-radius-control);
    font-weight: 600;
}

.fi-body .fi-btn.fi-size-md {
    min-height: 2.5rem;
    padding: 0.375rem 0.875rem;
}

.fi-body .fi-btn.fi-outlined {
    background: var(--sharqiah-surface);
}

.fi-body .fi-icon-btn,
.fi-body .fi-link {
    border-radius: var(--sharqiah-radius-control);
}

.fi-body .fi-input-wrp {
    --sharqiah-input-height: 2.5rem;
    min-height: 2.5rem;
    border-radius: var(--sharqiah-radius-control);
    background: var(--sharqiah-surface);
}

.fi-body .fi-input-wrp-content-ctn > input.fi-input,
.fi-body .fi-input-wrp-content-ctn > select.fi-select-input {
    min-height: var(--sharqiah-input-height);
}

.fi-body .fi-input-wrp .fi-select-input-btn {
    min-height: var(--sharqiah-input-height);
    align-items: center;
}

.fi-body select.translatable-field-locale-select {
    -webkit-appearance: none;
    appearance: none;
    padding-inline-end: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
}

[dir='rtl'] .fi-body select.translatable-field-locale-select {
    background-position: left 0.5rem center;
}

.fi-body .fi-input-wrp:not(.fi-invalid):not(.fi-disabled):not(:focus-within) {
    box-shadow: 0 0 0 1px var(--sharqiah-border);
}

.fi-body .fi-input-wrp:not(.fi-invalid):focus-within {
    box-shadow: 0 0 0 1px var(--sharqiah-accent), 0 0 0 4px color-mix(in srgb, var(--sharqiah-accent) 12%, transparent);
}

.fi-body .fi-input-wrp.fi-disabled {
    background: var(--sharqiah-surface-muted);
}

.fi-body .fi-badge {
    border-radius: var(--sharqiah-radius-sm);
    font-weight: 500;
}

/* 05. Tabs and schema containers. */
.fi-body .fi-tabs:not(.fi-contained) {
    padding: 0.375rem;
    border: 1px solid var(--sharqiah-border);
    border-radius: var(--sharqiah-radius-control);
    background: var(--sharqiah-surface);
    box-shadow: none;
}

.fi-body .fi-tabs-item {
    border-radius: var(--sharqiah-radius-control);
}

.fi-body .fi-tabs-item.fi-active {
    background: var(--sharqiah-accent-soft);
}

.fi-body .fi-tabs-item.fi-active .fi-tabs-item-label {
    color: var(--sharqiah-accent-text);
}

.fi-body .fi-tabs.fi-vertical:not(.fi-contained) {
    border-radius: var(--sharqiah-radius-control);
}

.fi-body .fi-sc-tabs.fi-contained > .fi-sc-tabs-tab.fi-active,
.fi-body .fi-sc-wizard.fi-contained .fi-sc-wizard-step.fi-active {
    padding: 1.25rem;
}

.fi-body .fi-sc-tabs:not(.fi-contained):not(.fi-vertical) > .fi-sc-tabs-tab.fi-active {
    margin-top: 1rem;
}

.fi-body .fi-sc-wizard .fi-sc-wizard-header-step-btn {
    padding: 1rem 1.25rem;
    gap: 0.75rem;
}

.fi-body .fi-sc-wizard.fi-contained .fi-sc-wizard-footer {
    padding: 0 1rem 1rem;
}

.fi-body .fi-fo-repeater-item,
.fi-body .fi-fo-builder-item {
    border-radius: var(--sharqiah-radius-control);
    background: var(--sharqiah-surface);
    box-shadow: 0 0 0 1px var(--sharqiah-border);
}

.fi-body .fi-fo-file-upload .filepond--root {
    background: var(--sharqiah-surface);
}

.fi-body .fi-fo-file-upload .filepond--panel-root {
    background: var(--sharqiah-surface-muted);
}

/* 06. Elevated surfaces. */
.fi-body .fi-dropdown-panel,
.fi-body .fi-global-search-results-ctn,
.fi-body .fi-fo-date-time-picker-panel {
    border-radius: var(--sharqiah-radius-control);
    background: var(--sharqiah-elevated);
    box-shadow: 0 0 0 1px var(--sharqiah-border), var(--sharqiah-shadow-overlay);
}

.fi-body .fi-modal-window {
    background: var(--sharqiah-surface);
}

.fi-body .fi-modal:not(.fi-modal-slide-over):not(.fi-width-screen) .fi-modal-window {
    border-radius: var(--sharqiah-radius-card);
}

.fi-body .fi-no-notification:not(.fi-inline):not(.fi-color) {
    border-radius: var(--sharqiah-radius-control);
    background: var(--sharqiah-elevated);
    box-shadow: 0 0 0 1px var(--sharqiah-border), var(--sharqiah-shadow-overlay);
}

/* 07. Tables and pagination. */
.fi-body .fi-ta-header-cell {
    padding-block: 0.75rem;
    background: var(--sharqiah-surface-muted);
    color: var(--sharqiah-heading);
    font-size: 0.8125rem;
    font-weight: 600;
}

.fi-body .fi-ta-row {
    border-color: var(--sharqiah-border-soft);
}

.fi-body .fi-ta-row:not(.fi-selected):hover {
    background: color-mix(in srgb, var(--sharqiah-accent) 5%, var(--sharqiah-surface));
}

.fi-body .fi-pagination {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--sharqiah-border);
    background: var(--sharqiah-surface);
    border-end-start-radius: var(--sharqiah-radius-card);
    border-end-end-radius: var(--sharqiah-radius-card);
}

.fi-body .fi-pagination-overview {
    color: var(--sharqiah-muted);
    font-weight: 400;
}

.fi-body .fi-pagination-items {
    gap: 0.375rem;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.fi-body .fi-pagination-item {
    border: 0;
}

.fi-body .fi-pagination-item-btn {
    min-width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border-radius: var(--sharqiah-radius-control);
    background: var(--sharqiah-surface-muted);
}

.fi-body .fi-pagination-item-label,
.fi-body .fi-pagination-item-btn .fi-icon {
    color: var(--sharqiah-text);
    font-weight: 600;
}

.fi-body .fi-pagination-item:not(.fi-active) .fi-pagination-item-btn:enabled:hover {
    background: var(--sharqiah-accent-soft);
}

.fi-body .fi-pagination-item.fi-active .fi-pagination-item-btn {
    background: var(--primary-700);
    box-shadow: var(--sharqiah-shadow);
}

.fi-body .fi-pagination-item.fi-active .fi-pagination-item-label {
    color: #ffffff;
}

@supports (color: contrast-color(red)) {
    .fi-body .fi-pagination-item.fi-active .fi-pagination-item-label {
        color: contrast-color(var(--primary-700));
    }
}

.fi-body .fi-sidebar-item-btn:focus-visible,
.fi-body .fi-btn:focus-visible,
.fi-body .fi-icon-btn:focus-visible,
.fi-body .fi-pagination-item-btn:focus-visible,
.fi-body .fi-tabs-item:focus-visible {
    outline: 2px solid var(--sharqiah-accent);
    outline-offset: 2px;
}

/* 08. Shared details: badges, editors, uploads and structured information. */
.fi-body .fi-sidebar-group + .fi-sidebar-group {
    border-top: 1px solid var(--sharqiah-border-soft);
    padding-top: 1rem;
}

.fi-body .fi-sidebar-item-btn .fi-badge:not(.fi-color) {
    background: var(--sharqiah-surface-muted);
    color: var(--sharqiah-muted);
}

.fi-body .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-badge {
    background: var(--sharqiah-accent-soft);
    color: var(--sharqiah-accent-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sharqiah-accent) 20%, transparent);
}

.fi-body :is(.fi-btn, .fi-input-wrp, .fi-tabs-item, .fi-dropdown-list-item) {
    transition-duration: 150ms;
}

.fi-body :is(.fi-section-header-heading, .fi-ta-header-heading) {
    font-size: 1rem;
    font-weight: 600;
}

.fi-body :is(.fi-header-subheading, .fi-section-header-description, .fi-ta-header-description) {
    font-size: 0.875rem;
}

.fi-body :is(.fi-section-header, .fi-section-content-ctn, .fi-ta-header, .fi-ta-header-toolbar, .fi-ta-content, .fi-ta-table, .fi-sc-tabs > .fi-tabs) {
    border-color: var(--sharqiah-border-soft);
}

.fi-body :is(.fi-fo-field-label-content, .fi-in-entry-label) {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sharqiah-heading);
}

.fi-body .fi-in-entry-has-inline-label {
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--sharqiah-border-soft);
}

.fi-body .fi-select-input-value-badges-ctn .fi-badge {
    background: var(--sharqiah-accent-soft);
    color: var(--sharqiah-accent-text);
}

.fi-body .fi-select-input-search-ctn {
    background: var(--sharqiah-elevated);
}

.fi-body .fi-input-wrp:has(input[readonly], textarea[readonly]) {
    background: var(--sharqiah-surface-muted);
}

.fi-body .fi-fo-rich-editor-toolbar {
    background: var(--sharqiah-surface-muted);
    border-color: var(--sharqiah-border-soft);
    border-start-start-radius: var(--sharqiah-radius-control);
    border-start-end-radius: var(--sharqiah-radius-control);
}

.fi-body :is(.fi-fo-rich-editor-floating-toolbar, .fi-fo-rich-editor-dropdown-tool-menu) {
    background: var(--sharqiah-elevated);
    border-color: var(--sharqiah-border);
    box-shadow: var(--sharqiah-shadow-overlay);
}

.fi-body .fi-fo-file-upload .filepond--root {
    border: 1px dashed var(--sharqiah-border);
    border-radius: var(--sharqiah-radius-control);
    box-shadow: none;
}

.fi-body .fi-fo-file-upload .filepond--drop-label {
    color: var(--sharqiah-muted);
}

.fi-body .fi-fo-file-upload .filepond--label-action {
    color: var(--sharqiah-accent-text);
    text-decoration-color: var(--sharqiah-accent);
}

.fi-body .fi-fo-file-upload .filepond--image-preview-wrapper {
    border-radius: var(--sharqiah-radius-control);
}

.fi-body .fi-fo-file-upload .filepond--item:focus-within {
    outline: 2px solid var(--sharqiah-accent);
    outline-offset: 2px;
    border-radius: var(--sharqiah-radius-control);
}

.fi-body .fi-modal-window {
    box-shadow: 0 0 0 1px var(--sharqiah-border-soft), var(--sharqiah-shadow-overlay);
}

.fi-body .fi-modal-heading {
    color: var(--sharqiah-heading);
    font-size: 1.125rem;
    font-weight: 600;
}

.fi-body .fi-dropdown-list-item {
    min-height: 2.25rem;
    border-radius: var(--sharqiah-radius-sm);
}

.fi-body .fi-ta-empty-state {
    padding-block: 2rem;
}

.fi-body .fi-ta-empty-state-icon-bg {
    background: var(--sharqiah-accent-soft);
}

.fi-body .fi-ta-empty-state-icon-bg .fi-icon {
    color: var(--sharqiah-accent);
}

/* 09. Responsive layout keeps Filament's native breakpoints and RTL direction. */
@media (min-width: 40rem) {
    .fi-body .fi-ta-text:not(.fi-inline) {
        padding-block: 0.875rem;
    }
}

@media (min-width: 64rem) {
    .fi-body {
        --topbar-height: 4rem;
        --sharqiah-shell-padding: 0rem;
        --sharqiah-sidebar-space: var(--sidebar-width);
        min-height: 100dvh;
        margin: 0;
        padding: var(--sharqiah-shell-padding);
        border-radius: 0;
        background: var(--sharqiah-canvas);
        box-shadow: none;
    }

    .fi-body.fi-body-has-navigation:not(.fi-body-has-top-navigation).fi-body-has-sidebar-collapsible-on-desktop:not(:has(.fi-main-sidebar.fi-sidebar-open)) {
        --sharqiah-sidebar-space: var(--collapsed-sidebar-width);
    }

    .fi-body.fi-body-has-navigation:not(.fi-body-has-top-navigation).fi-body-has-sidebar-fully-collapsible-on-desktop:not(:has(.fi-main-sidebar.fi-sidebar-open)) {
        --sharqiah-sidebar-space: 0rem;
    }

    .fi-body.fi-body-has-navigation:not(.fi-body-has-top-navigation) .fi-main-sidebar {
        position: fixed;
        inset-block: var(--sharqiah-shell-padding);
        inset-inline-start: var(--sharqiah-shell-padding);
        height: calc(100dvh - 2 * var(--sharqiah-shell-padding));
        border-radius: 0;
    }

    .fi-body.fi-body-has-navigation:not(.fi-body-has-top-navigation) .fi-main-ctn,
    .fi-body.fi-body-has-navigation:not(.fi-body-has-top-navigation) .fi-topbar-ctn {
        margin-inline-start: var(--sharqiah-sidebar-space);
    }

    .fi-body .fi-main-ctn {
        min-height: calc(100dvh - 2 * var(--sharqiah-shell-padding) - var(--topbar-height));
        border-radius: 0;
    }

    .fi-body .fi-topbar-ctn {
        top: 0;
    }

    .fi-body .fi-main {
        padding: 1.5rem 2rem;
    }

    .fi-body .fi-page {
        padding-block: 0;
    }

    .fi-body.fi-body-has-navigation:not(.fi-body-has-top-navigation) .fi-sidebar-header {
        display: flex;
    }

    .fi-body.fi-body-has-navigation:not(.fi-body-has-top-navigation) .fi-topbar-start > a:has(.fi-logo),
    .fi-body.fi-body-has-navigation:not(.fi-body-has-top-navigation) .fi-topbar-start > .fi-logo,
    .fi-body.fi-body-has-navigation:not(.fi-body-has-top-navigation) .fi-topbar-start:not(:has(.fi-topbar-collapse-sidebar-btn-ctn)) {
        display: none;
    }

    .fi-body.fi-body-has-navigation:not(.fi-body-has-top-navigation) .fi-topbar-end {
        flex: 1;
        min-width: 0;
        justify-content: flex-end;
    }

    .fi-body.fi-body-has-navigation:not(.fi-body-has-top-navigation) .fi-topbar-end > .fi-global-search-ctn {
        margin-inline-end: auto;
    }

    .fi-body.fi-body-has-navigation:not(.fi-body-has-top-navigation) .fi-topbar .fi-global-search-results-ctn {
        inset-inline-start: 0;
        inset-inline-end: auto;
    }
}

@media (max-width: 63.999rem) {
    .fi-body .fi-topbar {
        min-height: 4rem;
        border-radius: 0;
    }

    .fi-body .fi-main {
        padding-inline: 1rem;
    }

    .fi-body .fi-section:not(.fi-section-not-contained):not(.fi-aside),
    .fi-body .fi-ta-ctn,
    .fi-body .fi-wi-stats-overview-stat {
        border-radius: var(--sharqiah-radius-card);
    }
}

/* Compact catalog cards; keep the native selection, actions, and detail panel. */
.fi-body .catalog-cards-table .catalog-card-language-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--sharqiah-border-soft);
}

.fi-body .catalog-cards-table .fi-ta-content-grid .fi-ta-record {
    display: block;
    padding: 0;
    background: var(--sharqiah-surface);
}

.fi-body .catalog-cards-table .fi-ta-record .fi-ta-record-checkbox {
    position: absolute;
    z-index: 1;
    inset-block-start: 1.125rem;
    inset-inline-start: 1rem;
    margin: 0;
}

.fi-body .catalog-cards-table .fi-ta-record .fi-ta-reorder-handle {
    position: absolute;
    inset-block-start: 0.875rem;
    inset-inline-start: 0.75rem;
    margin: 0;
}

.fi-body .catalog-cards-table .fi-ta-record .fi-ta-record-content-ctn {
    gap: 0;
    padding-block: 1rem 0;
}

.fi-body .catalog-cards-table .fi-ta-content-grid .fi-ta-record .fi-ta-record-content {
    padding-inline: 1rem;
}

.fi-body .catalog-cards-table .catalog-card-heading {
    min-height: 1.5rem;
    padding-inline-start: 1.75rem;
}

.fi-body .catalog-cards-table .catalog-card-body {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding-block: 0.5rem 0.75rem;
}

.fi-body .catalog-cards-table .catalog-card-image {
    overflow: hidden;
    padding: 0.5rem;
    border-radius: var(--sharqiah-radius-control);
    background: var(--sharqiah-surface);
}

.fi-body .catalog-cards-table .catalog-card-image.catalog-card-image-brand {
    background: #fff;
}

.fi-body .catalog-cards-table .catalog-card-image .fi-ta-image {
    width: 100%;
}

.fi-body .catalog-cards-table .catalog-card-summary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.5rem;
}

.fi-body .catalog-cards-table .catalog-card-name .fi-ta-text-item {
    font-size: 1rem;
    line-height: 1.6;
}

.fi-body .catalog-cards-table .catalog-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.fi-body .catalog-cards-table .catalog-card-meta .fi-ta-text-item {
    font-size: 0.8125rem;
}

.fi-body .catalog-cards-table .catalog-card-prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.fi-body .catalog-cards-table .catalog-card-original-price .fi-ta-text-item {
    color: var(--sharqiah-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    text-decoration: line-through;
}

.fi-body .catalog-cards-table .fi-ta-content-grid .fi-ta-record .fi-ta-actions {
    min-height: 2.75rem;
    gap: 1.25rem;
    padding: 0.625rem 1rem;
    padding-inline-end: 3rem;
    border-top: 1px solid var(--sharqiah-border-soft);
}

.fi-body .catalog-cards-table .fi-ta-record .fi-ta-record-collapse-btn {
    position: absolute;
    inset-block-end: 0.5rem;
    inset-inline-end: 0.75rem;
    margin: 0;
}

@media (max-width: 639px) {
    .fi-body .catalog-cards-table .catalog-card-language-controls {
        gap: 0.5rem 1rem;
        padding-inline: 1rem;
    }

    .fi-body .catalog-cards-table .catalog-card-body {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        gap: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-body {
        --sharqiah-transition: 0s;
    }

    .fi-body :is(.fi-sidebar-item-btn, .fi-btn, .fi-input-wrp, .fi-tabs-item, .fi-dropdown-list-item, .fi-pagination-item-btn) {
        transition: none;
    }
}