/* ========================================
   Miniatures.lk Invoice Generator
   Tailwind CSS + Custom Print Styles
   ======================================== */

/* Box sizing for all elements */
* { box-sizing: border-box; }

/* Table cell styles for dynamically generated rows */
.inv-table td { 
    border-bottom: 1px solid #eee; 
    padding: 12px 8px; 
    font-size: 0.9rem; 
    vertical-align: top; 
}
.inv-table td.qty { text-align: center; }
.inv-table td.price { text-align: right; }

/* Dynamic item description classes (used by JS) */
.item-desc-main { font-weight: bold; }
.item-desc-sub { font-size: 0.8rem; color: #666; margin-top: 2px; }
.badge-paint { 
    background: #EBD3A0; 
    color: #5a461b; 
    font-size: 0.7rem; 
    padding: 2px 5px; 
    border-radius: 3px; 
    margin-left: 5px; 
}

/* Delete button only visible on screen, not print */
.delete-item { 
    color: red; 
    cursor: pointer; 
    font-weight: bold; 
    margin-left: 10px; 
    font-size: 0.8rem; 
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    body { 
        background: white !important; 
        margin: 0; 
        padding: 0; 
        display: block; 
    }
    
    /* Hide controls panel when printing */
    .controls, 
    .delete-item { 
        display: none !important; 
    }
    
    /* Preview container adjustments */
    .preview-container { 
        padding: 0 !important; 
        overflow: visible !important; 
        background: white !important; 
    }
    
    /* Invoice paper adjustments */
    #invoice { 
        box-shadow: none !important; 
        margin: 0 !important; 
        width: 100% !important; 
        min-height: auto !important; 
        padding: 0 !important; 
        height: auto !important;
    }
    
    /* Force background colors to print */
    * { 
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important; 
    }
    
    /* Keep footer together */
    .inv-footer { 
        page-break-inside: avoid; 
    }
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */
@media screen and (max-width: 768px) {
    .main-layout {
        flex-direction: column;
        height: auto !important;
        padding-bottom: 20px;
    }

    .preview-container {
        display: none !important;
    }

    .controls {
        width: 100%;
        flex: none;
        height: auto;
        overflow-y: visible;
    }
}