/* Custom styles for Inter font and general body styling */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f2f5; /* Light gray background */
    color: #333; /* Dark gray text */
}
/* Ensure the main container takes full width on small screens */
.main-layout-container {
    max-width: 1400px; /* Slightly wider container for sidebar */
}
/* Style for event cards */
.event-card {
    background-color: #ffffff;
    border-left: 5px solid #ef4444; /* Red border on the left */
    cursor: grab; /* Indicate draggable */
    position: relative; /* Needed for absolute positioning of remove button */
    display: flex; /* Use flexbox for layout within the card */
    flex-direction: column; /* Stack content vertically */
    justify-content: space-between; /* Push button to bottom */
}
.event-card-content {
    flex-grow: 1; /* Allow content to take available space */
}
.event-card-title {
    color: #1a202c; /* Darker title color */
}
.event-card-time {
    color: #4a5568; /* Medium gray for time */
}
/* Style for drop zone when an item is dragged over it */
.drop-zone.drag-over {
    border: 2px dashed #60a5fa; /* Blue dashed border */
    background-color: #eff6ff; /* Light blue background */
}
/* Custom styling for the sticky sidebar */
.sticky-sidebar {
    position: sticky;
    top: 1.5rem; /* Equivalent to Tailwind's top-6 */
    align-self: flex-start; /* Aligns to the start of the cross-axis (top) */
    height: fit-content; /* Ensures the sidebar only takes up as much height as its content */
    max-height: calc(100vh - 3rem); /* Max height to prevent overflow, considering top/bottom padding */
    overflow-y: auto; /* Enable scrolling for the sidebar if content exceeds max-height */
}
/* Style for the remove button */
.remove-event-btn {
    background-color: #dc2626; /* Red background */
    color: white;
    border-radius: 50%; /* Circular button */
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    position: absolute; /* Position relative to the event-card */
    top: 8px;
    right: 8px;
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
}
.remove-event-btn:hover {
    opacity: 1;
}
/* Full-screen modal styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: 0.75rem; /* rounded-xl */
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    position: relative;
}
.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: #ef4444; /* Red */
    color: white;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 1001;
}
/* Add to My Schedule button style */
.add-to-schedule-btn {
    background-color: #10b981; /* Emerald green */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem; /* rounded-lg */
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    margin-top: 1rem; /* Space from content above */
    align-self: flex-end; /* Align button to the right within flex container */
}
.add-to-schedule-btn:hover {
    background-color: #059669; /* Darker green on hover */
}
/* View My Schedule link style */
.view-my-schedule-link {
    color: #3b82f6; /* Blue */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    text-decoration: underline;
    cursor: pointer;
    margin-top: 0.5rem; /* Space from button above */
    display: block; /* Make it a block element for margin */
    text-align: right; /* Align to the right */
}
.view-my-schedule-link:hover {
    color: #2563eb; /* Darker blue on hover */
}
/* Export buttons styling */
.export-btn {
    background-color: #60a5fa; /* Blue */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    margin-top: 1rem;
    width: 100%; /* Full width */
    text-align: center;
}
.export-btn:hover {
    background-color: #3b82f6; /* Darker blue */
}
/* Adjusted margin for buttons at the top of My Schedule */
.my-schedule-header-buttons button {
    margin-left: 0.5rem;
    margin-bottom: 0.5rem; /* Added for spacing below buttons */
}