/* 
PLEASE IF YOU MAKE ANY CHANGES (ADDITIONS OR REMOVAL) PLEASE UPDATE COMMENT REFERENCES APPROPRIATELY, 
THIS WAY IF WE WANT TO CHANGE THE LOOK OF SOMETHING IN THE FUTURE, IT DOES NOT HAVE ANY UNFORESEEN CONSEQUENCES

REGARDS, THE MAN WHO SPENT 3+ HOURS JUST READING ALL THE CODE AND TESTING TO FIGURE OUT WHAT CSS DID WHAT TO THE JS
*/

/*
References to:
index.html - body element
basket.html - body element
*/
body {
    font-family: Arial, sans-serif;
    padding: 20px; /* controls the "boarder" amount of white space from edge of screen to our actual content */
    background-color: #f9f9f9;
}

/*
References to:
index.html - page title "MTU Course Scheduler"
basket.html - page title "My Basket"
*/
h1 {
    text-align: center;
}

/*
References to:
renderCourses.js - main course container div (the "box" the courses and the drop down sections are in)
basket.js - course container in basket page (also the "box" for the courses and sections in the basket page)
*/
.course {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/*
References to:
renderCourses.js - clickable header for courses with sections 
NOTE:
This is the part you can actually click, scale this to half [width: 50%;] and not .course, 
you get a box you can only click half of, 
the info presented also scales based on this one and not .course
*/
.course-header {
    background: #f2f2f2;
    padding: 8px;
    cursor: pointer;
    font-size: 1.1em;
    display: flex;
}

/*
References to:
renderCourses.js - clickable header for courses with no sections 
(even though they are hidden by default)
basket.js - clickable header in basket page (always disabled [can not click it])
NOTE:
scaling or adjusting this affects both headers for courses with no section and headers in the basket (no matter if they have sections or not)
*/
.course-header-disabled {
    background: #eee;
    color: #888;
    padding: 8px;
    cursor: auto;
    font-size: 1.1em;
    display: flex;
}

/*
References to:
renderCourses.js - credits and section count on the right side of header
*/
.right-header-text {
    margin-left: auto; /* moves items to the right side of the screen */
}

/*
References to: 
empty sections and basket sections
renderCourses.js - container for empty section details
(hidden by default and not clickable)
basket.js - container for section details in the basket
(always shown)
*/
.sections {
    padding: 8px 16px;
    display: none;
}

/*
References to:
section tabs themselves
renderCourses.js - each individual section container (per each section)
basket.js - each indivdual secion container in basket
*/
.section {
    border-top: 1px solid #eee;
    position: relative;
    padding: 5px 0;
}

/*
References to:
renderCourses.js - left side section container (per each section) (holds the main info)
child to secDiv
parent of: (main section data)
line1 - sequence num, CRN, credit
line2 - instructor
line3 - meeting details
*/
.section-left-side{
    width: 70%;
}

/*
References to:
renderCourses.js - right side section container (per each section) (holds the enrollment count data, both title and fraction)
NOTE:
most of this is positioning for the title and fraction, best if it is not touched, if want to change the title or enrollment fraction
see their seperate sections below
*/
.section-right-side{
    position: absolute;
    right: 10px;
    /*makes the title and fraction centered in the middle*/
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /*the following options are the only ones that can be changed independently*/
    width: 30%;
    text-align: right;
}

/*
References to:
renderCourses.js - right side section container (per each section) (holds the enrollment title [Enrollement: ])
*/
.section-right-title{
    font-size: 1.0em;
    padding-bottom: 5px;
    text-align: right;
    color: rgb(88, 88, 88);
}

/*
References to:
renderCourses.js - right side section container (per each section) (holds the enrollment fraction)
*/
.section-right-fraction{
    font-size: 1.8em;
    /*font-weight: bold;*/
    text-align: right;
    color: black;
}

/*
References to:
renderCourses.js - enrollment fraction when section is full
NOTE:
Overrides default green color when enrollment reaches capacity.
*/
.section-full {
    color: red;
}

/*
References to:
renderCourses.js - bold sequence number in section
basket.js - bold sequence number in basket
NOTE:
comes from "const boldID = document.createElement("b");" in renderCourse.js
I am not able to scale, move or change it in any way other than color, 
applies to the sequence number (bold) in both html pages in sections
Sequence number is the bold number and letter for each sections such as "0A", "R01", "L01", etc
*/
.section b {
    color: purple;
}

/*
References to:
renderCourses.js - meeting time/location details (the gray text)
basket.js - meeting time/location in basket (the gray text)
*/
.meeting {
    font-size: 0.9em;
    color: #555;
    margin-left: 10px;
}

/*
References to:
renderCourses.js - course header hover
index.html - (multiple) | hovering over course header, filters toggle, filters reset, open basket buttons, and expand and collapse all buttons
basket.html - hovering over "back to course search" button
*/
.course-header:hover, button#filters-toggle:hover, button#filters-reset:hover, .wht:hover, button#expand-all:hover, button#collapse-all:hover{
    background-color: #eee;
}

/*
References to:
index.html - search bar container (includes the search bar and the filter button)
*/
#search {
    display: flex;
}

/*
References to:
index.html - main search input and filter button toggle
*/
input#main-search, button#filters-toggle {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    border-radius: 5px;
    padding: 15px;
    font-size: 1em;
}

/*
References to:
index.html - full width search input
*/
input#main-search {
    width: 100%;
}

/*
References to:
index.html - filters menu container
*/
div#filters-menu {
    margin-bottom: 8px;
}

/*
References to:
index.html - (multiple) | all filter input boxes
finder.html - (multiple) | all constraint input boxes
*/
table#filters-menu input, table#constraints-menu input {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    border-radius: 5px;
    margin-bottom: 2px;
    padding: 3px;
    font-size: 1em;
}

/*
References to:
index.html - reset filters button
*/
button#filters-reset {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    border-radius: 5px;
    margin-bottom: 2px;
    padding: 6px;
    width: 8em;
    font-size: 1em;
    cursor: pointer;
}

/*
References to:
index.html - weekday filter buttons (defualt state), and the "no filter" legend button
basket.js - "remove" button in basket
utils.js - reset filters function
*/
button.gry {
    border: 1px solid #aaa;
    background-color: #eee;
    border-radius: 5px;
    padding: 4px;
    cursor: pointer;
}

/*
References to:
index.html - weekday filter buttons (required state), and the "required" legend button
renderCourses.js - "add to basket" button
search.js - required attributes filter
filter.html - required constraints add buttons
*/
button.grn {
    border: 1px solid #aaa;
    background-color: #e0ffe0;
    border-radius: 5px;
    padding: 4px;
    cursor: pointer;
}

/*
References to:
index.html - weekday filter buttons (exclude state), and the "excluded" legend button
basket.html - "clear basket" button
basket.js - remove button in basket
search.js - forbidden attributes filter
filter.html - forbidden constraints add buttons
scheduleFinder.js - added constraint remove button
*/
button.red {
    border: 1px solid #aaa;
    background-color: #ffe0e0;
    border-radius: 5px;
    padding: 4px;
    cursor: pointer;
}

/*
References to:
index.html - "view" attibutes button, "open basket page" button, "schedule finder" button
basket.html - "back to course search" button
finder.html - "find schedules" button
*/
button.wht {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    border-radius: 5px;
    padding: 4px;
    cursor: pointer;
}

/*
References to:
index.html - disabled legend buttons
*/
button:disabled {
    cursor: auto;
}

/*
References to:
index.html - container for count and expand/collapse buttons
*/
div#count-expand-collapse {
    display: flex;
    gap: 8px;
}

/*
References to:
index.html - "expand all" button, and "collapse all" button
*/
button#expand-all, button#collapse-all {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    border-radius: 5px;
    padding: 8px;
    font-size: 1em;
    margin-top: 4px;
    margin-bottom: 4px;
    cursor: pointer;
}

/*
References to:
index.html - right-alligned expand button
*/
button#expand-all {
    margin-left: auto;
}

/*
References to:
basket.html - container to fill up the whole screen by flexing timetable and course list
*/
#basket-container {
    display: flex;
    gap: 15px;
}

/*
References to:
scheduleFinder.js - displays added constraints, displays found schedules on finder.html page
*/
.constraint, .schedule {
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    margin: 10px;
    padding-left: 10px;
}

/*
References to:
scheduleFinder.js - "remove" button on constraints, "open in basket" button on found schedules on finder.html page
*/
.constraint button, .schedule button {
    height: min-content;
    margin: auto;
    margin-right: 10px;
}

/*
References to:
index.html - basket controls container (navigation bar for basket and finder buttons + basket count)
NOTES:
Creates a horizontal layout with buttons on the left and basket count aligned to the right
*/
#basket-controls {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/*
References to:
index.html - container for the basket button
*/
.basket-button {
    display: flex;
    gap: 8px;
}

/*
References to:
index.html - container for finder button
*/
.finder-button {
    display: flex;
    gap: 8px;
    margin-left: 10px; /* adds space between the 2 buttons*/
}

/*
References to:
index.html - basket count display (number of saved courses and sections)
NOTE:
Pushes the basket count to the far right side of the container.
*/
#basket-count {
    margin-left: auto;
    font-size: 1.1em;
}

/*
References to:
index.html - basket and finder buttons
NOTE:
Allows updates to size, appearance, etc. without affecting other .wht buttons
*/
#basket-controls button {
    padding: 8px;   /* button size */
    font-size: 1em;   /* text size */
    border-radius: 5px;   /* smoother corners */
    margin-top: 4px;
    margin-bottom: 4px;
}

/*
References to:
basket.html - navigation controls (back + clear basket)
finder.html - navigation controls (back button)
*/
.page-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

/*
References to:
basket.html - back to course search button
finder.html - back to course search button
*/
.nav-btn {
    border-radius: 5px;
    padding: 8px;
    font-size: 1em;
    margin-top: 4px;
    margin-bottom: 4px;
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    cursor: pointer;
}

/*
References to:
basket.html - container for the the list of courses to reduce the size of them on the screen
*/
#basket-list {
    width: 30%;
}

/*
basket.html - clear basket button
*/
.red-btn {
    background-color: #ffe0e0;
    cursor: pointer;
}

/*
References to:
basket.html - container to hold the timetable over the rest of the screen
*/
#basket-timetable {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}
/*
basket.html - hover effect for buttons
finder.html - hover effect for buttons
*/
.nav-btn:hover {
    background-color: #eee;
}

/*
References to:
basket.html - clear basket button on hover
*/
.red-btn:hover {
    background-color: #ffb2b2;
}

/*
References to:
index.html - logo on either side of the page title
basket.html - logo on either side of the page title
finder.html - logo on either side of the page title
*/
.title-logo {
    height: 60px;             /* adjust to match font size */
    width: auto;              /* keep aspect ratio */
    vertical-align: middle;   /* align with text */
    margin-right: 15px;       /* spacing between logo and text */
    margin-left: 15px;       /* spacing between logo and text */

}