/* Styles for the Schedule Application Components */

/* Styles for elements within the #schedule-display-area on the main page */
/* (These were previously in style.css but are specific to schedule display) */

/* .event-item, .btn-delete-event are already defined below for modal, 
   and their styling is suitable for the main page display as well.
   If specific overrides are needed for main page items, they can be added here.
*/

/* START OF MOVED STYLES FROM style.css */
#schedule-display-area {
    flex: 1; /* Changed from 2 to 1 to ensure equal space with event-image-container */
    background-color: rgba(196, 97, 35, 0.3);
    padding: 0;
    border-radius: 15px;
    overflow: hidden; /* Match image panel clipping */
    box-sizing: border-box;
    color: #fff;
    display: flex;
    flex-direction: column;
    position: relative; /* Added for positioning context if needed */
}

/* Homepage: keep the schedule panel a consistent size on desktop */
@media (min-width: 981px) {
    .home #schedule-display-area {
        height: 420px;
    }
}

.schedule-header {
    display: flex;
    justify-content: center; /* Center the month text */
    align-items: center;
    margin-bottom: 15px;
    width: 100%; /* Ensure header takes full width for centering */
}

.schedule-header h3 {
    margin: 0; 
    font-size: 2.5em;
}

/* Main styles for the schedule items display area */
#schedule-display {
    min-height: 150px;
    max-height: none;
    width: 100%; 
    height: 100%;
    flex: 1 1 auto;
    overflow-y: auto; 
    background-color: rgba(0, 0, 0, 0.3); 
    border: 1px dashed #555;
    border-radius: 0;
    padding: 10px; /* Added padding for internal spacing */
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box; /* Ensure padding is included in width/height */
}

/* Mobile/tablet: keep the schedule panel a reasonable size and scroll the list */
@media (max-width: 980px) {
    #schedule-display {
        height: auto;
        max-height: 55vh;
        -webkit-overflow-scrolling: touch;
    }
}
/* END OF MOVED STYLES FROM style.css */

/* Styles for the Schedule Management Modal */
/* Modal container and content styles are in style.css (.modal-hidden, .modal-content) */

/* START OF MOVED STYLES FROM style.css */
.schedule-controls-modal h4 {
    margin-top: 20px; /* Retained from style.css */
    margin-bottom: 10px; /* Retained from style.css */
    border-bottom: 1px solid #444; /* Retained from style.css */
    padding-bottom: 5px; /* Retained from style.css */
    color: #e0e0e0; /* Adjusted from schedule_app.css for consistency if different */
}

.schedule-controls-modal input[type="text"],
.schedule-controls-modal input[type="date"],
.schedule-controls-modal input[type="time"],
.schedule-controls-modal button {
    width: calc(100% - 20px); /* Retained from style.css */
    padding: 10px; /* Retained from style.css */
    margin-bottom: 10px; /* Retained from style.css */
    border-radius: 5px; /* Retained from style.css */
    border: 1px solid #555; /* Retained from style.css */
    background-color: #333; /* Retained from style.css */
    color: #f1f1f1; /* Retained from style.css */
    box-sizing: border-box; /* Retained from style.css */
}

.schedule-controls-modal button {
    background-color: rgb(196, 97, 35); /* Retained from style.css */
    cursor: pointer; /* Retained from style.css */
    font-weight: bold; /* Retained from style.css */
    transition: background-color 0.2s ease; /* Added for consistency */
}

.schedule-controls-modal button:hover {
    background-color: rgb(160, 70, 20); /* Retained from style.css */
}

/* Preview display within the modal */
#schedule-app-preview-display {
    min-height: 80px;
    max-height: 200px;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px dashed #454545;
    border-radius: 15px;
    padding: 10px;
    margin-top: 8px;
    margin-bottom: 15px;
}

/* Update Live Page Button in Modal */
/* #update-live-page-button was here, now moved from style.css */
#update-live-page-button {
    background-color: #28a745; /* Green */ /* Retained from style.css */
    color: white; /* Retained from style.css */
    padding: 12px 25px; /* Retained from style.css */
    border-radius: 5px; /* Retained from style.css */
    border: none; /* Retained from style.css */
    cursor: pointer; /* Retained from style.css */
    font-size: 1.1em; /* Retained from style.css */
    display: block; /* Retained from style.css */
    margin: 20px auto 0 auto; /* Retained from style.css */
    transition: background-color 0.2s ease; /* Added for consistency */
}

#update-live-page-button:hover {
    background-color: #218838; /* Darker green */ /* Added for consistency */
}
/* END OF MOVED STYLES FROM style.css */

/* Styles for individual event items (used in modal preview AND live display) */
.event-item {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 5px;
    border-left: 4px solid rgb(196, 97, 35);
    display: flex;
    justify-content: space-between; /* Default for modal view with button */
    align-items: center;
    transition: background-color 0.2s ease;
    width: 100%;
    box-sizing: border-box; /* Added for consistent width calculation */
}

/* Specific override for event items in the live display area */
#schedule-display .event-item {
    display: block; 
    text-align: center; 
    width: 100%;
    box-sizing: border-box; 
    margin-top: 5px; /* Add some space between event items */
    margin-bottom: 5px; /* Add some space between event items */
}

.event-item p {
    margin: 3px 0;
    /* flex-grow: 1; /* Removed as parent is not flex in this context */
    color: #e0e0e0;
    text-align: center; /* Ensure text within p is centered */
}

.event-item strong {
    display: block;
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 1.05em;
    text-align: center; /* Ensure text within strong is centered */
}

/* Delete button (only shown in modal preview) */
.btn-delete-event {
    background-color: #c46123; 
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 12px;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.btn-delete-event:hover {
    background-color: #a04e1c;
}

/* Scrollbar styling for modal preview and live display */
#schedule-app-preview-display::-webkit-scrollbar,
#schedule-display::-webkit-scrollbar {
    width: 6px;
}

#schedule-app-preview-display::-webkit-scrollbar-track,
#schedule-display::-webkit-scrollbar-track {
    background: #2a2a2a;
    border-radius: 3px;
}

#schedule-app-preview-display::-webkit-scrollbar-thumb,
#schedule-display::-webkit-scrollbar-thumb {
    background: rgb(196, 97, 35);
    border-radius: 3px;
}

#schedule-app-preview-display::-webkit-scrollbar-thumb:hover,
#schedule-display::-webkit-scrollbar-thumb:hover {
    background: rgb(172, 85, 30);
}

/* Remove redundant/unused styles from original schedule_app.css */
/* Specifically, #scheduleAppContainer, .schedule-controls, #eventList, etc. 
   are no longer used as the modal structure is simpler and some styles were moved to style.css or consolidated. */