/* Button hover styles */
/* Make hover match active state */
/* Shared hover and focus effects for all buttons */
.btn:hover,
.btn:focus {
    border: none; /* Remove border */
    box-shadow: 5px 5px 10px rgba(55, 94, 148, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.4); /* Soft 3D effect shadow */
    transition: background-color 0.15s ease-in-out, border 0.15s ease-in-out, box-shadow 0.15s ease-in-out, color 0.15s ease-in-out; /* Smooth transitions */
}

/* Shared active and focus-active effects for all buttons */
.btn:hover,
.btn:active:focus {
    border-color: transparent; /* Transparent border */
    box-shadow: inset 2px 3px 6px rgba(0, 0, 0, 0.2), inset -3px -2px 6px rgba(255, 255, 255, 0.2); /* Inset shadow for pressed effect */
}

/* Specific styles for success buttons */
.btn-success:hover,
.btn-success:focus {
    background-color: #d4edda; /* Lighter green hover background */
    color: #155724; /* Text color for success buttons */
}

.btn-success:hover,
.btn-success:hover:focus {
    background-color: #28a745; /* Active green background */
    color: #d9e3f1; /* White text for active state */
}

/* Specific styles for primary buttons */
.btn-primary:hover,
.btn-primary:focus {
    background-color: #d9e3f1; /* Lighter blue hover background */
    color: #7b8ab8; /* Muted blue text */
}

.btn-primary:hover,
.btn-primary:hover:focus {
    background-color: #378dfc; /* Active blue background */
    color: #d9e3f1; /* White text for active state */
}

/* Scheduling Styles Begin */
/* Timeline Styling */
.list-group-item:hover, .list-group-item:focus {
    color: #d9e3f1;
    background-color: rgb(55, 141, 252);
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Softer shadow
    transform: translateY(-2px); /* Subtle lift effect */
}

.list-group-item:hover span.badge, .list-group-item:focus span.badge{
    color: rgb(55, 141, 252);
    background-color: #d9e3f1 !important;
}

/* Highlight effect */
.highlight {
    color: #d9e3f1;
    background-color: rgb(55, 141, 252);
    transition: background-color 0.5s ease; /* Smooth fading effect */
}

/* Grid Layout for Detailed Descriptions */
.schedule-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); /* Slightly wider cards */
    gap: 2rem;
    margin-top: 2rem;
}

.schedule-card {
    display: flex;
    flex-direction: column;
    text-align: left !important;
}

.card:hover, .list-group-item:hover {
    box-shadow: 5px 5px 10px rgba(55, 94, 148, .2), -5px -5px 10px rgba(255, 255, 255, .4);
    transition: background-color .15s ease-in-out, border .15s ease-in-out, box-shadow .15s ease-in-out, color .15s ease-in-out;
}

/*
.card {
    transition: box-shadow 0.2s ease-in-out;
}

.card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.card-header {
    border-bottom: .125rem solid rgb(55, 141, 252);
}


.card:hover .card-header {
    color: #fff;
    background-color: rgb(55, 141, 252);
}
*/

.card-body ul {
    padding-left: 1rem; /* Added proper padding with semicolon */
    list-style: disc;
}

/* General Spacing */
.card-body {
    margin-bottom: 1rem;
}

/* Uniform Width for Cards */
.schedule-card {
    width: 100%; /* Ensure cards take up full width in mobile view */
    box-sizing: border-box; /* Include padding and borders in width */
    margin: 0 auto; /* Center the cards */
}

.schedule-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); /* Minimum width set to 20rem */
    gap: 1.5rem; /* Consistent spacing between cards */
}
/* Scheduling Styles End */