/* --- V12.1 Grid System Update --- */
.automaize-schedule-container {
    --slot-height: 40px; /* Defines the height of a 30-minute time slot */
}

/* --- V8 Responsive Redesign --- */

/* --- General & Container --- */
.automaize-schedule-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    margin: 2em 0;
    --schedule-primary-color: #2271b1;
    --schedule-border-color: #e0e0e0;
}

/* --- Header Navigation --- */
.schedule-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5em; padding-bottom: 0.5em; border-bottom: 1px solid var(--schedule-border-color); }
.schedule-header h2 { margin: 0; font-size: 1.2em; font-weight: 600; text-align: center; flex-grow: 1; }
.schedule-header .nav-button { text-decoration: none; color: var(--schedule-primary-color); font-weight: 600; padding: 0.4em 0.8em; border-radius: 4px; background-color: #f6f7f7; border: 1px solid #dcdcde; white-space: nowrap; }
.schedule-header .nav-button:hover { background-color: #f0f0f1; }
.schedule-header .schedule-header-center { display: flex; flex-direction: column; align-items: center; }
.schedule-header .today-button { font-size: 0.8em; padding: 0.2em 0.6em; margin-bottom: 4px; order: -1; }

/* --- User Credit Balance --- */
.user-credit-balance { font-size: 0.9em; color: #555; margin-top: 5px; font-weight: 500; }
.user-credit-balance strong { color: var(--schedule-primary-color); }

/* --- Mobile Day Selector --- */
.mobile-day-selector { display: flex; justify-content: space-between; margin-bottom: 1em; border: 1px solid var(--schedule-border-color); border-radius: 6px; overflow: hidden; }
.mobile-day-selector .day-toggle { flex-grow: 1; padding: 0.8em 0.2em; background: #f9f9f9; border: none; border-left: 1px solid var(--schedule-border-color); cursor: pointer; text-align: center; font-size: 0.9em; color: #333; line-height: 1.3; }
.mobile-day-selector .day-toggle:first-child { border-left: none; }
.mobile-day-selector .day-toggle .day-long { display: block; font-weight: 600; }
.mobile-day-selector .day-toggle .day-of-week { display: block; font-size: 0.85em; font-weight: 400; opacity: 0.8; }
.mobile-day-selector .day-toggle.active { background: var(--schedule-primary-color); color: #fff; }
.mobile-day-selector .day-toggle .day-short { display: none; }


/* --- Schedule Grid (Mobile First) --- */
.schedule-grid, .time-column, .day-header { display: none; }
.day-column { display: none; }
.day-column.active { display: block; }
.day-content { padding: 10px 0; position: relative; }

/* --- Class Entry Styling (Mobile First) --- */
.class-entry { background-color: #ffffff; border-left: 5px solid; padding: 12px; margin-bottom: 10px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.08); position: static !important; height: auto; display: flex; flex-direction: column; }
.class-entry:hover { background-color: #f7f7f7; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.class-entry.full { cursor: not-allowed; background-color: #f1f1f1; border-left-color: #ccc !important; color: #999; }
.class-entry-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.class-entry .class-title { font-weight: 600; font-size: 1em; margin-bottom: 0; padding-right: 10px; }
.class-entry .class-time-mobile { font-weight: 600; font-size: 0.95em; color: var(--schedule-primary-color); white-space: nowrap; }
.class-entry .class-spaces { font-size: 0.85em; color: #555; }
.class-entry .class-login-prompt { font-size: 0.85em; color: #777; font-style: italic; }
.class-entry.full .class-spaces { color: #999; }

/* =============================================== */
/* --- Desktop Styles (min-width: 768px) --- */
/* =============================================== */
@media (min-width: 768px) {
    .mobile-day-selector { display: none; }
    .schedule-header .today-button { order: 0; margin-bottom: 0; margin-right: 15px; }
    .schedule-header .schedule-header-center { flex-direction: row; align-items: center; }
    .user-credit-balance { margin-top: 0; margin-left: 15px; }
    .schedule-grid-wrapper { display: block; border: 1px solid var(--schedule-border-color); border-radius: 4px; overflow: hidden; }
    .schedule-header-row, .schedule-body-grid { display: grid; grid-template-columns: 80px repeat(7, 1fr); }
    .time-column-header { border-bottom: 1px solid var(--schedule-border-color); background: #f9f9f9; }
    .day-header { padding: 0.8em 0.5em; text-align: center; font-weight: 600; background: #f9f9f9; border-bottom: 1px solid var(--schedule-border-color); border-left: 1px solid var(--schedule-border-color); display: block !important; line-height: 1.3; }
    .day-header .day-short-date, .day-header .day-of-week { display: block; font-size: 0.8em; font-weight: 400; opacity: 0.8; }
    .day-header .day-short-date { font-size: 1em; font-weight: 600; opacity: 1; }
    .time-column { display: block !important; background: #fcfcfc; }
    .time-column .time-slot-label { height: var(--slot-height); display: flex; align-items: center; justify-content: center; font-size: 0.8em; color: #777; border-bottom: 1px solid #f0f0f0; box-sizing: border-box; }
    .day-column { display: block !important; border-left: 1px solid var(--schedule-border-color); position: relative; }
    .day-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(to bottom, #f0f0f0 1px, transparent 1px); background-size: 100% var(--slot-height); }
    .class-entry { position: absolute !important; padding: 5px 8px; box-sizing: border-box; top: calc(var(--start-slot) * var(--slot-height)); height: calc(var(--duration-in-slots) * var(--slot-height)); width: calc((100% / var(--class-count, 1)) - 2px); left: calc((100% / var(--class-count, 1)) * var(--class-index, 0)); }
    .class-entry .class-title { font-size: 0.9em; margin-bottom: 2px; color: #333; }
    .class-entry[data-user-booked="true"]::after { top: 5px; right: 5px; width: 18px; height: 18px; font-size: 12px; }
}

/* --- Modal & Utility --- */
.automaize-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.6); }
.modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px 30px 30px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); position: relative; }
.close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; position: absolute; top: 10px; right: 20px; }
.close-button:hover, .close-button:focus { color: black; text-decoration: none; cursor: pointer; }
.modal-content h3 { margin-top: 0; }
#booking-response p { padding: 10px; border-radius: 3px; margin: 10px 0; }
#booking-response .success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
#booking-response .error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(0,0,0,0.1); border-radius: 50%; border-top-color: #2271b1; animation: spin 1s ease-in-out infinite; margin-left: 10px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

.close-button.close-button--success { background-color: #28a745; color: white; font-size: 1.2em; font-weight: bold; line-height: 1; border-radius: 5px; padding: 8px 15px; top: 15px; right: 15px; float: none; transition: transform 0.2s ease, background-color 0.2s ease; transform: scale(1); }
.close-button.close-button--success:hover { background-color: #218838; color: white; transform: scale(1.05); }

/* --- "Add to Calendar" & In-Modal Admin List --- */
#add-to-calendar-links, #modal-admin-attendees { margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }
#add-to-calendar-links h4, #modal-admin-attendees h4 { margin-top: 0; margin-bottom: 10px; font-size: 1em; font-weight: 600; }
.calendar-link { display: inline-block; margin-right: 10px; margin-bottom: 5px; padding: 6px 12px; background-color: #f6f7f7; border: 1px solid #dcdcde; border-radius: 4px; text-decoration: none; font-size: 0.9em; color: #333; transition: background-color 0.2s; }
.calendar-link:hover { background-color: #f0f0f1; color: #2271b1; }
#modal-admin-attendees { padding: 10px; background-color: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 4px;}
#modal-admin-attendees ul { list-style-type: none; margin: 0; padding: 0; max-height: 100px; overflow-y: auto; }
#modal-admin-attendees li { padding: 4px 0; font-size: 0.9em; border-bottom: 1px solid #eee; }
#modal-admin-attendees li:last-child { border-bottom: none; }

/* --- Visual Indicator for Booked Classes --- */
.class-entry { position: relative; }
.class-entry[data-user-booked="true"] { background-color: #f6fbf8; }
.class-entry[data-user-booked="true"]::after { content: '✓'; position: absolute; top: 8px; right: 8px; background-color: #28a745; color: white; font-weight: bold; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
@media (min-width: 768px) { .class-entry[data-user-booked="true"]::after { top: 5px; right: 5px; width: 18px; height: 18px; font-size: 12px; } }

/* --- "My Bookings" Section --- */
.my-bookings-section { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--schedule-border-color); }
.my-bookings-title { margin-top: 0; }
.my-bookings-section h4 { margin-top: 1.5em; margin-bottom: 0.5em; font-size: 1.1em; }
.my-bookings-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--schedule-border-color); border-radius: 4px; }
.my-bookings-list li { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; border-bottom: 1px solid #f0f0f0; }
.my-bookings-list li:last-child { border-bottom: none; }
.my-bookings-list .booking-details { display: flex; flex-direction: column; }
.my-bookings-list .booking-title { font-weight: 600; }
.my-bookings-list .booking-time { font-size: 0.9em; color: #555; margin-top: 4px; }
.my-bookings-list .cancel-booking-button { background-color: #fbeaea; color: #c02b2d; border: 1px solid #eac8c8; border-radius: 4px; padding: 6px 12px; font-size: 0.9em; font-weight: 600; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.my-bookings-list .cancel-booking-button:hover { background-color: #eac8c8; color: #a01a1c; }
.my-bookings-list .cancellation-closed { font-size: 0.9em; color: #777; font-style: italic; }
#cancellation-response p { padding: 10px; border-radius: 3px; margin: 10px 0 20px; }
.modal-content .button-delete { background-color: #d63638; border-color: #b22222; color: #fff; }
.modal-content .button-delete:hover { background-color: #a02426; border-color: #8b0000; }