/* ** PRINT MARGINS AND A4 SIZE (CRITICAL) ** */
@page {
    /* Set custom margins: Top: 1.2 inch, bottom: 1 inch, Left/Right: 0.5 inch */
    margin-top: 0; 
    margin-bottom: 0; 
    margin-left: 0; 
    margin-right: 0; 
    size: A4;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 11px; 
    background-color: #f0f0f0; 
    color: #333;
}

/* --- Control Panel Styling --- */
#control-panel {
    max-width: 800px;
    margin: 20px auto 10px auto; 
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #e8f5e9; 
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.panel-btn {
    background-color: transparent;
    border: none;
    color: #004d40; 
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px; 
}

.panel-btn .icon {
    font-size: 18px;
}

.panel-btn:hover {
    background-color: #c8e6c9; 
    color: #00251a;
}

.panel-btn.active {
    background-color: #00796b; 
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.panel-btn.active:hover {
    background-color: #004d40; 
}


/* --- Input Section Styling (Screen Only) --- */
#input-toggle-container {
    max-width: 800px;
    margin: 10px auto 20px auto;
    text-align: center;
}
#toggle-input-btn {
    padding: 10px 20px; 
    border: none; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: bold; 
    background-color: #f1f8e9; 
    color: #00796b; 
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s;
}
#toggle-input-btn:hover {
    background-color: #e3f2fd;
}


/* Ensure the header inside input section is also handled */
#input-section h1 { 
    font-size: 2em;
    color: #00796b;
    margin-top: 0;
		text-align: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
	margin-top: 30px;
    margin-bottom: 15px;
}

#data-input-table { width: 100%; margin-bottom: 15px; }
#data-input-table td { padding: 8px; border: none; }
#data-input-table input, #data-input-table select { width: 95%; padding: 6px; border: 1px solid #ccc; border-radius: 4px; }
#input-section button { padding: 10px 20px; margin: 5px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; background-color: #00796b; color: white; transition: background-color 0.3s; }
#input-section button:hover:not(:disabled) { background-color: #004d40; }
#input-section button:disabled { background-color: #ccc; cursor: not-allowed; }


/* --- Report Structure Styling (Strict A4 Definition) --- */
#report-container {
    display: none; 
}

.page {
    /* স্ক্রিনের জন্য সাদা ব্যাকগ্রাউন্ড ঠিক রাখা হলো */
    background: white;
    width: 210mm; 
    min-height: 297mm; 
    box-sizing: border-box;
    padding-top: 1.2in; 
    padding-bottom: 1in;
    padding-left: 0.5in; 
    padding-right: 0.5in; 
    position: relative; /* **CRITICAL: Needed for Watermark Positioning** */
    page-break-after: always; 
    page-break-before: avoid; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
    margin: 20px auto; 
    overflow: hidden; 
}

/* --- Content Styling --- */
.service-id-top {
    font-weight: bold;
    font-size: 12px; 
    text-align: left;
    margin-top: -1in;
	text-decoration: underline;
    margin-bottom: 0px;
}

.report-title {
    color: #004d40; 
    border-bottom: 3px solid #00796b;
    padding-bottom: 5px;
    margin-top: 10px; 
    text-transform: uppercase;
    font-size: 20px; 
    text-align: center;
}

/* Increased spacing for h3 elements */
h3 {
    color: #00796b;
    border-left: 5px solid #00796b;
    padding-left: 8px;
    margin-top: 25px; 
    margin-bottom: 15px; 
    font-size: 13px; 
}

h4 {
    margin-bottom: 5px;
    font-size: 12px;
}

ul, ol {
    padding-left: 20px;
    margin-bottom: 15px; 
    font-size: 11px; 
}
ul li { margin-bottom: 4px; } 

/* ** PROFESSIONAL TABLE DESIGN (SCREEN) ** */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0; 
    page-break-inside: avoid; 
    border: 1px solid #ccc; 
}

/* Table Header Style */
th {
    background-color: #00796b; 
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center; 
    padding: 7px 5px; 
    border: 1px solid #004d40; 
    font-size: 11px;
}

/* Table Data Cell Style */
td {
    border: 1px solid #eee; 
    padding: 5px 8px; 
    text-align: left;
    font-size: 11px;
}

/* Zebra Striping (Alternating row colors) */
tbody tr:nth-child(odd) {
    background-color: #f8f8f8; 
}
tbody tr:hover {
    background-color: #e6f7ff; 
}

/* Specific styling for the new technician checklist table */
.technician-checklist {
    margin-top: 10px;
    margin-bottom: 15px;
}
.technician-checklist th, .technician-checklist td {
    padding: 5px 8px; 
    font-size: 12px; 
}
.technician-checklist td:last-child {
    text-align: center;
}

/* Footer: Positioning relative to the bottom margin */
.page footer {
    position: absolute;
    bottom: 0.5in; 
    left: 0.5in; 
    right: 0.5in; 
    text-align: right;
    font-size: 9px; 
    color: #757575;
}

/* ** Print Media Query (Ensures correct printing) ** */
@media print {
    body {
        font-family: Arial, sans-serif;
        /* প্রিন্টের সময় ব্যাকগ্রাউন্ড সাদা করার প্রয়োজন নেই, কারণ .page::before ব্যবহার হচ্ছে */
        background-color: white; 
        -webkit-print-color-adjust: exact; 
        font-size: 10pt; 
        width: 100%;
        margin-top: 0;
        padding: 0;
    }

    /* CRITICAL FIX: Ensure all screen-only elements are hidden */
    #input-section, 
    #control-panel, 
    #input-toggle-container,
    #input-section * { 
        display: none !important; 
        visibility: hidden !important;
    }
    
    #report-container { display: block; box-shadow: none; margin: 0; }

    /* Page Definition and Margins */
    .page {
        margin: 0;
        box-shadow: none;
        padding: 0 !important; 
        width: 100% !important; 
        min-height: 297mm !important; 
        
        /* ✅ ফিক্স: প্রিন্ট করার সময় .page এর ব্যাকগ্রাউন্ড কালার মুছে ফেলা হলো 
           যাতে এর ::before এলিমেন্টের ওয়াটারমার্ক দৃশ্যমান হয়। */
        background: none !important; 
    }
    
    /* 🖼️ ওয়াটারমার্ক: এখন এটি দৃশ্যমান হওয়া উচিত। */
    .page::before {
        content: "";
        position: absolute;
        top: 0; 
        left: 0; 
        width: 210mm; 
        height: 297mm;
        
        background-image: url('images/watermark.png') !important; 
        background-repeat: no-repeat;
        background-size: 210mm 297mm; 
        background-position: top left; 
        
        opacity: 1.0; 
        z-index: -10; /* কন্টেন্টের নিচে থাকবে */
        
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* নিশ্চিত করা যে বিলের সব কন্টেন্ট ওয়াটারমার্কের উপরে থাকবে */
    .page main, .page footer, .page .service-id-top, .page h1, .page h3, .page p, .page table {
        position: relative;
        z-index: 10; 
        /* ✅ ফিক্স: কন্টেন্টের সাদা ব্যাকগ্রাউন্ড নিশ্চিত করা হলো (যদি প্রয়োজন হয়)
           তবে সাধারণ টেক্সটের জন্য এটি সাদা না দিলেও চলবে, কারণ পেজের ব্যাকগ্রাউন্ড ট্রান্সপারেন্ট রাখা হয়েছে। */
        /* background-color: white; /* যদি শুধুমাত্র main কন্টেন্টকে সাদা ব্যাকগ্রাউন্ড দিতে চান */
    }
    
    /* ✅ টেক্সট মার্জিন: কন্টেন্টের প্যাডিং এখানে নিশ্চিত করা হয়েছে */
    .page main {
        padding-top: 1.7in; 
        padding-bottom: 0;
        padding-left: 0.5in;
        padding-right: 0.5in;
        box-sizing: border-box;
    }
    
    /* Font and Spacing Adjustments for Print */
    .service-id-top { margin-top: -0.4in; font-size: 12pt; }
    .report-title { margin-top: 0; }
	h2 { margin-top: 10pt; margin-bottom: 5pt; font-size: 12pt; }
    h3 { margin-top: 8pt; margin-bottom: 5pt; font-size: 11pt; }
    h4 { font-size: 12pt; }
    ul, ol, p { font-size: 11pt; margin-bottom: 8pt; }
    ul li { margin-bottom: 3pt; }
    
    /* ** PRINT TABLE DESIGN ** */
    table {
        border: 1px solid #999; 
        margin: 10pt 0;
    }
    
    th {
        background-color: #00796b !important; 
        color: white !important;
        border: 1px solid #004d40 !important;
        font-size: 12pt !important;
        padding: 6pt 5pt;
    }

    td {
        border: 1px solid #ccc !important; 
        font-size: 11pt !important; 
        padding: 4pt 8pt;
    }
    
    /* Ensure Zebra Striping prints */
    tbody tr:nth-child(odd) {
        background-color: #f0f0f0 !important; 
    }
    
    .technician-checklist th, .technician-checklist td {
        font-size: 11pt !important; 
    }
    .technician-checklist td:last-child {
        text-align: center;
    }
    
    .page footer {
        bottom: 0.25in; 
        font-size: 8pt;
    }
}