body.dark-mode {
    background-color: #2e4057;
    color: #f6d8ae;
}

.dark-mode .card-body {
    background-color: #333333;
    color: #ffffff;
    border-radius: 15px;
}

.btn .sort-dynamic{
    background-color: #444;
    color: #fff;
}

.dark-mode .card-body:hover {
    transition: .15s;
    background-color: #000000;
    color: #ffffff;
    border-radius: 15px;
}

.dark-mode .navbar {
    background-color: #222222 !important;
}

.dark-mode .navbar-brand {
    color: #b4654a !important;
}

.dark-mode .accordion-item {
    background-color: #333;
    border: 1px solid #444;
}

.dark-mode .accordion-body {
    color: #fff;
}

.dark-mode .accordion-button {
    background-color: #444;
    color: #fff;
}

.dark-mode .accordion-button:not(.collapsed) {
    background-color: #555;
    color: #fff;
}

.main-content {
    padding-top: 90px;
}

.dark-mode .accordion-button::after {
    filter: invert(1);
}

.dark-mode .form-control {
    background-color: #333;
    color: #fff;
    border-color: #555;
}

.dark-mode .form-control:focus {
    background-color: #333;
    color: #fff;
    border-color: #777;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.dark-mode .form-control::placeholder {
    color: #ccc;
    opacity: 1; /* Firefox */
}

.dark-mode .table {
    --bs-table-bg: #2e4057;
    --bs-table-color:#f6d8ae;
    --bs-table-border-color: #373b3e;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    --bs-table-striped-color: #f6d8ae;
    --bs-table-hover-bg: ##2e4057;
    --bs-table-hover-color: #f6d8ae;
}

.dark-mode pre code {
    background-color: #2e4057;
    color: #f6d8ae;
    display: block;
    padding: 1rem;
    border-radius: 5px;
}

.dark-mode .list-group-item {
    background-color: #333;
    color: #f6d8ae;
    border-color: #555;
}

.card {
    margin: 5px;
    border-radius: 15px;
}

.card-body{
    background-color: lightblue;
    border-radius: 15px;
}

.card-body:hover{
    transition: .15s;
    background-color: rgb(255, 255, 255);
    border-radius: 15px;
}

@keyframes subtle-glow {
    0%, 100% {
        box-shadow: 0 0 2px rgba(0, 123, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 10px rgba(0, 123, 255, 0.6);
    }
}

.subtle-glow-animation {
    animation: subtle-glow 4s ease-in-out infinite;
    border-radius: 5px; /* Optional: to make the glow more rounded */
    padding: 5px; /* Add some padding so the glow is not cut off */
}

/* --- Dark Mode Modal Styles --- */

/* Main modal background and text */
.dark-mode .modal-content {
    background-color: #343a40; /* Bootstrap's 'bg-dark' color */
    color: #f8f9fa; /* Light text */
    border: 1px solid #495057;
}

/* Header border */
.dark-mode .modal-header {
    border-bottom-color: #495057; /* A slightly lighter border */
}

/* Footer border */
.dark-mode .modal-footer {
    border-top-color: #495057;
}

/* Close button (X) */
.dark-mode .modal-header .btn-close {
    /* This filter inverts the default dark 'X' to be white */
    filter: invert(1) grayscale(100%) brightness(200%);
}

.dark-mode .text-muted {
    color: #ffffff !important;
}


.offcanvas-end {
    width: 250px; /* Or your preferred width */
}

.offcanvas-header {
    border-bottom: 1px solid #dee2e6;
}

.offcanvas-body .navbar-nav .nav-link {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Caret for collapsible sections */
a[data-bs-toggle="collapse"] {
    position: relative;
    padding-right: 20px; /* Make space for the caret */
}

a[data-bs-toggle="collapse"]::after {
    content: '>'; /* Replaced triangle with > */
    font-size: 0.8em;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.2s ease-in-out;
}

a[data-bs-toggle="collapse"][aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(90deg); /* Rotate down when expanded */
}

/* Settings Page - Report Editor */
#editor {
    height: 400px;
    background-color: white;
    color: black;
}

#preview-container {
    height: 400px;
    overflow-y: auto;
    background-color: #f8f9fa;
    color: black;
}

/* Dark Mode Overrides for Report Editor */
.dark-mode #editor {
    background-color: #333;
    color: #fff;
    border-color: #555;
}

.dark-mode .ql-toolbar {
    background-color: #e0e0e0;
    border-color: #555;
}

.dark-mode #preview-container {
    background-color: #333;
    color: #fff;
    border-color: #555 !important;
}

.dark-mode .ql-container {
    border-color: #555 !important;
}

.dark-mode .ql-editor {
    color: #fff;
}

/* Business Tabs */
#business-tabs .nav-link {
    color: #b4654a;
}

#business-tabs .nav-link.active {
    color: #495057;
}

/* Sort Options */
.btn-group .btn {
    color: #212529; /* Default text color */
}

.btn-group .btn:not(.active) {
    color: #6c757d; /* Grey for inactive buttons */
    border-color: #6c757d;
}

/* Specific overrides for dark mode if needed, though bootstrap usually handles btn-group well */
.dark-mode .btn-group .btn:not(.active) {
    color: #adb5bd; /* Lighter grey for dark mode inactive */
    border-color: #6c757d;
}

.dark-mode .btn-group .btn.active {
    color: #fff;
    border-color: #f6d8ae; /* Optional: highlight border for active in dark mode */
}

/* Settings Tabs */
#settingsTab .nav-link {
    color: #b4654a;
}

#settingsTab .nav-link.active {
    color: #495057;
}