/* ==========================================================================
   Documents module — template picker cards + 6 live document editors
   (ROI, Proforma Invoice, Costing Estimate/BOM, Delivery Challan,
   Demonstration Report, Installation & Commissioning Report).
   Reuses the .qd-doc* base styling from quotation-doc.css (letterhead,
   editable inputs, items table, sign block, print base) and adds the
   layout pieces those three quotation formats don't need.
   ========================================================================== */

.doc-tpl-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: var(--sp-4);
   margin-bottom: var(--sp-6);
}

.doc-tpl-card {
   border: 1.5px solid var(--border);
   border-radius: var(--radius-lg);
   padding: var(--sp-5);
   cursor: pointer;
   transition: border-color var(--transition), background var(--transition), transform var(--transition);
   display: flex;
   flex-direction: column;
   gap: 8px;
   background: var(--surface);
}

.doc-tpl-card:hover {
   border-color: var(--primary);
   background: var(--primary-soft);
   transform: translateY(-2px);
}

.doc-tpl-card-icon {
   width: 36px;
   height: 36px;
   border-radius: var(--radius-md);
   background: var(--primary-soft);
   color: var(--primary);
   display: flex;
   align-items: center;
   justify-content: center;
}

.doc-tpl-card-title {
   font-weight: 700;
   font-size: 14px;
   color: var(--text);
}

.doc-tpl-card-hint {
   font-size: 12px;
   color: var(--text-muted);
   line-height: 1.5;
}

/* ---------- Fixed company letterhead ----------
   The Documents module displays the official company letterhead image
   (RICL, UAF, ES monogram, company name, address, GSTIN, email). */
.qd-doc-letterhead {
   text-align: center;
   padding-bottom: 10px;
   margin-bottom: 14px;
   border-bottom: 2.5px solid var(--qd-navy, #173a63);
}

.qd-doc-letterhead img {
   display: block;
   width: 100%;
   max-width: 820px;
   height: auto;
   margin: 0 auto;
}

/* ---------- Two-column info box (Proforma customer/PO block, Challan supplier/delivery block) ---------- */
.qd-doc-info-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0;
   border: 1px solid var(--qd-line, #d7dbe3);
   border-radius: 4px;
   overflow: hidden;
   margin-bottom: 10px;
}

.qd-doc-info-cell {
   padding: 7px 9px;
   border-bottom: 1px solid var(--qd-line, #d7dbe3);
}

.qd-doc-info-grid .qd-doc-info-cell:nth-last-child(-n+2) {
   border-bottom: none;
}

.qd-doc-info-cell:nth-child(odd) {
   border-right: 1px solid var(--qd-line, #d7dbe3);
}

.qd-doc-info-label {
   font-weight: 700;
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: var(--qd-navy, #173a63);
   display: block;
   margin-bottom: 2px;
}

.qd-doc-info-cell.span-2 {
   grid-column: 1 / -1;
   border-right: none;
}

/* ---------- Formula table (ROI) ----------
   Same navy/maroon language as the rest of the document system: navy
   header band, maroon for the final "Rounded to" outcome. */
.qd-doc-formula-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 10px;
}

.qd-doc-formula-table th,
.qd-doc-formula-table td {
   border: 1px solid var(--qd-line, #d7dbe3);
   padding: 7px 9px;
   font-size: 11.5px;
}

.qd-doc-formula-table th {
   background: var(--qd-navy, #173a63);
   font-weight: 700;
   text-align: center;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 0.02em;
   font-size: 10.5px;
}

.qd-doc-formula-table td.num {
   text-align: right;
   white-space: nowrap;
}

.qd-doc-formula-table td.formula {
   text-align: center;
   color: var(--qd-muted, #667085);
   font-style: italic;
}

.qd-doc-formula-table td:nth-child(4) {
   color: var(--qd-navy, #173a63);
   font-weight: 700;
}

.qd-doc-formula-table td:nth-child(4) input {
   color: var(--qd-navy, #173a63);
   font-weight: 700;
}

.qd-doc-formula-table tr.highlight td {
   font-weight: 800;
   background: var(--qd-band, #f4f6fb);
}

.qd-doc-formula-table tr.highlight td:nth-child(5) {
   color: var(--qd-maroon, #9c1d2e);
}

/* ---------- Mode-reading grid (Demo Report / Installation Report) ----------
   Demo Report still needs its two comparison blocks visually distinct —
   kept as a warm/cool pairing (maroon vs. a teal-green) rather than the
   old pure red/green so it stays in the same restrained palette. */
.qd-doc-mode-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 10px;
}

.qd-doc-mode-table th,
.qd-doc-mode-table td {
   border: 1px solid var(--qd-line, #d7dbe3);
   padding: 6px 7px;
   font-size: 11px;
   text-align: center;
}

.qd-doc-mode-table th {
   background: var(--qd-band, #f4f6fb);
   font-weight: 700;
}

.qd-doc-mode-table td.row-label {
   font-weight: 700;
   background: var(--qd-band, #f4f6fb);
   width: 70px;
}

.qd-doc-mode-table td.phase-cell {
   padding: 2px;
}

.qd-doc-mode-table .phase-row {
   display: flex;
   align-items: center;
   gap: 4px;
   border-bottom: 1px solid var(--qd-line, #d7dbe3);
}

.qd-doc-mode-table .phase-row:last-child {
   border-bottom: none;
}

.qd-doc-mode-table .phase-label {
   width: 16px;
   font-weight: 700;
   color: var(--qd-muted, #667085);
   flex-shrink: 0;
}

.qd-doc-mode-table-title {
   text-align: center;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.03em;
   font-size: 11px;
   background: var(--qd-band, #f4f6fb);
   border: 1px solid var(--qd-line, #d7dbe3);
   border-bottom: none;
   padding: 6px;
}

.qd-doc-diff-line {
   border: 1px solid var(--qd-line, #d7dbe3);
   border-top: none;
   padding: 7px 9px;
   font-weight: 700;
   margin-bottom: 10px;
}

.qd-doc-mode-bypass .qd-doc-mode-table-title,
.qd-doc-mode-bypass .qd-doc-mode-table th,
.qd-doc-mode-bypass .qd-doc-mode-table td.row-label,
.qd-doc-mode-bypass .qd-doc-diff-line {
   color: var(--qd-maroon, #9c1d2e);
}

.qd-doc-mode-saver .qd-doc-mode-table-title,
.qd-doc-mode-saver .qd-doc-mode-table th,
.qd-doc-mode-saver .qd-doc-mode-table td.row-label,
.qd-doc-mode-saver .qd-doc-diff-line {
   color: #0f766e;
}

/* Installation report keeps a distinct title accent, in maroon instead of the old flat red */
.qd-doc-title-bar.title-red {
   color: var(--qd-maroon, #9c1d2e);
}

.qd-doc-title-bar.title-red::after {
   background: var(--qd-maroon, #9c1d2e);
}

.qd-doc-title-bar.title-plain {
   text-decoration: none;
}

/* ---------- Editor toolbar (template label + reference/title field) ---------- */
.doc-editor-meta-bar {
   display: flex;
   gap: var(--sp-5);
   flex-wrap: wrap;
   align-items: flex-end;
   margin-bottom: var(--sp-5);
   padding-bottom: var(--sp-4);
   border-bottom: 1px dashed var(--border-strong);
}

.doc-editor-meta-bar .field {
   margin-bottom: 0;
   min-width: 220px;
}

/* The generic "hide everything except the open modal" isolation lives once
   in components.css, shared by every document type — see the comment
   there for why it can't be duplicated per-file with an id-specific
   :not() selector (the stylesheets all load globally and the rules
   collide with each other). */
@media print {
   #docPreviewBody {
      padding: 0;
   }

   .qd-doc {
      border: none;
      box-shadow: none;
      border-radius: 0;
      padding: 0;
   }

   .qd-doc-formula-table thead,
   .qd-doc-mode-table thead,
   .qd-doc-items-table thead {
      display: table-header-group;
   }

   .qd-doc-formula-table tr,
   .qd-doc-mode-table tr,
   .qd-doc-items-table tr {
      break-inside: avoid;
   }

   .qd-doc-letterhead,
   .qd-doc-sign {
      break-inside: avoid;
   }

   .qd-doc-letterhead img {
      max-width: 100%;
      width: 100%;
   }
}