/* ==========================================================================
   Apriman shared UI primitives
   Design tokens plus the components used across redesigned pages: cards, the
   grid, pills, definition rows, tables and empty states. Page-specific pieces
   live in that page's own stylesheet (dashboard.css, borrower.css, ...).
   Loaded globally, so keep this file to things that are genuinely shared.
   ========================================================================== */

:root {
    --apx-ink: #101828;
    --apx-ink-2: #475467;
    --apx-muted: #8a94a6;
    --apx-line: #e6eaf2;
    --apx-surface: #ffffff;
    --apx-brand: #3a7afe;
    --apx-good: #12b76a;
    --apx-warn: #f79009;
    --apx-bad: #f04438;
    --apx-violet: #7839ee;
    --apx-teal: #0ba5ec;
}

/* Opt a page region into the design system. */
.apx-scope { color: var(--apx-ink); }
.apx-scope *,
.apx-scope *::before,
.apx-scope *::after { box-sizing: border-box; }

/* --- Grid ---------------------------------------------------------------- */
.apx-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.apx-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.apx-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.apx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.apx-grid-wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

@media (max-width: 1399px) {
    .apx-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .apx-grid-2,
    .apx-grid-3,
    .apx-grid-wide { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575px) {
    .apx-grid-4 { grid-template-columns: minmax(0, 1fr); }
}


/* --- Card ---------------------------------------------------------------- */
.apx-card {
    background: var(--apx-surface);
    border: 1px solid var(--apx-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.apx-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--apx-line);
}

.apx-card-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--apx-ink);
}

.apx-card-sub {
    font-size: 12.5px;
    color: var(--apx-muted);
    margin: 4px 0 0;
    line-height: 1.45;
}

.apx-card-body { padding: 20px; flex: 1 1 auto; min-width: 0; }
.apx-card-body--flush { padding: 4px 12px 12px; }


/* --- Pills / badges ------------------------------------------------------ */
.apx-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.apx-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.apx-pill--good { background: #e7f8f0; color: #067647; }
.apx-pill--warn { background: #fef4e6; color: #b54708; }
.apx-pill--bad { background: #fdeceb; color: #b42318; }
.apx-pill--neutral { background: #eef1f6; color: #475467; }

.apx-count {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef3ff;
    color: var(--apx-brand);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
}


/* --- Definition rows ----------------------------------------------------- */
.apx-rows { margin: 18px 0 0; padding: 0; list-style: none; }

.apx-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--apx-line);
    font-size: 13px;
}

.apx-row:first-child { border-top: 0; padding-top: 0; }
.apx-row dt { color: var(--apx-ink-2); font-weight: 500; margin: 0; }
.apx-row dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }


/* --- Table --------------------------------------------------------------- */
.apx-table-wrap { overflow-x: auto; }
.apx-table-wrap > .row { margin-left: 0; margin-right: 0; padding: 0 !important; }
.apx-table-wrap table.table { margin-bottom: 0; }

.apx-table-wrap table.table thead th {
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--apx-muted);
    font-weight: 700;
    border-bottom: 1px solid var(--apx-line);
    white-space: nowrap;
}

.apx-table-wrap table.table tbody td,
.apx-table-wrap table.table tbody th { font-size: 13px; vertical-align: middle; }


/* --- Empty state --------------------------------------------------------- */
.apx-empty { text-align: center; padding: 34px 20px; color: var(--apx-muted); }
.apx-empty p { margin: 8px 0 0; font-size: 13px; }
.apx-empty strong { display: block; color: var(--apx-ink-2); font-size: 14px; }


/* --- GPS capture (borrower add/edit forms) ------------------------------- */
.apx-gps-status { margin: 0; font-size: 12.5px; color: var(--apx-ink-2); }
.apx-gps-status--good { color: #067647; }
.apx-gps-status--warn { color: #b54708; }
.apx-gps-status--bad { color: #b42318; }


/* --- Section heading ----------------------------------------------------- */
.apx-section {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 26px 0 12px;
}

.apx-section h2 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--apx-muted);
    margin: 0;
}

.apx-section-note { font-size: 12.5px; color: var(--apx-muted); }


/* --- DataTables controls -------------------------------------------------- */
.apx-table-wrap .dt-buttons { margin: 8px 0 12px; display: inline-flex; flex-wrap: wrap; gap: 6px; }

.apx-table-wrap .dt-buttons .dt-button {
    background: #fff !important;
    border: 1px solid var(--apx-line) !important;
    border-radius: 8px !important;
    color: var(--apx-ink-2) !important;
    font-size: 12px !important;
    font-weight: 600;
    padding: 6px 12px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.apx-table-wrap .dt-buttons .dt-button:hover {
    background: #f5f8ff !important;
    border-color: #cfdcfb !important;
    color: var(--apx-brand) !important;
}

.apx-table-wrap .dataTables_filter { margin: 8px 0 12px; }

.apx-table-wrap .dataTables_filter label,
.apx-table-wrap .dataTables_info,
.apx-table-wrap .dataTables_length label { font-size: 12.5px; color: var(--apx-muted); }

.apx-table-wrap .dataTables_filter input {
    border: 1px solid var(--apx-line);
    border-radius: 8px;
    padding: 6px 10px;
    margin-left: 8px;
    font-size: 13px;
    outline: none;
}

.apx-table-wrap .dataTables_filter input:focus { border-color: #a9c4fd; }

/* DataTables paints its own striped background on the "no data" row. */
.apx-table-wrap .dataTables_empty {
    color: var(--apx-muted);
    font-size: 13px;
    padding: 28px 12px !important;
    background: transparent !important;
    box-shadow: none !important;
}
.apx-table-wrap .page-link { font-size: 13px; }


/* --- Inline status icon (sits next to text, e.g. "Paid" / "Late") -------- */
.apx-inline-icon { display: inline-block; vertical-align: -2px; margin-left: 4px; }
.apx-inline-icon--good { color: var(--apx-good); }
.apx-inline-icon--bad { color: var(--apx-bad); }
.apx-inline-icon--warn { color: var(--apx-warn); }


/* --- Icon chip ------------------------------------------------------------ */
.apx-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef3ff;
    color: var(--apx-brand);
}

.apx-icon svg { width: 20px; height: 20px; display: block; background: none; margin: 0; }

.apx-icon--good { background: #e7f8f0; color: var(--apx-good); }
.apx-icon--warn { background: #fef4e6; color: var(--apx-warn); }
.apx-icon--bad { background: #fdeceb; color: var(--apx-bad); }
.apx-icon--violet { background: #f2eaff; color: var(--apx-violet); }
.apx-icon--teal { background: #e6f6fe; color: var(--apx-teal); }

/* --- Portrait ------------------------------------------------------------- */
.apx-portrait {
    position: relative;
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
    border-radius: 14px;
    overflow: hidden;
    background: #eef3ff;
    border: 1px solid var(--apx-line);
}

.apx-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    background: none;
}

/* Shown when the borrower has no photo on file. */
.apx-portrait-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
    color: var(--apx-brand);
    letter-spacing: .02em;
}

.apx-presence {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: var(--apx-muted);
}

.apx-presence--on { background: var(--apx-good); }
.apx-presence--off { background: var(--apx-muted); }
.apx-presence--bad { background: var(--apx-bad); }


/* --- Identity ------------------------------------------------------------- */
.apx-hero-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 3px;
}

.apx-hero-name h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--apx-ink);
    margin: 0;
    line-height: 1.25;
}

.apx-hero-sub {
    font-size: 12.5px;
    color: var(--apx-muted);
    margin: 0 0 12px;
}

.apx-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.apx-meta li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--apx-ink-2);
    min-width: 0;
}

.apx-meta svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    color: var(--apx-muted);
    display: block;
    background: none;
    margin: 0;
}

.apx-meta a { color: var(--apx-ink-2); text-decoration: none; }
.apx-meta a:hover { color: var(--apx-brand); }


/* --- Hero actions --------------------------------------------------------- */
.apx-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.apx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border-radius: 9px;
    border: 1px solid var(--apx-line);
    background: #fff;
    color: var(--apx-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.apx-btn:hover { background: #f5f8ff; border-color: #cfdcfb; color: var(--apx-brand); }
.apx-btn svg { width: 15px; height: 15px; display: block; background: none; margin: 0; }

.apx-btn--good { background: var(--apx-good); border-color: var(--apx-good); color: #fff; }
.apx-btn--good:hover { background: #0e9f5c; border-color: #0e9f5c; color: #fff; }

.apx-btn--bad { background: #fff; border-color: #fbd3cf; color: #b42318; }
.apx-btn--bad:hover { background: #fef4f3; border-color: var(--apx-bad); color: #b42318; }

.apx-btn--dark { background: #101828; border-color: #101828; color: #fff; }
.apx-btn--dark:hover { background: #1d2939; border-color: #1d2939; color: #fff; }

/* The waive toggle rides along with Activate, so it reads as part of it. */
.apx-waive {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border: 1px dashed var(--apx-line);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
    color: var(--apx-ink-2);
    cursor: pointer;
    user-select: none;
}

.apx-waive input { margin: 0; cursor: pointer; }


/* ==========================================================================
   Global skin
   Everything below restyles PLAIN Bootstrap/Metronic markup (.table, .btn,
   .card, .modal, .badge, .alert, form controls, pagination, DataTables
   chrome) site-wide -- not gated behind .apx-scope. Most pages still use
   the original Bootstrap classes rather than the apx- component set above,
   and rewriting every template's markup is a much bigger job than
   restyling the classes they already use. This block is what makes those
   pages look current without that rewrite: same HTML, same tokens, same
   language as the redesigned pages.
   ========================================================================== */

/* --- Tables ---------------------------------------------------------------- */
.table {
    --bs-table-color: var(--apx-ink);
    font-size: 13.5px;
}

.table > :not(caption) > * > * { padding: 11px 14px; }

.table thead th {
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--apx-muted);
    font-weight: 700;
    background: #f9fafb;
    border-bottom: 1px solid var(--apx-line);
    white-space: nowrap;
}

.table.table-bordered { border: 1px solid var(--apx-line); }
.table.table-bordered th,
.table.table-bordered td { border-color: var(--apx-line); }

.table tbody tr:hover { background-color: #f9fbff; }
.table tbody td, .table tbody th { vertical-align: middle; color: var(--apx-ink-2); }

/* A table dropped straight into a page (not inside .apx-table-wrap or
   .table-responsive) still needs to scroll instead of blowing out the
   layout on a phone. */
table.dataTable, .table { max-width: 100%; }
.card-body > table.table,
.card-body > .dataTables_wrapper { overflow-x: auto; display: block; }

/* --- Buttons ---------------------------------------------------------------- */
.btn {
    border-radius: 9px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0;
    box-shadow: none !important;
}

.btn-sm { border-radius: 7px; font-size: 12px; }
.btn-lg { border-radius: 10px; }

.btn-primary {
    background-color: var(--apx-brand);
    border-color: var(--apx-brand);
}
.btn-primary:hover, .btn-primary:focus { background-color: #2f6fe0; border-color: #2f6fe0; }

.btn-success { background-color: var(--apx-good); border-color: var(--apx-good); }
.btn-danger { background-color: var(--apx-bad); border-color: var(--apx-bad); }
.btn-warning { background-color: var(--apx-warn); border-color: var(--apx-warn); color: #fff; }
.btn-dark { background-color: #101828; border-color: #101828; }

.btn-outline-primary, .btn-light-primary {
    color: var(--apx-brand);
    border-color: #cfdcfb;
    background-color: #f5f8ff;
}
.btn-outline-primary:hover, .btn-light-primary:hover { background-color: var(--apx-brand); border-color: var(--apx-brand); color: #fff; }

/* --- Cards (plain Bootstrap .card, distinct from .apx-card) ---------------- */
.card {
    border: 1px solid var(--apx-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid var(--apx-line);
    font-weight: 600;
    color: var(--apx-ink);
    padding: 16px 20px;
}

.card-body { padding: 20px; }
.card-title { color: var(--apx-ink); font-weight: 700; }

/* --- Modals ------------------------------------------------------------------ */
.modal-content { border: 0; border-radius: 14px; overflow: hidden; }

.modal-header {
    border-bottom: 1px solid var(--apx-line);
    padding: 16px 20px;
}

.modal-header .modal-title { font-size: 15px; font-weight: 700; color: var(--apx-ink); }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--apx-line); padding: 14px 20px; }

/* --- Badges / status pills --------------------------------------------------- */
.badge {
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .02em;
    padding: 4px 9px;
    border-radius: 999px;
}

.badge.bg-success, .badge-success { background-color: #e7f8f0 !important; color: #067647 !important; }
.badge.bg-danger, .badge-danger { background-color: #fdeceb !important; color: #b42318 !important; }
.badge.bg-warning, .badge-warning { background-color: #fef4e6 !important; color: #b54708 !important; }
.badge.bg-info, .badge-info { background-color: #e6f6fe !important; color: #0e6fa8 !important; }
.badge.bg-dark, .badge-dark { background-color: #eef1f6 !important; color: #344054 !important; }
.badge.bg-light, .badge-light { background-color: #eef1f6 !important; color: #475467 !important; }
.badge.bg-primary, .badge-primary { background-color: #eef3ff !important; color: var(--apx-brand) !important; }

/* --- Alerts (used for the {% if messages %} block on every page) ----------- */
.alert {
    border: 0;
    border-radius: 10px;
    border-left: 4px solid transparent;
    padding: 13px 16px;
    font-size: 13.5px;
}

.alert-success { background: #e7f8f0; color: #067647; border-left-color: var(--apx-good); }
.alert-danger, .alert-error { background: #fef4f3; color: #b42318; border-left-color: var(--apx-bad); }
.alert-warning { background: #fef4e6; color: #b54708; border-left-color: var(--apx-warn); }
.alert-info { background: #e6f6fe; color: #0e6fa8; border-left-color: var(--apx-teal); }

/* --- Form controls ----------------------------------------------------------- */
.form-control, .form-select,
select.form-control, .bootstrap-select > .btn {
    border-color: var(--apx-line);
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--apx-ink);
}

.form-control:focus, .form-select:focus, .bootstrap-select > .btn:focus {
    border-color: #9fd4f6;
    box-shadow: 0 0 0 3px rgba(0, 149, 232, .13);
}

.form-control.form-control-solid {
    background-color: #f4f6fa;
    border-color: transparent;
}
.form-control.form-control-solid:focus { background-color: #fff; border-color: #9fd4f6; }

label.control-label, .form-label, label { color: var(--apx-ink-2); font-size: 13px; font-weight: 600; }

/* --- Select2 (django-autocomplete-light autocomplete fields) --------------
   These widgets render a <span> carrying BOTH .form-control and Select2's
   own .select2-selection--single. The two fight: .form-control adds ~10px of
   vertical padding while Select2 hard-sets height:28px on the box and
   line-height:28px on the text inside it, so the selected text is pushed
   past the bottom edge and clipped (a sub-group / borrower name renders with
   its lower half sliced off). Let the padding set the height instead, and
   bring the border, radius and focus ring in line with every other input.
   Selectors carry .form-control for specificity: Select2's own stylesheet is
   pulled in by {{ form.media }} at the end of the body, so it loads after
   this file and would win any tie. */
.select2-container--default .select2-selection--single.form-control {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 0;
    border: 1px solid var(--apx-line);
    border-radius: 9px;
    background-color: #fff;
}

.select2-container--default .select2-selection--single.form-control .select2-selection__rendered {
    height: auto;
    /* Reserve one line even with nothing selected: the rendered span is empty
       until a choice is made, which would otherwise collapse the box to just
       its padding and leave a squashed, half-height field on every "add" form. */
    min-height: 1.5em;
    line-height: 1.5;
    padding-left: 0;
    padding-right: 20px;
    color: var(--apx-ink);
    font-size: 13.5px;
}

.select2-container--default .select2-selection--single.form-control .select2-selection__placeholder {
    color: var(--apx-muted);
}

/* The caret is absolutely positioned against a box that is no longer a fixed
   28px tall, so pin it to the full height and let it centre itself. */
.select2-container--default .select2-selection--single.form-control .select2-selection__arrow {
    top: 0;
    right: 8px;
    height: 100%;
}

.select2-container--default.select2-container--focus .select2-selection--single.form-control,
.select2-container--default.select2-container--open .select2-selection--single.form-control {
    border-color: #9fd4f6;
    box-shadow: 0 0 0 3px rgba(0, 149, 232, .13);
}

/* --- Select2 dropdown panel ------------------------------------------------ */
.select2-container--default .select2-dropdown {
    border-color: var(--apx-line);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
    overflow: hidden;
}

.select2-container--default .select2-results__option {
    font-size: 13.5px;
    padding: 8px 12px;
    color: var(--apx-ink-2);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: #f5f8ff;
    color: var(--apx-brand);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    background-color: #eef3ff;
    color: var(--apx-brand);
    font-weight: 600;
}

.select2-container--default .select2-search--dropdown { padding: 8px; }

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--apx-line);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13.5px;
    outline: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #9fd4f6;
    box-shadow: 0 0 0 3px rgba(0, 149, 232, .13);
}

/* --- File upload preview (opt-in via data-image-preview) ------------------ */
.apx-filepreview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--apx-line);
    border-radius: 10px;
    background: #fbfcfe;
}

.apx-filepreview[hidden] { display: none; }

.apx-filepreview img {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--apx-line);
    background: #fff;
    margin: 0;
    display: block;
}

.apx-filepreview-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Only shown for files with no thumbnail (a PDF). Truncates rather than
   stretching the row: download and camera filenames run very long. */
.apx-filepreview-name {
    font-size: 12px;
    color: var(--apx-ink-2);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apx-filepreview-name:empty { display: none; }

/* "3.4 MB -> 210 KB", or "Uploaded as-is" for a non-image. */
.apx-filepreview-note {
    font-size: 11px;
    color: var(--apx-muted);
    font-variant-numeric: tabular-nums;
}

.apx-filepreview-clear {
    border: 0;
    background: none;
    padding: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--apx-bad);
    cursor: pointer;
}

.apx-filepreview-clear:hover { text-decoration: underline; }
.apx-filepreview-clear[hidden] { display: none; }

/* --- Charges checkbox list -------------------------------------------------
   crispy renders this field as a bare stack of .form-check rows, which reads
   as a wall of loose checkboxes. Turned into a grid of selectable tiles: the
   whole tile is the click target, and the picked ones are obvious at a glance.
   Scoped to the field's crispy wrapper id so no other checkbox is touched.
   -------------------------------------------------------------------------- */
#div_id_charges > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
    gap: 8px;
    /* Some companies configure a lot of these; keep the form usable. */
    max-height: 264px;
    overflow-y: auto;
    padding: 2px;
}

#div_id_charges .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    min-height: 44px;
    border: 1px solid var(--apx-line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

#div_id_charges .form-check:hover { border-color: #cfdcfb; background: #f5f8ff; }

#div_id_charges .form-check-input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

/* Overrides the global `label` rule, which would render these semibold. */
#div_id_charges .form-check-label {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--apx-ink-2);
    cursor: pointer;
}

/* :has() is unsupported in older browsers -- they simply get no highlight,
   which costs nothing since the checkbox itself still shows the state. */
#div_id_charges .form-check:has(.form-check-input:checked) {
    border-color: var(--apx-brand);
    background: #eef3ff;
}

#div_id_charges .form-check:has(.form-check-input:checked) .form-check-label {
    color: var(--apx-ink);
    font-weight: 600;
}

#div_id_charges > label { display: block; margin-bottom: 8px; }
#div_id_charges .asteriskField { color: var(--apx-bad); margin-left: 2px; }


/* --- Figure row + progress bar ---------------------------------------------
   Shared primitives: a row of labelled figures, and a thin progress bar.
   Started life on the dashboard; the loan products page uses them as well. */
.apx-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--apx-line);
    border: 1px solid var(--apx-line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
}

@media (max-width: 575px) {
    .apx-figures { grid-template-columns: minmax(0, 1fr); }
}

/* In a side panel three figures across leaves no room for a currency value,
   so drop to two and let an odd last one take the whole row. */
.apx-figures-narrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.apx-figures-narrow > .apx-figure:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Full-width cards have room for a fourth figure; it folds to two on tablets. */
.apx-figures-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 991px) {
    .apx-figures-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.apx-figure { background: #fff; padding: 14px 16px; min-width: 0; }

.apx-figure-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--apx-muted);
    margin: 0 0 4px;
}

.apx-figure-value {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apx-figure-value .apx-cur { font-size: 12px; font-weight: 600; color: var(--apx-muted); margin-right: 3px; }

.apx-figure-note {
    font-size: 11.5px;
    color: var(--apx-muted);
    margin: 4px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* --- Progress ------------------------------------------------------------ */
.apx-progress {
    height: 10px;
    border-radius: 999px;
    background: #eef1f6;
    overflow: hidden;
}

.apx-progress-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--apx-brand), #6ea1ff);
    transition: width .5s ease;
}

.apx-progress-bar--good { background: linear-gradient(90deg, #12b76a, #4ad991); }
.apx-progress-bar--warn { background: linear-gradient(90deg, #f79009, #fdbe5c); }
.apx-progress-bar--bad { background: linear-gradient(90deg, #f04438, #fd8a80); }


/* --- Form helpers ----------------------------------------------------------- */
/* Required-field marker and the small grey note under an input. Shared: the
   add/edit loan pages and the loan detail modals all use them. */
.apx-req { color: var(--apx-bad); }

.apx-field-hint {
    font-size: 11.5px;
    color: var(--apx-muted);
    margin: 4px 0 0;
    line-height: 1.5;
}

/* --- Pagination --------------------------------------------------------------- */
.pagination .page-link {
    border-color: var(--apx-line);
    color: var(--apx-ink-2);
    font-size: 12.5px;
    border-radius: 8px;
    margin: 0 2px;
}
.pagination .page-item.active .page-link { background-color: var(--apx-brand); border-color: var(--apx-brand); }

/* --- DataTables chrome, applied globally (most pages don't wrap their
       table in .apx-table-wrap, so this can't be scoped to it) ------------- */
.dataTables_wrapper .dt-buttons { margin: 0 0 12px; display: inline-flex; flex-wrap: wrap; gap: 6px; }

.dataTables_wrapper .dt-buttons .dt-button {
    background: #fff !important;
    border: 1px solid var(--apx-line) !important;
    border-radius: 8px !important;
    color: var(--apx-ink-2) !important;
    font-size: 12px !important;
    font-weight: 600;
    padding: 6px 12px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dt-buttons .dt-button:hover {
    background: #f5f8ff !important;
    border-color: #cfdcfb !important;
    color: var(--apx-brand) !important;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length { margin: 0 0 12px; }

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label { font-size: 12.5px; color: var(--apx-muted); }

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--apx-line);
    border-radius: 8px;
    padding: 6px 10px;
    margin-left: 8px;
    font-size: 13px;
    outline: none;
}

.dataTables_wrapper .dataTables_filter input:focus { border-color: #9fd4f6; }

.dataTables_wrapper .dataTables_empty {
    color: var(--apx-muted);
    font-size: 13px;
    padding: 28px 12px !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* --- Generic empty state, usable without the full apx- card markup -------- */
.apx-empty-inline {
    text-align: center;
    padding: 34px 20px;
    color: var(--apx-muted);
    font-size: 13px;
}
.apx-empty-inline strong { display: block; color: var(--apx-ink-2); font-size: 14px; margin-bottom: 4px; }


/* --- Blacklist banner ----------------------------------------------------- */
.apx-banner {
    display: flex;
    gap: 13px;
    padding: 15px 18px;
    margin-bottom: 16px;
    border: 1px solid #fbd3cf;
    border-left: 4px solid var(--apx-bad);
    border-radius: 12px;
    background: #fef4f3;
}

.apx-banner svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    color: #b42318;
    margin-top: 1px;
    display: block;
    background: none;
}

.apx-banner-title { font-size: 14px; font-weight: 700; color: #912018; margin: 0; }
.apx-banner-text { font-size: 12.5px; color: #b42318; margin: 3px 0 0; line-height: 1.5; }
.apx-banner-text a { color: #912018; font-weight: 600; text-decoration: underline; }

/* Decline reason carried inline in a loan list row, under the borrower name. */
.apx-decline-note {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.45;
    color: #b42318;
}

/* --- Per-product health list (loan products page) -------------------------- */
.apx-prodlist { display: flex; flex-direction: column; gap: 14px; }

.apx-prodlist-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.apx-prodlist-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--apx-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apx-prodlist-meta {
    font-size: 11.5px;
    color: var(--apx-muted);
    margin: 3px 0 6px;
    font-variant-numeric: tabular-nums;
}

.apx-prodlist-item .apx-progress { height: 6px; }