/* Sets the overall page size, removes default spacing, and creates the main background/theme */
body {
	height: 100vh; /* Makes the body fill the entire height of the viewport */
    margin: 0; /* Removes default browser margins */
    font-family: Arial, Helvetica, sans-serif; /* Sets the primary font style */
    background: linear-gradient(135deg, #0b1026, #1b1f4a, #3b1f5e, #5b2c83); /* Creates a diagonal blue/purple gradient background */
    color: #fff; /* Sets default text color to white */
}

/* Controls the top header area containing the clock */
.header {
    height: 10vh; /* Makes the header take up 10% of the viewport height */
    display: flex; /* Enables flexbox layout */
    justify-content: center; /* Centers the clock horizontally */
    align-items: center; /* Centers the clock vertically */
}

/* Controls the main dashboard area below the header */
.dashboard {
	display: flex; /* Places left and right panels side-by-side */
	height: 90vh; /* Makes dashboard fill the remaining viewport height */
}

/* Clock styling */
.clock {
    font-size: 5vh; /* Makes clock text scale with screen height */
    text-align: center; /* Centers the clock text */
    margin: 0; /* Removes extra spacing around the clock */
    color: #00ffff; /* Makes the clock cyan */
    font-weight: bold; /* Makes the clock text thicker */
    font-family: 'Courier New', monospace; /* Gives the clock a digital display appearance */
}

/* Controls the left side calendar panel */
.left-panel {
	width: 60%; /* Makes the calendar section take 60% of the dashboard width */
    border-right: 2px solid #00ffff; /* Creates the glowing divider between panels */
    box-shadow: 5px 0 15px rgba(255,255,255,0.1); /* Adds a soft glow effect beside the divider */
}

/* Controls the right side events panel */
.right-panel {
	width: 40%; /* Makes the events section take 40% of the dashboard width */
	display: flex; /* Enables flexbox positioning */
    flex-direction: column; /* Stacks items vertically */
    align-items: center; /* Centers content horizontally */
}

/* Shared styling for both dashboard panels */
.left-panel,
.right-panel {
	background: rgba(255,255,255,0.05); /* Adds a transparent glass-like background */
	backdrop-filter: blur(10px); /* Blurs content behind the panels */
	overflow: hidden; /* Prevents content from overflowing outside the panels */
}


/* ===========================
   EVENTS
=========================== */

/* Controls the event table appearance */
.event-table {
	margin: 0 auto; /* Centers the table horizontally */
    background: rgba(255,255,255,0.1); /* Gives the table a transparent background */
    width: 100%; /* Makes the table fill the available panel width */
    border-collapse: collapse; /* Removes spacing between table borders */
    font-size: 24px; /* Makes event text larger for display viewing */
}

/* Controls the table header cells */
.event-table th {
    background: rgba(255,255,255,0.25); /* Adds a lighter transparent header background */
    color: white; /* Makes header text white */
    padding: 17.5px; /* Adds space inside header cells */
	text-align: center; /* Centers header text */
}

/* Controls the table data cells */
.event-table td {
    padding: 12px; /* Adds spacing inside event cells */
    border-bottom: 1px solid rgba(255,255,255,0.2); /* Adds subtle row separation */
	text-align: center; /* Centers event information */
}


/* ===========================
   CALENDAR
=========================== */

/* Creates the monthly calendar grid */
.calendar-grid {
    display: grid; /* Enables CSS grid layout */
    grid-template-columns: repeat(7, 1fr); /* Creates 7 equal columns for the days of the week */
    gap: 0px; /* Removes spacing between calendar cells */
    padding: 0px; /* Removes padding around the calendar */
}

/* Controls each calendar square */
.calendar-grid div {
    height: 60px; /* Sets the height of each calendar day */
    display: flex; /* Enables flexbox alignment */
    justify-content: center; /* Centers day numbers horizontally */
    align-items: center; /* Centers day numbers vertically */
    border: 1px solid rgba(255,255,255,0.3); /* Adds subtle borders around calendar cells */
    font-size: 24px; /* Makes calendar numbers easy to read */
}

/* Styles the weekday labels at the top of the calendar */
.day-header {
    background: rgba(255,255,255,0.25); /* Gives weekday headers a highlighted background */
    font-weight: bold; /* Makes weekday names stand out */
}

/* Highlights the current day */
.today {
    background: #00ffff; /* Gives today's date a cyan highlight */
    color: #000; /* Makes the text black for contrast */
    font-weight: bold; /* Makes today's number stand out */
}