/* ==========================================================================
   GazeTo — Print Stylesheet
   Used by browser's print-to-PDF for Progress + Results pages.
   Optimized for A4, 2-3 pages max, therapeutic-report style.
   ========================================================================== */

/* Hide the JS-injected print header on screen — it's only for the PDF.
   Lives outside @media print so it applies during normal viewing too,
   in case the header flashes briefly between insertion and window.print(). */
.print-only-header {
  display: none;
}

@media print {

  /* ── Page setup ── */
  @page {
    size: A4 portrait;
    margin: 12mm 14mm 14mm 14mm;
  }

  /* ── Aggressive whitespace reset ──
     Kills the leading vertical gap that was caused by min-height/padding on
     screen wrappers and parent containers. */
  html, body, #app, #app-content, main {
    background: #ffffff !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body {
    font-size: 10.5pt;
    line-height: 1.4;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Force light theme even if dark mode active */
  body[data-theme="dark"], body[data-theme="dark"] * {
    background: #ffffff !important;
    color: #1a1a1a !important;
  }

  /* ── Hide app chrome + interactive controls ── */
  .bottom-nav,
  .skip-link,
  #activity-fullscreen,
  .runner-pause,
  .runner-back,
  .pwa-install-banner,
  .pwa-install-card,
  #pwa-install-card,
  #pwa-install-btn,
  #aria-status,
  #aria-alert,
  .gaze-cursor,
  .gaze-trail,
  .dwell-ring,
  .no-print,
  button.no-print,
  .progress-export-btn,
  .help-overlay,
  .toast,
  .filter-bar,
  .results-actions,
  .recommendation-card .btn,
  .recommendation-card button,
  [class*="jetzt-uben"],
  .help-box,
  .recent-action,
  .help-overlay,
  .bottom-nav__item,
  .statusbar,
  #statusbar,
  .app-footer,
  #app-footer {
    display: none !important;
  }

  /* CTA buttons inside cards (e.g. "Jetzt üben") become text labels */
  .recommendation-card .btn--primary,
  .recommendation-card a.btn,
  .recommendations .btn--primary {
    display: none !important;
  }

  /* ── Container resets ── */
  .screen,
  .progress-dashboard,
  .screen-results,
  .screen-results--compact {
    max-width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    gap: 0 !important;
  }

  /* Inline-grid children fall back to flow */
  .screen-results > *,
  .screen-results--compact > *,
  .progress-dashboard > * {
    grid-area: auto !important;
  }

  /* Show hidden details/analytics that are normally collapsed */
  details, details[open] {
    display: block !important;
  }
  details > summary {
    list-style: none;
    cursor: default !important;
    pointer-events: none !important;
  }

  /* Suppress the screen-level "Ergebnis" h1 — replaced by injected header */
  .screen-results > .screen-title,
  .screen-results--compact > .screen-title {
    display: none !important;
  }

  /* Suppress old ::before placeholders — replaced by structured JS header */
  .screen-results::before,
  .screen-results--compact::before,
  .progress-dashboard::before {
    display: none !important;
    content: "" !important;
  }

  /* ════════════════════════════════════════════════════════════════════
     Injected Print Header (from JS)
     ──────────────────────────────────────────────────────────────────── */

  .print-only-header {
    display: block !important;
    margin: 0 0 8pt 0 !important;
    padding: 0 0 6pt 0 !important;
    border-bottom: 2pt solid #4b698c !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  /* ── Logo row in print header ── */
  .print-only-header .print-brand-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 0 6pt 0 !important;
  }
  .print-only-header .print-brand-logo {
    width: 28pt !important;
    height: 28pt !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }
  .print-only-header .print-brand-text {
    flex: 1 !important;
    padding: 0 8pt !important;
  }
  .print-only-header .print-brand-name {
    font-family: var(--f-display, 'Merriweather', serif) !important;
    font-weight: 900 !important;
    font-size: 13pt !important;
    color: #1a2d45 !important;
    line-height: 1.1 !important;
  }
  .print-only-header .print-brand-sub {
    font-size: 8pt !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 600 !important;
  }
  .print-only-header .print-assistuk-logo {
    height: 18pt !important;
    width: auto !important;
    max-width: 80pt !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    opacity: 0.85 !important;
  }

  /* Legacy: keep backward-compat if old header markup ever appears */
  .print-only-header .print-brand {
    font-size: 9pt;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin: 0 0 2pt 0;
  }
  .print-only-header .print-brand span {
    color: #9ca3af;
    font-weight: 500;
  }

  .print-only-header .print-title {
    margin: 2pt 0 6pt 0 !important;
    font-size: 18pt !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    line-height: 1.15 !important;
    page-break-after: avoid !important;
  }

  .print-only-header .print-description {
    margin: 0 0 6pt 0 !important;
    font-size: 10pt !important;
    color: #4b5563 !important;
    line-height: 1.45 !important;
    font-style: italic;
  }

  .print-only-header .print-meta {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4pt;
    font-size: 9.5pt;
  }
  .print-only-header .print-meta th {
    text-align: left;
    color: #6b7280;
    font-weight: 600;
    padding: 1pt 8pt 1pt 0;
    width: 18%;
    white-space: nowrap;
  }
  .print-only-header .print-meta td {
    text-align: left;
    color: #1a1a1a;
    font-weight: 600;
    padding: 1pt 16pt 1pt 0;
    width: 32%;
  }
  .print-only-header .print-intro {
    margin-top: 8pt;
    padding: 8pt 10pt;
    background: #f4f6fa;
    border-left: 3pt solid #4b698c;
    border-radius: 3pt;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .print-only-header .print-intro strong {
    display: block;
    font-size: 10.5pt;
    color: #1a3a6a;
    margin-bottom: 3pt;
  }
  .print-only-header .print-intro p {
    margin: 0;
    font-size: 9.5pt;
    line-height: 1.5;
    color: #374151;
  }

  /* ════════════════════════════════════════════════════════════════════
     Generic typography + cards
     ──────────────────────────────────────────────────────────────────── */

  h1, h2, h3, h4 {
    page-break-after: avoid;
    break-after: avoid;
    color: #1a1a1a !important;
  }
  h1 { font-size: 15pt; }
  h2 { font-size: 12pt; margin-top: 8pt; }
  h3 { font-size: 11pt; }
  h4 { font-size: 10pt; }

  /* Sections / cards */
  section, article,
  .stufe-card, .session-row, .recommendation-card,
  .progress-dashboard > section,
  .progress-dashboard > article {
    page-break-inside: avoid;
    break-inside: avoid;
    box-shadow: none !important;
    background: #ffffff !important;
    border: 1pt solid #d1d5db !important;
    border-radius: 4pt !important;
    margin: 0 0 6pt 0 !important;
    padding: 6pt 8pt !important;
  }

  /* Tables / lists allow page-break */
  table, .timeline-list, .sessions-timeline,
  .sessions-list, [class*="sessions"] {
    page-break-inside: auto;
    break-inside: auto;
  }

  /* Brand-coloured pills/badges keep their tint */
  .badge, .badge--stufe, .stufe-pill,
  .competence-pill, .detail-goal-pill,
  [class*="kompetenz"] {
    border: 1pt solid currentColor !important;
    background: transparent !important;
    padding: 1pt 5pt !important;
    border-radius: 9999pt !important;
  }

  /* ════════════════════════════════════════════════════════════════════
     Results-specific
     ──────────────────────────────────────────────────────────────────── */

  /* Celebration block (emoji + stars + feedback) */
  .results-celebration {
    page-break-inside: avoid;
    text-align: left !important;
    padding: 0 !important;
    margin-bottom: 6pt !important;
  }
  .results-emoji {
    font-size: 18pt !important;
    line-height: 1 !important;
  }
  .results-stars {
    font-size: 14pt !important;
    color: #f59e0b !important;
    justify-content: flex-start !important;
    margin: 2pt 0 !important;
  }
  .results-stars .results-star { color: #d1d5db !important; }
  .results-stars .results-star--filled { color: #f59e0b !important; }

  .results-feedback,
  .results-feedback-text,
  .results-celebration p {
    font-size: 10.5pt !important;
    color: #1a1a1a !important;
    margin: 2pt 0 !important;
  }

  /* Heatmap canvas */
  .results-heatmap,
  [class*="heatmap-section"] {
    background: transparent !important;
    page-break-inside: avoid;
  }
  .screen-results canvas,
  .results-heatmap__canvas {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    border: 1pt solid #d1d5db !important;
    border-radius: 4pt !important;
    margin: 4pt 0 !important;
    page-break-inside: avoid;
  }

  /* Metrics cards row */
  .metrics-grid,
  [style*="grid-area:metrics"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6pt !important;
    page-break-inside: avoid;
    margin: 4pt 0 !important;
  }
  .metrics-grid > *,
  .results-metric,
  .metric-card {
    background: #f9fafb !important;
    border: 1pt solid #d1d5db !important;
    padding: 4pt 6pt !important;
    text-align: center !important;
  }
  .results-metric .metric-value,
  .metric-card .value,
  [class*="metric"] [class*="value"] {
    font-size: 14pt !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
  }
  .results-metric .metric-label,
  .metric-card .label {
    font-size: 9pt !important;
    color: #6b7280 !important;
  }

  /* Detailed-analysis block */
  .results-analytics,
  [style*="grid-area:analytics"] {
    display: block !important;
    margin-top: 4pt !important;
  }
  .results-analytics details,
  [style*="grid-area:analytics"] details {
    border: 1pt solid #d1d5db !important;
    padding: 6pt 8pt !important;
    margin-top: 4pt !important;
    background: #ffffff !important;
  }
  .results-analytics summary,
  [style*="grid-area:analytics"] summary {
    font-weight: 700 !important;
    font-size: 11pt !important;
    margin-bottom: 4pt !important;
  }
  .results-analytics summary i,
  [style*="grid-area:analytics"] summary i {
    display: none !important;
  }

  /* ── Analytics page-break control ──
     Keep logical blocks intact: if a block would split across a page boundary,
     push the WHOLE block to the next page instead of tearing it apart. */

  /* "Bereiche besucht" 3×3 grid — never split */
  .zone-grid-section,
  .zone-grid {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* "Seitenverteilung" bar + label — keep together */
  .side-bias-section {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Fatigue indicator box — keep together */
  .fatigue-indicator {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Section headers stick to the content that follows them */
  .analytics-section-title,
  .analytics-section-explain,
  .zone-grid-title {
    page-break-after: avoid !important;
    break-after: avoid !important;
    page-break-inside: avoid !important;
  }

  /* A metric row + its explanation must stay together as one unit.
     They are siblings in the DOM, so: never break inside a row, and never
     break right after a row (which would orphan it from its explanation). */
  .metric-row {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
  .metric-row__explanation {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-before: avoid !important;
    break-before: avoid !important;
    margin-bottom: 6pt !important;
  }

  /* ════════════════════════════════════════════════════════════════════
     Progress-specific
     ──────────────────────────────────────────────────────────────────── */

  /* Re-Diagnostik banner — keep visible but compact */
  [class*="re-diag"],
  [class*="banner"] {
    page-break-inside: avoid;
    background: #fef3c7 !important;
    border-left: 3pt solid #f59e0b !important;
  }
  [class*="re-diag"] button,
  [class*="banner"] button {
    display: none !important;
  }

  /* Profile header block */
  [class*="profile-header"] {
    page-break-inside: avoid;
  }

  /* Therapeutic cycle stepper */
  [class*="stepper"] {
    page-break-inside: avoid;
  }

  /* Stufe grid — show as 2 columns on print, all stufen visible */
  .stufen-grid,
  [class*="stufen-grid"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6pt !important;
  }
  .stufen-grid > *,
  [class*="stufen-grid"] > * {
    page-break-inside: avoid;
  }

  /* Recommendations */
  .recommendations,
  [class*="recommendation"] {
    page-break-inside: avoid;
  }
  .recommendation-card img,
  [class*="recommendation"] img {
    max-width: 60pt !important;
    max-height: 60pt !important;
  }

  /* Sessions timeline */
  .sessions-timeline,
  [class*="sessions"] {
    border: 1pt solid #d1d5db !important;
    padding: 4pt 6pt !important;
  }
  .session-row,
  [class*="session-row"] {
    border: none !important;
    border-bottom: 0.5pt solid #f3f4f6 !important;
    padding: 2pt 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  /* Stars in session list — make actually visible */
  .session-row [class*="star"],
  [class*="session"] [class*="star"] {
    color: #f59e0b !important;
    font-size: 9pt !important;
  }

  /* Conic-gradient donuts — fallback for browsers that drop them in print */
  [style*="conic-gradient"] {
    border: 1pt solid #d1d5db !important;
  }

  /* Help box at bottom — drop entirely */
  [class*="help-box"],
  [class*="help-info"] {
    display: none !important;
  }

  /* ════════════════════════════════════════════════════════════════════
     Footer + Page numbering
     ──────────────────────────────────────────────────────────────────── */

  @page {
    @bottom-right {
      content: counter(page) " / " counter(pages);
      font-size: 8pt;
      color: #9ca3af;
    }
    @bottom-left {
      content: "GazeTo Bericht";
      font-size: 8pt;
      color: #9ca3af;
    }
  }

  /* Make links printable but unobtrusive */
  a, a:visited {
    color: #1a1a1a !important;
    text-decoration: none !important;
  }
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #9ca3af;
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after,
  a[role="button"]:after {
    content: "";
  }
}