/* =============================================================================
   Heavy Mettle — "Private Lender Technologies" admin theme (approved mockup).

   Loaded AFTER the compiled Ledger theme via a HEAD_END render hook, so it
   repaints the palette, the (now dark charcoal) sidebar, and the type system
   WITHOUT a Vite rebuild. Scope: the /admin panel only — the portals and the
   public marketing site are on different render paths and untouched.

   Palette + type lifted verbatim from privatelender.tech:
     paper #eeeeee · white cards · ink #222831 / #393e46 · faint #5b626c
     gold #ffd369 (fills/marks only — fails AA as text on light) · 3px radius
     Newsreader (serif titles) · Hanken Grotesk (body) · Space Grotesk (labels)
     · IBM Plex Mono (figures, already self-hosted by the Ledger theme).

   NOTE: Filament color vars are COMMA-separated triplets -> rgba(var(--x), a).
   TODO(follow-up): self-host Newsreader/Hanken/Space-Grotesk (currently bunny.net)
   to match the project's no-CDN font rule; IBM Plex is already local.
   ========================================================================== */

@import url('https://fonts.bunny.net/css?family=newsreader:400,500,600|hanken-grotesk:400,500,600,700|space-grotesk:500,600&display=swap');

:root {
    --plt-paper: #eeeeee;
    --plt-card: #ffffff;
    --plt-ink: #222831;
    --plt-ink-2: #393e46;
    --plt-faint: #5b626c;
    --plt-line: rgba(34, 40, 49, 0.14);
    --plt-gold: #ffd369;
    --plt-gold-soft: rgba(255, 211, 105, 0.13);
    --plt-on-ink: #eeeeee;
    --plt-faint-ink: #9aa0aa;

    --plt-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --plt-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
    --plt-label: "Space Grotesk", "Hanken Grotesk", system-ui, sans-serif;
    --plt-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

    /* retune the Ledger geometry tokens sharper (PLT uses 3px) */
    --se-radius: 4px;
    --se-radius-sm: 3px;
}

/* ----- type --------------------------------------------------------------- */
.fi-body {
    font-family: var(--plt-sans);
    background-color: var(--plt-paper);
    color: var(--plt-ink-2);
}

.fi-main {
    background-color: var(--plt-paper);
}

/* Tighten the dense header stack: breadcrumbs (topbar) → title → subheading →
   sub-nav tabs → content. Filament's default 2rem rhythm (py-8 + gap-y-8 on the
   page's content wrapper) leaves a lot of dead air on these report-led pages, so
   the report panel sits well below the fold; pull it up. */
.fi-page > .py-8 {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    row-gap: 1.25rem;
}

/* The sub-navigation tabs sit in a nested gap-8 wrapper; tighten the gap below
   them so the report panel sits just under the tabs, not 2rem down. */
.fi-page > .py-8 > .flex.flex-col.gap-8 {
    row-gap: 1.25rem;
}

/* Serif display for page / section / modal titles (the distinctive move). */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
    font-family: var(--plt-serif);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--plt-ink);
}

/* Page subheading = the mockup's summary line under the title (.head p):
   13.5px faint, not Filament's 18px. */
.fi-header-subheading {
    font-size: 13.5px;
    color: var(--plt-faint);
    margin-top: 5px;
}

/* Space Grotesk for the uppercase label voice. */
.hm-nav-grp,
.fi-ta-header-cell-label,
.fi-wi-stats-overview-stat-label,
.fi-breadcrumbs-item {
    font-family: var(--plt-label);
}

/* ----- surfaces: white cards, hairline ink borders, soft shadow ----------- */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-modal-window,
.fi-dropdown-panel {
    background-color: var(--plt-card);
    border: 1px solid var(--plt-line);
    border-radius: var(--se-radius);
    box-shadow: 0 1px 0 rgba(34, 40, 49, 0.03), 0 14px 36px -28px rgba(34, 40, 49, 0.42);
}

/* ===== sidebar =============================================================
   The sidebar is a hand-built view (resources/views/vendor/filament-panels/
   components/sidebar/index.blade.php) using .hm-* classes — all of its styling
   lives in the "custom sidebar shell" block below. The only Filament-class
   rules still needed here are the brand mark and the topbar user-menu hide. */

/* Brand mark: gold tile + ink bars, sized to the mockup (22px, not the 32px
   the logo SVG renders at by default). */
.fi-sidebar .fi-brand-mark {
    height: 22px !important;
    width: 22px !important;
}

.fi-sidebar .fi-brand-mark rect:first-child {
    fill: var(--plt-gold) !important;
}

.fi-sidebar .fi-brand-mark rect:not(:first-child) {
    fill: var(--plt-ink) !important;
    opacity: 1 !important;
}

/* User menu relocated to the sidebar footer (mockup) — hide the topbar one. */
.fi-topbar .fi-user-menu {
    display: none !important;
}

.hm-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background-color: var(--plt-ink);
}

.hm-sidebar-user .fi-user-menu {
    flex: none;
}

.hm-sidebar-user-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.hm-sidebar-user-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--plt-on-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-sidebar-user-role {
    font-size: 11px;
    color: var(--plt-faint-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== custom sidebar shell — direct port of the mockup (overridden view) === */
:root {
    --sidebar-width: 236px;
}

.hm-sidebar {
    background: var(--plt-ink) !important;
}

.hm-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 20px 18px 18px;
    color: var(--plt-on-ink);
}

.hm-brand-link {
    display: block;
    min-width: 0;
    text-decoration: none;
}

.hm-sidebar-collapse {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--plt-faint-ink);
    cursor: pointer;
    background: transparent;
    border: 0;
}

.hm-sidebar-collapse:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.hm-sidebar-nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 14px 18px;
}

.hm-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Fill the sidebar's full height and distribute the (flat, ungrouped)
       cluster items evenly down it — this kills the dead space at the bottom
       regardless of screen height. When the items overflow a short viewport,
       space-between has no free space to distribute, so it falls back to the
       natural top-aligned, scrollable layout. */
    flex: 1 1 auto;
    justify-content: space-between;
}

.hm-nav-grp {
    font-family: var(--plt-label);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 10px;
    font-weight: 600;
    color: var(--plt-faint-ink);
    padding: 30px 10px 9px;
}

/* The first group label sits right under the brand — it doesn't need the big
   top gap the inter-group labels use. */
.hm-nav-grp:first-child {
    padding-top: 8px;
}

.hm-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 11px;
    border-radius: 3px;
    color: #c7ccd3;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    position: relative;
    transition: background 0.12s, color 0.12s;
}

.hm-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.hm-nav-icon {
    height: 17px;
    width: 17px;
    flex: none;
    color: var(--plt-faint-ink);
    opacity: 0.85;
}

.hm-nav-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hm-nav-item.hm-active {
    background: rgba(255, 211, 105, 0.10);
    color: #ffffff;
}

/* The mockup's active marker: a short, rounded gold bar in the left gutter
   (not a full-height inset rail). */
.hm-nav-item.hm-active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--plt-gold);
}

.hm-nav-item.hm-active .hm-nav-icon {
    color: var(--plt-gold);
    opacity: 1;
}

.hm-nav-badge {
    flex: none;
    font-family: var(--plt-mono);
    font-size: 10.5px;
    font-weight: 600;
    background: var(--plt-gold);
    color: var(--plt-ink);
    border-radius: 100px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    padding: 0 5px;
}

/* ===== portal nav compaction ===============================================
   The space-between distribution above is tuned for the admin's seven flat
   cluster items. The portals only carry 2–4 items, which space-between flings
   to the sidebar's far corners — top-align and tighten those panels instead.
   The admin selectors are untouched. */
.hm-sidebar--borrower .hm-nav,
.hm-sidebar--broker .hm-nav,
.hm-sidebar--investor .hm-nav {
    justify-content: flex-start;
    gap: 2px;
}

.hm-sidebar--borrower .hm-nav-item,
.hm-sidebar--broker .hm-nav-item,
.hm-sidebar--investor .hm-nav-item {
    padding: 9px 11px;
}

/* ===== collapsed icon rail (desktop) =======================================
   When the sidebar is collapsed ($store.sidebar closed -> the aside loses its
   .fi-sidebar-open class), the brand wordmark, nav labels, badges and user meta
   are all hidden via x-show, so the aside can shrink to a slim icon rail. These
   rules pin its width and centre the remaining icons. Scoped to lg+ — on mobile
   the sidebar is a full-width off-canvas drawer, not a rail. */
@media (min-width: 1024px) {
    .hm-sidebar {
        transition: width 0.2s ease;
    }

    .hm-sidebar:not(.fi-sidebar-open) {
        width: 72px !important;
    }

    /* header: centre the expand chevron (brand link is x-show hidden) */
    .hm-sidebar:not(.fi-sidebar-open) .hm-sidebar-head {
        justify-content: center;
        padding-inline: 0;
    }

    /* nav: icon-only, centred */
    .hm-sidebar:not(.fi-sidebar-open) .hm-sidebar-nav {
        padding-inline: 10px;
    }

    .hm-sidebar:not(.fi-sidebar-open) .hm-nav-item {
        justify-content: center;
        padding-inline: 0;
    }

    /* the active gold gutter bar doesn't read in a centred rail — the tinted
       background + gold icon already mark the active item. */
    .hm-sidebar:not(.fi-sidebar-open) .hm-nav-item.hm-active::before {
        display: none;
    }

    /* user footer: just the avatar, centred */
    .hm-sidebar:not(.fi-sidebar-open) .hm-sidebar-user {
        justify-content: center;
        padding-inline: 0;
    }
}

/* ----- top bar: light paper, hairline ------------------------------------- */
.fi-topbar > nav {
    background-color: rgba(238, 238, 238, 0.85);
    backdrop-filter: saturate(1.3) blur(8px);
    border-bottom: 1px solid var(--plt-line);
    box-shadow: none;
}

/* Notifications bell in the topbar (mockup's .iconbtn) — a bordered paper
   button on the right, with a gold count badge for queued notifications. */
.hm-topbar-bell {
    position: relative;
    flex: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--plt-line);
    border-radius: var(--se-radius-sm);
    background-color: var(--plt-card);
    display: grid;
    place-items: center;
    color: var(--plt-faint);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}

.hm-topbar-bell:hover {
    color: var(--plt-ink);
    border-color: rgba(34, 40, 49, 0.28);
}

.hm-topbar-bell svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
}

.hm-topbar-bell-badge {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 100px;
    background-color: var(--plt-gold);
    color: var(--plt-ink);
    font-family: var(--plt-label);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    display: grid;
    place-items: center;
}

/* Breadcrumbs are mirrored into the topbar (.hm-topbar-crumbs by the
   topbar-breadcrumbs view); hide the original in the page header. */
.fi-main .fi-breadcrumbs,
.fi-header .fi-breadcrumbs {
    display: none !important;
}

.hm-topbar-crumbs {
    display: flex;
    align-items: center;
    min-width: 0;
}

.hm-topbar-crumbs .fi-breadcrumbs-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-topbar-crumbs a,
.hm-topbar-crumbs .fi-breadcrumbs-item {
    font-family: var(--plt-label);
    font-size: 12.5px;
    color: var(--plt-faint);
    white-space: nowrap;
}

.hm-topbar-crumbs a:hover {
    color: var(--plt-ink);
}

.hm-topbar-crumbs .fi-breadcrumbs-item:last-child,
.hm-topbar-crumbs .fi-breadcrumbs-item:last-child a {
    color: var(--plt-ink);
    font-weight: 600;
}

/* ----- cluster body tabs (Top sub-navigation) ----------------------------- */
/* Filament renders these as a centered white pill bar with a faint active
   state; repaint as a left-aligned underline tab bar so the body is full width
   and the active tab reads clearly. Scoped to the sub-nav so form tabs are
   untouched. */
.fi-page-sub-navigation-tabs {
    margin-inline: 0 !important;
    max-width: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--plt-line) !important;
    padding: 0 !important;
    gap: 2px !important;
    /* Filament sets overflow-x:auto here; with overflow-y:visible the browser
       promotes overflow-y to auto, so the active tab's -1px underline overlap
       triggers a phantom 1px vertical scrollbar. Force both visible. */
    overflow: visible !important;
}

.fi-page-sub-navigation-tabs .fi-tabs-item {
    border-radius: 0 !important;
    padding: 10px 14px !important;
    margin-bottom: -1px;
    background: transparent !important;
    color: var(--plt-faint) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid transparent !important;
}

.fi-page-sub-navigation-tabs .fi-tabs-item:hover {
    color: var(--plt-ink) !important;
}

.fi-page-sub-navigation-tabs .fi-tabs-item.fi-tabs-item-active {
    color: var(--plt-ink) !important;
    border-bottom-color: var(--plt-gold) !important;
}

.fi-page-sub-navigation-tabs .fi-tabs-item-icon {
    height: 16px !important;
    width: 16px !important;
}

.fi-page-sub-navigation-tabs .fi-tabs-item.fi-tabs-item-active .fi-tabs-item-icon {
    color: var(--plt-ink) !important;
}

.fi-page-sub-navigation-tabs .fi-tabs-item:not(.fi-tabs-item-active) .fi-tabs-item-icon {
    color: var(--plt-faint) !important;
}

/* ----- tables: Stripe-clean ----------------------------------------------- */
.fi-ta-header-cell-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--plt-faint);
}

.fi-ta-row:hover {
    background-color: #faf9f7;
}

/* Mockup signature: contract references and money/figure columns render in
   IBM Plex Mono (the .ref / .num voice), references a touch heavier in ink. */
.fi-table-cell-reference .fi-ta-text-item-label,
.fi-table-cell-amount-financed .fi-ta-text-item-label,
.fi-table-cell-apr .fi-ta-text-item-label,
.fi-table-cell-payment-amount .fi-ta-text-item-label {
    font-family: var(--plt-mono);
}

.fi-table-cell-reference .fi-ta-text-item-label {
    font-weight: 500;
    color: var(--plt-ink);
}

/* ----- KPI / stat widgets ------------------------------------------------- */
.fi-wi-stats-overview-stat-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--plt-faint);
}

.fi-wi-stats-overview-stat-value {
    font-family: var(--plt-mono);
    font-weight: 600;
    /* Mockup KPI values are a restrained 23px mono, not Filament's 30px text-3xl. */
    font-size: 1.45rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--plt-ink);
}

/* KPI delta/context line — small and quiet (mockup .kpi .d). Colour is left to
   Filament's stat colour, so the "past due" danger stat reads red. */
.fi-wi-stats-overview-stat-description {
    font-size: 11.5px;
    margin-top: 4px;
}

/* ===== report panel (full-width collapsible page report — mockup signature) = */
.hm-report {
    background-color: var(--plt-card);
    border: 1px solid var(--plt-line);
    border-radius: var(--se-radius);
    box-shadow: 0 1px 0 rgba(34, 40, 49, 0.03), 0 14px 36px -28px rgba(34, 40, 49, 0.42);
    overflow: hidden;
}

.hm-report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    cursor: pointer;
    user-select: none;
}

.hm-report-head-title {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.hm-report-icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--se-radius);
    background-color: var(--plt-gold-soft);
    display: grid;
    place-items: center;
    color: var(--plt-ink);
}

.hm-report-heading {
    font-family: var(--plt-label);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--plt-ink);
    white-space: nowrap;
}

.hm-report-caption {
    font-size: 12px;
    color: var(--plt-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-report-chev {
    flex: none;
    color: var(--plt-faint);
    transition: transform 0.2s;
}

.hm-report-body {
    padding: 16px 18px 18px;
    border-top: 1px solid var(--plt-line);
}

.hm-report-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 14px 22px;
}

.hm-report-metric-label {
    font-family: var(--plt-label);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--plt-faint);
}

.hm-report-metric-value {
    font-family: var(--plt-mono);
    font-weight: 600;
    font-size: 1.45rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--plt-ink);
    margin-top: 7px;
}

.hm-report-metric-delta {
    font-size: 11.5px;
    margin-top: 4px;
}

.hm-tone-good {
    color: #1f8a4c;
}

.hm-tone-bad {
    color: #c0392b;
}

.hm-tone-neutral {
    color: var(--plt-faint);
}

.hm-report-visual {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--plt-line);
}

.hm-report-bars {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.hm-report-bars-title {
    font-family: var(--plt-label);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    font-weight: 600;
    color: var(--plt-faint);
    margin-bottom: 2px;
}

.hm-report-bar-row {
    display: grid;
    grid-template-columns: 170px 1fr auto;
    align-items: center;
    gap: 12px;
}

.hm-report-bar-label {
    font-size: 12.5px;
    color: var(--plt-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-report-bar-track {
    height: 8px;
    border-radius: 100px;
    background: rgba(34, 40, 49, 0.06);
    overflow: hidden;
}

.hm-report-bar-fill {
    display: block;
    height: 100%;
    border-radius: 100px;
    min-width: 2px;
}

.hm-report-bar-value {
    font-family: var(--plt-mono);
    font-size: 12.5px;
    color: var(--plt-ink);
    text-align: right;
    white-space: nowrap;
}

.hm-report-legend {
    display: flex;
    gap: 18px;
    padding: 2px 2px 12px;
    font-size: 11.5px;
    color: var(--plt-faint);
}

.hm-report-legend i {
    display: inline-block;
    width: 18px;
    height: 3px;
    border-radius: 2px;
    margin-right: 7px;
    vertical-align: middle;
}

.hm-report-empty {
    text-align: center;
    font-size: 12px;
    color: var(--plt-faint);
    padding: 8px 0 2px;
}

/* ===== dashboard command centre ============================================ */
.hm-dash {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* hero KPI band — hairline-divided cells on one card. 6 KPIs, so 2 / 3 / 6
   columns by width — all divide evenly into 6, never an orphan cell. */
.hm-dash-hero {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--plt-line);
    border: 1px solid var(--plt-line);
    border-radius: var(--se-radius);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(34, 40, 49, 0.03), 0 14px 36px -28px rgba(34, 40, 49, 0.42);
}

@media (min-width: 768px) {
    .hm-dash-hero {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .hm-dash-hero {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Variant for bands with a count that doesn't divide into 6 (e.g. the Portfolio
   Reports page's 5 KPIs) — fill the row evenly with no trailing empty cell.
   Higher specificity than the base rules above, so it wins at every width. */
.hm-dash-hero.hm-hero-fit {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.hm-dash-hero-kpi {
    background: var(--plt-card);
    padding: 16px 18px;
}

.hm-dash-hero-label {
    font-family: var(--plt-label);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
    font-weight: 600;
    color: var(--plt-faint);
}

.hm-dash-hero-value {
    font-family: var(--plt-mono);
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--plt-ink);
    margin-top: 8px;
}

/* area cards grid */
.hm-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.hm-dash-card {
    display: block;
    background: var(--plt-card);
    border: 1px solid var(--plt-line);
    border-left: 3px solid var(--plt-gold);
    border-radius: var(--se-radius);
    padding: 16px 18px 18px;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(34, 40, 49, 0.03);
    transition: box-shadow 0.15s, transform 0.15s;
}

.hm-dash-card:hover {
    box-shadow: 0 1px 0 rgba(34, 40, 49, 0.03), 0 18px 40px -24px rgba(34, 40, 49, 0.5);
    transform: translateY(-2px);
}

.hm-dash-card.hm-accent-bad {
    border-left-color: #c0392b;
}

.hm-dash-card.hm-accent-good {
    border-left-color: #1f8a4c;
}

.hm-dash-card.hm-accent-ink {
    border-left-color: var(--plt-ink-2);
}

.hm-dash-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.hm-dash-card-icon {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: var(--se-radius);
    background: var(--plt-gold-soft);
    display: grid;
    place-items: center;
    color: var(--plt-ink);
}

.hm-accent-bad .hm-dash-card-icon {
    background: rgba(192, 57, 43, 0.12);
    color: #c0392b;
}

.hm-accent-good .hm-dash-card-icon {
    background: rgba(31, 138, 76, 0.12);
    color: #1f8a4c;
}

.hm-accent-ink .hm-dash-card-icon {
    background: rgba(34, 40, 49, 0.08);
    color: var(--plt-ink-2);
}

.hm-dash-card-title {
    flex: 1;
    font-family: var(--plt-label);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--plt-ink);
}

.hm-dash-card-arrow {
    flex: none;
    color: rgba(34, 40, 49, 0.3);
    transition: transform 0.15s, color 0.15s;
}

.hm-dash-card:hover .hm-dash-card-arrow {
    color: var(--plt-ink);
    transform: translateX(3px);
}

.hm-dash-card-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.hm-dash-card-metric-value {
    font-family: var(--plt-mono);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--plt-ink);
    letter-spacing: -0.01em;
}

.hm-dash-card-metric-label {
    font-family: var(--plt-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 9px;
    font-weight: 600;
    color: var(--plt-faint);
    margin-top: 3px;
}

/* ===== export cards (Portfolio Reports page) =============================== */
.hm-export-head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.hm-export-section-title {
    font-family: var(--plt-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 12px;
    font-weight: 600;
    color: var(--plt-ink);
}

.hm-export-section-note {
    font-size: 12px;
    color: var(--plt-faint);
}

.hm-export-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.hm-export-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    background: var(--plt-card);
    border: 1px solid var(--plt-line);
    border-radius: var(--se-radius);
    padding: 16px 18px;
    box-shadow: 0 1px 0 rgba(34, 40, 49, 0.03);
}

.hm-export-card-body {
    display: flex;
    gap: 11px;
}

.hm-export-icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--se-radius);
    background: var(--plt-gold-soft);
    display: grid;
    place-items: center;
    color: var(--plt-ink);
}

.hm-export-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.7;
    fill: none;
}

.hm-export-title {
    font-family: var(--plt-label);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--plt-ink);
}

.hm-export-desc {
    font-size: 12.5px;
    color: var(--plt-faint);
    margin-top: 3px;
    line-height: 1.45;
}

.hm-export-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ===== custom-view pages: intro note, controls, raw data tables, pills =======
   For bespoke Blade pages (Reports cluster, Kanban) whose hand-rolled markup
   doesn't get Filament's component styling. Mirrors the mockup table voice. */
.hm-page-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.hm-page-note {
    font-size: 13px;
    line-height: 1.55;
    color: var(--plt-faint);
    max-width: 64ch;
}

.hm-page-note .em {
    color: var(--plt-ink-2);
    font-weight: 600;
}

.hm-page-control {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hm-page-control label {
    font-family: var(--plt-label);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    font-weight: 600;
    color: var(--plt-faint);
}

.hm-select {
    font-family: var(--plt-sans);
    font-size: 13px;
    color: var(--plt-ink);
    background-color: var(--plt-card);
    border: 1px solid var(--plt-line);
    border-radius: var(--se-radius-sm);
    padding: 7px 11px;
}

.hm-table-card {
    background-color: var(--plt-card);
    border: 1px solid var(--plt-line);
    border-radius: var(--se-radius);
    box-shadow: 0 1px 0 rgba(34, 40, 49, 0.03), 0 14px 36px -28px rgba(34, 40, 49, 0.42);
    overflow: hidden;
}

.hm-table-scroll {
    overflow-x: auto;
}

.hm-table {
    width: 100%;
    border-collapse: collapse;
}

.hm-table thead th {
    font-family: var(--plt-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--plt-faint);
    text-align: left;
    padding: 11px 16px;
    border-bottom: 1px solid var(--plt-line);
    white-space: nowrap;
}

.hm-table th.r,
.hm-table td.r {
    text-align: right;
}

.hm-table th.c,
.hm-table td.c {
    text-align: center;
}

.hm-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--plt-line);
    font-size: 13px;
    color: var(--plt-ink-2);
    vertical-align: middle;
}

.hm-table tbody tr:last-child td {
    border-bottom: 0;
}

.hm-table tbody tr:hover {
    background-color: #faf9f7;
}

.hm-table .mono {
    font-family: var(--plt-mono);
    font-size: 12.5px;
    color: var(--plt-ink);
}

.hm-table .ref {
    font-family: var(--plt-mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--plt-ink);
}

.hm-table .strong {
    font-weight: 600;
    color: var(--plt-ink);
}

.hm-table a {
    color: var(--plt-ink);
    text-decoration: none;
    font-weight: 500;
}

.hm-table a:hover {
    text-decoration: underline;
}

.hm-table-empty {
    padding: 44px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--plt-faint);
}

.hm-pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--plt-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 100px;
    background-color: var(--plt-paper-2, #e7e7e7);
    color: var(--plt-ink-2);
    white-space: nowrap;
}

.hm-pill-good {
    background-color: rgba(31, 138, 76, 0.12);
    color: #1f8a4c;
}

.hm-pill-bad {
    background-color: rgba(192, 57, 43, 0.1);
    color: #c0392b;
}

.hm-pill-warn {
    background-color: rgba(200, 146, 42, 0.16);
    color: #8a6d1f;
}

/* ===== kanban board (Origination pipeline) ================================= */
.hm-kan-board {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.hm-kan-col {
    display: flex;
    flex-direction: column;
    width: 300px;
    flex: none;
    background-color: var(--plt-paper-2, #e7e7e7);
    border: 1px solid var(--plt-line);
    border-radius: var(--se-radius);
}

.hm-kan-col.hm-kan-over {
    outline: 2px solid var(--plt-gold);
    outline-offset: 1px;
}

.hm-kan-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--plt-line);
}

.hm-kan-col-head-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hm-kan-col-count {
    font-family: var(--plt-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--plt-faint);
}

.hm-kan-col-total {
    font-family: var(--plt-mono);
    font-size: 11px;
    color: var(--plt-faint);
}

.hm-kan-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    min-height: 6rem;
    flex: 1;
}

.hm-kan-card {
    cursor: grab;
    background-color: var(--plt-card);
    border: 1px solid var(--plt-line);
    border-radius: var(--se-radius-sm);
    padding: 11px 12px;
    box-shadow: 0 1px 0 rgba(34, 40, 49, 0.03);
    transition: box-shadow 0.15s, transform 0.15s;
}

.hm-kan-card:hover {
    box-shadow: 0 1px 0 rgba(34, 40, 49, 0.03), 0 14px 30px -22px rgba(34, 40, 49, 0.5);
    transform: translateY(-1px);
}

.hm-kan-card:active {
    cursor: grabbing;
}

.hm-kan-card.hm-kan-card-dragging {
    opacity: 0.4;
}

.hm-kan-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.hm-kan-ref {
    font-family: var(--plt-mono);
    font-size: 11px;
    font-weight: 600;
    color: #c8922a;
}

.hm-kan-age {
    font-size: 10px;
    color: var(--plt-faint);
}

.hm-kan-name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--plt-ink);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-kan-sub {
    font-size: 11.5px;
    color: var(--plt-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-kan-equip {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--plt-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-kan-equip svg {
    height: 13px;
    width: 13px;
    flex: none;
    color: var(--plt-faint);
    fill: currentColor;
}

.hm-kan-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

.hm-kan-amount {
    font-family: var(--plt-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--plt-ink);
}

.hm-kan-est {
    font-size: 10px;
    color: var(--plt-faint);
}

.hm-kan-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--plt-line);
}

.hm-kan-source {
    font-family: var(--plt-label);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--plt-faint);
}

.hm-kan-open {
    font-size: 11px;
    font-weight: 600;
    color: #c8922a;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s;
}

.hm-kan-card:hover .hm-kan-open {
    opacity: 1;
}

.hm-kan-open:hover {
    text-decoration: underline;
}

.hm-kan-empty {
    display: grid;
    place-items: center;
    flex: 1;
    padding: 16px;
    text-align: center;
    font-size: 11.5px;
    color: var(--plt-faint);
    border: 1px dashed var(--plt-line);
    border-radius: var(--se-radius-sm);
}

.hm-kan-closed-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--plt-faint);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.hm-kan-closed-toggle:hover {
    color: var(--plt-ink);
}

.hm-kan-closed-toggle svg {
    height: 15px;
    width: 15px;
    transition: transform 0.2s;
}

.hm-kan-closed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.hm-kan-closed-card {
    display: block;
    background-color: var(--plt-card);
    border: 1px solid var(--plt-line);
    border-radius: var(--se-radius-sm);
    padding: 11px 12px;
    text-decoration: none;
    opacity: 0.78;
    transition: opacity 0.15s;
}

.hm-kan-closed-card:hover {
    opacity: 1;
}

.hm-kan-closed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.hm-kan-closed-ref {
    font-family: var(--plt-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--plt-faint);
}

.hm-kan-closed-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--plt-ink-2);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-kan-foot-note {
    font-size: 11.5px;
    color: var(--plt-faint);
    margin-top: 14px;
}

/* ===== pipeline worklist cards (dealer-portal dashboard) ===================
   Ported from the Adina operations worklist, retoned to the PLT palette. */
.hm-ops {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hm-ops-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.hm-section-eyebrow {
    font-family: var(--plt-label);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--plt-ink);
}

.hm-section-note {
    font-size: 12px;
    color: var(--plt-faint);
}

.hm-ops-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 720px) {
    .hm-ops-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .hm-ops-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.hm-ops-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--plt-card);
    border: 1px solid var(--plt-line);
    border-radius: var(--se-radius);
    padding: 14px 15px 9px;
    box-shadow: 0 1px 0 rgba(34, 40, 49, 0.03), 0 14px 36px -28px rgba(34, 40, 49, 0.42);
}

/* tone bar across the card's top edge */
.hm-ops-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: var(--se-radius) var(--se-radius) 0 0;
    background: var(--plt-faint);
}

.hm-ops-card.is-debit::before {
    background: #c0392b;
}

.hm-ops-card.is-warn::before {
    background: #c8922a;
}

.hm-ops-card.is-credit::before {
    background: #1f8a4c;
}

.hm-ops-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
}

.hm-ops-icon {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--se-radius-sm);
    display: grid;
    place-items: center;
    background: var(--plt-paper);
    color: var(--plt-ink-2);
}

.is-debit .hm-ops-icon {
    background: rgba(192, 57, 43, 0.1);
    color: #c0392b;
}

.is-warn .hm-ops-icon {
    background: rgba(200, 146, 42, 0.16);
    color: #8a6d1f;
}

.is-credit .hm-ops-icon {
    background: rgba(31, 138, 76, 0.12);
    color: #1f8a4c;
}

.hm-ops-label {
    flex: 1;
    min-width: 0;
    font-family: var(--plt-label);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--plt-ink-2);
}

.hm-ops-count {
    flex: none;
    font-family: var(--plt-mono);
    font-weight: 700;
    font-size: 15px;
    color: var(--plt-ink);
}

.is-debit .hm-ops-count {
    color: #c0392b;
}

.is-warn .hm-ops-count {
    color: #8a6d1f;
}

.hm-ops-total-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 7px 0 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--plt-line);
}

.hm-ops-total {
    font-family: var(--plt-mono);
    font-size: 1.15rem;
    color: var(--plt-ink);
}

.hm-ops-total-cap {
    font-family: var(--plt-label);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 9px;
    color: var(--plt-faint);
}

.hm-ops-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.hm-ops-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    text-decoration: none;
    border-bottom: 1px solid var(--plt-line);
}

.hm-ops-list li:last-child .hm-ops-item {
    border-bottom: 0;
}

.hm-ops-item:hover .hm-ops-item-title {
    color: var(--plt-ink);
    text-decoration: underline;
}

.hm-ops-item-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hm-ops-item-ref {
    font-family: var(--plt-mono);
    font-size: 10.5px;
    color: var(--plt-faint);
}

.hm-ops-item-title {
    font-size: 12.5px;
    color: var(--plt-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22ch;
}

.hm-ops-item-meta {
    flex: none;
    font-size: 11px;
    color: var(--plt-faint);
    white-space: nowrap;
}

.is-debit .hm-ops-item-meta {
    color: #c0392b;
}

.is-warn .hm-ops-item-meta {
    color: #8a6d1f;
}

.hm-ops-more {
    font-size: 11px;
    color: var(--plt-faint);
    padding: 8px 0 4px;
}

.hm-ops-empty {
    font-size: 12px;
    color: var(--plt-faint);
    padding: 14px 0 16px;
}

/* ===== dealer referral-link card (broker dashboard) ========================= */
.hm-reflink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--plt-card);
    border: 1px solid var(--plt-line);
    border-radius: var(--se-radius);
    padding: 14px 16px;
    box-shadow: 0 1px 0 rgba(34, 40, 49, 0.03);
}

.hm-reflink-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hm-reflink-url {
    font-family: var(--plt-mono);
    font-size: 12px;
    color: var(--plt-ink);
    background: var(--plt-paper);
    border: 1px solid var(--plt-line);
    border-radius: var(--se-radius-sm);
    padding: 6px 9px;
    margin-top: 5px;
    overflow-wrap: anywhere;
}

.hm-reflink-copy {
    flex: none;
    font-family: var(--plt-label);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--plt-gold);
    color: var(--plt-ink);
    border: 0;
    border-radius: var(--se-radius-sm);
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.12s;
}

.hm-reflink-copy:hover {
    background: #efbb45;
}

/* ===== payoff-quote modal breakdown (customer portal) ======================= */
.hm-quote {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid var(--plt-line);
    border-radius: var(--se-radius);
    padding: 12px 14px;
    background: var(--plt-card);
}

.hm-quote-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    color: var(--plt-ink-2);
}

.hm-quote-row span:last-child {
    font-family: var(--plt-mono);
    color: var(--plt-ink);
}

.hm-quote-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 4px;
    padding-top: 9px;
    border-top: 1px solid var(--plt-line);
    font-weight: 600;
    color: var(--plt-ink);
}

.hm-quote-total span:last-child {
    font-family: var(--plt-mono);
    font-size: 1.05rem;
}

.hm-quote-note {
    font-size: 11.5px;
    color: var(--plt-faint);
    margin-top: 8px;
}

/* ----- buttons / badges / inputs ------------------------------------------ */
.fi-btn {
    border-radius: var(--se-radius-sm);
    font-weight: 600;
}

/* Primary CTAs in hi-vis gold with ink text (the mockup's "New contract"
   button). Gold fails AA as text, so it's only ever a fill with dark text. */
.fi-btn.fi-color-primary {
    background-color: var(--plt-gold) !important;
    color: var(--plt-ink) !important;
}

.fi-btn.fi-color-primary .fi-btn-label,
.fi-btn.fi-color-primary svg {
    color: var(--plt-ink) !important;
}

.fi-btn.fi-color-primary:hover {
    background-color: #efbb45 !important;
}

.fi-badge {
    font-family: var(--plt-label);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* Mockup badges are 10.5px pills, not Filament's 12px text-xs. */
    font-size: 10.5px;
    border-radius: 100px;
}

.fi-input,
.fi-select-input,
.fi-fo-field-wrp .fi-input {
    border-radius: var(--se-radius-sm);
}

/* ----- thin, subtle scrollbars -------------------------------------------- */
/* Replaces the chunky classic Windows scrollbar (with up/down arrow buttons)
   that shows on the far right when content scrolls — keeps the scroll, drops
   the clutter. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 40, 49, 0.26) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(34, 40, 49, 0.22);
    border: 2px solid transparent;
    border-radius: 10px;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(34, 40, 49, 0.4);
    background-clip: padding-box;
}

/* Lighter thumb on the dark charcoal sidebar. */
.fi-sidebar-nav {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    background-clip: padding-box;
}