/* Appearance only. Existing component dimensions, order and breakpoints stay in app.css. */
:root {
    color-scheme: light;
    --color-brand-50: #effcfd;
    --color-brand-100: #d8f7f9;
    --color-brand-200: #b6eef2;
    --color-brand-300: #83e0e7;
    --color-brand-400: #4cc6d3;
    --color-brand-500: #2eabb9;
    --color-brand-600: #298b9a;
    --color-brand-700: #286f7b;
    --color-brand-800: #285c65;
    --color-brand-900: #264e56;
    --ui-canvas: #f2f7f9;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f5f9fb;
    --ui-surface-muted: #ecf3f6;
    --ui-surface-raised: #e0ebf0;
    --ui-glass: rgba(255, 255, 255, .88);
    --ui-chrome: rgba(248, 253, 254, .88);
    --ui-border: #dce9ee;
    --ui-border-soft: #e8f0f3;
    --ui-border-strong: #bfd3dc;
    --ui-ink: #233b48;
    --ui-ink-strong: #193341;
    --ui-secondary: #506777;
    --ui-muted: #5d7382;
    --ui-caption: #5d7382;
    --ui-primary: #4cc6d3;
    --ui-primary-end: #72d1dc;
    --ui-primary-hover: #43b5c3;
    --ui-on-primary: #123640;
    --ui-primary-text: #286f7b;
    --ui-focus: #298b9a;
    --ui-focus-soft: rgba(76, 198, 211, .18);
    --ui-card-shadow: 0 4px 18px rgba(43, 91, 113, .035), 0 16px 44px -30px rgba(43, 91, 113, .2), inset 0 1px 0 rgba(255, 255, 255, .95);
    --ui-chrome-shadow: 0 5px 24px rgba(43, 91, 113, .035), inset 0 1px 0 rgba(255, 255, 255, .95);
    --ui-green-bg: #edf8f2;
    --ui-green-border: #c4e5d3;
    --ui-green-text: #24674c;
    --ui-orange-bg: #fff4e9;
    --ui-orange-border: #f3d8ba;
    --ui-orange-text: #93561e;
    --ui-amber-bg: #fdf7e9;
    --ui-amber-border: #ecdfb4;
    --ui-amber-text: #886222;
    --ui-rose-bg: #fcf0f3;
    --ui-rose-border: #edcbd5;
    --ui-rose-text: #ac395a;
    --ui-violet-bg: #edf6fa;
    --ui-violet-text: #316b94;
    --ui-sky-bg: #edf6fc;
    --ui-sky-text: #316b94;
    --ui-dark-surface: #29424f;
    --ui-viewer-canvas: #e7eff3;
    --ui-tooltip-bg: #29424f;
    --ui-tooltip-text: #ffffff;
    --ui-chart-brand: #4cc6d3;
    --ui-chart-line: #2eabb9;
    --ui-chart-fill: rgba(76, 198, 211, .15);
    --ui-chart-grid: rgba(100, 131, 148, .11);
    --ui-scrollbar: #b6cfd8;
}

html[data-ui-theme="dark"] {
    color-scheme: dark;
    --color-brand-50: #17343d;
    --color-brand-100: #1e4550;
    --color-brand-200: #2a5e6b;
    --color-brand-300: #6bcfdb;
    --color-brand-400: #4cc6d3;
    --color-brand-500: #71d2dd;
    --color-brand-600: #8cdde5;
    --color-brand-700: #9ae3eb;
    --color-brand-800: #b8edf2;
    --color-brand-900: #d8f7f9;
    --ui-canvas: #121e26;
    --ui-surface: #1b2b35;
    --ui-surface-soft: #20323e;
    --ui-surface-muted: #273c48;
    --ui-surface-raised: #334c5b;
    --ui-glass: rgba(27, 43, 53, .93);
    --ui-chrome: rgba(23, 39, 50, .93);
    --ui-border: #334d5c;
    --ui-border-soft: #2b4351;
    --ui-border-strong: #4b687a;
    --ui-ink: #deedf3;
    --ui-ink-strong: #eff9fc;
    --ui-secondary: #bed2de;
    --ui-muted: #aabfcd;
    --ui-caption: #a0b8c7;
    --ui-primary: #4cc6d3;
    --ui-primary-end: #78d9e3;
    --ui-primary-hover: #70d5df;
    --ui-on-primary: #123640;
    --ui-primary-text: #9ae3eb;
    --ui-focus: #83e0e7;
    --ui-focus-soft: rgba(76, 198, 211, .2);
    --ui-card-shadow: 0 4px 20px rgba(0, 0, 0, .08), 0 16px 44px -30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .035);
    --ui-chrome-shadow: 0 6px 28px rgba(0, 0, 0, .08), inset 0 1px 0 rgba(255, 255, 255, .04);
    --ui-green-bg: #203a32;
    --ui-green-border: #355b4c;
    --ui-green-text: #9edcb8;
    --ui-orange-bg: #3b2f28;
    --ui-orange-border: #614936;
    --ui-orange-text: #f1bf90;
    --ui-amber-bg: #383224;
    --ui-amber-border: #5e5130;
    --ui-amber-text: #e8ce8e;
    --ui-rose-bg: #3d2935;
    --ui-rose-border: #684051;
    --ui-rose-text: #f1acbf;
    --ui-violet-bg: #233b4a;
    --ui-violet-text: #9ed4e8;
    --ui-sky-bg: #233748;
    --ui-sky-text: #a0cde9;
    --ui-dark-surface: #304c5d;
    --ui-viewer-canvas: #14232d;
    --ui-tooltip-bg: #deedf3;
    --ui-tooltip-text: #233b48;
    --ui-chart-brand: #4cc6d3;
    --ui-chart-line: #83e0e7;
    --ui-chart-fill: rgba(76, 198, 211, .13);
    --ui-chart-grid: rgba(170, 191, 205, .13);
    --ui-scrollbar: #456273;
}

body {
    color: var(--ui-ink);
    background-color: var(--ui-canvas) !important;
    background-image: radial-gradient(ellipse at 0% 0%, rgba(76, 198, 211, .13), transparent 42%), radial-gradient(ellipse at 100% 10%, rgba(99, 176, 213, .07), transparent 42%);
}
html[data-ui-theme="dark"] body {
    background-image: radial-gradient(ellipse at 0% 0%, rgba(76, 198, 211, .1), transparent 42%), radial-gradient(ellipse at 100% 10%, rgba(60, 141, 181, .07), transparent 42%);
}
::selection { background: var(--color-brand-200); color: var(--ui-ink-strong); }

/* Neutral utilities also cover nested panels, pagination and Livewire-rendered content. */
.bg-white { background-color: var(--ui-surface); }
.bg-white\/70, .bg-white\/85 { background-color: var(--ui-glass); }
.bg-slate-50 { background-color: var(--ui-surface-soft); }
.bg-slate-100 { background-color: var(--ui-surface-muted); }
.bg-slate-200 { background-color: var(--ui-surface-raised); }
.bg-slate-300 { background-color: var(--ui-border-strong); }
.bg-slate-900, .bg-slate-950 { background-color: var(--ui-dark-surface); }
.text-slate-950, .text-slate-900 { color: var(--ui-ink-strong); }
.text-slate-800 { color: var(--ui-ink); }
.text-slate-700, .text-slate-600 { color: var(--ui-secondary); }
.text-slate-500 { color: var(--ui-muted); }
.text-slate-400 { color: var(--ui-caption); }
.text-slate-300 { color: #b8cedb; }
.text-slate-200 { color: #dae8f0; }
.border-slate-100 { border-color: var(--ui-border-soft); }
.border-slate-200, .border-slate-200\/80 { border-color: var(--ui-border); }
.border-slate-300 { border-color: var(--ui-border-strong); }
.divide-slate-100 > :not(:last-child) { border-color: var(--ui-border-soft); }
.before\:bg-slate-200::before { background-color: var(--ui-border); }
.ring-white { --tw-ring-color: var(--ui-surface); }
.hover\:bg-slate-50:hover, .hover\:bg-slate-50\/70:hover { background-color: var(--ui-surface-soft); }
.hover\:bg-slate-100:hover { background-color: var(--ui-surface-muted); }

.card {
    background-color: var(--ui-glass);
    border-color: var(--ui-border);
    border-radius: 1.375rem;
    box-shadow: var(--ui-card-shadow);
}
[data-sidebar] {
    background: linear-gradient(165deg, rgba(235, 249, 252, .45), transparent 55%), var(--ui-chrome);
    border-color: var(--ui-border);
    box-shadow: -8px 0 32px rgba(43, 91, 113, .035), inset 1px 0 0 rgba(255, 255, 255, .5);
}
html[data-ui-theme="dark"] [data-sidebar] {
    background: linear-gradient(165deg, rgba(76, 198, 211, .06), transparent 55%), var(--ui-chrome);
    box-shadow: -8px 0 32px rgba(0, 0, 0, .06), inset 1px 0 0 rgba(255, 255, 255, .025);
}
main > header, body > div > footer, main > footer {
    background-color: var(--ui-chrome);
    border-color: var(--ui-border);
    box-shadow: var(--ui-chrome-shadow);
}
.nav-link { color: var(--ui-muted); }
.nav-link:hover { background-color: var(--ui-surface-muted); color: var(--ui-ink-strong); }
.nav-link-active, .nav-link-active:hover {
    background: linear-gradient(110deg, var(--ui-primary), var(--ui-primary-end));
    color: var(--ui-on-primary);
    --tw-ring-color: transparent;
    box-shadow: 0 5px 14px rgba(40, 124, 141, .17), inset 0 1px 0 rgba(255, 255, 255, .2);
}
[data-sidebar] .nav-link > span:first-child { color: var(--ui-primary-text); }
[data-sidebar] .nav-link-active > span:first-child { color: inherit; }
.bg-brand-400.text-slate-950 { color: var(--ui-on-primary); background: linear-gradient(110deg, var(--ui-primary), var(--ui-primary-end)); }
.form-input > .bg-brand-400 { background-color: #4cc6d3; }
main > footer span[style], body > div > footer span[style] { color: var(--ui-primary-text) !important; }
[data-sidebar] nav, .overflow-x-auto, .document-viewer-content { scrollbar-color: var(--ui-scrollbar) transparent; }

.form-label { color: var(--ui-secondary); }
.form-input {
    background-color: var(--ui-surface);
    color: var(--ui-ink);
    border-color: var(--ui-border);
    box-shadow: inset 0 1px 2px rgba(43, 91, 113, .025);
}
.form-input::placeholder { color: var(--ui-caption); opacity: 1; }
.form-input:hover:not(:disabled) { border-color: var(--ui-border-strong); }
.form-input:focus {
    border-color: var(--ui-focus);
    --tw-ring-color: var(--ui-focus-soft);
    box-shadow: 0 0 0 4px var(--ui-focus-soft);
}
.form-input:disabled, .form-input[readonly] { background-color: var(--ui-surface-soft); }
.form-input[aria-invalid="true"], .form-input:user-invalid { border-color: var(--ui-rose-text); }
.form-error { color: var(--ui-rose-text); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-primary); }
input.accent-rose-500 { accent-color: #cc5576; }
input::file-selector-button { color: var(--ui-primary-text); background-color: var(--ui-surface-soft); }
select option, select optgroup { color: var(--ui-ink); background-color: var(--ui-surface); }
input:-webkit-autofill {
    -webkit-text-fill-color: var(--ui-ink);
    box-shadow: inset 0 0 0 1000px var(--ui-surface);
    caret-color: var(--ui-ink);
}
.btn-primary {
    color: var(--ui-on-primary);
    background: linear-gradient(110deg, var(--ui-primary), var(--ui-primary-end));
    box-shadow: 0 4px 12px rgba(40, 124, 141, .16), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-primary:hover:not(:disabled) {
    color: var(--ui-on-primary);
    background: linear-gradient(110deg, var(--ui-primary-hover), var(--ui-primary));
}
.btn-primary:focus { --tw-ring-color: var(--ui-focus-soft); }
.btn-secondary {
    color: var(--ui-secondary);
    background-color: var(--ui-surface);
    border-color: var(--ui-border);
    box-shadow: 0 2px 3px rgba(43, 91, 113, .025), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.btn-secondary:hover:not(:disabled) { color: var(--ui-primary-text); background-color: var(--color-brand-50); border-color: var(--color-brand-200); }
a:focus-visible, button:focus-visible, summary:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 3px;
}
thead { color: var(--ui-muted); }
tbody tr { transition: background-color 140ms ease; }
tr[data-view-state="unseen"] { background-color: var(--color-brand-50); }
tr[data-view-state="unseen"]:hover { background-color: var(--color-brand-100); }
[data-view-state="unseen"] td:first-child .bg-brand-100 { box-shadow: inset 0 0 0 1px var(--color-brand-200); }

/* Keep financial and workflow colors meaningful in both modes. */
.bg-emerald-50, .bg-emerald-50\/60, .hover\:bg-emerald-50:hover { background-color: var(--ui-green-bg); }
.border-emerald-100, .border-emerald-200 { border-color: var(--ui-green-border); }
.text-emerald-600, .text-emerald-700, .text-emerald-800 { color: var(--ui-green-text); }
.bg-orange-50 { background-color: var(--ui-orange-bg); }
.border-orange-200 { border-color: var(--ui-orange-border); }
.text-orange-700, .text-orange-800, .text-orange-900 { color: var(--ui-orange-text); }
.bg-amber-50 { background-color: var(--ui-amber-bg); }
.border-amber-200, .border-amber-300 { border-color: var(--ui-amber-border); }
.text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900 { color: var(--ui-amber-text); }
.bg-rose-50, .bg-rose-100, .hover\:bg-rose-50:hover { background-color: var(--ui-rose-bg); }
.border-rose-100, .border-rose-200, .border-rose-300 { border-color: var(--ui-rose-border); }
.text-rose-600, .text-rose-700, .text-rose-800 { color: var(--ui-rose-text); }
.bg-violet-50 { background-color: var(--ui-violet-bg); }
.text-violet-600, .text-violet-700 { color: var(--ui-violet-text); }
.bg-sky-50, .bg-sky-100 { background-color: var(--ui-sky-bg); }
.text-sky-700 { color: var(--ui-sky-text); }
.bg-rose-500, .bg-rose-600 { background-color: #c64768; }
.bg-emerald-500 { background-color: #2b9069; }
.btn-secondary.text-rose-600 { color: var(--ui-rose-text); }
.btn-secondary.text-rose-600:hover { background-color: var(--ui-rose-bg); border-color: var(--ui-rose-border); }
.bg-slate-900.text-white, .bg-slate-950.text-white, .bg-rose-500.text-white, .bg-rose-600.text-white { color: #ffffff; }

.copy-value { transition: background-color 140ms ease, outline-color 140ms ease; }
.copy-value:hover, .copy-value:focus-visible { background-color: var(--color-brand-100); outline-color: var(--color-brand-300); }
.copy-value-status { color: var(--ui-caption); }
.copy-value-done .copy-value-status { color: var(--ui-green-text); }
.loan-amount-copy .copy-value:hover, .loan-amount-copy .copy-value:focus-visible { background-color: var(--ui-surface); outline-color: currentColor; }
.case-copy-feedback { color: var(--ui-tooltip-text); background-color: var(--ui-tooltip-bg); box-shadow: var(--ui-card-shadow); }
.major-changes-summary { color: var(--ui-secondary); }
details[open] > .major-changes-summary { color: var(--ui-primary-text); }
.document-viewer { color: var(--ui-ink); background-color: var(--ui-surface); border-color: var(--ui-border-strong); box-shadow: 0 24px 90px rgba(16, 36, 48, .3); }
.document-viewer::backdrop { background-color: rgba(16, 36, 48, .72); backdrop-filter: blur(5px); }
.document-viewer-toolbar, .document-viewer-navigation { background-color: var(--ui-surface); border-color: var(--ui-border); }
.document-viewer-content { background-color: var(--ui-viewer-canvas); }
/* Uploaded images and PDF paper retain their actual colors. */
.document-viewer-pdf { background-color: #ffffff; }

/* The only new control: outside document flow, so existing controls do not move. */
.theme-toggle {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 35;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--ui-border-strong);
    border-radius: 1rem;
    color: var(--ui-primary-text);
    background: linear-gradient(145deg, rgba(76, 198, 211, .12), transparent), var(--ui-glass);
    box-shadow: 0 6px 22px rgba(43, 91, 113, .14), inset 0 1px 0 rgba(255, 255, 255, .3);
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
    touch-action: manipulation;
}
.theme-toggle:hover { border-color: var(--ui-focus); background-color: var(--ui-surface); }
.theme-toggle[hidden], .theme-toggle [data-theme-icon="sun"] { display: none; }
html[data-ui-theme="dark"] .theme-toggle [data-theme-icon="moon"] { display: none; }
html[data-ui-theme="dark"] .theme-toggle [data-theme-icon="sun"] { display: block; }
@supports (backdrop-filter: blur(1px)) {
    [data-sidebar], main > header, .theme-toggle { backdrop-filter: blur(18px) saturate(115%); }
}
@media (max-width: 639px) {
    .theme-toggle { left: .75rem; bottom: .75rem; }
}
@media (prefers-reduced-transparency: reduce) {
    .card { background-color: var(--ui-surface); }
    [data-sidebar], main > header, main > footer, body > div > footer, .theme-toggle { background: var(--ui-surface); backdrop-filter: none; }
    .document-viewer::backdrop { backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    .theme-toggle, .copy-value, tbody tr { transition: none; }
}
@media (forced-colors: active) {
    .btn-primary, .nav-link-active, .theme-toggle { background: ButtonFace; color: ButtonText; outline: 1px solid ButtonText; }
}
@media print {
    :root, html[data-ui-theme="dark"] {
        color-scheme: light;
        --ui-canvas: #ffffff; --ui-surface: #ffffff; --ui-glass: #ffffff; --ui-chrome: #ffffff;
        --ui-surface-soft: #f5f5f5; --ui-surface-muted: #eeeeee; --ui-border: #cccccc; --ui-border-soft: #dddddd;
        --ui-ink: #222222; --ui-ink-strong: #111111; --ui-secondary: #444444; --ui-muted: #555555; --ui-caption: #555555;
        --color-brand-50: #effcfd; --color-brand-100: #d8f7f9; --color-brand-700: #286f7b; --color-brand-800: #285c65;
        --ui-green-bg: #edf8f2; --ui-green-text: #24674c; --ui-orange-bg: #fff4e9; --ui-orange-text: #93561e;
        --ui-amber-bg: #fdf7e9; --ui-amber-text: #886222; --ui-rose-bg: #fcf0f3; --ui-rose-text: #ac395a;
        --ui-violet-bg: #edf6fa; --ui-violet-text: #316b94; --ui-sky-bg: #edf6fc; --ui-sky-text: #316b94;
    }
    body { background-image: none !important; }
    .card, [data-sidebar], main > header { box-shadow: none; backdrop-filter: none; }
    .theme-toggle { display: none !important; }
}