:root {
    --primary-color: #53247F;
    --secondary-color: #9B7BB7;
    --shadow: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-hover: 0 4px 8px rgba(0,0,0,0.15);
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f5f5f5;
}

/* === MODIFIED: Header styles for accessibility and new logo === */
.header {
    background: var(--primary-color);
    box-shadow: var(--shadow);
    padding: 0;
    margin-bottom: 2rem;
}

.logo-img {
    max-height: 70px;
    height: auto;
    width: auto;
}

.navbar-brand {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar .nav-link {
    font-weight: 500;
    color: #fff;
    /* Added for accessibility */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.dropdown-menu {
    border-radius: 8px;
    box-shadow: var(--shadow-hover);
}
/* === END MODIFICATION === */


.footer {
    background: #000;
    color: white;
    padding: 2rem 2rem 2rem 2rem;
    margin-top: 3rem;
}

.footer a {
    color: var(--secondary-color);
    text-decoration: none;
}

.footer a:hover {
    color: white;
    text-decoration: underline;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    display: inline-block;
    margin-right: 1.5rem;
    margin-bottom: 0.5rem;
}

.card {
    border: none;
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: var(--shadow-hover);
}

.card-header {
    background-color: var(--primary-color);
    color: white;
    border-radius: 8px 8px 0 0 !important;
    padding: 1rem 1.5rem;
    font-weight: 500;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 0.5rem 1.5rem;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: #421d66;
    border-color: #421d66;
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.form-control, .form-select {
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 0.6rem 0.75rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(83, 36, 127, 0.25);
}

.form-label {
    font-weight: 500;
    color: #555;
    margin-bottom: 0.5rem;
}

div.dataTables_wrapper div.dataTables_filter label {
    text-align: right !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 0% !important;
    padding: 0.0em 0.0em !important;
}

table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
}

/* Modified sticky header */
.sticky-header thead {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sticky-header th {
    background-color: var(--primary-color) !important;
    color: white !important;
    font-weight: 500;
    border-bottom: 2px solid #dee2e6;
}

/* Table row styles with custom campus colors */
.campus-ce {
    border-left: 4px solid var(--primary-color);
}

.table-hover tbody tr:hover {
    background-color: rgba(83, 36, 127, 0.08);
    box-shadow: inset 3px 0 0 var(--primary-color);
    cursor: pointer;
}

/* === Expand/collapse affordance ===========================================
   Every parent row opens a child row with the full class details. The control
   column carries a chevron chip that fills in on hover and flips once the row
   is open, so the row reads as something to select rather than as static text.
   The chip is drawn with a Material Icons ligature because the cell itself is
   rendered empty by DataTables. */
.manual-control {
    position: relative;
    cursor: pointer;
    text-align: center;
    width: 3rem;
    color: var(--primary-color);
}

/* The circle. Drawn in plain CSS rather than with an icon font so the control is
   never briefly rendered as its own ligature text while a webfont loads. */
.manual-control:before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    background-color: #fff;
    vertical-align: middle;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* The chevron sitting inside it, pointing down when closed and up when open. */
.manual-control:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    transform: translate(-50%, -70%) rotate(45deg);
    transition: transform 0.2s ease, border-color 0.2s ease;
    pointer-events: none;
}

table.dataTable tbody tr:hover td.manual-control:before,
td.manual-control:focus-visible:before,
tr.shown .manual-control:before {
    background-color: var(--primary-color);
}

table.dataTable tbody tr:hover td.manual-control:after,
td.manual-control:focus-visible:after,
tr.shown .manual-control:after {
    border-color: #fff;
}

tr.shown .manual-control:after {
    transform: translate(-50%, -30%) rotate(-135deg);
}

/* The control cell carries tabindex="0", so give it a visible focus ring. */
td.manual-control:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

/* Standing hint above the results table. */
.row-expand-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    color: #55606a;
    font-size: 0.9rem;
}

.row-expand-hint .material-icons {
    font-size: 1.15em;
    color: var(--primary-color);
}

/* Active filter badges */
.filter-badge {
    background-color: var(--primary-color);
    color: white;
    border-radius: 12px;
    padding: 0.25rem 0.75rem;
    margin: 0.25rem;
    display: inline-block;
    font-size: 0.875rem;
}

/* Enrollment status badges */
.badge-open {
    background-color: #28a745;
    color: white;
}

.badge-closed {
    background-color: #dc3545;
    color: white;
}

.badge-waitlist {
    background-color: #ffc107;
    color: #000;
}

.badge-full {
    background-color: #fd7e14;
    color: white;
}

/* Material Icons styling */
.material-icons {
    vertical-align: middle;
    font-size: 1.2em;
}

/* Search section styling */
.search-section {
    background-color: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}

/* Filter section */
.filters-section {
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-top: 1rem;
}

.filters-inner {
    padding: 1.5rem;
}

/* The Web Awesome date and time filters fill the width of their grid column */
wa-date-input,
wa-time-input {
    width: 100%;
}

/* Fallback for kits without <wa-date-input>: a pair of native date inputs standing in
   for the range field, side by side on desktop and stacked once space runs out. */
.date-range-fallback-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.date-range-fallback-fields input {
    flex: 1 1 8rem;
    min-width: 0;
}

/* Child row expanded content */
.child-row {
    background-color: #f8f9fa;
    padding: 1.5rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    padding: 0.5rem 0;
}

.info-label {
    font-weight: 600;
    min-width: 150px;
    color: #555;
}

.info-value {
    color: #333;
}

/* Class number button styling */
.btn-class-nbr {
    background-color: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-class-nbr:hover {
    background-color: var(--primary-color);
    color: white;
}

.btn-class-nbr.enroll-btn {
    background-color: var(--primary-color);
    color: white;
}

.btn-class-nbr.enroll-btn:hover {
    background-color: #421d66;
}

.btn-class-nbr.waitlist-btn {
    background-color: #ffc107;
    color: #000;
    border-color: #ffc107;
}

.btn-class-nbr.waitlist-btn:hover {
    background-color: #e0a800;
    border-color: #e0a800;
}

/* Help drawer */
.slide-drawer {
    position: fixed;
    right: -400px;
    top: 0;
    width: 400px;
    height: 100vh;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    transition: right 0.3s ease;
    z-index: 1050;
    overflow-y: auto;
}

.slide-drawer.open {
    right: 0;
}

.slide-drawer-header {
    background-color: var(--primary-color);
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slide-drawer-body {
    padding: 1.5rem;
}

.slide-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    z-index: 1040;
    display: none;
}

.slide-drawer-backdrop.open {
    display: block;
}

#floating-help-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--primary-color);
    border: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1030;
    transition: all 0.3s;
}

#floating-help-btn:hover {
    background-color: #421d66;
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    transform: scale(1.1);
}

/* Timer/refresh status */
.bg-timer {
    background: linear-gradient(135deg, rgba(83, 36, 127, 0.05) 0%, rgba(155, 123, 183, 0.05) 100%);
}

/* Meeting separator styling */
.meeting-separator {
    border: none;
    border-top: 1px solid #dee2e6;
    margin: 0.5rem 0;
}

/* Make meeting patterns more distinct on mobile */
@media (max-width: 768px) {
    .meeting-separator {
        border-top: 2px dashed var(--primary-color);
        margin: 1rem 0;
        opacity: 0.6;
    }
}

/* Navbar collapse for mobile */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: var(--primary-color);
        padding: 1rem;
        border-top: 1px solid rgba(255,255,255,0.2);
        margin-top: 0.5rem;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Mobile-specific adjustments */
    #floating-help-btn {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
    }
    #floating-help-btn .material-icons {
        font-size: 1.5rem;
    }
    .search-section {
        padding: 1rem;
    }
    .search-section h4 {
        font-size: 1.2rem;
    }
    .form-label {
        font-size: 0.9rem;
    }
    .form-control, .form-select, .btn {
        font-size: 0.9rem;
    }
    .header {
        margin-bottom: 1rem;
    }
    .card-header {
        font-size: 0.9rem;
    }
    table.dataTable {
        font-size: 0.85rem;
    }

    /* Make collapsible filter header more obvious on mobile */
    .collapsible-filter-header {
        background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
        padding: 0.75rem 1rem !important;
        border-radius: 8px;
        margin-bottom: 1rem;
        cursor: pointer;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border: none !important;
    }

    .collapsible-filter-header:hover {
        background: linear-gradient(135deg, #dee2e6 0%, #ced4da 100%);
        box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    }

    .collapsible-filter-header::before {
        content: "👇 Tap to expand filters";
        display: block;
        font-size: 0.7em;
        color: #6c757d;
        font-weight: normal;
        margin-bottom: 0.25rem;
        letter-spacing: 0.5px;
    }

    .collapsible-filter-header[aria-expanded="true"]::before {
        content: "👆 Tap to collapse filters";
    }

    .slide-drawer {
        width: 100%;
        right: -100%;
    }

    .th-desktop {
        display: none !important;
    }

    /* Hide the manual expand/collapse control on mobile */
    table.dataTable td.manual-control {
        display: none !important;
    }

    table.dataTable th.manual-control {
        display: none !important;
    }

    /* Make the entire row look more clickable with better visual styling */
    table.dataTable tbody tr,
    table.dataTable tbody tr:nth-child(odd),
    table.dataTable tbody tr:nth-child(even),
    table.dataTable tbody tr.odd,
    table.dataTable tbody tr.even,
    table.dataTable.stripe tbody tr.odd,
    table.dataTable.stripe tbody tr.even,
    table.dataTable.display tbody tr.odd,
    table.dataTable.display tbody tr.even {
        cursor: pointer;
        border: 2px solid #dee2e6;
        border-radius: 8px;
        margin-bottom: 0.5rem;
        display: block;
        padding: 0.75rem;
        background-color: white !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    table.dataTable tbody tr:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        border-color: var(--primary-color);
    }

    /* Style table headers for mobile */
    table.dataTable thead {
        display: none; /* Hide headers on mobile for cleaner look */
    }

    /* Display table cells as blocks on mobile */
    table.dataTable tbody td {
        display: block;
        text-align: center; /* Center all text on mobile */
        padding: 0.5rem 0;
        border: none;
        background-color: transparent !important; /* Fix banded row issue */
    }

    /* Only show Class #, Course & Title, Location, Days, Start Time, End Time, Instructor, and Dates on mobile */
    table.dataTable tbody td:nth-child(2), /* Class # */
    table.dataTable tbody td:nth-child(3), /* Course & Title */
    table.dataTable tbody td:nth-child(5), /* Location */
    table.dataTable tbody td:nth-child(6), /* Days */
    table.dataTable tbody td:nth-child(7), /* Start Time */
    table.dataTable tbody td:nth-child(8), /* End Time */
    table.dataTable tbody td:nth-child(9), /* Instructor */
    table.dataTable tbody td:nth-child(10) /* Dates */
    {
        display: block !important;
    }

    /* Hide all other columns on mobile */
    table.dataTable tbody td:nth-child(4),  /* Status */
    table.dataTable tbody td:nth-child(11), /* Session */
    table.dataTable tbody td:nth-child(12)  /* Hidden column */
    {
        display: none !important;
    }

    /* Style Class # to look like a prominent button on mobile - CE Purple */
    table.dataTable tbody td:nth-child(2) {
        font-size: 1.1em;
        font-weight: 700;
        padding: 0.75rem;
        margin: -0.75rem -0.75rem 0.5rem -0.75rem;
        background: linear-gradient(135deg, #53247F 0%, #421d66 100%);
        color: white;
        text-align: center;
        border-radius: 6px 6px 0 0;
        position: relative;
        box-shadow: 0 2px 4px rgba(83, 36, 127, 0.3);
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }

    table.dataTable tbody td:nth-child(2)::before {
        content: "📱 TAP FOR DETAILS • Class #";
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.7em;
        font-weight: 400;
        opacity: 0.95;
        letter-spacing: 0.5px;
    }

    /* Make the Class Nbr button full width on mobile */
    table.dataTable tbody td:nth-child(2) .btn-class-nbr {
        width: 100%;
        justify-content: center;
        border-radius: 0;
        padding: 0.75rem;
        font-size: 1.1em;
        background: transparent;
        box-shadow: none;
        text-shadow: inherit;
    }

    table.dataTable tbody td:nth-child(2) .btn-class-nbr:hover {
        background: transparent;
        transform: none;
    }

    /* CE campus-specific colors for mobile header */
    table.dataTable tbody tr.campus-ce td:nth-child(2) {
        background: linear-gradient(135deg, #53247F 0%, #421d66 100%);
        box-shadow: 0 2px 4px rgba(83, 36, 127, 0.3);
    }

    /* Style Course & Title prominently */
    table.dataTable tbody td:nth-child(3) {
        font-size: 1.05em;
        font-weight: 500;
        padding: 0.5rem 0;
        border-bottom: 1px solid #eee;
        margin-bottom: 0.5rem;
    }

    /* Each row carries its own tap instruction on mobile, so the standing hint
       above the table would just repeat it. */
    .row-expand-hint {
        display: none;
    }

    /* Add tap instruction at the bottom of mobile rows */
    table.dataTable tbody tr::after {
        content: "Tap anywhere to view full details";
        display: block;
        text-align: center;
        font-size: 1em;
        color: #000;
        font-style: normal;
        padding-top: 0.5rem;
        margin-top: 0.5rem;
        border-top: 1px dashed #ddd;
    }

    table.dataTable tbody tr.shown::after {
        content: "Tap to collapse details";
    }

    /* Hide tap instruction for linked class nested rows on mobile */
    table.dataTable tbody tr.linked-class-row::after {
        display: none !important;
    }

    /* Style linked class nested row on mobile */
    tr.linked-class-row td {
        padding: 0.75rem 1rem !important;
        font-size: 0.95em !important;
        text-align: left !important;
    }

    /* Style Location (class type, campus badge and room) */
    table.dataTable tbody td:nth-child(5) {
        font-size: 0.95em;
        color: #555;
        padding: 0.25rem 0 0.5rem 0;
        display: block !important;
    }

    table.dataTable tbody td:nth-child(5)::before {
        content: "📍 Location";
        display: block;
        font-size: 0.85em;
        color: #666;
        margin-bottom: 0.25rem;
    }

    /* Style Meeting Info (Days, Times, Instructor, Dates) */
    table.dataTable tbody td:nth-child(6),  /* Days */
    table.dataTable tbody td:nth-child(7),  /* Start Time */
    table.dataTable tbody td:nth-child(8),  /* End Time */
    table.dataTable tbody td:nth-child(9),  /* Instructor */
    table.dataTable tbody td:nth-child(10)  /* Dates */
    {
        font-size: 0.95em;
        color: #555;
        padding: 0.25rem 0;
        display: block !important;
    }

    table.dataTable tbody td:nth-child(6)::before {
        content: "📅 Days: ";
        margin-right: 0.25rem;
    }

    table.dataTable tbody td:nth-child(7)::before {
        content: "🕐 Start: ";
        margin-right: 0.25rem;
    }

    table.dataTable tbody td:nth-child(8)::before {
        content: "🕐 End: ";
        margin-right: 0.25rem;
    }

    table.dataTable tbody td:nth-child(9)::before {
        content: "👤 ";
        margin-right: 0.25rem;
    }

    table.dataTable tbody td:nth-child(10)::before {
        content: "📆 Dates: ";
        margin-right: 0.25rem;
    }

    /* Child row styling for mobile */
    table.dataTable tbody tr.child {
        display: block !important;
        padding: 1rem;
        background-color: #f8f9fa;
        border: 2px solid #dee2e6;
        border-radius: 8px;
        margin-top: 0.5rem;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    }

    table.dataTable tbody tr.child td {
        display: block !important;
        padding: 0 !important;
    }

    table.dataTable tbody tr.child ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Dark mode mobile adjustments */
    body.dark-mode table.dataTable tbody tr,
    body.dark-mode table.dataTable tbody tr:nth-child(odd),
    body.dark-mode table.dataTable tbody tr:nth-child(even) {
        background-color: #2d2d2d !important;
        border-color: #444;
    }

    body.dark-mode table.dataTable tbody tr.child {
        background-color: #1a1a1a;
        border-color: #444;
    }

    body.dark-mode table.dataTable tbody td:nth-child(5) {
        color: #bbb;
    }

    body.dark-mode table.dataTable tbody td:nth-child(5)::before {
        color: #999;
    }
}

@media (max-width: 992px) {
    .th-none {
        display: none !important;
    }
}

/* DataTables responsive plugin styles */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    background-color: var(--primary-color);
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
    background-color: #dc3545;
}

/* Web Awesome component overrides */
wa-button[variant="brand"]::part(base) {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

wa-button[variant="brand"]:hover::part(base) {
    background-color: #421d66;
    border-color: #421d66;
}

wa-button[variant="accent"]::part(base) {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* Choices.js customization */
.choices__inner {
    border-radius: 4px;
    border: 1px solid #ddd;
    min-height: 42px;
}

.choices__list--multiple .choices__item {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: rgba(83, 36, 127, 0.1);
}

/* Dark mode support */
body.dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

body.dark-mode .card {
    background-color: #2a2a2a;
    color: #e0e0e0;
}

body.dark-mode .search-section {
    background-color: #2a2a2a;
}

body.dark-mode .filters-section {
    background-color: #333;
}

body.dark-mode .child-row {
    background-color: #333;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #333;
    color: #e0e0e0;
    border-color: #555;
}

body.dark-mode .table {
    color: #e0e0e0;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Expand/collapse chip needs the dark surface, not white, behind the chevron. */
body.dark-mode .manual-control:before {
    background-color: #2a2a2a;
    border-color: var(--secondary-color);
}

body.dark-mode .manual-control:after {
    border-color: var(--secondary-color);
}

body.dark-mode table.dataTable tbody tr:hover td.manual-control:before,
body.dark-mode td.manual-control:focus-visible:before,
body.dark-mode tr.shown .manual-control:before {
    background-color: var(--secondary-color);
}

body.dark-mode table.dataTable tbody tr:hover td.manual-control:after,
body.dark-mode td.manual-control:focus-visible:after,
body.dark-mode tr.shown .manual-control:after {
    border-color: #1a1a1a;
}

body.dark-mode .row-expand-hint {
    color: #c0c0c0;
}

body.dark-mode .row-expand-hint .material-icons {
    color: var(--secondary-color);
}

/* High contrast mode */
body.high-contrast {
    background-color: #000;
    color: #fff;
}

body.high-contrast .card {
    background-color: #000;
    border: 2px solid #fff;
    color: #fff;
}

body.high-contrast .btn-primary {
    background-color: #fff;
    color: #000;
    border: 2px solid #fff;
}

/* Expand/collapse chip in high contrast: yellow on black, inverted when open. */
body.high-contrast .manual-control:before {
    background-color: #000;
    border-color: #ff0;
}

body.high-contrast .manual-control:after {
    border-color: #ff0;
}

body.high-contrast table.dataTable tbody tr:hover td.manual-control:before,
body.high-contrast td.manual-control:focus-visible:before,
body.high-contrast tr.shown .manual-control:before {
    background-color: #ff0;
}

body.high-contrast table.dataTable tbody tr:hover td.manual-control:after,
body.high-contrast td.manual-control:focus-visible:after,
body.high-contrast tr.shown .manual-control:after {
    border-color: #000;
}

body.high-contrast .row-expand-hint {
    color: #fff;
}

body.high-contrast .row-expand-hint .material-icons {
    color: #ff0;
}

body.high-contrast .form-control,
body.high-contrast .form-select {
    background-color: #000;
    color: #fff;
    border: 2px solid #fff;
}

/* Print styles */
@media print {
    .header,
    .footer,
    #floating-help-btn,
    .slide-drawer,
    .btn,
    .filters-section {
        display: none !important;
    }

    .table {
        font-size: 10pt;
    }

    body {
        background-color: white;
    }
}

/* Additional CE-specific styles */
.ce-program-badge {
    background-color: var(--secondary-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.material-fee-badge {
    background-color: #17a2b8;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.hyflex-badge {
    background-color: #6f42c1;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

.cbe-badge {
    background-color: #20c997;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
}

/* Icons in labels */
.chain-icon {
    color: var(--primary-color);
    font-size: 1.2em;
}

.date-icon {
    color: var(--primary-color);
    cursor: pointer;
}

.date-icon:hover {
    color: #421d66;
}

/* CCN Table in info section */
.ccntable-container {
    width: 100%;
    overflow-x: auto;
}

.ccntable-container table {
    width: 100%;
    border-collapse: collapse;
    background-color: rgba(83, 36, 127, 0.05);
    color: inherit;
}

.ccntable-container th,
.ccntable-container td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(83, 36, 127, 0.1);
}

.ccntable-container th {
    background-color: rgba(83, 36, 127, 0.1);
    font-weight: 600;
}

/* Alert customizations */
.alert-primary {
    background-color: rgba(83, 36, 127, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.alert-secondary {
    background-color: rgba(155, 123, 183, 0.1);
    border-color: var(--secondary-color);
}