/* ────────────────────────────────────────────────────────────────────────────
   invoice.css — A4 invoice preview styles
   Port of: devis-app/src/components/invoice/InvoicePreview.vue <style scoped>
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── Paper wrapper ─────────────────────────────────────────────────────── */
.paper-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: #e5e7eb;
  min-height: 100%;
}
.paper-wrapper.print-mode {
  background: none;
  padding: 0;
  gap: 0;
}

/* ─── A4 page ────────────────────────────────────────────────────────────── */
.a4-page {
  width: 210mm;
  min-height: 297mm;
  background: #fff;
  color: var(--inv-text, #111827);
  color-scheme: light;
  font-family: var(--inv-font-primary, Helvetica, sans-serif);
  font-size: var(--inv-font-size, 10px);
  line-height: var(--inv-line-height, 1.5);
  padding: var(--inv-padding, 20mm);
  box-shadow: 0 4px 24px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Force white/light theme inside page regardless of app dark mode */
  --color-text: var(--inv-text, #111827);
  --color-text-muted: var(--inv-secondary, #6b7280);
  --color-bg: #fff;
  --color-surface: #fff;
  --color-border: #d1d5db;
}
.print-mode .a4-page {
  box-shadow: none;
  border-radius: 0;
  margin: 0;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.inv-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--inv-gap, 16px);
  gap: 20px;
}
.inv-header.logo-right   { flex-direction: row-reverse; }
.inv-header.logo-center  { flex-direction: column; align-items: center; text-align: center; }

.inv-brand            { display: flex; align-items: flex-start; gap: 12px; }
.inv-logo             { max-width: 80px; max-height: 60px; object-fit: contain; transform-origin: top left; }
.inv-company-name     { font-size: 1.6em; font-weight: 700; color: var(--inv-primary); }
.inv-company-details  { display: flex; flex-direction: column; font-size: 0.85em; color: var(--inv-secondary); margin-top: 2px; }

.inv-doc-info         { text-align: right; flex-shrink: 0; }
.inv-header.logo-center .inv-doc-info { text-align: center; }
.inv-doc-type         { font-size: 2em; font-weight: 700; letter-spacing: 0.05em; color: var(--inv-primary); }
.inv-doc-numero       { font-size: 1.1em; color: var(--inv-secondary); margin-bottom: 4px; }
.inv-doc-dates        { display: flex; flex-direction: column; font-size: 0.85em; color: var(--inv-secondary); }

/* ─── Watermark ──────────────────────────────────────────────────────────── */
.inv-watermark {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-size: 120px; font-weight: 900; color: rgba(0,0,0,.10);
  letter-spacing: 0.15em;
  pointer-events: none; white-space: nowrap; z-index: 0;
  user-select: none;
}

/* ─── Client block ───────────────────────────────────────────────────────── */
.inv-client-block {
  margin-bottom: var(--inv-gap, 16px);
  padding: 10px 14px 10px 16px;
  border-left: 4px solid var(--inv-primary);
  background-color: var(--inv-client-bg, rgba(30, 58, 95, 0.06));
}
.inv-client-label   { font-size: 0.8em; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--inv-primary); margin-bottom: 4px; }
.inv-client-name    { font-size: 1.1em; font-weight: 600; color: var(--inv-text); }
.inv-client-company { font-size: 0.9em; color: var(--inv-text); }
.inv-client-addr,
.inv-client-email   { font-size: 0.85em; color: var(--inv-secondary); }

/* ─── Objet ──────────────────────────────────────────────────────────────── */
.inv-objet { margin-bottom: var(--inv-gap, 16px); font-size: 0.95em; color: var(--inv-text); }

/* ─── Table ──────────────────────────────────────────────────────────────── */
.inv-table              { width: 100%; border-collapse: collapse; margin-bottom: var(--inv-gap, 16px); font-size: 0.9em; }
.inv-table th           { text-align: left; font-weight: 600; padding: 8px 6px; font-size: 0.85em; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.inv-table td           { padding: 7px 6px; vertical-align: middle; color: var(--inv-text); }
.inv-table .col-qte,
.inv-table .col-pu,
.inv-table .col-rem,
.inv-table .col-tva,
.inv-table .col-total   { text-align: right; white-space: nowrap; }
.inv-table .col-desc    { width: 40%; }

/* Table style: striped */
.table-striped tbody tr:nth-child(even) { background: var(--inv-row-bg, rgba(0,0,0,.025)); }
.table-striped thead th                 { border-bottom: 2px solid var(--inv-primary); }

/* Table style: bordered */
.table-bordered,
.table-bordered th,
.table-bordered td      { border: 1px solid #d1d5db; }

/* Table style: minimal */
.table-minimal tbody tr            { border-bottom: 1px solid #e5e7eb; }
.table-minimal tbody tr:last-child { border-bottom: none; }
.table-minimal thead th            { border-bottom: 1px solid var(--inv-secondary); }

/* Header style: filled */
.header-filled th  { background: var(--inv-primary); color: #fff; border-color: var(--inv-primary); }

/* Header style: underline */
.header-underline th { color: var(--inv-primary); border-bottom: 2px solid var(--inv-primary); background: transparent; }

/* Header style: none */
.header-none th    { color: var(--inv-secondary); border-bottom: 1px solid #e5e7eb; background: transparent; }

/* ─── Spacer ─────────────────────────────────────────────────────────────── */
.inv-spacer { flex: 1; min-height: 16px; }

/* ─── Totaux ─────────────────────────────────────────────────────────────── */
.inv-totaux         { display: flex; justify-content: flex-end; margin-bottom: var(--inv-gap, 16px); }
.inv-totaux-table   { width: 220px; display: flex; flex-direction: column; gap: 4px; }
.inv-row            { display: flex; justify-content: space-between; font-size: 0.9em; padding: 2px 0; color: var(--inv-text); }
.inv-row.remise     { color: #b91c1c; }
.inv-row.total-ttc  {
  font-size: 1.3em; font-weight: 800;
  color: var(--inv-accent, var(--inv-primary));
  padding-top: 6px; margin-top: 4px;
  border-top: 2px solid var(--inv-primary);
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.inv-footer         { padding-top: var(--inv-gap, 16px); border-top: 1px solid #e5e7eb; font-size: 0.8em; color: var(--inv-secondary); }
.inv-footer-section { margin-bottom: 6px; }
.inv-tax-numbers    { display: flex; gap: 16px; margin-top: 8px; font-size: 0.9em; }

/* ─── Continuation page mini-header ──────────────────────────────────────── */
.inv-cont-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb;
}
.inv-cont-title    { font-size: 1.1em; font-weight: 600; color: var(--inv-primary); }
.inv-cont-subtitle { font-size: 0.85em; color: var(--inv-secondary); }

/* ─── Page number ────────────────────────────────────────────────────────── */
.inv-page-num {
  position: absolute; bottom: 10mm; right: var(--inv-padding, 20mm);
  font-size: 0.75em; color: var(--inv-secondary);
}

/* ─── Section row (text dividers in table) ───────────────────────────────── */
.inv-section-row td {
  font-weight: 700;
  color: var(--inv-primary);
  background: rgba(0,0,0,.03);
  border-top: 1px solid var(--inv-primary) !important;
  padding-top: 10px !important;
}

/* ─── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .paper-wrapper {
    background: none !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .a4-page {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    break-after: page;
  }
  .no-print { display: none !important; }
}