/* ============================================================================
   contract.css — ΤΟ ΣΥΜΦΩΝΗΤΙΚΟ, ΜΕΤΑΦΕΡΜΕΝΟ ΑΥΤΟΥΣΙΟ.

   Είναι οι κανόνες `.paper` του `Apps/docs/contract.html` (γραμμές 77-122),
   με δύο μόνο αλλαγές, και τις δύο για μέγεθος:
     • η σφραγίδα και η υπογραφή βγήκαν από base64 σε assets/img/
     • το `.paper` έγινε `.escontract`, για να μη συγκρούεται με την εφαρμογή

   ΜΗΝ «ΤΑΚΤΟΠΟΙΗΣΕΙΣ» ΑΥΤΟ ΤΟ ΑΡΧΕΙΟ. Τυπώνεται σε χαρτί και υπογράφεται.

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

.escontract {
  --ink:#0C2230; --ink-soft:#13313f;
  --brass:#B08D2F; --brass-deep:#8C6C28; --brass-lt:#C9A84C; --gold-hi:#E8CF9E;
  --paper:#FBF9F4; --stone-line:#E7DFCF;
  --text:#1C2A30; --muted:#5C6A6E;
  --c-serif:Georgia,'Times New Roman','Liberation Serif','DejaVu Serif',serif;
  --c-sans:system-ui,-apple-system,'Segoe UI',Roboto,'Liberation Sans','DejaVu Sans',Helvetica,Arial,sans-serif;
  --c-mono:ui-monospace,Menlo,Consolas,'DejaVu Sans Mono','Liberation Mono',monospace;

  width:210mm; min-height:297mm; box-sizing:border-box; padding:8mm 15mm 12mm;
  background:var(--paper); color:var(--text);
  font-family:var(--c-sans); font-size:12px; line-height:1.5;
  transform-origin:top left; box-shadow:0 10px 34px rgba(12,34,48,.17);
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}

.escontract .brandbar{ background:linear-gradient(180deg,var(--ink) 0%,var(--ink-soft) 100%); border-radius:12px; padding:16px 30px 15px; text-align:center; color:#fff; }
.escontract .es-logo{ width:132px; height:52px; margin:0 auto 9px; background:url('../img/contract-logo.png') center/contain no-repeat; }
.escontract .gold-rule{ width:46px; height:2px; margin:0 auto 10px; background:linear-gradient(90deg,transparent,var(--brass-lt),transparent); }
.escontract .brand-name{ font-family:var(--c-serif); font-size:16px; letter-spacing:.03em; color:var(--gold-hi); }
.escontract .brand-sub{ font-size:10px; letter-spacing:.05em; color:#B9A063; margin-top:5px; }
.escontract .brand-meta{ font-size:8.3px; letter-spacing:.05em; color:#8698A1; margin-top:6px; }
.escontract .brand-contact{ font-size:9.8px; letter-spacing:.02em; color:#E4DED2; margin-top:7px; font-weight:600; }
.escontract .brand-contact .g{ color:var(--brass-lt); }

.escontract .title-wrap{ text-align:center; margin:16px 0 3px; }
.escontract .doc-title{ font-family:var(--c-serif); font-size:26px; font-weight:500; letter-spacing:.05em; color:var(--ink); margin:6px 0 0; }
.escontract .title-rule{ width:64px; height:2px; margin:10px auto 0; background:linear-gradient(90deg,transparent,var(--brass),transparent); }

.escontract .sec-label{ text-align:center; font-family:var(--c-serif); font-weight:700; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-deep); margin:13px 0 6px; }
.escontract .center-lede{ text-align:center; font-family:var(--c-serif); font-size:13px; color:var(--text); margin:0; }

.escontract .party{ font-size:12px; line-height:1.52; text-align:justify; margin:0; }
.escontract .party strong{ font-weight:700; color:var(--ink); }

.escontract .agreed{ text-align:center; font-family:var(--c-serif); font-weight:700; font-size:14px; letter-spacing:.14em; color:var(--brass-deep); margin:13px 0 6px; }

.escontract .clause{ margin-top:12px; }
.escontract .clause-h{ font-family:var(--c-serif); font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); margin:0 0 7px; padding-left:16px; position:relative; }
.escontract .clause-h:before{ content:""; position:absolute; left:0; top:.42em; width:7px; height:7px; background:var(--brass); transform:rotate(45deg); }
.escontract .body{ font-size:12px; line-height:1.52; text-align:justify; margin:0 0 6px; }
.escontract .body strong{ font-weight:700; color:var(--ink); }

.escontract .closing{ font-family:var(--c-serif); font-style:italic; font-size:12px; line-height:1.5; color:var(--muted); text-align:center; margin:13px 0 0; }

.escontract .sign-rule{ height:1px; margin:12px 0 0; background:linear-gradient(90deg,transparent,var(--stone-line) 14%,var(--stone-line) 86%,transparent); }
/* ⚠ align-items: FLEX-START, όχι flex-end. Με στοίχιση στο κάτω μέρος, η
   στήλη με το λιγότερο κείμενο από κάτω σπρώχνει τη γραμμή της πιο χαμηλά —
   αρκεί να λείπει το όνομα του οδηγού και οι δύο γραμμές ξεχωρίζουν 16px. */
.escontract .sig-row{ display:flex; gap:40px; margin-top:14px; align-items:flex-start; }
.escontract .sig{ flex:1 1 0; text-align:center; padding:0 6px; }

/* Ο χώρος υπογραφής: ΣΤΑΘΕΡΟ ύψος, γεμάτος ή άδειος. Αυτό κρατά τις δύο
   γραμμές στο ίδιο ύψος και εμποδίζει τη γραμμή να ανέβει όταν φύγει η
   σφραγίδα. Το περιεχόμενο κάθεται στο ΚΑΤΩ μέρος, ακουμπώντας τη γραμμή. */
.escontract .sig-marks{
  height:120px; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
}
.escontract .sig .stamp{ display:block; width:140px; max-height:64px; object-fit:contain; margin:0 auto 8px; }
.escontract .sig .sign{ display:block; width:140px; max-height:44px; object-fit:contain; margin:0 auto 4px; }
/* Η χειρόγραφη υπογραφή του οδηγού — ίδιο κάδρο με την εταιρική. */
.escontract .sig .handsign{ display:block; width:150px; max-height:74px; object-fit:contain; margin:0 auto 4px; }
.escontract .sig-line{ height:1px; background:#9AA7AC; margin:0 16px; }
.escontract .sig-role{ font-family:var(--c-mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--brass-deep); }
.escontract .sig-name{ font-family:var(--c-serif); font-size:12.5px; color:var(--ink); margin-top:3px; }

/* ── Η οθόνη γύρω από το φύλλο ───────────────────────────────────────────── */
.contract-wrap { display: grid; grid-template-columns: 392px minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (max-width: 900px) { .contract-wrap { grid-template-columns: 1fr; } }

.contract-frame { position: relative; overflow: hidden; justify-self: center; }
.contract-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;
}
.contract-actions { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }
.contract-actions .btn { width: 100%; }
.contract-actions .btn-reset { width: auto; align-self: flex-start; }
.contract-warn { color: var(--crit); font-size: var(--fs-xs); margin-top: 5px; }
.contract-warn.ok { color: var(--ok); }
.contract-hint {
  font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s4); line-height: 1.55;
  background: var(--gold-soft); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); padding: 11px 13px;
}

/* ── Εκτύπωση ────────────────────────────────────────────────────────────────
   Ίδια λογική με το voucher: ό,τι δεν είναι το φύλλο δεν τυπώνεται. Το
   print-color-adjust είναι υποχρεωτικό — ο browser ΠΕΤΑΕΙ τα φόντα και τις
   background-images στην εκτύπωση, και η ναυτική κεφαλίδα είναι background. */
@media print {
  /* ⚠ ΤΟ `@page` ΕΦΥΓΕ (10.09.2026) — είναι ΚΑΘΟΛΙΚΟ και μηδένιζε το
     περιθώριο σε ΚΑΘΕ εκτύπωση. Μπαίνει δυναμικά από τον `printSheet()`
     (views/voucher.js) μόνο όση ώρα τυπώνεται φύλλο. ΜΗΝ ΤΟ ΞΑΝΑΒΑΛΕΙΣ. */
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  .escontract.printing {
    transform: none !important; width: 210mm !important; max-width: 210mm !important;
    margin: 0 !important; box-shadow: none !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .escontract.printing, .escontract.printing * {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .escontract.printing ~ *, .no-print { display: none !important; }
}

/* Το δεύτερο κουμπί ενέργειας — χρυσό περίγραμμα, όχι γεμάτο: η κύρια
   ενέργεια της οθόνης είναι η εκτύπωση, αυτό έρχεται δεύτερο. */
.btn-goldline {
  background: var(--gold-soft); color: var(--gold-text); border-color: var(--gold);
}
.btn-goldline:hover { background: var(--gold-soft2); }
.btn-goldline:disabled { opacity: .6; cursor: default; }

.contract-more { margin-top: var(--s2); }
.contract-more > summary {
  cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  padding: var(--s2) 0; list-style: none;
}
.contract-more > summary::-webkit-details-marker { display: none; }
.contract-more > summary::before { content: '▸ '; color: var(--gold-text); }
.contract-more[open] > summary::before { content: '▾ '; }
.contract-more > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Ο καμβάς υπογραφής ─────────────────────────────────────────────────────
   Μεγάλος επίτηδες: υπογραφή με το δάχτυλο θέλει χώρο. Το `touch-action: none`
   είναι ΥΠΟΧΡΕΩΤΙΚΟ — χωρίς αυτό το δάχτυλο κυλά τη σελίδα αντί να γράφει. */
.sigpad-wrap {
  position: relative; height: 280px; width: 100%;
  /* ⚠ ΧΑΡΤΙ, ΟΧΙ ΘΕΜΑ. Το μελάνι είναι σκούρο ναυτικό (#0C2230) γιατί έτσι
     τυπώνεται. Πάνω σε σκούρο φόντο νύχτας θα υπέγραφες ΣΤΑ ΤΥΦΛΑ. Η
     επιφάνεια υπογραφής μένει ανοιχτή πάντα, όπως και η προεπισκόπηση του
     χαρτιού — είναι χαρτί, δεν είναι διεπαφή. */
  color-scheme: light;
  background: #FBF9F4; border: 1px solid #E7DFCF;
  border-radius: var(--r-sm); overflow: hidden;
}
.sigpad { position: absolute; inset: 0; touch-action: none; cursor: crosshair; display: block; }
/* Η γραμμή πάνω στην οποία υπογράφει — δείχνει πού να γράψει. */
.sigpad-base {
  position: absolute; inset-inline: 12%; inset-block-end: 58px; height: 1px;
  background: #9AA7AC; pointer-events: none;
}
@media (max-width: 620px) { .sigpad-wrap { height: 220px; } }

/* Η προεπισκόπηση δείχνει σκούρο μελάνι — θέλει κι αυτή ανοιχτό υπόβαθρο. */
.signpreview {
  height: 40px; width: auto; max-width: 180px; object-fit: contain;
  border: 1px solid var(--line-2); border-radius: var(--r-xs);
  background: #FBF9F4; padding: 2px 6px;
}