/* ============================================================ * DefCMS — Print / Save-as-PDF stylesheet * * (c) DefenTek Company — Riyadh, Saudi Arabia * https://defentek.sa | info@defentek.sa * * DefCMS is a proprietary CMS developed by DefenTek Company. * Unauthorized use, copying, redistribution or deployment is * strictly prohibited. * * Loaded on every page; rules only fire when the user prints * (or saves as PDF) — modern browsers print to PDF natively. * Add class `print-mode` to the to preview the layout * on screen. * ============================================================ */ /* ── Shared rules: apply both in @media print and .print-mode ─ */ .print-only { display: none !important; } @media print { /* Print page setup */ @page { size: A4; margin: 14mm 12mm 16mm 12mm; } @page :first { margin-top: 10mm; } /* Force white background, black text — saves ink, prints clean */ html, body { background: #fff !important; color: #111 !important; font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 11pt; line-height: 1.4; -webkit-print-color-adjust: exact; print-color-adjust: exact; } * { background: transparent !important; box-shadow: none !important; text-shadow: none !important; color: #111 !important; border-color: #ccc !important; } /* Hide all UI chrome */ nav, header, footer, .sidebar, .admin-sidebar, .academy-nav, .topbar, .admin-header, .nav-mobile-panel, .nav-hamburger, .a11y-bar, .a11y-panel, .page-actions, .page-header .page-actions, .btn, button, .btn-primary, .btn-secondary, .btn-outline, .pagination, .filter-bar, .search-box, .quick-actions, .quick-action, .dx-scroll-top, .dx-toast-container, .grid-bg, .hud-status-panel, .hud-telemetry, .footer-social, .empty-state .btn { display: none !important; } /* Reveal print-only elements */ .print-only { display: block !important; } .print-only-inline { display: inline !important; } /* Strip the layout so content flows full-width */ .main-content, .admin-content, .content, .dashboard-section, .container, main { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; display: block !important; } .admin-layout, .dashboard-grid, .ix-row, .dx-row, .dx-row-2, .dx-row-3, .trainee-charts-grid, .stats-grid, .dashboard-stats, .dx-stats-grid, .ix-stats-grid { display: block !important; grid-template-columns: none !important; } /* Cards become bordered blocks for paper */ .card, .panel, .dashboard-panel, .dx-stat-card, .ix-stat, .stat-card { page-break-inside: avoid; break-inside: avoid; border: 1px solid #ddd !important; border-radius: 4px !important; padding: 10px 14px !important; margin: 0 0 10px !important; background: #fff !important; } .card-header, .dashboard-panel-header { border-bottom: 1px solid #ddd !important; padding-bottom: 6px !important; margin-bottom: 8px !important; font-weight: 700; } /* Tables */ table { width: 100% !important; border-collapse: collapse !important; } .table, .data-table, .admin-table, .history-table { font-size: 9.5pt !important; } thead { display: table-header-group; } /* repeat headers on each page */ tr, td, th { page-break-inside: avoid; break-inside: avoid; } th, td { border: 1px solid #ccc !important; padding: 4px 6px !important; text-align: start; } thead th { background: #f3f3f3 !important; color: #111 !important; font-weight: 700; text-transform: none !important; } tbody tr:nth-child(even) td { background: #fafafa !important; } /* Headings */ h1, h2, h3, h4 { color: #000 !important; page-break-after: avoid; } h1 { font-size: 18pt; margin: 0 0 4mm; } h2 { font-size: 14pt; margin: 4mm 0 2mm; } h3 { font-size: 12pt; margin: 3mm 0 1mm; } /* Badges / chips become readable text */ .badge, .chip, .badge-status { background: transparent !important; border: 1px solid #888 !important; color: #000 !important; padding: 1px 6px !important; border-radius: 3px !important; font-size: 8pt !important; } .badge.success, .chip.success { border-color: #2e7d32 !important; color: #1b5e20 !important; } .badge.danger, .chip.danger, .badge.error, .chip.error { border-color: #c62828 !important; color: #b71c1c !important; } .badge.warning, .chip.warning { border-color: #ef6c00 !important; color: #e65100 !important; } .badge.info, .chip.info { border-color: #1565c0 !important; color: #0d47a1 !important; } .badge.primary, .chip.primary { border-color: #8d6e00 !important; color: #5a4400 !important; } /* Links don't get underlined chaos */ a { color: #000 !important; text-decoration: none !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; } a[href^="#"]::after, a[href^="javascript"]::after { content: ""; } /* Charts: SVG renders well by default; force decent print size */ svg { max-width: 100% !important; height: auto !important; page-break-inside: avoid; } /* DefenTek footer line appended to every print */ body::after { content: "DefCMS — © DefenTek Company, Riyadh, Saudi Arabia · defentek.sa"; display: block; position: fixed; bottom: 4mm; left: 0; right: 0; text-align: center; font-size: 8pt; color: #999; } } /* ── Print preview on screen — add class="print-mode" to ─ */ body.print-mode { background: #fff !important; color: #111 !important; padding: 2rem !important; max-width: 210mm; margin: 1rem auto !important; box-shadow: 0 0 18px rgba(0,0,0,.15) !important; border-radius: 6px; } body.print-mode * { color: #111 !important; } body.print-mode nav, body.print-mode .sidebar, body.print-mode .topbar, body.print-mode .academy-nav, body.print-mode .a11y-bar, body.print-mode .btn, body.print-mode .quick-actions, body.print-mode .pagination, body.print-mode .page-actions, body.print-mode .dx-scroll-top { display: none !important; } body.print-mode .card, body.print-mode .dashboard-panel { background: #fff !important; border: 1px solid #ddd !important; box-shadow: none !important; } body.print-mode table th { background: #f3f3f3 !important; } body.print-mode .badge, body.print-mode .chip { background: transparent !important; border: 1px solid #888 !important; } /* Pages built specifically for printing — already paper-shaped */ .print-document { max-width: 210mm; margin: 2rem auto; padding: 18mm 16mm; background: #fff; color: #111; box-shadow: 0 0 20px rgba(0,0,0,.10); border-radius: 4px; font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 11pt; line-height: 1.5; } .print-document h1 { font-size: 20pt; color: #C4A035; border-bottom: 2px solid #C4A035; padding-bottom: .5rem; margin-bottom: 1rem; } .print-document h2 { font-size: 13pt; color: #333; margin: 1.25rem 0 .5rem; border-bottom: 1px solid #ddd; padding-bottom: .25rem; } .print-document h3 { font-size: 11pt; color: #555; margin: .75rem 0 .35rem; } .print-document .pd-meta { display: grid; grid-template-columns: max-content 1fr; gap: .15rem 1rem; font-size: 10pt; margin-bottom: 1rem; } .print-document .pd-meta dt { font-weight: 600; color: #666; } .print-document table { width: 100%; border-collapse: collapse; font-size: 10pt; margin: .25rem 0 .5rem; } .print-document th, .print-document td { border: 1px solid #ddd; padding: 5px 8px; text-align: start; vertical-align: top; } .print-document thead th { background: #f3f3f3; font-weight: 700; } .print-document .pd-actions { margin-bottom: 1.25rem; display: flex; gap: .5rem; } .print-document .pd-actions a, .print-document .pd-actions button { display: inline-block; padding: .55rem 1rem; border-radius: 6px; border: 1px solid #C4A035; background: #C4A035; color: #fff; cursor: pointer; font-weight: 600; text-decoration: none; font-size: 10pt; } .print-document .pd-actions .pd-btn-secondary { background: #fff; color: #C4A035; } .print-document .pd-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #ddd; font-size: 9pt; color: #666; text-align: center; } @media print { .print-document { max-width: 100%; margin: 0; padding: 0; box-shadow: none; border-radius: 0; } .print-document .pd-actions { display: none !important; } }