/* saas_payroll_contract.css — «Σύμβαση ορισμένου χρόνου» του Μετρητή μισθοδοτικού κόστους. Κλάσεις με πρόθεμα cfxpc-.
   Το φόντο της σελίδας ΔΕΝ ορίζεται εδώ: κληρονομείται από το body (--cfx-page-bg) και φαίνεται γύρω από τις κάρτες. */
.cfxpm-page { --cfxpc-on: #1D6FD8; --cfxpc-adv: #E0A800; --cfxpc-adv-bg: #FFF7DB; --cfxpc-green: #1B7F4B; --cfxpc-bar: #9EC5EE; --cfxpc-bar-extra: #1B4F8C; }
.cfxpm-page [hidden] { display: none !important; }

/* Ημερομηνίες: δύο πεδία δίπλα-δίπλα, και στο κινητό (390px: 2 × ~165px). */
.cfxpc-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cfxpc-range { margin: -6px 0 14px; }

/* Ημέρες άδειας: ένα κουτάκι ανά μήνα. */
.cfxpc-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.cfxpc-box { min-width: 0; text-align: center; }
.cfxpc-box-l { font-size: 0.72rem; color: var(--muted); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.cfxpc-box-in { box-sizing: border-box; width: 100%; min-height: 44px; padding: 4px; text-align: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 1rem; font-family: inherit; }
.cfxpc-box-in.cfxpc-lv-on { border-color: var(--cfxpc-on); box-shadow: inset 0 0 0 1px var(--cfxpc-on); }
.cfxpc-box-in.cfxpc-lv-adv { border-color: var(--cfxpc-adv); box-shadow: inset 0 0 0 1px var(--cfxpc-adv); background: var(--cfxpc-adv-bg); }

.cfxpc-sum { display: block; width: 100%; min-height: 44px; margin-top: 10px; padding: 8px 12px; text-align: left; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 0.9rem; font-weight: 600; font-family: inherit; cursor: pointer; }
.cfxpc-sum-more { margin: 8px 2px 0; line-height: 1.45; }
.cfxpc-warn { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--cfxpc-adv); border-radius: 10px; background: var(--cfxpc-adv-bg); color: #5C4400; font-size: 0.84rem; line-height: 1.4; }
.cfxpc-warn div + div { margin-top: 4px; }

/* Κάρτα 1: σειρές-κουμπιά με εξήγηση από κάτω. */
.cfxpc-split { margin: -4px 0 8px; }
.cfxpc-rowbtn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 0; border: none; border-top: 1px solid var(--border); background: none; color: var(--text); font-size: 0.9rem; font-family: inherit; text-align: left; cursor: pointer; }
.cfxpc-rowbtn-l { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cfxpc-rowbtn-v { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }
.cfxpc-arrow { flex: 0 0 14px; text-align: center; color: var(--muted); transition: transform 0.15s; }
.cfxpc-rowbtn[aria-expanded="true"] .cfxpc-arrow { transform: rotate(90deg); }
.cfxpc-panel { padding: 0 0 8px; margin: 0; }

/* Τρεις μικρές κάρτες σε μία σειρά, και στο κινητό. */
.cfxpc-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.cfxpc-trio .cfxpm-mini { padding: 10px; }
.cfxpc-trio .cfxpm-mini-l { font-size: 0.72rem; }
.cfxpc-trio .cfxpm-mini-v { font-size: 0.98rem; white-space: nowrap; }

/* Ραβδόγραμμα ~96px: 78px μπάρες + ετικέτες. Οι στήλες ορίζονται από το JS (repeat(N, minmax(0,1fr))). */
.cfxpc-chart { display: grid; gap: 3px; align-items: end; min-height: 96px; margin-bottom: 10px; }
.cfxpc-col { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.cfxpc-bar { background: var(--cfxpc-bar); border-radius: 3px 3px 0 0; }
.cfxpc-bar-extra { background: var(--cfxpc-bar-extra); }
.cfxpc-col-l { text-align: center; font-size: 0.66rem; color: var(--muted); margin-top: 3px; }

/* Δύο στήλες ποσών (Στο χέρι / Κόστος): στα 390px η στήλη του ονόματος παίρνει ό,τι περισσεύει
   (minmax(0, 1fr)) και οι δύο στήλες ποσών έχουν σταθερό πλάτος — καμία οριζόντια κύλιση. */
.cfxpc-cols2 { display: grid; grid-template-columns: minmax(0, 1fr) 84px 84px; gap: 6px; align-items: center; font-size: 0.82rem; }
.cfxpc-rowbtn.cfxpc-cols2 { grid-template-columns: minmax(0, 1fr) 84px 84px 14px; font-size: 0.84rem; }
.cfxpc-c-l { min-width: 0; overflow-wrap: anywhere; }
.cfxpc-c-net, .cfxpc-c-cost { text-align: right; white-space: nowrap; font-weight: 600; }
.cfxpc-c-net { color: var(--cfxpc-green); }
.cfxpc-cols2-head { padding-right: 20px; font-size: 0.74rem; color: var(--muted); }
.cfxpc-cols2-head .cfxpc-c-net, .cfxpc-cols2-head .cfxpc-c-cost { color: var(--muted); font-weight: 500; }
.cfxpc-cols2-head .cfxpc-c-net { color: var(--cfxpc-green); }
.cfxpc-cols2-line { padding: 4px 20px 4px 12px; }
.cfxpc-cols2-efka { color: var(--muted); }
.cfxpc-cols2-efka .cfxpc-c-cost { font-weight: 500; }