/* ============================================================================
   THE DIGITAL COACH - OPTIMIZED PRINT STYLESHEET
   Professional A4 Document Printing for Productivity Methods
   ============================================================================ */

/* Import brand design tokens for print */
@media print {
  :root {
    /* Adapted color system for optimal print output */
    --print-color-background: #ffffff;
    --print-color-surface: #fafbfc;
    --print-color-text-primary: #000000;
    --print-color-text-secondary: #374151;
    --print-color-text-muted: #6b7280;
    --print-color-accent: #0E8192;
    --print-color-accent-dark: #075965;
    --print-color-accent-light: #e6f7f9;
    --print-color-border: #d1d5da;
    --print-color-border-light: #e5e7eb;
    
    /* Typography - Digital Coach font system */
    --print-font-family: 'Nunito', Georgia, 'Times New Roman', serif;
    --print-font-family-headings: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
    --print-font-weight-normal: 400;
    --print-font-weight-medium: 500;
    --print-font-weight-semibold: 600;
    --print-font-weight-bold: 700;
    
    /* Print-optimized font sizes */
    --print-font-size-xs: 9pt;
    --print-font-size-sm: 10pt;
    --print-font-size-base: 11pt;
    --print-font-size-md: 12pt;
    --print-font-size-lg: 14pt;
    --print-font-size-xl: 16pt;
    --print-font-size-2xl: 20pt;
    --print-font-size-3xl: 24pt;
    
    /* Line height for print readability */
    --print-line-height-tight: 1.3;
    --print-line-height-base: 1.6;
    --print-line-height-relaxed: 1.8;
    
    /* Spacing adapted for print */
    --print-space-xs: 2mm;
    --print-space-sm: 3mm;
    --print-space-md: 5mm;
    --print-space-lg: 8mm;
    --print-space-xl: 12mm;
    --print-space-2xl: 18mm;
  }
}

/* ============================================================================
   PAGE SETUP & CONFIGURATION
   ============================================================================ */

@page {
  size: A4;
  margin: 20mm 15mm 25mm 15mm;
  
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font-family: var(--print-font-family);
    font-size: var(--print-font-size-xs);
    color: var(--print-color-text-muted);
  }
  
  @top-center {
    content: string(doctitle);
    font-family: var(--print-font-family-headings);
    font-size: var(--print-font-size-xs);
    font-weight: var(--print-font-weight-semibold);
    color: var(--print-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  @top-left {
    content: "The Digital Coach";
    font-family: var(--print-font-family-headings);
    font-size: var(--print-font-size-xs);
    font-weight: var(--print-font-weight-bold);
    color: var(--print-color-accent);
  }
}

@page :first {
  margin-top: 30mm;
  @top-left { content: none; }
  @top-center { content: none; }
}

/* ============================================================================
   GLOBAL PRINT STYLES
   ============================================================================ */

@media print {
  
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  
  /* Remove animated backgrounds */
  body::before,
  body::after {
    display: none !important;
  }
  
  html {
    font-size: var(--print-font-size-base);
    line-height: var(--print-line-height-base);
  }
  
  body {
    font-family: var(--print-font-family);
    font-weight: var(--print-font-weight-normal);
    color: var(--print-color-text-primary);
    background: white !important;
    margin: 0;
    padding: 0;
    line-height: var(--print-line-height-base);
    text-rendering: optimizeLegibility;
  }
  
  /* ============================================================================
     APP-SPECIFIC ELEMENT HIDING
     ============================================================================ */
  
  /* Hide all navigation and interactive elements */
  #app > .loading-screen,
  #toast-container,
  .layout-container > .skip-link,
  .sidebar-nav,
  .mobile-header,
  .scroll-indicator-group,
  .scroll-progress-container,
  .sidebar-footer,
  .sidebar-reset,
  #sidebar-nav,
  #recommended-methods-nav-container,
  .main-nav,
  .recommended-methods-nav,
  .nav-info-text,
  .reset-button,
  .hero-actions,
  .button-group,
  .quiz-navigation,
  button.btn-secondary:not(.print-show),
  button.btn-link,
  button.btn-outline,
  .no-print {
    display: none !important;
  }
  
  /* ============================================================================
     TYPOGRAPHY - DIGITAL COACH BRANDED
     ============================================================================ */
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--print-font-family-headings);
    font-weight: var(--print-font-weight-bold);
    color: var(--print-color-text-primary);
    line-height: var(--print-line-height-tight);
    page-break-after: avoid;
    page-break-inside: avoid;
    orphans: 3;
    widows: 3;
    margin-top: var(--print-space-lg);
    margin-bottom: var(--print-space-md);
  }
  
  h1 {
    font-size: var(--print-font-size-3xl);
    string-set: doctitle content();
    border-bottom: 2pt solid var(--print-color-accent);
    padding-bottom: var(--print-space-sm);
    margin-bottom: var(--print-space-lg);
  }
  
  h2 {
    font-size: var(--print-font-size-2xl);
    color: var(--print-color-accent-dark);
    margin-top: var(--print-space-xl);
  }
  
  h3 {
    font-size: var(--print-font-size-xl);
    font-weight: var(--print-font-weight-semibold);
  }
  
  h4 {
    font-size: var(--print-font-size-lg);
    font-weight: var(--print-font-weight-semibold);
  }
  
  p {
    margin: 0 0 var(--print-space-md) 0;
    orphans: 3;
    widows: 3;
    text-align: justify;
    hyphens: auto;
  }
  
  .lead {
    font-size: var(--print-font-size-lg);
    line-height: var(--print-line-height-relaxed);
    color: var(--print-color-text-secondary);
    font-weight: var(--print-font-weight-medium);
    margin-bottom: var(--print-space-lg);
  }
  
  a {
    color: var(--print-color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  
  /* Show URLs only for external links */
  a[href^="http"]:not([href*="thedigitalcoach"]):not([href*="#"]):after {
    content: " (" attr(href) ")";
    font-size: var(--print-font-size-xs);
    color: var(--print-color-text-muted);
    word-break: break-all;
  }
  
  /* ============================================================================
     METHOD DETAILS OPTIMIZED LAYOUT
     ============================================================================ */
  
  /* Main content areas */
  #app,
  .layout-container,
  .main-content,
  #main-content,
  #app-root {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
    overflow: visible !important;
    height: auto !important;
  }
  
  /* Method details specific layout */
  .method-details-grid {
    display: block !important;
    margin: 0 !important;
  }
  
  .method-main-content,
  .method-sidebar-content {
    width: 100% !important;
    position: static !important;
    margin-bottom: var(--print-space-lg);
  }
  
  /* Reorder for print: sidebar content first for quick reference */
  .method-sidebar-content {
    page-break-after: avoid;
    margin-bottom: var(--print-space-xl);
  }
  
  /* Sidebar cards become highlighted boxes */
  .sidebar-card {
    background: var(--print-color-surface) !important;
    border: 2pt solid var(--print-color-accent) !important;
    border-radius: 8px;
    padding: var(--print-space-md);
    margin: var(--print-space-md) 0;
    page-break-inside: avoid;
  }
  
  .sidebar-card h3 {
    font-size: var(--print-font-size-lg);
    color: var(--print-color-accent-dark);
    margin-top: 0;
    margin-bottom: var(--print-space-sm);
  }
  
  .sidebar-card p,
  .sidebar-card li {
    font-size: var(--print-font-size-base);
    color: var(--print-color-text-primary);
  }
  
  .sidebar-card ul {
    margin: var(--print-space-sm) 0;
    padding-left: var(--print-space-lg);
  }
  
  /* ============================================================================
     EXPERIMENT TEMPLATE - WORKSHEET STYLE
     ============================================================================ */
  
  .sidebar-card:has(h3:contains("Your First Experiment")) {
    background: var(--print-color-accent-light) !important;
    border-width: 3pt !important;
    padding: var(--print-space-lg);
    margin: var(--print-space-xl) 0;
    page-break-before: auto;
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  
  /* ============================================================================
     VISUALIZATIONS
     ============================================================================ */
  
  /* Eisenhower Matrix Visualization */
  .eisenhower-matrix {
    width: 100% !important;
    height: auto !important;
    min-height: 150mm !important;
    page-break-inside: avoid;
    margin: var(--print-space-lg) 0;
  }
  
  .eisenhower-matrix svg {
    width: 100% !important;
    height: 150mm !important;
  }
  
  .eisenhower-matrix text {
    font-family: var(--print-font-family) !important;
    fill: var(--print-color-text-primary) !important;
  }
  
  .eisenhower-matrix rect {
    stroke: var(--print-color-border) !important;
    stroke-width: 1pt !important;
  }
  
  /* Placeholder visualizations */
  .placeholder-vis {
    border: 2pt dashed var(--print-color-border);
    background: var(--print-color-surface);
    padding: var(--print-space-lg);
    margin: var(--print-space-md) 0;
    page-break-inside: avoid;
    text-align: center;
  }
  
  .placeholder-vis-title {
    font-weight: var(--print-font-weight-semibold);
    font-size: var(--print-font-size-md);
    color: var(--print-color-accent-dark);
    margin-bottom: var(--print-space-sm);
  }
  
  .placeholder-vis-content {
    color: var(--print-color-text-secondary);
    font-size: var(--print-font-size-sm);
  }
  
  /* ============================================================================
     METHOD CONTENT SECTIONS
     ============================================================================ */
  
  .method-section {
    margin: var(--print-space-xl) 0;
    page-break-inside: avoid;
  }
  
  .method-section h2 {
    color: var(--print-color-accent-dark);
    border-bottom: 1pt solid var(--print-color-border-light);
    padding-bottom: var(--print-space-xs);
  }
  
  /* How-to steps */
  .steps-list,
  ol.steps-list {
    counter-reset: steps;
    list-style: none;
    padding-left: 0;
    margin: var(--print-space-md) 0;
  }
  
  .steps-list li {
    counter-increment: steps;
    position: relative;
    padding-left: var(--print-space-xl);
    margin-bottom: var(--print-space-md);
    page-break-inside: avoid;
  }
  
  .steps-list li::before {
    content: counter(steps);
    position: absolute;
    left: 0;
    top: 0;
    width: 24pt;
    height: 24pt;
    background: var(--print-color-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--print-font-weight-bold);
    font-size: var(--print-font-size-md);
  }
  
  /* Tips grid */
  .tips-grid {
    display: block;
    margin: var(--print-space-md) 0;
  }
  
  .tip-card {
    background: var(--print-color-surface);
    border-left: 4pt solid var(--print-color-accent);
    padding: var(--print-space-md);
    margin: var(--print-space-md) 0;
    page-break-inside: avoid;
  }
  
  .tip-card h4 {
    color: var(--print-color-accent-dark);
    margin-top: 0;
    margin-bottom: var(--print-space-xs);
  }
  
  .tip-card p {
    margin: 0;
    color: var(--print-color-text-secondary);
  }
  
  /* Coaching questions / Reflection prompts */
  .bullet-list {
    list-style: none;
    padding-left: 0;
    margin: var(--print-space-md) 0;
  }
  
  .bullet-list li {
    position: relative;
    padding-left: var(--print-space-lg);
    margin-bottom: var(--print-space-md);
    page-break-inside: avoid;
  }
  
  .bullet-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--print-color-accent);
    font-weight: var(--print-font-weight-bold);
    font-size: var(--print-font-size-lg);
  }
  
  /* ============================================================================
     QUIZ & ASSESSMENT RESULTS
     ============================================================================ */
  
  /* Quiz container */
  .quiz-container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Style result */
  .style-result {
    background: var(--print-color-accent-light) !important;
    border: 3pt solid var(--print-color-accent) !important;
    border-radius: 12px;
    padding: var(--print-space-xl);
    margin: var(--print-space-xl) 0;
    text-align: center;
    page-break-inside: avoid;
  }
  
  .style-icon {
    font-size: 48pt !important;
    margin-bottom: var(--print-space-md);
  }
  
  .style-name {
    font-size: var(--print-font-size-3xl);
    color: var(--print-color-accent) !important;
    margin-bottom: var(--print-space-md);
  }
  
  .style-description {
    font-size: var(--print-font-size-lg);
    color: var(--print-color-text-primary);
    max-width: none;
  }
  
  .style-traits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--print-space-sm);
    margin-top: var(--print-space-lg);
  }
  
  /* Radio options for forms */
  .radio-group {
    display: block;
    margin: var(--print-space-md) 0;
  }
  
  .radio-option {
    border: 1pt solid var(--print-color-border);
    padding: var(--print-space-sm);
    margin: var(--print-space-xs) 0;
    page-break-inside: avoid;
  }
  
  .radio-option.is-checked {
    background: var(--print-color-accent-light) !important;
    border: 2pt solid var(--print-color-accent) !important;
  }
  
  .radio-option input[type="radio"] {
    margin-right: var(--print-space-sm);
  }
  
  /* ============================================================================
     RECOMMENDED METHODS
     ============================================================================ */
  
  .recommended-method {
    background: var(--print-color-accent-light) !important;
    border: 3pt solid var(--print-color-accent) !important;
    border-radius: 8px;
    padding: var(--print-space-lg);
    margin: var(--print-space-xl) 0;
    page-break-inside: avoid;
    position: relative;
  }
  
  .recommended-badge {
    position: static !important;
    transform: none !important;
    display: inline-block;
    background: var(--print-color-accent) !important;
    color: white !important;
    padding: var(--print-space-xs) var(--print-space-sm);
    border-radius: 4px;
    font-size: var(--print-font-size-sm);
    font-weight: var(--print-font-weight-bold);
    margin-bottom: var(--print-space-md);
  }
  
  /* Method cards */
  .method-grid {
    display: block !important;
    margin: var(--print-space-md) 0;
  }
  
  .card {
    background: var(--print-color-background);
    border: 1pt solid var(--print-color-border);
    border-radius: 8px;
    padding: var(--print-space-md);
    margin: var(--print-space-md) 0;
    page-break-inside: avoid;
  }
  
  .card-interactive {
    border: 2pt solid var(--print-color-accent-light);
  }
  
  .method-name {
    font-size: var(--print-font-size-xl);
    color: var(--print-color-accent-dark);
    margin-bottom: var(--print-space-sm);
  }
  
  .method-summary {
    color: var(--print-color-text-secondary);
    font-size: var(--print-font-size-base);
    margin-bottom: var(--print-space-md);
  }
  
  .method-badge {
    display: inline-block;
    padding: 1mm 3mm;
    background: var(--print-color-surface) !important;
    color: var(--print-color-text-secondary) !important;
    border: 1pt solid var(--print-color-border);
    border-radius: 3px;
    font-size: var(--print-font-size-xs);
    font-weight: var(--print-font-weight-semibold);
    margin-right: var(--print-space-xs);
  }
  
  /* ============================================================================
     BADGES & SMALL COMPONENTS
     ============================================================================ */
  
  .badge,
  .badge-primary {
    display: inline-block;
    padding: 1mm 3mm;
    background: var(--print-color-surface) !important;
    color: var(--print-color-text-secondary) !important;
    border: 1pt solid var(--print-color-border);
    border-radius: 3px;
    font-size: var(--print-font-size-xs);
    font-weight: var(--print-font-weight-semibold);
  }
  
  .badge-primary {
    background: var(--print-color-accent-light) !important;
    color: var(--print-color-accent-dark) !important;
    border-color: var(--print-color-accent);
  }
  
  /* ============================================================================
     PAGE SECTIONS
     ============================================================================ */
  
  .hero-section {
    text-align: center;
    padding: var(--print-space-xl) 0;
    border-bottom: 2pt solid var(--print-color-accent);
    margin-bottom: var(--print-space-xl);
    page-break-after: avoid;
  }
  
  .hero-title {
    font-size: var(--print-font-size-3xl);
    background: none !important;
    -webkit-text-fill-color: var(--print-color-accent) !important;
    color: var(--print-color-accent) !important;
    margin-bottom: var(--print-space-md);
  }
  
  .hero-subtitle {
    font-size: var(--print-font-size-lg);
    color: var(--print-color-text-secondary);
    max-width: none;
  }
  
  .process-steps {
    display: block !important;
    margin: var(--print-space-xl) 0;
  }
  
  .step {
    page-break-inside: avoid;
    margin-bottom: var(--print-space-lg);
    padding: var(--print-space-md);
    border-left: 3pt solid var(--print-color-accent);
    text-align: left;
  }
  
  .step-number {
    display: inline-block;
    width: auto;
    height: auto;
    background: var(--print-color-accent) !important;
    color: white !important;
    padding: var(--print-space-xs) var(--print-space-sm);
    border-radius: 4px;
    font-weight: var(--print-font-weight-bold);
    margin-bottom: var(--print-space-sm);
  }
  
  .step-title {
    font-size: var(--print-font-size-lg);
    font-weight: var(--print-font-weight-semibold);
    color: var(--print-color-text-primary);
    margin-bottom: var(--print-space-xs);
  }
  
  .step-description {
    color: var(--print-color-text-secondary);
    font-size: var(--print-font-size-base);
  }
  
  /* Section headers */
  .section-header {
    text-align: center;
    margin-bottom: var(--print-space-xl);
    page-break-after: avoid;
  }
  
  .content-section {
    margin: var(--print-space-xl) 0;
  }
  
  .category-section {
    page-break-before: always;
    padding-top: 0 !important;
    border-top: none !important;
  }
  
  .category-section:first-child {
    page-break-before: avoid;
  }
  
  .category-title {
    font-size: var(--print-font-size-2xl);
    color: var(--print-color-accent-dark);
    text-align: center;
    margin-bottom: var(--print-space-lg);
  }
  
  /* ============================================================================
     UTILITIES
     ============================================================================ */
  
  .text-center { text-align: center !important; }
  .text-left { text-align: left !important; }
  .text-right { text-align: right !important; }
  .text-muted { color: var(--print-color-text-muted) !important; }
  
  .mt-md { margin-top: var(--print-space-md) !important; }
  .mt-lg { margin-top: var(--print-space-lg) !important; }
  .mt-xl { margin-top: var(--print-space-xl) !important; }
  
  /* ============================================================================
     PRINT-ONLY ELEMENTS
     ============================================================================ */
  
  .print-only {
    display: block !important;
  }
  
  /* Add method ID and print info */
  .method-details-grid::before {
    content: "Method ID: " attr(data-method-id) " | Printed: " attr(data-print-date);
    display: block;
    font-size: var(--print-font-size-xs);
    color: var(--print-color-text-muted);
    text-align: right;
    margin-bottom: var(--print-space-md);
    padding-bottom: var(--print-space-xs);
    border-bottom: 1pt solid var(--print-color-border-light);
  }
  
  /* Footer with branding */
  body::after {
    content: "© The Digital Coach | Personal Productivity System | thedigitalcoach.app";
    display: block;
    margin-top: var(--print-space-2xl);
    padding-top: var(--print-space-md);
    border-top: 1pt solid var(--print-color-border);
    font-size: var(--print-font-size-xs);
    color: var(--print-color-text-muted);
    text-align: center;
  }
  
  /* ============================================================================
     ACCESSIBILITY IN PRINT
     ============================================================================ */
  
  @media print and (prefers-contrast: high) {
    * {
      color: #000000 !important;
      background: #ffffff !important;
    }
    
    .card,
    .sidebar-card,
    .recommended-method,
    .style-result {
      border-width: 3pt !important;
      border-color: #000000 !important;
    }
  }
  
  /* Abbreviations */
  abbr[title]:after {
    content: " (" attr(title) ")";
    font-size: var(--print-font-size-xs);
    font-weight: var(--print-font-weight-normal);
  }
}