/* Website Security Audit Report - Dedicated CSS */
/* File: security-audit-styles.css */
/* Purpose: Dedicated styling for security audit reports only */

/* CSS Custom Properties */
:root {
  /* Brand Colors */
  --primary-color: #000000;
  --primary-dark: #333333;
  --primary-light: #666666;
  --text-primary: #000000;
  --text-secondary: #666666;
  --text-muted: #999999;
  --background-white: #FFFFFF;
  --background-light: #f8f9fa;
  --border-color: #e0e0e0;
  
  /* Security Severity Colors */
  --critical-color: #dc3545;
  --serious-color: #fd7e14;
  --moderate-color: #ffc107;
  --pass-color: #28a745;
  --info-color: #17a2b8;
  
  /* Typography */
  --font-family-primary: 'avenirmedium', 'Avenir Medium', Arial, sans-serif;
  --font-family-bold: 'avenirblack', 'Avenir Black', Arial, sans-serif;
  --font-family-mono: 'Courier New', Courier, monospace;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  
  /* Border Radius */
  --border-radius: 6px;
  --border-radius-sm: 4px;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 12px rgba(0, 0, 0, 0.15);
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
}

body {
  font-family: var(--font-family-primary);
  font-size: 12pt;
  line-height: 1.4;
  color: var(--text-primary);
  background-color: var(--background-white);
  margin: 0;
  padding: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--primary-color);
  font-family: var(--font-family-bold);
  font-weight: normal;
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
}

h1 { font-size: 24pt; }
h2 { font-size: 18pt; }
h3 { font-size: 14pt; }
h4 { font-size: 12pt; }
h5 { font-size: 11pt; }
h6 { font-size: 10pt; }

p {
  margin-bottom: var(--spacing-md);
  font-size: 11pt;
  font-family: var(--font-family-primary);
}

.index-content {
  padding: var(--spacing-lg);
  overflow: visible; /* Allow content to flow */
  min-height: auto; /* Remove height constraints */
}

.index-content h2 {
  color: var(--text-primary);
  font-size: 18pt;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  margin-top: var(--spacing-xl);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--border-color);
  font-family: var(--font-family-bold);
}

.index-content h2:first-child {
  margin-top: 0;
}

.index-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-lg) 0;
}

.index-content li {
  padding: var(--spacing-sm) 0;
  padding-left: var(--spacing-lg);
  position: relative;
  color: var(--text-secondary);
  font-size: 12pt;
  line-height: 1.5;
  border-bottom: 1px solid var(--border-light);
}

.index-content li:before {
  content: "•";
  color: var(--primary-color);
  font-weight: bold;
  position: absolute;
  left: 0;
  top: var(--spacing-sm);
}

.index-content li:last-child {
  border-bottom: none;
}

/* Page Sections */
.page-section {
  width: 210mm;
  height: 297mm;
  margin: 0 auto;
  padding: 20mm;
  page-break-after: always;
  position: relative;
  background: var(--background-white);
}

.page-section:last-child {
  page-break-after: avoid;
}

/* Page Footer */
.page-footer {
  position: absolute;
  left: 20mm;
  right: 20mm;
  bottom: 20mm;
  border-top: 1px solid var(--border-color);
  padding-top: 8mm;
  font-size: 10pt;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  gap: 10mm;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  gap: 10mm;
}

.footer-info {
  display: flex;
  gap: var(--spacing-lg);
}

.footer-info span {
  color: var(--text-secondary);
}

/* Cover Page */
.cover-page {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
  color: var(--background-white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.cover-page::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40mm;
  height: 40mm;
  background: var(--background-white);
  border-radius: 50% 0 0 0;
  transform: translate(50%, 50%);
}

.cover-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
  position: relative;
}

.cover-header {
  margin-bottom: var(--spacing-xl);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo {
  display: flex;
  align-items: center;
}

.header-logo img {
  filter: brightness(0) invert(1);
}

.cover-date {
  font-size: 10pt;
  opacity: 0.9;
  color: var(--background-white);
  font-family: var(--font-family-primary);
  font-weight: normal;
}

.cover-main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: var(--spacing-xxl) 0;
}

.cover-title {
  max-width: 60%;
}

.cover-subtitle {
  font-size: 12pt;
  font-family: var(--font-family-primary);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--spacing-md);
  opacity: 0.8;
  color: var(--background-white);
}

.cover-main-title {
  font-size: 36pt;
  font-family: var(--font-family-bold);
  font-weight: normal;
  margin-bottom: var(--spacing-lg);
  line-height: 1.1;
  color: var(--background-white);
}

.cover-url {
  font-size: 14pt;
  opacity: 0.8;
  font-family: var(--font-family-primary);
  font-weight: 400;
  color: var(--background-white);
}

.cover-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-xl);
}

.cover-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.url-input {
  font-size: 14pt;
  color: var(--background-white);
}

.end-url .url-input {
  font-size: 1.2rem;
  color: #666666;
  background: transparent;
  border: 1px solid rgb(221, 221, 221);
  text-align: left;
  width: 100%;
  max-width: 500px;
  padding: 5px;
  font-family: inherit;
}

input, textarea {
  background-color: transparent;
  box-shadow: none;
  outline: none;
  border: none;
  resize: none;
  overflow: hidden;
  width: 100%;
  font-size: 12pt;
  font-family: var(--font-family-primary);
  font-weight: normal;
  color: var(--text-primary);
}

/* Hide footer on cover page */
.cover-page .page-footer {
  display: block;
  position: absolute;
  bottom: 20mm;
  left: 20mm;
  right: 20mm;
  background: transparent;
  z-index: 1000;
}

.cover-page .page-footer .footer-content {
  color: var(--background-white);
}

.cover-page .page-footer .footer-info span {
  color: var(--background-white);
  opacity: 0.8;
}

/* Page Headers */
.page-header {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--primary-color);
}

.header-brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-lg);
}

.header-title {
  flex: 1;
}

.header-title h1 {
  margin-bottom: var(--spacing-xs);
  color: var(--primary-color);
  font-family: var(--font-family-bold);
  font-weight: normal;
  font-size: 24pt;
}

.header-subtitle {
  color: var(--text-secondary);
  font-size: 12pt;
  font-family: var(--font-family-primary);
  margin: 0;
}

.header-logo-small {
  flex-shrink: 0;
}

.header-logo-small img {
  max-width: 120px;
  height: auto;
}

/* Executive Overview */
.executive-overview {
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--background-light);
  border-radius: var(--border-radius);
  border-left: 4px solid var(--primary-color);
}

.overview-content h2 {
  color: var(--primary-color);
  font-family: var(--font-family-bold);
  font-weight: normal;
  margin-bottom: var(--spacing-md);
}

.overview-description {
  color: var(--text-primary);
  font-size: 11pt;
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  font-family: var(--font-family-primary);
}

.overview-description input[type="text"] {
  display: inline-block;
  min-width: 200px;
  font-size: 11pt;
  background: transparent;
  margin-left: 5px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  color: var(--text-primary);
  font-size: 11pt;
  line-height: 1.6;
  font-family: var(--font-family-primary);
}

.overview-description-1{
  color: var(--text-primary);
  font-size: 11pt;
  line-height: 1.5;
}

.overview-description- textarea{
  display: inline-block;
}

.overview-description-2{
  color: var(--text-primary);
  font-size: 13pt;
  line-height: 1.5;
  height: 30px !important;
}

/* Priority Actions */
.priority-actions {
  margin-bottom: var(--spacing-xl);
}

.priority-actions h2 {
  color: var(--primary-color);
  font-family: var(--font-family-bold);
  font-weight: normal;
  margin-bottom: var(--spacing-lg);
}

.actions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.action-item {
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  background: var(--background-white);
  box-shadow: var(--shadow-sm);
}

.action-item.immediate {
  border-left: 4px solid var(--critical-color);
}

.action-item.high {
  border-left: 4px solid var(--serious-color);
}

.action-item.medium {
  border-left: 4px solid var(--moderate-color);
}

.action-item.low {
  border-left: 4px solid var(--pass-color);
}

.action-header {
  margin-bottom: var(--spacing-md);
}

.action-priority {
  display: inline-block;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  background-color: var(--critical-color);
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 8px;
  min-width: 100px;
  text-align: center;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--input-bg);
  color: var(--text-color);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding-right: 24px;
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 8px;
  min-width: 100px;
  text-align: center;
  outline: none;
}

select:focus,
select:active,
select:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--border-color);
}

/* Priority color variants */
.action-priority[value="critical"] {
  background-color: var(--critical-color);
}

.action-priority[value="high"] {
  background-color: var(--serious-color);
}

.action-priority[value="medium"] {
  background-color: var(--moderate-color);
}

.action-priority[value="low"] {
  background-color: var(--pass-color);
}

/* Style the dropdown options */
.action-priority option[value="critical"] {
  background-color: var(--critical-color);
  color: white;
}

.action-priority option[value="high"] {
  background-color: var(--serious-color);
  color: white;
}

.action-priority option[value="medium"] {
  background-color: var(--moderate-color);
  color: #000;
}

.action-priority option[value="low"] {
  background-color: var(--pass-color);
  color: white;
}

/* Remove default dropdown arrow in IE */
.action-priority::-ms-expand {
  display: none;
}

/* Focus state */
.action-priority:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.action-item.immediate .action-priority {
  background: var(--critical-color);
  color: var(--background-white);
}

.action-item.high .action-priority {
  background: var(--serious-color);
  color: var(--background-white);
}

.action-item.medium .action-priority {
  background: var(--moderate-color);
  color: var(--text-primary);
}

.action-item.low .action-priority {
  background: var(--pass-color);
  color: var(--background-white);
}

.action-item h3 {
  color: var(--primary-color);
  font-family: var(--font-family-bold);
  font-weight: normal;
  margin-bottom: var(--spacing-sm);
  font-size: 14pt;
}

.description-2, .action-item p  {
  color: var(--text-secondary);
  font-size: 11pt;
  margin: 0;
}

/* Tags Section */
.tags-section {
  margin-bottom: var(--spacing-xl);
}

.tags-section h2 {
  color: var(--primary-color);
  font-family: var(--font-family-bold);
  font-weight: normal;
  margin-bottom: var(--spacing-lg);
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.tag {
  display: inline-block;
  padding: 6px 12px;
  background: var(--background-light);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 9pt;
  font-weight: bold;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Technical Details */
.technical-details {
  margin-bottom: var(--spacing-xl);
}

.technical-details h2 {
  color: var(--primary-color);
  font-family: var(--font-family-bold);
  font-weight: normal;
  margin-bottom: var(--spacing-lg);
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

.detail-item {
  padding: var(--spacing-md);
  background: var(--background-light);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

.detail-label {
  font-size: 10pt;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-xs);
  font-weight: bold;
}

.detail-value {
  font-size: 11pt;
  color: var(--text-primary);
  font-weight: bold;
}

/* Metrics Dashboard */
.metrics-dashboard {
  margin-bottom: var(--spacing-xl);
}

.metrics-dashboard h2 {
  color: var(--primary-color);
  font-family: var(--font-family-bold);
  font-weight: normal;
  margin-bottom: var(--spacing-lg);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.metric-card {
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  background: var(--background-white);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.metric-card.critical {
  border-left: 4px solid var(--critical-color);
}

.metric-card.serious {
  border-left: 4px solid var(--serious-color);
}

.metric-card.moderate {
  border-left: 4px solid var(--moderate-color);
}

.metric-card.minor {
  border-left: 4px solid var(--pass-color);
}

.metric-card.primary {
  border-left: 4px solid var(--primary-color);
}

.metric-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.metric-value {
  font-size: 24pt;
  font-family: var(--font-family-bold);
  font-weight: normal;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

.metric-label {
  font-size: 10pt;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: bold;
}

/* WCAG Overview */
.wcag-overview {
  margin-bottom: var(--spacing-xl);
}

.wcag-overview h2 {
  color: var(--primary-color);
  font-family: var(--font-family-bold);
  font-weight: normal;
  margin-bottom: var(--spacing-lg);
}

.wcag-overview-content {
  margin-bottom: var(--spacing-lg);
}

.wcag-overview-description {
  color: var(--text-primary);
  font-size: 11pt;
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.wcag-levels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.wcag-level-card {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--background-white);
  overflow: hidden;
}

.wcag-level-header {
  background: var(--background-light);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
}

.wcag-level-header h3 {
  margin: 0;
  color: var(--primary-color);
  font-size: 12pt;
  text-align: center;
}

.wcag-level-count {
  padding: var(--spacing-lg);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px; 
}

.count-value {
  font-size: 24pt;
  font-family: var(--font-family-bold);
  font-weight: normal;
  color: var(--primary-color);
  text-align: center;
}

/* Page Content */
.page-content {
  margin-bottom: var(--spacing-xl);
}

/* Violations Table */
.violations-table-wrap {
  overflow-x: auto;
}

.violations-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-lg);
  font-size: 10pt;
}

.violations-table th {
  background: var(--background-light);
  color: var(--primary-color);
  font-weight: bold;
  text-align: left;
  padding: var(--spacing-md);
  border-bottom: 2px solid var(--primary-color);
  font-family: var(--font-family-bold);
}

.violations-table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}

.violations-table .violation-row.critical {
  background: rgba(220, 53, 69, 0.05);
}

.violations-table .violation-row.serious {
  background: rgba(253, 126, 20, 0.05);
}

.violations-table .violation-row.moderate {
  background: rgba(255, 193, 7, 0.05);
}

.violations-table .violation-row.minor {
  background: rgba(40, 167, 69, 0.05);
}

.col-num {
  text-align: center;
  font-weight: bold;
  color: var(--primary-color);
}

.col-details {
  min-width: 300px;
}

.detail-block {
  margin-bottom: var(--spacing-sm);
}

.detail-block .label {
  font-weight: bold;
  color: var(--text-secondary);
  min-width: 80px;
  display: inline-block;
}

.detail-block .value {
  color: var(--text-primary);
}

.detail-block .value.rule {
  font-weight: bold;
  color: var(--primary-color);
}

.urls-label {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.urls-box {
  background: var(--background-light);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color);
}

.url-item {
  font-size: 9pt;
  color: var(--text-secondary);
  font-family: var(--font-family-mono);
  margin-bottom: var(--spacing-xs);
}

.url-item:last-child {
  margin-bottom: 0;
}

.col-instances {
  text-align: center;
  font-weight: bold;
}

.col-impact {
  text-align: center;
}

.impact-text {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  font-size: 9pt;
  font-weight: bold;
  text-transform: uppercase;
}

.violation-row.critical .impact-text {
  background: var(--critical-color);
  color: var(--background-white);
}

.violation-row.serious .impact-text {
  background: var(--serious-color);
  color: var(--background-white);
}

.violation-row.moderate .impact-text {
  background: var(--moderate-color);
  color: var(--background-white);
}

.violation-row.minor .impact-text {
  background: var(--pass-color);
  color: var(--background-white);
}

/* Matrix4 Table Specific Styles */
.violations-table.matrix4 {
  page-break-inside: auto;
  break-inside: auto;
}

.violations-table.matrix4 th,
.violations-table.matrix4 td {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}

.violations-table.matrix4 thead {
  display: table-header-group;
}

.violations-table.matrix4 tbody.violation-group {
  display: table-row-group;
  page-break-inside: avoid;
  break-inside: avoid;
  -fs-page-break-inside: avoid;
  -fs-keep-together: always;
  -fs-page-break-min-height: 160px;
}

.violations-table.matrix4 tr.violation-row,
.violations-table.matrix4 tr.violation-row > td {
  page-break-inside: avoid;
  break-inside: avoid;
  -fs-page-break-inside: avoid;
}

.violations-table.matrix4 td.col-num {
  width: 44px;
  text-align: center;
  font-weight: 700;
  color: var(--primary-color);
}

.violations-table.matrix4 td.col-details {
  width: auto;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.violations-table.matrix4 td.col-instances {
  width: 96px;
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
}

.violations-table.matrix4 td.col-impact {
  width: 120px;
  text-align: center;
}

.violations-table.matrix4 .detail-block {
  margin-bottom: 8px;
}

.violations-table.matrix4 .detail-block .label {
  font-weight: 700;
  color: var(--primary-color);
  margin-right: 6px;
}

.violations-table.matrix4 .detail-block .value {
  color: var(--primary-color);
}

.violations-table.matrix4 .detail-block .value.desc {
  color: var(--text-primary);
}

.violations-table.matrix4 .detail-block.urls-label {
  margin-top: 12px;
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--primary-color);
}

.violations-table.matrix4 .urls-box {
  background: var(--background-light);
  padding: 8px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.violations-table.matrix4 .urls-box .url-item {
  font-size: 11px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color);
  word-break: break-all;
  overflow-wrap: anywhere;
  page-break-inside: avoid;
  -fs-page-break-inside: avoid;
}

.violations-table.matrix4 .urls-box .url-item:last-child {
  border-bottom: 0;
}

.violations-table.matrix4 .urls-box .url-item.more {
  color: var(--text-secondary);
  font-style: italic;
}

/* Test Overview */
.test-overview {
  margin-bottom: var(--spacing-xl);
}

.test-overview h2 {
  color: var(--primary-color);
  font-family: var(--font-family-bold);
  font-weight: normal;
  margin-bottom: var(--spacing-lg);
}

.overview-description {
  margin-bottom: var(--spacing-lg);
}

.overview-description p {
  color: var(--text-primary);
  font-size: 11pt;
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.results-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
}

.summary-item {
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  background: var(--background-white);
  text-align: center;
}

.summary-item.passed {
  border-left: 4px solid var(--pass-color);
}

.summary-item.inapplicable {
  border-left: 4px solid var(--serious-color);
}

.summary-item.total {
  border-left: 4px solid var(--primary-color);
}

.summary-content h3 {
  color: var(--primary-color);
  font-size: 12pt;
  margin-bottom: var(--spacing-sm);
}

.summary-count {
  font-size: 24pt;
  font-family: var(--font-family-bold);
  font-weight: normal;
  color: var(--primary-color);
}

/* Passed Tests */
.passed-tests {
  margin-bottom: var(--spacing-xl);
}

.passed-tests h2 {
  color: var(--primary-color);
  font-family: var(--font-family-bold);
  font-weight: normal;
  margin-bottom: var(--spacing-lg);
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.category-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--background-light);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

.category-name {
  flex: 1;
  font-size: 11pt;
  color: var(--text-primary);
  font-weight: bold;
}

.category-bar {
  flex: 2;
  height: 20px;
  background: var(--border-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--primary-color);
  transition: width 0.3s ease;
}

.category-count {
  flex: 0 0 60px;
  text-align: right;
  font-size: 11pt;
  color: var(--primary-color);
  font-weight: bold;
}

/* End Cover */
.end-cover {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  padding: 0;
}

.end-header {
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 20px;
}

.end-logo {
  margin-bottom: 0;
}

.end-date {
  font-size: 10pt;
  color: var(--text-secondary);
  font-family: var(--font-family-primary);
}

.end-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  padding-top: 20px;
}

.end-title {
  text-align: center;
  margin-bottom: 50px;
}

.end-title h1 {
  color: var(--primary-color);
  font-family: var(--font-family-bold);
  font-weight: normal;
  margin-bottom: 15px;
  font-size: 28pt;
}

.end-title h2 {
  color: var(--text-secondary);
  font-family: var(--font-family-primary);
  font-weight: normal;
  font-size: 14pt;
  margin-bottom: 0;
}

.end-summary {
  margin-bottom: 60px;
  text-align: left;
  max-width: 100%;
}

.end-summary p {
  color: var(--text-primary);
  font-size: 11pt;
  line-height: 1.8;
  margin-bottom: 20px;
  text-align: left;
}

.end-footer {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 600px;
  border-top: 1px solid var(--border-color);
  padding-top: 20px;
  text-align: center;
}

.end-footer p {
  color: var(--text-secondary);
  font-size: 10pt;
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.6;
}

.end-cover .end-content {
  position: relative;
  min-height: calc(100% - 100px);
  padding-bottom: 150px; /* Make space for the footer */
}

/* Additional spacing adjustments for perfect match */
.end-cover .end-header {
  margin-top: 0;
  margin-bottom: 50px;
}

.end-cover .end-content {
  padding-top: 0;
}

.end-cover .end-title h1 {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: left;
}

.end-cover .end-title h2 {
  margin-top: 0;
  margin-bottom: 0;
}

.end-cover .end-summary {
  margin-top: 0;
  margin-bottom: 70px;
}

.end-cover .end-summary p:first-child {
  margin-top: 0;
}

.end-cover .end-summary p:last-child {
  margin-bottom: 0;
}

.end-cover .end-footer {
  margin-top: 50px;
  margin-bottom: 0;
}

.end-cover .end-footer .end-logo {
  margin-top: 20px;
  margin-bottom: 0;
}

/* Table Header Group Display */
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
tbody { display: table-row-group; }

/* Page Break Controls */
.page-break { page-break-before: always; }

/* Reserve space for footer */
.violations-table-wrap {
  padding-bottom: 28mm;
}

/* Screen Styles (for preview) */
@media screen {
  body {
    background: #f0f0f0;
    padding: 20px;
  }
  
  .page-section {
    margin-bottom: 20px;
    box-shadow: var(--shadow-md);
  }
}

/* Print Optimizations */
@media print {
  @page {
    size: A4;
    margin: 0;
  }
  
  body {
    font-size: 11pt;
    line-height: 1.3;
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
    font-family: var(--font-family-bold);
    font-weight: normal;
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
  }
  
  h1 { font-size: 24pt; }
  h2 { font-size: 18pt; }
  h3 { font-size: 14pt; }
  h4 { font-size: 12pt; }
  h5 { font-size: 11pt; }
  h6 { font-size: 10pt; }
  
  p {
    margin-bottom: var(--spacing-md);
    font-size: 11pt;
    font-family: var(--font-family-primary);
  }
  
  .index-content {
    padding: var(--spacing-lg);
    overflow: visible; /* Allow content to flow */
    min-height: auto; /* Remove height constraints */
  }
  
  .index-content h2 {
    color: var(--text-primary);
    font-size: 18pt;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-xl);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
    font-family: var(--font-family-bold);
  }
  
  .index-content h2:first-child {
    margin-top: 0;
  }
  
  .index-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-lg) 0;
  }
  
  .index-content li {
    padding: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    position: relative;
    color: var(--text-secondary);
    font-size: 12pt;
    line-height: 1.5;
    border-bottom: 1px solid var(--border-light);
  }
  
  .index-content li:before {
    content: "•";
    color: var(--primary-color);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: var(--spacing-sm);
  }
  
  .index-content li:last-child {
    border-bottom: none;
  }
  
  /* Page Sections */
  .page-section {
    width: 210mm;
    height: 297mm;
    margin: 0 auto;
    padding: 20mm;
    page-break-after: always;
    position: relative;
    background: var(--background-white);
  }
  
  .page-section:last-child {
    page-break-after: avoid;
  }
  
  /* Page Footer */
  .page-footer {
    position: absolute;
    left: 20mm;
    right: 20mm;
    bottom: 20mm;
    border-top: 1px solid var(--border-color);
    padding-top: 8mm;
    font-size: 10pt;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    gap: 10mm;
  }
  
  .footer-content {
    display: flex;
    justify-content: space-between;
    gap: 10mm;
  }
  
  .footer-info {
    display: flex;
    gap: var(--spacing-lg);
  }
  
  .footer-info span {
    color: var(--text-secondary);
  }
  
  /* Cover Page */
  .cover-page {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--background-white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
  }
  
  .cover-page::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40mm;
    height: 40mm;
    background: var(--background-white);
    border-radius: 50% 0 0 0;
    transform: translate(50%, 50%);
  }
  
  .cover-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
    position: relative;
  }
  
  .cover-header {
    margin-bottom: var(--spacing-xl);
  }
  
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .header-logo {
    display: flex;
    align-items: center;
  }
  
  .header-logo img {
    filter: brightness(0) invert(1);
  }
  
  .cover-date {
    font-size: 10pt;
    opacity: 0.9;
    color: var(--background-white);
    font-family: var(--font-family-primary);
    font-weight: normal;
  }
  
  .cover-main {
    flex: 1;
    display: flex;
    align-items: center;
    padding: var(--spacing-xxl) 0;
  }
  
  .cover-title {
    max-width: 60%;
  }
  
  .cover-subtitle {
    font-size: 12pt;
    font-family: var(--font-family-primary);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--spacing-md);
    opacity: 0.8;
    color: var(--background-white);
  }
  
  .cover-main-title {
    font-size: 36pt;
    font-family: var(--font-family-bold);
    font-weight: normal;
    margin-bottom: var(--spacing-lg);
    line-height: 1.1;
    color: var(--background-white);
  }
  
  .cover-url {
    font-size: 14pt;
    opacity: 0.8;
    font-family: var(--font-family-primary);
    font-weight: 400;
    color: var(--background-white);
  }
  
  .cover-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-xl);
  }
  
  .cover-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
  }
  
  .url-input {
    font-size: 14pt;
    color: var(--background-white);
  }
  
  .end-url .url-input {
    font-size: 1.2rem;
    color: #666666;
    background: transparent;
    border: none;
    text-align: center;
    width: 100%;
    max-width: 500px;
    padding: 5px;
    font-family: inherit;
  }
  
  input, textarea {
    background-color: transparent;
    box-shadow: none;
    outline: none;
    border: none;
    resize: none;
    overflow: hidden;
    width: 100%;
    font-size: 12pt;
    font-family: var(--font-family-primary);
    font-weight: normal;
    color: var(--text-primary);
  }
  
  /* Hide footer on cover page */
  .cover-page .page-footer {
    display: block;
    position: absolute;
    bottom: 20mm;
    left: 20mm;
    right: 20mm;
    background: transparent;
    z-index: 1000;
  }
  
  .cover-page .page-footer .footer-content {
    color: var(--background-white);
  }
  
  .cover-page .page-footer .footer-info span {
    color: var(--background-white);
    opacity: 0.8;
  }
  
  /* Page Headers */
  .page-header {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--primary-color);
  }
  
  .header-brand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
  }
  
  .header-title {
    flex: 1;
  }
  
  .header-title h1 {
    margin-bottom: var(--spacing-xs);
    color: var(--primary-color);
    font-family: var(--font-family-bold);
    font-weight: normal;
    font-size: 24pt;
  }
  
  .header-subtitle {
    color: var(--text-secondary);
    font-size: 12pt;
    font-family: var(--font-family-primary);
    margin: 0;
  }
  
  .header-logo-small {
    flex-shrink: 0;
  }
  
  .header-logo-small img {
    max-width: 120px;
    height: auto;
  }
  
  /* Executive Overview */
  .executive-overview {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--background-light);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
  }
  
  .overview-content h2 {
    color: var(--primary-color);
    font-family: var(--font-family-bold);
    font-weight: normal;
    margin-bottom: var(--spacing-md);
  }
  
  .overview-description {
    color: var(--text-primary);
    font-size: 11pt;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    font-family: var(--font-family-primary);
  }
  
  .overview-description input[type="text"] {
    display: inline-block;
    min-width: 200px;
    font-size: 11pt;
    background: transparent;
    margin-left: 5px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    color: var(--text-primary);
    font-size: 11pt;
    line-height: 1.6;
    font-family: var(--font-family-primary);
  }
  
  .overview-description-1{
    color: var(--text-primary);
    font-size: 11pt;
    line-height: 1.5;
  }
  
  .overview-description- textarea{
    display: inline-block;
  }
  
  .overview-description-2{
    color: var(--text-primary);
    font-size: 13pt;
    line-height: 1.5;
    height: 30px !important;
  }
  
  /* Priority Actions */
  .priority-actions {
    margin-bottom: var(--spacing-xl);
  }
  
  .priority-actions h2 {
    color: var(--primary-color);
    font-family: var(--font-family-bold);
    font-weight: normal;
    margin-bottom: var(--spacing-lg);
  }
  
  .actions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .action-item {
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: var(--background-white);
    box-shadow: var(--shadow-sm);
  }
  
  .action-item.immediate {
    border-left: 4px solid var(--critical-color);
  }
  
  .action-item.high {
    border-left: 4px solid var(--serious-color);
  }
  
  .action-item.medium {
    border-left: 4px solid var(--moderate-color);
  }
  
  .action-item.low {
    border-left: 4px solid var(--pass-color);
  }
  
  .action-header {
    margin-bottom: var(--spacing-md);
  }
  
  .action-priority {
    display: inline-block;
    padding: 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    background-color: var(--critical-color);
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px;
    min-width: 100px;
    text-align: center;
  }
  
  select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding-right: 24px;
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px;
    min-width: 100px;
    text-align: center;
    outline: none;
  }
  
  select:focus,
  select:active,
  select:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--border-color);
  }
  
  /* Priority color variants */
  .action-priority[value="critical"] {
    background-color: var(--critical-color);
  }
  
  .action-priority[value="high"] {
    background-color: var(--serious-color);
  }
  
  .action-priority[value="medium"] {
    background-color: var(--moderate-color);
  }
  
  .action-priority[value="low"] {
    background-color: var(--pass-color);
  }
  
  /* Style the dropdown options */
  .action-priority option[value="critical"] {
    background-color: var(--critical-color);
    color: white;
  }
  
  .action-priority option[value="high"] {
    background-color: var(--serious-color);
    color: white;
  }
  
  .action-priority option[value="medium"] {
    background-color: var(--moderate-color);
    color: #000;
  }
  
  .action-priority option[value="low"] {
    background-color: var(--pass-color);
    color: white;
  }
  
  /* Remove default dropdown arrow in IE */
  .action-priority::-ms-expand {
    display: none;
  }
  
  /* Focus state */
  .action-priority:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
  }
  
  .action-item.immediate .action-priority {
    background: var(--critical-color);
    color: var(--background-white);
  }
  
  .action-item.high .action-priority {
    background: var(--serious-color);
    color: var(--background-white);
  }
  
  .action-item.medium .action-priority {
    background: var(--moderate-color);
    color: var(--text-primary);
  }
  
  .action-item.low .action-priority {
    background: var(--pass-color);
    color: var(--background-white);
  }
  
  .action-item h3 {
    color: var(--primary-color);
    font-family: var(--font-family-bold);
    font-weight: normal;
    margin-bottom: var(--spacing-sm);
    font-size: 14pt;
  }
  
  .description-2, .action-item p  {
    color: var(--text-secondary);
    font-size: 11pt;
    margin: 0;
  }
  
  /* Tags Section */
  .tags-section {
    margin-bottom: var(--spacing-xl);
  }
  
  .tags-section h2 {
    color: var(--primary-color);
    font-family: var(--font-family-bold);
    font-weight: normal;
    margin-bottom: var(--spacing-lg);
  }
  
  .tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }
  
  .tag {
    display: inline-block;
    padding: 6px 12px;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 9pt;
    font-weight: bold;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  /* Technical Details */
  .technical-details {
    margin-bottom: var(--spacing-xl);
  }
  
  .technical-details h2 {
    color: var(--primary-color);
    font-family: var(--font-family-bold);
    font-weight: normal;
    margin-bottom: var(--spacing-lg);
  }
  
  .details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
  }
  
  .detail-item {
    padding: var(--spacing-md);
    background: var(--background-light);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
  }
  
  .detail-label {
    font-size: 10pt;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
    font-weight: bold;
  }
  
  .detail-value {
    font-size: 11pt;
    color: var(--text-primary);
    font-weight: bold;
  }
  
  /* Metrics Dashboard */
  .metrics-dashboard {
    margin-bottom: var(--spacing-xl);
  }
  
  .metrics-dashboard h2 {
    color: var(--primary-color);
    font-family: var(--font-family-bold);
    font-weight: normal;
    margin-bottom: var(--spacing-lg);
  }
  
  .metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }
  
  .metric-card {
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: var(--background-white);
    box-shadow: var(--shadow-sm);
    text-align: center;
  }
  
  .metric-card.critical {
    border-left: 4px solid var(--critical-color);
  }
  
  .metric-card.serious {
    border-left: 4px solid var(--serious-color);
  }
  
  .metric-card.moderate {
    border-left: 4px solid var(--moderate-color);
  }
  
  .metric-card.minor {
    border-left: 4px solid var(--pass-color);
  }
  
  .metric-card.primary {
    border-left: 4px solid var(--primary-color);
  }
  
  .metric-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .metric-value {
    font-size: 24pt;
    font-family: var(--font-family-bold);
    font-weight: normal;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    text-align: center;
  }
  
  .metric-label {
    font-size: 10pt;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
  }
  
  /* WCAG Overview */
  .wcag-overview {
    margin-bottom: var(--spacing-xl);
  }
  
  .wcag-overview h2 {
    color: var(--primary-color);
    font-family: var(--font-family-bold);
    font-weight: normal;
    margin-bottom: var(--spacing-lg);
  }
  
  .wcag-overview-content {
    margin-bottom: var(--spacing-lg);
  }
  
  .wcag-overview-description {
    color: var(--text-primary);
    font-size: 11pt;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
  }
  
  .wcag-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }
  
  .wcag-level-card {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--background-white);
    overflow: hidden;
  }
  
  .wcag-level-header {
    background: var(--background-light);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
  }
  
  .wcag-level-header h3 {
    margin: 0;
    color: var(--primary-color);
    font-size: 12pt;
    text-align: center;
  }
  
  .wcag-level-count {
    padding: var(--spacing-lg);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px; 
  }
  
  .count-value {
    font-size: 24pt;
    font-family: var(--font-family-bold);
    font-weight: normal;
    color: var(--primary-color);
    text-align: center;
  }
  
  /* Page Content */
  .page-content {
    margin-bottom: var(--spacing-xl);
  }
  
  /* Violations Table */
  .violations-table-wrap {
    overflow-x: auto;
  }
  
  .violations-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-lg);
    font-size: 10pt;
  }
  
  .violations-table th {
    background: var(--background-light);
    color: var(--primary-color);
    font-weight: bold;
    text-align: left;
    padding: var(--spacing-md);
    border-bottom: 2px solid var(--primary-color);
    font-family: var(--font-family-bold);
  }
  
  .violations-table td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
  }
  
  .violations-table .violation-row.critical {
    background: rgba(220, 53, 69, 0.05);
  }
  
  .violations-table .violation-row.serious {
    background: rgba(253, 126, 20, 0.05);
  }
  
  .violations-table .violation-row.moderate {
    background: rgba(255, 193, 7, 0.05);
  }
  
  .violations-table .violation-row.minor {
    background: rgba(40, 167, 69, 0.05);
  }
  
  .col-num {
    text-align: center;
    font-weight: bold;
    color: var(--primary-color);
  }
  
  .col-details {
    min-width: 300px;
  }
  
  .detail-block {
    margin-bottom: var(--spacing-sm);
  }
  
  .detail-block .label {
    font-weight: bold;
    color: var(--text-secondary);
    min-width: 80px;
    display: inline-block;
  }
  
  .detail-block .value {
    color: var(--text-primary);
  }
  
  .detail-block .value.rule {
    font-weight: bold;
    color: var(--primary-color);
  }
  
  .urls-label {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
  }
  
  .urls-box {
    background: var(--background-light);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
  }
  
  .url-item {
    font-size: 9pt;
    color: var(--text-secondary);
    font-family: var(--font-family-mono);
    margin-bottom: var(--spacing-xs);
  }
  
  .url-item:last-child {
    margin-bottom: 0;
  }
  
  .col-instances {
    text-align: center;
    font-weight: bold;
  }
  
  .col-impact {
    text-align: center;
  }
  
  .impact-text {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    font-size: 9pt;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  .violation-row.critical .impact-text {
    background: var(--critical-color);
    color: var(--background-white);
  }
  
  .violation-row.serious .impact-text {
    background: var(--serious-color);
    color: var(--background-white);
  }
  
  .violation-row.moderate .impact-text {
    background: var(--moderate-color);
    color: var(--background-white);
  }
  
  .violation-row.minor .impact-text {
    background: var(--pass-color);
    color: var(--background-white);
  }
  
  /* Matrix4 Table Specific Styles */
  .violations-table.matrix4 {
    page-break-inside: auto;
    break-inside: auto;
  }
  
  .violations-table.matrix4 th,
  .violations-table.matrix4 td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
  }
  
  .violations-table.matrix4 thead {
    display: table-header-group;
  }
  
  .violations-table.matrix4 tbody.violation-group {
    display: table-row-group;
    page-break-inside: avoid;
    break-inside: avoid;
    -fs-page-break-inside: avoid;
    -fs-keep-together: always;
    -fs-page-break-min-height: 160px;
  }
  
  .violations-table.matrix4 tr.violation-row,
  .violations-table.matrix4 tr.violation-row > td {
    page-break-inside: avoid;
    break-inside: avoid;
    -fs-page-break-inside: avoid;
  }
  
  .violations-table.matrix4 td.col-num {
    width: 44px;
    text-align: center;
    font-weight: 700;
    color: var(--primary-color);
  }
  
  .violations-table.matrix4 td.col-details {
    width: auto;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  
  .violations-table.matrix4 td.col-instances {
    width: 96px;
    text-align: center;
    font-weight: 700;
    white-space: nowrap;
  }
  
  .violations-table.matrix4 td.col-impact {
    width: 120px;
    text-align: center;
  }
  
  .violations-table.matrix4 .detail-block {
    margin-bottom: 8px;
  }
  
  .violations-table.matrix4 .detail-block .label {
    font-weight: 700;
    color: var(--primary-color);
    margin-right: 6px;
  }
  
  .violations-table.matrix4 .detail-block .value {
    color: var(--primary-color);
  }
  
  .violations-table.matrix4 .detail-block .value.desc {
    color: var(--text-primary);
  }
  
  .violations-table.matrix4 .detail-block.urls-label {
    margin-top: 12px;
    margin-bottom: 6px;
    font-weight: 700;
    color: var(--primary-color);
  }
  
  .violations-table.matrix4 .urls-box {
    background: var(--background-light);
    padding: 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
  }
  
  .violations-table.matrix4 .urls-box .url-item {
    font-size: 11px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
    word-break: break-all;
    overflow-wrap: anywhere;
    page-break-inside: avoid;
    -fs-page-break-inside: avoid;
  }
  
  .violations-table.matrix4 .urls-box .url-item:last-child {
    border-bottom: 0;
  }
  
  .violations-table.matrix4 .urls-box .url-item.more {
    color: var(--text-secondary);
    font-style: italic;
  }
  
  /* Test Overview */
  .test-overview {
    margin-bottom: var(--spacing-xl);
  }
  
  .test-overview h2 {
    color: var(--primary-color);
    font-family: var(--font-family-bold);
    font-weight: normal;
    margin-bottom: var(--spacing-lg);
  }
  
  .overview-description {
    margin-bottom: var(--spacing-lg);
  }
  
  .overview-description p {
    color: var(--text-primary);
    font-size: 11pt;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
  }
  
  .results-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }
  
  .summary-item {
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background: var(--background-white);
    text-align: center;
  }
  
  .summary-item.passed {
    border-left: 4px solid var(--pass-color);
  }
  
  .summary-item.inapplicable {
    border-left: 4px solid var(--serious-color);
  }
  
  .summary-item.total {
    border-left: 4px solid var(--primary-color);
  }
  
  .summary-content h3 {
    color: var(--primary-color);
    font-size: 12pt;
    margin-bottom: var(--spacing-sm);
  }
  
  .summary-count {
    font-size: 24pt;
    font-family: var(--font-family-bold);
    font-weight: normal;
    color: var(--primary-color);
  }
  
  /* Passed Tests */
  .passed-tests {
    margin-bottom: var(--spacing-xl);
  }
  
  .passed-tests h2 {
    color: var(--primary-color);
    font-family: var(--font-family-bold);
    font-weight: normal;
    margin-bottom: var(--spacing-lg);
  }
  
  .category-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .category-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--background-light);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
  }
  
  .category-name {
    flex: 1;
    font-size: 11pt;
    color: var(--text-primary);
    font-weight: bold;
  }
  
  .category-bar {
    flex: 2;
    height: 20px;
    background: var(--border-color);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
  }
  
  .bar-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
  }
  
  .category-count {
    flex: 0 0 60px;
    text-align: right;
    font-size: 11pt;
    color: var(--primary-color);
    font-weight: bold;
  }
  
  /* End Cover */
  .end-cover {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    padding: 0;
  }
  
  .end-header {
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
  }
  
  .end-logo {
    margin-bottom: 0;
  }
  
  .end-date {
    font-size: 10pt;
    color: var(--text-secondary);
    font-family: var(--font-family-primary);
  }
  
  .end-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    padding-top: 20px;
  }
  
  .end-title {
    text-align: center;
    margin-bottom: 50px;
  }
  
  .end-title h1 {
    color: var(--primary-color);
    font-family: var(--font-family-bold);
    font-weight: normal;
    margin-bottom: 15px;
    font-size: 28pt;
  }
  
  .end-title h2 {
    color: var(--text-secondary);
    font-family: var(--font-family-primary);
    font-weight: normal;
    font-size: 14pt;
    margin-bottom: 0;
  }
  
  .end-summary {
    margin-bottom: 60px;
    text-align: left;
    max-width: 100%;
  }
  
  .end-summary p {
    color: var(--text-primary);
    font-size: 11pt;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: left;
  }
  
  .end-footer {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 600px;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    text-align: center;
  }
  
  .end-footer p {
    color: var(--text-secondary);
    font-size: 10pt;
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.6;
  }
  
  .end-cover .end-content {
    position: relative;
    min-height: calc(100% - 100px);
    padding-bottom: 150px; /* Make space for the footer */
  }
  
  /* Additional spacing adjustments for perfect match */
  .end-cover .end-header {
    margin-top: 0;
    margin-bottom: 50px;
  }
  
  .end-cover .end-content {
    padding-top: 0;
  }
  
  .end-cover .end-title h1 {
    margin-top: 0;
    margin-bottom: 20px;
  }
  
  .end-cover .end-title h2 {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  .end-cover .end-summary {
    margin-top: 0;
    margin-bottom: 70px;
  }
  
  .end-cover .end-summary p:first-child {
    margin-top: 0;
  }
  
  .end-cover .end-summary p:last-child {
    margin-bottom: 0;
  }
  
  .end-cover .end-footer {
    margin-top: 50px;
    margin-bottom: 0;
  }
  
  .end-cover .end-footer .end-logo {
    margin-top: 20px;
    margin-bottom: 0;
  }
  
  /* Table Header Group Display */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tbody { display: table-row-group; }
  
  /* Page Break Controls */
  .page-break { page-break-before: always; }
  

}