/**
 * Print Base Styles
 * 
 * Core print rules that apply to all print templates.
 * Ensures exact color reproduction and removes browser chrome.
 */

/* ============================================
   Reset & Base
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12pt;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

/* ============================================
   Print-Specific Rules
   ============================================ */

@media print {
    /* Force exact colors - critical for print accuracy */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    
    /* Remove any browser-added margins */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Hide debug overlays when printing */
    .debug-overlay {
        display: none !important;
    }
    
    /* Hide screen-only elements */
    .screen-only {
        display: none !important;
    }
    
    /* Prevent page breaks inside elements */
    .print-page {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

/* ============================================
   Print Page Container
   ============================================ */

.print-page {
    position: relative;
    overflow: hidden;
    background: white;
}

/* ============================================
   Content Zones
   ============================================ */

.bleed-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.trim-area {
    position: absolute;
    overflow: hidden;
}

.safe-zone {
    position: absolute;
    overflow: hidden;
}

.mailing-panel {
    position: absolute;
    background: white;
    z-index: 100; /* Ensure nothing overlaps */
}

/* ============================================
   Debug Overlay System
   ============================================ */

.debug-overlay {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
}

.debug-overlay.bleed-guide {
    border: 2px dashed #ff0000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.debug-overlay.bleed-guide::after {
    content: 'BLEED';
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 8pt;
    color: #ff0000;
    background: rgba(255,255,255,0.8);
    padding: 1px 4px;
}

.debug-overlay.trim-guide {
    border: 2px dashed #00aa00;
}

.debug-overlay.trim-guide::after {
    content: 'TRIM';
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 8pt;
    color: #00aa00;
    background: rgba(255,255,255,0.8);
    padding: 1px 4px;
}

.debug-overlay.safe-guide {
    border: 2px dashed #0066cc;
}

.debug-overlay.safe-guide::after {
    content: 'SAFE ZONE';
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 8pt;
    color: #0066cc;
    background: rgba(255,255,255,0.8);
    padding: 1px 4px;
}

.debug-overlay.mailing-guide {
    background: rgba(255, 204, 0, 0.3);
    border: 2px solid #cc9900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.debug-overlay.mailing-guide::after {
    content: 'USPS MAILING PANEL\A(Keep Clear)';
    white-space: pre;
    text-align: center;
    font-size: 10pt;
    font-weight: bold;
    color: #996600;
}

/* ============================================
   Typography for Print
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em 0;
    line-height: 1.2;
}

p {
    margin: 0 0 1em 0;
}

/* ============================================
   Utility Classes
   ============================================ */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-bold { font-weight: bold; }
.font-light { font-weight: 300; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }

/* Common print colors */
.bg-white { background-color: #ffffff; }
.bg-black { background-color: #000000; }
.text-white { color: #ffffff; }
.text-black { color: #000000; }