/* ============================================
   CoralLedger Manager - Professional Print Styles
   Sprint 3: Report Polish - UI/UX Roadmap
   ============================================ */

/* ===========================================
   PRINT RESET AND SETUP
   =========================================== */

@media print {
    /* Reset page setup */
    @page {
        size: A4 portrait;
        margin: 15mm 10mm 15mm 10mm;
    }

    @page :first {
        margin-top: 10mm;
    }

    @page landscape {
        size: A4 landscape;
        margin: 10mm 15mm 10mm 15mm;
    }

    /* Force background colors to print */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Reset body */
    html, body {
        font-size: 11pt !important;
        line-height: 1.4 !important;
        background: white !important;
        color: #000 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ===========================================
       HIDE UI ELEMENTS
       =========================================== */

    /* Navigation & UI chrome */
    .mud-drawer,
    .mud-appbar,
    .mud-drawer-content,
    .bottom-nav,
    .mud-dialog-container,
    .mud-snackbar-location-bottom-center,
    .mud-overlay,
    .mud-popover,
    nav,
    aside,
    footer:not(.print-footer) {
        display: none !important;
    }

    /* Interactive elements */
    .export-menu,
    .period-selector,
    .report-header-controls,
    .chart-legend .legend-item:not(:first-child)::before,
    button:not(.print-visible),
    .mud-button:not(.print-visible),
    .mud-icon-button,
    .mud-fab,
    .mud-menu,
    input[type="checkbox"],
    input[type="radio"],
    select,
    .mud-select,
    .mud-switch,
    .mud-tooltip,
    .sync-status,
    .connection-status,
    .notification-center {
        display: none !important;
    }

    /* Tooltips & popups */
    [role="tooltip"],
    .chart-tooltip,
    .tooltip {
        display: none !important;
    }

    /* ===========================================
       PAGE STRUCTURE
       =========================================== */

    .mud-main-content {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .page-content,
    .report-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ===========================================
       PRINT HEADER (Company Branding)
       =========================================== */

    .print-header {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        padding: 16pt 0 !important;
        margin-bottom: 16pt !important;
        border-bottom: 2pt solid #003566 !important;
    }

    .print-header-logo {
        font-size: 20pt !important;
        font-weight: 700 !important;
        color: #003566 !important;
        letter-spacing: 0.5pt;
    }

    .print-header-company {
        font-size: 11pt !important;
        color: #333 !important;
        margin-top: 4pt;
    }

    .print-header-report-title {
        font-size: 14pt !important;
        font-weight: 600 !important;
        color: #003566 !important;
        margin-top: 8pt;
    }

    .print-header-date {
        font-size: 9pt !important;
        color: #666 !important;
        margin-top: 4pt;
    }

    /* ===========================================
       REPORT TITLE & SECTIONS
       =========================================== */

    .report-header {
        margin-bottom: 16pt !important;
        padding-bottom: 8pt !important;
        border-bottom: 1pt solid #ccc !important;
    }

    .report-header h1,
    .report-header .mud-typography-h4 {
        font-size: 16pt !important;
        font-weight: 700 !important;
        color: #003566 !important;
        margin: 0 !important;
    }

    .report-section {
        margin-bottom: 20pt !important;
        page-break-inside: avoid;
    }

    .report-section-title {
        font-size: 12pt !important;
        font-weight: 600 !important;
        color: #003566 !important;
        border-bottom: 1pt solid #00B4D8 !important;
        padding-bottom: 4pt !important;
        margin-bottom: 10pt !important;
    }

    /* ===========================================
       METRIC CARDS
       =========================================== */

    .metric-cards-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8pt !important;
        margin-bottom: 16pt !important;
    }

    .metric-card {
        background: #f8f9fa !important;
        border: 1pt solid #dee2e6 !important;
        border-radius: 4pt !important;
        padding: 10pt !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    .metric-card-header {
        margin-bottom: 6pt !important;
    }

    .metric-card-icon {
        display: none !important;
    }

    .metric-card-value {
        font-size: 18pt !important;
        font-weight: 700 !important;
        color: #003566 !important;
    }

    .metric-card-label {
        font-size: 9pt !important;
        color: #666 !important;
    }

    .metric-card-trend {
        font-size: 8pt !important;
    }

    .metric-card-trend.up {
        color: #28a745 !important;
    }

    .metric-card-trend.down {
        color: #dc3545 !important;
    }

    /* ===========================================
       TABLES
       =========================================== */

    .report-table,
    .mud-table,
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 9pt !important;
        margin-bottom: 12pt !important;
        page-break-inside: auto;
    }

    .report-table thead,
    .mud-table thead {
        display: table-header-group !important;
    }

    .report-table th,
    .mud-table th,
    th {
        background: #003566 !important;
        color: white !important;
        padding: 6pt 8pt !important;
        text-align: left !important;
        font-weight: 600 !important;
        font-size: 9pt !important;
        border: 1pt solid #003566 !important;
    }

    .report-table td,
    .mud-table td,
    td {
        padding: 5pt 8pt !important;
        border: 0.5pt solid #dee2e6 !important;
        vertical-align: top !important;
    }

    .report-table tr:nth-child(even),
    .mud-table tr:nth-child(even) {
        background: #f8f9fa !important;
    }

    .report-table tfoot td,
    .mud-table tfoot td {
        background: #e9ecef !important;
        font-weight: 600 !important;
        border-top: 2pt solid #003566 !important;
    }

    /* Alignment helpers */
    .text-right,
    td.text-right,
    th.text-right {
        text-align: right !important;
    }

    .text-center,
    td.text-center,
    th.text-center {
        text-align: center !important;
    }

    /* Currency columns */
    td:last-child,
    .currency-column {
        font-family: 'Courier New', monospace !important;
    }

    /* ===========================================
       CHARTS
       =========================================== */

    .chart-card {
        background: white !important;
        border: 1pt solid #dee2e6 !important;
        border-radius: 4pt !important;
        padding: 12pt !important;
        margin-bottom: 16pt !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    .chart-card-header {
        margin-bottom: 10pt !important;
    }

    .chart-card-title {
        font-size: 11pt !important;
        font-weight: 600 !important;
        color: #003566 !important;
    }

    .chart-card-content,
    .chart-area {
        max-height: 200pt !important;
    }

    .chart-card svg,
    .trend-chart svg,
    .gauge-cluster svg {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Chart legend */
    .chart-legend {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8pt !important;
        margin-top: 8pt !important;
        padding-top: 6pt !important;
        border-top: 0.5pt solid #dee2e6 !important;
    }

    .legend-item {
        display: flex !important;
        align-items: center !important;
        gap: 4pt !important;
        font-size: 8pt !important;
    }

    .legend-color {
        width: 8pt !important;
        height: 8pt !important;
        border-radius: 2pt !important;
    }

    /* ===========================================
       HEATMAP CALENDAR
       =========================================== */

    .heatmap-calendar {
        page-break-inside: avoid;
    }

    .heatmap-grid .day-cell {
        width: 6pt !important;
        height: 6pt !important;
    }

    /* ===========================================
       GAUGE CLUSTER
       =========================================== */

    .gauge-cluster {
        page-break-inside: avoid;
    }

    .gauges-container {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8pt !important;
    }

    .gauge-item {
        padding: 8pt !important;
    }

    .gauge-visual {
        max-width: 80pt !important;
    }

    /* ===========================================
       COMPARISON/VARIANCE INDICATORS
       =========================================== */

    .variance-positive,
    .gauge-delta.positive {
        color: #28a745 !important;
        background: none !important;
    }

    .variance-negative,
    .gauge-delta.negative {
        color: #dc3545 !important;
        background: none !important;
    }

    /* ===========================================
       PAGE BREAKS
       =========================================== */

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

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

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

    /* Force new page for major sections */
    .report-section.major {
        page-break-before: always !important;
    }

    /* ===========================================
       PRINT FOOTER
       =========================================== */

    .print-footer {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 8pt 10mm;
        font-size: 8pt;
        color: #666;
        border-top: 0.5pt solid #dee2e6;
        background: white;
    }

    .print-footer-left {
        float: left;
    }

    .print-footer-right {
        float: right;
    }

    .print-footer-center {
        text-align: center;
    }

    /* ===========================================
       VAT COMPLIANCE SECTION
       =========================================== */

    .vat-compliance-section {
        background: #fff8e6 !important;
        border: 1pt solid #ffc107 !important;
        border-left: 4pt solid #ffc107 !important;
        border-radius: 4pt !important;
        padding: 10pt !important;
        margin-bottom: 16pt !important;
    }

    .vat-compliance-item {
        font-size: 9pt !important;
    }

    .vat-compliance-item.pass::before {
        content: '✓ ';
        color: #28a745;
    }

    .vat-compliance-item.fail::before {
        content: '✗ ';
        color: #dc3545;
    }

    /* ===========================================
       INVENTORY STATUS
       =========================================== */

    .stock-level-normal { color: #28a745 !important; }
    .stock-level-low { color: #ffc107 !important; }
    .stock-level-critical { color: #dc3545 !important; }
    .stock-level-out { color: #6c757d !important; }

    /* ===========================================
       EXECUTIVE SUMMARY BOX
       =========================================== */

    .executive-summary {
        background: #e3f2fd !important;
        border: 1pt solid #2196f3 !important;
        border-left: 4pt solid #2196f3 !important;
        border-radius: 4pt !important;
        padding: 12pt !important;
        margin-bottom: 16pt !important;
        page-break-inside: avoid;
    }

    .executive-summary-title {
        font-size: 12pt !important;
        font-weight: 600 !important;
        color: #1565c0 !important;
        margin-bottom: 8pt !important;
    }

    .executive-summary-content {
        font-size: 10pt !important;
        line-height: 1.5 !important;
    }

    /* ===========================================
       WATERMARK (Confidential, Draft, etc.)
       =========================================== */

    .print-watermark {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        font-size: 72pt;
        color: rgba(0, 0, 0, 0.05);
        white-space: nowrap;
        z-index: -1;
        pointer-events: none;
    }

    /* ===========================================
       TWO-COLUMN LAYOUT FOR PRINT
       =========================================== */

    .print-two-columns {
        column-count: 2 !important;
        column-gap: 20pt !important;
    }

    .print-two-columns > * {
        break-inside: avoid;
    }

    /* ===========================================
       SIGNATURE LINE
       =========================================== */

    .signature-line {
        display: flex !important;
        justify-content: space-between;
        margin-top: 40pt;
        padding-top: 20pt;
    }

    .signature-block {
        width: 45%;
    }

    .signature-block .line {
        border-top: 1pt solid #000;
        margin-bottom: 4pt;
    }

    .signature-block .label {
        font-size: 9pt;
        color: #666;
    }
}

/* ===========================================
   SCREEN STYLES FOR PRINT ELEMENTS
   (Hidden on screen, visible when printing)
   =========================================== */

.print-only,
.print-header,
.print-footer,
.print-watermark,
.signature-line {
    display: none !important;
}

/* Print preview mode class */
.print-preview .print-only,
.print-preview .print-header,
.print-preview .print-footer {
    display: block !important;
}

.print-preview .no-print,
.print-preview .export-menu,
.print-preview .period-selector {
    display: none !important;
}