/* Printer-friendly styles for Dash app */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  #print-button {
    display: none !important;
  }
  .epri-logo {
    max-width: 150px;
    margin-bottom: 10px;
  }
  /* Hide navigation, help, and other non-essential UI */
  #help-popover-target, .popover, .navbar, .footer {
    display: none !important;
  }
  /* Make charts fit page width */
  .dash-graph {
    width: 100% !important;
  }
  
  /* Prevent page breaks within the chart */
  #cost-chart, #cost-chart > *, .dash-graph, .chart-container {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-before: auto !important;
    page-break-after: auto !important;
  }
  
  /* Keep chart container and its contents together */
  .chart-container {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 20px !important;
  }
  
  .chart-container * {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  
  /* Reduce chart height for print to fit better */
  #cost-chart {
    height: 300px !important;
    max-height: 300px !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Ensure the plotly graph doesn't overflow */
  .js-plotly-plot, .plotly, .plot-container {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    position: relative !important;
    z-index: 1 !important;
  }
  
  /* Consolidated table styles */
  table {
    width: 100% !important;
    font-size: 9pt !important;
    table-layout: fixed !important;
    position: relative !important;
    z-index: 5 !important;
    margin-top: 20px !important;
    clear: both !important;
    border-collapse: collapse !important;
  }
  
  /* Ensure table headers are visible and on top */
  table thead, table thead th {
    position: static !important;
    z-index: 10 !important;
    background-color: #fff !important;
    page-break-after: avoid !important;
  }
  
  /* Ensure table headers don't get hidden */
  table thead tr {
    display: table-header-group !important;
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
  }
  
  /* Add proper spacing and clear floats */
  .chart-container + .row, .row:has(table) {
    margin-top: 20px !important;
    clear: both !important;
    display: block !important;
    position: relative !important;
  }
  
  /* Ensure table cells maintain proper width and alignment */
  table th, table td {
    padding: 3px !important;
    font-size: 8pt !important;
    overflow: visible !important;
    word-wrap: break-word !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure header cells have same alignment as body cells */
  table thead th {
    padding: 3px !important;
    vertical-align: middle !important;
  }
  
  /* First two columns (row headers) */
  table th:nth-child(1), table td:nth-child(1) {
    width: 18% !important;
    text-align: left !important;
  }
  
  table th:nth-child(2), table td:nth-child(2) {
    width: 14% !important;
    text-align: left !important;
  }
  
  /* Equipment columns - 5 columns sharing 68% (13.6% each) */
  table th:nth-child(3), table td:nth-child(3) {
    width: 13.6% !important;
    text-align: center !important;
  }
  
  table th:nth-child(4), table td:nth-child(4) {
    width: 13.6% !important;
    text-align: center !important;
  }
  
  table th:nth-child(5), table td:nth-child(5) {
    width: 13.6% !important;
    text-align: center !important;
  }
  
  table th:nth-child(6), table td:nth-child(6) {
    width: 13.6% !important;
    text-align: center !important;
  }
  
  table th:nth-child(7), table td:nth-child(7) {
    width: 13.6% !important;
    text-align: center !important;
  }
  
  /* Ensure header row equipment columns are centered */
  table thead th:nth-child(n+3) {
    text-align: center !important;
  }
  
  /* Remove background colors for print */
  [style*="background-color"] {
    background-color: #fff !important;
  }
  
  /* Ensure no overlapping content */
  .row {
    clear: both !important;
    position: relative !important;
  }
}