/* =============================================== */
/* styles.css - Consolidated Styles for UniTime */
/*              (Base, Themes, Shared, Index, Exams) */
/* =============================================== */

/* === Base Styles & Variables === */
:root {
    /* --- Light Mode (Default) --- */
    --bg-main: #f4f7f6;
    --bg-card: #ffffff; /* Cards, Modal Content, Inputs, Footer */
    --bg-info-bar: #e9ecef;
    --bg-modal: #ffffff;
    --bg-modal-overlay: rgba(0, 0, 0, 0.5);
    --bg-button: #e7f1ff; /* Base Button */
    --bg-button-hover: #d0e1ff;
    --bg-button-active: #b9d1ff;
    --bg-button-primary: #005792; /* Submit/Primary Action */
    --bg-button-primary-hover: #00416d;
    --bg-header: #005792; /* Default Header color */
    --bg-switcher: rgba(255, 255, 255, 0.1); /* Theme switcher background on dark header */
    --bg-switcher-button: transparent; /* Theme switcher button base */
    --bg-switcher-button-hover: rgba(255, 255, 255, 0.2);
    --bg-switcher-button-active: rgba(255, 255, 255, 0.3);
    --bg-input: #ffffff; /* Input background */
    --bg-exam-date: rgba(0, 0, 0, 0.03); /* Exam Card Date Section */
    --bg-exam-date-hover: rgba(0, 0, 0, 0.05);

    --text-primary: #333333;
    --text-secondary: #6c757d;
    --text-muted: #8a959e; /* Slightly darker muted */
    --text-heading: #003865;
    --text-link: #005792;
    --text-link-hover: var(--text-heading);
    --text-button: var(--text-link); /* Base button text */
    --text-button-hover: var(--text-link-hover);
    --text-button-primary: #ffffff; /* Primary button text */
    --text-button-primary-hover: #ffffff;
    --text-header: #ffffff;
    --text-header-muted: rgba(255, 255, 255, 0.85);
    --text-live: #d6336c; /* Accent Pink */
    --text-switcher: rgba(255, 255, 255, 0.8);
    --text-switcher-hover: #ffffff;
    --text-switcher-active: #ffffff;
    --text-modal-header: var(--text-heading);
    --text-modal-muted: var(--text-secondary);
    --text-modal-time: var(--text-link);
    --text-placeholder: var(--text-muted);
    --text-exam-date-num: var(--text-link); /* Exam Date Number */

    --border-color: #dce3e1;
    --border-button: #cce0ff; /* Base Button */
    --border-button-hover: #a7c6ff;
    --border-button-primary: var(--bg-button-primary);
    --border-button-primary-hover: var(--bg-button-primary-hover);
    --border-modal-header: var(--border-color);
    --border-modal-item: var(--border-color); /* Use solid border */
    --border-input: #ced4da;
    --border-input-focus: var(--text-link);
    --border-card-status: var(--border-color); /* Default status border */
    --border-switcher-button-active: rgba(255, 255, 255, 0.4); /* Border for active theme button */
    --border-exam-date: var(--border-color); /* Exam Card Date Separator */

    /* Status Border/Color Variables */
    --primary-blue-status: #4A4AFF;
    --status-free-color: #28C76F;  /* Green */
    --status-busy-color: #FF9F43;  /* Orange */
    --status-error-color: #EA5455; /* Red */
    --status-loading-color: var(--primary-blue-status);
    --status-info-color: #17a2b8;  /* Info (for messages maybe) */

    /* Status Background Hints (e.g., for form messages, error cards) */
    --bg-error-hint: rgba(234, 84, 85, 0.05);
    --bg-success-hint: rgba(40, 199, 111, 0.05);
    --bg-info-hint: rgba(74, 74, 255, 0.05);


    /* Other */
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --border-radius: 6px;
    --border-radius-sm: 4px;
    --border-radius-lg: 10px; /* Slightly larger radius for cards/sections */
    --card-shadow: 0 2px 5px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); /* Softer */
    --card-shadow-hover: 0 5px 12px rgba(0, 0, 0, 0.08), 0 3px 7px rgba(0, 0, 0, 0.06); /* Elevated */
    --modal-shadow: 0 5px 15px rgba(0,0,0,0.2);
    --info-bar-shadow: 0 1px 3px rgba(0,0,0,0.05);
    --header-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow for header */
    --switcher-shadow: none;
    --shadow-input-focus: 0 0 0 3px rgba(0, 87, 146, 0.15); /* Lighter focus shadow */
    --shadow-theme-button-active: inset 0 1px 2px rgba(0,0,0,0.1);

    /* Transitions */
    --transition-speed: 0.25s;
    --transition-func: ease-in-out; /* Smoother ease */
}

/* === Dark Mode Overrides === */
body[data-theme="dark"] {
    --bg-main: #161a2e;
    --bg-card: #202542;
    --bg-info-bar: #2a3052;
    --bg-modal: #252a4a;
    --bg-modal-overlay: rgba(10, 13, 28, 0.75);
    --bg-button: #2a3052;
    --bg-button-hover: #353c63;
    --bg-button-active: #40487a;
    --bg-button-primary: #8da8ff; /* Link color for primary button */
    --bg-button-primary-hover: #a17aff; /* Secondary accent for hover */
    --bg-header: #1e223a; /* Darker header */
    --bg-switcher: rgba(0, 0, 0, 0.2);
    --bg-switcher-button-hover: rgba(255, 255, 255, 0.1);
    --bg-switcher-button-active: rgba(74, 74, 255, 0.2);
    --bg-input: #2a3052;
    --bg-exam-date: rgba(255, 255, 255, 0.05);
    --bg-exam-date-hover: rgba(255, 255, 255, 0.08);

    --text-primary: #e0e1ff;
    --text-secondary: #a0a3d0;
    --text-muted: #7a7da7;
    --text-heading: #ffffff;
    --text-link: #8da8ff;
    --text-link-hover: #a17aff;
    --text-button: var(--text-link);
    --text-button-hover: var(--text-link-hover);
    --text-button-primary: #161a2e; /* Dark text on light button */
    --text-button-primary-hover: #161a2e;
    --text-header: #e0e1ff;
    --text-header-muted: #a0a3d0;
    --text-live: #ff70d1;
    --text-switcher: var(--text-secondary);
    --text-switcher-hover: #ffffff;
    --text-switcher-active: #8da8ff;
    --text-modal-header: var(--text-heading);
    --text-modal-muted: var(--text-secondary);
    --text-modal-time: var(--text-link);
    --text-placeholder: var(--text-muted);
    --text-exam-date-num: var(--text-link);

    --border-color: #353c63;
    --border-button: var(--border-color);
    --border-button-hover: #505c8b;
    --border-button-primary: var(--bg-button-primary);
    --border-button-primary-hover: var(--bg-button-primary-hover);
    --border-modal-header: var(--border-color);
    --border-modal-item: var(--border-color);
    --border-input: var(--border-color);
    --border-input-focus: var(--text-link);
    --border-card-status: var(--border-color);
    --border-switcher-button-active: var(--text-link);
    --border-exam-date: var(--border-color);

    /* Status Colors */
    --primary-blue-status: #5e5eff;
    --status-free-color: #4dff88; /* Brighter Green */
    --status-busy-color: #ffc071; /* Brighter Orange */
    --status-error-color: #ff8f8d; /* Brighter Red */
    --status-loading-color: var(--primary-blue-status);
    --status-info-color: #4dc9e0; /* Brighter Info Blue */

    /* Status Background Hints */
    --bg-error-hint: rgba(255, 143, 141, 0.1);
    --bg-success-hint: rgba(77, 255, 136, 0.1);
    --bg-info-hint: rgba(141, 168, 255, 0.1);


    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    --card-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.25);
    --modal-shadow: 0 5px 15px rgba(0,0,0,0.4);
    --info-bar-shadow: 0 1px 3px rgba(0,0,0,0.1);
    --header-shadow: 0 2px 4px rgba(0,0,0,0.2);
    --shadow-input-focus: 0 0 0 3px rgba(141, 168, 255, 0.25);
    --shadow-theme-button-active: inset 0 1px 2px rgba(0,0,0,0.3);
}

/* === Creative Mode Overrides (Warm/Study Theme) === */
body[data-theme="creative"] {
    --bg-main: #fdf6e3;
    --bg-card: #f8f2e8; /* Slightly off-white */
    --bg-info-bar: #eee8d5;
    --bg-modal: #fffdf9;
    --bg-modal-overlay: rgba(88, 80, 63, 0.6);
    --bg-button: #eee8d5; /* Beige button */
    --bg-button-hover: #dcd3b8;
    --bg-button-active: #cebf9a;
    --bg-button-primary: #6c5d4b; /* Darker Brown/Heading color */
    --bg-button-primary-hover: #586e75; /* Muted blue-grey */
    --bg-header: #8a8170; /* Softer brown header */
    --bg-switcher: rgba(0, 0, 0, 0.05);
    --bg-switcher-button-hover: rgba(0, 0, 0, 0.1);
    --bg-switcher-button-active: rgba(0, 0, 0, 0.15);
    --bg-input: #fdf6e3;
    --bg-exam-date: rgba(138, 129, 112, 0.06); /* Faint brown bg */
    --bg-exam-date-hover: rgba(138, 129, 112, 0.1);

    --text-primary: #4f4a40;
    --text-secondary: #8a8170;
    --text-muted: #a49c8b;
    --text-heading: #6c5d4b;
    --text-link: #cb4b16; /* Orange/Rust link */
    --text-link-hover: #b58900; /* Yellow ochre hover */
    --text-button: var(--text-heading);
    --text-button-hover: var(--text-primary);
    --text-button-primary: #fdf6e3; /* Light text on dark button */
    --text-button-primary-hover: #fdf6e3;
    --text-header: #fdf6e3;
    --text-header-muted: #eee8d5;
    --text-live: #dc322f; /* Red */
    --text-switcher: var(--text-secondary);
    --text-switcher-hover: var(--text-primary);
    --text-switcher-active: var(--text-primary);
    --text-modal-header: var(--text-heading);
    --text-modal-muted: var(--text-secondary);
    --text-modal-time: var(--text-link);
    --text-placeholder: var(--text-muted);
    --text-exam-date-num: var(--text-link);

    --border-color: #e8dcc2;
    --border-button: #e8dcc2;
    --border-button-hover: #d7ccb1;
    --border-button-primary: var(--bg-button-primary);
    --border-button-primary-hover: var(--bg-button-primary-hover);
    --border-modal-header: var(--border-color);
    --border-modal-item: var(--border-color);
    --border-input: var(--border-color);
    --border-input-focus: var(--text-link);
    --border-card-status: var(--border-color);
    --border-switcher-button-active: var(--text-heading);
    --border-exam-date: var(--border-color);

    /* Status Colors */
    --primary-blue-status: #268bd2; /* Blue for loading maybe */
    --status-free-color: #719e07; /* Earthy Green */
    --status-busy-color: #b58900; /* Yellow Ochre */
    --status-error-color: #dc322f; /* Red */
    --status-loading-color: var(--primary-blue-status);
    --status-info-color: #2aa198; /* Teal */

     /* Status Background Hints */
    --bg-error-hint: rgba(220, 50, 47, 0.06);
    --bg-success-hint: rgba(133, 153, 0, 0.06);
    --bg-info-hint: rgba(38, 139, 210, 0.06);

    --card-shadow: 0 2px 8px rgba(88, 80, 63, 0.1); /* Softer */
    --card-shadow-hover: 0 4px 12px rgba(88, 80, 63, 0.15);
    --modal-shadow: 0 5px 15px rgba(88, 80, 63, 0.2);
    --info-bar-shadow: 0 1px 3px rgba(88, 80, 63, 0.08);
    --header-shadow: 0 1px 2px rgba(0,0,0,0.1);
    --shadow-input-focus: 0 0 0 3px rgba(203, 75, 22, 0.15);
    --shadow-theme-button-active: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* ============================== */
/* === SHARED ELEMENT STYLES === */
/* ============================== */

/* --- Base Elements --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; /* Base font size */ }
body {
    font-family: var(--font-sans);
    background-color: var(--bg-main);
    color: var(--text-primary);
    margin: 0; padding: 0; line-height: 1.65; /* Improve readability */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-speed) var(--transition-func), color var(--transition-speed) var(--transition-func);
}
main { max-width: 1200px; margin: 2.5rem auto; padding: 0 1.5rem; display: flex; flex-direction: column; gap: 2.5rem; }
h1, h2, h3, h4 { margin-top: 0; margin-bottom: 0.75rem; color: var(--text-heading); font-weight: 600; line-height: 1.3; transition: color var(--transition-speed) var(--transition-func); }
h1 { font-size: clamp(1.75rem, 4vw, 2rem); } /* Responsive H1 */
h2 { font-size: clamp(1.25rem, 3vw, 1.5rem); margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.6rem; transition: border-color var(--transition-speed) var(--transition-func); display: flex; align-items: center; gap: 0.5rem; }
h3 { font-size: 1.15rem; color: var(--text-heading); margin-bottom: 0.6rem; }
h4 { font-size: 1.05rem; color: var(--text-primary); margin-bottom: 0.5rem; font-weight: 500;}
p { margin-top: 0; margin-bottom: 1rem; color: var(--text-secondary); transition: color var(--transition-speed) var(--transition-func); }
a { color: var(--text-link); text-decoration: none; transition: color var(--transition-speed) var(--transition-func); }
a:hover { color: var(--text-link-hover); text-decoration: underline; }

/* Utility: Icon sizing relative to text */
i.fa-fw { /* Ensure fixed-width icons align nicely */
    text-align: center;
    width: 1.25em;
}

/* --- Header --- */
header {
    background-color: var(--bg-header);
    color: var(--text-header);
    padding: 1rem 1.5rem;
    box-shadow: var(--header-shadow);
    transition: background-color var(--transition-speed) var(--transition-func), color var(--transition-speed) var(--transition-func), box-shadow var(--transition-speed) var(--transition-func);
}
.header-content {
    max-width: 1200px; margin: 0 auto; display: flex;
    justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem;
}
header h1 {
    color: inherit; font-size: clamp(1.4rem, 4vw, 1.6rem); margin-bottom: 0;
    display: flex; align-items: center; gap: 0.6rem;
    flex-grow: 1; flex-shrink: 0; font-weight: 600;
}
header h1 i { color: inherit !important; font-size: 0.9em; }
body[data-theme="light"] header h1 i { color: #fff !important; } /* Keep light icon white */
body[data-theme="dark"] header h1 i { color: var(--text-link) !important; } /* Link color icon */
body[data-theme="creative"] header h1 i { color: #fdf6e3 !important; }

.live-pulse { display: inline-block; color: var(--text-live); animation: pulse 2s infinite ease-in-out; font-weight: bold; font-size: 0.75em; vertical-align: middle; margin-left: 0.2em;}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.95); } }

/* Header Navigation */
.header-nav { flex-shrink: 0; }
.header-nav a {
    color: var(--text-header-muted); font-weight: 500; font-size: 0.9rem;
    padding: 0.4rem 0.8rem; border-radius: var(--border-radius-sm);
    text-decoration: none; position: relative; overflow: hidden; /* For effects */
    transition: color var(--transition-speed) var(--transition-func), background-color var(--transition-speed) var(--transition-func);
}
.header-nav a::before { /* Underline effect */
    content: ''; position: absolute; bottom: 0; left: 0; width: 0;
    height: 2px; background-color: var(--text-header); transition: width var(--transition-speed) var(--transition-func);
}
.header-nav a:hover { color: var(--text-header); background-color: transparent; text-decoration: none; }
.header-nav a:hover::before { width: 100%; }

/* Theme Switcher */
.theme-switcher {
    display: flex; gap: 0.3rem; background-color: var(--bg-switcher);
    padding: 0.3rem; border-radius: var(--border-radius-lg);
    box-shadow: var(--switcher-shadow); flex-shrink: 0;
    transition: background-color var(--transition-speed) var(--transition-func);
}
.theme-switcher button {
    background-color: var(--bg-switcher-button); color: var(--text-switcher);
    border: 1px solid transparent; border-radius: var(--border-radius-md);
    padding: 0.4rem 0.6rem; font-size: 1rem; /* Slightly larger icons */
    cursor: pointer; line-height: 1; display: flex; /* Align icon nicely */
    align-items: center; justify-content: center;
    transition: all var(--transition-speed) var(--transition-func);
}
.theme-switcher button:hover { color: var(--text-switcher-hover); background-color: var(--bg-switcher-button-hover); transform: translateY(-1px); }
.theme-switcher button.active {
    color: var(--text-switcher-active); background-color: var(--bg-switcher-button-active);
    border-color: var(--border-switcher-button-active); box-shadow: var(--shadow-theme-button-active);
}

/* --- Info Bar --- */
#current-info-bar {
    background-color: var(--bg-info-bar); color: var(--text-secondary);
    padding: 0.6rem 1.5rem; text-align: center; font-size: 0.9rem;
    border-radius: var(--border-radius-lg); margin: 1.5rem auto;
    max-width: 95%; width: fit-content; box-shadow: var(--info-bar-shadow);
    display: flex; flex-wrap: wrap; justify-content: center;
    align-items: center; gap: 0.5rem 1.5rem;
    transition: background-color var(--transition-speed) var(--transition-func), color var(--transition-speed) var(--transition-func);
}
#current-info-bar > span { display: inline-flex; align-items: center; gap: 0.4rem; }
#current-info-bar i { font-size: 1.1em; color: var(--text-link); line-height: 1;}
#current-info-bar strong { color: var(--text-primary); font-weight: 600; }

/* --- Footer --- */
footer {
    text-align: center; padding: 1.8rem 1rem; margin-top: 3rem; font-size: 0.9rem;
    color: var(--text-muted); border-top: 1px solid var(--border-color);
    background-color: var(--bg-card);
    transition: background-color var(--transition-speed) var(--transition-func), color var(--transition-speed) var(--transition-func), border-color var(--transition-speed) var(--transition-func);
}
footer p { margin-bottom: 0; }
#last-updated { font-weight: 500; color: var(--text-primary); transition: color var(--transition-speed) var(--transition-func); }


/* --- Modal Dialog (Shared) --- */
.modal { background-color: var(--bg-modal-overlay); display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease, background-color var(--transition-speed) var(--transition-func); }
.modal.show { display: flex; opacity: 1; }
.modal-content { background-color: var(--bg-modal); margin: auto; padding: 25px 30px; border: 1px solid var(--border-color); width: 90%; max-width: 650px; border-radius: var(--border-radius-lg); box-shadow: var(--modal-shadow); position: relative; transform: scale(0.95) translateY(10px); transition: transform 0.3s ease, opacity 0.3s ease, background-color var(--transition-speed) var(--transition-func), border-color var(--transition-speed) var(--transition-func); }
.modal.show .modal-content { transform: scale(1) translateY(0); opacity: 1; }
.modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-modal-header); padding-bottom: 0.8rem; margin-bottom: 1.5rem; transition: border-color var(--transition-speed) var(--transition-func); }
.modal-header h2 { margin: 0; font-size: 1.3rem; color: var(--text-modal-header); font-weight: 600; transition: color var(--transition-speed) var(--transition-func);}
.close-button { color: var(--text-muted); font-size: 2rem; font-weight: bold; line-height: 1; background: none; border: none; padding: 0 5px; cursor: pointer; transition: color 0.2s ease, transform 0.2s ease; }
.close-button:hover, .close-button:focus { color: var(--text-primary); transform: scale(1.1); }
.modal-body { max-height: 65vh; overflow-y: auto; padding-right: 10px; margin-right: -10px; }
.modal-schedule-list { list-style: none; padding: 0; margin: 0; }
.modal-schedule-list li { padding: 0.9rem 0.5rem; border-bottom: 1px solid var(--border-modal-item); display: flex; gap: 1rem; font-size: 0.95rem; align-items: flex-start; transition: border-color var(--transition-speed) var(--transition-func); }
.modal-schedule-list li:last-child { border-bottom: none; }
.modal-schedule-list .time-slot { flex-shrink: 0; font-weight: 500; color: var(--text-modal-time); width: 100px; text-align: right; padding-right: 1rem; font-size: 0.85rem; transition: color var(--transition-speed) var(--transition-func);}
.modal-schedule-list .event-details { flex-grow: 1; }
.modal-schedule-list .event-details strong { display: block; color: var(--text-primary); font-weight: 500; margin-bottom: 0.2rem; transition: color var(--transition-speed) var(--transition-func);}
.modal-schedule-list .event-details span { color: var(--text-modal-muted); font-size: 0.85rem; display: block; line-height: 1.45; transition: color var(--transition-speed) var(--transition-func);}
.modal-schedule-list .no-events { color: var(--text-muted); font-style: italic; padding: 1.5rem 0; text-align: center; transition: color var(--transition-speed) var(--transition-func);}
.modal-body .loading-indicator { text-align: center; padding: 2rem; color: var(--text-muted); font-style: italic; transition: color var(--transition-speed) var(--transition-func);}
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-track { background: rgba(128, 128, 128, 0.1); border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb { background-color: var(--text-muted); border-radius: 4px; }
.modal-body::-webkit-scrollbar-thumb:hover { background-color: var(--text-secondary); }

/* =============================== */
/* === INDEX PAGE SPECIFIC STYLES === */
/* =============================== */
.filter-bar { margin-bottom: 2rem; display: flex; gap: 0.5rem; align-items: center; }
.filter-bar label { display: none; }
.filter-bar input[type="text"] {
    flex-grow: 1; padding: 0.75rem 1rem; border: 1px solid var(--border-input);
    border-radius: var(--border-radius); font-size: 1rem; font-family: var(--font-sans);
    background-color: var(--bg-input); color: var(--text-primary);
    transition: all var(--transition-speed) var(--transition-func);
}
.filter-bar input[type="text"]::placeholder { color: var(--text-placeholder); opacity: 0.8; }
.filter-bar input[type="text"]:focus { outline: none; border-color: var(--border-input-focus); box-shadow: var(--shadow-input-focus); }

#course-grid-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.8rem; }
#course-grid-content > p, #course-grid-content > .no-filter-results {
    grid-column: 1 / -1; text-align: center; color: var(--text-secondary);
    font-style: italic; padding: 2.5rem; background-color: var(--bg-card);
    border-radius: var(--border-radius-lg); margin-top: 0; font-size: 1.05rem;
    transition: background-color var(--transition-speed) var(--transition-func), color var(--transition-speed) var(--transition-func);
}

.course-card {
    background-color: var(--bg-card); border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color); border-left-width: 5px;
    border-left-color: var(--status-loading-color); /* Default state */
    padding: 1.3rem 1.6rem; /* More padding */ box-shadow: var(--card-shadow);
    transition: all var(--transition-speed) var(--transition-func);
    display: flex; flex-direction: column; position: relative; min-height: 160px; /* Slightly taller */
}
.course-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: var(--card-shadow-hover); }
.course-card h3 { color: var(--text-heading); font-size: 1.2rem; font-weight: 600; margin-bottom: 0.6rem; }
.course-card .live-status { margin-bottom: 0.7rem; flex-grow: 1; line-height: 1.6; font-size: 0.98rem; font-weight: 500; transition: color var(--transition-speed) var(--transition-func); }
.course-card .live-status .status-text { padding-left: 0; }
.course-card .live-status .status-location { display: block; font-size: 0.9rem; color: var(--text-secondary); opacity: 0.9; margin-top: 0.3rem; transition: color var(--transition-speed) var(--transition-func); }

/* Apply status border/text */
.course-card.status-free { border-left-color: var(--status-free-color); }
.course-card.status-busy { border-left-color: var(--status-busy-color); }
.course-card.status-error { border-left-color: var(--status-error-color); }
.course-card.status-loading { border-left-color: var(--status-loading-color); }
.course-card.status-free .live-status { color: var(--status-free-color); }
.course-card.status-busy .live-status { color: var(--status-busy-color); }
.course-card.status-error .live-status { color: var(--status-error-color); }
.course-card.status-loading .live-status { color: var(--status-loading-color); }

/* View Schedule Button */
.view-schedule-button {
    font-size: 0.85rem; font-weight: 500; color: var(--text-button);
    background-color: var(--bg-button); border: 1px solid var(--border-button);
    border-radius: var(--border-radius-sm); padding: 0.4rem 1rem; cursor: pointer;
    transition: all var(--transition-speed) var(--transition-func);
    align-self: flex-start; margin-top: auto; margin-block-start: 1rem;
    text-decoration: none; line-height: 1.4; display: inline-flex; align-items: center; gap: 0.4rem;
}
.view-schedule-button:hover { background-color: var(--bg-button-hover); color: var(--text-button-hover); border-color: var(--border-button-hover); text-decoration: none; transform: scale(1.02); }


/* =============================== */
/* === EXAMS PAGE SPECIFIC STYLES === */
/* =============================== */
.exams-page-main { gap: 2.5rem; }

/* Section Styling */
.add-exam-section, .view-exam-section {
    background-color: var(--bg-card); padding: 2rem 2.5rem;
    border-radius: var(--border-radius-lg); box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    transition: all var(--transition-speed) var(--transition-func);
}
.add-exam-section h2, .view-exam-section h2 { border-bottom: none; margin-bottom: 1.8rem; padding-bottom: 0; }

/* Add Exam Form Styling */
#add-exam-form .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.3rem 2rem; margin-bottom: 2rem; }
#add-exam-form .form-group { display: flex; flex-direction: column; gap: 0.5rem; }
#add-exam-form .form-span-2 { grid-column: span 2; }
@media (max-width: 600px) { #add-exam-form .form-span-2 { grid-column: span 1; } }
#add-exam-form label { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); transition: color var(--transition-speed) var(--transition-func); }

#add-exam-form input[type="text"], #add-exam-form input[type="date"],
#add-exam-form input[type="time"], #add-exam-form select {
    padding: 0.8rem 1rem; border: 1px solid var(--border-input);
    border-radius: var(--border-radius); font-size: 1rem; font-family: var(--font-sans);
    background-color: var(--bg-input); color: var(--text-primary); width: 100%;
    transition: all var(--transition-speed) var(--transition-func); box-sizing: border-box;
}
#add-exam-form input::placeholder { color: var(--text-placeholder); opacity: 0.7;}
#add-exam-form input:focus, #add-exam-form select:focus { outline: none; border-color: var(--border-input-focus); box-shadow: var(--shadow-input-focus); }

/* Exam Submit Button */
#add-exam-form .submit-button {
    padding: 0.8rem 2rem; font-size: 1rem; font-weight: 600;
    color: var(--text-button-primary); background-color: var(--bg-button-primary);
    border: 1px solid var(--border-button-primary); border-radius: var(--border-radius); cursor: pointer;
    transition: all var(--transition-speed) var(--transition-func);
    grid-column: 1 / -1; justify-self: start; margin-top: 0.8rem;
    display: inline-flex; align-items: center; gap: 0.5rem;
}
#add-exam-form .submit-button:hover { background-color: var(--bg-button-primary-hover); border-color: var(--border-button-primary-hover); color: var(--text-button-primary-hover); box-shadow: 0 3px 8px rgba(0,0,0,0.1); transform: translateY(-1px); }
#add-exam-form .submit-button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
#add-exam-form .submit-button i { font-size: 0.9em; } /* Icon size in button */

/* Form Message Area */
.form-message {
    margin-top: 1.5rem; padding: 0.9rem 1.3rem; border-radius: var(--border-radius-sm);
    font-size: 0.95rem; text-align: center; border: 1px solid transparent;
    display: none; opacity: 0; grid-column: 1 / -1; font-weight: 500;
    transition: opacity 0.4s ease, background-color var(--transition-speed) var(--transition-func), color var(--transition-speed) var(--transition-func), border-color var(--transition-speed) var(--transition-func);
}
.form-message.show { display: block; opacity: 1; }
.form-message.info { background-color: var(--bg-info-hint); border-color: var(--status-info-color); color: var(--status-info-color); }
.form-message.success { background-color: var(--bg-success-hint); border-color: var(--status-free-color); color: var(--status-free-color); }
.form-message.error { background-color: var(--bg-error-hint); border-color: var(--status-error-color); color: var(--status-error-color); }
/* Dark Theme */
body[data-theme="dark"] .form-message.info { background-color: rgba(77, 201, 224, 0.15); }
body[data-theme="dark"] .form-message.success { background-color: rgba(77, 255, 136, 0.15); }
body[data-theme="dark"] .form-message.error { background-color: rgba(255, 143, 141, 0.15); }
/* Creative Theme */
body[data-theme="creative"] .form-message.info { background-color: rgba(42, 161, 152, 0.1); }
body[data-theme="creative"] .form-message.success { background-color: rgba(113, 158, 7, 0.1); }
body[data-theme="creative"] .form-message.error { background-color: rgba(220, 50, 47, 0.1); }

/* --- Exam List Styles (Creative Card Layout) --- */
.exam-list-container {
    margin-top: 1.5rem; background-color: transparent; /* Let main bg show through */
    border: none; padding: 0; /* No border/padding for container */
}
/* Styling for Scrollbar (Optional) */
.exam-list-container::-webkit-scrollbar { width: 8px; }
.exam-list-container::-webkit-scrollbar-track { background: transparent; }
.exam-list-container::-webkit-scrollbar-thumb { background-color: var(--text-muted); border-radius: 4px; }
.exam-list-container::-webkit-scrollbar-thumb:hover { background-color: var(--text-secondary); }

#exam-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.5rem; } /* Add gap between cards */

/* Loading / No Exams / Error States - Improved Card Look */
#exam-list li.loading-exams, #exam-list li.no-exams-card, #exam-list li.error-exams-card {
    background-color: var(--bg-card); border-radius: var(--border-radius-lg);
    padding: 2rem; text-align: center; font-style: italic; font-size: 1.05rem;
    color: var(--text-secondary); border: 1px dashed var(--border-color); margin: 0;
}
#exam-list li.error-exams-card { color: var(--status-error-color); border-style: solid; border-color: var(--status-error-color); background-color: var(--bg-error-hint); }
#exam-list li.no-exams-card { color: var(--text-primary); border-color: var(--border-color); border-style: dashed;}


/* Creative Exam Card Styling */
.exam-card {
    list-style: none; background-color: var(--bg-card);
    border-radius: var(--border-radius-lg); border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow); display: flex; /* Use flexbox */
    align-items: stretch; overflow: hidden;
    transition: all var(--transition-speed) var(--transition-func);
}
.exam-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); border-color: var(--text-link); } /* Highlight on hover */

/* Left Date Section */
.exam-card-date {
    flex: 0 0 85px; /* Fixed width */ display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    background-color: var(--bg-exam-date); padding: 1rem 0.5rem; text-align: center;
    border-right: 1px solid var(--border-exam-date);
    transition: background-color var(--transition-speed) var(--transition-func), border-color var(--transition-speed) var(--transition-func);
}
.exam-card:hover .exam-card-date { background-color: var(--bg-exam-date-hover); border-color: var(--text-link); } /* Hover sync */
.date-day-num { font-size: 2.2rem; font-weight: 600; line-height: 1.1; color: var(--text-exam-date-num); margin-bottom: 0.1rem; transition: color var(--transition-speed) var(--transition-func); }
.date-month-year { display: flex; flex-direction: column; line-height: 1.2; color: var(--text-secondary); font-size: 0.8rem; text-transform: uppercase; font-weight: 500; transition: color var(--transition-speed) var(--transition-func); }
.date-month-year span + span { margin-top: 0.1rem; }

/* Right Info Section */
.exam-card-info { flex: 1; padding: 1.2rem 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; /* Vertical gap */ }
.exam-card-info h4.exam-module-title { margin: 0 0 0.4rem 0; font-size: 1.2rem; font-weight: 600; color: var(--text-heading); line-height: 1.3; }
.exam-card-info .exam-day-time { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; color: var(--text-primary); font-size: 0.95rem; font-weight: 500; margin-bottom: 0.3rem;}
.exam-card-info .exam-day-time .day-name { font-style: italic; color: var(--text-secondary); margin-right: 0.5rem;}
.exam-card-info .exam-day-time .time-value i { color: var(--text-link); margin-right: 0.4rem; font-size: 0.9em;}
.exam-card-info .exam-details { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; color: var(--text-secondary); font-size: 0.9rem; }
.exam-card-info .exam-details .detail-item { display: inline-flex; align-items: center; gap: 0.5rem; }
.exam-card-info .exam-details .detail-item i { color: var(--text-muted); opacity: 0.9; }
/* Action buttons section (optional) */
.exam-card-actions { margin-top: auto; padding-top: 0.8rem; display: flex; gap: 0.5rem; justify-content: flex-end;}
.exam-action-btn { /* Basic styling for potential edit/delete buttons */
    font-size: 0.8rem; padding: 0.25rem 0.7rem; border-radius: var(--border-radius-sm); cursor: pointer;
    background-color: var(--bg-button); color: var(--text-button); border: 1px solid var(--border-button);
    transition: all var(--transition-speed) var(--transition-func); display: inline-flex; align-items: center; gap: 0.3rem;
}
.exam-action-btn:hover { background-color: var(--bg-button-hover); border-color: var(--border-button-hover); color: var(--text-button-hover);}
.exam-action-btn.delete-btn:hover { background-color: var(--status-error-color); border-color: var(--status-error-color); color: #fff;}

/* ======================================= */
/* === END OF EXAM CARD UI Design Styles === */
/* ======================================= */


/* =============================== */
/* === Responsive & Helper (Shared) === */
/* =============================== */
@media (max-width: 768px) {
    main { margin: 1.5rem auto; gap: 1.5rem;}
    h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; }
    #course-grid-content { grid-template-columns: 1fr; gap: 1.2rem;}
    .filter-bar { flex-direction: column; align-items: stretch; }
    #current-info-bar { flex-direction: column; gap: 0.6rem; width: 90%; padding: 0.8rem 1rem;}
    .modal-content { width: 95%; padding: 20px;}
    .modal-schedule-list li { flex-direction: column; gap: 0.3rem; align-items: stretch;}
    .modal-schedule-list .time-slot { width: auto; text-align: left; padding-right: 0; font-size: 0.9rem; }
    .header-content { gap: 0.8rem; } header h1 { font-size: 1.4rem; }
    /* Exam page responsiveness */
    .add-exam-section, .view-exam-section { padding: 1.5rem; }
    .exam-card { flex-direction: column; } /* Stack date and info vertically */
    .exam-card-date { flex-basis: auto; width: 100%; border-right: none; border-bottom: 1px solid var(--border-exam-date); flex-direction: row; justify-content: space-around; padding: 0.8rem 1rem; }
    .exam-card-date .date-day-num { font-size: 1.8rem; }
    .exam-card-date .date-month-year { flex-direction: row; gap: 0.5rem; align-items: baseline; margin-top: 0; font-size: 0.85rem;}
    .exam-card-info { padding: 1rem 1.2rem;}
    .exam-card:hover .exam-card-date { border-bottom-color: var(--text-link); }

}
@media (max-width: 480px) { /* Even smaller screens */
    main { padding: 0 1rem;} h1 { font-size: 1.3rem;}
    header h1 { text-align: center; justify-content: center; order: 1; width: 100%;}
    .header-content { justify-content: center; }
     .header-nav { order: 2;} .theme-switcher { order: 3; margin-top: 0.5rem;}
   #current-info-bar { font-size: 0.85rem; gap: 0.4rem 1rem; }
   .add-exam-section, .view-exam-section { padding: 1.2rem 1rem; }
   #add-exam-form .form-grid { gap: 1rem; }
   #add-exam-form .submit-button { font-size: 0.95rem; padding: 0.7rem 1.5rem;}
   #exam-list { gap: 1rem; } /* Reduce gap between cards */
   .exam-card-info { padding: 1rem;}
   .exam-card-info .exam-day-time { font-size: 0.9rem;}
   .exam-card-info .exam-details { font-size: 0.85rem; gap: 0.5rem 1rem; }
}

.hidden { display: none !important; } /* Utility class */