/* ============================================================================
   folkshr-toasts.css
   ----------------------------------------------------------------------------
   GLOBAL toast / inline-alert styles.

   Why this exists: 46 pages render the `.custom-alert-container` toast markup and
   ~43 render `.toast-notification`, but only a handful defined the matching CSS in
   their own inline <style>. There was NO global definition, so on every other page
   the toast markup rendered completely unstyled (static flow, no background, no
   fixed position) and was effectively invisible — users saw "no success/error
   message" after create/update/delete across the whole system.

   Defining these classes once, globally, fixes the toasts everywhere at once
   without touching each page. Pages that also define these classes inline keep
   working (identical rules).
   ============================================================================ */

/* ---- custom-alert family (the dominant pattern, ~46 pages) ---------------- */
.custom-alert-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 320px;
}

.custom-alert {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: folkshr-toast-in 0.35s ease-out;
}

.custom-alert-success {
    background-color: #d1e7dd;
    color: #0f5132;
    border-left: 5px solid #0f5132;
}

.custom-alert-danger {
    background-color: #f8d7da;
    color: #842029;
    border-left: 5px solid #842029;
}

.custom-close-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin-left: 1rem;
    line-height: 1;
}

/* ---- toast-notification family (IntDes / LeaveMng etc., ~43 pages) -------- */
.toast-notification {
    position: fixed;
    top: 80px;
    right: 25px;
    z-index: 1100;
    color: #fff;
    background-color: #1abc9c;
    padding: 1rem 1.5rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    animation: folkshr-toast-in 0.35s ease-out;
}

/* Error variant (used as `toast-notification error-toast`). */
.toast-notification.error-toast,
.toast-notification.toast-error {
    background-color: #e74c3c;
}

.toast-notification .close-button {
    background: none;
    border: none;
    color: #fff;
    opacity: 0.7;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    margin-left: auto;
    padding-left: 15px;
}

.toast-notification .close-button:hover {
    opacity: 1;
}

@keyframes folkshr-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* RTL: slide from / anchor to the left. */
html[dir="rtl"] .custom-alert-container { right: auto; left: 1rem; }
html[dir="rtl"] .toast-notification { right: auto; left: 25px; }