/* ══════════════════════════════════════════════════════
   theme-preview.css — InvoiceFlow Pro v3
   Preview document styles — invoice, quote, challan etc
   ══════════════════════════════════════════════════════ */

/* ══ PREVIEW PANE BODY ══ */
.ppb {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* ══ DOC WRAPPER ══ */
.doc-wrap {
  background: white;
  font-size: 11px;
  line-height: 1.5;
  border-radius: 8px;
  box-shadow: var(--sh2);
  padding: 20px;
}

.doc-biz {
  font-size: 17px;
  font-weight: 800;
  color: var(--s2);
  letter-spacing: -.3px;
}

.doc-meta {
  font-size: 9px;
  color: var(--s4);
  margin-top: 1px;
}

.doc-stripe {
  height: 4px;
  border-radius: 2px;
  margin: 9px 0;
}

.doc-badge {
  display: inline-block;
  padding: 3px 13px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: white;
}

.doc-g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 8px 0;
}

.doc-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}

.doc-val {
  font-weight: 600;
  font-size: 10.5px;
  color: var(--s2);
  margin-top: 1px;
}

/* ══ PREVIEW TABLE ══ */
.ptab {
  width: 100%;
  border-collapse: collapse;
  margin: 9px 0;
  font-size: 10px;
}

.ptab th {
  background: var(--am-bg);
  color: var(--am);
  padding: 6px 7px;
  text-align: left;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 2px solid rgba(245,158,11,.25);
}

.ptab td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}

.ptab tr:nth-child(even) td { background: var(--pu-bg); }

/* ══ DOC TOTALS ══ */
.doc-tots {
  margin-left: auto;
  width: 175px;
  margin-top: 7px;
}

.doc-tr {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 9.5px;
}

.doc-grand {
  border-top: 2px solid var(--s2);
  margin-top: 4px;
  padding-top: 5px;
  font-weight: 800;
  font-size: 12px;
  color: var(--pu);
}

/* ══ DOC BANK ══ */
.doc-bank {
  background: var(--in-bg);
  border: 1px solid rgba(79,70,229,.2);
  border-radius: 6px;
  padding: 8px 11px;
  margin: 8px 0;
  font-size: 9px;
}

.doc-bank-title {
  font-weight: 700;
  color: var(--in);
  margin-bottom: 4px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.doc-bank-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--s3);
}

.doc-bank-item { display: flex; gap: 4px; }

.doc-bank-key {
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ══ DOC PAYMENT ══ */
.doc-pay {
  background: var(--pu-bg);
  border-radius: 6px;
  padding: 8px 11px;
  margin: 7px 0;
  font-size: 9px;
  text-align: center;
  border: 1px solid rgba(124,58,237,.15);
}

.doc-pay-gws {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 5px;
}

.doc-gw {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
  color: white;
  transition: all .15s;
}

.doc-gw:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 9px rgba(0,0,0,.2);
}

/* ══ DOC IRN / EWB ══ */
.doc-irn {
  background: #F0FDF4;
  border-radius: 4px;
  padding: 5px 9px;
  font-family: var(--mono);
  font-size: 7.5px;
  color: var(--gr);
  word-break: break-all;
  margin: 4px 0;
}

.doc-ewb {
  background: var(--am-bg);
  border-radius: 4px;
  padding: 4px 9px;
  font-family: var(--mono);
  font-size: 8px;
  color: var(--am);
  margin: 3px 0;
}

/* ══ DOC FOOTER ══ */
.doc-footer {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 8px;
  color: var(--muted);
  text-align: center;
}

/* ══ DOC CLIENT BANK ══ */
.doc-client-bank {
  background: var(--te-bg);
  border: 1px solid rgba(13,148,136,.2);
  border-radius: 6px;
  padding: 8px 11px;
  margin: 7px 0;
  font-size: 9px;
}

/* ══ DOC LOGISTICS ══ */
.doc-logistics {
  background: var(--in-bg);
  border-radius: 5px;
  padding: 5px 9px;
  font-size: 9px;
  color: var(--in);
  margin: 4px 0;
}

/* ══ DOC FX ══ */
.doc-fx {
  background: var(--am-bg);
  border-radius: 5px;
  padding: 5px 9px;
  font-size: 9px;
  color: #92400E;
  margin: 4px 0;
  font-family: var(--mono);
}

@media print {

  #fpane,
  #admin-panel,
  #approvals-panel,
  #approval-bar,
  #approval-badge-container,
  #approval-panel-container,
  #my-docs-pill,
  #my-docs-modal-overlay,
  #my-docs-status-popup,
  .view-sel,
  .cstrip,
  .topbar,
  .nav,
  .sidebar,
  header,
  footer {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  #main-body { display: block !important; }
  #ppane     { display: block !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }

  #ppb {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background: #fff !important;
  }

  @page {
    size: A4 portrait;
    margin: 10mm;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

}