/* Custom CSS for My Teaching Tracker */

/* Custom color variables */
:root {
  --bs-purple: #6f42c1;
  --bs-purple-rgb: 111, 66, 193;
  --bs-purple-dark: #5e35b1;
  --bs-purple-light: #9575cd;

  /* Blue theme colors (for replacing purple in light mode) */
  --bs-blue: #0d6efd;
  --bs-blue-rgb: 13, 110, 253;
  --bs-blue-dark: #0a58ca;
  --bs-blue-light: #6ea8fe;

  --bs-yellow: #ffc107;
  --bs-yellow-rgb: 255, 193, 7;
  --bs-yellow-dark: #e0a800;
  --bs-yellow-light: #ffda6a;

  --bs-teal: #20c997;
  --bs-teal-rgb: 32, 201, 151;

  --bs-indigo: #6610f2;
  --bs-indigo-rgb: 102, 16, 242;

  --bs-cyan: #0dcaf0;
  --bs-cyan-rgb: 13, 202, 240;

  --bs-orange: #fd7e14;
  --bs-orange-rgb: 253, 126, 20;

  --bs-pink: #d63384;
  --bs-pink-rgb: 214, 51, 132;
}





/* Enhanced navbar styling */
.navbar-nav .nav-link {
  position: relative;
  padding: 0.5rem 1rem;
  margin: 0 0.1rem;
  transition: all 0.3s ease;
  border-radius: 6px;
}

.navbar-nav .nav-link:hover {
  transform: translateY(-2px);
}

.navbar-nav .nav-link.active {
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.15);
}

.navbar-nav .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--bs-primary);
  transition: width 0.3s ease, left 0.3s ease;
  animation: navIndicator 0.5s forwards;
}

@keyframes navIndicator {
  0% { width: 0; left: 50%; }
  100% { width: 80%; left: 10%; }
}



[data-bs-theme="light"] footer {
  background: var(--footer-gradient) !important;
}

[data-bs-theme="light"] .card-header {
  background-color: rgba(0, 123, 255, 0.1);
  border-bottom: 2px solid rgba(0, 123, 255, 0.2);
}

/* Table styles for assessments */
.table-purple {
  background-color: rgba(var(--bs-purple-rgb), 0.1);
}

/* Custom purple/blue button */
.btn-purple {
  color: #fff;
  background-color: var(--bs-purple);
  border-color: var(--bs-purple);
}

.btn-purple:hover {
  color: #fff;
  background-color: var(--bs-purple-dark);
  border-color: var(--bs-purple-dark);
}

/* Custom button colors for specific elements */
/* Save scheme details button - Blue */
button[type="submit"].btn-primary,
form[action*="schemes"] button[type="submit"] {
  background-color: var(--bs-blue) !important;
  border-color: var(--bs-blue) !important;
  color: white !important;
}

button[type="submit"].btn-primary:hover,
form[action*="schemes"] button[type="submit"]:hover {
  background-color: var(--bs-blue-dark) !important;
  border-color: var(--bs-blue-dark) !important;
}

/* Add Unit button - Orange */
button[onclick*="addUnit"],
button[data-bs-target*="unit"],
.btn[onclick*="addUnit"],
#add-unit-btn {
  background-color: var(--bs-orange) !important;
  border-color: var(--bs-orange) !important;
  color: white !important;
}

button[onclick*="addUnit"]:hover,
button[data-bs-target*="unit"]:hover,
.btn[onclick*="addUnit"]:hover,
#add-unit-btn:hover {
  background-color: #e0650f !important;
  border-color: #e0650f !important;
}

/* Edit unit title buttons - Dark Grey */
button[onclick*="editUnitTitle"],
.edit-unit-title {
  background-color: #495057 !important;
  border-color: #495057 !important;
  color: white !important;
}

button[onclick*="editUnitTitle"]:hover,
.edit-unit-title:hover {
  background-color: #3a3f44 !important;
  border-color: #3a3f44 !important;
}

/* Edit lesson details buttons - Black text, White background */
button[onclick*="editLessonTitle"],
.edit-lesson-details,
.btn[onclick*="edit"]:not(.edit-unit-title),
button.btn-secondary[onclick*="edit"]:not(.edit-unit-title),
.btn-secondary[onclick*="edit"]:not(.edit-unit-title) {
  background-color: white !important;
  border-color: white !important;
  color: black !important;
}

button[onclick*="editLessonTitle"]:hover,
.edit-lesson-details:hover,
.btn[onclick*="edit"]:not(.edit-unit-title):hover,
button.btn-secondary[onclick*="edit"]:not(.edit-unit-title):hover,
.btn-secondary[onclick*="edit"]:not(.edit-unit-title):hover {
  background-color: #f8f9fa !important;
  border-color: #f8f9fa !important;
  color: black !important;
}

/* Text color classes */
.text-purple {
  color: var(--bs-purple) !important;
}

/* Background color classes */
.bg-purple {
  background-color: var(--bs-purple) !important;
}

/* Border color */
.border-purple {
  border-color: var(--bs-purple) !important;
}

/* Light theme blue replacements for purple */
[data-bs-theme="light"] .btn-purple:not(.assessment-related) {
  color: #fff;
  background-color: var(--bs-blue);
  border-color: var(--bs-blue);
}

[data-bs-theme="light"] .btn-purple:not(.assessment-related):hover {
  color: #fff;
  background-color: var(--bs-blue-dark);
  border-color: var(--bs-blue-dark);
}

[data-bs-theme="light"] .text-purple:not(.assessment-related) {
  color: var(--bs-blue) !important;
}

[data-bs-theme="light"] .bg-purple:not(.assessment-related) {
  background-color: var(--bs-blue) !important;
}

[data-bs-theme="light"] .border-purple:not(.assessment-related) {
  border-color: var(--bs-blue) !important;
}

/* Additional background colors for subject badges */
.bg-teal {
  background-color: var(--bs-teal) !important;
  color: white !important;
}

.bg-indigo {
  background-color: var(--bs-indigo) !important;
  color: white !important;
}

/* Modal fixes */
.modal {
  background: transparent;
}

.modal-dialog {
  pointer-events: all;
}

.modal.show {
  display: block;
  pointer-events: auto;
}

/* Remove backdrop for lesson, unit, and assessment modals */
.modal-backdrop.show {
  opacity: 0;
  pointer-events: none;
}

/* For assessment modals, keep the backdrop visible */
.assessment-modal .modal-backdrop.show {
  opacity: 0.5;
}

/* Colored modal headers */
/* Purple header for assessment modal */
#lesson-title-modal[data-is-assessment="true"] .modal-header {
  background-color: var(--bs-purple);
  color: white;
}

/* Green header for lesson modal */
#lesson-title-modal[data-is-assessment="false"] .modal-header {
  background-color: #28a745;
  color: white;
}

/* Orange header for unit modal */
#unit-title-modal .modal-header {
  background-color: var(--bs-orange);
  color: white;
}

/* Keep assessment modal header purple in light mode */
[data-bs-theme="light"] #lesson-title-modal[data-is-assessment="true"] .modal-header {
  background-color: var(--bs-purple) !important;
  color: white !important;
}

/* Keep lesson modal header green in light mode */
[data-bs-theme="light"] #lesson-title-modal[data-is-assessment="false"] .modal-header {
  background-color: #28a745 !important;
  color: white !important;
}

/* Keep unit modal header orange in light mode */
[data-bs-theme="light"] #unit-title-modal .modal-header {
  background-color: var(--bs-orange) !important;
  color: white !important;
}

.bg-cyan {
  background-color: var(--bs-cyan) !important;
  color: #212529 !important;
}

.bg-orange {
  background-color: var(--bs-orange) !important;
  color: white !important;
}

.bg-pink {
  background-color: var(--bs-pink) !important;
  color: white !important;
}

/* Year badge styles */
.year-badge {
  padding: 0.4em 0.65em;
  font-weight: 500;
}

/* Yellow color styles for units */
.text-yellow {
  color: var(--bs-yellow) !important;
}

.bg-yellow {
  background-color: var(--bs-yellow) !important;
}

.border-yellow {
  border-color: var(--bs-yellow) !important;
}

.btn-yellow {
  color: #212529;
  background-color: var(--bs-yellow);
  border-color: var(--bs-yellow);
}

.btn-yellow:hover {
  color: #212529;
  background-color: var(--bs-yellow-dark);
  border-color: var(--bs-yellow-dark);
}

/* Lesson insert row styling */
.insert-buttons-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 5px 0;
}

/* Fix for page overlay issue */
.jumbotron {
  position: relative;
  z-index: 1;
}

.main-content {
  position: relative;
  z-index: 10;
  background-color: #f8f9fa;
}



[data-bs-theme="light"] #lesson-titles-list tr.table-purple,
[data-bs-theme="light"] #lesson-titles-list tr.table-purple td {
  background-color: var(--pale-purple) !important;
}

.unit-insert-button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--bs-yellow);  /* Yellow for units */
  color: #fff152;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
}

.lesson-insert-button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #28a745;  /* Green for lessons */
  color: #1cc819;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
}

.assessment-insert-button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--bs-purple);  /* Purple for assessments */
  color: #bc2929;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
}

.lesson-insert-button:hover,
.assessment-insert-button:hover,
.unit-insert-button:hover {
  transform: scale(1.1);
}

.unit-insert-button:hover {
  background-color: var(--bs-yellow-dark);  /* Darker yellow on hover */
}

.lesson-insert-button:hover {
  background-color: #218838;  /* Darker green on hover */
}

.assessment-insert-button:hover {
  background-color: var(--bs-purple-dark);  /* Darker purple on hover */
}

/* Add Unit button - Orange */
button[onclick*="addUnit"],
button[data-bs-target*="unit"],
.btn[onclick*="addUnit"],
#add-unit-btn {
  background-color: #cc4700 !important;
  border-color: #cc4700 !important;
  color: white !important;
}

button[onclick*="addUnit"]:hover,
button[data-bs-target*="unit"]:hover,
.btn[onclick*="addUnit"]:hover,
#add-unit-btn:hover {
  background-color: #b33d00 !important;
  border-color: #b33d00 !important;
}

/* Center action buttons in table */
#lesson-titles-list td:last-child {
  text-align: center !important;
}

/* Center Actions header */
#lesson-titles-container table thead th:last-child {
  text-align: center !important;
}

/* Custom styles for enhanced features */

/* Academic Year Indicator */
.academic-year-indicator {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white !important;
    border-radius: 8px;
    padding: 0.5rem 0.75rem !important;
    margin-right: 0.5rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.academic-year-indicator:hover {
    background: linear-gradient(135deg, #357abd 0%, #2968a3 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.academic-year-indicator i {
    color: rgba(255, 255, 255, 0.9);
}

.academic-year-indicator span {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

#academic-year-menu {
    min-width: 200px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

#academic-year-menu .dropdown-item {
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

#academic-year-menu .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #4a90e2;
}

#academic-year-menu .dropdown-item.active {
    background-color: #4a90e2;
    color: white;
}

#academic-year-menu .dropdown-header {
    color: #6c757d;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Academic year dropdown styling */
.academic-year-indicator {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.academic-year-indicator:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Global text contrast fixes */
.bg-light, .bg-light * {
    color: #212529 !important;
}

.bg-light .text-muted {
    color: #6c757d !important;
}

.bg-white, .bg-white * {
    color: #212529 !important;
}

.bg-white .text-muted {
    color: #6c757d !important;
}

/* Card text fixes */
.card-body {
    color: var(--bs-body-color);
}

[data-bs-theme="light"] .card {
    color: #212529;
}

[data-bs-theme="light"] .card .text-muted {
    color: #6c757d !important;
}

/* Table text fixes */
[data-bs-theme="light"] .table {
    color: #212529;
}

/* Classes table specific fixes */
.list-group-item {
    padding: 1rem !important;
    border: 1px solid #e5e5e5 !important;
    margin-bottom: 0 !important;
    overflow: hidden;
}

.list-group-item .row {
    margin: 0 !important;
    align-items: center;
}

.list-group-item .col-md-2 {
    padding: 0.25rem 0.5rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-group-item:hover {
    background-color: #f8f9fa !important;
    transform: none !important;
    transition: background-color 0.2s ease !important;
}

/* Prevent button overflow issues */
.btn-group {
    white-space: nowrap;
    overflow: visible;
}

.btn-group .btn {
    flex-shrink: 0;
}

/* Form text fixes */
[data-bs-theme="light"] .form-label,
[data-bs-theme="light"] .form-text {
    color: #212529 !important;
}

/* Color preview boxes */
.color-box {
    min-height: 40px;
    transition: all 0.3s ease;
}

/* Accessibility Styles with more noticeable changes */
body.protanopia {
    --bs-primary: #0066cc !important;
    --bs-success: #4169e1 !important;  /* Blue instead of green */
    --bs-warning: #ffa500 !important;
    --bs-danger: #8b4513 !important;   /* Brown instead of red */
    --bs-info: #4682b4 !important;
    --bs-purple: #8a2be2 !important;
    --bs-orange: #ff8c00 !important;
}

body.deuteranopia {
    --bs-primary: #0066cc !important;
    --bs-success: #5d4e75 !important;  /* Purple-brown instead of green */
    --bs-warning: #ffa500 !important;
    --bs-danger: #b22222 !important;
    --bs-info: #4682b4 !important;
    --bs-purple: #9370db !important;
    --bs-orange: #ff7f50 !important;
}

body.tritanopia {
    --bs-primary: #dc143c !important;
    --bs-success: #228b22 !important;
    --bs-warning: #ff69b4 !important;  /* Pink instead of yellow */
    --bs-danger: #8b0000 !important;
    --bs-info: #ff1493 !important;     /* Pink instead of blue */
    --bs-purple: #cd853f !important;
    --bs-orange: #daa520 !important;
}

body.eye-strain {
    filter: contrast(0.85) brightness(0.9);
}

body.eye-strain * {
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Navbar school name visibility fix */
.navbar .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

.navbar .text-muted:hover {
    color: rgba(255, 255, 255, 1) !important;
}

/* Additional Minimalist Clean Styles */

/* Homepage Hero Section */
.hero-section {
    background: #ffffff !important;
    padding: 6rem 0;
    border-bottom: 1px solid #e5e5e5;
}

.hero-section h1 {
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
}

.hero-section .lead {
    font-size: 1.25rem;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Feature Cards */
.feature-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 2.5rem;
    transition: all 0.2s ease;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border-color: #d0d0d0;
}

.feature-icon {
    background: #1a1a1a !important;
    color: #ffffff !important;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

/* Dashboard Cards */
.dashboard-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.2s ease;
}

.dashboard-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.dashboard-card h3 {
    color: #1a1a1a;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.dashboard-card .display-4 {
    color: #1a1a1a;
    font-weight: 700;
}

/* Stats Cards */
.stat-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: #666666;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
}

/* Navigation Enhancements */
.navbar-toggler {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 0.5rem;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2826, 26, 26, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown Menu */
.dropdown-menu {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    padding: 0.5rem;
}

.dropdown-item {
    color: #1a1a1a;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background: #fafafa;
    color: #1a1a1a;
}

/* List Group */
.list-group {
    border-radius: 12px;
    overflow: hidden;
}

.list-group-item {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-bottom: 1px solid #f5f5f5;
    padding: 1.25rem;
    color: #1a1a1a;
    transition: all 0.2s ease;
}

.list-group-item:hover {
    background: #fafafa;
}

.list-group-item:last-child {
    border-bottom: 1px solid #e5e5e5;
}

/* Pagination */
.pagination {
    margin: 2rem 0;
}

.page-link {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    color: #1a1a1a;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

.page-link:hover {
    background: #fafafa;
    border-color: #d0d0d0;
    color: #1a1a1a;
}

.page-item.active .page-link {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #ffffff;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent;
    padding: 1rem 0;
    margin-bottom: 2rem;
}

.breadcrumb-item a {
    color: #666666;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: #1a1a1a;
}

.breadcrumb-item.active {
    color: #1a1a1a;
}

/* Tabs */
.nav-tabs {
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 2rem;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #666666;
    padding: 1rem;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
    color: #1a1a1a;
    border-bottom-color: #d0d0d0;
}

.nav-tabs .nav-link.active {
    color: #1a1a1a;
    border-bottom-color: #1a1a1a;
    background: transparent;
}

/* Accordion */
.accordion {
    border-radius: 12px;
    overflow: hidden;
}

.accordion-item {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-bottom: none;
}

.accordion-item:last-child {
    border-bottom: 1px solid #e5e5e5;
}

.accordion-button {
    background: #ffffff;
    color: #1a1a1a;
    border: none;
    padding: 1.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.accordion-button:hover {
    background: #fafafa;
}

.accordion-button:focus {
    box-shadow: none;
    border: none;
}

.accordion-body {
    padding: 1.5rem;
    background: #ffffff;
}

/* Spinner/Loading */
.spinner-border {
    color: #1a1a1a;
    width: 2rem;
    height: 2rem;
}

/* Toast */
.toast {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.toast-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    color: #1a1a1a;
}

.toast-body {
    color: #1a1a1a;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
}

/* Remove any gradients or colorful backgrounds */
.bg-gradient {
    background: #ffffff !important;
}

/* Clean up any remaining Bootstrap overrides */
.text-primary { color: #1a1a1a !important; }
.bg-primary { background: #1a1a1a !important; }
.btn-primary { background: #1a1a1a !important; border-color: #1a1a1a !important; }

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .hero-section {
        padding: 4rem 0;
    }

    .hero-section h1 {
        font-size: 2.5rem;
    }

    .feature-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    .dashboard-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    .stat-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    .navbar-nav {
        padding-top: 1rem;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 0;
        border-bottom: 1px solid #e5e5e5;
    }
}

/* Holiday checkbox styling */
  .holiday-checkbox {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    width: 20px;
    height: 20px;
    background-color: white;
    border: 2px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: #666;
  }

  /* Calendar sidebar responsive styling */
  @media (max-width: 768px) {
    .calendar-sidebar {
      margin-bottom: 1rem;
    }

    .calendar-sidebar h6 {
      font-size: 0.8rem;
    }

    .calendar-name {
      font-size: 0.8rem;
    }

    .btn-sm {
      padding: 0.2rem 0.4rem;
      font-size: 0.75rem;
    }
  }

  /* Make calendar sidebar more compact */
  .calendar-sidebar {
    padding: 0.5rem;
  }

  .calendar-sidebar .btn-group {
    width: 100%;
  }

  .calendar-sidebar .btn-group .btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.3rem;
  }