/* ============================================================
   BondDesk — "Harbor Gold" skin
   ------------------------------------------------------------
   Loads AFTER bootstrap.min.css and site.css. Nothing in here
   changes markup structure or behavior; it only re-paints the
   Bootstrap 4 components the portal already uses.

   Two-token accent, and the split is not cosmetic:
     --bd-gold   (#fab95b) is 1.7:1 on white and 9.2:1 on the navy
                 chrome. It may fill a shape or paint a rule. It
                 must NEVER set text on the canvas.
     --bd-bronze (#8c5a09) is 5.9:1 on white. Everything that sets
                 text on a light ground uses this.
   If you find yourself writing `color: var(--bd-gold)` against a
   light background, you want --bd-bronze instead.
   ============================================================ */

/* ---------- 1. Self-hosted faces (CSP is script-src 'self';
              there is no font CDN available to this app) ---------- */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('webfonts/public-sans-latin-300-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('webfonts/public-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('webfonts/public-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('webfonts/public-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('webfonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('webfonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

/* ---------- 2. Tokens ---------- */
:root {
    /* chrome */
    --bd-chrome: #0e2338;
    --bd-chrome-2: #16324c;
    --bd-cfg: #ffffff;
    --bd-cfg-dim: #a8b6c4;
    /* canvas — warm-biased greys, so the gold does not read as a
       sticker applied to a cool page */
    --bd-canvas: #ffffff;
    --bd-surface: #f6f6f4;
    --bd-rule: #e7e5e0;
    --bd-rule-strong: #d2cfc7;
    --bd-ink: #1a1f26;
    --bd-dim: #5f6570;
    --bd-faint: #8e9099;
    /* accent */
    --bd-gold: #fab95b;
    --bd-gold-d: #e0a340;
    --bd-bronze: #8c5a09;
    --bd-bronze-d: #6f4707;
    --bd-on-gold: #0e2338;
    /* semantic — bands and chips */
    --bd-ok: #16764c;
    --bd-ok-bg: #e6f4ed;
    --bd-info: #1f5e8c;
    --bd-info-bg: #e8f0f7;
    --bd-warn: #8c5a09;
    --bd-warn-bg: #fbf1de;
    --bd-bad: #a83023;
    --bd-bad-bg: #fbeceb;
    --bd-off: #5f656d;
    --bd-off-bg: #f1f1ef;
    /* Voided needs its own hue. It cannot wear --bd-warn, because
       that is the bronze the links and buttons use — one colour
       would then mean "voided", "actionable" and "brand" at once.
       Warm taupe reads as closed-out without competing. */
    --bd-void: #6b5b45;
    /* shape */
    --bd-radius: 8px;
    --bd-radius-sm: 5px;
    --bd-shadow: 0 1px 2px rgba(26,31,38,.05), 0 6px 18px -10px rgba(26,31,38,.26);
    /* type */
    --bd-font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bd-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
}

/* ---------- 3. Base ---------- */
body {
    background-color: var(--bd-canvas);
    color: var(--bd-ink);
    font-family: var(--bd-font);
}

a {
    color: var(--bd-bronze);
}

a:hover, a:focus {
    color: var(--bd-bronze-d);
}

/* Identifiers line up digit under digit when they are set in the
   mono face: bond numbers, FEINs, entry numbers, amounts. */
.bd-id, .bd-num {
    font-family: var(--bd-mono);
    font-variant-numeric: tabular-nums;
}

.bd-num {
    text-align: right;
}

/* ---------- 4. Header chrome ----------
   Only the header's own navbars are re-painted. Every environment
   now renders the menu bar as bg-primary; the old per-environment
   tint (bg-secondary in Development, bg-success in Staging) is
   gone, replaced by the striped .env-banner below - the same one
   the IT Dashboard and SheaConnect show.                          */
header > nav.navbar.bg-white {
    background-color: var(--bd-chrome) !important;
    padding-top: .4rem;
    padding-bottom: .4rem;
}

header > nav.navbar.bg-primary {
    background-color: var(--bd-chrome-2) !important;
    padding-top: 0;
    padding-bottom: 0;
}

/* Top bar sits on navy, so everything inside it inverts. */
header > nav.navbar.bg-white,
header > nav.navbar.bg-white .navbar-nav .nav-link,
header > nav.navbar.bg-white .bd-acct-label {
    color: var(--bd-cfg-dim);
}

header > nav.navbar.bg-white .navbar-nav .nav-link:hover,
header > nav.navbar.bg-white .navbar-nav .nav-link:focus {
    color: var(--bd-cfg);
}

header > nav.navbar.bg-white .navbar-toggler {
    border-color: rgba(255,255,255,.3);
}

header > nav.navbar.bg-white .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Account switcher (Tom Select) on the dark bar. */
header .ts-wrapper .ts-control,
header .ts-wrapper.single .ts-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--bd-cfg) !important;
    font-weight: 600;
}

header .ts-wrapper .ts-control input {
    color: var(--bd-cfg) !important;
}

/* The dropdown panel drops back onto the light canvas. */
header .ts-dropdown {
    color: var(--bd-ink);
    border-radius: var(--bd-radius-sm);
}

/* Second bar: nav items. Bootstrap's .navbar-dark default of
   rgba(255,255,255,.5) lands at ~3.6:1 on the chrome — under AA for
   text this size. --bd-cfg-dim clears 6:1. */
header > nav.navbar .navbar-nav .nav-link {
    font-weight: 500;
    border-bottom: 2px solid transparent;
    padding-top: .65rem;
    padding-bottom: .65rem;
}

header > nav.navbar.navbar-dark .navbar-nav .nav-link {
    color: var(--bd-cfg-dim);
}

header > nav.navbar.navbar-dark .navbar-nav .nav-link:hover,
header > nav.navbar.navbar-dark .navbar-nav .nav-link:focus,
header > nav.navbar.navbar-dark .navbar-nav .nav-item.active > .nav-link {
    color: #fff;
}

header > nav.navbar.bg-primary .navbar-nav .nav-item.active > .nav-link,
header > nav.navbar.bg-primary .navbar-nav .nav-link:hover {
    border-bottom-color: var(--bd-gold);
    color: #fff;
}

/* ---------- 5. Wordmark ----------
   One weight break, no image asset.

   The LIGHT-ground treatment is the default, deliberately: the
   wordmark also renders on the white login card, and gold there
   would be 1.7:1. Gold is opted into only by the dark chrome rule
   below, so a new placement fails safe into bronze rather than
   into an unreadable mark.                                       */
/* The class is doubled to reach (0,2,0), which beats site.css's
   `a.navbar-brand { word-break: break-all; text-align: center }`
   at (0,1,1) — that rule would otherwise hyphenate the wordmark in
   a narrow header. Specificity, not order: site.css loads first
   but wins ties on the more specific selector. */
.bd-brand.bd-brand {
    font-size: 1.6rem;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--bd-ink);
    white-space: nowrap;
    word-break: normal;
    text-align: left;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

a.bd-brand:hover,
a.bd-brand:focus {
    color: var(--bd-ink);
    text-decoration: none;
}

.bd-brand .bd-brand-bond {
    font-weight: 300;
}

.bd-brand .bd-brand-desk {
    font-weight: 700;
    color: var(--bd-bronze);
}

/* On the navy chrome the gold is at 9.2:1 — its best ground. */
header > nav.navbar.bg-white .bd-brand,
header > nav.navbar.bg-white a.bd-brand:hover,
header > nav.navbar.bg-white a.bd-brand:focus {
    color: var(--bd-cfg);
}

header > nav.navbar.bg-white .bd-brand .bd-brand-desk {
    color: var(--bd-gold);
}

.bd-acct-label {
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
    /* The Tom Select control butts straight up against this label
       without it. */
    margin-right: .6rem;
}

/* ---------- 6. Buttons ----------
   Gold fills the primary action, with NAVY text on it. White on
   gold is 1.7:1; navy on gold is 9.2:1.                          */
.btn {
    border-radius: var(--bd-radius-sm);
    font-weight: 600;
}

.btn-primary {
    background-color: var(--bd-gold);
    border-color: var(--bd-gold);
    color: var(--bd-on-gold);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--bd-gold-d);
    border-color: var(--bd-gold-d);
    color: var(--bd-on-gold);
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 3px rgba(250,185,91,.45);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--bd-gold-d);
    border-color: var(--bd-gold-d);
    color: var(--bd-on-gold);
}

/* Bootstrap's .btn-primary:disabled restates #007bff, so without
   this a disabled primary reverts to blue mid-page. */
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--bd-gold);
    border-color: var(--bd-gold);
    color: var(--bd-on-gold);
    opacity: .5;
}

/* Destructive actions align to the same red as the "Needing
   Approval" band; Bootstrap's #dc3545 sat next to it as a second,
   brighter red. */
.btn-danger {
    background-color: var(--bd-bad);
    border-color: var(--bd-bad);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled).active,
.btn-danger:not(:disabled):not(.disabled):active,
.show > .btn-danger.dropdown-toggle {
    background-color: #8f2820;
    border-color: #8f2820;
}

.btn-danger:disabled,
.btn-danger.disabled {
    background-color: var(--bd-bad);
    border-color: var(--bd-bad);
    opacity: .5;
}

.btn-danger:focus,
.btn-danger.focus {
    box-shadow: 0 0 0 3px rgba(168,48,35,.35);
}

.btn-outline-primary {
    color: var(--bd-bronze);
    border-color: var(--bd-rule-strong);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--bd-bronze);
    border-color: var(--bd-bronze);
    color: #fff;
}

.btn-link {
    color: var(--bd-bronze);
}

.btn-link:hover {
    color: var(--bd-bronze-d);
}

/* ---------- 7. Cards ----------
   Replaces the flat 11px #C0C0C0 halo in site.css with a hairline
   rule and a tight, warm shadow.                                 */
.card {
    border-radius: var(--bd-radius);
    border: 1px solid var(--bd-rule);
    box-shadow: var(--bd-shadow);
}

.card-header {
    border-bottom: 1px solid var(--bd-rule);
    background-color: var(--bd-surface);
}

.card-footer {
    background-color: var(--bd-surface);
    border-top: 1px solid var(--bd-rule);
}

/* Bond status bands. Scoped to card headers so the Bootstrap
   contextual utilities keep their normal meaning everywhere else.
   The status → colour mapping itself is untouched; only the hues
   are restated in the BondDesk palette. All six clear 5.6:1 with
   white text.                                                    */
.card > .card-header.bg-success { background-color: var(--bd-ok) !important; color: #fff; }
.card > .card-header.bg-info { background-color: var(--bd-info) !important; color: #fff; }
.card > .card-header.bg-danger { background-color: var(--bd-bad) !important; color: #fff; }
.card > .card-header.bg-warning { background-color: var(--bd-void) !important; color: #fff; }
.card > .card-header.bg-secondary { background-color: var(--bd-off) !important; color: #fff; }
.card > .card-header.bg-dark { background-color: var(--bd-chrome) !important; color: #fff; }

.card > .card-header[class*="bg-"] .header-text {
    letter-spacing: .06em;
    font-size: 14px;
}

/* ---------- 8. Forms ---------- */
.form-control {
    border-color: var(--bd-rule-strong);
    border-radius: var(--bd-radius-sm);
    color: var(--bd-ink);
}

.form-control:focus {
    border: 1px solid var(--bd-gold-d);
    box-shadow: 0 0 0 3px rgba(250,185,91,.35);
}

.form-control-placeholder,
.form-control-placeholder-lg {
    color: var(--bd-dim);
}

.custom-select:focus {
    border-color: var(--bd-gold-d);
    box-shadow: 0 0 0 3px rgba(250,185,91,.35);
}

/* Keyboard focus has to stay visible now that the blue default
   outline is gone. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.dropdown-item:focus-visible {
    outline: 2px solid var(--bd-gold-d);
    outline-offset: 2px;
}

header > nav.navbar a:focus-visible {
    outline-color: var(--bd-gold);
}

/* ---------- 9. DataTables ----------
   site.css themes these with #007bff; the accent moves to gold for
   the header rule (a painted shape) and bronze for the sort caret
   and any text.                                                  */
table.dataTable thead th {
    background-color: var(--bd-surface);
    color: var(--bd-dim);
    border-bottom: 2px solid var(--bd-gold);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .7rem;
}

table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after {
    color: var(--bd-bronze);
}

table.dataTable tbody td {
    border-top: 1px solid var(--bd-rule);
}

table.dataTable.table-striped tbody tr:hover td {
    background-color: var(--bd-surface);
}

table.dataTable tbody td .btn-link {
    color: var(--bd-bronze);
}

.dataTables_paginate .page-item.active .page-link {
    background-color: var(--bd-bronze);
    border-color: var(--bd-bronze);
    color: #fff;
}

.dataTables_paginate .page-link {
    color: var(--bd-bronze);
}

.dataTables_length select:focus,
.dataTables_filter input:focus {
    border-color: var(--bd-gold-d);
    box-shadow: 0 0 0 2px rgba(250,185,91,.35);
    outline: none;
}

/* ---------- 10. Odds and ends ---------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--bd-chrome-2);
    border-color: var(--bd-chrome-2);
    color: #fff;
}

.dropdown-menu {
    border-radius: var(--bd-radius-sm);
    border-color: var(--bd-rule);
    box-shadow: var(--bd-shadow);
}

.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--bd-bronze);
    color: #fff;
}

.toast {
    border-radius: var(--bd-radius);
    border-color: var(--bd-rule);
}

.modal-content {
    border-radius: var(--bd-radius);
    border-color: var(--bd-rule);
}

.border-top,
.border-bottom {
    border-color: var(--bd-rule) !important;
}

.footer {
    color: var(--bd-faint);
    font-size: .8rem;
}

/* The Tom Select control on the light canvas (forms, not the
   header bar) should match .form-control. */
.ts-wrapper .ts-control {
    border-radius: var(--bd-radius-sm);
    border-color: var(--bd-rule-strong);
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ============================================================
   11. Dashboard — count tiles + bond grid
   ------------------------------------------------------------
   The dashboard was a 3x3 grid of bond cards; it is now a dense
   table. Status still reads before the text does, but through a
   3px rail on the leading cell plus a chip, rather than a
   full-width coloured card header.
   ============================================================ */

/* ---- count tiles (were the quick-filter button group) ---- */
.bd-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
    margin-top: 1rem;
}

.bd-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--bd-canvas);
    border: 1px solid var(--bd-rule);
    border-top: 3px solid var(--bd-rule-strong);
    border-radius: var(--bd-radius-sm);
    text-decoration: none;
    transition: border-color .12s, box-shadow .12s;
}

.bd-tile:hover,
.bd-tile:focus {
    text-decoration: none;
    box-shadow: var(--bd-shadow);
}

.bd-tile-label {
    font-size: 10.5px;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--bd-faint);
    /* Wraps rather than ellipsing: "Needing Approval" does not fit one line
       at this tile width, and a clipped filter name is worse than two lines.
       min-height keeps one- and two-line tiles the same height. */
    min-height: 2.4em;
    line-height: 1.2;
}

.bd-tile-value {
    font-family: var(--bd-mono);
    font-variant-numeric: tabular-nums;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--bd-ink);
}

/* Selected filter. Gold is the accent for "this is the active view";
   it is a border and a tint, never text. */
.bd-tile.is-active {
    border-color: var(--bd-gold-d);
    border-top-color: var(--bd-gold);
    background: #fffdf8;
}

/* Semantic top edge, matching the row rails below. */
.bd-tile.s-info { border-top-color: var(--bd-info); }
.bd-tile.s-bad { border-top-color: var(--bd-bad); }
.bd-tile.s-off { border-top-color: var(--bd-off); }
.bd-tile.s-void { border-top-color: var(--bd-void); }
.bd-tile.s-ok { border-top-color: var(--bd-ok); }

.bd-tile.s-bad .bd-tile-value { color: var(--bd-bad); }

/* ---- the bar between tiles and grid ---- */
.bd-gridbar {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 18px 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bd-rule);
}

.bd-gridbar-label {
    font-size: 10.5px;
    letter-spacing: .085em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--bd-faint);
}

.bd-gridbar-filter {
    font-size: 14px;
    font-weight: 600;
    color: var(--bd-ink);
}

.bd-gridbar-spacer { margin-left: auto; }

.bd-gridbar-count {
    font-family: var(--bd-mono);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    color: var(--bd-ink);
}

/* ---- the grid ---- */
/* The dashboard runs full width so twelve columns fit without a scroller.
   .container is capped at 1140px by Bootstrap; the grid needs more. */
body.page-dashboard .container-fluid > .container {
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
}

/* Deliberately NOT overflow-x: auto.
   overflow establishes a clipping box whether or not a scrollbar appears, so
   any row's Action dropdown that extended past the wrapper was cut off - and
   the last row's always did. Letting the page scroll on a narrow window is
   the cheaper trade than a grid whose row menus do not open. */
.bd-grid-wrap {
    background: var(--bd-canvas);
    border: 1px solid var(--bd-rule);
    border-radius: var(--bd-radius);
    box-shadow: var(--bd-shadow);
}

table.bd-grid {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

table.bd-grid thead th {
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--bd-dim);
    text-align: left;
    padding: 10px 10px;
    white-space: nowrap;
    background: var(--bd-surface);
    border-bottom: 2px solid var(--bd-gold);
}

table.bd-grid td {
    font-size: 12.5px;
    padding: 7px 10px;
    border-top: 1px solid var(--bd-rule);
    color: var(--bd-ink);
    white-space: nowrap;
    vertical-align: middle;
}

table.bd-grid tbody tr:hover td {
    background: var(--bd-surface);
}

/* Identifiers in mono so a column of bond numbers, FEINs and customs
   numbers lines up digit under digit when scanning. */
table.bd-grid td.bd-id {
    font-family: var(--bd-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
}

table.bd-grid td.bd-num {
    font-family: var(--bd-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    text-align: right;
}

table.bd-grid td.bd-clip {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* This column was position: sticky so it stayed reachable while the grid
   scrolled sideways. That made every action cell its own stacking context,
   and cells paint in DOM order - so an open row menu rendered UNDERNEATH the
   sticky cells of every row below it. The grid is full width now and does not
   scroll, so the column does not need pinning and the menus paint normally. */
table.bd-grid td.bd-actions,
table.bd-grid th.bd-th-action {
    white-space: nowrap;
}

table.bd-grid td.bd-actions .btn {
    font-weight: 600;
}

table.bd-grid td.bd-actions .void-button {
    margin-right: 4px;
}

/* ---- the status rail: state reads before the text does ---- */
th.bd-th-status { padding-left: 16px; }

td.bd-rail {
    position: relative;
    padding-left: 16px;
}

td.bd-rail::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--rail, transparent);
}

tr.s-ok      { --rail: var(--bd-ok); }
tr.s-info    { --rail: var(--bd-info); }
tr.s-bad     { --rail: var(--bd-bad); }
tr.s-off     { --rail: var(--bd-off); }
tr.s-void    { --rail: var(--bd-void); }
tr.s-unknown { --rail: var(--bd-chrome); }

.bd-chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2.5px 8px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--bd-off-bg);
    color: var(--bd-off);
}

tr.s-ok .bd-chip { background: var(--bd-ok-bg); color: var(--bd-ok); }
tr.s-info .bd-chip { background: var(--bd-info-bg); color: var(--bd-info); }
tr.s-bad .bd-chip { background: var(--bd-bad-bg); color: var(--bd-bad); }
tr.s-void .bd-chip { background: #efeae2; color: var(--bd-void); }
tr.s-unknown .bd-chip { background: var(--bd-off-bg); color: var(--bd-chrome); }

.bd-note-flag {
    color: var(--bd-faint);
    cursor: help;
}

/* ---- empty, error and skeleton states ---- */
td.bd-empty,
tr.bd-grid-error td {
    text-align: center;
    padding: 40px 16px;
    color: var(--bd-dim);
    font-size: 14px;
}

tr.bd-grid-error td { color: var(--bd-bad); }

/* Reserves scroll height per unloaded page - see _Lazy_Pages. */
tr.bd-skeleton-row td {
    height: 34px;
    border-top: 1px solid var(--bd-rule);
    background: linear-gradient(90deg, var(--bd-surface) 25%, #fbfbfa 50%, var(--bd-surface) 75%);
}

/* ============================================================
   12. Environment banner
   ------------------------------------------------------------
   Copied from the IT Dashboard and SheaConnect deliberately, down
   to the stripe geometry and the z-index. Three apps, one banner:
   "which environment am I in" should not have three answers.

   The amber is NOT the brand gold and is not meant to harmonise
   with it. This is a warning stripe and should read as one on
   whatever page it lands on.
   ============================================================ */
.env-banner {
    position: sticky;
    top: 0;
    z-index: 1080;
    width: 100%;
    padding: 0.35rem 1rem;
    background: repeating-linear-gradient(45deg, #ffb300, #ffb300 14px, #f59e0b 14px, #f59e0b 28px);
    color: #1a1a1a;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-align: center;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

.env-banner strong { font-weight: 700; }

.env-banner-host { margin-left: 0.75rem; opacity: 0.75; font-weight: 500; }

/* ============================================================
   13. Bootstrap contextual utilities
   ------------------------------------------------------------
   The skin re-painted the components it knew about (buttons,
   cards, tables, the header) but left Bootstrap's contextual
   utilities alone, so stock #007bff / #28a745 / #dc3545 kept
   leaking through on pages nobody had looked at yet: 36 uses of
   text-danger, 29 of btn-secondary, 19 of btn-success, 10 of
   text-primary across the views.

   Mapping them here brings every page in line at once. These are
   the same semantic tokens the bond status rails use, so a red in
   a validation message and a red on a held bond are finally the
   same red.

   Bootstrap's text-* and bg-* utilities carry !important, so
   overriding them requires it too.
   ============================================================ */

/* ---- text ---- */
.text-primary { color: var(--bd-bronze) !important; }
.text-success { color: var(--bd-ok) !important; }
.text-danger { color: var(--bd-bad) !important; }
.text-warning { color: var(--bd-warn) !important; }
.text-info { color: var(--bd-info) !important; }
.text-muted { color: var(--bd-dim) !important; }

/* ---- buttons ---- */
.btn-success {
    background-color: var(--bd-ok);
    border-color: var(--bd-ok);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active,
.show > .btn-success.dropdown-toggle {
    background-color: #11603d;
    border-color: #11603d;
}

.btn-success:focus,
.btn-success.focus {
    box-shadow: 0 0 0 3px rgba(22,118,76,.35);
}

.btn-success:disabled,
.btn-success.disabled {
    background-color: var(--bd-ok);
    border-color: var(--bd-ok);
    opacity: .5;
}

/* Cancel / Close / dismiss. Warm neutral so it sits with the
   canvas rather than against it. */
.btn-secondary {
    background-color: #6f6c65;
    border-color: #6f6c65;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle {
    background-color: #57544e;
    border-color: #57544e;
}

.btn-secondary:focus,
.btn-secondary.focus {
    box-shadow: 0 0 0 3px rgba(111,108,101,.35);
}

.btn-info {
    background-color: var(--bd-info);
    border-color: var(--bd-info);
}

.btn-info:hover,
.btn-info:focus {
    background-color: #184d73;
    border-color: #184d73;
}

.btn-warning {
    background-color: var(--bd-warn);
    border-color: var(--bd-warn);
    color: #fff;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #6f4707;
    border-color: #6f4707;
    color: #fff;
}

/* ---- badges ---- */
.badge-primary { background-color: var(--bd-bronze); }
.badge-secondary { background-color: var(--bd-off); }
.badge-success { background-color: var(--bd-ok); }
.badge-danger { background-color: var(--bd-bad); }
.badge-info { background-color: var(--bd-info); }
.badge-warning { background-color: var(--bd-warn); color: #fff; }

/* ---- alerts ---- */
.alert-primary { background-color: #fbf1de; border-color: #eddcb8; color: var(--bd-bronze); }
.alert-success { background-color: var(--bd-ok-bg); border-color: #bfddcf; color: #11603d; }
.alert-danger { background-color: var(--bd-bad-bg); border-color: #eec9c5; color: #8f2820; }
.alert-warning { background-color: var(--bd-warn-bg); border-color: #eddcb8; color: var(--bd-warn); }
.alert-info { background-color: var(--bd-info-bg); border-color: #c6d8e6; color: #184d73; }

/* ---- card headers using the brand colour ----
   AccountInformation dresses its section headers in bg-primary,
   which stayed stock Bootstrap blue against the navy chrome. */
.card > .card-header.bg-primary {
    background-color: var(--bd-chrome) !important;
    color: #fff;
}

.card > .card-header.bg-primary h4,
.card > .card-header.bg-primary h3 {
    margin-bottom: 0;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* ---- password strength meter (site.css / UpdatePassword) ---- */
.progress-bar-danger { background: var(--bd-bad); }
.progress-bar-warning { background: var(--bd-warn); }
.progress-bar-success { background: var(--bd-ok); }