@import './elis.css';
@import './enterprise-banking.css';
@import './mobile-ui.css';
@import './mobile-ux-performance.css';
@import './workspace-optimization.css';
/* loan-dashboard.css → loan-dashboard-entry.css Vite entry (dashboard route only, PR1C). */
/* Module-scoped CSS (MFI-PERF-CSS-01) — do NOT @import into this bundle:
 * - resources/css/client-360.css
 * - resources/css/mpa-sa.css
 * - resources/css/superadmin.css  (layouts/superadmin @vite + scoped loader)
 */

@tailwind base;
@tailwind components;

@layer base {
    /* Hide Alpine-cloaked nodes until the component binds (prevents full-screen modal flash/blockers). */
    [x-cloak] {
        display: none !important;
    }

    :root {
        --eb-primary: #0f8f55;
        --eb-primary-dark: #0a7344;
        --eb-primary-light: #12a865;
        --eb-primary-muted: rgba(15, 143, 85, 0.12);
        --eb-navy: #0f2747;
        --eb-sidebar: #071e35;
        --eb-blue: #2563eb;
        --eb-blue-muted: rgba(37, 99, 235, 0.1);
        --eb-gold: #c8a44d;
        --eb-gold-muted: rgba(200, 164, 77, 0.14);
        --eb-warning: #f59e0b;
        --eb-danger: #dc2626;
        --eb-bg: #f5f7fa;
        --eb-card: #ffffff;
        --eb-text: #0f172a;
        --eb-muted: #64748b;
        --eb-border: #dde4ee;
        --eb-radius-sm: 12px;
        --eb-radius-md: 16px;
        --eb-radius-lg: 24px;
        --eb-shadow-sm: 0 1px 2px rgba(15, 39, 71, 0.05), 0 2px 8px rgba(15, 39, 71, 0.04);
        --eb-shadow-md: 0 2px 4px rgba(15, 39, 71, 0.05), 0 8px 24px rgba(15, 39, 71, 0.07);
        --eb-shadow-lg: 0 4px 12px rgba(15, 39, 71, 0.07), 0 16px 40px rgba(15, 39, 71, 0.09);
    }

    html,
    body,
    #loan-app-shell,
    #superadmin-app-shell {
        color-scheme: light only;
    }

    /* Hide native number spinners (Chrome/Safari/Edge + Firefox). Typing still works. */
    input[type='number'] {
        -moz-appearance: textfield;
        appearance: textfield;
    }

    input[type='number']::-webkit-outer-spin-button,
    input[type='number']::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}

@layer components {
    /* Create/edit form requirement markers (also applied by JS on raw labels). */
    [data-required-star] {
        margin-left: 0.125rem;
        color: #dc2626;
        font-weight: 600;
    }

    [data-optional-hint] {
        margin-left: 0.25rem;
        font-size: 0.75rem;
        font-weight: 400;
        color: #94a3b8;
    }

    .mfi-hero-mesh {
        background-image:
            radial-gradient(ellipse 80% 50% at 50% -20%, rgba(16, 185, 129, 0.18), transparent),
            radial-gradient(ellipse 60% 40% at 100% 0%, rgba(139, 92, 246, 0.14), transparent),
            radial-gradient(ellipse 50% 30% at 0% 50%, rgba(47, 79, 79, 0.35), transparent);
    }

    .mfi-grid-texture {
        background-image:
            linear-gradient(rgba(148, 163, 184, 0.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(148, 163, 184, 0.06) 1px, transparent 1px);
        background-size: 48px 48px;
    }

    .mfi-glass {
        @apply border border-white/10 bg-white/5 backdrop-blur-xl;
    }

    .mfi-glass-light {
        @apply border border-slate-200/80 bg-white/80 backdrop-blur-xl shadow-lg shadow-slate-900/5;
    }

    .mfi-card-hover {
        @apply transition duration-300 ease-out;
    }

    .mfi-card-hover:hover {
        @apply -translate-y-1 shadow-xl shadow-slate-900/10;
    }

    .mfi-gradient-text {
        @apply bg-gradient-to-r from-emerald-300 via-teal-200 to-violet-300 bg-clip-text text-transparent;
    }

    .mfi-section-fade {
        animation: mfi-fade-up 0.7s ease-out both;
    }

    .mfi-stagger-1 { animation-delay: 0.05s; }
    .mfi-stagger-2 { animation-delay: 0.12s; }
    .mfi-stagger-3 { animation-delay: 0.2s; }
    .mfi-stagger-4 { animation-delay: 0.28s; }

    .mfi-pulse-dot {
        animation: mfi-pulse-dot 2s ease-in-out infinite;
    }

    .mfi-float-slow {
        animation: mfi-float 6s ease-in-out infinite;
    }

    .mfi-float-delay {
        animation: mfi-float 6s ease-in-out 1.5s infinite;
    }

    .mfi-progress-bar {
        animation: mfi-progress-grow 1.2s ease-out forwards;
    }

    .mfi-nav-scrolled {
        @apply border-slate-200/60 bg-white/80 shadow-sm shadow-slate-900/5;
    }

    .mfi-hero-premium {
        background-image:
            radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59, 130, 246, 0.22), transparent),
            radial-gradient(ellipse 60% 40% at 100% 0%, rgba(37, 99, 235, 0.18), transparent),
            radial-gradient(ellipse 50% 30% at 0% 50%, rgba(30, 58, 95, 0.45), transparent);
    }

    .mfi-trust-scroll {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mfi-trust-scroll::-webkit-scrollbar {
        display: none;
    }

    .mfi-device-frame {
        @apply bg-white;
    }

    .mfi-marketing-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 60;
    }

    html.scroll-pt-16 {
        scroll-padding-top: 4rem;
    }

    .mfi-bento-featured {
        @apply lg:col-span-2 lg:row-span-2;
    }

    /* Enterprise workspace design tokens (Phase 2) */
    .ws-shell {
        @apply rounded-2xl border border-slate-200/80 bg-white shadow-sm;
    }

    .ws-shell--workspace {
        @apply overflow-visible shadow-none border-slate-200/70;
    }

    .ws-header {
        @apply overflow-visible border-b border-slate-100 bg-gradient-to-r from-slate-50 via-white to-teal-50/30;
    }

    .ws-eyebrow {
        @apply text-[10px] font-bold uppercase tracking-wider text-teal-700/90;
    }

    .ws-title {
        @apply text-lg font-bold tracking-tight text-slate-900 sm:text-xl leading-tight;
    }

    .ws-subtitle {
        @apply mt-1 max-w-3xl text-sm leading-relaxed text-slate-600;
    }

    .ws-badge {
        @apply inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold;
    }

    .ws-badge--teal {
        @apply bg-teal-100 text-teal-800;
    }

    .ws-badge--danger {
        @apply bg-rose-100 text-rose-800;
    }

    .ws-badge--warning {
        @apply bg-amber-100 text-amber-900;
    }

    .ws-badge--success {
        @apply bg-emerald-100 text-emerald-800;
    }

    .ws-badge--neutral {
        @apply bg-slate-100 text-slate-700;
    }

    .ws-btn {
        @apply inline-flex items-center justify-center rounded-lg px-3 py-2 text-xs font-semibold transition sm:text-sm;
    }

    .ws-btn--primary {
        @apply bg-brand text-white shadow-sm hover:bg-brand-dark;
    }

    .ws-btn--secondary {
        @apply border border-slate-200 bg-white text-slate-700 hover:bg-slate-50;
    }

    .ws-btn--ghost {
        @apply text-slate-600 hover:bg-slate-100;
    }

    .ws-input {
        @apply rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:border-teal-500 focus:outline-none focus:ring-1 focus:ring-teal-500/40;
    }

    .ws-tabs {
        @apply w-full min-w-0;
    }

    .ws-tabs__scroll-wrap {
        @apply relative min-w-0 w-full;
    }

    .ws-tabs__scroll-fade {
        @apply pointer-events-none absolute inset-y-0 z-[1] w-6 transition-opacity duration-200 sm:w-8;
    }

    .ws-tabs__scroll-fade--left {
        @apply left-0 bg-gradient-to-r from-white/95 via-white/70 to-transparent;
    }

    .ws-tabs__scroll-fade--right {
        @apply right-0 bg-gradient-to-l from-white/95 via-white/70 to-transparent;
    }

    .ws-tabs__nav {
        @apply flex min-w-0 w-full max-w-full flex-nowrap items-stretch gap-0.5 overflow-x-auto overflow-y-hidden px-2 py-1 scroll-smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .ws-tabs__nav::-webkit-scrollbar {
        height: 4px;
    }

    .ws-tabs__nav::-webkit-scrollbar-thumb {
        @apply rounded-full bg-slate-300/80;
    }

    .ws-tab {
        @apply shrink-0 whitespace-nowrap rounded-md px-2.5 py-1.5 text-xs font-semibold text-slate-600 transition hover:bg-slate-100 hover:text-slate-900;
    }

    .ws-tab--collapsed {
        @apply hidden;
    }

    .ws-tab--active {
        @apply bg-brand text-white shadow-sm hover:bg-brand hover:text-white;
    }

    .e360--employee .ws-tabs {
        @apply border-0 bg-transparent shadow-none;
    }

    .e360--employee .ws-tabs__nav {
        @apply gap-0 border-b border-slate-200 px-0;
    }

    .e360--employee .ws-tab {
        @apply rounded-none border-b-2 border-transparent bg-transparent px-3 py-2.5 text-sm text-slate-600 shadow-none hover:bg-transparent hover:text-slate-900;
    }

    .e360--employee .ws-tab--active {
        @apply border-brand bg-transparent text-brand-dark shadow-none hover:bg-transparent hover:text-brand-dark;
    }

    .e360--employee .ws-tab--more {
        @apply border-transparent border-dashed;
    }

    .ws-tab--more {
        @apply shrink-0 border border-dashed border-slate-200;
    }

    .ws-tab--more-hidden {
        display: none !important;
    }

    /* Attention badge on workspace tabs (e.g. Approvals awaiting-me count). */
    .ws-tab__badge {
        @apply ml-1.5 inline-flex min-w-[1.4rem] shrink-0 items-center justify-center rounded-full px-1.5 py-0.5 text-[11px] font-black leading-none tabular-nums;
    }

    .ws-tab__badge--alert {
        background: #e11d48;
        color: #fff;
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 0.95),
            0 0 0 3px rgba(225, 29, 72, 0.45),
            0 2px 6px rgba(225, 29, 72, 0.35);
        animation: ws-tab-badge-pulse 1.8s ease-in-out infinite;
    }

    .ws-tab--active .ws-tab__badge--alert {
        box-shadow:
            0 0 0 2px rgba(255, 255, 255, 0.35),
            0 0 0 3px rgba(255, 255, 255, 0.55),
            0 2px 8px rgba(0, 0, 0, 0.25);
    }

    @keyframes ws-tab-badge-pulse {
        0%,
        100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.08);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .ws-tab__badge--alert {
            animation: none;
        }
    }

    .ws-tab--secondary {
        @apply py-2 text-xs;
    }

    .ws-tabs--secondary .ws-tab--active {
        @apply bg-brand text-white;
    }

    .ws-tabs--layer2 .ws-tab:not(.ws-tab--active) {
        @apply border border-slate-200 bg-white text-slate-600 shadow-sm transition-colors duration-150;
    }

    .ws-tabs--layer2 .ws-tab:not(.ws-tab--active):hover {
        @apply border-[#2f4f4f]/35 bg-slate-100 text-[#264040] shadow-sm;
    }

    .ws-tabs--layer2 .ws-tab:not(.ws-tab--active):focus-visible {
        @apply outline-none ring-2 ring-[#2f4f4f]/30 ring-offset-1;
    }

    .ws-tabs--layer2 .ws-tab--active {
        @apply border-[#2f4f4f] bg-[#2f4f4f] text-white shadow-sm ring-2 ring-[#2f4f4f]/20;
    }

    .ws-tabs--layer2 .ws-tab--active:hover {
        @apply border-[#264040] bg-[#264040] text-white;
    }

    .ws-tabs--layer2 .ws-tab--active:focus-visible {
        @apply outline-none ring-2 ring-[#2f4f4f]/40 ring-offset-1;
    }

    .ws-tabs--layer2 .ws-tab--active .intel-tab-count {
        @apply bg-white/25 text-white;
    }

    .ws-tabs--layer2 .ws-tab:not(.ws-tab--active) .intel-tab-count {
        @apply bg-slate-100 text-slate-700;
    }

    .ws-tabs--layer2 {
        @apply rounded-b-2xl border-t border-slate-200/80 bg-slate-50/90;
    }

    .ws-tabs__layer-label {
        @apply select-none px-2 pt-1 text-[10px] font-bold uppercase tracking-wider text-slate-400;
    }

    .ws-tabs--layer2 .ws-tab {
        @apply py-2 text-[11px] sm:text-xs;
    }

    .ws-tabs--layer2 .ws-tabs__nav {
        @apply flex-nowrap overflow-x-auto overflow-y-hidden;
    }

    .ws-overflow-menu {
        @apply w-max min-w-[11rem] max-w-[min(17.5rem,calc(100vw-1rem))] rounded-lg border border-slate-200/90 bg-white py-1 shadow-lg shadow-slate-900/10 ring-1 ring-slate-900/[0.04];
    }

    .ws-overflow-menu--scroll {
        @apply max-h-[min(70vh,20rem)] overflow-y-auto overscroll-contain;
    }

    .ws-overflow-menu__section + .ws-overflow-menu__section {
        @apply border-t border-slate-100;
    }

    .ws-overflow-menu__label {
        @apply px-3 pb-0.5 pt-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-400;
    }

    .ws-overflow-menu__item {
        @apply mx-1 flex items-center gap-2 rounded-md px-2.5 py-1.5 text-[13px] font-medium leading-snug text-slate-700 transition-colors hover:bg-slate-100 focus:bg-slate-100 focus:outline-none whitespace-normal;
    }

    .ws-overflow-menu__item--active {
        @apply bg-brand-muted font-semibold text-brand-dark hover:bg-brand-muted;
    }

    .ws-overflow-menu__item--collapsed {
        display: none !important;
    }

    .ws-more-dropdown {
        @apply w-max min-w-[11rem] max-w-[min(17.5rem,calc(100vw-1rem))] max-h-[min(70vh,20rem)] overflow-y-auto;
    }

    .ws-kpi-zone {
        @apply space-y-2;
    }

    .ws-kpi-toggle {
        @apply flex w-full min-h-[2.5rem] items-center justify-between gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2.5 text-xs font-semibold text-slate-600 hover:bg-slate-50 sm:w-auto;
    }

    .ws-kpi-strip--insights {
        @apply border border-dashed border-slate-200 bg-slate-50/60 shadow-none;
    }

    @media (max-width: 639px) {
        .ws-tabs__nav {
            @apply -mx-1 px-1;
        }

        .ws-header .ws-btn--secondary.hidden.sm\:inline-flex {
            display: none;
        }
    }

    .ws-kpi-strip {
        @apply rounded-xl bg-slate-50/70 shadow-none;
    }

    .ws-kpi-strip__scroll {
        @apply grid grid-cols-2 gap-2.5 p-3 sm:grid-cols-3 sm:gap-3 sm:p-4 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6;
    }

    .ws-kpi {
        @apply flex min-h-[4.75rem] min-w-0 flex-col justify-center rounded-xl bg-white px-3.5 py-3;
    }

    .ws-kpi--link {
        @apply cursor-pointer transition hover:-translate-y-px hover:shadow-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500;
    }

    .ws-kpi--neutral {
        @apply ring-1 ring-slate-200/80;
    }

    .ws-kpi--danger {
        @apply bg-rose-50 ring-1 ring-rose-200/90;
    }

    .ws-kpi--warning {
        @apply bg-amber-50 ring-1 ring-amber-200/90;
    }

    .ws-kpi--success {
        @apply bg-emerald-50 ring-1 ring-emerald-200/90;
    }

    .ws-kpi--info {
        @apply bg-sky-50 ring-1 ring-sky-200/90;
    }

    .ws-kpi__label {
        @apply text-[10px] font-bold uppercase tracking-wide text-slate-500;
    }

    .ws-kpi__value {
        @apply mt-1 text-xl font-bold tabular-nums leading-none text-slate-900 sm:text-2xl;
    }

    .ws-kpi__hint {
        @apply mt-1.5 text-xs leading-snug text-slate-500;
    }

    .ws-filter-bar {
        @apply rounded-xl border border-slate-200 bg-white shadow-sm;
    }

    /* UI-WORKSPACE-01 ? enterprise page layout hierarchy */
    .ws-page {
        @apply mx-auto w-full max-w-[1600px];
    }

    .ws-page-section {
        @apply space-y-4 sm:space-y-5;
    }

    .ws-page-header {
        @apply border-b border-slate-100 pb-4 sm:pb-5;
    }

    .ws-action-bar {
        @apply flex shrink-0 flex-wrap items-center justify-end gap-2;
    }

    .ws-action-bar--header {
        @apply w-full sm:w-auto sm:max-w-[50%] lg:max-w-none;
    }

    .ws-action-bar__page-actions {
        @apply flex flex-wrap items-center justify-end gap-2;
    }

    .ws-action-bar--header .ws-btn--primary:not([data-ws-workspace-primary]) {
        @apply border border-slate-200 bg-white text-slate-700 shadow-none hover:bg-slate-50;
    }

    .ws-action-bar--header [data-ws-workspace-primary].ws-btn--primary {
        @apply border-transparent bg-brand text-white shadow-sm hover:bg-brand-dark;
    }

    /* UI-MOBILE-HEADER-ACTIONS ? compact action row above workspace tabs (<768px) */
    @media (max-width: 767px) {
        .ws-header__main {
            @apply gap-2;
        }

        .ws-page-header .ws-header__main {
            @apply gap-2;
        }

        .ws-action-bar--header {
            @apply max-w-none flex-nowrap items-center justify-start gap-1.5 overflow-x-auto pb-0.5;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            /* Let export/menus escape; horizontal scroll still works on the flex children */
            overflow-y: visible;
        }

        .ws-action-bar--header::-webkit-scrollbar {
            display: none;
        }

        .ws-action-bar--header .ws-action-bar__page-actions {
            @apply flex shrink-0 flex-nowrap items-center gap-1.5;
            overflow: visible;
        }

        /* Export trigger inside the scrolled action row */
        .ws-action-bar--header .ws-action-bar__page-actions > [class~="relative"],
        .ws-action-bar--header .ws-action-bar__page-actions > div[class~="relative"] {
            overflow: visible;
        }

        .ws-action-bar--header > .ws-btn,
        .ws-action-bar--header > div > .ws-btn,
        .ws-action-bar--header .ws-action-bar__page-actions > a,
        .ws-action-bar--header .ws-action-bar__page-actions > button,
        .ws-action-bar--header .ws-action-bar__page-actions > form > button {
            @apply min-h-[2rem] shrink-0 flex-none whitespace-nowrap rounded-md px-2.5 py-1 text-[11px] font-semibold leading-tight;
            height: auto;
        }

        .ws-header .ws-action-bar--header .ws-btn,
        .ws-page-header .ws-action-bar--header .ws-btn,
        .elis-page--entity360 .ws-shell .ws-header .ws-action-bar--header .ws-btn {
            min-height: 2rem;
        }

        .ws-action-bar--header .ws-btn svg {
            @apply ml-0.5 inline h-3 w-3 shrink-0;
        }

        .ws-action-bar--header [data-ws-workspace-primary].ws-btn--primary {
            @apply border-transparent bg-brand text-white shadow-sm hover:bg-brand-dark;
            color: #fff;
        }

        .ws-action-bar--header .ws-action-bar__page-actions > a:not(.ws-btn),
        .ws-action-bar--header .ws-action-bar__page-actions > button:not(.ws-btn),
        .ws-action-bar--header .ws-action-bar__page-actions > [class~="relative"] > button:not(.ws-btn),
        .ws-action-bar--header .ws-action-bar__page-actions > div > button:not(.ws-btn) {
            @apply inline-flex min-h-[2rem] items-center rounded-md border border-slate-200 bg-white px-2.5 py-1 text-[11px] font-semibold leading-tight text-slate-700 shadow-none hover:bg-slate-50;
            height: auto;
        }

        .ws-action-bar--header .ws-action-bar__page-actions > a[class*="bg-[#2f4f4f]"]:not(.ws-btn),
        .ws-action-bar--header .ws-action-bar__page-actions > a[class*="text-white"]:not(.ws-btn) {
            @apply border-transparent bg-brand text-white hover:bg-brand-dark;
            color: #fff;
        }
    }

    .ws-filter-container {
        @apply rounded-xl border border-slate-200/80 bg-slate-50/80 px-3 py-3 sm:px-4 sm:py-3.5;
    }

    .ws-filter-container--integrated {
        @apply rounded-none border-x-0 border-t border-b border-slate-100 bg-slate-50/90 shadow-none;
    }

    .ws-filter-container--sticky {
        @apply sticky top-[2.125rem] z-10;
    }

    .ws-filter-container--compact {
        @apply py-2.5 sm:py-3;
    }

    .ws-filter-toolbar {
        @apply flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between;
    }

    .ws-filter-grid {
        @apply grid grid-cols-1 gap-3 sm:grid-cols-2 lg:flex lg:flex-wrap lg:items-end lg:gap-3;
    }

    .ws-filter-field {
        @apply min-w-0 flex-1 sm:max-w-[11rem];
    }

    .ws-filter-actions {
        @apply flex shrink-0 flex-wrap items-center gap-2 lg:pb-0.5;
    }

    .ws-filter-count {
        @apply inline-flex min-h-[1.5rem] items-center rounded-full bg-teal-100 px-2 py-0.5 text-[10px] font-bold tabular-nums text-teal-800;
    }

    .ws-filter-count--inline {
        @apply mr-1 rounded-lg bg-slate-100 px-2.5 py-1 text-[11px] font-semibold text-slate-600;
    }

    .ws-filter-collapse__summary {
        @apply flex cursor-pointer list-none items-center justify-between gap-2 rounded-lg bg-white px-3 py-2.5 ring-1 ring-slate-200;
    }

    .ws-filter-collapse__summary::-webkit-details-marker {
        display: none;
    }

    .ws-filter-collapse__summary-label {
        @apply text-sm font-semibold text-slate-800;
    }

    .ws-filter-collapse__summary-hint {
        @apply text-xs font-normal text-slate-500;
    }

    .ws-filter-collapse__body {
        @apply pt-3;
    }

    @media (min-width: 1024px) {
        .ws-filter-collapse__summary {
            display: none;
        }

        .ws-filter-collapse__body {
            @apply pt-0;
        }
    }

    .ws-content {
        @apply min-w-0 space-y-4 sm:space-y-5;
    }

    .ws-content--table-focus > .ws-card,
    .ws-content--table-focus > .ws-table-wrap {
        @apply shadow-md;
    }

    .ws-intelligence-banner {
        @apply rounded-xl bg-teal-50/80 p-4 ring-1 ring-teal-200/80 sm:p-5;
    }

    .ws-intelligence-banner__title {
        @apply text-base font-semibold text-teal-950;
    }

    .ws-intelligence-banner__subtitle {
        @apply mt-1 text-sm text-teal-900/75;
    }

    .ws-intelligence-banner__hint {
        @apply mt-2 text-sm italic text-teal-900/70;
    }

    .ws-intelligence-banner__filter {
        @apply mt-3 flex flex-wrap items-center gap-2;
    }

    .ws-intelligence-banner__filter-label {
        @apply text-[11px] font-semibold uppercase tracking-wide text-teal-800/70;
    }

    .ws-intelligence-banner__filter-badge {
        @apply inline-flex items-center rounded-full border border-teal-300 bg-white px-3 py-1 text-xs font-semibold text-teal-900;
    }

    .ws-intelligence-banner__extra {
        @apply mt-4 border-t border-teal-200/80 pt-4;
    }

    .loan-workspace-content {
        @apply ws-content;
    }

    .ws-filter-label {
        @apply mb-0.5 block text-[10px] font-semibold uppercase tracking-wide text-slate-500;
    }

    /* UI-REFINEMENT-01 ? workspace header, search, responsive polish */
    .ws-header__breadcrumb {
        @apply mb-2 flex flex-wrap items-center gap-1 text-xs text-slate-500;
    }

    .ws-header__breadcrumb-link {
        @apply hover:text-teal-700;
    }

    .ws-header__breadcrumb-current {
        @apply font-semibold text-slate-700;
    }

    .ws-header__main {
        @apply flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between;
    }

    .ws-header__identity {
        @apply min-w-0 flex-1;
    }

    .ws-header__meta {
        @apply mb-1.5 flex flex-wrap items-center gap-1.5;
    }

    .ws-header__search {
        @apply hidden;
    }

    .ws-search-field {
        @apply relative w-full;
    }

    .ws-search-field__icon {
        @apply pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400;
    }

    .ws-search-field__input {
        @apply w-full py-2.5 pl-10 pr-10 text-sm;
    }

    .ws-search-field__clear {
        @apply absolute right-2 top-1/2 inline-flex h-7 w-7 -translate-y-1/2 items-center justify-center rounded-md text-slate-400 hover:bg-slate-100 hover:text-slate-600;
    }

    .ws-search-field__kbd {
        @apply pointer-events-none absolute right-2.5 top-1/2 hidden -translate-y-1/2 rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10px] font-semibold text-slate-500 lg:inline;
    }

    .ws-search-field:has(.ws-search-field__clear) .ws-search-field__input {
        @apply pr-10;
    }

    .loan-module-workspace-search .ws-search-field__input,
    .loan-workspace-context-search .ws-search-field__input {
        @apply min-h-[2.75rem] bg-white shadow-sm;
    }

    .ws-card {
        @apply rounded-enterprise-lg bg-white shadow-enterprise-sm ring-1 ring-[#dde4ee];
    }

    .ws-card__header {
        @apply border-b border-slate-100 px-4 py-3.5 sm:px-5;
    }

    .ws-card__title {
        @apply text-sm font-semibold text-slate-900 sm:text-base;
    }

    .ws-table thead th {
        @apply bg-slate-50/90 px-3 py-3 text-left text-[11px] font-bold uppercase tracking-wide text-slate-500 sm:px-4;
    }

    .ws-table tbody td {
        @apply border-t border-slate-100 px-3 py-3 text-sm text-slate-700 sm:px-4;
    }

    @media (max-width: 639px) {
        .ws-filter-actions {
            @apply w-full;
        }

        .ws-filter-actions .ws-btn {
            @apply min-h-[2.5rem] flex-1 justify-center sm:flex-none;
        }

        .ws-kpi {
            @apply min-w-[8.25rem];
        }
    }

    .ws-alert {
        @apply flex flex-wrap items-center justify-between gap-2 rounded-xl border px-3 py-2.5 sm:px-4;
    }

    .ws-alert--danger {
        @apply border-rose-200 bg-rose-50 text-rose-900;
    }

    .ws-alert--warning {
        @apply border-amber-200 bg-amber-50 text-amber-900;
    }

    .ws-alert--info {
        @apply border-sky-200 bg-sky-50 text-sky-900;
    }

    .ws-alert--success {
        @apply border-emerald-200 bg-emerald-50 text-emerald-900;
    }

    .ws-alert__action {
        @apply text-xs font-semibold underline underline-offset-2 hover:no-underline;
    }

    .ws-table--sticky thead th {
        @apply sticky top-0 z-[1] bg-slate-50/95;
    }

    .ws-empty {
        @apply mx-auto flex w-full max-w-[500px] flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200 bg-slate-50/60 px-6 py-14 text-center;
    }

    .ws-empty--compact {
        @apply py-10;
    }

    .ws-empty--bare {
        @apply rounded-none border-0 bg-transparent px-4 py-10 shadow-none;
    }

    .ws-empty--bare .ws-empty__icon {
        @apply mb-4 h-auto w-auto rounded-none bg-transparent p-0 shadow-none ring-0;
    }

    .ws-empty--bare .ws-empty__glyph {
        @apply h-10 w-10 text-slate-500;
    }

    .ws-empty__icon {
        @apply mb-5 flex h-[4.5rem] w-[4.5rem] items-center justify-center rounded-full bg-white shadow-sm ring-1 ring-slate-100;
    }

    .ws-empty__glyph {
        @apply h-12 w-12;
    }

    .ws-empty__title {
        @apply text-xl font-bold text-slate-900 sm:text-2xl;
    }

    .ws-empty__text {
        @apply mt-2 text-sm leading-relaxed text-slate-600 max-w-md;
    }

    .ws-empty__actions {
        @apply mt-6 flex flex-wrap items-center justify-center gap-2.5;
    }

    .ws-empty__slot {
        @apply mt-4 w-full;
    }

    .ws-empty__alternates {
        @apply mt-2;
    }

    .ws-error-page {
        @apply space-y-8 py-6 sm:py-8;
    }

    .ws-error-page--compact {
        @apply max-w-2xl space-y-5 py-2;
    }

    .ws-error-page--compact .ws-error-page__title {
        @apply text-xl sm:text-2xl;
    }

    .ws-error-page--compact .ws-error-page__icon {
        @apply h-12 w-12 rounded-xl;
    }

    .ws-error-page__hero {
        @apply space-y-4;
    }

    .ws-error-page__icon {
        @apply mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-white shadow-sm ring-1 ring-slate-200/80;
    }

    .ws-error-page__icon .ws-empty__glyph {
        @apply h-8 w-8 text-slate-500;
    }

    .ws-error-page__title {
        @apply text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl;
    }

    .ws-error-page__lead {
        @apply mx-auto max-w-2xl text-sm leading-relaxed text-slate-600 sm:text-base;
    }

    .ws-error-page__meta {
        @apply flex flex-wrap items-center justify-center gap-2;
    }

    .ws-error-page__chip {
        @apply inline-flex max-w-full items-center rounded-full border border-slate-200 bg-white px-3 py-1 text-xs font-medium text-slate-600 shadow-sm truncate;
    }

    .ws-error-page__chip--status {
        @apply border-amber-200 bg-amber-50 font-semibold text-amber-900;
    }

    .ws-error-page__actions {
        @apply flex flex-wrap items-center justify-center gap-3 pt-1;
    }

    .ws-error-page__alternates {
        @apply rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-4 sm:px-5;
    }

    .ws-error-page__alternates-label {
        @apply text-sm font-semibold text-slate-800;
    }

    .ws-error-page__alternates-list {
        @apply mt-3 flex flex-wrap gap-2;
    }

    .ws-error-page__alternate-link {
        @apply inline-flex items-center rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm font-medium text-slate-700 transition hover:border-slate-300 hover:bg-white hover:text-slate-900;
    }

    .ws-error-report {
        @apply w-full;
    }

    .ws-error-report__card {
        @apply rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6;
    }

    .ws-error-report__header {
        @apply border-b border-slate-100 pb-4;
    }

    .ws-error-report__title {
        @apply text-lg font-semibold text-slate-900;
    }

    .ws-error-report__subtitle {
        @apply mt-1 text-sm text-slate-600;
    }

    .ws-error-report__flash {
        @apply mt-4 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-900;
    }

    .ws-error-report__flash--error {
        @apply border-red-200 bg-red-50 text-red-900;
    }

    .ws-error-report__flash--success {
        @apply border-emerald-200 bg-emerald-50 text-emerald-900;
    }

    .ws-error-report__form {
        @apply mt-5 space-y-4;
    }

    .ws-error-report__field {
        @apply space-y-1.5;
    }

    .ws-error-report__label {
        @apply block text-sm font-semibold text-slate-800;
    }

    .ws-error-report__hint {
        @apply text-xs text-slate-500;
    }

    .ws-error-report__error {
        @apply text-xs text-red-600;
    }

    .ws-error-report__footer {
        @apply flex justify-end border-t border-slate-100 pt-4;
    }

    .ws-error-report__dropzone:focus-within {
        @apply border-indigo-300 ring-2 ring-indigo-100;
    }

    .ws-empty__checklist {
        @apply mt-8 w-full max-w-sm space-y-2 text-left text-sm text-slate-600;
    }

    .ws-empty__checklist-item {
        @apply flex items-center gap-2.5 rounded-lg border border-slate-200 bg-white/80 px-3 py-2;
    }

    .ws-empty__checklist-item.is-done {
        @apply border-emerald-200 bg-emerald-50/80 text-emerald-900;
    }

    .ws-empty__checklist-mark {
        @apply flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-slate-300 bg-white text-emerald-600;
    }

    .ws-empty__checklist-item.is-done .ws-empty__checklist-mark {
        @apply border-emerald-500 bg-emerald-500 text-white;
    }

    .e360-eyebrow {
        @apply text-[10px] font-bold uppercase tracking-wider text-teal-700/90;
    }

    .e360-title {
        @apply text-xl font-bold text-slate-900 md:text-2xl leading-tight;
    }

    .loan-client-360__kpi .ws-kpi__value {
        @apply text-xl sm:text-2xl;
    }

    .loan-client-360-page {
        @apply text-slate-800;
    }

    .loan-client-360--workspace.elis-page {
        @apply space-y-0;
    }

    .loan-client-360__eyebrow {
        @apply text-[11px] font-bold uppercase tracking-wider text-slate-500;
    }

    .loan-client-360__section {
        @apply rounded-xl border border-slate-200/80 bg-white px-4 py-3 shadow-sm sm:px-4 sm:py-3.5;
    }

    .c360-metrics-block {
        @apply space-y-3;
    }

    .loan-client-360__hero .ws-btn--primary {
        @apply bg-brand text-white hover:bg-brand-dark;
    }

    .c360-hero__name {
        @apply text-xl font-bold tracking-tight text-slate-900 sm:text-2xl;
    }

    .c360-avatar {
        @apply flex h-[4.5rem] w-[4.5rem] shrink-0 items-center justify-center overflow-hidden rounded-full bg-emerald-50 ring-1 ring-emerald-100;
    }

    .c360-avatar img {
        @apply h-full w-full object-cover;
    }

    .c360-avatar__initials {
        @apply flex flex-col items-center justify-center leading-none text-teal-800;
    }

    .c360-avatar__line {
        @apply text-sm font-bold lowercase tracking-tight;
    }

    .c360-hero__meta-inline {
        @apply text-sm;
    }

    /* Mobile-specific fixes for Client 360 header */
    @media (max-width: 639px) {
        .loan-client-360__hero {
            @apply px-3 py-2;
        }

        .loan-client-360__hero [class~="flex-col"][class~="gap-4"] {
            gap: 0.75rem;
        }

        .loan-client-360__hero [class~="min-w-0"][class~="flex-1"][class~="items-start"] {
            gap: 0.75rem;
        }

        .c360-avatar {
            @apply h-[3.5rem] w-[3.5rem];
        }

        .c360-avatar__line {
            @apply text-xs;
        }

        .c360-hero__name {
            @apply text-lg;
        }

        .c360-hero__meta-inline {
            @apply text-xs;
        }

        .c360-badge {
            @apply text-[10px] px-1.5 py-0.5;
        }
    }

    /* Mobile action button fixes */
    @media (max-width: 639px) {
        .loan-client-360__hero nav {
            @apply flex-wrap gap-1.5 overflow-x-auto pb-1;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }

        .loan-client-360__hero nav::-webkit-scrollbar {
            display: none;
        }

        .loan-client-360__hero nav .ws-btn {
            @apply px-2 py-1.5 text-[11px];
            flex-shrink: 0;
        }
    }

    .c360-summary-grid {
        @apply grid gap-2 sm:grid-cols-2 xl:grid-cols-4;
    }

    /* Mobile summary grid fixes */
    @media (max-width: 639px) {
        .c360-summary-grid {
            @apply grid-cols-1 gap-2;
        }

        .c360-compact-card {
            @apply px-3 py-2;
        }

        .c360-compact-card__label {
            @apply text-[11px];
        }

        .c360-compact-card__value {
            @apply text-sm;
        }

        .c360-compact-card__hint {
            @apply text-[10px];
        }

        .c360-compact-card__metrics {
            @apply gap-1.5;
        }

        .c360-compact-card__metrics dt {
            @apply text-[10px];
        }

        .c360-compact-card__metrics dd {
            @apply text-xs;
        }
    }

    .c360-secondary-grid {
        @apply grid gap-2 sm:grid-cols-2 xl:grid-cols-3;
    }

    /* Mobile secondary grid fixes */
    @media (max-width: 639px) {
        .c360-secondary-grid {
            @apply grid-cols-1 gap-2;
        }

        .c360-compact-card__rows {
            @apply gap-1;
        }

        .c360-compact-card__row {
            @apply py-1;
        }

        .c360-compact-card__row--inline {
            @apply grid-cols-[4.25rem_minmax(0,1fr)] gap-x-1.5;
        }

        .c360-compact-card__row dt {
            @apply text-[10px];
        }

        .c360-compact-card__row dd {
            @apply text-xs;
        }

        .c360-location-link {
            @apply text-[10px];
        }

        .c360-location-hint {
            @apply max-w-[7.5rem];
        }
    }

    .c360-client-score__card {
        @apply border-l-4;
    }

    .c360-client-score__card.c360-client-score--green {
        @apply border-l-emerald-500;
    }

    .c360-client-score__card.c360-client-score--yellow {
        @apply border-l-amber-500;
    }

    .c360-client-score__card.c360-client-score--red {
        @apply border-l-rose-500;
    }

    .c360-client-score__card.c360-client-score--neutral {
        @apply border-l-slate-300;
    }

    .c360-client-score__header {
        @apply flex items-start justify-between gap-2;
    }

    .c360-client-score__value {
        @apply mt-1 text-2xl font-semibold tabular-nums text-slate-900;
    }

    .c360-client-score__value--empty {
        @apply text-lg font-medium text-slate-600;
    }

    .c360-client-score__trend {
        @apply inline-flex items-center gap-1 text-xs font-semibold text-slate-600;
    }

    .c360-client-score__trend-label {
        @apply font-medium normal-case tracking-normal text-slate-500;
    }

    .c360-client-score__metrics {
        @apply mt-2 grid grid-cols-2 gap-2 text-xs;
    }

    .c360-client-score__metrics dt {
        @apply text-slate-500;
    }

    .c360-client-score__metrics dd {
        @apply font-semibold tabular-nums text-slate-800;
    }

    .c360-client-score__action {
        @apply mt-2 flex flex-wrap gap-x-1.5 text-xs;
    }

    .c360-client-score__reasons {
        @apply mt-2 list-inside list-disc space-y-0.5 text-xs text-slate-600;
    }

    .c360-client-score__updated {
        @apply mt-2 text-[11px] text-slate-400;
    }

    /* Mobile client score card fixes */
    @media (max-width: 639px) {
        .c360-client-score__card {
            @apply px-3 py-2;
        }

        .c360-client-score__header {
            @apply gap-1.5;
        }

        .c360-client-score__value {
            @apply text-xl;
        }

        .c360-client-score__value--empty {
            @apply text-base;
        }

        .c360-client-score__trend {
            @apply text-[11px];
        }

        .c360-client-score__metrics {
            @apply mt-1.5 gap-1.5 text-[10px];
        }

        .c360-client-score__action {
            @apply mt-1.5 text-[10px];
        }

        .c360-client-score__reasons {
            @apply mt-1.5 text-[10px];
        }
    }

    .c360-compact-card {
        @apply flex min-h-0 flex-col rounded-lg border border-slate-200 bg-white p-2.5 shadow-sm;
    }

    /* Additional mobile compact card refinements */
    @media (max-width: 639px) {
        .c360-compact-card__link {
            @apply text-[10px];
        }

        .c360-compact-card__metrics {
            @apply mt-1 pt-1;
        }
    }

    .c360-compact-card--wide {
        @apply lg:col-span-1;
    }

    .c360-compact-card--warning {
        @apply border-amber-200/70 bg-amber-50/25;
    }

    .c360-compact-card--success {
        @apply border-emerald-200/60 bg-emerald-50/20;
    }

    .c360-compact-card--status.c360-compact-card--danger {
        @apply border-rose-200/80 bg-rose-50/30;
    }

    .c360-compact-card--status.c360-compact-card--warning {
        @apply border-amber-200/80 bg-amber-50/25;
    }

    .c360-compact-card--status.c360-compact-card--success {
        @apply border-emerald-200/70 bg-emerald-50/20;
    }

    .c360-compact-card--status.c360-compact-card--review {
        @apply border-sky-200/70 bg-sky-50/20;
    }

    .c360-compact-card__label {
        @apply text-[10px] font-bold uppercase tracking-wider text-slate-500;
    }

    .c360-compact-card__value {
        @apply mt-0.5 text-base font-bold tabular-nums text-slate-900;
    }

    .c360-compact-card__hint {
        @apply mt-0.5 text-[11px] leading-snug text-slate-600;
    }

    .c360-compact-card__metrics {
        @apply mt-1.5 space-y-0.5 border-t border-slate-100 pt-1.5 text-[10px] text-slate-600;
    }

    .c360-compact-card__metrics > div {
        @apply flex items-center justify-between gap-2;
    }

    .c360-compact-card__metrics dd {
        @apply font-semibold tabular-nums text-slate-800;
    }

    .c360-compact-card__rows {
        @apply mt-1 space-y-1.5;
    }

    .c360-compact-card__rows--dense {
        @apply space-y-1;
    }

    .c360-compact-card__row {
        @apply grid gap-0.5 text-[11px] leading-snug;
    }

    .c360-compact-card__row--inline {
        @apply grid-cols-[4.75rem_minmax(0,1fr)] items-baseline gap-x-2 gap-y-0;
    }

    .c360-compact-card__row dt {
        @apply font-semibold uppercase tracking-wide text-slate-500;
    }

    .c360-compact-card__row dd {
        @apply text-slate-800;
    }

    .c360-compact-card__footer {
        @apply mt-auto flex flex-wrap items-center gap-x-2 pt-1;
    }

    .c360-location-dd {
        @apply flex min-w-0 flex-wrap items-baseline gap-x-1.5 gap-y-0.5;
    }

    .c360-location-link {
        @apply font-mono text-[11px] font-semibold text-sky-700 hover:text-sky-900 hover:underline;
    }

    .c360-location-none {
        @apply text-[11px] font-bold uppercase tracking-wide text-slate-400;
    }

    .c360-location-hint {
        @apply max-w-[9rem] text-[10px] text-slate-400;
    }

    .c360-location-update {
        @apply text-[10px] font-semibold text-teal-700 hover:text-teal-900 hover:underline;
    }

    .c360-compact-card__link {
        @apply mt-1.5 inline-block text-[11px] font-semibold text-teal-700 hover:text-teal-900 hover:underline;
    }

    .c360-compact-card__footer .c360-compact-card__link {
        @apply mt-0;
    }

    .c360-portal-beacon {
        @apply relative inline-flex h-2 w-2 shrink-0 rounded-full bg-emerald-500;
        box-shadow: 0 0 0 0 rgb(16 185 129 / 0.55);
        animation: c360-portal-beacon 2s ease-out infinite;
    }

    @keyframes c360-portal-beacon {
        0% { box-shadow: 0 0 0 0 rgb(16 185 129 / 0.55); }
        70% { box-shadow: 0 0 0 6px rgb(16 185 129 / 0); }
        100% { box-shadow: 0 0 0 0 rgb(16 185 129 / 0); }
    }

    .c360-status-row {
        @apply grid gap-3 sm:grid-cols-2 lg:grid-cols-[minmax(0,1.35fr)_repeat(4,minmax(0,1fr))];
    }

    .c360-signal-card {
        @apply flex min-h-[7.5rem] flex-col rounded-xl border border-slate-200 bg-white p-3.5 shadow-sm;
    }

    .c360-signal-card--status.c360-signal-card--danger {
        @apply border-rose-200/80 bg-gradient-to-br from-rose-50/50 to-white;
    }

    .c360-signal-card--status.c360-signal-card--warning {
        @apply border-amber-200/80 bg-gradient-to-br from-amber-50/40 to-white;
    }

    .c360-signal-card--status.c360-signal-card--success {
        @apply border-emerald-200/80 bg-gradient-to-br from-emerald-50/30 to-white;
    }

    .c360-signal-card--center {
        @apply text-center;
    }

    .c360-signal-card__label {
        @apply text-[10px] font-bold uppercase tracking-wider text-slate-500;
    }

    .c360-signal-card__value {
        @apply mt-1 text-lg font-bold tabular-nums text-slate-900;
    }

    .c360-signal-card--danger .c360-signal-card__value {
        @apply text-rose-700;
    }

    .c360-signal-card__hint {
        @apply mt-0.5 text-xs text-slate-600;
    }

    .c360-signal-card__link {
        @apply mt-1.5 inline-block text-xs font-semibold text-teal-700 hover:text-teal-900 hover:underline;
    }

    .c360-signal-card__icon {
        @apply flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-rose-100 text-rose-700;
    }

    .c360-signal-card--warning .c360-signal-card__icon { @apply bg-amber-100 text-amber-800; }
    .c360-signal-card--success .c360-signal-card__icon { @apply bg-emerald-100 text-emerald-700; }
    .c360-signal-card--review .c360-signal-card__icon { @apply bg-sky-100 text-sky-700; }

    .c360-signal-card__icon--inline {
        @apply h-6 w-6;
    }

    .c360-signal-card__icon--success { @apply bg-emerald-100 text-emerald-700; }
    .c360-signal-card__icon--warning { @apply bg-amber-100 text-amber-800; }
    .c360-signal-card__icon--danger { @apply bg-rose-100 text-rose-700; }

    .c360-kpi-row {
        @apply grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5;
    }

    .c360-kpi-card {
        @apply flex min-h-[7.5rem] flex-col rounded-xl border border-slate-200 bg-white p-3.5 shadow-sm;
    }

    .c360-kpi-card__label {
        @apply text-[10px] font-bold uppercase tracking-wider text-slate-500;
    }

    .c360-kpi-card__value {
        @apply mt-1 text-lg font-bold tabular-nums text-slate-900;
    }

    .c360-kpi-card__hint {
        @apply mt-0.5 text-xs text-slate-600;
    }

    .c360-kpi-card__link {
        @apply mt-2 inline-block text-xs font-semibold text-teal-700 hover:text-teal-900 hover:underline;
    }

    .c360-kpi-card--warning { @apply border-amber-200/70 bg-amber-50/30; }
    .c360-kpi-card--success { @apply border-emerald-200/70 bg-emerald-50/30; }
    .c360-kpi-card--info { @apply border-sky-200/70 bg-sky-50/20; }

    .c360-glance-row {
        @apply grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6;
    }

    .c360-glance-card {
        @apply flex min-h-[7.5rem] flex-col rounded-xl border border-slate-200 bg-white p-3.5 shadow-sm xl:col-span-2;
    }

    .c360-glance-card__label {
        @apply text-[10px] font-bold uppercase tracking-wider text-slate-500;
    }

    .c360-glance-card__value {
        @apply mt-1.5 text-xl font-bold tabular-nums text-slate-900;
    }

    .c360-glance-card__sub {
        @apply mt-0.5 text-sm text-slate-700;
    }

    .c360-glance-card__hint {
        @apply mt-1 text-xs text-slate-500;
    }

    .loan-client-360__readiness {
        @apply border border-amber-200 bg-amber-50 text-amber-950 shadow-sm;
    }

    .loan-client-360__readiness--blocked {
        @apply border-amber-300 bg-gradient-to-br from-amber-100 via-amber-50 to-orange-50 ring-1 ring-amber-200/60;
    }

    .loan-client-360__readiness--pipeline {
        @apply border-emerald-200 bg-gradient-to-br from-emerald-50 to-teal-50/80 text-emerald-950 ring-1 ring-emerald-200/50;
    }

    .loan-client-360__readiness--attention {
        @apply border-sky-200 bg-gradient-to-br from-sky-50 to-slate-50 text-slate-800 ring-1 ring-sky-200/40;
    }

    .loan-client-360__readiness-header {
        @apply border-b border-amber-200/70 bg-amber-100/40;
    }

    .loan-client-360__readiness--blocked .loan-client-360__readiness-header {
        @apply border-amber-300/60 bg-amber-200/25;
    }

    .loan-client-360__readiness--pipeline .loan-client-360__readiness-header {
        @apply border-emerald-200/70 bg-emerald-100/35;
    }

    .loan-client-360__readiness--attention .loan-client-360__readiness-header {
        @apply border-sky-200/70 bg-sky-100/30;
    }

    .loan-client-360__readiness-metrics {
        @apply border-t border-amber-200/60 bg-amber-100/25;
    }

    .loan-client-360__readiness--blocked .loan-client-360__readiness-metrics {
        @apply border-amber-300/50 bg-amber-100/40;
    }

    .loan-client-360__readiness-metric {
        @apply bg-amber-50/90 px-4 py-2.5;
    }

    .loan-client-360__readiness--blocked .loan-client-360__readiness-metric {
        @apply bg-amber-50/95;
    }

    .loan-client-360__readiness--pipeline .loan-client-360__readiness-metrics {
        @apply border-emerald-200/60 bg-emerald-100/25;
    }

    .loan-client-360__readiness--pipeline .loan-client-360__readiness-metric {
        @apply bg-emerald-50/90;
    }

    .loan-client-360__readiness--attention .loan-client-360__readiness-metrics {
        @apply border-sky-200/60 bg-sky-100/20;
    }

    .loan-client-360__readiness--attention .loan-client-360__readiness-metric {
        @apply bg-white/70;
    }

    .loan-client-360__readiness-details {
        @apply border-t border-amber-200/60 bg-amber-50/80 text-amber-950;
    }

    .loan-client-360__readiness--blocked .loan-client-360__readiness-details {
        @apply border-amber-300/50 bg-amber-100/30;
    }

    .loan-client-360__readiness--pipeline .loan-client-360__readiness-details {
        @apply border-emerald-200/60 bg-emerald-50/70 text-emerald-950;
    }

    .loan-client-360__readiness--attention .loan-client-360__readiness-details {
        @apply border-sky-200/60 bg-sky-50/60 text-slate-700;
    }

    .loan-client-360__glance {
        @apply rounded-xl border border-slate-200 bg-white p-3.5 shadow-sm;
    }

    .c360-badge {
        @apply inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide;
    }

    .c360-badge--compact {
        @apply normal-case tracking-normal;
    }

    .c360-badge--client { @apply border-teal-200 bg-teal-50 text-teal-800; }
    .c360-badge--muted { @apply border-slate-200 bg-slate-100 text-slate-600; }
    .c360-badge--success { @apply border-emerald-200 bg-emerald-50 text-emerald-800; }
    .c360-badge--warning { @apply border-amber-200 bg-amber-50 text-amber-900; }
    .c360-badge--danger { @apply border-rose-200 bg-rose-50 text-rose-800; }
    .c360-badge--info { @apply border-sky-200 bg-sky-50 text-sky-800; }
    .c360-badge--neutral { @apply border-slate-200 bg-slate-100 text-slate-700; }

    .c360-status-hero {
        @apply border-slate-200 bg-gradient-to-r from-white to-slate-50/80;
    }

    .c360-status-panel {
        @apply flex h-full flex-col;
    }

    .c360-status-panel__header {
        @apply flex items-start gap-3 rounded-lg border px-3 py-2.5;
    }

    .c360-status-panel--danger .c360-status-panel__header {
        @apply border-rose-200 bg-rose-50/80;
    }

    .c360-status-panel--warning .c360-status-panel__header {
        @apply border-amber-200 bg-amber-50/70;
    }

    .c360-status-panel--success .c360-status-panel__header {
        @apply border-emerald-200 bg-emerald-50/60;
    }

    .c360-status-panel--review .c360-status-panel__header {
        @apply border-sky-200 bg-sky-50/70;
    }

    .c360-status-panel__icon {
        @apply flex h-9 w-9 shrink-0 items-center justify-center rounded-lg;
    }

    .c360-status-panel--danger .c360-status-panel__icon { @apply bg-rose-100 text-rose-700; }
    .c360-status-panel--warning .c360-status-panel__icon { @apply bg-amber-100 text-amber-800; }
    .c360-status-panel--success .c360-status-panel__icon { @apply bg-emerald-100 text-emerald-700; }
    .c360-status-panel--review .c360-status-panel__icon { @apply bg-sky-100 text-sky-700; }

    .c360-status-panel__status {
        @apply text-lg font-bold leading-tight text-slate-900;
    }

    .c360-status-panel--danger .c360-status-panel__status { @apply text-rose-700; }
    .c360-status-panel--warning .c360-status-panel__status { @apply text-amber-800; }
    .c360-status-panel--success .c360-status-panel__status { @apply text-emerald-800; }

    .c360-status-panel__subtitle {
        @apply mt-0.5 text-sm text-slate-600;
    }

    .c360-status-panel__next {
        @apply mt-3;
    }

    .c360-status-panel__next-label {
        @apply text-[10px] font-bold uppercase tracking-wider text-slate-500;
    }

    .c360-status-panel__next-text {
        @apply mt-0.5 text-sm font-semibold text-slate-900;
    }

    .c360-status-panel__attention-link {
        @apply mt-1.5 inline-block text-xs font-semibold text-teal-700 hover:text-teal-900 hover:underline;
    }

    .c360-status-panel__stats {
        @apply mt-4 grid grid-cols-2 gap-3 border-t border-slate-200/80 pt-4 sm:grid-cols-4;
    }

    .c360-status-panel__stat-label {
        @apply text-[10px] font-bold uppercase tracking-wider text-slate-500;
    }

    .c360-status-panel__stat-value {
        @apply mt-1 text-base font-bold tabular-nums text-slate-900;
    }

    .c360-status-panel__stat-value--danger { @apply text-rose-600; }
    .c360-status-panel__stat-value--warning { @apply text-amber-700; }
    .c360-status-panel__stat-value--success { @apply text-emerald-700; }

    .c360-status-panel__stat-sub {
        @apply text-[11px] text-slate-500;
    }

    .c360-status-panel__stat--progress {
        @apply text-center;
    }

    .c360-status-hero--danger { @apply border-rose-200/80 from-rose-50/40 to-white; }
    .c360-status-hero--warning { @apply border-amber-200/80 from-amber-50/40 to-white; }
    .c360-status-hero--success { @apply border-emerald-200/80 from-emerald-50/30 to-white; }
    .c360-status-hero--review { @apply border-sky-200/80 from-sky-50/40 to-white; }

    .c360-status-hero__grid {
        @apply grid gap-4 lg:grid-cols-[minmax(0,1.4fr)_repeat(4,minmax(0,1fr))] lg:items-center;
    }

    .c360-status-hero__primary {
        @apply flex flex-wrap items-center gap-3;
    }

    .c360-status-hero__icon {
        @apply flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-rose-100 text-rose-700;
    }

    .c360-status-hero--success .c360-status-hero__icon { @apply bg-emerald-100 text-emerald-700; }
    .c360-status-hero--warning .c360-status-hero__icon { @apply bg-amber-100 text-amber-800; }

    .c360-status-hero__label {
        @apply text-[10px] font-bold uppercase tracking-wider text-slate-500;
    }

    .c360-status-hero__title {
        @apply text-base font-bold text-slate-900 sm:text-lg;
    }

    .c360-status-hero__subtitle {
        @apply text-sm text-slate-600;
    }

    .c360-status-hero__metric-label {
        @apply text-[10px] font-bold uppercase tracking-wider text-slate-500;
    }

    .c360-status-hero__metric-value {
        @apply mt-1 text-lg font-bold tabular-nums text-slate-900;
    }

    .c360-status-hero__metric-value--danger { @apply text-rose-600; }
    .c360-status-hero__metric-value--warning { @apply text-amber-700; }
    .c360-status-hero__metric-value--success { @apply text-emerald-700; }

    .c360-status-hero__metric-sub {
        @apply text-xs text-slate-500;
    }

    .c360-progress-ring {
        @apply relative mx-auto mt-1 h-14 w-14;
    }

    .c360-progress-ring--sm {
        @apply h-12 w-12;
    }

    .c360-progress-ring svg {
        @apply h-full w-full -rotate-90;
    }

    .c360-progress-ring__track {
        fill: none;
        stroke: rgb(226 232 240);
        stroke-width: 3;
    }

    .c360-progress-ring__fill {
        fill: none;
        stroke: rgb(20 184 166);
        stroke-width: 3;
        stroke-linecap: round;
    }

    .c360-progress-ring__value {
        @apply absolute inset-0 flex items-center justify-center text-xs font-bold tabular-nums text-slate-800;
    }

    .loan-client-360__action-bar {
        @apply static border-slate-200 bg-white;
    }

    .loan-client-360__action-bar .ws-btn {
        @apply min-h-10 px-3.5 text-sm;
    }

    .loan-client-360__action-bar .ws-btn--primary {
        @apply bg-brand text-white hover:bg-brand-dark;
    }

    .c360-action-btn {
        @apply inline-flex items-center gap-1.5;
    }

    .c360-action-btn__icon {
        @apply h-4 w-4 shrink-0 opacity-80;
    }

    .c360-metric-grid {
        @apply grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4;
    }

    .c360-metric-tile {
        @apply rounded-lg border border-slate-100 bg-slate-50/80 px-3 py-2.5;
    }

    .c360-metric-tile__label {
        @apply text-[10px] font-semibold uppercase tracking-wide text-slate-500;
    }

    .c360-metric-tile__value {
        @apply mt-1 text-sm font-bold tabular-nums text-slate-900;
    }

    .c360-metric-tile__value--danger { @apply text-rose-600; }
    .c360-metric-tile__value--success { @apply text-emerald-700; }
    .c360-metric-tile__value--warning { @apply text-amber-700; }

    .c360-middle-grid {
        @apply grid gap-3 lg:grid-cols-2 lg:gap-4;
    }

    .c360-bottom-grid {
        @apply grid gap-3 lg:grid-cols-3 lg:gap-4;
    }

    .c360-main-grid {
        @apply grid gap-3 lg:grid-cols-2 lg:gap-4;
    }

    .loan-client-360__attention {
        @apply border-slate-200 bg-white;
    }

    .c360-fix-link {
        @apply text-xs font-semibold text-teal-700 hover:text-teal-900 hover:underline;
    }

    .c360-timeline-link {
        @apply text-xs font-semibold text-teal-700 hover:text-teal-900 hover:underline;
    }

    .c360-progress-bar {
        @apply h-2 overflow-hidden rounded-full bg-slate-200;
    }

    .c360-progress-bar__fill {
        @apply h-full rounded-full bg-teal-600 transition-all;
    }

    .c360-check {
        @apply mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2;
    }

    .c360-check--done {
        @apply border-emerald-500 bg-emerald-500 text-white;
    }

    .c360-check--open {
        @apply border-slate-300 bg-white;
    }

    .loan-client-360__task {
        @apply flex items-center justify-between gap-2 rounded-lg border border-slate-100 bg-white px-3 py-2;
    }

    .c360-loan-metrics {
        @apply grid grid-cols-2 gap-3 sm:grid-cols-3;
    }

    .c360-loan-metrics dt {
        @apply text-[10px] font-semibold uppercase tracking-wide text-slate-500;
    }

    .c360-loan-metrics dd {
        @apply mt-0.5 text-sm font-bold tabular-nums text-slate-900;
    }

    .c360-workspace-grid {
        @apply grid grid-cols-2 gap-2;
    }

    .c360-workspace-tile {
        @apply flex min-h-[5.75rem] flex-col items-start rounded-xl border border-slate-200 bg-slate-50/50 p-3 text-left transition hover:border-teal-300 hover:bg-white hover:shadow-sm;
    }

    .c360-workspace-tile__icon {
        @apply mb-2 flex h-9 w-9 items-center justify-center rounded-lg;
    }

    .c360-workspace-tile--teal .c360-workspace-tile__icon { @apply bg-teal-100 text-teal-700; }
    .c360-workspace-tile--sky .c360-workspace-tile__icon { @apply bg-sky-100 text-sky-700; }
    .c360-workspace-tile--emerald .c360-workspace-tile__icon { @apply bg-emerald-100 text-emerald-700; }
    .c360-workspace-tile--violet .c360-workspace-tile__icon { @apply bg-violet-100 text-violet-700; }
    .c360-workspace-tile--indigo .c360-workspace-tile__icon { @apply bg-indigo-100 text-indigo-700; }
    .c360-workspace-tile--amber .c360-workspace-tile__icon { @apply bg-amber-100 text-amber-800; }
    .c360-workspace-tile--rose .c360-workspace-tile__icon { @apply bg-rose-100 text-rose-700; }
    .c360-workspace-tile--slate .c360-workspace-tile__icon { @apply bg-slate-100 text-slate-700; }

    .c360-workspace-tile__label {
        @apply text-sm font-bold text-slate-900;
    }

    .c360-workspace-tile__subtitle {
        @apply mt-0.5 text-[11px] text-slate-500;
    }

    .loan-client-360__activity {
        @apply loan-client-360__section;
    }

    .loan-client-360__activity-date {
        @apply sticky top-0 z-[1] bg-white/95 py-1 text-[10px] font-bold uppercase tracking-wider text-slate-500 backdrop-blur-sm;
    }

    .loan-client-360__activity-row {
        @apply flex min-h-11 items-start gap-2.5 py-2;
    }

    .loan-client-360__fold > summary {
        @apply loan-client-360__eyebrow cursor-pointer list-none py-1 marker:hidden;
    }

    .loan-client-360__fold > summary::-webkit-details-marker {
        display: none;
    }

    .loan-client-360__fold > summary::after {
        content: 'Show';
        @apply ml-2 text-[10px] font-semibold normal-case tracking-normal text-teal-700;
    }

    .loan-client-360__fold[open] > summary::after {
        content: 'Hide';
    }

    .loan-client-360__fold-body {
        @apply mt-2 space-y-3;
    }

    .loan-client-360__records {
        @apply scroll-mt-20 overflow-hidden rounded-xl border border-slate-200/80 bg-white shadow-sm;
    }

    .loan-client-360__records-tabs {
        @apply border-b border-slate-200 bg-slate-50/80 px-2 py-1.5;
    }

    .loan-client-360__panels {
        @apply mt-0 rounded-none border-0 bg-white shadow-none;
    }

    .loan-client-360__panels .loan-client-360__tab-table-wrap {
        @apply dg-table-wrap dg-table-wrap--register overflow-x-auto;
    }

    .loan-client-360__records-tabs .ws-tabs {
        @apply border-0 bg-transparent shadow-none ring-0;
    }

    /* Mobile records tabs and panels fixes */
    @media (max-width: 639px) {
        .loan-client-360__records {
            @apply scroll-mt-16 rounded-lg;
        }

        .loan-client-360__records-tabs {
            @apply px-1.5 py-1;
        }

        .loan-client-360__panels {
            @apply px-2 py-2;
        }

        .loan-client-360__records-tabs .ws-tabs button {
            @apply px-2 py-1 text-[11px];
        }
    }

    .c360-hero__contact a {
        @apply hover:text-teal-800;
    }

    .ws-btn--danger {
        @apply border border-red-700 bg-red-600 text-white hover:bg-red-700;
    }

    /* Dashboard styles → resources/css/loan-dashboard.css (MFI-PERF-CSS-03) */

    /* Command palette */
    html.loan-cmd-palette-open,
    body.loan-cmd-palette-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    .loan-cmd-palette__handle {
        @apply mx-auto mt-1.5 h-1 w-10 shrink-0 rounded-full bg-slate-300;
    }

    .loan-cmd-palette__input {
        font-size: 16px;
    }

    .loan-cmd-palette__section-title {
        @apply px-2 py-1.5 text-[10px] font-bold uppercase tracking-wider text-slate-500;
    }

    .loan-cmd-palette__chips {
        @apply flex flex-wrap gap-1.5 px-1;
    }

    .loan-cmd-palette__chip {
        @apply rounded-full bg-slate-100 px-2.5 py-1.5 text-xs font-medium text-slate-700 ring-1 ring-slate-200/70 hover:bg-slate-200/70;
    }

    .loan-cmd-palette__row {
        @apply flex w-full items-center justify-between gap-2 rounded-lg px-3 py-2.5 text-left transition-colors duration-150 hover:bg-slate-50;
    }

    .loan-cmd-palette__row--link {
        @apply block no-underline;
    }

    .loan-cmd-palette__row-label {
        @apply block text-sm font-semibold text-slate-900;
    }

    .loan-cmd-palette__row-meta {
        @apply block truncate text-xs text-slate-500;
    }

    .loan-cmd-palette__tag {
        @apply shrink-0 text-[10px] font-bold uppercase tracking-wide text-violet-500;
    }

    .loan-cmd-palette__row--feature .loan-cmd-palette__row-label {
        @apply text-violet-950;
    }

    @media (min-width: 1024px) {
        .dash-mobile-bar {
            display: none;
        }
    }

    .dash-page__header--compact {
        @apply flex flex-wrap items-center justify-between gap-2;
    }

    .dash-page__title {
        @apply text-lg font-bold tracking-tight text-slate-900 sm:text-xl;
    }

    .dash-page__subtitle {
        @apply mt-0.5 max-w-3xl text-xs leading-relaxed text-slate-600 sm:text-sm;
    }

    .dash-executive-welcome__bar {
        @apply flex flex-col gap-3 rounded-xl bg-white px-3 py-2.5 shadow-sm ring-1 ring-slate-200/60 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:gap-4 sm:px-4 sm:py-3;
    }

    .dash-executive-welcome__identity {
        @apply flex min-w-0 items-center gap-3;
    }

    .dash-executive-welcome__avatar {
        @apply relative flex h-11 w-11 shrink-0 overflow-hidden rounded-full bg-gradient-to-br from-teal-700 to-slate-700 shadow-sm ring-2 ring-white;
    }

    .dash-executive-welcome__avatar-image {
        @apply h-full w-full object-cover;
    }

    .dash-executive-welcome__avatar-fallback {
        @apply flex h-full w-full items-center justify-center text-sm font-bold text-white;
    }

    .dash-executive-welcome__name {
        @apply text-sm font-semibold text-slate-900;
    }

    .dash-executive-welcome__meta {
        @apply mt-0.5 text-xs text-slate-600;
    }

    .dash-executive-welcome__dot {
        @apply mx-1 text-slate-300;
    }

    .dash-executive-welcome__stats {
        @apply flex flex-wrap gap-3 sm:gap-4;
    }

    .dash-executive-welcome__stat {
        @apply min-w-[5.5rem];
    }

    .dash-executive-welcome__stat dt {
        @apply text-[10px] font-semibold uppercase tracking-wide text-slate-500;
    }

    .dash-executive-welcome__stat dd {
        @apply mt-0.5 text-xs font-semibold text-slate-800;
    }

    .dash-executive-welcome__live {
        @apply inline-flex items-center gap-1 text-emerald-700;
    }

    .dash-executive-welcome__live::before {
        content: '';
        @apply h-1.5 w-1.5 rounded-full bg-emerald-500;
        animation: mfi-pulse-dot 2s ease-in-out infinite;
    }

    .dash-executive-welcome__shortcuts {
        @apply flex flex-wrap items-center gap-1 sm:ml-auto;
    }

    .dash-quick-actions {
        @apply flex flex-col gap-2.5 rounded-xl bg-white px-3 py-2.5 shadow-sm ring-1 ring-slate-200/60 sm:flex-row sm:items-center sm:justify-between sm:gap-4 sm:px-4 sm:py-3;
    }

    .dash-quick-actions__intro {
        @apply shrink-0;
    }

    .dash-quick-actions__label {
        @apply text-xs font-bold uppercase tracking-wider text-slate-500;
    }

    .dash-quick-actions__hint {
        @apply mt-0.5 text-[11px] text-slate-500;
    }

    .dash-quick-toolbar {
        @apply hidden flex-1 flex-wrap items-center gap-1.5 lg:flex lg:justify-end lg:gap-2;
    }

    .dash-quick-toolbar__btn {
        @apply inline-flex items-center gap-1.5 bg-white px-2.5 py-1.5 text-xs shadow-sm hover:bg-slate-50 sm:px-3 sm:py-2;
    }

    .dash-quick-toolbar__icon {
        @apply h-3.5 w-3.5 shrink-0 text-slate-500;
    }

    .dash-quick-toolbar .ws-btn {
        @apply transition-[background-color,border-color,box-shadow] duration-150;
    }

    .dash-quick-toolbar .ws-btn:focus-visible {
        @apply outline-none ring-2 ring-teal-500/40 ring-offset-1;
    }

    .dash-section {
        @apply space-y-3 sm:space-y-3.5;
    }

    .dash-section--compact {
        @apply space-y-3 sm:space-y-4;
    }

    .dash-section__body {
        @apply flex flex-col gap-5 sm:gap-6;
    }

    .dash-section__card-grid {
        @apply grid grid-cols-1 items-stretch gap-5 xl:grid-cols-2 xl:gap-6;
    }

    #loan-dashboard .dash-section__card-grid > .dash-chart-panel {
        @apply m-1 sm:m-1.5;
    }

    .dash-section__card-grid > .dash-list-panel,
    .dash-section__card-grid > .dash-chart-panel {
        @apply h-full;
    }

    .dash-section--compact .dash-section__header {
        @apply gap-2;
    }

    .dash-section--compact .dash-section__subtitle {
        @apply text-xs;
    }

    .dash-section__header {
        @apply flex flex-wrap items-end justify-between gap-3;
    }

    .dash-section__title-row {
        @apply flex items-center gap-2;
    }

    .dash-section__icon {
        @apply flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-teal-50 text-teal-700 ring-1 ring-teal-200/60;
    }

    .dash-section__title {
        @apply text-xs font-bold uppercase tracking-wider text-slate-500 sm:text-sm;
    }

    .dash-section__subtitle {
        @apply mt-0.5 text-xs text-slate-600 sm:text-sm;
    }

    .dash-toolbar {
        @apply flex flex-wrap gap-2 rounded-xl bg-slate-50/80 p-3 ring-1 ring-slate-200/70 sm:p-4;
    }

    .dash-health-grid {
        @apply grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6;
    }

    .dash-health-tile {
        @apply rounded-lg px-2.5 py-2 transition-colors duration-150;
    }

    .dash-health-tile__label {
        @apply text-[10px] font-semibold uppercase tracking-wide text-slate-500;
    }

    .dash-health-tile__value {
        @apply mt-0.5 text-base font-bold sm:text-lg;
    }

    .dash-chart-meta {
        @apply mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-slate-600;
    }

    .dash-chart-meta strong {
        @apply font-semibold text-slate-800;
    }

    .loan-kpi-grid {
        @apply items-stretch;
    }

    .loan-kpi-card {
        @apply relative flex h-full min-h-[4.75rem] flex-col justify-between gap-1.5 rounded-xl p-3 shadow-sm transition-[transform,box-shadow] duration-150 sm:p-4;
    }

    .loan-kpi-card--link {
        @apply hover:-translate-y-px hover:shadow-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600;
    }

    .loan-kpi-card--primary {
        @apply min-h-[5.25rem] p-3.5 sm:min-h-[5.5rem] sm:p-4;
    }

    .loan-kpi-card--operational {
        @apply min-h-[4.25rem] p-2.5 sm:p-3;
    }

    .loan-kpi-card__icon {
        @apply absolute right-2.5 top-2.5 flex h-7 w-7 items-center justify-center rounded-lg sm:h-8 sm:w-8;
    }

    .loan-kpi-card--operational .loan-kpi-card__icon {
        @apply h-6 w-6;
    }

    .loan-kpi-card__body {
        @apply flex flex-1 flex-col justify-end pr-9;
    }

    .loan-kpi-card__label {
        @apply text-[10px] font-bold uppercase tracking-wider;
    }

    .loan-kpi-card__value {
        @apply mt-0.5 text-lg font-bold tabular-nums tracking-tight sm:text-xl;
    }

    .loan-kpi-card--primary .loan-kpi-card__value {
        @apply text-xl sm:text-2xl;
    }

    .loan-kpi-card--operational .loan-kpi-card__value {
        @apply text-base sm:text-lg;
    }

    .loan-kpi-card__hint {
        @apply mt-0.5 text-[10px] leading-snug text-slate-500 sm:text-[11px];
    }

    .loan-kpi-card__trend {
        @apply mt-0.5 text-[11px] font-semibold text-slate-600;
    }

    .dash-chart-panel {
        @apply overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-slate-200/60 transition-shadow duration-150 hover:shadow-md;
    }

    .dash-chart-panel__header {
        @apply border-b border-slate-100/80 px-3 py-2.5 sm:px-4 sm:py-3;
    }

    .dash-chart-panel__header--row {
        @apply flex flex-wrap items-center justify-between gap-2 py-2.5 sm:py-3;
    }

    .dash-chart-panel__title {
        @apply text-sm font-semibold text-slate-900;
    }

    .dash-chart-panel__subtitle {
        @apply mt-0.5 text-xs text-slate-600;
    }

    .dash-chart-panel__canvas {
        @apply relative h-52 px-2 pb-2 pt-1 sm:px-3;
    }

    /* Chart.js maintainAspectRatio:false needs an explicit box; fill the panel. */
    .dash-chart-panel__canvas > canvas {
        @apply !block h-full w-full max-w-full;
    }

    .dash-chart-panel__canvas--donut {
        @apply mx-auto h-44 max-w-xs;
    }

    .dash-chart-panel__canvas--wide {
        @apply h-48;
    }

    .dash-chart-panel__empty {
        @apply px-4 pb-4 text-center text-xs text-slate-500 sm:px-5;
    }

    .dash-chart-panel__footer {
        @apply border-t border-slate-100 px-4 py-3 text-center sm:px-5;
    }

    .dash-chart-panel__link {
        @apply text-sm font-semibold text-teal-700 hover:text-teal-900 hover:underline;
    }

    .dash-list-panel {
        @apply flex min-h-0 flex-col overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-slate-200/60 transition-shadow duration-150 hover:shadow-md;
    }

    .dash-list-panel--dense {
        @apply min-h-0;
    }

    .dash-list-panel--dense .dash-list-panel__body {
        @apply space-y-2 px-3.5 pb-3 pt-3 sm:px-4 sm:pb-4 sm:pt-3.5;
    }

    .dash-list-panel--dense .dash-list-panel__header {
        @apply px-3.5 py-3 sm:px-4;
    }

    .dash-list-panel--dense .dash-list-panel__footer {
        @apply px-3.5 py-3.5 sm:px-4 sm:py-4;
    }

    .dash-list-panel--dense .dash-list-panel__tabs {
        @apply px-3.5 sm:px-4;
    }

    .dash-list-panel--dense .dash-list-panel__summary {
        @apply mb-2;
    }

    .dash-list-panel--dense .dash-list-panel__summary-value {
        @apply text-lg sm:text-xl;
    }

    .dash-list-panel--dense .dash-list-panel__item {
        @apply px-2.5 py-2;
    }

    .dash-list-panel__scroll--full {
        @apply max-h-[28rem] max-w-full overflow-auto px-0.5 sm:px-1;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgb(148 163 184 / 0.6) transparent;
    }

    .dash-table-scroll::-webkit-scrollbar {
        height: 8px;
        width: 8px;
    }

    .dash-table-scroll::-webkit-scrollbar-thumb {
        @apply rounded-full bg-slate-300/80;
    }

    .dash-table__sticky-col {
        @apply sticky left-0 z-[2] min-w-[9rem] max-w-[12rem] bg-inherit;
    }

    .dash-perf-scorecard thead .dash-table__sticky-col {
        z-index: 30;
    }

    .dash-perf-scorecard thead tr:first-child .dash-table__sticky-col {
        background-color: rgb(51 65 85);
    }

    .dash-perf-scorecard thead tr[class*="bg-slate-600"] .dash-table__sticky-col {
        background-color: rgb(71 85 105);
    }

    .dash-perf-scorecard tbody .dash-table__sticky-col {
        @apply bg-white shadow-[4px_0_8px_-4px_rgba(15,23,42,0.12)];
        z-index: 10;
    }

    .dash-perf-scorecard tbody tr:nth-child(even) .dash-table__sticky-col {
        @apply bg-slate-50/95;
    }

    .dash-perf-scorecard tbody tr:hover .dash-table__sticky-col {
        @apply bg-sky-50/80;
    }

    .dash-list-panel__header {
        @apply flex flex-wrap items-center justify-between gap-2 border-b border-slate-100 px-4 py-3.5 sm:px-5;
    }

    .dash-list-panel__title {
        @apply text-sm font-semibold text-slate-900 sm:text-base;
    }

    .dash-list-panel__body {
        @apply flex-1 space-y-2 px-4 py-4 sm:px-5;
    }

    .dash-list-panel__summary {
        @apply mb-3 flex flex-wrap items-baseline gap-2;
    }

    .dash-list-panel__summary-value {
        @apply text-xl font-bold tabular-nums text-slate-900 sm:text-2xl;
    }

    .dash-list-panel__summary-label {
        @apply text-sm text-slate-500;
    }

    .dash-list-panel__item {
        @apply flex items-center justify-between gap-3 rounded-lg bg-slate-50/70 px-3 py-2 transition-colors duration-150 hover:bg-sky-50/70;
    }

    .dash-list-panel__item-link {
        @apply min-w-0 truncate text-sm font-medium text-teal-700 hover:underline;
    }

    .dash-list-panel__item-meta {
        @apply shrink-0 text-sm font-semibold tabular-nums text-slate-800;
    }

    .dash-list-panel__empty {
        @apply py-8 text-center text-sm text-slate-500;
    }

    .dash-list-panel__footer {
        @apply mt-auto flex justify-end border-t border-slate-100 bg-slate-50/50 px-4 py-3.5 sm:px-5 sm:py-4;
    }

    .dash-list-panel__footer-link {
        @apply inline-flex items-center py-0.5 text-sm font-semibold text-teal-700 hover:text-teal-900 hover:underline;
    }

    .dash-list-panel__tabs {
        @apply flex gap-1 border-b border-slate-200 px-4 sm:px-5;
    }

    .dash-list-panel__tab {
        @apply -mb-px border-b-2 border-transparent px-2 py-2.5 text-sm font-medium text-slate-500 transition hover:text-slate-700;
    }

    .dash-list-panel__tab.is-active {
        @apply border-teal-700 font-semibold text-slate-900;
    }

    .dash-list-panel--table {
        @apply min-w-0;
    }

    .dash-list-panel--table .dash-list-panel__scroll {
        @apply max-h-[26rem] overflow-auto px-0.5 sm:px-1;
    }

    /* Compact officer summary ? light header, all columns readable */
    .dash-list-panel__scroll:not(.dash-list-panel__scroll--full) .dash-perf-summary-table thead th,
    .dash-perf-summary-table thead th {
        background-color: rgb(241 245 249);
        color: rgb(71 85 105);
        @apply px-3 py-2.5 text-[10px] font-bold uppercase tracking-wide;
    }

    .dash-list-panel__scroll:not(.dash-list-panel__scroll--full) .dash-perf-summary-table thead th:first-child,
    .dash-perf-summary-table thead th:first-child {
        @apply min-w-[9rem] text-left;
        color: rgb(51 65 85);
    }

    .dash-list-panel__scroll:not(.dash-list-panel__scroll--full) .dash-perf-summary-table thead th:last-child,
    .dash-perf-summary-table thead th:last-child {
        @apply min-w-[5.5rem] text-left;
        color: rgb(51 65 85);
    }

    .dash-perf-summary-table thead th[align="right"],
    .dash-perf-summary-table thead th.is-numeric {
        text-align: right;
    }

    .dash-perf-summary-table tbody td {
        @apply border-t border-slate-100 px-3 py-2.5 text-xs text-slate-700;
    }

    .dash-perf-summary-table tbody tr:nth-child(even) {
        @apply bg-slate-50/50;
    }

    .dash-perf-summary-table tbody tr:hover {
        @apply bg-sky-50/60;
    }

    .dash-perf-summary-table tbody td:first-child {
        @apply min-w-[9rem] font-medium text-slate-900;
    }

    .dash-perf-summary-table tbody td:last-child {
        @apply min-w-[5.5rem];
    }

    /* Full scorecard table ? dark sticky header */
    .dash-list-panel--table .dash-list-panel__scroll--full .ws-table thead th {
        background-color: rgb(51 65 85);
        @apply text-[10px] font-semibold uppercase tracking-wide text-slate-100;
    }

    .dash-list-panel--table .dash-list-panel__scroll--full .ws-table thead tr[class*="bg-slate-600"] th {
        background-color: rgb(71 85 105);
        color: rgb(241 245 249);
    }

    .dash-list-panel--table .dash-list-panel__scroll--full .ws-table.ws-table--sticky-first thead th:first-child {
        z-index: 3;
        background-color: rgb(51 65 85);
        color: rgb(241 245 249);
    }

    .dash-list-panel--table .ws-table tbody td {
        @apply py-2 text-xs;
    }

    .dash-list-panel--table.dash-list-panel--section-gap {
        @apply mt-0;
    }

    .dash-section__body > .dash-list-panel--section-gap {
        @apply mt-0;
    }

    .dash-section__body > .dash-section__card-grid + .dash-ops-strip,
    .dash-section__body > .dash-section__card-grid + .dash-list-panel,
    .dash-section__body > .dash-ops-strip + .dash-list-panel {
        @apply mt-0;
    }

    .dash-ops-strip {
        @apply grid grid-cols-1 gap-4 md:grid-cols-3;
    }

    .dash-ops-strip__card {
        @apply flex items-center justify-between gap-3 rounded-xl bg-white p-4 shadow-sm ring-1 ring-slate-200/60;
    }

    .ws-table--register thead th {
        @apply whitespace-nowrap bg-slate-50/95 px-3 py-3 text-[11px] font-bold uppercase tracking-wide text-slate-500 sm:px-4;
    }

    .ws-table--register tbody td {
        @apply border-t border-slate-100 px-3 py-3 text-sm text-slate-700 sm:px-4;
    }

    .ws-table--register tbody tr:nth-child(even) {
        @apply bg-slate-50/50;
    }

    .ws-table--register tbody tr:hover {
        @apply bg-sky-50/60;
    }

    .ws-table--register.ws-table--sticky thead th {
        @apply sticky top-0 z-[2] bg-slate-50/95 backdrop-blur-sm;
    }

    .ws-table--sticky-first > :is(thead, tbody, tfoot) > tr > :first-child,
    .ws-table--register.ws-table--sticky-first thead th:first-child,
    .ws-table--register.ws-table--sticky-first tbody td:first-child {
        @apply sticky left-0 z-[1] bg-inherit;
    }

    .ws-table--sticky-first > thead > tr > :first-child,
    .ws-table--register.ws-table--sticky-first thead th:first-child {
        @apply z-[3] bg-slate-50/95;
    }

    .ws-table--sticky-first > tbody > tr > :first-child,
    .ws-table--register.ws-table--sticky-first tbody td:first-child {
        @apply bg-white shadow-[4px_0_8px_-4px_rgba(15,23,42,0.12)];
    }

    .ws-table--sticky-first > tbody > tr:nth-child(even) > :first-child,
    .ws-table--register.ws-table--sticky-first tbody tr:nth-child(even) td:first-child {
        @apply bg-slate-50/95;
    }

    .ws-table--sticky-first > tbody > tr:hover > :first-child,
    .ws-table--register.ws-table--sticky-first tbody tr:hover td:first-child {
        @apply bg-sky-50/80;
    }

    /*
     * Sticky Actions column (right) — keep row menus reachable while body scrolls horizontally.
     * Default on register / compact / data-grid tables, and sticky-first scroll tables.
     * Opt out: .ws-table--no-sticky-actions
     * Also: .ws-table--sticky-actions, .loan-register-actions-col / .ws-table__actions-col / .col-actions
     */
    .ws-table--register:not(.ws-table--no-sticky-actions) > :is(thead, tbody, tfoot) > tr > :last-child,
    .loan-compact-table:not(.ws-table--no-sticky-actions) > :is(thead, tbody, tfoot) > tr > :last-child,
    .loan-register-table:not(.ws-table--no-sticky-actions) > :is(thead, tbody, tfoot) > tr > :last-child,
    .loan-clients-table:not(.ws-table--no-sticky-actions) > :is(thead, tbody, tfoot) > tr > :last-child,
    .dg-table:not(.ws-table--no-sticky-actions) > :is(thead, tbody, tfoot) > tr > :last-child,
    .ws-table--sticky-first:not(.ws-table--no-sticky-actions) > :is(thead, tbody, tfoot) > tr > :last-child,
    .ws-table--sticky-actions > :is(thead, tbody, tfoot) > tr > :last-child,
    .mobile-table-scroll > table:not(.ws-table--no-sticky-actions) > :is(thead, tbody, tfoot) > tr > :last-child,
    th.loan-register-actions-col,
    td.loan-register-actions-col,
    th.ws-table__actions-col,
    td.ws-table__actions-col,
    .loan-register-table th.col-actions,
    .loan-register-table td.col-actions {
        position: sticky;
        right: 0;
        z-index: 2;
        background: #fff;
        box-shadow: -4px 0 8px -4px rgba(15, 23, 42, 0.12);
    }

    .ws-table--register:not(.ws-table--no-sticky-actions) > thead > tr > :last-child,
    .loan-compact-table:not(.ws-table--no-sticky-actions) > thead > tr > :last-child,
    .loan-register-table:not(.ws-table--no-sticky-actions) > thead > tr > :last-child,
    .loan-clients-table:not(.ws-table--no-sticky-actions) > thead > tr > :last-child,
    .dg-table:not(.ws-table--no-sticky-actions) > thead > tr > :last-child,
    .ws-table--sticky-first:not(.ws-table--no-sticky-actions) > thead > tr > :last-child,
    .ws-table--sticky-actions > thead > tr > :last-child,
    .mobile-table-scroll > table:not(.ws-table--no-sticky-actions) > thead > tr > :last-child,
    thead th.loan-register-actions-col,
    thead th.ws-table__actions-col,
    .loan-register-table thead th.col-actions {
        z-index: 4;
        background: rgb(248 250 252);
    }

    .ws-table--register:not(.ws-table--no-sticky-actions) > tbody > tr:nth-child(even) > :last-child,
    .loan-compact-table:not(.ws-table--no-sticky-actions) > tbody > tr:nth-child(even) > :last-child,
    .loan-register-table:not(.ws-table--no-sticky-actions) > tbody > tr:nth-child(even) > :last-child,
    .loan-clients-table:not(.ws-table--no-sticky-actions) > tbody > tr:nth-child(even) > :last-child,
    .dg-table:not(.ws-table--no-sticky-actions) > tbody > tr:nth-child(even) > :last-child,
    .ws-table--sticky-first:not(.ws-table--no-sticky-actions) > tbody > tr:nth-child(even) > :last-child,
    .ws-table--sticky-actions > tbody > tr:nth-child(even) > :last-child,
    .mobile-table-scroll > table:not(.ws-table--no-sticky-actions) > tbody > tr:nth-child(even) > :last-child,
    tbody tr:nth-child(even) > td.loan-register-actions-col,
    tbody tr:nth-child(even) > td.ws-table__actions-col,
    .loan-register-table tbody tr:nth-child(even) > td.col-actions {
        background: rgb(248 250 252 / 0.95);
    }

    .ws-table--register:not(.ws-table--no-sticky-actions) > tbody > tr:hover > :last-child,
    .loan-compact-table:not(.ws-table--no-sticky-actions) > tbody > tr:hover > :last-child,
    .loan-register-table:not(.ws-table--no-sticky-actions) > tbody > tr:hover > :last-child,
    .loan-clients-table:not(.ws-table--no-sticky-actions) > tbody > tr:hover > :last-child,
    .dg-table:not(.ws-table--no-sticky-actions) > tbody > tr:hover > :last-child,
    .ws-table--sticky-first:not(.ws-table--no-sticky-actions) > tbody > tr:hover > :last-child,
    .ws-table--sticky-actions > tbody > tr:hover > :last-child,
    .mobile-table-scroll > table:not(.ws-table--no-sticky-actions) > tbody > tr:hover > :last-child,
    tbody tr:hover > td.loan-register-actions-col,
    tbody tr:hover > td.ws-table__actions-col,
    .loan-register-table tbody tr:hover > td.col-actions {
        background: rgb(240 249 255 / 0.9);
    }

    .ws-table--register:not(.ws-table--no-sticky-actions) > tbody > tr:nth-child(even) > :last-child {
        @apply bg-slate-50/95;
    }

    .ws-table--register:not(.ws-table--no-sticky-actions) > tbody > tr:hover > :last-child {
        @apply bg-sky-50/80;
    }

    /* Stick identity column (e.g. Name) while checkbox / number scroll away */
    .ws-table--sticky-name > :is(thead, tbody, tfoot) > tr > .ws-table__sticky-col,
    .ws-table--sticky-name > :is(thead, tbody, tfoot) > tr > :nth-child(3) {
        @apply sticky left-0 z-[1] bg-inherit;
        min-width: 8.5rem;
        max-width: 14rem;
    }

    .ws-table--sticky-name > thead > tr > .ws-table__sticky-col,
    .ws-table--sticky-name > thead > tr > :nth-child(3),
    .ws-table--register.ws-table--sticky-name thead th.ws-table__sticky-col,
    .ws-table--register.ws-table--sticky-name thead th:nth-child(3) {
        @apply z-[3] bg-slate-50/95;
    }

    .ws-table--sticky-name > tbody > tr > .ws-table__sticky-col,
    .ws-table--sticky-name > tbody > tr > :nth-child(3),
    .ws-table--register.ws-table--sticky-name tbody td.ws-table__sticky-col,
    .ws-table--register.ws-table--sticky-name tbody td:nth-child(3) {
        @apply bg-white shadow-[4px_0_8px_-4px_rgba(15,23,42,0.12)];
    }

    .ws-table--sticky-name > tbody > tr:nth-child(even) > .ws-table__sticky-col,
    .ws-table--sticky-name > tbody > tr:nth-child(even) > :nth-child(3),
    .ws-table--register.ws-table--sticky-name tbody tr:nth-child(even) td.ws-table__sticky-col,
    .ws-table--register.ws-table--sticky-name tbody tr:nth-child(even) td:nth-child(3) {
        @apply bg-slate-50/95;
    }

    .ws-table--sticky-name > tbody > tr:hover > .ws-table__sticky-col,
    .ws-table--sticky-name > tbody > tr:hover > :nth-child(3),
    .ws-table--register.ws-table--sticky-name tbody tr:hover td.ws-table__sticky-col,
    .ws-table--register.ws-table--sticky-name tbody tr:hover td:nth-child(3) {
        @apply bg-sky-50/80;
    }

    .ws-table--peer-cols > :is(thead, tbody, tfoot) > tr > :first-child {
        position: static;
        left: auto;
        z-index: auto;
        box-shadow: none;
    }

    .dg-table-wrap--register {
        @apply max-w-full scroll-smooth;
        scrollbar-width: thin;
        scrollbar-color: rgb(148 163 184 / 0.6) transparent;
    }

    .dg-table-wrap--register::-webkit-scrollbar {
        height: 8px;
    }

    .dg-table-wrap--register::-webkit-scrollbar-thumb {
        @apply rounded-full bg-slate-300/80;
    }

    .dg-loading {
        @apply pointer-events-none bg-transparent shadow-none ring-0;
    }

    .dg-loading svg {
        @apply text-teal-700;
    }

    .dg-pagination {
        @apply flex flex-wrap items-center justify-between gap-2 bg-slate-50/50 px-4 py-3 text-sm;
    }

    .dg-pagination nav {
        @apply ml-auto;
    }

    .dg-pagination .pagination {
        @apply mb-0 flex flex-wrap justify-center gap-1;
    }

    .dg-no-results {
        @apply py-12 text-center;
    }

    .dg-no-results__title {
        @apply text-base font-semibold text-slate-800;
    }

    .dg-no-results__text {
        @apply mt-1 text-sm text-slate-500;
    }

    .dg-toolbar {
        @apply mb-3 flex flex-wrap items-center justify-between gap-2 px-0.5;
    }

    .dg-toolbar [data-dg-exports] {
        @apply ml-auto flex flex-wrap items-center gap-1.5;
    }

    .dg-filter-bar {
        @apply shadow-sm;
    }

    .dg-table-wrap {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* UI-MOBILE-TABLE ? readable data tables on narrow viewports (global)
     *
     * Default: horizontal scroll only so vertical gestures pass through to the page.
     * Dual-axis (sticky header + body scroll) is opt-in via .dash-table-scroll /
     * .dash-list-panel__scroll--full / .mobile-table-scroll--viewport.
     */
    @media (max-width: 1023px) {
        /* Dashboard panels: use overflow:clip instead of hidden so they don't
           create a scroll container that traps vertical touch gestures. clip
           preserves visual rounding/clipping without scroll-container semantics. */
        .dash-list-panel,
        .dash-list-panel--table {
            overflow: clip;
        }

        .mobile-table-scroll,
        .dg-table-wrap,
        .ws-table-wrap,
        .cr-register-table-wrap,
        .loan-client-360__tab-table-wrap,
        #loan-workspace [class~="overflow-x-auto"]:has(> table),
        [data-loan-workspace] [class~="overflow-x-auto"]:has(> table),
        #loan-workspace-inner [class~="overflow-x-auto"]:has(> table),
        #loan-app-shell [class~="overflow-x-auto"]:has(> table),
        .loan-table-panel > [class~="overflow-x-auto"],
        .loan-analytics-table-scroll {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-x pan-y;
            max-width: 100%;
            min-width: 0;
            overscroll-behavior-x: contain;
            scrollbar-width: thin;
            scrollbar-color: rgb(148 163 184 / 0.65) transparent;
        }

        /* Dual-axis panels: horizontal scroll only on mobile; overflow-y: hidden
           (not visible) avoids the CSS spec rule that computes visible?auto when
           the other axis is non-visible, which would create a dual-scroll trap.
           max-height: none ensures no content is clipped vertically. */
        .dash-table-scroll,
        .dash-list-panel__scroll--full,
        .mobile-table-scroll--viewport,
        #loan-dashboard .dash-list-panel--officer .dash-list-panel__scroll--full,
        #loan-dashboard .dash-perf-scorecard-scroll {
            overflow-x: auto !important;
            overflow-y: hidden !important;
            touch-action: pan-x pan-y;
            -webkit-overflow-scrolling: touch;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            max-height: none !important;
            overscroll-behavior-x: contain;
            scrollbar-width: thin;
            scrollbar-color: rgb(148 163 184 / 0.65) transparent;
        }

        /* Contain width so the wide scorecard scrolls inside the panel on mobile. */
        #loan-dashboard .dash-list-panel--officer,
        #loan-dashboard .dash-perf-board {
            overflow-x: hidden;
            overflow-y: visible;
            max-width: 100%;
            min-width: 0;
        }

        #loan-dashboard .dash-perf-scorecard {
            min-width: 64rem;
            width: max-content;
        }

        /*
         * Global mobile safety net: any container that wraps a table and has
         * vertical scrolling (via Tailwind utilities, component styles, or
         * inline max-height) must not create a nested vertical scroll trap.
         * Forces overflow-y hidden and removes max-height so:
         * 1. No dual-axis scroll context is created (avoids visible?auto spec rule)
         * 2. Vertical touch gestures pass through to page scroll
         * 3. No content is clipped (max-height: none means container fits content)
         */
        #loan-workspace [class~="overflow-y-auto"]:has(> table),
        #loan-workspace-inner [class~="overflow-y-auto"]:has(> table),
        #loan-app-shell [class~="overflow-y-auto"]:has(> table),
        [data-loan-workspace] [class~="overflow-y-auto"]:has(> table),
        #loan-workspace .overflow-auto:has(> table),
        #loan-workspace-inner .overflow-auto:has(> table),
        #loan-app-shell .overflow-auto:has(> table),
        [data-loan-workspace] .overflow-auto:has(> table),
        .dash-list-panel--table .dash-list-panel__scroll,
        .dash-list-panel .dash-list-panel__scroll--full {
            overflow-y: hidden !important;
            max-height: none !important;
            touch-action: pan-x pan-y;
            -webkit-overflow-scrolling: touch;
        }

        /* Tailwind max-h-* utility classes on table parents */
        #loan-workspace [class*="max-h-"]:has(> table),
        #loan-workspace-inner [class*="max-h-"]:has(> table),
        #loan-app-shell [class*="max-h-"]:has(> table),
        [data-loan-workspace] [class*="max-h-"]:has(> table) {
            max-height: none !important;
            overflow-y: hidden !important;
            touch-action: pan-x pan-y;
        }

        /*
         * Cards/panels with overflow-hidden that contain a scrollable table
         * must not create a scroll-boundary on mobile. `overflow: clip`
         * preserves the visual rounding clip without establishing a scroll
         * container, so touch gestures propagate to the page scroll host.
         * Fallback: `overflow: visible` for browsers without clip support.
         */
        #loan-workspace [class~="overflow-hidden"]:has(.mobile-table-scroll),
        #loan-workspace [class~="overflow-hidden"]:has([class~="overflow-x-auto"]),
        #loan-workspace [class~="overflow-hidden"]:has(.dg-table-wrap),
        #loan-workspace [class~="overflow-hidden"]:has(.ws-table-wrap),
        #loan-workspace [class~="overflow-hidden"]:has(.cr-register-table-wrap),
        #loan-workspace-inner [class~="overflow-hidden"]:has(.mobile-table-scroll),
        #loan-workspace-inner [class~="overflow-hidden"]:has([class~="overflow-x-auto"]),
        #loan-workspace-inner [class~="overflow-hidden"]:has(.dg-table-wrap),
        #loan-workspace-inner [class~="overflow-hidden"]:has(.ws-table-wrap),
        #loan-workspace-inner [class~="overflow-hidden"]:has(.cr-register-table-wrap),
        #loan-app-shell [class~="overflow-hidden"]:has(.mobile-table-scroll),
        #loan-app-shell [class~="overflow-hidden"]:has([class~="overflow-x-auto"]),
        #loan-app-shell [class~="overflow-hidden"]:has(.dg-table-wrap),
        #loan-app-shell [class~="overflow-hidden"]:has(.ws-table-wrap),
        #loan-app-shell [class~="overflow-hidden"]:has(.cr-register-table-wrap) {
            overflow: visible !important;
            overflow: clip !important;
        }

        .mobile-table-scroll > table,
        .dg-table-wrap > table,
        .ws-table-wrap > table,
        .cr-register-table-wrap > table,
        .loan-client-360__tab-table-wrap > table,
        .dash-table-scroll > table,
        .dash-list-panel__scroll > table,
        #loan-workspace [class~="overflow-x-auto"] > table,
        [data-loan-workspace] [class~="overflow-x-auto"] > table,
        #loan-workspace-inner [class~="overflow-x-auto"] > table,
        #loan-app-shell [class~="overflow-x-auto"] > table,
        .loan-table-panel [class~="overflow-x-auto"] > table,
        .loan-analytics-table-scroll > table,
        #loan-workspace table.loan-compact-table,
        #loan-workspace table.ws-table,
        #loan-workspace table.dg-table,
        [data-loan-workspace] table.loan-compact-table,
        [data-loan-workspace] table.ws-table,
        [data-loan-workspace] table.dg-table {
            width: max-content;
            min-width: 100% !important;
            table-layout: auto !important;
            border-collapse: separate;
            border-spacing: 0;
        }

        .loan-analytics-table-scroll > table th,
        .loan-analytics-table-scroll > table td,
        #loan-app-shell .loan-analytics-table-scroll th,
        #loan-app-shell .loan-analytics-table-scroll td {
            white-space: nowrap;
            word-break: normal;
            overflow-wrap: normal;
        }

        #loan-workspace table.loan-compact-table th,
        #loan-workspace table.loan-compact-table td,
        [data-loan-workspace] table.loan-compact-table th,
        [data-loan-workspace] table.loan-compact-table td {
            white-space: nowrap;
            word-break: normal;
            overflow-wrap: normal;
        }

        /* Sticky headers ? active inside dual-axis scrollports */
        .dash-table-scroll > table > thead > tr > th,
        .dash-list-panel__scroll--full > table > thead > tr > th,
        .mobile-table-scroll--viewport > table > thead > tr > th {
            position: sticky;
            top: 0;
            z-index: 2;
            background-color: rgb(248 250 252);
            background-clip: padding-box;
            box-shadow: 0 1px 0 0 rgb(226 232 240);
        }

        /* Sticky first column ? OPT-IN only when the first column is a row label.
         * Peer/calendar matrices (Mon?Sun, etc.) must omit .ws-table--sticky-first. */
        table.ws-table--sticky-first > :is(thead, tbody, tfoot) > tr > :first-child,
        table.loan-compact-table:not(.ws-table--peer-cols) > :is(thead, tbody, tfoot) > tr > :first-child,
        table.loan-register-table:not(.ws-table--peer-cols) > :is(thead, tbody, tfoot) > tr > :first-child,
        table.loan-clients-table:not(.ws-table--peer-cols) > :is(thead, tbody, tfoot) > tr > :first-child,
        .dash-table__sticky-col {
            position: sticky;
            left: 0;
            z-index: 1;
            min-width: 7.5rem;
            max-width: 12rem;
            background-color: rgb(255 255 255);
            box-shadow: 4px 0 8px -4px rgb(15 23 42 / 0.12);
        }

        table.ws-table--sticky-first > thead > tr > :first-child,
        thead .dash-table__sticky-col {
            z-index: 3;
            background-color: rgb(248 250 252);
        }

        /* Corner cell: sticky top + left inside dual-axis label tables */
        .dash-table-scroll > table.ws-table--sticky-first > thead > tr > :first-child,
        .dash-list-panel__scroll--full > table.ws-table--sticky-first > thead > tr > :first-child,
        .mobile-table-scroll--viewport > table.ws-table--sticky-first > thead > tr > :first-child,
        .dash-table-scroll thead .dash-table__sticky-col,
        .dash-list-panel__scroll--full thead .dash-table__sticky-col {
            z-index: 4;
            top: 0;
            left: 0;
        }

        table.ws-table--sticky-first > tbody > tr:nth-child(even) > :first-child {
            background-color: rgb(248 250 252 / 0.95);
        }

        table.ws-table--sticky-first > tbody > tr:hover > :first-child {
            background-color: rgb(224 242 254 / 0.8);
        }

        /* Sticky Name / identity column ? checkbox & number remain free to scroll away */
        table.ws-table--sticky-name > :is(thead, tbody, tfoot) > tr > .ws-table__sticky-col,
        table.ws-table--sticky-name > :is(thead, tbody, tfoot) > tr > :nth-child(3) {
            position: sticky;
            left: 0;
            z-index: 1;
            min-width: 8.5rem;
            max-width: 14rem;
            background-color: rgb(255 255 255);
            box-shadow: 4px 0 8px -4px rgb(15 23 42 / 0.12);
        }

        table.ws-table--sticky-name > thead > tr > .ws-table__sticky-col,
        table.ws-table--sticky-name > thead > tr > :nth-child(3) {
            z-index: 3;
            background-color: rgb(248 250 252);
        }

        .dash-table-scroll > table.ws-table--sticky-name > thead > tr > .ws-table__sticky-col,
        .dash-table-scroll > table.ws-table--sticky-name > thead > tr > :nth-child(3),
        .dg-table-wrap > table.ws-table--sticky-name > thead > tr > .ws-table__sticky-col,
        .dg-table-wrap > table.ws-table--sticky-name > thead > tr > :nth-child(3) {
            z-index: 4;
            top: 0;
            left: 0;
        }

        table.ws-table--sticky-name > tbody > tr:nth-child(even) > .ws-table__sticky-col,
        table.ws-table--sticky-name > tbody > tr:nth-child(even) > :nth-child(3) {
            background-color: rgb(248 250 252 / 0.95);
        }

        table.ws-table--sticky-name > tbody > tr:hover > .ws-table__sticky-col,
        table.ws-table--sticky-name > tbody > tr:hover > :nth-child(3) {
            background-color: rgb(224 242 254 / 0.8);
        }

        /* Explicit peer-column matrices ? never pin the first column */
        table.ws-table--peer-cols > :is(thead, tbody, tfoot) > tr > :first-child {
            position: static;
            left: auto;
            z-index: auto;
            min-width: 0;
            max-width: none;
            box-shadow: none;
        }

        /* Preserve dark scorecard header chrome when sticky */
        .dash-list-panel--table .dash-list-panel__scroll--full .ws-table thead th,
        .dash-perf-scorecard thead th {
            background-color: rgb(51 65 85);
            color: rgb(241 245 249);
            box-shadow: 0 1px 0 0 rgb(51 65 85);
        }

        .dash-list-panel--table .dash-list-panel__scroll--full .ws-table thead tr[class*="bg-slate-600"] th,
        .dash-perf-scorecard thead tr[class*="bg-slate-600"] th {
            background-color: rgb(71 85 105);
            color: rgb(241 245 249);
        }

        .dash-perf-scorecard thead .dash-table__sticky-col {
            z-index: 5;
        }

        /*
         * Viewport-aware table density — scales type/padding down on narrow phones
         * while keeping cells readable (min ~10px / 0.625rem).
         */
        :root {
            --loan-mobile-table-font: clamp(0.625rem, 2.6vw, 0.75rem);
            --loan-mobile-table-head-font: clamp(0.5625rem, 2.2vw, 0.6875rem);
            --loan-mobile-table-pad-x: clamp(0.25rem, 1.4vw, 0.5rem);
            --loan-mobile-table-pad-y: clamp(0.1875rem, 1vw, 0.375rem);
            --loan-mobile-table-line: 1.25;
        }

        #loan-workspace table.loan-compact-table,
        #loan-workspace table.ws-table,
        #loan-workspace table.dg-table,
        [data-loan-workspace] table.loan-compact-table,
        [data-loan-workspace] table.ws-table,
        [data-loan-workspace] table.dg-table,
        #loan-app-shell table.loan-compact-table,
        #loan-app-shell table.ws-table,
        #loan-app-shell table.dg-table {
            font-size: var(--loan-mobile-table-font);
            line-height: var(--loan-mobile-table-line);
        }

        #loan-workspace table.loan-compact-table thead th,
        #loan-workspace table.ws-table thead th,
        #loan-workspace table.dg-table thead th,
        [data-loan-workspace] table.loan-compact-table thead th,
        [data-loan-workspace] table.ws-table thead th,
        [data-loan-workspace] table.dg-table thead th,
        #loan-app-shell table.loan-compact-table thead th,
        #loan-app-shell table.ws-table thead th,
        #loan-app-shell table.dg-table thead th {
            font-size: var(--loan-mobile-table-head-font);
        }

        #loan-workspace table.loan-compact-table th,
        #loan-workspace table.loan-compact-table td,
        #loan-workspace table.ws-table th,
        #loan-workspace table.ws-table td,
        #loan-workspace table.dg-table th,
        #loan-workspace table.dg-table td,
        [data-loan-workspace] table.loan-compact-table th,
        [data-loan-workspace] table.loan-compact-table td,
        [data-loan-workspace] table.ws-table th,
        [data-loan-workspace] table.ws-table td,
        [data-loan-workspace] table.dg-table th,
        [data-loan-workspace] table.dg-table td,
        #loan-app-shell table.loan-compact-table th,
        #loan-app-shell table.loan-compact-table td,
        #loan-app-shell table.ws-table th,
        #loan-app-shell table.ws-table td,
        #loan-app-shell table.dg-table th,
        #loan-app-shell table.dg-table td {
            padding: var(--loan-mobile-table-pad-y) var(--loan-mobile-table-pad-x);
        }

        /* Fit-to-screen tables: no horizontal scroll; wrap inside cells */
        .mobile-table-fit {
            overflow-x: hidden !important;
        }

        .mobile-table-fit > table,
        table.mobile-table-fit {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100%;
            table-layout: fixed !important;
        }

        .mobile-table-fit > table th,
        .mobile-table-fit > table td,
        table.mobile-table-fit th,
        table.mobile-table-fit td {
            white-space: normal !important;
            word-break: break-word;
            overflow-wrap: anywhere;
            hyphens: auto;
        }

    }

    .dg-card--loading {
        @apply pointer-events-none min-h-[8rem];
    }

    .dg-mobile {
        @apply md:hidden;
    }

    @media (max-width: 767px) {
        /* Prefer tables on mobile; card-list slots stay available for optional use on desktop-only flows */
        .dg-card:has([data-dg-mobile]) .dg-mobile {
            @apply hidden;
        }

        .dg-card:has([data-dg-mobile]) .dg-table-wrap {
            @apply block;
        }

        .dg-card:has([data-dg-mobile]) .dg-table-wrap:not(.dg-table-wrap--force-table) {
            @apply block;
        }
    }

    @media (min-width: 768px) {
        .dg-mobile {
            @apply hidden;
        }
    }

    /* UI-CLIENTS-03 ? Client Register (global ? must not live inside mobile-only queries) */
    .cr-register-page {
        @apply space-y-2;
    }

    .cr-register-page.ws-content {
        @apply space-y-2;
    }

    .cr-register-card__filters {
        @apply border-b border-slate-100 bg-white px-3 py-2 sm:px-3;
    }

    .cr-register-filter-form {
        @apply m-0 p-0;
    }

    .cr-register-label {
        @apply mb-0.5 block text-xs font-medium text-slate-600;
    }

    .cr-register-filter-toolbar {
        @apply flex flex-col gap-2 lg:flex-row lg:items-end lg:gap-3;
    }

    .cr-register-filter-toolbar__search-row {
        @apply w-full lg:max-w-[min(100%,22rem)] lg:shrink-0;
    }

    .cr-register-filter-toolbar__search--loading #cr-register-q {
        @apply animate-pulse border-sky-300;
    }

    .cr-register-filter-toolbar__lower {
        @apply flex min-w-0 flex-1 flex-col gap-3 md:flex-row md:items-end md:justify-between;
    }

    .cr-register-filter-grid {
        @apply grid w-full min-w-0 grid-cols-2 gap-x-3 gap-y-2 md:grid-cols-4 md:flex-1;
    }

    .cr-register-filter-grid--single {
        @apply max-w-[9rem] grid-cols-1;
    }

    .cr-register-filter-field .ws-input,
    .cr-register-filter-field select {
        @apply min-h-[2.25rem] w-full text-sm;
    }

    .cr-register-filter-toolbar__actions {
        @apply flex shrink-0 flex-nowrap items-center gap-2 self-end md:ml-auto;
    }

    .cr-register-active-filters {
        @apply inline-flex items-center gap-1.5 rounded-full bg-sky-50 px-2.5 py-1 text-xs font-medium text-sky-900 ring-1 ring-sky-200/80;
    }

    .cr-register-active-filters__dot {
        @apply h-1.5 w-1.5 shrink-0 rounded-full bg-sky-500;
    }

    .cr-register-meta-bar {
        @apply relative z-20 flex flex-wrap items-center justify-between gap-2 overflow-visible border-b border-slate-100 bg-slate-50/50 px-3 py-2 sm:px-3;
    }

    .cr-register-meta-bar.dg-toolbar {
        @apply mb-0 overflow-visible px-3;
    }

    .cr-register-meta-bar__range {
        @apply text-sm font-medium text-slate-800;
    }

    .cr-register-meta-bar__refreshed {
        @apply text-[11px] text-slate-500;
    }

    .cr-register-meta-bar__time {
        @apply ml-1 text-slate-400;
    }

    .cr-register-tool-cluster {
        @apply ml-auto inline-flex shrink-0 flex-row items-stretch overflow-visible rounded-lg border border-slate-200 bg-white shadow-sm;
    }

    .cr-register-tool-dropdown {
        @apply relative shrink-0;
    }

    .cr-register-tool-btn {
        @apply inline-flex min-h-[2rem] items-center gap-1 whitespace-nowrap border-0 border-l border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-slate-700 transition first:border-l-0 hover:bg-slate-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-teal-500 sm:px-3;
    }

    .cr-register-tool-btn[aria-expanded="true"] {
        @apply bg-slate-50 text-slate-900;
    }

    .cr-register-tool-menu {
        @apply absolute right-0 top-full z-50 mt-1.5 min-w-[10.5rem] origin-top-right overflow-hidden rounded-xl border border-slate-200 bg-white py-1.5 shadow-xl ring-1 ring-slate-200/60;
    }

    .cr-register-tool-menu--wide {
        @apply min-w-[15rem] max-w-[18rem];
    }

    .cr-register-tool-menu__heading {
        @apply px-3 pb-1 pt-0.5 text-[10px] font-semibold uppercase tracking-wide text-slate-400;
    }

    .cr-register-tool-menu__divider {
        @apply my-1 border-t border-slate-100;
    }

    .cr-register-tool-menu__item {
        @apply block w-full px-3 py-2 text-left text-xs font-medium text-slate-700 hover:bg-slate-50;
    }

    button.cr-register-tool-menu__item {
        @apply flex items-center;
    }

    a.cr-register-tool-menu__item {
        @apply no-underline;
    }

    .cr-register-columns-menu__grid--menu {
        @apply grid max-h-52 grid-cols-1 gap-0.5 overflow-y-auto px-1.5 pb-1 sm:grid-cols-2;
    }

    .cr-register-columns-menu__grid--menu .cr-register-columns-menu__item {
        @apply inline-flex items-center gap-2 rounded-md px-2 py-1.5 text-xs text-slate-700 hover:bg-slate-50;
    }

    .cr-intel-strip {
        @apply rounded-xl bg-slate-50/70 p-2 ring-1 ring-slate-200/60 sm:p-3;
    }

    .cr-intel-strip__scroll {
        @apply flex gap-2 overflow-x-auto pb-1;
    }

    .cr-intel-chip {
        @apply flex min-h-[4.75rem] min-w-[7.5rem] flex-1 flex-col items-start justify-center rounded-xl bg-white px-3.5 py-3 ring-1 ring-slate-200/80 transition duration-150 hover:-translate-y-px hover:shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500;
    }

    .cr-intel-chip__value {
        @apply text-xl font-bold leading-none text-slate-900 sm:text-2xl;
    }

    .cr-intel-chip__label {
        @apply mt-1 text-[10px] font-bold uppercase tracking-wide text-slate-500;
    }

    @media (max-width: 767px) {
        .cr-intel-strip__scroll {
            @apply grid grid-cols-2 gap-2 overflow-visible pb-0;
        }

        .cr-intel-chip {
            @apply min-h-[3rem] max-h-[3.375rem] min-w-0 flex-row items-center justify-between gap-2 rounded-lg px-3 py-2;
        }

        .cr-intel-chip__value {
            @apply order-2 m-0 text-right text-sm font-bold leading-none;
        }

        .cr-intel-chip__label {
            @apply order-1 m-0 mt-0 max-w-[68%] flex-[1_1_68%] truncate text-xs normal-case tracking-normal;
        }
    }

    .cr-intel-chip--success {
        @apply bg-emerald-50/90 ring-emerald-200/80;
    }

    .cr-intel-chip--warning {
        @apply bg-amber-50/90 ring-amber-200/80;
    }

    .cr-intel-chip--danger {
        @apply bg-rose-50/90 ring-rose-200/80;
    }

    .cr-intel-chip--info {
        @apply bg-sky-50/90 ring-sky-200/80;
    }

    .cr-intel-chip--neutral {
        @apply bg-white ring-slate-200/80;
    }

    .cr-intel-chip--active {
        @apply shadow-enterprise-sm ring-2 ring-brand/70;
    }

    .cr-intel-strip__meta {
        @apply mt-2 flex items-center justify-end gap-1 text-[10px] text-slate-400;
    }

    .cr-register-columns-menu {
        @apply absolute right-0 z-30 mt-2 w-72 rounded-xl border border-slate-200 bg-white p-3 shadow-lg;
    }

    .cr-register-columns-menu__title {
        @apply mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500;
    }

    .cr-register-columns-menu__grid {
        @apply grid max-h-72 grid-cols-2 gap-2 overflow-y-auto pr-1;
    }

    .cr-register-columns-menu__item {
        @apply inline-flex items-center gap-2 text-xs text-slate-700;
    }

    .cr-register-table-wrap {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .ws-table--register-compact tbody td {
        @apply py-2 sm:py-2.5;
    }

    .cr-register-table__name-col {
        @apply sticky left-0 z-[1] min-w-[12rem] bg-inherit shadow-[4px_0_8px_-4px_rgba(15,23,42,0.1)];
    }

    .cr-register-table.ws-table--sticky thead .cr-register-table__name-col {
        @apply z-[3] bg-slate-50/95;
    }

    .cr-register-table tbody tr:nth-child(even) .cr-register-table__name-col {
        @apply bg-slate-50/95;
    }

    .cr-register-table tbody tr:hover .cr-register-table__name-col {
        @apply bg-sky-50/80;
    }

    .cr-client-identity__name {
        @apply text-sm;
    }

    .cr-client-identity__number {
        @apply mt-0.5;
    }

    .cr-row-actions {
        @apply flex items-center justify-end;
    }

    .cr-row-actions__trigger {
        @apply inline-flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-500 shadow-sm transition-colors hover:bg-slate-50 hover:text-slate-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500/40;
    }

    .cr-row-actions__menu {
        @apply overflow-hidden rounded-lg border border-slate-200 bg-white py-1 shadow-xl ring-1 ring-black/5;
    }

    .cr-row-actions__menu-item {
        @apply block w-full px-3 py-2 text-left text-sm font-medium text-slate-700 hover:bg-slate-50;
    }

    .cr-row-actions__menu-item--danger {
        @apply text-rose-700 hover:bg-rose-50;
    }

    .cr-register-table-wrap--compact tbody td {
        @apply py-1.5;
    }

    .cr-register-pagination {
        @apply justify-end py-2;
    }

    .cr-register-pagination__controls nav {
        @apply ml-0;
    }
}

/*
 * Entity / workspace tone scopes and late application CSS.
 * @tailwind utilities MUST come after all @apply rules — placing utilities earlier
 * caused Tailwind to re-emit applied utilities per selector (~4 MiB payload).
 * MFI-PERF-CSS-01.
 */
.loan-client-360,
.loan-loan-360,
.loan-app-360,
.loan-finance-release {
    color-scheme: light;
    color: rgb(30 41 59);
}

.loan-client-360 [class~="font-medium"]:not([class*='text-']),
.loan-loan-360 [class~="font-medium"]:not([class*='text-']),
.loan-loan-360 dd:not([class*='text-']),
.loan-app-360 [class~="font-medium"]:not([class*='text-']),
.loan-app-360 dd:not([class*='text-slate-']):not([class*='text-amber-']):not([class*='text-red-']):not([class*='text-emerald-']),
.loan-finance-release dd:not([class*='text-']) {
    color: rgb(15 23 42);
}

.loan-loan-360 td:not([class*='text-']),
.loan-finance-release td:not([class*='text-']) {
    color: rgb(51 65 85);
}

@layer base {
  /* Safety: ensure the page can scroll unless a specific component intentionally locks it */
  html, body {
    height: 100%;
  }
  body {
    overflow-y: auto;
    overflow-x: hidden;
  }
}

@keyframes mfi-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mfi-pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.85);
    }
}

@keyframes mfi-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes mfi-progress-grow {
    from {
        width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mfi-section-fade,
    .mfi-float-slow,
    .mfi-float-delay,
    .mfi-pulse-dot,
    .mfi-progress-bar {
        animation: none !important;
    }

    .mfi-card-hover:hover {
        transform: none;
    }
}


/* Entity detail views inside embedded workspace ? hide list-level chrome */
.loan-workspace--entity-detail .ws-header [data-ws-header-actions] {
    display: none !important;
}

.loan-workspace--entity-detail .ws-header .loan-module-workspace-search-wrap,
.loan-workspace--entity-detail .ws-header .loan-workspace-context-search {
    display: none !important;
}

/* Client 360 and other immersive entity views ? drop workspace list chrome */
.loan-workspace--detail-immersive .ws-header,
.loan-workspace--detail-immersive .ws-tabs--primary,
.loan-workspace--detail-immersive [data-ws-layer="2"],
.loan-workspace:has(#loan-workspace-inner [data-loan-workspace-detail-immersive="1"]) .ws-header,
.loan-workspace:has(#loan-workspace-inner [data-loan-workspace-detail-immersive="1"]) .ws-tabs--primary,
.loan-workspace:has(#loan-workspace-inner [data-loan-workspace-detail-immersive="1"]) [data-ws-layer="2"] {
    display: none !important;
}

/* Client intelligence strip ? hidden off All Clients tab (turbo shell may persist DOM) */
[data-ws-subnav-group="client_intelligence"][hidden] {
    display: none !important;
}

/* UI-CONSOLIDATION-01 ? operational workspace density (raw CSS avoids @apply circular deps) */
.loan-workspace--dense .ws-shell {
    border-radius: 0.75rem;
}

.loan-workspace--dense .ws-tabs--primary {
    top: 0;
}

.loan-workspace--dense .ws-filter-bar {
    top: 2.125rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.loan-workspace--dense .ws-tabs__nav {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.loan-workspace--dense .ws-tab {
    padding: 0.375rem 0.625rem;
    font-size: 0.6875rem;
}

.loan-operational-filter,
.loan-workspace--dense .loan-workspace-content > form[method="get"] {
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgb(226 232 240);
    background-color: #fff;
    padding: 0.5rem 0.5rem;
    box-shadow: none;
    border-radius: 0;
}

@media (min-width: 640px) {
    .loan-operational-filter,
    .loan-workspace--dense .loan-workspace-content > form[method="get"] {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

.loan-operational-filter label,
.loan-workspace--dense .loan-workspace-content form[method="get"] label {
    display: block;
    margin-bottom: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: rgb(100 116 139);
}

.loan-operational-filter input[type="search"],
.loan-operational-filter input[type="text"],
.loan-operational-filter input[type="date"],
.loan-operational-filter select,
.loan-workspace--dense .loan-workspace-content form[method="get"] input,
.loan-workspace--dense .loan-workspace-content form[method="get"] select {
    height: 2rem;
    border-radius: 0.375rem;
    border-color: rgb(226 232 240);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    box-shadow: none;
}

.loan-workspace--dense .loan-index-toolbar-form {
    margin-bottom: 0.5rem;
}

.loan-workspace--dense .loan-index-toolbar,
.loan-workspace--dense .loan-list-search .loan-index-toolbar,
.loan-workspace--dense form.loan-index-toolbar-form > div:first-child {
    margin-bottom: 0.5rem;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: rgb(226 232 240);
    background-color: #fff;
    padding: 0.5rem 0.5rem;
    box-shadow: none;
    border-radius: 0;
}

.loan-workspace--dense .loan-data-table__toolbar {
    padding: 0.375rem 0.5rem;
}

.loan-workspace--dense .loan-intel-strip,
.loan-workspace--dense .loan-portfolio-intel-strip {
    margin-bottom: 0.5rem;
}

.loan-workspace--dense .loan-workspace-secondary-chips {
    display: none;
}

.loan-workspace--dense .loan-workspace-content > [data-loan-panel-shell] > [data-loan-panel-header] {
    padding: 0.5rem 0.75rem;
}

.loan-app-360 .loan-app-360__header {
    margin-bottom: 0;
}

.loan-app-360 .loan-app-360__summary {
    margin-top: 0;
}

.loan-app-360 .loan-app-360__status-stack:empty {
    display: none;
}

.loan-app-360 .loan-app-360__status-stack:not(:has(*)) {
    display: none;
    padding: 0;
}

/* Floating action button stack (AI + Print) ? bottom offset coordinated by ELIS */
.loan-fab-stack {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--elis-bottom-chrome, 1rem) + var(--elis-fab-gap, 0.75rem) + 0.25rem);
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.625rem;
    pointer-events: none;
}

.loan-fab-stack > * {
    pointer-events: auto;
}

.loan-ai-assistant-fab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 9999px;
    border: 1px solid rgb(67 56 202);
    background: #4f46e5;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.loan-ai-assistant-fab:hover {
    background: #4338ca;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
    transform: translateY(-1px);
}

.loan-ai-assistant-fab:focus-visible {
    outline: 2px solid rgb(165 180 252);
    outline-offset: 2px;
}

.loan-ai-assistant-fab__icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.loan-ai-assistant-panel {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--elis-bottom-chrome, 0px) + var(--elis-fab-size, 3rem) + var(--elis-fab-gap, 0.75rem) + 0.5rem);
    /* Below loan-form modals (z-130+) so "Open" actions from chat stay usable */
    z-index: 120;
    display: none; /* visibility via [data-ai-open] */
    width: min(24rem, calc(100vw - 2rem));
    max-height: min(32rem, calc(100vh - 8rem));
    flex-direction: column;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgb(226 232 240);
    background: #fff;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
}

.loan-ai-assistant-panel__header {
    display: flex;
    shrink: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid rgb(241 245 249);
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    padding: 0.875rem 1rem;
    color: #fff;
}

.loan-ai-assistant-panel__title {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
}

.loan-ai-assistant-panel__subtitle {
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: rgb(224 231 255);
}

.loan-ai-assistant-panel__context {
    margin-top: 0.375rem;
    font-size: 0.625rem;
    line-height: 1.35;
    color: rgb(199 210 254);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loan-ai-assistant-mode {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.loan-ai-assistant-mode--documentation { background: rgba(16, 185, 129, 0.25); }
.loan-ai-assistant-mode--llm { background: rgba(255, 255, 255, 0.28); }
.loan-ai-assistant-mode--local_fallback,
.loan-ai-assistant-mode--error { background: rgba(251, 191, 36, 0.3); }
.loan-ai-assistant-mode--disabled,
.loan-ai-assistant-mode--unconfigured { background: rgba(248, 113, 113, 0.35); }

.loan-ai-assistant-panel__icon-btn {
    flex-shrink: 0;
    border-radius: 0.5rem;
    padding: 0.375rem;
    color: #fff;
    opacity: 0.9;
}

.loan-ai-assistant-panel__icon-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
}

.loan-ai-assistant-message__link {
    color: rgb(37 99 235);
    text-decoration: underline;
    word-break: break-all;
}

.loan-ai-assistant-message--assistant .loan-ai-assistant-message__link {
    color: rgb(67 56 202);
}

.loan-ai-assistant-message__code {
    border-radius: 0.25rem;
    background: rgb(241 245 249);
    padding: 0.0625rem 0.25rem;
    font-size: 0.8125em;
}

.loan-ai-assistant-panel__close {
    flex-shrink: 0;
    border-radius: 0.5rem;
    padding: 0.375rem;
    color: rgb(224 231 255);
}

.loan-ai-assistant-panel__close:hover {
    background: rgb(255 255 255 / 0.12);
    color: #fff;
}

.loan-ai-assistant-panel__messages {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: 0.875rem;
    background: #f8fafc;
}

.loan-ai-assistant-message {
    margin-bottom: 0.75rem;
}

.loan-ai-assistant-message__role {
    margin-bottom: 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(100 116 139);
}

.loan-ai-assistant-message__body {
    border-radius: 0.875rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.loan-ai-assistant-message--assistant .loan-ai-assistant-message__body {
    border: 1px solid rgb(226 232 240);
    background: #fff;
    color: rgb(15 23 42);
}

.loan-ai-assistant-message--user .loan-ai-assistant-message__body {
    background: #4f46e5;
    color: #fff;
    max-height: 9rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.loan-ai-assistant-message__para {
    margin: 0 0 0.625rem;
}

.loan-ai-assistant-message__para:last-child {
    margin-bottom: 0;
}

.loan-ai-assistant-message__list {
    margin: 0 0 0.625rem;
    padding-left: 1.125rem;
    list-style: disc;
}

.loan-ai-assistant-message__list:last-child {
    margin-bottom: 0;
}

.loan-ai-assistant-message__list li {
    margin: 0.25rem 0;
}

.loan-ai-assistant-message--assistant .loan-ai-assistant-message__list {
    color: rgb(30 41 59);
}

.loan-ai-assistant-message__nav {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(226 232 240 / 0.9);
}

.loan-ai-assistant-message__nav-label {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(100 116 139);
}

.loan-ai-assistant-message__nav-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.loan-ai-assistant-message__nav-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(203 213 225);
    background: rgb(248 250 252);
    padding: 0.625rem 0.75rem;
    color: rgb(15 23 42);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.loan-ai-assistant-message__nav-card:hover {
    border-color: rgb(45 79 79 / 0.35);
    background: rgb(240 253 250);
}

.loan-ai-assistant-message__nav-card-icon {
    font-size: 1.125rem;
    line-height: 1;
}

.loan-ai-assistant-message__nav-card-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.125rem;
}

.loan-ai-assistant-message__nav-card-title {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    color: rgb(15 118 110);
}

.loan-ai-assistant-message__nav-card-desc {
    font-size: 0.75rem;
    line-height: 1.35;
    color: rgb(100 116 139);
}

.loan-ai-assistant-message__nav-card-action {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgb(15 118 110);
}

.loan-ai-assistant-message__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.loan-ai-assistant-message__tools {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

.loan-ai-assistant-message__tool {
    display: inline-flex;
    min-width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    font-size: 0.8125rem;
    color: rgb(100 116 139);
    cursor: pointer;
}

.loan-ai-assistant-message__tool:hover,
.loan-ai-assistant-message__tool.is-active {
    background: rgb(241 245 249);
    color: rgb(15 118 110);
}

.loan-ai-assistant-message__related {
    margin-top: 0.75rem;
}

.loan-ai-assistant-message__related-label {
    margin: 0 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(100 116 139);
}

.loan-ai-assistant-message__related-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.loan-ai-assistant-message__related-chip {
    border-radius: 9999px;
    border: 1px dashed rgb(203 213 225);
    background: #fff;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(51 65 85);
    cursor: pointer;
}

.loan-ai-assistant-message__related-chip:hover {
    border-color: rgb(45 79 79 / 0.35);
    color: rgb(15 118 110);
}

@media (max-width: 640px) {
    .loan-ai-assistant-message__nav-card {
        grid-template-columns: auto 1fr;
    }

    .loan-ai-assistant-message__nav-card-action {
        grid-column: 2;
        justify-self: start;
        margin-top: 0.125rem;
    }
}

.loan-ai-assistant-message__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.loan-ai-assistant-message__nav-chip {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    border: 1px solid rgb(203 213 225);
    background: rgb(248 250 252);
    padding: 0.3125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    color: rgb(15 118 110);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.loan-ai-assistant-message__nav-chip:hover {
    border-color: rgb(45 79 79 / 0.35);
    background: rgb(240 253 250);
    color: rgb(17 94 89);
}

.loan-ai-assistant-message__nav-icon {
    flex-shrink: 0;
}

.loan-ai-assistant-message__nav-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.loan-ai-assistant-message__nav-locked {
    margin-top: 0.5rem;
}

.loan-ai-assistant-message__nav-locked-item {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgb(100 116 139);
}

.loan-ai-assistant-typing {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.875rem;
    border: 1px solid rgb(226 232 240);
    background: #fff;
    padding: 0.625rem 0.75rem;
}

.loan-ai-assistant-typing span {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: rgb(148 163 184);
    animation: loan-ai-assistant-typing 1.2s infinite ease-in-out;
}

.loan-ai-assistant-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.loan-ai-assistant-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes loan-ai-assistant-typing {
    0%, 80%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

.loan-ai-assistant-panel__prompts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid rgb(241 245 249);
    background: #fff;
    padding: 0.5rem 0.75rem 0.625rem;
}

.loan-ai-assistant-panel__prompts-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.375rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    padding: 0.25rem 0.125rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgb(100 116 139);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.loan-ai-assistant-panel__prompts-toggle:hover {
    color: rgb(67 56 202);
    background: rgb(248 250 252);
}

.loan-ai-assistant-panel__prompts-toggle-label {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.loan-ai-assistant-panel__prompts-count {
    display: inline-flex;
    min-width: 1.125rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgb(241 245 249);
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.4;
    color: rgb(71 85 105);
}

.loan-ai-assistant-panel__prompts-chevron {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    color: rgb(148 163 184);
    transition: transform 0.15s ease, color 0.15s ease;
}

.loan-ai-assistant-panel__prompts-chevron.is-open {
    transform: rotate(180deg);
    color: rgb(67 56 202);
}

.loan-ai-assistant-panel__prompts-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.loan-ai-assistant-prompt {
    border-radius: 9999px;
    border: 1px solid rgb(226 232 240);
    background: rgb(248 250 252);
    padding: 0.375rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgb(51 65 85);
}

.loan-ai-assistant-prompt:hover {
    border-color: rgb(199 210 254);
    background: rgb(238 242 255);
    color: rgb(67 56 202);
}

.loan-ai-assistant-panel__composer {
    display: flex;
    shrink: 0;
    align-items: flex-end;
    gap: 0.5rem;
    border-top: 1px solid rgb(241 245 249);
    background: #fff;
    padding: 0.75rem;
}

.loan-ai-assistant-panel__input {
    min-height: 2.75rem;
    max-height: 7rem;
    min-width: 0;
    flex: 1;
    resize: vertical;
    border-radius: 0.75rem;
    border: 1px solid rgb(226 232 240);
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: rgb(15 23 42);
    background-color: #fff;
    color-scheme: light;
}

.loan-ai-assistant-panel__input::placeholder {
    color: rgb(100 116 139);
}

.loan-ai-assistant-panel__input:disabled {
    color: rgb(100 116 139);
    background-color: rgb(248 250 252);
}

.loan-ai-assistant-panel__input:focus {
    border-color: rgb(129 140 248);
    outline: none;
    box-shadow: 0 0 0 3px rgb(199 210 254 / 0.45);
}

.loan-ai-assistant-panel__send {
    display: inline-flex;
    height: 2.75rem;
    width: 2.75rem;
    shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: #4f46e5;
    color: #fff;
}

.loan-ai-assistant-panel__send:hover:not(:disabled) {
    background: #4338ca;
}

.loan-ai-assistant-panel__send:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Global floating print FAB */
.loan-global-print-fab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 9999px;
    border: 1px solid rgb(15 118 110);
    background: #0f766e;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.loan-global-print-fab:hover {
    background: #0d6660;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
    transform: translateY(-1px);
}

.loan-global-print-fab:focus-visible {
    outline: 2px solid rgb(45 212 191);
    outline-offset: 2px;
}

.loan-global-print-fab__icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .loan-fab-stack {
        right: 1.25rem;
        bottom: calc(1.25rem + var(--elis-footer-height, 4rem) + env(safe-area-inset-bottom, 0px));
    }

    .loan-ai-assistant-panel {
        right: 1.25rem;
        bottom: calc(6.25rem + var(--elis-footer-height, 4rem) + env(safe-area-inset-bottom, 0px));
    }

    .loan-global-print-fab {
        padding-left: 1rem;
        padding-right: 1.125rem;
    }

    .loan-global-print-fab__label {
        display: inline;
    }

    .loan-ai-assistant-fab__label {
        display: inline;
    }
}

.loan-modal-spinner {
    @apply h-10 w-10 animate-spin rounded-full border-4 border-slate-200 border-t-brand;
}

.loan-toast-host {
    @apply fixed top-4 right-4 z-[150] flex flex-col gap-2 pointer-events-none;
    width: min(22rem, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
}

/* Keep SweetAlert toasts compact — never full content width */
.swal2-container.swal2-top-end,
.swal2-container.swal2-top-start,
.swal2-container.swal2-top,
.swal2-container.swal2-bottom-end,
.swal2-container.swal2-bottom-start,
.swal2-container.swal2-bottom {
    padding: 0.75rem !important;
    align-items: flex-end !important;
}

.swal2-popup.swal2-toast {
    width: auto !important;
    max-width: min(22rem, calc(100vw - 1.5rem)) !important;
    inset: auto !important;
}

/* Toast containers are pointer-events:none; keep the toast itself tappable for dismiss. */
.swal2-popup.swal2-toast.loan-swal-toast {
    pointer-events: auto !important;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.swal2-popup.swal2-toast.loan-swal-toast .swal2-close {
    pointer-events: auto !important;
    font-size: 1.35rem;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    margin: 0;
}

@media (max-width: 640px) {
    .swal2-container.swal2-top-end,
    .swal2-container.swal2-top-start,
    .swal2-container.swal2-top {
        padding: 0.5rem !important;
        align-items: stretch !important;
    }

    .swal2-popup.swal2-toast.loan-swal-toast {
        max-width: calc(100vw - 1rem) !important;
        width: calc(100vw - 1rem) !important;
    }
}

/*
 * SweetAlert toast mode sets pointer-events:none on the container while
 * body.swal2-toast-shown is present. If a blocking confirm opens before the
 * toast class is cleared (common after Turbo uploads), the modal looks active
 * but cannot be clicked.
 */
body.swal2-shown .swal2-container:has(.swal2-popup:not(.swal2-toast)) {
    pointer-events: auto !important;
    z-index: 10050 !important;
}

body.swal2-shown .swal2-container .swal2-popup:not(.swal2-toast) {
    pointer-events: auto !important;
}

/* Orphan containers (no live popup) must never swallow Approve clicks. */
.swal2-container:not([data-mfi-swal-live]):not(:has(.swal2-popup.swal2-show)):not(:has(.swal2-popup.swal2-toast)) {
    pointer-events: none !important;
}

.loan-toast {
    @apply pointer-events-auto rounded-lg px-4 py-3 text-sm font-medium text-white shadow-lg;
}

.loan-toast--success {
    @apply bg-brand;
}

.loan-toast--error {
    @apply bg-rose-600;
}

.loan-toast--info {
    @apply bg-slate-800 text-white;
}

.loan-toast--saving {
    @apply flex items-center gap-2.5 bg-slate-900 text-white;
}

.loan-ent-btn .loan-submit-spinner {
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
}

.loan-toast__spinner,
.loan-submit-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 9999px;
    animation: loan-submit-spin 0.7s linear infinite;
    flex-shrink: 0;
}

.loan-submit-spinner {
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: currentColor;
}

button[type='submit'].border-slate-300 .loan-submit-spinner {
    border-color: rgba(100, 116, 139, 0.35);
    border-top-color: #334155;
}

@keyframes loan-submit-spin {
    to {
        transform: rotate(360deg);
    }
}

.loan-form--submitting {
    cursor: wait;
}

.loan-toast--critical,
.loan-toast--emergency {
    @apply border border-amber-300 bg-white text-slate-900 shadow-lg;
    width: 100%;
    max-width: 22rem;
    padding: 0.75rem 0.85rem;
}

.loan-toast--critical .loan-critical-toast__title,
.loan-toast--emergency .loan-critical-toast__title {
    @apply text-slate-900;
}

.loan-toast--critical .loan-critical-toast__message,
.loan-toast--emergency .loan-critical-toast__message {
    @apply text-slate-600;
}

.loan-critical-toast__title {
    @apply text-sm font-semibold leading-snug text-rose-950;
}

.loan-critical-toast__message {
    @apply mt-1 text-xs text-rose-900/90 leading-relaxed;
}

.loan-critical-toast__actions {
    @apply mt-2 flex items-center gap-2;
}

.loan-critical-toast__link {
    @apply inline-flex items-center rounded-md bg-rose-700 px-2.5 py-1 text-xs font-semibold text-white hover:bg-rose-800;
}

.loan-critical-toast__dismiss {
    @apply inline-flex items-center rounded-md border border-rose-200 bg-white px-2.5 py-1 text-xs font-semibold text-rose-800 hover:bg-rose-100;
}

#loan-context-quick-nav {
    position: relative;
    z-index: 40;
}

#loan-context-quick-nav.is-navigating .loan-context-quick-link.is-loading {
    opacity: 0.65;
}

#loan-context-quick-nav .loan-context-quick-link.is-loading {
    pointer-events: none;
}

#loan-context-quick-nav .loan-context-quick-link {
    pointer-events: auto;
    cursor: pointer;
}

/* MOBILE-UI-01 ? filter + intelligence strip helpers (shell/KPI/chrome ? elis.css) */
@media (max-width: 1023px) {
    .loan-intel-strip > div:first-child {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .loan-intel-strip > div:first-child::-webkit-scrollbar {
        display: none;
    }

    .loan-intel-strip .loan-intel-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .loan-intel-strip .loan-intel-chips::-webkit-scrollbar {
        display: none;
    }

    .loan-intel-strip .loan-intel-expand-label {
        display: none;
    }

    .loan-table-panel > [class~="overflow-x-auto"] {
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }

    .loan-table-panel > [class~="overflow-x-auto"] > table {
        width: max-content;
        min-width: 100%;
    }

    .loan-mobile-analytics-panel {
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .loan-mobile-filter-form__toolbar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .loan-mobile-filter-form__search {
        flex: 1 1 auto;
        min-width: 0;
    }

    .loan-mobile-filter-form__search label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .loan-mobile-filter-form__search input[type="search"],
    .loan-mobile-filter-form__search input[type="text"] {
        width: 100%;
        height: 2.25rem;
    }

    .loan-mobile-filter-form__toggle {
        list-style: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        height: 2.75rem;
        min-width: 2.75rem;
        padding: 0 0.85rem;
        border-radius: 0.625rem;
        border: 1px solid rgb(226 232 240);
        background: #fff;
        font-size: 0.75rem;
        font-weight: 600;
        color: rgb(51 65 85);
        cursor: pointer;
        user-select: none;
    }

    .loan-mobile-filter-form__toggle::-webkit-details-marker {
        display: none;
    }

    .loan-mobile-filter-form__details {
        position: relative;
        flex-shrink: 0;
    }

    /* Sheet home is a portal anchor — children leave via Alpine portToBody. */
    .loan-mobile-filter-form__sheet-home {
        display: contents;
    }

    .loan-mobile-filter-form__backdrop,
    body > .loan-mobile-filter-form__backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 200 !important;
        background: rgba(15, 23, 42, 0.55);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    /*
     * Filter sheet = create-form modal language.
     * Resting display:flex; Alpine x-show toggles visibility (do not force display:none —
     * that fought x-show and made Filters look dead).
     * When open, JS ports the node to document.body so fixed positioning is not trapped.
     */
    .loan-mobile-filter-form__panel.loan-filter-sheet-modal,
    .loan-mobile-filter-form__panel,
    body > .loan-mobile-filter-form__panel.loan-filter-sheet-modal {
        display: flex;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        z-index: 201 !important;
        width: 100% !important;
        max-width: none !important;
        height: min(92dvh, 100%) !important;
        max-height: min(92dvh, 100%) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        flex-direction: column !important;
        border-radius: 20px 20px 0 0 !important;
        border: 1px solid rgb(226 232 240) !important;
        border-bottom: 0 !important;
        background: #fff !important;
        box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18) !important;
    }

    .loan-filter-sheet-modal__header {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-height: 56px;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgb(226 232 240);
        background: #fff;
    }

    .loan-filter-sheet-modal__title {
        margin: 0;
        font-size: 1.0625rem;
        font-weight: 600;
        line-height: 1.3;
        color: rgb(15 23 42);
    }

    .loan-filter-sheet-modal__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0.625rem;
        background: transparent;
        color: rgb(100 116 139);
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
    }

    .loan-filter-sheet-modal__close:hover {
        background: rgb(241 245 249);
        color: rgb(51 65 85);
    }

    .loan-filter-sheet-modal__body {
        flex: 1 1 auto;
        min-height: 12rem;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 0.875rem 1rem 1rem;
        background: #fff;
    }

    .loan-filter-sheet-modal__footer {
        flex-shrink: 0;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgb(226 232 240);
        background: #fff;
    }

    .loan-filter-sheet-modal__apply {
        display: inline-flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        border-radius: 12px;
        border: 0;
        background: #0f8f55;
        padding: 0.65rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
    }

    .loan-filter-sheet-modal__apply:hover {
        background: #0a7344;
    }

    .loan-mobile-filter-form__panel-head {
        display: none;
    }

    .loan-mobile-filter-form__panel-fields {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    .loan-mobile-filter-form__panel-fields > div {
        width: 100%;
        min-width: 0;
    }

    .loan-mobile-filter-form__panel-fields select,
    .loan-mobile-filter-form__panel-fields input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
        width: 100%;
        min-height: 48px;
        height: auto;
        border-radius: 10px;
        font-size: 16px;
    }

    .loan-mobile-filter-form__panel-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        border: 0;
        width: 100%;
    }

    .loan-mobile-filter-form__panel-actions .loan-filter-sheet-modal__apply {
        flex: 1 1 100%;
    }

    .loan-mobile-filter-form__toolbar-actions {
        display: none !important;
    }

    html.loan-filter-sheet-open,
    html.loan-filter-sheet-open body {
        overflow: hidden !important;
    }

    .loan-mobile-filter-form__toolbar:not(:has(.loan-mobile-filter-form__search)) {
        justify-content: flex-end;
    }

    .loan-mobile-filter-form__toolbar:not(:has(.loan-mobile-filter-form__search)) .loan-mobile-filter-form__details {
        flex: 1 1 auto;
    }

    .loan-mobile-filter-form__toolbar:not(:has(.loan-mobile-filter-form__search)) .loan-mobile-filter-form__toggle {
        width: 100%;
    }

    .loan-clients-table th,
    .loan-clients-table td {
        padding: 0.375rem 0.5rem;
        font-size: 0.6875rem;
        line-height: 1.1rem;
        white-space: nowrap;
    }

    .loan-clients-table thead th {
        font-size: 0.625rem;
    }

    .loan-clients-register [class~="overflow-x-auto"] {
        -webkit-overflow-scrolling: touch;
    }

    .loan-operational-filter:not(.loan-mobile-filter-form) [class~="flex-wrap"][class~="items-end"][class~="gap-2"] > div:not(:first-child) {
        display: none;
    }

    .loan-operational-filter:not(.loan-mobile-filter-form) [class~="flex-wrap"][class~="items-end"][class~="gap-2"] > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .loan-operational-filter:not(.loan-mobile-filter-form) [class~="flex-wrap"][class~="items-end"][class~="gap-2"] > div:first-child input {
        width: 100%;
    }
}

/* Desktop inline filters — match Alpine loanFilterSheet isDesktop (1024px). */
@media (min-width: 1024px) {
    .loan-mobile-filter-form,
    .loan-mobile-filter-form__toolbar,
    .loan-mobile-filter-form__details,
    .loan-mobile-filter-form__panel,
    .loan-mobile-filter-form__panel-fields,
    .loan-mobile-filter-form__panel-actions {
        overflow: visible;
    }

    /* Single horizontal filter row — shared across all operational registers */
    .loan-mobile-filter-form__toolbar {
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-end;
        gap: 0.5rem;
        width: 100%;
        min-width: 0;
    }

    .loan-mobile-filter-form__search {
        flex: 1.35 1 7rem;
        min-width: 0;
        max-width: none;
    }

    .loan-mobile-filter-form__search label {
        position: static;
        width: auto;
        height: auto;
        margin: 0 0 0.25rem;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    .loan-mobile-filter-form__details {
        display: flex;
        flex: 1 1 auto;
        flex-flow: row nowrap;
        align-items: flex-end;
        gap: 0.5rem;
        min-width: 0;
        position: static;
    }

    .loan-mobile-filter-form__sheet-home {
        display: contents;
    }

    .loan-mobile-filter-form__toggle,
    .loan-mobile-filter-form__backdrop,
    .loan-mobile-filter-form__panel-head,
    .loan-filter-sheet-modal__header,
    .loan-filter-sheet-modal__close,
    .loan-filter-sheet-modal__apply {
        display: none !important;
    }

    .loan-mobile-filter-form__panel,
    .loan-mobile-filter-form__panel.loan-filter-sheet-modal,
    body > .loan-mobile-filter-form__panel.loan-filter-sheet-modal {
        display: flex !important;
        flex: 1 1 auto;
        flex-flow: row nowrap;
        align-items: flex-end;
        gap: 0.5rem;
        min-width: 0;
        max-width: 100%;
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        z-index: auto !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .loan-filter-sheet-modal__body,
    .loan-filter-sheet-modal__footer {
        display: contents;
        flex: none;
        overflow: visible !important;
        padding: 0 !important;
        min-height: 0;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .loan-mobile-filter-form__panel-fields {
        display: flex !important;
        flex: 1 1 auto;
        flex-flow: row nowrap;
        align-items: flex-end;
        gap: 0.5rem;
        min-width: 0;
        grid-template-columns: unset;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: thin;
    }

    .loan-mobile-filter-form__panel-fields > div {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .loan-mobile-filter-form__panel-fields > div:has(input[type="number"]) {
        flex: 0.7 1 0;
        min-width: 0;
    }

    .loan-mobile-filter-form__panel-fields label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .loan-mobile-filter-form__panel-fields select,
    .loan-mobile-filter-form__panel-fields input:not([type="hidden"]) {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .loan-mobile-filter-form__panel-fields input[type="date"] {
        padding-left: 0.375rem;
        padding-right: 0.375rem;
    }

    .loan-mobile-filter-form__panel-fields--grid {
        display: flex !important;
        flex-flow: row nowrap;
        flex: 1 1 auto;
        gap: 0.5rem;
        width: auto;
    }

    .loan-mobile-filter-form__panel-actions {
        display: flex !important;
        flex: 0 0 auto;
        flex-flow: row nowrap;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0;
        margin-left: 0;
        padding-top: 0;
        border-top: 0;
        white-space: nowrap;
        min-width: auto;
        position: relative;
        z-index: 5;
    }

    /* Desktop: actions live outside the scrolling filter panel (sibling in toolbar). */
    .loan-mobile-filter-form__toolbar-actions {
        display: flex;
        flex: 0 0 auto;
        flex-flow: row nowrap;
        align-items: center;
        gap: 0.5rem;
        position: relative;
        z-index: 10;
        pointer-events: auto;
        white-space: nowrap;
    }

    .loan-mobile-filter-form__panel-actions {
        display: none !important;
    }

    .loan-mobile-filter-form__panel-actions > .ml-auto {
        margin-left: 0 !important;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    /* list-search toolbar ? match operational filter row */
    .loan-index-toolbar-form .loan-index-toolbar {
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-end;
        gap: 0.5rem;
        width: 100%;
    }

    .loan-index-toolbar-form .loan-index-toolbar > div:first-child {
        flex: 1 1 11rem;
        min-width: 9rem;
        max-width: 16rem;
    }

    .loan-index-toolbar-form .loan-index-toolbar > * {
        flex: 0 0 auto;
    }

    /* Workspace sticky filter bar */
    #loan-workspace-filters > [class~="flex"] {
        flex-flow: row nowrap;
        align-items: flex-end;
    }

    #loan-workspace-filters [class~="min-w-[7rem]"] {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 480px) {
    #loan-workspace-content > div {
        padding-left: 0.375rem;
        padding-right: 0.375rem;
    }

    .ws-tabs--primary .ws-tab {
        padding: 0.25rem 0.4375rem;
        font-size: 0.625rem;
    }

    .loan-page-title {
        font-size: 1rem;
    }
}

.turbo-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #0f8f55, #2563eb);
    opacity: 0;
    pointer-events: none;
    transition: width 0.15s ease-out, opacity 0.15s ease-out;
}

.turbo-progress.turbo-progress--visible {
    opacity: 1;
}

.loan-workspace-inner__loading {
    @apply min-h-[16rem] px-1 py-2;
}

/* Register-shaped skeleton shown while a workspace tab's frame is fetching. */
.workspace-skeleton {
    @apply w-full space-y-3;
}

.workspace-skeleton__bar {
    @apply rounded-lg bg-slate-200/70;
    animation: workspace-skeleton-pulse 1.3s ease-in-out infinite;
}

.workspace-skeleton__bar--toolbar {
    @apply h-10 w-2/3;
}

.workspace-skeleton__bar--kpi {
    @apply h-16 w-full;
}

.workspace-skeleton__bar--row {
    @apply h-9 w-full;
}

.workspace-skeleton__bar:nth-child(2) { animation-delay: 0.08s; }
.workspace-skeleton__bar:nth-child(3) { animation-delay: 0.16s; }
.workspace-skeleton__bar:nth-child(4) { animation-delay: 0.24s; }
.workspace-skeleton__bar:nth-child(5) { animation-delay: 0.32s; }
.workspace-skeleton__bar:nth-child(6) { animation-delay: 0.4s; }
.workspace-skeleton__bar:nth-child(7) { animation-delay: 0.48s; }

@keyframes workspace-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .workspace-skeleton__bar {
        animation: none;
    }
}

.loan-workspace-embedded > :first-child:not([class*='mb-']) {
    @apply mb-0;
}

turbo-frame[id="loan-workspace-content"] {
    position: relative;
}

/* Workspace frames stay fully readable while Turbo fetches ? top progress bar only. */
turbo-frame[id="loan-workspace-content"][busy] > .elis-workspace-inner,
turbo-frame[id="loan-workspace-inner"][busy] > * {
    opacity: 1;
    pointer-events: auto;
}

turbo-frame[id="loan-workspace-content"][busy]::before,
turbo-frame[id="loan-workspace-inner"][busy]::before {
    display: none;
}

/*
 * Loan form modal ? always light controls (readable in OS dark mode).
 */
#loan-modal-overlay {
    color-scheme: light;
    color: rgb(30 41 59);
}

#loan-modal-overlay[hidden] {
    display: none !important;
    pointer-events: none !important;
}

#loan-modal-overlay input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']):not([type='button']):not([type='submit']):not([type='reset']):not([type='image']):not([type='range']):not([type='color']),
#loan-modal-overlay select,
#loan-modal-overlay textarea {
    background-color: rgb(255 255 255) !important;
    border-color: rgb(203 213 225) !important;
    color: rgb(51 65 85) !important;
}

#loan-modal-overlay input::placeholder,
#loan-modal-overlay textarea::placeholder {
    color: rgb(148 163 184) !important;
}

#loan-modal-overlay select option {
    background-color: rgb(255 255 255);
    color: rgb(51 65 85);
}

/*
 * Light-mode scoping for 360 / finance views (plain CSS ? keep outside @layer so
 * Tailwind does not rewrite selectors like dd.font-semibold).
 */
.loan-client-360,
.loan-loan-360,
.loan-app-360,
.loan-finance-release {
    color-scheme: light;
    color: rgb(30 41 59);
}

.loan-client-360 :is([class~="font-medium"], dd, dt + dd):not([class*='text-']) {
    color: rgb(15 23 42);
}

.loan-loan-360 :is(td, dd):not([class*='text-']) {
    color: rgb(51 65 85);
}

.loan-loan-360 :is([class~="font-medium"], [class~="font-semibold"]):not([class*='text-']) {
    color: rgb(15 23 42);
}

.loan-app-360 :is([class~="font-medium"], [class~="font-semibold"], dd):not([class*='text-slate-']):not([class*='text-amber-']):not([class*='text-red-']):not([class*='text-emerald-']) {
    color: rgb(15 23 42);
}

.loan-finance-release :is(td, dd):not([class*='text-']) {
    color: rgb(30 41 59);
}

/* MFI-PERF-CSS-02 — AI panel pre-hydration safety (Alpine owns open state) */
#loan-ai-assistant-host .loan-ai-assistant-panel {
    display: none !important;
}
#loan-ai-assistant-host[data-ai-open="1"] .loan-ai-assistant-panel {
    display: flex !important;
}

/* Shell workspace stacking context (kept out of deferred modals CSS) */
#loan-workspace {
    position: relative;
    isolation: isolate;
}

@tailwind utilities;

/* MOBILE-UI-03 — last in bundle: disable horizontal sticky table columns on mobile */
@media (max-width: 1023px) {
    table :is(th, td) {
        position: static !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        box-shadow: none !important;
    }

    table thead:is(.sticky, [class*='sticky']) {
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        right: auto !important;
        z-index: 2 !important;
    }

    :is(
        .dash-table-scroll,
        .dash-list-panel__scroll--full,
        .mobile-table-scroll--viewport,
        .mobile-table-scroll,
        .overflow-x-auto,
        .sa-table-wrap,
        .dg-table-wrap
    ) > table > thead > tr > th,
    .dg-card table thead th,
    #loan-app-shell .dg-card table thead th,
    #superadmin-app-shell .sa-table thead th {
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        right: auto !important;
        z-index: 2 !important;
        box-shadow: 0 1px 0 0 rgb(226 232 240) !important;
    }
}