html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ---- Themeable colors (overridable from appsettings App:Colors) ---- */
:root {
  --app-primary: #0d6efd;
  --status-open:     #fd7e14;
  --status-complete: #198754;
  --status-deleted:  #6c757d;
  --car-required:    #dc3545;
}

/* Not complete is the normal state of a reject: a quiet outline, not an alarm. */
.badge.status-open     { background-color: var(--bs-secondary-bg); color: var(--bs-body-color); border: 1px solid var(--status-open); }
.badge.status-complete { background-color: var(--status-complete); color: #fff; }
.badge.status-deleted  { background-color: var(--status-deleted);  color: #fff; }
.badge.car-required    { background-color: var(--car-required);    color: #fff; }

/* Deleted rejects (shown to managers with "include deleted") are tinted with
   Bootstrap 5.3's theme-aware subtle colour so they read in light and dark. */
.table > tbody > tr.row-deleted { --bs-table-bg: var(--bs-secondary-bg-subtle); }

/* While a POST is in flight its submit buttons gray out (site.js adds this;
   pointer-events blocks extra clicks without the disabled attribute, which
   could drop the button from the form data mid-submit). */
.btn-posting { pointer-events: none; opacity: .55; }

.navbar-brand img { height: 28px; width: auto; }

/* Every navbar link the same color, dropdown toggles too (the layout's
   scoped CSS colors plain anchors blue). */
.navbar-nav .nav-link { color: var(--bs-nav-link-color); }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { color: var(--bs-nav-link-hover-color); }
.navbar-nav .nav-link.show, .navbar-nav .show > .nav-link { color: var(--bs-navbar-active-color); }

/* Footer: one line on wide screens, wraps on phones (no sideways scroll). */
@media (max-width: 575.98px) {
  .footer-text { white-space: normal; line-height: 1.4; padding-top: .7rem; padding-bottom: .7rem; }
  body { margin-bottom: 84px; }
}

/* Session timeout warning (site.js shows it). */
.session-warning { position: sticky; top: .5rem; z-index: 1030; }

/* Text that keeps its line breaks (summary values, notes). */
.text-prewrap { white-space: pre-line; }

/* Rejects grid: the Open box stays narrow. */
.open-number { width: 9rem; }

/* Navbar location selector */
.nav-location { width: auto; min-width: 5rem; }

/* ---- Stats & KPIs (Ticket's tile layout) --------------------------------- */
.kpi-big { font-size: 2.1rem; font-weight: 600; line-height: 1.15; }
.kpi-num { font-variant-numeric: tabular-nums; }
.kpi-open { color: var(--status-open); }
.kpi-car  { color: var(--car-required); }
.kpi-legend { display: inline-flex; flex-wrap: wrap; gap: .35rem .8rem; }
.kpi-chip   { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--bs-secondary-color); }
.kpi-dot    { width: .65rem; height: .65rem; border-radius: 50%; display: inline-block; }

/* ---- Dashboard charts (wwwroot/js/dashboard.js reads these) -------------
   Fixed categorical order, one hue per location (by LocationId) or category,
   never re-assigned when counts change. Slot 0 is "other". The dark theme
   gets its own steps of the same hues. Aging bands use the status colors,
   always next to their day count. */
:root {
  --viz-0: #8a8984;
  --viz-1: #2a78d6;
  --viz-2: #eb6834;
  --viz-3: #1baf7a;
  --viz-4: #eda100;
  --viz-5: #e87ba4;
  --viz-6: #008300;
  --viz-7: #6250d6;
  --viz-8: #e34948;
  --aging-1: #0ca30c;
  --aging-2: #fab219;
  --aging-3: #ec835a;
  --aging-4: #d03b3b;
}
[data-bs-theme="dark"] {
  --viz-0: #8a8984;
  --viz-1: #3987e5;
  --viz-2: #d95926;
  --viz-3: #199e70;
  --viz-4: #c98500;
  --viz-5: #d55181;
  --viz-6: #008300;
  --viz-7: #9085e9;
  --viz-8: #e66767;
}

.dash-chart    { position: relative; height: 300px; }
.dash-chart-lg { height: 340px; }
.dash-chart-sm { height: 220px; }

.kpi-dot.aging-1 { background: var(--aging-1); }
.kpi-dot.aging-2 { background: var(--aging-2); }
.kpi-dot.aging-3 { background: var(--aging-3); }
.kpi-dot.aging-4 { background: var(--aging-4); }
.aging-badge {
  display: inline-block; min-width: 3rem; padding: .1rem .45rem; border-radius: .35rem;
  border: 1px solid; text-align: right; font-weight: 600;
}
.aging-badge.aging-1 { border-color: var(--aging-1); background: color-mix(in srgb, var(--aging-1) 18%, transparent); }
.aging-badge.aging-2 { border-color: var(--aging-2); background: color-mix(in srgb, var(--aging-2) 22%, transparent); }
.aging-badge.aging-3 { border-color: var(--aging-3); background: color-mix(in srgb, var(--aging-3) 22%, transparent); }
.aging-badge.aging-4 { border-color: var(--aging-4); background: color-mix(in srgb, var(--aging-4) 22%, transparent); }

/* ---- Reject entry / details ---------------------------------------------- */
.reject-value { font-variant-numeric: tabular-nums; }
.reject-image { max-width: 100%; max-height: 220px; height: auto; display: block; border-radius: 4px; }
.reject-image-slot { min-height: 120px; }
.audit-value { max-width: 18rem; white-space: pre-wrap; word-break: break-word; }

/* ---- Printing ------------------------------------------------------------ */
.print-only { display: none; }
@media print {
  .no-print, nav, .navbar, footer { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .print-only { display: block !important; }
}

/* ---- Printed reject report (Access rptRejectReport), Details > Print ----- */
.reject-print { font-family: Arial, sans-serif; font-size: 11pt; color: #000; background: #fff; }
.reject-print-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #000; padding-bottom: 4px; margin-bottom: 8px; }
.reject-print-title { font-size: 18pt; font-weight: bold; letter-spacing: 1px; }
.reject-print-number { font-size: 14pt; }
.reject-print-stamp { font-size: 9pt; text-align: right; }
.reject-print-facts, .reject-print-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.reject-print-facts th, .reject-print-facts td,
.reject-print-table th, .reject-print-table td { border: 1px solid #777; padding: 3px 6px; text-align: left; vertical-align: top; color: #000; background: #fff; }
.reject-print-facts th { width: 18%; background: #eee; font-weight: bold; }
.reject-print-table th { background: #eee; }
.reject-print-table .text-end { text-align: right; }
.reject-print-total td { font-weight: bold; }
.reject-print-section { font-weight: bold; margin: 8px 0 2px; }
.reject-print-text { border: 1px solid #777; padding: 3px 6px; white-space: pre-wrap; }

@media print {
  body.page-reject { margin: 0 !important; }
  body.page-reject .container-fluid { padding: 0 !important; }
  .reject-print tr, .reject-print-text { break-inside: avoid; page-break-inside: avoid; }
  .reject-print-facts th, .reject-print-table th { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Dashboard printout: landscape Letter, the screen's xl column widths kept
   (the print page is narrower than the xl breakpoint), panels never split.
   Chromium cuts flex rows badly across pages, so the printout floats the
   panels instead, each screen row starting on a new line (dash-row-start).
   dashboard.js switches to the light theme for the printout and resizes the
   charts to the print layout. */
@page dashboard { size: 11in 8.5in; margin: 0.35in; }

@media print {
  html:has(body.page-dashboard) { font-size: 11px; }
  body.page-dashboard { page: dashboard; margin: 0 !important; }
  body.page-dashboard .container-fluid { padding: 0 !important; }
  body.page-dashboard .dash-tiles,
  body.page-dashboard .dash-grid { display: block; margin: 0 0 .5rem 0 !important; }
  body.page-dashboard .dash-tiles::after,
  body.page-dashboard .dash-grid::after { content: ""; display: table; clear: both; }
  body.page-dashboard .dash-tiles > [class*="col-"],
  body.page-dashboard .dash-grid > [class*="col-"] { float: left; margin-top: .5rem; break-inside: avoid; page-break-inside: avoid; }
  body.page-dashboard .dash-row-start { clear: both; }
  body.page-dashboard .card { height: auto !important; }
  body.page-dashboard .card-body { padding: .4rem .6rem; }
  .dash-tiles > [class*="col-"] { width: 16.6667%; }
  .dash-tiles .kpi-big { font-size: 1.6rem; }
  .dash-grid > .col-xl-4 { width: 33.3333%; }
  .dash-grid > .col-xl-6 { width: 50%; }
  .dash-grid > .col-xl-8 { width: 66.6667%; }
  .dash-grid > .dash-break { width: 100%; }
  .dash-chart    { height: 175px; }
  .dash-chart-lg { height: 215px; }
  .dash-chart-sm { height: 135px; }
  .dash-chart canvas { width: 100% !important; height: 100% !important; }
  .dash-break { break-before: page; page-break-before: always; }
  .aging-badge { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---- Labels (Access MyLabels / RLS_Reject_Label), one sticker per box ---- */
.label-sheet { display: flex; flex-direction: column; gap: 8px; }
.label-row { display: flex; gap: 8px; }
.label-box {
  border: 1px dashed #999; padding: 10px 12px; font-family: Arial, sans-serif;
  font-size: 13px; line-height: 1.4;
}
/* On screen each sticker is shown at its printed size (4 x 2 in), so the
   preview is spaced like the sheet. */
.label-box { box-sizing: border-box; width: 4in; max-width: 100%; min-height: 2in; flex: 0 0 auto; }
.label-blank { min-height: 2in; flex: 0 0 auto; }
.label-head { display: flex; justify-content: space-between; gap: 1em; }
.label-rule { border-top: 1px solid #000; margin: 2px 0; }
.label-grid { width: 100%; border-collapse: collapse; }
.label-grid td { padding: 0; vertical-align: top; }
.label-grid td:last-child:not(:first-child) { text-align: right; }
.lbl { font-size: 0.85em; }
.val { font-size: 1.05em; }
.label-notes { white-space: pre-wrap; }

/* PLS-591 sheet: 8.5x11in, ten 2x4in labels, 2 cols x 5 rows.
   Content area 8x10in = exactly 2x4in + 5x2in, zero gutter. A named page so
   the sheet margins only apply when printing labels. */
@page labels { size: 8.5in 11in; margin: 0.5in 0.25in 0.35in 0.25in; }

@media print {
  /* The named page sits on body, not on the sheet: a page name that changes
     part way through the document forces a page break (a blank first page). */
  body.page-labels {
    page: labels; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important;
    background: #fff !important; color: #000 !important;
  }
  body.page-labels footer, body.page-labels header, body.page-labels nav { display: none !important; }
  body.page-labels .container, body.page-labels .container-fluid, body.page-labels main {
    padding: 0 !important; margin: 0 !important; max-width: none !important;
  }
  .label-sheet { gap: 0 !important; width: 8in !important; }
  /* Rows are the page-break unit: a sticker is never split across pages. */
  .label-row {
    width: 8in !important; break-inside: avoid; page-break-inside: avoid;
    display: flex; gap: 0; height: 2in;
  }
  .label-box {
    background: #fff; color: #000; border: none;
    box-sizing: border-box; width: 4in; height: 2in;
    flex: 0 0 4in; overflow: hidden; padding: 0.15in 0.2in;
    font-size: 12pt;
  }
  .label-blank { flex: 0 0 4in; height: 2in; border: none; }
}

/* ---- Quality Alert (printable 8D) ---------------------------------------- */
.qa-sheet { max-width: 800px; margin: 0 auto; font-family: Arial, sans-serif; }
.qa-title { text-align: center; font-size: 22px; font-weight: bold; letter-spacing: 2px; margin-bottom: 10px; }
.qa-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.qa-table th, .qa-table td { border: 1px solid #666; padding: 4px 8px; font-size: 13px; text-align: left; }
.qa-table th { width: 18%; background: rgba(128,128,128,.12); }
.qa-section { font-weight: bold; margin: 10px 0 2px; font-size: 14px; }
.qa-block { border: 1px solid #666; min-height: 34px; padding: 4px 8px; font-size: 13px; white-space: pre-wrap; }
.qa-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.qa-photo img { max-height: 180px; max-width: 240px; border: 1px solid #666; }
.qa-photo figcaption { font-size: 12px; }

@media print {
  .qa-sheet { max-width: none; background: #fff; color: #000; }
  .qa-sheet table, .qa-sheet th, .qa-sheet td { color: #000; border-color: #666; }
}

/* ---- Scheduler ------------------------------------------------------------ */
.job-recipients { font-family: var(--bs-font-monospace); font-size: .875rem; }
.job-result { min-width: 12rem; max-width: 22rem; white-space: normal; word-break: break-word; }
.job-name { min-width: 10rem; }
/* Row actions stacked, so the table fits a 1366px screen. */
.job-actions { width: 7.5rem; }
.job-actions form, .job-actions > a { display: block; margin-bottom: .25rem; }
.job-actions .btn { width: 100%; }

/* ---- Layout -------------------------------------------------------------- */
/* Form pages stop at 1400px on wide screens; grids, reports and the
   dashboard set ViewData["Wide"] and use the whole width. */
.page-capped { max-width: 1400px; margin-left: auto; margin-right: auto; }

/* Navbar quick find and the right hand items. */
.nav-find .form-control { width: 15rem; }
.nav-right { align-items: center; }
@media (max-width: 767.98px) {
  /* Opened on a phone: items left aligned, the quick find full width. */
  .nav-right { align-items: flex-start; gap: .4rem; padding-top: .5rem; }
  .nav-find, .nav-find .form-control { width: 100%; }
  .navbar-nav .nav-item { width: 100%; }
}

/* ---- Status badges: small, neutral words ------------------------------- */
.badge.status-badge { font-size: .55em; font-weight: 600; vertical-align: middle; }
.location-badge { font-size: .9rem; }

/* ---- Reject form ---------------------------------------------------------- */
.form-check-lg .form-check-input { width: 1.25em; height: 1.25em; margin-top: .15em; }
.form-check-lg .form-check-label { padding-left: .25rem; }
/* Details edit: the groups one under the other, each with its Access name. */
.reject-section { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--bs-border-color); scroll-margin-top: 1rem; }
.reject-section-title { text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); margin: .25rem 0 .5rem; }
/* Save stays in reach at the bottom of long forms. */
.save-bar {
  position: sticky; bottom: 0; z-index: 1020; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  padding: .6rem 0; margin-top: 1rem; background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color);
}
.saved-banner { font-size: 1.05rem; }
.saved-banner-title { font-size: 1.35rem; font-weight: 600; }
.summary-list dt { font-weight: 600; color: var(--bs-secondary-color); }
.summary-list dd { margin-bottom: .35rem; }

/* Details actions: main ones left, complete and delete right; a two column
   grid on phones. */
.detail-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.detail-actions-main, .detail-actions-side { display: flex; flex-wrap: wrap; gap: .5rem; }
.detail-actions form { margin: 0; }
@media (max-width: 575.98px) {
  .detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .detail-actions-main, .detail-actions-side { display: contents; }
  .detail-actions .btn { width: 100%; white-space: nowrap; }
  .detail-tabs .nav-link { padding: .5rem .6rem; }
  .status-cell .badge { display: inline-block; margin-bottom: 2px; }
}
@media (min-width: 768px) {
  .box-line .visually-hidden-md { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; }
}

/* ---- Tap targets: 44px on touch screens and narrow windows --------------- */
@media (pointer: coarse), (max-width: 768px) {
  .btn, .btn-sm, .nav-link, .form-control, .form-select, .form-control-sm, .form-select-sm, .dropdown-item, .page-link {
    min-height: 44px;
  }
  .btn-sm, .btn { display: inline-flex; align-items: center; justify-content: center; }
  .form-check-input { width: 1.4em; height: 1.4em; }
}

/* ---- Home and Report Board ------------------------------------------------ */
a.kpi-link { color: inherit; text-decoration: none; display: block; height: 100%; }
a.kpi-link:hover .card, a.kpi-link:focus .card { border-color: var(--app-primary) !important; }
.board-card .list-group-item { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.board-card .list-group-item small { color: var(--bs-secondary-color); }
.home-find .form-control { font-size: 1.15rem; }

/* ---- Reports: CAR List colors (Access) ----------------------------------- */
.table > tbody > tr.car-closed { --bs-table-bg: var(--bs-success-bg-subtle); }
.table > tbody > tr.car-response-due { --bs-table-bg: var(--bs-danger-bg-subtle); }

/* ---- Admin tables --------------------------------------------------------- */
.lookup-code { min-width: 5.5rem; }
.import-table td, .import-table th { white-space: nowrap; font-size: .85rem; }

/* ---- Printed reject report additions ------------------------------------- */
.reject-print-brand { display: flex; align-items: center; gap: 12px; }
.reject-print-brand img { height: 42px; width: auto; }
.reject-print-flags { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0; font-size: 11pt; }
.reject-print-tall { min-height: 3.2em; }
.reject-print-sign { margin: 10px 0 6px; }
.reject-print-line { display: inline-block; width: 3.5in; border-bottom: 1px solid #000; }
.reject-print-photos { display: flex; gap: 12px; margin-top: 8px; break-inside: avoid; }
.reject-print-photos figure { margin: 0; }
.reject-print-photos img { max-width: 3.4in; max-height: 2.6in; border: 1px solid #777; }
.reject-print-photos figcaption { font-size: 9pt; }

/* ---- Request for Change (ECN) --------------------------------------------- */
.rcn-sheet { max-width: 800px; margin: 0 auto; font-family: Arial, sans-serif; }
.rcn-sheet .qa-table th { width: 26%; }
.rcn-box { display: inline-block; width: 1.1em; }
/* Group and report totals the API puts after their group. */
.table > tbody > tr.report-total > td { font-weight: 600; border-top: 2px solid var(--bs-border-color); }