/* =====================================================================
   css/sfa-forms.css - βιομηχανικά πεδία
   =====================================================================
   Ζευγάρι του css/sfa-tokens.css. Φορτώνεται ΜΕΤΑ τα style-dashboard.css
   και assets.c2s.gr/css/styles.css.

   ── ΤΟ ΠΡΟΒΛΗΜΑ ────────────────────────────────────────────────────────
   Κάθε φόρμα όριζε δικό της ύψος, δική της καμπύλη και δικό της περίγραμμα.
   Στο ίδιο παράθυρο συνυπήρχαν input 38px με select 31px και Select2 42px:
   τα πεδία έμοιαζαν να «χοροπηδούν» σε κάθε γραμμή. Το Bootstrap από κάτω
   βάζει μπλε εστίαση (#0d6efd) που δεν υπάρχει πουθενά στην παλέτα.

   ── ΤΟ ΣΥΜΒΟΛΑΙΟ ───────────────────────────────────────────────────────
   ΕΝΑ ύψος (--sfa-field-height) για κάθε χειριστήριο: input, select,
   textarea (πολλαπλάσιο), Select2, flatpickr, κουμπί. Λεπτή γραμμή, μικρή
   καμπύλη, καμία σκιά-μπαλόνι. Εστίαση ΜΟΝΟ στο χρυσό της παλέτας.
   Κανένα σταθερό πλάτος σε px: όλα πρέπει να χωρούν σε οθόνη 1366x768.
   ===================================================================== */

/* ── 1. Βασικά πεδία ───────────────────────────────────────────────── */

.sfa-window-content .form-control,
.sfa-window-content .form-select,
.sfa-window-content input[type="text"],
.sfa-window-content input[type="search"],
.sfa-window-content input[type="number"],
.sfa-window-content input[type="email"],
.sfa-window-content input[type="tel"],
.sfa-window-content input[type="password"],
.sfa-window-content input[type="date"],
.sfa-window-content select,
.sfa-industrial .form-control,
.sfa-industrial .form-select,
.sfa-industrial input[type="text"],
.sfa-industrial input[type="search"],
.sfa-industrial input[type="number"],
.sfa-industrial input[type="email"],
.sfa-industrial input[type="tel"],
.sfa-industrial input[type="password"],
.sfa-industrial input[type="date"],
.sfa-industrial select {
    min-height: var(--sfa-field-height);
    padding: 0.42rem 0.7rem;
    border: 1px solid var(--sfa-border);
    border-radius: var(--sfa-radius-sm);
    background: var(--sfa-surface);
    color: var(--sfa-ink);
    font-size: 0.9rem;
    line-height: 1.35;
    box-shadow: none;
    transition: border-color var(--sfa-transition), box-shadow var(--sfa-transition);
}

.sfa-window-content textarea,
.sfa-industrial textarea {
    min-height: calc(var(--sfa-field-height) * 2);
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--sfa-border);
    border-radius: var(--sfa-radius-sm);
    background: var(--sfa-surface);
    color: var(--sfa-ink);
    font-size: 0.9rem;
    line-height: 1.5;
    box-shadow: none;
}

/* ΕΣΤΙΑΣΗ. Το Bootstrap βάζει μπλε δαχτυλίδι (#0d6efd) που δεν υπάρχει
   πουθενά στην παλέτα: σε μια οθόνη με χρυσό και καφέ, το μπλε διαβάζεται
   ως σφάλμα. */
.sfa-window-content .form-control:focus,
.sfa-window-content .form-select:focus,
.sfa-window-content input:focus,
.sfa-window-content select:focus,
.sfa-window-content textarea:focus,
.sfa-industrial .form-control:focus,
.sfa-industrial .form-select:focus,
.sfa-industrial input:focus,
.sfa-industrial select:focus,
.sfa-industrial textarea:focus {
    border-color: var(--sfa-accent);
    outline: 0;
    box-shadow: var(--sfa-focus-ring);
}

.sfa-window-content input[disabled],
.sfa-window-content select[disabled],
.sfa-industrial input[disabled],
.sfa-industrial select[disabled] {
    background: var(--sfa-surface-muted);
    color: var(--sfa-ink-muted);
    cursor: not-allowed;
}

/* ── 2. Ετικέτες ───────────────────────────────────────────────────── */

.sfa-window-content label,
.sfa-industrial label {
    display: inline-block;
    margin-bottom: 4px;
    color: var(--sfa-deep);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Το υποχρεωτικό σημαίνεται με αστερίσκο ΚΑΙ με τίτλο: το χρώμα μόνο του
   δεν φτάνει για όποιον δεν το βλέπει. */
.sfa-window-content label .required,
.sfa-industrial label .required {
    margin-left: 2px;
    color: var(--sfa-red);
    font-weight: 900;
}

/* ── 3. Η ομάδα πεδίου: εικονίδιο | πεδίο | βοήθεια ────────────────── */

/*
 * Αυτή είναι η «βιομηχανική» μορφή που ήδη χρησιμοποιούν οι φόρμες: ένα
 * τετράγωνο με εικονίδιο αριστερά, το πεδίο στη μέση, ένα κουμπί «i» δεξιά.
 * Μέχρι τώρα την έχτιζε κάθε σελίδα με δικά της px. Εδώ είναι ένας κανόνας.
 */
.sfa-field {
    display: grid;
    align-items: stretch;
    grid-template-columns: var(--sfa-field-height) minmax(0, 1fr) auto;
    border: 1px solid var(--sfa-border);
    border-radius: var(--sfa-radius-sm);
    background: var(--sfa-surface);
    overflow: hidden;
}

.sfa-field:focus-within {
    border-color: var(--sfa-accent);
    box-shadow: var(--sfa-focus-ring);
}

.sfa-field-icon {
    display: grid;
    place-items: center;
    background: var(--sfa-deep);
    color: var(--sfa-ink-inverse);
    font-size: 1rem;
}

/* Το πεδίο ΜΕΣΑ στην ομάδα δεν έχει δικό του περίγραμμα: το περίγραμμα
   ανήκει στην ομάδα, αλλιώς φαίνονται δύο πλαίσια το ένα μέσα στο άλλο. */
.sfa-field > input,
.sfa-field > select,
.sfa-field > textarea,
.sfa-field .form-control,
.sfa-field .form-select {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sfa-field-help {
    display: grid;
    width: var(--sfa-field-height);
    place-items: center;
    border: 0;
    border-left: 1px solid var(--sfa-border);
    background: var(--sfa-surface-muted);
    color: var(--sfa-deep);
    cursor: help;
}

.sfa-field-help:hover {
    background: var(--sfa-accent-soft);
    color: var(--sfa-accent-strong);
}

/* ── 4. Select2 ────────────────────────────────────────────────────── */

/* ΟΛΟΚΛΗΡΟ ΤΟ SELECT2 ΕΙΝΑΙ ΣΤΟ css/sfa-select.css.
 *
 * Εδώ υπήρχαν τρεις ξεχωριστές ομάδες κανόνων (ύψος, ομάδα πεδίου,
 * dropdown), σε τρία διαφορετικά σημεία του αρχείου - δύο από αυτές
 * όριζαν το ίδιο πράγμα. Μαζί με τον κανόνα της σελίδας σύνδεσης για τον
 * κωδικό χώρας, γίνονταν τέσσερις φωνές για ένα πεδίο. Τώρα μία. */

/* ── 5. Διακόπτες και επιλογές ─────────────────────────────────────── */

.sfa-window-content .form-check-input,
.sfa-industrial .form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid var(--sfa-border-strong);
    box-shadow: none;
}

.sfa-window-content .form-check-input:checked,
.sfa-industrial .form-check-input:checked {
    border-color: var(--sfa-accent);
    background-color: var(--sfa-accent);
}

.sfa-window-content .form-check-input:focus,
.sfa-industrial .form-check-input:focus {
    border-color: var(--sfa-accent);
    box-shadow: var(--sfa-focus-ring);
}

.sfa-window-content .form-switch .form-check-input,
.sfa-industrial .form-switch .form-check-input {
    width: 2.1rem;
}

/* ── 6. Μηνύματα σφάλματος κάτω από το πεδίο ───────────────────────── */

/* ΠΟΤΕ με κλείσιμο παραθύρου: ο χρήστης πρέπει να δει ΠΟΙΟ πεδίο φταίει,
   με τα γραμμένα του ακέραια. Ίδιος κανόνας με το WeldGrid. */
.sfa-field-error {
    display: block;
    margin-top: 4px;
    color: var(--sfa-red);
    font-size: 0.76rem;
    font-weight: 600;
}

/* Το άκυρο πεδίο μένει ΚΟΚΚΙΝΟ ΚΑΙ όταν έχει την εστίαση.
 *
 * Ο κανόνας εστίασης παραπάνω βάφει το περίγραμμα χρυσό. Επειδή έρχεται πιο
 * μετά στο αρχείο, κέρδιζε: το πεδίο που μόλις απέτυχε τον έλεγχο - και που
 * εστιάζουμε επίτηδες για να το βρει ο χρήστης - έδειχνε κανονικό. Έμενε
 * μόνο το κόκκινο μήνυμα από κάτω, δηλαδή το σφάλμα φαινόταν σε ΕΝΑ σημείο
 * αντί για δύο. Γι' αυτό το `:focus` δηλώνεται ρητά εδώ. */
.sfa-window-content input.is-invalid,
.sfa-window-content select.is-invalid,
.sfa-window-content textarea.is-invalid,
.sfa-window-content input.is-invalid:focus,
.sfa-window-content select.is-invalid:focus,
.sfa-window-content textarea.is-invalid:focus,
.sfa-industrial input.is-invalid,
.sfa-industrial select.is-invalid,
.sfa-industrial textarea.is-invalid,
.sfa-industrial input.is-invalid:focus,
.sfa-industrial select.is-invalid:focus,
.sfa-industrial textarea.is-invalid:focus {
    border-color: var(--sfa-red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sfa-red) 18%, transparent);
}

/* =====================================================================
   7. ΜΕΣΑ ΣΤΟ ΠΑΡΑΘΥΡΟ: ΚΑΜΙΑ ΓΕΜΑΤΗ ΧΡΩΜΑΤΙΣΤΗ ΜΠΑΡΑ
   =====================================================================
   Το κοινό stylesheet των C2S ξαναγράφει τα βοηθητικά του Bootstrap στην
   παλέτα του: το `.bg-light` βγαίνει ΧΡΥΣΟ, όχι ανοιχτό γκρι. Μέσα σε
   φόρμα, η ομάδα των διακοπτών προσβασιμότητας γινόταν ένα συμπαγές χρυσό
   πλακάτο που τραβούσε όλο το βλέμμα - ενώ είναι απλώς τέσσερα checkbox.

   Ο βιομηχανικός κανόνας: το χρώμα σημαίνει ΚΑΤΑΣΤΑΣΗ, όχι ομαδοποίηση.
   Η ομαδοποίηση γίνεται με γραμμή και απόσταση. */

.sfa-window-content .bg-light,
.sfa-window-content .bg-body-tertiary,
.sfa-industrial .bg-light {
    border-color: var(--sfa-border) !important;
    background: var(--sfa-surface-soft) !important;
}

/* Οι επικεφαλίδες ενοτήτων: μικρό, βαρύ, με λεπτή γραμμή από κάτω.
   Ίδια μορφή με τους τίτλους του κουτιού «ΤΙ ΘΑ ΓΙΝΕΙ». */
.sfa-window-content h5,
.sfa-window-content h6 {
    margin: 1.25rem 0 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--sfa-border);
    color: var(--sfa-deep) !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em;
    opacity: 1 !important;
}

.sfa-window-content > *:first-child + h5,
.sfa-window-content h5:first-child {
    margin-top: 0;
}

/* Το Bootstrap `text-muted` μέσα στις επικεφαλίδες τις σβήνει σχεδόν
   τελείως πάνω στο ανοιχτό φόντο του σώματος. */
.sfa-window-content h5.text-muted,
.sfa-window-content h6.text-muted {
    color: var(--sfa-deep) !important;
    opacity: 1;
}

/* Οι διακόπτες μπαίνουν σε πλέγμα με σταθερή απόσταση, ώστε να μη
   «χοροπηδούν» ανάλογα με το μήκος της ετικέτας. */
.sfa-window-content .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--sfa-control-height);
    margin: 0;
    padding-left: 0;
}

.sfa-window-content .form-check .form-check-input {
    margin: 0;
    float: none;
    flex: 0 0 auto;
}

.sfa-window-content .form-check-label {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

/* =====================================================================
   8. ΤΑ ΠΑΛΙΑ ΠΕΔΙΑ ΜΕ ΤΟ ΧΡΥΣΟ ΚΟΥΤΙ ΕΙΚΟΝΙΔΙΟΥ
   =====================================================================
   Το κοινό stylesheet των C2S ορίζει:

       .input-with-help-icon { background-color: var(--background-dark) !important }
       .input-group .input-group-text { height: 60px !important;
                                        background: var(--primary-color) }

   δηλαδή μπεζ γέμισμα στο πεδίο και ΣΥΜΠΑΓΕΣ ΧΡΥΣΟ κουτί 60px για το
   εικονίδιο. Δίπλα σε ένα κανονικό πεδίο 42px, τα δύο μοιάζουν με δύο
   διαφορετικές εφαρμογές - και το χρυσό κουτί τραβά περισσότερο βλέμμα από
   την ίδια την τιμή που γράφει ο χρήστης.

   Το κοινό αρχείο δεν πειράζεται (9 sites). Εδώ αλλάζουν ΜΟΝΟ ΜΕΣΑ ΣΤΑ
   ΠΑΡΑΘΥΡΑ: ίδιο ύψος με τα υπόλοιπα, λευκό πεδίο, ουδέτερο κουτί εικονιδίου.
   ===================================================================== */

.sfa-window-content .input-with-help-icon,
.sfa-window-modal .modal-body .input-with-help-icon {
    height: var(--sfa-field-height) !important;
    min-height: var(--sfa-field-height) !important;
    border: 1px solid var(--sfa-border) !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background-color: var(--sfa-surface) !important;
    color: var(--sfa-ink) !important;
}

.sfa-window-content .input-group .input-group-text,
.sfa-window-modal .modal-body .input-group .input-group-text {
    height: var(--sfa-field-height) !important;
    min-width: var(--sfa-field-height);
    justify-content: center;
    border: 1px solid var(--sfa-border) !important;
    border-right: 0 !important;
    border-radius: var(--sfa-radius-sm) 0 0 var(--sfa-radius-sm) !important;
    background: var(--sfa-surface-muted) !important;
    color: var(--sfa-ink-muted) !important;
    font-size: 1rem !important;
}

/* ΤΟ ΚΟΥΜΠΙ ΒΟΗΘΕΙΑΣ «i» ΔΕΞΙΑ.
 *
 * Ήταν ουδέτερο γκρι τετράγωνο με γκρι εικονίδιο: δεν διακρινόταν από το
 * κουτί του εικονιδίου στα αριστερά, και δεν φαινόταν καν ότι πατιέται.
 * Τώρα είναι ΧΡΩΜΑΤΙΣΤΟ με λευκό εικονίδιο μέσα - το ίδιο χρυσό με το
 * κουμπί επιβεβαίωσης, ώστε να διαβάζεται ως ενέργεια. */
.sfa-window-content .btn-info-info,
.sfa-window-modal .modal-body .btn-info-info {
    display: grid !important;
    width: var(--sfa-field-height);
    height: var(--sfa-field-height);
    place-items: center;
    padding: 0 !important;
    border: 1px solid var(--sfa-accent) !important;
    border-left: 0 !important;
    border-radius: 0 var(--sfa-radius-sm) var(--sfa-radius-sm) 0 !important;
    background: var(--sfa-accent) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* Το εικονίδιο έχει `style="color: var(--text-color-light); font-size:1.6rem"`
   γραμμένο ΜΕΣΑ στο markup, σε 30+ πεδία. Το inline style το νικά μόνο
   δήλωση με `!important` - γι' αυτό είναι εδώ, όχι για βάρος ειδικότητας. */
.sfa-window-content .btn-info-info i,
.sfa-window-modal .modal-body .btn-info-info i {
    color: #fff !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
}

.sfa-window-content .btn-info-info:hover,
.sfa-window-modal .modal-body .btn-info-info:hover,
.sfa-window-content .btn-info-info:focus-visible,
.sfa-window-modal .modal-body .btn-info-info:focus-visible {
    border-color: var(--sfa-accent-strong) !important;
    background: var(--sfa-accent-strong) !important;
    color: #fff !important;
}

/* Η εστίαση ανάβει ΟΛΗ την ομάδα, όχι μόνο το πεδίο στη μέση: αλλιώς το
   δαχτυλίδι κόβεται στη μέση από τα διπλανά κουτιά. */
.sfa-window-content .input-group:focus-within,
.sfa-window-modal .modal-body .input-group:focus-within {
    border-radius: var(--sfa-radius-sm);
    box-shadow: var(--sfa-focus-ring);
}

.sfa-window-content .input-group:focus-within .input-with-help-icon,
.sfa-window-modal .modal-body .input-group:focus-within .input-with-help-icon {
    box-shadow: none !important;
}

/* =====================================================================
   9. ΕΠΙΚΕΦΑΛΙΔΕΣ ΕΝΟΤΗΤΩΝ ΜΕ ΣΗΜΑΔΙ
   =====================================================================
   Στο πρότυπο κάθε ενότητα έχει εικονίδιο μπροστά («ΤΑΥΤΟΤΗΤΑ ΕΡΓΟΥ»,
   «ΑΝΑΘΕΣΗ», «ΤΟΠΟΘΕΣΙΑ»). Οι σελίδες εδώ γράφουν σκέτο <h5>, οπότε το
   σημάδι μπαίνει από το CSS: μια μικρή χρυσή μπάρα που δίνει τον ίδιο ρυθμό
   χωρίς να χρειαστεί να αλλάξει markup σε πέντε φόρμες. */

.sfa-window-content h5::before,
.sfa-window-content h6::before,
.sfa-window-modal .modal-body h5::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 0.82em;
    margin-right: 8px;
    border-radius: 2px;
    background: var(--sfa-accent);
    vertical-align: -1px;
}

/* Το ΔΟΧΕΙΟ του εικονιδίου (`.input-group-prepend`) κρατά δικό του χρυσό
   γέμισμα 60px από το κοινό stylesheet: το κουτί μέσα του έγινε 42px και
   ουδέτερο, αλλά από πίσω του έμενε ορατή χρυσή λωρίδα 18px. */
.sfa-window-content .input-group-prepend,
.sfa-window-content .input-group-append,
.sfa-window-modal .modal-body .input-group-prepend,
.sfa-window-modal .modal-body .input-group-append {
    height: var(--sfa-field-height) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* Τα κουμπιά του σώματος (όχι του footer) στο ίδιο ύψος και σχήμα με τα
   πεδία. Το `btn-primary-theme-whole-round` τα κάνει χάπι 48px. */
.sfa-window-content .btn-primary-theme,
.sfa-window-modal .modal-body .btn-primary-theme {
    min-height: var(--sfa-field-height);
    border-radius: var(--sfa-radius-sm) !important;
}

.sfa-window-modal .sfa-window-actions .btn-primary-theme,
.sfa-window-modal .sfa-window-actions .btn-primary-theme-whole-round {
    min-height: var(--sfa-field-height);
    height: var(--sfa-field-height);
    border-radius: var(--sfa-radius-sm) !important;
}