/* ============================================================
   ID Card Module — Screen & Print Styles
   Fixed physical dimensions: Portrait 54×86mm, Landscape 86×54mm
   NO hardcoded colors — all driven by CSS custom properties
   ============================================================ */

/* ---- CSS Custom Properties (defaults, overridden inline) ---- */
.id-card-root {
    --id-header-color: #00695c;
    --id-footer-color: #0d47a1;
    --id-border-color: #ff9800;
    --id-text-color: #212121;
    --id-value-color: #d32f2f;
    --id-accent-color: #ffffff;
    --id-bg-color: #ffffff;
}

/* ============================================================
   SETTINGS PANEL (Screen only)
   ============================================================ */
.id-card-settings-panel {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    max-width: 900px;
}

.id-card-settings-panel h5 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    border-bottom: 2px solid #00695c;
    padding-bottom: 8px;
}

.id-card-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.id-card-setting-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.id-card-setting-group label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.id-card-setting-group select,
.id-card-setting-group input[type="color"] {
    padding: 6px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}

.id-card-setting-group input[type="color"] {
    width: 100%;
    height: 36px;
    padding: 2px;
}

.id-card-color-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.id-card-color-preset {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ddd;
    cursor: pointer;
    transition:
        transform 0.15s,
        border-color 0.15s;
}

.id-card-color-preset:hover {
    transform: scale(1.2);
    border-color: #333;
}

/* ============================================================
   PREVIEW CONTAINER — wraps the print grid
   ============================================================ */
.id-card-preview-area {
    background: #ffffff;
    min-height: 200px;
}

/* ============================================================
   PRINT GRID — shared by screen preview AND @media print.
   This is the single source of truth for card layout.
   ============================================================ */
.id-card-print-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 3mm;
    row-gap: 3mm;
    column-gap: 3mm;
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Card wrapper inside the grid */
.id-card-print-grid .id-card-wrapper {
    display: block;
    flex: 0 0 auto;
    align-self: flex-start;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Portrait cards in grid */
.id-card-print-grid.orientation-portrait .id-card-wrapper {
    width: 54mm;
    height: 86mm;
    min-width: 54mm;
    min-height: 86mm;
}

.id-card-print-grid.orientation-portrait .id-card {
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
}

/* Landscape cards in grid */
.id-card-print-grid.orientation-landscape .id-card-wrapper {
    width: 86mm;
    height: 54mm;
}

.id-card-print-grid.orientation-landscape .id-card {
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
}

/* Mobile preview scaling — visual only, print dimensions stay fixed */
@media screen and (max-width: 768px) {
    .id-card-wrapper {
        transform: scale(0.65);
        transform-origin: top center;
        margin-bottom: -30mm;
    }
}

@media screen and (max-width: 480px) {
    .id-card-wrapper {
        transform: scale(0.5);
        transform-origin: top center;
        margin-bottom: -43mm;
    }
}

/* ============================================================
   THE ID CARD ITSELF
   ============================================================ */
.id-card {
    width: 100%;
    height: 100%;
    border: 2pt solid var(--id-border-color);
    border-radius: 0;
    background: var(--id-bg-color);
    color: var(--id-text-color);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: "Inter", "Poppins", sans-serif;
    box-shadow: none;
}

/* ---- Card Header ---- */
.id-card-header {
    background: var(--id-header-color);
    color: var(--id-accent-color);
    padding: 10px 10px 8px 10px;
    display: flex;
    align-items: center;
    gap: 2mm;
    flex-shrink: 0;
}

.id-card-header .id-card-logo {
    width: 10mm;
    height: 10mm;
    object-fit: contain;
    border-radius: 0;
    flex-shrink: 0;
}

.id-card-header .id-card-school-info {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.id-card-header .id-card-school-name {
    font-size: 10pt;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 0 5px 0;
    color: var(--id-accent-color);
    word-break: break-word;
    letter-spacing: 0.5px;
}

.id-card-header .id-card-school-tagline {
    font-size: 10pt;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 0 4px 0;
    color: var(--id-accent-color);
    opacity: 0.95;
}

.id-card-header .id-card-school-address {
    font-size: 8pt;
    font-weight: 800;
    line-height: 1.3;
    margin: 3px 0 0 0;
    color: var(--id-accent-color);
    opacity: 0.9;
    text-transform: capitalize;
    word-break: break-word;
}

/* ---- Card Info Bar ---- */
.id-card-info-bar {
    background: var(--id-header-color);
    color: var(--id-accent-color);
    padding: 4px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10pt;
    font-weight: 600;
    flex-shrink: 0;
    opacity: 0.9;
    gap: 1mm;
}

.id-card-info-bar span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.id-card-info-bar span:first-child {
    font-size: 8pt;
    font-weight: 600;
    text-align: left;
    flex: 1;
}

.id-card-info-bar span:nth-child(2) {
    font-size: 8pt;
    font-weight: 600;
    text-align: center;
    flex: 1;
}

.id-card-info-bar span:last-child {
    font-size: 8pt;
    font-weight: 600;
    text-align: right;
    flex: 1;
}

.id-card-info-bar i {
    font-size: 10pt;
}

/* ============================================================
   LANDSCAPE BODY (side-by-side: photo 25% | details 75%)
   ============================================================ */
.id-card-body-landscape {
    flex: 1;
    display: flex;
    padding: 2mm 2.5mm;
    gap: 2mm;
    overflow: visible;
    position: relative;
    min-height: 0;
    min-width: 0;
}

/* Photo section (landscape) — 25% */
.id-card-photo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 18mm;
    margin-top: 2px;
    margin-right: 2px;
}

.id-card-photo {
    width: 19mm;
    height: 28mm;
    border: 2px solid var(--id-border-color);
    border-radius: 0;
    overflow: hidden;
    background: #f0f0f0;
}

.id-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Student name */
.id-card-student-name {
    font-size: 8pt;
    font-weight: 800;
    color: var(--id-value-color);
    text-transform: uppercase;
    text-align: center;
    margin-top: 1mm;
    line-height: 1.2;
    letter-spacing: 0.5px;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Details section (landscape) — 75% */
.id-card-details {
    flex: 1;
    display: flex;
    gap: 2mm;
    min-width: 0;
    overflow: visible;
}

/* Labels and values — SAME size */
.id-card-labels,
.id-card-values {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    font-size: 9pt;
    line-height: 1.3;
    font-weight: 800;
}

.id-card-labels {
    color: var(--id-text-color);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Colon after each label — perfectly aligned */
.id-card-labels span::after {
    content: " :";
}

.id-card-values {
    color: var(--id-value-color);
    flex: 1;
    min-width: 0;
    overflow: visible;
}

.id-card-values span {
    display: block;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Parent phone — single line */
.id-card-phone-value {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   PORTRAIT BODY (stacked vertical: photo centered → name → details)
   ============================================================ */
.id-card-body-portrait {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2mm 2.5mm;
    gap: 1.2mm;
    overflow: visible;
    position: relative;
    min-height: 0;
    min-width: 0;
}

/* Centered photo in portrait */
.id-card-photo-section-portrait {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.id-card-photo-portrait {
    width: 20mm;
    height: 26mm;
    border: 2px solid var(--id-border-color);
    border-radius: 0;
    overflow: hidden;
    background: #f0f0f0;
}

.id-card-photo-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Student name in portrait */
.id-card-student-name-portrait {
    font-size: 11pt;
    font-weight: 700;
    color: var(--id-value-color);
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Stacked details in portrait */
.id-card-details-portrait {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8mm;
    width: 100%;
    justify-content: flex-start;
    overflow: visible;
}

.id-card-detail-row {
    display: flex;
    gap: 1.2mm;
    line-height: 1.3;
    align-items: baseline;
}

/* Labels and values — SAME size */
.id-card-label-text {
    color: var(--id-text-color);
    font-weight: 400;
    font-size: 9pt;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 15mm;
}

/* Colon after portrait labels */
.id-card-label-text::after {
    content: " :";
}

.id-card-value-text {
    color: var(--id-value-color);
    font-size: 9pt;
    font-weight: 400;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

/* Address — clamp to 3 lines */
.id-card-address-value {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    font-size: 9pt;
    line-height: 1.3;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Principal (bottom-right corner, absolute) ---- */
.id-card-principal {
    position: absolute;
    right: 3mm;
    bottom: 1.5mm;
    width: auto;
    white-space: nowrap;
    font-size: 6pt;
    font-weight: 800;
    color: var(--id-value-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ---- Card Footer (decorative only) ---- */
.id-card-footer {
    background: var(--id-footer-color);
    height: 2.5mm;
    flex-shrink: 0;
}

/* ============================================================
   TEMPLATE VARIATIONS
   ============================================================ */

/* Template 1: Classic School (default) */
.id-card.template-classic {
    /* default styles above */
}

/* Template 2: Modern Corporate */
.id-card.template-modern {
    border-radius: 0;
    border-width: 3pt;
}

.id-card.template-modern .id-card-header {
    border-bottom: 2px solid var(--id-accent-color);
}

.id-card.template-modern .id-card-footer {
    border-top: 2px solid var(--id-accent-color);
}

/* Template 3: Minimal Design */
.id-card.template-minimal {
    border-radius: 0;
    border-width: 1pt;
}

.id-card.template-minimal .id-card-header {
    background: var(--id-bg-color);
    color: var(--id-header-color);
    border-bottom: 1pt solid var(--id-header-color);
}

.id-card.template-minimal .id-card-header .id-card-school-name,
.id-card.template-minimal .id-card-header .id-card-school-tagline,
.id-card.template-minimal .id-card-header .id-card-school-address {
    color: var(--id-header-color);
}

.id-card.template-minimal .id-card-info-bar {
    background: var(--id-bg-color);
    border-bottom: 1pt solid var(--id-border-color);
}

.id-card.template-minimal .id-card-footer {
    background: var(--id-bg-color);
    color: var(--id-footer-color);
    border-top: 1pt solid var(--id-footer-color);
}

/* Template 4: Photo Focus */
.id-card.template-photo .id-card-photo-section {
    width: 22mm;
}

.id-card.template-photo .id-card-photo {
    width: 20mm;
    height: 25mm;
    border-radius: 0;
    border: 2px solid var(--id-header-color);
}

.id-card.template-photo .id-card-body-landscape {
    align-items: center;
}

.id-card.template-photo .id-card-photo-portrait {
    width: 22mm;
    height: 28mm;
    border-radius: 0;
    border: 2px solid var(--id-header-color);
}

/* Template 5: Custom Theme */
.id-card.template-custom {
    border-style: dashed;
}

/* ============================================================================================================================================================================================
 ============================================================================================================================
 ============================================================================================================================
 ============================================================================================================================
 ============================================================================================================================
 ============================================================================================================================
 ============================================================================================================================
 ============================================================
   PNG EXPORT MODE — mirrors @media print layout exactly.
   Applied via JS before html2canvas capture so PNG = Print.
   ============================================================ */
.png-export-mode {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 3mm !important;
    row-gap: 3mm !important;
    column-gap: 3mm !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 200mm !important;
    max-width: 200mm !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
}

.png-export-mode .id-card-wrapper {
    display: block !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.png-export-mode.orientation-portrait .id-card-wrapper {
    width: 54mm !important;
    height: 86mm !important;
    min-width: 54mm !important;
    min-height: 86mm !important;
}

.png-export-mode.orientation-portrait .id-card {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
}

.png-export-mode.orientation-landscape .id-card-wrapper {
    width: 86mm !important;
    height: 54mm !important;
}

.png-export-mode.orientation-landscape .id-card {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
}

.png-export-mode .id-card {
    overflow: hidden !important;
    box-shadow: none !important;
    border-color: var(--id-border-color) !important;
}

.png-export-mode .id-card-header,
.png-export-mode .id-card-header div,
.png-export-mode .id-card-header span {
    color: var(--id-accent-color) !important;
    background-color: var(--id-header-color) !important;
}

.png-export-mode .id-card-info-bar,
.png-export-mode .id-card-info-bar span {
    color: var(--id-accent-color) !important;
    background-color: var(--id-header-color) !important;
}

.png-export-mode .id-card-labels,
.png-export-mode .id-card-labels span,
.png-export-mode .id-card-label-text {
    color: var(--id-text-color) !important;
}

.png-export-mode .id-card-values,
.png-export-mode .id-card-values span,
.png-export-mode .id-card-value-text,
.png-export-mode .id-card-student-name,
.png-export-mode .id-card-student-name-portrait {
    color: var(--id-value-color) !important;
}

.png-export-mode .id-card-principal {
    position: absolute !important;
    right: 3mm !important;
    bottom: 1.5mm !important;
    width: auto !important;
    white-space: nowrap !important;
    color: var(--id-value-color) !important;
}

.png-export-mode .id-card-footer {
    background-color: var(--id-footer-color) !important;
}

.png-export-mode .id-card-photo,
.png-export-mode .id-card-photo-portrait {
    border-color: var(--id-border-color) !important;
}

.png-export-mode .id-card-body-portrait,
.png-export-mode .id-card-body-landscape {
    overflow: visible !important;
    flex: 1 1 auto !important;
    max-height: 100% !important;
    position: relative;
    min-height: 0 !important;
    min-width: 0 !important;
}

.png-export-mode .id-card-details-portrait,
.png-export-mode .id-card-details {
    overflow: visible !important;
    flex: 1 1 auto !important;
    max-height: 100% !important;
}

.png-export-mode .id-card-header,
.png-export-mode .id-card-info-bar,
.png-export-mode .id-card-footer,
.png-export-mode .id-card-photo-section-portrait,
.png-export-mode .id-card-student-name-portrait,
.png-export-mode .id-card-photo-section,
.png-export-mode .id-card-student-name {
    flex-shrink: 0 !important;
}

.png-export-mode .id-card-address-value {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.png-export-mode .id-card-phone-value {
    white-space: nowrap !important;
}

/* Info bar layout — must match print */
.png-export-mode .id-card-info-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.png-export-mode .id-card-info-bar span,
.png-export-mode .id-card-info-bar i {
    display: inline !important;
}

/* Minimal template overrides */
.png-export-mode .id-card.template-minimal .id-card-header,
.png-export-mode .id-card.template-minimal .id-card-header div,
.png-export-mode .id-card.template-minimal .id-card-header span {
    color: var(--id-header-color) !important;
    background-color: var(--id-bg-color) !important;
}

.png-export-mode .id-card.template-minimal .id-card-info-bar,
.png-export-mode .id-card.template-minimal .id-card-info-bar span {
    color: var(--id-text-color) !important;
    background-color: var(--id-bg-color) !important;
}

.png-export-mode .id-card.template-minimal .id-card-footer {
    background-color: var(--id-bg-color) !important;
}

.png-export-mode,
.png-export-mode * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    font-family: "Inter", "Poppins", sans-serif !important;
}

/* ============================================================================================================================================================================================
 ============================================================================================================================
 ============================================================================================================================
 ============================================================================================================================
 ============================================================================================================================
 ============================================================================================================================
 ============================================================================================================================
 ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    /* ================================================================
       PAGE SETUP — do NOT force a specific paper size.
       Let the user choose A4/A5/PDF in the print dialog.
       Card dimensions are fixed in mm and independent of paper size.
       ================================================================ */
    @page {
        margin: 5mm;
    }

    /* ================================================================
       OVERRIDE GLOBAL print.css RULES
       print.css has: body{color:#000!important} div{color:#000!important}
       h1-h6{color:#000!important} span{color:#000!important}

       We re-assert the CSS-variable-driven theme colors with
       !important so they beat print.css's broad element selectors.
       ================================================================ */

    /* Break the black-color inheritance chain from <body> */
    .print-document-body {
        color: var(--id-text-color) !important;
        font-family: "Inter", "Poppins", sans-serif !important;
    }

    /* Header: background + accent text */
    .id-card-header,
    .id-card-header div,
    .id-card-header span,
    .id-card-header h5,
    .id-card-header h6 {
        color: var(--id-accent-color) !important;
        background-color: var(--id-header-color) !important;
    }

    /* Info bar: header bg + accent text */
    .id-card-info-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .id-card-info-bar span,
    .id-card-info-bar i {
        display: inline;
        color: var(--id-accent-color) !important;
    }

    /* Labels: primary text color */
    .id-card-labels,
    .id-card-labels span,
    .id-card-label-text {
        color: var(--id-text-color) !important;
    }

    /* Values: secondary/value color */
    .id-card-values,
    .id-card-values span,
    .id-card-value-text,
    .id-card-student-name,
    .id-card-student-name-portrait {
        color: var(--id-value-color) !important;
    }

    /* Footer: footer bg only (decorative) */
    .id-card-footer {
        background-color: var(--id-footer-color) !important;
    }

    /* Principal text */
    .id-card-principal {
        color: var(--id-value-color) !important;
    }

    /* Card border */
    .id-card {
        border-color: var(--id-border-color) !important;
    }

    /* Photo border */
    .id-card-photo,
    .id-card-photo-portrait {
        border-color: var(--id-border-color) !important;
    }

    /* Minimal template overrides — these invert the header/footer */
    .id-card.template-minimal .id-card-header,
    .id-card.template-minimal .id-card-header div,
    .id-card.template-minimal .id-card-header span {
        color: var(--id-header-color) !important;
        background-color: var(--id-bg-color) !important;
    }

    .id-card.template-minimal .id-card-info-bar,
    .id-card.template-minimal .id-card-info-bar span {
        color: var(--id-text-color) !important;
        background-color: var(--id-bg-color) !important;
    }

    .id-card.template-minimal .id-card-footer {
        background-color: var(--id-bg-color) !important;
    }

    /* ================================================================
       PREVENT FLEX EXPANSION IN PRINT
       ================================================================ */
    .id-card-body-portrait,
    .id-card-body-landscape {
        overflow: visible !important;
        flex: 1 1 auto !important;
        max-height: 100% !important;
    }

    .id-card-details-portrait,
    .id-card-details {
        overflow: visible !important;
        flex: 1 1 auto !important;
        max-height: 100% !important;
    }

    /* Ensure fixed elements don't shrink */
    .id-card-header,
    .id-card-info-bar,
    .id-card-footer,
    .id-card-photo-section-portrait,
    .id-card-student-name-portrait,
    .id-card-photo-section,
    .id-card-student-name {
        flex-shrink: 0 !important;
    }

    /* ================================================================
       TYPOGRAPHY — font sizes come from main screen CSS.
       Print inherits the same typography for 1:1 preview/print match.
       Only color overrides and layout fixes are needed here.
       ================================================================ */

    /* Address — clamp to 3 lines max, never push principal */
    .id-card-address-value {
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Parent phone — single line, no wrap */
    .id-card-phone-value {
        white-space: nowrap !important;
    }

    /* Principal — fixed bottom-right, independent of content */
    .id-card-principal {
        position: absolute !important;
        right: 3mm !important;
        bottom: 1.5mm !important;
        width: auto !important;
        white-space: nowrap !important;
        color: var(--id-value-color) !important;
    }

    /* ================================================================
       FORCE EXACT COLOR RENDERING
       ================================================================ */
    .id-card-print-grid,
    .id-card-print-grid *,
    .id-card,
    .id-card *,
    .id-card-wrapper,
    .id-card-wrapper * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* ================================================================
       LOCK FONT FAMILY
       ================================================================ */
    .id-card-print-grid,
    .id-card-print-grid *,
    .id-card,
    .id-card * {
        font-family: "Inter", "Poppins", sans-serif !important;
    }

    /* Hide everything except the print area — ID card prints only */
    body.id-card-print > *:not(.print-document-body) {
        display: none !important;
    }

    body.id-card-print > .print-document-body {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: white !important;
    }

    body.id-card-print > .print-document-body,
    body.id-card-print > .print-document-body * {
        visibility: visible !important;
    }

    /* Hide settings and buttons */
    .id-card-settings-panel,
    .print-no-print,
    .d-print-none,
    .no-print,
    .modal-footer,
    .modal-header,
    button:not(.print-btn),
    .btn:not(.print-btn),
    nav,
    .navbar,
    .sidebar,
    .site_header,
    #sidebarNav,
    header:not(.print-header),
    footer:not(.print-footer),
    .back-to-top,
    .backtotop,
    .back-to-top-btn,
    .modern-backtotop,
    .notification-bell,
    .user-profile-menu,
    #loading {
        display: none !important;
    }

    /* Print container */
    .id-card-print-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 3mm !important;
        row-gap: 3mm !important;
        column-gap: 3mm !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Each card wrapper in print */
    .id-card-print-grid .id-card-wrapper {
        display: block !important;
        flex: 0 0 auto !important;
        align-self: flex-start !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Portrait cards in print grid */
    .id-card-print-grid.orientation-portrait .id-card-wrapper {
        width: 54mm !important;
        height: 86mm !important;
        min-width: 54mm !important;
        min-height: 86mm !important;
    }

    .id-card-print-grid.orientation-portrait .id-card {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
    }

    /* Landscape cards in print grid */
    .id-card-print-grid.orientation-landscape .id-card-wrapper {
        width: 86mm !important;
        height: 54mm !important;
    }

    .id-card-print-grid.orientation-landscape .id-card {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
    }

    /* Ensure card content stays inside the fixed physical card area */
    .id-card {
        overflow: hidden !important;
        box-shadow: none !important;
    }

    .id-card-body-portrait,
    .id-card-body-landscape {
        position: relative;
        min-height: 0 !important;
        min-width: 0 !important;
    }

    /* Ensure the print document body is fully visible — ID card prints only */
    body.id-card-print .print-document-body {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }

    .print-id-card-container {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
}

/* ============================================================
   LEGACY CLASS SUPPORT (for backward compatibility during transition)
   ============================================================ */
@media print {
    /* Hide old ID card containers */
    .id_container,
    .detail_content,
    .IDCard {
        display: none !important;
    }

    .id-card-details span {
        font-size: 8pt;
    }
}