/* 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;
}
*/
/* Remove focus outline on dropdown toggles and nav links */
.nav-link:focus,
.nav-link.dropdown-toggle:focus,
.dropdown-toggle:focus,
.btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Dark Mode Fix for FOSSBilling Toast Notifications */

/* Apply dark mode to toasts when system is in dark mode */
@media (prefers-color-scheme: dark) {
    /* Toast container */
    .toast {
        background-color: #1f2937 !important;
        color: #e5e7eb !important;
        border: 1px solid #374151 !important;
    }

    /* Toast header */
    .toast-header {
        background-color: #111827 !important;
        color: #f3f4f6 !important;
        border-bottom: 1px solid #374151 !important;
    }

    /* Toast body */
    .toast-body {
        background-color: #1f2937 !important;
        color: #e5e7eb !important;
    }

    /* Close button - make it visible in dark mode */
    .toast .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    /* Primary indicator circle - keep it visible */
    .toast-header .bg-primary {
        opacity: 1 !important;
    }
}

/* If you want to force dark mode regardless of system preference, use this instead: */
/*
body[data-bs-theme="dark"] .toast,
[data-bs-theme="dark"] .toast {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    border: 1px solid #374151 !important;
}

body[data-bs-theme="dark"] .toast-header,
[data-bs-theme="dark"] .toast-header {
    background-color: #111827 !important;
    color: #f3f4f6 !important;
    border-bottom: 1px solid #374151 !important;
}

body[data-bs-theme="dark"] .toast-body,
[data-bs-theme="dark"] .toast-body {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
}

body[data-bs-theme="dark"] .toast .btn-close,
[data-bs-theme="dark"] .toast .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
*/