/* ==========================================================================
   مَرصد (Marsad) — Dedicated Print Engine Stylesheet
   High-contrast, ink-friendly monochrome paper layout for executive reports.
   Complies with A4/Letter pagination, hides application chrome,
   and prevents unwanted breaks inside KPI cards, tables, and charts.
   ========================================================================== */

/* ── Screen Default: Hide Print-Only Elements ── */
.print-only,
.print-header-banner {
  display: none !important;
}

/* ── Print Media Rules ── */
@media print {
  /* Page Geometry & Marginalia */
  @page {
    size: A4 portrait;
    margin: 12mm 15mm 12mm 15mm;
  }

  /* Universal Box Sizing & Color Adjustments */
  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    text-shadow: none !important;
  }

  /* Document Canvas: Clean White Paper & Crisp Dark Ink */
  html,
  body {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111827 !important;
    font-family: "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 9.5pt !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* High Contrast Monochrome Variable Overrides */
  :root {
    --bg-app: #ffffff !important;
    --bg-surface: #ffffff !important;
    --bg-surface-raised: #f9fafb !important;
    --bg-surface-sunken: #f3f4f6 !important;
    --fg-default: #111827 !important;
    --fg-muted: #374151 !important;
    --fg-subtle: #4b5563 !important;
    --fg-faint: #6b7280 !important;
    --border-default: #d1d5db !important;
    --border-subtle: #e5e7eb !important;
    --accent: #111827 !important;
    --accent-subtle: #f3f4f6 !important;
    --bg: #ffffff !important;
    --card: #ffffff !important;
    --ink: #111827 !important;
    --muted: #374151 !important;
    --faint: #6b7280 !important;
    --border: #d1d5db !important;
    --grid: #e5e7eb !important;
    --card-bg: #ffffff !important;
    --card-border: #d1d5db !important;
  }

  /* ── 1. Hide Application Chrome, Modals, Toasts & Buttons ── */
  .sidebar,
  #app-sidebar,
  .sidebar-backdrop,
  .topbar,
  header.topbar,
  .menu-toggle,
  .nav-item,
  .nav-label,
  .side-foot,
  .login-wrap,
  .toast-wrap,
  .toast,
  .modal,
  .modal-backdrop,
  .modal-bg,
  .overlay,
  .marsad-zoom-overlay,
  .marsad-post-overlay,
  .marsad-export-overlay,
  .marsad-zoom-modal-overlay,
  #marsadZoomModal,
  #marsadPostModal,
  #marsad-zoom-modal,
  #marsad-export-modal,
  #cm-post-modal,
  #marsad-offline-banner,
  .mobile-bottom-nav,
  .bottom-nav,
  .export-dropdown-wrap,
  .export-dropdown-menu,
  .theme-switch,
  .view-switch,
  .no-print,
  [data-no-print],
  /* Action buttons and controls */
  .btn,
  button,
  .icon-btn,
  .chips,
  .chip,
  .input,
  .select,
  select,
  input,
  .tab-row,
  .seg,
  #modeSeg,
  [data-x],
  #refreshBtn,
  .action-group,
  .dropdown,
  .spacer,
  /* Hide the builder configuration panel when printing report */
  #view-builder > .card:first-child,
  .field,
  .input-icon-wrap,
  .modal-foot,
  .modal-head button,
  /* Empty states */
  .empty {
    display: none !important;
  }

  /* ── 2. Full-Width Container Expansion ── */
  .shell,
  .main,
  .content,
  #main-content,
  #view-builder,
  #view-channels,
  #view-reports,
  #view-schedules,
  #view-admins,
  #view-settings,
  #reportOut {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    position: static !important;
    grid-template-columns: none !important;
  }

  /* ── 3. Printable Header Banner ── */
  .print-header-banner {
    display: block !important;
    padding-bottom: 10pt !important;
    margin-bottom: 14pt !important;
    border-bottom: 2pt solid #111827 !important;
  }

  .print-header-banner .brand-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 4pt !important;
  }

  .print-header-banner .brand-title {
    font-size: 16pt !important;
    font-weight: 700 !important;
    color: #111827 !important;
    font-family: "Noto Naskh Arabic", "IBM Plex Sans Arabic", serif !important;
  }

  .print-header-banner .meta-row {
    font-size: 8.5pt !important;
    color: #4b5563 !important;
    display: flex !important;
    justify-content: space-between !important;
  }

  /* ── 4. KPI Cards & Summary Tiles ── */
  .card,
  .tile,
  .kpi-card,
  .chart-card,
  .stat-box,
  .dist-row,
  .marsad-zoom-kpi-card {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin-bottom: 10pt !important;
    padding: 8pt 10pt !important;
    border-radius: 4pt !important;
  }

  /* Ensure KPI Grid remains side-by-side on printed paper */
  .tiles,
  .grid-4,
  [style*="grid-template-columns: repeat(4"] {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8pt !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin-bottom: 12pt !important;
  }

  /* ── 5. ECharts & Visualization Containers ── */
  .chart-box,
  .chart-card,
  [id^="chart-"] {
    width: 100% !important;
    max-width: 100% !important;
    height: 220pt !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    margin-bottom: 12pt !important;
  }

  .chart-box svg,
  [id^="chart-"] svg,
  .chart-box canvas,
  [id^="chart-"] canvas {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* ── 6. Channel Blocks & Sections ── */
  .chan-block,
  .channel-section,
  #comparativeSection {
    page-break-inside: auto !important;
    break-inside: auto !important;
    margin-bottom: 20pt !important;
    padding-bottom: 12pt !important;
    border-bottom: 1px dashed #9ca3af !important;
  }

  .chan-block:last-child {
    border-bottom: none !important;
  }

  /* Section Title in Print */
  h2, h3, h4 {
    color: #111827 !important;
    font-family: "Noto Naskh Arabic", "IBM Plex Sans Arabic", serif !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
    margin-top: 8pt !important;
    margin-bottom: 4pt !important;
  }

  /* ── 7. Data Tables & Breakdowns ── */
  .table-wrap {
    box-shadow: none !important;
    border: 1px solid #d1d5db !important;
    overflow: visible !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
    margin-bottom: 12pt !important;
  }

  table {
    width: 100% !important;
    border-collapse: collapse !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
    font-size: 8.5pt !important;
  }

  thead {
    display: table-header-group !important;
  }

  tbody {
    page-break-inside: auto !important;
    break-inside: auto !important;
  }

  tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: auto !important;
    break-after: auto !important;
  }

  th,
  td {
    border-bottom: 1px solid #e5e7eb !important;
    padding: 4pt 6pt !important;
    color: #111827 !important;
    text-align: right !important;
  }

  th {
    background-color: #f3f4f6 !important;
    font-weight: 600 !important;
    color: #000000 !important;
    border-bottom: 1.5pt solid #9ca3af !important;
  }

  /* Numeric Isolation */
  bdi {
    unicode-bidi: isolate !important;
    direction: ltr !important;
    display: inline-block !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* Pill & Tag Badges */
  .pill,
  .badge,
  .tag {
    border: 1px solid #9ca3af !important;
    background: #f3f4f6 !important;
    color: #111827 !important;
    font-size: 7.5pt !important;
    padding: 1pt 4pt !important;
  }

  /* Print Footer Citation */
  .print-footer {
    display: block !important;
    margin-top: 18pt !important;
    padding-top: 8pt !important;
    border-top: 1px solid #e5e7eb !important;
    font-size: 8pt !important;
    color: #6b7280 !important;
    text-align: center !important;
  }
}