/* document.css — Proposal/Invoice/Quotation. Bengali-safe by design: this is
   plain HTML rendered by the browser (proper text shaping), then the admin
   uses the browser's own Print → Save as PDF — so Bengali conjuncts/vowel
   signs always render correctly, unlike server-side PDF libraries. */　

.doc-body { background: #ECE8E0; font-family: var(--f-body); color: var(--c-ink); }
.doc-toolbar {
    position: sticky; top: 0; z-index: 10; background: var(--c-ink); color: #fff;
    padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.doc-toolbar .doc-status { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.15); }
.doc-toolbar .doc-actions { display: flex; gap: 8px; }
.doc-toolbar button, .doc-toolbar a {
    background: #fff; color: var(--c-ink); border: none; border-radius: 6px; padding: 8px 14px;
    font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none;
}
.doc-toolbar .primary { background: var(--c-primary); color: #fff; }

.doc-sheet {
    max-width: 800px; margin: 28px auto; background: #fff; padding: 44px;
    box-shadow: 0 4px 24px rgba(0,0,0,.12); min-height: 1000px; position: relative;
    display: flex; flex-direction: column;
}
.doc-letterhead { width: 100%; margin-bottom: 14px; display: block; position: relative; z-index: 1; }

/* কেন্দ্রে বড়, অস্বচ্ছ লোগো watermark — ডকুমেন্টের বাকি সব কনটেন্টের নিচে
   থাকে (z-index) যাতে টেক্সট পড়তে কোনো অসুবিধা না হয়, শুধু প্রামাণিকতার
   ছাপ দেয়। .doc-sheet-এর position:relative-এর ওপর ভিত্তি করে বসানো। */
.doc-watermark {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 55%; max-width: 340px; opacity: .06; z-index: 0; pointer-events: none;
}

.pay-row { display: flex; justify-content: space-between; font-size: 11px; padding: 1px 0; max-width: 320px; }
.pay-row span { color: var(--c-ink-soft); }
.doc-letterhead-band, .doc-title-strip, .doc-meta, .doc-items, .doc-totals, .doc-notes, .doc-sign-row, .doc-footer, .doc-letterhead {
    position: relative; z-index: 1;
}
.doc-letterhead-band { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; border-bottom: 2px solid var(--c-primary); gap: 20px; }
.doc-brand { display: flex; align-items: center; gap: 14px; }
.doc-brand img { height: 48px; width: 48px; object-fit: contain; flex: none; }
.doc-brand .name { font-family: var(--f-display); font-weight: 800; font-size: 21px; }
.doc-brand .tagline { font-size: 11px; color: var(--c-ink-soft); margin-top: 3px; max-width: 30ch; line-height: 1.4; }
.doc-contact-col { font-size: 9.5px; color: var(--c-ink-soft); line-height: 1.35; text-align: right; white-space: nowrap; }

/* ডকুমেন্ট-টাইপ/নম্বর/তারিখ — লেটারহেড ব্যান্ডের নিচে আলাদা, হালকা স্ট্রিপ,
   যাতে উপরের ব্র্যান্ডিং ব্যান্ডটা যেকোনো ডকুমেন্টে অপরিবর্তিত "খাঁটি
   লেটারহেড" হিসেবে থাকে — ইনভয়েস-নির্দিষ্ট তথ্য তার সাথে মিশে না যায়। */
.doc-title-strip { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0; }
.doc-title-strip h1 { font-family: var(--f-display); font-size: 17px; color: var(--c-primary); text-transform: uppercase; letter-spacing: .06em; }
.doc-title-strip-meta { display: flex; gap: 16px; }
.doc-title-strip-meta .num { font-size: 11px; color: var(--c-ink-soft); }

.doc-meta { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 4px; }
.doc-meta .block h4 { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-soft); margin-bottom: 4px; }
.doc-meta .block .v { font-size: 12px; line-height: 1.25; }
.doc-meta .block .v strong { display: block; font-size: 14px; }

.doc-items { width: 100%; border-collapse: collapse; margin-bottom: 8px; border: 1px solid var(--c-line); }
.doc-items th { text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--c-ink); padding: 4px 10px; }
.doc-items td { padding: 3px 10px; border-bottom: 1px solid var(--c-line); border-right: 1px solid var(--c-line); font-size: 11.5px; vertical-align: top; line-height: 1.3; }
.doc-items td:last-child, .doc-items th:last-child { border-right: none; }
.doc-items tr:last-child td { border-bottom: none; }
.doc-items tr:nth-child(even) td { background: var(--c-surface); }
.doc-items td.num, .doc-items th.num { text-align: right; white-space: nowrap; }
.doc-items td .item-desc { font-size: 11px; color: var(--c-ink-soft); margin-top: 1px; }

.doc-totals { margin-left: auto; width: 240px; margin-bottom: 2px; }
.doc-totals .row { display: flex; justify-content: space-between; padding: 2px 0; font-size: 12px; }
.doc-totals .row.grand { border-top: 2px solid var(--c-ink); margin-top: 3px; padding-top: 4px; font-weight: 800; font-size: 14px; }
.doc-totals .row.discount { color: var(--c-primary); }

.doc-notes { margin-bottom: 4px; }
.doc-notes h4 { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--c-ink-soft); margin-bottom: 3px; }
.doc-notes p { font-size: 11px; line-height: 1.4; white-space: pre-wrap; color: var(--c-ink-soft); }

.doc-sign-row { display: flex; justify-content: space-between; margin-top: 4px; gap: 40px; }
.doc-sign-col { flex: 1; text-align: center; }
/* ফিক্সড-হাইট স্লট — ছবি থাকুক বা না থাকুক, দুই কলামের "সিগনেচার লাইন"
   সবসময় একই উচ্চতায় থাকে (আগে সিল থাকলে একপাশ নিচে নেমে যেত)। */
.doc-sign-img-slot { height: 44px; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.doc-sign-img-slot img { max-height: 42px; max-width: 100%; }
.doc-seal { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); opacity: .85; z-index: 0; max-height: 44px !important; }
.doc-sign-img-slot img:not(.doc-seal) { position: relative; z-index: 1; }
.doc-sign-line { border-top: 1px solid var(--c-ink); padding-top: 4px; font-size: 10px; color: var(--c-ink-soft); margin-top: 2px; }

.doc-in-words { font-size: 10px; color: var(--c-ink-soft); margin: 0 0 5px; font-style: italic; }

.doc-footer { text-align: center; font-size: 9px; color: var(--c-ink-soft); margin-top: 10px; }

/* অফিস+ফ্যাক্টরি ঠিকানার ফুটার ব্যান্ড — আগে position:fixed ব্যবহার করা
   হতো, কিন্তু বাস্তব টেস্টে ধরা পড়েছে Chrome-এর প্রিন্ট রেন্ডারিং-এ এটা
   অনির্ভরযোগ্য (স্ক্রিনে ঠিক দেখালেও প্রিন্ট প্রিভিউ/PDF-এ প্রায়ই একদম
   দেখায়ই না)। এখন flexbox-ভিত্তিক পদ্ধতি — .doc-sheet একটা ফিক্সড-height
   flex column (প্রিন্টে), আর এই ব্যান্ডের margin-top:auto সবসময় একে সবচেয়ে
   নিচে ঠেলে দেয় — এটাই প্রিন্টে সবচেয়ে নির্ভরযোগ্য কৌশল, position:fixed-এর
   দুর্বলতা এড়িয়ে যায়। */
.doc-footer-fixed {
    margin-top: auto; padding-top: 10px;
    text-align: center; font-size: 9.5px; color: var(--c-ink-soft);
    border-top: 1px solid var(--c-line);
}
.doc-footer-fixed:empty { display: none; border-top: none; padding-top: 0; }

/* মানি রিসিপ্টে দুইটা কপি (কাস্টমার + অফিস) একই পেজে, মাঝখানে কাটা-দাগ */
.doc-copy-label {
    font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--c-primary); text-align: center; margin-bottom: 6px;
    border: 1px dashed var(--c-primary); border-radius: 4px; padding: 2px;
}
.doc-copy-divider {
    border-top: 2px dashed var(--c-line); margin: 8px 0; position: relative;
}
.doc-copy-divider::after {
    content: '✂'; position: absolute; top: -11px; left: 50%; transform: translateX(-50%) rotate(90deg);
    background: #fff; padding: 0 6px; color: var(--c-ink-soft); font-size: 14px;
}

/* প্রতিটা কপি (কাস্টমার/অফিস) নিজে যেন কখনো দুই পেজে ভাগ হয়ে না যায় —
   কম আইটেম থাকলে দুই কপি এক পেজেই থাকবে; বেশি আইটেম থাকায় যদি দুই কপি
   এক পেজে না ধরে, তাহলে ব্রাউজার পুরো দ্বিতীয় কপিটাকেই পরের পেজে নিয়ে
   যাবে — কোনো কপির অর্ধেক এক পেজে, বাকি অর্ধেক অন্য পেজে হবে না। */
.doc-copy-block {
    break-inside: avoid; page-break-inside: avoid;
}

/* ব্রাউজারের Print/Save-as-PDF ডিফল্টভাবে background color/image বাদ দিয়ে
   দেয় (যদি না ইউজার "Background graphics" অপশন চালু করে) — তাই SWOT
   কোয়াড্রেন্ট, ব্যাজ, org-chart বক্সের মতো background-নির্ভর UI প্রিন্টে সাদা
   দেখাতে পারে। এই একটা লাইন সব মডার্ন ব্রাউজারকে background রাখতে বাধ্য করে। */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }

@media print {
    .doc-toolbar { display: none; }
    .doc-body { background: #fff; }
    /* আগে এখানে flexbox + fixed height (1000px) দিয়ে ফুটার পেজের নিচে
       "পিন" করা হতো — কিন্তু real টেস্টে ধরা পড়েছে flexbox প্রিন্ট
       পেজিনেশনের (multi-page fragmentation) সাথে নির্ভরযোগ্যভাবে কাজ
       করে না (Chrome-এর পরিচিত সীমাবদ্ধতা) — তাই দুই কপির ডকুমেন্টে
       (রিসিপ্ট/চালান) দ্বিতীয় কপি এক পেজের মাঝখানে কাটা পড়ে যাচ্ছিল,
       break-inside:avoid থাকা সত্ত্বেও। এখন normal block flow ব্যবহার
       করা হচ্ছে (flex/fixed-height বাদ) — এতে break-inside:avoid সঠিকভাবে
       কাজ করে, প্রতিটা কপি অক্ষত থাকে। বিনিময়ে ফুটার আর ঠিক পেজের একদম
       নিচেই "পিন" থাকে না (ছোট কনটেন্টে সামান্য উপরে থাকতে পারে) —
       কিন্তু কপি ভেঙে যাওয়ার চেয়ে এটা অনেক বেশি নিরাপদ। */
    .doc-sheet { box-shadow: none; margin: 0; max-width: 100%; padding: 18px 30px; min-height: 0; height: auto; display: block; }
    .doc-footer-fixed { margin-top: 16px !important; }
    @page { margin: 10mm 10mm 12mm; }
}

/* ==================================================================
   মোবাইল স্ক্রিন — এতদিন এই ফাইলে শুধু @media print ছিল, স্বাভাবিক
   ব্রাউজার ভিউয়ের জন্য কোনো ছোট-স্ক্রিন নিয়ম ছিলই না। তাই .doc-sheet-এর
   ৪৪px প্যাডিং + লেটারহেড-ব্যান্ডের পাশাপাশি (nowrap) কন্টাক্ট-কলাম +
   ৪-কলাম টেবিল — সবমিলিয়ে মোবাইলে পেজ সাইড থেকে বেরিয়ে যাচ্ছিল
   (স্ক্রিনশট টেস্টে ৩৯০px স্ক্রিনে ৪৮৯px চওড়া কনটেন্ট, ৯৯px overflow)।
   এখন real মোবাইল ভিউপোর্টে টেস্ট করে ঠিক করা হলো। প্রিন্ট/PDF আউটপুট
   এই ব্লকের বাইরে, তাই অপরিবর্তিত থাকে। ================================ */
@media screen and (max-width: 640px) {
    .doc-toolbar { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
    .doc-toolbar span { font-size: 13px; }
    .doc-toolbar .doc-actions { flex-wrap: wrap; width: 100%; }
    .doc-toolbar button, .doc-toolbar a { flex: 1; text-align: center; padding: 9px 10px; font-size: 12.5px; }

    .doc-sheet { margin: 12px 8px; padding: 16px 14px; min-height: 0; }
    .doc-watermark { width: 75%; }

    /* লেটারহেড ব্যান্ড — পাশাপাশি না রেখে স্ট্যাক করা, কন্টাক্ট-কলাম বাম-ঘেঁষা
       ও wrap করার অনুমতি (আগে nowrap ছিল, যেটাই মূল overflow-এর একটা কারণ) */
    .doc-letterhead-band { flex-direction: column; align-items: flex-start; gap: 10px; }
    .doc-brand img { height: 38px; width: 38px; }
    .doc-brand .name { font-size: 17px; }
    .doc-contact-col { text-align: left; white-space: normal; font-size: 10.5px; }

    .doc-title-strip { flex-direction: column; align-items: flex-start; gap: 4px; }
    .doc-title-strip-meta { gap: 10px; }

    .doc-meta { flex-direction: column; gap: 10px; }
    .doc-meta .block { text-align: left !important; }

    /* ৪-কলাম টেবিল ছোট স্ক্রিনে পুরোটা আঁটবে না — পুরো পেজ ভাঙার বদলে
       শুধু টেবিলটাকেই সাইডওয়েজ স্ক্রলযোগ্য করা হলো, একটা প্রচলিত ও
       নিরাপদ মোবাইল প্যাটার্ন */
    .doc-items-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px; }
    .doc-items { margin-bottom: 0; min-width: 480px; }

    .doc-totals { width: 100%; max-width: 260px; }
    .doc-sign-row { gap: 16px; }
    .doc-sign-col { font-size: 11px; }
}