/* ═══════════════════════════════════════════════════════════════════
   APPEX360 UNIVERSAL PRINT STYLESHEET — Platform Standard v1.0
   ═══════════════════════════════════════════════════════════════════
   Single reusable print stylesheet for every APPEX360 workspace.
   No page-specific print CSS. All workspaces consume this file.
   
   Consumption: included via require_tree . in application.css manifest.
   Every layout automatically gets print support.
   ═══════════════════════════════════════════════════════════════════ */

@media print {
  /* ═════════════════════════════════════════════════════════════════
     PAGE SETUP — @page rules for margins and running headers
     ═════════════════════════════════════════════════════════════════ */
  @page {
    margin: 20mm 16mm 22mm 16mm;
    size: A4 portrait;

    @top-left {
      content: "";
      font-size: 9pt;
      color: #666;
    }

    @top-center {
      content: "";
      font-size: 9pt;
      color: #666;
    }

    @top-right {
      content: "";
      font-size: 9pt;
      color: #666;
    }

    @bottom-left {
      content: "APPEX360";
      font-size: 8pt;
      color: #999;
    }

    @bottom-center {
      content: "Page " counter(page) " of " counter(pages);
      font-size: 9pt;
      color: #666;
    }

    @bottom-right {
      content: "";
      font-size: 8pt;
      color: #999;
    }
  }

  @page :first {
    @top-left { content: ""; }
    @top-center { content: ""; }
    @top-right { content: ""; }
  }

  /* ═════════════════════════════════════════════════════════════════
     BASE — print-specific defaults
     ═════════════════════════════════════════════════════════════════ */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  html {
    font-size: 11pt;
  }

  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.5;
    color: #1a1a1a !important;
    background: white !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     HIDE — UI chrome that should never appear in print
     ═════════════════════════════════════════════════════════════════ */
  nav, .navbar, nav *, .navbar *,
  .sidebar, .side-nav, .side-bar,
  footer, .footer-nav, .site-footer,
  button, .btn, .ds-btn, .ds-btn-primary, .ds-btn-secondary, .ds-btn-ghost,
  input, select, textarea,
  .fixed, .sticky, [style*="position: fixed"], [style*="position: sticky"],
  .dropdown, .dropdown-content, [class*="dropdown"],
  .modal, .dialog, [class*="modal"],
  .toast, .notification-toast, .flash-message,
  .search-bar, [class*="search"], [class*="filter"],
  .pagination, [class*="pagination"],
  .action-bar, .toolbar, [class*="action-bar"],
  #pageLoader, #helpDrawer, #help-overlay,
  .screenshot-deterrent, .scroll-to-top,
  .global-nav, .top-nav, .bottom-nav,
  .badge-count, .notification-badge,
  .no-print,
  .export-dropdown, [data-controller="export"],
  [class*="sidebar"], [class*="navbar"],
  iframe, .llamapress-chat, [id*="llama"] {
    display: none !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     SHOW — print-only content (metadata header & footer)
     ═════════════════════════════════════════════════════════════════ */
  .print-only {
    display: block !important;
  }

  .print-header {
    display: block !important;
    text-align: left;
    padding-bottom: 8pt;
    margin-bottom: 12pt;
    border-bottom: 2pt solid #1a1a1a;
  }

  .print-header .print-logo {
    font-size: 14pt;
    font-weight: 800;
    color: #1a1a1a !important;
    margin: 0 0 4pt 0;
  }

  .print-header .print-meta {
    font-size: 8pt;
    color: #666 !important;
    margin: 0;
    line-height: 1.6;
  }

  .print-footer {
    display: block !important;
    text-align: center;
    padding-top: 8pt;
    margin-top: 12pt;
    border-top: 1pt solid #ccc;
    font-size: 8pt;
    color: #999 !important;
  }

  .print-footer .print-classification {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* ═════════════════════════════════════════════════════════════════
     TYPOGRAPHY — print-optimised heading sizes
     ═════════════════════════════════════════════════════════════════ */
  h1 { font-size: 18pt; margin: 0 0 8pt; page-break-after: avoid; }
  h2 { font-size: 14pt; margin: 12pt 0 6pt; page-break-after: avoid; }
  h3 { font-size: 12pt; margin: 10pt 0 4pt; page-break-after: avoid; }
  h4 { font-size: 11pt; margin: 8pt 0 4pt; }
  p { margin: 0 0 6pt; orphans: 3; widows: 3; }
  a { color: #1a1a1a !important; text-decoration: underline; }
  strong, b { font-weight: 700; }

  /* ═════════════════════════════════════════════════════════════════
     CARDS — collapse to simple bordered containers
     ═════════════════════════════════════════════════════════════════ */
  .exec-card, .ds-kpi-card, .ds-glass, .card, .apex-card,
  [class*="card"], [class*="kpi-card"], [class*="exec-card"],
  [class*="glass-card"], [class*="ds-kpi"] {
    border: 1pt solid #ccc !important;
    border-radius: 4pt !important;
    padding: 10pt !important;
    margin: 0 0 8pt !important;
    background: white !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ═════════════════════════════════════════════════════════════════
     KPIs — keep colored values, flatten backgrounds
     ═════════════════════════════════════════════════════════════════ */
  .ds-kpi-value, .exec-kpi, .exec-kpi-medium, .exec-kpi-small,
  .kpi-value, .stat-value,
  [class*="kpi-value"], [class*="stat-value"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .ds-kpi-label, .exec-label, [class*="kpi-label"], [class*="metric-label"] {
    color: #666 !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     GRIDS — collapse to single column on narrow paper
     ═════════════════════════════════════════════════════════════════ */
  .exec-grid-2, .exec-grid-4, [class*="grid"],
  [style*="display: grid"], [style*="display:grid"] {
    display: block !important;
  }

  .exec-grid-2 > *, .exec-grid-4 > *,
  [class*="grid"] > *,
  [style*="display: grid"] > *, [style*="display:grid"] > * {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 8pt;
  }

  /* Allow 2-column layout for wide-enough cards */
  .print-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10pt !important;
  }
  .print-grid-2 > * {
    margin-bottom: 0 !important;
  }

  .print-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8pt !important;
  }
  .print-grid-4 > * {
    margin-bottom: 0 !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     TABLES — full width with visible borders
     ═════════════════════════════════════════════════════════════════ */
  table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 8pt 0;
    font-size: 9pt;
  }

  th, td {
    padding: 4pt 6pt !important;
    border: 1pt solid #ccc !important;
    text-align: left;
  }

  th {
    background: #f5f5f5 !important;
    font-weight: 700;
  }

  tr {
    page-break-inside: avoid;
  }

  /* ═════════════════════════════════════════════════════════════════
     CHARTS & VISUALS — preserve with safeguards
     ═════════════════════════════════════════════════════════════════ */
  canvas, svg, img, .chart, [class*="chart"], [class*="graph"] {
    max-width: 100% !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  canvas {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     PAGE BREAKS — manual control classes
     ═════════════════════════════════════════════════════════════════ */
  .page-break, .print-page-break {
    page-break-before: always !important;
    break-before: page !important;
  }

  .page-break-after {
    page-break-after: always !important;
    break-after: page !important;
  }

  .avoid-break {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     OVERFLOW — ensure nothing is clipped
     ═════════════════════════════════════════════════════════════════ */
  * { overflow: visible !important; }

  /* ═════════════════════════════════════════════════════════════════
     UTILITY — preserve colored badges and status indicators
     ═════════════════════════════════════════════════════════════════ */
  [class*="badge"], [class*="tag"], [class*="status"],
  [class*="score"], [class*="ring"], [class*="gauge"],
  [class*="trend"], .trend-up, .trend-down, .trend-flat {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .trend-up { color: #10b981 !important; }
  .trend-down { color: #ef4444 !important; }
  .trend-flat { color: #6b7280 !important; }

  /* ═════════════════════════════════════════════════════════════════
     PROGRESS BARS — flatten to visible widths
     ═════════════════════════════════════════════════════════════════ */
  .exec-bar, .progress-bar, [class*="progress"] {
    border: 1pt solid #ccc !important;
    border-radius: 3pt !important;
    background: #f5f5f5 !important;
  }

  .exec-bar-fill, .progress-fill, [class*="bar-fill"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     FORMS — hide form controls that aren't printable
     ═════════════════════════════════════════════════════════════════ */
  form, .form-group, [class*="form-"] {
    display: none !important;
  }

  /* Exception: show .print-show-form for printable forms */
  .print-show-form form,
  .print-show-form .form-group {
    display: block !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     PRINT PREVIEW — watermark for draft/preview state
     ═════════════════════════════════════════════════════════════════ */
  .print-draft-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 48pt;
    font-weight: 900;
    color: rgba(200, 200, 200, 0.3) !important;
    pointer-events: none;
    z-index: 9999;
  }
}