/* =====================================================================
   css/sfa-dialog.css - η εμφάνιση των παραθύρων επιβεβαίωσης
   =====================================================================
   Ζευγάρι του js/sfa-dialog.js. Φορτώνεται ΜΕΤΑ το
   https://assets.c2s.gr/css/styles.css.

   ── ΤΟ ΠΡΑΓΜΑΤΙΚΟ ΠΡΟΒΛΗΜΑ ──────────────────────────────────────────────

   Το κοινό stylesheet των C2S (assets.c2s.gr/css/styles.css, το ίδιο αρχείο
   για εννέα sites) επιβάλλει:

       .swal2-confirm { background-color: var(--primary-color) !important; }
       .swal2-cancel  { background-color: var(--error-border-color) !important; }

   Δηλαδή ΚΑΘΕ κουμπί επιβεβαίωσης βγαίνει χρυσό και ΚΑΘΕ κουμπί ακύρωσης
   βγαίνει ΚΟΚΚΙΝΟ - με `!important`, οπότε τα `confirmButtonColor` και
   `cancelButtonColor` που περνά το JavaScript αγνοούνται τελείως.

   Οι συνέπειες φαίνονται σε κάθε παράθυρο της εφαρμογής:

     - «Οριστική Διαγραφή»: το «Ναι, Διαγραφή» χρυσό και το «Ακύρωση» κόκκινο.
       Το πιο έντονο χρώμα της οθόνης κάθεται στην ΑΚΙΝΔΥΝΗ επιλογή, ενώ η
       μη αναστρέψιμη διαγραφή μοιάζει με το κουμπί «Αποθήκευση».
     - «Αφαίρεση Φροντιστή», «Επεξεργασία Σημείου»: το ίδιο ζευγάρι.

   Το αρχείο του assets.c2s.gr ΔΕΝ πειράζεται: το μοιράζονται άλλα οκτώ
   sites. Η διόρθωση γίνεται εδώ, τοπικά.

   ── Ο ΚΑΝΟΝΑΣ ──────────────────────────────────────────────────────────
     ακύρωση      ουδέτερο γκρι, σκούρο κείμενο - ΠΟΤΕ κόκκινο
     κύρια πράξη  χρυσό της παλέτας
     καταστροφή   βαθύ κόκκινο (--pdf-color), μόνο όταν είναι όντως τέτοια
   ===================================================================== */

/* ── Ακύρωση: ουδέτερη ─────────────────────────────────────────────────── */

.swal2-popup .swal2-cancel,
.swal2-popup .swal2-cancel:focus {
    background-color: var(--third-light-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--third-color) !important;
    font-weight: 600 !important;
}

.swal2-popup .swal2-cancel:hover {
    background-color: var(--third-color) !important;
    color: var(--text-color) !important;
}

/* ── Κύρια πράξη: χρυσό ────────────────────────────────────────────────── */

.swal2-popup .swal2-confirm {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border: 1px solid var(--primary-color) !important;
}

.swal2-popup .swal2-confirm:hover {
    background-color: var(--secondary-light-color) !important;
}

/* ── Καταστροφική πράξη: βαθύ κόκκινο ──────────────────────────────────── */

/* Την κλάση `sfa-danger` τη βάζει το js/sfa-dialog.js, είτε μέσω
   SFA_DIALOG.confirmDelete() είτε αυτόματα σε κάθε Swal.fire που ζητά
   confirmButtonColor ίσο με το danger της παλέτας. Έτσι διορθώνονται και οι
   22 υπάρχουσες κλήσεις, χωρίς να αγγιχτεί καμία από αυτές. */
.swal2-popup.sfa-danger .swal2-confirm {
    background-color: var(--pdf-color) !important;
    border-color: var(--pdf-color) !important;
    color: #fff !important;
}

.swal2-popup.sfa-danger .swal2-confirm:hover {
    background-color: var(--pdf-color-darker) !important;
}

/* Το κουμπί άρνησης (deny) ακολουθεί το ίδιο λεξιλόγιο. */
.swal2-popup .swal2-deny {
    background-color: var(--pdf-color) !important;
    color: #fff !important;
    border: 1px solid var(--pdf-color) !important;
}

/* ── Το κείμενο του παραθύρου ──────────────────────────────────────────── */

/* Το κοινό stylesheet βάφει ΟΛΟ το σώμα του παραθύρου στο δεύτερο χρώμα
   (κίτρινο), που πάνω σε ανοιχτό φόντο διαβάζεται δύσκολα - και στο μήνυμα
   μιας οριστικής διαγραφής αυτό δεν είναι λεπτομέρεια. */
.swal2-popup .swal2-html-container {
    color: var(--text-color) !important;
}

.sfa-confirm-popup .swal2-html-container .text-muted {
    color: color-mix(in srgb, var(--text-color) 62%, #fff) !important;
}

/* ── Παράθυρα Bootstrap: το ίδιο λεξιλόγιο ─────────────────────────────── */

/* Τα ίδια κουμπιά υπάρχουν και σε modal του Bootstrap. Χωρίς αυτό, το
   «Ακύρωση» ενός modal είναι κόκκινο ενώ το «Ακύρωση» ενός SweetAlert είναι
   γκρι: δύο διαφορετικές γλώσσες για την ίδια πράξη, στην ίδια σελίδα. */
.modal-footer .btn-sfa-cancel,
.modal .btn-sfa-cancel {
    background-color: var(--third-light-color);
    color: var(--text-color);
    border: 1px solid var(--third-color);
    font-weight: 600;
}

.modal .btn-sfa-cancel:hover {
    background-color: var(--third-color);
    color: var(--text-color);
}

.modal .btn-sfa-danger {
    background-color: var(--pdf-color);
    color: #fff;
    border: 1px solid var(--pdf-color);
    font-weight: 600;
}

.modal .btn-sfa-danger:hover {
    background-color: var(--pdf-color-darker);
    color: #fff;
}

/* ── Σειρά κουμπιών ────────────────────────────────────────────────────── */

/* Η κύρια πράξη δεξιά, η ακύρωση αριστερά.
 *
 * ΓΙΝΕΤΑΙ ΜΕ `reverseButtons` ΚΑΙ ΟΧΙ ΜΕ CSS. Είχα βάλει εδώ
 * `flex-direction: row-reverse`, αλλά οι κλήσεις που περνούσαν ΚΑΙ
 * `reverseButtons: true` έπαιρναν τη σειρά δύο φορές και κατέληγαν
 * ανάποδα: στην «Οριστική Διαγραφή» το κόκκινο κουμπί βγήκε αριστερά.
 *
 * Επιπλέον, με CSS η ΟΠΤΙΚΗ σειρά διαφέρει από τη σειρά του DOM: όποιος
 * περιηγείται με πληκτρολόγιο ή αναγνώστη οθόνης παίρνει τα κουμπιά
 * ανάποδα από ό,τι τα βλέπει ο διπλανός του. Τη σειρά την επιβάλλει πλέον
 * το js/sfa-dialog.js σε κάθε διάλογο, μία φορά. */
.swal2-actions {
    gap: 8px;
}


/* =====================================================================
   ΤΑ ΠΑΡΑΘΥΡΑ BOOTSTRAP: ΙΔΙΟ ΥΦΟΣ ΜΕ ΤΑ SWEETALERT
   =====================================================================
   Στην ίδια σελίδα συνυπάρχουν και τα δύο είδη. Χωρίς αυτό, το «Επαλήθευση
   Στοιχείων» (Bootstrap) και το «Οριστική Διαγραφή» (SweetAlert) μοιάζουν με
   δύο διαφορετικές εφαρμογές: άλλη καμπυλότητα, άλλο χρώμα τίτλου, άλλη
   απόσταση κουμπιών.
   ===================================================================== */

.modal-content {
    border: 1px solid color-mix(in srgb, var(--primary-color) 20%, #e5e7eb);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .2);
}

.modal-header {
    border-bottom: 1px solid color-mix(in srgb, var(--third-color) 45%, #fff);
    padding: 0.9rem 1.15rem;
}

/* Ίδιο χρώμα τίτλου με το .swal2-title του κοινού stylesheet. */
.modal-title {
    color: var(--primary-color);
    font-weight: 700;
}

.modal-footer {
    border-top: 1px solid color-mix(in srgb, var(--third-color) 45%, #fff);
    gap: 8px;
    padding: 0.75rem 1.15rem;
}

/* Η κύρια πράξη δεξιά, όπως και στα SweetAlert. */
.modal-footer > * {
    margin: 0;
}