/* public/css/base.css */

/* Core body styles */
body {
    font-family: 'Figtree', sans-serif;
    background-color: #f8f9fa; /* Light mode default */
}

/* Utility class (if needed beyond Bootstrap) */
.d-none {
    display: none !important;
}

/* Loading Overlay (Global) */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2); /* Light mode overlay */
    display: flex; /* Use flex to center */
    justify-content: center;
    align-items: center;
    z-index: 1050; /* Ensure above most content, below modals potentially */
}

/* Dark Mode Switch (Global Element - moved from app.blade.php) */
.dark-mode-switch-container {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1055; /* High z-index */
    background: rgba(var(--bs-body-bg-rgb), 0.8); /* Semi-transparent background */
    padding: 0.4rem 0.6rem;
    border-radius: 50px; /* Rounded pill shape */
    backdrop-filter: blur(3px); /* Optional: blur background */
    display: flex;
    align-items: center;
    border: 1px solid var(--bs-border-color-translucent); /* Add subtle border */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Add subtle shadow */
}

.dark-mode-switch-container .form-check-label {
    margin-left: 0.5rem;
    cursor: pointer; /* Make label clickable */
    color: #495057; /* Default Moon color */
}

.dark-mode-switch-container .form-switch .form-check-input {
    cursor: pointer;
    width: 2.5em; /* Slightly larger switch */
    height: 1.3em;
}

.dark-mode-switch-container .form-check-input:checked + .form-check-label {
    color: #ffcc66; /* Sun color */
}

/* Base toast styling (if needed beyond Bootstrap) */
.toast {
    /* Default styles if customization is needed */
}
.toast-header {
    /* Default styles if customization is needed */
}
.toast-body {
    /* Default styles if customization is needed */
}