/* The documents a customer gets (DESIGN §8.7): the price quote, the booking confirmation and the signed approval.
   One style for all three, like the customer page: a booking card, blue detail zones and an orange money zone.
   Read by the server into the PDFs (server/quotedoc.js, approvaldoc.js) and linked by the app for printing.
   Colors only through the :root variables of app.css. Every fact is written as text, so it reads in black and white too. */
.doc{font-family:'Heebo','Segoe UI',Arial,'Noto Sans Hebrew',sans-serif;color:var(--foreground);font-size:12.5px;line-height:1.55;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.doc *{box-sizing:border-box}
.doc .ltr,.doc .num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.doc .amt{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.doc .muted{color:var(--muted-foreground)}

/* Header: logo, the document's name and number, the office; a thin line in the logo's orange */
.doc-head{display:flex;align-items:center;gap:16px;padding-bottom:10px;border-bottom:2px solid var(--brand-orange);margin-bottom:12px}
.doc-head img{width:120px;flex:none}
.doc-head h1{font-size:22px;color:var(--primary);margin:0;font-weight:700}
.doc-meta{color:var(--muted-foreground);font-size:12px}
.doc-office{margin-inline-start:auto;text-align:end;color:var(--muted-foreground);font-size:11.5px;line-height:1.45}
.doc-office b{color:var(--primary);font-size:13px}

/* The money at a glance */
.doc-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:4px 14px;background:linear-gradient(var(--tint-money),var(--tint-money)),var(--card);border:1px solid var(--tint-money-line);border-radius:var(--radius);padding:8px 12px;margin-bottom:12px;break-inside:avoid}
.doc-sum>div>span{display:block;font-size:11px;color:var(--st-deposit-fg)}
.doc-sum b{font-size:15px;font-variant-numeric:tabular-nums}
.doc-sum .balance{color:var(--action)}

/* The booking card: dark blue head, large arrival and departure, then flights and transfers */
.doc-card{border:1px solid var(--tint-form-line);border-radius:var(--radius);overflow:hidden;margin-bottom:12px;break-inside:avoid}
.doc-card-head{background:var(--primary);color:var(--primary-foreground);padding:9px 12px}
.doc-card-head span{display:block;font-size:11.5px;color:var(--sidebar-foreground)}
.doc-card-head b{font-size:17px}
.doc-dates{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--tint-form-line)}
.doc-dates>div{padding:6px 12px}
.doc-dates>div+div{border-inline-start:1px solid var(--tint-form-line)}
.doc-dates span{display:block;font-size:11px;color:var(--muted-foreground)}
.doc-dates b{font-size:15px}
.doc-rows{background:var(--tint-form);padding:2px 12px}
.doc-row{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--tint-form-line)}
.doc-row:last-child{border-bottom:0}
.doc-row>span:first-child{min-width:96px;color:var(--muted-foreground)}
.doc-row>b,.doc-row>div{flex:1}
.doc-tag{display:inline-block;font-size:11px;padding:0 7px;border-radius:4px;background:var(--st-paid-bg);color:var(--st-paid-fg)}

/* Zones: details in blue, money in orange (DESIGN §3.3) */
.doc-zone{border:1px solid var(--tint-form-line);border-radius:var(--radius);background:linear-gradient(var(--tint-form),var(--tint-form)),var(--card);margin-bottom:12px;break-inside:avoid}
.doc-zone>h2{margin:0;padding:6px 12px;font-size:13.5px;font-weight:700;color:var(--primary);background:var(--tint-form-head);border-bottom:1px solid var(--tint-form-line);border-start-start-radius:var(--radius);border-start-end-radius:var(--radius)}
.doc-zone>h2 small{font-weight:400;color:var(--muted-foreground)}
.doc-zone>.doc-body{padding:8px 12px}
.doc-zone.money{border-color:var(--tint-money-line);background:linear-gradient(var(--tint-money),var(--tint-money)),var(--card)}
.doc-zone.money>h2{background:none;color:var(--st-deposit-fg);border-bottom-color:var(--tint-money-line)}
.doc table{width:100%;border-collapse:collapse}
.doc th{font-size:11px;font-weight:500;color:var(--muted-foreground);text-align:start;padding:3px 6px;border-bottom:1px solid var(--tint-form-line)}
.doc td{padding:4px 6px;border-bottom:1px solid var(--tint-form-line);text-align:start;vertical-align:top}
.doc tr:last-child td{border-bottom:0}
.doc-zone.money td,.doc-zone.money th{border-bottom-color:var(--tint-money-line)}
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.doc-grid .doc-row>span:first-child{min-width:88px}

/* The total: a white box in the money zone */
.doc-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:8px;background:var(--card);border:1px solid var(--tint-money-line);border-radius:var(--radius);padding:7px 12px}
.doc-total b{font-size:17px;font-variant-numeric:tabular-nums}
.doc-total.small b{font-size:14px}
.doc-total .balance{color:var(--action)}
.doc-note{white-space:pre-wrap;unicode-bidi:plaintext}
.doc-terms{white-space:pre-wrap;font-size:12px;unicode-bidi:plaintext}  /* each line in its own direction: Hebrew terms in an English document */
/* The signature of an approval: who, when, how */
.doc-zone.sign{border-width:2px;border-color:var(--primary)}

.doc-foot{margin-top:14px;border-top:1px solid var(--border);padding-top:7px;color:var(--muted-foreground);font-size:11px}

/* In the app's print the page's own table rules apply too: the document's tables take none of them */
.doc table{background:none}
.doc th,.doc td{height:auto;white-space:normal;position:static;background:none}

/* The itinerary: a zone per day, an event per line with its time */
.itin-ev{display:flex;gap:12px;padding:5px 0;border-bottom:1px solid var(--tint-form-line);break-inside:avoid}
.itin-ev:last-child{border-bottom:0}
.itin-time{flex:none;inline-size:44px;color:var(--muted-foreground)}
.itin-det{font-size:12px;color:var(--muted-foreground);margin-top:2px}