/* ═══════════════════════════════════════════════════════════════════════
   WSDOT QPL PUBLIC CATALOG — Stylesheet
   Site chrome (header, nav, breadcrumb, footer) is provided by the
   14 WSDOT CDN stylesheets loaded in _Layout.cshtml.
   This file contains only QPL-specific overrides and app styles.
   ═══════════════════════════════════════════════════════════════════════ */

/* Prevent layout shift when scrollbar appears/disappears */
html { overflow-y: scroll; }

/* ─── ACCESSIBILITY OVERRIDES ────────────────────────────────────────── */
/* WSDOT theme sets breadcrumb li.active to #777 on #f4f4f5 (4.07:1).
   Darken to #595959 for WCAG AA 4.5:1 contrast compliance. */
.breadcrumb > li.active { color: #595959; }

/* ─── PAGE LAYOUT ────────────────────────────────────────────────────── */
/* Override Bootstrap container to allow wider content area */
.main-container.container {
  max-width: 1280px;
  width: 100%;
}

/* ─── BOOTSTRAP / WSDOT CDN CONFLICT OVERRIDES ──────────────────────── */
/* Lock buttons against Bootstrap/WSDOT CDN overrides on all states */
.form-actions .btn-primary,
.form-actions .btn-primary:hover,
.form-actions .btn-primary:focus,
.form-actions .btn-primary:active {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: none;
  border: none;
  padding: 11px 28px;
  font-size: 1.5rem;
  line-height: normal;
  box-shadow: none;
  outline-offset: 0;
  transition: background 0.15s;
  flex-shrink: 0;
  flex-grow: 0;
}

/* ─── FOOTER BOTTOM BAR ────────────────────────────────────────────── */
#block-copyright .field--name-body {
  display: flex;
  align-items: center;
  gap: 60px;
}

#block-copyright .align-left {
  float: none;
  flex-shrink: 0;
}

#block-copyright ul {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ─── PAGE CONTENT ──────────────────────────────────────────────────── */
h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 10px;
}
h2 {
  font-size: 2rem;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.3;
  margin-bottom: 8px;
}

.page-intro {
  font-size: 1.6rem;
  color: #444;
  max-width: 680px;
  line-height: 1.65;
  margin-bottom: 28px;
}

.page-h1 {
  font-size: 3rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 10px;
}
page-h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 10px;
}
.page-intro {
  font-size: 1.6rem;
  color: #444;
  max-width: 680px;
  line-height: 1.65;
  margin-bottom: 20px;
}
.section-heading {
  font-size: 1.6rem;
  font-weight: 700;
  color: #4A5157;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #00704A;
}

/* ─── LANDING PAGE CARD GRID ────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.nav-card {
  display: block;
  padding: 1px 20px;
  background: #f0f9f5;
  border: 1px solid #b3dece;
  border-radius: 6px;
  text-decoration: none;
  color: #1a1a1a;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nav-card:hover {
  border-color: #00704A;
  box-shadow: 0 2px 8px rgba(0,112,74,0.12);
  color: #1a1a1a;
}
/* Product Serach Box and other boxes*/
.nav-card h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #4A5157;
  margin-bottom: 1px;
}
.nav-card p {
  font-size: 1.5rem;
  color: #555;
  line-height: 1.5;
  margin: 0;
}


/* ─── INFO SECTION ──────────────────────────────────────────────────── */
.info-section {
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}
.info-section h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #4A5157;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.info-section p {
  font-size: 1.5rem;
  color: #444;
  line-height: 1.6;
}

/* ─── BUTTONS ────────────────────────────────────────────────────────── */
.btn-primary {
    background: #00704A;
    color: #fff;
    border: none;
    padding: 9px 22px;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background 0.15s;
    flex-shrink: 0;
}

.btn-primary:hover {
    background: #005a3c;
}

a.btn-primary {
    display: inline-block;
    text-decoration: none;
    color: #fff;
}

.form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Lock search/clear buttons against Bootstrap/WSDOT overrides on all states */
.form-actions .btn-primary,
.form-actions .btn-primary:hover,
.form-actions .btn-primary:focus,
.form-actions .btn-primary:active {
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: none;
    border: none;
    padding: 9px 22px;
    font-size: 1.5rem;
    line-height: normal;
    border-radius: 6px;
    box-shadow: none;
    outline-offset: 0;
    transition: background 0.15s;
    flex-shrink: 0;
    flex-grow: 0;
}

.btn-secondary {
  background: #fff;
  color: #333;
  border: 1px solid #9fcfb8;
  padding: 11px 24px;
  font-size: 1.5rem;
  font-family: inherit;
  cursor: pointer;
  border-radius: 3px;
  transition: border-color 0.12s;
  text-decoration: none;
  display: inline-block;
}
.btn-secondary:hover { border-color: #00704A; color: #4A5157; }

.btn-sm {
  padding: 6px 14px;
  font-size: 1.5rem;
  text-transform: none;
  letter-spacing: 0;
}

/* ─── FORM ELEMENTS ──────────────────────────────────────────────────── */
#main-content .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.form-label {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
}
#main-content .form-control {
  padding: 8px 10px;
  border: 1px solid #9fcfb8;
  border-radius: 3px;
  font-size: 1.5rem;
  font-family: inherit;
  color: #1a1a1a;
  background: #fff;
  height: 42px;
  transition: border-color 0.12s, outline 0.12s;
}
#main-content textarea.form-control {
  height: auto;
}
#main-content .form-control:focus {
  outline: 2px solid #00704A;
  outline-offset: 0;
  border-color: #00704A;
}
#main-content .form-control::placeholder { color: #767676; }

/* ─── SEARCH / FILTER BAR ───────────────────────────────────────────── */
.filter-bar {
  background: #f0f9f5;
  border: 1px solid #b3dece;
  border-radius: 4px;
  padding: 14px 16px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.filter-bar .form-group {
  margin-bottom: 0;
  min-width: 150px;
}
.filter-bar .form-label { font-size: 1.5rem; }
.filter-bar .form-control { height: 40px; font-size: 1.5rem; }

/* ─── DATA TABLES ────────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #b3dece;
  border-radius: 4px;
  overflow: hidden
  margin-bottom: 20px;
  font-size: 1.5rem;
}
.data-table thead {
  background: #00704A;
  color: #fff;
}
.data-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.15);
}
.data-table thead th:last-child { border-right: none; }
.data-table thead th a {
  color: #fff;
  text-decoration: none;
}
.data-table thead th a:hover { text-decoration: underline; }

.data-table tbody tr {
  border-top: 1px solid #c8e8d8;
}
.data-table tbody tr:first-child { border-top: none; }
.data-table tbody tr:hover { background: #f0f9f5; }

.data-table td {
  padding: 9px 14px;
  vertical-align: top;
  color: #1a1a1a;
}
.data-table td a { text-decoration: none; }
.data-table td a:hover { text-decoration: underline; }

.data-table .empty-row td {
  text-align: center;
  padding: 24px;
  color: #767676;
  font-style: italic;
}

/* Sortable column headers */
.data-table thead th.sortable {
  cursor: pointer;
  user-select: none;
}
.data-table thead th.sortable:hover {
  background: rgba(255,255,255,0.1);
}

/* Sortable arrow indicators (used by client-side sort on report pages) */
.data-table.sortable th { cursor: pointer; user-select: none; }
.data-table.sortable th::after { content: " \25B4\25BE"; font-size: 0.8em; opacity: 0.4; }
.data-table.sortable th.sort-asc::after { content: " \25B4"; opacity: 1; }
.data-table.sortable th.sort-desc::after { content: " \25BE"; opacity: 1; }

/* Reason column overflow (Deleted Products Report) */
.deleted-products-reason { max-width: 300px; word-wrap: break-word; overflow-wrap: break-word; }

/* ─── DETAIL VIEW ────────────────────────────────────────────────────── */
.detail-header {
  margin-bottom: 8px;
}
.detail-header h1 {
  margin-bottom: 4px;
}
.detail-subtitle {
  font-size: 1.5rem;
  color: #555;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 20px;
  font-size: 1.5rem;
  margin-bottom: 0;
}
.detail-field label {
  font-size: 1.3rem;
  font-weight: 800;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 2px;
}
.detail-field span { color: #1a1a1a; }
.detail-field.full-width {
  grid-column: 1 / -1;
}
.detail-field-highlight {
  padding-top: 0;
  border-top: none;
}
.detail-field--separator {
  padding-top: 8px;
  border-top: 1px solid #e0e0e0;
}


.detail-section {
  margin-bottom: 10px;
}
.detail-section h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #4A5157;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 4px;
  border-bottom: 2px solid #00704A;
  margin-bottom: 6px;
}

/* ─── NOTES LIST ─────────────────────────────────────────────────────── */
.notes-list {
  list-style: none;
}
.notes-list li {
  padding: 6px 0;
  border-bottom: 1px solid #e8e8e8;
  font-size: 1.5rem;
  color: #333;
  line-height: 1.5;
}
.notes-list li:last-child { border-bottom: none; }

/* ─── LOCATION DETAIL ────────────────────────────────────────────────── */
.contact-card {
  background: #f0f9f5;
  border: 1px solid #b3dece;
  border-radius: 6px;
  padding: 1px 24px;
  max-width: 480px;
}
.contact-card h2 {
  font-size: 1.5rem;
  color: #4A5157;
  margin-bottom: 12px;
}
.contact-row {
  display: flex;
  gap: 1x;
  margin-bottom: 6px;
  font-size: 1.5rem;
}
.contact-row .contact-label {
  font-weight: 700;
  color: #555;
  min-width: 80px;
  flex-shrink: 0;
}
.contact-row .contact-value {
  color: #1a1a1a;
}

/* ─── MIX DESIGN SECTION ────────────────────────────────────────────── */
.mix-design-section {
  margin-bottom: 32px;
}
.mix-design-section h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #00704A;
}

/* ─── FAQ ─────────────────────────────────────────────────────────────── */
.faq-list {
  max-width: 800px;
}
.faq-item {
  margin-bottom: 20px;
  padding-bottom: px;
  border-bottom: 1px solid #e0e0e0;
}
.faq-item:last-child { border-bottom: none; }
.faq-item h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #4A5157;
  margin-bottom: 6px;
}
.faq-item p {
  font-size: 1.5rem;
  color: #444;
  line-height: 1.65;
}

/* ─── ALERTS ─────────────────────────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 1.5rem;
  margin-bottom: 16px;
  line-height: 1.5;
}
.alert-info {
  background: #e3f2fd;
  border-left: 4px solid #1976d2;
  color: #0d47a1;
}
.alert-error {
  background: #fce4ec;
  border-left: 4px solid #c62828;
  color: #b71c1c;
}

/* ─── PRINT CONTRACTOR INFO ─────────────────────────────────────────── */
.print-info-section {
  margin-top: 12px;
  padding: 10px 16px;
  border: 1px solid #d4e4dc;
  border-radius: 6px;
  background: #f8faf9;
}
.print-info-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 6px;
}
.print-timestamp {
  display: none;
}
.print-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
  margin-bottom: 6px;
}
.print-fields--three-col {
  grid-template-columns: 1fr 1fr 1fr;
}
.print-fields .form-group {
  margin-bottom: 0;
}
.print-btn-row {
  margin-top: 12px;
}
#main-content .print-info-section .form-control[readonly] {
  border: none;
  border-bottom: 1px solid #333;
  border-radius: 0;
  background: transparent;
  cursor: default;
}

/* ─── BACK LINK ──────────────────────────────────────────────────────── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 1.5rem;
  color: #4A5157;
  text-decoration: none;
  margin-bottom: 6px;
}
.back-link:hover { text-decoration: underline; }

/* ─── RESULT COUNT ───────────────────────────────────────────────────── */
.result-count {
  font-size: 1.5rem;
  color: #666;
  margin-bottom: 12px;
}

/* ─── HMA INFO BLOCK ─────────────────────────────────────────────────── */
.hma-info-block {
    margin-bottom: 24px;
    font-size: 1.5rem;
    color: #333;
    line-height: 1.6;
}
.hma-info-field {
    display: flex;
    gap: 6px;
}
.hma-info-label {
    font-weight: 700;
    color: #1a1a1a;
    flex-shrink: 0;
}

/* ─── HELP PAGE ──────────────────────────────────────────────────────── */

/* TOC */
.help-toc {
  background: #f0f9f5;
  border: 1px solid #b3dece;
  border-radius: 4px;
  padding: 14px 20px;
  margin-bottom: 20px;
}
.help-toc h2 {
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4A5157;
  margin-bottom: 6px;
  border: none;
}
.help-toc ol { padding-left: 20px; border: none; margin: 0; }
.help-toc ol li { break-inside: avoid; border: none; box-shadow: none; outline: none; font-size: 1.3rem; }
.help-toc ol li a {
  display: block;
  padding: 2px 0;
  font-size: 1.3rem;
  color: #4A5157;
  text-decoration: none;
  border: none;
  box-shadow: none;
}
.help-toc ol li a:hover { text-decoration: underline; }

/* Part dividers */
.part-divider {
  margin-top: 28px;
  border-top: 3px solid #00704A;
  padding-top: 8px;
}
.part-label {
  text-transform: uppercase;
  color: #4A5157;
  letter-spacing: 0.08em;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0;
}

/* Sections */
.help-section {
  margin-bottom: 20px;
  scroll-margin-top: 20px;
}
.help-section h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #4A5157;
  border-bottom: 2px solid #b3dece;
  padding-bottom: 6px;
  margin-top: 24px;
  margin-bottom: 8px;
}
.help-section h3 {
  font-size: 1.7rem;
  font-weight: 700;
  color: #333;
  margin: 16px 0 6px;
}
.help-section p {
  font-size: 1.3rem;
  color: #333;
  line-height: 1.65;
  margin-bottom: 10px;
  max-width: 720px;
}

/* Tables */
.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.3rem;
  margin: 10px 0 16px;
}
.help-table thead tr { background: #00704A; }
.help-table thead th {
  padding: 8px 14px;
  text-align: left;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid #b3dece;
}
.help-table tbody tr { border-bottom: 1px solid #e0e0e0; }
.help-table tbody tr:last-child { border-bottom: none; }
.help-table tbody td {
  padding: 10px 14px;
  vertical-align: top;
  line-height: 1.5;
  border: 1px solid #b3dece;
}
.help-table tbody tr:nth-child(even) td { background: #f0f9f5; }
.help-table tbody tr:hover td { background: #e4f3ec; }

/* Field name class for first-column table cells */
.field-name { font-weight: 700; color: #4A5157; }

/* Step boxes */
.step-box {
  background: #f0f9f5;
  border: 1px solid #b3dece;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 8px 0 12px;
}
.step-box ol {
  padding-left: 20px;
  margin: 0;
}
.step-box ol li {
  font-size: 1.3rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 4px;
}

/* Tip callouts */
.tip {
  border-left: 4px solid #1976d2;
  background: #e3f2fd;
  color: #0d47a1;
  padding: 10px 16px;
  margin: 8px 0 12px;
  font-size: 1.3rem;
  border-radius: 0 4px 4px 0;
}

/* Bullet lists */
.help-list {
  list-style: none;
  margin: 6px 0 12px;
  padding-left: 0;
}
.help-list > li {
  padding: 6px 0 6px 18px;
  position: relative;
  font-size: 1.3rem;
  line-height: 1.6;
  color: #333;
}
.help-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  background: #00704A;
  border-radius: 50%;
}

/* Doc footer */
.doc-footer {
  margin-top: 28px;
  border-top: 1px solid #e0e0e0;
  padding-top: 12px;
  font-size: 1.3rem;
  color: #767676;
}

/* Back link */
.help-back {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid #e0e0e0;
}
.help-back a {
  font-size: 1.3rem;
  font-weight: 600;
  color: #4A5157;
  text-decoration: none;
}
.help-back a:hover { text-decoration: underline; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .print-fields {
    grid-template-columns: 1fr;
  }
  .data-table {
    display: block;
    overflow-x: auto;
  }
  .expand-col { width: 36px; min-width: 36px; max-width: 36px; }
  .subrow-content { padding-left: 14px; }
}

/* ─── PRINT STYLES ───────────────────────────────────────────────────── */
@media print {
  /* Hide navigation and interactive elements */
  #header,
  .nav-outer-wrapper,
  .content-top-wrapper,
  .footer-bottom,
  .btn-primary,
  .btn-secondary,
  .print-btn-row,
  .filter-bar,
  .back-link { display: none !important; }

  /* Print timestamp — top right */
  .print-timestamp {
    display: block !important;
    font-size: 8pt;
    color: #333;
    text-align: right;
    margin-bottom: 4px;
  }

  /* Clean page layout */
  body {
    font-size: 11pt;
    color: #000;
    background: #fff;
  }
  .main-container.container {
    max-width: none;
    padding: 0;
  }

  /* Table formatting */
  .data-table {
    border: 1px solid #333;
    page-break-inside: auto;
  }
  .data-table thead {
    background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .data-table thead th {
    color: #333 !important;
  }
  .data-table tbody tr { border-top: 1px solid #ccc; }
  .data-table tbody tr:hover { background: none; }
  .data-table td, .data-table thead th {
    padding: 6px 10px;
  }

  /* Show print info fields */
  .print-info-section {
    border: 1pt solid #999;
    border-radius: 0;
    background: none !important;
  }
  .detail-field--separator {
    padding-top: 1px;
    border-top: none;
  }
  .print-info-section .form-control {
    border: none;
    border-bottom: 1px solid #333;
    padding: 2px 0;
    height: auto;
  }

  /* Page margins — tightened for single-page product detail */
  @page {
    margin: 0.35in;
  }

  /* Avoid page breaks inside detail sections */
  .detail-section, .faq-item {
    page-break-inside: avoid;
  }

  /* ── Product Detail: fit to one page ── */

  /* Page heading */
  .page-h1 {
    font-size: 13pt;
    margin: 0 0 0;
  }
  .detail-header {
    margin-bottom: 1px;
  }
  .detail-subtitle {
    font-size: 9pt;
    margin: 0;
  }

  /* Product Information grid */
  .detail-grid {
    font-size: 9pt;
    gap: 0 10px;
    margin-bottom: 1px;
  }
  .detail-field label {
    font-size: 8pt;
    margin-bottom: 0;
  }
  .detail-field-highlight {
    padding-top: 1px;
    border-top: none;
  }

  /* Section headings & spacing */
  .detail-section {
    margin-bottom: 2px;
  }
  .detail-section h2 {
    font-size: 10pt;
    padding-bottom: 0;
    margin-bottom: 1px;
  }

  /* Notes list */
  .notes-list li {
    padding: 0;
    font-size: 9pt;
    line-height: 1.2;
  }

  /* Contractor / Inspector print section */
  .print-info-section {
    margin-top: 2px;
    padding-top: 2px;
  }
  .print-info-section h2 {
    font-size: 9pt;
    margin-top: 1px;
    margin-bottom: 0;
  }
  .print-fields {
    gap: 0 10px;
    margin-bottom: 0;
  }
  .print-fields--three-col {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .form-actions {
    display: none !important;
  }

  /* Override ID-scoped screen rules — labels and inputs side-by-side */
  #main-content .print-info-section .form-group {
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 0;
  }
  #main-content .print-info-section .form-label {
    font-size: 8pt;
    white-space: nowrap;
    flex-shrink: 0;
    width: 85px;
  }
  #main-content .print-info-section .form-control {
    height: auto;
    padding: 1px 0;
    font-size: 9pt;
    flex: 1;
    min-width: 0;
  }
  #main-content .print-info-section .print-fields--three-col .form-label {
    width: auto;
  }

  .expand-col,
  .expand-toggle,
  .mix-design-subrow { display: none !important; }

  .mix-design-section { display: none !important; }
  .inspector-section { page-break-before: auto; }

  .help-back { display: none; }
  .step-box, .tip, .help-table { page-break-inside: avoid; }
  .help-section { page-break-before: auto; }

  a { color: #000; text-decoration: none; }
  a[href]::after { content: none; }

  /* Book Report print overrides */
  .book-report-actions,
  .no-print { display: none !important; }

  .book-report { padding: 0; }

  /* Table of Contents — visible in print, page break after */
  .book-report-toc {
    display: block !important;
    page-break-after: always;
  }

  .book-report-toc-title {
    font-size: 14pt;
    font-weight: 700;
    color: #4A5157;
    text-align: center;
    margin: 0 0 12px;
  }
  .book-report-toc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
  }
  .book-report-toc-table th {
    text-align: left;
    font-weight: 700;
    padding: 4px 8px;
    border-bottom: 2px solid #00704A;
    color: #4A5157;
  }
  .book-report-toc-table td {
    padding: 3px 8px;
    border-bottom: 1px solid #ddd;
  }
  .book-report-toc-table tr:nth-child(even) td {
    background: #f5f5f5;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
/* Print header: branding repeated via thead on every data page */
  .book-report-print-header-row {
    display: table-row !important;
  }
  .book-report-print-header-cell {
    padding: 8px 10px !important;
    border-bottom: 2px solid #000 !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .book-report-print-header {
    display: block !important;
  }
  .book-report-print-branding {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .book-report-print-logo {
    max-height: 36px;
    width: auto;
    flex-shrink: 0;
  }
  .book-report-print-subtitle {
    font-size: 12pt;
    font-weight: 700;
    color: #4A5157;
    letter-spacing: 0.4px;
    text-align: center;
    flex: 1;
    padding: 0 16px;
    line-height: 1;
  }
  .book-report-print-date {
    font-size: 8pt;
    color: #333;
    text-align: right;
    flex-shrink: 0;
    line-height: 1.3;
  }
  .book-report {
    margin-top: 0;
  }

  .book-report-table {
    font-size: 9pt;
    border: 1px solid #333;
  }
  .book-report-table thead {
    display: table-header-group;
    background: #333 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .book-report-table th,
  .book-report-table td {
    padding: 3px 6px !important;
  }
  .book-report-spec-row td {
    background: #e0e0e0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .book-report-mfg-row {
    page-break-inside: avoid;
  }
  .book-report-mfg-fields {
    font-size: 7pt;
    white-space: nowrap;
  }
  .book-report-desc-row td {
    padding-top: 0 !important;
  }
}

/* ─── BOOK REPORT ────────────────────────────────────────────────────── */
.book-report {
  max-width: 1280px;
  margin: 0 auto;
}

/* Table of Contents — hidden on screen, shown in print */
.book-report-toc {
  display: none;
}

/* Print header row — hidden on screen, shown in print via thead */
.book-report-print-header-row {
  display: none;
}
.book-report-print-header {
  display: none;
}

/* Report table */
.book-report-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #b3dece;
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.book-report-table thead {
  background: #00704A;
  color: #fff;
}
.book-report-table thead th {
  padding: 8px 10px;
  text-align: left;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-right: 1px solid rgba(255,255,255,0.15);
}
.book-report-table thead th:last-child { border-right: none; }

.book-report-table .col-spec { width: 50%; }
.book-report-table .col-ref  { width: 20%; }
.book-report-table .col-accept { width: 12%; }
.book-report-table .col-date { width: 18%; }

.book-report-table tbody tr {
  border-top: 1px solid #dde9e3;
}

/* Spec group row */
.book-report-spec-row td {
  background: #e6f4ee;
  padding: 7px 10px;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
  border-top: 2px solid #00704A;
}

/* Manufacturer row */
.book-report-mfg-row td {
  padding: 5px 10px 5px 20px;
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  background: #f8faf9;
}
.book-report-mfg-fields {
  font-weight: 400;
  font-size: 1.5rem;
  color: #767676;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Product row */
.book-report-product-row td {
  padding: 4px 10px 4px 36px;
  font-size: 1.5rem;
  color: #1a1a1a;
}
.product-name-cell {
  padding-left: 36px;
}

/* Description row */
.book-report-desc-row td {
  padding: 0 10px 4px 50px;
  font-size: 1.5rem;
  font-style: italic;
  color: #555;
}

/* Empty state */
.book-report-empty {
  text-align: center;
  padding: 24px;
  color: #767676;
  font-style: italic;
}

/* Revision History */
.book-report-revision-history {
  margin-top: 32px;
  padding: 20px 24px;
  background: #f8faf9;
  border: 1px solid #d4e4dc;
  border-radius: 6px;
}
.book-report-revision-history h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #4A5157;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}
.revision-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.revision-list li {
  padding: 6px 0;
  border-bottom: 1px solid #e8ede9;
  font-size: 1.5rem;
}
.revision-list li:last-child {
  border-bottom: none;
}
.revision-date {
  font-weight: 600;
  color: #333;
  margin-right: 8px;
}
.revision-list a {
  color: #4A5157;
  text-decoration: none;
}
.revision-list a:hover {
  text-decoration: underline;
}

/* Actions */
.book-report-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

/* ─── CONTACT SECTION ────────────────────────────────────────────────── */
/* !important required — Bootstrap 3.4.1 + WSDOT Drupal theme override all states */
.sidebar-contact .btn-primary,
.sidebar-contact .btn-primary:hover,
.sidebar-contact .btn-primary:focus,
.sidebar-contact .btn-primary:active {
  display: inline-block !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 12px 32px !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: normal !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background: #00704A !important;
  color: #fff !important;
  box-shadow: none !important;
  outline-offset: 0 !important;
  transform: none !important;
  transition: background 0.15s !important;
  margin-top: 8px;
  cursor: pointer;
}
.sidebar-contact .btn-primary:hover,
.sidebar-contact .btn-primary:focus {
  background: #005a3c !important;
}
.sidebar-contact .btn-primary::before,
.sidebar-contact .btn-primary::after {
  display: none !important;
  content: none !important;
}

/* ─── CONTACT PAGE ──────────────────────────────────────────────────── */
.contact-page {
  max-width: 520px;
}

/* ─── FORM VALIDATION ────────────────────────────────────────────────── */
.form-error {
  font-size: 1.5rem;
  color: #c62828;
  min-height: 0;
}
.req {
  color: #c62828;
}

/* ─── TOAST NOTIFICATION ─────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #00704A;
  color: #fff;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 1.5rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  text-align: center;
  max-width: 90%;
}
.toast-error {
  background: #c62828;
}

/* ─── EXPANDABLE MIX DESIGN ROWS ─────────────────────────────────────── */
.expand-col {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  text-align: center;
  padding: 6px !important;
}
.expand-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #b3dece;
  border-radius: 4px;
  background: #f0f9f5;
  color: #00704A;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.expand-toggle:hover {
  background: #e0f0ea;
  border-color: #00704A;
}
.expand-toggle:focus {
  outline: 2px solid #00704A;
  outline-offset: 1px;
}
.mix-design-subrow {
  background: #f8faf9 !important;
}
.mix-design-subrow:hover {
  background: #f8faf9 !important;
}
.mix-design-subrow > td {
  padding: 0 !important;
}
.subrow-content {
  padding: 12px 20px 16px 54px;
}
.subrow-content strong {
  display: block;
  font-size: 1.4rem;
  color: #4A5157;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.related-designs-table {
  width: auto;
  min-width: 320px;
  border-collapse: collapse;
  border: 1px solid #d4e4dc;
  font-size: 1.4rem;
}
.related-designs-table thead {
  background: #4A5157;
  color: #fff;
}
.related-designs-table thead th {
  padding: 7px 14px;
  text-align: left;
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-right: 1px solid rgba(255,255,255,0.15);
}
.related-designs-table thead th:last-child {
  border-right: none;
}
.related-designs-table tbody tr {
  border-top: 1px solid #d4e4dc;
}
.related-designs-table tbody tr:first-child {
  border-top: none;
}
.related-designs-table tbody td {
  padding: 6px 14px;
  color: #1a1a1a;
}
.loading-indicator {
  font-size: 1.4rem;
  color: #767676;
  font-style: italic;
  padding: 4px 0;
}
.empty-message {
  font-size: 1.4rem;
  color: #767676;
  font-style: italic;
  padding: 4px 0;
}

/* ─── DATA AS OF ────────────────────────────────────────────────────── */
.data-as-of {
  display: block;
  margin-top: 22px;
  font-size: 1.2rem;
  color: #666;
}