/* Tide template custom CSS style v1.0 */
/* Using the examples, provide your own styling */

/*
.bg-primary {
     background-color: #your-color !important;
}
.text-primary {
     color: #your-color !important;
}
.btn-primary {
     background-color: #your-color !important;
     border-color: #your-color !important;
}
.btn-primary:hover {
     background-color: #your-hover-color !important;
     border-color: #your-hover-color !important;
}
.btn-primary:focus {
     background-color: #your-focus-color !important;
     border-color: #your-focus-color !important;
     box-shadow: 0 0 0 0.2rem rgba(#your-color, 0.5) !important;
}
.btn-primary:active {
     background-color: #your-active-color !important;
     border-color: #your-active-color !important;
}
.btn-primary:disabled {
     background-color: #your-disabled-color !important;
     border-color: #your-disabled-color !important;
}
*/

/* ==========================================================================
   BEAUTIFUL SYSTEM MESSAGE TOAST OVERRIDE (FOSSBilling bb.msg)
   ========================================================================== */

/* 1. Position and layer the toast container so it stands out */
.toast-container {
    bottom: 2rem !important;
    right: 2rem !important;
    z-index: 10000 !important;
}

/* 2. Style the main toast box (Make it larger with a deep shadow) */
.toast {
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    min-width: 350px; /* Make it wider so text doesn't cramp */
    opacity: 1 !important; /* Ensure it doesn't look faded */
}

/* 3. Style the header (Where it says "System message") */
.toast-header {
    background-color: transparent;
    border-bottom: 1px solid #f1f1f1;
    font-size: 1rem;
    font-weight: 600;
    color: #333333;
    padding: 0.85rem 1.2rem;
}

/* 4. Make the colored dot identifier slightly larger */
.toast-header .bg-danger,
.toast-header .bg-success,
.toast-header .bg-info,
.toast-header .bg-warning {
    width: 14px !important;
    height: 14px !important;
    margin-right: 10px !important;
}

/* 5. Style the body (Where the actual error/success text is) */
.toast-body {
    padding: 1.2rem;
    font-size: 1.05rem; /* Larger text for better readability */
    color: #444444;
    font-weight: 500;
    line-height: 1.5;
}

/* Optional: Add a thick red border specifically for error toasts to match the red dot */
.toast:has(.bg-danger) {
    border-left: 6px solid #d63939 !important;
}

/* Optional: Add a thick green border for success toasts */
.toast:has(.bg-success) {
    border-left: 6px solid #2fb344 !important;
}