/**
 * Print Styles
 * Designed by: Amit Haridas, ConcreteInfo
 * 
 * Usage: Add class="print-only" to elements that should only show in print
 * Add class="no-print" to elements that should be hidden in print
 */

@media print {
    /* Hide non-print elements */
    .no-print,
    .sidebar,
    .topbar,
    .bottom-nav,
    .btn,
    .theme-toggle,
    nav,
    footer,
    .modal,
    .modal-backdrop,
    .sidebar-overlay,
    .page-header__actions,
    .action-buttons {
        display: none !important;
    }

    /* Reset colors for print */
    body {
        background: white !important;
        color: #464646 !important;
        font-size: 12pt;
        line-height: 1.5;
        margin: 0;
        padding: 20px;
    }

    /* Content wrapper adjustments */
    .content-wrapper {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    .main-content {
        padding: 0 !important;
    }

    /* Card styling for print */
    .card,
    .stat-card,
    .action-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        page-break-inside: avoid;
        margin-bottom: 15px;
    }

    /* Table styling for print */
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: var(--color-brand) !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Header for print */
    .print-header {
        display: block !important;
        text-align: center;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--color-brand);
    }

    .print-header h1 {
        font-size: 18pt;
        margin: 0 0 5px;
        color: var(--color-brand) !important;
    }

    .print-header p {
        font-size: 10pt;
        margin: 0;
        color: #666 !important;
    }

    /* Watermark */
    .print-watermark {
        display: block !important;
        text-align: center;
        font-size: 9pt;
        color: #999 !important;
        margin-top: 20px;
        padding-top: 10px;
        border-top: 1px solid #eee;
    }

    /* Page breaks */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }

    img, table, figure {
        page-break-inside: avoid;
    }

    /* Links */
    a {
        color: black !important;
        text-decoration: none !important;
    }

    /* Only append URLs for external links — internal paths and anchors
       would clutter mix design reports with noise like "(#results)" */
    a[href^="http"]:after,
    a[href^="https"]:after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #666;
    }

    a[href^="/"]:after,
    a[href^="#"]:after,
    a[href^="javascript"]:after {
        content: none;
    }

    /* Mix design report specific */
    .mix-design-report {
        max-width: 100%;
    }

    .mix-design-report .section {
        margin-bottom: 20px;
        page-break-inside: avoid;
    }

    .mix-design-report .section-title {
        font-size: 14pt;
        font-weight: bold;
        color: #464646;
        border-bottom: 2px solid var(--color-brand);
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

    /* Results table */
    .results-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 15px;
    }

    .results-table th {
        background-color: var(--color-brand) !important;
        color: #fff !important;
        font-weight: bold;
    }

    /* Badge styling for print */
    .badge {
        border: 1px solid currentColor;
        padding: 2px 6px;
        font-size: 10pt;
    }
}

/* Print-only elements (hidden on screen) */
.print-only {
    display: none !important;
}

@media print {
    .print-only {
        display: block !important;
    }
}

/* Screen-only elements (hidden in print) */
@media screen {
    .screen-only {
        display: block !important;
    }
}

@media print {
    .screen-only {
        display: none !important;
    }
}