/* =====================================================================
   css/sfa-toasts.css - η εμφάνιση των ειδοποιήσεων (toastr)
   =====================================================================
   Ζευγάρι του js/sfa-toast.js, που ήδη ενοποιεί τις ΡΥΘΜΙΣΕΙΣ (θέση,
   διάρκεια, μπάρα προόδου). Εδώ ενοποιείται η ΕΜΦΑΝΙΣΗ.

   ΤΙ ΗΤΑΝ ΠΡΙΝ: το προεπιλεγμένο θέμα του toastr - στρογγυλεμένα κουτιά σε
   έντονο πράσινο/κόκκινο/μπλε, με εικονίδιο ζωγραφισμένο μέσα στο φόντο.
   Κανένα από αυτά τα χρώματα δεν υπάρχει στην παλέτα, και δίπλα στα
   βιομηχανικά παράθυρα έμοιαζαν με ξένο σύστημα.

   ΤΩΡΑ: λευκή επιφάνεια, λεπτή γραμμή, ΜΙΑ χρωματιστή λωρίδα στο πλάι που
   λέει τον τόνο, και το εικονίδιο σε δικό του κύκλο. Ίδιο λεξιλόγιο με τα
   confirm και τα παράθυρα.
   ===================================================================== */

#toast-container > div {
    width: auto;
    max-width: 380px;
    padding: 13px 16px 13px 52px;
    border: 1px solid var(--sfa-border, #ded7cd);
    border-radius: var(--sfa-radius, 8px);
    background-color: var(--sfa-surface, #fff) !important;
    background-image: none !important;
    color: var(--sfa-ink, #22223b);
    box-shadow: var(--sfa-shadow-md, 0 8px 24px rgb(34 34 59 / 10%)) !important;
    opacity: 1 !important;
    font-size: 0.86rem;
    line-height: 1.45;
}

#toast-container > div:hover {
    box-shadow: var(--sfa-shadow-lg, 0 18px 44px rgb(34 34 59 / 16%)) !important;
}

/* Η ΛΩΡΙΔΑ ΤΟΝΟΥ: 4px στο πλάι. Το χρώμα δεν γεμίζει ολόκληρο το κουτί,
   γιατί τότε το κείμενο πρέπει να γίνει λευκό και χάνει αναγνωσιμότητα. */
#toast-container > div::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    border-radius: var(--sfa-radius, 8px) 0 0 var(--sfa-radius, 8px);
    background: var(--sfa-ink-muted, #6c6a72);
}

/* Το εικονίδιο σε κύκλο, στη θέση που άδειασε το padding-left. */
#toast-container > div::after {
    position: absolute;
    top: 14px;
    left: 15px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    font-family: 'remixicon', sans-serif;
    font-size: 14px;
    line-height: 1;
}

#toast-container > .toast-success::before { background: var(--sfa-green, #1f7a45); }
#toast-container > .toast-error::before   { background: var(--sfa-red, #a32d2f); }
#toast-container > .toast-warning::before { background: var(--sfa-amber, #b37a06); }
#toast-container > .toast-info::before    { background: var(--sfa-info, #2f6f9f); }

#toast-container > .toast-success::after {
    content: '\ef76';   /* ri-check-line */
    background: var(--sfa-green-soft, #e6f3ec);
    color: var(--sfa-green, #1f7a45);
}

#toast-container > .toast-error::after {
    content: '\eb99';   /* ri-close-line */
    background: var(--sfa-red-soft, #fbeceb);
    color: var(--sfa-red, #a32d2f);
}

#toast-container > .toast-warning::after {
    content: '\ead1';   /* ri-alert-line */
    background: var(--sfa-amber-soft, #fdf3dd);
    color: var(--sfa-amber, #b37a06);
}

#toast-container > .toast-info::after {
    content: '\ee59';   /* ri-information-line */
    background: var(--sfa-info-soft, #e8f1f8);
    color: var(--sfa-info, #2f6f9f);
}

.toast-title {
    margin-bottom: 2px;
    color: var(--sfa-deep, #3f2d16);
    font-size: 0.84rem;
    font-weight: 800;
}

.toast-message {
    color: var(--sfa-ink, #22223b);
    overflow-wrap: anywhere;
}

.toast-message a {
    color: var(--sfa-accent-strong, #b87d33);
    text-decoration: underline;
}

/* Το κουμπί κλεισίματος: διακριτικό, αλλά αρκετά μεγάλο για δάχτυλο. */
#toast-container > div > .toast-close-button {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 24px;
    height: 24px;
    color: var(--sfa-ink-muted, #6c6a72);
    font-size: 18px;
    font-weight: 400;
    opacity: .7;
    text-shadow: none;
}

#toast-container > div > .toast-close-button:hover,
#toast-container > div > .toast-close-button:focus {
    color: var(--sfa-red, #a32d2f);
    opacity: 1;
}

/* Η μπάρα προόδου παίρνει το χρώμα του τόνου, όχι το προεπιλεγμένο μαύρο. */
#toast-container > div > .toast-progress {
    height: 3px;
    background-color: currentColor;
    opacity: .35;
}

#toast-container > .toast-success > .toast-progress { color: var(--sfa-green, #1f7a45); }
#toast-container > .toast-error   > .toast-progress { color: var(--sfa-red, #a32d2f); }
#toast-container > .toast-warning > .toast-progress { color: var(--sfa-amber, #b37a06); }
#toast-container > .toast-info    > .toast-progress { color: var(--sfa-info, #2f6f9f); }

/* Ο διακόπτης γλώσσας κάθεται κάτω δεξιά με z-index 1085. Τα toast είναι
   πάνω δεξιά, αλλά σε στενή οθόνη πιάνουν όλο το πλάτος: χωρίς μεγαλύτερο
   z-index, ένα toast θα έμπαινε πίσω από αιωρούμενο στοιχείο. */
#toast-container {
    z-index: 1090;
}

@media (max-width: 480px) {
    #toast-container > div {
        width: calc(100vw - 24px);
        max-width: none;
    }
}