@charset "UTF-8";
:root {
  /* ---- surfaces ---- */
  --bg: #191321; /* page canvas */
  --surface: #241d33; /* raised chrome (app-bar band) */
  --surface-raised: #1e1730; /* step card / summary body */
  --surface-item: #221a31; /* an active line-item / new-product row */
  --surface-dim: #181022; /* a collapsed / dim / bill-to note row */
  --summary-head: #4d3d70; /* summary header band */
  /* ---- lines ---- */
  --border: rgba(255, 255, 255, .14);
  --border-strong: rgba(255, 255, 255, .22);
  /* ---- text ---- */
  --text: #d3d3d3;
  --text-strong: #ffffff;
  --muted: #a0a0a0;
  /* ---- brand purples ---- */
  --accent: #973bfc; /* PRIMARY — CTAs, bright links */
  --accent-muted: #8a72b0; /* secondary borders, selected outlines */
  --accent-text: #c0acdc; /* purple-tinted text (group titles, tags) */
  --accent-contrast: #ffffff;
  --success: #6fa085; /* renewal / applied green */
  --anno: #b0946a; /* amber annotation ink */
  --teal: #4fd1c5; /* portal subscription-action links */
  /* ---- shape ---- */
  --radius: 8px; /* outer step cards + summary */
  --radius-sharp: 0; /* brand square corners: buttons, steppers, line items */
  /* ---- layout widths (Metalama Design System) ---- */
  --container-wide: 1620px; /* desktop wide box */
  --container: 1400px; /* homepage section container */
  --container-narrow: 1000px; /* prose / focused content column */
  --gutter: 15px;
  --header-height: 85px;
  /* ---- spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  /* ---- type: families (Metalama Design System) ---- */
  --font-sans: "LatoLatin", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Monosten", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* ---- type: modular scale (Metalama Design System — base 16px, ratio 1.25). Every font-size in the store snaps
     to one of these tokens; nothing sets a raw px size. ---- */
  --fs-base: 16px;
  --fs-sm: 12.8px; /* small labels, eyebrows, captions, table cells */
  --fs-md: 16px; /* body copy, inputs, UI text */
  --fs-lg: 20px; /* leads, step titles, brand */
  --fs-h6: 16px;
  --fs-h5: 20px;
  --fs-h4: 25px; /* section titles */
  --fs-h3: 31.25px;
  --fs-h2: 39px;
  --fs-h1: 48.8px;
  --fs-display: 64px;
  /* ---- type: weights ---- */
  --fw-normal: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800; /* uppercase button labels */
  /* ---- type: line heights ---- */
  --lh-tight: 1.05; /* display headings */
  --lh-snug: 1.2;
  --lh-normal: 1.4;
  --lh-relaxed: 1.6; /* body copy */
  /* ---- type: letter spacing ---- */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em; /* uppercase button labels */
}

/* ---- screen/print visibility toggles (ported from the legacy .screen-only / .print-only classes) ---- */
.print-only {
  display: none;
}

/* ---- page + heading (on the store's dark canvas) ---- */
.sale-doc-page {
  min-height: 100vh;
}

.sale-doc-container {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-6);
}

.sale-doc-heading {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.sale-doc-heading h1 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-mono);
}

.sale-doc-logo {
  width: 180px;
  height: auto;
}

/* ---- the document "sheet": always black on white so it reads like paper ---- */
.sale-doc {
  background: #fff;
  color: #000;
  padding: var(--space-6);
  border-radius: var(--radius);
}

.sale-doc-band {
  padding-top: var(--space-5);
}
.sale-doc-band:first-child {
  padding-top: 0;
}
.sale-doc-band h2 {
  margin: 0 0 var(--space-2);
  color: #000;
}

/* ---- customer / reseller / supplier / reference header band ---- */
.sale-doc-parties {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-5);
}

.sale-doc-party-label {
  margin: 0 0 var(--space-1);
}

.sale-doc-reference {
  min-width: 320px;
}
.sale-doc-reference table {
  border-collapse: collapse;
}
.sale-doc-reference td {
  padding: 2px 0;
  vertical-align: top;
}

.sale-doc-ref-key {
  width: 150px;
  font-weight: 700;
  padding-right: var(--space-4);
}

/* ---- line-item + totals tables (black borders, light-grey header — matches the legacy report) ---- */
.sale-doc-table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}
.sale-doc-table th {
  background-color: lightgrey;
  font-weight: 700;
  border: 1px solid #000;
  padding: 5px 5px 10px;
}
.sale-doc-table td {
  background-color: #fff;
  border: 1px solid #000;
  padding: 5px;
  vertical-align: top;
}
.sale-doc-table .text {
  text-align: left;
}
.sale-doc-table .num,
.sale-doc-table .money {
  text-align: right;
  white-space: nowrap;
}
.sale-doc-table p {
  margin: 0;
}

.sale-doc-comment {
  font-size: 80%;
}

.sale-doc-totals {
  width: 30%;
  margin-left: 70%;
}

.sale-doc-total-label,
.sale-doc-total-value {
  font-weight: 700;
}

/* ---- legal notices / payment instructions ---- */
.sale-doc-notices {
  color: #000;
}

.sale-doc-notice-title {
  margin: 0 0 var(--space-1);
}

.sale-doc-notice {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
}
.sale-doc-notice a {
  color: #000;
  text-decoration: underline;
}

/* ---- actions + errors (screen only) ---- */
.sale-doc-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.sale-doc-error {
  margin-top: var(--space-5);
  color: #b3524f;
  font-weight: 700;
}
.sale-doc-error p {
  margin: 0 0 var(--space-2);
}

/* ================================================================================================
   Print — strip the store chrome and lay the document out as a clean, black-on-white paper page.
   ================================================================================================ */
@media print {
  /* Hide everything that is web-only: the app-bar, the portal side menu, action buttons, on-screen hints/errors. */
  .appbar,
  .portal-menu,
  .screen-only,
  .sale-doc-actions {
    display: none !important;
  }
  /* Reveal the print-only header logo (the real, full-colour PostSharp logo). */
  .print-only {
    display: block !important;
  }
  /* White page, black ink everywhere — override the store's dark theme. */
  :root body,
  .app-shell,
  .sale-doc-page,
  .portal-shell,
  .portal-main {
    background: #fff !important;
    color: #000 !important;
  }
  /* The Invoice renders inside the portal shell; drop its grid + sidebar so the document fills the printable page. */
  .portal-shell {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Logo at the left edge, the document kind ("Quote" / "Invoice") pushed to the right of the page. */
  .sale-doc-heading {
    justify-content: space-between;
  }
  .sale-doc-heading h1 {
    color: #000 !important;
  }
  /* Let the sheet fill the printable width with no card chrome. */
  .sale-doc-container {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .sale-doc {
    padding: 0;
    border-radius: 0;
  }
  /* Keep line-item rows and the totals block from being split across pages. */
  .sale-doc-table tr,
  .sale-doc-totals {
    page-break-inside: avoid;
  }
}