/**
 * Components CSS - Reusable UI Components
 *
 * This file contains reusable component patterns extracted from templates.
 * Instead of duplicating CSS in multiple templates, use these classes.
 *
 * @version 1.0
 * @requires theme.css
 * @author Physics Labs Web Team
 */

/* ==========================================
   STAT CARDS - Used across stats pages, dashboards
   ========================================================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

/* Modifier: fits more cards per row and centers any incomplete final row.
   Grid's auto-fit stretches remaining cards, so we switch to flex-wrap.
   Selector specificity bumped (.stats-grid.stats-grid--centered) to win
   against the legacy duplicate .stats-grid rule later in this file. */
.stats-grid.stats-grid--centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-6);
}

.stats-grid.stats-grid--centered > .stat-card {
    flex: 0 1 230px;
}

.stat-card {
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8) var(--spacing-6);
    text-align: center;
    border-left: 4px solid var(--ucb-gold);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.stat-card:hover,
.stat-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-card:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* When the stat card is itself a link (entire card clickable), strip
   the anchor's default underline and link color so the card reuses
   the shared stat-card typography. Hover / focus-visible lift and
   outline are inherited from .stat-card above. */
a.stat-card {
    display: block;
    color: inherit;
}

.stat-card.stat-primary { border-left-color: var(--ucb-gold); }
.stat-card.stat-success { border-left-color: var(--color-success); }
.stat-card.stat-info { border-left-color: var(--color-info); }
.stat-card.stat-warning { border-left-color: var(--color-warning); }
.stat-card.stat-danger { border-left-color: var(--color-danger); }
.stat-card.stat-highlight { border-left-color: var(--color-muted); }

.stat-number {
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin-bottom: var(--spacing-2);
    color: var(--ucb-gold-text);
}

.stat-card.stat-primary .stat-number { color: var(--ucb-gold-text); }
.stat-card.stat-success .stat-number { color: var(--color-success-text); }
.stat-card.stat-info .stat-number { color: var(--color-info-text); }
.stat-card.stat-warning .stat-number { color: var(--color-warning-text); }
.stat-card.stat-danger .stat-number { color: var(--color-danger-text); }
.stat-card.stat-highlight .stat-number { color: var(--text-secondary); }

.stat-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-1);
}

.stat-sublabel {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* Tablet and below: compact list rows instead of cards */
@media (max-width: 991px) {
    .stats-grid,
    .stats-grid.stats-grid--centered {
        display: flex !important;
        flex-direction: column;
        gap: 0;
        background: var(--card-bg);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        overflow: hidden;
    }

    .stats-grid.stats-grid--centered > .stat-card {
        flex: none;
    }

    .stat-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        text-align: left !important;
        padding: var(--spacing-3) var(--spacing-4) !important;
        border-radius: 0 !important;
        border-left: none !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        border-bottom: var(--border-1) solid var(--border-color) !important;
        height: auto !important;
    }

    .stat-card:last-child {
        border-bottom: none !important;
    }

    .stat-card:hover,
    .stat-card:focus-visible {
        transform: none !important;
        box-shadow: none !important;
        background: var(--bg-tertiary) !important;
    }

    .stat-label {
        font-size: var(--font-size-sm) !important;
        text-align: left !important;
        margin-bottom: 0 !important;
        order: 1;
    }

    .stat-number {
        font-size: var(--font-size-xl) !important;
        margin-bottom: 0 !important;
        margin-left: var(--spacing-3) !important;
        order: 2;
        text-align: left;
    }

    .stat-card .btn {
        order: 3;
        margin-left: auto;
        font-size: var(--font-size-xs) !important;
        padding: var(--spacing-1) var(--spacing-3) !important;
        white-space: nowrap;
    }

    .stat-card .fs-xs {
        order: 3;
        margin-left: auto;
    }

    .stat-card .text-secondary {
        display: none;
    }
}

/* ==========================================
   RANKING LISTS - Top items, leaderboards
   ========================================================================== */

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.ranking-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* :has(:focus-visible), not :focus-visible — the card is a plain div with no
   tabindex, so it never takes focus itself. The focusable child is .rank-title,
   and keyboard users should get the same card highlight the mouse gets. The
   card draws no outline of its own; .rank-title already draws one. */
.ranking-item:hover,
.ranking-item:has(:focus-visible) {
    background: var(--color-muted-light);
    transform: translateX(4px);
}

.rank-number {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    /* --ucb-gold-text, not --ucb-gold: raw gold is 1.85:1 on --bg-secondary in
       light mode, failing even the 3:1 large-text floor. The token darkens to
       #8B7332 in light and stays gold in dark, so both themes pass. */
    color: var(--ucb-gold-text);
    min-width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.rank-content {
    flex: 1;
    min-width: 0;
}

.rank-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    text-decoration: none;
    display: block;
    margin-bottom: var(--spacing-1);
}

.rank-title:hover,
.rank-title:focus-visible {
    color: var(--ucb-gold);
    text-decoration: underline;
}

.rank-title:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.rank-meta {
    display: flex;
    gap: var(--spacing-4);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    flex-wrap: wrap;
}

/* ==========================================
   SCROLLABLE TABLE WRAPPER
   ========================================================================== */

/* Wide rendered-content tables scroll inside their own container instead of
   overflowing the content column (where they collide with the on-page ToC).
   Applied to both content sources: the docs renderer wraps tables server-side
   in DocumentPage.render_markdown, quarto-content.js does it client-side.
   Spacing is deliberately left to the contained table, which each content
   area already styles — setting it here too would double the margin. */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-bg) transparent;
}

/* ==========================================
   LEADERBOARD TABLES
   ========================================================================== */

/* Responsive table container - enables horizontal scrolling on mobile */
.leaderboard-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    margin-bottom: var(--spacing-4);
}

/* Show scroll hint on small screens */
@media (max-width: 768px) {
    .leaderboard-table-container {
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        position: relative;
        /* Ensure scroll is contained within this box */
        max-width: 100%;
    }
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    min-width: 600px; /* Prevents table from being too squished */
}

.leaderboard-table th {
    background: var(--bg-secondary);
    padding: var(--spacing-4);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

.leaderboard-table td {
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--border-color);
}

.leaderboard-table tr:hover {
    background: var(--bg-secondary);
}

.leaderboard-table .top-three {
    font-weight: var(--font-weight-semibold);
}

.rank-col {
    width: 80px;
    text-align: center;
}

.count-col,
.leaderboard-table th.count-col {
    width: 120px;
    text-align: center;
}

.medal {
    font-size: var(--font-size-2xl);
}

.count-badge {
    display: inline-block;
    background: var(--color-success);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-2xl);
    font-weight: var(--font-weight-semibold);
}

/* ==========================================
   CHART CONTAINERS - Bar charts, visualizations
   ========================================================================== */

.chart-section {
    margin: var(--spacing-12) 0;
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    box-shadow: var(--shadow-md);
}

.chart-container {
    padding: var(--spacing-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden; /* Prevent overflow */
    position: relative;
}

.bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 350px; /* Increased from 250px for better visibility */
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    position: relative;
    z-index: var(--z-base);
}

.bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
}

.bar-container {
    width: 100%;
    height: 300px; /* Increased from 200px for better visibility */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.bar {
    width: 100%;
    max-width: 60px;
    background: linear-gradient(to top, var(--ucb-gold), var(--ucb-light-gold));
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    position: relative;
    min-height: 20px;
    transition: all var(--transition-base);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8px;
}

.bar:hover {
    background: linear-gradient(to top, var(--ucb-gold-dark), var(--ucb-gold));
    transform: scaleY(1.05);
}

.bar-value {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.bar-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

/* ==========================================
   PAGE HEADERS - Hero sections
   ========================================================================== */

.page-header {
    text-align: center;
    margin-bottom: var(--spacing-12);
    padding: var(--spacing-12) var(--spacing-4);
    background: linear-gradient(135deg, var(--gray-950) 0%, var(--gray-900) 100%);
    color: white;
    border-radius: var(--radius-xl);
    border-top: 4px solid var(--ucb-gold);
}

.page-header-title {
    font-size: var(--font-size-5xl);
    margin: 0 0 var(--spacing-4);
    font-weight: var(--font-weight-bold);
    color: var(--ucb-white);
}

.page-header-subtitle {
    font-size: var(--font-size-xl);
    opacity: 0.9;
    margin: 0;
    font-style: italic;
    color: var(--ucb-white);
}

/* ==========================================
   SECTION CONTAINERS
   ========================================================================== */

.section-card {
    background: var(--card-bg);
    /* --shadow-md is 0 4px 6px -1px, offset downward with a negative spread,
       so the top edge casts nothing. In light mode --card-bg is white on a
       white page, which left the top of every card invisible. The border does
       the work the shadow cannot; dark mode already read fine and picks up a
       matching #444 edge. */
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-8);
    position: relative; /* Create stacking context */
    z-index: 1; /* Ensure proper layering */
}

.section-card h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-6);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: var(--spacing-2);
}

.section-description {
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-6);
    font-style: italic;
}

/* ==========================================
   CALL TO ACTION SECTIONS
   ========================================================================== */

/* Surfaced like .section-card rather than as a gold gradient. The gradient was
   built from two light-mode golds and had no dark value, so it stayed bright
   in dark mode and a dark-mode rule had to force the text to #222 to stay
   readable on it. Using themed tokens removes both the one-off treatment and
   the hardcoded override that propped it up. */
.cta-section {
    margin: var(--spacing-16) 0 var(--spacing-8);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-12) var(--spacing-8);
    text-align: center;
}

.cta-content h2 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-4);
    color: var(--text-primary);
}

.cta-content p {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-8);
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================
   DEMO/EQUIPMENT BADGES
   ========================================================================== */

.demo-code,
.equipment-code {
    font-family: var(--font-family-monospace);
    background: var(--color-muted-light);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
}

.request-count {
    font-weight: var(--font-weight-semibold);
    color: var(--color-success);
}

/* ==========================================
   COLLAPSIBLE SECTIONS
   ========================================================================== */

.collapsible-section {
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    box-shadow: var(--shadow-md);
}

.collapsible-section summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    list-style: none;
}

.collapsible-section summary::-webkit-details-marker {
    display: none;
}

.collapsible-section summary h2,
.collapsible-section summary h3 {
    margin: 0;
    font-size: var(--font-size-2xl);
    color: var(--text-tertiary);
}

.collapsible-section summary h3 {
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.collapsible-section[open] summary h2,
.collapsible-section[open] summary h3 {
    color: var(--text-primary);
}

.collapsible-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-style: italic;
}

/* Session table — grid-based table with expandable rows */

.session-table {
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.session-table-header,
.session-row > summary {
    display: grid;
    grid-template-columns: minmax(130px, 1.2fr) 55px minmax(140px, 1fr) 65px minmax(180px, 2fr);
    gap: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-6);
    align-items: center;
    font-size: var(--font-size-sm);
}

.session-table-header {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
}

.session-row {
    border-bottom: 1px solid var(--border-color-light);
}

.session-row > summary {
    cursor: pointer;
    list-style: none;
}

.session-row > summary::-webkit-details-marker {
    display: none;
}

.session-row > summary:hover {
    background: var(--table-row-hover-bg);
}

.session-row[open] > summary {
    background: var(--table-row-alt-bg);
    font-weight: var(--font-weight-semibold);
}

.session-cell-time,
.session-cell-duration {
    color: var(--text-secondary);
    white-space: nowrap;
}

.session-cell-activity {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
}

.session-detail {
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--table-row-alt-bg);
    border-top: 1px solid var(--border-color-light);
}

.collapsible-content {
    margin-top: var(--spacing-8);
    padding-top: var(--spacing-8);
    border-top: 2px solid var(--color-muted-light);
    display: block;
}

.collapsible-section:not([open]) .collapsible-content {
    display: none;
}

/* ==========================================
   POPULARITY GRID - Two column layouts
   ========================================================================== */

.popularity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: var(--spacing-8);
    margin: var(--spacing-12) 0;
    grid-auto-rows: auto; /* Ensure rows size to content */
    align-items: start; /* Prevent stretching */
}

/* Reduce to single column for smaller screens */
@media (max-width: 992px) {
    .popularity-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   EQUIPMENT OVERVIEW - Stat display
   ========================================================================== */

.equipment-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

.equip-stat {
    text-align: center;
    padding: var(--spacing-6);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.equip-number {
    display: block;
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-info);
    margin-bottom: var(--spacing-2);
}

.equip-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

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

.equipment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem var(--spacing-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
}

.equipment-name {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.equipment-count {
    font-size: var(--font-size-sm);
    color: var(--color-info);
    font-weight: var(--font-weight-semibold);
}

/* ==========================================
   FACULTY INFO
   ========================================================================== */

.faculty-name {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.faculty-email {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--spacing-1);
}

/* ==========================================
   COURSE CARDS & COMPONENTS
   ========================================================================== */

/* Course landing page hero header */
/* Courses header — lightweight, no box */
.courses-header {
    margin-bottom: var(--spacing-8);
}

.courses-header h1 {
    margin: 0 0 var(--spacing-2);
}

.courses-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 260px));
    justify-content: center;
    gap: var(--spacing-8);
}

.course-card {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Course card as link - override link styles */
a.course-card {
    text-decoration: none;
    color: var(--text-primary);
}

a.course-card:hover,
a.course-card:focus-visible {
    text-decoration: none;
    color: var(--text-primary);
}

.course-card:hover,
.course-card:focus-visible {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--ucb-gold);
}

.course-card:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.course-card-title {
    margin: var(--spacing-2) 0;
    font-size: var(--font-size-xl);
}

.course-card-description {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-4);
}

/* Compact course card variant */
.course-card--compact {
    padding: var(--spacing-6);
}

.course-resource-icon {
    margin-bottom: var(--spacing-3);
    color: var(--text-secondary);
    opacity: 0.8;
}

/* Resources section — visually separated */
.courses-resources {
    margin-top: var(--spacing-10);
    padding-top: var(--spacing-8);
    border-top: 1px solid var(--border-color);
}

.courses-resources h2 {
    font-size: var(--font-size-xl);
    margin: 0 0 var(--spacing-4);
}

.courses-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 260px));
    justify-content: center;
    gap: var(--spacing-6);
}

/* Courses listing section */
.courses-listing {
    margin: var(--spacing-8) 0;
}

/* No Courses Message */
.no-courses-section {
    text-align: center;
    padding: var(--spacing-12);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

/* ==========================================
   FILTER & FORM COMPONENTS
   ========================================================================== */

.filter-section {
    background: var(--bg-secondary);
    padding: var(--spacing-8);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-8);
    position: relative;
    z-index: 10;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.filter-group label {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.filter-group select,
.filter-group input[type="date"],
.filter-group input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: inherit;
    transition: border-color var(--transition-fast);
}

.filter-group select:focus-visible,
.filter-group input:focus-visible {
    outline: 3px solid var(--ucb-link-blue);
    outline-offset: 2px;
    border-color: var(--ucb-link-blue);
}

/* ==========================================
   INFO BANNER
   ========================================================================== */

.results-info,
.info-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-4);
    background: var(--color-info-bg);
    border-radius: var(--radius-md);
}

.results-count,
.info-text {
    font-weight: var(--font-weight-semibold);
    color: var(--color-info-text);
}

/* ==========================================
   DATA TABLES
   ========================================================================== */

/* Generic data table (kept for backward compatibility if needed) */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-8);
    background: var(--card-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.data-table thead {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
}

.data-table thead th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
}

.data-table th,
.data-table td {
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.data-table th {
    font-weight: var(--font-weight-semibold);
}

.data-table tbody tr:nth-child(even) {
    background-color: var(--table-row-even-bg);
}

.data-table tbody tr:hover {
    background-color: var(--table-row-hover-bg);
}

/* ==========================================
   BADGES
   ========================================================================== */

/* Generic badge - kept for backward compatibility */
.badge {
    display: inline-block;
    background: var(--badge-default-bg);
    color: var(--badge-default-text) !important;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    margin-left: var(--spacing-2);
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* .demo-badge moved to Reservations Page Components section (line ~4975) for proper variable usage */

.badge-success {
    background: var(--badge-success-bg);
    color: var(--badge-success-text) !important;
}

.badge-warning {
    background: var(--color-warning-light);
    color: var(--color-warning-text) !important;
}

.badge-danger {
    background: var(--color-danger-light);
    color: var(--color-danger-text) !important;
}

.badge-info {
    background: var(--badge-info-bg);
    color: var(--badge-info-text) !important;
}

/* ==========================================
   CONSOLIDATED DIFFICULTY BADGES
   ========================================================================== */

.difficulty-badge {
    font-size: var(--font-size-xs);
    padding: 0.25rem var(--spacing-2);
    border-radius: var(--radius-md);
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.difficulty-introductory {
    background: var(--badge-introductory-bg);
    color: var(--badge-introductory-text);
    border: 1px solid var(--badge-introductory-border);
}

.difficulty-intermediate {
    background: var(--badge-intermediate-bg);
    color: var(--badge-intermediate-text);
    border: 1px solid var(--badge-intermediate-border);
}

.difficulty-advanced {
    background: var(--badge-advanced-bg);
    color: var(--badge-advanced-text);
    border: 1px solid var(--badge-advanced-border);
}

/* Backward compatibility - demo badges */
.demo-difficulty {
    font-size: var(--font-size-xs);
    padding: 0.25rem var(--spacing-2);
    border-radius: var(--radius-md);
    text-transform: uppercase;
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.demo-difficulty-introductory {
    background: var(--color-success-bg);
    color: var(--ucb-green);
}

.demo-difficulty-intermediate {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.demo-difficulty-advanced {
    background: var(--color-danger-bg);
    color: var(--course-graduate-text);
}

/* ==========================================
   PAGINATION
   ========================================================================== */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-3);
    margin-top: var(--spacing-8);
    padding: var(--spacing-6) 0;
}

.pagination-info {
    margin: 0 var(--spacing-4);
    font-size: var(--font-size-sm);
}

/* Use .btn-pagination utility class for min-width styling */
/* Disabled button styling handled by base .btn:disabled */

/* ==========================================
   EMPTY STATE
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-6);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-4);
}

.empty-state h2 {
    margin-bottom: var(--spacing-3);
}

.empty-state p {
    margin-bottom: var(--spacing-4);
}

/* ==========================================
   EQUIPMENT & ITEM LISTS
   ========================================================================== */

.equipment-list,
.item-list {
    margin: var(--spacing-2) 0;
    padding: var(--spacing-2) 0;
}

.equipment-item,
.item-list-item {
    padding: 2px 0;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

/* ==========================================
   LANDING PAGE / HOME PAGE
   ========================================================================== */

.landing-header {
    text-align: center;
    margin-bottom: var(--spacing-16);
    padding: var(--spacing-12) 0;
}

.landing-header h1 {
    font-size: var(--font-size-5xl);
    margin: 0 0 var(--spacing-4);
}

.landing-subtitle {
    font-size: var(--font-size-xl);
    margin: 0;
}

/* Section navigation cards (home page) */
.sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-6);
}

/* Navigation card - for homepage section navigation */
.navigation-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-12) var(--spacing-8);
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-base);
    text-align: center;
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.navigation-card:hover,
.navigation-card:focus-visible {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.navigation-card:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Navigation card hover — unified gold accent */
.navigation-card:hover,
.navigation-card:focus-visible {
    border-color: var(--ucb-gold);
}

.navigation-card:hover,
.navigation-card:focus-visible {
    text-decoration: none;
}

/* Compact variant for staff cards */
.navigation-card--compact {
    padding: var(--spacing-8) var(--spacing-6);
}

.navigation-card--compact .section-icon {
    margin-bottom: var(--spacing-4);
}

.navigation-card--compact h3 {
    font-size: var(--font-size-lg);
}

/* Staff tools section — visually quieter, separated from main nav */
.staff-sections {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--border-color);
}

.staff-nav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 480px) {
    .staff-nav-grid {
        grid-template-columns: 1fr;
    }
}

.section-icon {
    margin-bottom: var(--spacing-6);
    color: var(--text-primary);
    opacity: 0.9;
}

.navigation-card h3 {
    font-size: var(--font-size-2xl);
    margin: 0 0 var(--spacing-2);
}

.navigation-card p {
    font-size: var(--font-size-sm);
    /* The opacity that used to sit here was doing by hand what the secondary
       text tier does properly; keeping both would dim the copy twice. */
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-4);
}

.section-link-text {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

/* Homepage content area */
.homepage-content {
    margin: var(--spacing-16) 0;
    padding: var(--spacing-8);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

/* ============================================================
   HOME HERO / CAROUSEL
   ============================================================ */

/* Remove top padding above hero on pages with hero images, and clip the
   ~scrollbar-width overhang the hero's `width: 100vw` adds when a classic
   scrollbar is present (it otherwise bleeds a sliver past the content on the
   right). The clip is on this content wrapper, NOT the body — a body-level clip
   propagates to the viewport and pulls the full-width sticky header in.
   `clip` (not `hidden`) avoids creating a scroll container. */
.template-homepage .padding-medium-top,
.template-courses .padding-medium-top {
    padding-top: 0;
    overflow-x: clip;
}

.home-hero {
    position: relative;
    /* Break out of .container-lg to span full viewport width */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    max-height: 500px;
    overflow: hidden;
    background: var(--gray-950);
}

.home-hero__track {
    position: relative;
    width: 100%;
    height: 100%;
}

.home-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 0;
}

.home-hero__slide--active {
    position: relative;
    opacity: 1;
    z-index: 1;
}

.home-hero__image {
    width: 100%;
    height: 100%;
    max-height: 500px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Dark overlay for text readability */
.home-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
    z-index: 2;
}

/* Text content centered over the hero */
.home-hero__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center;
    padding: var(--spacing-12) var(--spacing-8) var(--spacing-16);
    color: white;
}

.home-hero__tagline {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Larger variant for short page titles */
.home-hero__tagline--title {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
}

.home-hero__tagline p {
    margin: 0;
}

.home-hero__caption {
    position: absolute;
    bottom: var(--spacing-3);
    right: var(--spacing-4);
    z-index: 3;
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Carousel controls */
.home-hero__controls {
    position: absolute;
    bottom: var(--spacing-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.home-hero__btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: var(--radius-full);
    width: 28px;
    height: 28px;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-base);
    padding: 0;
    line-height: 1;
    font-size: 0;
}

.home-hero__btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

.home-hero__btn:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.home-hero__dots {
    display: flex;
    gap: var(--spacing-2);
}

.home-hero__dot {
    width: 10px;
    height: 10px;
    min-width: 0;
    min-height: 0;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 0;
    transition: background var(--transition-base), transform var(--transition-base);
}

.home-hero__dot--active {
    background: white;
    transform: scale(1.3);
}

.home-hero__dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

.home-hero__dot:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Hero responsive */
@media (max-width: 768px) {
    .home-hero {
        max-height: 350px;
    }

    .home-hero__image {
        max-height: 350px;
    }

    .home-hero__tagline {
        font-size: var(--font-size-2xl);
    }

    .home-hero__tagline--title {
        font-size: var(--font-size-3xl);
    }

    .home-hero__content {
        padding: var(--spacing-6) var(--spacing-4) var(--spacing-12);
    }
}

@media (max-width: 400px) {
    .home-hero__tagline {
        font-size: var(--font-size-xl);
    }

    .home-hero__tagline--title {
        font-size: var(--font-size-2xl);
    }

    .home-hero__content {
        padding: var(--spacing-4) var(--spacing-3) var(--spacing-8);
    }
}

/* Auth section */
.auth-section {
    text-align: center;
    margin: var(--spacing-12) 0;
    padding: var(--spacing-8);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.auth-section a {
    color: var(--color-link);
    font-weight: var(--font-weight-semibold);
}

/* ==========================================
   DEMOS HOME PAGE
   ========================================================================== */

/* Demo hero header (similar to page-header but with integrated stats) */
.demo-hero {
    text-align: center;
    margin-bottom: var(--spacing-12);
    padding: var(--spacing-10) var(--spacing-8);
    background: linear-gradient(135deg, var(--gray-950) 0%, var(--gray-900) 100%);
    color: white;
    border-radius: var(--radius-xl);
    border-top: 4px solid var(--ucb-gold);
    box-shadow: var(--shadow-lg);
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
}

.hero-title {
    font-size: var(--font-size-4xl);
    margin: 0 0 var(--spacing-3);
}

.hero-subtitle {
    font-size: var(--font-size-lg);
    opacity: 0.95;
    margin: 0 0 var(--spacing-5);
}

.hero-description {
    max-width: 800px;
    margin: 0 auto var(--spacing-7);
    font-size: var(--font-size-base);
    opacity: 0.9;
}

/* Hero statistics grid */
.hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-8);
    margin: var(--spacing-8) 0 var(--spacing-6);
    padding: 0 var(--spacing-4);
}

.stat-group {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    border: 1px solid rgba(207, 184, 124, 0.3);
}

.stat-group-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.75;
    margin-bottom: var(--spacing-4);
    color: var(--ucb-gold);
}

.stat-items {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.stat-item .stat-number {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--ucb-gold);
}

.stat-item .stat-label {
    font-size: var(--font-size-xs);
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.4rem;
}

.hero-cta {
    margin-top: var(--spacing-6);
}

.stats-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    background: var(--ucb-gold);
    color: var(--ucb-black);
    text-decoration: none;
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-fast);
    font-size: var(--font-size-sm);
}

.stats-link:hover,
.stats-link:focus-visible {
    background: var(--ucb-gold-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(207, 184, 124, 0.4);
    color: var(--ucb-black);
}

.stats-link:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Quick Actions Grid */
.quick-actions-section {
    margin: 0 0 var(--spacing-12) 0;
}

.quick-actions-section h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-6);
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-5);
}

/* Action card base styles - applies to all action cards (links and search) */
.action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8) var(--spacing-6);
    background: var(--ucb-gold);
    border: none;
    border-radius: var(--radius-xl);
    text-align: center;
    text-decoration: none;
    color: var(--ucb-black);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
    min-height: 200px;
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Action card links - override link styles to keep text black */
a.action-card {
    text-decoration: none !important;
    color: var(--ucb-black) !important;
}

a.action-card:hover,
a.action-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    background: var(--ucb-gold-dark);
    color: var(--ucb-black) !important;
    text-decoration: none !important;
}

a.action-card:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Ensure child elements inherit black color */
a.action-card h3,
a.action-card p,
a.action-card svg {
    color: inherit;
}

.action-icon {
    fill: currentColor;
    margin-bottom: var(--spacing-4);
    opacity: 0.95;
    width: 3.75rem;
    height: 3.75rem;
}

.action-card h3 {
    font-size: var(--font-size-lg);
    margin: var(--spacing-2) 0;
    font-weight: var(--font-weight-semibold);
}

.action-card p {
    font-size: var(--font-size-xs);
    opacity: 0.9;
    margin: var(--spacing-2) 0 0;
}

/* Action card with search form - disable hover transform */
.action-card-search {
    cursor: default;
}

.action-card-search:hover {
    transform: none;
    background: var(--ucb-gold-dark);
}

.action-icon-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base);
}

.action-icon-button:hover {
    opacity: 0.8;
}

.action-icon-button:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.action-search-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.action-search-input {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    border: var(--border-width-2) solid var(--form-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-base);
    background: var(--form-bg);
    color: var(--text-primary);
    text-align: left;
    margin-top: var(--spacing-2);
    transition: border-color var(--transition-base);
}

.action-search-input:focus-visible {
    outline: none;
    border-color: var(--form-border-focus);
}

.action-search-input:invalid {
    border-color: var(--form-border);
}

/* Demo Cards (for featured demos) */
.demos-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-10);
}

.demo-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    display: block;
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.demo-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--ucb-gold);
}

/* Demo card as link - override link styles to keep text black */
a.demo-card {
    text-decoration: none !important;
    color: var(--text-primary);
}

a.demo-card:hover,
a.demo-card:focus-visible {
    text-decoration: none !important;
    color: var(--text-primary);
}

a.demo-card:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.demo-card-image {
    width: calc(100% + 4rem);
    height: 220px;
    margin: -2rem -2rem 1.5rem -2rem;
    overflow: hidden;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    display: block;
}

.demo-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.demo-card-image--placeholder img {
    opacity: 0.5;
}

.demo-card-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.demo-number {
    font-weight: var(--font-weight-semibold);
    color: var(--ucb-link-blue);
    font-size: var(--font-size-xs);
}

.demo-safety-badge {
    font-size: var(--font-size-xs);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-md);
    text-transform: uppercase;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    background: var(--color-warning-light);
    color: var(--color-warning-text);
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.demo-card-title {
    margin: var(--spacing-2) 0;
    font-size: var(--font-size-xl);
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--heading-rule-color);
}

.demo-card-title a {
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

.demo-card-title a:hover,
.demo-card-title a:focus-visible {
    color: var(--ucb-link-blue);
    text-decoration: underline;
}

.demo-card-title a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.demo-card-summary {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: var(--spacing-3) 0;
}

.demo-card-meta {
    display: flex;
    gap: var(--spacing-4);
    margin-top: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.demo-duration {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Demo navigation heading */
.demo-nav-heading {
    font-size: var(--font-size-3xl);
    margin: 0 0 var(--spacing-8) 0;
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

/* Recent demos section */
.recent-demos-section {
    margin: 0 0 var(--spacing-16) 0;
}

.recent-demos-section h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-8);
}

.view-all-link {
    text-align: center;
    margin-top: var(--spacing-8);
}

/* ==========================================
   RESPONSIVE UTILITIES
   ========================================================================== */

@media (max-width: 992px) {
    /* Responsive tables - card layout */
    .data-table thead {
        display: none;
    }

    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td {
        display: block;
        width: 100%;
    }

    .data-table tr {
        margin-bottom: var(--spacing-6);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: var(--spacing-3);
    }

    .data-table td {
        display: block;
        padding: 8px;
        border-bottom: 1px solid var(--border-color-light);
        text-align: left;
        position: static;
        font-size: 13px;
    }

    .data-table td:last-child {
        border-bottom: 0;
    }

    .data-table td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        position: static;
        margin-bottom: 4px;
        color: var(--text-secondary);
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        left: auto;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .bar-chart {
        height: 280px; /* Increased from 200px for better mobile visibility */
    }

    .bar-container {
        height: 240px; /* Increased from 150px for better mobile visibility */
    }

    .cta-buttons {
        flex-direction: column;
    }

    .page-header-title {
        font-size: var(--font-size-3xl);
    }

    .courses-grid {
        grid-template-columns: 1fr;
    }

    .course-card {
        padding: var(--spacing-6);
    }

    .filter-form {
        flex-direction: column;
    }

    .filter-group {
        width: 100%;
    }

    .results-info {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-3);
    }

    /* Landing page mobile */
    .landing-header h1 {
        font-size: var(--font-size-4xl);
    }

    .landing-subtitle {
        font-size: var(--font-size-lg);
    }

    .sections-grid {
        grid-template-columns: 1fr;
    }

    /* Demos page responsive */
    .hero-stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
        padding: 0;
    }

    .stat-number {
        font-size: var(--font-size-3xl);
    }

    .stat-label {
        font-size: var(--font-size-xs);
    }

    .demo-hero {
        padding: var(--spacing-8) var(--spacing-6);
    }

    .hero-title {
        font-size: var(--font-size-3xl);
    }

    .hero-subtitle {
        font-size: var(--font-size-base);
    }

    .quick-actions-grid {
        grid-template-columns: 1fr;
    }

    .demos-list {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }

    .demo-card {
        padding: var(--spacing-6);
    }

    .demo-card-image {
        width: calc(100% + 3rem);
        height: 180px;
        margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    }
}

/* ==========================================
   DEMOS HOME PAGE - Compact Layout (v2)
   Two-column header with tabbed stats and carousel sections
   Migrated from inline styles December 2025
   ========================================================================== */

/* Page Container */
.demo-home {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-6) var(--spacing-4);
}

/* Two-Column Header Grid */
.demo-home-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-8);
    align-items: start;
}

.demo-home-title {
    font-size: var(--font-3xl);
    margin: 0 0 var(--spacing-4) 0;
    color: var(--text-primary);
}

/* Quick Actions - Compact Layout */
.quick-actions-compact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.quick-search-form {
    width: 100%;
}

.quick-search-input-wrapper {
    display: flex;
    align-items: center;
    background: var(--card-bg);
    border: 2px solid var(--ucb-gold);
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* GPU acceleration for smooth rendering */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.quick-search-icon {
    margin-left: var(--spacing-4);
    fill: var(--text-secondary);
    flex-shrink: 0;
}

.quick-search-input {
    flex: 1;
    border: none;
    padding: var(--spacing-3_5) var(--spacing-4);
    font-size: var(--font-base);
    background: transparent;
    color: var(--text-primary);
}

.quick-search-input:focus-visible {
    outline: none;
}

.quick-search-button {
    background: var(--ucb-gold);
    color: var(--ucb-black);
    border: none;
    margin: 0;
    padding: var(--spacing-3_5) var(--spacing-6);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast);
    align-self: stretch;
    border-radius: var(--radius-none);
    /* GPU acceleration for smooth rendering */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.quick-search-button:hover {
    background: var(--ucb-gold-dark);
}

.quick-search-button:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.quick-actions-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.quick-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2_5) var(--spacing-4);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary) !important;  /* Override link blue - adapts to dark mode */
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-sm);
    transition: all var(--transition-fast);
    /* GPU acceleration for smooth rendering */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.quick-action-btn:hover {
    border-color: var(--ucb-gold);
    background: var(--ucb-gold);
    color: var(--ucb-black) !important;
}

.quick-action-btn:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.quick-action-btn.quick-action-primary {
    background: var(--ucb-gold);
    border-color: var(--ucb-gold);
    color: var(--ucb-black) !important;
}

.quick-action-btn.quick-action-primary:hover {
    background: var(--ucb-gold-dark);
}

.quick-action-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Stats Panel - Tabbed Interface */
.stats-panel-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.stats-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.stats-tab {
    flex: 1;
    padding: var(--spacing-2_5) var(--spacing-3);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-base);
    color: var(--text-secondary);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.stats-tab:hover {
    color: var(--text-primary);
    text-decoration: none;
    background: var(--bg-tertiary);
}

.stats-tab:focus-visible {
    outline: 2px solid var(--ucb-gold);
    outline-offset: -2px;
}

.stats-tab.stats-tab-active {
    color: var(--text-primary);
    border-bottom-color: var(--ucb-gold);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.stats-panel-content {
    padding: var(--spacing-3) var(--spacing-4);
}

.stats-tabpanel[hidden] {
    display: none;
}

.stats-detail-btn {
    margin: 0 var(--spacing-4) var(--spacing-4);
    justify-content: center;
}

.stats-grid-compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2);
    text-align: center;
}

.stats-grid-compact.stats-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.stats-grid-compact.stats-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.stats-grid-compact.stats-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.stat-compact {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-name {
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Featured Sections - Carousel Layout */
.featured-section {
    margin-bottom: var(--spacing-6);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: visible;
}

.featured-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-6);
    background: transparent;
}

.featured-section-title-wrapper {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

.demo-main-content .featured-section-header h2,
.featured-section-header h2 {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
    font-size: var(--font-xl);
}

.featured-section-count,
.featured-section-subtitle {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-normal);
}

.featured-carousel-controls {
    display: flex;
    gap: var(--spacing-2);
}

.featured-carousel-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ucb-gold);
    color: var(--ucb-black);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.featured-carousel-btn:hover:not(:disabled) {
    background: var(--ucb-gold-dark);
    transform: scale(1.1);
}

.featured-carousel-btn:focus-visible {
    outline: 3px solid var(--ucb-gold);
    outline-offset: 2px;
}

.featured-carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.featured-carousel-container {
    padding: 0 var(--spacing-6) var(--spacing-6);
}

.featured-carousel-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
}

.featured-carousel-item {
    position: relative;
}

.featured-carousel-item:hover {
    z-index: 10;
}

.featured-carousel-item[hidden] {
    display: none !important;
}

/* Demo Home - Content Layout (Navigation on RIGHT on desktop) */
.demo-home .demo-content-wrapper {
    margin-top: 0 !important;
    display: flex;
    gap: var(--spacing-8);
}

.demo-home .demo-navigation {
    order: 2;
    flex-shrink: 0;
    width: 350px;
}

.demo-home .demo-main-content {
    order: 1;
    flex: 1;
    min-width: 0;
}

/* Responsive - Demos Home Compact Layout */
@media (max-width: 1400px) {
    .featured-carousel-track {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .demo-home-header {
        grid-template-columns: 1fr;
    }

    .demo-home .demo-content-wrapper {
        flex-direction: column;
    }

    .demo-home .demo-navigation {
        width: 100%;
        order: 1;  /* Navigation FIRST on mobile */
    }

    .demo-home .demo-main-content {
        order: 2;  /* Content SECOND on mobile */
    }

    .stats-grid-compact {
        grid-template-columns: repeat(4, 1fr);
    }

    .featured-carousel-track {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .demo-home {
        padding: var(--spacing-4);
    }

    .demo-home-title {
        font-size: var(--font-2xl);
    }

    .quick-actions-buttons {
        flex-direction: column;
    }

    .quick-action-btn {
        justify-content: center;
    }

    .stats-grid-compact {
        gap: var(--spacing-1);
    }

    .stats-grid-compact.stats-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .stats-grid-compact.stats-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .stat-value {
        font-size: var(--font-xl);
    }

    .stat-name {
        font-size: 0.6rem;
    }

    .stats-tab {
        font-size: var(--font-xs);
        padding: var(--spacing-2) var(--spacing-1);
    }

    .featured-carousel-track {
        grid-template-columns: 1fr;
    }

    .featured-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-3);
    }

    .featured-carousel-controls {
        align-self: flex-end;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .quick-action-btn,
    .featured-carousel-btn,
    .quick-search-button {
        transition: none;
    }

    .featured-carousel-btn:hover:not(:disabled) {
        transform: none;
    }
}

/* ============================================================
   BUTTONS - Reusable Button Components
   ============================================================ */

.btn {
    display: inline-block;
    padding: var(--spacing-2_5) var(--spacing-5);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all var(--transition-fast);
    line-height: 1.5;
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.btn:focus-visible {
    outline: 3px solid var(--focus-outline-color);
    outline-offset: 2px;
}

/* Button color variants are defined in ucb-overrides.css */

.btn-sm {
    padding: var(--spacing-1_5) var(--spacing-3);
    font-size: var(--font-size-xs);
}

.btn-lg {
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-lg);
}

/* Toggle Button Group - For mode/view switching */
.toggle-button-group {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    margin: var(--spacing-8) 0;
    padding: var(--spacing-6) 0;
    border-top: 1px solid var(--border-color);
}

.toggle-btn {
    padding: var(--spacing-2) var(--spacing-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 500;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.toggle-btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color-hover);
}

.toggle-btn:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.toggle-btn.active {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-bg);
}

.toggle-btn.active:hover {
    background-color: var(--btn-primary-hover-bg);
    border-color: var(--btn-primary-hover-border);
}

/* ============================================================
   FORMS - Form Components
   ============================================================ */

.form-group {
    margin-bottom: var(--spacing-5);
    overflow: visible;
    position: relative;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--spacing-2);
    color: var(--text-primary);
}

.form-group select,
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group textarea {
    width: 100%;
    padding: var(--spacing-2_5);
    border: 1px solid var(--form-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: inherit;
    background: var(--form-bg);
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
}

/* Make date inputs clearly clickable - entire box opens calendar */
.form-group input[type="date"] {
    cursor: pointer;
    position: relative;
}

/* Make the calendar icon clickable area cover the entire input */
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
    cursor: pointer;
    margin: 0;
}

/* Firefox date picker */
.form-group input[type="date"]::-moz-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
    cursor: pointer;
    margin: 0;
}

.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: none;
    border-color: var(--focus-outline-color);
    box-shadow: var(--focus-shadow);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* ========================================
   Combobox (searchable <select> — combobox.js)
   ========================================
   Reusable "searchable dropdown": JS turns a <select data-combobox> into an
   input + listbox. The input lives inside a .form-group so it inherits the
   input chrome above; the listbox is portaled to <body> and fixed-positioned
   (to escape modal overflow/transform clipping), so it's styled standalone. */
.combobox {
    position: relative;
}

/* Self-contained input chrome so the combobox looks right in ANY container, not
   only inside a .form-group / .filter-group that happens to style bare inputs
   (the scheduling filter bar uses .filter-field, which doesn't). Those
   container rules have higher specificity and still win where present, so the
   form/all-requests comboboxes are unchanged; this only takes effect where no
   container styles the input. */
.combobox__input {
    width: 100%;
    padding: var(--spacing-2_5);
    border: 1px solid var(--form-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: inherit;
    background: var(--form-bg);
    color: var(--text-primary);
}

.combobox__input:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
    border-color: var(--focus-outline-color);
}

.combobox__list {
    position: fixed;
    z-index: var(--z-popover);
    max-height: 15rem;
    overflow-y: auto;
    margin: var(--spacing-1) 0 0;
    padding: var(--spacing-1);
    list-style: none;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.combobox__list[hidden] {
    display: none;
}

.combobox__option {
    padding: var(--spacing-2) var(--spacing-2_5);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
}

.combobox__option[hidden] {
    display: none;
}

.combobox__option:hover,
.combobox__option.is-active {
    background: var(--bg-tertiary);
}

/* The currently-selected option stays marked (bold) even as the hover/keyboard
   highlight moves, like a native <select>; it is also highlighted on open. */
.combobox__option[aria-selected="true"] {
    font-weight: var(--font-weight-semibold);
}

/* ── Multi-select combobox (always-visible checkbox list) ───────────
   The <select multiple> variant: a filter box on top, an always-shown
   scrollable list with a checkbox tick per row, and a chip summary of the
   current picks. Inline (not portaled) so it scrolls inside its container. */

/* Option labels are short (group and person names), so letting the control
   fill a full-width container leaves each checkbox stranded beside a long
   empty row. Cap it; narrower containers are unaffected. */
.combobox--multi {
    max-width: 32rem;
}

.combobox__list--inline {
    position: static;          /* override the portaled list's fixed pos */
    z-index: auto;
    width: 100%;
    margin-top: var(--spacing-1);
    box-shadow: none;          /* inline panel, not a floating popup */
}

/* Option row: leading checkbox indicator + label. */
.combobox__option--check {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.combobox__check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-4);
    height: var(--spacing-4);
    border: 1px solid var(--form-border);
    border-radius: var(--radius-sm);
    background: var(--form-bg);
    font-size: var(--font-size-sm);
    line-height: 1;
    color: transparent;
}

.combobox__check::before {
    content: "✓";
}

.combobox__option[aria-selected="true"] .combobox__check {
    background: var(--ucb-gold);
    border-color: var(--ucb-gold);
    color: var(--ucb-black);
}

/* Chip summary of selected items (above the filter box). */
.combobox__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
    margin: 0 0 var(--spacing-2);
    padding: 0;
    list-style: none;
}

.combobox__chips[hidden] {
    display: none;
}

.combobox__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
}

.combobox__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-4);
    height: var(--spacing-4);
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1;
    cursor: pointer;
}

.combobox__chip-remove:hover,
.combobox__chip-remove:focus-visible {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.combobox__chip-remove:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.form-control {
    width: 100%;
    padding: var(--spacing-2_5);
    border: 1px solid var(--form-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-family: inherit;
}

/* ── Dual-Pane Selector (reusable M2M picker) ─────────────── */

.dual-pane-selector {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.dual-pane-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dual-pane-header {
    padding: 0.4rem 0.75rem;
    font-weight: 600;
    font-size: var(--font-size-sm);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.dual-pane-filter {
    border-radius: 0;
    border-bottom: none;
    font-size: var(--font-size-sm);
    padding: 0.35rem 0.5rem;
    background: var(--form-bg);
    color: var(--form-text);
    border-color: var(--form-border);
}

.dual-pane-filter::placeholder {
    color: var(--form-placeholder-text);
}

.dual-pane-list {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    flex: 1;
    font-size: var(--font-size-sm);
    background: var(--form-bg);
    color: var(--form-text);
    border-color: var(--form-border);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
}

.dual-pane-list option {
    padding: 0.2rem 0.5rem;
}

.dual-pane-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 0.25rem;
}

.dual-pane-actions .btn {
    min-width: 2.5rem;
    padding: 0.3rem 0.5rem;
    font-size: 1rem;
    line-height: 1;
}

@media (max-width: 600px) {
    .dual-pane-selector {
        flex-direction: column;
    }
    .dual-pane-actions {
        flex-direction: row;
        justify-content: center;
        padding: 0.25rem 0;
    }
}

/* ============================================================
   ALERTS - Alert/Message Components
   ============================================================ */

.alert {
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}

.alert-success {
    color: var(--color-success-text);
    background-color: var(--color-success-light);
    border-color: var(--color-success-border);
}

.alert-warning {
    color: var(--color-warning-text);
    background-color: var(--color-warning-light);
    border-color: var(--color-warning-border);
}

.alert-danger {
    color: var(--color-danger-text);
    background-color: var(--color-danger-light);
    border-color: var(--color-danger-border);
}

.alert-info {
    color: var(--color-info-text);
    background-color: var(--color-info-light);
    border-color: var(--color-info-border);
}

/* ============================================================
   CART COMPONENTS - Shopping Cart Specific
   ============================================================ */

.cart-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-5);
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-8);
}

.cart-actions {
    display: flex;
    gap: var(--spacing-2_5);
}

/* Cart table styles removed - now uses .reservations-table */

/* Promo Banner — used for Demo Bot callout, etc. */
.promo-banner {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    margin: var(--spacing-4) 0;
}

.promo-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.promo-banner-text {
    flex: 1;
    min-width: 250px;
}

.promo-banner-title {
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 700;
}

/* Checkbox inline label — checkbox + text side by side */
.checkbox-inline {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: normal;
}

.checkbox-inline input[type="checkbox"] {
    margin-right: var(--spacing-2);
    width: auto;
    cursor: pointer;
}

/* Form grid — two-column responsive layout */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

/* Button row — horizontal button group */
.btn-row {
    display: flex;
    gap: var(--spacing-2_5);
    flex-wrap: wrap;
}

/* Details help — collapsible help section */
.details-help > summary {
    cursor: pointer;
    color: var(--color-link);
    font-weight: 500;
}

.details-help-content {
    margin-top: var(--spacing-2_5);
    padding: var(--spacing-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.details-help-content ul {
    margin: 0;
    padding-left: 20px;
    line-height: 1.8;
}

/* Bulk upload card — details/summary card variant */
.bulk-upload-summary {
    cursor: pointer;
    padding: var(--spacing-5);
    font-size: 1.25rem;
    font-weight: 600;
    list-style: none;
    color: var(--text-primary);
}

.bulk-upload-summary-inner {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.bulk-upload-hint {
    font-size: 0.75rem;
    font-weight: normal;
}

/* Course info list — unstyled list in cards */
.course-info-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.course-info-list > li {
    margin-bottom: var(--spacing-3);
}

.course-info-list .section-list {
    margin-top: var(--spacing-1);
    padding-left: var(--spacing-5);
    list-style: disc;
}

.course-info-list .section-list li {
    margin-bottom: var(--spacing-1);
}

/* Separator dot — inline bullet between items */
.separator-dot {
    color: var(--text-secondary);
}

/* Cart conflict indicators */
.conflict-warning {
    background-color: var(--color-warning-light);
    border-left: 4px solid var(--color-warning);
    padding: var(--spacing-2_5);
    margin: var(--spacing-2_5) 0;
    border-radius: var(--radius-md);
}

.conflict-error {
    background-color: var(--color-danger-light);
    border-left: 4px solid var(--color-danger);
    padding: var(--spacing-2_5);
    margin: var(--spacing-2_5) 0;
    border-radius: var(--radius-md);
}

.alternate-suggestion {
    background-color: var(--color-info-light);
    border-left: 4px solid var(--color-info-text);
    padding: var(--spacing-2_5);
    margin: var(--spacing-2_5) 0;
    border-radius: var(--radius-md);
}

/* Empty cart state */
.empty-cart {
    text-align: center;
    padding: var(--spacing-16) var(--spacing-5);
    color: var(--text-muted);
}

.empty-cart-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-5);
}

/* ============================================================
   MODAL COMPONENTS - Modal Dialogs
   ============================================================ */

.demo-modal {
    background: var(--card-bg);
    border: 2px solid var(--ucb-gold);
    border-radius: var(--radius-lg);
    padding: var(--spacing-7);
    margin-bottom: var(--spacing-8);
    box-shadow: var(--shadow-md);
    overflow: visible;
}

.demo-modal form {
    overflow: visible;
}

.demo-modal-header {
    background: var(--ucb-gold);
    color: var(--ucb-black);
    padding: var(--spacing-4);
    margin: calc(var(--spacing-7) * -1) calc(var(--spacing-7) * -1) var(--spacing-5) calc(var(--spacing-7) * -1);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.demo-modal-header h2 {
    margin: 0;
    font-size: var(--font-size-2xl);
    color: inherit;
}

.demo-equipment-list {
    background: var(--bg-secondary);
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    margin: var(--spacing-4) 0;
}

.demo-equipment-item {
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--border-color);
}

.demo-equipment-item:last-child {
    border-bottom: none;
}

.demo-form-actions {
    display: flex;
    gap: var(--spacing-2_5);
    margin-top: var(--spacing-5);
}

/* .demo-type-badge removed - duplicate of .demo-badge (use .demo-badge instead) */

/* ============================================================
   RESPONSIVE - Cart Components
   ============================================================ */

/* Medium screens: Stack cart header vertically */
@media (max-width: 992px) {
    .cart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-4);
    }

    .cart-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Small screens: Also make buttons full width */
@media (max-width: 768px) {
    .cart-actions {
        flex-direction: column;
    }

    /* All children expand to full width in column layout */
    .cart-actions > * {
        width: 100%;
    }
}

/* ============================================================
   DEMO PAGE COMPONENTS - Individual Demo Display
   ============================================================ */

/* Demo page container */
.demo-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-3) 0 var(--spacing-8);
}

.demo-page .docs-page-header {
    border-bottom: none;
    margin-bottom: var(--spacing-4);
}

/* Demo Header - compact style with just title */
.demo-header {
    margin-bottom: var(--spacing-4);
}

.demo-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
}

.demo-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1_5);
    padding: var(--spacing-1_5) var(--spacing-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.demo-number-badge {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

.demo-safety-alert {
    background: var(--color-warning-light);
    color: var(--color-warning-text);
}

.demo-title {
    font-size: var(--font-size-5xl);
    margin: 0;
}

.demo-featured-image {
    width: 100%;
    max-width: 600px;
    margin: var(--spacing-6) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.demo-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.demo-purpose {
    margin-bottom: var(--spacing-4);
}

/* Demo purpose and streamfield content inherit --text-secondary from body */

/* Headings in main content area — neutral underlines match Quarto */
.demo-main-content h2 {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-4);
    border-bottom: var(--border-2) solid var(--heading-rule-color);
    padding-bottom: var(--spacing-2);
}

/* First content heading after header — reduced gap */
.demo-main-content > :first-child h2,
.demo-main-content > h2:first-child,
.demo-purpose h2 {
    margin-top: 0;
}

.demo-main-content h3 {
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-3);
    border-bottom: var(--border-1) solid var(--heading-rule-color);
    padding-bottom: var(--spacing-1);
}

/* Safety alert headings don't need the gold border — they have their own box styling */
.safety-alert h2 {
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 0;
}

/* Safety warning titles must stay inline with their icon — override demo-main-content h3 rules */
.demo-main-content .safety-warning__title {
    border-bottom: none;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.section-heading {
    font-size: var(--font-size-xl);
    margin: 0 0 var(--spacing-3);
    color: var(--ucb-gold);
}

/* Demo Detail Layout - Two-column flex with sticky sidebar */
.demo-detail-layout {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: start;
}

.demo-detail-layout .demo-main-content {
    flex: 1;
    min-width: 0;
    order: 1;
}

.demo-detail-layout .demo-sidebar {
    order: 2;
}

/* Mobile cart, safety, and collapsible sections — hidden on desktop */
.demo-mobile-cart,
.demo-mobile-safety,
.demo-mobile-sections {
    display: none;
}

.demo-detail-layout .demo-sidebar {
    flex: 0 0 350px;
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    max-height: calc(100vh - var(--header-height) - 2rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
}

/* Custom scrollbar for demo detail sidebar (webkit) */
.demo-detail-layout .demo-sidebar::-webkit-scrollbar {
    width: 8px;
}

.demo-detail-layout .demo-sidebar::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg);
    border-radius: var(--radius-sm);
}

.demo-detail-layout .demo-sidebar::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg);
    border-radius: var(--radius-sm);
}

.demo-detail-layout .demo-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-bg);
}

/* Quick Info Add to Cart button */
.quick-info-action {
    margin-top: 0;
    padding-top: 0;
}

.quick-info-action .btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.quick-info-action .login-prompt {
    text-align: center;
    margin: 0;
    font-size: 0.95rem;
}

.quick-info-action .login-prompt a {
    color: var(--color-link);
    font-weight: 600;
}

.quick-info-action .login-prompt a:hover {
    text-decoration: underline;
}

/* Sidebar Safety Warnings — badge + message */
.sidebar-safety {
    margin-bottom: var(--spacing-4);
}

.sidebar-safety__item {
    padding: var(--spacing-2) 0;
}

.sidebar-safety__item + .sidebar-safety__item {
    border-top: 1px solid var(--border-color);
}

.sidebar-safety__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    width: 100%;
    text-align: center;
}

.sidebar-safety__icon {
    font-size: 0.875rem;
    line-height: 1;
}

.sidebar-safety__badge--danger {
    background-color: var(--safety-danger-bg);
    color: var(--safety-danger-title);
    border: 1px solid var(--safety-danger-border);
}

.sidebar-safety__badge--warning {
    background-color: var(--safety-warning-bg);
    color: var(--safety-warning-title);
    border: 1px solid var(--safety-warning-border);
}

.sidebar-safety__badge--caution {
    background-color: var(--safety-caution-bg);
    color: var(--safety-caution-title);
    border: 1px solid var(--safety-caution-border);
}

.sidebar-safety__badge--info {
    background-color: var(--safety-info-bg);
    color: var(--safety-info-title);
    border: 1px solid var(--safety-info-border);
}

.sidebar-safety__message {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    padding-top: var(--spacing-2);
    text-align: justify;
}

.sidebar-safety__message p {
    margin: 0;
}

.sidebar-safety__message p + p {
    margin-top: var(--spacing-1);
}

/* Summary images section */
.demo-summary-images {
    margin-bottom: 1.5rem;
}

.demo-summary-images .figure-gallery {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Also Known As section */
.also-known-as-section {
    margin-top: 2.5rem;
    padding: 1.5rem;
    background-color: var(--bg-secondary);
    border-left: 4px solid var(--ucb-gold);
    border-radius: var(--radius-sm);
}

.also-known-as-content {
    margin-top: 0.75rem;
}

.search-keywords-display {
    font-style: italic;
    color: var(--text-primary);
    margin-top: 0.5rem;
    line-height: 1.6;
}

[data-theme="dark"] .also-known-as-section {
    background-color: var(--bg-tertiary);
    border-left-color: var(--ucb-gold);
}

/* Scroll offset for anchor links - accounts for sticky header */
.demo-main-content h2,
.demo-main-content h3,
.demo-main-content h4 {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

/* Responsive: mobile demo page */
@media (max-width: 992px) {
    .demo-detail-layout {
        flex-direction: column;
    }

    .demo-detail-layout .demo-sidebar {
        display: none;
    }

    .demo-mobile-safety {
        display: block;
        margin-bottom: var(--spacing-4);
    }

    .demo-mobile-cart {
        display: block;
        margin-bottom: var(--spacing-6);
    }

    .demo-mobile-sections {
        display: block;
        margin-top: var(--spacing-8);
    }

    .demo-mobile-detail {
        margin-bottom: var(--spacing-4);
    }

    .demo-mobile-detail > summary {
        cursor: pointer;
        list-style: none;
        padding: var(--spacing-2) 0;
        border-bottom: 1px solid var(--border-color);
    }

    .demo-mobile-detail > summary::-webkit-details-marker {
        display: none;
    }

    .demo-mobile-detail > summary::after {
        content: '+';
        float: right;
        font-size: var(--font-size-lg);
        color: var(--text-muted);
        line-height: 1;
    }

    .demo-mobile-detail[open] > summary::after {
        content: '−';
    }

    .demo-mobile-detail[open] > summary {
        margin-bottom: var(--spacing-3);
    }
}

/* Demo Tags */
.demo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-top: var(--spacing-6);
}

.demo-tag {
    font-size: var(--font-size-xs);
    padding: var(--spacing-1_5) var(--spacing-3);
    background: var(--color-highlight-bg);
    color: var(--color-highlight-text);
    border-radius: var(--radius-2xl);
    font-weight: 500;
}

/* Safety Alert */
.safety-alert {
    background: var(--color-warning-light);
    border: 2px solid var(--color-warning);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.safety-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-2);
}

.safety-icon {
    fill: var(--color-warning-text);
}

.safety-alert h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    color: var(--color-warning-text);
}

.safety-content {
    color: var(--color-warning-text);
}

/* Reduce nested spacing when safety warnings sit inside the alert wrapper */
.safety-alert .safety-warning {
    margin-top: var(--spacing-2);
    margin-bottom: 0;
}

.sidebar-heading {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-muted);
    margin: 0 0 var(--spacing-3) 0;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: none;
}

.equipment-section,
.related-section,
.reservation-history-section,
.requirements-section {
    margin-bottom: var(--spacing-6);
}

/* Sidebar sections in demo detail — section headings */
.demo-sidebar .sidebar-heading,
.demo-sidebar .docs-toc h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-3) 0;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: none;
}

/* Sidebar table — transparent, compact, no card background */
.demo-sidebar .staff-table {
    background: transparent;
    margin-bottom: 0;
    font-size: var(--font-size-sm);
}

.demo-sidebar .staff-table thead {
    background-color: transparent;
}

.demo-sidebar .staff-table thead th {
    background-color: transparent;
    padding: var(--spacing-1) 0;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: var(--font-weight-semibold);
    border-bottom: 2px solid var(--border-color);
}

.demo-sidebar .staff-table th:last-child,
.demo-sidebar .staff-table td:last-child {
    text-align: right;
}

.demo-sidebar .staff-table td {
    padding: var(--spacing-1_5) 0;
    font-size: var(--font-size-sm);
}

.demo-sidebar .staff-table tbody tr:nth-child(even) {
    background-color: transparent;
}

.demo-sidebar .staff-table tbody tr:hover {
    background-color: transparent;
}

.quick-info-section {
    margin-bottom: var(--spacing-4);
}

/* Requirements Card - Sidebar equipment/apparatus list */
.requirements-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

.requirements-header .sidebar-heading {
    margin: 0;
}

.requirements-staff-link {
    font-size: var(--font-size-sm);
    color: var(--color-link);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}

.requirements-staff-link:hover,
.requirements-staff-link:focus-visible {
    text-decoration: underline;
}

.requirements-staff-link:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.requirements-subheading {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: var(--spacing-3) 0 var(--spacing-1);
    padding: 0;
    border-bottom: none;
}

.requirements-subheading:first-of-type {
    margin-top: 0;
}

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

.requirements-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-0_5) 0 var(--spacing-0_5) var(--spacing-2);
}

.requirements-item:last-child {
    padding-bottom: 0;
}

.requirements-item.is-optional {
    opacity: 0.7;
}

.requirements-item-info {
    flex: 1;
    min-width: 0;
}

.requirements-item-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.requirements-item-name a {
    color: var(--color-link);
}

.requirements-item-name a:hover,
.requirements-item-name a:focus-visible {
    text-decoration: underline;
}

.requirements-item-name a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.requirements-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    text-transform: lowercase;
    font-style: italic;
}

.requirements-badge-optional {
    color: var(--text-muted);
}

.requirements-badge-instance {
    color: var(--text-secondary);
}

.requirements-item-quantity {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: var(--spacing-3);
}

.requirements-item-notes {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-style: italic;
    margin-top: var(--spacing-2);
}

/* Setup Details Page - Staff view for demo setup */
.setup-details-page {
    max-width: 900px;
    margin: 0 auto;
}

.setup-header {
    margin-bottom: var(--spacing-8);
}

.setup-header-title {
    font-size: var(--font-size-3xl);
    margin: 0 0 var(--spacing-3);
    padding-bottom: var(--spacing-3);
    border-bottom: 2px solid var(--heading-rule-color);
}

.setup-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.setup-instance-link {
    font-size: var(--font-size-sm);
    color: var(--color-link);
    text-decoration: none;
}

.setup-instance-link:hover,
.setup-instance-link:focus-visible {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.setup-section {
    margin-bottom: var(--spacing-8);
}

.setup-section-heading {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-2);
    border-bottom: 2px solid var(--border-color);
}

.setup-item-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.setup-item-header {
    margin-bottom: var(--spacing-3);
}

.setup-item-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.setup-item-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.setup-item-name a {
    color: var(--color-link);
}

.setup-item-name a:hover {
    text-decoration: underline;
}

.setup-item-badges {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.setup-badge {
    font-size: var(--font-size-xs);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
}

.setup-badge-quantity {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.setup-badge-optional {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.setup-item-availability {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-1);
}

.setup-required-instance,
.setup-notes {
    background: var(--color-info-bg);
    border-left: 3px solid var(--color-info);
    padding: var(--spacing-2) var(--spacing-3);
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-info-text);
}

.setup-instances {
    margin-top: var(--spacing-3);
}

.setup-instances-heading {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-2);
}

.setup-instances-table {
    width: 100%;
    font-size: var(--font-size-sm);
    border-collapse: collapse;
}

.setup-instances-table th,
.setup-instances-table td {
    padding: var(--spacing-2);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.setup-instances-table th {
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

.setup-instance-unavailable {
    opacity: 0.6;
}

.setup-condition-excellent { color: var(--color-success); }
.setup-condition-good { color: var(--color-success-text); }
.setup-condition-fair { color: var(--color-warning-text); }
.setup-condition-poor { color: var(--color-danger); }
.setup-condition-broken { color: var(--color-danger); font-weight: var(--font-weight-semibold); }

.setup-status {
    font-size: var(--font-size-xs);
    padding: var(--spacing-0_5) var(--spacing-1_5);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
}

.setup-status-available {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.setup-status-unavailable {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.setup-status-repair,
.setup-status-redesign {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.setup-actions {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--border-color);
}

/* Reservation Context Banner */
.setup-reservation-context {
    background: var(--color-info-bg);
    border: 1px solid var(--color-info);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.setup-reservation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-3);
}

.setup-reservation-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    color: var(--color-info-text);
}

.setup-reservation-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-3);
}

.setup-reservation-detail {
    font-size: var(--font-size-sm);
    color: var(--color-info-text);
}

.setup-reservation-hint {
    font-size: var(--font-size-sm);
    margin: 0;
    padding-top: var(--spacing-2);
    border-top: 1px solid var(--color-info);
    color: var(--color-info-text);
}

/* Reservation Status Badges */
.setup-badge-status {
    text-transform: capitalize;
}

.setup-badge-status-draft { background: var(--bg-secondary); color: var(--text-secondary); }
.setup-badge-status-pending { background: var(--color-warning-bg); color: var(--color-warning-text); }
.setup-badge-status-approved { background: var(--color-success-bg); color: var(--color-success-text); }
.setup-badge-status-checked_out { background: var(--color-info-bg); color: var(--color-info-text); border: 1px solid var(--color-info); }
.setup-badge-status-denied { background: var(--color-danger-bg); color: var(--color-danger-text); }

/* Assigned Instance Highlighting */
.setup-instance-assigned {
    background: var(--color-success-bg);
}

.setup-instance-assigned td {
    font-weight: var(--font-weight-medium);
}

.setup-assigned-badge {
    display: inline-block;
    background: var(--color-success);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-0_5) var(--spacing-1_5);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

/* Equipment List */
.equipment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.equipment-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem var(--spacing-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
}

.equipment-item.equipment-optional {
    opacity: 0.8;
    border-left: 3px dashed var(--text-muted);
}

.equipment-info {
    flex: 1;
    min-width: 0;
}

.equipment-name {
    font-weight: 600;
    margin-bottom: var(--spacing-1_5);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.equipment-name a {
    color: var(--color-link);
}

.equipment-name a:hover,
.equipment-name a:focus-visible {
    text-decoration: underline;
}

.equipment-name a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.equipment-optional-badge {
    font-size: var(--font-size-xs);
    padding: var(--spacing-0_5) var(--spacing-1_5);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-weight: 500;
    text-transform: uppercase;
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.equipment-instance-badge {
    font-size: var(--font-size-xs);
    padding: var(--spacing-0_5) var(--spacing-1_5);
    background: var(--color-info-bg);
    border: 1px solid var(--color-info);
    border-radius: var(--radius-sm);
    font-weight: 500;
    color: var(--color-info-text);
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.equipment-quantity {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-1);
    white-space: nowrap;
    flex-shrink: 0;
}

.equipment-notes {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-style: italic;
    margin-top: var(--spacing-2);
}

/* Reserve Button */
.reserve-action {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--border-color);
}

.btn-reserve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    width: 100%;
    padding: var(--spacing-3_5) var(--spacing-6);
    background: var(--ucb-gold);
    color: var(--ucb-black);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--font-size-base);
    transition: background var(--transition-fast);
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.btn-reserve:hover,
.btn-reserve:focus-visible {
    background: var(--ucb-gold-dark);
    color: var(--ucb-black);
}

.btn-reserve:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.button-icon {
    fill: currentColor;
}

.reserve-help-text {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: var(--spacing-2) 0 0;
    text-align: center;
}

.login-prompt {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
    margin: var(--spacing-4) 0;
}

.login-prompt a {
    color: var(--color-link);
    font-weight: 600;
}

.login-prompt a:hover,
.login-prompt a:focus-visible {
    text-decoration: underline;
}

.login-prompt a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Quick Info */
.quick-info-list {
    margin: 0;
}

.quick-info-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--spacing-3);
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--border-color-light);
}

.quick-info-item:last-child {
    border-bottom: none;
}

.quick-info-item dt {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.quick-info-item dd {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

/* Reservation History */
.reservation-history-description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-4);
}

.reservation-history-table-container {
    overflow-x: auto;
}

.reservation-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.reservation-history-table thead {
    background-color: var(--bg-secondary);
}

.reservation-history-table th {
    padding: var(--spacing-2);
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-primary);
}

.reservation-history-table td {
    padding: var(--spacing-2);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.reservation-history-table tbody tr:hover {
    background-color: var(--bg-tertiary);
}

.comments-row {
    background-color: var(--bg-tertiary);
}

.comments-row:hover {
    background-color: var(--bg-tertiary) !important;
}

.reservation-comments {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    padding: var(--spacing-2);
    font-style: italic;
}

/* Related Section */
.related-help-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .demo-title {
        font-size: var(--font-size-3xl);
    }

    .demo-meta-bar {
        gap: var(--spacing-2);
    }

    .demo-meta-item {
        font-size: var(--font-size-xs);
        padding: var(--spacing-1) var(--spacing-2_5);
    }
}

/* ============================================================
   CATEGORY INDEX COMPONENTS - Demo Category Pages
   ============================================================ */

/* Demo index container */
.demo-index {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-8) var(--spacing-5);
}

/* Category Header */
.category-header {
    margin-bottom: var(--spacing-5);
}

.category-meta {
    margin-bottom: var(--spacing-4);
}

.category-level-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    font-weight: 600;
    padding: var(--spacing-1_5) var(--spacing-3);
    border-radius: var(--radius-sm);
}

.category-level-area {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

.category-level-topic {
    background: var(--color-highlight-bg);
    color: var(--color-highlight-text);
}

.category-level-concept {
    background: var(--color-success-bg);
    color: var(--ucb-green);
}

.category-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-5xl);
    margin: var(--spacing-2) 0 var(--spacing-4);
}

.category-description {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
}

/* Subcategories */
.subcategories-section,
.demonstrations-section,
.experiments-section {
    margin: var(--spacing-12) 0;
}

.subcategories-section h2,
.demonstrations-section h2,
.experiments-section h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-6);
}

.subcategories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-6);
}

.subcategory-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.subcategory-card:hover,
.subcategory-card:focus-visible {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.subcategory-card:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.subcategory-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.subcategory-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.subcategory-content {
    padding: var(--spacing-5);
}

.subcategory-header {
    margin-bottom: var(--spacing-2);
}

.subcategory-level {
    display: inline-block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    font-weight: 600;
    padding: var(--spacing-0_5) var(--spacing-1_5);
    border-radius: var(--radius-sm);
}

.subcategory-level-area {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

.subcategory-level-topic {
    background: var(--color-highlight-bg);
    color: var(--color-highlight-text);
}

.subcategory-level-concept {
    background: var(--color-success-bg);
    color: var(--ucb-green);
}

.subcategory-title {
    font-size: var(--font-size-xl);
    margin: var(--spacing-2) 0 var(--spacing-3);
}

.subcategory-title a {
    color: var(--text-primary);
}

.subcategory-title a:hover,
.subcategory-title a:focus-visible {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.subcategory-title a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.subcategory-description {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-3);
}

.subcategory-link {
    color: var(--color-link);
    font-weight: 600;
    text-decoration: none;
}

.subcategory-link:hover,
.subcategory-link:focus-visible {
    text-decoration: underline;
}

.subcategory-link:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Demo Group Carousel Styles */
.demo-group-section {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding: 0;
    background: var(--card-bg);
    border-radius: var(--radius-md);
    overflow: visible;
}

.demo-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    position: relative;
    transform: translateZ(0);
    backface-visibility: hidden;
    z-index: 1;
}

.demo-group-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1.5rem;
    right: 1.5rem;
    height: 1px;
    background: var(--border-color);
    opacity: 0.5;
}

.demo-group-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.demo-group-header h2 {
    margin: 0;
    font-size: 1.75rem;
}

.demo-group-header h2 a {
    color: var(--text-primary);
}

.demo-group-header h2 a:hover {
    color: var(--color-link-hover);
}

.demo-group-count {
    font-size: 0.9rem;
    font-weight: 400;
    opacity: 0.75;
}

.demo-carousel-controls {
    display: flex;
    gap: var(--spacing-2);
}

.demo-carousel-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ucb-gold);
    color: var(--ucb-black);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition-fast);
    transform: translateZ(0);
    backface-visibility: hidden;
}

.demo-carousel-btn:hover {
    background: var(--ucb-gold-dark);
    transform: translateZ(0) scale(1.1);
}

.demo-carousel-btn:focus-visible {
    outline: 3px solid var(--ucb-gold);
    outline-offset: 2px;
}

.demo-carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.demo-carousel-btn:disabled:hover {
    transform: translateZ(0) scale(1);
    background: var(--ucb-gold);
}

.demo-carousel-btn svg {
    fill: currentColor;
}

.demo-carousel-container {
    overflow: visible;
    position: relative;
    padding: 1.5rem;
}

.demo-carousel-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    transition: transform 0.3s ease-out;
}

.demo-carousel-item {
    position: relative;
    z-index: 0;
}

.demo-carousel-item:hover {
    z-index: 10;
}

/* Carousel responsive breakpoints */
@media (min-width: 992px) {
    .demo-carousel-track {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .demo-carousel-track {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .demo-carousel-track {
        grid-template-columns: repeat(2, 1fr);
    }

    .demo-group-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }

    .demo-group-header::after {
        left: 1rem;
        right: 1rem;
    }

    .demo-group-title-wrapper {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .demo-group-header h2 {
        font-size: 1.5rem;
    }

    .demo-carousel-controls {
        align-self: center;
    }

    .demo-carousel-container {
        padding: 1rem;
    }

    .demo-carousel-item {
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .demo-carousel-track {
        transition: none !important;
    }

    .demo-carousel-btn:hover {
        transform: translateZ(0);
    }
}

/* Demonstrations and Experiments Grid */
.demonstrations-grid,
.experiments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-6);
}

/* Experiment Cards (similar to demo cards) */
.experiment-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.experiment-card:hover,
.experiment-card:focus-visible {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.experiment-card:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.experiment-card-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.experiment-number {
    font-weight: 600;
    color: var(--ucb-gold);
    font-size: var(--font-size-sm);
}

.experiment-difficulty,
.experiment-safety-badge {
    font-size: var(--font-size-xs);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-md);
    text-transform: uppercase;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}

.experiment-difficulty-introductory {
    background: var(--color-success-bg);
    color: var(--ucb-green);
}

.experiment-difficulty-intermediate {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.experiment-difficulty-advanced {
    background: var(--course-graduate-bg);
    color: var(--course-graduate-text);
}

.experiment-safety-badge {
    background: var(--color-warning-light);
    color: var(--color-warning-text);
}

.experiment-card-title {
    margin: var(--spacing-2) 0;
    font-size: var(--font-size-xl);
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--heading-rule-color);
}

.experiment-card-title a {
    color: var(--text-primary);
}

.experiment-card-title a:hover,
.experiment-card-title a:focus-visible {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.experiment-card-title a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.experiment-card-summary {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: var(--spacing-3) 0;
}

.experiment-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-top: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.experiment-duration {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.demo-equipment-count {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.demo-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
}

/* Empty State - base styling defined above (line 935) */
/* Additional empty state elements for demo cards */

.empty-icon {
    fill: currentColor;
    margin-bottom: var(--spacing-4);
}

.empty-state h3 {
    font-size: var(--font-size-2xl);
    color: var(--text-secondary);
    margin: var(--spacing-4) 0 var(--spacing-2);
}

.empty-state p {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-8);
}

.btn-gold {
    display: inline-block;
    padding: var(--spacing-3) var(--spacing-8);
    background: var(--ucb-gold);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: background var(--transition-fast);
}

.btn-gold:hover,
.btn-gold:focus-visible {
    background: var(--ucb-gold-dark);
    color: white;
}

.btn-gold:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Backward compatibility - use .btn-gold instead */
.button-primary {
    display: inline-block;
    padding: var(--spacing-3) var(--spacing-8);
    background: var(--ucb-gold);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: background var(--transition-fast);
}

.button-primary:hover,
.button-primary:focus-visible {
    background: var(--ucb-gold-dark);
    color: white;
}

.button-primary:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Responsive - Category Index */
@media (max-width: 768px) {
    .category-title {
        font-size: var(--font-size-3xl);
    }

    .subcategories-grid,
    .demonstrations-grid,
    .experiments-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   EQUIPMENT CATALOG COMPONENTS
   ============================================================ */

/* Catalog container */
.catalog-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-5);
}

.catalog-header {
    margin-bottom: var(--spacing-10);
}

.catalog-header h1 {
    margin: 0 0 var(--spacing-2);
}

/* Search Bar */
.search-bar {
    display: flex;
    gap: var(--spacing-2_5);
    margin-bottom: var(--spacing-5);
    flex-wrap: wrap;
}

.search-bar input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: var(--spacing-2_5);
    border: 1px solid var(--form-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-family: inherit;
    background: var(--form-bg);
    color: var(--text-primary);
}

.search-bar input[type="text"]:focus-visible {
    outline: none;
    border-color: var(--focus-outline-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.search-bar select {
    padding: var(--spacing-2_5);
    border: 1px solid var(--form-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-family: inherit;
    background: var(--form-bg);
    color: var(--text-primary);
}

.search-bar button {
    padding: var(--spacing-2_5) var(--spacing-5);
    background: var(--ucb-link-blue);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: 600;
    transition: background var(--transition-fast);
}

.search-bar button:hover {
    background: var(--ucb-link-blue-hover);
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-1_5);
    padding: var(--spacing-2_5);
}

/* Equipment Grid */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-10);
}

.equipment-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    overflow: hidden; /* lets the image bleed to the card edges */
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-base);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Card as link — the title colour is pinned here rather than inherited. */
a.equipment-card {
    text-decoration: none !important;
    color: var(--text-primary);
}

a.equipment-card:hover,
a.equipment-card:focus-visible {
    text-decoration: none !important;
    color: var(--text-primary);
}

.equipment-card:hover,
.equipment-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--ucb-gold);
}

.equipment-card:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.equipment-card-image {
    position: relative; /* anchors the corner badge overlay */
    height: 160px;
    overflow: hidden;
    display: block;
}

.equipment-card-badge {
    position: absolute;
    top: var(--spacing-2);
    left: var(--spacing-2);
    box-shadow: var(--shadow-sm); /* lift off busy photos */
}

.equipment-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.equipment-card-image--placeholder img {
    opacity: 0.5;
}

.equipment-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
}

.equipment-card .equipment-name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: inherit;
    line-height: 1.3;
}

/* Availability Badges — same pill typography as .demo-safety-badge */
.availability-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    font-weight: 600;
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.availability-badge.unavailable {
    background: var(--color-danger-light);
    color: var(--color-danger-text);
}

.availability-badge.demo-only {
    background: var(--color-info-light);
    color: var(--color-info-text);
}

/* Instance link rows (equipment detail page) — real links replacing the
   old onclick table rows */
.instance-link-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

a.instance-link-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}

a.instance-link-row:hover,
a.instance-link-row:focus-visible {
    border-color: var(--ucb-gold);
    color: var(--text-primary);
    text-decoration: none;
}

a.instance-link-row:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.instance-row-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.instance-row-title {
    font-weight: 600;
}

.instance-row-meta {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.instance-row-badges {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-left: auto;
    flex-shrink: 0;
}

/* Filter Chips (catalog scope toggle) */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.filter-chip {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: var(--transition-fast);
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.filter-chip:hover,
.filter-chip:focus-visible {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.filter-chip:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.filter-chip--active,
.filter-chip--active:hover,
.filter-chip--active:focus-visible {
    background: var(--ucb-gold);
    border-color: var(--ucb-gold);
    color: var(--ucb-black);
    font-weight: 600;
}

.filter-chip__count {
    padding-left: var(--spacing-1);
    font-weight: 400;
    opacity: 0.75;
}

/* Availability badges keep their own styling on hover — no override needed */

/* =====================================================
   EQUIPMENT CATEGORY CARDS (Subcategories) */

.category-card {
    padding: 1rem;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
    display: block;
}

.category-card:hover,
.category-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--ucb-gold);
    background: linear-gradient(135deg, var(--ucb-gold) 0%, var(--ucb-gold-dark) 100%);
    color: white;
}

.category-card:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.category-card-title {
    font-weight: 600;
    font-size: var(--font-size-base);
    margin-bottom: 0.5rem;
}

.category-card-count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.category-card:hover .category-card-count,
.category-card:focus-visible .category-card-count {
    color: white;
}

/* Dark mode for category cards */
[data-theme="dark"] .category-card {
    background: var(--bg-elevated);
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

.child-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

/* Equipment CTA section */
.equipment-cta-section {
    margin-top: 2.5rem;
    text-align: center;
}

.equipment-cta-heading {
    font-weight: bold;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

/* Responsive - Equipment Catalog */
@media (max-width: 768px) {
    .equipment-grid {
        grid-template-columns: 1fr;
    }

    .child-categories-grid {
        grid-template-columns: 1fr;
    }

    .search-bar {
        flex-direction: column;
    }

    .search-bar input[type="text"],
    .search-bar select,
    .search-bar button {
        width: 100%;
    }
}

/* =====================================================
   EQUIPMENT DETAIL PAGE COMPONENTS
   Used in: equipment/detail.html
   ===================================================== */

/* Detail page container */
.detail-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-5);
}

/* Equipment header */
.equipment-header {
    margin-bottom: var(--spacing-8);
    padding-bottom: var(--spacing-5);
    border-bottom: 2px solid var(--border-color);
}

.equipment-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-2_5);
}

.equipment-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
}

/* ==========================================================================
   CONTENT GRID - Generic grid layout with page-specific modifiers
   ========================================================================== */

/* Base content grid - default to auto-fit responsive layout */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-8);
}

/* Allow grid children to shrink below content size (fixes overflow on mobile) */
.content-grid > * {
    min-width: 0;
    min-height: 0;
}

/* Equipment page layout - 2 columns (main content + sidebar) on larger screens */
.page-type-equipment .content-grid {
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-8);
}

/* Stack layout on medium screens and below */
@media (max-width: 1200px) {
    .page-type-equipment .content-grid {
        grid-template-columns: 1fr;
    }
}

/* Equipment information panel */
.equipment-section-wrapper {
    margin-top: var(--spacing-8);
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
    box-shadow: var(--shadow-md);
}

/* Prevent table overflow from breaking out of section on mobile */
@media (max-width: 768px) {
    .equipment-section-wrapper {
        overflow: hidden; /* Contain any overflow within section */
        max-width: 100%; /* Ensure wrapper doesn't expand beyond container */
        width: 100%; /* Force wrapper to respect container width */
    }
}

.equipment-section-wrapper h2 {
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.equipment-info {
    background: var(--card-bg);
    padding: var(--spacing-5);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

/* Info rows - label/value pairs */
.info-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    padding: var(--spacing-2_5) 0;
    border-bottom: 1px solid var(--border-color-light);
}

.info-label {
    font-weight: 700;
    color: var(--text-primary);
}

.info-value {
    color: var(--text-secondary);
}

/* Add to cart panel (sticky sidebar) */
.add-to-cart-panel {
    background: var(--card-bg);
    padding: var(--spacing-5);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    position: sticky;
    top: var(--spacing-5);
    height: fit-content;
}

/* Instances selection list */
.instances-list {
    margin-top: var(--spacing-2_5);
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
}

.instance-item {
    padding: var(--spacing-2_5);
    border-bottom: 1px solid var(--border-color-light);
    display: flex;
    align-items: center;
    gap: var(--spacing-2_5);
}

.instance-item:last-child {
    border-bottom: none;
}

.instance-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.instance-item label {
    cursor: pointer;
}

.instance-info {
    flex: 1;
}

/* Equipment condition badges */
.instance-condition {
    font-size: var(--font-size-xs);
    padding: var(--spacing-0_5) var(--spacing-2);
    border-radius: var(--radius-full);
    font-weight: 700;
    display: inline-block;
}

.condition-excellent {
    background: var(--color-success-light);
    color: var(--color-success-text);
}

.condition-good {
    background: #cfe2ff;
    color: #084298;
}

.condition-fair {
    background: var(--color-warning-light);
    color: var(--color-warning-text);
}

.condition-poor {
    background: var(--color-danger-light);
    color: var(--color-danger-text);
}

/* Instances section and table */
.instances-table {
    width: 100%;
    min-width: 600px; /* Prevents table from squishing, triggers horizontal scroll on mobile */
    border-collapse: separate;
    border-spacing: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.instances-table th,
.instances-table td {
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--border-color-light);
}

.instances-table th {
    background: var(--bg-secondary);
    font-weight: 700;
    color: var(--text-primary);
}

.instances-table tr:last-child td {
    border-bottom: none;
}

.instances-table tbody tr {
    background: var(--card-bg);
    transition: background-color var(--transition-fast);
}

.instances-table tbody tr:hover {
    background: var(--bg-tertiary);
}

/* Medium screens - reduce spacing to fit naturally without horizontal scroll */
@media (min-width: 769px) and (max-width: 1200px) {
    .instances-table {
        font-size: 0.85rem;
    }

    .instances-table th,
    .instances-table td {
        padding: 0.4rem 0.3rem;
    }
}

/* Responsive layout - additional adjustments for mobile */
@media (max-width: 992px) {
    .add-to-cart-panel {
        position: static;
    }

    .info-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-1);
    }
}

/* =====================================================
   STAFF ADMIN PAGE COMPONENTS
   Used in: staff/base_staff.html and child templates
   ===================================================== */

/* Staff container */
.staff-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-5);
}

/* Staff header */
.staff-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-8);
}

.header-actions {
    display: flex;
    gap: var(--spacing-2_5);
}

/* Section headers (dark background) */
/* Staff section header banner — scoped to .staff-container so it wins
   over the generic .section-header (border-bottom divider) defined later */
.staff-container .section-header {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: var(--spacing-4) var(--spacing-5);
    margin-bottom: var(--spacing-5);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Full border for definition against the page — matches .filter-section. */
    border: 1px solid var(--border-color);
}

.staff-container .section-header h2,
.staff-container .section-header h3 {
    margin: 0;
    font-size: var(--font-size-2xl);
    color: inherit;
}

/* Catalog detail page: two-column grid with mobile stacking */
.catalog-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

@media (max-width: 767px) {
    .catalog-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Staff table with special reservation striping */
.staff-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-10);
    background: var(--card-bg);
}

.staff-table thead {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
}

.staff-table thead th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
}

.staff-table th,
.staff-table td {
    padding: var(--spacing-3);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}

/* Striping for grouped reservation rows (main + detail) */
.staff-table tbody tr.reservation-main-row:nth-child(4n+1),
.staff-table tbody tr.reservation-detail-row:nth-child(4n+2) {
    background-color: var(--table-row-odd-bg);
}

.staff-table tbody tr.reservation-main-row:nth-child(4n+3),
.staff-table tbody tr.reservation-detail-row:nth-child(4n+4) {
    background-color: var(--table-row-even-bg);
}

/* Zebra striping for instance rows (pairs with detail row) */
.staff-table tbody tr.instance-main-row:nth-child(4n+1),
.staff-table tbody tr.instance-detail-row:nth-child(4n+2) {
    background-color: var(--table-row-odd-bg) !important;
}

.staff-table tbody tr.instance-main-row:nth-child(4n+3),
.staff-table tbody tr.instance-detail-row:nth-child(4n+4) {
    background-color: var(--table-row-even-bg) !important;
}

/* Inactive instance rows — use striping with reduced opacity */
.staff-table tbody tr.instance-main-row.inactive-instance-row,
.staff-table tbody tr.instance-detail-row.inactive-instance-row {
    opacity: 0.6;
}

/* Visually group main + detail rows as one unit */
.staff-table tbody tr.reservation-main-row td {
    border-bottom: none;
}

.staff-table tbody tr.reservation-detail-row td {
    padding-top: 0;
}

/* Default striping for non-grouped rows */
.staff-table tbody tr:nth-child(even):not(.reservation-main-row):not(.reservation-detail-row):not(.instance-main-row):not(.instance-detail-row) {
    background-color: var(--table-row-even-bg);
}

.staff-table tbody tr:nth-child(even):not(.reservation-main-row):not(.reservation-detail-row):not(.instance-main-row):not(.instance-detail-row):hover,
.staff-table tbody tr:not(.reservation-main-row):not(.reservation-detail-row):not(.instance-main-row):not(.instance-detail-row):hover {
    background-color: var(--table-row-hover-bg);
}

/* Instance detail row: notes + action buttons layout */
.instance-detail-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: var(--spacing-3);
}

.instance-detail-notes {
    flex: 1;
    min-width: 0;
}

.instance-detail-buttons {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .instance-detail-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .instance-detail-buttons {
        flex-wrap: wrap;
    }
}

/* Compact table action links — reusable across all data tables */
.table-action {
    display: block;
    padding: var(--spacing-0_5) var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: var(--spacing-1);
}

.table-action:last-child {
    margin-bottom: 0;
}

.table-action:hover,
.table-action:focus {
    filter: brightness(0.85);
    outline: none;
    text-decoration: none;
}

.staff-table .table-action--primary,
.table-action--primary {
    color: var(--ucb-black);
    background: var(--ucb-gold);
    border-color: var(--ucb-gold);
}

.staff-table .table-action--secondary,
.table-action--secondary {
    color: var(--ucb-white);
    background: var(--gray-600);
    border-color: var(--gray-600);
}

.staff-table .table-action--success,
.table-action--success {
    color: var(--ucb-white);
    background: var(--color-success);
    border-color: var(--color-success);
}

.staff-table .table-action--danger,
.table-action--danger {
    color: var(--ucb-black);
    background: var(--color-danger);
    border-color: var(--color-danger);
}

/* Staff table links */
.staff-table a:not(.table-action) {
    color: var(--color-link);
}

/* Page tree (portal page visibility) */
.page-tree-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}

/* Collapse/expand chevron for parent nodes */
.page-tree-collapse-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: color 0.15s;
}

.page-tree-collapse-toggle:hover {
    color: var(--text-primary);
}

.page-tree-collapse-toggle:focus-visible {
    outline: var(--border-2) solid var(--focus-outline-color);
    outline-offset: var(--border-1);
}

.page-tree-collapse-toggle__icon {
    transition: transform 0.15s ease-out;
}

.page-tree-collapse-toggle[aria-expanded="false"] .page-tree-collapse-toggle__icon {
    transform: rotate(-90deg);
}

/* Spacer for leaf nodes to align with chevron-bearing siblings */
.page-tree-collapse-spacer {
    display: inline-block;
    width: 20px;
    flex-shrink: 0;
}

.page-tree-connector {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    border-left: var(--border-2) solid var(--border-color);
    border-bottom: var(--border-2) solid var(--border-color);
    margin-right: var(--spacing-1);
    flex-shrink: 0;
}

.page-tree-link {
    color: var(--color-link);
}

.page-tree-link:hover {
    text-decoration: underline;
}

/* A folder that also has its own index page renders as a link rather than the
   <strong> a content-less folder gets. Bold matches, so both kinds of folder
   read as a heading for the rows beneath them. Deliberately on the link and
   not the whole label, so the trailing child count stays unemphasised. */
.page-tree-link--folder {
    font-weight: var(--font-weight-bold);
}

.page-tree-link:focus-visible {
    outline: var(--border-2) solid var(--focus-outline-color);
    outline-offset: var(--border-1);
    border-radius: var(--radius-sm);
}

.page-tree-row-inherited td {
    color: var(--text-secondary);
}

/* Disable default zebra striping on the page tree — the hierarchy provides the
   visual structure, and the hidden config-panel rows sitting between data rows
   make nth-child alternation meaningless anyway (it yields blocks of shade,
   not stripes).

   Repaint the row rather than clearing it. `transparent` looks equivalent but
   is not: .staff-table is --card-bg while every row is painted --table-row-bg,
   and those differ in dark mode (#2a2a2a vs #222222). Clearing the even rows
   therefore let the lighter table show through and re-created the striping
   this rule exists to remove. Light mode hid the bug because both variables
   resolve to white there. */
.staff-table[aria-label*="Page visibility"] tbody tr:nth-child(even):not(.reservation-main-row):not(.reservation-detail-row):not(.instance-main-row):not(.instance-detail-row) {
    background-color: var(--table-row-bg);
}

.visibility-datetime-field {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.visibility-datetime-field .form-control {
    max-width: 200px;
}

/* Page tree column sizing */
.page-tree-col-checkbox {
    width: 40px;
    text-align: center;
}

[data-theme="dark"] .page-tree-col-checkbox {
    accent-color: var(--color-accent);
}

/* Page tree rows are clickable to select */
.staff-table[aria-label*="Page visibility"] tbody tr[data-page-path]:not(.page-tree-config-panel) {
    cursor: pointer;
}

/* Docs portal deep-link target ("Manage visibility" from a doc page): clear the
   sticky site header so the linked row isn't hidden underneath it. Scoped to docs
   rows (Quarto rows carry no id), and matches the established scroll-margin idiom. */
tr[id^="docpage-"] {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

/* Selected row highlight — specificity must beat staff-table hover and striping overrides */
.staff-table tbody tr.page-tree-row-selected {
    background-color: var(--table-row-selected-bg);
}

.staff-table tbody tr.page-tree-row-selected:hover {
    background-color: var(--table-row-selected-bg);
}

.page-tree-col-toggle,
.page-tree-col-gear {
    width: 60px;
    text-align: center;
}

.page-tree-col-schedule,
.page-tree-col-access {
    width: 180px;
}

td.page-tree-col-schedule,
td.page-tree-col-access {
    font-size: 0.85em;
}

/* Declared-default ("Default: …") line under any override badge in the docs
   visibility portal — the static audit baseline. Colour comes from .text-secondary. */
.page-tree-default {
    display: block;
    margin-top: var(--spacing-1);
}

/* Toggle switch for page visibility */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    /* Reset the global `label { margin-bottom }` (accessibility.css) — a switch
       is a control, not a field label, so the stray margin only knocks it out
       of vertical alignment with its adjacent text. */
    margin: 0;
    cursor: pointer;
    vertical-align: middle;
}

.toggle-switch__input {
    opacity: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
    z-index: 1;
}

.toggle-switch__slider {
    position: absolute;
    inset: 0;
    background-color: var(--color-danger);
    border-radius: 20px;
    transition: background-color 0.2s;
    pointer-events: none;
}

/* Inherited hidden state: toggle appears off but dimmed */
.toggle-switch--inherited-hidden .toggle-switch__slider {
    background-color: var(--color-danger);
    opacity: 0.45;
}

.toggle-switch--inherited-hidden .toggle-switch__input {
    cursor: not-allowed;
}

.toggle-switch__slider::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: var(--toggle-knob);
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle-switch__input:checked + .toggle-switch__slider {
    background-color: var(--toggle-track-on);
}

.toggle-switch__input:checked + .toggle-switch__slider::before {
    transform: translateX(16px);
}

.toggle-switch__input:focus-visible + .toggle-switch__slider {
    outline: var(--border-2) solid var(--color-accent);
    outline-offset: var(--border-1);
}

.toggle-switch__input:disabled + .toggle-switch__slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Bulk action bar (page visibility) */
.bulk-action-bar {
    background-color: var(--bg-elevated);
    border: var(--border-1) solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-2) var(--spacing-3);
    margin-bottom: var(--spacing-3);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Disabled state for bulk action buttons when no rows selected */
.bulk-action-bar__actions button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Push undo/redo to the right via status spacer */
.bulk-action-bar__actions .js-bulk-status {
    margin-left: auto;
}

.bulk-action-bar__count {
    font-weight: 600;
    margin-right: var(--spacing-2);
}

.bulk-action-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-1);
}

.bulk-action-bar__panel {
    margin-top: var(--spacing-2);
    padding-top: var(--spacing-2);
    border-top: var(--border-1) solid var(--border-color);
}

/* Stays bottom-aligned: the schedule panel's bare "Stagger releases" checkbox
   has no label line above it, so flex-end is what keeps it level with the
   inputs beside it. Panels holding a tall control opt out via --top below. */
.bulk-action-bar__fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    align-items: flex-end;
    margin-bottom: var(--spacing-2);
}

/* For panels whose tallest control dwarfs its siblings (the access panel's
   required-groups picker) — same reasoning as .config-panel__fields. */
.bulk-action-bar__fields--top {
    align-items: flex-start;
}

.bulk-action-bar__submit {
    display: flex;
    gap: var(--spacing-1);
}

.bulk-action-bar__preview {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-2);
    max-height: 150px;
    overflow-y: auto;
}

.bulk-action-bar__preview div {
    padding: var(--spacing-1) 0;
    border-bottom: var(--border-1) solid var(--border-color);
}

@media (max-width: 768px) {
    .bulk-action-bar__actions {
        flex-direction: column;
    }

    .bulk-action-bar__fields {
        flex-direction: column;
    }

    /* Wrap the page visibility table in a horizontal scroll container */
    .staff-table[aria-label*="Page visibility"] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .staff-table[aria-label*="Page visibility"] thead,
    .staff-table[aria-label*="Page visibility"] tbody,
    .staff-table[aria-label*="Page visibility"] tr {
        min-width: 700px;
    }

    .config-panel__fields {
        flex-direction: column;
    }
}

/* Filter toolbar (page visibility) */
.page-tree-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.page-tree-filter-bar__buttons {
    display: flex;
    gap: var(--spacing-1);
}

.page-tree-filter-bar__buttons .btn[aria-pressed="true"] {
    background-color: var(--color-accent);
    color: var(--ucb-black);
    border-color: var(--color-accent);
}

.page-tree-filter-bar__end {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.page-tree-filter-bar__count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Configure panel (inline expand for page visibility) */
.page-tree-config-panel td {
    padding: 0 !important;
    border-top: none !important;
}

.page-tree-config-panel:not([hidden]) .config-panel__inner {
    animation: configPanelReveal 0.15s ease-out;
}

@keyframes configPanelReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.config-panel__inner {
    background-color: var(--bg-elevated);
    border-left: 3px solid var(--color-accent);
    padding: var(--spacing-3) var(--spacing-4);
    margin: 0;
}

/* Top-aligned, not bottom: the required-groups picker is an always-visible
   checkbox list several times the height of the inputs beside it. Bottom
   alignment made it set the line height and pushed the short fields down to
   its baseline, leaving a large empty gap above them. Every field here is a
   label plus one control, so tops line up cleanly and the tall one simply
   extends downward alongside. */
.config-panel__fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    align-items: flex-start;
}

.config-panel__field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    min-width: 140px;
}

.config-panel__field .form-label {
    font-size: var(--font-size-sm);
    margin-bottom: 0;
}

.config-panel__field .form-control {
    font-size: var(--font-size-sm);
    padding: var(--spacing-1) var(--spacing-2);
}

.config-panel__date {
    max-width: 160px;
}

.config-panel__time,
.config-panel__auth,
.config-panel__group {
    max-width: 200px;
}

.config-panel__actions {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
    margin-top: var(--spacing-3);
}

.config-panel__error {
    color: var(--color-danger-text);
    font-size: var(--font-size-sm);
}

@media (max-width: 767px) {
    .config-panel__fields {
        flex-direction: column;
    }

    .config-panel__field {
        min-width: 100%;
    }

    .config-panel__date,
    .config-panel__time,
    .config-panel__auth,
    .config-panel__group {
        max-width: 100%;
    }
}

/* Zoomed image (medium-zoom), shared by Quarto content and /docs/.
   Both constrain images to their content column; this lets the zoomed copy
   escape that cap. Lives here because it is global and the two features load
   different stylesheets. */
.medium-zoom-image--opened {
    max-width: none !important;
}

/* Status badges */
.status-badge {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2_5);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.status-pending {
    background-color: var(--color-warning-light);
    color: var(--color-warning-text);
}

.status-approved,
.status-success {
    background-color: var(--color-success-light);
    color: var(--color-success-text);
}

.status-checked-out,
.status-info {
    background-color: var(--color-info-light);
    color: var(--color-info-text);
}

.status-scheduled,
.status-primary {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
}

.status-completed,
.status-secondary {
    background-color: var(--gray-200);
    color: var(--gray-700);
}

.status-danger {
    background-color: var(--color-danger-light);
    color: var(--color-danger-text);
}

.status-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning-text);
}

/* Inactive equipment instance rows */
.inactive-instance-row {
    background-color: var(--gray-200);
    opacity: 0.7;
}

/* Card components */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-5);
    overflow: hidden; /* Prevent child backgrounds from bleeding outside border-radius */
    /* NOTE: Do NOT add transform here - it creates a stacking context that traps
       Bootstrap modals inside the card, preventing click interaction. The modal
       backdrop is appended to <body> at z-index 1040, but modal content inside
       a transformed element cannot escape its stacking context. */
}

.card-header {
    background-color: var(--bg-secondary);
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h2,
.card-header h3 {
    margin: 0;
    font-size: var(--font-size-2xl);
    color: inherit;
}

.card-body {
    padding: var(--spacing-5);
}

/* Action buttons container */
.action-buttons {
    display: flex;
    gap: var(--spacing-1);
    flex-wrap: wrap;
    align-items: center;
}

/* Filter section */
.filter-section {
    background: var(--bg-secondary);
    padding: var(--spacing-5);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-5);
    border: 1px solid var(--border-color);
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
    position: relative;
    z-index: 10;
}

/* .sr-only is defined in accessibility.css - use that canonical definition */

/* Button color variants are defined in ucb-overrides.css */

.btn-small {
    padding: var(--spacing-1_5) var(--spacing-3);
    font-size: var(--font-size-sm);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-1) var(--spacing-1_5);
    min-width: unset;
    line-height: 1;
}

.btn.btn-xs {
    padding: var(--spacing-0_5) var(--spacing-1_5);
    font-size: var(--font-size-xs);
    line-height: 1.4;
    white-space: nowrap;
}

/* Clickable badges (e.g. instance count that opens a modal) */
.status-badge[data-bs-toggle] {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.status-badge[data-bs-toggle]:hover,
.status-badge[data-bs-toggle]:focus {
    filter: brightness(1.2);
    outline: none;
}

/* Staff table responsive design */
@media (max-width: 768px) {
    .staff-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-4);
    }

    .header-actions {
        flex-direction: column;
        width: 100%;
    }

    /* All children expand to full width in column layout */
    .header-actions > * {
        width: 100%;
    }

    .staff-table thead {
        display: none;
    }

    .staff-table,
    .staff-table tbody,
    .staff-table tr,
    .staff-table td {
        display: block;
        width: 100%;
    }

    .staff-table tr {
        margin-bottom: var(--spacing-5);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: var(--spacing-2_5);
    }

    .staff-table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        border-bottom: 1px dotted var(--border-color);
    }

    .staff-table td:last-child {
        border-bottom: 0;
    }

    .staff-table td::before {
        content: attr(data-label);
        position: absolute;
        left: var(--spacing-2_5);
        font-weight: bold;
        text-align: left;
        text-transform: uppercase;
        font-size: var(--font-size-xs);
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2_5);
    }
}

/* =====================================================
   PROFILE/PEOPLE DETAIL PAGE COMPONENTS
   Used in: people/detail.html
   ===================================================== */

/* Profile container */
.profile-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--spacing-5);
}

/* Profile header with photo and details */
.profile-header {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-10);
    margin-bottom: var(--spacing-10);
    background: var(--card-bg);
    padding: var(--spacing-8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

/* Profile photo */
.profile-photo-large {
    width: 300px;
    height: 300px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background-color: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100px;
    color: var(--text-muted);
}

.profile-photo-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

/* Profile details */
.profile-details {
    min-width: 0; /* Allow flexbox/grid items to shrink below content size */
}

.profile-details h1 {
    margin-top: 0;
    margin-bottom: var(--spacing-2_5);
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.profile-title {
    font-size: var(--font-size-xl);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-5);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Contact info section */
.contact-info {
    background: var(--bg-secondary);
    padding: var(--spacing-5);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-5);
}

.contact-info h2 {
    font-size: var(--font-size-lg);
    margin-top: 0;
    margin-bottom: var(--spacing-4);
    color: var(--text-primary);
}

.contact-item {
    margin-bottom: var(--spacing-3);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2_5);
}

.contact-item strong {
    min-width: 100px;
    color: var(--text-primary);
}

.contact-item a {
    color: var(--color-link);
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
    min-width: 0;
}

.contact-item span {
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

.contact-item a:hover,
.contact-item a:focus-visible {
    text-decoration: underline;
}

.contact-item a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Profile content sections */
.profile-section {
    background: var(--card-bg);
    padding: var(--spacing-8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-5);
}

.profile-section h2 {
    margin-top: 0;
    color: var(--text-primary);
    border-bottom: 2px solid var(--heading-rule-color);
    padding-bottom: var(--spacing-2_5);
    margin-bottom: var(--spacing-5);
}

.profile-section p {
    line-height: 1.8;
    color: var(--text-secondary);
}

/* Back link */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    color: var(--color-link);
    text-decoration: none;
    margin-bottom: var(--spacing-5);
}

.back-link:hover {
    text-decoration: underline;
}

.back-link:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Responsive profile layout */
@media (max-width: 992px) {
    .profile-header {
        grid-template-columns: 1fr;
        gap: var(--spacing-5);
        padding: var(--spacing-5);
    }

    .profile-photo-large {
        width: 100%;
        max-width: 400px;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
    }

    .profile-details h1 {
        font-size: var(--font-size-2xl);
    }

    .profile-title {
        font-size: var(--font-size-lg);
    }
}

/* Stack contact labels and values on mobile */
@media (max-width: 768px) {
    .contact-item {
        flex-direction: column;
        gap: var(--spacing-1);
    }

    .contact-item strong {
        min-width: auto;
    }
}

/* Very small screens - allow narrower aspect ratio */
@media (max-width: 405px) {
    .profile-photo-large {
        max-width: 100%;
        aspect-ratio: auto;
        height: 300px;
    }
}

/* =====================================================
   PEOPLE DIRECTORY PAGE COMPONENTS
   Used in: people/directory.html
   ===================================================== */

/* Directory container */
.directory-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-5);
}

/* Directory header */
.directory-header {
    margin-bottom: var(--spacing-8);
}

/* Staff grid - flex rather than grid so a partial last row centers instead of
   hugging the left edge. A full row of three is exactly 100% wide, so
   justify-content has no effect there and the columns match a 3-track grid. */
.staff-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-10);
}

/* Staff card */
.staff-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    display: flex;
    flex-direction: column;
    flex: 0 1 calc((100% - 2 * var(--spacing-8)) / 3);
    cursor: pointer;
}

.staff-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.staff-card:focus-visible {
    outline: 3px solid var(--color-link);
    outline-offset: 2px;
}

/* Staff photo */
.staff-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 48px;
    position: relative;
    overflow: hidden;
}

.staff-photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Staff info */
.staff-info {
    padding: var(--spacing-5);
    flex: 1;
}

.staff-name {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-1);
    color: var(--text-primary);
}

.staff-title {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-4);
}

/* Staff contact */
.staff-contact {
    margin-top: var(--spacing-4);
    font-size: var(--font-size-sm);
}

.staff-contact-item {
    margin-bottom: var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.staff-contact-item a {
    color: var(--color-link);
}

.staff-contact-item a:hover {
    text-decoration: underline;
    color: var(--color-link-hover);
}

.staff-contact-item a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Responsive staff grid */
@media (max-width: 1200px) {
    .staff-card {
        flex-basis: calc((100% - var(--spacing-8)) / 2);
    }
}

@media (max-width: 768px) {
    .staff-card {
        flex-basis: 100%;
    }
}

/* =====================================================
   EVENT CALENDAR PAGE COMPONENTS
   Used in: events/calendar.html
   ===================================================== */

/* Calendar container */
.calendar-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-5);
}

/* Calendar header */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-8);
    padding-bottom: var(--spacing-5);
    border-bottom: 2px solid var(--border-color);
}

.month-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
}

/* Navigation buttons */
.nav-buttons {
    display: flex;
    gap: var(--spacing-2_5);
}

.nav-btn {
    padding: var(--spacing-2_5) var(--spacing-5);
    background: var(--color-info);
    color: var(--text-inverse);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    transition: background var(--transition-fast);
}

.nav-btn:hover,
.nav-btn:focus-visible {
    background: var(--color-info-dark);
    color: var(--text-inverse);
}

.nav-btn:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Actions bar */
.actions-bar {
    display: flex;
    gap: var(--spacing-2_5);
    margin-bottom: var(--spacing-8);
    flex-wrap: wrap;
}

/* Calendar actions */
.calendar-actions {
    display: flex;
    gap: var(--spacing-2_5);
    margin-bottom: var(--spacing-8);
    flex-wrap: wrap;
}

/* Calendar grid */
.calendar-grid {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Calendar weekdays header */
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
}

.weekday {
    padding: var(--spacing-4);
    text-align: center;
    font-weight: 700;
    color: var(--text-primary);
    border-right: 1px solid var(--border-color);
}

.weekday:last-child {
    border-right: none;
}

/* Calendar days grid */
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(100px, auto);
}

.calendar-day {
    border-right: 1px solid var(--border-color-light);
    border-bottom: 1px solid var(--border-color-light);
    padding: var(--spacing-2);
    min-height: 100px;
    position: relative;
}

.calendar-day:nth-child(7n) {
    border-right: none;
}

.calendar-day.empty {
    background: var(--bg-tertiary);
}

.calendar-day.today {
    background: var(--color-warning-light);
}

.day-number {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-1);
}

/* Day events */
.day-events {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

/* Event pills */
.event-pill {
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.event-pill:hover,
.event-pill:focus-visible {
    opacity: 0.8;
}

.event-pill:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.event-course {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

.event-single {
    background: var(--color-success-light);
    color: var(--color-success-text);
}

.event-extended {
    background: var(--color-warning-light);
    color: var(--color-warning-text);
}

/* Legend */
.legend {
    display: flex;
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-5);
    padding: var(--spacing-4);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-md);
}

/* Responsive calendar */
@media (max-width: 768px) {
    .calendar-header {
        flex-direction: column;
        gap: var(--spacing-4);
    }

    .month-title {
        font-size: var(--font-size-2xl);
    }

    .calendar-days {
        grid-auto-rows: minmax(80px, auto);
    }

    .calendar-day {
        padding: var(--spacing-1);
        min-height: 80px;
    }

    .event-pill {
        font-size: 10px;
        padding: var(--spacing-0_5) var(--spacing-1_5);
    }

    .legend {
        flex-direction: column;
        gap: var(--spacing-2_5);
    }
}

/* =============================================================================
   MY EVENTS PAGE COMPONENTS
   Used in: events/my_events.html
   ============================================================================= */

/* Events Container */
.events-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-5);
}

/* Section Component (for event groups) */
.section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    margin-bottom: var(--spacing-8);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-5);
    padding-bottom: var(--spacing-4);
    border-bottom: 2px solid var(--border-color-light);
}

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: bold;
    color: var(--text-primary);
    margin: 0;
}

.section-count {
    background: var(--bg-secondary);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: bold;
    color: var(--text-secondary);
}

/* Events Table */
.events-table {
    width: 100%;
    border-collapse: collapse;
}

.events-table th,
.events-table td {
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--border-color-light);
}

.events-table th {
    background: var(--bg-secondary);
    font-weight: bold;
    color: var(--text-primary);
}

.events-table tr:last-child td {
    border-bottom: none;
}

.events-table tr:hover {
    background: var(--bg-secondary);
}

.event-name {
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: var(--spacing-1);
}

.event-details {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.reservation-badge {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2_5);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: bold;
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

.reserve-link {
    color: var(--color-info);
    text-decoration: none;
    font-weight: bold;
    font-size: var(--font-size-sm);
}

.reserve-link:hover,
.reserve-link:focus-visible {
    color: var(--color-info-dark);
    text-decoration: underline;
}

.reserve-link:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Collapsible Section (JS-based variant with .collapsible-header) */
/* Note: Different from <details>-based .collapsible-section at line 429 */
.collapsible-section {
    margin-top: var(--spacing-2_5);
}

.collapsible-header {
    background: var(--bg-secondary);
    padding: var(--spacing-3);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}

.collapsible-header:hover,
.collapsible-header:focus-visible {
    background: var(--bg-tertiary);
}

.collapsible-header:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.collapsible-header + .collapsible-content {
    display: none;
    padding: var(--spacing-4);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.collapsible-header + .collapsible-content.active {
    display: block;
}

.toggle-icon {
    transition: transform var(--transition-fast);
}

.toggle-icon.active {
    transform: rotate(180deg);
}

.collapsible-content h3 {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.collapsible-content h3:first-child {
    margin-top: 0;
}

/* Responsive Design for Events */
@media (max-width: 768px) {
    .events-table {
        font-size: var(--font-size-sm);
    }

    .events-table th,
    .events-table td {
        padding: var(--spacing-2);
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2_5);
    }
}

/* =============================================================================
   SEARCH RESULTS PAGE COMPONENTS
   Used in: search/search_results.html
   ============================================================================= */

/* Search Container */
.search-results-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-5);
}

.search-header {
    margin-bottom: var(--spacing-8);
}

.search-header h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-4);
    color: var(--text-primary);
}

.search-query-highlight {
    color: var(--ucb-gold);
    font-weight: 600;
}

.search-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 2px solid var(--heading-rule-color);
}

.results-count {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
}

/* Refine Search Form */
.search-form-section {
    margin-bottom: var(--spacing-10);
}

.refine-search-form {
    background: var(--card-bg);
    border: 2px solid var(--ucb-gold);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-md);
}

.search-input-wrapper {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.refine-search-input {
    flex: 1;
    padding: var(--spacing-3_5) var(--spacing-5);
    font-size: var(--font-size-base);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.refine-search-input:focus-visible {
    outline: none;
    border-color: var(--ucb-gold);
    box-shadow: 0 0 0 3px rgba(207, 184, 124, 0.25);
}

.refine-search-input:invalid {
    border-color: var(--border-color);
}

.refine-search-button {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3_5) var(--spacing-7);
    background: var(--ucb-gold);
    color: var(--ucb-black);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.refine-search-button:hover,
.refine-search-button:focus-visible {
    background: var(--ucb-gold-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.refine-search-button:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.refine-search-button:active {
    transform: translateY(0);
}

/* Search Scope Tabs */
.search-scope-tabs {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-6);
    flex-wrap: wrap;
}

.scope-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-base);
    border: 2px solid transparent;
    min-width: 80px;
}

.scope-tab:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-color);
    text-decoration: none;
}

.scope-tab:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-focus);
    outline-offset: var(--focus-outline-offset);
}

.scope-tab.active {
    background: var(--ucb-gold);
    color: var(--ucb-black);
    border-color: var(--ucb-gold);
    font-weight: 600;
}

.scope-tab.active:hover {
    background: var(--ucb-gold-dark);
    border-color: var(--ucb-gold-dark);
}

/* Legacy filter wrapper - kept for backwards compatibility */
.search-filter-wrapper {
    text-align: center;
}

.search-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.search-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.search-checkbox:focus-visible {
    outline: 2px solid var(--ucb-gold);
    outline-offset: 2px;
}

/* Results Sections */
.results-section {
    margin-bottom: var(--spacing-12);
}

.results-section h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-6);
    color: var(--text-primary);
    padding-bottom: var(--spacing-2);
    border-bottom: 2px solid var(--border-color);
}

/* Demo Results (using similar styling to demo cards) */
.demo-results-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-6);
}

.demo-result-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.demo-result-card:hover,
.demo-result-card:focus-visible {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--ucb-gold);
}

.demo-result-card:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.demo-result-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.demo-result-title {
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.demo-result-summary {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: var(--spacing-3) 0;
    line-height: 1.5;
}

.demo-result-meta {
    display: flex;
    gap: var(--spacing-4);
    margin-top: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Equipment Results */
.equipment-results-list {
    display: grid;
    gap: var(--spacing-4);
}

.equipment-result-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    display: flex;
    gap: var(--spacing-6);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.equipment-result-card:hover,
.equipment-result-card:focus-visible {
    box-shadow: var(--shadow-lg);
    transform: translateX(4px);
    border-color: var(--ucb-gold);
}

.equipment-result-card:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.equipment-image-container {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.equipment-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.equipment-placeholder-icon {
    font-size: 3rem;
    color: var(--text-muted);
}

.equipment-result-content {
    flex: 1;
}

.equipment-result-title {
    margin: 0 0 var(--spacing-2) 0;
}

.equipment-result-title a {
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    font-weight: 600;
}

.equipment-result-title a:hover,
.equipment-result-title a:focus-visible {
    color: var(--ucb-link-blue);
    text-decoration: underline;
}

.equipment-result-title a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.equipment-result-description {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: var(--spacing-2) 0;
    line-height: 1.5;
}

.equipment-result-meta {
    display: flex;
    gap: var(--spacing-6);
    margin-top: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.equipment-availability {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.availability-indicator {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
}

.availability-available {
    background-color: var(--color-success);
}

.availability-limited {
    background-color: var(--color-warning);
}

.availability-unavailable {
    background-color: var(--color-danger);
}

/* Responsive Design for Search */
@media (max-width: 768px) {
    .search-meta {
        flex-direction: column;
        gap: var(--spacing-4);
        align-items: flex-start;
    }

    .refine-search-form {
        padding: var(--spacing-4);
    }

    .search-input-wrapper {
        flex-direction: column;
    }

    .refine-search-button {
        justify-content: center;
        width: 100%;
    }

    .demo-results-list {
        grid-template-columns: 1fr;
    }

    .equipment-result-card {
        flex-direction: column;
    }

    .equipment-image-container {
        width: 100%;
        height: 200px;
    }
}

/* ============================================================
   ADMIN DASHBOARD COMPONENTS
   ============================================================ */

/* Admin page container */
.admin-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-5);
}

/* Admin header with action buttons */
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-8);
}

.header-actions {
    display: flex;
    gap: var(--spacing-2_5);
}

/* Statistics cards grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-5);
    margin-bottom: var(--spacing-10);
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-5);
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--text-primary);
    margin: var(--spacing-2_5) 0;
}

.stat-label {
    font-size: 1rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Stat card color variants */
.stat-pending .stat-number {
    color: var(--color-warning);
}

.stat-active .stat-number {
    color: var(--color-info);
}

.stat-completed .stat-number {
    color: var(--color-success);
}

/* Admin table styling */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-10);
    background: var(--card-bg);
}

.admin-table thead {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
}

.admin-table thead th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
}

.admin-table th,
.admin-table td {
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.admin-table tbody tr:nth-child(even) {
    background-color: var(--table-row-even-bg);
}

.admin-table tbody tr:hover {
    background-color: var(--table-row-hover-bg);
}

/* Admin table with grouped row pattern (4n+1, 4n+2, 4n+3, 4n+4) */
.admin-table tbody tr:nth-child(4n+1),
.admin-table tbody tr:nth-child(4n+2) {
    background-color: var(--table-row-odd-bg);
}

.admin-table tbody tr:nth-child(4n+3),
.admin-table tbody tr:nth-child(4n+4) {
    background-color: var(--table-row-even-bg);
}

/* Date section headers in tables */
.date-section-header {
    background: linear-gradient(135deg, var(--ucb-gold) 0%, var(--ucb-gold-dark) 100%);
    color: var(--ucb-black);
    font-weight: 600;
    text-align: center;
    padding: var(--spacing-2_5);
    font-size: 1.1rem;
    border: none;
}

/* Comments row styling */
.comments-row {
    background-color: var(--bg-tertiary);
    border-left: 4px solid var(--ucb-gold);
}

.comments-row td {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: 0.9rem;
    font-style: italic;
}

/* Time columns */
.time-cell {
    white-space: nowrap;
}

/* Link styling in admin table */
.admin-table a {
    color: var(--color-link);
}

.admin-table a:hover,
.admin-table a:focus-visible {
    text-decoration: underline;
}

.admin-table a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Demo badge */
.demo-badge {
    display: inline-block;
    background: var(--badge-demo-bg);
    color: var(--badge-demo-text);
    border: 1px solid var(--badge-demo-border);
    padding: var(--spacing-1) var(--spacing-2_5);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-left: var(--spacing-2_5);
}

/* Equipment badge */
.equipment-badge {
    display: inline-block;
    background: var(--badge-equipment-bg);
    color: var(--badge-equipment-text);
    border: 1px solid var(--badge-equipment-border);
    padding: var(--spacing-1) var(--spacing-2_5);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-left: var(--spacing-2_5);
}

/* Messages container */
.messages {
    margin-bottom: var(--spacing-5);
}

/* Modal styling */
.modal {
    display: none;
    position: fixed;
    z-index: var(--z-modal);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--card-bg);
    padding: var(--spacing-8);
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 90%;
    /* Never exceed the viewport: a tall form scrolls inside the dialog
       instead of spilling past the top/bottom where it can't be reached. */
    max-height: calc(100vh - var(--spacing-8));
    overflow-y: auto;
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.modal-header {
    margin-bottom: var(--spacing-5);
}

.modal-header h3 {
    margin: 0;
    color: var(--text-primary);
}

.modal-body {
    margin-bottom: var(--spacing-5);
}

/* .modal-footer lives in bootstrap-overrides.css — it shares a name with a
   Bootstrap class, and that is the only stylesheet loading after the Bootstrap
   CDN, so the rule has to sit there to win. Kept as a pointer rather than a
   second definition (no duplicate sources of truth). */

/* ========================================
   Cart-Specific Modals
   ======================================== */

/* Edit Cart Item Modal */
.cart-edit-modal {
    display: none;
    position: fixed;
    z-index: var(--z-modal);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.cart-edit-modal.modal-active {
    display: block;
}

.cart-edit-modal-content {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 5% auto;
    padding: 30px;
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 600px;
    box-shadow: var(--shadow-lg);
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.cart-edit-modal-content h2 {
    color: var(--text-primary);
    margin-top: 0;
}

.cart-edit-modal-content label {
    color: var(--text-primary);
}

.cart-edit-modal-content .form-control {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color-light);
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* Edit Sections Modal */
.cart-sections-modal {
    display: none;
    position: fixed;
    z-index: var(--z-modal);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.cart-sections-modal.modal-active {
    display: block;
}

.cart-sections-modal-content {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 5% auto;
    padding: 30px;
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 600px;
    box-shadow: var(--shadow-lg);
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.cart-sections-modal-content h2 {
    color: var(--text-primary);
    margin-top: 0;
}

.sections-item-name {
    margin-bottom: 20px;
}

.sections-list-container {
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-sm);
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.section-checkbox-item {
    border-bottom: 1px solid var(--border-color-light);
    padding: 10px;
}

.section-checkbox-item:last-child {
    border-bottom: none;
}

.section-checkbox-item input[type="checkbox"] {
    margin-right: 10px;
}

.section-checkbox-item label {
    color: var(--text-primary);
    cursor: pointer;
}

/* Cart Selection Controls */
.cart-selection-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
    padding: 12px 15px;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color-light);
}

.selection-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Checkbox Column */
.checkbox-column {
    width: 40px;
    text-align: center;
}

/* Custom checkbox — gold bg, black glyph, consistent in both themes */
.reservations-table .checkbox-column input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    cursor: pointer;
    border: 2px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-primary);
    position: relative;
    flex-shrink: 0;
}

.reservations-table .checkbox-column input[type="checkbox"]:checked {
    background: var(--ucb-gold);
    border-color: var(--ucb-gold);
}

.reservations-table .checkbox-column input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid var(--ucb-black);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.reservations-table .checkbox-column input[type="checkbox"]:indeterminate {
    background: var(--ucb-gold);
    border-color: var(--ucb-gold);
}

.reservations-table .checkbox-column input[type="checkbox"]:indeterminate::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 6px;
    width: 8px;
    height: 0;
    border-bottom: 2px solid var(--ucb-black);
}

.item-checkbox:focus-visible,
#select-all-checkbox:focus-visible {
    outline: 2px solid var(--ucb-gold);
    outline-offset: 2px;
}

/* Checkout button styling */
#checkout-btn {
    white-space: nowrap;
}

#checkout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive design for admin dashboard */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .admin-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-4);
    }

    /* .header-actions responsive styles consolidated in staff table section */
}

/* ============================================================
   RESERVATIONS PAGE COMPONENTS
   ============================================================ */

/* Reservations page container */
.reservations-container,
.requests-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-5);
}

/* Reservations header */
.reservations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-8);
}

/* Reservations table with black header */
.reservations-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-10);
    background: var(--card-bg);
}

.reservations-table thead {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
}

.reservations-table th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

.reservations-table td {
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.reservations-table tbody tr:nth-child(even) {
    background-color: var(--table-row-alt-bg);
}

.reservations-table tbody tr:hover {
    background-color: var(--table-row-hover-bg);
}

/* Date separator rows with UCB gold */
.date-separator {
    background-color: var(--ucb-gold) !important;
    color: var(--ucb-black);
    font-weight: bold;
    text-align: left;
}
.date-separator td {
    padding: var(--spacing-2_5) var(--spacing-5);
}

/* Maintenance table styles */
.maintenance-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-10);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.maintenance-table thead {
    background-color: var(--table-header-bg);
    border-bottom: 2px solid var(--border-color);
}

.maintenance-table th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    padding: var(--spacing-3);
    text-align: left;
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 600;
}

.maintenance-table td {
    padding: var(--spacing-3);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.maintenance-table tbody tr:nth-child(even) {
    background-color: var(--table-row-even-bg);
}

.maintenance-table tbody tr:hover {
    background-color: var(--table-row-hover-bg);
}

/* Additional status badge variants for reservations */
.status-ready {
    background-color: var(--color-success-light);
    color: var(--color-success-text);
}

.status-late {
    background-color: var(--color-danger-light);
    color: var(--color-danger-text);
}

.status-returned {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Equipment list in reservations */
.equipment-list {
    margin: var(--spacing-1) 0;
    padding: var(--spacing-1) 0;
}

.equipment-item {
    padding: var(--spacing-0_5) 0;
    font-size: 0.9rem;
}

/* Medium screens - reduce spacing to fit naturally without horizontal scroll */
@media (min-width: 769px) and (max-width: 1200px) {
    .reservations-table {
        font-size: 0.85rem;
    }

    .reservations-table th,
    .reservations-table td {
        padding: 0.4rem 0.3rem;
    }

    /* Use .btn-xs utility class for compact buttons in tables */
}

/* Responsive design for reservations table - Mobile */
@media (max-width: 768px) {
    .reservations-table thead {
        display: none;
    }

    .reservations-table,
    .reservations-table tbody,
    .reservations-table tr,
    .reservations-table td {
        display: block;
        width: 100%;
    }

    .reservations-table tr {
        margin-bottom: var(--spacing-5);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        padding: var(--spacing-2_5);
    }

    .reservations-table td {
        display: block;
        padding: 8px;
        border-bottom: 1px solid var(--border-color-light);
        text-align: left;
        position: static;
    }

    .reservations-table td:last-child {
        border-bottom: 0;
    }

    .reservations-table td::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        position: static;
        margin-bottom: 4px;
        color: var(--text-secondary);
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        left: auto;
    }

    .date-separator td::before {
        content: none;
    }

    .date-separator td {
        text-align: center !important;
        padding-left: var(--spacing-2_5) !important;
    }

    .reservations-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-4);
    }
}

/* ============================================================
   DASHBOARD PAGE COMPONENTS
   ============================================================ */

/* Dashboard page container */
.dashboard-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-5);
}

/* Dashboard header */
.dashboard-header {
    margin-bottom: var(--spacing-8);
}

.dashboard-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: var(--spacing-2_5);
}

.dashboard-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Events Header */
.events-header {
    margin-bottom: var(--spacing-8);
}

.events-header h1 {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: var(--spacing-2_5);
}

.events-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Stat card with icon layout */
.stat-icon {
    font-size: 2.25rem;
    opacity: 0.8;
}

.stat-content {
    flex: 1;
}

/* Quick actions grid */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.action-btn {
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--ucb-link-blue);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: bold;
    text-align: center;
    transition: background var(--transition-fast);
    display: inline-block;
}

.action-btn:hover,
.action-btn:focus-visible {
    background: var(--ucb-link-blue-hover);
}

.action-btn:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.action-btn.secondary {
    background: var(--color-muted);
}

.action-btn.secondary:hover,
.action-btn.secondary:focus-visible {
    background: var(--gray-700);
}

/* View all link */
.view-all-link {
    color: var(--ucb-link-blue);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: bold;
}

.view-all-link:hover,
.view-all-link:focus-visible {
    text-decoration: underline;
}

.view-all-link:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Event items */
.event-item {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--border-color-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.event-item:last-child {
    border-bottom: none;
}

.event-info {
    flex: 1;
}

/* .event-name and .event-details are defined above (lines 4573-4582) */

/* Event type badges */
.event-badge {
    padding: var(--spacing-1) var(--spacing-2_5);
    border-radius: var(--radius-xl);
    font-size: 0.6875rem;
    font-weight: bold;
}

.badge-course {
    background: var(--badge-course-bg);
    color: var(--badge-course-text);
    border: 1px solid var(--badge-course-border);
}

.badge-single {
    background: var(--badge-single-bg);
    color: var(--badge-single-text);
    border: 1px solid var(--badge-single-border);
}

.badge-extended {
    background: var(--badge-extended-bg);
    color: var(--badge-extended-text);
    border: 1px solid var(--badge-extended-border);
}

.badge-introductory {
    background: var(--badge-introductory-bg);
    color: var(--badge-introductory-text);
    border: 1px solid var(--badge-introductory-border);
}

.badge-intermediate {
    background: var(--badge-intermediate-bg);
    color: var(--badge-intermediate-text);
    border: 1px solid var(--badge-intermediate-border);
}

/* Cart items */
.cart-item {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--border-color-light);
}

.cart-item:last-child {
    border-bottom: none;
}

.item-name {
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: var(--spacing-1);
}

.item-details {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Reservation items */
.reservation-item {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--border-color-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reservation-item:last-child {
    border-bottom: none;
}

.reservation-info {
    flex: 1;
}

.reservation-id {
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: var(--spacing-1);
}

.reservation-date {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Additional status badge variants for dashboard */
.status-submitted {
    background: #cfe2ff;
    color: #084298;
}

.status-fulfilled {
    background: var(--color-muted-light);
    color: #495057;
}

/* Responsive design for dashboard */
@media (max-width: 768px) {
    .content-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ERROR PAGE COMPONENTS (403, 404, 500)
   ============================================================ */

/* Error page container */
.error-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.error-container {
    max-width: 650px;
    text-align: center;
}

/* Error icon */
.error-icon {
    margin-bottom: var(--spacing-8);
}

.error-icon svg {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

/* Error code styling */
.error-code {
    font-size: 6rem;
    font-weight: 800;
    margin: 0 0 1rem;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Error code color variants */
.error-403 .error-code {
    color: var(--ucb-gold);
}

.error-404 .error-code {
    color: var(--ucb-gold);
}

.error-500 .error-code {
    color: var(--color-danger);
}

/* Error title */
.error-title {
    font-size: 2rem;
    margin: 0 0 1.5rem;
    color: var(--text-primary);
}

/* Error description */
.error-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.error-description p {
    margin-bottom: 1rem;
}

/* Permission/status info boxes (error pages only - exclude status badges) */
.permission-info,
.status-info:not(.status-badge) {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: 2.5rem;
    text-align: left;
}

.permission-info h3,
.status-info h3 {
    font-size: 1.1rem;
    margin: 0 0 1rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.permission-info ul,
.status-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.permission-info li,
.status-info li {
    padding: var(--spacing-2) 0;
    color: var(--color-warning-text);
    font-size: 0.95rem;
}

.permission-info li::before {
    content: "🔒";
    margin-right: 0.75rem;
}

.status-info li::before {
    content: "•";
    margin-right: 0.5rem;
    font-weight: bold;
}

/* Action buttons - Error pages specific */
.error-actions {
    margin-bottom: 2.5rem;
}

.error-actions .action-list,
.error-actions .action-buttons {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: 0.875rem 2rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    cursor: pointer;
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.action-primary {
    background: var(--ucb-gold);
    color: white;
}

/* Error pages - UCB Gold background with black text in light mode */
.error-403 .error-action-button.action-primary,
.error-404 .error-action-button.action-primary,
.error-500 .error-action-button.action-primary {
    background: var(--ucb-gold);
    color: var(--ucb-black);
}

.action-primary:hover,
.action-primary:focus-visible {
    transform: translateY(-2px) translateZ(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-primary:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.error-403 .error-action-button.action-primary:hover,
.error-404 .error-action-button.action-primary:hover,
.error-500 .error-action-button.action-primary:hover,
.error-403 .error-action-button.action-primary:focus-visible,
.error-404 .error-action-button.action-primary:focus-visible,
.error-500 .error-action-button.action-primary:focus-visible {
    background: var(--ucb-gold-dark);
    color: var(--ucb-black);
}

.action-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.action-secondary:hover,
.action-secondary:focus-visible {
    background: #e8e8e8;
    border-color: var(--border-color);
}

.action-secondary:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Error page action icons - smaller than default action-icon (40px vs 60px) */
.error-action-button .action-icon {
    fill: currentColor;
    width: 40px;
    height: 40px;
}

/* Error page specific button styling */
.error-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: 0.875rem 1.5rem;
    width: 200px;  /* Fixed width for consistent button sizes */
    height: 3.125rem;  /* Fixed height for vertical consistency */
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;  /* Prevent text line-height from affecting vertical centering */
    text-decoration: none;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    cursor: pointer;
    background: none;  /* Reset button element default background */
    font-family: inherit;  /* Inherit font from parent */
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.error-action-icon {
    fill: currentColor;
    width: 20px;
    height: 20px;
    flex-shrink: 0;  /* Prevent icon from shrinking */
    display: block;  /* Remove inline spacing issues */
}

/* User info box (403 only) */
.user-info {
    background: var(--color-info-bg);
    border-left: 4px solid var(--color-info);
    border-radius: var(--radius-md);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    text-align: left;
}

.user-info p {
    margin: 0 0 0.75rem;
    color: var(--color-info-text);
}

.user-info p:last-child {
    margin-bottom: 0;
}

.user-info strong {
    font-weight: 600;
}

.user-help-text {
    font-size: 0.95rem;
    font-style: italic;
}

/* Quick links section */
.quick-links {
    margin-bottom: 2.5rem;
    padding: var(--spacing-8);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
}

.quick-links h3 {
    font-size: 1.1rem;
    margin: 0 0 1.5rem;
    color: var(--text-secondary);
}

.quick-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.quick-links-list li {
    display: inline-block;
}

.quick-links-list a {
    display: inline-block;
    padding: var(--spacing-2) var(--spacing-4);
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all var(--transition-fast);
}

.quick-links-list a:hover,
.quick-links-list a:focus-visible {
    background: var(--ucb-gold);
    color: var(--ucb-black);
    border-color: var(--ucb-gold);
}

.quick-links-list a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Error search form (404 only) */
.error-search {
    margin-bottom: var(--spacing-8);
}

.search-wrapper {
    display: flex;
    max-width: 400px;
    margin: 0 auto;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.search-wrapper:focus-within {
    border-color: var(--ucb-gold);
}

.search-input {
    flex: 1;
    padding: 0.875rem 1rem;
    border: none;
    font-size: 1rem;
    outline: none;
}

.search-button {
    padding: 0.875rem 1.25rem;
    background: var(--ucb-gold);
    border: none;
    color: var(--ucb-black);
    cursor: pointer;
    transition: background var(--transition-fast);
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.search-button:hover,
.search-button:focus-visible {
    background: var(--ucb-gold-dark);
}

.search-button:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.search-button svg {
    fill: var(--ucb-black);
    display: block;
}

/* Error help text */
.error-help {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: var(--spacing-8);
    padding-top: var(--spacing-8);
    border-top: 1px solid var(--border-color);
}

.error-help a {
    color: var(--color-link);
}

.error-403 .error-help a {
    color: var(--color-warning);
}

.error-help a:hover,
.error-help a:focus-visible {
    text-decoration: underline;
}

.error-help a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.error-help code {
    background: var(--bg-tertiary);
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
}

/* Animations for 404 page */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.error-404 .error-icon {
    animation: bounce 2s infinite;
}

/* Responsive design for error pages */
@media (max-width: 768px) {
    .error-code {
        font-size: 4rem;
    }

    .error-title {
        font-size: 1.5rem;
    }

    .error-description {
        font-size: 1rem;
    }

    .action-list,
    .action-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .action-button {
        width: 100%;
        justify-content: center;
    }

    .error-500 .error-container {
        padding: 2rem 1.5rem;
    }

    .error-500 .error-code {
        font-size: 3.5rem;
    }

    .error-500 .error-title {
        font-size: 1.4rem;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .error-code,
    .action-primary {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .error-404 .error-icon {
        animation: none;
    }

    .action-button {
        transition: none;
    }
}

/* ============================================================================
   LAB GUIDE PAGE COMPONENTS (courses/lab_guide_page.html)
   ============================================================================ */

/* Lab Guide Container */
.lab-guide {
    max-width: 900px;
    margin: 0 auto;
}

/* Lab Header */
.lab-header {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--border-color);
}

.lab-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Lab Badges */
.lab-number-badge {
    padding: 0.4rem 0.8rem;
    background: var(--color-info);
    color: var(--ucb-white);
    border-radius: var(--radius-sm);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.lab-duration {
    padding: 0.4rem 0.8rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Lab Title */
.lab-title {
    font-size: 2.5rem;
    margin: 0.5rem 0 1.5rem;
    line-height: 1.2;
}

/* Learning Objectives Box */
.learning-objectives {
    background: var(--color-info-bg);
    border-left: 4px solid var(--color-info);
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: var(--radius-sm);
}

.learning-objectives h2 {
    font-size: 1.2rem;
    margin: 0 0 1rem;
    color: var(--color-info-text);
}

.objectives-content {
    font-size: 1rem;
}

.objectives-content ul {
    margin: 0;
    padding-left: 1.5rem;
}

.objectives-content li {
    margin-bottom: 0.5rem;
}

/* Lab Navigation (Top) */
.lab-navigation {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.btn-back-to-course {
    padding: 0.6rem 1.2rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: background var(--transition-fast);
}

.btn-back-to-course:hover,
.btn-back-to-course:focus-visible {
    background: #e0e0e0;
}

.btn-back-to-course:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.lab-nav-buttons {
    display: flex;
    gap: 0.5rem;
}

.btn-prev-lab,
.btn-next-lab {
    padding: 0.6rem 1.2rem;
    background: var(--color-info);
    color: var(--ucb-white);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: background var(--transition-fast);
}

.btn-prev-lab:hover,
.btn-next-lab:hover,
.btn-prev-lab:focus-visible,
.btn-next-lab:focus-visible {
    background: #1565c0;
}

.btn-prev-lab:focus-visible,
.btn-next-lab:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Lab Content */
.lab-content {
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 3rem 0;
}

/* Lab Footer */
.lab-footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border-color);
}

.lab-footer-navigation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
}

.lab-footer-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.lab-footer-nav-link:hover,
.lab-footer-nav-link:focus-visible {
    background: var(--color-info-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.lab-footer-nav-link:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.lab-footer-prev {
    text-align: left;
}

.lab-footer-next {
    text-align: right;
    grid-column: 3;
}

.nav-direction {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    font-weight: 600;
}

.nav-lab-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nav-lab-number {
    font-size: 0.8rem;
    color: var(--color-info);
    font-weight: 600;
}

.nav-lab-title {
    font-size: 1rem;
    font-weight: 500;
}

.btn-back-to-course-footer {
    padding: 0.6rem 1.2rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-align: center;
    transition: background var(--transition-fast);
}

.btn-back-to-course-footer:hover,
.btn-back-to-course-footer:focus-visible {
    background: #e0e0e0;
}

.btn-back-to-course-footer:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Lab Guide Responsive Design */
@media (max-width: 768px) {
    .lab-guide {
        padding: 0 1rem;
    }

    .lab-title {
        font-size: 1.75rem;
    }

    .lab-navigation {
        flex-direction: column;
        align-items: stretch;
    }

    .lab-nav-buttons {
        width: 100%;
        justify-content: space-between;
    }

    .lab-footer-navigation {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .lab-footer-next {
        grid-column: 1;
    }

    .btn-back-to-course-footer {
        order: -1;
    }
}

/* Lab Guide Print Styles */
@media print {
    .lab-navigation,
    .lab-footer-navigation {
        display: none;
    }

    .lab-header {
        border-bottom: 1px solid #000;
    }
}

/* ============================================================================
   EXPERIMENT PAGE COMPONENTS (demos/experiment_page.html)
   ============================================================================ */

/* Experiment Header */
.experiment-header {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--border-color);
}

.experiment-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.experiment-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
}

.experiment-number-badge {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

.experiment-difficulty {
    text-transform: uppercase;
}

.experiment-difficulty-introductory {
    background: var(--color-success-bg);
    color: var(--ucb-green);
}

.experiment-difficulty-intermediate {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.experiment-difficulty-advanced {
    background: var(--course-graduate-bg);
    color: var(--course-graduate-text);
}

.experiment-duration {
    background: var(--bg-secondary);
}

.experiment-safety-alert {
    background: var(--color-warning-light);
    color: var(--color-warning-text);
}

.experiment-title {
    font-size: 2.5rem;
    margin: 0 0 1.5rem;
}

/* Experiment Objectives */
.experiment-objectives {
    background: var(--color-info-bg);
    padding: 1.5rem;
    border-left: 4px solid var(--ucb-gold);
    border-radius: var(--radius-md);
    margin: 1.5rem 0;
}

.experiment-objectives .section-heading {
    font-size: 1.2rem;
    margin: 0 0 0.75rem;
    color: var(--ucb-gold);
}

/* Experiment Tags */
.experiment-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.experiment-tag {
    font-size: var(--font-size-xs);
    padding: var(--spacing-1_5) var(--spacing-3);
    background: var(--color-highlight-bg);
    color: var(--color-highlight-text);
    border-radius: var(--radius-2xl);
    font-weight: 500;
}

/* Content Wrapper */
.experiment-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 3rem;
    margin-top: 2rem;
}

.experiment-main-content {
    min-width: 0;
}

/* Experiment Sidebar */
.experiment-sidebar {
    position: sticky;
    top: 2rem;
    align-self: start;
}

.experiment-sidebar .sidebar-heading {
    font-size: 1.2rem;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
}

.summary-section,
.actions-section,
.related-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Quick Info */
.quick-info-list {
    margin: 0;
}

.quick-info-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color-light);
}

.quick-info-item:last-child {
    border-bottom: none;
}

.quick-info-item dt {
    font-weight: 600;
    font-size: 0.85rem;
}

.quick-info-item dd {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* Summary Section */
.summary-content {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Action Buttons (sidebar) */
.actions-section .action-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.actions-section .action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.actions-section .action-button:hover {
    background: var(--ucb-gold);
    color: white;
    border-color: var(--ucb-gold);
}

/* Related Section */
.related-help-text {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    margin: 0;
}

/* Experiment Responsive Design */
@media (max-width: 1024px) {
    .experiment-content-wrapper {
        grid-template-columns: 1fr;
    }

    .experiment-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .experiment-title {
        font-size: 1.8rem;
    }

    .experiment-meta-bar {
        gap: 0.5rem;
    }

    .experiment-meta-item {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
}

/* Experiment Print Styles */
@media print {
    .breadcrumb,
    .experiment-sidebar,
    .experiment-tags {
        display: none;
    }

    .experiment-content-wrapper {
        grid-template-columns: 1fr;
    }

    .experiment-title {
        font-size: 2rem;
    }

    .safety-alert {
        page-break-inside: avoid;
    }
}

/* ============================================================================
   LOGIN PAGE COMPONENTS (registration/login.html)
   ============================================================================ */

.login-container {
    max-width: 500px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color-light);
    border-radius: var(--radius-sm);
}

.login-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--heading-rule-color);
}

.login-header h1 {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    color: var(--text-primary);
}

.login-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
}

.form-actions {
    margin-top: 2rem;
    /* Matches .section-card's own bottom margin, so a button row sitting
       between blocks keeps the page's rhythm instead of riding on whatever
       follows it. */
    margin-bottom: var(--spacing-8);
    display: flex;
    gap: 1rem;
    align-items: center;
}

.btn-login {
    background-color: var(--ucb-gold);
    color: var(--ucb-black);
    border: 2px solid var(--ucb-gold);
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-login:hover {
    background-color: #B89968;
    border-color: #B89968;
}

.btn-login:focus-visible {
    outline: 3px solid var(--ucb-link-blue);
    outline-offset: 2px;
}

.btn-login:active {
    transform: translateY(1px);
}

.help-text {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color-light);
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.help-text a {
    color: var(--ucb-link-blue);
    text-decoration: underline;
}

.help-text a:hover {
    color: var(--ucb-link-blue-hover);
}

.help-text a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* ============================================================================
   COURSE CONTENT PAGE COMPONENTS (courses/course_content_page.html)
   ============================================================================ */

.course-content-page {
    max-width: 900px;
    margin: 0 auto;
}

.page-header {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--border-color);
}

.page-type-badge {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
}

.page-type-tutorial {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

.page-type-syllabus {
    background: var(--color-highlight-bg);
    color: var(--color-highlight-text);
}

.page-type-faq {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.page-type-resources {
    background: var(--color-success-bg);
    color: var(--ucb-green);
}

.page-type-general {
    background: var(--bg-secondary);
    color: var(--gray-700);
}

.page-title {
    font-size: 2.25rem;
    margin: 0.5rem 0 1rem;
    line-height: 1.2;
}

.page-subtitle {
    font-size: 1.2rem;
    color: var(--text-tertiary);
    margin: 0 0 1rem;
    font-style: italic;
}

.page-description {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.page-nav {
    margin-top: 1.5rem;
}

.page-content {
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Course Content Page Responsive Design */
@media (max-width: 768px) {
    .course-content-page {
        padding: 0 1rem;
    }

    .page-title {
        font-size: 1.75rem;
    }

    .page-subtitle {
        font-size: 1.05rem;
    }
}

/* Instance Media Form Sections (Images & Documents) */
.instance-media-container {
    margin-top: 15px;
    padding: 15px;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.instance-media-summary {
    cursor: pointer;
    font-weight: 600;
    padding: 10px 0;
}

.instance-media-form-wrapper {
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.instance-media-hint {
    color: var(--text-tertiary);
    display: block;
    margin-top: 10px;
}

.instance-media-hr {
    margin: 20px 0;
    border-top: 1px solid var(--border-color);
}

/* Equipment Instance Form - Image/Document Wrappers */
.image-form-wrapper,
.document-form-wrapper {
    padding: 15px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 15px;
}

/* Activity timeline entry (equipment instance history) */
.activity-entry {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
    padding: var(--spacing-4);
    background-color: var(--bg-secondary);
    border-left: 4px solid var(--ucb-gold);
    border-radius: var(--radius-sm);
}

.activity-entry-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.activity-entry-content {
    flex: 1;
    min-width: 0;
}

.activity-entry-meta {
    display: flex;
    gap: var(--spacing-4);
    margin-top: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

/* Image gallery grid */
.image-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-4);
}

.image-gallery-grid figure {
    margin: 0;
    text-align: center;
}

.image-gallery-grid img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    object-fit: cover;
    max-height: 250px;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.image-gallery-grid img:hover {
    transform: scale(1.05);
}

.image-gallery-grid figcaption {
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-2);
}

/* Definition list styling (delete confirm, detail pages) */
.definition-list {
    background-color: var(--bg-secondary);
    padding: var(--spacing-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.definition-list dt {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    margin-bottom: var(--spacing-1);
}

.definition-list dd {
    margin-bottom: var(--spacing-4);
    font-weight: 600;
    color: var(--text-primary);
}

.definition-list dd:last-child {
    margin-bottom: 0;
}

/* Document list item (for displayed documents) */
.document-list-item {
    padding: 12px;
    background-color: var(--color-info-bg);
    border-left: 3px solid var(--ucb-link-blue);
    margin-bottom: 10px;
    border-radius: var(--radius-sm);
}

.document-list-item small {
    color: var(--text-tertiary);
}

/* Documentation file display (for already uploaded docs) */
.documentation-current-wrapper {
    background-color: var(--bg-secondary);
    padding: 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
}

.documentation-current-label {
    display: block;
    color: var(--text-tertiary);
    margin-top: 5px;
}

/* ============================================================
   TEXT & HELPER UTILITIES - For Inline Style Cleanup
   Added: October 2025
   Purpose: Replace hardcoded inline colors with themeable classes
   ============================================================ */

/* Text Size Utilities */
.text-minify {
    font-size: 0.9rem;
}

/* Text Color Utilities */
.text-tertiary {
    color: var(--text-tertiary);
}


/* Form Helper Text - Different from existing .help-text which is for section help */
.form-help-text {
    color: var(--text-secondary);
    display: block;
    margin-top: 5px;
    font-size: 0.875rem;
}

.help-text-inline {
    color: var(--text-secondary);
    margin-left: 8px;
    font-size: 0.875rem;
}

/* Required Field Indicator */
.required-indicator {
    color: var(--color-danger);
    margin-left: 2px;
    font-weight: normal;
}

/* Badge Variants - Type Badges */
.badge-custom-request {
    display: inline-block;
    background: var(--badge-warning-bg);
    color: var(--badge-warning-text);
    border: 1px solid var(--badge-warning-border);
    padding: var(--spacing-1) var(--spacing-2_5);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    margin-left: var(--spacing-2_5);
}

.badge-equipment-loan {
    display: inline-block;
    background: var(--badge-success-bg);
    color: var(--badge-success-text);
    border: 1px solid var(--badge-success-border);
    padding: var(--spacing-1) var(--spacing-2_5);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-left: var(--spacing-2_5);
}

/* Badge Variants - Calibration Status */
.badge-calibration-passed {
    background: var(--badge-success-bg);
    color: var(--badge-success-text);
    border: 1px solid var(--badge-success-border);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.badge-calibration-failed {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-text);
    border: 1px solid var(--badge-danger-border);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.badge-calibration-pending {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-text);
    border: 1px solid var(--badge-warning-border);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

/* Button Utility Classes */
.btn-block {
    display: block;
    width: 100%;
}

.btn-pagination {
    min-width: 80px;
}

/* Empty State Text */
.empty-state-text {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Caption Text */
.caption-text {
    color: var(--text-tertiary);
    font-size: 0.9em;
}

/* Tag Badge */
.tag-badge {
    display: inline-block;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 2px 8px;
    border-radius: var(--radius-xl);
    font-size: 0.8rem;
    margin-right: 5px;
    margin-bottom: 3px;
}

/* Card Header Variants live in bootstrap-overrides.css — they have to load
   after the Bootstrap CDN to beat .card-header at equal specificity. */

/* Conflict Report Card Header - Uses CSS variables for dark mode support */
.conflict-card-header {
    background-color: var(--conflict-warning-bg);
    border-bottom: 2px solid var(--conflict-warning-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conflict-card-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--conflict-warning-text);
}

/* Conflict alert box for informational messages */
.conflict-alert {
    background-color: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    border-left: 4px solid var(--conflict-warning-border);
    padding: 15px;
    margin-bottom: 30px;
}

/* ============================================================================
   AI CART BUILDER - CHAT INTERFACE
   Chat components for the AI-powered cart builder
   ============================================================================ */

/* Chat Container */
.chat-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.chat-header {
    margin-bottom: 20px;
}

.chat-header h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.chat-description {
    margin: 10px 0;
    font-size: 0.95rem;
}

.chat-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Two-column layout */
.chat-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 20px;
    align-items: start;
}

/* Desktop-only: No mobile overrides needed, mobile uses separate template */

/* Messages Container */
.chat-messages-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.chat-messages {
    border: 1px solid var(--chat-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    min-height: 400px;
    max-height: 600px;
    overflow-y: auto;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Empty state */
.chat-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.chat-empty-state p:first-child {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

/* Individual Messages */
.chat-message {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 80%;
    animation: fadeIn 0.3s ease-in-out;
}

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

.chat-message-user {
    align-self: flex-end;
}

.chat-message-assistant {
    align-self: flex-start;
}

.chat-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    margin-bottom: 5px;
}

.chat-message-sender {
    font-weight: 600;
    color: var(--text-primary);
}

.chat-message-time {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.chat-message-content {
    padding: 12px 16px;
    border-radius: var(--radius-xl);
    line-height: 1.5;
}

/* NOTE: Markdown list styling moved to bootstrap-overrides.css to ensure proper CSS cascade */

.chat-message-user .chat-message-content {
    background: var(--chat-user-bg);
    color: var(--chat-user-text);
    border-bottom-right-radius: 4px;
}

.chat-message-assistant .chat-message-content {
    background: var(--chat-assistant-bg);
    color: var(--chat-assistant-text);
    border-bottom-left-radius: 4px;
}

/* Typing Indicator */
.chat-typing-indicator {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 4px 0;
}

.chat-typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--chat-typing-dot);
    animation: typing 1.4s infinite;
}

.chat-typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.chat-typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Input Form */
.chat-input-form {
    border: 1px solid var(--chat-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    background: var(--chat-input-bg);
}

.chat-input-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.chat-input {
    flex: 1;
    min-height: 80px;
    max-height: 200px;
    padding: 12px;
    border: 1px solid var(--chat-input-border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
}

.chat-input:focus-visible {
    outline: none;
    border-color: var(--chat-input-focus-border);
    box-shadow: 0 0 0 3px rgba(29, 117, 188, 0.1);
}

.chat-send-btn {
    padding: 12px 24px;
    white-space: nowrap;
}

.chat-input-form .form-help-text {
    margin-top: 10px;
    display: block;
}

/* Tab Navigation (hidden on desktop, shown on mobile via media query) */
@media (min-width: 1024px) {
    .chat-tabs {
        display: none;
    }
}

/* Proposed Items Panel */
.chat-proposed-items-container {
    position: sticky;
    top: 20px;
    min-width: 0; /* Allow shrinking in grid/flex context */
}

.chat-proposed-items {
    border: 1px solid var(--chat-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    background: var(--bg-primary);
}

.chat-items-section {
    margin-bottom: 24px;
}

.chat-items-section-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.chat-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    min-width: 0; /* Allow list to shrink within container */
}

.chat-items-empty {
    text-align: center;
    padding: 40px 20px;
}

/* Item Cards */
.chat-item-card {
    position: relative;
    border: 1px solid var(--chat-item-border);
    border-radius: var(--radius-md);
    padding: 12px;
    padding-left: 40px; /* Space for selection indicator */
    background: var(--chat-item-bg);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
    min-width: 0; /* Allow card to shrink for text truncation */
}

/* Selected state */
.chat-item-card.chat-item-selected {
    border-color: var(--ucb-gold);
    border-left-width: 4px;
    padding-left: 37px; /* Adjust for thicker border */
    background: var(--chat-item-selected-bg);
}

/* Browse mode - gray left border when not selected */
.chat-item-card.chat-item-browse-mode:not(.chat-item-selected) {
    border-left: 4px solid var(--text-tertiary);
    padding-left: 37px;
}

/* Selection indicator (checkmark) */
.chat-item-select-indicator {
    position: absolute;
    left: 12px;
    top: 14px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: var(--ucb-gold);
}

.chat-item-card:hover,
.chat-item-card:focus-visible {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chat-item-card:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.chat-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    min-width: 0; /* Allow header to shrink within card */
}

/* Prevent badges from shrinking when direct children of header */
.chat-item-header > .badge,
.chat-item-header > [class*="badge-confidence"] {
    flex-shrink: 0;
}

.chat-item-header strong {
    flex: 1;
    min-width: 0; /* Allow text truncation */
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-item-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-item-meta {
    display: flex;
    gap: 12px;
    font-size: 0.9rem;
}

.chat-item-type {
    text-transform: capitalize;
}

/* Badge container for confidence and type badges in header */
.chat-item-badges {
    display: flex;
    flex-wrap: nowrap; /* Keep badges on one line */
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Inline type badge - subtle indicator for Demo/Equipment */
.badge-type {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: capitalize;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    border: 1px solid var(--border-color);
}

.badge-type--demo {
    color: var(--text-secondary);
}

.badge-type--equipment {
    color: var(--text-secondary);
}

.chat-item-schedule {
    margin-top: 4px;
    margin-bottom: 8px;
    padding: 4px 8px;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

/* Conflict Warning */
.chat-item-conflict-warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);           /* 8px */
    margin-top: var(--spacing-2);    /* 8px */
    margin-bottom: var(--spacing-2); /* 8px */
    padding: var(--spacing-2) var(--spacing-3); /* 8px 12px */
    background-color: var(--color-warning-bg);
    border-left: 3px solid var(--color-warning-border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.chat-conflict-icon {
    flex-shrink: 0;
    font-size: 1rem;
}

.chat-conflict-message {
    color: var(--color-warning-text);
    line-height: 1.4;
}

/* Invalid date warning on item card */
.chat-item-invalid-date-warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);           /* 8px */
    margin-top: var(--spacing-2);    /* 8px */
    margin-bottom: var(--spacing-2); /* 8px */
    padding: var(--spacing-2) var(--spacing-3); /* 8px 12px */
    background-color: var(--color-warning-bg);
    border-left: 3px solid var(--color-warning-border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.chat-warning-icon {
    flex-shrink: 0;
    font-size: 1rem;
}

.chat-warning-message {
    color: var(--color-warning-text);
    line-height: 1.4;
}

/* Instance selector conflict indicators */
.instance-selector option.instance-has-conflict {
    color: var(--color-danger);
    font-weight: 500;
}

.instance-selector option.instance-has-conflict:hover {
    background-color: var(--color-danger-bg);
}

.chat-item-course {
    font-weight: 600;
    color: var(--ucb-link-blue);
}

.chat-item-date-placeholder {
    font-style: italic;
    color: var(--ucb-gold);
}

.chat-item-date-placeholder {
    font-style: italic;
    color: var(--ucb-gold);
}

.chat-item-matches {
    font-size: 0.85rem;
}

/* Confidence Badge Colors */
.badge-confidence-80,
.badge-confidence-90,
.badge-confidence-100 {
    background: var(--badge-confidence-high);
    color: var(--badge-confidence-high-text) !important;
}

.badge-confidence-60,
.badge-confidence-70 {
    background: var(--badge-confidence-medium);
    color: var(--badge-confidence-medium-text) !important;
}

.badge-confidence-50,
.badge-confidence-40,
.badge-confidence-30,
.badge-confidence-20,
.badge-confidence-10,
.badge-confidence-0 {
    background: var(--badge-confidence-low);
    color: var(--badge-confidence-low-text) !important;
}

/* Condition Badge Colors */
.badge-excellent {
    background: var(--badge-excellent-bg);
    color: var(--badge-excellent-text) !important;
}

.badge-good {
    background: var(--badge-good-bg);
    color: var(--badge-good-text) !important;
}

.badge-fair {
    background: var(--badge-fair-bg);
    color: var(--badge-fair-text) !important;
}

.badge-poor {
    background: var(--badge-poor-bg);
    color: var(--badge-poor-text) !important;
}

/* Card content is a label wrapping the whole clickable area */
.chat-item-card-content {
    display: block;
    cursor: pointer;
    min-width: 0; /* Allow content to shrink for text truncation */
}

/* Focus styling for keyboard accessibility */
.chat-item-card:has(.chat-item-checkbox:focus-visible) {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}

.chat-selected-summary {
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin: 16px 0;
    text-align: center;
}

.chat-selected-summary p {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.chat-selected-summary strong {
    color: var(--ucb-link-blue);
}

/* Approve Form */
.chat-approve-form {
    margin-top: var(--spacing-2);      /* 8px */
    margin-bottom: var(--spacing-6);   /* 24px */
}

/* Date picker for browse mode items */
.chat-item-date-picker {
    margin-top: var(--spacing-2);
    padding: var(--spacing-2) 0;
}

.chat-date-label {
    display: block;
    font-size: 0.875rem;
    margin-bottom: var(--spacing-1);
}

.chat-date-input {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    width: 100%;
    max-width: 200px;
}

.chat-date-input:focus-visible {
    outline: none;
    border-color: var(--ucb-link-blue);
    box-shadow: 0 0 0 2px var(--chat-item-selected-glow);
}

/* Hidden date input for edit mode */
.chat-date-input-hidden {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Date edit button */
.chat-date-edit-btn {
    background: none;
    border: none;
    padding: 2px 4px;
    margin-left: 4px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.chat-date-edit-btn:hover {
    opacity: 1;
    background: var(--bg-secondary);
}

.chat-date-edit-btn:focus-visible {
    outline: 2px solid var(--ucb-link-blue);
    outline-offset: 2px;
}

.chat-date-edit-icon {
    font-size: 0.875rem;
}

/* Event selector for course date selection - two dropdown layout */
.chat-item-event-picker {
    margin-top: var(--spacing-2);
    padding: var(--spacing-2) 0;
}

.chat-event-row {
    display: flex;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

.chat-event-field {
    flex: 1;
    min-width: 140px;
}

.chat-event-label {
    display: block;
    font-size: 0.8125rem;
    margin-bottom: var(--spacing-1);
}

.chat-course-select,
.chat-date-select {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    width: 100%;
    cursor: pointer;
}

.chat-course-select:focus-visible,
.chat-date-select:focus-visible {
    outline: none;
    border-color: var(--ucb-link-blue);
    box-shadow: 0 0 0 2px var(--chat-item-selected-glow);
}

.chat-date-select:disabled,
.chat-date-input-picker:disabled {
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

/* Date picker input in event selector */
.chat-date-input-picker {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    width: 100%;
    cursor: pointer;
}

.chat-date-input-picker:focus-visible {
    outline: none;
    border-color: var(--ucb-link-blue);
    box-shadow: 0 0 0 2px var(--chat-item-selected-glow);
}

/* Date validation warning */
.chat-date-warning {
    margin-top: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-warning-bg);
    border-left: 3px solid var(--ucb-gold);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
}

.chat-date-warning .warning-icon {
    margin-right: var(--spacing-1);
}

/* ==========================================================================
   Date Picker Modal (shared by desktop and mobile chat)
   ========================================================================== */

.date-picker-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-popover);
    display: flex;
    align-items: flex-start; /* Align to top so dropdown doesn't overflow bottom */
    justify-content: center;
    padding: 16px;
    padding-top: 15vh; /* Position modal in upper portion of screen */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    overflow: hidden; /* Prevent any overflow */
}

.date-picker-backdrop--visible {
    opacity: 1;
    visibility: visible;
}

.date-picker-modal {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: 20px;
    width: 100%;
    max-width: 340px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    transform: translateY(20px);
    transition: transform var(--transition-base);
}

.date-picker-backdrop--visible .date-picker-modal {
    transform: translateY(0);
}

.date-picker__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.date-picker__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.date-picker__close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 50%;
    margin: -8px -8px -8px 0;
    transition: background var(--transition-fast);
}

.date-picker__close:hover,
.date-picker__close:focus-visible {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.date-picker__close:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}

.date-picker__item-name {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.date-picker__fields {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.date-picker__field {
    flex: 1;
}

.date-picker__label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.date-picker__select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    min-height: 44px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Use a simple CSS triangle instead of SVG for better dark mode support */
    background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                      linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
    background-position: calc(100% - 16px) center, calc(100% - 11px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

.date-picker__select:focus-visible {
    outline: none;
    border-color: var(--ucb-gold);
    box-shadow: 0 0 0 2px rgba(29, 117, 188, 0.15);
}

/* Full-width field (for course selector) */
.date-picker__field--full {
    flex: 0 0 100%;
    width: 100%;
}

/* Warning message for invalid dates */
.date-picker__warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--color-warning-bg);
    border-left: 3px solid var(--color-warning-border);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--color-warning-text);
    line-height: 1.4;
}

.date-picker__warning .warning-icon {
    flex-shrink: 0;
}

/* Date preview */
.date-picker__preview {
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    text-align: center;
}

.date-picker__preview-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.date-picker__preview-date {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Month Navigation */
.date-picker__month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.date-picker__month-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.date-picker__month-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-primary);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

.date-picker__month-btn:hover {
    background: var(--calendar-hover-bg);
}

.date-picker__month-btn:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}

.date-picker__month-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Calendar Grid */
.date-picker__calendar {
    margin-bottom: 16px;
}

.date-picker__calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
    text-align: center;
}

.date-picker__calendar-header span {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    padding: 4px 0;
}

.date-picker__calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.date-picker__calendar-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    position: relative;
    padding: 0;
}

.date-picker__calendar-cell:hover:not(.date-picker__calendar-cell--past):not(.date-picker__calendar-cell--empty) {
    background: var(--calendar-hover-bg);
}

.date-picker__calendar-cell:focus-visible {
    outline: 2px solid var(--focus-outline-color);
    outline-offset: 2px;
}

.date-picker__calendar-cell--empty {
    cursor: default;
}

.date-picker__calendar-cell--past {
    opacity: 0.35;
    cursor: default;
}

.date-picker__calendar-cell--today {
    box-shadow: inset 0 0 0 2px var(--calendar-today-ring);
}

.date-picker__calendar-cell--selected {
    background: var(--calendar-selected-bg);
    color: var(--calendar-selected-text);
    font-weight: 600;
}

.date-picker__calendar-cell--selected:hover {
    background: var(--calendar-selected-bg);
}

.date-picker__calendar-cell--class-day::after {
    content: '';
    position: absolute;
    bottom: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--calendar-class-dot);
}

.date-picker__calendar-cell--selected.date-picker__calendar-cell--class-day::after {
    background: var(--calendar-selected-text);
}

.date-picker__actions {
    display: flex;
    gap: 12px;
}

.date-picker__actions .btn {
    flex: 1;
    min-height: 44px;
}

/* Dark mode */
[data-theme="dark"] .date-picker-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .date-picker__select {
    background-color: var(--bg-secondary);
    /* Arrow colors are handled by CSS variables, no SVG override needed */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .date-picker-backdrop,
    .date-picker-modal {
        transition: none;
    }
}

/* Dark mode support for date/event inputs */
[data-theme="dark"] .chat-date-input,
[data-theme="dark"] .chat-date-input-picker {
    background: var(--bg-secondary);
    border-color: var(--gray-600);
    color-scheme: dark;
}

[data-theme="dark"] .chat-course-select,
[data-theme="dark"] .chat-date-select,
[data-theme="dark"] .chat-date-input-picker,
[data-theme="dark"] .chat-event-popup-course,
[data-theme="dark"] .chat-event-popup-date,
[data-theme="dark"] .chat-event-popup-date-picker {
    background: var(--bg-secondary);
    border-color: var(--gray-600);
}

[data-theme="dark"] .chat-date-select:disabled,
[data-theme="dark"] .chat-date-input-picker:disabled,
[data-theme="dark"] .chat-event-popup-date:disabled,
[data-theme="dark"] .chat-event-popup-date-picker:disabled {
    background: var(--gray-800);
}

[data-theme="dark"] .chat-event-modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .chat-event-popup {
    background: var(--bg-secondary);
    border-color: var(--gray-600);
}

.chat-browse-mode-notice {
    padding: var(--spacing-4);
    background: var(--bg-secondary);
    border-left: 4px solid var(--ucb-gold);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
}

.chat-browse-mode-notice p {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
}

.chat-browse-mode-notice strong {
    color: var(--text-primary);
}

.browse-mode-icon {
    flex-shrink: 0;
}

/* Disabled reason notice (invalid dates) - card style matching other notices */
.chat-disabled-reason {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--bg-secondary);
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
    font-size: 0.875rem;
    line-height: 1.5;
}

.chat-disabled-reason .warning-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
}

.chat-disabled-reason-text strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 4px;
}

/* Success toast after adding items to cart (desktop) */
.chat-toast {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 500;
    z-index: var(--z-modal);
    animation: chat-toast-in 0.3s ease, chat-toast-out 0.3s ease 3.2s forwards;
    pointer-events: none;
}

.chat-toast--success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

@keyframes chat-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes chat-toast-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Date preview in event selector modal */
.chat-event-popup-preview {
    margin-top: var(--spacing-3);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.chat-event-popup-preview-text {
    font-weight: 600;
    color: var(--text-primary);
}

/* Loading State */
.chat-loading {
    padding: 10px 0;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .chat-toast {
        animation: none;
    }

    .chat-message,
    .chat-typing-indicator span {
        animation: none;
    }

    .chat-input,
    .chat-item-card {
        transition: none;
    }
}

/* NOTE: Chat dark mode variables are defined in theme-consolidated.css */

/* ==========================================
   DOCUMENTATION BROWSER - Group-based documentation system
   ========================================================================== */

/* Documentation Home - Section Cards */
.docs-intro {
    background: var(--bg-secondary);
    border-left: 4px solid var(--ucb-gold);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-8);
    border-radius: var(--radius-md);
}

.docs-intro h1 {
    margin-bottom: var(--spacing-2);
}

.docs-intro p {
    margin-bottom: 0;
}

.doc-section-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.doc-section-card:hover,
.doc-section-card:focus-visible {
    box-shadow: var(--shadow-md);
    border-color: var(--ucb-gold);
}

.doc-section-card:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.doc-section-title {
    color: var(--text-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.doc-section-icon {
    color: var(--ucb-gold);
    font-size: var(--font-size-3xl);
}

.doc-section-description {
    margin-bottom: var(--spacing-4);
}

.doc-page-list {
    list-style: none;
    padding-left: 0;
    margin-top: var(--spacing-4);
}

.doc-page-list li {
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--border-color-light);
}

.doc-page-list li:last-child {
    border-bottom: none;
}

.doc-page-link {
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--transition-base);
    font-weight: var(--font-weight-medium);
}

.doc-page-link:hover,
.doc-page-link:focus-visible {
    color: var(--ucb-gold);
    text-decoration: underline;
}

.doc-page-link:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.doc-page-count {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-left: var(--spacing-2);
}

/* No Documentation Message */
.no-docs-message {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-4);
}

.no-docs-message svg {
    width: 64px;
    height: 64px;
    margin-bottom: var(--spacing-4);
    opacity: 0.5;
}

/* Documentation Page Layout */
.docs-layout {
    display: grid;
    grid-template-columns: var(--docs-sidebar-width) 1fr;
    gap: var(--spacing-8);
    align-items: start;
}

.docs-layout-no-sidebar {
    display: block;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Desktop — hide toggle, let details/body be normal blocks.
   Don't use display:contents on <details> — browsers don't support it
   reliably because <details> has special internal rendering. */
.docs-sidebar-toggle {
    display: none;
}

@media (max-width: 992px) {
    .docs-layout {
        grid-template-columns: 1fr;
    }

    /* Course sidebar appears above content as collapsible panel */
    .course-sidebar {
        order: 0;
        margin-top: 0;
    }

    .docs-content {
        order: 1;
    }
}

/* Sidebar Navigation */
.docs-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    align-self: start;
    max-height: calc(100vh - var(--header-height) - 2rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
}

/* Mobile docs sidebar — collapsible panel above content.
   Must come after base .docs-sidebar to win the cascade. */
@media (max-width: 992px) {
    .docs-sidebar {
        order: 0;
        margin-top: 0;
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .docs-sidebar-collapse {
        display: block;
        border: var(--border-1) solid var(--border-color-light);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .docs-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--spacing-3) var(--spacing-4);
        cursor: pointer;
        list-style: none;
        font-weight: var(--font-weight-bold);
        font-size: var(--font-base);
        color: var(--text-primary);
        background: transparent;
        min-height: 44px;  /* WCAG touch target */
    }

    .docs-sidebar-toggle::-webkit-details-marker {
        display: none;
    }

    .docs-sidebar-toggle-icon {
        width: 1.25em;
        height: 1.25em;
        color: var(--text-muted);
        transition: transform var(--transition-fast);
        flex-shrink: 0;
    }

    .docs-sidebar-collapse[open] > .docs-sidebar-toggle .docs-sidebar-toggle-icon {
        transform: rotate(180deg);
    }

    .docs-sidebar-body {
        display: block;
        padding: var(--spacing-3) var(--spacing-4) var(--spacing-4);
        border-top: var(--border-1) solid var(--border-color-light);
    }

    .docs-sidebar-toggle:focus-visible {
        outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
        outline-offset: var(--focus-outline-offset);
    }

    /* Reduce grid gap for docs layout */
    .docs-layout,
    .docs-layout-with-toc {
        gap: var(--spacing-3);
    }
}

/* Custom scrollbar for webkit browsers — docs sidebar and demo TOC */
.docs-sidebar::-webkit-scrollbar {
    width: 8px;
}

.docs-sidebar::-webkit-scrollbar-track,
.demo-toc::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg);
    border-radius: var(--radius-sm);
}

.docs-sidebar::-webkit-scrollbar-thumb,
.demo-toc::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg);
    border-radius: var(--radius-sm);
}

.docs-sidebar::-webkit-scrollbar-thumb:hover,
.demo-toc::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-bg);
    height: 0;
    width: 0;
}

/* Sidebar Navigation Container */
.docs-sidebar-nav {
    margin-top: var(--spacing-2);
}

/* Collapsible Section Groups */
.docs-section-group {
    margin-bottom: var(--spacing-1);
}

.docs-section-group summary {
    cursor: pointer;
    user-select: none;
}

.docs-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    padding: var(--spacing-1) 0;
    transition: color var(--transition-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.docs-section-title:hover,
.docs-section-title:focus-visible {
    color: var(--color-link);
}

.docs-section-title:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.docs-section-title i {
    color: var(--docs-sidebar-expand-icon-color);
    width: 1em;
    font-size: 0.85em;
    margin-right: var(--spacing-1);
}

/* Collapsible Subsection Groups */
.docs-subsection-group {
    margin-left: var(--spacing-3);
    margin-top: var(--spacing-1);
}

.docs-subsection-group summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.docs-subsection-group summary::-webkit-details-marker {
    display: none;
}

.docs-subsection-group summary::marker {
    display: none;
}

.docs-subsection-title {
    font-size: 0.8em;
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-1) 0;
    padding-left: var(--spacing-2);
    transition: color var(--transition-base);
}

.docs-subsection-title:hover,
.docs-subsection-title:focus-visible {
    color: var(--color-link);
}

.docs-subsection-title:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.docs-nav-list {
    list-style: none;
    padding-left: var(--spacing-3);
    margin: 0;
    margin-top: var(--spacing-1);
}

.docs-nav-list li {
    margin-bottom: 0;
}

.docs-nav-link {
    display: block;
    padding: var(--spacing-1) var(--spacing-2);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-base);
    font-size: var(--font-size-sm);
}

.docs-nav-link:hover,
.docs-nav-link:focus-visible {
    color: var(--color-link);
}

.docs-nav-link:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.docs-nav-link.active {
    color: var(--color-link);
    font-weight: var(--font-weight-semibold);
    border-bottom: none;
}

/* Main Documentation Content */
.docs-content {
    min-width: 0;
}

.docs-page-header {
    border-bottom: var(--border-2) solid var(--heading-rule-color);
    padding-bottom: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.docs-page-title {
    color: var(--text-primary);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-2);
}

/* Title-block meta row, shared by documentation, Quarto and demo pages.
   A baseline-aligned flex row, so every item — including the icon-bearing
   download link — sits on one baseline. Wrapping keeps it readable on narrow
   screens, where the row-gap separates the wrapped lines. */
.docs-page-meta {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--spacing-4);
    row-gap: var(--spacing-1);
}
/* Markdown Content Styling - Uses existing markdown styles */
.docs-markdown-content,
.docs-readme-content {
    line-height: var(--line-height-relaxed);
}

/* Hide first h1 since title is already shown in page header */
.docs-markdown-content h1:first-child {
    display: none;
}

/* Remove top margin from first h1 in README to align with sidebar */
.docs-readme-content h1:first-child {
    margin-top: 0;
}

.docs-markdown-content h1,
.docs-markdown-content h2,
.docs-markdown-content h3,
.docs-markdown-content h4,
.docs-markdown-content h5,
.docs-markdown-content h6,
.docs-readme-content h1,
.docs-readme-content h2,
.docs-readme-content h3,
.docs-readme-content h4,
.docs-readme-content h5,
.docs-readme-content h6 {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-4);
}

.docs-markdown-content h1,
.docs-readme-content h1 { font-size: var(--font-size-4xl); }

.docs-markdown-content h2,
.docs-readme-content h2 {
    font-size: var(--font-size-3xl);
    border-bottom: var(--border-2) solid var(--heading-rule-color);
    padding-bottom: var(--spacing-2);
}

.docs-markdown-content h3,
.docs-readme-content h3 {
    font-size: var(--font-size-2xl);
    border-bottom: var(--border-1) solid var(--heading-rule-color);
    padding-bottom: var(--spacing-1);
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-3);
}

.docs-markdown-content h4,
.docs-readme-content h4 { font-size: var(--font-size-xl); }

.docs-markdown-content p,
.docs-readme-content p {
    margin-bottom: var(--spacing-6);
}

.docs-markdown-content a,
.docs-readme-content a {
    color: var(--color-link);
}

.docs-markdown-content a:hover,
.docs-markdown-content a:focus-visible,
.docs-readme-content a:hover,
.docs-readme-content a:focus-visible {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.docs-markdown-content a:focus-visible,
.docs-readme-content a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* Search Page */
.docs-search-form {
    margin-bottom: var(--spacing-4);
}

.docs-search-input {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-base);
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.docs-search-input:focus-visible {
    outline: none;
    border-color: var(--ucb-gold);
}

.search-result {
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: box-shadow var(--transition-base);
}

.search-result:hover,
.search-result:focus-visible {
    box-shadow: var(--shadow-sm);
}

.search-result:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.search-result-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-2);
}

.search-result-title a {
    color: var(--text-primary);
}

.search-result-title a:hover,
.search-result-title a:focus-visible {
    color: var(--ucb-gold);
}

.search-result-title a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.search-result-section {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-2);
}

.search-result-snippet {
    line-height: var(--line-height-relaxed);
}

.no-results {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-4);
}

/* Table of Contents Sidebar */
.docs-layout-with-toc {
    display: grid;
    grid-template-columns: 250px 1fr 250px;
    gap: var(--spacing-8);
    max-width: 1400px;
    margin: 0 auto;
    align-items: start;
}

.docs-toc {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    align-self: start;
    max-height: calc(100vh - var(--header-height) - 2rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
    scrollbar-width: none;
}

.docs-toc::-webkit-scrollbar {
    display: none;
}

.docs-toc.toc-overflowing::after {
    content: '';
    position: sticky;
    bottom: 0;
    display: block;
    height: 2rem;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--bg-primary));
}

.docs-toc h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-muted);
    margin: 0 0 var(--spacing-3) 0;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.docs-toc nav {
    margin: 0;
    padding: 0;
}

.docs-toc nav > ul {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    padding-inline-start: 0 !important;
    margin-inline-start: 0 !important;
}

.docs-toc ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.docs-toc li {
    margin: 0 0 -0.6rem 0;
    position: relative;
}

.docs-toc li:last-child {
    margin-bottom: 0;
}

.docs-toc a {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    transition: color var(--transition-base);
    display: flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.15rem 0 0.15rem var(--spacing-2);
    line-height: 1.4;
    position: relative;
}

/* Vertical line indicator - pseudo-element spans full height */
.docs-toc a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: var(--radius-sm);
    background-color: transparent;
    transition: background-color var(--transition-base);
}

.docs-toc a:hover,
.docs-toc a:focus-visible,
.docs-toc a.active {
    color: var(--color-link);
}

.docs-toc a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* TOC level indentation with connecting lines
   h2 is flush left (h1 is the page title, not in TOC)
   Use padding on <a> for indentation so border stays left-aligned */
.docs-toc .toc-level-2,
.toc-level-2 {
    margin-left: 0 !important;
}

.docs-toc .toc-level-2 a,
.toc-level-2 a {
    /* Base padding from .docs-toc a applies */
}

/* TOC Typography + Opacity Gradient */
/* h2: bold, h3: semibold + subtle muting, h4+: normal + more muted */
/* Active item always bold (600) regardless of level */

.docs-toc .toc-level-2 a,
.toc-level-2 a {
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

.docs-toc .toc-level-2 a:hover,
.docs-toc .toc-level-2 a:focus-visible,
.toc-level-2 a:hover,
.toc-level-2 a:focus-visible {
    color: var(--color-link);
}

.docs-toc .toc-level-3 a,
.toc-level-3 a {
    font-weight: 500;
    opacity: 0.9;
    padding-left: calc(var(--spacing-2) + 1rem);
}

.docs-toc .toc-level-4 a,
.toc-level-4 a {
    opacity: 0.75;
    padding-left: calc(var(--spacing-2) + 2rem);
}

.docs-toc .toc-level-5 a,
.toc-level-5 a {
    opacity: 0.65;
    padding-left: calc(var(--spacing-2) + 3rem);
}

.docs-toc .toc-level-6 a,
.toc-level-6 a {
    opacity: 0.55;
    padding-left: calc(var(--spacing-2) + 4rem);
}

/* Active TOC item - always bold with vertical indicator */
.docs-toc a.active {
    font-weight: 600 !important;
    opacity: 1 !important;
    color: var(--color-link) !important;
}

.docs-toc a.active::before {
    background-color: var(--heading-rule-color);
}

.docs-toc a.active::before {
    background-color: var(--ucb-gold);
}

/* Responsive adjustments for TOC */
@media (max-width: 1200px) {
    .docs-layout-with-toc {
        grid-template-columns: 250px 1fr;
    }

    .docs-toc {
        display: none;
    }
}

/* Collapse sidebar + content to single column at medium viewports.
   Must come after the ≤1200px rule above to override its 250px 1fr. */
@media (max-width: 992px) {
    .docs-layout-with-toc {
        grid-template-columns: 1fr;
        gap: var(--spacing-3);
    }
}

/* ============================================================================
   MOBILE TOC — Shared bottom dock bar for all content types.
   Collapsed: thin bar with grab handle docked at screen bottom.
   Expanded: slides up to reveal TOC links.
   Visibility triggered per-layout at the breakpoint where its desktop TOC hides.
   ============================================================================ */

.quarto-mobile-toc-panel,
.quarto-mobile-toc-backdrop {
    display: none;
}

/* Base styles — defined outside media queries so they apply once triggered */
.quarto-mobile-toc-panel {
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    background-color: var(--bg-primary);
    border-top: var(--border-2) solid var(--ucb-gold);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
    z-index: 1040;
    /* Collapsed: only the toggle bar peeks above viewport bottom.
       border-top (2px) + toggle padding/grab (30px) = 32px */
    transform: translateY(calc(100% - 32px));
    transition: transform 0.3s ease;
}

.quarto-mobile-toc-panel.is-open {
    transform: translateY(0);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Toggle bar — always visible as the dock handle */
.quarto-mobile-toc-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--ucb-black);
    border: none;
    cursor: pointer;
    padding: 13px 0;
    margin: 0;
    min-height: 0;
    min-width: 0;
    line-height: 0;
    width: 100%;
}

.quarto-mobile-toc-toggle:focus-visible {
    outline: 2px solid var(--ucb-gold);
    outline-offset: -2px;
}

/* Grab handle — gold pill, standard bottom-sheet affordance */
.quarto-mobile-toc-grab {
    display: block;
    width: 40px;
    height: 4px;
    background: var(--ucb-gold);
    border-radius: 2px;
}

/* Backdrop — dim background when panel is expanded */
.quarto-mobile-toc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1030;
}

.quarto-mobile-toc-backdrop.is-open {
    display: block;
}

/* Scrollable TOC links */
.quarto-mobile-toc-body {
    padding: 0 var(--spacing-4) var(--spacing-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: var(--border-1) solid var(--border-color-light);
}

.quarto-mobile-toc-body nav ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.quarto-mobile-toc-body nav a {
    display: block;
    padding: var(--spacing-2) 0 var(--spacing-2) var(--spacing-2);
    color: var(--text-secondary);
    font-size: var(--font-base);
    line-height: var(--line-height-normal);
    transition: color var(--transition-fast);
    border-left: 3px solid transparent;
}

.quarto-mobile-toc-body .toc-level-2 a {
    font-weight: 600;
    color: var(--text-primary);
}

.quarto-mobile-toc-body .toc-level-3 a {
    padding-left: calc(var(--spacing-2) + 1rem);
    font-weight: 500;
}

.quarto-mobile-toc-body .toc-level-4 a {
    padding-left: calc(var(--spacing-2) + 2rem);
}

.quarto-mobile-toc-body .toc-level-5 a {
    padding-left: calc(var(--spacing-2) + 3rem);
}

.quarto-mobile-toc-body nav a:hover,
.quarto-mobile-toc-body nav a:focus {
    color: var(--color-link);
}

.quarto-mobile-toc-body nav a.active {
    color: var(--color-link);
    font-weight: 600;
    border-left-color: var(--heading-rule-color);
}

/* Visibility triggers — each layout shows mobile TOC at its breakpoint */

/* Quarto pages without left sidebar: desktop TOC hides at ≤991px */
@media (max-width: 991px) {
    .quarto-layout-toc-only ~ .quarto-mobile-toc-panel {
        display: flex;
    }
}

/* Docs pages: desktop TOC hides at ≤1200px */
@media (max-width: 1200px) {
    .docs-layout-with-toc ~ .quarto-mobile-toc-panel {
        display: flex;
    }
}

/* Footer spacer so content clears the fixed dock strip */
@media (max-width: 1200px) {
    body:has(.quarto-mobile-toc-panel) .back-to-top {
        bottom: calc(32px + 1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .quarto-mobile-toc-panel {
        transition: none;
    }
}

@media (max-width: 768px) {
    .docs-layout,
    .docs-layout-with-toc {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   DEMO PAGE TABLE OF CONTENTS
   Sidebar TOC for demo pages - auto-generated from headings
   ===================================================== */

/* Demo TOC inside already-sticky sidebar — disable docs-toc sticky positioning */
.demo-toc-container {
    position: static;
    max-height: none;
    overflow-y: visible;
    margin-bottom: var(--spacing-6);
}

.demo-toc {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
}

.demo-toc::-webkit-scrollbar {
    width: 6px;
}

.demo-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-inline-start: 0; /* Override browser default */
}

.demo-toc li {
    margin: 0;
    position: relative;
}

.demo-toc a {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    display: block;
    padding: 0.15rem 0;
    line-height: 1.4;
    transition: color var(--transition-base);
}

.demo-toc a:hover,
.demo-toc a.active {
    color: var(--color-link);
}

.demo-toc a:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

/* TOC level indentation with connecting lines
   h2 is flush left (h1 is the page title, not in TOC) */
.demo-toc .toc-level-2 {
    padding-left: 0;
    margin-left: 0;
}

.demo-toc .toc-level-2 a {
    padding-left: 0;
}

.demo-toc .toc-level-3 {
    margin-left: 1rem;
}

.demo-toc .toc-level-3 a {
    font-weight: 500;
    opacity: 0.9;
}

.demo-toc .toc-level-4 {
    margin-left: 2rem;
}

.demo-toc .toc-level-4 a {
    opacity: 0.75;
}

/* Active TOC item - always bold */
.demo-toc a.active {
    font-weight: 600 !important;
    opacity: 1 !important;
    color: var(--color-link) !important;
}

/* Hide TOC on mobile - content is inline */
@media (max-width: 992px) {
    .demo-toc-section {
        display: none;
    }
}

/* Override section-numbering.css styles for TOC-generated IDs
   When demo-toc.js adds IDs to headings, it also adds data-toc-id attribute.
   This prevents the "#" symbol and target highlighting from appearing. */
.heading-block[data-toc-id]::before {
    content: none !important;
    display: none !important;
}

.heading-block[data-toc-id]:hover::before {
    content: none !important;
    display: none !important;
}

.heading-block[data-toc-id]:target {
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
}

.heading-block[data-toc-id]:target::before {
    content: none !important;
    display: none !important;
}

/* ==========================================
   MATH / EQUATIONS — Global overflow protection
   Ensures display math never spills outside its container.
   Applies to MathJax v2/v3, Pandoc math, and EquationBlock.
   ========================================================================== */

mjx-container[display="true"],
.MathJax_Display,
.math.display,
.equation-display,
.display-math {
    overflow-x: auto;
    overflow-y: clip;
    padding-block: 0.25rem;
    max-width: 100%;
}

/* ============================================================
   IMPERSONATION BAR - User hijack notification
   ============================================================ */

.impersonation-bar {
    background: var(--color-warning);
    color: var(--ucb-black);
    padding: 10px 20px;
    text-align: center;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 9999;
    border-bottom: 3px solid var(--color-warning-dark);
}

.impersonation-bar .impersonation-release-btn {
    background: none;
    border: none;
    color: var(--ucb-black);
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
}

/* ============================================================
   DROPDOWN MENU SECTIONS - Staff admin menu structure
   ============================================================ */

.dropdown-section-title {
    padding: 8px 16px;
    color: var(--nav-text);
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    opacity: 0.7;
}

.dropdown-section-subtitle {
    padding: 8px 16px;
    color: var(--nav-text);
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.85;
}

.ucb-navbar .dropdown-content a.dropdown-indented {
    padding-left: 32px;
}

.dropdown-icon {
    vertical-align: middle;
    margin-right: 8px;
}

/* ============================================================
   UPLOAD RESULTS - CSV upload summary and result row variants
   ============================================================ */

/* Summary card color variants (used with .stat-card) */
.summary-total {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-left-color: var(--text-tertiary);
}

.summary-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-left-color: var(--color-success);
}

.summary-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border-left-color: var(--color-warning);
}

.summary-error {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    border-left-color: var(--color-danger);
}

/* Result row backgrounds */
.result-row-success {
    background: var(--color-success-bg) !important;
}

.result-row-warning {
    background: var(--color-warning-bg) !important;
}

.result-row-error {
    background: var(--color-danger-bg) !important;
}

/* ============================================================
   DENIED REQUEST GROUP - Denied cart styling
   ============================================================ */

.denied-cart-group {
    margin-bottom: 30px;
    border: 2px solid var(--color-danger);
    border-radius: 8px;
    padding: 20px;
    background: var(--bg-secondary);
}

.denied-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 15px;
}

.denied-cart-title {
    margin: 0 0 10px 0;
    color: var(--color-danger);
}

/* ============================================================
   REJECTION REASON BOX - Staff rejection message display
   ============================================================ */

.rejection-box {
    padding: 10px;
    background: var(--bg-primary);
    border-left: 3px solid var(--color-danger);
    border-radius: 4px;
}

.rejection-box-label {
    display: block;
    margin-bottom: 5px;
    color: var(--color-danger);
    font-size: 0.9rem;
    font-weight: bold;
}

.rejection-box p {
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.9rem;
}

/* ============================================================
   RESULTS INFO FLEX - Flex layout for results bar with export
   ============================================================ */

.results-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.export-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.export-help-text {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    margin: 0;
    text-align: right;
}

@media (max-width: 768px) {
    .results-flex {
        justify-content: center;
    }
    .export-actions {
        width: 100%;
        align-items: center;
    }
    .export-help-text {
        text-align: center;
    }
}

/* =========================================================================
   Avatar — circular profile photo or initials fallback.
   Reusable across app pages (helper dashboard, account portal). The kiosk
   display has its own em-scaled .hr-avatar in display.css because it must
   track the giant per-display heading sizes; this one is fixed-size.
   ========================================================================= */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-10);
    height: var(--spacing-10);
    border-radius: var(--radius-full);
    object-fit: cover;
    overflow: hidden;
    flex: 0 0 auto;
}

.avatar--initials {
    background: var(--ucb-gold);
    color: var(--ucb-black);
    font-weight: 700;
    text-transform: uppercase;
}

/* Larger variant for the account-portal preview. */
.avatar--lg {
    width: var(--spacing-16);
    height: var(--spacing-16);
    font-size: 1.5rem;
}

/* Content download link (icon + label) in a page's title-block meta.
   Shared by Quarto course pages and the documentation pages. Uses the standard
   link color so it matches the other meta links (gold in dark, blue in light);
   the inline SVG icon uses stroke="currentColor", so it follows this color. */
/* Stays an inline box rather than inline-flex: an inline-flex element takes its
   baseline from its first flex item, which here is the icon, so the label sat
   2px above the plain-text items beside it in the meta row. As a normal inline
   link the label shares the surrounding text's baseline exactly, and the icon
   is centred against it with vertical-align. */
.content-download-link {
    color: var(--color-link);
    text-decoration: none;
}

/* Sits the icon on the text baseline so its lower edge lines up with the bottom
   of the label's letters. `middle` centres it on the x-height instead, which
   left it riding visibly low against the rest of the row. */
.content-download-link svg {
    vertical-align: baseline;
    margin-right: var(--spacing-0_5);
}

.content-download-link:hover {
    color: var(--color-link-hover);
}

.content-download-link:focus-visible {
    outline: var(--border-2) solid var(--focus-outline-color);
    outline-offset: var(--border-2);
    border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════════
   Upcoming Requests (staff dashboard) — view toggle, list chrome, calendar
   nav/legend, and the detail modal body. The calendar grid itself and its
   all-day lane live in scheduling.css alongside .cal-grid / .cal-event.
   ═══════════════════════════════════════════════════════════════════════ */

/* The card header carries the title, the per-view controls (dynamic: list
   range/empty OR calendar week-nav + legend), and the List/Calendar tabs.
   It wraps gracefully when the row gets tight. */
.upcoming-header {
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

/* Centered section title flanked by the left controls and the right tab/action
   group. The two flanks grow equally (flex-basis 0), so the title lands at the
   container's center regardless of each flank's content width. Visual order is
   controls / title / actions via `order`, while the <h2> stays first in the
   DOM so it still reads as the section heading. */
.upcoming-header > h2 {
    order: 2;
    flex: 0 0 auto;
    text-align: center;
}

.upcoming-header-dynamic {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.upcoming-view-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
}

.upcoming-header-right {
    order: 3;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

/* View toggle reuses the shared .stats-tabs / .stats-tab tab pattern for a
   native look, compact (content-width) in the header. */
.upcoming-tabs {
    border-bottom: 0;
    gap: var(--spacing-1);
}

.upcoming-tabs .stats-tab {
    flex: 0 0 auto;
    padding: var(--spacing-1) var(--spacing-3);
    /* Balance the 2px active underline with a transparent top border so the
       label sits at the same vertical center as the other header items. */
    border-top: var(--border-2) solid transparent;
}

/* ── List controls (in the header) ──────────────────────────────────── */
/* The range dropdown is an inline header control, so it sizes to its content
   rather than the Bootstrap default full width (which would wrap the toggle). */
.upcoming-view-controls .form-select {
    width: auto;
    margin: 0;
}

.upcoming-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0;
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.upcoming-day {
    margin-top: var(--spacing-5);
}

.upcoming-day:first-of-type {
    margin-top: var(--spacing-2);
}

.upcoming-day--empty {
    opacity: 0.7;
}

.upcoming-day__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    font-size: var(--font-md);
}

.upcoming-day__head--today .upcoming-day__date {
    color: var(--ucb-gold);
}

.upcoming-day__dot {
    flex: none;
    width: var(--spacing-2);
    height: var(--spacing-2);
    border-radius: var(--radius-full);
    background-color: var(--ucb-gold);
}

.upcoming-day__none,
.upcoming-empty {
    padding: var(--spacing-2) 0;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* ── Calendar week nav + legend (in the header) ─────────────────────── */
.upcoming-cal-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.upcoming-cal__weeklabel {
    font-size: var(--font-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.upcoming-cal__navbtn {
    min-width: var(--spacing-9);
}

/* The prev/Today/next buttons stay together as one unit so they never split
   across rows: when the row gets tight the whole group wraps to the next line,
   not an individual arrow. */
.upcoming-cal__navbtns {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* On phones, drop the week label onto its own line with the button group
   beneath it, rather than squeezing label + buttons onto a wrapping row. */
@media (max-width: 480px) {
    .upcoming-cal-nav {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* On narrower viewports the centered three-column header crushes each flank to
   roughly a third of the row, which forces the calendar week-nav
   (label ‹ Today ›) to wrap mid-row. Below the desktop breakpoint, stack the
   groups so the nav and list controls each get the full width and stay intact.
   The <h2> stays first in the DOM (heading order) and simply reads left. */
@media (max-width: 1200px) {
    .upcoming-header {
        flex-direction: column;
        align-items: stretch;
    }

    .upcoming-header > h2,
    .upcoming-header-dynamic,
    .upcoming-header-right {
        order: 0;
        flex: 0 0 auto;
        text-align: left;
        justify-content: flex-start;
    }
}

/* ── Detail modal body ──────────────────────────────────────────────── */
.upcoming-detail {
    padding: var(--spacing-5);
}

.upcoming-detail__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.upcoming-detail__title {
    margin: 0 0 var(--spacing-2);
    font-size: var(--font-xl);
}

.upcoming-detail__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
}

.upcoming-detail__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--spacing-8);
    height: var(--spacing-8);
    font-size: var(--font-2xl);
    line-height: 1;
    color: var(--color-text-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-base);
}

.upcoming-detail__close:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-tertiary);
}

.upcoming-detail__close:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.upcoming-detail__meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--spacing-2) var(--spacing-4);
    margin: 0 0 var(--spacing-4);
    font-size: var(--font-sm);
}

.upcoming-detail__meta dt {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
}

.upcoming-detail__meta dd {
    margin: 0;
    color: var(--color-text-primary);
}

/* Muted sub-line under a value (email, time). */
.upcoming-detail__sub {
    display: block;
    color: var(--color-text-secondary);
    font-size: var(--font-xs);
}

.upcoming-detail__subhead {
    margin: 0 0 var(--spacing-2);
    padding-top: var(--spacing-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
}

.upcoming-detail__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.upcoming-detail__item-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-2);
}

.upcoming-detail__item-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.upcoming-detail__instances {
    list-style: none;
    margin: var(--spacing-1) 0 0;
    padding: 0 0 0 var(--spacing-3);
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
}

.upcoming-detail__instances li {
    padding: var(--spacing-0_5) 0;
}

/* =========================================================================
   FILTER CHIPS (.schedule-chips / .schedule-chip)
   Rounded two-state filter pills shared by the staff schedule and the help
   room schedule. Lives here rather than scheduling.css because that file is
   page-scoped to the staff calendar while these are used on both surfaces —
   one definition, per CSS Law #3.
   ========================================================================= */
/* ── Event-type filter chips ────────────────────────────────────────── */
.schedule-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    margin: var(--spacing-3) 0;
}

/* The row nested inside another flex row (the help room schedule's filter
   toolbar) rather than standing alone as its own band. The parent's gap does
   the spacing, so the standalone vertical margin above would only re-add the
   band the toolbar exists to remove. */
.schedule-chips--inline {
    margin: 0;
}

.schedule-chip {
    padding: var(--spacing-1) var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background-color: var(--color-bg-primary);
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
    text-decoration: none;
    transition: background-color 120ms, color 120ms, border-color 120ms;
}

.schedule-chip:hover,
.schedule-chip:focus-visible {
    border-color: var(--color-border-hover);
    color: var(--color-text-primary);
}

/* Active filter uses the brand "active navigation" treatment (gold). The
   :hover/:focus-visible variants are listed so the active treatment survives
   hover: .schedule-chip:hover is (0,2,0) and would otherwise outrank a bare
   .schedule-chip--active at (0,1,0) and repaint the text mid-hover. */
.schedule-chip--active,
.schedule-chip--active:hover,
.schedule-chip--active:focus-visible {
    background-color: var(--nav-active-bg);
    color: var(--nav-active-text);
    border-color: var(--nav-active-bg);
    font-weight: var(--font-weight-medium);
}

/* When a course is VISIBLE its chip wears the course color — the full course
   tint matching the calendar blocks, so the filter reads as the same color
   language as the grid. A HIDDEN course falls back to the neutral chip
   (base rule): "greyed = off" is both clearer UX and avoids a low-contrast
   colored outline on a near-white page. --course-hue is supplied inline per
   chip; saturation/lightness come from the shared --course-* theme tokens, so
   it adapts to light/dark. Text stays primary — never course-colored — so
   contrast holds on every hue. This overrides the default gold active state
   for course chips only. */
.schedule-chip--course.schedule-chip--active {
    background-color: hsl(var(--course-hue) var(--course-sat) var(--course-tint-l));
    border-color: hsl(var(--course-hue) var(--course-sat) var(--course-border-l));
    color: var(--color-text-primary);
}