:root {
  --primary-color: #2e7d32;
  /* Green for energy/sustainability */
  --secondary-color: #f1f8e9;
  --text-color: #333;
  --border-color: #ddd;
  --bg-color: #f9f9f9;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  background-color: var(--primary-color);
  color: white;
  padding: 1rem 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header img.logo {
  height: 50px;
  width: auto;
  margin-right: 1rem;
  background-color: white;
  /* Add white background for better visibility if logo has transparency or needs contrast */
  padding: 5px;
  border-radius: 4px;
}

h1 {
  margin: 0;
  font-size: 1.5rem;
}

.main-container {
  display: flex;
  flex: 1;
  padding: 2rem;
  gap: 2rem;
  overflow: hidden;
  /* Prevent body scroll, let panels scroll */
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.panel {
  flex: 1;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.panel-header {
  padding: 1rem;
  background-color: #fff;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-title {
  font-weight: 600;
  color: var(--primary-color);
  margin: 0;
}

.panel-content {
  padding: 1.5rem;
  overflow: auto;
  flex: 1;
  /* Removed align-items: center to prevent text shifting. Pages center themselves with margin: auto */
  display: block;
  background-color: #dcdcdc;
  /* Darker gray to contrast with white A4 pages */
}

/* Checklist Styling */
.category-group {
  margin-bottom: 2rem;
}

.category-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #555;
  border-bottom: 2px solid var(--secondary-color);
  padding-bottom: 0.5rem;
}

.checklist-item {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  transition: all 0.2s ease;
}

.checklist-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(46, 125, 50, 0.1);
}

.item-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.item-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.item-label {
  font-weight: 500;
  flex: 1;
  user-select: none;
}

.item-details {
  margin-top: 0.75rem;
  padding-left: 2rem;
  /* Indent to align with text */
  display: none;
  /* Hidden by default until checked */
}

/* Enforce hiding if not checked */
.checklist-item:not(.checked) .item-details {
  display: none !important;
}

.checklist-item.checked .item-details {
  display: block;
}

.checklist-item.checked {
  background-color: var(--secondary-color);
  border-color: var(--primary-color);
}

.comment-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 2.5rem;
  box-sizing: border-box;
}

.comment-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.value-input-container,
.item-details>div {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
  /* Allow wrapping on small screens */
}

/* Force labels to NOT shrink and have enough space */
.item-details label {
  width: 120px !important;
  /* Increased from 80px */
  min-width: 120px;
  flex-shrink: 0;
  white-space: nowrap;
}

.value-input {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  width: auto;
  min-width: 100px;
  max-width: 100%;
  font-size: 1.1rem;
  text-align: right;
}

/* Report Preview Styling */
#report-preview {
  white-space: pre-wrap;
  line-height: 1.6;
  color: #222;
  font-size: 1rem;
}

.report-section {
  margin-bottom: 1.5rem;
}

.report-section-title {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  color: #444;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.25rem;
}

.btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.btn:hover {
  background-color: #1b5e20;
}

/* Page header styling - hidden in browser, used for PDF headers */
.page-header {
  display: none;
}

.page-header>div:last-child {
  text-align: right;
  margin-left: auto;
}

/* Print Styling */
@media print {

  /* Unset margins so we control everything */
  @page {
    margin: 0;
  }

  html,
  body {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: white !important;
    height: auto !important;
    min-height: auto !important;
    width: 100% !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide UI elements explicitly */
  .preview-header,
  .left-panel,
  .panel-header,
  .btn,
  header,
  .checklist-container,
  #checklist-container,
  .comment-input,
  .value-input {
    display: none !important;
  }

  /* Reset layout for print */
  .main-container {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .panel,
  .panel.right-panel {
    display: block !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .panel-content {
    padding: 0 !important;
    padding-top: 0 !important;
    /* Extra top padding for the fixed header */
  }

  /* Ensure report preview is visible and distinct */
  #report-preview {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    color: black !important;
  }

  /* Repeating header for print - FORCE display */
  /* OLD Fixed Header - REMOVED for Table Approach */
  .page-header {
    display: none !important;
  }

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

  /* CRITICAL FOR PDF EXPORT: Unlock all containers */
  html,
  body,
  .main-container,
  .right-panel,
  #report-preview {
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    position: static !important;
  }
}

/* Cover Page Styles */
/* Cover Page Styles & Report Section (Identical Layout) */
.cover-page,
.report-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* LEFT ALIGN CONTENT */
  min-height: 29.7cm;
  /* A4 height approx */
  position: relative;
  box-sizing: border-box;
  padding-bottom: 2cm;
  /* Bottom margin */
}

/* Specific Override for Report Section to pull header higher */
.report-section {
  padding-top: 0.5cm !important;
}

/* Spacer for the fixed header */
.header-spacer {
  display: none;
  /* Removed to reduce cover page height */
}

/* Hero Image Section */
.cover-hero {
  height: 200px;
  /* Reduced to save vertical space */
  min-height: 200px;
  width: 100%;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid #ddd;
  display: block;
}

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

/* Content Section (Title + Details) */
.cover-content {
  text-align: left;
  flex-grow: 1;
  display: block;
  width: 100%;
  margin-top: 0;
  padding-left: 0;
}

.cover-content h1 {
  font-size: 1.6em;
  /* Slightly smaller */
  margin-bottom: 0.3rem;
  /* Very tight */
  color: #000;
}

.cover-details {
  font-size: 1.1em;
  line-height: 1.1;
  /* Very compact */
}

.cover-details p {
  margin: 0;
  padding: 0;
  margin-bottom: 0;
  /* Zero margin */
}

.cover-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  /* Force left alignment */
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100%;
  margin-top: auto;
  padding-top: 2rem;
}

.cover-coach {
  font-size: 1.1em;
  text-align: left !important;
  align-self: flex-start !important;
  width: 100%;
}

.page-number {
  display: none;
  /* Removed as requested */
}

/* Adjustments for Print */
@media print {

  .cover-page,
  .report-section {
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    padding-bottom: 2rem;
    align-items: normal !important;
    /* Reset alignment */
  }

  .cover-footer {
    display: block !important;
  }

  .page-number {
    margin-top: 1rem;
  }
}

@media print {

  .preview-header,
  .browser-only-header {
    display: none !important;
  }

  table {
    width: 100% !important;
  }

  thead {
    display: table-header-group !important;
  }

  tbody {
    display: table-row-group !important;
  }

  tr {
    page-break-inside: auto !important;
  }

  .print-header-content {
    display: flex !important;
    visibility: visible !important;
    /* Re-add styling that was global */
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-bottom: 5px;
    border-bottom: 2px solid #000;
    margin-bottom: 20px;
  }

  .cover-hero {
    display: block !important;
  }
}

/* GLOBAL HEADER STYLE to ensure visibility everywhere */
.print-header-content {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 5px;
  border-bottom: 2px solid #000;
  margin-bottom: 20px;
  visibility: visible !important;
  /* Ensure it is visible on screen ! */
}

/* Page Break Visualization & A4 Simulation */
.print-page-break {
  display: block;
}

@media screen {

  /* BACKGROUND */
  .right-panel {
    display: block;
    padding: 2rem;
    background: #f0f0f0;
    /* Grey background to make pages pop */
    overflow-y: auto;
  }

  /* A4 PAGE SIMULATION */
  .cover-page,
  .report-section {
    width: 100%;
    min-height: auto;
    margin: 0;
    padding: 1rem;
    background: white;
    box-shadow: none;
    box-sizing: border-box;
    display: block;
    text-align: left;

    /* Ensure content stays inside */
    overflow: hidden;
  }

  /* RESET CHILD WIDTHS */
  .cover-page *,
  .report-section * {
    max-width: 100%;
  }
}

/* =========================================
   USER REQUESTED PRINT STYLES (FINAL RULES)
   ========================================= */
@media print {
  @page {
    size: A4;
    margin: 0;
  }

  /* 1. Linkerkolom (display: none) */
  .left-panel,
  .panel-header,
  header,
  .header-spacer,
  .btn {
    display: none !important;
  }

  /* 2. Rechterkolom (width: 100%) */
  html,
  body,
  .main-container,
  .right-panel,
  #report-preview {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    display: block !important;
    float: none !important;
    position: static !important;
    overflow: visible !important;
    height: auto !important;
  }

  .main-container {
    max-width: none !important;
  }

  .panel {
    border: none !important;
    box-shadow: none !important;
  }

  /* 3. Fontgrootte (12pt) en Uitlijning (Links) */
  body,
  #report-preview,
  .report-section,
  p,
  li,
  td,
  th,
  div {
    font-size: 12pt !important;
    line-height: 1.5;
    text-align: left !important;
  }

  /* 4. Allow Natural Breaks (was smart breaks) */
  .report-section,
  .cover-page,
  table,
  tr,
  img,
  .checklist-item {
    break-inside: auto;
    page-break-inside: auto;
  }

  .print-header-content {
    padding-bottom: 5px;
    border-bottom: 2px solid #000;
    margin-bottom: 20px;
  }

  /* Force A4 Size on Cover Page */
  .cover-page {
    width: 210mm;
    min-height: auto;
    padding: 10mm 20mm 20mm 20mm;
    /* Reduced TOP margin to 10mm */
    margin: 0;
    page-break-after: auto;
  }

  /* Report Section should NOT be forced to typically one page height if it's long.
     It should flow defined by content, but width is A4. 
     The PAGE settings handle the paper size. */
  .report-section {
    width: 100%;
    /* Table inside handles width */
    min-height: auto;
    /* Let it flow */
    padding: 0;
    /* Let table handle padding/margins via spacer if needed, or set page margins */
    margin: 0;
    page-break-after: auto;
    /* Don't force break after every section container if not needed */
    display: block;
  }

  /* Table margins for print */
  .report-section table {
    margin: 10mm 20mm 20mm 20mm;
    /* Reduced TOP margin to 10mm */
    /* Simulate page margins */
    width: calc(100% - 40mm) !important;
  }
}