:root {
    --cal-brown: #6d4c41;
    --cal-dark-brown: #3e2723;
    --cal-gold: #fbc02d; /* Optional accent */
    --cal-bg: #f4f4f4;
    --cal-white: #ffffff;
}

.sec-modern-wrapper {
    max-width: 600px; /* Poster width */
    margin: 40px auto;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* --- Top Bar (Controls) --- */
.sec-top-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
    color: #666;
}
.sec-btn {
    border: none; background: #ddd; padding: 4px 8px; border-radius: 4px; cursor: pointer;
    font-size: 11px;
}
.sec-btn.active { background: var(--cal-brown); color: white; }

/* --- The Card Container --- */
.sec-card {
    background: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Nice drop shadow */
    border-radius: 8px;
    overflow: hidden;
}

/* --- 1. Hero Image --- */
.sec-hero {
    position: relative;
    height: 250px; /* Height of the top image */
    overflow: hidden;
}
.sec-hero img {
    width: 100%; height: 100%; object-fit: cover;
}
/* Nav Buttons on top of image */
.sec-nav-overlay {
    position: absolute; top: 50%; width: 100%;
    display: flex; justify-content: space-between; padding: 0 20px;
    transform: translateY(-50%);
}
.sec-nav-btn {
    background: rgba(255,255,255,0.3); border: none; color: white;
    width: 40px; height: 40px; border-radius: 50%;
    cursor: pointer; transition: 0.3s;
    display: flex; align-items: center; justify-content: center;
}
.sec-nav-btn:hover { background: rgba(255,255,255,0.8); color: var(--cal-brown); }

/* --- 2. Brown Header Band --- */
.sec-header-band {
    background: var(--cal-brown); /* Matches the calendar header */
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    position: relative;
}
/* Triangle effect (Optional - CSS magic to make the slanted shape) */
.sec-header-band::after {
    content: ''; position: absolute; top: 0; right: 30%; 
    border-width: 0 0 60px 60px; /* Adjust for slant */
    border-style: solid;
    border-color: transparent transparent rgba(0,0,0,0.1) transparent;
}

.sec-big-month {
    font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
}
.sec-big-year {
    font-size: 42px; font-weight: 800; line-height: 1;
}

.sec-dropdowns { display: flex; gap: 5px; margin-top: 5px;}
.sec-mini-select { 
    background: rgba(255,255,255,0.2); border: none; color: white; 
    font-size: 11px; border-radius: 3px; cursor: pointer;
}
.sec-mini-select option { color: black; }

/* --- 3. The Grid --- */
.sec-body { padding: 20px; }

/* Customizing FullCalendar to remove borders and look clean */
.fc { font-family: inherit; }
.fc-theme-standard td, .fc-theme-standard th { border: none !important; } /* Remove Grid Lines */
.fc-scrollgrid { border: none !important; }

/* Header Days (SUN, MON...) */
.fc-col-header-cell-cushion {
    color: #333; text-transform: uppercase; font-size: 12px; font-weight: bold; padding-bottom: 15px;
}
.fc-day-sun .fc-col-header-cell-cushion { color: #000; } /* Red Sunday */

/* Date Numbers */
.fc-daygrid-day-number {
    width: 100%; text-align: center; font-size: 16px; font-weight: 600; color: #444; padding: 10px 0;
}
.fc-daygrid-day-top { justify-content: center; } /* Center the number */

/* Highlight Today */
.fc-day-today { background: none !important; } /* Remove default yellow */
.fc-day-today .fc-daygrid-day-number {
    background: var(--cal-brown); color: white;
    border-radius: 50%; width: 35px; height: 35px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
}

/* --- COLORS --- */
/* Weekends Red */
.fc-day-fri .fc-daygrid-day-number, .fc-day-sat .fc-daygrid-day-number { color: #e53935; }
.fc-day-fri, .fc-day-sat { background-color: #fafafa; }

/* Govt Holiday (Red Box) */
.fc-day-govt-holiday {
    background-color: #e53935 !important;
}
.fc-day-govt-holiday .fc-daygrid-day-number { color: white !important; }

/* Events (Hidden mostly, just color dots if needed) */
.fc-event { display: none; } /* Hide the blue bars, we color the box instead */

/* --- 4. Footer --- */
.sec-footer {
    padding: 15px; text-align: center; border-top: 1px solid #eee;
    font-size: 12px; color: #888; background: #f9f9f9;
}

/* Modal */
.sec-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.sec-modal-content { background: white; margin: 20% auto; padding: 20px; width: 80%; max-width: 400px; border-radius: 8px; }
.sec-close { float: right; font-size: 24px; cursor: pointer; }

:root {
    --cal-brown: #6d4c41;
    --cal-bg: #f4f4f4;
    --cal-red: #e53935;   /* Govt Holiday Color */
    --cal-green: #43a047; /* Student Holiday Color */
}

.sec-modern-wrapper {
    max-width: 800px; 
    margin: 40px auto;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* --- Top Bar Layout --- */
.sec-top-bar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 10px; 
    flex-wrap: wrap; /* Allows wrapping on small phones */
    gap: 10px;
}
.sec-filters label { margin-right: 10px; font-size: 13px; font-weight: bold; color: #555; cursor: pointer; }
.sec-filters input { margin-right: 4px; }

.sec-btn { border: none; background: #ddd; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; transition: 0.3s; }
.sec-btn.active { background: var(--cal-brown); color: white; }
.sec-btn:hover { opacity: 0.8; }

/* Card */
.sec-card { background: white; box-shadow: 0 10px 30px rgba(0,0,0,0.15); border-radius: 8px; overflow: hidden; }

/* Hero */
.sec-hero { position: relative; height: 200px; overflow: hidden; }
.sec-hero img { width: 100%; height: 100%; object-fit: cover; }
.sec-nav-overlay { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; padding: 0 20px; transform: translateY(-50%); }
.sec-nav-btn { background: rgba(255,255,255,0.3); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* Header Band */
.sec-header-band { background: var(--cal-brown); color: white; display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; }
.sec-big-month { font-size: 24px; font-weight: 700; text-transform: uppercase; }
.sec-big-year { font-size: 42px; font-weight: 800; line-height: 1; }
.sec-dropdowns { display: flex; gap: 5px; margin-top: 5px; }
.sec-mini-select { background: rgba(255,255,255,0.2); border: none; color: white; padding: 2px; border-radius: 3px; }
.sec-mini-select option { color: black; }

/* Body */
.sec-body { padding: 20px; min-height: 400px; }

/* --- FullCalendar Overrides --- */
.fc { font-family: inherit; }
.fc-theme-standard td, .fc-theme-standard th, .fc-scrollgrid { border: none !important; }
.fc-col-header-cell-cushion { color: #333; text-transform: uppercase; font-size: 12px; padding-bottom: 10px; }
.fc-day-sun .fc-col-header-cell-cushion { color: red; }
.fc-daygrid-day-number { width: 100%; text-align: center; color: #444; padding: 8px 0; font-weight: 600; }
.fc-day-today .fc-daygrid-day-number { background: var(--cal-brown); color: white; border-radius: 50%; width: 30px; height: 30px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.fc-day-fri .fc-daygrid-day-number, .fc-day-sat .fc-daygrid-day-number { color: var(--cal-red); }

/* Holiday Dots (Monthly) */
.fc-day-govt-holiday .fc-daygrid-day-number { background: var(--cal-red); color: white; border-radius: 50%; width: 30px; height: 30px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.fc-day-student-holiday .fc-daygrid-day-number { background: var(--cal-green); color: white; border-radius: 50%; width: 30px; height: 30px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.fc-event { display: none; }

/* --- YEARLY VIEW GRID --- */
#sec-yearly-view { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 600px) { #sec-yearly-view { grid-template-columns: 1fr; } }

.sec-mini-cal { font-size: 10px; }
.sec-mini-cal h4 { text-align: center; margin: 0 0 5px 0; color: var(--cal-brown); text-transform: uppercase; font-size: 14px; }
.sec-mini-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sec-mini-tbl th { color: #888; font-weight: normal; padding-bottom: 3px; }
.sec-mini-tbl td { text-align: center; padding: 4px 0; font-weight: bold; color: #444; }
.sec-mini-tbl td.sec-holiday-weekend { color: red; }

/* Yearly Dots */
.sec-mini-tbl td span { display: inline-block; width: 18px; height: 18px; line-height: 18px; border-radius: 50%; color: white; }
.sec-holiday-govt span { background: var(--cal-red); }
.sec-holiday-student span { background: var(--cal-green); }

/* Footer */
.sec-footer { padding: 15px; text-align: center; border-top: 1px solid #eee; font-size: 12px; color: #888; background: #f9f9f9; }

/* Modal */
.sec-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.sec-modal-content { background: white; margin: 20% auto; padding: 20px; width: 80%; max-width: 400px; border-radius: 8px; }
.sec-close { float: right; font-size: 24px; cursor: pointer; }
/* Add this to style.css */
.sec-mini-tbl td { cursor: pointer; }
.sec-mini-tbl td:hover { background-color: #f0f0f0; border-radius: 4px; }