/* ------------------------------------------------------------------
 * MOE — Sidebar / Topbar harmonization with widget design language.
 * Pulls colors / radius from GeneralSettings via :root CSS variables
 * injected by FilamentPanelProvider (panels::head.end render hook).
 * All rules use var(--moe-*, <fallback>) so they degrade gracefully.
 * Selectors target Filament 4 classes. RTL-aware via logical props.
 * ------------------------------------------------------------------ */

:root {
    /* Stronger primary tint for active state (15% alpha). Fallback only. */
    --moe-primary-strong: var(--moe-primary-soft, rgba(59, 130, 246, 0.15));
}

/* --- Layout tokens ----------------------------------------------- */
:root {
    /* Sidebar: deep slate, brand accent pulled from GeneralSettings. */
    --moe-sb-bg: #1e293b;
    --moe-sb-bg-deep: #172033;
    --moe-sb-border: rgba(255, 255, 255, 0.08);
    --moe-sb-text: #cbd5e1;
    --moe-sb-text-muted: #7c8aa5;
    --moe-sb-icon: #94a3b8;
    --moe-sb-hover: rgba(255, 255, 255, 0.06);
    --moe-sb-active: rgba(255, 255, 255, 0.10);
    --moe-sb-accent: color-mix(in srgb, var(--moe-primary, #3b82f6) 55%, #ffffff);
    /* Page canvas + surfaces. */
    --moe-sb-collapsed-w: 5rem;
    --moe-canvas: #f4f6fa;
    --moe-surface: #ffffff;
}

/* --- Sidebar ------------------------------------------------------ */
.fi-sidebar,
.fi-sidebar-header,
.fi-sidebar-nav {
    background-color: var(--moe-sb-bg) !important;
    background-image: linear-gradient(180deg, var(--moe-sb-bg) 0%, var(--moe-sb-bg-deep) 100%) !important;
    color: var(--moe-sb-text) !important;
}

.fi-sidebar {
    border-inline-end: 1px solid var(--moe-sb-border) !important;
}

.fi-sidebar-header {
    background-image: none !important;
    border-bottom: 1px solid var(--moe-sb-border) !important;
}

/* Brand name inside the dark sidebar (mobile header). */
.fi-sidebar .responsive-site-name {
    color: #f1f5f9 !important;
}

/* Nav spacing: a touch tighter than Filament's default, still airy. */
.fi-sidebar-nav {
    padding: 1rem 1.25rem !important;
    gap: 1.25rem !important;
}

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

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

/* Nav item button: rounded, smooth transition, comfortable spacing. */
.fi-sidebar-item .fi-sidebar-item-btn {
    /* Never sharper than 8px so the active pill reads as a pill. */
    border-radius: max(var(--moe-radius, 10px), 8px) !important;
    margin: 2px 6px !important;
    padding-block: 0.5rem !important;
    padding-inline-start: 0.875rem !important;
    gap: 0.75rem !important;
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease !important;
}

.fi-sidebar-item .fi-sidebar-item-label {
    color: var(--moe-sb-text) !important;
}

/* Icons: muted at rest so the sidebar reads as text first. */
.fi-sidebar-item .fi-sidebar-item-btn .fi-icon {
    color: var(--moe-sb-icon) !important;
    transition: color 0.18s ease !important;
}

/* Hover: faint white wash. */
.fi-sidebar-item .fi-sidebar-item-btn:hover {
    background-color: var(--moe-sb-hover) !important;
}

.fi-sidebar-item .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item .fi-sidebar-item-btn:hover .fi-icon {
    color: #ffffff !important;
}

/* Active: a solid brand pill — no edge line, white label + icon, soft
 * shadow so it lifts off the slate. Filament's own gray/primary active
 * colours are overridden below. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background-color: var(--moe-primary, #3b82f6) !important;
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--moe-primary, #3b82f6) 88%, #ffffff) 0%,
        var(--moe-primary, #3b82f6) 100%
    ) !important;
    box-shadow:
        0 1px 2px 0 rgba(2, 6, 23, 0.35),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.12) !important;
    font-weight: 600 !important;
}

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

.fi-sidebar-item.fi-active .fi-sidebar-item-btn:hover {
    background-color: color-mix(in srgb, var(--moe-primary, #3b82f6) 90%, #ffffff) !important;
}

/* Active item's badge inverts onto the pill. */
.fi-sidebar-item.fi-active .fi-sidebar-item-badge-ctn .fi-badge {
    background-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

/* Badge pill: quiet, translucent. */
.fi-sidebar-item-badge-ctn .fi-badge {
    border-radius: 9999px !important;
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: var(--moe-sb-text) !important;
    font-weight: 500 !important;
    --tw-ring-color: transparent !important;
}

/* Group label: small, muted section divider. */
.fi-sidebar-group-label {
    color: var(--moe-sb-text-muted) !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.02em !important;
    padding-inline: 1rem !important;
}

.fi-sidebar-group-collapse-btn,
.fi-sidebar-group-collapse-btn .fi-icon {
    color: var(--moe-sb-text-muted) !important;
}

.fi-sidebar-group-collapse-btn:hover {
    background-color: var(--moe-sb-hover) !important;
}


/* Thin, unobtrusive scrollbar. */
.fi-sidebar-nav {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
}

/* --- Topbar ⟷ sidebar seam (desktop) ------------------------------ */
/* On lg+ Filament renders one full-width white topbar and starts the
 * sidebar 4rem below it, so a white strip sits above the dark sidebar and
 * the collapse arrow floats at the screen edge. Paint the sidebar-width
 * slice of the topbar in the sidebar colour and turn `.fi-topbar-start`
 * into a proper sidebar header: logo at the outer edge, collapse arrow at
 * the inner edge. Width follows the open/collapsed state via :has(). */
@media (min-width: 1024px) {
    /* `.fi-body .fi-topbar` outranks the base `.fi-topbar` rule below. */
    .fi-body .fi-topbar {
        --moe-tb-sb-w: var(--sidebar-width, 20rem);
        padding-inline: 0 !important;
        background-image: linear-gradient(
            to left,
            var(--moe-sb-bg) 0,
            var(--moe-sb-bg) var(--moe-tb-sb-w),
            var(--moe-surface, #ffffff) var(--moe-tb-sb-w)
        ) !important;
    }

    [dir="ltr"] .fi-body .fi-topbar {
        background-image: linear-gradient(
            to right,
            var(--moe-sb-bg) 0,
            var(--moe-sb-bg) var(--moe-tb-sb-w),
            var(--moe-surface, #ffffff) var(--moe-tb-sb-w)
        ) !important;
    }

    .fi-body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-topbar {
        --moe-tb-sb-w: var(--moe-sb-collapsed-w);
    }

    /* Filament leaves the collapsed rail content-sized; pin it so the topbar
     * slice above it lines up exactly. */
    .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) {
        width: var(--moe-sb-collapsed-w) !important;
    }

    .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding-inline: 0.75rem !important;
    }

    .fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item .fi-sidebar-item-btn {
        margin-inline: 0 !important;
        padding-inline: 0 !important;
        justify-content: center !important;
    }

    .fi-topbar-start {
        display: flex !important;
        flex: 0 0 var(--moe-tb-sb-w) !important;
        width: var(--moe-tb-sb-w) !important;
        min-height: 4rem !important;
        align-self: stretch !important;
        flex-direction: row-reverse !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-inline-end: 0 !important;
        padding-inline: 1rem 0.5rem !important;
        border-inline-end: 1px solid var(--moe-sb-border) !important;
        box-sizing: border-box !important;
    }

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

    .fi-topbar-start .logo-container {
        padding: 0 !important;
    }

    .fi-topbar-start .responsive-site-name {
        color: #f1f5f9 !important;
    }

    .fi-topbar-start .fi-icon-btn,
    .fi-topbar-start .fi-icon-btn .fi-icon {
        color: var(--moe-sb-icon) !important;
    }

    .fi-topbar-start .fi-icon-btn:hover {
        background-color: var(--moe-sb-hover) !important;
        color: #ffffff !important;
    }

    /* Collapsed rail: only the expand arrow fits. */
    .fi-body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-topbar-start {
        justify-content: center !important;
        padding-inline: 0 !important;
    }

    .fi-body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-topbar-start .fi-logo,
    .fi-body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-topbar-start > a {
        display: none !important;
    }

    /* The sidebar now visually continues the header slice above it. */
    .fi-sidebar {
        border-top: 0 !important;
    }
}

/* --- Topbar ------------------------------------------------------- */

.fi-topbar {
    --moe-tb-sb-w: 0px;
    position: relative !important;
    background-color: var(--moe-surface, #ffffff) !important;
    /* Divider drawn by ::after so it can stop where the sidebar begins. */
    border-bottom: 0 !important;
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-topbar::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: var(--moe-tb-sb-w);
    inset-inline-end: 0;
    height: 1px;
    background-color: var(--moe-border, #e5e7eb);
    pointer-events: none;
}

/* All round icon buttons in topbar: rounded + brand-tinted hover. */
.fi-topbar .fi-icon-btn,
.fi-topbar .fi-topbar-item-btn,
.fi-topbar .fi-topbar-database-notifications-btn,
.fi-topbar .fi-topbar-open-sidebar-btn,
.fi-topbar .fi-topbar-close-sidebar-btn,
.fi-topbar .fi-topbar-open-collapse-sidebar-btn,
.fi-topbar .fi-topbar-close-collapse-sidebar-btn {
    border-radius: var(--moe-radius, 10px) !important;
    transition: background-color 0.18s ease, color 0.18s ease !important;
}

.fi-topbar .fi-icon-btn:hover,
.fi-topbar .fi-topbar-item-btn:hover,
.fi-topbar .fi-topbar-database-notifications-btn:hover,
.fi-topbar .fi-topbar-open-sidebar-btn:hover,
.fi-topbar .fi-topbar-close-sidebar-btn:hover {
    background-color: var(--moe-primary-soft, rgba(59, 130, 246, 0.10)) !important;
    color: var(--moe-icon, #3b82f6) !important;
}

/* Profile block: avatar (Filament user menu) with name + role beside it.
 * Rendered via USER_MENU_AFTER so in RTL it sits to the LEFT of the circle
 * and its text aligns toward the avatar. */
.moe-topbar-user {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    line-height: 1.15;
    min-width: 0;
    max-width: 13rem;
}

.moe-topbar-user-name {
    display: block;
    max-width: 13rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.moe-topbar-user-role {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.1rem;
    color: var(--moe-primary, #3b82f6);
    background-color: var(--moe-primary-soft, rgba(59, 130, 246, 0.10));
    border-radius: 9999px;
    padding: 0 0.5rem;
    white-space: nowrap;
}

/* Global search: give the text breathing room from the border on both
 * sides (Filament only pads the icon side). */
.fi-global-search-field input {
    padding-inline-start: 0.875rem !important;
    padding-inline-end: 0.5rem !important;
}

/* Topbar end cluster: let it fill the bar so the global search can sit at
 * the inline-start (right in RTL, next to the sidebar header) while the
 * bell + profile stay at the inline-end. */
.fi-topbar-end {
    flex: 1 1 auto !important;
    margin-inline-start: 0 !important;
    gap: 0.75rem !important;
    /* Same horizontal gutter as .fi-main (px-4 / md:px-6 / lg:px-8) so the
     * topbar content lines up with the page content below it. */
    padding-inline: 1rem !important;
}

@media (min-width: 768px) {
    .fi-topbar-end {
        padding-inline: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .fi-topbar-end {
        padding-inline: 2rem !important;
    }

    /* Mirror .fi-main.fi-width-7xl: the page content is capped at 80rem
     * and centred, so cap and centre the topbar content the same way. The
     * available width is the topbar minus the sidebar slice. */
    .fi-body .fi-topbar-end {
        flex: 0 1 auto !important;
        width: calc(100% - var(--moe-tb-sb-w)) !important;
        max-width: 80rem !important;
        margin-inline: auto !important;
    }
}

.fi-topbar-end .fi-global-search-ctn {
    order: 0;
    margin-inline-end: auto !important;
}

/* Inline order after the search: avatar, then name/role, then the bell at
 * the very end (far left in RTL). */
/* Profile box: avatar dropdown + name/role inside one bordered container. */
.fi-topbar-end .moe-profile {
    order: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 1rem 0.45rem 0.6rem;
    border: 1px solid var(--moe-border, #e5e7eb);
    border-radius: 12px;
    background-color: var(--moe-surface, #ffffff);
}

.fi-topbar-end .moe-profile .fi-user-menu {
    order: 0;
}

.fi-topbar-end .moe-profile .moe-topbar-user {
    order: 1;
}

/* Bell lives inside the box now, at its inline-end (far left in RTL),
 * separated by a thin divider. */
/* Only the direct child (Livewire wrapper or the bare button) gets the
 * divider — never both, or two lines appear. */
.fi-topbar-end .moe-profile > .fi-no-database,
.fi-topbar-end .moe-profile > .fi-topbar-database-notifications-btn,
.fi-topbar-end .moe-profile > [wire\:id]:has(.fi-topbar-database-notifications-btn) {
    order: 2;
    margin-inline-start: 0.25rem;
    padding-inline-start: 0.6rem;
    border-inline-start: 1px solid var(--moe-border, #e5e7eb);
}

.fi-topbar-end .moe-profile > [wire\:id] .fi-topbar-database-notifications-btn,
.fi-topbar-end .moe-profile > .fi-no-database .fi-topbar-database-notifications-btn {
    border: 0 !important;
    padding-inline-start: 0 !important;
    margin-inline-start: 0 !important;
}

.fi-topbar-end .fi-topbar-database-notifications-btn,
.fi-topbar-end .fi-no-database,
.fi-topbar-end > .fi-icon-btn,
.fi-topbar-end > [x-data*="notifications"],
.fi-topbar-end > div:has(> .fi-topbar-database-notifications-btn) {
    order: 3;
    margin-inline-start: 0.25rem;
}

@media (min-width: 1024px) {
    .fi-global-search-field input {
        width: 18rem !important;
    }
}

@media (max-width: 640px) {
    .moe-topbar-user {
        display: none;
    }
}

/* User avatar/menu trigger ring. */
.fi-topbar .fi-user-menu-trigger img,
.fi-topbar .fi-avatar img,
.fi-topbar .fi-avatar {
    border: 1px solid var(--moe-border, #e5e7eb) !important;
    border-radius: 9999px !important;
}

/* Global search: Filament 4 draws the border (ring) on the wrapper
 * (.fi-input-wrp) and keeps the input borderless. Style the wrapper only;
 * a border on the input renders a double box. */
.fi-topbar .fi-global-search-field .fi-input-wrp {
    border: 1px solid var(--moe-border, #e5e7eb) !important;
    border-radius: max(var(--moe-radius, 10px), 8px) !important;
    background-color: var(--moe-surface, #ffffff) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.fi-topbar .fi-global-search-field .fi-input-wrp:focus-within {
    border-color: var(--moe-primary, #3b82f6) !important;
    box-shadow: 0 0 0 3px var(--moe-primary-soft, rgba(59, 130, 246, 0.15)) !important;
}

.fi-topbar .fi-global-search-field input,
.fi-topbar .fi-global-search-field .fi-input {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}
/* ------------------------------------------------------------------
 * Tables — one place for every Filament table in the panel.
 * Overrides the stock gray-on-white look with: bordered card container,
 * tinted muted header, roomy rows with brand-tinted hover / zebra stripes,
 * quiet footer, pill badges and calmer action icons. Colours follow the
 * --moe-* tokens so the settings palette still drives the result.
 * ------------------------------------------------------------------ */
:root {
    --moe-ta-head-bg: #f8fafc;
    --moe-ta-head-text: #64748b;
    --moe-ta-row-border: #eef2f7;
    --moe-ta-stripe: #fafbfd;
    --moe-ta-hover: color-mix(in srgb, var(--moe-primary, #3b82f6) 5%, #ffffff);
    --moe-ta-selected: color-mix(in srgb, var(--moe-primary, #3b82f6) 9%, #ffffff);
    --moe-ta-text: #1f2937;
    --moe-ta-text-muted: #6b7280;
}

/* Container card. */
.fi-ta-ctn {
    border-radius: 14px !important;
    border: 1px solid var(--moe-border, #e5e7eb) !important;
    box-shadow: 0 1px 2px 0 rgba(17, 24, 39, 0.04), 0 8px 24px -16px rgba(17, 24, 39, 0.12) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-color: transparent !important;
    background-color: var(--moe-surface, #ffffff) !important;
    overflow: hidden !important;
}

.fi-ta-ctn > * + * {
    border-top: 1px solid var(--moe-ta-row-border) !important;
}

/* Header area (title / description / actions) and toolbar. */
.fi-ta-ctn .fi-ta-header {
    padding: 1rem 1.25rem !important;
}

.fi-ta-ctn .fi-ta-header-toolbar {
    padding: 0.75rem 1.25rem !important;
    border-top-color: var(--moe-ta-row-border) !important;
    background-color: var(--moe-surface, #ffffff) !important;
}

/* Table head. */
.fi-ta-table thead,
.fi-ta-table thead tr,
.fi-ta-table thead th,
.fi-ta-table > thead > tr {
    background-color: var(--moe-ta-head-bg) !important;
}

.fi-ta-header-cell {
    padding: 0.75rem 0.875rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: var(--moe-ta-head-text) !important;
    white-space: nowrap !important;
    border-bottom: 1px solid var(--moe-border, #e5e7eb) !important;
}

.fi-ta-header-cell .fi-ta-header-cell-sort-btn {
    color: inherit !important;
    gap: 0.375rem !important;
}

.fi-ta-header-cell.fi-ta-header-cell-sorted,
.fi-ta-header-cell.fi-ta-header-cell-sorted .fi-icon {
    color: var(--moe-primary, #3b82f6) !important;
}

.fi-ta-header-cell:not(.fi-ta-header-cell-sorted) .fi-icon {
    color: #b0b8c4 !important;
}

/* Column search inputs under the header. */
.fi-ta-table thead .fi-input-wrp {
    border: 1px solid var(--moe-border, #e5e7eb) !important;
    border-radius: 8px !important;
    background-color: var(--moe-surface, #ffffff) !important;
    box-shadow: none !important;
}

.fi-ta-table thead .fi-input-wrp:focus-within {
    border-color: var(--moe-primary, #3b82f6) !important;
}

/* Rows. */
.fi-ta-table,
.fi-ta-table tbody {
    --tw-divide-y-reverse: 0;
    border-color: var(--moe-ta-row-border) !important;
}

.fi-ta-table tbody tr,
.fi-ta-table tbody > tr {
    border-color: var(--moe-ta-row-border) !important;
    transition: background-color 0.15s ease !important;
}

.fi-ta-row.fi-striped {
    background-color: var(--moe-ta-stripe) !important;
}

.fi-ta-row.fi-clickable:hover,
.fi-ta-table tbody tr:hover {
    background-color: var(--moe-ta-hover) !important;
}

.fi-ta-row.fi-selected,
.fi-ta-row.fi-selected.fi-striped {
    background-color: var(--moe-ta-selected) !important;
}

.fi-ta-row.fi-selected > *:first-child::before {
    background-color: var(--moe-primary, #3b82f6) !important;
    width: 3px !important;
}

/* Cells: pad the column wrapper once (never .fi-ta-text-item too, or a
 * badge + description column gets padded twice and drifts). */
.fi-ta-cell .fi-ta-text .fi-ta-text-item {
    padding: 0 !important;
}

.fi-ta-cell .fi-ta-text.fi-ta-text-has-descriptions {
    gap: 0.25rem !important;
}

/* Cells: a little tighter vertically, roomier horizontally, readable ink. */
.fi-ta-cell .fi-ta-text,
.fi-ta-cell .fi-ta-icon,
.fi-ta-cell .fi-ta-image,
.fi-ta-cell .fi-ta-color,
.fi-ta-cell .fi-ta-toggle,
.fi-ta-cell .fi-ta-select,
.fi-ta-cell .fi-ta-text-input,
.fi-ta-cell .fi-ta-checkbox {
    padding: 0.8rem 0.875rem !important;
}

.fi-ta-cell .fi-ta-text-item-label {
    color: var(--moe-ta-text) !important;
    font-size: 0.875rem !important;
    line-height: 1.35rem !important;
}

.fi-ta-cell .fi-ta-text-item-description,
.fi-ta-cell .fi-ta-text-description {
    color: var(--moe-ta-text-muted) !important;
    font-size: 0.75rem !important;
}

/* First data column reads as the row's title. */
.fi-ta-table tbody .fi-ta-cell:first-of-type:not(.fi-ta-selection-cell) .fi-ta-text-item-label,
.fi-ta-table tbody .fi-ta-selection-cell + .fi-ta-cell .fi-ta-text-item-label {
    font-weight: 600 !important;
    color: #111827 !important;
}

/* Badges: soft pills. */
.fi-ta-cell .fi-badge {
    border-radius: 9999px !important;
    padding-inline: 0.625rem !important;
    font-weight: 500 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

/* Row actions: quiet gray icons, brand on hover; primary buttons keep colour. */
.fi-ta-actions .fi-icon-btn {
    color: #94a3b8 !important;
    border-radius: 8px !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.fi-ta-actions .fi-icon-btn:hover {
    color: var(--moe-primary, #3b82f6) !important;
    background-color: var(--moe-primary-soft, rgba(59, 130, 246, 0.10)) !important;
}

.fi-ta-actions .fi-btn.fi-color-gray {
    --tw-ring-color: var(--moe-border, #e5e7eb) !important;
    box-shadow: none !important;
}

/* Checkboxes follow the brand colour. */
.fi-ta-table .fi-checkbox-input:checked,
.fi-ta-content-header .fi-checkbox-input:checked {
    background-color: var(--moe-primary, #3b82f6) !important;
    border-color: var(--moe-primary, #3b82f6) !important;
}

/* Footer / pagination. */
.fi-ta-ctn .fi-pagination {
    padding: 0.75rem 1.25rem !important;
    background-color: var(--moe-ta-stripe) !important;
}

.fi-pagination .fi-pagination-overview,
.fi-pagination .fi-pagination-records-per-page-select-label {
    color: var(--moe-ta-text-muted) !important;
    font-size: 0.8rem !important;
}

.fi-pagination-item.fi-active .fi-pagination-item-label {
    color: var(--moe-primary, #3b82f6) !important;
    font-weight: 600 !important;
}

.fi-pagination-item.fi-active {
    background-color: var(--moe-primary-soft, rgba(59, 130, 246, 0.10)) !important;
    border-radius: 8px !important;
}

/* Bulk-selection bar. */
.fi-ta-selection-indicator {
    background-color: var(--moe-ta-selected) !important;
    color: var(--moe-ta-text) !important;
    padding: 0.625rem 1.25rem !important;
}

/* Empty state. */
.fi-ta-empty-state {
    padding: 4rem 1.5rem !important;
}

.fi-ta-empty-state-icon-bg {
    background-color: var(--moe-primary-soft, rgba(59, 130, 246, 0.10)) !important;
}

.fi-ta-empty-state-icon-bg .fi-icon {
    color: var(--moe-primary, #3b82f6) !important;
}

.fi-ta-empty-state-heading {
    color: var(--moe-ta-text) !important;
}

.fi-ta-empty-state-description {
    color: var(--moe-ta-text-muted) !important;
}

/* Filters dropdown + column manager: match the card radius. */
.fi-ta-filters-dropdown,
.fi-ta-col-manager-dropdown {
    border-radius: 12px !important;
}

/* ------------------------------------------------------------------
 * Segmented control (App\Forms\Components\StatusSelector)
 * Quick filters above tables: caption + pill group, brand-tinted active.
 * ------------------------------------------------------------------ */
.moe-segmented-ctn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.moe-segmented-align-left { justify-content: flex-start; }
.moe-segmented-align-center { justify-content: center; }
.moe-segmented-align-right { justify-content: flex-end; }

.moe-segmented-caption {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
}

/* Track: same surface language as the table header. */
.moe-segmented {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background-color: var(--moe-ta-head-bg, #f8fafc);
    border: 1px solid var(--moe-border, #e5e7eb);
}

.moe-segmented-item {
    appearance: none;
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: #64748b;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.moe-segmented-item:hover {
    color: var(--moe-primary, #3b82f6);
    background-color: var(--moe-primary-soft, rgba(59, 130, 246, 0.08));
}

.moe-segmented-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--moe-primary-soft, rgba(59, 130, 246, 0.25));
}

/* Optional count badge inside a segment. */
.moe-segmented-badge {
    display: inline-block;
    margin-inline-start: 0.375rem;
    padding: 0 0.4rem;
    border-radius: 9999px;
    background-color: rgba(17, 24, 39, 0.08);
    font-size: 0.7rem;
    line-height: 1.1rem;
}

.moe-segmented-item.is-active .moe-segmented-badge {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Active: solid brand pill — matches the sidebar active item and table
 * checkboxes, so every "selected" state on the page shares one colour. */
.moe-segmented-item.is-active {
    background-color: var(--moe-primary, #3b82f6);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12);
}

.moe-segmented-item.is-active:hover {
    background-color: color-mix(in srgb, var(--moe-primary, #3b82f6) 90%, #ffffff);
    color: #ffffff;
}

/* Quick-filter groups inside the table toolbar (requests list). */
.moe-quick-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}

/* Zero-height anchor rendered right before the collapsible-filters row; the
 * quick filters are absolutely positioned onto that row's first line. */
.fi-ta-ctn .moe-quick-filters-anchor {
    position: relative;
    height: 0;
    overflow: visible;
    border: 0 !important;
    z-index: 1;
}

.moe-quick-filters-anchor .moe-quick-filters {
    position: absolute;
    top: 0.75rem;
    inset-inline-start: 1.25rem;
    max-width: calc(100% - 11rem);
    min-height: 2.25rem;
}

/* Start after the reorder trigger icon-button so it stays clickable. */
@media (min-width: 769px) {
    .moe-quick-filters-anchor .moe-quick-filters--after-reorder {
        inset-inline-start: 4.5rem;
        max-width: calc(100% - 14.25rem);
    }
}

/* The filters row itself: trigger pinned to the inline-end, form below. */
.fi-ta-ctn .fi-ta-filters-above-content-ctn {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 0.75rem 1.25rem !important;
    min-height: 3.75rem;
}

.fi-ta-ctn .fi-ta-filters-above-content-ctn .fi-ta-filters-trigger-action-ctn {
    margin: 0 !important;
    margin-inline-start: auto !important;
}

.fi-ta-ctn .fi-ta-filters-above-content-ctn .fi-ta-filters {
    order: 3;
    flex-basis: 100% !important;
    padding-top: 0.75rem !important;
}

/* ------------------------------------------------------------------
 * Buttons — one primary per view, everything else quiet.
 * Primary follows --moe-primary (same token as sidebar / tabs / tables);
 * gray buttons become white outlined "secondary" buttons.
 * ------------------------------------------------------------------ */
.fi-btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.fi-btn.fi-size-md {
    padding: 0.5rem 0.875rem !important;
    font-size: 0.875rem !important;
}

/* Primary: solid brand. */
.fi-btn.fi-color-primary {
    background-color: var(--moe-primary, #3b82f6) !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-btn.fi-color-primary:hover {
    background-color: color-mix(in srgb, var(--moe-primary, #3b82f6) 88%, #000000) !important;
}

.fi-btn.fi-color-primary .fi-icon {
    color: #ffffff !important;
}

/* Gray (secondary — Filament renders it without a fi-color-* class):
 * white, thin border, slate text; brand on hover. */
.fi-btn.fi-color-gray,
.fi-btn:not(.fi-color) {
    background-color: var(--moe-surface, #ffffff) !important;
    color: #334155 !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    border: 1px solid var(--moe-border, #e5e7eb) !important;
}

.fi-btn.fi-color-gray .fi-icon,
.fi-btn:not(.fi-color) .fi-icon {
    color: #64748b !important;
}

.fi-btn.fi-color-gray:hover,
.fi-btn:not(.fi-color):hover {
    border-color: var(--moe-primary, #3b82f6) !important;
    color: var(--moe-primary, #3b82f6) !important;
    background-color: var(--moe-primary-soft, rgba(59, 130, 246, 0.06)) !important;
}

.fi-btn.fi-color-gray:hover .fi-icon,
.fi-btn:not(.fi-color):hover .fi-icon {
    color: var(--moe-primary, #3b82f6) !important;
}

/* Danger stays red but adopts the same shape. */
.fi-btn.fi-color-danger {
    --tw-ring-shadow: 0 0 #0000 !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12) !important;
}

/* Page header: consistent gap between the action buttons. */
.fi-header-actions {
    gap: 0.625rem !important;
}

/* ------------------------------------------------------------------
 * Modals — same card language as tables (radius, border, shadow) and a
 * calmer header; applies to every Filament modal in the panel.
 * ------------------------------------------------------------------ */
.fi-modal-window {
    border-radius: 16px !important;
    border: 1px solid var(--moe-border, #e5e7eb) !important;
    box-shadow: 0 24px 64px -24px rgba(17, 24, 39, 0.35), 0 1px 2px rgba(17, 24, 39, 0.06) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-modal-header {
    padding: 1.25rem 1.5rem 0.75rem !important;
}

.fi-modal-heading {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

.fi-modal-description {
    color: #6b7280 !important;
    font-size: 0.85rem !important;
}

.fi-modal-icon-bg {
    border-radius: 12px !important;
    background-color: var(--moe-primary-soft, rgba(59, 130, 246, 0.10)) !important;
    color: var(--moe-primary, #3b82f6) !important;
}

.fi-modal-icon-bg .fi-icon {
    color: var(--moe-primary, #3b82f6) !important;
}

/* Danger confirmations keep their red icon badge. */
.fi-modal-icon-bg.fi-color-danger {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

.fi-modal-icon-bg.fi-color-danger .fi-icon {
    color: #dc2626 !important;
}

.fi-modal-content {
    padding: 0.5rem 1.5rem 1.25rem !important;
}

/* Database notifications slide-over (.fi-no-database) only. Filament pulls
 * its content flush to the edges with negative margins (-mt-6 / -mb-6) that
 * assume the default py-6 padding; with the tighter padding above the first
 * notification slid up under the sticky header. Reset the vertical margins
 * and give the list a small breathing space below the header divider. The
 * divider colour is left to Filament so dark mode keeps its own tone. */
.fi-no-database .fi-modal-header.fi-sticky {
    padding-bottom: 1rem !important;
}

.fi-no-database .fi-modal-content {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0.5rem 1.5rem 0.5rem !important;
}

.fi-modal-footer {
    padding: 0.875rem 1.5rem !important;
    background-color: var(--moe-ta-stripe, #fafbfd) !important;
    border-top: 1px solid var(--moe-ta-row-border, #eef2f7) !important;
}

.fi-modal-footer-actions {
    gap: 0.5rem !important;
}

/* Form inputs inside modals: match the search-field look. */
/* Filament draws the field border as a Tailwind ring (box-shadow). Setting
 * box-shadow:none would erase it, so use a real border instead and keep
 * box-shadow for the focus halo only. */
.fi-modal .fi-input-wrp,
.fi-fo-field .fi-input-wrp {
    border: 1px solid var(--moe-border, #e5e7eb) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    background-color: var(--moe-surface, #ffffff) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.fi-modal .fi-input-wrp:focus-within,
.fi-fo-field .fi-input-wrp:focus-within {
    border-color: var(--moe-primary, #3b82f6) !important;
    box-shadow: 0 0 0 3px var(--moe-primary-soft, rgba(59, 130, 246, 0.15)) !important;
}

/* Invalid fields keep a red border. */
.fi-fo-field .fi-input-wrp.fi-invalid,
.fi-fo-field:has(.fi-fo-field-wrp-error-message) .fi-input-wrp {
    border-color: #ef4444 !important;
}

.fi-modal .fi-fo-field-label-content {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

/* QR scan modal content ------------------------------------------- */
.moe-qr-scan {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.moe-qr-scan-zone {
    position: relative;
    border-radius: 12px;
    border: 1.5px dashed var(--moe-border, #d9dee7);
    background-color: var(--moe-ta-head-bg, #f8fafc);
    overflow: hidden;
    min-height: 11rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.moe-qr-scan-zone.is-live {
    border-style: solid;
    border-color: var(--moe-primary, #3b82f6);
    background-color: #000;
}

.moe-qr-scan-video {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    display: block;
}

.moe-qr-scan-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 1.5rem 1rem;
    text-align: center;
}

.moe-qr-scan-placeholder-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background-color: var(--moe-primary-soft, rgba(59, 130, 246, 0.10));
    color: var(--moe-primary, #3b82f6);
}

.moe-qr-scan-placeholder-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.moe-qr-scan-placeholder-text {
    margin: 0;
    font-size: 0.8125rem;
    color: #6b7280;
    max-width: 22rem;
}

.moe-qr-scan-stop {
    position: absolute;
    top: 0.625rem;
    inset-inline-end: 0.625rem;
}

.moe-qr-scan-error {
    margin: 0;
    font-size: 0.8125rem;
    color: #dc2626;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.moe-qr-scan-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #9ca3af;
    font-size: 0.75rem;
    font-weight: 600;
}

.moe-qr-scan-divider::before,
.moe-qr-scan-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--moe-ta-row-border, #eef2f7);
}

/* ------------------------------------------------------------------
 * Forms & sections — create / edit pages share the table card language.
 * ------------------------------------------------------------------ */
.fi-section {
    border-radius: 14px !important;
    border: 1px solid var(--moe-border, #e5e7eb) !important;
    box-shadow: 0 1px 2px 0 rgba(17, 24, 39, 0.04), 0 8px 24px -16px rgba(17, 24, 39, 0.12) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-color: transparent !important;
    background-color: var(--moe-surface, #ffffff) !important;
    overflow: hidden;
}

/* Section header: tinted strip with a brand icon badge, like table heads. */
.fi-section-header {
    padding: 0.875rem 1.25rem !important;
    background-color: var(--moe-ta-head-bg, #f8fafc) !important;
    border-bottom: 1px solid var(--moe-ta-row-border, #eef2f7) !important;
    gap: 0.75rem !important;
}

.fi-section-header > .fi-icon {
    width: 2rem !important;
    height: 2rem !important;
    padding: 0.4rem !important;
    border-radius: 9px !important;
    background-color: var(--moe-primary-soft, rgba(59, 130, 246, 0.10)) !important;
    color: var(--moe-primary, #3b82f6) !important;
}

.fi-section-header-heading {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

.fi-section-header-description {
    font-size: 0.78rem !important;
    color: #6b7280 !important;
}

.fi-section-content-ctn {
    border-top: 0 !important;
}

.fi-section-content {
    padding: 1.25rem !important;
}

/* Field labels / help text. */
.fi-fo-field-label-content {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

.fi-fo-field-wrp-helper-text,
.fi-fo-field-wrp-hint {
    color: #9ca3af !important;
    font-size: 0.75rem !important;
}

/* Inputs & selects: bordered wrapper — see the shared rule in the Modals section. */

/* Radio options as selectable cards — ONLY for inline radios (e.g. the
 * applicant-mode picker). Stacked radios keep Filament's plain list so a
 * two-option field does not turn into two full-width slabs. */
.fi-fo-radio.fi-inline {
    gap: 0.625rem !important;
    flex-wrap: wrap;
}

.fi-fo-radio.fi-inline .fi-fo-radio-label {
    align-items: flex-start !important;
    gap: 0.625rem !important;
    padding: 0.75rem 0.875rem !important;
    border: 1px solid var(--moe-border, #e5e7eb) !important;
    border-radius: 10px !important;
    background-color: var(--moe-surface, #ffffff) !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
    flex: 0 1 16rem;
    min-width: 12rem;
}

.fi-fo-radio.fi-inline .fi-fo-radio-label:hover {
    border-color: var(--moe-primary, #3b82f6) !important;
    background-color: var(--moe-primary-soft, rgba(59, 130, 246, 0.04)) !important;
}

.fi-fo-radio.fi-inline .fi-fo-radio-label:has(.fi-radio-input:checked) {
    border-color: var(--moe-primary, #3b82f6) !important;
    background-color: var(--moe-primary-soft, rgba(59, 130, 246, 0.08)) !important;
    box-shadow: inset 0 0 0 1px var(--moe-primary, #3b82f6) !important;
}

/* Shared typography for all radios. */
.fi-fo-radio .fi-fo-radio-label-text {
    font-weight: 500 !important;
    color: #111827 !important;
    font-size: 0.85rem !important;
}

.fi-fo-radio.fi-inline .fi-fo-radio-label-text {
    font-weight: 600 !important;
}

.fi-fo-radio .fi-fo-radio-label-description {
    color: #6b7280 !important;
    font-size: 0.75rem !important;
}

.fi-radio-input:checked,
.fi-checkbox-input:checked {
    background-color: var(--moe-primary, #3b82f6) !important;
    border-color: var(--moe-primary, #3b82f6) !important;
}

/* Form footer actions: sticky bar so save is always reachable. */
.fi-sc-form .fi-sc-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 0.25rem;
    padding: 0.875rem 1.25rem !important;
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(6px);
    border: 1px solid var(--moe-border, #e5e7eb) !important;
    border-radius: 14px !important;
    box-shadow: 0 -4px 20px -12px rgba(17, 24, 39, 0.18) !important;
}

.fi-sc-form .fi-sc-actions .fi-ac {
    gap: 0.625rem !important;
}

/* Sections inside modals: the modal is already the card, so flatten the
 * section chrome into a plain group (header becomes a small subtitle). */
.fi-modal .fi-section {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible;
}

.fi-modal .fi-section-header {
    padding: 0 0 0.5rem !important;
    background: transparent !important;
    border-bottom: 0 !important;
}

.fi-modal .fi-section-header > .fi-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
    padding: 0.25rem !important;
    border-radius: 7px !important;
}

.fi-modal .fi-section-header-heading {
    font-size: 0.85rem !important;
    color: #374151 !important;
}

.fi-modal .fi-section-content {
    padding: 0 !important;
}

/* A modal whose form is a single section already has the modal heading as
 * its title — drop the duplicate section header. */
.fi-modal-content > .fi-sc > .fi-grid-col:only-child > .fi-sc-component > .fi-sc-section > .fi-section > .fi-section-header,
.fi-modal-content > .fi-sc > .fi-grid-col:only-child > .fi-sc-component > .fi-section > .fi-section-header {
    display: none !important;
}

/* Fieldsets (grouped toggles inside a section): light inset panel. */
.fi-fieldset {
    border: 1px solid var(--moe-ta-row-border, #eef2f7) !important;
    border-radius: 10px !important;
    background-color: var(--moe-ta-stripe, #fafbfd) !important;
    padding: 0.875rem 1rem !important;
}

.fi-fieldset > legend {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    background-color: var(--moe-surface, #ffffff);
    border-radius: 6px;
}

/* Toggle rows: label + helper stacked, compact. */
.fi-fo-field:has(> .fi-fo-field-wrp > .fi-fo-toggle) .fi-fo-field-wrp-helper-text,
.fi-fo-field:has(.fi-toggle) .fi-fo-field-wrp-helper-text {
    margin-top: 0.125rem !important;
}

/* Wizard: calmer step header. */
.fi-sc-wizard-header {
    border-radius: 12px !important;
    border: 1px solid var(--moe-border, #e5e7eb) !important;
    background-color: var(--moe-surface, #ffffff) !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-sc-wizard-header-step-icon-ctn {
    border-radius: 10px !important;
}

/* Active (not yet completed) step: brand ring + soft fill, brand icon.
 * Completed steps keep Filament's solid fill with a white check. */
.fi-sc-wizard-header-step.fi-active:not(.fi-completed) .fi-sc-wizard-header-step-icon-ctn {
    border-color: var(--moe-primary, #3b82f6) !important;
    background-color: var(--moe-primary-soft, rgba(59, 130, 246, 0.10)) !important;
}

.fi-sc-wizard-header-step.fi-active:not(.fi-completed) .fi-sc-wizard-header-step-icon-ctn .fi-icon {
    color: var(--moe-primary, #3b82f6) !important;
}

.fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-icon-ctn {
    background-color: var(--moe-primary, #3b82f6) !important;
}

.fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-icon-ctn .fi-icon {
    color: #ffffff !important;
}

.fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-label {
    color: var(--moe-primary, #3b82f6) !important;
}

/* Outlined buttons (backward transitions, reject, next request): white with
 * a coloured border/text so they never compete with the primary action. */
.fi-btn.fi-outlined {
    background-color: var(--moe-surface, #ffffff) !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    border: 1px solid currentColor !important;
}

.fi-btn.fi-outlined.fi-color-danger {
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}

.fi-btn.fi-outlined.fi-color-danger:hover {
    background-color: #fef2f2 !important;
}

.fi-btn.fi-outlined.fi-color-success {
    color: #059669 !important;
    border-color: #6ee7b7 !important;
}

/* Outlined gray (backward transitions, next request). */
.fi-btn.fi-outlined.fi-color-gray,
.fi-btn.fi-outlined:not(.fi-color) {
    color: #334155 !important;
    border-color: var(--moe-border, #e5e7eb) !important;
}

.fi-btn.fi-outlined.fi-color-gray .fi-icon,
.fi-btn.fi-outlined:not(.fi-color) .fi-icon {
    color: #64748b !important;
}

/* Solid success keeps the same shape as primary. */
.fi-btn.fi-color-success:not(.fi-outlined) {
    --tw-ring-shadow: 0 0 #0000 !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12) !important;
}

/* Page header action bar: wrap cleanly and keep a steady rhythm. */
.fi-header-actions {
    flex-wrap: wrap !important;
    row-gap: 0.5rem !important;
}

/* Workflow transition buttons: one shape for all (white, 1px border), the
 * tone only tints the border, text and icon. Hover fills lightly. */
.fi-btn.moe-transition-btn {
    background-color: var(--moe-surface, #ffffff) !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    border: 1px solid var(--moe-border, #e5e7eb) !important;
    color: #334155 !important;
    font-weight: 600 !important;
}

.fi-btn.moe-transition-btn .fi-icon {
    color: currentColor !important;
}

.fi-btn.moe-transition-btn.fi-color-primary {
    color: var(--moe-primary, #3b82f6) !important;
    border-color: color-mix(in srgb, var(--moe-primary, #3b82f6) 45%, #ffffff) !important;
}

.fi-btn.moe-transition-btn.fi-color-primary:hover {
    background-color: var(--moe-primary-soft, rgba(59, 130, 246, 0.08)) !important;
}

.fi-btn.moe-transition-btn.fi-color-success {
    color: #059669 !important;
    border-color: #a7f3d0 !important;
}

.fi-btn.moe-transition-btn.fi-color-success:hover {
    background-color: #ecfdf5 !important;
}

.fi-btn.moe-transition-btn.fi-color-danger {
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

.fi-btn.moe-transition-btn.fi-color-danger:hover {
    background-color: #fef2f2 !important;
}

.fi-btn.moe-transition-btn.fi-color-gray,
.fi-btn.moe-transition-btn:not(.fi-color) {
    color: #475569 !important;
    border-color: var(--moe-border, #e5e7eb) !important;
}

.fi-btn.moe-transition-btn.fi-color-gray:hover,
.fi-btn.moe-transition-btn:not(.fi-color):hover {
    background-color: #f8fafc !important;
}

/* ------------------------------------------------------------------
 * Request stage-history timeline (RequestInfolist → .moe-timeline)
 * Vertical rail on the inline-start side, one node per history row.
 * ------------------------------------------------------------------ */
.moe-timeline.fi-in-repeatable {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    padding-inline-start: 1.75rem;
    margin: 0;
}

.moe-timeline.fi-in-repeatable::before {
    content: "";
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    inset-inline-start: 0.5rem;
    width: 2px;
    background: linear-gradient(180deg, var(--moe-border, #e5e7eb) 0%, var(--moe-border, #e5e7eb) 100%);
    border-radius: 2px;
}

.moe-timeline .fi-in-repeatable-item {
    position: relative;
    padding: 0 0 1.25rem 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.moe-timeline .fi-in-repeatable-item:last-child {
    padding-bottom: 0 !important;
}

/* Node header. */
.moe-tl-head {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    --tl-tone: var(--moe-primary, #3b82f6);
    --tl-tone-soft: var(--moe-primary-soft, rgba(59, 130, 246, 0.12));
}

.moe-tl-head[data-tone="success"] { --tl-tone: #059669; --tl-tone-soft: #d1fae5; }
.moe-tl-head[data-tone="danger"]  { --tl-tone: #dc2626; --tl-tone-soft: #fee2e2; }
.moe-tl-head[data-tone="warning"] { --tl-tone: #d97706; --tl-tone-soft: #fef3c7; }
.moe-tl-head[data-tone="info"]    { --tl-tone: color-mix(in srgb, var(--moe-primary, #3b82f6) 70%, #0ea5e9); --tl-tone-soft: color-mix(in srgb, var(--moe-primary, #3b82f6) 12%, #ffffff); }

.moe-tl-dot {
    position: absolute;
    inset-inline-start: -1.75rem;
    top: 0.35rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 9999px;
    background: var(--tl-tone-soft);
    border: 2px solid var(--tl-tone);
    box-shadow: 0 0 0 3px var(--moe-surface, #ffffff);
}

.moe-tl-dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 9999px;
    background: var(--tl-tone);
}

/* Latest step (first item) gets a filled, slightly larger dot. */
.moe-timeline .fi-in-repeatable-item:first-child .moe-tl-dot {
    width: 1.25rem;
    height: 1.25rem;
    top: 0.25rem;
    inset-inline-start: -1.82rem;
}

.moe-tl-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.moe-tl-stages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.moe-tl-stage {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.moe-tl-stage-from {
    background-color: #f1f5f9;
    color: #64748b;
}

.moe-tl-stage-to {
    background-color: var(--tl-tone-soft);
    color: var(--tl-tone);
}

.moe-tl-arrow {
    width: 1rem;
    height: 1rem;
    color: #94a3b8;
}

.moe-tl-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    font-size: 0.78rem;
    color: #6b7280;
}

.moe-tl-meta .fi-icon,
.moe-tl-meta svg {
    width: 0.9rem;
    height: 0.9rem;
    color: #94a3b8;
    vertical-align: -2px;
    margin-inline-end: 0.25rem;
}

.moe-tl-actor {
    display: inline-flex;
    align-items: center;
    color: #374151;
    font-weight: 500;
}

.moe-tl-actor-kind {
    margin-inline-start: 0.35rem;
    padding: 0 0.4rem;
    border-radius: 9999px;
    background-color: #f1f5f9;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 600;
}

.moe-tl-duration {
    display: inline-flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

.moe-tl-time {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    font-size: 0.75rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.moe-tl-time .moe-tl-clock {
    font-weight: 600;
    color: #374151;
}

/* Detail entries under the header: indented card that continues the node. */
.moe-timeline .fi-in-repeatable-item > .fi-sc {
    gap: 0.5rem 1rem !important;
}

.moe-timeline .fi-in-repeatable-item .fi-in-entry:not(:has(.moe-tl-head)) {
    background-color: var(--moe-ta-stripe, #fafbfd);
    border: 1px solid var(--moe-ta-row-border, #eef2f7);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
}

.moe-timeline .fi-in-repeatable-item .fi-in-entry:not(:has(.moe-tl-head)) .fi-in-entry-label {
    font-size: 0.72rem !important;
    color: #9ca3af !important;
}

/* Request view: no page title — breadcrumbs on one side, actions on the
 * other, in a single compact row. */
.fi-resource-requests.fi-resource-view-record-page .fi-header {
    align-items: center !important;
    min-height: 2.5rem;
}

.fi-resource-requests.fi-resource-view-record-page .fi-header-heading {
    direction: ltr;
    unicode-bidi: plaintext;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: #111827 !important;
    line-height: 1.2 !important;
}

.fi-resource-requests.fi-resource-view-record-page .fi-header > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ------------------------------------------------------------------
 * Request view — header action bar as a card, and the first section's
 * three groups (identity / money / applicant).
 * ------------------------------------------------------------------ */
.fi-resource-requests.fi-resource-view-record-page .fi-header {
    background-color: var(--moe-surface, #ffffff) !important;
    border: 1px solid var(--moe-border, #e5e7eb) !important;
    border-radius: 14px !important;
    padding: 0.75rem 1rem !important;
    box-shadow: 0 1px 2px 0 rgba(17, 24, 39, 0.04), 0 8px 24px -16px rgba(17, 24, 39, 0.12) !important;
    margin-bottom: 0.25rem;
}

.fi-resource-requests.fi-resource-view-record-page .fi-header .fi-breadcrumbs {
    font-size: 0.85rem;
}

/* Section content holding fieldsets: tighter vertical rhythm. */
.fi-in-entry .fi-fieldset,
.fi-section-content .moe-req-group {
    padding: 0.875rem 1rem 1rem !important;
}

.moe-req-group > legend {
    background-color: var(--moe-surface, #ffffff);
}

/* Entry labels inside the groups: small, muted; values first-class. */
.moe-req-group .fi-in-entry-label {
    font-size: 0.72rem !important;
    color: #9ca3af !important;
    font-weight: 600 !important;
}

.moe-req-group .fi-in-text-item {
    font-size: 0.9rem !important;
}

/* Identity row: request number + stage stand out. */
.moe-req-group-identity {
    background-color: var(--moe-surface, #ffffff) !important;
}

/* Money cards: render the three amounts as equal flat tiles. */
.moe-req-group-money .fi-in-entry:has(.fi-in-text) > .fi-in-entry-content {
    min-width: 0;
}

/* Applicant group: subtle tint to separate it from the money row. */
.moe-req-group-applicant {
    background-color: var(--moe-ta-stripe, #fafbfd) !important;
}

/* Helper text under entries (e.g. "منذ 3 ساعات"). */
.moe-req-group .fi-in-entry-helper-text,
.moe-req-group .fi-sc-component-helper-text {
    font-size: 0.7rem !important;
    color: #9ca3af !important;
}

/* Request number title: "#S…" with a copy affordance. */
.moe-req-number {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    /* LTR digits, but visual order flipped so the icon sits on the right
     * (page start) and the copy affordance on the left. */
    direction: ltr;
    flex-direction: row-reverse;
    background: transparent;
    border: 0;
    padding: 0.125rem 0.25rem;
    margin: -0.125rem -0.25rem;
    border-radius: 8px;
    cursor: pointer;
    color: #111827;
    font: inherit;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    transition: background-color 0.15s ease;
}

.moe-req-number:hover {
    background-color: var(--moe-primary-soft, rgba(59, 130, 246, 0.08));
}

.moe-req-number-icon {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    border-radius: 9px;
    align-items: center;
    justify-content: center;
    background-color: var(--moe-primary-soft, rgba(59, 130, 246, 0.10));
    color: var(--moe-primary, #3b82f6);
    margin-inline-start: 0.25rem;
}

.moe-req-number-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.moe-req-number-hash {
    color: #9ca3af;
    font-weight: 600;
}

.moe-req-number-copy {
    display: inline-flex;
    color: #9ca3af;
    opacity: 0.55;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.moe-req-number:hover .moe-req-number-copy {
    opacity: 1;
    color: var(--moe-primary, #3b82f6);
}

.moe-req-number-copy svg {
    width: 1rem;
    height: 1rem;
}

.moe-req-number-copied {
    font-size: 0.75rem;
    font-weight: 600;
    color: #059669;
    background-color: #ecfdf5;
    border-radius: 9999px;
    padding: 0 0.5rem;
}

/* Fees & payment strip (request view). */
.moe-money {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.moe-money-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.moe-money-tile {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--moe-ta-row-border, #eef2f7);
    background-color: var(--moe-surface, #ffffff);
    border-inline-start: 3px solid var(--tile-accent, #cbd5e1);
    min-height: 5.25rem;
}

.moe-money-tile[data-tone="neutral"] { --tile-accent: var(--moe-primary, #3b82f6); }
.moe-money-tile[data-tone="success"] { --tile-accent: #10b981; }
.moe-money-tile[data-tone="danger"]  { --tile-accent: #ef4444; }
.moe-money-tile[data-tone="muted"]   { --tile-accent: #cbd5e1; }

.moe-money-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #9ca3af;
}

.moe-money-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.moe-money-value small {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
}

.moe-money-tile[data-tone="danger"] .moe-money-value { color: #b91c1c; }
.moe-money-tile[data-tone="success"] .moe-money-value { color: #047857; }

.moe-money-strike {
    font-size: 0.85rem;
    font-weight: 500;
    color: #9ca3af;
    text-decoration-color: #9ca3af;
}

.moe-money-sub {
    font-size: 0.72rem;
    color: #6b7280;
}

.moe-money-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    font-size: 0.78rem;
    color: #4b5563;
}

.moe-money-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-variant-numeric: tabular-nums;
}

.moe-money-meta-item svg {
    width: 0.9rem;
    height: 0.9rem;
    color: #9ca3af;
}

.moe-money-status {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: #f1f5f9;
    color: #475569;
}

.moe-money-status[data-tone="success"] { background-color: #d1fae5; color: #047857; }
.moe-money-status[data-tone="warning"] { background-color: #fef3c7; color: #b45309; }
.moe-money-status[data-tone="danger"]  { background-color: #fee2e2; color: #b91c1c; }
.moe-money-status[data-tone="info"]    { background-color: #e0f2fe; color: #0369a1; }
.moe-money-status[data-tone="primary"] { background-color: var(--moe-primary-soft, rgba(59,130,246,.12)); color: var(--moe-primary, #3b82f6); }

/* Fieldset rows: consistent baseline; fewer stray gaps. */
.moe-req-group > .fi-sc {
    row-gap: 0.75rem !important;
}

/* Key/value grid (request view groups). */
.moe-kv {
    display: grid;
    grid-template-columns: repeat(var(--kv-cols, 3), minmax(0, 1fr));
    gap: 0.75rem 1rem;
    margin: 0;
}

.moe-kv-item {
    grid-column: span var(--kv-span, 1);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6rem 0.75rem;
    min-height: 4.4rem;
    border-radius: 10px;
    background-color: var(--moe-surface, #ffffff);
    border: 1px solid var(--moe-ta-row-border, #eef2f7);
    min-width: 0;
}

.moe-kv-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #9ca3af;
    margin: 0;
}

.moe-kv-value {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    min-height: 1.75rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #111827;
    min-width: 0;
}

.moe-kv-icon {
    width: 1.05rem;
    height: 1.05rem;
    color: #94a3b8;
    flex: 0 0 auto;
}

.moe-kv-text,
.moe-kv-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.moe-kv-link {
    color: inherit;
    text-decoration: none;
}

.moe-kv-link:hover {
    color: var(--moe-primary, #3b82f6);
}

.moe-kv-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25rem;
    background-color: #f1f5f9;
    color: #475569;
    white-space: nowrap;
}

.moe-kv-badge[data-tone="primary"] { background-color: var(--moe-primary-soft, rgba(59,130,246,.12)); color: var(--moe-primary, #3b82f6); }
.moe-kv-badge[data-tone="success"] { background-color: #d1fae5; color: #047857; }
.moe-kv-badge[data-tone="warning"] { background-color: #fef3c7; color: #b45309; }
.moe-kv-badge[data-tone="danger"]  { background-color: #fee2e2; color: #b91c1c; }
.moe-kv-badge[data-tone="info"]    { background-color: #e0f2fe; color: #0369a1; }

/* Copyable pills (IPS codes): one chip per code, stacked beside the label. */
.moe-kv-compact .moe-kv-item:has(.moe-kv-chips),
.moe-kv-value:has(.moe-kv-chips) {
    flex-wrap: nowrap;
}

.moe-kv-chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

.moe-kv-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    background-color: #f1f5f9;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.15s ease, border-color 0.15s ease;
}

.moe-kv-chip:hover {
    filter: brightness(0.97);
    border-color: currentColor;
}

.moe-kv-chip-hint {
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.75;
}

.moe-kv-chip-icon {
    width: 0.8rem;
    height: 0.8rem;
    opacity: 0.6;
}

.moe-kv-chip[data-tone="primary"] { background-color: var(--moe-primary-soft, rgba(59,130,246,.12)); color: var(--moe-primary, #3b82f6); }
.moe-kv-chip[data-tone="success"] { background-color: #d1fae5; color: #047857; }
.moe-kv-chip[data-tone="warning"] { background-color: #fef3c7; color: #b45309; }
.moe-kv-chip[data-tone="danger"]  { background-color: #fee2e2; color: #b91c1c; }
.moe-kv-chip[data-tone="info"]    { background-color: #e0f2fe; color: #0369a1; }

.dark .moe-kv-chip {
    background-color: rgb(255 255 255 / 0.06);
    color: #cbd5e1;
}

.moe-kv-copy,
.moe-kv-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-inline-start: auto;
    border: 1px solid var(--moe-border, #e5e7eb);
    background: var(--moe-surface, #ffffff);
    border-radius: 7px;
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    text-decoration: none;
    flex: 0 0 auto;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.moe-kv-copy svg,
.moe-kv-action svg {
    width: 0.9rem;
    height: 0.9rem;
}

.moe-kv-copy:hover,
.moe-kv-action:hover {
    color: var(--moe-primary, #3b82f6);
    border-color: var(--moe-primary, #3b82f6);
}

.moe-kv-action[data-tone="success"] { color: #047857; border-color: #a7f3d0; }
.moe-kv-action[data-tone="success"]:hover { background-color: #ecfdf5; color: #047857; border-color: #6ee7b7; }

.moe-kv-copy + .moe-kv-action { margin-inline-start: 0; }
.moe-kv-copy-ok { color: #059669; }

.moe-kv-sub {
    font-size: 0.7rem;
    color: #9ca3af;
}

/* Groups (fieldsets) on the request view: flat container, tighter legend. */
.moe-req-group {
    background-color: var(--moe-ta-stripe, #fafbfd) !important;
    border: 1px solid var(--moe-ta-row-border, #eef2f7) !important;
}

.moe-req-group-applicant {
    background-color: var(--moe-ta-stripe, #fafbfd) !important;
}

/* Request view: tighter vertical rhythm around the sticky action card. */
.fi-resource-requests.fi-resource-view-record-page.fi-page {
    padding-top: 1rem !important;
    gap: 1rem !important;
}

.fi-resource-requests.fi-resource-view-record-page .fi-page-header-main-ctn {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 1rem !important;
}

.fi-resource-requests.fi-resource-view-record-page .fi-header {
    padding: 0.6rem 1rem !important;
    margin-bottom: 0 !important;
}

/* ------------------------------------------------------------------
 * Previous requests of the applicant (request view) — custom table.
 * ------------------------------------------------------------------ */
.moe-prev-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--moe-ta-row-border, #eef2f7);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--moe-surface, #ffffff);
}

.moe-prev-head,
.moe-prev-row {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 2fr) minmax(0, 1.1fr) 7rem 8rem 2rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
}

.moe-prev-head {
    background-color: var(--moe-ta-head-bg, #f8fafc);
    border-bottom: 1px solid var(--moe-border, #e5e7eb);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--moe-ta-head-text, #64748b);
}

.moe-prev-row {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--moe-ta-row-border, #eef2f7);
    transition: background-color 0.15s ease;
}

.moe-prev-row:last-child {
    border-bottom: 0;
}

.moe-prev-row:nth-child(even) {
    background-color: var(--moe-ta-stripe, #fafbfd);
}

.moe-prev-row:hover {
    background-color: var(--moe-ta-hover, rgba(59, 130, 246, 0.05));
}

.moe-prev-row:hover .moe-prev-go {
    color: var(--moe-primary, #3b82f6);
    transform: translateX(-2px);
}

.moe-prev-c-service,
.moe-prev-c-date {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.moe-prev-num {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #111827;
    font-size: 0.85rem;
}

.moe-prev-service {
    font-weight: 600;
    color: #111827;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.moe-prev-sub,
.moe-prev-muted {
    font-size: 0.72rem;
    color: #9ca3af;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.moe-prev-date {
    font-size: 0.82rem;
    color: #374151;
    font-variant-numeric: tabular-nums;
}

.moe-prev-stage,
.moe-prev-pay {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #f1f5f9;
    color: #475569;
    --tone: #94a3b8;
}

.moe-prev-stage-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background-color: var(--tone);
    flex: 0 0 auto;
}

.moe-prev-stage[data-tone="primary"], .moe-prev-pay[data-tone="primary"] { background-color: var(--moe-primary-soft, rgba(59,130,246,.12)); color: var(--moe-primary, #3b82f6); --tone: var(--moe-primary, #3b82f6); }
.moe-prev-stage[data-tone="success"], .moe-prev-pay[data-tone="success"] { background-color: #d1fae5; color: #047857; --tone: #10b981; }
.moe-prev-stage[data-tone="warning"], .moe-prev-pay[data-tone="warning"] { background-color: #fef3c7; color: #b45309; --tone: #f59e0b; }
.moe-prev-stage[data-tone="danger"],  .moe-prev-pay[data-tone="danger"]  { background-color: #fee2e2; color: #b91c1c; --tone: #ef4444; }
.moe-prev-stage[data-tone="info"],    .moe-prev-pay[data-tone="info"]    { background-color: #e0f2fe; color: #0369a1; --tone: #0ea5e9; }

.moe-prev-go {
    width: 1.1rem;
    height: 1.1rem;
    color: #cbd5e1;
    transition: color 0.15s ease, transform 0.15s ease;
}

.moe-prev-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.25rem 0;
    font-size: 0.75rem;
    color: #6b7280;
}

.moe-prev-more {
    color: var(--moe-primary, #3b82f6);
    font-weight: 600;
    text-decoration: none;
}

.moe-prev-more:hover {
    text-decoration: underline;
}

.moe-prev-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 1px dashed var(--moe-border, #e5e7eb);
    border-radius: 12px;
    color: #9ca3af;
    font-size: 0.85rem;
}

.moe-prev-empty svg {
    width: 1.25rem;
    height: 1.25rem;
}

@media (max-width: 900px) {
    .moe-prev-head { display: none; }
    .moe-prev-row {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
    }
    .moe-prev-c-go { display: none; }
}

/* ------------------------------------------------------------------
 * Service form data (request view) — definition grid.
 * ------------------------------------------------------------------ */
.moe-sfd {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.moe-sfd-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--moe-ta-row-border, #eef2f7);
    background-color: var(--moe-surface, #ffffff);
    min-width: 0;
}

.moe-sfd-item.is-wide {
    grid-column: 1 / -1;
}

.moe-sfd-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #9ca3af;
}

.moe-sfd-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #111827;
    word-break: break-word;
    min-width: 0;
}

.moe-sfd-mono {
    font-variant-numeric: tabular-nums;
}

/* Rich values (file chips, images, lists) already carry their own markup —
 * make sure they inherit a quieter weight. */
.moe-sfd-item.is-wide .moe-sfd-value {
    font-weight: 500;
}

.moe-sfd-value img {
    border-radius: 8px;
    border: 1px solid var(--moe-border, #e5e7eb);
    max-height: 12rem;
}

.moe-sfd-value a:not(.moe-kv-action) {
    color: var(--moe-primary, #3b82f6);
}

/* Section header "تعديل البيانات" action: same quiet secondary style. */
.fi-section-header .fi-btn.fi-color-warning {
    background-color: var(--moe-surface, #ffffff) !important;
    color: #b45309 !important;
    border: 1px solid #fcd34d !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
}

.fi-section-header .fi-btn.fi-color-warning:hover {
    background-color: #fffbeb !important;
}

@media (max-width: 800px) {
    .moe-sfd { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
 * Workflow progress stepper (request view)
 * ------------------------------------------------------------------ */
.moe-progress {
    display: flex;
    align-items: flex-start;
    justify-content: safe center;
    max-width: 62rem;
    margin: 0 auto 0.25rem;
    padding: 0.25rem 0 0.9rem;
    border-bottom: 1px solid var(--moe-border, #e5e7eb);
    overflow-x: auto;
}

/* Divider should span the full section, not just the capped stepper. */
.moe-progress {
    border-bottom: 0;
}

.moe-progress-step {
    flex: 1 1 0;
    min-width: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    --st: #cbd5e1;
    --st-soft: #f1f5f9;
    --st-ink: #94a3b8;
}

/* One brand colour for the whole path; only the reject/cancel terminal
 * node is red. */
.moe-progress-step {
    --st: var(--moe-primary, #3b82f6);
    --st-soft: var(--moe-primary-soft, rgba(59, 130, 246, 0.12));
}

.moe-progress-step.moe-progress-terminal {
    --st: #ef4444;
    --st-soft: #fee2e2;
}

.moe-progress-track {
    display: flex;
    align-items: center;
    width: 100%;
}

.moe-progress-line {
    flex: 1 1 auto;
    height: 2px;
    background-color: #e5e7eb;
}

.moe-progress-step:first-child .moe-progress-line-before,
.moe-progress-step:last-child .moe-progress-line-after {
    visibility: hidden;
}

.moe-progress-node {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    border: 2px solid #e5e7eb;
    background-color: var(--moe-surface, #ffffff);
    color: #94a3b8;
    transition: transform 0.15s ease;
}

.moe-progress-node svg {
    width: 0.95rem;
    height: 0.95rem;
}

.moe-progress-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    line-height: 1.2;
    max-width: 9rem;
}

.moe-progress-at {
    font-size: 0.68rem;
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
}

/* Done: filled node in the stage tone, connector lines coloured. */
.moe-progress-step[data-state="done"] .moe-progress-node {
    background-color: var(--st);
    border-color: var(--st);
    color: #ffffff;
}

.moe-progress-step[data-state="done"] .moe-progress-line,
.moe-progress-step[data-state="current"] .moe-progress-line-before {
    background-color: var(--st);
}

.moe-progress-step[data-state="done"] .moe-progress-label {
    color: #374151;
}

/* Current: ringed node, bold label. */
.moe-progress-step[data-state="current"] .moe-progress-node {
    border-color: var(--st);
    background-color: var(--st-soft);
    color: var(--st);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--st) 18%, transparent);
    transform: scale(1.08);
}

.moe-progress-step[data-state="current"] .moe-progress-label {
    color: #111827;
    font-weight: 700;
}

.moe-progress-now {
    color: var(--st) !important;
    font-weight: 600;
}

/* Terminal (reject / cancel) node hangs off the path with a dashed link. */
.moe-progress-terminal .moe-progress-line-before.is-dashed,
.moe-progress-step:has(+ .moe-progress-terminal) .moe-progress-line-after {
    background: repeating-linear-gradient(90deg, #ef4444 0 6px, transparent 6px 11px);
}

.moe-progress-terminal .moe-progress-node {
    border-color: var(--st);
    background-color: var(--st);
    color: #ffffff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--st) 18%, transparent);
}

.moe-progress-terminal .moe-progress-label {
    color: var(--st);
    font-weight: 700;
}

/* Overview section without header: trim top padding. */
.moe-req-overview .fi-section-content {
    padding-top: 1rem !important;
}

/* Compact key/value variant (the "الطلب" strip): label and value on one
 * line, short tiles, sub-line tucked under the value. */
.moe-kv-compact .moe-kv-item {
    min-height: 0;
    padding: 0.5rem 0.75rem;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
}

.moe-kv-compact .moe-kv-label {
    flex: 0 0 auto;
    padding-inline-end: 0.6rem;
    border-inline-end: 1px solid var(--moe-ta-row-border, #eef2f7);
    line-height: 1.6rem;
}

.moe-kv-compact .moe-kv-value {
    flex: 1 1 auto;
    min-height: 1.6rem;
    font-size: 0.88rem;
}

.moe-kv-compact .moe-kv-sub {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

/* Fieldset groups on the request view: tighter outer padding + legend gap. */
.moe-req-group {
    padding: 0.75rem 0.85rem 0.85rem !important;
}

/* Stepper between the 'الطلب' strip and the fees strip. */
.moe-req-overview .fi-in-entry:has(.moe-progress) {
    padding: 0;
}

.moe-req-overview .moe-progress {
    max-width: none;
    margin: 0;
    padding: 0.9rem 0.75rem 0.6rem;
    border: 1px solid var(--moe-border, #e5e7eb);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--moe-primary, #007bff) 3%, #fff);
}

.dark .moe-req-overview .moe-progress {
    border-color: rgb(255 255 255 / 0.08);
    background: rgb(255 255 255 / 0.02);
}


/* Form-data layout switch (cards / table). */
.moe-sfd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.moe-sfd-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}

.moe-sfd-title svg {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--moe-primary, #007bff);
}

.moe-sfd-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.moe-sfd-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: 1px solid var(--moe-border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.moe-sfd-copy:hover {
    color: var(--moe-primary, #007bff);
    border-color: var(--moe-primary, #007bff);
}

.moe-sfd-copy svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* Service-data section: no heading; the edit action (when allowed) sits on
   the same visual row as the cards/table toolbar. */
.moe-sfd-section {
    position: relative;
}

.moe-sfd-section > .fi-section-header {
    position: absolute;
    inset-inline-start: 1.25rem;
    top: 1.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    z-index: 1;
}

.moe-sfd-section.fi-section-has-header > .fi-section-content-ctn {
    border-top: 0;
}

.moe-segmented-sm {
    padding: 2px;
    border-radius: 8px;
}

.moe-segmented-sm .moe-segmented-item {
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 6px;
}

.moe-segmented-sm .moe-segmented-item svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* Table layout: same items, rendered as rows of a two-column table. */
.moe-sfd-wrap[data-layout="table"] .moe-sfd {
    display: block;
    border: 1px solid var(--moe-ta-row-border, #eef2f7);
    border-radius: 12px;
    overflow: hidden;
}

.moe-sfd-wrap[data-layout="table"] .moe-sfd-item {
    display: grid;
    grid-template-columns: minmax(10rem, 28%) 1fr;
    align-items: start;
    gap: 1rem;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--moe-ta-row-border, #eef2f7);
    background-color: var(--moe-surface, #ffffff);
}

.moe-sfd-wrap[data-layout="table"] .moe-sfd-item:nth-child(even) {
    background-color: var(--moe-ta-stripe, #fafbfd);
}

.moe-sfd-wrap[data-layout="table"] .moe-sfd-item:last-child {
    border-bottom: 0;
}

.moe-sfd-wrap[data-layout="table"] .moe-sfd-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    padding-inline-end: 1rem;
    border-inline-end: 1px solid var(--moe-ta-row-border, #eef2f7);
    align-self: stretch;
    display: flex;
    align-items: center;
}

.moe-sfd-wrap[data-layout="table"] .moe-sfd-value {
    font-weight: 500;
}


/* ==================================================================
 * Request view — mobile (most staff open requests from phones).
 * Everything stacks to one column; nothing may overflow horizontally.
 * ================================================================== */
.moe-mob-actions { display: none; }

@media (max-width: 768px) {
    .fi-page.fi-resource-requests.fi-resource-view-record-page > .fi-page-header-main-ctn > .fi-header {
        position: static !important;
        z-index: auto !important;
        box-shadow: none !important;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
        padding: 0.75rem !important;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-header-heading {
        font-size: 1.15rem !important;
        text-align: right;
    }

    /* Action bar docks to the bottom of the screen. Only the first action
       (the main transition) shows; the rest slide up from "المزيد". */
    .fi-page.fi-resource-requests.fi-resource-view-record-page {
        padding-bottom: 5.5rem;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-header .fi-ac {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 30; /* below Filament modals (40) */
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.5rem !important;
        /* Physical left padding: the "المزيد" toggle is pinned bottom-left. */
        padding: 0.65rem 0.85rem calc(0.65rem + env(safe-area-inset-bottom)) 6.6rem;
        background-color: var(--moe-surface, #ffffff);
        border-top: 1px solid var(--moe-border, #e5e7eb);
        box-shadow: 0 -10px 30px -18px rgb(17 24 39 / 0.35);
        transition: padding-bottom 0.2s ease;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-header .fi-ac > * {
        min-width: 0;
        width: 100%;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-header:not(.moe-mob-open) .fi-ac > :not(:first-child) {
        display: none !important;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-header.moe-mob-open .fi-ac {
        padding-left: 0.85rem;
        padding-bottom: calc(4rem + env(safe-area-inset-bottom));
        max-height: 85vh;
        border-start-start-radius: 18px;
        border-start-end-radius: 18px;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-header.moe-mob-open .fi-ac > :not(:first-child) {
        display: flex;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-header .fi-ac > * {
        display: flex;
        align-items: stretch;
        height: 2.75rem;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-header .fi-ac .fi-dropdown,
    .fi-resource-requests.fi-resource-view-record-page .fi-header .fi-ac .fi-dropdown-trigger,
    .fi-resource-requests.fi-resource-view-record-page .fi-header .fi-ac .fi-dropdown-trigger > * {
        display: flex;
        width: 100%;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-header .fi-ac .fi-btn {
        width: 100%;
        min-height: 2.75rem;
        justify-content: flex-start;
        padding-inline: 1rem;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-header .fi-ac .fi-btn-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Filament positions dropdown panels below the trigger (fixed, floating-ui)
       and does not flip inside the docked bar — lift them above the button
       (button 2.75rem + 2 x 0.5rem offset). */
    .fi-resource-requests.fi-resource-view-record-page .fi-header .fi-ac .fi-dropdown-panel {
        z-index: 35;
        max-height: 60vh;
        overflow-y: auto;
        transform: translateY(calc(-100% - 3.75rem));
    }

    /* Flattened action groups inside the sheet: trigger hidden, items inline. */
    .fi-resource-requests.fi-resource-view-record-page .fi-header.moe-mob-open .fi-ac .fi-dropdown {
        display: block;
        height: auto;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-header.moe-mob-open .fi-ac .fi-dropdown:has(.moe-mob-flat) .fi-dropdown-trigger {
        display: none;
    }

    .fi-dropdown-panel.moe-mob-flat {
        display: block !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        opacity: 1 !important;
    }

    .moe-mob-flat .fi-dropdown-list {
        display: grid;
        gap: 0.5rem;
        padding: 0;
        border: 0;
    }

    /* One look for every action in the sheet: white, gray border, centered,
       dark label. Semantics survive through the icon colour only. */
    .fi-resource-requests.fi-resource-view-record-page .fi-header.moe-mob-open .fi-ac .fi-btn,
    .moe-mob-flat .fi-dropdown-list-item {
        display: flex;
        align-items: center;
        justify-content: flex-start !important;
        text-align: start;
        gap: 0.6rem;
        width: 100%;
        min-height: 2.75rem;
        padding: 0 1rem;
        border-radius: 0.6rem;
        border: 1px solid var(--moe-border, #d1d5db) !important;
        background-color: var(--moe-surface, #ffffff) !important;
        background-image: none !important;
        box-shadow: none !important;
        font-size: 0.9rem;
        font-weight: 600;
        color: #1f2937 !important;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-header.moe-mob-open .fi-ac .fi-btn .fi-btn-label,
    .moe-mob-flat .fi-dropdown-list-item-label {
        color: #1f2937 !important;
        font-weight: 600;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-header.moe-mob-open .fi-ac .fi-btn .fi-icon,
    .moe-mob-flat .fi-dropdown-list-item .fi-icon {
        order: -1;
        width: 1.1rem;
        height: 1.1rem;
        color: #6b7280;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-header.moe-mob-open .fi-ac .fi-btn.fi-color-success .fi-icon,
    .moe-mob-flat .fi-dropdown-list-item.fi-color-success .fi-icon { color: #059669; }

    .fi-resource-requests.fi-resource-view-record-page .fi-header.moe-mob-open .fi-ac .fi-btn.fi-color-danger .fi-icon,
    .moe-mob-flat .fi-dropdown-list-item.fi-color-danger .fi-icon { color: #dc2626; }

    .fi-resource-requests.fi-resource-view-record-page .fi-header.moe-mob-open .fi-ac .fi-btn.fi-color-primary .fi-icon,
    .moe-mob-flat .fi-dropdown-list-item.fi-color-primary .fi-icon,
    .moe-mob-flat .fi-dropdown-list-item.fi-color-info .fi-icon { color: var(--moe-primary, #007bff); }

    .moe-mob-flat .fi-dropdown-list-item.fi-color-warning .fi-icon { color: #d97706; }

    .moe-mob-more:focus,
    .moe-mob-more:focus-visible {
        outline: none;
        border-color: var(--moe-border, #d1d5db);
    }

    .moe-mob-actions { display: contents; }

    .moe-mob-more {
        position: fixed;
        left: 0.85rem;
        bottom: calc(0.65rem + env(safe-area-inset-bottom));
        z-index: 31;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        height: 2.75rem;
        min-width: 5.1rem;
        padding: 0 0.85rem;
        font-size: 0.85rem;
        font-weight: 600;
        color: #374151;
        background-color: var(--moe-surface, #ffffff);
        border: 1px solid var(--moe-border, #d1d5db);
        border-radius: 10px;
    }

    .moe-mob-more svg { width: 1.1rem; height: 1.1rem; }

    .moe-mob-backdrop {
        position: fixed;
        inset: 0;
        z-index: 29;
        background-color: rgb(17 24 39 / 0.35);
    }

    /* Sections & groups: reclaim horizontal room. */
    .fi-resource-requests.fi-resource-view-record-page .fi-section-content {
        padding: 0.75rem !important;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-in-entry .fi-fieldset,
    .fi-resource-requests.fi-resource-view-record-page .fi-section-content .moe-req-group {
        padding: 0.65rem 0.75rem 0.75rem !important;
    }

    .fi-resource-requests.fi-resource-view-record-page .fi-in-entry:has(.moe-progress) {
        padding: 0;
    }

    /* Key/value grids: one item per row. */
    .moe-kv {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .moe-kv-item {
        grid-column: auto !important;
    }

    .moe-kv-compact .moe-kv-item {
        flex-wrap: wrap;
    }

    .moe-kv-compact .moe-kv-item:has(.moe-kv-chips),
    .moe-kv-value:has(.moe-kv-chips) {
        flex-wrap: wrap;
    }

    .moe-kv-compact .moe-kv-label {
        flex-basis: 100%;
        border-inline-end: 0;
        padding-inline-end: 0;
        line-height: 1.2rem;
    }

    .moe-kv-compact .moe-kv-sub {
        margin-inline-start: 0;
    }

    .moe-kv-value {
        overflow-wrap: anywhere;
    }

    .moe-kv-badge {
        white-space: normal;
    }

    /* Money: tiles become horizontal rows. */
    .moe-money-tiles {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .moe-money-tile {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.15rem 0.75rem;
        padding: 0.6rem 0.8rem;
    }

    .moe-money-tile .moe-money-label {
        flex: 1 1 auto;
    }

    .moe-money-tile .moe-money-value {
        flex: 0 0 auto;
        font-size: 1.05rem;
    }

    .moe-money-tile .moe-money-sub {
        flex-basis: 100%;
    }

    .moe-money-meta {
        flex-wrap: wrap;
        gap: 0.4rem 0.75rem;
    }

    /* Stepper: horizontal swipe, starts from the first stage. */
    .moe-req-overview .moe-progress {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0.8rem 0.5rem 0.6rem;
        scroll-snap-type: x proximity;
        /* Soft fade on the trailing edge hints that more stages are off-screen. */
        mask-image: linear-gradient(to left, #000 94%, transparent);
        -webkit-mask-image: linear-gradient(to left, #000 94%, transparent);
    }

    .moe-req-overview .moe-progress::-webkit-scrollbar {
        display: none;
    }

    .moe-progress-step {
        flex: 0 0 5.75rem;
        min-width: 5.75rem;
        scroll-snap-align: center;
    }

    .moe-progress-label {
        font-size: 0.72rem;
    }

    /* Form data toolbar: title on its own row, tools underneath. */
    .moe-sfd-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .moe-sfd-title {
        flex-basis: 100%;
    }

    .moe-sfd-tools {
        width: 100%;
        justify-content: space-between;
    }

    .moe-sfd-wrap[data-layout="table"] .moe-sfd-item {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        padding: 0.6rem 0.75rem;
    }

    .moe-sfd-wrap[data-layout="table"] .moe-sfd-label {
        border-inline-end: 0;
        padding-inline-end: 0;
    }

    /* Previous requests: one card per row. */
    .moe-prev-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
        padding: 0.75rem;
    }

    .moe-prev-c-stage,
    .moe-prev-c-pay {
        justify-self: start;
    }

    /* Stage history: time drops under the stages. */
    .moe-tl-head {
        flex-wrap: wrap;
        gap: 0.6rem 0.75rem;
    }

    .moe-tl-main {
        flex: 1 1 calc(100% - 2rem);
    }

    .moe-tl-time {
        flex-basis: 100%;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        padding-inline-start: 1.85rem;
    }

    /* Anything else that renders a real table (payments, attachments…). */
    .fi-resource-requests.fi-resource-view-record-page .fi-section-content table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
}


/* ==================================================================
 * Requests list — mobile. Quick filters leave the toolbar overlay and
 * become a normal, swipeable row; secondary money/date columns hide so
 * the table fits a phone with only a light horizontal scroll.
 * ================================================================== */
@media (max-width: 768px) {
    /* Page header: title row, then full-width action buttons. */
    .fi-resource-requests.fi-resource-list-records-page .fi-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
    }

    .fi-resource-requests.fi-resource-list-records-page .fi-header .fi-ac {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem !important;
    }

    .fi-resource-requests.fi-resource-list-records-page .fi-header .fi-ac > * {
        min-width: 0;
    }

    .fi-resource-requests.fi-resource-list-records-page .fi-header .fi-ac .fi-btn {
        width: 100%;
        justify-content: center;
    }

    /* Stats: 2 x 2 grid instead of a 500px tall stack (requests list only —
       other pages keep the responsive auto-fit grid from moe-stats.css). */
    .fi-resource-requests.fi-resource-list-records-page .fi-wi-stats-overview .fi-section .fi-sc.fi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    .fi-resource-requests.fi-resource-list-records-page .fi-wi-stats-overview .fi-section-content-ctn {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Quick filters: back into normal flow, one segmented row per group. */
    .fi-ta-ctn .moe-quick-filters-anchor {
        height: auto;
        padding: 0.75rem 0.85rem 0;
    }

    .moe-quick-filters-anchor .moe-quick-filters {
        position: static;
        max-width: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .moe-quick-filters .moe-segmented-ctn {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
    }

    .moe-quick-filters .moe-segmented-caption {
        flex: 0 0 auto;
        width: 3rem;
    }

    .moe-quick-filters .moe-segmented {
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .moe-quick-filters .moe-segmented::-webkit-scrollbar { display: none; }

    .moe-quick-filters .moe-segmented .moe-segmented-item {
        flex: 1 0 auto;
        white-space: nowrap;
    }

    .fi-ta-ctn .fi-ta-filters-above-content-ctn {
        padding: 0.5rem 0.85rem 0.75rem !important;
        min-height: 0;
    }

    /* Toolbar (sort + columns) stays on one line. */
    .fi-ta-header-toolbar {
        padding: 0.6rem 0.85rem !important;
        gap: 0.5rem !important;
    }

    /* Per-column search inputs are desktop-only; the global search + filters
       cover the phone. */
    .fi-ta-table tr:has(.fi-ta-individual-search-cell) {
        display: none;
    }

    /* Secondary columns hide below the tablet breakpoint. */
    .fi-ta-header-cell-price,
    .fi-ta-cell-price,
    .fi-ta-header-cell-paid-and-remaining-price,
    .fi-ta-cell-paid-and-remaining-price,
    .fi-ta-header-cell-net-amount,
    .fi-ta-cell-net-amount,
    .fi-ta-header-cell-commission,
    .fi-ta-cell-commission,
    .fi-ta-header-cell-products-count,
    .fi-ta-cell-products-count,
    .fi-ta-header-cell-created-at,
    .fi-ta-cell-created-at,
    .fi-ta-header-cell-department-name,
    .fi-ta-cell-department-name,
    .fi-ta-header-cell-service-settlementdirectorate-name,
    .fi-ta-cell-service-settlementdirectorate-name,
    .fi-ta-header-cell-school-name,
    .fi-ta-cell-school-name {
        display: none !important;
    }

    .fi-ta-table .fi-ta-cell {
        padding-inline: 0.6rem !important;
    }

    .fi-ta-selection-cell {
        display: none !important;
    }

    /* Pagination: per-page selector under the pager. */
    .fi-pagination {
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
        padding: 0.75rem 0.85rem !important;
    }
}

/* ------------------------------------------------------------------
 * Directorate settlements — «التفاصيل» modal (MOH-1181).
 * Logical properties only, so the layout mirrors correctly in RTL.
 * ------------------------------------------------------------------ */
.moe-sd {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.moe-sd-empty {
    padding: 1.5rem;
    text-align: center;
    color: #6b7280;
}

.moe-sd-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    font-size: 0.82rem;
    color: #4b5563;
}

.moe-sd-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-variant-numeric: tabular-nums;
}

.moe-sd-meta-item svg,
.moe-sd-tile-label svg {
    width: 0.9rem;
    height: 0.9rem;
    color: #9ca3af;
}

.moe-sd-date {
    font-weight: 700;
    color: #111827;
}

.moe-sd-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.moe-sd-tile {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--moe-ta-row-border, #eef2f7);
    border-inline-start: 3px solid var(--tile-accent, #cbd5e1);
    background-color: var(--moe-surface, #ffffff);
}

.moe-sd-tile[data-tone="success"] { --tile-accent: #10b981; }
.moe-sd-tile[data-tone="warning"] { --tile-accent: #f59e0b; }
.moe-sd-tile[data-tone="primary"] { --tile-accent: var(--moe-primary, #3b82f6); }

.moe-sd-tile-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #9ca3af;
}

.moe-sd-tile-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.moe-sd-tiles[data-cols="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.moe-sd-remaining {
    margin-block-end: 0.75rem;
}

.moe-sd-tile[data-tone="remaining"] {
    --tile-accent: #c4b8e8;
    background-color: #faf9fd;
    border-color: #efedf7;
    border-inline-start-color: var(--tile-accent);
}

.moe-sd-tile[data-tone="remaining"] .moe-sd-tile-label,
.moe-sd-tile[data-tone="remaining"] .moe-sd-tile-label svg {
    color: #8a82a6;
}

.moe-sd-tile[data-tone="remaining"] .moe-sd-tile-value {
    color: #5b5478;
}

.moe-sd-table-wrap {
    overflow-x: auto;
}

.moe-sd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.moe-sd-table th,
.moe-sd-table td {
    padding: 0.5rem 0.75rem;
    text-align: start;
    white-space: nowrap;
    border-block-end: 1px solid var(--moe-ta-row-border, #eef2f7);
}

.moe-sd-table th {
    font-size: 0.74rem;
    font-weight: 600;
    color: #6b7280;
    background-color: #f8fafc;
}

.moe-sd-table td.moe-sd-service {
    white-space: normal;
    font-weight: 600;
    color: #111827;
}

.moe-sd-table td.moe-sd-net {
    font-weight: 700;
    color: var(--moe-primary, #3b82f6);
}

.moe-sd-table tfoot td {
    font-weight: 700;
    color: #111827;
    background-color: #f8fafc;
    border-block-end: 0;
}

.dark .moe-sd-meta,
.dark .moe-sd-empty { color: #9ca3af; }
.dark .moe-sd-date,
.dark .moe-sd-tile-value,
.dark .moe-sd-table td.moe-sd-service,
.dark .moe-sd-table tfoot td { color: #f3f4f6; }
.dark .moe-sd-tile { background-color: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); }
.dark .moe-sd-table th,
.dark .moe-sd-table tfoot td { background-color: rgba(255, 255, 255, 0.04); }
.dark .moe-sd-table th,
.dark .moe-sd-table td { border-color: rgba(255, 255, 255, 0.08); }
.dark .moe-sd-tile[data-tone="remaining"] { background-color: rgba(196, 184, 232, 0.05); border-color: rgba(196, 184, 232, 0.12); border-inline-start-color: rgba(196, 184, 232, 0.45); }
.dark .moe-sd-tile[data-tone="remaining"] .moe-sd-tile-label,
.dark .moe-sd-tile[data-tone="remaining"] .moe-sd-tile-label svg { color: #a9a2c4; }
.dark .moe-sd-tile[data-tone="remaining"] .moe-sd-tile-value { color: #dcd6f0; }

@media (max-width: 640px) {
    .moe-sd-tiles,
    .moe-sd-tiles[data-cols="2"] { grid-template-columns: 1fr; }
}