/* static/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Antic+Didone&family=Poppins:wght@300;400;600&display=swap');

:root {
    --brand-color: #9DB9BC;
    --brand-dark: #7a9a9d;
    --font-heading: 'Antic+Didone', serif;
    --font-body: 'Poppins', sans-serif;
    --text-color: #333;
    --border-color: #eee;
    --color-passed: #a9a9a9;
    --color-full: #d9534f;
}

body {
    font-family: var(--font-body);
    background-color: #f8f9fa;
    color: var(--text-color);
}

/* --- Header --- */
.site-header {
    background-color: #fff;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}
.site-header .logo img { max-height: 50px; }
.site-header .main-nav a { text-decoration: none; color: var(--text-color); font-weight: 600; transition: color 0.3s; }
.site-header .main-nav a:hover { color: var(--brand-color); }

/* --- Page Title & View Switcher --- */
.page-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--brand-color);
    padding-bottom: 1rem;
}
.page-title { font-family: var(--font-heading); color: var(--text-color); margin: 0; }
.view-switcher .btn { background-color: #fff; border-color: var(--brand-color); color: var(--brand-color); }
.view-switcher .btn.active { background-color: var(--brand-color); border-color: var(--brand-color); color: #fff; }
.view-switcher .btn:hover { background-color: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

/* --- FullCalendar Redesign --- */
#calendar-container { background-color: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.fc .fc-button-primary { background-color: var(--brand-color) !important; border-color: var(--brand-color) !important; }
.fc .fc-button-primary:hover { background-color: var(--brand-dark) !important; border-color: var(--brand-dark) !important; }
.fc .fc-daygrid-day.fc-day-today { background-color: rgba(157, 185, 188, 0.1) !important; }
.fc .fc-toolbar-title { font-family: var(--font-heading); font-size: 1.75rem !important; }
.fc a { text-decoration: none !important; color: inherit !important; }

/* --- Event Status Colors & Multi-line Styling --- */
.fc-event {
    padding: 4px !important;
}

/* --- THIS IS THE BUG FIX --- */
/* We target the specific inner elements to ensure the color is applied */
.fc-daygrid-event .fc-event-title,
.fc-daygrid-event .fc-event-time,
.fc-daygrid-event .fc-event-price {
    color: white !important; 
}
/* --- End of Bug Fix --- */

.fc-event-main {
    white-space: normal !important; 
}
.fc-event-title {
    font-weight: 600;
}
.fc-event-time, .fc-event-price {
    font-size: 0.8em; 
}
.fc-event.event-active { background-color: var(--brand-color) !important; border: none !important; cursor: pointer; }
.fc-event.event-passed { background-color: var(--color-passed) !important; border-color: var(--color-passed) !important; cursor: default; }
.fc-event.event-full { background-color: var(--color-full) !important; border-color: var(--color-full) !important; cursor: pointer; }
.list-item.event-passed .list-item-date { background-color: var(--color-passed); }
.list-item.event-full .list-item-date { background-color: var(--color-full); }

/* --- List View --- */
#list-container { background-color: #fff; padding: 1rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.list-item { display: flex; align-items: center; padding: 1rem; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background-color 0.2s; }
.list-item:last-child { border-bottom: none; }
.list-item:hover { background-color: #f8f9fa; }
.list-item-date { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--brand-color); color: #fff; border-radius: 8px; padding: 10px; width: 60px; margin-right: 1.5rem; }
.list-item-date .month { text-transform: uppercase; font-size: 0.8rem; font-weight: 600; }
.list-item-date .day { font-size: 1.5rem; font-weight: 600; }
.list-item-info { flex-grow: 1; }
.list-item-title { font-family: var(--font-heading); margin: 0; }
.list-item-time { color: #6c757d; margin: 0; }
.list-item-action .btn { background-color: var(--brand-color); border-color: var(--brand-color); color: #fff; }
.list-item-action .btn:hover { background-color: var(--brand-dark); border-color: var(--brand-dark); }

/* --- Modal & Booking Button --- */
.modal-content { border-radius: 8px; }
.modal-image { width: 100%; max-height: 400px; object-fit: cover; border-radius: 8px; }
.modal-header .modal-title { font-family: var(--font-heading); }
.book-now-btn { background-color: var(--brand-color); border-color: var(--brand-color); font-weight: 600; padding: 12px 30px; font-size: 1.1rem; transition: background-color 0.3s; }
.book-now-btn:hover { background-color: var(--brand-dark); border-color: var(--brand-dark); }