/* ===== Wider Modal for Better Readability ===== */
.modal-dialog {
    max-width: 70% !important; /* Increase modal width */
}

/* ===== Modal Background: Off-White (Better Readability) ===== */
.modal-content {
    background-color: #f8f9fa !important; /* Bootstrap’s light gray (off-white) */
    color: #333 !important; /* Dark gray text */
    border: 1px solid #ccc !important; /* Subtle border */
    backdrop-filter: none !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Softer shadow */
}

/* Ensure modal header and footer match the light theme */
.modal-header, .modal-footer {
    background-color: #f1f3f5 !important; /* Slightly darker off-white */
    border-color: #ccc !important;
}

/* Ensure modal title and header text is readable */
h5.modal-title, 
.modal-header h5, 
.modal-header h5 strong {
    color: #222 !important; /* Slightly darker than body text */
    font-weight: bold !important; /* Keep title bold */
}

/* ===== Modal Body Background (Off-White) ===== */
.modal-body {
    background-color: #f8f9fa !important; /* Off-white */
    color: #333 !important; /* Dark gray text */
}

/* ===== Ensure Tabs Inside Modals Have Proper Background & Size ===== */
.tab-content {
    background-color: #f8f9fa !important; /* Match modal background */
    color: #333 !important;
}

/* Ensure Individual Tab Panes Use the Same Background */
.tab-pane {
    background-color: #f8f9fa !important;
    color: #333 !important;
}

/* ===== Style Tab Navigation for Light Theme ===== */
.nav-tabs .nav-link {
    background-color: #e9ecef !important; /* Light gray */
    border: 1px solid #ccc !important;
    color: #444 !important; /* Slightly darker gray */
    font-weight: normal !important;
}

/* Active tab styling */
.nav-tabs .nav-link.active {
    background-color: #dee2e6 !important; /* Slightly darker */
    border-color: #ccc !important;
    color: #222 !important; /* Darker for emphasis */
    font-weight: normal !important;
}

/* Inactive tab styling (hover effect) */
.nav-tabs .nav-link:hover {
    background-color: #d6d8db !important;
}

/* ===== Buttons Styling (Dark Text on Light Background) ===== */
.btn-secondary {
    background-color: #d6d8db !important;
    border-color: #bbb !important;
    color: #333 !important; /* Dark gray text */
}

.btn-secondary:hover {
    background-color: #c6c8cb !important;
}

/* Ensure modal close button is visible */
.btn-close {
    filter: none !important; /* Default close button */
}