/*
 * Panel-wide table styling (row due-status colours + compact density).
 * Plain hand-written CSS, not Tailwind-compiled — this panel ships
 * Filament's own pre-built stylesheet rather than a custom Vite/Tailwind
 * theme, so arbitrary utility classes added from PHP would never make it
 * into the compiled bundle. Registered via FilamentAsset in
 * AdminPanelProvider. Dark mode is handled explicitly (via the `dark`
 * class Filament toggles on <html>) for the same reason.
 */
.fi-ta-record.fh-row-overdue {
    background-color: #fef2f2 !important;
}

.fi-ta-record.fh-row-due-today {
    background-color: #f0fdf4 !important;
}

.fi-ta-record.fh-row-not-due {
    background-color: #eff6ff !important;
}

.dark .fi-ta-record.fh-row-overdue {
    background-color: rgba(248, 113, 113, 0.1) !important;
}

.dark .fi-ta-record.fh-row-due-today {
    background-color: rgba(74, 222, 128, 0.1) !important;
}

.dark .fi-ta-record.fh-row-not-due {
    background-color: rgba(96, 165, 250, 0.1) !important;
}

/*
 * Compact table density, applied panel-wide so every resource table
 * (Clients, Payments, Penalties, Agents, relation-manager tables, etc.)
 * matches the Loans list's density rather than just that one page.
 * !important is needed because these override Tailwind utility classes
 * already present in Filament's compiled stylesheet, loaded before this
 * file.
 */
.fi-ta-header-cell {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.fi-ta-header-cell-label {
    font-size: 0.6875rem !important;
}

.fi-ta-text {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.fi-ta-text-item-label {
    font-size: 0.75rem !important;
}

.fi-ta-text .fi-badge {
    font-size: 0.6875rem !important;
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
}

/*
 * CHANGE 7 (Loans list): pins the client code column to the left edge via
 * position: sticky. A sticky cell needs its OWN opaque background — other
 * cells scroll underneath it, and without an explicit background their
 * content would visually bleed through. These solid colours are each due
 * -status row tint (see fh-row-* above) pre-blended onto that row's own
 * base colour (white / dark:#111827), so the pinned cell still reads as
 * "part of" a coloured row rather than a plain white/grey column running
 * down the left side regardless of due status.
 */
.fh-col-pinned {
    position: sticky !important;
    left: 0 !important;
    z-index: 1 !important;
    background-color: white !important;
}

.dark .fh-col-pinned {
    background-color: #111827 !important;
}

.fi-ta-record.fh-row-overdue .fh-col-pinned {
    background-color: #fef2f2 !important;
}

.fi-ta-record.fh-row-due-today .fh-col-pinned {
    background-color: #f0fdf4 !important;
}

.fi-ta-record.fh-row-not-due .fh-col-pinned {
    background-color: #eff6ff !important;
}

.dark .fi-ta-record.fh-row-overdue .fh-col-pinned {
    background-color: #281f21 !important;
}

.dark .fi-ta-record.fh-row-due-today .fh-col-pinned {
    background-color: #172c2f !important;
}

.dark .fi-ta-record.fh-row-not-due .fh-col-pinned {
    background-color: #19263c !important;
}

/*
 * MAJOR UI REWORK (LoanBoard): pins 编号 (leftmost) and 客户名字 (fourth
 * column) independently — they aren't adjacent, so each needs its own
 * sticky offset rather than reusing fh-col-pinned's single left:0. The
 * 7rem offset for the second pin is a fixed estimate of 编号's rendered
 * width (bold/large text + compact padding) — widen it here if a
 * particularly long invoice code ever causes visible overlap. LoanBoard
 * has no row-level background tinting (only red text for overdue), so
 * these just need a flat background matching the table's own base
 * colour, not per-row-status variants like fh-col-pinned above.
 */
.fh-col-pin-1,
.fh-col-pin-2 {
    position: sticky !important;
    z-index: 1 !important;
    background-color: white !important;
}

.fh-col-pin-1 {
    left: 0 !important;
}

.fh-col-pin-2 {
    left: 7rem !important;
}

.dark .fh-col-pin-1,
.dark .fh-col-pin-2 {
    background-color: #111827 !important;
}

/*
 * MAJOR UI REWORK (LoanBoard): permanent, static column-group background
 * colours (not data-driven). Refinement round CHANGE 4 strengthened these
 * from the original pastel wash — clearly distinguishable blocks, still
 * dark-text-on-light-background for legibility.
 */
.fh-col-group-orange {
    background-color: #ff9900 !important;
}

.fh-col-group-green {
    background-color: #00ff00 !important;
}

.fh-col-group-beige {
    background-color: #fff2cc !important;
}

.dark .fh-col-group-orange {
    background-color: #ff9900 !important;
}

.dark .fh-col-group-green {
    background-color: #00ff00 !important;
}

.dark .fh-col-group-beige {
    background-color: #fff2cc !important;
}

/*
 * Refinement round CHANGE 5: the 合计 (totals) row inherits the same
 * column-group colours (applied to each Summarizer's own wrapper div via
 * ->extraAttributes() in LoanBoard — see computeLoanTotals/columns()),
 * plus its own stronger top border and bold text so it still reads as a
 * distinct summary rather than just another coloured row.
 */
.fi-ta-summary-row {
    border-top: 2px solid rgb(107 114 128) !important;
}

.dark .fi-ta-summary-row {
    border-top-color: rgb(156 163 175) !important;
}

.fi-ta-summary-row .fi-ta-text-summary span {
    font-weight: 600 !important;
}

/*
 * Refinement round CHANGE 1: scoped to just the LoanBoard page (via
 * getExtraBodyAttributes() stamping fh-loan-board on <body>) — shrinks
 * font size and row/cell padding further than the panel-wide compact
 * density above, and trims the page's own outer padding now that the
 * title/breadcrumb header is gone entirely (see LoanBoard::getHeading()).
 * Not applied panel-wide so Clients/Payments/Agents/etc. keep their
 * current (already-compact) density.
 *
 * ============================================================
 * TO FINE-TUNE THE LOAN BOARD'S FONT SIZE OR CELL PADDING:
 * edit ONLY the eight custom properties below. Every rule in this
 * file that touches the Loan Board's row/header text or cell padding
 * reads from these — nothing else needs to change.
 *   --fh-board-cell-padding-x   left/right space inside every cell
 *   --fh-board-cell-padding-y   top/bottom space inside every cell
 *   --fh-board-row-font-size    row text (money, dates, etc.)
 *   --fh-board-header-zh-font-size   header's Chinese line
 *   --fh-board-header-en-font-size   header's English line
 *   --fh-board-row-line-height  row text line spacing
 *   --fh-board-header-en-wrap-width  width the English header line
 *                                    wraps onto a new line at
 *   --fh-board-page-side-padding     space between the browser edge and
 *                                     the table on the left/right
 *
 * Modal round CHANGE 3 added two more, same idea — see the "Loan Board
 * modal sizing" block further down this file for where they're used:
 *   --fh-modal-max-width   how wide every Loan Board modal (Add New
 *                           wizard, View-Edit, Payment Record) can grow
 *   --fh-modal-max-height  how tall before the modal's OWN body starts
 *                           scrolling internally (the header stays put) —
 *                           keep this noticeably less than 100dvh so
 *                           there's always clear space above/below
 * ============================================================
 */
body.fh-loan-board {
    --fh-board-cell-padding-x: 0.25rem;
    --fh-board-cell-padding-y: 1rem;
    --fh-board-row-font-size: 0.63rem;
    --fh-modal-max-width: 70rem;
    --fh-modal-max-height: calc(100dvh - 6rem);
    --fh-board-header-zh-font-size: 0.65rem;
    --fh-board-header-en-font-size: 0.65rem;
    --fh-board-row-line-height: 1.15;
    --fh-board-header-en-wrap-width: 5rem;
    --fh-board-page-side-padding: 0.75rem;
}

body.fh-loan-board .fi-page > section {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    row-gap: 0.5rem !important;
}

/*
 * Overrides Filament's own .fi-main px-4 md:px-6 lg:px-8 (up to 2rem at
 * the lg breakpoint) — that's the compiled Tailwind bundle shipped by the
 * panel (public/css/filament/filament/app.css), not something this app
 * can edit directly, so it's overridden here instead like every other
 * Loan Board density tweak.
 */
body.fh-loan-board .fi-main {
    padding-left: var(--fh-board-page-side-padding) !important;
    padding-right: var(--fh-board-page-side-padding) !important;
}

body.fh-loan-board .fi-ta-header-cell {
    padding-left: var(--fh-board-cell-padding-x) !important;
    padding-right: var(--fh-board-cell-padding-x) !important;
    padding-top: var(--fh-board-cell-padding-y) !important;
    padding-bottom: var(--fh-board-cell-padding-y) !important;
}

body.fh-loan-board .fi-ta-text {
    padding-left: var(--fh-board-cell-padding-x) !important;
    padding-right: var(--fh-board-cell-padding-x) !important;
    padding-top: var(--fh-board-cell-padding-y) !important;
    padding-bottom: var(--fh-board-cell-padding-y) !important;
}

body.fh-loan-board .fi-ta-text-item-label {
    font-size: var(--fh-board-row-font-size) !important;
    line-height: var(--fh-board-row-line-height) !important;
    /* CLIENT ROUND 2026-10-01 item 3: the client read the row values as "too
       light". The COLOUR is not the cause and is deliberately left alone --
       Filament already renders an uncoloured cell as text-gray-950
       (#030712), one step off black, so there is no headroom to darken and a
       colour rule here would be a no-op that looks like a fix. What makes it
       read light is the size: --fh-board-row-font-size is 0.63rem (~10px) at
       line-height 1.15, and normal-weight text that small reads thin.

       Weight is the lever, so weight is what changes. Font size is untouched
       per the instruction.

       THE HIERARCHY IS PRESERVED RATHER THAN FLATTENED, which is the thing
       to be careful about when every cell gains weight:

         600  ordinary row values (this rule)
         700  the 编号 column -- Filament's font-bold, from
              ->weight(FontWeight::Bold) on the column itself
         700  the 合计 summary row -- bumped from 600 just below, because at
              600 it would have become indistinguishable from the cells above
              it rather than reading as a total

       The unlock-note annotation needs no exception: .fh-unlock-note carries
       its own font-weight: 400 !important, and a declaration on the element
       beats a weight inherited from this parent, so it stays subdued. */
    font-weight: 600 !important;
}

/* Keeps 合计 a step above the now-bolder cells it summarises. Scoped to the
   board, so every other table's summary row stays at the global 600 set
   further up -- this round is Loan Board only. */
body.fh-loan-board .fi-ta-summary-row .fi-ta-text-summary span {
    font-weight: 700 !important;
}

body.fh-loan-board .fh-th-zh {
    font-size: var(--fh-board-header-zh-font-size) !important;
}

body.fh-loan-board .fh-th-en {
    font-size: var(--fh-board-header-en-font-size) !important;
    /* The header cell's outer wrapper sets whitespace-nowrap (so long
       labels don't force the whole header row taller than needed by
       default) — white-space is inherited, so it has to be overridden
       here specifically to let just the English line wrap. max-width
       is what actually forces the wrap; without it the text has no
       reason to break since nothing constrains its line length. */
    white-space: normal !important;
    overflow-wrap: break-word !important;
    max-width: var(--fh-board-header-en-wrap-width);
}

/* Totals row figures/label share the row font size, not the browser
   default the summary template ships with. */
body.fh-loan-board .fi-ta-summary-row .fi-ta-text-summary,
body.fh-loan-board .fi-ta-summary-row .fi-ta-text-summary span {
    font-size: var(--fh-board-row-font-size) !important;
}

/*
 * Forces every header label and cell value to align start (left) —
 * already the effective default (no column sets ->alignment(), and
 * Filament's own default is Start), but made explicit/!important here so
 * it can never drift if a column's alignment is ever changed later, and
 * so there's one obvious place to flip it if that's ever wanted.
 */
body.fh-loan-board .fi-ta-header-cell-label,
body.fh-loan-board .fi-ta-text-item-label,
body.fh-loan-board .fi-ta-text-summary span {
    text-align: start !important;
}

body.fh-loan-board .fi-ta-header-cell span.flex,
body.fh-loan-board .fi-ta-text > div.flex {
    justify-content: flex-start !important;
}

/*
 * Header labels are now two lines (Chinese + English) — without this, the
 * header's flex wrapper vertically CENTERS that two-line block against
 * the (single-line) sort icon (Filament's own items-center default),
 * which looks off-balance once the label is taller than the icon. This
 * aligns the label — and the icon beside it — to the top of the header
 * cell instead.
 */
body.fh-loan-board .fi-ta-header-cell span.flex {
    align-items: flex-start !important;
}

/*
 * The align-items rule above only controls alignment INSIDE each header's
 * own flex wrapper (label vs. sort icon) — it does nothing for alignment
 * BETWEEN columns. <th> is a table-cell box, and table cells default to
 * vertical-align: middle; since sortable columns' content is a touch
 * taller than non-sortable ones, every header was still being centered
 * within the (shared, tallest-column-driven) row height, so labels
 * drifted up/down column to column. Pinning the cell itself to the top
 * keeps every header's label flush with the same baseline regardless of
 * that per-column content-height difference.
 */
body.fh-loan-board .fi-ta-header-cell {
    vertical-align: top !important;
}

/* Grid lines: vertical between columns, horizontal between rows. */
body.fh-loan-board .fi-ta-header-cell,
body.fh-loan-board .fi-ta-cell {
    border-right: 1px solid rgb(229 231 235) !important; /* gray-200 */
}

body.fh-loan-board .fi-ta-row {
    border-bottom: 1px solid rgb(229 231 235) !important;
}

.dark body.fh-loan-board .fi-ta-header-cell,
.dark body.fh-loan-board .fi-ta-cell {
    border-right-color: rgb(55 65 81) !important; /* gray-700 */
}

.dark body.fh-loan-board .fi-ta-row {
    border-bottom-color: rgb(55 65 81) !important;
}

/*
 * Search rework CHANGE 2: gives the search/toolbar row (.fi-ta-header-ctn,
 * which holds the search field + client-details toggle) a tinted
 * background and extra breathing room so it visually reads as its own
 * "search section" sitting above the results, rather than blending into
 * the same white surface as the table rows below. The existing divide-y
 * border between them (Filament's own) still acts as the section seam.
 */
body.fh-loan-board .fi-ta-header-ctn {
    background-color: rgb(249 250 251) !important; /* gray-50 */
}

.dark body.fh-loan-board .fi-ta-header-ctn {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

body.fh-loan-board .fi-ta-header-toolbar {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/*
 * Search rework CHANGE (client-details toggle): small, unobtrusive button
 * matching the search field's own visual weight — sits immediately to its
 * right in the same toolbar row (see TOOLBAR_SEARCH_AFTER registration in
 * AdminPanelProvider::boot()). "Pressed" (details hidden) gets a filled/
 * muted look; the icon swap (eye / eye-slash) is the primary at-a-glance
 * signal, the background is a secondary one.
 */
body.fh-loan-board .fh-client-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(209 213 219); /* gray-300 */
    background-color: white;
    color: rgb(17 24 39); /* gray-900 */
    cursor: pointer;
    line-height: 1.1;
    white-space: nowrap;
    transition:
        background-color 75ms ease,
        color 75ms ease;
}

body.fh-loan-board .fh-client-toggle:hover {
    background-color: rgb(249 250 251); /* gray-50 */
}

body.fh-loan-board .fh-client-toggle.fh-client-toggle-off {
    background-color: rgb(229 231 235); /* gray-200 */
    color: rgb(107 114 128); /* gray-500 */
}

.dark body.fh-loan-board .fh-client-toggle {
    border-color: rgb(55 65 81); /* gray-700 */
    background-color: transparent;
    color: white;
}

.dark body.fh-loan-board .fh-client-toggle:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark body.fh-loan-board .fh-client-toggle.fh-client-toggle-off {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgb(156 163 175); /* gray-400 */
}

body.fh-loan-board .fh-client-toggle-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

body.fh-loan-board .fh-client-toggle-label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

body.fh-loan-board .fh-client-toggle-en {
    font-size: 0.6875rem;
    font-weight: 500;
    opacity: 0.8;
}

/*
 * DELETED IN PHASE 5 (b) FOLLOW-UP — do not reinstate without reading this.
 *
 * There used to be a `body.fh-loan-board-master .fi-ta-search-field {
 * display: none !important }` here, from the earlier search-UX rework when
 * master's search meant "pick an agent" and free text was deliberately taken
 * away.
 *
 * Phase 5 (b) gave master a client-search QUERY path — the only way to reach
 * a master-owned client's loans, which have no agent_code for the combobox to
 * match (client M001 in live data). That path shipped while this rule was
 * still hiding the only input that can reach it, so the feature was live and
 * unreachable at the same time, and the test covering it passed because it set
 * the Livewire `tableSearch` property directly instead of going through the
 * page.
 *
 * Master now gets BOTH controls in the toolbar: the agent combobox ("show me
 * agent T's whole book") and Filament's own search field ("find this client").
 * Two questions, two controls. LoanBoardMasterSearchTest asserts the field is
 * actually rendered and not display:none for master — a query-only assertion
 * cannot see this class of bug.
 */

/*
 * Agent searchable combobox: same visual weight/position as the search
 * field it replaces for master (sits in the identical toolbar slot, see
 * TOOLBAR_SEARCH_AFTER registration in AdminPanelProvider::boot()). The
 * dropdown list is positioned absolutely so it overlays the row below
 * rather than pushing it down — needs the wrapper as its own
 * positioning context.
 */
body.fh-loan-board .fh-agent-combobox {
    position: relative;
    width: 14rem;
}

body.fh-loan-board .fh-agent-combobox-input {
    height: 2.25rem;
    width: 100%;
    padding: 0 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(209 213 219); /* gray-300 */
    background-color: white;
    color: rgb(17 24 39); /* gray-900 */
    font-size: 0.8125rem;
}

.dark body.fh-loan-board .fh-agent-combobox-input {
    border-color: rgb(55 65 81); /* gray-700 */
    background-color: rgb(17 24 39);
    color: white;
}

body.fh-loan-board .fh-agent-combobox-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.25rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(209 213 219); /* gray-300 */
    background-color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dark body.fh-loan-board .fh-agent-combobox-list {
    border-color: rgb(55 65 81); /* gray-700 */
    background-color: rgb(17 24 39);
}

body.fh-loan-board .fh-agent-combobox-option {
    display: block;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    background-color: transparent;
    color: rgb(17 24 39); /* gray-900 */
    font-size: 0.8125rem;
    text-align: start;
    cursor: pointer;
}

body.fh-loan-board .fh-agent-combobox-option:hover {
    background-color: rgb(243 244 246); /* gray-100 */
}

.dark body.fh-loan-board .fh-agent-combobox-option {
    color: white;
}

.dark body.fh-loan-board .fh-agent-combobox-option:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

body.fh-loan-board .fh-agent-combobox-empty {
    margin: 0;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
    color: rgb(107 114 128); /* gray-500 */
}

/*
 * Active-selection banner ("代理 T / Agent T — N loans"): left side of the
 * same toolbar row the select/toggle sit on the right of (see
 * TOOLBAR_REORDER_TRIGGER_BEFORE registration in AdminPanelProvider::boot()).
 */
body.fh-loan-board .fh-agent-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

body.fh-loan-board .fh-agent-banner-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(17 24 39); /* gray-900 */
}

.dark body.fh-loan-board .fh-agent-banner-text {
    color: white;
}

body.fh-loan-board .fh-agent-banner-clear {
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid rgb(209 213 219); /* gray-300 */
    background-color: white;
    color: rgb(75 85 99); /* gray-600 */
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

body.fh-loan-board .fh-agent-banner-clear:hover {
    background-color: rgb(249 250 251); /* gray-50 */
}

.dark body.fh-loan-board .fh-agent-banner-clear {
    border-color: rgb(55 65 81); /* gray-700 */
    background-color: transparent;
    color: rgb(209 213 219); /* gray-300 */
}

.dark body.fh-loan-board .fh-agent-banner-clear:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/*
 * CHANGE 2: compacts Filament's own empty-state block (heading + icon,
 * used for master's "please select an agent" prompt, the "this agent has
 * no loans" case, and the agent's "no matching loans" case) — its default
 * is px-6 py-12 (3rem top/bottom) plus a fairly large icon, which reads as
 * a big blank area. Icon and heading both stay, just tighter.
 */
body.fh-loan-board .fi-ta-empty-state {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

body.fh-loan-board .fi-ta-empty-state-icon-ctn {
    margin-bottom: 0.5rem !important;
    padding: 0.5rem !important;
}

body.fh-loan-board .fi-ta-empty-state-icon {
    height: 1.25rem !important;
    width: 1.25rem !important;
}

/*
 * Loan Board action buttons round.
 *
 * CHANGE 1: pins the Appendix column to the RIGHT edge — mirrors
 * fh-col-pin-1/fh-col-pin-2 (which pin 编号/客户名字 to the LEFT) but
 * anchored via `right` instead of `left`, and needs its own opaque
 * background for the same reason those do (other cells scroll underneath
 * a sticky column).
 */
body.fh-loan-board .fh-col-pin-right {
    position: sticky !important;
    right: 0 !important;
    z-index: 1 !important;
    background-color: white !important;
}

.dark body.fh-loan-board .fh-col-pin-right {
    background-color: #111827 !important;
}

/*
 * Filament's own actions-cell/header-cell (from ->actions() on the
 * table) and its header-actions row (from ->headerActions()) are
 * registered normally — needed so mountTableAction()/mountAction() can
 * resolve 'viewEditClient' / 'createLoanForExistingClient' /
 * 'createClientAndLoan' by name — but never meant to be seen: the
 * Appendix column (view-edit, payment record) and the 新增/Add New
 * toolbar trigger (the two create flows) are how they're actually
 * reached. See LoanBoard::viewEditClientAction() and
 * loan-board-add-new.blade.php.
 */
body.fh-loan-board .fi-ta-actions-cell,
body.fh-loan-board .fi-ta-actions-header-cell {
    display: none !important;
}

body.fh-loan-board .fi-ta-header {
    display: none !important;
}

/*
 * Appendix column buttons (View-Edit, Payment Record — refinement round
 * CHANGE 1: English-only, was bilingual) — small and compact so a
 * two-button cell doesn't inflate the row height beyond this page's
 * already-tight density. Room is left (via the column's own width) for
 * the remove/combine buttons a later round will add alongside these.
 */
body.fh-loan-board .fh-appendix-actions {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

body.fh-loan-board .fh-appendix-btn {
    display: block;
    line-height: 1.1;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid rgb(209 213 219); /* gray-300 */
    background-color: white;
    color: rgb(17 24 39); /* gray-900 */
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

body.fh-loan-board .fh-appendix-btn:hover {
    background-color: rgb(249 250 251); /* gray-50 */
}

.dark body.fh-loan-board .fh-appendix-btn {
    border-color: rgb(55 65 81); /* gray-700 */
    background-color: transparent;
    color: white;
}

.dark body.fh-loan-board .fh-appendix-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/*
 * Wizard round: read-only summary rows on Step 3 ("确认/Confirm") of both
 * Add New flows — plain label/value pairs, shared by every
 * *SummaryPlaceholder() in LoanBoard.php.
 */
.fh-wizard-summary {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fh-wizard-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8125rem;
}

.fh-wizard-summary-row span:first-child {
    color: rgb(107 114 128); /* gray-500 */
}

.fh-wizard-summary-row span:last-child {
    font-weight: 600;
    color: rgb(17 24 39); /* gray-900 */
}

.dark .fh-wizard-summary-row span:first-child {
    color: rgb(156 163 175); /* gray-400 */
}

.dark .fh-wizard-summary-row span:last-child {
    color: white;
}

/*
 * 新增/Add New toolbar trigger. Same small/unobtrusive visual weight as the
 * client-details toggle it sits next to.
 *
 * The two-choice menu it used to open is gone: existing-or-new client is step 1
 * of the wizard now, so there is one button and no dropdown. The .fh-add-new
 * wrapper stays as the toolbar positioning context.
 */
body.fh-loan-board .fh-add-new {
    position: relative;
}

body.fh-loan-board .fh-add-new-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(209 213 219); /* gray-300 */
    background-color: white;
    color: rgb(17 24 39); /* gray-900 */
    cursor: pointer;
    line-height: 1.1;
    white-space: nowrap;
}

body.fh-loan-board .fh-add-new-trigger:hover {
    background-color: rgb(249 250 251); /* gray-50 */
}

.dark body.fh-loan-board .fh-add-new-trigger {
    border-color: rgb(55 65 81); /* gray-700 */
    background-color: transparent;
    color: white;
}

.dark body.fh-loan-board .fh-add-new-trigger:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

body.fh-loan-board .fh-add-new-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

body.fh-loan-board .fh-add-new-label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

body.fh-loan-board .fh-add-new-en {
    font-size: 0.6875rem;
    font-weight: 500;
    opacity: 0.8;
}









/*
 * Modal round CHANGE 3: Loan Board modal sizing — width, max-height, and
 * a sticky header, in ONE place (the --fh-modal-max-width/
 * --fh-modal-max-height custom properties declared on body.fh-loan-board
 * near the top of this file). Scoped to .fh-loan-board's own modals only
 * (Add New's two wizards, View-Edit, Payment Record) — every other
 * resource's modals elsewhere in the app (confirmation dialogs, etc.)
 * are intentionally untouched, so a small "Are you sure?" prompt doesn't
 * get stretched to the same width as these form modals.
 *
 * .fi-modal-window becomes the scrolling container itself (rather than
 * the outer page-level wrapper Filament uses by default) so that
 * .fi-modal-header can use plain `position: sticky` against it — no
 * per-action ->modalHeaderSticky() calls needed, this applies uniformly.
 */
body.fh-loan-board .fi-modal-window {
    width: 100%;
    max-width: min(var(--fh-modal-max-width), calc(100vw - 2rem)) !important;
    max-height: var(--fh-modal-max-height) !important;
    overflow-y: auto !important;
}

body.fh-loan-board .fi-modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background-color: white !important;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

.dark body.fh-loan-board .fi-modal-header {
    background-color: rgb(
        17 24 39
    ) !important; /* gray-900, matches the modal's own dark background */
}

/*
 * Bug fix: Select/multi-select dropdowns were getting clipped — cut off
 * right at the modal's edge — instead of opening properly. Root cause:
 * this app's compiled Filament CSS (public/css/filament/forms/forms.css)
 * shows the dropdown panel (.choices__list--dropdown) is plain
 * `position: absolute; top: 100%`, with no viewport-aware repositioning
 * (no .is-flipped rule anywhere in that file) — it has no way to escape
 * an ancestor's overflow clipping. .fi-modal-window became exactly that
 * kind of ancestor above (overflow-y: auto, for the sticky-header/
 * bounded-height behavior) — clipping is worst on a step/modal with only
 * one or two fields, where the box is short and a dropdown opening below
 * the last field has nowhere to render without being cut off.
 *
 * Fix: reserve room at the bottom of the scrollable content area so a
 * dropdown always has somewhere to render into. The same compiled CSS
 * caps the dropdown panel itself at max-height: 15rem (+ its own 0.5rem
 * margin-top) — 16rem covers that with a small buffer, regardless of
 * which field opens it. Trade-off: a step with very few fields (e.g. the
 * Add New wizard's Step 1, just the client picker) will show extra empty
 * space at the bottom now — a visible cost, but the alternative was a
 * dropdown that silently doesn't work.
 */
body.fh-loan-board .fi-modal-content {
    padding-bottom: 16rem !important;
}

/*
 * Modal round CHANGE 2: the wizard step header (01 → 02 → 03) was
 * overflowing its container and picking up Filament's own
 * `md:overflow-x-auto` scrollbar. Both Add New wizards always have
 * exactly 3 steps, so this replaces the header's auto-content-sized grid
 * columns with 3 equal, shrinkable columns, and relaxes the per-step
 * label's own width-to-content/max-width utility classes so text wraps
 * inside its column instead of forcing the row wider. Below the md
 * breakpoint the steps already stack vertically (Filament's own
 * behaviour, untouched) so there's nothing to fix there.
 */
@media (min-width: 768px) {
    body.fh-loan-board .fi-fo-wizard-header {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        overflow-x: hidden !important;
    }

    body.fh-loan-board .fi-fo-wizard-header-step {
        min-width: 0 !important;
    }

    body.fh-loan-board .fi-fo-wizard-header-step-button {
        width: 100% !important;
        min-width: 0 !important;
    }

    body.fh-loan-board .fi-fo-wizard-header-step-button .md\:w-max {
        width: 100% !important;
    }

    body.fh-loan-board .fi-fo-wizard-header-step-button .md\:max-w-60 {
        max-width: 100% !important;
    }
}

body.fh-loan-board .fi-fo-wizard-header-step-label {
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

/*
 * Document display round: the View-Edit modal's document section
 * (client-documents.blade.php) — three cards instead of three plain
 * rows. Grid is single-column by default (narrow screens) and switches
 * to 3 equal columns from the sm breakpoint up, matching "one row of
 * three on desktop, stacked on narrow screens".
 */
body.fh-loan-board .fh-doc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    body.fh-loan-board .fh-doc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

body.fh-loan-board .fh-doc-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(209 213 219); /* gray-300 */
    background-color: white;
}

.dark body.fh-loan-board .fh-doc-card {
    border-color: rgb(55 65 81); /* gray-700 */
    background-color: rgb(31 41 55); /* gray-800 */
}

body.fh-loan-board .fh-doc-card-uploaded {
    border-color: rgb(187 247 208); /* green-200 */
    background-color: rgb(240 253 244); /* green-50 */
}

.dark body.fh-loan-board .fh-doc-card-uploaded {
    border-color: rgba(74, 222, 128, 0.3);
    background-color: rgba(74, 222, 128, 0.06);
}

body.fh-loan-board .fh-doc-card-missing {
    border-color: rgb(254 202 202); /* red-200 */
    background-color: rgb(254 242 242); /* red-50 */
}

.dark body.fh-loan-board .fh-doc-card-missing {
    border-color: rgba(248, 113, 113, 0.3);
    background-color: rgba(248, 113, 113, 0.06);
}

body.fh-loan-board .fh-doc-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body.fh-loan-board .fh-doc-card-status-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

body.fh-loan-board .fh-doc-card-status-icon-ok {
    color: rgb(22 163 74); /* green-600 */
}

body.fh-loan-board .fh-doc-card-status-icon-missing {
    color: rgb(220 38 38); /* red-600 */
}

body.fh-loan-board .fh-doc-card-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(17 24 39); /* gray-900 */
}

.dark body.fh-loan-board .fh-doc-card-label {
    color: white;
}

body.fh-loan-board .fh-doc-card-preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid rgb(209 213 219); /* gray-300 */
    background-color: white;
    color: rgb(17 24 39); /* gray-900 */
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    align-self: flex-start;
}

body.fh-loan-board .fh-doc-card-preview-btn:hover {
    background-color: rgb(249 250 251); /* gray-50 */
}

.dark body.fh-loan-board .fh-doc-card-preview-btn {
    border-color: rgb(55 65 81); /* gray-700 */
    background-color: transparent;
    color: white;
}

.dark body.fh-loan-board .fh-doc-card-preview-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

body.fh-loan-board .fh-doc-card-preview-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

body.fh-loan-board .fh-doc-card-missing-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(185 28 28); /* red-700 */
}

.dark body.fh-loan-board .fh-doc-card-missing-text {
    color: rgb(248 113 113); /* red-400 */
}

/*
 * Document handling round: the View-Edit modal's own upload fields
 * (ic_copy_path/income_proof_path/agreement_path — real Filament
 * FileUpload fields, still) get the SAME bordered-card look as the
 * read-only grid above, applied via ->extraAttributes() in
 * LoanBoard::enhanceDocumentField() directly onto FileUpload's own root
 * element (.fi-fo-file-upload) — no wrapper markup needed. Green/red
 * comes from ->hintColor(), independent of these rules.
 */
body.fh-loan-board .fh-doc-edit-card {
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(209 213 219); /* gray-300 */
    background-color: white;
}

.dark body.fh-loan-board .fh-doc-edit-card {
    border-color: rgb(55 65 81); /* gray-700 */
    background-color: rgb(31 41 55); /* gray-800 */
}

body.fh-loan-board .fh-doc-edit-card-uploaded {
    border-color: rgb(187 247 208); /* green-200 */
    background-color: rgb(240 253 244); /* green-50 */
}

.dark body.fh-loan-board .fh-doc-edit-card-uploaded {
    border-color: rgba(74, 222, 128, 0.3);
    background-color: rgba(74, 222, 128, 0.06);
}

body.fh-loan-board .fh-doc-edit-card-missing {
    border-color: rgb(254 202 202); /* red-200 */
    background-color: rgb(254 242 242); /* red-50 */
}

.dark body.fh-loan-board .fh-doc-edit-card-missing {
    border-color: rgba(248, 113, 113, 0.3);
    background-color: rgba(248, 113, 113, 0.06);
}

/*
 * The "Preview" button living in the field's hint row (next to its
 * label) — a plain wire:click button (see LoanBoard::documentHint()),
 * not a Filament action button, so it's plain HTML/CSS rather than one
 * of Filament's own button components.
 */
body.fh-loan-board .fh-doc-hint-preview-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid rgb(209 213 219); /* gray-300 */
    background-color: white;
    color: rgb(17 24 39); /* gray-900 */
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: pointer;
}

body.fh-loan-board .fh-doc-hint-preview-btn:hover {
    background-color: rgb(249 250 251); /* gray-50 */
}

.dark body.fh-loan-board .fh-doc-hint-preview-btn {
    border-color: rgb(55 65 81); /* gray-700 */
    background-color: transparent;
    color: white;
}

.dark body.fh-loan-board .fh-doc-hint-preview-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/*
 * The document preview modal itself (loan-board.blade.php's
 * <x-filament::modal id="document-preview">) — width/max-height/sticky-
 * header all come for free from the shared .fi-modal-window rules above
 * (same modal component every other modal on this page uses). This just
 * sizes the actual image/iframe/fallback content to fill most of that
 * space, per "use most of the available height and width."
 */
.fh-doc-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.fh-doc-preview-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 0.5rem;
}

.fh-doc-preview-frame {
    width: 100%;
    height: 70vh;
    border: none;
    border-radius: 0.5rem;
}

.fh-doc-preview-missing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    text-align: center;
    color: rgb(107 114 128); /* gray-500 */
}

.dark .fh-doc-preview-missing {
    color: rgb(156 163 175); /* gray-400 */
}

.fh-doc-preview-missing-icon {
    width: 2.5rem;
    height: 2.5rem;
    color: rgb(217 119 6); /* amber-600 */
}

.fh-doc-preview-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(209 213 219); /* gray-300 */
    background-color: white;
    color: rgb(17 24 39); /* gray-900 */
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.fh-doc-preview-download:hover {
    background-color: rgb(249 250 251); /* gray-50 */
}

.dark .fh-doc-preview-download {
    border-color: rgb(55 65 81); /* gray-700 */
    background-color: transparent;
    color: white;
}

.dark .fh-doc-preview-download:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.fh-doc-preview-download-icon {
    width: 1rem;
    height: 1rem;
}

/*
 * ============================================================
 * CLIENT ROUND (Phase 4 feedback) — items 2, 5, 6
 * ============================================================
 */

/*
 * ITEM 2: searchable dropdowns were clipped instead of overlaying the page.
 *
 * The cause is not z-index — it is an ancestor. Filament puts `overflow-hidden`
 * on .fi-ta-ctn (that is what rounds the table's corners), and the whole
 * toolbar lives inside it, so ANY dropdown opening downward is cut at the
 * container's edge no matter how high it stacks. Confirmed by walking the
 * rendered DOM: .fh-agent-combobox sits inside
 *   .fi-ta-ctn(overflow-hidden) > .fi-ta-header-ctn > .fi-ta-header-toolbar
 *
 * Relaxing the one clipping ancestor fixes every dropdown on the board at
 * once — the agent combobox, the 新增/Add New menu, and Filament's own filter
 * panel. Horizontal table scrolling is unaffected: that lives on the inner
 * .fi-ta-content, which keeps its own overflow.
 */
body.fh-loan-board .fi-ta-ctn,
body.fh-loan-board .fi-ta-header-ctn,
body.fh-loan-board .fi-ta-header,
body.fh-loan-board .fi-ta-header-toolbar,
body.fh-loan-board .fi-ta-actions {
    overflow: visible !important;
}

/* Above the sticky pinned columns (z-index 1) and Filament's own chrome. */
body.fh-loan-board .fh-agent-combobox-list,

/*
 * ITEM 5: the totals row was too tall, and its numbers were a different size
 * from the rows above.
 *
 * Both come from Filament's own utilities on the summary cells, seen in the
 * rendered markup:
 *   <span class="fi-ta-summary-row-heading flex px-3 py-4 text-sm ...">合计</span>
 *   <div class="fi-ta-text-summary grid gap-y-1 px-3 py-4 ..."><span class="text-sm ...">
 * py-4 is 1rem top AND bottom; text-sm is 0.875rem against the data rows'
 * 0.63rem. Both are overridden here rather than by touching the column
 * definitions, so the row keeps Filament's structure.
 */
body.fh-loan-board {
    /* Measured in a real browser, not guessed. A data row renders ~101-102px,
       and that height comes mostly from the Appendix cell stacked buttons
       rather than from cell padding — so matching it needs far MORE padding
       here than the data cells own 1rem. 0.3rem gave 41px (visibly thin);
       2.5rem gives 93px, just under a data row, which is what was asked for. */
    --fh-board-summary-padding-y: 1rem;
}

body.fh-loan-board .fi-ta-summary-row .fi-ta-text-summary,
body.fh-loan-board .fi-ta-summary-row .fi-ta-summary-row-heading {
    padding-top: var(--fh-board-summary-padding-y) !important;
    padding-bottom: var(--fh-board-summary-padding-y) !important;
    row-gap: 0 !important;
}

/* Every piece of text in the totals row matches the data rows exactly. */
body.fh-loan-board .fi-ta-summary-row .fi-ta-text-summary,
body.fh-loan-board .fi-ta-summary-row .fi-ta-text-summary span,
body.fh-loan-board .fi-ta-summary-row .fi-ta-summary-row-heading {
    font-size: var(--fh-board-row-font-size) !important;
    line-height: var(--fh-board-row-line-height) !important;
}

/*
 * ITEM 6: the group colours are the client's own spreadsheet values, used
 * exactly as given (#ff9900 / #00ff00 / #fff2cc) in BOTH light and dark mode
 * — matching his sheet is the requirement, so no Tailwind-palette substitute
 * and no softening.
 *
 * Text colour is a separate matter from the specified backgrounds: #ff9900 and
 * #00ff00 are strong enough that Filament's default gray-500 (and its white
 * dark-mode text) would be barely legible on them. Forcing near-black text
 * keeps the client's exact backgrounds while leaving the numbers readable.
 */
body.fh-loan-board .fh-col-group-orange,
body.fh-loan-board .fh-col-group-green,
body.fh-loan-board .fh-col-group-beige,
body.fh-loan-board .fh-col-group-orange span,
body.fh-loan-board .fh-col-group-green span,
body.fh-loan-board .fh-col-group-beige span,
.dark body.fh-loan-board .fh-col-group-orange,
.dark body.fh-loan-board .fh-col-group-green,
.dark body.fh-loan-board .fh-col-group-beige,
.dark body.fh-loan-board .fh-col-group-orange span,
.dark body.fh-loan-board .fh-col-group-green span,
.dark body.fh-loan-board .fh-col-group-beige span {
    color: #111827 !important;
}

/*
 * CLIENT ROUND item 1: icon-only Edit/Confirm on an unlocked row. Same pill
 * as the text buttons beside them, just square, so the four actions fit the
 * Appendix cell without View-Edit and Payment Record having to change.
 */
body.fh-loan-board .fh-appendix-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
}

body.fh-loan-board .fh-appendix-icon {
    width: 0.85rem;
    height: 0.85rem;
    display: block;
}

/*
 * CLIENT ROUND follow-up.
 *
 * .fh-appendix-actions is a COLUMN flex, so each button it holds adds a line
 * and grows the row. The lifecycle pair gets its own ROW flex so an unlocked
 * or draft row stays three lines tall, matching its neighbours.
 */
body.fh-loan-board .fh-appendix-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.25rem;
}

body.fh-loan-board .fh-appendix-row .fh-appendix-btn {
    flex: 0 0 auto;
}

/* The text Confirm on a draft row takes the remaining width beside the pencil. */
body.fh-loan-board
    .fh-appendix-row
    .fh-appendix-btn:not(.fh-appendix-btn-icon) {
    flex: 1 1 auto;
    text-align: center;
}

/* Yellow = "open for editing", green = "vouch for it". */
body.fh-loan-board .fh-appendix-btn-edit {
    color: #92400e !important; /* amber-800 */
    border-color: #f59e0b !important; /* amber-500 */
    background-color: #fffbeb !important; /* amber-50  */
}

body.fh-loan-board .fh-appendix-btn-confirm {
    color: #065f46 !important; /* emerald-800 */
    border-color: #10b981 !important; /* emerald-500 */
    background-color: #ecfdf5 !important; /* emerald-50  */
}

/*
 * Master's unlock note, under 编号/Invoice. It must read as a caption, not as
 * part of the ID above it: smaller, muted, single line, ellipsised. The full
 * text is on the title attribute (see LoanBoard's description closure).
 */
body.fh-loan-board .fh-unlock-note {
    display: block;
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.5rem !important;
    font-weight: 400 !important;
    line-height: 1.2;
    color: rgb(107 114 128) !important; /* gray-500 */
    cursor: help;
}

.dark body.fh-loan-board .fh-unlock-note {
    color: rgb(156 163 175) !important; /* gray-400 */
}

/* =========================================================================
   PAYMENT RECORD HISTORY TABLE
   Six rows, one column per payment cycle, running left to right as a
   timeline above the entry form.

   The scroll container is what moves, not the modal: .fh-history-scroll owns
   overflow-x, so a Rolling loan paid weekly for a year (52 columns, ~4000px)
   scrolls inside the table while the modal itself never scrolls sideways.
   The label column is sticky for the same reason -- at column 40 you still
   need to know which row you are reading.
   ========================================================================= */
.fh-history {
    margin-bottom: 1rem;
}

.fh-history-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    color: #111827;
}

.dark .fh-history-title {
    color: #f4f4f5;
}

.fh-history-scroll {
    overflow-x: auto;
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
}

.dark .fh-history-scroll {
    border-color: #3f3f46;
}

.fh-history-table {
    border-collapse: collapse;
    font-size: 0.8rem;
    white-space: nowrap;
}

.fh-history-table th,
.fh-history-table td {
    border: 1px solid #e4e4e7;
    padding: 0.35rem 0.6rem;
    vertical-align: top;
    text-align: left;
}

.dark .fh-history-table th,
.dark .fh-history-table td {
    border-color: #3f3f46;
}

/* Sticky row-label column. z-index keeps it above the scrolling cells. */
.fh-history-table th[scope='row'] {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff2cc;
    font-weight: 600;
    color: #111827;
    min-width: 13rem;
}

.dark .fh-history-table th[scope='row'] {
    background-color: #fff2cc;
    color: #111827;
}

.fh-history-table td {
    min-width: 7.5rem;
    background-color: #ffffff;
    color: #111827;
}

.dark .fh-history-table td {
    background-color: #18181b;
    color: #f4f4f5;
}

.fh-history-heading {
    display: block;
    font-size: 0.7rem;
    opacity: 0.65;
}

.fh-history-amount {
    display: block;
    font-weight: 600;
}

/* The 利息/回母/清账 split, so the combined total in row 3 doesn't hide it. */
.fh-history-breakdown {
    display: block;
    font-size: 0.7rem;
    opacity: 0.7;
}

/*
 * Confirm-step ownership statement. Always present (see
 * LoanCreationWizard::ownershipStatementPlaceholder) — the plain variant says
 * which agent gets the loan, the warning variant says the client is about to
 * become invisible to every agent. The absence of a message must never be how
 * someone learns who owns a loan, so this never renders empty.
 */
body.fh-loan-board .fh-wizard-owner-note,
.fh-wizard-owner-note {
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background-color: #f9fafb;
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #374151;
}

.fh-wizard-owner-note-warning {
    border-color: #fcd34d;
    background-color: #fffbeb;
    color: #78350f;
}

:root[data-theme="dark"] .fh-wizard-owner-note,
.dark .fh-wizard-owner-note {
    border-color: #374151;
    background-color: rgba(255, 255, 255, 0.03);
    color: #d1d5db;
}

:root[data-theme="dark"] .fh-wizard-owner-note-warning,
.dark .fh-wizard-owner-note-warning {
    border-color: #92400e;
    background-color: rgba(146, 64, 14, 0.15);
    color: #fde68a;
}

/* =========================================================================
   MINIMAL SCROLLBARS
   Thin, low-contrast, and no arrow buttons — for the horizontal scroll on the
   Payment Record history (52 columns on a year-old rolling loan), the board's
   own wide table, and any scrolling modal.

   6px on BOTH axes: `width` is the vertical bar, `height` the horizontal one,
   and setting only one leaves the other at the browser default — which is the
   thick one, and on this app the horizontal is the one you actually see.

   Scoped to the app's scroll containers rather than `*`, so native selects,
   date pickers and anything else the browser draws keep their own chrome.
   `scrollbar-width`/`scrollbar-color` cover Firefox, which ignores
   ::-webkit-scrollbar entirely; both are declared so neither engine falls back
   to the default bar.
   ========================================================================= */
.fh-history-scroll,
.fi-ta-content,
.fi-modal-window,
.fi-fo-repeater,
body.fh-loan-board .fi-ta-ctn {
    scrollbar-width: thin;
    scrollbar-color: rgba(113, 113, 122, 0.35) transparent;
}

.fh-history-scroll::-webkit-scrollbar,
.fi-ta-content::-webkit-scrollbar,
.fi-modal-window::-webkit-scrollbar,
.fi-fo-repeater::-webkit-scrollbar,
body.fh-loan-board .fi-ta-ctn::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.fh-history-scroll::-webkit-scrollbar-track,
.fi-ta-content::-webkit-scrollbar-track,
.fi-modal-window::-webkit-scrollbar-track,
.fi-fo-repeater::-webkit-scrollbar-track,
body.fh-loan-board .fi-ta-ctn::-webkit-scrollbar-track {
    background: transparent;
}

.fh-history-scroll::-webkit-scrollbar-thumb,
.fi-ta-content::-webkit-scrollbar-thumb,
.fi-modal-window::-webkit-scrollbar-thumb,
.fi-fo-repeater::-webkit-scrollbar-thumb,
body.fh-loan-board .fi-ta-ctn::-webkit-scrollbar-thumb {
    background-color: rgba(113, 113, 122, 0.35);
    border-radius: 9999px;
}

.fh-history-scroll::-webkit-scrollbar-thumb:hover,
.fi-ta-content::-webkit-scrollbar-thumb:hover,
.fi-modal-window::-webkit-scrollbar-thumb:hover,
.fi-fo-repeater::-webkit-scrollbar-thumb:hover,
body.fh-loan-board .fi-ta-ctn::-webkit-scrollbar-thumb:hover {
    background-color: rgba(113, 113, 122, 0.6);
}

/* Chrome/Edge draw a small square where the two bars meet; transparent hides it. */
.fh-history-scroll::-webkit-scrollbar-corner,
.fi-ta-content::-webkit-scrollbar-corner,
.fi-modal-window::-webkit-scrollbar-corner,
.fi-fo-repeater::-webkit-scrollbar-corner,
body.fh-loan-board .fi-ta-ctn::-webkit-scrollbar-corner {
    background: transparent;
}

:root[data-theme="dark"] .fh-history-scroll,
:root[data-theme="dark"] .fi-ta-content,
:root[data-theme="dark"] .fi-modal-window,
.dark .fh-history-scroll,
.dark .fi-ta-content,
.dark .fi-modal-window {
    scrollbar-color: rgba(228, 228, 231, 0.28) transparent;
}

:root[data-theme="dark"] .fh-history-scroll::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .fi-ta-content::-webkit-scrollbar-thumb,
:root[data-theme="dark"] .fi-modal-window::-webkit-scrollbar-thumb,
.dark .fh-history-scroll::-webkit-scrollbar-thumb,
.dark .fi-ta-content::-webkit-scrollbar-thumb,
.dark .fi-modal-window::-webkit-scrollbar-thumb {
    background-color: rgba(228, 228, 231, 0.28);
}