/* ===== Theme CSS Variables ===== */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --navbar-bg: #004B87;
  --navbar-text: #ffffff;
  --hover-color: #dce775;
  --table-header-bg: #004B87;
  --table-header-text: white;
  --table-stripe: #f2f2f2;
  --dropdown-bg: #ffffff;
  --dropdown-text: #333;
  --border-color: #b3b3b3;
  --caption-color: #004B87;
  --input-border: black;
  --placeholder-color: #757575;
  --alert-info-color: #267092;
  --alert-info-bg: #d9edf7;
  --alert-danger-color: #8E3A39;
  --alert-danger-bg: #f2dede;
  --form-bg: #ffffff;
  /* Recovery Analytics Dashboard. The eight accents are a categorical
     palette validated colourblind-safe IN THIS ORDER against the card
     surface (adjacent-pair CVD dE >= 8.4, normal-vision >= 19); the
     order is the safety mechanism, so never reorder or insert. Charts
     read them with getComputedStyle, so a theme change reaches the
     canvas. Every one is restated in [data-theme="dark"] and in the
     print reset below (keep the three lists in step). */
  --ra-accent-1: #2a78d6;
  --ra-accent-2: #eb6834;
  --ra-accent-3: #1baf7a;
  --ra-accent-4: #eda100;
  --ra-accent-5: #e87ba4;
  --ra-accent-6: #008300;
  --ra-accent-7: #4a3aa7;
  --ra-accent-8: #e34948;
  --ra-card-bg: #f5f8fc;      /* solid; #000 text on it is 19:1 */
  --ra-grid: rgba(0, 0, 0, 0.08);
  /* DEMO badge (.label-demo); pair measured >= 4.5:1 by a test. */
  --demo-badge-bg: #ffc72c;
  --demo-badge-text: #1a1a1a;
}

[data-theme="dark"] {
  --bg-color: #1a1a2e;
  --text-color: #e0e0e0;
  --navbar-bg: #16213e;
  --navbar-text: #e0e0e0;
  --table-header-bg: #16213e;
  --table-header-text: #e0e0e0;
  --table-stripe: #1f2940;
  --dropdown-bg: #1f2940;
  --dropdown-text: #e0e0e0;
  --border-color: #444;
  --caption-color: #7ba4c9;
  --input-border: #666;
  --placeholder-color: #999;
  --alert-info-color: #7ba4c9;
  --alert-info-bg: #1f2940;
  --alert-danger-color: #e8706b;
  --alert-danger-bg: #2e1a1a;
  --form-bg: #222244;
  /* Same eight hues, re-stepped for the dark card surface and validated
     as a set there (not an automatic flip of the light values). */
  --ra-accent-1: #3987e5;
  --ra-accent-2: #d95926;
  --ra-accent-3: #199e70;
  --ra-accent-4: #c98500;
  --ra-accent-5: #d55181;
  --ra-accent-6: #008300;
  --ra-accent-7: #9085e9;
  --ra-accent-8: #e66767;
  --ra-card-bg: #1f2940;      /* solid; #e0e0e0 text on it is 11:1 */
  --ra-grid: rgba(255, 255, 255, 0.10);
  /* DEMO badge (.label-demo); pair measured >= 4.5:1 by a test. */
  --demo-badge-bg: #f5b82e;
  --demo-badge-text: #1a1a2e;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

/* General site styling */
/* sets error text to red color */
.errorlist {
  color: red;
}

/* suppose to set the border around the field to red */
.error input, .error select {
  border: 2px red solid;
}

p {
  font-size: medium;
  height: auto;
  color: var(--text-color);
}


/* Navbar styling */
.container-fluid {
  height:auto;
  background-color: var(--navbar-bg);
  transition: background-color 0.3s;
}


/* navbar left side brand background old-#ffffff*/
.navbar-brand{
  color: var(--navbar-text);
}


/* Navbar right hand side menu items old-#43609C */
.nav.navbar-nav.navbar-right > li > a{
  color: var(--navbar-text);
  background-color: var(--navbar-bg);
}


/* hover brand */
.navbar-brand:hover,
.navbar-brand:focus{
  color: var(--hover-color);
}


/* hover right side of menu items */
.nav.navbar-nav.navbar-right > li > a:hover,
.nav.navbar-nav.navbar-right > li > a:focus{
  color: var(--hover-color);
}


.navbar-header > button > span{
  background-color: white;
}


/* change hamburger/collapsed menu drop down values */
.dropdown-menu > li > a {
  background-color: var(--dropdown-bg) !important;
  color: var(--dropdown-text) !important;
}


/* hamburger/collapsed menu drop down values cont */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--hover-color) !important;
  color: #333 !important;
}

.dropdown-menu {
  background-color: var(--dropdown-bg);
  border-color: var(--border-color);
}

.dropdown-header {
  color: var(--placeholder-color) !important;
}


.navbar-header .navbar-brand{
  height:auto;
}

/* DEMO environment badge (templates/base.html, only when DEMO_MODE is on).
   Its own rule, NOT .label-warning: Bootstrap's white on #f0ad4e is ~1.9:1 and
   fails WCAG AA. Both values are restated per theme below and each pair is
   MEASURED >= 4.5:1 by recovery_app/tests/test_demo_environment.py
   (light #1a1a1a on #ffc72c; dark #1a1a2e on #f5b82e). The word DEMO carries
   the status, so it never rests on colour alone. Inside .navbar-header, so it
   stays visible at phone width when the menu collapses. */
.label-demo {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--demo-badge-text);
  background-color: var(--demo-badge-bg);
  background-image: none;
}


/* adding spacing to form */
.row{
  padding: 10pt;
}

/* Staging browse: keep the first (key) column visible while the wide all-columns
   table scrolls horizontally. Needs an OPAQUE bg (transparent + sticky bleeds);
   plain .table (not striped) so the sticky cell stays consistent per row. */
.staging-table th:first-child,
.staging-table td:first-child {
  position: sticky;
  left: 0;
  background-color: var(--bg-color, #fff);   /* page bg; the plain .table header
                                                is transparent in both themes */
  z-index: 1;
}
.staging-table thead th:first-child {
  z-index: 2;   /* corner cell wins over both the sticky row and column */
}

/* Sticky header, corner and borders for the capped region on the Import
   Search pages (.staging-scroll, which shares the findings/claims 70vh cap at
   ~:1211). Scoped under .staging-scroll because .staging-table ALSO styles
   the finding-detail evidence grids (finding_detail.html:159), which have
   their own wrapper, a second sticky column on .has-subject, and no cap --
   unscoped, every rule below would land on them too. Kept here rather than
   beside the cap so the unscoped column rule above, the header rule and the
   z-index interaction sit in one screenful. */
.staging-scroll .staging-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--bg-color, #fff);   /* transparent + sticky bleeds */
  box-shadow: inset 0 -2px 0 var(--border-color);   /* border-collapse: the
                         table owns the rule, so it scrolls out from under a
                         pinned cell; an inset is painted BY the cell. */
}
.staging-scroll .staging-table td:first-child {
  /* Restated rather than left to the unscoped rule above, which supplies
     the SAME value: keeps every non-corner sticky cell in this file
     declaring its own background, one convention, no exceptions to
     remember when a test (or a reader) walks the selector list. */
  background-color: var(--bg-color, #fff);
  box-shadow: inset -1px 0 0 var(--border-color);
}
/* THREE rungs. The unscoped rule above pins one axis and stops at 2; a grid
   pinned top AND left needs a third or `tbody td:first-child` -- later in
   document order, z-index auto -- paints over the header. (0,3,2) beats the
   unscoped corner rule's (0,2,2). No `white-space: nowrap` on the key column,
   unlike .findings-table: that rule exists for a wrapping advisory badge, and
   a staging header is catalog._label() output -- BUSINESS_UNIT, one
   underscore-joined token with no wrap point -- so it would be a no-op. */
.staging-scroll .staging-table thead th:first-child {
  z-index: 3;
  box-shadow: inset -1px 0 0 var(--border-color),
              inset 0 -2px 0 var(--border-color);
}

/* Evidence grids: the row(s) the finding actually claims, among the context
   rows of the same parent document. The marker takes the FIRST column so the
   signal rides the sticky cell above and survives horizontal scroll — which
   means a subject grid has TWO sticky columns, the marker AND the key, and is
   why the marker column is fixed-width: the key column's `left` offset has to
   be a number. Same OPAQUE-background caveat as .staging-table (transparent +
   sticky bleeds), so the subject tint is re-stated on both sticky cells rather
   than left to lose to them. The tint is never the only signal: the cell
   carries a glyph plus a visually-hidden label. Existing palette vars only. */
.staging-table .evidence-marker {
  width: 1.75em;
  min-width: 1.75em;
  text-align: center;
  color: var(--alert-info-color);
}
.staging-table.has-subject th:nth-child(2),
.staging-table.has-subject td:nth-child(2) {
  position: sticky;
  left: 1.75em;
  background-color: var(--bg-color, #fff);
  z-index: 1;
}
.staging-table.has-subject thead th:nth-child(2) {
  z-index: 2;
}
.staging-table tr.evidence-subject > td,
.staging-table tr.evidence-subject > td:first-child,
.staging-table.has-subject tr.evidence-subject > td:nth-child(2) {
  background-color: var(--alert-info-bg);
  font-weight: bold;
}

/* Advisory marker on the list surfaces (kanban card, findings browse, the
   worklist badge). An advisory sorts INTO the same lists as real findings --
   it needs review like anything else -- but it carries no vendor and no
   dollars, so a row that looks identical to a claimable one reads as recovery
   pipeline that isn't there. Same info palette as the detail-page banner, so
   the two surfaces say "advisory" in one colour. */
.badge-advisory {
  background-color: var(--alert-info-bg);
  color: var(--alert-info-color);
  border: 1px solid var(--alert-info-color);
  margin-left: 4px;
  font-weight: normal;
}

/* Evidence region spacing: Bootstrap only gives .table-responsive a bottom
   margin below 768px, so on a desktop the grids ran into each other and the
   LAST one sat almost against the page's Dashboard/Findings button row. The
   gap is on the wrapper rather than the table because the tightest case is an
   EMPTY grid — one empty-state row tall, with no rows to carry any spacing of
   their own. Same pt idiom as the .row padding above. */
.evidence-grid {
  margin-bottom: 10pt;
}
.evidence-grid:last-of-type {
  margin-bottom: 24pt;   /* ... and clear air before the button row */
}

/* Import wizard step 2: DistribLine is 46 rows, so the column headings scroll
   away long before the user reaches Save. Same opaque-bg caveat as the staging
   table above. */
.mapping-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--bg-color, #fff);
}
.mapping-chip { margin-left: .5em; }
/* Bootstrap 3 forces white-space:nowrap on every .table-responsive cell under
   768px, which turns the joined sample values into one unbreakable line and
   squeezes the select to nothing. Undo it for the two cells that matter. */
.mapping-table .mapping-samples {
  white-space: normal;
  max-width: 22em;
  overflow-wrap: break-word;
}
.mapping-table .mapping-target { white-space: normal; min-width: 14em; }

/* Every table that renders RecoveryVendorActivity rows (the Activity browse,
   the activity detail, the Ops Dashboard feed, the Workbench timeline) shares
   this hook. A statement-send summary now carries the full email address it
   was requested to — up to ~250 chars with no space to break on — and the same
   Bootstrap 3 white-space:nowrap rule named above turns that into one
   unbreakable line below 768px: the whole table scrolls sideways and the
   Workbench timeline pushes its Amount column off-screen. Same fix as
   .mapping-samples. Print is already safe: BS3's rules are @media screen, and
   the print block below restores overflow:visible. */
.activity-table td {
  white-space: normal;
  max-width: 30em;
  overflow-wrap: break-word;
}

/* Import chooser: equal-height cards with bottom-aligned buttons (Bootstrap 3
   floats leave ragged gaps once there are many cards per row). Theme-agnostic. */
.import-grid {
  display: flex;
  flex-wrap: wrap;
}
.import-grid > [class*="col-"] {
  display: flex;
  margin-bottom: 15px;
}
.import-grid .panel {
  width: 100%;
  margin-bottom: 0;
}
/* A non-panel flex child (e.g. the "no audit tables configured" empty-state well
   on the Recovery Ops dashboard) has no width:100% panel rule, so make it fill
   its column instead of shrinking to content width. */
.import-grid > [class*="col-"] > .well {
  width: 100%;
  margin-bottom: 0;
}
.import-grid .panel-body {
  display: flex;
  flex-direction: column;
}
.import-grid .panel-body .btn {
  margin-top: auto;
  align-self: flex-start;
}
/* TWO stacked actions in one panel (the Run Audits supplier-outreach card links
   to both the missing-email report and the missing-statement report). The rule
   directly above puts margin-top:auto on EVERY .btn in a panel body, so two
   sibling buttons would each absorb the free space, sit flush with no gap, and
   shrink to content width -- which reads as one control that has been split by
   accident. Wrapping them moves the auto margin to the WRAPPER (still pinning
   the actions to the card bottom, so cards with differing status text keep
   aligned buttons) and makes the buttons items of their own column flex box:
   left-aligned and content-width like every other card's single button, with a
   real gap between them. */
.import-grid .panel-body .widget-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.import-grid .panel-body .widget-actions .btn {
  margin-top: 0;
}
/* 24px. It started at 8px (too tight to see at a glance) and then matched the
   15px gap `.import-grid > [class*="col-"]` puts between cards, which read
   correctly while there were TWO actions. With THREE stacked buttons the card
   gap is no longer enough: at 15px the run reads as one control chopped into
   thirds, and the eye has to work out where each choice starts. 24px is a
   deliberate step past the card gap so each button reads as its own decision.
   ONE rule for every gap, never a special case for the third button -- three
   equally available actions must be spaced identically, or the odd one out
   looks subordinate. */
.import-grid .panel-body .widget-actions .btn + .btn {
  margin-top: 24px;
}
/* The Run Audits box wraps its button in a POST <form>; pin the form to the
   card bottom so cards with differing status text keep aligned buttons. */
.import-grid .panel-body form {
  margin-top: auto;
}
/* Recovery Ops kanban cards: the "Assign to Me" action sits INLINE, immediately
   right of the confidence/state pill, so it reads as acting on that row. Line 1
   runs ~202px of the 252px available at the 992-1199px breakpoint, so it fits;
   .btn is white-space:nowrap, so a 6-digit pk or a 320px viewport drops the
   whole control to the next line rather than splitting it.
   btn-primary, not a .label chip: #fff on #337ab7 is 4.56:1 and the theme
   gradient only darkens (7.24:1), so it passes WCAG 1.4.3 in BOTH themes with no
   dark override, where a .label-styled button would be 1.78:1 against the dark
   card. It also matches the existing "Assign to Me" button on the returns
   dashboard (WCAG 3.2.4 Consistent Identification). */
.assign-form { display: inline; }
/* Load-bearing now that the button shares a line with the pill: .btn defaults to
   vertical-align:middle, which would sit it a few px off the pill's baseline and
   grow the line box. .label is baseline-aligned, so match it. */
.assign-chip { vertical-align: baseline; }
/* NOT .text-muted: Bootstrap's #777 is 4.476:1 and fails AA. --placeholder-color
   is this project's contrast-safe grey in both themes (#757575 = 4.61:1 light,
   #999 = 5.34:1 dark). */
.assign-owner { color: var(--placeholder-color); }
@media print { .assign-form { display: none; } }

.yourinformation > div > label,
.supplierinformation > div > label,
.item > div > label,
.comments > div > label,
.totalshdr > div > label,
.aptracking > div > label {
  padding-top: 10px;
  padding-bottom: 1px;
  margin-bottom: 1px;
}


/* formating Dashboard tables */
#customerdashboard,
#belmerodashboard {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border: 2px solid var(--border-color);
    width: 100%
}


#customerdashboard caption,
#belmerodashboard caption {
  caption-side: top;
  height: 50%;
  font-size: 1.5em;
  color: var(--caption-color);
  font-weight: bold;
  text-align: center;
}

.customerdashboard h2 {
  height: 50%;
  font-size: 1.5em;
  color: var(--caption-color);
  font-weight: bold;
  text-align: center;
}


#customerdashboard th,
#belmerodashboard th {
  background-color: var(--table-header-bg);
  color: var(--table-header-text);
  height: 50%;
  text-align: left;
  padding: 15px;
}


#customerdashboard tr:nth-child(even) {background-color: var(--table-stripe);}
#belmerodashboard tr:nth-child(even) {background-color: var(--table-stripe);}


#customerdashboard td,
#belmerodashboard td {
  text-align: left;
  padding: 10px;
  font-size: medium;
  font-weight: bold;
  color: var(--text-color);
}


#customerdashboard td > span,
#belmerodashboard td > span {
  font-size: medium;
}


/* Custom field ERP radio buttons - horizontal layout with border */
#id_custom_field_erp {
  list-style: none;
  padding: 0 12px;
  margin: 0;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  height: 34px;
}
#id_custom_field_erp li {
  display: inline-block;
  margin-right: 15px;
}

/* this is used in the returns_app return_hdr_form.html  */
#delete_line_link{
  text-align: right;
}

/* Update foreground/background contrast aspect ratio according to accessibility requirement */
.bs-custom .alert-info {
  color: var(--alert-info-color);
}
.bs-custom .alert-danger {
  color: var(--alert-danger-color);
}
.bs-custom .form-control {
  border-color: var(--input-border);
}
.bs-custom .form-control::placeholder {
  color: var(--placeholder-color);
}

[data-theme="dark"] a {
  color: var(--caption-color);
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus {
  color: var(--hover-color);
}

/* An <a class="btn"> is a BUTTON, not a link, and must read identically to a
   <button> carrying the same classes. The dark anchor rule above is specificity
   0,1,1 and so outranks Bootstrap's own .btn-primary colour (0,1,0), leaving a
   link-styled button with the muted caption colour: on Run Audits, "Run audit"
   (a <button>) rendered white while the report download (an <a>) did not.
   .btn-default and .btn-link already have dark overrides at 0,2,0 and are
   unaffected; these are the solid variants that have none, listed explicitly so
   a future variant is a deliberate addition rather than a silent regression. */
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] a.btn-success,
[data-theme="dark"] a.btn-info,
[data-theme="dark"] a.btn-warning,
[data-theme="dark"] a.btn-danger {
  color: #fff;
}

[data-theme="dark"] hr {
  border-color: var(--border-color);
}

[data-theme="dark"] select.form-control option {
  background-color: var(--form-bg);
  color: var(--text-color);
}

[data-theme="dark"] .panel {
  background-color: var(--form-bg);
  background-image: none;
  border-color: var(--border-color);
}

[data-theme="dark"] .panel-default > .panel-heading {
  background-color: var(--table-stripe);
  background-image: none;
  color: var(--text-color);
  border-color: var(--border-color);
}

[data-theme="dark"] .well {
  background-color: var(--table-stripe);
  background-image: none;
  border-color: var(--border-color);
  color: var(--text-color);
}

[data-theme="dark"] .breadcrumb {
  background-color: var(--table-stripe);
  background-image: none;
  color: var(--text-color);
}

[data-theme="dark"] .breadcrumb > .active {
  color: var(--placeholder-color);
}

/* Bootstrap component dark mode overrides */
[data-theme="dark"] .btn-default {
  background-color: var(--form-bg);
  background-image: none;
  color: var(--text-color);
  border-color: var(--border-color);
}

[data-theme="dark"] .btn-default:hover,
[data-theme="dark"] .btn-default:focus {
  background-color: var(--table-stripe);
  background-image: none;
  color: var(--text-color);
  border-color: var(--border-color);
}

[data-theme="dark"] .table {
  color: var(--text-color);
}

/* ROW-HEADER cells belong here too. Bootstrap borders every cell the same, but
   this rule long covered only thead th and tbody td -- so a `<th scope="row">`
   label cell kept BS3's light #ddd while the value cell beside it went dark,
   and the two halves of one row drew visibly different lines. Detail pages use
   `<th scope="row">` for every label (it is what makes the label/value pairing
   legible to a screen reader), so the mismatch shows up wherever that pattern
   is used -- the Vendor Audit Workbench made it obvious. tfoot included so the
   set is complete rather than complete-for-today. */
[data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] .table > tbody > tr > th,
[data-theme="dark"] .table > tfoot > tr > th,
[data-theme="dark"] .table > thead > tr > td,
[data-theme="dark"] .table > tbody > tr > td,
[data-theme="dark"] .table > tfoot > tr > td {
  border-color: var(--border-color);
}

/* Recovery Ops Dashboard worklist widgets: BS3 leaves .list-group-item white and
   .panel-footer light in dark mode (cards used only on that dashboard), so the
   card text (inheriting the light --text-color) was invisible on white. Theme
   them like the panel body. */
[data-theme="dark"] .list-group-item {
  background-color: var(--form-bg);
  color: var(--text-color);
  border-color: var(--border-color);
}
[data-theme="dark"] .list-group-item .text-muted {
  color: var(--placeholder-color);
}
[data-theme="dark"] .panel-footer {
  background-color: var(--table-stripe);
  background-image: none;
  color: var(--text-color);
  border-top-color: var(--border-color);
}

/* .table-hover default hover is BS3 #f5f5f5 (light) — a light flash under light
   text in dark mode. Use a dark highlight (Activity widget + all browse tables). */
[data-theme="dark"] .table-hover > tbody > tr:hover > td,
[data-theme="dark"] .table-hover > tbody > tr:hover > th {
  background-color: var(--table-stripe);
}

/* Bootstrap nav-tabs (staging browse) dark mode: default BS3 styles leave a white
   active tab on the dark page and low-contrast inactive tabs. */
[data-theme="dark"] .nav-tabs {
  border-bottom-color: var(--border-color);
}
[data-theme="dark"] .nav-tabs > li > a {
  color: var(--text-color);
}
[data-theme="dark"] .nav-tabs > li > a:hover {
  background-color: var(--table-stripe);
  border-color: var(--border-color) var(--border-color) var(--border-color);
}
[data-theme="dark"] .nav-tabs > li.active > a,
[data-theme="dark"] .nav-tabs > li.active > a:hover,
[data-theme="dark"] .nav-tabs > li.active > a:focus {
  color: var(--text-color);
  background-color: var(--bg-color);
  border-color: var(--border-color);
  border-bottom-color: transparent;
}
[data-theme="dark"] .nav-tabs .badge {
  background-color: var(--table-stripe);
  color: var(--text-color);
}

/* Visible keyboard focus for tabs (WCAG 2.4.7) — hover/focus must not look
   identical; the outline stays clearly visible in both themes. */
.nav-tabs > li > a:focus {
  outline: 2px solid var(--caption-color);
  outline-offset: -2px;
}

/* Bootstrap alert-danger dark mode override */
[data-theme="dark"] .bs-custom .alert-danger {
  background-color: var(--alert-danger-bg);
  background-image: none;
}

/* Bootstrap alert-info dark mode override */
[data-theme="dark"] .bs-custom .alert-info {
  background-color: var(--alert-info-bg);
  background-image: none;
  border-color: var(--border-color);
}

/* Bootstrap form-control dark mode override */
[data-theme="dark"] .bs-custom .form-control {
  background-color: var(--form-bg);
  background-image: none;
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Bootstrap alert-success dark mode override */
[data-theme="dark"] .bs-custom .alert-success {
  color: #6fbf73;
  background-color: #1e3a1e;
  background-image: none;
  border-color: var(--border-color);
}

/* Bootstrap alert-warning dark mode override */
[data-theme="dark"] .bs-custom .alert-warning {
  color: #f0ad4e;
  background-color: #3a3120;
  background-image: none;
  border-color: var(--border-color);
}

/* Jumbotron dark mode override */
[data-theme="dark"] .jumbotron {
  background-color: var(--table-stripe);
  background-image: none;
  color: var(--text-color);
}

/* Bootstrap label/badge dark mode overrides */
[data-theme="dark"] .label-success {
  background-color: #2d6a2d;
  background-image: none;
  color: #c8e6c9;
}

/* "In Process" badge (Process Monitor) */
[data-theme="dark"] .label-warning {
  background-color: #8a5a00;
  background-image: none;
  color: #ffe0a3;
}

[data-theme="dark"] .label-primary {
  background-color: #1f4f7a;
  background-image: none;
  color: #bbdefb;
}

/* btn-link dark mode override */
[data-theme="dark"] .btn-link {
  color: var(--caption-color);
}
[data-theme="dark"] .btn-link:hover,
[data-theme="dark"] .btn-link:focus {
  color: var(--hover-color);
}

/* Bootstrap navbar-collapse mobile dark mode */
[data-theme="dark"] .navbar-collapse {
  border-color: var(--border-color);
}

/* Dashboard table odd rows (non-striped) */
#customerdashboard tr:nth-child(odd),
#belmerodashboard tr:nth-child(odd) {
  background-color: var(--bg-color);
}

/* jQuery UI / Datepicker dark mode overrides */
[data-theme="dark"] .ui-widget-content {
  background-color: var(--form-bg);
  background-image: none;
  color: var(--text-color);
  border-color: var(--border-color);
}
[data-theme="dark"] .ui-widget-header {
  background-color: var(--table-header-bg);
  background-image: none;
  color: var(--text-color);
  border-color: var(--border-color);
}
[data-theme="dark"] .ui-state-default {
  background-color: var(--table-stripe);
  background-image: none;
  color: var(--text-color);
  border-color: var(--border-color);
}
[data-theme="dark"] .ui-state-hover {
  background-color: var(--hover-color);
  background-image: none;
  color: #333;
}
[data-theme="dark"] .ui-state-active {
  background-color: var(--caption-color);
  background-image: none;
  color: #fff;
}
[data-theme="dark"] .ui-menu .ui-menu-item-wrapper {
  color: var(--text-color);
}
[data-theme="dark"] .xdsoft_datetimepicker {
  background-color: var(--form-bg);
  background-image: none;
  border-color: var(--border-color);
  color: var(--text-color);
}
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar th {
  background-color: var(--form-bg);
  color: var(--text-color);
}
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td:hover {
  background-color: var(--hover-color);
  color: #333;
}
/* Month/year header strip + its dropdown selects (xdsoft ships these #fff). */
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label {
  background-color: var(--form-bg);
  color: var(--text-color);
}
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
  background: var(--form-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}
/* Day-of-week header text + the "today" accent, readable on dark. */
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar th {
  color: var(--text-color);
}
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
  color: #4ea1ff;
}
/* Nav-arrow sprite is a dark image - invert it so it shows on the dark bg. */
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label i,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_prev,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_next,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_today_button {
  filter: invert(1);
}

/* ===== Sliding Pill Toggle (for unauthenticated users) ===== */
.theme-toggle-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  background-color: #ccc;
  border-radius: 20px;
  padding: 3px;
  cursor: pointer;
  user-select: none;
  float: right;
  margin-bottom: 10px;
}

[data-theme="dark"] .theme-toggle-pill {
  background-color: #444;
}

.theme-toggle-pill .theme-option {
  position: relative;
  z-index: 2;
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  border-radius: 17px;
  transition: color 0.3s;
  white-space: nowrap;
}

[data-theme="dark"] .theme-toggle-pill .theme-option {
  color: #aaa;
}

.theme-toggle-pill .theme-option.active {
  color: #333;
}

[data-theme="dark"] .theme-toggle-pill .theme-option.active {
  color: #333;
}

.theme-toggle-pill .theme-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  background-color: #fff;
  border-radius: 17px;
  transition: transform 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  z-index: 1;
}

.theme-toggle-pill.dark .theme-slider {
  transform: translateX(100%);
}

/* ===== Back to top =====
   A fixed round button base.html renders on every page that extends it. Two
   choices here are not what you would reach for first, and both were made
   against the CDN copy of bootstrap.min.css 3.4.1 that base.html loads BEFORE
   this file:

   1. The state class is `.is-visible`, NOT `.show`. Bootstrap 3.4.1 defines
      `.show{display:block!important}`, so naming the state `.show` would hand
      this button an `!important` display that nothing here can outrank -- and
      the first casualty is the @media print hide list further down, which
      would silently stop working and print a navigation control on paper.
      `.is-visible` also matches the house idiom already set by
      `.auth-eye.is-showing` (static/js/auth-ui.js).
   2. The hover/focus rule states `color: #333` rather than keeping
      var(--navbar-text). --hover-color is #dce775, a pale yellow-green;
      --navbar-text is white, and white on #dce775 is 1.33:1 -- below
      every WCAG threshold, and worst at exactly the moment the control is
      under the pointer. Every other background use of --hover-color in this
      file already pairs it with #333 (the navbar dropdown, the jQuery UI
      hover state, the datepicker cell), so this is the established pair and
      not a local exception.

   Hidden by BOTH opacity and visibility: opacity alone leaves a transparent
   44px target sitting over the bottom-right of every page, which swallows
   clicks on whatever is under it. visibility is transitioned alongside the
   other two so the button fades out rather than vanishing mid-fade. The
   doubled `bottom` is a plain progressive enhancement -- a browser with no
   env() drops the second declaration and keeps the 20px. */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 1030;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: var(--navbar-bg);
  color: var(--navbar-text);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover, .back-to-top:focus { background-color: var(--hover-color); color: #333; }
.back-to-top:focus-visible { outline: 3px solid rgba(47,127,193,0.5); outline-offset: 2px; }
/* Phones: in off the edge. Must stay BELOW the base rule -- every declaration
   here is 0,1,0 against 0,1,0, so source order is the only thing making the
   override land.

   The size stays 44px. It is the iOS/WCAG 2.5.5 minimum touch target, and a
   phone is the one form factor where that guideline is actually about a
   finger; shrinking it here would relax the rule on the only device it
   protects.

   `bottom` is doubled for the same reason as the base rule, and it MUST be:
   a plain `bottom: 12px` here would override the base rule's env() on every
   viewport under 768px -- which is every phone that HAS a home indicator. The
   button would then sit inside the ~34px gesture strip, where the system
   swallows the tap and the control feels dead. */
@media (max-width: 767px) {
  .back-to-top {
    right: 12px;
    bottom: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* Recovery import wizard: theme code/pre and inline status colors that
   Bootstrap 3 leaves light-only (fixes bright-pink code + low-contrast marks
   in dark mode; also benefits any other page using bare <code>). */
[data-theme="dark"] code,
[data-theme="dark"] pre,
[data-theme="dark"] .pre-scrollable {
  background-color: var(--form-bg);
  color: var(--text-color);
  border-color: var(--border-color, #444);
}
[data-theme="dark"] .text-danger { color: #ff8a8a; }
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--table-stripe);
}
[data-theme="dark"] .label-info { background-color: #1b6d7e; color: var(--text-color); }
[data-theme="dark"] .label-danger { background-color: #a23b37; color: var(--text-color); }

/* ============================================================
   Auth pages (login / logout / password-reset) — base_auth.html
   Centered "glass card" on an ambient tech background. Theme-aware
   (light + dark via [data-theme]); motion guarded by reduced-motion.
   ============================================================ */
.auth-body {
  margin: 0;
  min-height: 100vh;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--text-color);
  background:
    radial-gradient(900px 520px at 22% 12%, rgba(27,117,188,0.10), transparent 60%),
    radial-gradient(900px 520px at 80% 8%, rgba(92,45,145,0.10), transparent 60%),
    linear-gradient(160deg, #eef2f8 0%, #eae8f3 55%, #e6e9f4 100%);
  position: relative;
  overflow-x: hidden;
}
[data-theme="dark"] .auth-body {
  background:
    radial-gradient(900px 520px at 22% 10%, rgba(40,120,210,0.24), transparent 60%),
    radial-gradient(820px 480px at 82% 6%, rgba(120,70,190,0.22), transparent 60%),
    linear-gradient(160deg, #10152a 0%, #141033 55%, #0d1226 100%);
}
.auth-body::before {          /* faint oversized two-tone Belmero tree watermark */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("../img/belmero-tree.png") no-repeat center 8%;
  background-size: min(1180px, 132%) auto;
  opacity: 0.09;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(150% 118% at 50% 6%, #000 52%, transparent 92%);
  mask-image: radial-gradient(150% 118% at 50% 6%, #000 52%, transparent 92%);
}
[data-theme="dark"] .auth-body::before {   /* screen so the tree glows on navy */
  opacity: 0.16;
  mix-blend-mode: screen;
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 18px;
  position: relative;
  z-index: 1;
}

/* Neutralize the site-wide float:right so the pill sits top-right */
.auth-body .theme-toggle-pill {
  float: none;
  position: fixed;
  top: 18px;
  right: 18px;
  margin: 0;
  z-index: 5;
}

/* ---- Card ---- */
.auth-card {
  width: 100%;
  max-width: 430px;
  box-sizing: border-box;
  padding: 34px 32px 28px;
  border-radius: 18px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 20px 60px -18px rgba(16,32,64,0.35), 0 2px 8px rgba(16,32,64,0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: auth-rise 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
[data-theme="dark"] .auth-card {
  background: rgba(28,34,58,0.72);
  border: 1px solid rgba(150,170,220,0.16);
  box-shadow: 0 24px 70px -20px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(150,170,220,0.05);
}
.auth-card--center { text-align: center; }
@keyframes auth-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ---- Brand ---- */
.auth-brand { text-align: center; margin-bottom: 20px; }
.auth-logo-plate {
  display: inline-block;
  line-height: 0;
  padding: 6px 14px;
  border-radius: 16px;
  transition: background 0.2s;
}
.auth-logo-img { display: block; width: 100%; max-width: 210px; height: auto; }
/* Dark theme: transparent logo, no glow — just a slight brightness lift so the
   colored logo reads on the dark card. */
[data-theme="dark"] .auth-logo-img {
  filter: brightness(1.12);
}
.auth-tagline {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--placeholder-color);
}

/* ---- Headings ---- */
.auth-title { margin: 4px 0; font-size: 22px; font-weight: 700; text-align: center; color: var(--text-color); }
.auth-sub { margin: 0 0 20px; text-align: center; font-size: 13.5px; color: var(--placeholder-color); }

/* ---- Form ---- */
.auth-form { margin: 0; }
.auth-field { margin-bottom: 15px; text-align: left; }
.auth-field label {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--text-color);
}
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input .auth-ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--placeholder-color); pointer-events: none;
}
.auth-input input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 42px 12px 40px;   /* room for left icon + right eye/space */
  font-size: 14.5px;
  color: var(--text-color);
  background: var(--form-bg);
  border: 1px solid var(--border-color);
  border-radius: 11px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.auth-input input::placeholder { color: var(--placeholder-color); }
.auth-input input:focus { border-color: #2f7fc1; box-shadow: 0 0 0 3px rgba(47,127,193,0.22); }
[data-theme="dark"] .auth-input input:focus { border-color: #dce775; box-shadow: 0 0 0 3px rgba(220,231,117,0.20); }
.auth-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--placeholder-color); cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.auth-eye:hover { color: var(--text-color); background: rgba(120,120,120,0.12); }
.auth-eye.is-showing { color: #2f7fc1; }
[data-theme="dark"] .auth-eye.is-showing { color: #dce775; }

/* ---- Errors ---- */
.auth-error {
  margin-bottom: 16px; padding: 10px 13px; font-size: 13px; border-radius: 10px;
  color: var(--alert-danger-color); background: var(--alert-danger-bg);
  border: 1px solid rgba(142,58,57,0.28);
}
.auth-error ul, .auth-field-error ul { margin: 0; padding-left: 18px; }
.auth-field-error { margin-top: 6px; font-size: 12px; color: var(--alert-danger-color); }

/* ---- Button ---- */
.auth-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; margin-top: 6px; padding: 12px 16px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: #fff; text-decoration: none; text-align: center;
  border: 0; border-radius: 11px; cursor: pointer;
  background: linear-gradient(135deg, #0a5c9e 0%, #004B87 100%);
  box-shadow: 0 8px 20px -8px rgba(0,75,135,0.7);
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
.auth-btn:hover, .auth-btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -8px rgba(0,75,135,0.75);
  filter: brightness(1.05);
  color: #fff; text-decoration: none;
}
.auth-btn:active { transform: translateY(0); }
.auth-btn:focus-visible { outline: 3px solid rgba(47,127,193,0.5); outline-offset: 2px; }
[data-theme="dark"] .auth-btn {
  background: linear-gradient(135deg, #1c5f9c 0%, #16386a 100%);
  box-shadow: 0 8px 22px -8px rgba(40,90,180,0.6), inset 0 0 0 1px rgba(150,170,220,0.12);
}
.auth-btn::after {          /* click ripple */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; border-radius: 50%;
  background: rgba(255,255,255,0.35); transform: translate(-50%,-50%);
  transition: width 0.5s ease, height 0.5s ease, opacity 0.6s ease; opacity: 0;
}
.auth-btn:active::after { width: 260px; height: 260px; opacity: 1; transition: 0s; }
.auth-btn--link { text-decoration: none; }
.auth-btn.is-loading { pointer-events: none; filter: saturate(0.85) brightness(0.98); }
.auth-btn[disabled] { opacity: 0.85; cursor: default; }
.auth-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff;
  display: inline-block; animation: auth-spin 0.6s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* ---- Links, trust chip, status icon ---- */
.auth-links { margin-top: 16px; text-align: center; font-size: 13px; }
.auth-links a { color: #2f7fc1; text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
[data-theme="dark"] .auth-links a { color: #9dc4ea; }
.auth-chip {
  width: -moz-fit-content; width: fit-content; max-width: 100%;
  margin: 18px auto 2px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; font-size: 11.5px; letter-spacing: 0.4px;
  color: var(--placeholder-color);
  border: 1px solid var(--border-color); border-radius: 999px;
}
.auth-chip .auth-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #2ec16b;
  animation: auth-pulse 2s ease-out infinite;
}
@keyframes auth-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,193,107,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(46,193,107,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,193,107,0); }
}
.auth-status-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 6px auto 12px; border-radius: 50%;
  color: #2f7fc1; background: rgba(47,127,193,0.12);
}
.auth-status-ico--ok { color: #2ec16b; background: rgba(46,193,107,0.14); }
[data-theme="dark"] .auth-status-ico { color: #9dc4ea; background: rgba(120,160,220,0.14); }
[data-theme="dark"] .auth-status-ico--ok { color: #46d17f; background: rgba(46,193,107,0.16); }
.auth-card--center .auth-btn { margin-top: 8px; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .auth-card, .auth-dot { animation: none; }
  .auth-spinner { animation-duration: 1.2s; }
  .auth-btn, .auth-input input, .auth-eye { transition: none; }
  .back-to-top { transition: none; }
}

/* ---- Small screens ---- */
@media (max-width: 480px) {
  .auth-card { padding: 26px 20px 22px; border-radius: 15px; }
  .auth-body .theme-toggle-pill { top: 10px; right: 10px; }
}

/* Vendor Audit Workbench alerts: the box is one dt/dd list, and with the
   default dl spacing consecutive alerts run together into a single blob the
   reader has to pick apart mid-call. Air between entries, none after the last
   (the box's own padding closes it). Same pt idiom as .row/.evidence-grid. */
.vendor-audit-workbench .alert dl > dd {
  margin-bottom: 10pt;
}
.vendor-audit-workbench .alert dl > dd:last-child {
  margin-bottom: 0;
}

/* Air between the contacts block's manage links and the Postal address heading
   below them: the links close the Supplier-provided contacts sub-block, and
   without the gap the next h3 reads as part of it. Screen-only by nature (the
   paragraph is .vaw-screen, so print never sees either it or the gap). */
.vendor-audit-workbench .vaw-contact-links {
  margin-bottom: 28pt;
}

/* Same air under the stop/resume switch, and for the same reason: a <form>
   carries no bottom margin of its own, so the button and its explanatory line
   sat hard against the "Supplier-provided contacts" heading below them and read
   as though the heading belonged to the switch. 28pt matches the contacts block
   above so the two gaps in this panel are one measurement, not two. */
.vendor-audit-workbench .vaw-statement-switch {
  margin-bottom: 28pt;
}

/* The supplier's name under the picker: it introduces everything below it, so
   it needs air above (clear of the picker panel) and less below (the glance
   strip belongs to it). Bootstrap's h2 margins are symmetrical and read as
   floating between the two. */
.vendor-audit-workbench .vaw-supplier-name {
  margin-top: 24pt;
  margin-bottom: 10pt;
}

/* Findings / Claims browse: cap the results grid and pin both of its edges.

   Bootstrap 3.4.1 moved `.table-responsive{overflow-x:auto}` OUT of its
   max-width:767px query, so the wrapper scrolls horizontally at every width
   (the PRINT note below covers the same change from the paper side). With no
   height constraint the wrapper grows to the full height of a 50-row table, so
   the horizontal scrollbar sits at the BOTTOM of ~1850px of table -- hundreds
   of pixels below the fold, where nobody finds it. Capping the wrapper brings
   the scrollbar back into the same screenful as the grid.

   ONE wrapper, not two: this class goes ON the existing .table-responsive div
   (findings_browse.html:23, claims_browse.html:23, staging_browse.html:52). A
   new scroll div nested inside it would give two scroll containers, and
   `top: 0` below would then resolve against the inner one.

   LOAD-ORDER DEPENDENCY, and it is real: `overflow: auto` here has to beat
   Bootstrap's `@media (max-width:767px) .table-responsive{overflow-y:hidden}`.
   Both are 0,1,0, so this wins on source order alone -- master.css loads after
   the CDN (base.html:16 vs :28). Swap those two <link>s and every row past the
   cap is clipped on a phone with no way to reach it.

   This RELOCATES the scrolling, it does not remove it: on a 1366x768 laptop
   the filter form puts the grid ~465px down, so one short page-scroll brings
   the whole region and its scrollbar into view -- against ~1850px today. */
.findings-scroll,
.claims-scroll,
.staging-scroll {   /* the Import Search pages' capped region -- see
                       .staging-table above (~:195) for its sticky rules, kept
                       local to that block for a reader landing there. One
                       shared cap, not a copy: a copy beside .staging-table
                       would silently diverge the first time this one moved. */
  max-height: 70vh;   /* ~11 rows at 1366x768, ~17 at 1080p, ~24 on a large
                         monitor (a BS3 row is 8+20+8+1 = 37px). Viewport-
                         relative rather than calc(100vh - N) because the
                         filter form above is 320-360px and varies by audit,
                         so N is not a constant. max-height only bites when
                         the table is taller: short result sets are unchanged. */
  overflow: auto;
}

/* Sticky needs an OPAQUE background or the rows bleed through it -- the caveat
   both .staging-table and .mapping-table above carry. --bg-color is theme-aware
   (#ffffff at :3, #1a1a2e at :25), so one declaration is right in both themes.

   Not copied from .staging-table: its "plain .table (not striped)" precondition
   does not hold here -- these grids are .table-hover. The outcome is fine
   anyway, because Bootstrap's hover rule is 0,2,3 and the dark override 0,3,3,
   both over the 0,2,1 background below, so the pinned first cell still
   highlights with its row. */
.findings-table thead th,
.claims-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--bg-color, #fff);
  /* BS3 .table is `border-collapse: collapse` (no override anywhere in this
     repo), so the 2px header rule belongs to the TABLE, not the cell, and
     scrolls away underneath the pinned row. An inset shadow is painted BY the
     cell, so it travels with it. Done this way rather than by switching to
     border-collapse: separate, which would change every table in the app. */
  box-shadow: inset 0 -2px 0 var(--border-color);
}
.findings-table th:first-child,
.findings-table td:first-child,
.claims-table th:first-child,
.claims-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--bg-color, #fff);
  /* Nothing else sizes this column, and the advisory badge
     (findings_browse.html:42) would otherwise WRAP under the Review link and
     let the column auto-size to ~14em. Measured in Chrome at 1366px: 101px
     plain, 169px with a badge on one line, against ~224px wrapped. It does not
     make the width row-independent and does not need to -- nothing is offset
     from this column (unlike .staging-table.has-subject above, whose SECOND
     sticky column needs a numeric `left`), so `left: 0` holds at any width and
     the only requirement is that the column not balloon. */
  white-space: nowrap;
}
.findings-table td:first-child,
.claims-table td:first-child {
  box-shadow: inset -1px 0 0 var(--border-color);   /* same collapse problem */
}
/* THREE levels, not two. Every other sticky rule in this file pins ONE axis and
   needs only 1/2. A grid pinned top AND left needs a third, or
   `tbody td:first-child` -- later in document order, z-index auto -- paints
   over the header it is meant to slide under. The corner cell wins both. */
.findings-table thead th:first-child,
.claims-table thead th:first-child {
  z-index: 3;
  box-shadow: inset -1px 0 0 var(--border-color),
              inset 0 -2px 0 var(--border-color);
}

/* ============================================================
   RECOVERY ANALYTICS DASHBOARD (.ra-*)
   Customer-facing, so the polish bar is deliberate. Colour is
   never the only signal: the in-progress period carries a text
   flag, the deltas carry a sign and an arrow glyph, and every
   chart has its table beneath it. The KPI cards are a SOLID
   --ra-card-bg (text contrast is measured on it), with a 1px
   gradient border drawn by a masked pseudo-element and a thin
   accent bar per card. Placed ABOVE the print block, whose
   resets rely on winning by source order.
   ============================================================ */
.ra-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 15px;
  margin-bottom: 12px;
}
.ra-header h1 { margin-bottom: 4px; }
.ra-subtitle { margin: 0; color: var(--placeholder-color); }
.ra-header-actions { padding-top: 22px; }

.ra-kpis { margin-bottom: 6px; }
.ra-card {
  position: relative;
  width: 100%;
  padding: 14px 16px 12px 18px;
  border-radius: 8px;
  background-color: var(--ra-card-bg);
  color: var(--text-color);
  overflow: hidden;
}
/* The 1px gradient border. A masked overlay rather than
   border-image so the corner radius survives; padding-box vs
   border-box masks leave only the 1px ring painted. */
.ra-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 8px;
  padding: 1px;
  background: linear-gradient(135deg, var(--ra-accent-1), var(--ra-accent-3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* The accent bar. One accent per card, chosen so neighbouring
   cards differ; it is decoration over a labelled card, never a
   status. */
.ra-card::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background-color: var(--ra-accent-1);
}
.ra-card-verified::after,
.ra-card-claims_verified::after { background-color: var(--ra-accent-2); }
.ra-card-rate::after { background-color: var(--ra-accent-3); }
.ra-card-awaiting::after { background-color: var(--ra-accent-4); }
.ra-card-disputed::after { background-color: var(--ra-accent-6); }
.ra-card-median_days::after { background-color: var(--ra-accent-5); }
.ra-card-ytd::after { background-color: var(--ra-accent-7); }
.ra-card-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--placeholder-color);
}
.ra-card-value {
  margin: 4px 0 2px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}
.ra-card-note { font-size: 12px; color: var(--placeholder-color); }
.ra-spark-wrap { position: relative; height: 36px; margin: 2px 0 4px; }

.ra-tabs { margin-top: 8px; }
.ra-tab-content { padding-top: 15px; }
.ra-print-heading { display: none; }   /* paper only, see the print block */
[data-theme="dark"] .ra-tabs > li > a { color: var(--text-color); }
[data-theme="dark"] .ra-tabs > li > a:hover,
[data-theme="dark"] .ra-tabs > li > a:focus {
  background-color: var(--ra-card-bg);
  border-color: var(--border-color) var(--border-color) transparent;
}
[data-theme="dark"] .ra-tabs > li.active > a,
[data-theme="dark"] .ra-tabs > li.active > a:hover,
[data-theme="dark"] .ra-tabs > li.active > a:focus {
  background-color: var(--ra-card-bg);
  color: var(--text-color);
  border-color: var(--border-color) var(--border-color) transparent;
}
[data-theme="dark"] .ra-tabs { border-bottom-color: var(--border-color); }

.ra-panel .panel-body { padding: 12px 15px; }
.ra-help { margin-bottom: 8px; font-size: 13px; color: var(--placeholder-color); }
/* Chart.js with maintainAspectRatio:false sizes to its wrapper,
   so the wrapper owns the height (a canvas in a hidden pane would
   otherwise be 0x0). */
.ra-chart { position: relative; height: 280px; margin-bottom: 12px; }
@media (max-width: 767px) { .ra-chart { height: 220px; } }
.ra-chart-failed { display: none; }   /* the JS hides what it could not draw */
.ra-table td, .ra-table th { white-space: normal; }
.ra-table .ra-num { text-align: right; white-space: nowrap; }
.ra-in-progress th, .ra-in-progress td { font-style: italic; }
.ra-flag { font-size: 12px; font-weight: normal; font-style: normal; color: var(--placeholder-color); }
.ra-empty { margin-top: 10px; }
.ra-empty-text { margin: 10px 0; }
.ra-other, .ra-definitions { margin-top: 6px; }
.ra-definitions .panel-title a { display: block; text-decoration: none; }
.ra-definitions .panel-title a::before { content: "\25B8"; margin-right: 6px; }
.ra-definitions .panel-title a[aria-expanded="true"]::before { content: "\25BE"; }
/* Set by the JS around window.print(): every pane laid out on
   screen so the charts in the hidden panes get a real size before
   the print media query, which runs after beforeprint, applies. */
.ra-printing .ra-tab-content > .tab-pane { display: block; }

/* ============================================================
   PRINT
   The Vendor Audit Workbench is worked live on a call with the
   supplier and then printed for the file, so paper is a real
   output of these pages rather than an afterthought. Two facts
   were established first, both read out of the CDN copy of
   bootstrap.min.css 3.4.1 that base.html loads BEFORE this file:

   1. Bootstrap 3 ships its own @media print block, and it does
      more than expected. `*,:after,:before{color:#000!important;
      background:0 0!important}` flattens every fill and every text
      colour in the document -- importance beats specificity, so it
      already defeats the dark theme -- and `.navbar{display:none}`,
      `thead{display:table-header-group}`, `tr,img{page-break-
      inside:avoid}`, `h2,h3{page-break-after:avoid}` and
      `.label{border:1px solid #000}` are all present too. The dark
      theme therefore does NOT print as a black sheet today.
   2. The same block appends the target of every link to its text
      (`a[href]:after{content:" (" attr(href) ")"}`), and 3.4.1
      moved `.table-responsive{overflow-x:auto}` OUT of its
      max-width:767px query, so it is live on paper, where an
      overflow is a clip and not a scrollbar.

   So the rules below do two jobs: undo, in print, the screen-only
   effects THIS stylesheet creates (dark palette, sticky columns,
   flex .import-grid), and fix what the vendor block gets wrong or
   cannot know about. Where a vendor rule is restated rather than
   leaned on, it is because the value being undone is ours and that
   block is a CDN dependency Bootstrap 4/5 dropped -- the printed
   sheet should not silently depend on a vendor reset to be legible.
   ============================================================ */

/* Screen/print swap. `.vaw-print` holds the server-side redacted
   payee (on a patient-refund vendor the payee is a patient) and
   `.vaw-screen` the real one, so the printed sheet must never carry
   the .vaw-screen value. Each class is hidden only in the medium it
   is NOT for, and is never handed a display value in the medium it
   is for -- so a .vaw-print <td>, <tr> or <span> keeps whatever
   display its element already has, with nothing to guess. A document
   is rendered for exactly one media type at a time, so the two rules
   can never both apply (both hidden) nor both miss (both shown).
   !important because this is a privacy control and has to outrank
   any later component rule; display:none rather than a visual hide
   so the duplicate is out of the accessibility tree too, and is not
   announced twice. The one case this cannot express is both classes
   on one element -- never do that. */
@media screen { .vaw-print { display: none !important; } }
@media print { .vaw-screen { display: none !important; } }

/* ---- Print: every page ---- */
@media print {
  /* base.html writes data-theme onto <html> from localStorage and
     never removes it, so the dark palette is still live when the
     sheet prints -- and while Bootstrap's universal rule covers
     colour and background, it does not touch border-color, outline
     or any var() we may add later. Redefine exactly the set that
     [data-theme="dark"] at the top of this file redefines (keep the
     two lists in step) so every var() lands on ink. Stated on
     html[data-theme="dark"] as well as :root because both :root and
     [data-theme="dark"] are 0,1,0: equal specificity would leave
     this depending on source order alone, and 0,1,1 does not. */
  :root,
  html[data-theme="dark"] {
    --bg-color: #ffffff;
    --text-color: #000000;
    --navbar-bg: #ffffff;
    --navbar-text: #000000;
    /* Header fills are BACKGROUNDS and print dialogs default to
       "background graphics" off, so the white-on-navy dashboard
       headings would print white on white. Ink on paper instead,
       with the border left to do the separating. */
    --table-header-bg: #ffffff;
    --table-header-text: #000000;
    --table-stripe: #f2f2f2;   /* survives as a tint if the reader
                                  does enable backgrounds, and drops
                                  to white harmlessly if not */
    --dropdown-bg: #ffffff;
    --dropdown-text: #333333;
    --border-color: #666666;   /* darker than the #b3b3b3 screen
                                  value: once the fills are gone the
                                  rules are the only structure left */
    --caption-color: #004B87;
    --input-border: #000000;
    --placeholder-color: #757575;
    --alert-info-color: #267092;
    --alert-info-bg: #d9edf7;
    --alert-danger-color: #8E3A39;
    --alert-danger-bg: #f2dede;
    --form-bg: #ffffff;
    /* The analytics accents are chart INK, so they keep their light
       values on paper; only the card surface and the grid reset. */
    --ra-accent-1: #2a78d6;
    --ra-accent-2: #eb6834;
    --ra-accent-3: #1baf7a;
    --ra-accent-4: #eda100;
    --ra-accent-5: #e87ba4;
    --ra-accent-6: #008300;
    --ra-accent-7: #4a3aa7;
    --ra-accent-8: #e34948;
    --ra-card-bg: #ffffff;
    --ra-grid: #cccccc;
  }

  /* Recovery Analytics Dashboard. The tab strip and the Print button
     are screen controls; on paper every pane is stacked under the
     heading the screen hides. Bootstrap's own .tab-content > .tab-pane
     {display:none} is 0,2,0, the same as the rule here, so source
     order settles it. The definitions panel is opened: a printed page
     that says "how these numbers are calculated" and then shows
     nothing under it is worse than no heading. Charts keep a fixed
     height so a canvas is never clipped, and a panel never splits
     across a page. */
  .ra-tabs,
  .ra-header-actions {
    display: none;
  }
  .ra-tab-content > .tab-pane {
    display: block;
  }
  .ra-print-heading {
    display: block;
  }
  #ra-def.collapse {
    display: block;
    height: auto;
  }
  .ra-chart {
    height: 240px;
    max-height: none;
  }
  .ra-panel,
  .ra-chart,
  .ra-card {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .ra-card {
    border: 1px solid #666666;
  }
  .ra-card::before,
  .ra-card::after {
    display: none;
  }

  /* Navigation chrome, none of which a reader can act on. .navbar is
     restated rather than left to Bootstrap because the full-bleed
     fill it would otherwise print is ours (--navbar-bg on
     .container-fluid). .theme-toggle-pill is float:right, so on the
     pages that carry one (base_auth.html, the public return request
     form) it lands in the top-right of page 1. .breadcrumb is hidden
     globally rather than page-scoped because on these templates it is
     the first child of the content block and may well sit OUTSIDE a
     page's own wrapper; either way its links are dead on paper. No
     !important is needed here: each of these selectors is
     0,1,0 and later in the cascade than the display it overrides. .back-to-top
     is here for the same reason as the rest: a scroll control is meaningless
     on paper. It relies on its state class NOT being Bootstrap's `.show`,
     whose `display:block!important` this rule could not outrank -- see the
     Back to top section above. */
  .navbar,
  .theme-toggle-pill,
  .breadcrumb,
  .back-to-top {
    display: none;
  }

  /* .container is width:750px/970px/1170px by breakpoint. Whether any
     of those matches on paper depends on the reader's paper size and
     margin choice (Letter at "no margins" reports ~816px and matches
     the 768px step; the default margins report ~739px and match
     nothing), which would make the printed measure depend on a print
     dialog setting. Let it fill whatever page box it is given. */
  .container {
    width: auto;
    max-width: 100%;
  }

  /* Sticky is a scroll affordance and there is no scrolling on paper;
     left unreset, the offset cells are positioned against a viewport
     the printer does not have. Same selectors as the screen rules
     above so specificity ties and source order settles it. */
  .staging-table th:first-child,
  .staging-table td:first-child,
  .staging-table.has-subject th:nth-child(2),
  .staging-table.has-subject td:nth-child(2),
  .mapping-table thead th {
    position: static;
  }

  /* The Import Search grids (.staging-scroll, ~:195) stick on BOTH axes
     as well, through rules scoped under the wrapper; the block above
     resets only the UNSCOPED key-column rule they share with the
     evidence grids. The scoped header and corner still hold `position:
     sticky` and all three hold an inset, so restate them at the same
     weight -- (0,2,2), (0,3,2) and (0,3,1) -- and let source order
     settle it, the same contract the findings/claims block below
     documents. */
  .staging-scroll .staging-table thead th,
  .staging-scroll .staging-table thead th:first-child,
  .staging-scroll .staging-table td:first-child {
    position: static;
    box-shadow: none;
  }

  /* The findings and claims grids stick on BOTH axes, and their inset
     shadows stand in for the collapsed borders a sticky cell loses on
     screen. On paper nothing scrolls, the borders are drawn by the
     table as normal, and a leftover inset reads as a doubled rule --
     so unstick and un-shadow both. The :first-child selectors are
     0,2,1 and 0,2,2 on screen, so the reset has to restate them at
     the same weight and win on source order; a shorter list here
     would leave the corner cell shadowed. */
  .findings-table thead th,
  .findings-table th:first-child,
  .findings-table td:first-child,
  .findings-table thead th:first-child,
  .claims-table thead th,
  .claims-table th:first-child,
  .claims-table td:first-child,
  .claims-table thead th:first-child {
    position: static;
    box-shadow: none;
  }

  /* ...and un-cap the region. `overflow: visible` below is NOT enough
     on its own: with a live max-height the table spills out of its box
     and prints over the pagination that follows it. Both are needed. */
  .findings-scroll,
  .claims-scroll,
  .staging-scroll {   /* shares the screen cap, so it shares the reset */
    max-height: none;
  }

  /* Bootstrap 3.4.1 applies overflow-x:auto to .table-responsive at
     every width, print included, where it clips the wide evidence and
     staging grids at the container edge instead of scrolling them.
     Let the content out; the page box is then the only limit. This
     also covers .findings-scroll / .claims-scroll / .staging-scroll,
     which ARE that wrapper -- one div, not a nested one -- but it only
     ties their 0,1,0 `overflow: auto`, so it wins on source order: the
     screen rules are deliberately placed ABOVE this block, not appended
     to the end of the file. Move them below and every printed grid is
     clipped at 70vh. */
  .table-responsive {
    overflow: visible;
  }

  /* Chips and callouts are the one place colour is baked in as
     literal hex -- label-success/warning/primary/info/danger and the
     dark alert overrides -- so no palette change reaches them, and a
     white-on-colour chip disappears entirely once background graphics
     are off. Flatten to ink. Safe here because colour is never the
     only signal on these surfaces: every chip carries its own text.
     !important rather than a longer selector because the dark
     overrides run from 0,2,0 ([data-theme="dark"] .label-success) to
     0,3,0 ([data-theme="dark"] .bs-custom .alert-warning) and there
     are a dozen of them; importance beats specificity, so this stays
     one rule instead of twelve. Borders match what Bootstrap's own
     print block already chose for each shape: #000 for a chip
     (.label), #999 for a block-level box (pre, blockquote). */
  .label,
  .badge {
    color: #000000 !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid #000000;
  }
  .alert {
    color: #000000 !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid #999999;
  }
}

/* ---- Print: Vendor Audit Workbench ---- */
@media print {
  /* Every control on the sheet is dead on paper: the buttons act on
     the audit and the forms exist only to POST them. Scoped to the
     page (0,2,0 over .btn's 0,1,0) and NOT global, because elsewhere
     in the product a <form> is the printable content -- the public
     supplier return request page is one form from top to bottom.
     This assumes the workbench's forms are action forms; nothing that
     belongs on the filed sheet may be wrapped in one. */
  .vendor-audit-workbench .btn,
  .vendor-audit-workbench form {
    display: none;
  }

  /* Bootstrap prints " (href)" after every link. Every link here is
     an internal /recovery/... path, which on paper is noise the
     reader cannot use and which wraps the surrounding sentence
     badly, so suppress it and let the link read as plain text --
     0,2,1 and 0,1,1 respectively, both over the vendor rule's. */
  .vendor-audit-workbench a[href]:after {
    content: "";
  }
  .vendor-audit-workbench a {
    text-decoration: none;
  }

  /* Page breaks. The vendor block covers thead/tr/h2 in the legacy
     properties only; these add the modern equivalents (and .panel,
     which it has no rule for) so the behaviour survives a browser
     that has dropped the page-break-* aliases. The workbench stacks
     several tables, so a heading group that does not repeat leaves
     page 2 as unlabelled columns of numbers. break-inside on a panel
     taller than a page is ignored by the browser rather than
     honoured, so it cannot cost content. */
  .vendor-audit-workbench thead {
    display: table-header-group;
  }
  .vendor-audit-workbench tr,
  .vendor-audit-workbench .panel {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .vendor-audit-workbench h2 {
    page-break-after: avoid;
    break-after: avoid;
  }
}