/* ═══════════════════════════════════════════════════
   MANDARINO UI — Print Design System
   A4 Portrait: 210mm × 297mm
   Margini: 20mm | Safe Area: 170mm × 257mm
   Unità: mm (layout), pt (tipografia)
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Page Geometry ── */
  --page-w: 210mm;
  --page-h: 297mm;
  --margin: 20mm;
  --safe-w: calc(var(--page-w) - var(--margin) * 2);
  --safe-h: calc(var(--page-h) - var(--margin) * 2);
  --bleed: 3mm;

  /* ── Print Typography (pt) ── */
  --print-body: 9pt;
  --print-small: 7pt;
  --print-caption: 6pt;
  --print-h1: 42pt;
  --print-h2: 18pt;
  --print-h3: 12pt;
  --print-overline: 6pt;

  /* ── Print Spacing (mm) ── */
  --print-gap-xs: 2mm;
  --print-gap-sm: 3mm;
  --print-gap-md: 6mm;
  --print-gap-lg: 10mm;
  --print-gap-xl: 20mm;

  /* ── Shared Tokens (mirror from input.css) ── */
  --color-primary: #FF3E00;
  --color-dark: #181A1B;
  --color-light: #F4F4F5;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

/* ═══════════════════════════════════════════════════
   Screen Preview
   ═══════════════════════════════════════════════════ */

body {
  background: #e5e5e5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px 0;
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-dark);
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════
   Page Container
   ═══════════════════════════════════════════════════ */

.page {
  width: var(--page-w);
  height: var(--page-h);
  background: white;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
  page-break-after: always;
  font-family: var(--font-sans);
  color: var(--color-dark);
}

.page-dark {
  background: var(--color-dark);
  color: var(--color-light);
}

/* Bleed guides (screen only) */
.page::before {
  content: '';
  position: absolute;
  inset: var(--bleed);
  border: 1px dashed rgba(255, 62, 0, 0.15);
  pointer-events: none;
  z-index: 100;
}

/* ═══════════════════════════════════════════════════
   Safe Area
   ═══════════════════════════════════════════════════ */

.safe-area {
  position: absolute;
  top: var(--margin);
  left: var(--margin);
  width: var(--safe-w);
  height: var(--safe-h);
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════
   Print Header / Footer
   ═══════════════════════════════════════════════════ */

.print-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--print-gap-lg);
  border-bottom: 0.5pt solid rgba(0, 0, 0, 0.1);
  margin-bottom: var(--print-gap-lg);
}
.page-dark .print-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.print-header .logo {
  height: 4mm;
  fill: currentColor;
}

.print-header .meta {
  font-family: var(--font-mono);
  font-size: var(--print-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.4;
}

.print-footer {
  margin-top: auto;
  padding-top: 5mm;
  border-top: 0.5pt solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page-dark .print-footer {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.print-footer .page-num {
  font-family: var(--font-mono);
  font-size: var(--print-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.4;
}

.print-footer .confidential {
  font-family: var(--font-mono);
  font-size: 5pt;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.2;
}

/* ═══════════════════════════════════════════════════
   Typography
   ═══════════════════════════════════════════════════ */

.cover-title {
  font-size: var(--print-h1);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.cover-subtitle {
  font-family: var(--font-mono);
  font-size: var(--print-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-top: var(--print-gap-lg);
}

.print-section {
  font-family: var(--font-mono);
  font-size: var(--print-overline);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--print-gap-sm);
  display: block;
}

.print-h2 {
  font-size: var(--print-h2);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: var(--print-gap-lg);
}

.print-body {
  font-size: var(--print-body);
  line-height: 1.6;
  color: inherit;
  opacity: 0.7;
}

.print-small {
  font-size: var(--print-small);
  opacity: 0.35;
}

/* ═══════════════════════════════════════════════════
   Decorative
   ═══════════════════════════════════════════════════ */

.accent-bar {
  width: 30mm;
  height: 2pt;
  background: var(--color-primary);
}

.big-number {
  font-size: 72pt;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
  opacity: 0.06;
  position: absolute;
  right: var(--margin);
  bottom: calc(var(--margin) + 15mm);
}

/* ═══════════════════════════════════════════════════
   Table
   ═══════════════════════════════════════════════════ */

.print-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8pt;
}

.print-table th {
  font-family: var(--font-mono);
  font-size: var(--print-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: var(--print-gap-sm) 0;
  border-bottom: 0.5pt solid rgba(0, 0, 0, 0.15);
  opacity: 0.4;
}

.print-table td {
  padding: var(--print-gap-sm) 0;
  border-bottom: 0.25pt solid rgba(0, 0, 0, 0.06);
  vertical-align: top;
}

.print-table .amount {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 600;
}

.print-table .total td {
  border-top: 1pt solid currentColor;
  border-bottom: none;
  font-weight: 600;
  padding-top: var(--print-gap-sm);
}

/* ═══════════════════════════════════════════════════
   Swiss Grid — 12 Columns
   Split canonico: 4 (margine) + 8 (contenuto)
   ═══════════════════════════════════════════════════ */

.print-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--print-gap-sm);
}

/* Span utilities */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Start offsets */
.start-1  { grid-column-start: 1; }
.start-2  { grid-column-start: 2; }
.start-3  { grid-column-start: 3; }
.start-4  { grid-column-start: 4; }
.start-5  { grid-column-start: 5; }
.start-6  { grid-column-start: 6; }
.start-7  { grid-column-start: 7; }
.start-8  { grid-column-start: 8; }
.start-9  { grid-column-start: 9; }

/* ═══════════════════════════════════════════════════
   Layout Helpers
   ═══════════════════════════════════════════════════ */

.print-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--print-gap-md);
}

.print-col-accent {
  border-left: 2pt solid var(--color-primary);
  padding-left: var(--print-gap-sm);
}

.print-col-muted {
  border-left: 0.5pt solid rgba(0, 0, 0, 0.1);
  padding-left: var(--print-gap-sm);
}

.print-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════
   Print Pills
   Firma visiva del brand, adattata alla stampa.
   ═══════════════════════════════════════════════════ */

.print-pill {
  display: inline-flex;
  align-items: center;
  padding: 1.5mm 4mm;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: var(--print-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  border: 0.5pt solid rgba(0, 0, 0, 0.15);
  color: var(--color-dark);
}

.print-pill-dark {
  background: var(--color-dark);
  color: var(--color-light);
  border-color: transparent;
}

.print-pill-primary {
  background: var(--color-primary);
  color: white;
  border-color: transparent;
}

.print-pill-outline {
  background: transparent;
  border: 0.5pt solid rgba(0, 0, 0, 0.2);
  color: var(--color-dark);
}
.page-dark .print-pill-outline {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-light);
}

.print-pill-ghost {
  background: rgba(0, 0, 0, 0.04);
  border-color: transparent;
  color: var(--color-dark);
  opacity: 0.5;
}

/* Pill group — inline flow with wrapping */
.print-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5mm;
}

/* ═══════════════════════════════════════════════════
   Physics-Inspired Decorative Elements
   L'estetica della fisica, congelata sulla carta.
   ═══════════════════════════════════════════════════ */

/* Scattered Pills — cluster with random rotations
   Use CSS custom props --r (rotation deg) and --x, --y (offset mm) 
   on each pill to simulate fallen physics bodies */
.print-scattered-pills {
  position: relative;
  height: 40mm;
}

.print-scattered-pills .print-pill {
  position: absolute;
  transform: 
    translate(var(--x, 0), var(--y, 0)) 
    rotate(var(--r, 0deg));
}

/* Gravity Text — letters with slight rotation/translation
   simulating the footer physics behavior */
.print-gravity-text {
  display: inline-flex;
  gap: 0;
}

.print-gravity-text span {
  display: inline-block;
  transform: 
    translateY(var(--dy, 0)) 
    rotate(var(--r, 0deg));
}

/* Collision Bar — pills stacked/overlapping horizontally
   as if they fell and piled up against a wall */
.print-collision-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2mm 0;
  border-top: 0.25pt solid rgba(0, 0, 0, 0.06);
  border-bottom: 0.25pt solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.print-collision-bar .print-pill {
  margin-left: -1mm;
  transform: rotate(var(--r, 0deg));
}

.print-collision-bar .print-pill:first-child {
  margin-left: 0;
}

/* ═══════════════════════════════════════════════════
   Signature Block
   ═══════════════════════════════════════════════════ */

.print-signature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--print-gap-xl);
  margin-top: var(--print-gap-xl);
}

.print-signature-box {
  border-top: 0.5pt solid rgba(0, 0, 0, 0.2);
  padding-top: var(--print-gap-sm);
}

.print-signature-box .label {
  font-family: var(--font-mono);
  font-size: var(--print-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 15mm;
  display: block;
}

.print-signature-box .date-line {
  font-size: var(--print-small);
  opacity: 0.3;
  margin-top: var(--print-gap-sm);
}

/* ═══════════════════════════════════════════════════
   KPI Box
   ═══════════════════════════════════════════════════ */

.print-kpi {
  text-align: center;
  padding: var(--print-gap-md);
}

.print-kpi .value {
  font-size: 28pt;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}

.print-kpi .label {
  font-family: var(--font-mono);
  font-size: var(--print-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-top: var(--print-gap-xs);
  display: block;
}

/* ═══════════════════════════════════════════════════
   Note / Callout
   ═══════════════════════════════════════════════════ */

.print-note {
  border-left: 2pt solid var(--color-primary);
  padding: var(--print-gap-sm) var(--print-gap-md);
  font-size: var(--print-small);
  line-height: 1.5;
  opacity: 0.6;
  margin: var(--print-gap-md) 0;
}

/* ═══════════════════════════════════════════════════
   Watermark (BOZZA overlay)
   ═══════════════════════════════════════════════════ */

.print-watermark::after {
  content: attr(data-watermark);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-35deg);
  font-size: 80pt;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.03;
  pointer-events: none;
  z-index: 50;
}

/* ═══════════════════════════════════════════════════
   Print Media
   ═══════════════════════════════════════════════════ */

@media print {
  body {
    background: white;
    padding: 0;
    gap: 0;
  }
  .page {
    box-shadow: none;
    margin: 0;
  }
  .page::before {
    display: none;
  }
}

@page {
  size: A4 portrait;
  margin: 0;
}