/* ==========================================================================
   CSS PRINT-SPECIFIC STYLESHEET: Saudi Medicine Label Printer
   Target: Intermec PC43t Thermal Label Spooler
   Standard Size: 4" x 2" inches (101.6mm x 50.8mm)
   ========================================================================== */

/* Configure thermal printer page layout */
@page {
    size: 101.6mm 50.8mm; /* Fallback size; overridden dynamically by updatePrintSize */
    margin: 0mm !important;
}

/* Force body styling for pure high-contrast thermal printing */
html, body {
    width: 100% !important;
    height: auto !important;
    background: #ffffff !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* HIDE THE WEB APP SHELL AND ALL OTHER SIBLINGS ENTIRELY */
body > :not(#printPagesContainer) {
    display: none !important;
}

#printPagesContainer {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
}

.print-label-page-wrapper {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

.print-label-page-wrapper:last-child {
    page-break-after: avoid !important;
    break-after: avoid !important;
}

/* FORCE TICKET FILL AND FORMAT PIXEL PERFECTLY */
#labelPrintArea, .print-label-page {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: var(--label-padding) !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    z-index: 9999999 !important;
    box-sizing: border-box !important;
    transform: none !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: calc(7.5pt * var(--fit-factor, 1)) !important;
    line-height: 1.15 !important;

    /* Base Font Variables - Scaled by --fit-factor so content always fits inside paper */
    --fit-factor: 1;
    --label-padding: calc(1.5mm * var(--fit-factor, 1)) calc(2.8mm * var(--fit-factor, 1));
    --pharmacy-title-size: calc(10pt * var(--fit-factor, 1));
    --pharmacy-desc-size: calc(6.8pt * var(--fit-factor, 1));
    --rx-badge-size: calc(6pt * var(--fit-factor, 1));
    --info-row-size: calc(7.2pt * var(--fit-factor, 1));
    --info-strong-size: calc(8pt * var(--fit-factor, 1));
    --med-title-size: calc(8.5pt * var(--fit-factor, 1));
    --usage-text-size: calc(10pt * var(--fit-factor, 1));
    --warning-tag-size: calc(6pt * var(--fit-factor, 1));
    --footer-text-size: calc(6pt * var(--fit-factor, 1));
    --qr-box-size: calc(8.5mm * var(--fit-factor, 1));
    --label-divider-margin: calc(0.4mm * var(--fit-factor, 1)) 0;
}

#labelPrintArea *, .print-label-page * {
    line-height: 1.15 !important;
}

/* Disable scanline dot simulation for raw printing */
#labelPrintArea::after, .print-label-page::after {
    display: none !important;
}

/* Ensure typography remains extremely crisp and vector-perfect */
.pharmacy-info h4 {
    font-size: var(--pharmacy-title-size) !important;
    font-weight: 800 !important;
    color: #000000 !important;
    line-height: 1.15 !important;
    margin: 0 !important;
}

.pharmacy-info p {
    font-size: var(--pharmacy-desc-size) !important;
    color: #000000 !important;
    margin: 0 !important;
    line-height: 1.15 !important;
}

.moh-sfda-badge {
    gap: calc(0.5mm * var(--fit-factor, 1)) !important;
}

.sfda-tag {
    font-size: calc(5.2pt * var(--fit-factor, 1)) !important;
    font-weight: 800 !important;
    border: 1px solid #000000 !important;
    padding: calc(0.2mm * var(--fit-factor, 1)) calc(0.8mm * var(--fit-factor, 1)) !important;
    color: #000000 !important;
}

.rx-badge {
    font-size: var(--rx-badge-size) !important;
    font-weight: 700 !important;
    background: #000000 !important;
    color: #ffffff !important;
    padding: calc(0.2mm * var(--fit-factor, 1)) calc(1.2mm * var(--fit-factor, 1)) !important;
    border-radius: 0.5mm !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.label-divider {
    border-top: 1px dashed #000000 !important;
    margin: var(--label-divider-margin) !important;
    height: 0 !important;
}

.info-row {
    font-size: var(--info-row-size) !important;
    display: flex !important;
    justify-content: space-between !important;
    color: #000000 !important;
    margin-top: 0 !important;
}

.info-row + .info-row {
    margin-top: calc(0.3mm * var(--fit-factor, 1)) !important;
}

.info-row strong {
    font-size: var(--info-strong-size) !important;
    font-weight: 800 !important;
    color: #000000 !important;
}

.label-medicine-box {
    display: flex !important;
    align-items: center !important;
    gap: calc(1.5mm * var(--fit-factor, 1)) !important;
    background: #f0f0f0 !important;
    border: 1px solid #000000 !important;
    padding: calc(0.6mm * var(--fit-factor, 1)) calc(1.8mm * var(--fit-factor, 1)) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color: #000000 !important;
}

.med-tag {
    font-family: 'Times New Roman', serif !important;
    font-size: calc(12pt * var(--fit-factor, 1)) !important;
    font-weight: 800 !important;
}

.med-details {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.1 !important;
}

.med-details strong {
    font-size: var(--med-title-size) !important;
    font-weight: 800 !important;
}

.label-usage-box {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: calc(2mm * var(--fit-factor, 1)) !important;
}

.usage-text-main {
    font-size: calc(var(--usage-text-size) * var(--instructions-font-multiplier, 1.0)) !important;
    font-family: var(--instructions-font-family, 'Cairo', 'Tajawal', sans-serif) !important;
    font-weight: 800 !important;
    color: #000000 !important;
    line-height: 1.25 !important;
}

.label-pictograms {
    display: flex !important;
    gap: calc(0.8mm * var(--fit-factor, 1)) !important;
}

.label-picto {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    border: 1px solid #000000 !important;
    padding: calc(0.4mm * var(--fit-factor, 1)) calc(0.8mm * var(--fit-factor, 1)) !important;
    border-radius: 0.8mm !important;
    width: calc(6.8mm * var(--fit-factor, 1)) !important;
    line-height: 1 !important;
}

.label-picto.hidden {
    display: none !important;
}

.picto-img {
    font-size: calc(9.5pt * var(--fit-factor, 1)) !important;
}

.picto-txt {
    font-size: calc(5pt * var(--fit-factor, 1)) !important;
    font-weight: 800 !important;
    margin-top: 0.2mm !important;
}

.label-warnings-tray {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: calc(0.8mm * var(--fit-factor, 1)) !important;
}

.warning-tag {
    font-size: var(--warning-tag-size) !important;
    font-weight: 800 !important;
    border: 1px solid #000000 !important;
    background: #000000 !important;
    color: #ffffff !important;
    padding: calc(0.3mm * var(--fit-factor, 1)) calc(1.2mm * var(--fit-factor, 1)) !important;
    border-radius: 0.5mm !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.label-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
}

.footer-qr {
    width: var(--qr-box-size) !important;
    height: var(--qr-box-size) !important;
    border: 1px solid #000000 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0.3mm !important;
    background: #ffffff !important;
}

.footer-qr canvas, .footer-qr img {
    width: 100% !important;
    height: 100% !important;
}

.footer-dates-pharmacist {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    font-size: var(--footer-text-size) !important;
    line-height: 1.15 !important;
    color: #000000 !important;
}

.footer-dates {
    display: flex !important;
    gap: 3mm !important;
    border-bottom: 1px solid #000000 !important;
    padding-bottom: 0.5mm !important;
    margin-bottom: 0.5mm !important;
    font-weight: 600 !important;
}

.footer-pharmacist {
    font-weight: 700 !important;
    text-align: right !important;
}


/* ==========================================================================
   DYNAMIC SHOW / HIDE CONTENT RULES
   ========================================================================== */
#labelPrintArea.hide-pharmacy .label-header,
.print-label-page.hide-pharmacy .label-header {
    display: none !important;
}
#labelPrintArea.hide-pharmacy .label-divider:nth-of-type(1),
.print-label-page.hide-pharmacy .label-divider:nth-of-type(1) {
    display: none !important;
}

#labelPrintArea.hide-patient .label-patient-box,
.print-label-page.hide-patient .label-patient-box {
    display: none !important;
}
#labelPrintArea.hide-patient .label-divider:nth-of-type(2),
.print-label-page.hide-patient .label-divider:nth-of-type(2) {
    display: none !important;
}

#labelPrintArea.hide-pictograms .label-pictograms,
.print-label-page.hide-pictograms .label-pictograms {
    display: none !important;
}

#labelPrintArea.hide-warnings .label-warnings-tray,
.print-label-page.hide-warnings .label-warnings-tray {
    display: none !important;
}
#labelPrintArea.hide-warnings .label-divider:nth-of-type(4),
.print-label-page.hide-warnings .label-divider:nth-of-type(4) {
    display: none !important;
}

#labelPrintArea.hide-dates .footer-dates,
.print-label-page.hide-dates .footer-dates {
    display: none !important;
}

#labelPrintArea.hide-qrcode .footer-qr,
.print-label-page.hide-qrcode .footer-qr {
    display: none !important;
}

#labelPrintArea.hide-pharmacist .footer-pharmacist,
.print-label-page.hide-pharmacist .footer-pharmacist {
    display: none !important;
}


/* ==========================================================================
   THEMES & TEMPLATES PRINT STYLING
   ========================================================================== */

/* 1. EMERALD THEME (Default Premium) - Handled by standard layout */

/* 2. MONOCHROME THEME (High-Contrast Minimalist) */
.theme-monochrome .label-medicine-box {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
}
.theme-monochrome .med-tag {
    font-weight: 800 !important;
}

/* 3. BOLD WARNING-FOCUSED THEME */
.theme-bold-warning .label-usage-box {
    background: #000000 !important;
    color: #ffffff !important;
    padding: 1.5mm 3mm !important;
    border-radius: 0.8mm !important;
    margin: 0.5mm 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}
.theme-bold-warning .usage-text-main {
    color: #ffffff !important;
}
.theme-bold-warning .label-picto {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
}
.theme-bold-warning .label-warnings-tray {
    background: #f2f2f2 !important;
    padding: 1mm 2mm !important;
    border: 1px solid #000000 !important;
    border-radius: 0.5mm !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}
.theme-bold-warning .warning-tag {
    border-color: #000000 !important;
    background: #000000 !important;
    color: #ffffff !important;
}

/* 4. COMPACT DUAL-COLUMN THEME (Smart Horizontal Splitter) */
#labelPrintArea.theme-compact, .print-label-page.theme-compact {
    display: grid !important;
    grid-template-columns: calc(28mm * var(--fit-factor, 1)) 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    gap: calc(1.2mm * var(--fit-factor, 1)) !important;
    padding: var(--label-padding) !important;
}
.theme-compact .label-header {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: start !important;
}
.theme-compact .label-header .moh-sfda-badge {
    display: none !important; /* Hide to save space */
}
.theme-compact .pharmacy-info {
    text-align: start !important;
}
.theme-compact .label-footer {
    grid-column: 1 / 2 !important;
    grid-row: 2 / 4 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-inline-end: 1px dashed #000000 !important;
    padding-inline-end: 2mm !important;
    margin-top: 1mm !important;
    height: 100% !important;
}
.theme-compact .footer-dates-pharmacist {
    align-items: center !important;
    text-align: center !important;
    font-size: 6.5pt !important;
}
.theme-compact .footer-dates {
    flex-direction: column !important;
    gap: 0.5mm !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0.5mm !important;
}

/* Compact theme Right Column */
.theme-compact .label-patient-box {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.theme-compact .label-medicine-box {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    align-self: start !important;
    margin-top: 0.5mm !important;
}
.theme-compact .label-usage-box {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    align-self: end !important;
    margin-bottom: 0.5mm !important;
}
.theme-compact .label-warnings-tray {
    grid-column: 2 / 3 !important;
    grid-row: 3 / 4 !important;
    align-self: end !important;
    margin-top: 0 !important;
}
.theme-compact .label-divider {
    display: none !important; /* Hide dividers to prevent overlap */
}