/* ═══════════════════════════════════════════════════════════════
   SURVEY REPORTS — Global Stylesheet
   ═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ────────────────────────────────────────────── */
:root {
  --color-navy:    #1a1a2e;
  --color-orange:  #fd7e14;
  --color-blue:    #1a76ff;
  --color-teal:    #17a2b8;
  --color-green:   #2ecc71;
  --color-red:     #e74c3c;
  --color-muted:   #6c757d;
  --color-border:  #dee2e6;
  --color-bg:      #f8f9fa;
  --radius-card:   12px;
  --shadow-card:   0 2px 12px rgba(0,0,0,0.07);
  --shadow-card-hover: 0 6px 24px rgba(0,0,0,0.12);
  --font-main:     'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-main);
  background-color: #ffffff;
  color: var(--color-navy);
  -webkit-font-smoothing: antialiased;
}

#body {
  margin: 10px 20px 20px 32px;
  font-family: var(--font-main);
  background-color: #ffffff;
  color: var(--color-navy);
  max-width: 100%;
}

/* ── Typography ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  color: var(--color-navy);
  font-weight: 700;
}

/* ── Cards ────────────────────────────────────────────────────── */
.card {
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  background: #ffffff;
  border: 1px solid var(--color-border) !important;
}

.card:hover {
  box-shadow: var(--shadow-card-hover) !important;
}

.card-body {
  padding: 16px 20px;
}

/* ── Section headers (orange accent bar) ─────────────────────── */
.section-header {
  display: flex;
  align-items: stretch;
  margin-bottom: 20px;
}

.section-header__bar {
  width: 4px;
  border-radius: 4px;
  background: var(--color-orange);
  margin-right: 12px;
  flex-shrink: 0;
}

/* ── KPI badge ────────────────────────────────────────────────── */
.badge {
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ── Plotly chart — hide toolbar on hover by default ─────────── */
.js-plotly-plot .plotly .modebar {
  opacity: 0;
  transition: opacity 0.2s;
}
.js-plotly-plot:hover .plotly .modebar {
  opacity: 1;
}

/* ── Dash debug menu — always hidden ─────────────────────────── */
.dash-debug-menu__content,
#dash-debug-menu__outer,
.dash-debug-menu__icon { display: none !important; }

/* ── Utilities ────────────────────────────────────────────────── */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottom { padding-bottom: 60px; }

.left {
  padding-top: 60px;
  padding-left: 15px;
  padding-bottom: 5px;
}

/* ── HR dividers ──────────────────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid #e9ecef;
  margin: 24px 0;
  opacity: 1;
}

/* ── Section title — orange accent bar (all reports) ─────────── */
.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-navy);
  border-left: 4px solid var(--color-orange);
  padding-left: 12px;
  margin-top: 0;
  margin-bottom: 12px;
  line-height: 1.4;
}

/* ── Report section wrapper — keeps content together on print ── */
.report-section {
  margin-bottom: 32px;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* ── Section divider hr — more breathing room between sections ─ */
hr.section-divider {
  border-top: 1.5px solid #e9ecef;
  margin: 28px 0;
}

/* ── Summary card rows ────────────────────────────────────────── */
.summary-row {
  padding: 6px 0;
  border-bottom: 1px solid #edf0f7;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.summary-row:last-child { border-bottom: none; }

/* ── Graph fade-in when populated ───────────────────────────────── */
.js-plotly-plot .plot-container {
  animation: plotFadeIn 0.35s ease-out;
}
@keyframes plotFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── dcc.Loading overlay sizing ────────────────────────────────── */
._dash-loading-callback { min-height: 120px; }

/* ── Report footer band ──────────────────────────────────────── */
.report-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0 16px 0;
  margin-top: 12px;
  border-top: 1.5px solid #e9ecef;
  background: linear-gradient(to bottom, #f9fafb, #ffffff);
}
.report-footer span {
  font-size: 0.78rem;
  color: #adb5bd;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.report-footer img { opacity: 0.75; }

/* ── DataTable — screen styles ────────────────────────────────── */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-header {
  background: var(--color-navy) !important;
  color: #ffffff !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 12px !important;
  border: none !important;
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.dash-cell {
  font-size: 0.875rem !important;
  padding: 7px 12px !important;
  border-bottom: 1px solid #f0f2f5 !important;
  color: var(--color-navy);
}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:nth-child(even) td.dash-cell {
  background-color: #f8f9fa !important;
}

/* ═══════════════════════════════════════════════════════════════
   PRINT STYLES — optimised for all report pages
   ═══════════════════════════════════════════════════════════════ */
@media print {

  /* Page setup */
  @page {
    size: A4 landscape;
    margin: 12mm 10mm 15mm 10mm;
  }

  /* Reset body & container */
  body, #body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 10pt;
  }

  /* Bootstrap containers */
  .container, .container-fluid {
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Force white backgrounds — no coloured panels */
  .card, .card-body,
  [style*="background"], [style*="background-color"] {
    background-color: #ffffff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Preserve coloured borders on cards */
  .card { box-shadow: none !important; border-width: 1.5pt !important; }

  /* Keep chart colours */
  svg, canvas { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Hide interactive / UI-only elements */
  .dash-debug-menu__content,
  #dash-debug-menu__outer,
  .dash-debug-menu__icon,
  .js-plotly-plot .plotly .modebar,
  .modebar,
  button,
  .btn,
  [role="button"] { display: none !important; }

  /* Hide <br> spacers — use margins instead for print density */
  br { display: none !important; }

  /* Preserve orange accent bars when printing */
  .section-title {
    border-left: 4px solid #fd7e14 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 10pt;
  }

  /* Keep section-divider visible */
  hr.section-divider {
    border-top: 1pt solid #dee2e6 !important;
    margin: 14px 0 !important;
  }

  /* report-section: honour page-break contract */
  .report-section {
    margin-bottom: 12px !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Summary card — keep blue accent visible */
  [style*="borderLeft: '4px solid #1a76ff'"],
  [style*="border-left: 4px solid #1a76ff"] {
    border-left: 4px solid #1a76ff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Page-break helpers */
  .card            { page-break-inside: avoid; break-inside: avoid; }
  .row             { page-break-inside: avoid; break-inside: avoid; }
  hr               { page-break-after: avoid;  break-after: avoid;  }

  /* Section headers — keep with following content */
  h1, h2, h3, h4, h5, h6,
  .section-header  { page-break-after: avoid; break-after: avoid; }

  /* Plotly graphs — force full width */
  .js-plotly-plot, .plot-container {
    width: 100% !important;
    height: auto !important;
    max-height: 260px;
    overflow: visible !important;
  }

  /* Charts in a 2-col row: stack to full width for print */
  .col-md-6, .col-md-4, .col-md-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Reduce paddings for print density */
  .card-body { padding: 8px 12px !important; }
  .mb-3      { margin-bottom: 8px !important; }

  /* Footer logo — page bottom */
  footer, [id$="footer"] { page-break-before: avoid; break-before: avoid; }

  /* DataTables */
  .dash-table-container {
    overflow: visible !important;
    font-size: 9pt;
  }
  .dash-table-container table {
    width: 100% !important;
    border-collapse: collapse;
  }
  .dash-table-container th,
  .dash-table-container td {
    border: 0.5pt solid #dee2e6 !important;
    padding: 4px 6px !important;
    page-break-inside: avoid;
  }

  /* KPI summary block — keep background tint when printing */
  [style*="#f8f9fa"] {
    background-color: #f8f9fa !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Badge colours */
  .badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border: 1pt solid currentColor;
  }

  /* Footer band — clean on print */
  .report-footer {
    border-top: 1pt solid #dee2e6 !important;
    background: transparent !important;
    padding: 8px 0 4px 0 !important;
    margin-top: 4px !important;
  }
  .report-footer img { opacity: 1 !important; }
  .report-footer span { color: #888 !important; font-size: 8pt; }

  /* Hide print button when printing */
  #print-btn { display: none !important; }
}