/**
 * Dark Mode Components - Centralized Dark Mode Overrides
 *
 * This file contains common dark mode patterns extracted from templates
 * to eliminate duplicate CSS and ensure consistency.
 *
 * Patterns covered:
 * - Form elements (inputs, selects, textareas, checkboxes, date pickers)
 * - Tables (headers, rows, zebra striping)
 * - Cards and containers
 * - Modals and dialogs
 * - Info/warning/alert boxes
 * - Stats cards
 * - Helper text and labels
 *
 * @version 1.0
 * @requires theme.css
 * @author Physics Labs Web Team
 */

/* ==========================================
   FORMS - Dark Mode
   ========================================================================== */

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--form-bg);
    color: var(--form-input-text);
    border-color: var(--form-border);
}

/* Bootstrap .form-select dropdown caret - light color for dark mode */
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

[data-theme="dark"] input[type="text"]:focus-visible,
[data-theme="dark"] input[type="email"]:focus-visible,
[data-theme="dark"] input[type="number"]:focus-visible,
[data-theme="dark"] input[type="password"]:focus-visible,
[data-theme="dark"] input[type="search"]:focus-visible,
[data-theme="dark"] input[type="tel"]:focus-visible,
[data-theme="dark"] input[type="url"]:focus-visible,
[data-theme="dark"] select:focus-visible,
[data-theme="dark"] textarea:focus-visible {
    border-color: var(--form-border-focus);
    background: var(--form-bg);
    color: var(--form-input-text);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--form-placeholder-text);
}

/* Date/Time Pickers - Native HTML5 dark mode */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"] {
    color-scheme: dark;
    background: var(--form-bg);
    color: var(--form-input-text);
    border-color: var(--form-border);
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* Form labels and helper text */
[data-theme="dark"] label {
    color: var(--form-label-text);
}

[data-theme="dark"] .form-group label span {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-text,
[data-theme="dark"] .help-text,
[data-theme="dark"] small.form-text {
    color: var(--helper-text-color) !important;
}

/* Override inline styled help text */
[data-theme="dark"] span[style*="color: #666"],
[data-theme="dark"] small[style*="color: #666"],
[data-theme="dark"] br + small[style*="color: #666"],
[data-theme="dark"] td small[style*="color: #666"],
[data-theme="dark"] label small[style*="color: #666"] {
    color: var(--helper-text-color) !important;
}

/* Checkboxes and radios */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
    border-color: var(--form-border);
}

[data-theme="dark"] input[type="checkbox"]:checked,
[data-theme="dark"] input[type="radio"]:checked {
    background-color: var(--ucb-gold);
    border-color: var(--ucb-gold);
}

/* File input - Choose file button */
[data-theme="dark"] input[type="file"] {
    background-color: var(--form-bg) !important;
    color: var(--form-input-text) !important;
}

[data-theme="dark"] input[type="file"]::file-selector-button {
    background-color: var(--gray-800) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    cursor: pointer !important;
    padding: 5px 15px !important;
}

[data-theme="dark"] input[type="file"]::file-selector-button:hover {
    background-color: var(--gray-700) !important;
    color: var(--text-primary) !important;
}

/* ==========================================
   TABLES - Dark Mode
   ========================================================================== */

[data-theme="dark"] table {
    background: var(--table-row-bg);
    border-color: var(--table-border);
}

[data-theme="dark"] table thead {
    background: var(--table-header-bg);
    color: var(--table-header-text);
}

[data-theme="dark"] table thead th {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    border-color: var(--table-border);
}

[data-theme="dark"] table tbody tr {
    background: var(--table-row-bg);
    color: var(--text-secondary);
}

[data-theme="dark"] table tbody tr:nth-child(even) {
    background: var(--table-row-alt-bg);
}

[data-theme="dark"] table tbody tr:hover {
    background: var(--table-row-hover-bg);
}

[data-theme="dark"] table td,
[data-theme="dark"] table th {
    border-color: var(--table-border);
    color: var(--text-secondary);
}

/* Bootstrap table classes */
[data-theme="dark"] .table {
    color: var(--text-secondary);
    border-color: var(--table-border);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background: var(--table-row-bg);
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
    background: var(--table-row-alt-bg);
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background: var(--table-row-hover-bg);
}

/* ==========================================
   CARDS & CONTAINERS - Dark Mode
   ========================================================================== */

[data-theme="dark"] .card {
    background: var(--bg-elevated);
    border-color: var(--border-color-hover);
}

[data-theme="dark"] .card-header {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-color-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .card-body {
    background: var(--card-bg);
}

/* Nav tabs in dark mode */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
    border-color: transparent;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--text-primary);
    border-color: var(--border-color) var(--border-color) transparent;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--text-primary);
    background-color: var(--card-bg);
    border-color: var(--border-color) var(--border-color) var(--card-bg);
}

[data-theme="dark"] .card-footer {
    background: var(--bg-elevated);
    border-color: var(--card-border);
    color: var(--text-secondary);
}

/* Stats cards with inline background colors */
[data-theme="dark"] .card[style*="background-color: #f8f9fa"],
[data-theme="dark"] .card[style*="background-color:#f8f9fa"] {
    background-color: var(--stats-card-bg) !important;
    border-color: var(--stats-card-border) !important;
}

[data-theme="dark"] .card[style*="background-color: #f8f9fa"] .card-body,
[data-theme="dark"] .card[style*="background-color:#f8f9fa"] .card-body {
    color: var(--stats-card-text) !important;
}

/* ==========================================
   MODALS & DIALOGS - Dark Mode
   ========================================================================== */

[data-theme="dark"] .modal-content {
    background: var(--modal-bg);
    border-color: var(--modal-border);
}

[data-theme="dark"] .modal-header {
    background: var(--modal-header-bg);
    color: var(--modal-header-text);
    border-color: var(--modal-border);
}

[data-theme="dark"] .modal-header .modal-title,
[data-theme="dark"] .modal-header .btn-close {
    color: var(--modal-header-text);
}

[data-theme="dark"] .modal-body {
    background: var(--modal-bg);
}

[data-theme="dark"] .modal-footer {
    background: var(--modal-bg);
    border-color: var(--modal-border);
}

[data-theme="dark"] .modal-backdrop {
    background-color: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.7));
}

/* ==========================================
   INFO/WARNING/ALERT BOXES - Dark Mode
   ========================================================================== */

/* Info boxes (blue) - inline style override */
[data-theme="dark"] div[style*="background-color: #e7f3ff"],
[data-theme="dark"] div[style*="background-color:#e7f3ff"] {
    background-color: var(--info-box-bg) !important;
    border-left-color: var(--info-box-border) !important;
    color: var(--info-box-text) !important;
}

/* Warning boxes (yellow) - inline style override */
[data-theme="dark"] div[style*="background-color: #fff9c4"],
[data-theme="dark"] div[style*="background-color:#fff9c4"] {
    background-color: var(--warning-box-bg) !important;
    border-left-color: var(--warning-box-border) !important;
    color: var(--warning-box-text) !important;
}

/* Bootstrap alerts */
[data-theme="dark"] .alert-info {
    background: var(--alert-info-bg);
    color: var(--alert-info-text);
    border-color: var(--alert-info-border);
}

[data-theme="dark"] .alert-warning {
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    border-color: var(--alert-warning-border);
}

[data-theme="dark"] .alert-danger {
    background: var(--alert-danger-bg);
    color: var(--alert-danger-text);
    border-color: var(--alert-danger-border);
}

[data-theme="dark"] .alert-success {
    background: var(--alert-success-bg);
    color: var(--alert-success-text);
    border-color: var(--alert-success-border);
}

/* ==========================================
   MISC COMPONENTS - Dark Mode
   ========================================================================== */

/* Disabled elements */
[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] button:disabled {
    background: var(--form-disabled-bg) !important;
    color: var(--form-disabled-text) !important;
    border-color: var(--form-border) !important;
}

/* Loading spinners */
[data-theme="dark"] .spinner-border,
[data-theme="dark"] .spinner-grow {
    color: var(--ucb-gold);
}

/* Tooltips */
[data-theme="dark"] .tooltip .tooltip-inner {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-elevated);
    border-color: var(--card-border);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--bg-tertiary);
    color: var(--ucb-gold);
}

/* Badges and tags */
[data-theme="dark"] .badge {
    border: 1px solid transparent;
}

[data-theme="dark"] .badge-primary {
    background: var(--badge-demo-bg);
    color: var(--badge-demo-text);
    border-color: var(--badge-demo-border);
}

[data-theme="dark"] .badge-warning {
    background: var(--badge-custom-bg);
    color: var(--badge-custom-text);
    border-color: var(--badge-custom-border);
}

[data-theme="dark"] .badge-success {
    background: var(--badge-equipment-loan-bg);
    color: var(--badge-equipment-loan-text);
    border-color: var(--badge-equipment-loan-border);
}

/* Pagination */
[data-theme="dark"] .pagination .page-link {
    background: var(--bg-elevated);
    border-color: var(--card-border);
    color: var(--text-primary);
}

[data-theme="dark"] .pagination .page-link:hover {
    background: var(--bg-tertiary);
    color: var(--ucb-gold);
    border-color: var(--ucb-gold);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background: var(--ucb-gold);
    color: var(--ucb-black);
    border-color: var(--ucb-gold);
}

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb {
    background: var(--bg-elevated);
}

[data-theme="dark"] .breadcrumb-item {
    color: var(--text-secondary);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-primary);
}

[data-theme="dark"] .breadcrumb-item a {
    color: var(--color-link);
}

[data-theme="dark"] .breadcrumb-item a:hover {
    color: var(--color-link-hover);
}

/* Horizontal rules */
[data-theme="dark"] hr {
    border-color: var(--card-border);
    opacity: 0.5;
}

/* Code blocks */
[data-theme="dark"] code {
    background: var(--bg-tertiary);
    color: var(--ucb-gold);
}

[data-theme="dark"] pre {
    background: var(--bg-tertiary);
    border-color: var(--card-border);
    color: var(--text-primary);
}

/* ==========================================
   COMPONENTS - Dark Mode (from components.css)
   ========================================================================== */

/* Stat Cards */
[data-theme="dark"] .stat-card {
    background: var(--bg-elevated);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .stat-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .stat-label {
    color: var(--text-primary);
}

[data-theme="dark"] .stat-sublabel {
    color: var(--text-secondary);
}

[data-theme="dark"] .stat-card.stat-success .stat-number { color: var(--color-success-text); }
[data-theme="dark"] .stat-card.stat-info .stat-number { color: var(--color-info-text); }
[data-theme="dark"] .stat-card.stat-warning .stat-number { color: var(--color-warning-text); }
[data-theme="dark"] .stat-card.stat-danger .stat-number { color: var(--color-danger-text); }
[data-theme="dark"] .stat-card.stat-highlight .stat-number { color: var(--text-muted); }

/* Page Headers */
[data-theme="dark"] .page-header {
    background: linear-gradient(135deg, var(--gray-975) 0%, var(--bg-elevated) 100%);
}

/* Ranking Lists */
[data-theme="dark"] .ranking-item {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .ranking-item:hover {
    background: var(--gray-900);
}

[data-theme="dark"] .rank-title {
    color: var(--text-primary);
}

[data-theme="dark"] .rank-title:hover {
    color: var(--ucb-gold);
}

[data-theme="dark"] .rank-meta {
    color: var(--text-secondary);
}

[data-theme="dark"] .demo-code,
[data-theme="dark"] .equipment-code {
    background: var(--gray-800);
    color: var(--text-primary);
}

[data-theme="dark"] .request-count {
    color: var(--color-success-text);
}

/* Leaderboard Tables */
[data-theme="dark"] .leaderboard-table th {
    background: var(--gray-975);
    color: var(--ucb-gold);
    border-bottom-color: var(--border-color-hover);
}

[data-theme="dark"] .leaderboard-table td {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .leaderboard-table tr:hover {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .leaderboard-table .top-1 {
    background: linear-gradient(to right, var(--warning-box-bg), var(--bg-elevated));
}

[data-theme="dark"] .leaderboard-table .top-2 {
    background: linear-gradient(to right, var(--gray-900), var(--bg-elevated));
}

[data-theme="dark"] .leaderboard-table .top-3 {
    background: linear-gradient(to right, var(--warning-box-bg), var(--bg-elevated));
}

[data-theme="dark"] .count-badge {
    background: var(--color-success-text);
    color: var(--ucb-black);
}

/* Chart Sections */
[data-theme="dark"] .chart-section {
    background: var(--bg-elevated);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .chart-container {
    background: var(--gray-975);
}

[data-theme="dark"] .bar-value {
    color: #000; /* Keep dark on gold gradient */
}

[data-theme="dark"] .bar-label {
    color: var(--text-secondary);
}

/* Section Cards */
[data-theme="dark"] .section-card {
    background: var(--bg-elevated);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .section-card h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .section-description {
    color: var(--text-secondary);
}

/* Collapsible Sections */
[data-theme="dark"] .collapsible-section {
    background: var(--bg-elevated);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .collapsible-section summary h2 {
    color: var(--text-tertiary);
}

[data-theme="dark"] .collapsible-section[open] summary h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .collapsible-hint {
    color: var(--text-muted);
}

[data-theme="dark"] .collapsible-content {
    border-top-color: var(--border-color);
}

/* Equipment Components */
[data-theme="dark"] .equip-stat {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .equip-number {
    color: var(--color-info-text);
}

[data-theme="dark"] .equip-label {
    color: var(--text-secondary);
}

/* Equipment item background removed - no box highlight */

[data-theme="dark"] .equipment-name {
    color: var(--text-primary);
}

[data-theme="dark"] .equipment-count {
    color: var(--color-info-text);
}

/* Faculty Info */
[data-theme="dark"] .faculty-name {
    color: var(--text-primary);
}

[data-theme="dark"] .faculty-email {
    color: var(--text-secondary);
}

/* CTA Section - Keep gold background */
[data-theme="dark"] .cta-content h2,
[data-theme="dark"] .cta-content p {
    color: #222;
}

/* ==========================================
   COURSE CARDS & COMPONENTS - Dark Mode
   ========================================================================== */

[data-theme="dark"] .course-card,
[data-theme="dark"] a.course-card,
[data-theme="dark"] a.course-card:link,
[data-theme="dark"] a.course-card:visited {
    background: var(--bg-elevated);
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .course-card:hover,
[data-theme="dark"] a.course-card:hover,
[data-theme="dark"] a.course-card:focus-visible {
    border-color: var(--ucb-gold);
    color: var(--text-primary);
}

[data-theme="dark"] .course-card-description {
    color: var(--text-secondary);
}

[data-theme="dark"] .no-courses-section {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}

/* ==========================================
   FILTER & FORM COMPONENTS - Dark Mode
   ========================================================================== */

[data-theme="dark"] .filter-section {
    background: var(--bg-elevated);
}

[data-theme="dark"] .filter-group label {
    color: var(--text-primary);
}

[data-theme="dark"] .filter-group select,
[data-theme="dark"] .filter-group input[type="date"],
[data-theme="dark"] .filter-group input[type="text"] {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color-hover);
}

/* ==========================================
   INFO BANNER - Dark Mode
   ========================================================================== */

[data-theme="dark"] .results-info,
[data-theme="dark"] .info-banner {
    background: var(--color-info-bg);
}

[data-theme="dark"] .results-count,
[data-theme="dark"] .info-text {
    color: var(--color-info-text);
}

/* ==========================================
   DATA TABLES - Dark Mode
   ========================================================================== */

/* .data-table dark mode — design tokens in theme-consolidated.css handle
   header, striping, and hover automatically. Only bg-elevated override needed. */
[data-theme="dark"] .data-table {
    background: var(--bg-elevated);
}

/* ==========================================
   BADGES - Dark Mode
   ========================================================================== */

[data-theme="dark"] .demo-badge,
[data-theme="dark"] .badge {
    background: var(--badge-default-bg);
    color: var(--badge-default-text);
}

[data-theme="dark"] .badge-success {
    background: var(--badge-success-bg);
    color: var(--badge-success-text);
}

[data-theme="dark"] .badge-warning {
    background: var(--badge-intermediate-bg);
    color: var(--badge-intermediate-text);
}

[data-theme="dark"] .badge-danger {
    background: var(--badge-advanced-bg);
    color: var(--badge-advanced-text);
}

[data-theme="dark"] .badge-info {
    background: var(--badge-info-bg);
    color: var(--badge-info-text);
}

/* ==========================================
   EMPTY STATE - Dark Mode
   ========================================================================== */

[data-theme="dark"] .empty-state {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}

[data-theme="dark"] .empty-state h2 {
    color: var(--text-primary);
}

/* ==========================================
   EQUIPMENT & ITEM LISTS - Dark Mode
   ========================================================================== */

[data-theme="dark"] .equipment-item,
[data-theme="dark"] .item-list-item {
    color: var(--text-primary);
}

/* ==========================================
   LANDING PAGE / HOME PAGE - Dark Mode
   ========================================================================== */

[data-theme="dark"] .landing-header h1 {
    color: var(--text-primary);
}

[data-theme="dark"] .landing-subtitle {
    color: var(--text-secondary);
}

[data-theme="dark"] .navigation-card {
    background: var(--bg-elevated);
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .navigation-card h3,
[data-theme="dark"] .section-card p {
    color: var(--text-primary);
}

[data-theme="dark"] .homepage-content {
    background: var(--bg-elevated);
}

[data-theme="dark"] .auth-section {
    background: var(--bg-elevated);
}

[data-theme="dark"] .auth-section a {
    color: var(--color-link);
}

/* ============================================================
   DEMO COMPONENTS - Dark Mode
   ============================================================ */

/* Demo Hero Header */
[data-theme="dark"] .demo-hero {
    background: linear-gradient(135deg, var(--gray-975) 0%, var(--bg-elevated) 100%);
    border-top-color: var(--ucb-gold);
}

[data-theme="dark"] .hero-title {
    color: var(--text-primary);
}

[data-theme="dark"] .hero-subtitle {
    color: var(--text-secondary);
}

[data-theme="dark"] .hero-description {
    color: var(--text-secondary);
}

[data-theme="dark"] .stat-group {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(207, 184, 124, 0.4);
}

[data-theme="dark"] .stat-group-label {
    color: var(--ucb-gold);
}

[data-theme="dark"] .stat-number {
    color: var(--ucb-gold);
}

[data-theme="dark"] .stat-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .stats-link {
    background: var(--ucb-gold);
    color: #222;
}

[data-theme="dark"] .stats-link:hover {
    background: var(--ucb-gold-dark);
    color: #222;
}

[data-theme="dark"] .stats-link:visited {
    color: #222;
}

/* Demo Navigation */
[data-theme="dark"] .demo-nav-heading {
    color: var(--text-primary);
}

/* Quick Actions */
[data-theme="dark"] .quick-actions-section h2 {
    color: var(--text-primary);
}

/* Action cards keep gold background with black text in both modes */
[data-theme="dark"] .action-card {
    background: var(--ucb-gold);
    color: var(--ucb-black);
}

[data-theme="dark"] a.action-card,
[data-theme="dark"] a.action-card:link,
[data-theme="dark"] a.action-card:visited {
    color: var(--ucb-black) !important;
}

[data-theme="dark"] a.action-card:hover,
[data-theme="dark"] a.action-card:focus-visible,
[data-theme="dark"] .action-card-search:hover {
    background: var(--ucb-gold-dark);
    color: var(--ucb-black) !important;
}

[data-theme="dark"] .action-card h3,
[data-theme="dark"] .action-card p,
[data-theme="dark"] .action-card svg {
    color: var(--ucb-black) !important;
}

[data-theme="dark"] .action-card .action-icon {
    color: var(--ucb-black) !important;
    fill: var(--ucb-black) !important;
}

/* Search input within action card */
[data-theme="dark"] .action-search-input {
    background: var(--form-bg, var(--bg-primary));
    color: var(--form-input-text, var(--text-primary));
    border-color: var(--form-border);
}

[data-theme="dark"] .action-search-input:focus-visible {
    border-color: var(--form-border-focus, var(--ucb-gold));
    box-shadow: 0 0 0 var(--focus-outline-width, 3px) rgba(207, 184, 124, 0.25);
}

[data-theme="dark"] .action-search-input:invalid {
    border-color: var(--form-border);
}

/* Demo Cards */
[data-theme="dark"] .recent-demos-section h2 {
    color: var(--text-primary);
}

[data-theme="dark"] a.demo-card,
[data-theme="dark"] a.demo-card:link,
[data-theme="dark"] a.demo-card:visited {
    background: var(--bg-elevated);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] a.demo-card:hover,
[data-theme="dark"] a.demo-card:focus-visible {
    border-color: var(--ucb-gold);
    color: var(--text-primary);
}

[data-theme="dark"] a.demo-card .demo-card-title {
    color: var(--text-primary);
}

[data-theme="dark"] .demo-card-summary {
    color: var(--text-secondary);
}

[data-theme="dark"] .demo-card-meta {
    color: var(--text-tertiary);
}


[data-theme="dark"] .demo-number {
    color: var(--color-link);
}

/* Demo difficulty and safety badges */
[data-theme="dark"] .demo-difficulty-introductory {
    background: var(--badge-introductory-bg);
    color: var(--badge-introductory-text);
}

[data-theme="dark"] .demo-difficulty-intermediate {
    background: var(--badge-intermediate-bg);
    color: var(--badge-intermediate-text);
}

[data-theme="dark"] .demo-difficulty-advanced {
    background: var(--badge-advanced-bg);
    color: var(--badge-advanced-text);
}

[data-theme="dark"] .demo-safety-badge {
    background: var(--warning-box-bg);
    color: var(--warning-box-text);
}

/* Button Secondary */
[data-theme="dark"] .btn-gold-secondary {
    background: var(--ucb-gold);
    color: #000 !important;
}

[data-theme="dark"] .btn-gold-secondary:hover {
    background: var(--ucb-gold-dark);
    color: #000 !important;
}

/* Search Section (commented out in template, but keep for future use) */
[data-theme="dark"] .search-section {
    background: var(--bg-elevated);
    border-color: var(--ucb-gold);
}

[data-theme="dark"] .search-section h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .search-input {
    background: var(--bg-primary);
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .search-input:focus-visible {
    border-color: var(--ucb-gold);
}

[data-theme="dark"] .search-checkbox-label {
    color: var(--text-secondary);
}

/* Demo Intro Content */
[data-theme="dark"] .demo-intro-content {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Button color variants are defined in ucb-overrides.css with CSS variables */
/* Dark mode colors are defined in theme.css [data-theme="dark"] block */

/* Toggle Buttons - Dark Mode */
[data-theme="dark"] .toggle-btn {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color-hover);
}

[data-theme="dark"] .toggle-btn:hover {
    background-color: var(--gray-800);
    border-color: var(--border-color);
}

[data-theme="dark"] .toggle-btn.active {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

[data-theme="dark"] .toggle-btn.active:hover {
    background-color: #0b5ed7;
    border-color: #0b5ed7;
}

/* ============================================================
   FORMS - Dark Mode
   ============================================================ */

[data-theme="dark"] .form-group label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group input[type="text"],
[data-theme="dark"] .form-group input[type="email"],
[data-theme="dark"] .form-group input[type="date"],
[data-theme="dark"] .form-group input[type="number"],
[data-theme="dark"] .form-group textarea {
    background: var(--bg-primary);
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .form-group input:focus-visible,
[data-theme="dark"] .form-group select:focus-visible,
[data-theme="dark"] .form-group textarea:focus-visible {
    border-color: var(--ucb-gold);
    box-shadow: 0 0 0 0.2rem rgba(207, 184, 124, 0.25);
}

[data-theme="dark"] .form-control {
    background: var(--bg-primary);
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

/* ============================================================
   ALERTS - Dark Mode
   ============================================================ */

[data-theme="dark"] .alert-success {
    color: var(--alert-success-text);
    background-color: var(--alert-success-bg);
    border-color: var(--alert-success-border);
}

[data-theme="dark"] .alert-warning {
    color: var(--alert-warning-text);
    background-color: var(--alert-warning-bg);
    border-color: var(--alert-warning-border);
}

[data-theme="dark"] .alert-danger {
    color: var(--alert-danger-text);
    background-color: var(--alert-danger-bg);
    border-color: var(--alert-danger-border);
}

[data-theme="dark"] .alert-info {
    color: var(--alert-info-text);
    background-color: var(--alert-info-bg);
    border-color: var(--alert-info-border);
}

/* ============================================================
   CART COMPONENTS - Dark Mode
   ============================================================ */

[data-theme="dark"] .cart-container {
    color: var(--text-primary);
}

/* Cart table dark mode removed - now uses .reservations-table */

/* Cart conflict indicators - Keep semantic colors but adjust for dark mode */
[data-theme="dark"] .conflict-warning {
    background-color: var(--conflict-warning-bg);
    border-left-color: var(--conflict-warning-border);
    color: var(--conflict-warning-text);
}

[data-theme="dark"] .conflict-error {
    background-color: var(--conflict-error-bg);
    border-left-color: var(--conflict-error-border);
    color: var(--conflict-error-text);
}

[data-theme="dark"] .alternate-suggestion {
    background-color: var(--alternate-suggestion-bg);
    border-left-color: var(--alternate-suggestion-border);
    color: var(--alternate-suggestion-text);
}

[data-theme="dark"] .empty-cart {
    color: var(--text-muted);
}

/* ============================================================
   MODAL COMPONENTS - Dark Mode
   ============================================================ */

[data-theme="dark"] .demo-modal {
    background: var(--bg-elevated);
    border-color: var(--ucb-gold);
}

[data-theme="dark"] .demo-modal-header {
    background: var(--ucb-gold);
}

[data-theme="dark"] .demo-equipment-list {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .demo-equipment-item {
    border-color: var(--border-color-hover);
}

[data-theme="dark"] .demo-type-badge {
    background: var(--badge-demo-bg);
    color: var(--badge-demo-text);
}

/* Modal overlays with inline styles */
[data-theme="dark"] #editModal > div,
[data-theme="dark"] #sectionsModal > div {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Override inline styles for "Your Courses" section */
[data-theme="dark"] .cart-container > div[style*="background: #f9f9f9"],
[data-theme="dark"] .cart-container > div[style*="background:#f9f9f9"] {
    background: var(--bg-elevated) !important;
}

/* ============================================================
   DEMO PAGE COMPONENTS - Dark Mode
   ============================================================ */

[data-theme="dark"] .demo-header {
    border-color: var(--border-color);
}

[data-theme="dark"] .demo-number-badge {
    background: var(--badge-demo-bg);
    color: var(--badge-demo-text);
}

[data-theme="dark"] .demo-duration {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

[data-theme="dark"] .demo-safety-alert {
    background: var(--warning-box-bg);
    color: var(--warning-box-text);
}

[data-theme="dark"] .demo-title {
    color: var(--text-primary);
}

[data-theme="dark"] .demo-featured-image {
    box-shadow: var(--shadow-md, 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4));
}

/* Demo purpose - minimal styling in dark mode (no background box) */
[data-theme="dark"] .demo-purpose {
    /* Inherits minimal styling from components.css */
}

[data-theme="dark"] .section-heading {
    color: var(--ucb-gold);
}

[data-theme="dark"] .demo-tag {
    background: var(--badge-course-bg);
    color: var(--badge-course-text);
}

[data-theme="dark"] .safety-alert {
    background: var(--warning-box-bg);
    border-color: var(--color-warning);
}

[data-theme="dark"] .safety-icon {
    fill: var(--warning-box-text);
}

[data-theme="dark"] .safety-alert h2 {
    color: var(--warning-box-text);
}

[data-theme="dark"] .safety-content {
    color: var(--warning-box-text);
}

[data-theme="dark"] .sidebar-heading {
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .equipment-section,
[data-theme="dark"] .quick-info-section,
[data-theme="dark"] .related-section,
[data-theme="dark"] .reservation-history-section {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

/* Equipment item background removed - no box highlight */

[data-theme="dark"] .equipment-name a,
[data-theme="dark"] .equipment-name a:visited {
    color: var(--ucb-gold);
}

/* Removed duplicate definitions - now handled by semantic variables in components.css */
/* Demo purpose and streamfield content automatically use --text-secondary/--text-primary which adapt to dark mode */

[data-theme="dark"] .equipment-optional-badge {
    background: var(--bg-elevated);
    border-color: var(--border-color-hover);
    color: var(--text-secondary);
}

[data-theme="dark"] .equipment-instance-badge {
    background: var(--color-info-bg);
    border-color: var(--color-info);
    color: var(--color-info-text);
}

[data-theme="dark"] .equipment-quantity {
    color: var(--text-secondary);
}

[data-theme="dark"] .equipment-notes {
    color: var(--text-secondary);
}

/* Requirements Card - Dark Mode */
[data-theme="dark"] .requirements-subheading {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .requirements-item {
    background: var(--bg-secondary);
}

[data-theme="dark"] .requirements-item-quantity {
    color: var(--text-secondary);
}

[data-theme="dark"] .requirements-item-notes {
    color: var(--text-secondary);
}

[data-theme="dark"] .requirements-badge-optional {
    background: var(--bg-elevated);
    border-color: var(--border-color-hover);
    color: var(--text-secondary);
}

[data-theme="dark"] .requirements-badge-instance {
    background: var(--color-info-bg);
    border-color: var(--color-info);
    color: var(--color-info-text);
}

/* Setup Details Page - Dark Mode */
[data-theme="dark"] .setup-item-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .setup-instances-table th {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .setup-badge-quantity {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .setup-reservation-context {
    background: var(--color-info-bg);
    border-color: var(--color-info);
}

[data-theme="dark"] .setup-instance-assigned {
    background: var(--color-success-bg);
}

[data-theme="dark"] .setup-assigned-badge {
    background: var(--color-success);
}

[data-theme="dark"] .reserve-action {
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-reserve {
    background: var(--ucb-gold);
    color: #222;
}

[data-theme="dark"] .btn-reserve:hover {
    background: var(--ucb-gold-dark);
    color: #222;
}

[data-theme="dark"] .reserve-help-text {
    color: var(--text-muted);
}

[data-theme="dark"] .login-prompt {
    color: var(--text-muted);
}

[data-theme="dark"] .login-prompt a {
    color: var(--ucb-gold);
}

[data-theme="dark"] .quick-info-item {
    border-color: var(--border-color);
}

[data-theme="dark"] .quick-info-item dt {
    color: var(--text-secondary);
}

[data-theme="dark"] .quick-info-item dd {
    color: var(--text-primary);
}

[data-theme="dark"] .related-help-text {
    color: var(--text-muted);
}

[data-theme="dark"] .reservation-history-table thead {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .reservation-history-table th,
[data-theme="dark"] .reservation-history-table td {
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .reservation-history-table tbody tr:hover {
    background-color: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
}

[data-theme="dark"] .comments-row {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .comments-row:hover {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .reservation-history-description {
    color: var(--text-primary);
}

/* Higher specificity override for "No recent reservations" message */
[data-theme="dark"] .reservation-history-description.text-muted {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .reservation-comments {
    color: var(--text-secondary);
}

/* ============================================================
   CATEGORY INDEX COMPONENTS - Dark Mode
   ============================================================ */

[data-theme="dark"] .category-header {
    border-color: var(--border-color);
}

[data-theme="dark"] .category-level-area {
    background: var(--badge-info-bg);
    color: var(--badge-info-text);
}

[data-theme="dark"] .category-level-topic {
    background: var(--color-highlight-bg);
    color: var(--color-highlight-text);
}

[data-theme="dark"] .category-level-concept {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

[data-theme="dark"] .category-title {
    color: var(--text-primary);
}

[data-theme="dark"] .category-description {
    color: var(--text-secondary);
}

[data-theme="dark"] .subcategories-section h2,
[data-theme="dark"] .demonstrations-section h2,
[data-theme="dark"] .experiments-section h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .subcategory-card {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

[data-theme="dark"] .subcategory-card:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

[data-theme="dark"] .subcategory-image {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .subcategory-level-area {
    background: var(--badge-info-bg);
    color: var(--badge-info-text);
}

[data-theme="dark"] .subcategory-level-topic {
    background: var(--color-highlight-bg);
    color: var(--color-highlight-text);
}

[data-theme="dark"] .subcategory-level-concept {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

[data-theme="dark"] .subcategory-title a {
    color: var(--text-primary);
}

[data-theme="dark"] .subcategory-title a:hover {
    color: var(--ucb-gold);
}

[data-theme="dark"] .subcategory-description {
    color: var(--text-secondary);
}

[data-theme="dark"] .subcategory-link {
    color: var(--ucb-gold);
}

[data-theme="dark"] .experiment-card {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

[data-theme="dark"] .experiment-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

[data-theme="dark"] .experiment-number {
    color: var(--ucb-gold);
}

[data-theme="dark"] .experiment-difficulty-introductory {
    background: var(--badge-introductory-bg);
    color: var(--badge-introductory-text);
}

[data-theme="dark"] .experiment-difficulty-intermediate {
    background: var(--badge-intermediate-bg);
    color: var(--badge-intermediate-text);
}

[data-theme="dark"] .experiment-difficulty-advanced {
    background: var(--badge-advanced-bg);
    color: var(--badge-advanced-text);
}

[data-theme="dark"] .experiment-safety-badge {
    background: var(--warning-box-bg);
    color: var(--warning-box-text);
}

[data-theme="dark"] .experiment-card-title a {
    color: var(--text-primary);
}

[data-theme="dark"] .experiment-card-title a:hover {
    color: var(--ucb-gold);
}

[data-theme="dark"] .experiment-card-summary {
    color: var(--text-secondary);
}

[data-theme="dark"] .experiment-card-meta {
    color: var(--text-tertiary);
}

[data-theme="dark"] .empty-state {
    color: var(--text-muted);
}

[data-theme="dark"] .empty-state h3 {
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-gold {
    background: var(--ucb-gold);
    color: #222;
}

[data-theme="dark"] .btn-gold:hover {
    background: var(--ucb-gold-dark);
    color: #222;
}

/* ============================================================
   EQUIPMENT CATALOG COMPONENTS - Dark Mode
   ============================================================ */

[data-theme="dark"] .catalog-header h1 {
    color: var(--text-primary);
}

[data-theme="dark"] .search-bar input[type="text"] {
    background: var(--bg-primary);
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .search-bar input[type="text"]:focus-visible {
    border-color: var(--ucb-gold);
    box-shadow: 0 0 0 0.2rem rgba(207, 184, 124, 0.25);
}

[data-theme="dark"] .search-bar select {
    background: var(--bg-primary);
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .search-bar button {
    background: var(--badge-info-bg);
}

[data-theme="dark"] .search-bar button:hover {
    background: var(--color-info-bg);
}

[data-theme="dark"] .equipment-card {
    background: var(--bg-elevated);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .equipment-card:hover,
[data-theme="dark"] .equipment-card:focus-visible {
    background: linear-gradient(135deg, var(--ucb-gold) 0%, var(--ucb-gold-dark) 100%);
    color: var(--ucb-white);
    border-color: var(--ucb-gold);
}

[data-theme="dark"] .equipment-card .equipment-model {
    color: var(--text-secondary);
}

[data-theme="dark"] .equipment-card .equipment-category {
    background: var(--gray-800);
    color: var(--text-secondary);
}

[data-theme="dark"] .equipment-card:hover .equipment-category {
    background: var(--ucb-gold-dark);
    color: var(--ucb-white);
}

[data-theme="dark"] .equipment-card .equipment-availability {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .availability-badge.available {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

[data-theme="dark"] .availability-badge.limited {
    background: var(--warning-box-bg);
    color: var(--warning-box-text);
}

[data-theme="dark"] .availability-badge.unavailable {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

[data-theme="dark"] .equipment-card:hover .availability-badge {
    background: var(--ucb-white);
    color: var(--ucb-gold-dark);
}

[data-theme="dark"] .results-info {
    color: var(--text-secondary);
}

/* =====================================================
   EQUIPMENT DETAIL PAGE - DARK MODE
   Used in: equipment/detail.html
   ===================================================== */

[data-theme="dark"] .equipment-header {
    border-bottom-color: var(--border-color-hover);
}

[data-theme="dark"] .equipment-title {
    color: var(--text-primary);
}

[data-theme="dark"] .equipment-subtitle {
    color: var(--text-secondary);
}

[data-theme="dark"] .equipment-info {
    background: var(--bg-elevated);
    border-color: var(--border-color-hover);
}

[data-theme="dark"] .info-row {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .info-label {
    color: var(--text-primary);
}

[data-theme="dark"] .info-value {
    color: var(--text-secondary);
}

[data-theme="dark"] .add-to-cart-panel {
    background: var(--bg-elevated);
    border-color: var(--border-color-hover);
}

[data-theme="dark"] .panel-title {
    color: var(--text-primary);
}

[data-theme="dark"] .instances-list {
    background: var(--bg-elevated);
    border-color: var(--border-color-hover);
}

[data-theme="dark"] .instance-item {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .instance-info {
    color: var(--text-primary);
}

/* Equipment condition badges - dark mode */
[data-theme="dark"] .condition-excellent {
    background: var(--badge-equipment-loan-bg);
    color: var(--badge-equipment-loan-text);
}

[data-theme="dark"] .condition-good {
    background: var(--badge-demo-bg);
    color: var(--badge-demo-text);
}

[data-theme="dark"] .condition-fair {
    background: var(--badge-custom-bg);
    color: var(--badge-custom-text);
}

[data-theme="dark"] .condition-poor {
    background: var(--badge-advanced-bg);
    color: var(--badge-advanced-text);
}

[data-theme="dark"] .instances-table {
    background: var(--bg-elevated);
    border-color: var(--border-color-hover);
}

[data-theme="dark"] .instances-table th {
    background: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .instances-table td {
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .instances-table tbody tr:hover {
    background: var(--color-bg-hover);
}

/* Help text with inline colors */
[data-theme="dark"] small[style*="color: #666"] {
    color: var(--text-secondary) !important;
}

/* =====================================================
   STAFF ADMIN PAGE - DARK MODE
   Used in: staff/base_staff.html and child templates
   ===================================================== */

[data-theme="dark"] .staff-container {
    color: var(--text-primary);
}

/* Section headers */
[data-theme="dark"] .section-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .staff-container .section-header {
    background-color: var(--gray-800);
    color: var(--ucb-white);
}

/* Stat cards - use existing stat card dark mode variables */
[data-theme="dark"] .stat-card {
    background: var(--stats-card-bg);
    border-color: var(--stats-card-border);
    color: var(--stats-card-text);
}

[data-theme="dark"] .stat-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

[data-theme="dark"] .stat-number {
    color: var(--stats-card-text);
}

[data-theme="dark"] .stat-label {
    color: var(--stats-card-label);
}

/* Staff table */
/* .staff-table dark mode — design tokens in theme-consolidated.css handle
   header, striping, and hover automatically. Only bg-elevated override needed. */
[data-theme="dark"] .staff-table {
    background: var(--bg-elevated);
}

/* Status badges - dark mode */
[data-theme="dark"] .status-pending {
    background-color: var(--badge-intermediate-bg);
    color: var(--badge-intermediate-text);
}

[data-theme="dark"] .status-approved,
[data-theme="dark"] .status-success {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

[data-theme="dark"] .status-checked-out,
[data-theme="dark"] .status-info {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
}

[data-theme="dark"] .status-scheduled,
[data-theme="dark"] .status-primary {
    background-color: var(--badge-info-bg);
    color: var(--badge-info-text);
}

[data-theme="dark"] .status-completed,
[data-theme="dark"] .status-secondary {
    background-color: var(--gray-800);
    color: var(--text-secondary);
}

[data-theme="dark"] .status-danger {
    background-color: var(--color-danger-light);
    color: var(--bg-primary);
}

[data-theme="dark"] .status-warning {
    background-color: var(--badge-intermediate-bg);
    color: var(--badge-intermediate-text);
}

/* Inactive equipment instance rows */
[data-theme="dark"] .inactive-instance-row {
    background-color: var(--gray-975);
    opacity: 0.6;
}

/* Card components — consolidated into CARDS & CONTAINERS section above */

/* Empty state */
[data-theme="dark"] .empty-state {
    background: var(--bg-elevated);
    color: var(--text-muted);
}

/* Filter section */
[data-theme="dark"] .filter-section {
    background: var(--bg-tertiary);
    border-color: var(--border-color-hover);
}

/* Staff breadcrumb override */
[data-theme="dark"] nav ol.breadcrumbs .breadcrumb-item.active {
    color: var(--text-primary) !important;
}

/* Definition lists */
[data-theme="dark"] dt {
    color: var(--text-muted);
}

[data-theme="dark"] dd {
    color: var(--text-primary);
}

/* =====================================================
   PROFILE/PEOPLE DETAIL PAGE - DARK MODE
   Used in: people/detail.html
   ===================================================== */

[data-theme="dark"] .profile-header {
    background: var(--bg-elevated);
    border-color: var(--border-color-hover);
}

[data-theme="dark"] .profile-photo-large {
    background-color: var(--gray-975);
    color: var(--text-muted);
}

[data-theme="dark"] .profile-details h1 {
    color: var(--text-primary);
}

[data-theme="dark"] .profile-title {
    color: var(--text-secondary);
}

[data-theme="dark"] .contact-info {
    background: var(--gray-975);
}

[data-theme="dark"] .contact-info h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .contact-item {
    color: var(--text-primary);
}

[data-theme="dark"] .contact-item strong {
    color: var(--text-primary);
}

[data-theme="dark"] .contact-item a {
    color: var(--color-link);
}

[data-theme="dark"] .contact-item a:hover {
    color: var(--color-link-hover);
}

[data-theme="dark"] .profile-section {
    background: var(--bg-elevated);
    border-color: var(--border-color-hover);
}

[data-theme="dark"] .profile-section h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .profile-section p {
    color: var(--text-secondary);
}

[data-theme="dark"] .back-link {
    color: var(--color-link);
}

[data-theme="dark"] .back-link:hover {
    color: var(--color-link-hover);
}

[data-theme="dark"] .back-link:focus-visible {
    outline-color: var(--ucb-gold);
}

/* =====================================================
   PEOPLE DIRECTORY PAGE - DARK MODE
   Used in: people/directory.html
   ===================================================== */

[data-theme="dark"] .staff-card {
    background: var(--bg-elevated);
    border-color: var(--border-color-hover);
}

[data-theme="dark"] .staff-photo {
    background-color: var(--gray-975);
    color: var(--text-muted);
}

[data-theme="dark"] .staff-name {
    color: var(--text-primary);
}

[data-theme="dark"] .staff-title {
    color: var(--text-secondary);
}

[data-theme="dark"] .staff-contact-item a {
    color: var(--color-link);
}

[data-theme="dark"] .staff-contact-item a:hover {
    color: var(--color-link-hover);
}

[data-theme="dark"] .staff-contact-item a:focus-visible {
    outline-color: var(--color-link);
}

/* =====================================================
   EVENT CALENDAR PAGE - DARK MODE
   Used in: events/calendar.html
   ===================================================== */

[data-theme="dark"] .month-title {
    color: var(--text-primary);
}

[data-theme="dark"] .calendar-grid {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

[data-theme="dark"] .calendar-weekdays {
    background: var(--gray-900);
    border-bottom-color: var(--border-color-hover);
}

[data-theme="dark"] .weekday {
    color: var(--text-primary);
    border-right-color: var(--border-color-hover);
}

[data-theme="dark"] .calendar-day {
    border-right-color: var(--border-color);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .calendar-day.empty {
    background: var(--gray-975);
}

[data-theme="dark"] .calendar-day.today {
    background: var(--badge-intermediate-bg);
}

[data-theme="dark"] .day-number {
    color: var(--text-primary);
}

[data-theme="dark"] .event-course {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

[data-theme="dark"] .event-single {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

[data-theme="dark"] .event-extended {
    background: var(--badge-intermediate-bg);
    color: var(--badge-intermediate-text);
}

[data-theme="dark"] .legend {
    background: var(--bg-elevated);
}

[data-theme="dark"] .legend-item span {
    color: var(--text-primary);
}

/* =============================================================================
   MY EVENTS PAGE - DARK MODE
   ============================================================================= */

/* Section Component */
[data-theme="dark"] .section {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

[data-theme="dark"] .section-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .section-title {
    color: var(--text-primary);
}

[data-theme="dark"] .section-count {
    background: var(--gray-900);
    color: var(--text-primary);
}

/* Events Table */
[data-theme="dark"] .events-table th {
    background: var(--gray-900);
    color: var(--text-primary);
}

[data-theme="dark"] .events-table td {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .events-table tr:hover {
    background: var(--gray-900);
}

[data-theme="dark"] .event-name {
    color: var(--text-primary);
}

[data-theme="dark"] .event-details {
    color: var(--text-secondary);
}

[data-theme="dark"] .reservation-badge {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

[data-theme="dark"] .reserve-link {
    color: var(--color-link);
}

/* Collapsible Section */
[data-theme="dark"] .collapsible-header {
    background: var(--gray-900);
    border-color: var(--border-color-hover);
}

[data-theme="dark"] .collapsible-header:hover {
    background: var(--gray-800);
}

[data-theme="dark"] .collapsible-content {
    border-color: var(--border-color-hover);
}

/* Event type badges (for consistency with calendar) */
[data-theme="dark"] .badge-course {
    background: var(--badge-course-bg);
    color: var(--badge-course-text);
}

[data-theme="dark"] .badge-single {
    background: var(--badge-single-bg);
    color: var(--badge-single-text);
}

[data-theme="dark"] .badge-extended {
    background: var(--badge-extended-bg);
    color: var(--badge-extended-text);
}

/* =============================================================================
   SEARCH RESULTS PAGE - DARK MODE
   ============================================================================= */

[data-theme="dark"] .search-header h1 {
    color: var(--text-primary);
}

[data-theme="dark"] .search-meta {
    border-bottom-color: var(--ucb-gold-dark);
}

[data-theme="dark"] .results-count {
    color: var(--text-secondary);
}

[data-theme="dark"] .refine-search-form {
    background: var(--bg-elevated);
    border-color: var(--ucb-gold-dark);
}

[data-theme="dark"] .refine-search-input {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color-hover);
}

[data-theme="dark"] .refine-search-input:focus-visible {
    border-color: var(--color-link);
}

/* Search Scope Tabs - Dark Mode */
[data-theme="dark"] .scope-tab {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border-color: transparent;
}

[data-theme="dark"] .scope-tab:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color-hover);
}

[data-theme="dark"] .scope-tab.active {
    background: var(--ucb-gold);
    color: var(--ucb-black);
    border-color: var(--ucb-gold);
}

[data-theme="dark"] .scope-tab.active:hover {
    background: var(--ucb-gold-dark);
    border-color: var(--ucb-gold-dark);
}

[data-theme="dark"] .search-checkbox-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .results-section h2 {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .demo-result-card {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

[data-theme="dark"] .demo-result-card:hover {
    border-color: var(--color-link);
}

[data-theme="dark"] .demo-number {
    color: var(--info-box-border);
}

[data-theme="dark"] .demo-result-title {
    color: var(--text-primary);
}

[data-theme="dark"] .demo-result-summary {
    color: var(--text-secondary);
}

[data-theme="dark"] .demo-result-meta {
    color: var(--text-secondary);
}

[data-theme="dark"] .equipment-result-card {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

[data-theme="dark"] .equipment-result-card:hover {
    border-color: var(--color-link);
}

[data-theme="dark"] .equipment-image-container {
    background: var(--gray-975);
}

[data-theme="dark"] .equipment-result-title a {
    color: var(--text-primary);
}

[data-theme="dark"] .equipment-result-title a:hover {
    color: var(--color-link);
}

[data-theme="dark"] .equipment-result-description {
    color: var(--text-secondary);
}

[data-theme="dark"] .equipment-result-meta {
    color: var(--text-secondary);
}

/* =====================================================
   ADMIN DASHBOARD DARK MODE
   ===================================================== */

/* Stat cards */
[data-theme="dark"] .stat-card {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

[data-theme="dark"] .stat-number {
    color: var(--text-primary);
}

[data-theme="dark"] .stat-label {
    color: var(--text-secondary);
}

/* .admin-table dark mode — design tokens handle header, striping, hover. */
[data-theme="dark"] .admin-table {
    background: var(--bg-elevated);
}

/* Date section headers */
[data-theme="dark"] .date-section-header {
    background: linear-gradient(135deg, var(--warning-box-bg) 0%, var(--badge-intermediate-bg) 100%);
    color: var(--ucb-white);
}

/* Comments row */
[data-theme="dark"] .comments-row {
    background-color: var(--gray-950);
    border-left-color: var(--ucb-gold-dark);
}

[data-theme="dark"] .comments-row td {
    color: var(--text-secondary);
}

/* Admin table links */
[data-theme="dark"] .admin-table a {
    color: var(--color-link);
}

/* Alerts in dark mode */
[data-theme="dark"] .alert-success {
    background-color: var(--alert-success-bg);
    color: var(--alert-success-text);
    border-color: var(--alert-success-border);
}

[data-theme="dark"] .alert-warning {
    background-color: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    border-color: var(--alert-warning-border);
}

[data-theme="dark"] .alert-danger {
    background-color: var(--alert-danger-bg);
    color: var(--alert-danger-text);
    border-color: var(--alert-danger-border);
}

[data-theme="dark"] .alert-info {
    background-color: var(--alert-info-bg);
    color: var(--alert-info-text);
    border-color: var(--alert-info-border);
}

/* Modal in dark mode */
[data-theme="dark"] .modal.show {
    background-color: rgba(0,0,0,0.8);
}

[data-theme="dark"] .modal-content {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
}

[data-theme="dark"] .modal-header h3 {
    color: var(--text-primary);
}

/* Textarea in dark mode */
[data-theme="dark"] textarea {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color-hover);
}

/* =====================================================
   RESERVATIONS PAGE DARK MODE
   ===================================================== */

/* Reservations table — zebra/hover use theme variables from components.css.
   Header stays black (--ucb-black) in both modes. */
[data-theme="dark"] .reservations-table {
    background: var(--bg-elevated);
}

/* .maintenance-table dark mode — design tokens handle header, striping, hover. */
[data-theme="dark"] .maintenance-table {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

/* Date separator in dark mode — keep UCB gold for consistency */
[data-theme="dark"] .date-separator {
    background-color: var(--ucb-gold) !important;
    color: var(--ucb-black);
}

/* Status badges in dark mode */
[data-theme="dark"] .status-ready {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
}

[data-theme="dark"] .status-late {
    background-color: var(--badge-advanced-bg);
    color: var(--color-danger-text);
}

[data-theme="dark"] .status-returned {
    background-color: var(--bg-elevated);
    color: var(--text-secondary);
}

/* Modal styling in dark mode */
[data-theme="dark"] #editLogModal {
    background-color: rgba(0,0,0,0.8);
}

[data-theme="dark"] #editLogModal > div {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
}

[data-theme="dark"] #editLogModal h2 {
    color: var(--text-primary);
}

[data-theme="dark"] #editLogModal .form-control {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color-hover);
}

[data-theme="dark"] #editLogModal label {
    color: var(--text-primary);
}

[data-theme="dark"] #editLogModal small {
    color: var(--text-secondary);
}

/* =====================================================
   DASHBOARD PAGE DARK MODE
   ===================================================== */

/* Dashboard header */
[data-theme="dark"] .dashboard-title {
    color: var(--text-primary);
}

[data-theme="dark"] .dashboard-subtitle {
    color: var(--text-secondary);
}

/* Event items */
[data-theme="dark"] .event-item {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .event-name {
    color: var(--text-primary);
}

[data-theme="dark"] .event-details {
    color: var(--text-secondary);
}

/* Event type badges in dark mode */
[data-theme="dark"] .event-badge.badge-course {
    background: var(--badge-course-bg);
    color: var(--badge-course-text);
}

[data-theme="dark"] .event-badge.badge-single {
    background: var(--badge-single-bg);
    color: var(--badge-single-text);
}

[data-theme="dark"] .event-badge.badge-extended {
    background: var(--badge-extended-bg);
    color: var(--badge-extended-text);
}

/* Cart items */
[data-theme="dark"] .cart-item {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .item-name {
    color: var(--text-primary);
}

[data-theme="dark"] .item-details {
    color: var(--text-secondary);
}

/* Reservation items */
[data-theme="dark"] .reservation-item {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .reservation-id {
    color: var(--text-primary);
}

[data-theme="dark"] .reservation-date {
    color: var(--text-secondary);
}

/* Status badges in dark mode */
[data-theme="dark"] .status-badge.status-submitted {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

[data-theme="dark"] .status-badge.status-fulfilled {
    background: var(--gray-900);
    color: var(--text-primary);
}

/* View all link */
[data-theme="dark"] .view-all-link {
    color: var(--color-link);
}

/* =====================================================
   ERROR PAGES DARK MODE (403, 404, 500)
   ===================================================== */

[data-theme="dark"] .error-title {
    color: var(--text-primary);
}

[data-theme="dark"] .error-description {
    color: var(--text-secondary);
}

/* Permission and status info boxes (error pages only - exclude status badges) */
[data-theme="dark"] .permission-info,
[data-theme="dark"] .status-info:not(.status-badge) {
    background: var(--badge-intermediate-bg);
    border-color: var(--color-link);
}

[data-theme="dark"] .permission-info h3,
[data-theme="dark"] .status-info:not(.status-badge) h3 {
    color: var(--color-link);
}

[data-theme="dark"] .permission-info li,
[data-theme="dark"] .status-info:not(.status-badge) li {
    color: var(--text-secondary);
}

/* Action buttons in dark mode */
[data-theme="dark"] .action-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-color-hover);
}

[data-theme="dark"] .action-secondary:hover {
    background: var(--gray-900);
    border-color: var(--border-color);
}

/* User info box (403 only) */
[data-theme="dark"] .user-info {
    background: var(--color-info-bg);
    border-left-color: var(--info-box-border);
}

[data-theme="dark"] .user-info p {
    color: var(--color-info-text);
}

/* Quick links in dark mode */
[data-theme="dark"] .quick-links {
    background: var(--bg-elevated);
}

[data-theme="dark"] .quick-links h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .quick-links-list a {
    background: var(--bg-primary);
    border-color: var(--border-color-hover);
    color: var(--color-link);
}

[data-theme="dark"] .quick-links-list a:hover {
    background: var(--color-link);
    color: #000;
    border-color: var(--color-link);
}

/* Search form in dark mode (404 only) */
[data-theme="dark"] .search-wrapper {
    border-color: var(--border-color-hover);
}

[data-theme="dark"] .search-wrapper:focus-within {
    border-color: var(--color-link);
}

[data-theme="dark"] .search-input {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Error help text */
[data-theme="dark"] .error-help {
    color: var(--text-secondary);
    border-top-color: var(--border-color);
}

[data-theme="dark"] .error-help a {
    color: var(--color-link);
}

[data-theme="dark"] .error-help strong {
    color: var(--text-primary);
}

[data-theme="dark"] .error-help code {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Dark mode for 500.html (uses prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
    .error-500 body {
        background: var(--gray-975);
        color: var(--text-primary);
    }

    .error-500 .error-container {
        background: var(--bg-elevated);
    }

    .error-500 .error-title {
        color: var(--text-primary);
    }

    .error-500 .error-description {
        color: var(--text-secondary);
    }

    .error-500 .status-info {
        background: var(--badge-intermediate-bg);
        border-color: var(--ucb-gold);
    }

    .error-500 .status-info h3,
    .error-500 .status-info li {
        color: var(--ucb-gold);
    }

    .error-500 .action-secondary {
        background: var(--gray-975);
        color: var(--text-primary);
        border-color: var(--border-color-hover);
    }

    .error-500 .action-secondary:hover {
        background: var(--gray-900);
        border-color: var(--border-color);
    }

    .error-500 .error-help {
        color: var(--text-secondary);
        border-top-color: var(--border-color);
    }

    .error-500 .error-help a {
        color: var(--ucb-gold);
    }

    .error-500 .error-help strong {
        color: var(--text-primary);
    }
}

/* ============================================================================
   LAB GUIDE PAGE DARK MODE (courses/lab_guide_page.html)
   ============================================================================ */

[data-theme="dark"] .lab-header,
[data-theme="dark"] .lab-footer {
    border-color: var(--border-color);
}

[data-theme="dark"] .learning-objectives {
    background: var(--info-box-bg);
    border-left-color: var(--info-box-border);
}

[data-theme="dark"] .learning-objectives h2 {
    color: var(--info-box-text);
}

[data-theme="dark"] .btn-back-to-course,
[data-theme="dark"] .btn-back-to-course-footer {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-back-to-course:hover,
[data-theme="dark"] .btn-back-to-course-footer:hover {
    background: var(--gray-800);
}

[data-theme="dark"] .lab-footer-nav-link {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

[data-theme="dark"] .lab-footer-nav-link:hover {
    background: var(--info-box-bg);
}

[data-theme="dark"] .lab-duration {
    background: var(--bg-elevated);
}

/* Standalone dark mode support for lab pages (fallback) */
@media (prefers-color-scheme: dark) {
    .lab-header,
    .lab-footer {
        border-color: var(--border-color);
    }

    .learning-objectives {
        background: var(--info-box-bg);
        border-left-color: var(--info-box-border);
    }

    .learning-objectives h2 {
        color: var(--info-box-text);
    }

    .btn-back-to-course,
    .btn-back-to-course-footer {
        background: var(--gray-900);
        color: var(--text-primary);
    }

    .btn-back-to-course:hover,
    .btn-back-to-course-footer:hover {
        background: var(--gray-800);
    }

    .lab-footer-nav-link {
        background: var(--bg-elevated);
        color: var(--text-primary);
    }

    .lab-footer-nav-link:hover {
        background: var(--info-box-bg);
    }

    .lab-duration {
        background: var(--gray-900);
    }
}

/* ============================================================================
   EXPERIMENT PAGE DARK MODE (demos/experiment_page.html)
   ============================================================================ */

[data-theme="dark"] .experiment-header {
    border-color: var(--border-color);
}

[data-theme="dark"] .experiment-objectives {
    background: var(--color-highlight-bg);
    border-left-color: var(--ucb-gold);
}

[data-theme="dark"] .experiment-objectives .section-heading {
    color: var(--ucb-gold);
}

[data-theme="dark"] .experiment-tag {
    background: var(--gray-800);
    color: var(--color-highlight-text);
}

[data-theme="dark"] .experiment-duration {
    background: var(--bg-elevated);
}

[data-theme="dark"] .experiment-sidebar .sidebar-heading {
    border-color: var(--border-color);
}

[data-theme="dark"] .quick-info-section,
[data-theme="dark"] .summary-section,
[data-theme="dark"] .actions-section,
[data-theme="dark"] .related-section {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

[data-theme="dark"] .quick-info-item {
    border-color: var(--gray-900);
}

[data-theme="dark"] .quick-info-item dt {
    color: var(--text-secondary);
}

[data-theme="dark"] .summary-content {
    color: var(--text-secondary);
}

[data-theme="dark"] .actions-section .action-button {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .actions-section .action-button:hover {
    background: var(--ucb-gold);
    color: #000;
}

[data-theme="dark"] .related-help-text {
    color: var(--text-secondary);
}

/* ============================================================================
   LOGIN PAGE DARK MODE (registration/login.html)
   ============================================================================ */

[data-theme="dark"] .login-container {
    background: var(--bg-elevated);
    border-color: var(--border-color-hover);
}

[data-theme="dark"] .login-header h1 {
    color: var(--text-primary);
}

[data-theme="dark"] .login-description {
    color: var(--text-secondary);
}

[data-theme="dark"] .form-group label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-group input[type="text"],
[data-theme="dark"] .form-group input[type="password"] {
    background-color: var(--form-bg);
    color: var(--text-primary);
    border-color: var(--form-border);
}

[data-theme="dark"] .form-group input:focus-visible {
    outline-color: var(--ucb-gold);
    border-color: var(--ucb-gold);
}

[data-theme="dark"] .btn-login:focus-visible {
    outline-color: var(--ucb-gold);
}

[data-theme="dark"] .help-text {
    border-top-color: var(--border-color-hover);
    color: var(--text-secondary);
}

[data-theme="dark"] .help-text a {
    color: var(--color-link);
}

[data-theme="dark"] .help-text a:hover {
    color: var(--color-link-hover);
}

[data-theme="dark"] .help-text a:focus-visible {
    outline-color: var(--ucb-gold);
}

[data-theme="dark"] .alert-error {
    background-color: var(--alert-danger-bg);
    color: var(--alert-danger-text);
    border-color: var(--alert-danger-border);
}

/* ============================================================================
   COURSE CONTENT PAGE DARK MODE (courses/course_content_page.html)
   ============================================================================ */

[data-theme="dark"] .page-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .page-type-tutorial {
    background: var(--info-box-bg);
    color: var(--info-box-text);
}

[data-theme="dark"] .page-type-syllabus {
    background: var(--color-highlight-bg);
    color: var(--color-highlight-text);
}

[data-theme="dark"] .page-type-faq {
    background: var(--warning-box-bg);
    color: var(--warning-box-text);
}

[data-theme="dark"] .page-type-resources {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

[data-theme="dark"] .page-type-general {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}

[data-theme="dark"] .page-subtitle {
    color: var(--text-secondary);
}

[data-theme="dark"] .page-description {
    color: var(--text-secondary);
}

/* Standalone dark mode support (fallback) */
@media (prefers-color-scheme: dark) {
    .page-header {
        border-bottom-color: var(--border-color);
    }

    .page-type-tutorial {
        background: var(--info-box-bg);
        color: var(--info-box-text);
    }

    .page-type-syllabus {
        background: var(--color-highlight-bg);
        color: var(--color-highlight-text);
    }

    .page-type-faq {
        background: var(--warning-box-bg);
        color: var(--warning-box-text);
    }

    .page-type-resources {
        background: var(--color-success-bg);
        color: var(--color-success-text);
    }

    .page-type-general {
        background: var(--gray-900);
        color: var(--text-secondary);
    }

    .page-subtitle {
        color: var(--text-secondary);
    }

    .page-description {
        color: var(--text-secondary);
    }
}

/* ============================================================================
   EQUIPMENT INSTANCE FORM DARK MODE
   ============================================================================ */

[data-theme="dark"] .instance-image-gallery {
    background: var(--bg-elevated);
}

[data-theme="dark"] .featured-image-container {
    background: var(--gray-975);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px;
}

[data-theme="dark"] .image-thumbnail-wrapper {
    background: transparent;
}

[data-theme="dark"] .image-thumbnail {
    border-color: var(--border-color-hover) !important;
}

[data-theme="dark"] .image-thumbnail:hover {
    border-color: #777 !important;
}

[data-theme="dark"] .image-form-wrapper {
    padding: 15px;
    background-color: var(--gray-975);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 15px;
}

[data-theme="dark"] .image-form-wrapper label {
    color: var(--text-primary);
}

[data-theme="dark"] .document-form-wrapper {
    padding: 15px;
    background-color: var(--gray-975);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 15px;
}

[data-theme="dark"] .document-form-wrapper label {
    color: var(--text-primary);
}

/* Document list item dark mode */
[data-theme="dark"] .document-list-item {
    background-color: var(--info-box-bg);
    border-left-color: var(--info-box-border);
}

[data-theme="dark"] .document-list-item strong {
    color: var(--color-info-text);
}

[data-theme="dark"] .document-list-item small {
    color: var(--info-box-text) !important;
}

[data-theme="dark"] .document-list-item a {
    color: var(--info-box-border);
}

[data-theme="dark"] .document-list-item a:visited {
    color: var(--color-info-text);
}

/* Featured image placeholder in dark mode */
[data-theme="dark"] #featured-image {
    background-color: var(--gray-975) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted);
}

/* Form elements inside image/document wrappers */
[data-theme="dark"] .image-form-wrapper input,
[data-theme="dark"] .image-form-wrapper textarea,
[data-theme="dark"] .document-form-wrapper input,
[data-theme="dark"] .document-form-wrapper textarea {
    background: var(--form-bg) !important;
    color: var(--form-input-text) !important;
    border-color: var(--form-border) !important;
}

[data-theme="dark"] .image-form-wrapper input:focus-visible,
[data-theme="dark"] .image-form-wrapper textarea:focus-visible,
[data-theme="dark"] .document-form-wrapper input:focus-visible,
[data-theme="dark"] .document-form-wrapper textarea:focus-visible {
    border-color: var(--form-border-focus) !important;
    background: var(--form-bg) !important;
    color: var(--form-input-text) !important;
}

/* Labels and help text inside wrappers */
[data-theme="dark"] .image-form-wrapper .form-label,
[data-theme="dark"] .document-form-wrapper .form-label {
    color: var(--form-label-text) !important;
}

[data-theme="dark"] .image-form-wrapper small,
[data-theme="dark"] .document-form-wrapper small {
    color: var(--helper-text-color) !important;
}

/* ============================================================
   TEXT & HELPER UTILITIES - Dark Mode
   Added: October 2025
   ============================================================ */

[data-theme="dark"] .text-secondary {
    color: var(--text-secondary);
}

[data-theme="dark"] .text-tertiary {
    color: var(--text-tertiary);
}

[data-theme="dark"] .text-muted {
    color: var(--text-primary);
}

[data-theme="dark"] .form-help-text,
[data-theme="dark"] .help-text-inline {
    color: var(--text-secondary);
}

[data-theme="dark"] .empty-state-text {
    color: var(--text-secondary);
}

[data-theme="dark"] .caption-text {
    color: var(--text-tertiary);
}

/* Badge dark mode variants */
[data-theme="dark"] .badge-custom-request {
    background: var(--badge-custom-bg);
    color: var(--badge-custom-text);
    border-color: var(--badge-custom-border);
}

[data-theme="dark"] .badge-equipment-loan {
    background: var(--badge-equipment-loan-bg);
    color: var(--badge-equipment-loan-text);
    border-color: var(--badge-equipment-loan-border);
}

[data-theme="dark"] .badge-calibration-passed {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-color: var(--color-success-text);
}

[data-theme="dark"] .badge-calibration-failed {
    background: var(--badge-advanced-bg);
    color: var(--badge-advanced-text);
    border-color: var(--badge-advanced-border);
}

[data-theme="dark"] .badge-calibration-pending {
    background: var(--badge-intermediate-bg);
    color: var(--badge-intermediate-text);
    border-color: var(--badge-intermediate-border);
}

[data-theme="dark"] .tag-badge {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ========================================
   Cart-Specific Modals - Dark Mode
   ======================================== */

[data-theme="dark"] .cart-edit-modal-content {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .cart-edit-modal-content h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .cart-edit-modal-content label {
    color: var(--text-primary);
}

[data-theme="dark"] .cart-edit-modal-content .form-control {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color-light);
}

[data-theme="dark"] .cart-sections-modal-content {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .cart-sections-modal-content h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .sections-list-container {
    border-color: var(--border-color-light);
}

[data-theme="dark"] .section-checkbox-item {
    border-bottom-color: var(--border-color-light);
}

[data-theme="dark"] .section-checkbox-item label {
    color: var(--text-primary);
}

[data-theme="dark"] .cart-selection-controls {
    background-color: var(--bg-secondary);
    border-color: var(--border-color-light);
}

[data-theme="dark"] .selection-info {
    color: var(--text-secondary);
}

/* ========================================
   TOM SELECT - Dark Mode
   Comprehensive styling for all TomSelect states and plugins
   ======================================== */

/* Base control styling - all states */
[data-theme="dark"] .ts-control,
[data-theme="dark"] .ts-wrapper .ts-control,
[data-theme="dark"] .ts-wrapper.single .ts-control,
[data-theme="dark"] .ts-wrapper.multi .ts-control,
[data-theme="dark"] .ts-wrapper.plugin-dropdown_input .ts-control,
[data-theme="dark"] .ts-wrapper.plugin-dropdown_input.single .ts-control,
[data-theme="dark"] div.ts-wrapper.single.plugin-dropdown_input .ts-control {
    background: var(--form-bg) !important;
    color: var(--form-input-text) !important;
    border-color: var(--form-border) !important;
}

/* Input fields and placeholders */
[data-theme="dark"] .ts-control input,
[data-theme="dark"] .ts-wrapper .ts-control input,
[data-theme="dark"] .ts-wrapper.single .ts-control input,
[data-theme="dark"] .ts-wrapper.plugin-dropdown_input .ts-control input,
[data-theme="dark"] .ts-control .items-placeholder,
[data-theme="dark"] .ts-wrapper .ts-control .items-placeholder {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--form-input-text) !important;
}

[data-theme="dark"] .ts-control input::placeholder {
    color: var(--text-tertiary) !important;
}

/* Selected items (tags) in multi-select */
[data-theme="dark"] .ts-control .item,
[data-theme="dark"] .ts-wrapper .ts-control .item,
[data-theme="dark"] .ts-wrapper.multi .ts-control .item {
    color: var(--form-input-text) !important;
    background: var(--gray-800) !important;
    border-color: var(--border-color-hover) !important;
}

/* Single select - selected item should match control background */
[data-theme="dark"] .ts-wrapper.single .ts-control .item,
[data-theme="dark"] .ts-wrapper.single.plugin-dropdown_input .ts-control .item,
[data-theme="dark"] .ts-wrapper.single.plugin-remove_button .ts-control .item {
    background: transparent !important;
    border: none !important;
    color: var(--form-input-text) !important;
    padding: 0 !important;
}

/* Remove button (×) styling */
[data-theme="dark"] .ts-control .item .remove,
[data-theme="dark"] .ts-wrapper .ts-control .item .remove {
    color: var(--text-muted) !important;
    border-left-color: var(--border-color-hover) !important;
}

[data-theme="dark"] .ts-control .item .remove:hover,
[data-theme="dark"] .ts-wrapper .ts-control .item .remove:hover {
    background: transparent !important;
    color: var(--ucb-gold) !important;
}

/* Focus state */
[data-theme="dark"] .ts-control:focus-visible,
[data-theme="dark"] .ts-wrapper .ts-control:focus-visible,
[data-theme="dark"] .ts-wrapper.single .ts-control:focus-visible {
    background: var(--form-bg) !important;
    background-color: var(--form-bg) !important;
    color: var(--form-input-text) !important;
    border-color: var(--form-border-focus) !important;
    box-shadow: 0 0 0 0.2rem rgba(207, 184, 124, 0.15) !important;
}

/* Active/open dropdown states - CRITICAL for preventing white background */
[data-theme="dark"] .ts-wrapper.focus .ts-control,
[data-theme="dark"] .ts-wrapper.dropdown-active .ts-control,
[data-theme="dark"] .ts-wrapper.input-active .ts-control,
[data-theme="dark"] .ts-wrapper.single.focus .ts-control,
[data-theme="dark"] .ts-wrapper.single.dropdown-active .ts-control,
[data-theme="dark"] .ts-wrapper.single.input-active .ts-control,
[data-theme="dark"] .ts-wrapper.plugin-dropdown_input.focus .ts-control,
[data-theme="dark"] .ts-wrapper.plugin-dropdown_input.dropdown-active .ts-control,
[data-theme="dark"] .ts-wrapper.plugin-dropdown_input.input-active .ts-control {
    background: var(--form-bg) !important;
    background-color: var(--form-bg) !important;
    color: var(--form-input-text) !important;
    border-color: var(--form-border-focus) !important;
}

/* Target all child divs inside ts-control - prevents white flex containers */
[data-theme="dark"] .ts-control > div,
[data-theme="dark"] .ts-wrapper .ts-control > div,
[data-theme="dark"] .ts-wrapper.single .ts-control > div,
[data-theme="dark"] .ts-wrapper.plugin-dropdown_input .ts-control > div {
    background: transparent !important;
    background-color: transparent !important;
}

/* Dropdown menu */
[data-theme="dark"] .ts-dropdown {
    background: var(--gray-900) !important;
    border: 2px solid var(--ucb-gold) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .ts-dropdown .option {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .ts-dropdown .option:last-child {
    border-bottom: none !important;
}

[data-theme="dark"] .ts-dropdown .option:hover {
    background: var(--gray-800) !important;
}

[data-theme="dark"] .ts-dropdown .option.active {
    background: var(--ucb-gold) !important;
    color: var(--ucb-black) !important;
}

[data-theme="dark"] .ts-dropdown .option.selected {
    background: var(--gray-800) !important;
}

/* ==========================================
   ERROR PAGES - Dark Mode
   ========================================================================== */

/* Error icon - UCB Gold color in dark mode */
[data-theme="dark"] .error-403 .error-icon,
[data-theme="dark"] .error-404 .error-icon,
[data-theme="dark"] .error-500 .error-icon {
    color: var(--ucb-gold);
}

/* Primary button - black text on gold background */
[data-theme="dark"] .error-403 .error-action-button.action-primary,
[data-theme="dark"] .error-404 .error-action-button.action-primary,
[data-theme="dark"] .error-500 .error-action-button.action-primary {
    background: var(--ucb-gold);
    color: var(--ucb-black);
}

[data-theme="dark"] .error-403 .error-action-button.action-primary:hover,
[data-theme="dark"] .error-404 .error-action-button.action-primary:hover,
[data-theme="dark"] .error-500 .error-action-button.action-primary:hover {
    background: var(--ucb-gold-dark);
    color: var(--ucb-black);
}

/* Search button - black text and icon on gold background */
[data-theme="dark"] .search-button {
    background: var(--ucb-gold);
    color: var(--ucb-black);
}

[data-theme="dark"] .search-button:hover {
    background: var(--ucb-gold-dark);
    color: var(--ucb-black);
}

[data-theme="dark"] .search-button svg {
    fill: var(--ucb-black);
}