/* === Material UI Inspired Redesign === */

/* --- Color Palette & Variables --- */
:root {
    --mui-primary-main: #0288d1; /* Material Blue 700 */
    --mui-primary-light: #03a9f4; /* Material Blue 500 */
    --mui-primary-dark: #01579b; /* Material Blue 900 */
    --mui-primary-contrast-text: #ffffff;

    --mui-secondary-main: #ffa000; /* Material Amber 700 */
    --mui-secondary-light: #ffc107; /* Material Amber 500 */
    --mui-secondary-dark: #ff6f00; /* Material Amber 900 */
    --mui-secondary-contrast-text: #000000;

    --mui-background-default: #f5f5f5; /* Material Grey 100 */
    --mui-background-paper: #ffffff; /* White */
    --mui-text-primary: rgba(0, 0, 0, 0.87);
    --mui-text-secondary: rgba(0, 0, 0, 0.6);
    --mui-text-disabled: rgba(0, 0, 0, 0.38);
    --mui-divider: rgba(0, 0, 0, 0.12);

    --mui-elevation-1: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
    --mui-elevation-2: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
    --mui-elevation-4: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
    --mui-elevation-8: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);

    --mui-border-radius: 8px; /* Consistent border radius */
    --mui-primary-main-rgb: 2, 136, 209; /* RGB values for primary main */
}

/* === Global Styles === */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 20px; /* Slightly reduced padding */
    background-color: var(--mui-background-default);
    color: var(--mui-text-primary);
    line-height: 1.5; /* Material default */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em 0;
    font-weight: 500; /* Material medium weight */
    line-height: 1.3;
}

h1 {
    text-align: center;
    color: var(--mui-primary-dark); /* Use primary dark */
    margin-bottom: 24px; /* Consistent spacing */
    font-size: 2.25rem; /* Material H4 size */
    font-weight: 400; /* Material H4 weight */
}

h3 { /* Used for "Выберите группу", "Фильтры" */
     font-size: 1.25rem; /* Material Subtitle 1 */
     color: var(--mui-text-primary);
     margin-bottom: 16px;
     font-weight: 500;
}

h4 { /* Used for Course Headers, Teacher Hours */
    font-size: 1.1rem; /* Material Body 1 */
    color: var(--mui-text-secondary);
    font-weight: 500;
    margin-bottom: 8px;
}

p {
    margin-bottom: 16px; /* Consistent spacing */
    color: var(--mui-text-secondary);
}

/* === App Header === */
.app-header {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */ /* Removed for absolute positioning approach */
    justify-content: space-around; /* Center the title block */
    padding: 12px 24px; /* Vertical and horizontal padding */
    background: linear-gradient(to bottom, var(--mui-primary-light), var(--mui-primary-main)); /* Gradient */
    position: relative; /* Needed for absolute positioning of children */
    color: var(--mui-primary-contrast-text); /* Contrast text */
    box-shadow: var(--mui-elevation-4); /* Add shadow */
    margin-bottom: 24px; /* Space below header */
    border-radius: 8px; /* Added border radius */
}

.logo-placeholder {
    /* Basic placeholder styling */
    max-width: 150px;
    padding: 8px 16px;
    left: 24px; /* Match header padding */
    top: 50%;
}

.header-title {
    /* Override default h1 styles if needed */
    margin: 0; /* Remove default margins */
    font-size: 1.5rem; /* Adjust size as needed */
    font-weight: 500; /* Material medium */
    text-align: center; /* Keep centered */
    /* flex-grow: 1; */ /* Removed for absolute positioning approach */
    width: fit-content; /* Ensure it takes full width for text-align */
    color: var(--mui-primary-contrast-text); /* Ensure contrast text */
}

.contact-info {
    /* Basic placeholder styling */
    border-radius: 4px;
    font-size: 0.9rem;
    opacity: 0.7;
    text-align: right;
    right: 24px; /* Match header padding */
    top: 50%;
}

/* Adjustments for smaller screens if needed */
@media (max-width: 600px) {
    .app-header {
        padding: 10px 16px;
        flex-direction: column; /* Stack elements vertically */
        text-align: center;
        align-items: center; /* Ensure items are centered horizontally */
    }
    .header-title {
        margin: 8px 0; /* Add space when stacked */
        font-size: 1.3rem;
    }
    .logo-placeholder,
    .contact-info {
        position: static; /* Reset position for stacked layout */
        transform: none; /* Reset transform */
        margin-top: 8px;
        width: 80%; /* Make placeholders wider */
        text-align: center;
    }
}

/* === Manual Update Area === */
/* Container for the update buttons */
div[style*="margin: 15px 0;"] { /* Target the inline-styled div */
    background-color: var(--mui-background-paper);
    padding: 16px;
    border-radius: var(--mui-border-radius);
    box-shadow: var(--mui-elevation-1);
    margin-bottom: 24px; /* Consistent spacing */
    display: flex;
    align-items: center;
    gap: 16px; /* Space between buttons/status */
    flex-wrap: wrap;
}

/* General Button Styling (Material Inspired) */
button {
    margin: 10px;
    padding: 8px 16px;
    border-radius: 4px; /* Material default */
    border: none;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02857em;
    line-height: 1.75;
    min-width: 64px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
                color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
                transform 150ms ease-out; /* Added transform transition */
    box-shadow: var(--mui-elevation-1);
    /* Ripple effect would require JS */
}

button:hover {
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.04); /* Subtle hover */
    box-shadow: var(--mui-elevation-2);
}

button:disabled {
    color: var(--mui-text-disabled);
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0.12);
    cursor: default;
    pointer-events: none;
}

/* === View Selection Buttons === */
.view-select-button {
    /* Inherit general button styles */
    background-color: var(--mui-background-paper); /* Default paper background */
    color: var(--mui-text-primary); /* Default text color */
    box-shadow: var(--mui-elevation-1);
    min-width: 150px; /* Give them a decent width */
}

.view-select-button:hover {
    background-color: rgba(0, 0, 0, 0.04); /* Subtle hover */
    box-shadow: var(--mui-elevation-2);
}

.view-select-button.active {
    background-color: var(--mui-primary-main); /* REVERT: Use Primary color for active */
    color: var(--mui-primary-contrast-text); /* Contrast text for active */
    box-shadow: var(--mui-elevation-4); /* More shadow for active */
}

.view-select-button.active:hover {
    background-color: var(--mui-primary-dark); /* REVERT: Darker primary on hover */
}

/* Specific Update Buttons */
#manualGroupCacheUpdateButton,
#manualScheduleUpdateButton {
    background-color: var(--mui-primary-main);
    color: var(--mui-primary-contrast-text);
}

#manualGroupCacheUpdateButton:hover,
#manualScheduleUpdateButton:hover {
    background-color: var(--mui-primary-dark); /* Darker on hover */
    box-shadow: var(--mui-elevation-4);
}

/* Status Spans */
#groupCacheUpdateStatus,
#scheduleUpdateStatus {
    font-size: 0.875rem;
    font-weight: 500;
}

/* === Teacher Hours Section === */
#teacherHoursContainer {
    background-color: var(--mui-background-paper); /* Use paper */
    padding: 16px 24px;
    margin-top: 24px;
    border-radius: var(--mui-border-radius);
    border: none;
    box-shadow: var(--mui-elevation-1);
    font-size: 0.875rem; /* 14px */
}

#teacherHoursContainer h4 {
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--mui-text-primary); /* Primary text */
    font-weight: 500;
    border-bottom: 1px solid var(--mui-divider);
    padding-bottom: 8px;
    font-size: 1rem; /* Material Subtitle 2 */
}

#teacherHoursContainer ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    column-gap: 30px;
}

#teacherHoursContainer li {
    margin-bottom: 6px;
    color: var(--mui-text-secondary); /* Secondary text */
}

/* === Filter Controls === */
#filterControls {
    background-color: var(--mui-background-paper);
    padding: 16px 24px;
    margin-top: 24px;
    border-radius: var(--mui-border-radius);
    border: none;
    box-shadow: var(--mui-elevation-1);
    display: flex;
    gap: 16px 24px; /* Row gap, Column gap */
    align-items: baseline; /* Align items based on their text baseline */
    flex-wrap: wrap;
}

#filterControls h3 {
    margin: 0 0 8px 0; /* Reduced bottom margin */
    width: 100%;
    color: var(--mui-text-primary);
    font-weight: 500;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mui-divider);
    font-size: 1.1rem; /* Slightly smaller title */
}

#filterControls label {
    font-weight: 500; /* Medium weight for labels */
    margin-right: 8px;
    color: var(--mui-text-secondary);
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5; /* Ensure alignment with select */
    flex-shrink: 0; /* Prevent label from shrinking */
}

/* Material-Inspired Outlined Select */
#filterControls select {
    padding: 10px 14px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.23);
    background-color: transparent;
    min-width: 200px; /* Slightly wider */
    font-size: 1rem; /* 16px */
    color: var(--mui-text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Added box-shadow transition */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23000000' fill-opacity='0.54'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 36px;
    flex-grow: 1; /* Allow select to grow if space allows */
    max-width: 250px; /* Prevent excessive growth */
}

#filterControls select:hover {
     border-color: var(--mui-text-primary);
}

#filterControls select:focus {
    border-color: var(--mui-primary-main);
    outline: none;
    border-width: 2px;
    padding: 9px 13px; /* Adjust padding for thicker border */
    padding-right: 35px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%230288d1'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    /* Optional: Add subtle shadow like Material focus */
    box-shadow: 0 0 0 2px rgba(var(--mui-primary-main-rgb, 2, 136, 209), 0.2); /* Add focus ring */
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Ensure transition includes box-shadow */
}

/* Responsive Filters */
@media (max-width: 768px) {
    #filterControls {
        gap: 12px; /* Reduce gap */
        padding: 12px 16px; /* Reduce padding */
    }
    #filterControls label {
         margin-bottom: 4px; /* Add space below label when wrapped */
         width: 100%; /* Make label take full width */
         text-align: left;
    }
    #filterControls select {
        min-width: 100%; /* Make select take full width */
        max-width: none;
    }
}

/* === Schedule Title & Back Button Container === */
#scheduleHeaderContainer {
    position: relative;
    text-align: center;
    margin-top: 30px; /* Space above title */
    margin-bottom: 10px; /* Space below title */
}

/* Schedule Title (Now inserted into #scheduleHeaderContainer) */
.schedule-title {
    margin-bottom: 10px;
    font-size: 1.4em;
    font-weight: 500;
    color: var(--mui-text-primary); /* Use primary text */
    display: inline-block;
    padding: 0 50px; /* Add padding so button doesn't overlap */
}

/* Back Button (Base Styles) */
.back-button {
    position: absolute;
    left: 10px; /* Default left position */
    top: 50%;
    background: none;
    font-size: 1.5rem; /* Default size */
    color: var(--mui-primary-main); /* Use primary color */
    cursor: pointer;
    padding: 6px 10px; /* Adjust padding */
    line-height: 1;
    border-radius: 4px; /* Match other buttons */
    vertical-align: middle; /* Align with title text */
    transition: color 0.2s ease, background-color 0.2s ease;
}

.back-button:hover {
    color: var(--mui-primary-dark);
    background-color: rgba(2, 136, 209, 0.08);
}


/* === Schedule Table Styling (Grid & List) === */
/* Container for the schedule table/list */
#scheduleTableContainer {
    margin-top: 10px; /* Reduced top margin as title is separate */
    overflow-x: auto;
    padding: 2px; /* Add slight padding so shadow isn't clipped */
}

/* --- Grid View Specific --- */
table.schedule-grid {
    border-collapse: collapse; /* Needed for border-radius */
    border-spacing: 0;
    margin-top: 0; /* Title is handled separately */
    background-color: var(--mui-background-paper);
    box-shadow: var(--mui-elevation-4); /* Increase elevation for more shadow */
    table-layout: fixed;
    border-radius: var(--mui-border-radius);
    overflow: hidden; /* Clip content to rounded corners */
    border: none; /* Remove previous border */
    
}
table.schedule-grid:nth-child(6) .sticky {
  padding: 8px;
  background-color: #d0d0d0;
}

/* Фиксация первой ячейки каждой строки */
table.schedule-grid:nth-child(6) .week-day-column,table.schedule-grid:nth-child(6) .date {
  position: sticky;
  left: 0;
  z-index: 11; /* Чтобы она была поверх других */
}

/* Фиксация заголовков */
table.schedule-grid:nth-child(6) thead th {
  position: sticky;
  top: 0;
  z-index: 11; /* Заголовки поверх фиксированных ячеек */
  table.schedule-grid:nth-child(6)
}

/* Если нужно зафиксировать и заголовок первой колонки */
table.schedule-grid:nth-child(6) .week-day-column {
  z-index: 12;
}
table.schedule-grid:nth-child(6)
{
    margin-top: 3vw;
    overflow-x: auto;
}

.schedule-block .crudTable tr td {
        border: 1px solid #aaa;
        padding: 5px 10px;
    }
    .schedule-block .crudTable tr.border td {
        padding: 0;
    }

    .schedule-nav {
        font-size: 1.5em;
    color: #2c496c;
    text-align: center;
    }
/* Grid Header */
.schedule-grid th {
    background-color: var(--mui-background-paper); /* Use paper background */
    color: var(--mui-text-secondary); /* Secondary text */
    padding: 12px 16px; /* Adjust padding */
    text-align: center;
    font-weight: 500; /* Medium weight */
    border-bottom: 1px solid var(--mui-divider); /* Divider */
    font-size: 0.875rem; /* 14px */
    text-transform: capitalize;
    border-left: 1px solid var(--mui-divider); /* Divider */
    position: sticky;
    top: 0;
    z-index: 10;
}
.schedule-grid th:first-child {
    border-left: none;
}
/* Header Date */
.schedule-grid th .header-date {
    display: block;
    font-size: 0.75rem; /* 12px */
    font-weight: 400; /* Normal weight */
    color: var(--mui-text-disabled); /* Disabled text color */
    margin-top: 2px;
}


/* Grid Body Cells */
.schedule-grid td {
    border: none;
    padding: 8px 10px; /* Reduced padding */
    text-align: left;
    vertical-align: top;
    height: auto;
    min-height: 75px; /* Reduced minimum height */
    font-size: 0.8125rem; /* 13px - Smaller font */
    position: relative;
    border-bottom: 1px solid var(--mui-divider);
    border-left: 1px solid var(--mui-divider);
    line-height: 1.43; /* Material line height */
}
.schedule-grid tr td:first-child {
    border-left: none;
}
.schedule-grid tbody tr:last-child td {
    border-bottom: none;
}


/* Time Slot Column */
.schedule-grid td.time-slot {
    font-weight: 500;
    background-color: var(--mui-background-default); /* Use default background */
    text-align: center;
    vertical-align: middle;
    width: 100px; /* Reduced width */
    color: var(--mui-text-secondary);
    font-size: 0.75rem; /* 12px - Smaller font */
    border-right: 1px solid var(--mui-divider);
}

/* Zebra Striping for Rows */
/* Removing zebra striping */


/* Empty Cell */
.schedule-grid td.empty-cell {
    background-color: var(--mui-background-default);
    /* Attempt to make empty columns narrower - might not work perfectly with table-layout: fixed */
    /* width: 50px; */ /* Example: try setting a smaller width */
    /* padding: 4px; */ /* Reduce padding further */
}

/* Schedule Cell Content */
.schedule-cell {
    /* Remove hover lift effect */
    transition: background-color 0.2s ease, transform 0.15s ease-out; /* Add transform transition */
}
.schedule-cell:hover {
     /* background-color: rgba(0, 0, 0, 0.02); */ /* Very subtle hover */
     /* Let specialty color hover handle it */
}

.schedule-cell .subject {
    font-weight: 500; /* Medium weight */
    display: block;
    margin-bottom: 4px;
    color: var(--mui-text-primary);
    font-size: 0.875rem; /* 14px - Smaller font */
}

.schedule-cell .teacher,
.schedule-cell .location {
    display: block;
    font-size: 0.75rem; /* 12px - Smaller font */
    color: var(--mui-text-secondary);
    line-height: 1.4;
    margin-top: 4px;
}
/* Removed .groups style */
.schedule-cell .location {
    /* Keep secondary color or make slightly lighter if needed */
}

/* Responsive Schedule Grid */
@media (max-width: 768px) {
    /* Basic adjustments for smaller tablets - keep grid layout */
    /*.schedule-grid th, .schedule-grid td {
        padding: 8px 6px;
        font-size: 0.78rem;
        min-height: 70px;
        line-height: 1.35;
        word-break: break-word;
    }*/
    .schedule-grid td.time-slot {
        width: 70px;
        font-size: 0.7rem;
        padding: 6px 4px;
    }
     /*.schedule-grid th {
         padding: 10px 6px;
     }*/
    .schedule-cell .subject {
        font-size: 0.85rem;
    }
    .schedule-cell .teacher,
    .schedule-cell .location,
    .schedule-cell .notes {
        font-size: 0.75rem;
    }

    /* Adjust back button position/size on mobile */
    .back-button {
        font-size: 1.2em;
        padding: 6px 8px;
        left: 5px;
    }
     /* Add more padding to title container to avoid overlap */
     #scheduleHeaderContainer {
         padding-left: 50px;
         padding-right: 10px;
     }
     .schedule-title {
         padding: 0;
         font-size: 1.2em;
     }
}

/* NEW: Mobile-specific grid transformation (Day Cards) */
@media (max-width: 600px) {
    /* Hide the original table structure on mobile */
    /*.schedule-grid {
        display: none; 
    }*/
    /* Style the container for the day cards (which will be the scheduleTableContainer) */
    #scheduleTableContainer {
        /* Add any container-specific styles if needed */
    }
    /* Style for each day card */
    .mobile-day-card {
        background-color: var(--mui-background-paper);
        border-radius: var(--mui-border-radius);
        box-shadow: var(--mui-elevation-1);
        margin-bottom: 16px;
        padding: 12px 16px;
        border: 1px solid var(--mui-divider);
    }
    .mobile-day-card h5 { /* Day name header */
        margin: 0 0 10px 0;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--mui-divider);
        font-size: 1rem;
        font-weight: 500;
        color: var(--mui-text-primary);
    }
    .mobile-day-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .mobile-day-card li { /* Each pair item */
        padding: 8px 0;
        border-bottom: 1px solid var(--mui-divider);
        font-size: 0.875rem;
    }
     .mobile-day-card li:last-child {
         border-bottom: none;
     }
    .mobile-day-card .time-label {
        font-weight: 500;
        color: var(--mui-text-secondary);
        display: block;
        margin-bottom: 4px;
        font-size: 0.8rem;
    }
     .mobile-day-card .subject {
         font-weight: 500;
         color: var(--mui-text-primary);
         display: block; /* Ensure subject is on its own line */
         margin-bottom: 3px;
     }
     .mobile-day-card .details {
         font-size: 0.8rem;
         color: var(--mui-text-secondary);
         line-height: 1.4;
     }
     .mobile-day-card .details span { /* Teacher/Location */
         display: block; /* Stack details */
         margin-top: 2px;
     }
     .mobile-day-card .notes {
         font-size: 0.75rem;
         margin-top: 5px;
         color: var(--mui-text-secondary);
     }
     .mobile-day-card .notes a {
         color: var(--mui-primary-main);
     }
     .mobile-day-card .empty-pair {
         color: var(--mui-text-disabled);
         font-style: italic;
         font-size: 0.8rem;
     }
}

/* Error Message Styling */
p[style*="color: red"] {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 15px;
    border-radius: 6px;
    margin-top: 20px;
}

/* === View Controls (View Mode, Week Nav, Back Button) === */
/* Container for view controls */
#viewControlsContainer {
    /* Remove specific background/border, let parent handle */
    display: flex; /* Use flex for alignment */
    justify-content: center; /* Center items */
    align-items: center;
    gap: 24px; /* Space between view mode and nav */
    margin-bottom: 24px; /* Consistent spacing */
}

/* View Mode Radio Buttons - Basic styling */
#viewModeSelector label {
    margin-right: 8px;
    font-size: 0.875rem;
    color: var(--mui-text-secondary);
    cursor: pointer;
}
#viewModeSelector input[type="radio"] {
    margin-right: 4px;
    cursor: pointer;
    vertical-align: middle;
    /* True Material radio buttons require more complex HTML/CSS or JS */
}

/* Week Navigator */
#weekNavigator button {
    /* Inherit general button styles */
    background-color: var(--mui-background-paper); /* Use paper */
    color: var(--mui-primary-main); /* Primary text color */
    box-shadow: var(--mui-elevation-1);
    min-width: 100px; /* Give them some width */
    padding: 6px 12px; /* Slightly smaller padding */
    margin: 0 4px; /* Adjust margin */
}

#weekNavigator button:hover {
    background-color: rgba(2, 136, 209, 0.08); /* Primary color subtle hover */
    box-shadow: var(--mui-elevation-2);
}
/* Disabled state handled by general button:disabled */

/* === List View Styles === */
.daily-list {
    background-color: var(--mui-background-paper);
    padding: 16px 24px; /* Material padding */
    margin-bottom: 16px; /* Consistent spacing */
    border-radius: var(--mui-border-radius);
    box-shadow: var(--mui-elevation-1); /* Use elevation */
    border: none; /* Remove border */
}

.daily-list h4 {
    margin-top: 0;
    margin-bottom: 16px; /* Consistent spacing */
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mui-divider); /* Use divider */
    color: var(--mui-text-primary); /* Primary text */
    font-weight: 500;
    font-size: 1.1rem; /* Match other H4 */
}

.daily-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.daily-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--mui-divider); /* Use divider */
    line-height: 1.43; /* Material line height */
}
.daily-list li:last-child {
    border-bottom: none;
}

.daily-list li .time {
    display: block;
    font-size: 0.8125rem; /* 13px */
    color: var(--mui-text-secondary);
    margin-bottom: 4px;
    font-weight: 400; /* Normal weight */
}

.daily-list li .subject {
    font-weight: 500; /* Medium weight */
    color: var(--mui-text-primary);
    margin-right: 8px; /* More space */
}

/* Removed .groups style */

.daily-list li .details {
    font-size: 0.875rem; /* 14px */
    color: var(--mui-text-secondary);
    margin-top: 4px;
    display: inline; /* Keep details on same line if possible */
}

.daily-list li .teacher {
     /* No specific style needed unless different from details */
}

.daily-list li .location {
    /* Keep secondary color or make slightly lighter */
}

/* Responsive Schedule List */
@media (max-width: 600px) {
    .daily-list {
        padding: 12px 16px; /* Reduce padding */
    }
    .daily-list h4 {
        font-size: 1rem;
    }
    .daily-list li {
        padding: 10px 0;
    }
}

/* === Group Selection Area === */
/* Main container for all course columns */
#groupTilesContainer {
    display: flex;
    flex-wrap: nowrap; /* Prevent columns from wrapping */
    gap: 25px; /* Increased space between course columns */
    align-items: flex-start; /* Align columns at the top */
    justify-content: center; /* Center the columns horizontally */
    overflow-x: auto; /* Allow horizontal scrolling if needed */
    padding: 16px; /* Consistent padding */
    background-color: var(--mui-background-paper); /* Use paper background */
    border-radius: var(--mui-border-radius);
    margin-bottom: 24px; /* Consistent spacing */
    width: max-content;
}

/* Responsive adjustments for group container */
@media (max-width: 992px) { /* Tablet breakpoint */
    #groupTilesContainer {
        flex-wrap: wrap; /* Allow columns to wrap */
        justify-content: center; /* Align wrapped columns to the start */
        gap: 15px; /* Reduce gap */
    }
    .course-column {
        width: calc(50% - 10px); /* Two columns on tablets */
    }
}

@media (max-width: 600px) { /* Mobile breakpoint */
    #groupTilesContainer {
        padding: 10px;
        gap: 10px;
        justify-content: center; /* Center the single column */
    }
   .course-column {
        width: 100%; /* Full width (stacking) */
        padding: 0; /* Remove padding from column itself */
        border: none; /* Remove column border on mobile */
        background-color: transparent; /* Remove column background */
    }
    .course-group-header {
        font-size: 1rem;
        margin-bottom: 8px;
    }
    .tiles-container-course {
        gap: 6px; /* Reduce tile gap */
    }
    .group-tile {
        font-size: 0.875rem;
        padding: 8px 10px;
    }
}

/* Individual course column */
.course-column {
    flex: 0 0 auto; /* Prevent columns from growing/shrinking */
    width: fit-content; /* Adjust width as needed */
    /* Add some internal padding if desired */
     padding: 8px;
     background-color: #fdfdfd; /* Slightly off-white column background */
     border-radius: 4px;
     border: 1px solid var(--mui-divider);
}

/* Header within a course column */
/* Header within a course column */
.course-group-header {
     margin-top: 0;
     margin-bottom: 12px; /* More space below header */
     font-size: 1rem; /* Material Subtitle 2 */
     color: var(--mui-text-primary);
     text-align: center;
     border-bottom: 1px solid var(--mui-divider);
     padding-bottom: 8px;
     font-weight: 500;
}

/* Container for tiles within a course column */
.tiles-container-course {
    display: flex;
    flex-direction: column; /* Stack tiles vertically */
    gap: 10px; /* Spacing between tiles */
}

.group-tile {
    background-color: var(--mui-background-paper); /* Use paper for tiles */
    color: var(--mui-text-secondary); /* Secondary text color */
    padding: 8px 12px; /* Adjust padding */
    border-radius: 4px; /* Smaller radius */
    border: 1px solid transparent; /* Start with transparent border */
    cursor: pointer;
    box-shadow: none; /* Remove base shadow */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease-out; /* Smoothed transition */
    font-size: 0.875rem; /* 14px */
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    font-weight: 400; /* Normal weight */
}

.group-tile:hover {
    background-color: rgba(0, 0, 0, 0.03); /* Subtle background hover */
    border-color: transparent;
    transform: scale(1.03); /* Add subtle scale effect */
    box-shadow: var(--mui-elevation-1); /* Add slight shadow on hover */
}

.group-tile.selected {
    background-color: var(--mui-primary-light); /* Lighter primary for selected */
    color: var(--mui-primary-contrast-text) !important;
    border-color: transparent !important;
    font-weight: 500; /* Medium weight for selected */
    box-shadow: var(--mui-elevation-2); /* Increase elevation */
    transform: none; /* Ensure no scale when selected */
}
/* === Classroom Tile Styling === */
.classroom-tile {
    background-color: var(--mui-background-paper); /* Use paper background */
    color: var(--mui-text-primary);
    padding: 10px 15px;
    margin: 4px; /* Consistent margin */
    border-radius: var(--mui-border-radius);
    cursor: pointer;
    text-align: center;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--mui-elevation-1);
    display: inline-block; /* Or block depending on layout */
    min-width: 80px; /* Ensure minimum width */
    border: 1px solid var(--mui-divider); /* Subtle border */
}

.classroom-tile:hover {
    background-color: rgba(0, 0, 0, 0.04); /* Subtle hover */
    box-shadow: var(--mui-elevation-2);
}

.classroom-tile.selected {
    background-color: var(--mui-primary-light); /* Use primary light for selection */
    color: var(--mui-primary-contrast-text);
    box-shadow: var(--mui-elevation-4);
    border-color: var(--mui-primary-main);
}

/* Container for classroom tiles within a column */
.tiles-container-classroom {
    display: flex;
    flex-direction: column; /* Stack tiles vertically */
    gap: 5px; /* Space between tiles */
}

/* Classroom column styling */
.classroom-column {
    flex: 1; /* Allow columns to share space */
    min-width: 150px; /* Minimum width for a column */
    padding: 0 8px; /* Padding between columns */
    /* border: 1px solid #eee; */ /* Optional: for debugging layout */
}

/* Main container for all classroom columns */
#allClassroomsContainer {
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap */
    gap: 10px; /* Space between column wrappers */
    padding: 10px;
    background-color: var(--mui-background-paper); /* Match group container */
    border-radius: var(--mui-border-radius);
    box-shadow: var(--mui-elevation-1);
    margin-top: 20px;
}


/* === Teacher List Styles === */

#allTeachersContainer { /* Style the main container for teachers - NOW JUST A WRAPPER */
    /* display: flex; */ /* Moved to inner container */
    /* flex-wrap: wrap; */ /* Moved to inner container */
    /* gap: 25px; */ /* Moved to inner container */
    /* overflow-x: auto; */ /* Removed to allow proper wrapping */
    padding: 16px; /* Keep padding */
    background-color: var(--mui-background-paper); /* Keep background */
    border-radius: var(--mui-border-radius); /* Keep border-radius */
    box-shadow: var(--mui-elevation-1); /* Keep shadow */
    margin-bottom: 24px; /* Keep margin */
    /* justify-content: center; */ /* Moved to inner container */
    /* align-items: stretch; */   /* Removed for better wrapping */
}

/* NEW RULE: Apply flex layout to the inner container holding the columns */
#teacherTilesContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 25px; /* Use the gap here */
    justify-content: center; /* Center the columns */
    width: 100%; /* Ensure container spans full width for centering */
}


.teacher-column {
    flex: 0 0 auto; /* Match course-column: Prevent growing/shrinking */
    width: 240px; /* Match course-column: Fixed width */
    /* margin: 0 5px 15px 5px; */ /* Removed margin, rely on parent gap */
    padding: 8px; /* Match course-column */
    border: 1px solid var(--mui-divider); /* Keep divider border */
    border-radius: 4px; /* Match course-column */
    background-color: #fdfdfd; /* Match course-column */
    /* min-width: 180px; */ /* Replaced by fixed width */
    /* box-shadow: var(--mui-elevation-1); */ /* Removed shadow to match course-column */
    /* flex-basis: 200px; */ /* Replaced by flex shorthand */
    /* flex-shrink: 0; */ /* Handled by flex shorthand */
}

.teacher-group-header {
    text-align: center;
    margin-bottom: 10px;
    font-weight: 500;
    color: var(--mui-text-primary); /* Use primary text */
    padding-bottom: 5px;
    border-bottom: 1px solid var(--mui-divider); /* Use divider */
    font-size: 1rem; /* Match teacher hours header */
}

.tiles-container-letter {
    display: flex;
    flex-direction: column; /* Stack tiles vertically within the letter group */
}

.teacher-tile {
    background-color: #f8f9fa; /* Default light gray background */
    color: #495057; /* Darker text for contrast */
    padding: 8px 12px;
    margin-bottom: 6px; /* Space between teacher tiles */
    border-radius: 4px; /* Match other buttons/tiles */
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease-out; /* Added transform transition */
    text-align: center;
    font-size: 0.9em;
    border: 1px solid #dee2e6; /* Light border */
}

.teacher-tile:hover {
    background-color: #e9ecef; /* Slightly darker hover */
    box-shadow: var(--mui-elevation-1); /* Add slight shadow on hover */
    transform: scale(1.03); /* Add subtle scale effect */
}

.teacher-tile.selected {
    background-color: var(--mui-secondary-main); /* Use SECONDARY color for selected */
    color: var(--mui-secondary-contrast-text); /* Use secondary contrast text */
    border-color: var(--mui-secondary-dark); /* Darker secondary border for selected */
    font-weight: 500;
    box-shadow: var(--mui-elevation-4); /* More shadow when selected */
    transform: none; /* Ensure no scale when selected */
}

/* Responsive adjustments for teacher container */
@media (max-width: 992px) { /* Tablet breakpoint */
    #allTeachersContainer {
        justify-content: flex-start; /* Align wrapped columns to the start */
        gap: 15px; /* Reduce gap */
    }
    
    /* Container for all classroom columns */
    #allClassroomsContainer { /* Style the main container for classrooms - match group container */
        display: flex;
        flex-wrap: nowrap; /* Prevent columns from wrapping initially */
        gap: 25px; /* Space between columns */
        align-items: flex-start; /* Align columns at the top */
        justify-content: center; /* Center the columns horizontally */
        overflow-x: auto; /* Allow horizontal scrolling if needed */
        padding: 16px; /* Consistent padding */
        background-color: var(--mui-background-paper); /* Use paper background */
        border-radius: var(--mui-border-radius);
        box-shadow: var(--mui-elevation-1); /* Add elevation */
        margin-bottom: 24px; /* Consistent spacing */
    }
    
    /* Individual classroom column */
    .classroom-column {
        display: flex;
        flex-direction: column;
        margin: 0 5px 15px 5px; /* Spacing */
        padding: 10px;
        border: 1px solid var(--mui-divider); /* Use divider color */
        border-radius: var(--mui-border-radius);
        background-color: var(--mui-background-paper); /* Use paper background */
        min-width: 180px; /* Minimum width */
        box-shadow: var(--mui-elevation-1); /* Use elevation */
        /* flex-grow: 1; */ /* Remove grow */
        flex-basis: 200px; /* Base width before growing */
        flex-shrink: 0; /* Prevent columns from shrinking too much */
    }
    
    /* Container for tiles within a classroom column */
    .tiles-container-classroom {
        display: flex;
        flex-direction: column; /* Stack tiles vertically */
        gap: 10px; /* Spacing between tiles */
    }
    
    /* Individual classroom tile */
    .classroom-tile {
        background-color: #f8f9fa; /* Default light gray background */
        color: #495057; /* Darker text for contrast */
        padding: 8px 12px;
        margin-bottom: 6px; /* Space between teacher tiles */
        border-radius: 4px; /* Match other buttons/tiles */
        cursor: pointer;
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
        text-align: center;
        font-size: 0.9em;
        border: 1px solid #dee2e6; /* Light border */
    }
    
    .classroom-tile:hover {
        background-color: #e9ecef; /* Slightly darker hover */
        box-shadow: var(--mui-elevation-1); /* Add slight shadow on hover */
    }
    
    .classroom-tile.selected {
        background-color: var(--mui-secondary-main); /* Use secondary color for selected */
        color: var(--mui-secondary-contrast-text); /* Use contrast text */
        border-color: var(--mui-secondary-dark); /* Darker border for selected */
        font-weight: 500;
        box-shadow: var(--mui-elevation-2); /* Slightly more shadow when selected */
    }
    
    /* Responsive adjustments for classroom container */
    @media (max-width: 992px) { /* Tablet breakpoint */
        #allClassroomsContainer {
            flex-wrap: wrap; /* Allow columns to wrap on tablet */
            justify-content: flex-start; /* Align wrapped columns to the start */
            gap: 15px; /* Reduce gap */
        }
        .classroom-column {
             flex-basis: calc(33% - 15px); /* Aim for 3 columns */
             min-width: 160px;
        }
    }
    
    @media (max-width: 600px) { /* Mobile breakpoint */
         #allClassroomsContainer {
            gap: 10px;
         }
        .classroom-column {
             flex-basis: calc(50% - 10px); /* Aim for 2 columns */
             min-width: 140px;
        }
    }
    
    /* Container for tiles within a classroom column */
    .tiles-container-classroom {
        display: flex;
        flex-direction: column; /* Stack tiles vertically */
        gap: 10px; /* Spacing between tiles */
    }
    
    /* Individual classroom tile */
    .classroom-tile {
        background-color: #f8f9fa; /* Default light gray background */
        color: #495057; /* Darker text for contrast */
        padding: 8px 12px;
        margin-bottom: 6px; /* Space between teacher tiles */
        border-radius: 4px; /* Match other buttons/tiles */
        cursor: pointer;
        transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease-out; /* Added transform transition */
        text-align: center;
        font-size: 0.9em;
        border: 1px solid #dee2e6; /* Light border */
    }
    
    .classroom-tile:hover {
        background-color: #e9ecef; /* Slightly darker hover */
        box-shadow: var(--mui-elevation-1); /* Add slight shadow on hover */
        transform: scale(1.03); /* Add subtle scale effect */
    }
    
    .classroom-tile.selected {
        background-color: var(--mui-secondary-main); /* Use secondary color for selected */
        color: var(--mui-secondary-contrast-text); /* Use contrast text */
        border-color: var(--mui-secondary-dark); /* Darker border for selected */
        font-weight: 500;
        box-shadow: var(--mui-elevation-4); /* More shadow when selected */
        transform: none; /* Ensure no scale when selected */
    }
    
    /* Responsive adjustments for classroom container */
    @media (max-width: 992px) { /* Tablet breakpoint */
        #allClassroomsContainer {
            justify-content: flex-start; /* Align wrapped columns to the start */
            gap: 15px; /* Reduce gap */
        }
        .classroom-column {
             flex-basis: calc(33% - 15px); /* Aim for 3 columns */
             min-width: 160px;
        }
    }
    
    @media (max-width: 600px) { /* Mobile breakpoint */
         #allClassroomsContainer {
            gap: 10px;
         }
        .classroom-column {
             flex-basis: calc(50% - 10px); /* Aim for 2 columns */
             min-width: 140px;
        }
    }
    
    /* === Classroom List Styles === */
    /* Reuse teacher column styles for layout if desired, or create specific ones */
    /* #allClassroomsContainer can reuse #allTeachersContainer styles */
    
    .classroom-tile {
        background-color: #f8f9fa; /* Default light gray background */
        color: #495057; /* Darker text for contrast */
        padding: 8px 12px;
        margin-bottom: 6px; /* Space between tiles */
        border-radius: 4px; /* Match other buttons/tiles */
        cursor: pointer;
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
        text-align: center;
        font-size: 0.9em;
        border: 1px solid #dee2e6; /* Light border */
    }
    
    .classroom-tile:hover {
        background-color: #e9ecef; /* Slightly darker hover */
        box-shadow: var(--mui-elevation-1); /* Add slight shadow on hover */
    }
    
    .classroom-tile.selected {
        background-color: var(--mui-secondary-main); /* Use secondary color for selected */
        color: var(--mui-secondary-contrast-text); /* Use contrast text */
        border-color: var(--mui-secondary-dark); /* Darker border for selected */
        font-weight: 500;
        box-shadow: var(--mui-elevation-2); /* Slightly more shadow when selected */
    }
    .teacher-column {
         flex-basis: calc(33% - 15px); /* Aim for 3 columns */
         min-width: 160px;
    }
}

@media (max-width: 600px) { /* Mobile breakpoint */
     #allTeachersContainer {
        gap: 10px;
     }
    .teacher-column {
         flex-basis: calc(50% - 10px); /* Aim for 2 columns */
         min-width: 140px;
    }
}

/* Specialty Color Classes - Using subtle background and text color */
/* Define HSL colors for easier variations */
/* Diversified Specialty Colors */
.group-tile.specialty-is { background-color: hsl(195, 65%, 90%); color: hsl(195, 45%, 30%); } 
.group-tile.specialty-dd { background-color: hsl(105, 55%, 91%); color: hsl(105, 35%, 35%); } 
.group-tile.specialty-pks { background-color: hsl(340, 75%, 93%); color: hsl(340, 50%, 40%); } 
.group-tile.specialty-t { background-color: hsl(50, 95%, 90%); color: hsl(50, 65%, 35%); } 
.group-tile.specialty-e { background-color: hsl(210, 15%, 94%); color: hsl(210, 10%, 40%); } 
.group-tile.specialty-db { background-color: hsl(30, 90%, 91%); color: hsl(30, 60%, 40%); } 
.group-tile.specialty-dgd,.group-tile.specialty-dgdi { background-color: hsl(275, 60%, 92%); color: hsl(275, 35%, 45%); } 
.group-tile.specialty-dis { background-color: hsl(170, 65%, 90%); color: hsl(170, 45%, 35%); } 
.group-tile.specialty-dk { background-color: hsl(350, 80%, 94%); color: hsl(350, 55%, 45%); } 
.group-tile.specialty-dng { background-color: hsl(230, 60%, 93%); color: hsl(230, 35%, 45%); } 
.group-tile.specialty-dp { background-color: hsl(130, 60%, 92%); color: hsl(130, 35%, 38%); } 
.group-tile.specialty-dpo { background-color: hsl(20, 65%, 93%); color: hsl(20, 35%, 45%); } 
.group-tile.specialty-dr { background-color: hsl(165, 60%, 91%); color: hsl(165, 40%, 35%); } 
.group-tile.specialty-dpk { background-color: hsl(293.75deg 60% 91%); color: hsl(293.75deg, 40%, 35%); } 
.group-tile.specialty-de {background-color: hsl(80.48deg 60% 92%);color: hsl(80.48deg, 35%, 38%);}

.group-tile.specialty-dl { background-color: hsl(200, 60%, 93%); color: hsl(200, 35%, 45%); } 
.group-tile.specialty-dpso { background-color: hsl(290, 60%, 92%); color: hsl(290, 35%, 38%); } 
.group-tile.specialty-ddo { background-color: hsl(10, 60%, 93%); color: hsl(10, 35%, 45%); }
.group-tile.specialty-ea { background-color: hsl(70, 60%, 92%); color: hsl(70, 35%, 38%); } 
.group-tile.specialty-jua,.group-tile.specialty-dju { background-color: hsl(70, 60%, 92%); color: hsl(70, 35%, 38%); } 
.group-tile.specialty-dt { background-color: hsl(45, 60%, 92%); color: hsl(45, 35%, 38%); } 
.group-tile.specialty-dtigs { background-color: hsl(300, 65%, 90%); color: hsl(300, 45%, 30%); }
.group-tile.specialty-dsp { background-color: hsl(65, 90%, 91%); color: hsl(65, 60%, 40%); }
.group-tile.specialty-dpb { background-color: hsl(94, 95%, 90%); color: hsl(94, 65%, 35%); }
.group-tile.specialty-dtd { background-color: hsl(400, 15%, 94%); color: hsl(400, 10%, 40%); }
.group-tile.specialty-dgs { background-color: hsl(100, 60%, 92%); color: hsl(100, 35%, 45%); }
.group-tile.specialty-dse { background-color: hsl(5, 65%, 90%); color: hsl(5, 45%, 35%); }
.group-tile.specialty-dsk { background-color: hsl(500, 60%, 93%); color: hsl(500, 35%, 45%); }

/* Add more rules for other specialties */

/* Override hover for specialty tiles */
.group-tile[class*="specialty-"]:hover {
     filter: brightness(96%); /* Slightly darken on hover */
}

/* Selected style overrides specialty colors */
.group-tile.selected,
.group-tile.selected:hover {
    background-color: var(--mui-primary-main) !important; /* Use main primary, ensure override */
    color: var(--mui-primary-contrast-text) !important;
    border-color: transparent !important;
    box-shadow: var(--mui-elevation-2) !important; /* Slightly more elevation when selected */
    filter: none !important; /* Remove brightness filter */
    transform: none !important; /* Ensure no transform when selected */
}

/* === Course Selector Styles (Removed from use) === */
/* #courseSelectorContainer { ... } */
/* .course-button { ... } */

/* === Grid Header Date Styling === */
.schedule-grid th .header-date {
    display: block;
    font-size: 0.85em; /* Slightly larger date */
    font-weight: 400;
    color: #a0aec0; /* Lighter date color */
    margin-top: 3px;
}

/* === Subject Color Coding === */
/* Define a palette of background colors. Add more if needed. */
/* Using HSL colors for easier generation/variation if needed */
/* New Palette: Lighter backgrounds, distinct left border */
.subject-color-1  { background-color: #e6fffa; border-left: 4px solid #38b2ac; } /* Teal */
.subject-color-2  { background-color: #ebf4ff; border-left: 4px solid #4299e1; } /* Blue */
.subject-color-3  { background-color: #faf5ff; border-left: 4px solid #9f7aea; } /* Purple */
.subject-color-4  { background-color: #fff5f7; border-left: 4px solid #ed64a6; } /* Pink */
.subject-color-5  { background-color: #fffff0; border-left: 4px solid #ecc94b; } /* Yellow */
.subject-color-6  { background-color: #f0fff4; border-left: 4px solid #48bb78; } /* Green */
.subject-color-7  { background-color: #fff8f0; border-left: 4px solid #ed8936; } /* Orange */
.subject-color-8  { background-color: #feebc8; border-left: 4px solid #dd6b20; } /* Darker Orange */
.subject-color-9  { background-color: #ebf8ff; border-left: 4px solid #3182ce; } /* Darker Blue */
.subject-color-10 { background-color: #f6fef9; border-left: 4px solid #38a169; } /* Darker Green */
.subject-color-11 { background-color: #faf5ff; border-left: 4px solid #805ad5; } /* Darker Purple */
.subject-color-12 { background-color: #fff5f7; border-left: 4px solid #d53f8c; } /* Darker Pink */

/* Ensure text contrast on colored backgrounds */
.schedule-cell[class*="subject-color-"] .subject { color: #1a202c; }
.schedule-cell[class*="subject-color-"] .teacher,
.schedule-cell[class*="subject-color-"] .location,
.schedule-cell[class*="subject-color-"] .groups,
.schedule-cell[class*="subject-color-"] .notes { color: #2d3748; }
.schedule-cell[class*="subject-color-"] .notes a { color: #2b6cb0; }

/* Adjust hover for colored cells */
/* Adjust hover for colored cells - use !important carefully if needed */
/* Adjust hover for colored cells */
/* Adjust hover for colored cells */
.schedule-cell[class*="subject-color-"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--mui-elevation-2); /* Add a subtle shadow */
    filter: brightness(105%);
}

/* === Notes Styling === */
.schedule-cell .notes,
.daily-list li .notes {
    display: block;
    font-size: 0.85em; /* Slightly smaller */
    color: var(--mui-text-secondary); /* Use variable */
    margin-top: 4px;
    line-height: 1.4;
    word-break: break-word;
}

.schedule-cell .notes a,
.daily-list li .notes a {
    color: var(--mui-primary-main); /* Use variable */
    text-decoration: none;
    border-bottom: 1px dotted var(--mui-primary-main); /* Use variable */
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}
.schedule-cell .notes a:hover,
.daily-list li .notes a:hover {
    color: var(--mui-primary-dark); /* Use variable */
    border-bottom-style: solid;
}

.daily-list li .notes {
     margin-top: 6px;
}

/* Back Button (Base Styles) */
.back-button {
    position: absolute;
    left: 10px; /* Default left position */
    top: 50%;

/* Removed rule that was hiding viewControlsContainer */
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.5rem; /* Default size */
    color: var(--mui-primary-main); /* Use primary color */
    cursor: pointer;
    padding: 6px 10px; /* Adjust padding */
    line-height: 1;
    border-radius: 4px; /* Match other buttons */
    vertical-align: middle; /* Align with title text */
    transition: color 0.2s ease, background-color 0.2s ease;
}

.back-button:hover {
    color: var(--mui-primary-dark);
    background-color: rgba(2, 136, 209, 0.08);
}
/* --- Search Input Styling --- */
.search-input {
    display: block; /* Make it take full width */
    width: 95%; /* Adjust width as needed */
    max-width: 555px;
    padding: 10px 14px; /* Match filter select padding */
    margin: 15px auto 15px auto; /* Center it and add spacing */
    border: 1px solid rgba(0, 0, 0, 0.23); /* Match filter select border */
    border-radius: 4px; /* Match filter select radius */
    font-size: 1rem; /* Match filter select font size */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    background-color: var(--mui-background-paper); /* Use paper background */
    color: var(--mui-text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:hover {
     border-color: var(--mui-text-primary);
}

.search-input:focus {
    border-color: var(--mui-primary-main);
    outline: none;
    border-width: 2px;
    padding: 9px 13px; /* Adjust padding for thicker border */
    /* Optional: Add subtle shadow like Material focus */
    /* box-shadow: 0 0 0 1px var(--mui-primary-main); */
}


/* Optional: Adjust tile container margin if search input adds too much space */
#allGroupsContainer .tiles-container,
#allTeachersContainer #teacherTilesContainer, /* Target inner tile container */
#allClassroomsContainer #classroomTilesContainer { /* Target inner tile container */
    margin-top: 0; /* Reduce top margin if search input is present */
}

/* === Animations === */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply fade-in animation to main content blocks */
/* Note: These might need JS coordination for dynamic content loading */
#groupTilesContainer,
#allTeachersContainer,
#allClassroomsContainer,
#scheduleTableContainer,
.daily-list, /* Apply to each list item container */
.mobile-day-card { /* Apply to each mobile card */
    animation: fadeInUp 0.4s ease-out forwards;
    /* Start hidden if JS isn't handling initial state */
    /* opacity: 0; */
}

/* Stagger list/card animations if possible with JS, otherwise apply to container */
/* Example for list view items (if JS adds class dynamically) */
/*
.daily-list.animate-in {
    animation: fadeInUp 0.4s ease-out forwards;
}
*/