/* ---------------------------------------------------------------------------
   Report letterhead faces.

   Madelyn and Knockout are licensed retail fonts, so their files are not in
   the repository — drop the licensed webfonts into assets/fonts/ under the
   names below and these rules pick them up (see assets/fonts/README.md).
   Until then each face falls through to the stack on the rule that uses it,
   so the report still prints, just in the substitute face.

   font-display:swap, and the report waits on document.fonts.ready before
   opening the print dialog, so a slow or missing file can never leave the
   letterhead blank or put the fallback on paper when the real face was about
   to arrive. See sdPrint() in views/pages/report-preview.php.
   --------------------------------------------------------------------------- */
/* Poppins is self-hosted rather than pulled from Google Fonts. These machines
   cannot reach fonts.googleapis.com — the request simply fails — so the
   wordmark was silently falling back to Segoe UI on every report printed. The
   family is SIL OFL licensed, so shipping the files is allowed; latin subset
   only, at the two weights the sheet uses, which is 15KB for both. */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* local() first, so a copy installed on the Windows machine is used with no
   file in assets/fonts/ at all — which is how these are usually bought: as a
   desktop .otf you double-click to install. The url() entries then cover the
   webfont, and .ttf is listed because a foundry download often ships one. */
@font-face {
  font-family: "Madelyn";
  src:
    local("Madelyn"),
    local("Madelyn Regular"),
    url("../fonts/madelyn.woff2") format("woff2"),
    url("../fonts/madelyn.woff") format("woff"),
    url("../fonts/madelyn.otf") format("opentype"),
    url("../fonts/madelyn.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Knockout Featherweight";
  src:
    local("Knockout Featherweight"),
    local("Knockout HTF28 JuniorFeatherwt"),
    url("../fonts/knockout-featherweight.woff2") format("woff2"),
    url("../fonts/knockout-featherweight.woff") format("woff"),
    url("../fonts/knockout-featherweight.otf") format("opentype"),
    url("../fonts/knockout-featherweight.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The letterhead's three faces and the sheet's body face, named once so a
     rule reads as its intent ("the wordmark face") and a substitution is made
     in one place rather than in every rule that mentions the family. */
  --sd-font-wordmark: "Poppins", "Segoe UI", Arial, sans-serif;
  --sd-font-tagline: "Madelyn", "Segoe Script", "Brush Script MT", cursive;
  --sd-font-letterhead:
    "Knockout Featherweight", "Arial Narrow", Calibri, Carlito, sans-serif;
  /* Carlito is metric-compatible with Calibri and is what Linux print boxes
     have; the sheet lays out identically on either. */
  --sd-font-report: Calibri, Carlito, "Segoe UI", Arial, sans-serif;

  /* The clear space under every table on the report sheet, screen and paper
     alike. It used to be a per-table Bootstrap utility (.mb-1 / .mb-2 / a bare
     .pdf-table) with a second set of values inside @media print, so no two gaps
     on the sheet matched and what printed did not match the preview. One value
     now, set here — change it and every gap on the sheet moves together. */
  --sd-table-gap: 12px;

  /* The rule around every cell on the report. Light grey rather than near-black:
     the grid is there to separate values, not to be read itself. Kept at 1px and
     no lighter than this — printers lighten thin hairlines, and a grid that
     survives on screen can disappear on paper. */
  --sd-report-border: #3a3a3a;
}

:root {
  --sd-navy: #061323;
  --sd-navy-2: #0a1d33;
  --sd-gold: #d99600;
  --sd-gold-2: #f2b31a;
  --sd-soft: #f6f8fb;
  --sd-border: #dfe5ec;
  --sd-text: #111827;
  --sd-muted: #6b7280;
  --sd-green: #2f8f46;
  --sd-red: #c73a3a;
  --sd-blue: #2d6ccf;
  --sd-orange: #c66a00;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--sd-soft);
  color: var(--sd-text);
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  min-height: 100vh;
}

a {
  text-decoration: none;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, 46%) 1fr;
  background: #fff;
}

.auth-brand {
  background:
    radial-gradient(circle at 20% 18%,
      rgba(242, 179, 26, 0.18),
      transparent 30%),
    linear-gradient(145deg, var(--sd-navy), #020814);
  color: #fff;
  padding: 58px 68px;
  position: relative;
  overflow: hidden;
}

.auth-brand:after {
  content: "";
  position: absolute;
  right: -10%;
  bottom: 5%;
  width: 75%;
  height: 38%;
  border: 1px solid rgba(242, 179, 26, 0.25);
  border-radius: 55% 45% 30% 70%;
  transform: skewX(-10deg);
  box-shadow:
    0 0 0 14px rgba(217, 150, 0, 0.03),
    0 0 80px rgba(217, 150, 0, 0.14) inset;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 2;
}

.logo-badge {
  width: 72px;
  height: 72px;
  border: 2px solid var(--sd-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sd-gold);
  font-size: 30px;
  font-weight: 800;
  box-shadow: 0 0 0 5px rgba(217, 150, 0, 0.08);
}

.brand-title {
  font-size: 34px;
  font-weight: 850;
  color: var(--sd-gold);
  letter-spacing: 0.4px;
}

.brand-subtitle {
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.auth-copy {
  position: relative;
  z-index: 2;
  margin-top: 95px;
  max-width: 560px;
}

.gold-line {
  width: 70px;
  height: 3px;
  background: var(--sd-gold);
  margin-bottom: 28px;
}

.auth-copy h1 {
  font-size: 38px;
  line-height: 1.15;
  font-weight: 850;
  margin: 0 0 22px;
}

.auth-copy p {
  color: #d5dde8;
  line-height: 1.7;
  font-size: 16px;
}

.auth-feature {
  display: flex;
  gap: 20px;
  margin-top: 34px;
  align-items: flex-start;
}

.auth-feature .feature-icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--sd-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sd-gold);
  flex: none;
}

.auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffffff, #f7f9fc);
  padding: 40px;
}

.login-card {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border: 1px solid var(--sd-border);
  border-radius: 20px;
  padding: 46px;
  box-shadow: 0 18px 55px rgba(4, 18, 36, 0.1);
}

.login-card .user-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff2de;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #111827;
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 292px;
  background: linear-gradient(180deg, var(--sd-navy), #020814);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  box-shadow: 14px 0 30px rgba(0, 0, 0, 0.15);
  z-index: 20;
}

.sidebar .brand {
  padding: 28px 22px 24px;
  display: flex;
  gap: 13px;
  align-items: center;
  /* The brand is an <a> to the dashboard; it must not read as body link text. */
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
}

.sidebar .brand:hover {
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
}

.sidebar .brand:focus-visible {
  outline: 2px solid var(--sd-gold-2);
  outline-offset: -2px;
}

.sidebar .logo-badge {
  width: 54px;
  height: 54px;
  font-size: 22px;
}

.sidebar .brand-title {
  font-size: 27px;
  line-height: 1;
}

.sidebar .brand-subtitle {
  font-size: 11px;
  color: #fff;
  margin-top: 4px;
}

.nav-menu {
  padding: 16px 14px;
  flex: 1;
}

.nav-link-sd {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #e7eef8;
  padding: 14px 17px;
  border-radius: 11px;
  margin: 7px 0;
  font-weight: 700;
}

.nav-link-sd:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.nav-link-sd.active {
  background: linear-gradient(90deg,
      rgba(217, 150, 0, 0.22),
      rgba(255, 255, 255, 0.08));
  color: var(--sd-gold-2);
  box-shadow: inset 4px 0 0 var(--sd-gold);
}

.nav-icon {
  width: 22px;
  text-align: center;
}

.sidebar-footer {
  padding: 0 22px 26px;
  color: #d4dde8;
  font-size: 13px;
  line-height: 1.7;
}

.sidebar-footer:before {
  content: "";
  display: block;
  height: 1px;
  background: var(--sd-gold);
  margin-bottom: 17px;
  opacity: 0.85;
}

.sidebar-footer strong {
  display: block;
  color: #fff;
  font-size: 16px;
  margin-bottom: 4px;
}

.main {
  margin-left: 292px;
  width: calc(100% - 292px);
}

.topbar {
  height: 82px;
  background: #fff;
  border-bottom: 1px solid var(--sd-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 22px;
}

.hamburger {
  font-size: 26px;
  color: #111827;
}

.page-greeting h2,
.page-title h1 {
  font-size: 22px;
  margin: 0;
  font-weight: 820;
}

.page-greeting p,
.page-title p {
  margin: 3px 0 0;
  color: var(--sd-muted);
  font-size: 13px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.top-info {
  display: flex;
  gap: 10px;
  align-items: center;
  border-right: 1px solid var(--sd-border);
  padding-right: 18px;
}

.notification {
  position: relative;
  font-size: 24px;
}

.badge-dot {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--sd-gold-2);
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sd-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.user-menu {
  display: flex;
  gap: 10px;
  align-items: center;
}

.content {
  padding: 28px;
}

.card-sd {
  background: #fff;
  border: 1px solid var(--sd-border);
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(8, 24, 48, 0.05);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.kpi-card {
  padding: 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kpi-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff4df;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  flex: none;
  margin-right: 18px;
}

.kpi-card h6 {
  font-size: 13px;
  font-weight: 820;
  margin: 0 0 4px;
  color: #111827;
}

.kpi-card .value {
  font-size: 29px;
  font-weight: 860;
}

.trend {
  font-size: 12px;
  color: var(--sd-green);
}

.trend.down {
  color: var(--sd-red);
}

.spark {
  width: 78px;
  height: 34px;
  border-bottom: 2px solid rgba(217, 150, 0, 0.12);
  position: relative;
}

.spark:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 2px;
  background: linear-gradient(110deg,
      transparent 0 15%,
      var(--sd-gold) 16% 28%,
      transparent 29% 38%,
      var(--sd-gold) 39% 52%,
      transparent 53% 65%,
      var(--sd-gold) 66% 85%,
      transparent 86%);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 820;
  margin-bottom: 18px;
}

.btn-gold {
  background: linear-gradient(135deg, var(--sd-gold-2), var(--sd-gold));
  border: 0;
  color: #111827;
  font-weight: 800;
  border-radius: 10px;
  padding: 12px 20px;
}

.btn-gold:hover {
  filter: brightness(0.98);
  color: #111827;
}

.btn-outline-sd {
  border: 1px solid var(--sd-border);
  background: #fff;
  color: #111827;
  border-radius: 10px;
  font-weight: 700;
  padding: 11px 18px;
}

.chart-card {
  padding: 22px;
  height: 100%;
}

.fake-line-chart {
  height: 200px;
  position: relative;
  padding: 20px 16px 12px;
  border-top: 1px solid #eef2f6;
}

.fake-line-chart .grid-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid #edf1f5;
}

.fake-line-chart svg {
  width: 100%;
  height: 160px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
}

.donut {
  width: 165px;
  height: 165px;
  border-radius: 50%;
  background: conic-gradient(#4e9b3f 0 68%,
      #d99600 68% 71%,
      #1f2937 71% 88%,
      #c8ced8 88% 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: none;
}

.donut:after {
  content: "";
  position: absolute;
  width: 93px;
  height: 93px;
  border-radius: 50%;
  background: #fff;
}

.donut-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  font-weight: 850;
  font-size: 25px;
}

.table-card {
  padding: 0;
  overflow: hidden;
}

.table-card .table {
  margin: 0;
}

.table-card th {
  font-size: 11px;
  text-transform: uppercase;
  color: #374151;
  background: #f8fafc;
  border-bottom: 1px solid var(--sd-border);
  padding: 11px 16px;
}

.table-card td {
  vertical-align: middle;
  padding: 11px 16px;
  border-color: #eef2f6;
  font-size: 12.5px;
}

.table-card td small {
  font-size: 11px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 750;
  font-size: 12px;
}

.status-completed {
  background: #dcf3df;
  color: #23713a;
}

.status-pending {
  background: #fff0d5;
  color: #b35c00;
}

.status-draft {
  background: #e7f0fb;
  color: #1e5ba8;
}

.status-cancelled {
  background: #fde0e0;
  color: #b82424;
}

.vehicle-thumb {
  width: 54px;
  height: 34px;
  background: linear-gradient(135deg, #e5e7eb, #f9fafb);
  border: 1px solid #d3d9e1;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--sd-border);
  border-radius: 8px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  color: #111827;
}

.icon-btn.danger {
  color: #ef4444;
}

.form-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 18px;
  padding: 22px 28px;
  margin-bottom: 20px;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.step-num {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  font-weight: 850;
}

.step-item.active .step-num {
  background: var(--sd-gold);
  color: #fff;
  border-color: var(--sd-gold);
}

.step-item.done .step-num {
  background: #e8f7e9;
  color: #2f8f46;
  border-color: #a8d8ad;
}

.step-label {
  font-weight: 820;
  font-size: 14px;
}

.step-sub {
  font-size: 12px;
  color: var(--sd-muted);
}

.form-section {
  padding: 22px;
  margin-bottom: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 24px;
}

.form-grid.three {
  grid-template-columns: repeat(3, 1fr);
}

.form-grid.two {
  grid-template-columns: repeat(2, 1fr);
}

label.form-label {
  font-size: 11.5px;
  font-weight: 750;
  color: #111827;
  margin-bottom: 5px;
  line-height: 1.35;
}

.required:after {
  content: " *";
  color: #ef4444;
}

/* Compact control metrics live in the "COMPACT FORM SCALE" block at the end of this file. */
.form-control,
.form-select {
  border-color: #d8e0ea;
  border-radius: 8px;
  color: #111827;
}

.input-group-text {
  border-color: #d8e0ea;
  background: #f8fafc;
  border-radius: 8px;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--sd-border);
  padding-top: 22px;
  margin-top: 10px;
}

.upload-box {
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  background: #fbfdff;
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #6b7280;
  padding: 16px;
}

.upload-box strong {
  display: block;
  color: #111827;
  margin-bottom: 4px;
}

.photo-slot .photo-thumb {
  position: relative;
  border: 1.5px dashed #cbd5e1;
  border-radius: 12px;
  background: #fbfdff;
  height: 150px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-slot .photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-slot .photo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #6b7280;
  gap: 2px;
}

.photo-slot .photo-empty strong {
  color: #111827;
}

.photo-slot .photo-empty span {
  font-size: 12px;
}

/* A mandatory slot with nothing in it yet — front and rear are required. */
.photo-slot-required .photo-thumb {
  border-color: #f0a6a6;
  background: #fffafa;
}

.photo-slot-required .photo-empty span {
  color: #bf2626;
  font-weight: 600;
}

.choice-grid {
  display: grid;
  gap: 10px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
}

/* Two evaluation items per line. Lives here rather than inline on the element
   so the breakpoints below can retune it. */
.eval-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}

.eval-table .eval-row {
  display: grid;
  grid-template-columns: 1.25fr 1.55fr;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #edf1f5;
}

.eval-table .eval-row:last-child {
  border-bottom: 0;
}

/* Heading over a group of condition rows (Electrical System, Maintenance).
   These name a block on the report and take no rating of their own. */
.eval-group-title {
  margin: 18px 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7280;
  border-bottom: 1px solid #dfe5ec;
  padding-bottom: 5px;
}

.segment {
  display: flex;
  border: 1px solid #dfe5ec;
  border-radius: 8px;
  overflow: hidden;
}

.segment button {
  flex: 1;
  border: 0;
  background: #fff;
  padding: 7px 8px;
  font-weight: 700;
  font-size: 12px;
}

.segment button.active.good {
  background: #dff4e2;
  color: #1d7635;
}

.segment button.active.avg {
  background: #fff0cc;
  color: #ad6200;
}

.segment button.active.bad {
  background: #ffe0e0;
  color: #bf2626;
}

.summary-side {
  padding: 22px;
  position: sticky;
  top: 100px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid #edf1f5;
  padding: 9px 0;
}

.summary-row span:first-child {
  color: #6b7280;
}

.summary-row strong {
  text-align: right;
}

.report-preview-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
}

.pdf-page {
  background: #fff;
  border: 1px solid #d5dce5;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  width: 860px;
  max-width: 100%;
  margin: 0 auto;
  padding: 26px;
  color: #111;
  font-family: var(--sd-font-report);
}

.pdf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin-bottom: var(--sd-table-gap);
}

.pdf-table td,
.pdf-table th {
  border: 1px solid var(--sd-report-border);
  padding: 5px;
}

.report-logo-line {
  text-align: center;
  border-bottom: 2px solid #111;
  margin-bottom: 10px;
  padding-bottom: 8px;
}

.pdf-title {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.pdf-small {
  font-size: 11px;
}

.report-tools {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.master-tabs {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.master-tab {
  background: #fff;
  border: 1px solid var(--sd-border);
  border-radius: 12px;
  padding: 16px 10px;
  text-align: center;
  font-weight: 800;
  color: #111827;
}

.master-tab.active {
  border-color: var(--sd-gold);
  color: var(--sd-gold);
}

.master-tab .tab-icon {
  font-size: 24px;
  display: block;
  margin-bottom: 7px;
}

.filter-bar {
  padding: 18px;
  display: grid;
  grid-template-columns: 1.5fr 1.4fr 1fr 1fr 1.1fr auto;
  gap: 14px;
  align-items: end;
}

.breadcrumb-lite {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
}

.report-actions-list .action-row {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #eef2f6;
  align-items: center;
}

.report-actions-list .action-row:last-child {
  border-bottom: 0;
}

.action-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #f7fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1200px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .filter-bar {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .report-preview-layout {
    grid-template-columns: 1fr;
  }

  .summary-side {
    position: static;
  }

  .master-tabs {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 900px) {
  .auth-page {
    grid-template-columns: 1fr;
  }

  .auth-brand {
    display: none;
  }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
  }

  .app-shell {
    display: block;
  }

  .main {
    margin-left: 0;
    width: 100%;
  }

  .nav-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .sidebar-footer {
    display: none;
  }

  .topbar {
    height: auto;
    padding: 18px;
    align-items: flex-start;
    gap: 16px;
  }

  .topbar-actions {
    display: none;
  }

  .form-grid,
  .form-grid.three,
  .form-grid.two {
    grid-template-columns: 1fr;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .form-stepper {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    grid-template-columns: 1fr;
  }

  .master-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* User dropdown and enhanced master data screens */
.user-dropdown .dropdown-toggle::after {
  display: none;
}

.user-menu-btn {
  border: 0;
  background: transparent;
  color: var(--sd-text);
  padding: 6px 8px;
  border-radius: 12px;
}

.user-menu-btn:hover,
.user-menu-btn.show {
  background: #f3f6fa;
}

.user-dropdown-menu {
  border: 1px solid var(--sd-border);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(8, 24, 48, 0.14);
  padding: 8px;
  min-width: 240px;
}

.user-dropdown-menu .dropdown-item {
  border-radius: 10px;
  font-weight: 650;
  padding: 10px 12px;
}

.user-dropdown-menu .dropdown-header {
  padding: 10px 12px;
  color: #111827;
}

.master-tabs button.master-tab {
  appearance: none;
  cursor: pointer;
}

.master-panel {
  animation: fadeSlide 0.18s ease-in-out;
}

@keyframes fadeSlide {
  from {
    opacity: 0.35;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.number-preview {
  border: 1px dashed var(--sd-gold);
  background: #fff8e8;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.number-preview span {
  font-weight: 800;
  color: #924f00;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.number-preview strong {
  font-size: 24px;
  color: #1f7a38;
  letter-spacing: 0.04em;
}

.settings-list {
  display: grid;
  gap: 12px;
}

.settings-list div {
  border: 1px solid #edf1f5;
  border-radius: 12px;
  padding: 14px;
  background: #fbfdff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-list small {
  display: block;
  color: var(--sd-muted);
  font-weight: 700;
}

.settings-list strong {
  text-align: right;
}

@media (max-width: 1200px) {
  .master-tabs {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 700px) {
  .master-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .number-preview {
    display: block;
  }

  .number-preview strong {
    display: block;
    margin-top: 8px;
  }
}

/* Rejected vehicle and valuation limit UI */
.master-tabs {
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
}

.screen-rule-box {
  border: 1px solid #edf1f5;
  background: #fbfdff;
  border-radius: 14px;
  padding: 18px;
}

.screen-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  flex: none;
}

.screen-icon.danger {
  background: #ffe4e4;
  color: #b82424;
}

.screen-icon.warning {
  background: #fff3d6;
  color: #a85c00;
}

.limit-helper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.limit-helper div {
  border: 1px solid #edf1f5;
  border-radius: 12px;
  background: #fbfdff;
  padding: 13px 15px;
}

.limit-helper small {
  display: block;
  color: var(--sd-muted);
  font-weight: 750;
  margin-bottom: 4px;
}

.limit-helper strong {
  display: block;
  color: #111827;
}

.btn.disabled,
.btn:disabled {
  pointer-events: none;
  opacity: 0.6;
}

@media (max-width: 900px) {
  .limit-helper {
    grid-template-columns: 1fr;
  }
}

/* Mobile responsive system upgrade */
.hamburger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.hamburger:hover {
  background: #f3f6fa;
  color: var(--sd-gold);
}

.sidebar-backdrop {
  display: none;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-card table {
  min-width: 720px;
}

.master-tabs {
  scrollbar-width: thin;
}

.form-stepper {
  scrollbar-width: thin;
}

.master-tabs::-webkit-scrollbar,
.form-stepper::-webkit-scrollbar {
  height: 6px;
}

.master-tabs::-webkit-scrollbar-thumb,
.form-stepper::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 20px;
}

@media (max-width: 991.98px) {
  body {
    overflow-x: hidden;
  }

  .app-shell {
    display: block;
  }

  .main {
    margin-left: 0;
    width: 100%;
  }

  .sidebar {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(84vw, 310px) !important;
    height: 100vh !important;
    transform: translateX(-105%);
    transition: transform 0.24s ease;
    z-index: 1050;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(2, 8, 20, 0.58);
    backdrop-filter: blur(2px);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.24s ease,
      visibility 0.24s ease;
  }

  body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
  }

  body.sidebar-open {
    overflow: hidden;
  }

  .nav-menu {
    display: block !important;
    grid-template-columns: none !important;
    padding-bottom: 10px;
  }

  .sidebar-footer {
    display: block !important;
    padding-bottom: 22px;
  }

  .topbar {
    height: auto;
    min-height: 70px;
    padding: 12px 14px;
    align-items: center;
    gap: 10px;
  }

  .topbar-left {
    gap: 10px;
    min-width: 0;
    flex: 1;
  }

  .hamburger {
    flex: none;
    background: #f7fafc;
    border: 1px solid var(--sd-border);
    font-size: 24px;
  }

  .page-greeting,
  .page-title {
    min-width: 0;
  }

  .page-greeting h2,
  .page-title h1 {
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 150px);
  }

  .page-greeting p,
  .page-title p,
  .breadcrumb-lite {
    display: none;
  }

  .topbar-actions {
    display: flex !important;
    gap: 8px;
    align-items: center;
    flex: none;
  }

  .top-info,
  .notification {
    display: none !important;
  }

  .user-menu-btn {
    gap: 6px;
    padding: 4px 6px;
  }

  .user-menu-btn .text-start,
  .user-menu-btn .bi-chevron-down {
    display: none;
  }

  .avatar {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }

  .user-dropdown-menu {
    min-width: 220px;
  }

  .content {
    padding: 16px;
  }

  .auth-page {
    grid-template-columns: 1fr;
    min-height: 100svh;
  }

  .auth-brand {
    display: none !important;
  }

  .auth-panel {
    padding: 22px;
    min-height: 100svh;
  }

  .login-card {
    padding: 28px 20px;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(4, 18, 36, 0.09);
  }

  .login-card .user-circle {
    width: 58px;
    height: 58px;
    margin-bottom: 16px;
  }

  .kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .kpi-card {
    padding: 18px;
    align-items: flex-start;
  }

  .kpi-icon {
    width: 48px;
    height: 48px;
    font-size: 21px;
    margin-right: 14px;
  }

  .kpi-card .value {
    font-size: 24px;
  }

  .spark {
    display: none;
  }

  .chart-card {
    padding: 18px;
  }

  .fake-line-chart {
    height: 150px;
  }

  .donut {
    width: 135px;
    height: 135px;
  }

  .donut:after {
    width: 78px;
    height: 78px;
  }

  .donut-inner {
    font-size: 20px;
  }

  .form-stepper {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 14px;
    margin-bottom: 16px;
    scroll-snap-type: x mandatory;
  }

  .form-stepper .step-item {
    min-width: 198px;
    scroll-snap-align: start;
  }

  .step-num {
    width: 36px;
    height: 36px;
  }

  .step-label {
    font-size: 13px;
  }

  .form-section {
    padding: 16px;
    margin-bottom: 16px;
  }

  .form-grid,
  .form-grid.three,
  .form-grid.two {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .form-actions {
    flex-direction: column;
    gap: 10px;
  }

  .form-actions .btn,
  .form-actions a {
    width: 100%;
  }

  .checkbox-grid {
    grid-template-columns: 1fr !important;
  }

  .upload-box {
    min-height: 108px;
  }

  .filter-bar {
    grid-template-columns: 1fr !important;
    padding: 14px;
    gap: 12px;
  }

  .table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-card th,
  .table-card td {
    white-space: nowrap;
    padding: 12px;
  }

  .table-card .table {
    min-width: 760px;
  }

  .vehicle-thumb {
    width: 46px;
    height: 32px;
  }

  .content>.d-flex.justify-content-between,
  .content>.d-flex.justify-content-between.align-items-start,
  .content>.d-flex.justify-content-between.align-items-center {
    flex-wrap: wrap;
    gap: 12px;
  }

  .content>.d-flex.justify-content-between .btn,
  .content>.d-flex.justify-content-between.align-items-start .btn,
  .content>.d-flex.justify-content-between.align-items-center .btn {
    width: 100%;
  }

  .master-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding: 2px 0 8px;
    margin-bottom: 16px;
  }

  .master-tab {
    min-width: 132px;
    padding: 13px 8px;
    flex: 0 0 auto;
  }

  .number-preview {
    display: block;
  }

  .number-preview strong {
    display: block;
    margin-top: 8px;
    font-size: 20px;
  }

  .settings-list div {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-list strong {
    text-align: left;
  }

  .limit-helper {
    grid-template-columns: 1fr !important;
  }

  .screen-rule-box {
    padding: 15px;
  }

  .report-preview-layout {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .report-preview-layout>.card-sd {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .summary-side {
    position: static !important;
    top: auto;
    padding: 18px;
  }

  .summary-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .summary-row strong {
    text-align: left;
  }

  .pdf-page {
    min-width: 720px;
    padding: 18px;
  }

  .pdf-title {
    font-size: 22px;
  }

  .pdf-table {
    font-size: 10px;
  }

  .report-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .report-tools>.d-flex {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }

  .report-tools .btn {
    width: 100%;
    white-space: nowrap;
  }
}

@media (max-width: 575.98px) {
  .topbar {
    padding: 10px 12px;
    min-height: 64px;
  }

  .page-greeting h2,
  .page-title h1 {
    font-size: 16px;
    max-width: calc(100vw - 120px);
  }

  .content {
    padding: 12px;
  }

  .card-sd {
    border-radius: 12px;
  }

  .btn-gold,
  .btn-outline-sd {
    padding: 11px 14px;
  }

  .login-card {
    padding: 24px 16px;
  }

  .kpi-card {
    display: block;
  }

  .kpi-icon {
    margin: 0 0 12px;
  }

  .report-tools>.d-flex {
    grid-template-columns: 1fr !important;
  }

  .eval-table .eval-row {
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
  }

  .segment button {
    font-size: 11px;
    padding: 8px 4px;
  }

  .master-tab {
    min-width: 118px;
    font-size: 13px;
  }

  .master-tab .tab-icon {
    font-size: 20px;
  }

  .pdf-page {
    min-width: 660px;
  }

  .pdf-small {
    font-size: 10px;
  }

  .form-section .d-flex.justify-content-between,
  .card-sd .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 10px;
  }

  .form-section .d-flex.justify-content-between .btn,
  .card-sd .d-flex.justify-content-between .btn {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .sidebar-backdrop {
    display: none !important;
  }
}

/* =====================================================================
   BRAND LOGO IMAGE (assets/images/logo.png)
   ===================================================================== */
.app-logo {
  display: inline-block;
  object-fit: contain;
  vertical-align: middle;
}

.sidebar .app-logo {
  width: 58px;
  height: 58px;
}

.auth-brand .app-logo {
  width: 80px;
  height: 80px;
}

/* Report header: show the emblem itself instead of the red disc + icon. */
.brand-head .rep-logo {
  background: none !important;
  border: 0 !important;
}

.brand-head .rep-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =====================================================================
   DASHBOARD COMPACT FONT SCALE (only affects the dashboard page)
   ===================================================================== */
body[data-page="dashboard"] {
  font-size: 13px;
}

body[data-page="dashboard"] .kpi-card h6 {
  font-size: 11px;
}

body[data-page="dashboard"] .kpi-card .value {
  font-size: 20px;
}

body[data-page="dashboard"] .kpi-icon {
  width: 46px;
  height: 46px;
  font-size: 19px;
  margin-right: 12px;
}

body[data-page="dashboard"] .kpi-card .trend {
  font-size: 11px;
}

body[data-page="dashboard"] .section-title {
  font-size: 13px;
}

body[data-page="dashboard"] .donut-inner {
  font-size: 20px;
}

body[data-page="dashboard"] .donut {
  width: 150px;
  height: 150px;
}

body[data-page="dashboard"] .donut:after {
  width: 84px;
  height: 84px;
}

body[data-page="dashboard"] .summary-row {
  font-size: 12px;
}

body[data-page="dashboard"] .table-card th {
  font-size: 11px;
}

body[data-page="dashboard"] .table-card td {
  font-size: 12px;
  padding: 11px 16px;
}

body[data-page="dashboard"] .status-pill {
  font-size: 11px;
  padding: 4px 8px;
}

body[data-page="dashboard"] .screen-rule-box strong {
  font-size: 13px;
}

body[data-page="dashboard"] .screen-rule-box small {
  font-size: 11px;
}

body[data-page="dashboard"] .btn {
  font-size: 13px;
}

/* =====================================================================
   LAPTOP FIT UPGRADE
   Tunes the desktop layout so it fits common laptop screens
   (1366x768, 1440x900, 1536x864) without unnecessary scrolling.
   ===================================================================== */

/* Compact the app shell on typical laptop widths (992px - 1536px). */
@media (min-width: 992px) and (max-width: 1536px) {
  .sidebar {
    width: 250px;
  }

  .sidebar .brand {
    padding: 22px 18px 18px;
  }

  .sidebar .logo-badge {
    width: 46px;
    height: 46px;
    font-size: 19px;
  }

  .sidebar .brand-title {
    font-size: 22px;
  }

  .nav-menu {
    padding: 12px;
  }

  .nav-link-sd {
    padding: 11px 14px;
    margin: 5px 0;
    font-size: 14px;
  }

  .sidebar-footer {
    padding: 0 18px 18px;
    font-size: 12px;
  }

  .main {
    margin-left: 250px;
    width: calc(100% - 250px);
  }

  .topbar {
    height: 66px;
    padding: 0 20px;
  }

  .page-greeting h2,
  .page-title h1 {
    font-size: 19px;
  }

  .content {
    padding: 20px;
  }

  .kpi-grid {
    gap: 14px;
  }

  .kpi-card {
    padding: 18px;
  }

  .kpi-icon {
    width: 50px;
    height: 50px;
    font-size: 22px;
    margin-right: 14px;
  }

  .kpi-card .value {
    font-size: 25px;
  }

  .row.g-4 {
    --bs-gutter-y: 1rem;
  }
}

/* Extra tuning for short laptop heights so the dashboard fits one screen. */
@media (min-width: 992px) and (max-height: 820px) {
  .topbar {
    height: 62px;
  }

  .content {
    padding: 18px;
  }

  .kpi-card {
    padding: 16px;
  }

  .kpi-card .value {
    font-size: 23px;
  }

  .fake-line-chart {
    height: 170px;
  }

  .donut {
    width: 150px;
    height: 150px;
  }

  .donut:after {
    width: 84px;
    height: 84px;
  }
}

/* Login: keep the whole page inside the viewport height on laptops. */
@media (min-width: 901px) {
  .auth-page {
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }

  .auth-brand,
  .auth-panel {
    overflow-y: auto;
  }
}

@media (min-width: 901px) and (max-height: 860px) {
  .auth-brand {
    padding: 40px 52px;
  }

  .auth-copy {
    margin-top: 40px;
  }

  .auth-copy h1 {
    font-size: 30px;
    margin-bottom: 16px;
  }

  .auth-copy p {
    font-size: 15px;
    line-height: 1.6;
  }

  .auth-feature {
    margin-top: 22px;
  }

  .auth-feature .feature-icon {
    width: 42px;
    height: 42px;
  }

  .auth-panel {
    padding: 28px;
  }

  .login-card {
    padding: 32px;
    border-radius: 16px;
  }

  .login-card .user-circle {
    width: 58px;
    height: 58px;
    margin-bottom: 16px;
  }

  .login-card h2 {
    font-size: 24px;
  }

  .login-card .mb-4 {
    margin-bottom: 1rem !important;
  }
}

@media (min-width: 901px) and (max-height: 720px) {
  .auth-copy {
    margin-top: 24px;
  }

  .auth-feature:last-child {
    display: none;
  }

  .login-card {
    padding: 26px;
  }
}

/* =====================================================================
   A4 PRINT LAYOUT
   Requirement: print cleanly on A4, hide the app sidebar/header/buttons,
   and print only the report. Uses @page size A4.
   ===================================================================== */

/* On screen, the preview IS a Legal sheet (8.5in x 14in at 96dpi), padded by
   the same 8mm the @page rule uses. 816 - 2*30 leaves a 756px text column,
   which is the printable width to the pixel — so a line that wraps in the
   preview wraps on paper, and the sheet the valuer approves is the sheet that
   comes out of the printer. */
.pdf-page {
  width: 816px;
  max-width: 100%;
  min-height: 1344px;
  padding: 30px;
}

/* ---------------------------------------------------------------------------
   Sheet metrics — one set, both media.

   These used to live inside @media print, so the preview was laid out loosely
   and the paper tightly. The preview then ran to 1914px against a 1344px sheet:
   it showed a page half again taller than Legal, gave no honest warning when a
   report was about to spill onto a second sheet, and every spacing change had
   to be judged twice. Screen now renders exactly what prints.

   The report very nearly fills a legal page — 8mm margins leave 339.6mm, and
   the sheet lands at about 317mm — so this is a budget, not a preference. If a
   change pushes the signature block onto a second sheet, measure here first.
   Both print modes paginate identically: the letterhead is hidden with
   `visibility`, so it keeps its footprint either way.
   --------------------------------------------------------------------------- */
.pdf-page {
  line-height: 1.12;
}

/* 1px, not 2. Vertical cell padding is the sheet's biggest lever by far: it
   costs 2px per row across ~40 rows, so this one declaration is worth 82px —
   more than the whole overflow. Horizontal padding is untouched; it costs
   nothing in height and the cells would look starved without it. */
.pdf-page .pdf-table td,
.pdf-page .pdf-table th,
.pdf-page .tech-table td,
.pdf-page .tech-table th {
  padding: 1px 5px;
}

/* The densest parts of the sheet run a half-point tighter than the rest. What
   gives is boilerplate — the declarations and the two tables that repeat most —
   never a field the valuer actually reads. */
.pdf-page .brand-meta,
.pdf-page .brand-auth,
.pdf-page .brand-tag {
  line-height: 1.3;
}

.pdf-page .decl-text {
  font-size: 10px;
  line-height: 1.2;
}

.pdf-page .inspection-block {
  font-size: 12px;
  line-height: 1.25;
}

.pdf-page .tech-table {
  font-size: 10.5px;
}

.pdf-page .tech-table th {
  font-size: 11px;
}

.pdf-page .report-title-row {
  margin: 0 0 6px;
}

.pdf-page .report-no-box {
  padding: 3px 10px;
}

/* The sheet ends at the signature; nothing needs paper below it. */
.report-body {
  padding-bottom: 0;
}

/* Manual page-break helpers for two-page reports. */
.page-break {
  page-break-before: always;
  break-before: page;
}

.avoid-break {
  page-break-inside: avoid;
  break-inside: avoid;
}

@media print {
  @page {
    size: legal;
    margin: 8mm;
  }

  /* Reset the shell so only the report flows onto the page. The UI scale
     from SYSTEM UI SCALE goes with it: paper size is not screen size, and
     the page budget below is measured at 1. */
  html,
  body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .app-shell,
  .pdf-page {
    zoom: 1 !important;
  }

  body.sidebar-open {
    overflow: visible !important;
  }

  /* Hide every piece of application chrome. */
  .sidebar,
  .sidebar-backdrop,
  .topbar,
  .report-tools,
  .report-preview-layout>aside,
  .no-print,
  .hamburger,
  .badge-dot,
  .notification {
    display: none !important;
  }

  /* Let the report take the full printable width. */
  .app-shell {
    display: block !important;
  }

  .main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .content {
    padding: 0 !important;
  }

  .report-preview-layout {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  .report-preview-layout>.card-sd {
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: #fff !important;
    overflow: visible !important;
  }

  /* The A4 sheet itself: no shadow/border, exact print flow. */
  .pdf-page {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .pdf-table td,
  .pdf-table th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Print backgrounds/colours accurately. */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Pre-printed letterhead (default): keep the header's exact footprint but
     leave it un-inked, so the paper's own letterhead shows through.
     visibility (not display:none plus a fixed spacer) is what keeps this on a
     single sheet: the old 5.5cm spacer stood ~1.7cm taller than the header it
     replaced, pushing the signature block onto a second page. Reserving the
     real element means both print modes paginate identically. */
  .report-header {
    visibility: hidden !important;
  }

  .report-header * {
    visibility: hidden !important;
  }

  /* Optional extra clearance when the printed stationery is taller than the
     rendered letterhead. Raise --sd-letterhead-extra (e.g. 10mm) if the report
     starts too high up the page; 0 keeps everything on one sheet. */
  .report-topspace {
    display: block !important;
    height: var(--sd-letterhead-extra, 0mm) !important;
  }

  /* The watermark is already on the pre-printed paper, so it must not be
     inked again in letterhead mode. */
  .report-watermark {
    display: none !important;
  }

  /* "Print with header": ink the full system letterhead and its watermark,
     no extra clearance. */
  body.print-with-header .report-header,
  body.print-with-header .report-header * {
    visibility: visible !important;
  }

  body.print-with-header .report-topspace {
    display: none !important;
  }



  body.print-with-header .report-watermark {
    display: block !important;
  }

  /* No sheet metrics here on purpose — type sizes, cell padding, line heights
     and the table gap are all set once outside this block, so the preview and
     the paper are the same layout. Adding a print-only override here is what
     made the two disagree before; tighten the shared rule instead. */
  /* The signature's own top margin is zeroed inside .signature-row (flex
     items do not collapse margins), so the clear paper above the rule now
     comes entirely from .before-signature's bottom margin. Nothing to set
     here; changing that one value is what moves the signature. */
}

/* =====================================================================
   DETAILED LEGAL REPORT STYLING (mirrors the printed SD Motors report)
   ===================================================================== */
.pdf-page {
  font-size: 12px;
  line-height: 1.35;
  color: #111;
}

/* Palette taken from the pre-printed S.D. Motors stationery: gold wordmark
   with a dark outline, red accent text, royal-blue contact bar and the
   red/blue ribbon down the left edge. Change these four values to retune the
   whole report. */
:root {
  --sd-report-gold: #d4af37;
  /* metallic gold, not yellow */
  --sd-report-gold-edge: #7a5c00;
  --sd-report-red: #d0201f;
  --sd-report-blue: #1c3f8f;
}

.report-frame {
  border: 0;
  padding: 0;
  position: relative;
  background: #fff;
}

/* z-index keeps the content above the watermark. */
/* No padding above: the letterhead is the first thing on the sheet and starts
   at its very top edge. The side and bottom padding stay — only the top gap
   was holding the header down. */
.report-body {
  padding: 0 4px 6px;
  position: relative;
  z-index: 1;
}

/* Optional extra letterhead clearance, printing only. The header element
   itself reserves its own space (see the @media print block), so this stays
   at 0 unless the pre-printed stationery needs more room than the rendered
   letterhead occupies. */
:root {
  --sd-letterhead-extra: 0mm;
}

.report-topspace {
  display: none;
}

/* Branded header */
/* Single knob for the report emblem. The side padding and the header's minimum
   height are both derived from it: the padding keeps the wordmark centred on
   the sheet despite the absolutely-positioned logo, and the min-height stops a
   large logo spilling into the blue contact bar below. Changing this one value
   resizes the logo and reflows the header around it.
   NOTE: the header's height drives print pagination in BOTH print modes (see
   the @media print block), so re-check the print preview after a big increase
   -- too tall and the signature block moves to a second sheet. */
.report-header {
  --rep-logo-size: 160px;
}

/* No padding above: the letterhead starts at the very top of the sheet, so
   the logo's own `top` below is measured from the paper's edge. */
.brand-head {
  text-align: center;
  position: relative;
  padding: 0 calc(var(--rep-logo-size) + 16px) 4px;
  min-height: calc(var(--rep-logo-size) + 8px);
}

.brand-head .rep-logo {
  position: absolute;
  left: 6px;
  top: -10px;
  width: var(--rep-logo-size);
  height: var(--rep-logo-size);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #7a1c12, #3a0d08);
  border: 3px solid #c0392b;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f2b31a;
  font-size: 30px;
}

.brand-name {
  font-family: var(--sd-font-wordmark);
  font-size: 54px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.02;
  color: var(--sd-report-gold);
  -webkit-text-stroke: 1.4px var(--sd-report-gold-edge);
  text-shadow:
    0 1px 0 #f6e4a1,
    1.8px 2px 0 var(--sd-report-gold-edge);
}

/* The tagline is set in Madelyn. Dancing Script used to back it up, but that
   came from Google Fonts and these machines cannot reach it, so the fallbacks
   are now the script faces Windows ships. A script reads smaller than an
   upright face at the same size, hence the jump from 11px — and every fallback
   is a script too, so the line still reads as a strapline if Madelyn is not
   installed. */
.brand-tag {
  font-family: var(--sd-font-tagline);
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.25;
  color: #1c0990;
  margin-top: 4px;
}

/* The address and contact lines are set in Knockout Featherweight, the same
   face as the blue bar below them, so the letterhead's small print reads as
   one voice under the wordmark. */
.brand-meta {
  font-family: var(--sd-font-letterhead);
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 4px;
  color: #111;
}

/* 11px, not 11.5: the accreditation line is the widest in the header and at
   11.5px it needed 470px of the 460px between the logo padding, so it wrapped
   onto a second line and took the page budget with it. */
.brand-auth {
  font-family: var(--sd-font-letterhead);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 800;
  color: var(--sd-report-red);
  margin-top: 4px;
}

/* =====================================================================
   STATIONERY ARTWORK (rendered letterhead only)
   The faint logo watermark reproduces the printed stationery, so it belongs
   to the "Print with Header" output and the on-screen preview. When printing
   onto real pre-printed paper it is suppressed, because the paper already
   carries it.
   ===================================================================== */

/* Faint logo behind the report body, as on the printed sheet. */
.report-watermark {
  position: absolute;
  left: 0;
  right: 0;
  top: 22%;
  height: 56%;
  background: url("../images/logo.png") center center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

/* Royal-blue contact bar, matching the printed stationery. */
.contact-bar {
  font-family: var(--sd-font-letterhead);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--sd-report-blue);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 12px;
  margin: 8px 0 6px;
  letter-spacing: 0.02em;
}

.report-doc-title {
  text-align: center;
  color: var(--sd-report-blue);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.05em;
  margin: 6px 0;
}

.report-no-box {
  border: 1.5px solid #111;
  padding: 5px 10px;
  font-weight: 800;
  font-size: 12px;
  text-align: center;
  min-width: 150px;
}

/* Centre the title on the true page centre (spacer / title / box) and leave a gap below. */
.report-title-row {
  display: grid;
  grid-template-columns: 150px 1fr 150px;
  align-items: center;
  column-gap: 10px;
  margin: 4px 0 14px;
}

.report-title-row .report-doc-title {
  grid-column: 2;
  margin: 0;
}

.report-title-row .report-no-box {
  grid-column: 1;
  justify-self: start;
}

.report-title-row .report-qr-box {
  grid-column: 3;
  justify-self: end;
}

.report-title-row .report-qr-box img,
.report-title-row .report-qr-box canvas {
  width: 50px;
  height: 50px;
}

/* Inspection information (CR-010).
   Borderless "LABEL : VALUE" lines under the document title, matching the
   supplied reference. The label column is fixed so every colon lines up; the
   trailing column carries the inspection time beside its date. */
.inspection-block {
  font-size: 12.5px;
  line-height: 1.5;
}

.inspection-block .insp-row {
  display: grid;
  grid-template-columns: 225px 12px minmax(0, max-content) 1fr;
  align-items: baseline;
  column-gap: 4px;
}

/* 700, not 800. The sheet is set in Calibri, which ships one bold: asking for
   800 gets that same bold with synthetic emboldening smeared over it, which is
   why these labels read heavier than everything else rather than simply bold. */
.inspection-block .insp-label {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.inspection-block .insp-colon {
  font-weight: 700;
}

.inspection-block .insp-value {
  font-weight: 600;
  text-transform: uppercase;
  word-break: break-word;
}

/* The time follows the date at a fixed distance rather than being flung to
   the right margin: the value column now sizes to its content and the slack
   sits after the time, so this padding is the gap the reader actually sees. */
.inspection-block .insp-extra {
  font-weight: 700;
  white-space: nowrap;
  padding-left: 150px;
}

.pdf-table td,
.pdf-table th {
  border: 1px solid var(--sd-report-border);
  padding: 4px 5px;
  vertical-align: top;
}

/* Section titles are underlined as well as shaded. The shading is a fill the
   printer may or may not lay down — a plain-paper or mono print of the report
   loses it entirely, and with it the only thing separating a section title
   from the rows beneath. A rule under the words survives any printer. */
.pdf-table th {
  background: #e9edf2;
  text-align: left;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-decoration: underline;
}

/* Which half of a "LABEL : VALUE" row carries the weight.
   The label and the row number are pre-printed furniture — the same on every
   report ever issued — while the cell beside them is what this particular
   valuer inspected and typed. Bolding the furniture and leaving the answers
   light had it backwards: the eye landed on MAKE rather than on TOYOTA.
   Declaration paragraphs are excluded; they are prose, not an answer. */
.pdf-table .lbl {
  font-weight: 400;
  width: 23%;
  white-space: nowrap;
}

.pdf-table .idx {
  width: 34px;
  font-weight: 400;
  text-align: center;
}

.pdf-table td:not(.lbl):not(.idx):not(.decl-text) {
  font-weight: 700;
}

/* The valuation figures (6.0 / 7.0) are the answer the whole report exists to
   give, so this one table is bold throughout — index, label and amount alike —
   rather than following the label-light rule the identification tables use. */
/* The gap between the valuer's declaration (8.0) and the signature rule.
   Named for what it does rather than for its number, so the value can change
   without the class name going stale — which is how a `mb-10` that Bootstrap
   has no such utility for ended up doing nothing at all. */
/* Last table in the photo row's side column, so its bottom margin would be
   invisible padding inside that column rather than a gap between two stacked
   tables — it stretched the whole photo row and cost the sheet 76px of
   daylight nobody can see. Exempt from --sd-table-gap; the row's own margin
   separates what follows. */
.pdf-table.side-table {
  margin-bottom: 0;
}

/* Clear paper above the signature rule — the space the valuer signs into, and
   the sheet's only other real block of air. 50px is 13mm, comfortable for a
   handwritten signature; it was 80px (21mm), which is more than a signature
   needs and was the difference between one sheet and two. */
.pdf-table.before-signature {
  margin-bottom: 50px;
}

.pdf-table.value-table td {
  font-weight: 700;
}

/* 6.0 and 7.0 are section titles too, even though they are laid out as a
   numbered row rather than a title bar — so the number and its title are
   underlined to match sections 1 to 5 and 8. The amount beside them is the
   answer, not a title, and stays plain. */
.pdf-table.value-table .idx,
.pdf-table.value-table .lbl {
  text-decoration: underline;
  background: #e9edf2;
  font-size: 11.5px;
}

.pdf-table.value-table td {
  font-size: 11.5px;
}

/* The amounts are wrapped in <strong>, whose default is `bolder` — a relative
   step UP from whatever the cell is, so setting the cell to 700 pushed those
   numerals to 900 and the table came out at two different weights. Inherit
   pins them to the row. */
.pdf-table.value-table strong {
  font-weight: inherit;
}

/* No rule here, and that is deliberate — see the photo row in report-preview.
   A g-2 .row lifts ITSELF by one gutter (margin-top: -8px) and pushes each of
   its columns down by the same 8px. Read on its own the negative margin looks
   like it is eating the gap above the row, but the two halves cancel: the
   table's 12px collapses with the row's -8px to a 4px box offset, then the
   column's +8px puts the photos back at exactly 12px below the table. Zeroing
   the row's margin-top only removes the negative half, leaving the columns'
   +8px uncancelled and the gap at 20px. Whatever --sd-table-gap is set to,
   leaving Bootstrap's gutter alone is what makes this gap match the others. */
/* CR-012: one capitalisation rule for the whole sheet. Applied in CSS rather
   than by upper-casing on the way into the database, so what the valuer typed
   is still what is stored — only the printed form is normalised. */
.pdf-table td,
.tech-table td {
  text-transform: uppercase;
}

/* One frame around all three vehicle views, with a small mount inside it, so
   they read as a single plate on the sheet rather than three loose tiles.
   Global box-sizing is border-box, so the padding is taken out of the block
   rather than added on top of it. */
.photo-group {
  border: 1px solid #111;
  padding: 4px;
}

.report-photo {
  height: 150px;
  border: 1px solid #111;
  background: #eef1f5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 10px;
}

.report-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Section 4.0 is ruled like section 1.0: the same title bar, borders and
   padding, over the seven columns the reference report lays it out in. */
.tech-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
  /* Section 4.0 follows the photo row rather than another table, so it carries
     the gap on its top edge as well — the row above has no bottom margin of
     its own to supply it. */
  margin-top: var(--sd-table-gap);
  margin-bottom: var(--sd-table-gap);
}

.tech-table td,
.tech-table th {
  border: 1px solid var(--sd-report-border);
  padding: 4px 5px;
  vertical-align: top;
}

.tech-table th {
  background: #e9edf2;
  text-align: left;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-decoration: underline;
}

/* Section 4.0 weights the same way round as section 1: the component names are
   pre-printed furniture, identical on every report ever issued, while the
   rating beside each one is what this valuer actually judged. The answers carry
   the weight, so a reader scanning for the BAD among a column of GOODs finds it
   without reading the row names again. The group headings below keep their own
   bold — they are titles, not answers. */
.tech-table .k {
  font-weight: 400;
}

.tech-table .v {
  font-weight: 700;
}

/* Headings inside the grid — ELECTRICAL SYSTEM, MAINTENANCE, TYRES and the
   MAJOR REPAIRS / CONDITION pair. They label the rows beneath them and carry
   no answer of their own, so they take the title bar's shading — and its
   underline, for the same reason the section titles have one: the shading is a
   fill a mono or plain-paper print drops, and then nothing marks a heading. */
.tech-table .tech-group {
  background: #e9edf2;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: underline;
}

.sig-line {
  border-bottom: 1px dotted #111;
  min-width: 180px;
  display: inline-block;
  height: 14px;
}

/* Signature on the left, print date on the right, both sitting on the same
   baseline — the date rides in space the signature block was already leaving
   empty, so it adds nothing to the page. */
.signature-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

/* Margins do not collapse through a flex container. Outside one, the
   signature's own top margin merged into the 50px below the 8.0 table and the
   larger of the two won; as a flex item it started stacking on top instead,
   adding ~34px the page cannot spare. The gap above the signature is the
   table's to set, so the flex item contributes none of its own. */
.signature-row .valuer-sign {
  margin-top: 0;
}

.print-date {
  font-size: 12px;
  color: #000;
  white-space: nowrap;
  padding-bottom: 3px;
  font-weight: 700;
}

.valuer-sign {
  margin-top: 64px;
  border-top: 1px solid #111;
  padding-top: 3px;
  font-weight: 700;
  width: 220px;
}

/* Red circular authorised-valuer stamp */
.company-stamp {
  width: 118px;
  height: 118px;
  border: 2px solid #c0392b;
  border-radius: 50%;
  color: #c0392b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.3;
  transform: rotate(-8deg);
  justify-self: end;
}

.company-stamp .stamp-mid {
  font-size: 11px;
  letter-spacing: 0.05em;
}

.decl-text {
  font-size: 11px;
  line-height: 1.45;
  text-align: justify;
}

/* =====================================================================
   DASHBOARD — VALUATION BY STATUS
   The donut sat in a col-lg-8 card with the legend hugging it, leaving
   most of the card empty. The legend now stretches across the remaining
   width: pill, share bar (donut colours), count, percentage.
   ===================================================================== */
.chart-split {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.chart-split .donut {
  flex: none;
}

.status-legend {
  flex: 1 1 320px;
  min-width: 0;
  display: grid;
  gap: 14px;
}

.legend-row {
  display: grid;
  grid-template-columns: 104px minmax(80px, 1fr) 46px 42px;
  align-items: center;
  gap: 14px;
}

.legend-row .status-pill {
  justify-content: center;
  width: 100%;
}

.legend-bar {
  height: 8px;
  border-radius: 99px;
  background: #eef2f6;
  overflow: hidden;
}

.legend-bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  min-width: 2px;
  transition: width 0.3s ease;
}

.legend-row strong {
  font-size: 15px;
  font-weight: 850;
  text-align: right;
}

.legend-row small {
  color: var(--sd-muted);
  font-weight: 700;
  text-align: right;
}

@media (max-width: 575.98px) {
  .chart-split {
    gap: 18px;
    justify-content: center;
  }

  .status-legend {
    flex-basis: 100%;
  }

  .legend-row {
    grid-template-columns: 92px 1fr 40px 38px;
    gap: 10px;
  }
}

/* =====================================================================
   SYSTEM UI SCALE

   One knob for how large the application chrome renders — sidebar,
   topbar, cards, tables, forms, buttons, the lot. The sheet is px-based
   throughout (a root rem change would move only the handful of rules that
   use rem and leave the rest behind), so the scale is applied to the shell
   instead of chased through eighty declarations that would then have to be
   kept in step with each other.

   The printed report is deliberately unaffected: the @media print block
   resets this to 1, so what reaches paper is governed only by DETAILED
   LEGAL REPORT STYLING and the page budget measured there. The on-screen
   preview does shrink with the rest of the UI, which is why the report's
   own sizes are set a little larger than the screen alone would want.
   ===================================================================== */
.app-shell {
  --sd-ui-scale: 0.92;
  zoom: var(--sd-ui-scale);
}

/* The report sheet is not chrome. It is a legal document with a size of its
   own, so it cancels the shell scale and renders on screen at the size it
   prints — which is also why shrinking the UI does not shrink the preview. */
.pdf-page {
  zoom: calc(1 / 0.92);
}

/* =====================================================================
   COMPACT FORM SCALE + FIELD ALIGNMENT
   Small labels/inputs/placeholders across every form (valuation steps,
   customers, users, masters, settings, reports filter, login), and a
   uniform control height so fields line up on the same row even when a
   label wraps onto two lines.
   Loaded after Bootstrap, so these win at equal specificity.
   ===================================================================== */

:root {
  --sd-field-h: 34px;
  /* one height for input / select / date / input-group */
  --sd-field-font: 12.5px;
  --sd-label-font: 11.5px;
  --sd-placeholder-font: 11.5px;
}

/* ---- Labels ---- */
label.form-label,
.form-label {
  font-size: var(--sd-label-font);
  font-weight: 750;
  color: #111827;
  margin-bottom: 5px;
  line-height: 1.35;
  display: block;
}

.form-label .text-muted {
  font-size: 10.5px;
  font-weight: 600;
}

.form-text,
.invalid-feedback,
.valid-feedback {
  font-size: 10.5px;
}

/* ---- Text fields, selects, textareas ---- */
.form-control,
.form-select {
  font-size: var(--sd-field-font);
  line-height: 1.4;
  min-height: var(--sd-field-h);
  height: var(--sd-field-h);
  padding: 6px 10px;
}

.form-select {
  padding-right: 28px;
  background-position: right 0.55rem center;
  background-size: 12px 9px;
}

/* Textareas grow, so they must not be pinned to the single-line height. */
textarea.form-control {
  height: auto;
  min-height: 58px;
  padding: 7px 10px;
  line-height: 1.5;
}

/* Native date/time pickers size their own indicator — keep them on the grid. */
.form-control[type="date"],
.form-control[type="datetime-local"],
.form-control[type="time"] {
  padding: 5px 8px 5px 10px;
}

.form-control[type="date"]::-webkit-calendar-picker-indicator,
.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator {
  padding: 0;
  margin-left: 2px;
  opacity: 0.55;
  transform: scale(0.85);
}

/* File inputs (vehicle photo slots) — the button uses negative margins to
   fill the field height, so its padding must mirror the field padding. */
.form-control[type="file"] {
  padding: 6px 10px;
  font-size: 11.5px;
}

.form-control[type="file"]::file-selector-button {
  font-size: 11.5px;
  padding: 6px 10px;
  margin: -6px -10px;
  margin-inline-end: 10px;
}

/* ---- Read-only fields ----
   A value the form shows but does not collect (Contact Person, set in
   Settings > Company). Bootstrap 5 leaves readonly inputs looking editable,
   which invites a valuer to click in and wonder why nothing types. */
.form-control[readonly] {
  background: #f2f5f9;
  color: #4b5563;
  border-color: #e3e9f0;
  cursor: default;
}

/* ---- Placeholders ---- */
.form-control::placeholder,
textarea.form-control::placeholder {
  font-size: var(--sd-placeholder-font);
  color: #9aa6b6;
  opacity: 1;
}

.form-control::-webkit-input-placeholder {
  font-size: var(--sd-placeholder-font);
  color: #9aa6b6;
}

.form-control::-moz-placeholder {
  font-size: var(--sd-placeholder-font);
  color: #9aa6b6;
  opacity: 1;
}

/* Unselected <select> option reads as a placeholder. */
.form-select option {
  font-size: var(--sd-field-font);
}

.form-select option[value=""] {
  color: #9aa6b6;
}

/* ---- Small variants (masters search, photo upload inputs) ---- */
.form-control-sm,
.form-select-sm {
  font-size: 11.5px;
  min-height: 30px;
  height: 30px;
  padding: 4px 8px;
  border-radius: 7px;
}

.form-control-sm[type="file"] {
  padding: 4px 8px;
}

.form-control-sm[type="file"]::file-selector-button {
  font-size: 11px;
  padding: 4px 8px;
  margin: -4px -8px;
  margin-inline-end: 8px;
}

.form-select-sm {
  padding-right: 26px;
  background-size: 11px 8px;
}

textarea.form-control-sm {
  height: auto;
}

/* ---- Input groups (CC / KM suffixes, login icons) ---- */
.input-group-text {
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 10px;
  min-height: var(--sd-field-h);
  height: var(--sd-field-h);
  color: #4b5563;
}

.input-group .form-control,
.input-group .form-select {
  height: var(--sd-field-h);
}

.input-group-sm .input-group-text {
  height: 30px;
  font-size: 11px;
  padding: 4px 8px;
}

/* ---- Checkboxes / radios ----
   Scale the box with the label (1em) instead of hard-coding a size, so the
   Bootstrap negative margin keeps box and text tight together. */
.form-check {
  min-height: auto;
  margin-bottom: 0;
  font-size: 12px;
  padding-left: 1.6em;
}

.form-check-input {
  width: 1em;
  height: 1em;
  margin-top: 0.22em;
}

/* The negative offset only works against the padding on a .form-check parent.
   Applying it to every .form-check-input drags standalone checkboxes (the
   login "Remember me", which sits bare inside a <label>) outside their card. */
.form-check .form-check-input {
  margin-left: -1.6em;
}

.form-check-label {
  font-size: 12px;
  line-height: 1.5;
}

/* ---- Field alignment ----------------------------------------------
   Grid cells stretch, so a two-line label ("Compliance of Above
   (1.0-1.24) with CR", "Number of Previous Owners") used to shove its
   input below its neighbours. Bottom-align the cell contents instead:
   every control in a row now sits on the same line.
   The :not(.form-grid) guard keeps nested grids (Converted Date/Type)
   as grids rather than turning them into flex columns.
------------------------------------------------------------------- */
.form-grid>div:not(.form-grid) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}

.form-grid>div:not(.form-grid)>label.form-label {
  margin-top: 0;
}

.form-grid>.form-grid {
  align-content: end;
  min-width: 0;
}

/* Full-width controls, but only the ones that are a direct child of a cell.
   Inside an .input-group the control must keep Bootstrap's flex sizing
   (flex:1 1 auto; width:1%) — forcing 100% there pushes the CC / KM addon
   onto a second line, which also breaks the row alignment. */
.form-grid .input-group {
  width: 100%;
  flex-wrap: nowrap;
}

.form-grid>div:not(.form-grid)>.form-control,
.form-grid>div:not(.form-grid)>.form-select,
.form-grid>div:not(.form-grid)>textarea {
  width: 100%;
}

.input-group>.form-control,
.input-group>.form-select {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

/* Cells that hold a textarea should top-align so the box does not float. */
.form-grid>div:not(.form-grid):has(textarea) {
  justify-content: flex-start;
}

/* Reports filter bar: label + control pairs share the same baseline.
   :not(.d-flex) leaves the trailing Filter/Clear button row horizontal. */
.filter-bar>div:not(.d-flex) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}

.filter-bar .btn {
  height: var(--sd-field-h);
  padding: 0 16px;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Masters side form (stacked, not a form-grid) keeps the same rhythm. */
.form-section .d-grid>div>label.form-label {
  margin-bottom: 5px;
}

/* Step 3 evaluation rows: the row caption is a label too. */
.eval-table .eval-row {
  font-size: 12px;
  padding: 6px 0;
}

.eval-table .eval-row>div:first-child {
  font-weight: 650;
  color: #111827;
  padding-right: 8px;
}

.segment button {
  font-size: 11.5px;
  padding: 6px 8px;
}

/* Buttons inside forms, scaled to match the smaller fields. */
.form-actions .btn,
.form-section .btn-gold,
.form-section .btn-outline-sd {
  font-size: 12.5px;
  padding: 9px 16px;
}

/* Login card: same small scale, slightly roomier touch target. */
.login-card .form-control,
.login-card .input-group-text {
  height: 38px;
  min-height: 38px;
  font-size: 12.5px;
}

/* The security note's tile. The generic .feature-icon centring lives under
   .auth-feature, so this copy inside the login card never got it and the
   shield sat in the tile's top-left corner. */
.login-note {
  font-size: 13px;
  line-height: 1.45;
}

.login-note-icon {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: #fff4df;
  color: #111;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Phone sizing. The card's headings otherwise render at desktop scale:
   "Welcome back" at 32px pushes the form down the screen. */
@media (max-width: 575.98px) {

  /* "Remember me" and "Forgot password?" get a line each so neither is
     squeezed, still centred. The Bootstrap alignment utilities on the
     element carry !important, so these have to as well. */
  .login-card .login-options {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .login-card {
    padding: 24px 18px;
  }

  .login-card .user-circle {
    width: 50px;
    height: 50px;
    font-size: 22px;
    margin-bottom: 12px;
  }

  .login-card h2 {
    font-size: 20px;
  }

  .login-subtitle {
    font-size: 12.5px;
    line-height: 1.45;
  }

  .login-note {
    font-size: 11.5px;
    gap: 10px !important;
  }

  .login-note-icon {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
}

@media (max-width: 991.98px) {

  /* Keep fields readable one-per-row on phones without growing the type. */
  .form-grid>div:not(.form-grid) {
    justify-content: flex-start;
  }

  .filter-bar>div:not(.d-flex) {
    justify-content: flex-start;
  }

  .filter-bar .btn {
    width: 100%;
  }

  /* Touch targets. The compact scale above is later in the file than the
     responsive blocks, so it was winning and squeezing these controls down to
     29px tall - too small to hit reliably. Step 3 alone has 80+ of them. */
  .segment button {
    min-height: 40px;
    font-size: 12px;
    padding: 8px 6px;
  }

  .form-check-input {
    width: 18px;
    height: 18px;
  }

  .form-check {
    padding-left: 2em;
  }

  .form-check .form-check-input {
    margin-left: -2em;
  }

  .icon-btn {
    width: 38px;
    height: 38px;
  }

  /* Evaluation rows stay two-up, but the desktop 40px gutter leaves the
     segments too narrow on a phone. */
  .eval-table {
    gap: 0 14px;
  }
}