/**
 * 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);
}

.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);
}

.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);
}

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

.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);
}

/* ==========================================
   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;
}

.ranking-item:hover,
.ranking-item:focus-visible {
    background: var(--color-muted-light);
    transform: translateX(4px);
}

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

.rank-number {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--ucb-gold);
    min-width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.rank-number.rank-gold {
    color: var(--ucb-amber);
}

.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;
}

/* ==========================================
   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);
}

.leaderboard-table .top-1 {
    background: linear-gradient(to right, var(--ucb-light-gold), var(--bg-primary));
}

.leaderboard-table .top-2 {
    background: linear-gradient(to right, var(--bg-secondary), var(--bg-primary));
}

.leaderboard-table .top-3 {
    background: linear-gradient(to right, var(--color-warning-bg), var(--bg-primary));
}

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

.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);
}

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

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

.section-card {
    background: var(--card-bg);
    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: 3px solid var(--ucb-gold);
    padding-bottom: var(--spacing-2);
}

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

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

.cta-section {
    margin: var(--spacing-16) 0 var(--spacing-8);
    background: linear-gradient(135deg, var(--ucb-gold) 0%, var(--ucb-light-gold) 100%);
    border-radius: var(--radius-xl);
    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(--ucb-black);
}

.cta-content p {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    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;
    gap: var(--spacing-4);
    list-style: none;
}

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

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

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

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

.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-hero {
    text-align: center;
    margin-bottom: var(--spacing-8);
    padding: var(--spacing-8) var(--spacing-4);
    background: var(--bg-tertiary);
    border-radius: var(--radius-xl);
    border-top: 3px solid var(--ucb-gold);
}

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

.courses-hero p {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-lg);
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    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-8);
    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,
a.course-card:link,
a.course-card:visited {
    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(--color-info);
}

.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);
}

/* 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-8);
    margin-top: var(--spacing-8);
}

/* 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);
}

/* Section card color variants for home page navigation */
.section-demos:hover,
.section-demos:focus-visible {
    border-color: var(--ucb-gold);
    background: linear-gradient(135deg, var(--ucb-gold) 0%, var(--ucb-gold-dark) 100%);
    color: white;
}

.section-equipment:hover,
.section-equipment:focus-visible {
    border-color: var(--color-warning);
    background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
    color: white;
}

.section-courses:hover,
.section-courses:focus-visible {
    border-color: var(--color-info);
    background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-text) 100%);
    color: var(--ucb-white);
}

.section-staff:hover,
.section-staff:focus-visible {
    border-color: var(--color-success);
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    color: white;
}

.section-admin:hover,
.section-admin:focus-visible {
    border-color: var(--ucb-link-blue);
    background: linear-gradient(135deg, var(--ucb-link-blue) 0%, var(--ucb-link-blue-hover) 100%);
    color: white;
}

.section-demos:focus-visible,
.section-equipment:focus-visible,
.section-courses:focus-visible,
.section-staff:focus-visible,
.section-admin:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.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);
    color: var(--text-primary);
    opacity: 0.85;
    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);
}

/* 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);
}

.stats-link:visited {
    color: var(--ucb-black);
}

/* 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,
a.action-card:link,
a.action-card:visited {
    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,
a.demo-card:link,
a.demo-card:visited {
    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-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);
}

.demo-card-title a {
    color: var(--text-primary);
    text-decoration: none;
    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-2xs);
    }

    .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-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.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);
}

.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;
}

.featured-section-header h2 {
    margin: 0;
    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-ring);
    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(--color-bg-hover));
    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: white;
    border-color: var(--btn-primary-bg);
}

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

/* ============================================================
   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="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(--input-focus-border);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

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

.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;
}

/* ============================================================
   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-8) var(--spacing-5);
}

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

.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 heading aligns with sidebar top */
.demo-main-content > :first-child h2,
.demo-main-content > h2:first-child {
    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;
}

.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;
    order: 1;
    min-width: 0;
}

.demo-detail-layout .demo-sidebar {
    flex: 0 0 350px;
    order: 2;
    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: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.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;
    text-decoration: none;
}

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

/* 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: stack on mobile for demo detail layout */
@media (max-width: 992px) {
    .demo-detail-layout {
        flex-direction: column;
    }

    .demo-detail-layout .demo-main-content {
        order: 2;
    }

    .demo-detail-layout .demo-sidebar {
        order: 1;
        position: relative;
        top: 0;
        max-height: none;
        overflow-y: visible;
        flex: 1 1 auto;
    }
}

/* Equipment list links - ensure all links are blue (visited and non-visited) */
.equipment-name a,
.equipment-name a:visited {
    color: var(--color-link);
}

/* 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-6);
    margin-bottom: var(--spacing-8);
}

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

.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);
}

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

.equipment-section,
.quick-info-section,
.related-section,
.reservation-history-section,
.requirements-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

/* 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;
    padding: 0;
    border: none;
}

.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-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: var(--spacing-4) 0 var(--spacing-2);
    padding-bottom: var(--spacing-1);
    border-bottom: 1px solid var(--border-color);
}

.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-2) var(--spacing-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-1);
}

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

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

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

.requirements-item-name {
    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);
    text-decoration: none;
}

.requirements-item-name a:visited {
    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-2xs);
    padding: var(--spacing-0_5) var(--spacing-1_5);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.requirements-badge-optional {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.requirements-badge-instance {
    background: var(--color-info-bg);
    border: 1px solid var(--color-info);
    color: var(--color-info-text);
}

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

.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-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);
    text-decoration: none;
}

.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-2xs);
    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);
    text-decoration: none;
}

.equipment-name a:visited {
    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-2xs);
    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-2xs);
    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:visited {
    color: var(--ucb-black);
}

.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);
    text-decoration: none;
    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(--color-bg-hover));
}

.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-2xs);
    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);
    text-decoration: none;
}

.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);
    text-decoration: none;
}

.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);
}

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

.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(--input-focus-border);
    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;
    align-items: center;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--spacing-3) var(--spacing-3);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-base);
    text-align: center;
    cursor: pointer;
    box-shadow: none;
    /* Fix sub-pixel rendering artifacts at rounded corners */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.equipment-card:hover,
.equipment-card:focus-visible {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--ucb-gold);
    background: linear-gradient(135deg, var(--ucb-gold) 0%, var(--ucb-gold-dark) 100%);
    color: white;
}

.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 .equipment-name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: inherit;
    line-height: 1.3;
}

.equipment-card .equipment-model {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-2_5);
}

.equipment-card .equipment-category {
    display: inline-block;
    background: var(--color-muted-light);
    padding: var(--spacing-1) var(--spacing-2_5);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-2_5);
}

.equipment-card:hover .equipment-category {
    background: var(--ucb-gold-dark);
    color: var(--ucb-white);
}

.equipment-card .equipment-availability {
    margin-top: var(--spacing-2);
    padding-top: var(--spacing-2);
    border-top: 1px solid var(--border-color);
}

/* Availability Badges */
.availability-badge {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2_5);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.availability-badge.available {
    background: var(--color-success-light);
    color: var(--color-success-text);
}

.availability-badge.limited {
    background: var(--color-warning-light);
    color: var(--color-warning-text);
}

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

.equipment-card:hover .availability-badge {
    background: var(--bg-primary);
    color: var(--ucb-gold-dark);
}

/* =====================================================
   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:visited {
    color: var(--text-primary);
}

.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-pill);
    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(--color-bg-hover);
}

/* 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(--gray-700);
    color: var(--ucb-white);
    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;
    border-bottom: none;
}

.staff-container .section-header h2,
.staff-container .section-header h3 {
    margin: 0;
    font-size: var(--font-size-2xl);
    color: inherit;
}

/* 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(--gray-900);
    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);
}

/* 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);
    text-decoration: none;
}

.staff-table a:not(.table-action):visited {
    color: var(--color-link-visited);
}

/* Page tree (portal page visibility) */
.page-tree-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}

.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;
}

.page-tree-link:focus-visible {
    outline: var(--border-2) solid var(--focus-ring-color);
    outline-offset: var(--border-1);
    border-radius: var(--radius-xs);
}

.page-tree-row-override td:first-child {
    box-shadow: inset 3px 0 0 var(--color-accent);
}

.page-tree-row-inherited td {
    color: var(--text-secondary);
}

.visibility-datetime-field {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.visibility-datetime-field .form-control {
    max-width: 200px;
}

.staff-table td.page-tree-actions {
    display: table-cell;
}

.page-tree-actions .action-buttons {
    display: inline-flex;
    gap: var(--spacing-1);
}

.page-tree-visibility-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-1);
    font-size: 0.85em;
}

/* 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.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);
    text-decoration: none;
    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-primary);
}

/* 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 */
.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    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;
    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);
    text-decoration: none;
}

.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: 768px) {
    .staff-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   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-pill);
    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-pill);
    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-pill);
    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(--color-bg-hover));
}

.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);
    text-decoration: none;
    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);
    text-decoration: none;
}

.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%;
    /* 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 {
    display: flex;
    gap: var(--spacing-2_5);
    justify-content: flex-end;
}

/* ========================================
   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;
}

.reservations-table a {
    text-decoration: none;
}

.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);
    text-decoration: none;
    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);
    text-decoration: none;
}

.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);
}

.quick-info-section,
.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;
    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-secondary {
    color: var(--text-secondary);
}

.text-tertiary {
    color: var(--text-tertiary);
}

.text-muted {
    color: var(--text-tertiary);
    font-style: italic;
}

.text-danger {
    color: var(--color-danger));
}

.text-info {
    color: var(--color-info);
}

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

/* 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 */
.card-header-warning {
    background-color: var(--color-warning);
    color: var(--color-dark);
}

/* 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;
}

/* ==========================================
   TOM SELECT (Searchable Dropdowns)
   ========================================================================== */

/* Wrapper reset for Bootstrap form controls */
.ts-wrapper.form-control,
.ts-wrapper.form-select {
    padding: 0;
}

/* Control input styling */
.ts-control {
    min-height: 38px;
    background: var(--form-bg);
    color: var(--text-primary);
    border: 1px solid var(--form-border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
}

.ts-control:focus-visible {
    border-color: var(--form-border-focus);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(207, 184, 124, 0.25);
}

/* Dropdown menu */
.ts-dropdown {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    margin-top: 4px;
    z-index: 100;
}

/* Dropdown options */
.ts-dropdown .option {
    padding: 8px 12px;
    color: var(--text-primary);
}

.ts-dropdown .option:hover {
    background: var(--bg-secondary);
}

.ts-dropdown .option.active {
    background: var(--ucb-gold);
    color: var(--ucb-black);
}

.ts-dropdown .option.selected {
    background: var(--bg-tertiary);
}

/* Dropdown input for searching */
.ts-dropdown-content {
    max-height: 300px;
    overflow-y: auto;
}

/* Placeholder text */
.ts-control input::placeholder {
    color: var(--text-tertiary);
}

/* ============================================================================
   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(--warning-bg);
    border-left: 3px solid var(--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(--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(--warning-bg);
    border-left: 3px solid var(--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(--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(--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(--primary-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-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-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-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-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-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(--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(--primary-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(--primary-color);
    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(--warning-bg);
    border-left: 3px solid var(--warning-border);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--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(--status-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 — shared across docs sidebar, docs TOC, demo TOC */
.docs-sidebar::-webkit-scrollbar,
.docs-toc::-webkit-scrollbar {
    width: 8px;
}

.docs-sidebar::-webkit-scrollbar-track,
.docs-toc::-webkit-scrollbar-track,
.demo-toc::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg);
    border-radius: var(--radius-sm);
}

.docs-sidebar::-webkit-scrollbar-thumb,
.docs-toc::-webkit-scrollbar-thumb,
.demo-toc::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg);
    border-radius: var(--radius-sm);
}

.docs-sidebar::-webkit-scrollbar-thumb:hover,
.docs-toc::-webkit-scrollbar-thumb:hover,
.demo-toc::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-bg);
}

/* Hide scrollbar arrow buttons */
.docs-toc::-webkit-scrollbar-button {
    display: none;
    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:visited {
    color: var(--text-secondary);
}

.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);
}

.docs-page-meta {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.docs-page-meta span {
    margin-right: var(--spacing-4);
}

/* 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);
    text-decoration: none;
}

.docs-markdown-content a:visited,
.docs-readme-content a:visited {
    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);
}

/* Page Navigation (Previous/Next) */
.docs-page-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-12);
    padding-top: var(--spacing-8);
    border-top: 2px solid var(--border-color);
    gap: var(--spacing-4);
}

.docs-nav-button {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-base);
    flex: 1;
    max-width: 45%;
}

.docs-nav-button:hover,
.docs-nav-button:focus-visible {
    border-color: var(--ucb-gold);
    box-shadow: var(--shadow-sm);
}

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

.docs-nav-button.next {
    text-align: right;
    align-items: flex-end;
}

.docs-nav-button-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-2);
}

.docs-nav-button-title {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

@media (max-width: 768px) {
    .docs-page-navigation {
        flex-direction: column;
    }

    .docs-nav-button {
        max-width: 100%;
    }

    .docs-nav-button.next {
        text-align: left;
        align-items: flex-start;
    }
}

/* Public Landing Page Styles */
.docs-public-landing {
    padding: 0 var(--spacing-8) var(--spacing-12) var(--spacing-8);
}

.docs-public-landing h1 {
    font-size: var(--font-size-4xl);
    margin-top: 0;
    margin-bottom: var(--spacing-8);
    text-align: center;
}

.docs-welcome-section {
    max-width: 800px;
    margin: 0 auto;
}

.docs-lead-text {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-10);
    text-align: center;
}

.docs-features {
    margin-bottom: var(--spacing-10);
    padding: var(--spacing-6);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--ucb-gold);
}

.docs-features h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-4);
}

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

.docs-features li {
    padding: var(--spacing-3) 0;
    line-height: var(--line-height-relaxed);
}

.docs-features li strong {
    color: var(--text-primary);
}

.docs-login-prompt {
    text-align: center;
    padding: var(--spacing-8);
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    margin-bottom: var(--spacing-8);
}

.docs-login-prompt svg {
    color: var(--ucb-gold);
}

.docs-login-prompt p {
    margin: var(--spacing-4) 0 var(--spacing-8) 0;
}

.docs-login-prompt strong {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
}

.docs-footer-info {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.docs-footer-info p {
    margin: 0;
}

/* 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);
    text-decoration: none;
}

.search-result-title a:visited {
    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: thin;
    scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
}

.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);
    text-decoration: none;
    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:visited {
    color: var(--text-secondary);
}

.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: 600;
    color: var(--text-primary);
}

.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);
    text-decoration: none;
    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-section {
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-6);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.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);
    text-decoration: none;
    font-size: var(--font-size-sm);
    display: block;
    padding: 0.15rem 0;
    line-height: 1.4;
    transition: color var(--transition-base);
}

.demo-toc a:visited {
    color: var(--text-secondary);
}

.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;
    font-weight: 600;
    color: var(--text-primary);
}

.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;
    }
}