/**
 * print.css - Print Styles
 * 
 * Contains all print-specific styles wrapped in @media print rules.
 * These styles optimize the page for printing, including:
 * - Layout reset for print
 * - Typography adjustments
 * - Color overrides
 * - Print-safe formatting
 * - Compact and less-ink modes
 * 
 * All rules use !important to ensure they apply in print context.
 */

@media print {
    @font-face {
        font-family: 'JetBrains Mono';
        font-style: normal;
        font-weight: 400 700;
        font-display: swap;
        src: url('/static/fonts/JetBrainsMono.ttf') format('truetype');
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - BASE SETUP
       ──────────────────────────────────────────────────────────────────────── */

    html, body {
        background-color: white !important;
        color: black !important;
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .page-wrapper {
        display: block !important;
    }

    .sheet-layout {
        display: block !important;
    }

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

    .sheet-container {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - TEXT FORMATTING
       ──────────────────────────────────────────────────────────────────────── */

    .prose,
    .prose p,
    .prose li,
    .prose td,
    .prose th,
    .prose blockquote,
    .prose h1,
    .prose h2,
    .prose h3,
    .prose h4 {
        hyphens: none !important;
        -webkit-hyphens: none !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        word-wrap: normal !important;
    }

    .prose p,
    .prose li,
    .prose td {
        color: #111827 !important;
    }

    .prose blockquote {
        color: #374151 !important;
        border-left-color: #6366f1 !important;
        background: #eef2ff !important;
        padding: 0.4rem 0.75rem 0.4rem 1rem !important;
        border-radius: 0 0.25rem 0.25rem 0 !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        box-shadow: none !important;
    }

    .prose blockquote::before {
        color: #6366f1 !important;
        opacity: 0.4 !important;
        font-size: 1.4rem !important;
        top: 0.1rem !important;
        left: 0.25rem !important;
    }

    .prose h2 {
        color: #1e1b4b !important;
        border-bottom-color: #818cf8 !important;
    }

    .prose h3 {
        color: #1e40af !important;
    }

    .prose strong,
    .prose b {
        color: #111827 !important;
    }

    .prose :not(pre) > code {
        color: #b91c1c !important;
        background-color: #fef2f2 !important;
        border: 1px solid #fecaca !important;
    }

    .sheet-title {
        color: #1e1b4b !important;
    }

    .sheet-desc {
        color: #374151 !important;
    }

    .group-title {
        color: #374151 !important;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - HIDE NON-ESSENTIAL ELEMENTS
       ──────────────────────────────────────────────────────────────────────── */

    .no-print,
    .sidebar,
    .site-header,
    .theme-toggle,
    .back-link,
    .nav-list,
    .sidebar-toggle-btn,
    .info-button,
    .panel-toggle,
    .panel-header,
    .tags-container,
    .badge,
    .hero-promo,
    .footer {
        display: none !important;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - TYPOGRAPHY ADJUSTMENTS
       ──────────────────────────────────────────────────────────────────────── */

    .sheet-title {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
    }

    .sheet-desc {
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }

    h2 {
        font-size: 1.2rem !important;
        margin-top: 1rem !important;
        margin-bottom: 0.5rem !important;
        page-break-after: avoid;
        color: #1e1b4b !important;
    }

    h3 {
        font-size: 1.1rem !important;
        margin-top: 0.75rem !important;
        margin-bottom: 0.25rem !important;
        page-break-after: avoid;
        color: #1e40af !important;
    }

    strong, b {
        color: #111827 !important;
    }

    th {
        color: #fff !important;
        background-color: #0b004b !important;
        border-color: #05001d !important;
    }

    p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
        color: black !important;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - CODE BLOCK ADJUSTMENTS
       ──────────────────────────────────────────────────────────────────────── */

    pre {
        background-color: #f0f4ff !important;
        border: 1px solid #c7d2fe !important;
        border-left: 4px solid #4f46e5 !important;
        color: #1e1b4b !important;
        padding: 0.5rem !important;
        margin-bottom: 0.75rem !important;
        white-space: pre-wrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        word-wrap: normal !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
        font-size: 0.8rem !important;
        page-break-inside: avoid;
    }

    /* Inline code */
    code:not(pre code) {
        font-family: 'JetBrains Mono', 'Courier New', Courier, monospace !important;
        background-color: #fef2f2 !important;
        color: #b91c1c !important;
        border: 1px solid #fecaca !important;
        padding: 0.1rem 0.3rem !important;
        border-radius: 0.2rem !important;
    }

    /* Code block content */
    pre code {
        font-family: 'JetBrains Mono', 'Courier New', Courier, monospace !important;
        background-color: transparent !important;
        color: inherit !important;
        border: none !important;
        padding: 0 !important;
        white-space: inherit !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        word-wrap: normal !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - SYNTAX HIGHLIGHTING
       ──────────────────────────────────────────────────────────────────────── */

    .hl-comment { color: #6b7280 !important; font-style: italic !important; }
    .hl-string { color: #15803d !important; }
    .hl-keyword { color: #1d4ed8 !important; font-weight: bold !important; }
    .hl-bash-var { color: #b91c1c !important; }
    .hl-flag { color: #b45309 !important; }
    .hl-number { color: #0369a1 !important; }
    .hl-punctuation { color: #374151 !important; }
    .hl-json-key { color: #1d4ed8 !important; font-weight: 600 !important; }
    .hl-yaml-key { color: #1d4ed8 !important; font-weight: 600 !important; }
    .hl-yaml-anchor { color: #7c3aed !important; }
    .hl-var { color: #7c3aed !important; font-weight: bold !important; }
    .hl-operator { color: #0f766e !important; }
    .hl-function { color: #7c2d12 !important; font-weight: 600 !important; }
    .hl-property { color: #1e3a8a !important; }
    .hl-decorator { color: #9333ea !important; }
    .hl-macro { color: #9f1239 !important; font-weight: 600 !important; }
    .hl-type { color: #0c4a6e !important; }
    .hl-lifetime { color: #7c3aed !important; font-style: italic !important; }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - MARKDOWN SYNTAX HIGHLIGHTING
       ──────────────────────────────────────────────────────────────────────── */

    .hl-md-h1 { color: #7c3aed !important; font-weight: bold !important; }
    .hl-md-h2 { color: #1d4ed8 !important; font-weight: bold !important; }
    .hl-md-h3 { color: #047857 !important; font-weight: bold !important; }
    .hl-md-h4 { color: #b45309 !important; font-weight: bold !important; }
    .hl-md-h5, .hl-md-h6 { color: #374151 !important; font-weight: bold !important; }
    .hl-md-heading-1 { color: #4c1d95 !important; }
    .hl-md-heading-2 { color: #1e3a8a !important; }
    .hl-md-heading-3 { color: #065f46 !important; }
    .hl-md-heading-4, .hl-md-heading-5, .hl-md-heading-6 { color: #1f2937 !important; }
    .hl-md-fm { color: #3f6212 !important; font-style: italic !important; }
    .hl-md-fence { color: #6d28d9 !important; }
    .hl-md-hr { color: #6b7280 !important; }
    .hl-md-bq-marker { color: #2563eb !important; font-weight: bold !important; }
    .hl-md-bq { color: #4338ca !important; font-style: italic !important; }

    /* Print theme blockquote nesting levels */
    .hl-md-bq-level-1 .hl-md-bq-marker { color: #2563eb !important; }
    .hl-md-bq-level-1 .hl-md-bq { color: #4338ca !important; }
    .hl-md-bq-level-2 .hl-md-bq-marker { color: #0891b2 !important; }
    .hl-md-bq-level-2 .hl-md-bq { color: #0e7490 !important; }
    .hl-md-bq-level-3 .hl-md-bq-marker { color: #059669 !important; }
    .hl-md-bq-level-3 .hl-md-bq { color: #047857 !important; }
    .hl-md-bq-level-4 .hl-md-bq-marker { color: #7c3aed !important; }
    .hl-md-bq-level-4 .hl-md-bq { color: #6d28d9 !important; }
    .hl-md-bq-level-5 .hl-md-bq-marker { color: #dc2626 !important; }
    .hl-md-bq-level-5 .hl-md-bq { color: #b91c1c !important; }

    .hl-md-list-marker { color: #d97706 !important; font-weight: bold !important; }
    .hl-md-bold { color: #92400e !important; font-weight: bold !important; }
    .hl-md-italic { color: #065f46 !important; font-style: italic !important; }
    .hl-md-code { color: #b91c1c !important; }
    .hl-md-checkbox { vertical-align: middle !important; }
    .hl-md-checkbox-unchecked { color: #6b7280 !important; }
    .hl-md-checkbox-checked { color: #0369a1 !important; }
    .hl-md-link, .hl-md-link-text { color: #0369a1 !important; }
    .hl-md-link-url { color: #0891b2 !important; }
    .hl-md-image { color: #7c3aed !important; }
    .hl-md-html { color: #9a3412 !important; }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - LINKS & CHECKBOXES
       ──────────────────────────────────────────────────────────────────────── */

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

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        word-break: break-all;
    }

    .external-link-icon {
        display: none !important;
    }

    input[type="checkbox"] {
        border-color: #111827 !important;
        background-color: #ffffff !important;
    }

    input[type="checkbox"]:checked {
        background-color: #0369a1 !important;
        border-color: #0369a1 !important;
    }

    input[type="checkbox"]:checked::after {
        color: #ffffff !important;
    }

    .var-highlight {
        background: none !important;
        color: inherit !important;
        padding: 0.125rem 0 !important;
    }

    .var-dynamic {
        cursor: default !important;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - IMAGES
       ──────────────────────────────────────────────────────────────────────── */

    .prose img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 1rem 0 !important;
        border: 1px solid #d1d5db !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        cursor: default !important;
    }

    /* Hide image preview modal when printing */
    .image-preview-modal {
        display: none !important;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - PAGE MARGINS
       ──────────────────────────────────────────────────────────────────────── */

    @page {
        margin: 1cm;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - COMPACT MODE
       ──────────────────────────────────────────────────────────────────────── */

    body.print-compact .sheet-title {
        font-size: 1.2rem !important;
        margin-bottom: 0.1rem !important;
    }
    
    body.print-compact .sheet-desc {
        font-size: 0.8rem !important;
        margin-bottom: 0.5rem !important;
    }

    body.print-compact h2 {
        font-size: 1rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    body.print-compact h3 {
        font-size: 0.9rem !important;
        margin-top: 0.4rem !important;
        margin-bottom: 0.2rem !important;
    }
    
    body.print-compact p {
        font-size: 0.8rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    body.print-compact pre {
        font-size: 0.7rem !important;
        padding: 0.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    body.print-compact .prose {
        column-count: 2;
        column-gap: 1cm;
        column-fill: auto;
        font-size: 0.8rem;
    }
    
    body.print-compact .prose h2,
    body.print-compact .prose h3 {
        break-after: avoid;
        page-break-after: avoid;
    }
    
    body.print-compact .prose pre,
    body.print-compact .prose blockquote,
    body.print-compact .prose ul,
    body.print-compact .prose ol,
    body.print-compact .prose table {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - LESS INK MODE
       ──────────────────────────────────────────────────────────────────────── */

    body.print-less-ink th {
        background-color: #f0f0f0 !important;
        color: #000 !important;
        border: 1px solid #ccc !important;
    }

    body.print-less-ink pre {
        background-color: #fff !important;
        border: 1px solid #ccc !important;
    }

    body.print-less-ink code:not(pre code) {
        background-color: #fff !important;
        border: 1px solid #ccc !important;
        color: #000 !important;
    }

    body.print-less-ink .hl-keyword,
    body.print-less-ink .hl-string,
    body.print-less-ink .hl-bash-var,
    body.print-less-ink .hl-flag,
    body.print-less-ink .hl-number,
    body.print-less-ink .hl-json-key,
    body.print-less-ink .hl-yaml-key,
    body.print-less-ink .hl-yaml-anchor,
    body.print-less-ink .hl-var,
    body.print-less-ink .hl-operator,
    body.print-less-ink .hl-function,
    body.print-less-ink .hl-property,
    body.print-less-ink .hl-decorator,
    body.print-less-ink .hl-macro,
    body.print-less-ink .hl-type,
    body.print-less-ink .hl-lifetime {
        color: #000 !important;
        font-weight: normal !important;
    }

    body.print-less-ink .hl-comment {
        color: #555 !important;
    }

    /* ────────────────────────────────────────────────────────────────────────
       PRINT - NO BREAK MODE
       ──────────────────────────────────────────────────────────────────────── */

    body.print-no-break h2,
    body.print-no-break h3,
    body.print-no-break p {
        break-after: avoid;
        page-break-after: avoid;
    }
    
    body.print-no-break pre {
        break-before: avoid;
        page-break-before: avoid;
    }
}