/* ============================================================================
   chauffeur-card.css — ΟΙ ΚΑΡΤΕΣ ΟΔΗΓΟΥ / ΟΧΗΜΑΤΟΣ, ΜΕΤΑΦΕΡΜΕΝΕΣ ΑΥΤΟΥΣΙΕΣ.

   Από τα CardLight / DriverCardLight / VehicleCardLight του pdfgenerator.html
   (γραμμές 516-583). Τα inline styles της React έγιναν κανόνες· καμία τιμή
   δεν άλλαξε.

   ⚠ ΤΟ ΟΝΟΜΑ ΕΙΝΑΙ `.eschauffeur`, ΟΧΙ `.escard`. Το `.escard` είναι ΗΔΗ οι
   κάρτες προσωπικού και στόλου της εφαρμογής (components.css 890). Δύο
   διαφορετικά πράγματα με το ίδιο όνομα κλάσης είναι ακριβώς πώς διέρρευσαν
   τα στυλ πάνω στο voucher.

   ΤΑ TOKENS ΖΟΥΝ ΠΑΝΩ ΣΤΟ ΦΥΛΛΟ, όπως σε voucher.css και contract.css: η
   κάρτα ΔΕΝ ακολουθεί το θέμα της εφαρμογής. Λευκό χαρτί, πάντα.

   ΓΡΑΜΜΑΤΟΣΕΙΡΕΣ: το πρωτότυπο φορτώνει Cormorant Garamond + Montserrat από
   το Google Fonts. Η εφαρμογή ΔΕΝ φορτώνει τίποτα από το δίκτυο, οπότε
   πέφτουμε στα fallback που δηλώνει το ίδιο το πρωτότυπο (Georgia, system
   sans). Αν χρειαστεί ακριβής τυπογραφία, τα δύο αρχεία μπαίνουν στο
   assets/font/ όπως ήδη το signature.ttf, και αλλάζουν ΜΟΝΟ οι δύο επόμενες
   μεταβλητές.
   ========================================================================== */

.eschauffeur {
  --ch-gold:  #b08d2f;
  --ch-ink:   #1c1c1e;
  --ch-sub:   #6b6b70;
  --ch-line:  #e6e1d6;
  --ch-paper: #ffffff;
  --ch-well:  #faf8f3;   /* γέμισμα κύκλου αρχικών                  */
  --ch-dark:  #0c0c10;   /* letterbox πίσω από τη φωτογραφία αυτοκινήτου */

  --ch-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ch-sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  position: relative; overflow: hidden; box-sizing: border-box;
  background: var(--ch-paper); color: var(--ch-ink);
  font-family: var(--ch-sans);
  transform-origin: top left;
  box-shadow: 0 10px 34px rgba(12,34,48,.17);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* Τα τρία μεγέθη. Το φύλλο τεντώνεται σε ΟΛΟΚΛΗΡΗ τη σελίδα Α4 — μία κάρτα
   ανά σελίδα, ποτέ δύο. Έτσι το κάνει και το πρωτότυπο (addImage 0,0,210,297). */
.eschauffeur.ch-full    { width: 600px;  height: 849px; }   /* A4 κατακόρυφη */
.eschauffeur.ch-driver,
.eschauffeur.ch-vehicle { width: 1000px; height: 707px; }   /* A4 οριζόντια  */

/* ── Το διπλό χρυσό πλαίσιο ─────────────────────────────────────────────── */
.eschauffeur .ch-frame-outer,
.eschauffeur .ch-frame-inner { position: absolute; pointer-events: none; }
.eschauffeur.ch-full .ch-frame-outer { inset: 12px; border: 2px solid var(--ch-gold); border-radius: 3px; }
.eschauffeur.ch-full .ch-frame-inner { inset: 17px; border: 1px solid var(--ch-line); }
.eschauffeur.ch-driver .ch-frame-outer,
.eschauffeur.ch-vehicle .ch-frame-outer { inset: 18px; border: 2px solid var(--ch-gold); border-radius: 4px; }
.eschauffeur.ch-driver .ch-frame-inner,
.eschauffeur.ch-vehicle .ch-frame-inner { inset: 24px; border: 1px solid var(--ch-line); }

.eschauffeur .ch-content { position: absolute; display: flex; flex-direction: column; }
.eschauffeur.ch-full .ch-content    { inset: 17px; padding: 0 30px 10px; }
.eschauffeur.ch-driver .ch-content,
.eschauffeur.ch-vehicle .ch-content { inset: 24px; padding: 38px 56px; }

/* ── Κεφαλίδα ───────────────────────────────────────────────────────────── */
.eschauffeur .ch-eyebrow {
  color: var(--ch-gold); text-transform: uppercase; font-weight: 700;
}
.eschauffeur .ch-sub {
  font-family: var(--ch-serif); font-style: italic; color: var(--ch-sub);
}

.eschauffeur.ch-full .ch-head {
  display: flex; flex-direction: column; align-items: center;
  padding: 3px 0 14px; border-bottom: 1px solid var(--ch-line);
}
.eschauffeur.ch-full .ch-logo { height: 112px; width: auto; object-fit: contain; }
.eschauffeur.ch-full .ch-eyebrow { font-size: 11px; letter-spacing: 4px; margin-top: 6px; }
.eschauffeur.ch-full .ch-sub { font-size: 14px; letter-spacing: 1.5px; margin-top: 1px; }

.eschauffeur .ch-head-split {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.eschauffeur .ch-head-split .ch-eyebrow { font-size: 13px; letter-spacing: 5px; font-weight: 600; }
.eschauffeur .ch-head-split .ch-sub { font-size: 17px; letter-spacing: 2px; margin-top: 4px; }
/* Το λογότυπο κρέμεται σκόπιμα πάνω από τη γραμμή βάσης, μέσα στο padding. */
.eschauffeur .ch-head-split .ch-logo { height: 124px; width: auto; object-fit: contain; margin-top: -26px; }

/* ── Ετικέτα ενότητας (μόνο στην πλήρη κάρτα) ───────────────────────────── */
.eschauffeur .ch-seclabel {
  font-size: 10px; letter-spacing: 3px; color: var(--ch-gold);
  text-transform: uppercase; font-weight: 700; margin-bottom: 12px; text-align: center;
}
.eschauffeur.ch-full .ch-sec-driver { padding: 20px 0 18px; border-bottom: 1px solid var(--ch-line); }
.eschauffeur.ch-full .ch-sec-vehicle {
  padding: 20px 0 0; display: flex; flex-direction: column; flex: 1; min-height: 0;
}
.eschauffeur .ch-drow { display: flex; gap: 20px; align-items: center; }

/* ── Φωτογραφία προσώπου ────────────────────────────────────────────────── */
.eschauffeur .ch-avatar {
  border-radius: 50%; overflow: hidden; background: var(--ch-well);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
/* Το κάδρο κατεβαίνει λίγο. Με `object-position: 50% 50%` το `cover` κόβει
   ίσα πάνω και κάτω, και σε πορτρέτο διαβατηρίου το πρόσωπο κάθεται ψηλά μέσα
   στον κύκλο. Στο 35% κόβεται λιγότερο από πάνω, οπότε το πρόσωπο ΚΑΤΕΒΑΙΝΕΙ.
   ⚠ Το `core/share.js` διαβάζει αυτή την τιμή — αν αλλάξει εδώ, αλλάζει και
   στο PDF. Μην τη γράψεις σε δεύτερο σημείο. */
.eschauffeur .ch-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 35%;
}
.eschauffeur .ch-initials {
  font-family: var(--ch-serif); color: var(--ch-gold); font-weight: 400; line-height: 1;
}
.eschauffeur.ch-full .ch-avatar { width: 102px; height: 102px; border: 2px solid var(--ch-gold); }
.eschauffeur.ch-full .ch-initials { font-size: 36px; }
.eschauffeur.ch-driver .ch-avatar { width: 208px; height: 208px; border: 3px solid var(--ch-gold); }
.eschauffeur.ch-driver .ch-initials { font-size: 72px; }

.eschauffeur .ch-avatar-col { flex-shrink: 0; text-align: center; }
.eschauffeur .ch-caption {
  font-size: 11px; letter-spacing: 3px; color: var(--ch-sub);
  text-transform: uppercase; font-weight: 600; margin-top: 14px;
}

/* ── Όνομα και πεδία ────────────────────────────────────────────────────── */
.eschauffeur .ch-name {
  font-family: var(--ch-serif); color: var(--ch-ink); font-weight: 500; line-height: 1.1;
}
.eschauffeur.ch-full .ch-name { font-size: 27px; margin-bottom: 8px; }
.eschauffeur.ch-driver .ch-name,
.eschauffeur.ch-vehicle .ch-name { font-size: 46px; }
.eschauffeur.ch-vehicle .ch-name { font-size: 34px; }

.eschauffeur .ch-rule { width: 80px; height: 2px; background: var(--ch-gold); margin: 18px 0 26px; }

.eschauffeur .ch-field { display: flex; align-items: baseline; }
.eschauffeur .ch-flabel {
  color: var(--ch-sub); text-transform: uppercase; font-weight: 600; flex-shrink: 0;
}
.eschauffeur .ch-fvalue { color: var(--ch-ink); font-weight: 500; }

.eschauffeur.ch-full .ch-field { margin-bottom: 4px; }
.eschauffeur.ch-full .ch-flabel { font-size: 9px; letter-spacing: 1.5px; min-width: 72px; }
.eschauffeur.ch-full .ch-fvalue { font-size: 13.5px; }

.eschauffeur.ch-driver .ch-field,
.eschauffeur.ch-vehicle .ch-field { margin-bottom: 16px; }
.eschauffeur.ch-driver .ch-flabel,
.eschauffeur.ch-vehicle .ch-flabel { font-size: 12px; letter-spacing: 2.5px; min-width: 118px; }
.eschauffeur.ch-driver .ch-fvalue,
.eschauffeur.ch-vehicle .ch-fvalue { font-size: 22px; letter-spacing: .5px; }

/* Η τιμή είναι η ΜΟΝΗ γραμμή σε χρυσό και μεγαλύτερη. */
.eschauffeur .ch-field.is-price .ch-fvalue { color: var(--ch-gold); }
.eschauffeur.ch-vehicle .ch-field.is-price .ch-fvalue { font-size: 24px; }

.eschauffeur .ch-mid { flex: 1; display: flex; align-items: center; gap: 54px; min-height: 0; }
.eschauffeur .ch-detail-col { flex: 1; min-width: 0; }

/* ── Φωτογραφία οχήματος ──────────────────────────────────────────────────
   ⚠ ΚΑΜΙΑ ΜΑΥΡΗ ΛΩΡΙΔΑ. Πριν, το πλαίσιο είχε ΣΤΑΘΕΡΕΣ διαστάσεις (540×405)
   με μαύρο φόντο και `object-fit: contain` — δηλαδή κάθε φωτογραφία που δεν
   ήταν ακριβώς 4:3 τυπωνόταν με μαύρες λωρίδες αριστερά-δεξιά ή πάνω-κάτω.

   Τώρα ΤΟ ΠΛΑΙΣΙΟ ΠΡΟΣΑΡΜΟΖΕΤΑΙ ΣΤΗ ΦΩΤΟΓΡΑΦΙΑ: η εικόνα ορίζει το μέγεθος
   μέσα σε ένα ΜΕΓΙΣΤΟ κουτί, το πλαίσιο μαζεύεται γύρω της (`width:fit-content`)
   και δεν μένει κενό να γεμίσει με μαύρο. Η αναλογία δεν αλλάζει ποτέ —
   `width:auto; height:auto` με max-* σημαίνει ότι η εικόνα ΔΕΝ παραμορφώνεται
   και ΔΕΝ τεντώνεται. */
.eschauffeur .ch-photo,
.eschauffeur .ch-veh-photo {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; overflow: hidden;
  background: transparent;          /* χαρτί, όχι μαύρο */
  border: 0;
}
.eschauffeur .ch-photo img,
.eschauffeur .ch-veh-photo img {
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  border-radius: 6px;
  /* Λεπτό περίγραμμα ΠΑΝΩ ΣΤΗΝ ΕΙΚΟΝΑ, όχι στο πλαίσιο — αλλιώς φαίνεται
     περίγραμμα γύρω από κενό χώρο. */
  border: 1px solid var(--ch-line);
}

/* Πλήρης κάρτα: η περιοχή είναι ο αποστάτης της στήλης, ρουφά ό,τι ύψος
   περισσεύει, αλλά η εικόνα μέσα της κρατά τις αναλογίες της. */
.eschauffeur.ch-full .ch-photo { flex: 1; min-height: 180px; width: 100%; }

/* Κάρτα οχήματος: ΜΕΓΙΣΤΟ κουτί, όχι σταθερό. Το πλαίσιο μαζεύεται στο σχήμα
   της φωτογραφίας — οριζόντια, κατακόρυφη ή τετράγωνη. */
.eschauffeur.ch-vehicle .ch-veh-photo {
  width: fit-content; height: fit-content;
  max-width: 540px; max-height: 460px;
  flex-shrink: 0;
}

/* Όταν ΔΕΝ υπάρχει φωτογραφία, το πλαίσιο δεν έχει εικόνα να το ορίσει — άρα
   παίρνει δικές του διαστάσεις, αλλιώς με `fit-content` θα κατέρρεε στο μηδέν. */
.eschauffeur .ch-ghost {
  display: flex; align-items: center; justify-content: center;
  width: 420px; height: 300px; max-width: 100%;
  border: 1px dashed var(--ch-line); border-radius: 6px;
  font-family: var(--ch-serif); font-style: italic; font-size: 22px;
  color: rgba(201,168,76,.5);
}
.eschauffeur.ch-full .ch-ghost { width: 100%; height: 100%; min-height: 180px; }

/* ── Η μετα-γραμμή της πλήρους κάρτας ───────────────────────────────────── */
.eschauffeur .ch-vmeta {
  display: flex; justify-content: space-between; align-items: flex-end; margin: 14px 0 4px;
}
.eschauffeur .ch-vmodel { font-family: var(--ch-serif); font-size: 23px; color: var(--ch-ink); font-weight: 500; }
.eschauffeur .ch-vspec { font-size: 11px; color: var(--ch-sub); letter-spacing: .5px; margin-top: 3px; }
.eschauffeur .ch-vright { text-align: right; }
.eschauffeur .ch-badge {
  display: inline-block; font-size: 9px; letter-spacing: 1.5px; color: var(--ch-gold);
  text-transform: uppercase; font-weight: 700; padding: 3px 10px;
  border: 1px solid var(--ch-gold); margin-bottom: 8px;
}
.eschauffeur .ch-plate { font-size: 19px; color: var(--ch-ink); font-weight: 700; letter-spacing: 2px; }
.eschauffeur.ch-vehicle .ch-badge-wrap { margin-top: 10px; }

/* ── Υποσέλιδο επικοινωνίας (μόνο οι οριζόντιες) ────────────────────────── */
.eschauffeur .ch-foot {
  border-top: 1px solid var(--ch-line); padding-top: 16px;
  display: flex; justify-content: center; gap: 30px;
  font-size: 12px; color: var(--ch-sub); letter-spacing: 1px;
}
.eschauffeur .ch-dot { color: var(--ch-gold); }

/* ── ΧΩΡΙΣ ΣΗΜΑ ΕΤΑΙΡΕΙΑΣ ────────────────────────────────────────────────────
   Ο διακόπτης «Στοιχεία εταιρείας» στην οθόνη βάζει `ch-nobrand` πάνω στο
   φύλλο. Φεύγει ΟΛΟ ό,τι ταυτοποιεί την Exclusive Services: το λογότυπο, το
   λεκτικό «Exclusive Services / Travel Agency», και η κάτω γραμμή επικοινωνίας
   (τηλέφωνο · email · site). Το χρυσό διπλό πλαίσιο ΜΕΝΕΙ — η κάρτα πρέπει να
   εξακολουθεί να μοιάζει με σοβαρό έντυπο, όχι με λευκή φωτοτυπία.

   ΓΙΑΤΙ ΜΕ CSS ΚΑΙ ΟΧΙ ΜΕ ΑΦΑΙΡΕΣΗ ΚΟΜΒΩΝ: το ίδιο αρχείο CSS μπαίνει και μέσα
   στο SVG του `share.js` και στην εκτύπωση. Ένας κανόνας καλύπτει προεπισκόπηση,
   PDF και εκτυπωτή· τρεις διαφορετικές διαδρομές κώδικα θα ξέφευγαν σιγά-σιγά.

   ⚠ ΤΟ share.js ΠΡΕΠΕΙ ΝΑ ΑΓΝΟΕΙ ΤΙΣ ΚΡΥΜΜΕΝΕΣ ΕΙΚΟΝΕΣ. Ζωγραφίζει τις
   φωτογραφίες μόνο του, πάνω στον καμβά· ένα λογότυπο σε `display:none` μετριέται
   0×0 και θα ζωγραφιζόταν σε μηδενικό πλαίσιο. Ο έλεγχος είναι εκεί, στο
   `shots` — μην τον βγάλεις. */
.eschauffeur.ch-nobrand .ch-head,
.eschauffeur.ch-nobrand .ch-head-split,
.eschauffeur.ch-nobrand .ch-foot { display: none; }

/* Οι οριζόντιες κάρτες δεν θέλουν τίποτα άλλο: το `.ch-mid` είναι `flex: 1`
   με κεντραρισμένο περιεχόμενο, οπότε χωρίς κεφαλίδα και υποσέλιδο το
   περιεχόμενο κάθεται μόνο του στο κέντρο του πλαισίου.
   Η ΠΛΗΡΗΣ κάρτα όμως στοιβάζει από πάνω προς τα κάτω: χωρίς την κεφαλίδα, η
   πρώτη ενότητα κολλούσε στο χρυσό πλαίσιο. Της δίνουμε το κενό που έχανε. */
.eschauffeur.ch-full.ch-nobrand .ch-content { padding-top: 34px; }

/* ── Η οθόνη γύρω από τις κάρτες ────────────────────────────────────────── */
.ch-wrap { display: grid; grid-template-columns: 392px minmax(0, 1fr); gap: var(--s5); align-items: start; }
/* ⚠ ΣΤΟΙΒΑΖΕΤΑΙ ΩΣ ΚΑΙ ΤΑ 1100px, ΟΧΙ 900 (11.09.2026, αναφορά ιδιοκτήτη:
   «on a ipad 13 inch the pdf on the right side is not fully visible»).
   Η φόρμα κρατά ΣΤΑΘΕΡΑ 392px. Σε iPad 13" κατακόρυφα (1032px) έμεναν **322px**
   για μια κάρτα που είναι 1000px φαρδιά — προεπισκόπηση στο 28%, γραμματοσειρά
   αδιάβαστη. Στοιβαγμένη, η ίδια οθόνη δίνει **692px** και η κάρτα φτάνει στο
   69%. Το iPad 13" ΟΡΙΖΟΝΤΙΑ (1376px) μένει δίπλα-δίπλα, όπως ο υπολογιστής. */
@media (max-width: 1100px) { .ch-wrap { grid-template-columns: 1fr; } }
.ch-mat {
  background: var(--bg2); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: var(--s5); display: flex; justify-content: center; overflow-x: auto;
}
.ch-frame { position: relative; overflow: hidden; }
.ch-actions { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }
.ch-actions .btn { width: 100%; }
.ch-warn { color: var(--crit); font-size: var(--fs-xs); margin-top: 5px; }

/* ── Εκτύπωση ────────────────────────────────────────────────────────────────
   ⚠ ΤΟ print-color-adjust ΕΙΝΑΙ ΥΠΟΧΡΕΩΤΙΚΟ. Η κάρτα είναι χρυσά πλαίσια και
   μαύρο letterbox — δηλαδή ΟΛΑ background. Χωρίς αυτό ο browser τα πετάει και
   βγαίνει λευκή σελίδα με τρεις γκρι λέξεις. Είναι η πιο επικίνδυνη γραμμή
   ολόκληρης της μεταφοράς. */
@media print {
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }

  .eschauffeur.printing {
    transform: none !important; margin: 0 !important; box-shadow: none !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .eschauffeur.printing, .eschauffeur.printing * {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Το μέγεθος σελίδας ΠΡΕΠΕΙ να ταιριάζει με τον προσανατολισμό της κάρτας,
     αλλιώς η οριζόντια κάρτα κόβεται στα δύο. */
  .eschauffeur.printing.ch-full    { width: 210mm !important; height: 297mm !important; }
  .eschauffeur.printing.ch-driver,
  .eschauffeur.printing.ch-vehicle { width: 297mm !important; height: 210mm !important; }

  .eschauffeur.printing ~ *, .no-print { display: none !important; }
}
/* ⚠ ΤΟ `@page` ΕΦΥΓΕ (10.09.2026) — είναι ΚΑΘΟΛΙΚΟ και μηδένιζε το
   περιθώριο σε ΚΑΘΕ εκτύπωση. Μπαίνει δυναμικά από τον `printSheet()`
   (views/voucher.js) μόνο όση ώρα τυπώνεται φύλλο. ΜΗΝ ΤΟ ΞΑΝΑΒΑΛΕΙΣ. */

/* Ο επιλογέας εντύπου κάθεται πάνω από τις δύο στήλες — πρώτα διαλέγεις ΤΙ
   φτιάχνεις, μετά το συμπληρώνεις. */
.ch-formbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4);
}
.ch-brandsw { flex-shrink: 0; }
/* Όταν ο διακόπτης είναι ΚΛΕΙΣΤΟΣ το λέει με χρώμα, όχι μόνο με τη θέση του
   κουμπιού: η κάρτα φεύγει σε πελάτη και το λάθος δεν διορθώνεται μετά. */
.ch-brandoff { color: var(--warn); font-weight: 600; }
@media (max-width: 620px) {
  .ch-formbar .seg { width: 100%; }
  /* ⚠ ΤΟ `flex: 1` ΣΤΑ ΚΟΥΜΠΙΑ ΕΦΥΓΕ ΕΠΙΤΗΔΕΣ.
     Το `.seg` του components.css κυλάει οριζόντια σε κινητό — έτσι δουλεύουν
     και οι επτά καρτέλες των Reports. Το τοπικό `flex: 1` πάλευε μαζί του:
     τα κουμπιά δεν συρρικνώνονται κάτω από το κείμενό τους (`min-width: auto`),
     οπότε ξεχείλιζαν ΚΑΙ κυλούσαν, και το «Κάρτα οχήματος» φαινόταν κομμένο
     σαν χαλασμένο. Χωρίς αυτό, η μπάρα κυλάει καθαρά όπως παντού αλλού. */
  .ch-brandsw { width: 100%; }
}