/* LoanWise app styles. Brand palettes + motion/shape tokens live in brand-themes.css;
   component look comes from MudBlazor themed per tenant (TenantThemeProvider). */

/* Home module tiles */
.lw-tile {
    border-radius: var(--lw-radius);
    transition: box-shadow var(--lw-duration-fast) var(--lw-ease),
                transform var(--lw-duration-fast) var(--lw-ease);
}

.lw-tile:hover {
    box-shadow: var(--lw-shadow-raised);
    transform: translateY(-2px);
}

/* ============================================================================
   Login / startup stage — the LoanWise "front door".
   Ambient brand art (drifting glows + ledger grid), self-drawing ring-mark,
   staggered card entrance. Continuous motion is gated behind
   prefers-reduced-motion: no-preference; everything degrades to a calm
   static composition.
   ============================================================================ */

.lw-login-stage {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
    background:
        radial-gradient(120% 120% at 15% 0%, var(--lw-stage-primary, var(--lw-primary)) 0%, transparent 55%),
        radial-gradient(140% 110% at 100% 100%, var(--lw-stage-dark, var(--lw-primary-dark)) 0%, transparent 60%),
        linear-gradient(160deg, #10131c 0%, #181c2a 100%);
}

/* Drifting brand glows */
.lw-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.45;
    pointer-events: none;
    will-change: transform;
}

.lw-aurora-1 {
    width: 480px;
    height: 480px;
    left: -120px;
    top: -140px;
    background: var(--lw-stage-primary, var(--lw-primary));
}

.lw-aurora-2 {
    width: 420px;
    height: 420px;
    right: -140px;
    bottom: -120px;
    background: var(--lw-stage-accent, var(--lw-accent));
    opacity: 0.28;
}

.lw-aurora-3 {
    width: 300px;
    height: 300px;
    right: 18%;
    top: -160px;
    background: #ffffff;
    opacity: 0.07;
}

/* Faint ledger grid */
.lw-stage-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(75% 75% at 50% 45%, rgba(0, 0, 0, 0.8), transparent 100%);
}

/* The card */
.lw-login-card {
    position: relative;
    width: 100%;
    max-width: 430px;
    padding: 48px 44px 28px;
    text-align: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow:
        0 24px 70px rgba(5, 10, 30, 0.55),
        0 2px 8px rgba(5, 10, 30, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Ring-mark */
.lw-mark {
    width: 108px;
    height: 108px;
    margin-bottom: 10px;
    background: linear-gradient(160deg, var(--lw-stage-primary, var(--lw-primary)), var(--lw-stage-dark, var(--lw-primary-dark)));
    border-radius: 50%;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--lw-stage-primary, var(--lw-primary)) 45%, transparent);
}

.lw-mark-text {
    font-family: inherit;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1px;
    fill: #ffffff;
}

.lw-mark-ring {
    stroke-dasharray: 327;
    stroke-dashoffset: 0;
}

/* Typography */
.lw-login-title {
    margin: 6px 0 0;
    font-size: 1.65rem;
    font-weight: 700;
    color: #20242e;
    letter-spacing: 0.2px;
}

.lw-login-divider {
    width: 56px;
    height: 3px;
    margin: 14px auto;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lw-stage-primary, var(--lw-primary)), var(--lw-stage-accent, var(--lw-accent)));
}

.lw-login-product {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--lw-stage-primary, var(--lw-primary));
    margin-bottom: 30px;
}

.lw-login-product span {
    font-weight: 400;
    color: #6f6b6e;
}

/* SSO button */
.lw-sso-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    border-radius: 10px;
    background: linear-gradient(170deg, var(--lw-stage-primary, var(--lw-primary)), var(--lw-stage-dark, var(--lw-primary-dark)));
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--lw-stage-primary, var(--lw-primary)) 40%, transparent);
    transition: transform var(--lw-duration-fast) var(--lw-ease),
                box-shadow var(--lw-duration-fast) var(--lw-ease),
                filter var(--lw-duration-fast) var(--lw-ease);
}

.lw-sso-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--lw-stage-primary, var(--lw-primary)) 50%, transparent);
}

.lw-sso-btn:active {
    transform: scale(0.985);
}

.lw-sso-btn:focus-visible {
    outline: 2px solid var(--lw-stage-accent, var(--lw-accent));
    outline-offset: 3px;
}

/* Sheen sweep on hover */
.lw-sso-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-20deg);
    transition: left 480ms var(--lw-ease);
}

.lw-sso-btn:hover::after {
    left: 130%;
}

.lw-login-help {
    margin: 22px 0 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #6f6b6e;
}

.lw-login-foot {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid #ececef;
    font-size: 0.75rem;
    letter-spacing: 0.4px;
    color: #9b979a;
}

.lw-login-foot strong {
    color: var(--lw-stage-primary, var(--lw-primary));
    font-weight: 700;
}

/* ---- Motion (only when the user allows it) ---- */
@media (prefers-reduced-motion: no-preference) {
    .lw-aurora-1 {
        animation: lw-drift-a 26s ease-in-out infinite alternate;
    }

    .lw-aurora-2 {
        animation: lw-drift-b 32s ease-in-out infinite alternate;
    }

    .lw-aurora-3 {
        animation: lw-drift-c 22s ease-in-out infinite alternate;
    }

    .lw-mark-ring {
        stroke-dashoffset: 327;
        animation: lw-ring-draw 1.2s var(--lw-ease) 200ms forwards;
    }

    .lw-mark-orbit {
        transform-origin: 60px 60px;
        animation: lw-orbit-spin 36s linear infinite;
    }

    .lw-login-card {
        animation: lw-card-enter 480ms var(--lw-ease) both;
    }

    .lw-login-title,
    .lw-login-divider,
    .lw-login-product,
    .lw-sso-btn,
    .lw-login-help,
    .lw-login-foot {
        animation: lw-rise-in 420ms var(--lw-ease) both;
    }

    .lw-login-title { animation-delay: 120ms; }
    .lw-login-divider { animation-delay: 180ms; }
    .lw-login-product { animation-delay: 220ms; }
    .lw-sso-btn { animation-delay: 300ms; }
    .lw-login-help { animation-delay: 380ms; }
    .lw-login-foot { animation-delay: 440ms; }
}

@keyframes lw-drift-a {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(90px, 60px) scale(1.12); }
}

@keyframes lw-drift-b {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-70px, -50px) scale(1.08); }
}

@keyframes lw-drift-c {
    from { transform: translate(0, 0); }
    to { transform: translate(-50px, 70px); }
}

@keyframes lw-ring-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes lw-orbit-spin {
    to { transform: rotate(360deg); }
}

@keyframes lw-card-enter {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes lw-rise-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Buttons: subtle press feedback in the gap before async loading indicators take over */
.mud-button-root:active:not(:disabled) {
    transform: scale(0.98);
}

.mud-button-root {
    transition: transform var(--lw-duration-fast) var(--lw-ease),
                box-shadow var(--lw-duration-fast) var(--lw-ease),
                background-color var(--lw-duration-fast) var(--lw-ease);
}

/* Keyboard focus ring in the tenant accent (ui-guidelines.md) */
.mud-button-root:focus-visible,
.mud-input-slot:focus-visible {
    outline: 2px solid var(--lw-accent);
    outline-offset: 2px;
}

/* Page content enter: light fade + rise (CSS only; disabled via prefers-reduced-motion tokens) */
.mud-main-content > * {
    animation: lw-enter var(--lw-duration-base) var(--lw-ease);
}

@keyframes lw-enter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================================
   Work-surface backdrop. A subtle, STATIC brand-tinted wash behind the content
   (two faint corner glows in the tenant's --lw-primary / --lw-accent) so the
   app reads less flat without distracting from the work. Fixed so it doesn't
   scroll; white content cards sit cleanly on top. Per ui-guidelines the work
   surface stays calm — this is a tint, not the login's animated ambient art.
   Tints automatically per tenant via the .brand-{id} custom properties.
   ============================================================================ */
.mud-main-content {
    background-color: var(--mud-palette-background-gray);
    background-image:
        radial-gradient(56% 46% at 100% 0%, color-mix(in srgb, var(--lw-primary) 7%, transparent) 0%, transparent 60%),
        radial-gradient(46% 40% at 0% 100%, color-mix(in srgb, var(--lw-accent) 7%, transparent) 0%, transparent 62%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ============================================================================
   Shared UI foundation (UI overhaul, 2026-06-18). Tabular money, KPI stat tiles,
   section cards, status chips, page header. Introduced by the start-page
   dashboard and rolled out screen-by-screen. Colours read MudBlazor's per-tenant
   palette variables (--mud-palette-*) so everything inherits the tenant theme;
   status-chip tints are a fixed, calm semantic set.
   ============================================================================ */

/* Tabular lining figures so money + counts align in columns and don't jitter. */
.lw-tnum {
    font-variant-numeric: tabular-nums lining-nums;
}

/* App-bar wordmark: the "LoanWise" suffix next to the tenant name reads as a quiet sub-label. */
.lw-wordmark-sub {
    opacity: .75;
    font-weight: 400;
}

/* KPI stat tile (StatTile.razor) */
.lw-stat-head {
    gap: 8px;
}

.lw-stat {
    border-radius: var(--lw-radius);
    transition: box-shadow var(--lw-duration-fast) var(--lw-ease),
                transform var(--lw-duration-fast) var(--lw-ease);
}

.lw-stat:hover {
    box-shadow: var(--lw-shadow-raised);
    transform: translateY(-2px);
}

.lw-stat-value {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

/* Page header (PageHeader.razor) */
.lw-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lw-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.lw-page-sub {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    margin: 3px 0 0;
}

/* Status chip (StatusChip.razor) — soft tint + same-family dark text */
.lw-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.lw-chip-success { background: #e1f5ee; color: #0f6e56; }
.lw-chip-warning { background: #faeeda; color: #854f0b; }
.lw-chip-danger  { background: #fcebeb; color: #a32d2d; }
.lw-chip-info    { background: #e6f1fb; color: #0c447c; }
.lw-chip-neutral { background: #f1efe8; color: #444441; }

/* Dashboard worklist rows */
.lw-worklist {
    width: 100%;
    border-collapse: collapse;
}

.lw-worklist th {
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: none;
    color: var(--mud-palette-text-secondary);
    text-align: left;
    padding: 8px 14px;
}

.lw-worklist td {
    font-size: 0.85rem;
    padding: 10px 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.lw-worklist tbody tr {
    cursor: pointer;
    transition: background-color var(--lw-duration-fast) var(--lw-ease);
}

.lw-worklist tbody tr:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* Secondary line under a worklist customer name (product · loan #). */
.lw-worklist-sub {
    font-size: 0.72rem;
}

/* Totals footer row: a quiet rule-topped summary of the full open count + owing (the table
   itself only shows a preview of the top rows). */
.lw-worklist tfoot td {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 10px 14px;
    border-top: 2px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

/* Clickable table rows: pointer affordance + hover tint + a keyboard-focus ring shown when a focusable
   control inside the row (e.g. an "Open" action button) is focused. Apply via MudTable RowClass="lw-row-click"
   (lands on the <tr>) or directly on a <tr>; pair it with a focusable in-row control for keyboard access. */
.lw-row-click {
    cursor: pointer;
    transition: background-color var(--lw-duration-fast) var(--lw-ease);
}

.lw-row-click:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.lw-row-click:focus-within {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Canonical empty-state block (EmptyState shared component). */
.lw-empty {
    min-height: 120px;
}

/* Right-aligned tabular numerals for money / count cells — replaces inline style="text-align:right" + tabular
   nums so per-tenant font scaling applies. Use Class="lw-num" on a <td>/<MudTd>/<th>. */
.lw-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Horizontal-scroll wrapper for wide read-only tables so they scroll within their own box on narrow viewports
   instead of forcing the page to scroll sideways. Wrap a wide table: <div class="lw-table-scroll">…</div>. */
.lw-table-scroll {
    overflow-x: auto;
    width: 100%;
}

/* Right-align a non-numeric cell/header (text-align only — use .lw-num for money/counts so they also get
   tabular figures). Replaces inline style="text-align:right". */
.lw-right {
    text-align: right;
}

/* Key/value label column in a 2-column MudSimpleTable: replaces the assorted inline width:NNNpx on the label
   <td>. Auto-sizes to the longest label (kept on one line) instead of a hardcoded pixel width, so it scales
   with the font. Pair with the existing mud-text-secondary on the label cell. */
.lw-kv-label {
    white-space: nowrap;
    padding-right: 24px;
}

/* Slightly smaller helper text (replaces inline font-size:.8em/.85em); em-relative so it still font-scales. */
.lw-fs-sm {
    font-size: 0.85em;
}

/* Centered narrow column for a printed/standalone report body (replaces inline max-width:900px;margin auto). */
.lw-report-narrow {
    max-width: 900px;
    margin: 24px auto;
}

/* Dashboard worklist totals row — separated by a heavier top rule + medium weight. */
.lw-worklist-total td {
    border-top: 2px solid var(--mud-palette-lines-default);
    font-weight: 600;
}

/* Constrained (left-aligned) column for a settings/admin form so fields don't stretch the full page width.
   Replaces the assorted inline max-width:680/720px on the settings-form wrapper. */
.lw-settings-form {
    max-width: 720px;
}

/* Visually-hidden label: present for screen readers but not painted. Use on an otherwise-empty action-column
   header (<MudTh><span class="lw-sr-only">Actions</span></MudTh>) so the column is announced. */
.lw-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Fenced "danger zone" on the loan action bar: destructive actions (Void / Rescind / Write-off) grouped at the
   end of the bar, set apart by a left rule + spacing so they aren't interleaved with the routine buttons. */
.lw-danger-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-left: 12px;
    margin-left: 4px;
    border-left: 2px solid var(--mud-palette-error);
}

/* Dashboard "Quick actions" button cluster: even-width wrapping buttons, left-aligned labels. */
.lw-quick-actions {
    gap: 10px;
}

.lw-quick-action {
    flex: 1 1 160px;
    justify-content: flex-start;
}

/* Quick-action chips reuse the home-tile hover lift via .lw-tile */

/* Printed documents (the LoanWise replacement for FSL XtraReports — no DevExpress/PDF library).
   Shared by ReportShell and the collection-letter page so the print chrome-stripping lives in one place:
     .lw-print-sheet — the centred document column (its max-width is set inline, since it varies per doc);
     .lw-print-hide  — screen-only chrome (toolbar/back/print buttons, warnings) hidden when printing.
   On print: drop the app bar/drawer, zero the main-content padding, and flatten the sheet's shadow so
   only the document prints. */
.lw-print-sheet {
    margin: 0 auto;
    /* Documents are paper: the report/statement/PAD/letter sheet stays LIGHT even when the app is in dark
       mode, so it reads like a printout on screen and prints correctly. Scopes MudBlazor's palette vars to
       this subtree, so the MudPaper/tables/text inside render light without affecting the dark app shell. */
    --mud-palette-surface: #ffffff;
    --mud-palette-background: #ffffff;
    --mud-palette-background-gray: #ffffff;
    --mud-palette-text-primary: #1a1a1a;
    --mud-palette-text-secondary: #55555a;
    --mud-palette-lines-default: #e0e0e0;
    --mud-palette-table-lines: #e0e0e0;
    --mud-palette-divider: #e0e0e0;
    --mud-palette-action-default-hover: rgba(0,0,0,0.04);
    color: #1a1a1a;
    background-color: #ffffff;
}

@media print {
    .mud-appbar,
    .mud-drawer,
    .lw-print-hide {
        display: none !important;
    }

    /* Force a white page for printing regardless of the app's dark theme. */
    html, body, .mud-main-content {
        background: #ffffff !important;
        background-image: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    .lw-print-sheet {
        box-shadow: none !important;
    }
}

/* Pre-Authorized Debit (PAD) agreement layout (PadAgreement.razor). Two-column parties + signature blocks,
   a numbered terms list, and signing lines — kept print-stable (no collapse) so the form prints like a form. */
.lw-pad-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.lw-pad-terms {
    margin: 0 0 24px;
    padding-left: 20px;
    font-size: 0.8rem;
    line-height: 1.45;
}

    .lw-pad-terms li {
        margin-bottom: 8px;
    }

.lw-pad-signatures {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 28px 24px;
    margin-top: 32px;
}

.lw-sig-line {
    border-bottom: 1px solid var(--mud-palette-text-primary, #000);
    height: 30px;
}

@media (max-width: 599px) {
    .lw-pad-parties {
        grid-template-columns: 1fr;
    }
}
