/* ===== Invoice generator tool UI (inv-) — page chrome, editor, list, print =====
   The invoice PAPER look lives in _base.css + the selected template. This file
   is only the tool's own interface (cards, forms, list page, modals, print). */

.inv-field label { font-size: .78rem; font-weight: 600; color: var(--bs-gray-700); margin-bottom: 3px; }
.inv-field .form-control, .inv-field .form-select { font-size: .85rem; }
.inv-card { border: 1px solid var(--bs-border-color); border-radius: 14px; background: #fff; }
.inv-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--bs-border-color); }
.inv-card-head .ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex: 0 0 auto; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); }
.inv-card-head h6 { margin: 0; font-size: .9rem; font-weight: 600; color: var(--bs-gray-900); }
.inv-card-body { padding: 16px; }

/* Item rows editor */
.inv-items { width: 100%; border-collapse: collapse; font-size: .8rem; }
.inv-items th { font-size: .68rem; text-transform: uppercase; letter-spacing: .02em; color: var(--bs-gray-600); font-weight: 600; padding: 6px 6px; text-align: left; white-space: nowrap; }
.inv-items td { padding: 4px 4px; vertical-align: middle; }
.inv-items .form-control, .inv-items .form-select { font-size: .8rem; padding: .3rem .5rem; height: auto; }
.inv-items .num { text-align: right; }
.inv-del { border: 0; background: transparent; color: var(--bs-gray-400); width: 30px; height: 30px; border-radius: 7px; }
.inv-del:hover { background: #fde8e8; color: var(--bs-danger); }

/* Invoice preview shell + style picker */
.inv-preview-wrap { position: sticky; top: 20px; }
.inv-muted { color: #8b95a1; }

/* Logo uploader (form side) */
.inv-logo-row { display: flex; gap: 12px; align-items: center; }
.inv-logo-prev { width: 64px; height: 64px; border: 1px dashed var(--bs-border-color); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--bs-gray-400); font-size: 1.4rem; overflow: hidden; flex: 0 0 auto; background: #fff; }
.inv-logo-prev img { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; object-fit: contain !important; border-radius: 0 !important; }
.inv-logo-actions { flex: 1; min-width: 0; }

/* Toolbar card (style dropdown + actions) above the preview */
.inv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.inv-stylebar { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.inv-stylebar label { font-size: .8rem; font-weight: 600; color: var(--bs-gray-700); margin: 0; white-space: nowrap; }
.inv-stylebar select { min-width: 0; flex: 1; max-width: 320px; }
.inv-toolbar-actions { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }

/* Validation feedback (GSTIN / HSN) */
.inv-bad { border-color: #ed4c78 !important; }
.inv-good { border-color: #00c9a7 !important; }
.inv-gfb { line-height: 1.2; }
.inv-gfb .ok { color: #12854f; }
.inv-gfb .err { color: #d63384; }

/* Left-side invoice actions bar */
.inv-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-savestatus { margin-left: auto; font-size: .78rem; color: var(--bs-gray-500); white-space: nowrap; }

/* Item description/note toggle */
.it-descwrap { display: flex; gap: 4px; align-items: center; }
.it-descwrap .it-desc { flex: 1; min-width: 0; }
.it-notebtn { border: 0; background: transparent; color: var(--bs-gray-500); width: 26px; height: 26px; border-radius: 6px; flex: 0 0 auto; padding: 0; }
.it-notebtn:hover { background: var(--bs-gray-200); color: var(--bs-primary); }
.it-notebtn.active { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .12); }
.it-note { margin-top: 4px; font-size: .78rem; }

/* Extra charges rows (label + amount) */
.ch-row { display: flex; gap: 8px; margin-bottom: 6px; }
.ch-row .ch-label { flex: 1; min-width: 0; }
.ch-row .ch-amt { width: 130px; flex: 0 0 auto; text-align: right; }

/* Document-type segmented pills (one line) */
.inv-doctype { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-dt { border: 1px solid var(--bs-border-color); background: #fff; color: var(--bs-gray-700); border-radius: 999px; padding: 5px 14px; font-size: .82rem; line-height: 1.3; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.inv-dt:hover { border-color: var(--bs-gray-400); }
.inv-dt.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; font-weight: 600; }

/* Editor modal: two-column form grid (not tall single-column boxes) */
.inv-editgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; background: #f4f5f7; padding: 18px; }
.inv-editgrid > .inv-card { margin-bottom: 0 !important; background: #fff; box-shadow: 0 1px 3px rgba(16, 30, 54, .07); }
.inv-editgrid > .inv-span2 { grid-column: 1 / -1; }
.inv-editgrid > .inv-first { order: -1; } /* Document Details sits at the top */
.inv-editgrid > .inv-charges { order: 1; } /* Charges to the right of Notes on the same row */
@media (max-width: 767.98px) { .inv-editgrid { grid-template-columns: 1fr; } }

/* SEO content + FAQ */
.inv-seo { max-width: 900px; margin: 0 auto; color: var(--bs-gray-800); }
.inv-seo h1, .inv-seo h2 { color: var(--bs-gray-900); }
.inv-seo p, .inv-seo li { line-height: 1.7; }
.inv-seo-list, .inv-seo-features { padding-left: 1.1rem; }
.inv-seo-list li, .inv-seo-features li { margin-bottom: 6px; }
.inv-faq { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.inv-faq details { border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 12px 14px; background: #fff; }
.inv-faq summary { font-weight: 600; color: var(--bs-gray-900); cursor: pointer; list-style: none; position: relative; padding-right: 24px; }
.inv-faq summary::-webkit-details-marker { display: none; }
.inv-faq summary::after { content: "\F282"; font-family: "bootstrap-icons"; position: absolute; right: 0; top: 0; color: var(--bs-gray-500); transition: transform .2s; }
.inv-faq details[open] summary::after { transform: rotate(180deg); }
.inv-faq details > div { margin-top: 8px; color: var(--bs-gray-700); line-height: 1.6; }

/* List page: header + controls + table */
.inv-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 20px; border-bottom: 1px solid var(--bs-border-color); }
.inv-listtitle { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--bs-gray-900); display: flex; align-items: center; gap: 8px; }
.inv-listtitle i { color: var(--bs-primary); }
.inv-countbadge { font-size: .78rem; font-weight: 600; color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .1); border-radius: 999px; padding: 2px 10px; }
.inv-listsub { font-size: .8rem; color: var(--bs-gray-600); margin-top: 2px; }
.inv-listctrls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--bs-border-color); background: var(--bs-gray-100); }
.inv-listctrls #listFilter { flex: 0 1 auto; min-width: 190px; max-width: 320px; }
.inv-listctrls #btnExcel { margin-left: auto; }
.inv-listbody { padding: 6px 20px 18px; }
.inv-search { position: relative; flex: 1; min-width: 200px; max-width: 380px; }
.inv-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--bs-gray-500); }
.inv-search input { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 1px solid var(--bs-border-color); border-radius: 10px; font-size: .875rem; }
.inv-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.inv-count { font-size: .8rem; color: var(--bs-gray-600); }
.inv-pgbtns { display: flex; align-items: center; gap: 8px; }
.inv-pgnum { font-size: .8rem; color: var(--bs-gray-700); white-space: nowrap; }
.inv-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.inv-table th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .02em; color: var(--bs-gray-600); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--bs-border-color); white-space: nowrap; }
.inv-table td { padding: 10px; border-bottom: 1px solid var(--bs-border-color); vertical-align: middle; }
.inv-table tr:hover td { background: var(--bs-gray-100); }
.inv-table .r { text-align: right; white-space: nowrap; }
.inv-table .name { font-weight: 600; color: var(--bs-gray-900); }
.inv-rowacts { display: flex; gap: 4px; justify-content: flex-end; }
.inv-rowacts .btn { padding: 4px 8px; }
.inv-empty { text-align: center; color: var(--bs-gray-600); padding: 40px 16px; }
.inv-empty i { font-size: 2rem; color: var(--bs-gray-400); display: block; margin-bottom: 8px; }
.inv-doctag { font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .1); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }

/* Print: render ONLY a dedicated print target so nothing else adds page height. */
#printArea { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  body > *:not(#printArea) { display: none !important; }
  #printArea { display: block !important; }
  #printArea.inv-paper { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
}