/*
 * SOS Finance / Aquity Finserv theme
 * one colour system for the whole portal, loaded LAST in portal/template/app.blade.php and blank.blade.php
 * colours come from the Uniaquity logo: navy #1C2452 and teal #1F7F7A
 * light theme only, there is no dark mode on purpose
 * rules for new screens are in documentation/modules/ui-theme.md
 *
 * many pages have their own <style> block inside the body, that block comes after this file,
 * so some rules here start with "body" to win over a page rule with the same selector
 */

:root {
    /* brand */
    --brand-navy: #1C2452;
    --brand-navy-hover: #2A3470;
    --brand-navy-tint: #EEF0F8;
    --brand-teal: #1F7F7A;
    --brand-teal-dark: #176661;
    --brand-teal-tint: #E7F3F2;

    /* neutrals */
    --ink: #1A1F2E;
    --muted: #5B6475;
    --line: #E3E6EC;
    --line-strong: #CDD3DC;
    --page: #F6F7F9;
    --surface-muted: #F1F3F6;
    --card: #FFFFFF;

    /* status, only these four (plus grey for closed) */
    --success: #1E7B4F;
    --success-tint: #E6F4EC;
    --warning: #9A5B00;
    --warning-tint: #FDF1DC;
    --danger: #B42318;
    --danger-tint: #FDECEA;
    --info: #1F5FA8;
    --info-tint: #E8F0FB;
    --closed: #5B6475;
    --closed-tint: #EEF0F3;

    /* charts, same order on every page (direct, aggregator, totals, then the rest) */
    --chart-1: #1F7F7A;
    --chart-2: #E69F00;
    --chart-3: #1C2452;
    --chart-4: #56B4E9;
    --chart-5: #CC79A7;
    --chart-6: #D55E00;

    --radius: 10px;
    --radius-sm: 8px;
    --shadow-card: 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-raised: 0 4px 14px rgba(16, 24, 40, .08);
    --focus-ring: 0 0 0 3px rgba(31, 127, 122, .18);
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* bootstrap variables that some rules read */
    --bs-primary: var(--brand-navy);
    --bs-secondary: var(--muted);
    --bs-success: var(--success);
    --bs-info: var(--info);
    --bs-warning: var(--warning);
    --bs-danger: var(--danger);
    --bs-light: var(--surface-muted);
    --bs-dark: var(--ink);
    /* the old theme used --bs-orange as its main colour (dropdown toggles, modal close) */
    --bs-orange: var(--brand-navy);
    --bs-blue: var(--info);
    --bs-teal: var(--brand-teal);
    --bs-font-sans-serif: var(--font-sans);
}

/* ---------- base and typography ---------- */

html,
body {
    font-family: var(--font-sans);
}

body {
    color: var(--ink);
    background-color: var(--page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* no colour here on purpose, a heading inside a navy header has to stay white */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -.01em;
}

h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.3rem; }
h4, .h4 { font-size: 1.15rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .875rem; }

.display-8 { color: var(--brand-navy); font-weight: 600; }

.text-muted { color: var(--muted) !important; }

a {
    color: var(--brand-teal-dark);
}
a:hover {
    color: var(--brand-teal-dark);
}
.content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
    text-decoration: underline;
}

::selection {
    background-color: var(--brand-teal-tint);
    color: var(--ink);
}

hr { border-color: var(--line); opacity: 1; background-color: var(--line); }

/* numbers line up in tables, cards and inputs */
.table,
.table td,
.table th,
.card,
.badge,
.form-control,
.metric-value,
.overall-metric-value,
.stat-value,
.summary-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- preloader ---------- */

.preloader .preloader-icon {
    border-color: var(--brand-teal-tint);
    border-top-color: var(--brand-teal);
}
.preloader svg path { fill: var(--brand-navy); }

/* ---------- sidebar (navy) ---------- */

.menu {
    background-color: var(--brand-navy);
}
.menu-body .dropdown {
    background-color: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius);
}
.menu-body .dropdown > a,
.menu-body .dropdown > a .fw-bold {
    color: #fff;
}
.menu-body .dropdown > a .text-muted,
.menu-body .dropdown > a .bi {
    color: rgba(255, 255, 255, .65) !important;
}
.menu-body .dropdown .avatar img {
    background-color: #fff;
}
.menu-body ul li.menu-divider {
    color: rgba(255, 255, 255, .55);
    opacity: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.menu-body ul li > a {
    color: rgba(255, 255, 255, .82);
    border-radius: var(--radius-sm);
    border-right-color: transparent;
    font-size: 14.5px;
    font-weight: 500;
}
.menu-body ul li > a .nav-link-icon {
    color: rgba(255, 255, 255, .75);
}
.menu-body ul li > a .sub-menu-arrow {
    color: rgba(255, 255, 255, .6);
}
.menu-body ul li > a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, .06);
}
.menu-body ul li > a:hover .nav-link-icon {
    color: #fff;
}
.menu-body ul li > a.active {
    background: rgba(255, 255, 255, .10);
    color: #fff;
    border-left-color: var(--brand-teal);
    border-right-color: transparent;
}
.menu-body ul li > a.active .nav-link-icon {
    background-color: var(--brand-teal);
    color: #fff;
}
.menu-body ul li > a.disabled {
    color: rgba(255, 255, 255, .4);
}
.menu-header .menu-close-btn {
    background-color: rgba(255, 255, 255, .12);
    color: #fff;
}
.menu-header .menu-close-btn:hover { color: #fff; }

/* phone and tablet drawer, the old theme turned it white here */
@media (max-width: 1200px) {
    .menu { background-color: var(--brand-navy); }
    .menu-body .dropdown { background-color: rgba(255, 255, 255, .07); }
    .menu-body ul li > a.active .nav-link-icon { background-color: var(--brand-teal); }
}
body.hidden-menu .menu { background-color: var(--brand-navy); }
body.hidden-menu .menu .dropdown { background-color: rgba(255, 255, 255, .07); }

/* the dim layer behind the open drawer */
body:after { background: rgba(28, 36, 82, .35); }

/* ---------- header ---------- */

.header {
    background-color: var(--card);
    border-bottom: 1px solid var(--line);
}
.header .page-title {
    color: var(--brand-navy);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -.01em;
}
.header .menu-toggle-btn a { color: var(--brand-navy); }
.header .menu-toggle-btn a:hover { color: var(--brand-teal); }
.header .btn-link { color: var(--brand-navy); }
.header .btn-link:hover { color: var(--brand-teal); }
@media (max-width: 768px) {
    .header .page-title { font-size: 18px; }
}

.layout-wrapper > .content { padding-top: 1rem; }

footer.content-footer { color: var(--muted); }
footer.content-footer a { color: var(--brand-teal-dark); }

/* ---------- breadcrumb ---------- */

.breadcrumb-item,
.breadcrumb-item.active { color: var(--muted); }
.breadcrumb-item a { color: var(--brand-teal-dark); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--line-strong); }

/* ---------- bootstrap colour helpers ---------- */

.text-primary { color: var(--brand-navy) !important; }
.text-secondary { color: var(--muted) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-info { color: var(--info) !important; }
.text-dark { color: var(--ink) !important; }
.text-purple, .text-indigo, .text-pink { color: var(--brand-navy) !important; }
.text-teal, .text-cyan { color: var(--brand-teal) !important; }
.text-orange { color: var(--warning) !important; }

.bg-primary { background-color: var(--brand-navy) !important; }
.bg-secondary { background-color: var(--muted) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-dark { background-color: var(--ink) !important; }
.bg-light { background-color: var(--surface-muted) !important; }
.bg-purple, .bg-indigo, .bg-pink { background-color: var(--brand-navy) !important; }
.bg-teal, .bg-cyan { background-color: var(--brand-teal) !important; }
.bg-orange { background-color: var(--warning) !important; }
.bg-gradient { background-image: none !important; }

.border-primary { border-color: var(--brand-navy) !important; }
.border-success { border-color: var(--success) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-danger { border-color: var(--danger) !important; }
.border-info { border-color: var(--info) !important; }
.border-secondary { border-color: var(--line-strong) !important; }

/* ---------- buttons ---------- */
/* primary navy, success is the teal accent, secondary is white with a navy border, danger only for delete and reverse */

.btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    letter-spacing: .005em;
}
.btn:focus-visible { box-shadow: var(--focus-ring) !important; }

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
    color: #fff !important;
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:focus + .btn-primary,
.btn-check:checked + .btn-primary,
.show > .btn-primary.dropdown-toggle {
    color: #fff !important;
    background-color: var(--brand-navy-hover);
    border-color: var(--brand-navy-hover);
}

.btn-success,
.btn-success:disabled,
.btn-success.disabled {
    color: #fff !important;
    background-color: var(--brand-teal);
    border-color: var(--brand-teal);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-check:checked + .btn-success,
.show > .btn-success.dropdown-toggle {
    color: #fff !important;
    background-color: var(--brand-teal-dark);
    border-color: var(--brand-teal-dark);
}

.btn-secondary,
.btn-info,
.btn-warning,
.btn-light {
    color: var(--brand-navy) !important;
    background-color: #fff;
    border-color: var(--line-strong);
}
.btn-secondary,
.btn-info,
.btn-warning { border-color: var(--brand-navy); }
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active,
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active,
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active,
.btn-light:hover, .btn-light:focus, .btn-light:active {
    color: var(--brand-navy) !important;
    background-color: var(--brand-navy-tint);
    border-color: var(--brand-navy);
}

.btn-danger,
.btn-danger:disabled {
    color: #fff !important;
    background-color: var(--danger);
    border-color: var(--danger);
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    color: #fff !important;
    background-color: #931C13;
    border-color: #931C13;
}

.btn-dark {
    color: #fff !important;
    background-color: var(--ink);
    border-color: var(--ink);
}
.btn-dark:hover, .btn-dark:focus { background-color: #000; border-color: #000; }

.btn-outline-primary,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-dark {
    color: var(--brand-navy) !important;
    border-color: var(--brand-navy);
    background-color: #fff;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary,
.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active, .btn-outline-info.active,
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active, .btn-outline-warning.active,
.btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active, .btn-outline-dark.active {
    color: #fff !important;
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}

.btn-outline-success {
    color: var(--brand-teal-dark) !important;
    border-color: var(--brand-teal);
    background-color: #fff;
}
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active, .btn-outline-success.active,
.btn-check:checked + .btn-outline-success {
    color: #fff !important;
    background-color: var(--brand-teal);
    border-color: var(--brand-teal);
}

.btn-outline-secondary,
.btn-outline-light {
    color: var(--muted) !important;
    border-color: var(--line-strong);
    background-color: #fff;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary.active,
.btn-check:checked + .btn-outline-secondary,
.btn-outline-light:hover, .btn-outline-light:focus {
    color: var(--ink) !important;
    background-color: var(--surface-muted);
    border-color: var(--line-strong);
}

.btn-outline-danger {
    color: var(--danger) !important;
    border-color: var(--danger);
    background-color: #fff;
}
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active, .btn-outline-danger.active,
.btn-check:checked + .btn-outline-danger {
    color: #fff !important;
    background-color: var(--danger);
    border-color: var(--danger);
}

.btn-link { color: var(--brand-teal-dark); }
.btn-link:hover { color: var(--brand-teal-dark); }

/* split buttons inside lists (Edit + caret) */
.dataTable [data-bs-toggle="dropdown"] {
    color: var(--brand-navy);
    border-color: var(--line-strong);
}

/* ---------- badges and status pills ---------- */
/* every status colour is a tint with dark text, the same class gives the same colour on every screen */

.badge {
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: 999px;
}
.badge.bg-success { background-color: var(--success-tint) !important; color: var(--success) !important; }
.badge.bg-warning { background-color: var(--warning-tint) !important; color: var(--warning) !important; }
.badge.bg-danger { background-color: var(--danger-tint) !important; color: var(--danger) !important; }
.badge.bg-info,
.badge.bg-primary { background-color: var(--info-tint) !important; color: var(--info) !important; }
.badge.bg-secondary,
.badge.bg-light,
.badge.bg-dark { background-color: var(--closed-tint) !important; color: var(--closed) !important; }

/* counters (bell, menu) stay solid so they read as a number, not a status */
.badge.position-absolute.bg-danger,
.menu-body .badge.bg-danger { background-color: var(--danger) !important; color: #fff !important; }

/* status classes some report pages use */
.status-disbursed, .status-approved, .status-completed { background-color: var(--success-tint) !important; color: var(--success) !important; }
.status-pending, .status-document_pending { background-color: var(--warning-tint) !important; color: var(--warning) !important; }
.status-rejected, .status-reject, .status-cancel { background-color: var(--danger-tint) !important; color: var(--danger) !important; }
.status-login, .status-relogin, .status-open { background-color: var(--info-tint) !important; color: var(--info) !important; }

/* ---------- cards ---------- */

.card {
    background-color: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
.card .card {
    box-shadow: none;
}
.card-header {
    background-color: var(--card);
    border-bottom: 1px solid var(--line);
    color: var(--brand-navy);
    font-weight: 600;
}
.card-header:first-child {
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.card-footer {
    background-color: var(--card);
    border-top: 1px solid var(--line);
}
.card .card-title { font-weight: 600; }

/* coloured card headers were green, orange, blue, purple with no meaning, they are all navy now */
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-warning,
.card-header.bg-info,
.card-header.bg-danger,
.card-header.bg-secondary,
.card-header.bg-dark {
    background-color: var(--brand-navy) !important;
    color: #fff !important;
    border-bottom-color: var(--brand-navy);
}
.card-header.bg-primary *,
.card-header.bg-success *,
.card-header.bg-warning *,
.card-header.bg-info *,
.card-header.bg-danger *,
.card-header.bg-secondary *,
.card-header.bg-dark * {
    color: #fff;
}
.card.card-selected { box-shadow: 0 0 0 2px var(--brand-teal); }

/* ---------- stat cards above the lists ---------- */
/* white card, navy number, teal icon. the active filter card gets the teal tint and a teal border */

body .analytics-card,
body .analytics-loan,
body .analytics-payment,
body .analytics-repayment,
body .analytics-payout,
body .analytics-rto,
body .aggregator-loan,
body .insurance-payment {
    background-color: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
body .analytics-card:hover,
body .analytics-loan:hover,
body .analytics-payment:hover,
body .analytics-repayment:hover,
body .analytics-payout:hover,
body .analytics-rto:hover,
body .aggregator-loan:hover,
body .insurance-payment:hover {
    border-color: var(--brand-teal);
    box-shadow: var(--shadow-raised);
}
body .analytics-card .card-title,
body .analytics-loan .card-title,
body .analytics-payment .card-title,
body .analytics-repayment .card-title,
body .analytics-payout .card-title,
body .analytics-rto .card-title,
body .aggregator-loan .card-title,
body .insurance-payment .card-title {
    color: var(--muted);
    font-weight: 500;
}
body .analytics-card .bi,
body .analytics-loan .bi,
body .analytics-payment .bi,
body .analytics-repayment .bi,
body .analytics-payout .bi,
body .analytics-rto .bi,
body .aggregator-loan .bi,
body .insurance-payment .bi {
    color: var(--brand-teal) !important;
}
body .analytics-card label,
body .analytics-card b,
body .analytics-loan label,
body .analytics-loan b,
body .analytics-payment label,
body .analytics-payment b,
body .analytics-repayment label,
body .analytics-repayment b,
body .analytics-payout label,
body .analytics-payout b,
body .analytics-rto label,
body .analytics-rto b,
body .aggregator-loan label,
body .aggregator-loan b,
body .insurance-payment label,
body .insurance-payment b {
    color: var(--brand-navy);
    font-variant-numeric: tabular-nums;
}
body .analytics-card.active,
body .analytics-loan.active,
body .analytics-payment.active,
body .analytics-repayment.active,
body .analytics-payout.active,
body .analytics-rto.active,
body .aggregator-loan.active,
body .insurance-payment.active {
    background-color: var(--brand-teal-tint);
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 1px var(--brand-teal);
}
body .analytics-card.active .card-title,
body .analytics-loan.active .card-title,
body .analytics-payment.active .card-title,
body .analytics-repayment.active .card-title,
body .analytics-payout.active .card-title,
body .analytics-rto.active .card-title,
body .aggregator-loan.active .card-title,
body .insurance-payment.active .card-title {
    color: var(--brand-teal-dark);
}

/* ---------- report and analytics pages ---------- */
/* these pages had purple, green and orange gradient headers. now: navy header, white cards, teal icons */

body .overall-header,
body .overall-card-header,
body .section-header,
body .page-header,
body .report-header,
body .analytics-header,
body .analytics-table-header,
body .user-header,
body .sales-manager-header,
body .report-info-header,
body .report-table-header,
body .aggregator-header,
body .other-banks-header,
body .agent-month-analytics-header,
body .agent-analytics-header,
body .yearly-analytics-header {
    background: var(--brand-navy);
    color: #fff;
}
body .overall-card,
body .summary-card,
body .stat-card,
body .team-card,
body .analytics-table-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}
body .overall-card:hover,
body .team-card:hover {
    border-color: var(--brand-teal);
    box-shadow: var(--shadow-raised);
}
body .overall-metric,
body .metric-item {
    background: var(--page);
    border: 1px solid var(--line);
}
body .metric-item:hover {
    background: var(--card);
    border-color: var(--brand-teal);
    box-shadow: none;
}
body .metric-icon,
body .overall-metric-icon,
body .stat-icon,
body .agent-icon {
    background: var(--brand-teal-tint);
    color: var(--brand-teal);
}
body .metric-icon i,
body .overall-metric-icon i,
body .stat-icon i,
body .agent-icon i,
body .summary-icon,
body .summary-icon i {
    color: var(--brand-teal);
}
/* summary tiles on the analytics pages were white text on a gradient, now a white card with navy text */
body .summary-card {
    color: var(--ink);
}
body .summary-card .summary-title,
body .summary-card .summary-description {
    color: var(--muted);
    opacity: 1;
}
body .summary-icon { background: none; opacity: 1; }
body .metric-value,
body .overall-metric-value,
body .stat-value,
body .summary-value {
    color: var(--brand-navy);
}
body .metric-label,
body .overall-metric-label,
body .metric-description,
body .overall-metric-description {
    color: var(--muted);
}
body .team-badge {
    background: var(--brand-teal-tint);
    color: var(--brand-teal-dark);
}
body .team-leader-name,
body .team-name { color: var(--ink); }
body .team-leader-name i,
body .team-name i,
body .help-tooltip i,
body .section-title i,
body .empty-state i {
    color: var(--brand-teal);
}
body .card-clickable::after { background: var(--brand-teal); }
body .back-button {
    background: #fff;
    color: var(--brand-navy);
    border: 1px solid var(--brand-navy);
}
body .back-button:hover {
    background: var(--brand-navy);
    color: #fff;
}
body .total-row,
body .analytics-table tfoot tr {
    background: var(--brand-navy-tint);
    color: var(--ink);
    font-weight: 700;
}
body .total-row td,
body .analytics-table tfoot tr td,
body .analytics-table tfoot tr th {
    border-top: 2px solid var(--brand-navy);
}
body .analytics-table thead th,
body .report-table thead th {
    background: var(--brand-navy-tint);
    color: var(--brand-navy);
    border-bottom: 1px solid var(--line);
}
body .analytics-table tbody tr:hover,
body .clickable-row:hover {
    background: var(--brand-teal-tint);
}

/* ---------- tables ---------- */

.table {
    color: var(--ink);
    border-color: var(--line);
}
.table > :not(caption) > * > * {
    border-bottom-color: var(--line);
}
.table thead th,
.table > thead > tr > th {
    background-color: var(--brand-navy-tint);
    color: var(--brand-navy);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
}
.table.table-custom thead tr th {
    background-color: transparent;
}
.table thead.table-dark th,
.table > thead.table-dark > tr > th {
    background-color: var(--brand-navy);
    color: #fff;
}
.table > :not(:first-child) {
    border-top: 1px solid var(--line);
}
.table.table-striped > tbody > tr:nth-of-type(odd) > *,
.table.table-striped tbody tr:nth-of-type(odd) {
    background-color: #FAFBFC;
    --bs-table-accent-bg: #FAFBFC;
}
.table.table-hover > tbody > tr:hover > *,
table.dataTable tbody tr:hover > td {
    background-color: var(--brand-teal-tint);
    --bs-table-accent-bg: var(--brand-teal-tint);
}
.table tfoot th,
.table tfoot td,
.table tr.total th,
.table tr.totals th,
.table tr.total td,
.table tr.totals td {
    font-weight: 700;
    color: var(--ink);
    border-top: 2px solid var(--brand-navy);
}
.table-primary,
.table-primary > td,
.table-primary > th { background-color: var(--brand-navy-tint) !important; --bs-table-bg: var(--brand-navy-tint); color: var(--ink); }
.table-success,
.table-success > td,
.table-success > th { background-color: var(--success-tint) !important; --bs-table-bg: var(--success-tint); color: var(--ink); }
.table-warning,
.table-warning > td,
.table-warning > th { background-color: var(--warning-tint) !important; --bs-table-bg: var(--warning-tint); color: var(--ink); }
.table-danger,
.table-danger > td,
.table-danger > th { background-color: var(--danger-tint) !important; --bs-table-bg: var(--danger-tint); color: var(--ink); }
.table-info,
.table-info > td,
.table-info > th { background-color: var(--info-tint) !important; --bs-table-bg: var(--info-tint); color: var(--ink); }
.table-light,
.table-light > td,
.table-light > th,
.table-secondary,
.table-secondary > td,
.table-secondary > th { background-color: var(--surface-muted) !important; --bs-table-bg: var(--surface-muted); color: var(--ink); }
.table-dark,
.table-dark > td,
.table-dark > th { background-color: var(--brand-navy) !important; --bs-table-bg: var(--brand-navy); color: #fff; }
.table.table-custom tbody tr.tr-selected td { border-color: var(--brand-teal) !important; }

/* status rows (lists colour a whole row by state) */
body tr.border-warning { background: var(--warning-tint) !important; }
body tr.border-warning > td { border-color: #F0D9A8 !important; }
body tr.border-danger { background: var(--danger-tint) !important; }
body tr.border-danger > td { border-color: #F3C4BF !important; }
body tr.border-success { background: var(--success-tint) !important; }
body tr.border-success > td { border-color: #BFE0CD !important; }
body tr.border-info { background: var(--info-tint) !important; }
body tr.border-info > td { border-color: #C5D8F1 !important; }
body tr.border-black { background: var(--surface-muted) !important; }
body tr.border-black > td { border-color: var(--line-strong) !important; }

/* ---------- forms ---------- */

label,
.form-label {
    color: var(--ink);
    font-weight: 500;
}
.form-text { color: var(--muted); }

.form-control,
.form-select {
    color: var(--ink);
    border-color: var(--line-strong);
    border-radius: var(--radius-sm);
    background-color: #fff;
}
.form-control::placeholder { color: #8A93A3; }
.form-control:focus,
.form-select:focus {
    color: var(--ink);
    border-color: var(--brand-teal);
    box-shadow: var(--focus-ring);
    outline: 0;
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--surface-muted);
    color: var(--ink);
}
.form-check-input:checked {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}
.form-check-input:focus {
    border-color: var(--brand-teal);
    box-shadow: var(--focus-ring);
}
.form-switch .form-check-input:checked {
    background-color: var(--brand-teal);
    border-color: var(--brand-teal);
}
.input-group-text {
    background-color: var(--surface-muted);
    border-color: var(--line-strong);
    color: var(--muted);
}
.invalid-feedback { color: var(--danger); }
.is-invalid,
.form-control.is-invalid { border-color: var(--danger) !important; }
.valid-feedback { color: var(--success); }

/* forms never push the page sideways on a phone */
@media (max-width: 576px) {
    .form-control,
    .form-select,
    .select2-container {
        max-width: 100%;
    }
}

/* tom select (customer pickers) had maroon borders */
body #select-customer-ts-dropdown { border-color: var(--line-strong); }
body .focus .ts-control { border-color: var(--brand-teal); box-shadow: var(--focus-ring); }
body .ts-wrapper:not(.form-control, .form-select).single .ts-control { border-color: var(--line-strong); border-radius: var(--radius-sm); }
body .ts-dropdown .active { background-color: var(--brand-teal-tint); color: var(--ink); }
body [add_more]:focus { box-shadow: var(--focus-ring); }

/* ---------- select2 ---------- */

.select2.select2-container .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
}
.select2.select2-container.select2-container--focus .select2-selection,
.select2.select2-container.select2-container--open .select2-selection,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--brand-teal) !important;
    box-shadow: var(--focus-ring);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--brand-navy);
    color: #fff;
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected {
    background-color: var(--brand-navy-tint);
    color: var(--ink);
}
.select2-dropdown {
    border-color: var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-raised);
}
.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--brand-teal) !important;
    box-shadow: var(--focus-ring);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--brand-navy-tint);
    border: 1px solid var(--line);
    color: var(--brand-navy);
    border-radius: 6px;
}

/* ---------- datatables ---------- */

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--ink);
}
div.dataTables_wrapper div.dataTables_filter input:focus,
div.dataTables_wrapper div.dataTables_length select:focus {
    border-color: var(--brand-teal);
    box-shadow: var(--focus-ring);
    outline: 0;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--muted);
}
div.dataTables_wrapper div.dataTables_processing {
    background: #fff;
    color: var(--brand-navy);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-raised);
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before {
    color: var(--brand-navy);
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
    background-color: var(--brand-teal);
}
.dt-buttons .btn {
    color: var(--brand-navy) !important;
    background-color: #fff;
    border-color: var(--brand-navy);
}
.dt-buttons .btn:hover {
    background-color: var(--brand-navy-tint);
}

/* ---------- pagination ---------- */

.page-link {
    color: var(--brand-navy);
    border-color: var(--line);
    background-color: #fff;
}
.page-link:hover {
    color: var(--brand-navy);
    background-color: var(--brand-navy-tint);
    border-color: var(--line);
}
.page-link:focus { box-shadow: var(--focus-ring); }
.page-item.active .page-link {
    color: #fff;
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}
.page-item.disabled .page-link {
    color: #A0A7B4;
    background-color: #fff;
    border-color: var(--line);
}

/* ---------- tabs and pills ---------- */

.nav-tabs { border-bottom-color: var(--line); }
.nav-tabs .nav-link { color: var(--muted); }
.nav-tabs .nav-link:hover { color: var(--ink); border-color: transparent; }
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--brand-teal-dark);
    background-color: transparent;
    border-color: transparent transparent var(--brand-teal);
    border-bottom-width: 2px;
}
.nav.nav-pills .nav-item .nav-link.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: var(--brand-teal-tint);
    color: var(--brand-teal-dark);
}
.nav-link:not(.active) { color: var(--muted); }
.nav-link:not(.active):hover { color: var(--ink); }

/* ---------- dropdowns ---------- */

.dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-raised);
}
.dropdown-item { color: var(--ink); }
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--brand-navy-tint);
    color: var(--brand-navy);
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--brand-navy);
    color: #fff;
}
.dropdown-item.text-danger { color: var(--danger) !important; }

/* ---------- modals ---------- */

.modal-content {
    border-radius: var(--radius);
    border: 1px solid var(--line);
}
body .modal-header {
    background-color: var(--card);
    border-bottom: 1px solid var(--line);
}
.modal-title { color: var(--brand-navy); font-weight: 600; }
.modal-footer { border-top-color: var(--line); }
body .modal .close {
    border-color: var(--line-strong);
    color: var(--brand-navy);
}
body .modal .close:hover { background-color: var(--brand-navy-tint); }
.modal-backdrop.show { background-color: var(--brand-navy); opacity: .45; }

/* ---------- alerts ---------- */

.alert { border-radius: var(--radius-sm); }
.alert-success { background-color: var(--success-tint); border-color: #BFE0CD; color: var(--success); }
.alert-warning { background-color: var(--warning-tint); border-color: #F0D9A8; color: var(--warning); }
.alert-danger { background-color: var(--danger-tint); border-color: #F3C4BF; color: var(--danger); }
.alert-info,
.alert-primary { background-color: var(--info-tint); border-color: #C5D8F1; color: var(--info); }
.alert-secondary,
.alert-light { background-color: var(--surface-muted); border-color: var(--line); color: var(--ink); }

/* ---------- toasts (iziToast) ---------- */

.iziToast {
    background: #fff !important;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand-navy);
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-raised);
}
.iziToast::after { box-shadow: none !important; }
.iziToast > .iziToast-body .iziToast-title { color: var(--ink) !important; font-weight: 600; }
.iziToast > .iziToast-body .iziToast-message { color: var(--muted) !important; }
.iziToast.iziToast-color-green { border-left-color: var(--success); }
.iziToast.iziToast-color-green .iziToast-icon { color: var(--success); }
.iziToast.iziToast-color-red { border-left-color: var(--danger); }
.iziToast.iziToast-color-red .iziToast-icon { color: var(--danger); }
.iziToast.iziToast-color-yellow,
.iziToast.iziToast-color-orange { border-left-color: var(--warning); }
.iziToast.iziToast-color-yellow .iziToast-icon,
.iziToast.iziToast-color-orange .iziToast-icon { color: var(--warning); }
.iziToast.iziToast-color-blue { border-left-color: var(--info); }
.iziToast.iziToast-color-blue .iziToast-icon { color: var(--info); }
.iziToast > .iziToast-progressbar > div { background: var(--line-strong) !important; }

/* ---------- sweetalert (some pages confirm with it) ---------- */

.swal2-styled.swal2-confirm { background-color: var(--brand-navy) !important; border-radius: var(--radius-sm) !important; }
.swal2-styled.swal2-cancel { background-color: #fff !important; color: var(--brand-navy) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius-sm) !important; }
.swal2-styled:focus { box-shadow: var(--focus-ring) !important; }

/* ---------- progress, list groups, accordion ---------- */

.progress { background-color: var(--surface-muted); }
.progress-bar { background-color: var(--brand-teal); }
.list-group-item { border-color: var(--line); color: var(--ink); }
.list-group-item.active { background-color: var(--brand-navy); border-color: var(--brand-navy); }
.accordion-button:not(.collapsed) { color: var(--brand-navy); background-color: var(--brand-navy-tint); box-shadow: inset 0 -1px 0 var(--line); }
.accordion-button:focus { box-shadow: var(--focus-ring); border-color: var(--brand-teal); }

/* ---------- login page (blank template) ---------- */

body.auth {
    background-color: var(--brand-navy);
}
.auth .card {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(10, 14, 40, .35);
}
.auth .card .logo { padding: 2rem; }
.auth .form-control { padding-top: .7rem; padding-bottom: .7rem; }
.auth .btn-primary { padding-left: 1.5rem; padding-right: 1.5rem; }

/* ---------- phone width ---------- */

@media (max-width: 768px) {
    /* the page itself never scrolls sideways, wide tables scroll inside their own wrapper */
    .layout-wrapper,
    .layout-wrapper > .content { max-width: 100vw; }
    .list-scroll,
    .table-responsive,
    .insurance-table-wrapper,
    .dataTables_wrapper .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    div.dataTables_wrapper div.dataTables_filter input {
        width: 100%;
        max-width: 100%;
    }
    .card-header { padding: .7rem 1rem; }
    /* p-2 on the content was 8px, a bootstrap .row pulls out 12px each side and pushed the page 4px sideways */
    .layout-wrapper > .content.p-2 {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }
    /* long breadcrumbs wrap so the Refresh button stays on screen */
    nav[aria-label="breadcrumb"] > .d-flex { gap: .5rem; }
    nav[aria-label="breadcrumb"] > .d-flex > div:first-child { flex: 1 1 auto; min-width: 0; }
    nav[aria-label="breadcrumb"] > .d-flex > div:last-child { flex-shrink: 0; }
    nav[aria-label="breadcrumb"] .breadcrumb { flex-wrap: wrap; row-gap: .35rem; }
    /* the button rows above the lists (import, export, add) wrap instead of running off the screen */
    .content .d-flex.justify-content-end:not(.flex-nowrap) {
        flex-wrap: wrap;
    }
}