styles.css

/* =============================================================================
    OneiroMetrics (Turning dreams into data)
    Author: John Banister
    GitHub: https://github.com/banisterious
   ============================================================================= */



/* =============================================================================
   COMPONENT: VARIABLES (16.5 KB)
   ============================================================================= */
/* ==========================================================================
   OneiroMetrics CSS Variables & Design Tokens
   ========================================================================== */

:root {
    /* =============================================================================
       DESIGN TOKENS - Core Design System Values
       ============================================================================= */
    
    /* === SPACING SCALE === */
    --oom-spacing-xxs: 2px;
    --oom-spacing-xs: 4px;
    --oom-spacing-sm: 8px;
    --oom-spacing-md: 16px;
    --oom-spacing-lg: 24px;
    --oom-spacing-xl: 32px;
    --oom-spacing-xxl: 48px;
    
    /* === BORDER RADIUS SCALE === */
    --oom-radius-sm: 4px;
    --oom-radius-md: 6px;
    --oom-radius-lg: 8px;
    --oom-radius-xl: 12px;
    
    /* === TRANSITION SYSTEM === */
    --oom-transition-fast: 0.1s ease;
    --oom-transition-normal: 0.2s ease;
    --oom-transition-slow: 0.3s ease;
    
    /* === Z-INDEX SCALE === */
    --oom-z-base: 1;
    --oom-z-dropdown: 100;
    --oom-z-modal: 200;
    --oom-z-tooltip: 300;
    --oom-z-overlay: 1000;
    
    /* === SHADOW SYSTEM === */
    --oom-shadow-sm: 0 1px 2px var(--background-modifier-box-shadow);
    --oom-shadow-md: 0 2px 8px var(--background-modifier-box-shadow);
    --oom-shadow-lg: 0 4px 12px var(--background-modifier-box-shadow);
    --oom-shadow-xl: 0 8px 24px var(--background-modifier-box-shadow);
    
    /* === FOCUS SYSTEM === */
    --oom-focus-ring: 0 0 0 2px var(--background-modifier-border);
    --oom-focus-ring-accent: 0 0 0 2px var(--interactive-accent);
    
    /* =============================================================================
       TYPOGRAPHY TOKENS - Text Sizing and Spacing
       ============================================================================= */
    
    /* === FONT SIZES === */
    --oom-font-size-xs: 0.75rem;
    --oom-font-size-sm: 0.875rem;
    --oom-font-size-base: 1rem;
    --oom-font-size-lg: 1.125rem;
    --oom-font-size-xl: 1.25rem;
    
    /* === LINE HEIGHTS === */
    --oom-line-height-tight: 1.2;
    --oom-line-height-normal: 1.5;
    --oom-line-height-relaxed: 1.75;
    
    /* =============================================================================
       LAYOUT TOKENS - Layout and Container Sizing
       ============================================================================= */
    
    /* === CONTAINER SIZES === */
    --oom-container-sm: 600px;
    --oom-container-md: 800px;
    --oom-container-lg: 1000px;
    --oom-container-xl: 1200px;
    
    /* === CONTENT WIDTHS === */
    --oom-content-width: 100%;
    --oom-content-max-width: none;
    
    /* =============================================================================
       BUTTON COMPONENT VARIABLES
       ============================================================================= */
    
    /* === BUTTON SIZING === */
    --oom-button-padding: var(--oom-spacing-sm) var(--oom-spacing-md);
    --oom-button-padding-sm: var(--oom-spacing-xs) var(--oom-spacing-sm);
    --oom-button-padding-lg: var(--oom-spacing-md) var(--oom-spacing-lg);
    --oom-button-font-size: var(--font-ui-smaller);
    --oom-button-gap: 0.5rem;
    --oom-button-border-radius: var(--oom-radius-md);
    --oom-button-min-width: 80px;
    
    /* === BUTTON ICON SIZING === */
    --oom-button-icon-size: 16px;
    --oom-button-icon-size-mobile: 14px;
    --oom-button-icon-gap: var(--oom-spacing-xs);
    
    /* =============================================================================
       MODAL COMPONENT VARIABLES
       ============================================================================= */
    
    /* === MODAL SIZING === */
    --oom-modal-width: 600px;
    --oom-modal-width-sm: 400px;
    --oom-modal-width-md: 500px;
    --oom-modal-width-lg: 600px;
    --oom-modal-width-xl: 800px;
    --oom-modal-max-width: 95vw;
    --oom-modal-padding: var(--oom-spacing-lg);
    --oom-modal-border-radius: var(--oom-radius-lg);
    --oom-modal-shadow: var(--oom-shadow-lg);
    
    /* === MODAL TYPOGRAPHY === */
    --oom-modal-title-size: var(--h2-size, 1.5rem);
    --oom-modal-title-weight: var(--h2-weight, 600);
    --oom-modal-details-size: 0.9em;
    
    /* === MODAL MOBILE === */
    --oom-modal-mobile-width: 95vw;
    --oom-modal-mobile-padding: var(--oom-spacing-md);
    
    /* =============================================================================
       TABLE COMPONENT VARIABLES
       ============================================================================= */
    
    /* === TABLE LAYOUT === */
    --oom-table-cell-padding: 8px 12px;
    --oom-table-border: 1px solid var(--background-modifier-border);
    --oom-table-header-bg: var(--background-primary-alt);
    --oom-table-hover-bg: var(--background-modifier-hover);
    --oom-table-border-radius: var(--oom-radius-md);
    
    /* === TABLE COLUMN WIDTHS === */
    --oom-table-date-width: 8%;
    --oom-table-date-min-width: 85px;
    --oom-table-title-width: 15%;
    --oom-table-title-min-width: 120px;
    --oom-table-words-width: 7%;
    --oom-table-words-min-width: 60px;
    --oom-table-content-width: 30%;
    --oom-table-content-min-width: 200px;
    --oom-table-metrics-width: 8%;
    --oom-table-metrics-min-width: 70px;
    
    /* =============================================================================
       PROGRESS BAR VARIABLES
       ============================================================================= */
    
    --oom-progress-bar-height: 8px;
    --oom-progress-bar-bg: var(--background-modifier-border, #eee);
    --oom-progress-bar-radius: 4px;
    --oom-progress-bar-margin: 1em 0;
    --oom-progress-fill-bg: var(--interactive-accent, #2563eb);
    
    /* =============================================================================
       FORM COMPONENT VARIABLES
       ============================================================================= */
    
    /* === INPUT SIZING === */
    --oom-input-padding: var(--oom-spacing-sm) var(--oom-spacing-md);
    --oom-input-font-size: var(--font-ui-medium);
    --oom-input-border-radius: var(--oom-radius-sm);
    --oom-input-min-height: 32px;
    
    /* === SELECT SIZING === */
    --oom-select-padding: var(--oom-spacing-sm) var(--oom-spacing-md);
    --oom-select-font-size: var(--font-ui-medium);
    --oom-select-border-radius: var(--oom-radius-sm);
    
    /* === TOGGLE SIZING === */
    --oom-toggle-width: 40px;
    --oom-toggle-height: 20px;
    --oom-toggle-slider-size: 16px;
    --oom-toggle-border-radius: 10px;
    --oom-toggle-border-width: 2px;
    --oom-toggle-travel: 20px;  /* Should be toggle-width minus slider-size minus 2*border-width */
    
    /* =============================================================================
       ICON COMPONENT VARIABLES
       ============================================================================= */
    
    /* === ICON SIZING === */
    --oom-icon-size: 16px;
    --oom-icon-size-sm: 14px;
    --oom-icon-size-lg: 18px;
    --oom-icon-size-mobile: 14px;
    --oom-icon-opacity: 0.8;
    
    /* === METRIC ICON SIZING === */
    --oom-metric-icon-size: 16px;
    --oom-metric-icon-container-min-width: 24px;
    
    /* === NAVIGATION ICON SIZING === */
    --oom-nav-icon-size: 16px;
    --oom-nav-icon-size-mobile: 18px;
    
    /* === TAB ICON SIZING === */
    --oom-tab-icon-size: 16px;
    --oom-tab-icon-size-tablet: 18px;
    --oom-tab-icon-size-mobile: 16px;
    --oom-tab-icon-svg-size: 14px;
    
    /* === ACTION ICON SIZING === */
    --oom-quick-action-icon-size: 1.5em;
    --oom-action-icon-size: 1.2em;
    --oom-notice-icon-size: 16px;
    --oom-info-icon-size: 14px;
    --oom-test-icon-size: 12px;
    --oom-filter-icon-size: 14px;
    
    /* === ICON PICKER SIZING === */
    --oom-icon-picker-height: 400px;
    --oom-icon-picker-cell-size: 40px;
    --oom-icon-picker-cell-size-tablet: 36px;
    --oom-icon-picker-cell-size-mobile: 32px;
    --oom-icon-picker-grid-height: 300px;
    --oom-icon-picker-grid-height-tablet: 250px;
    --oom-icon-picker-grid-height-mobile: 200px;
    --oom-icon-picker-btn-size: 36px;
    --oom-icon-picker-btn-size-mobile: 32px;
    --oom-icon-picker-svg-size: 20px;
    
    /* === SEARCH ICON SIZING === */
    --oom-search-icon-size: 16px;
    
    /* === LUCIDE ICON SIZING === */
    --oom-lucide-icon-size: 16px;
    
    /* === ICON FALLBACK === */
    --oom-icon-fallback-size: 1em;
    --oom-icon-fallback-opacity: 0.6;
    
    /* =============================================================================
       FILTER COMPONENT VARIABLES
       ============================================================================= */
    
    /* === FILTER LAYOUT === */
    --oom-filter-gap: var(--oom-spacing-md);
    --oom-filter-padding: var(--oom-spacing-sm);
    --oom-filter-border-radius: var(--oom-radius-md);
    
    /* === DATE FILTER === */
    --oom-date-filter-width: 200px;
    --oom-date-filter-dropdown-width: 300px;
    --oom-date-filter-calendar-width: 280px;
    --oom-date-filter-input-gap: var(--oom-spacing-xs);
    
    /* === DROPDOWN SIZING === */
    --oom-dropdown-min-width: 200px;
    --oom-dropdown-max-width: 400px;
    --oom-dropdown-max-height: 300px;
    --oom-dropdown-item-padding: var(--oom-spacing-sm) var(--oom-spacing-md);
    --oom-dropdown-border-radius: var(--oom-radius-md);
    
    /* === MULTISELECT === */
    --oom-multiselect-chip-padding: var(--oom-spacing-xs) var(--oom-spacing-sm);
    --oom-multiselect-chip-gap: var(--oom-spacing-xs);
    --oom-multiselect-chip-border-radius: var(--oom-radius-sm);
    --oom-multiselect-input-min-width: 120px;
    --oom-multiselect-container-gap: var(--oom-spacing-xs);
    
    /* === DRAG HANDLE === */
    --oom-drag-handle-width: 20px;
    --oom-drag-handle-opacity: 0.5;
    
    /* === DROP ZONE === */
    --oom-drop-zone-border: 2px dashed var(--background-modifier-border);
    --oom-drop-zone-border-active: 2px dashed var(--interactive-accent);
    
    /* === SORTABLE === */
    --oom-sortable-placeholder-opacity: 0.5;
    --oom-sortable-dragging-opacity: 0.8;
    --oom-sortable-drop-indicator-height: 2px;
    --oom-sortable-drop-indicator-color: var(--interactive-accent);
    
    /* =============================================================================
       DRAG & DROP BREAKPOINT
       ============================================================================= */
    
    /* Disable drag & drop on smaller screens for better touch experience */
    --oom-drag-drop-breakpoint: 768px;
    
    /* =============================================================================
       ANIMATION VARIABLES
       ============================================================================= */
    
    /* === ANIMATION DURATIONS === */
    --oom-animation-fast: 0.1s;
    --oom-animation-normal: 0.2s;
    --oom-animation-slow: 0.3s;
    
    /* === ANIMATION EASINGS === */
    --oom-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --oom-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --oom-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* =============================================================================
       VALIDATION VARIABLES
       ============================================================================= */
    
    --oom-validation-error-color: #ef4444;
    --oom-validation-warning-color: #f59e0b;
    --oom-validation-success-color: #10b981;
    --oom-validation-info-color: #3b82f6;
    
    /* =============================================================================
       LOG VIEWER VARIABLES
       ============================================================================= */
    
    --oom-log-level-error-color: #ef4444;
    --oom-log-level-warn-color: #f59e0b;
    --oom-log-level-info-color: #3b82f6;
    --oom-log-level-debug-color: #8b5cf6;
    --oom-log-level-trace-color: #6b7280;
    
    /* =============================================================================
       DATE NAVIGATOR VARIABLES
       ============================================================================= */
    
    --oom-day-cell-min-height: 80px;
    --oom-day-cell-padding: 4px;
    --oom-dream-dot-size: 8px;
    --oom-month-grid-gap: 1px;
    
    /* =============================================================================
       CALENDAR VARIABLES
       ============================================================================= */
    
    --oom-calendar-cell-size: 40px;
    --oom-calendar-cell-size-mobile: 36px;
    --oom-calendar-gap: 2px;
    
    /* =============================================================================
       SEVERITY INDICATOR VARIABLES
       ============================================================================= */
    
    --oom-severity-low: #10b981;
    --oom-severity-medium: #f59e0b;
    --oom-severity-high: #ef4444;
    --oom-severity-critical: #dc2626;
    
    /* =============================================================================
       TEST SUITE VARIABLES
       ============================================================================= */
    
    --oom-test-success-color: #10b981;
    --oom-test-failure-color: #ef4444;
    --oom-test-warning-color: #f59e0b;
    --oom-test-partial-color: #3b82f6;

    /* =============================================================================
       UTILITY VARIABLES - Screen Reader and Accessibility
       ============================================================================= */
    
    /* Screen Reader Only Variables */
    --oom-utility-sr-position: absolute;
    --oom-utility-sr-width: 1px;
    --oom-utility-sr-height: 1px;
    --oom-utility-sr-padding: 0;
    --oom-utility-sr-margin: -1px;
    --oom-utility-sr-overflow: hidden;
    --oom-utility-sr-clip: rect(0, 0, 0, 0);
    --oom-utility-sr-whitespace: nowrap;
    --oom-utility-sr-border: 0;
    
}

/* =============================================================================
   COMPONENT-SCOPED VARIABLES
   ============================================================================= */

/* Date Navigator Component Variables (scoped to component) */
.oom-date-navigator {
    --month-bg: var(--background-primary);
    --month-border: var(--background-modifier-border);
    --month-text: var(--text-normal);
    --month-header: var(--text-accent);
    --day-bg: var(--background-primary);
    --day-border: var(--background-modifier-border);
    --day-text: var(--text-normal);
    --day-today: var(--interactive-accent);
    --day-selected: var(--interactive-accent-hover);
    --day-dream: var(--text-accent);
    --day-no-dream: var(--text-muted);
    --day-other-month: var(--background-secondary);
    --day-hover: var(--background-modifier-hover);
    --day-with-entry-bg: rgb(var(--interactive-accent-rgb), 0.1);
}

/* Navigation Active State Variables (scoped to active navigation) */
.oom-nav-item.active {
    --background-modifier-hover: var(--interactive-accent);
    --icon-color: var(--text-on-accent);
}

/* =============================================================================
   THEME-SPECIFIC ADJUSTMENTS (Minimal and Necessary Only)
   ============================================================================= */

/* Dark Theme Toggle Adjustment */
.theme-dark .oom-toggle-slider {
    /* Minor dark theme specific adjustment for toggle visibility */
    box-shadow: inset 0 0 0 1px var(--background-modifier-border);
}

/* =============================================================================
   PRINT MEDIA VARIABLES
   ============================================================================= */

@media print {
    :root {
        --oom-shadow-sm: none;
        --oom-shadow-md: none;
        --oom-shadow-lg: none;
        --oom-shadow-xl: none;
        --oom-transition-fast: none;
        --oom-transition-normal: none;
        --oom-transition-slow: none;
    }
}

/* =============================================================================
   HIGH CONTRAST MODE VARIABLES
   ============================================================================= */

@media (forced-colors: active) {
    :root {
        --oom-focus-ring: 2px solid ButtonText;
        --oom-focus-ring-accent: 2px solid Highlight;
    }
}

/* =============================================================================
   REDUCED MOTION VARIABLES
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    :root {
        --oom-transition-fast: none;
        --oom-transition-normal: none;
        --oom-transition-slow: none;
        --oom-animation-fast: none;
        --oom-animation-normal: none;
        --oom-animation-slow: none;
    }
} 

/* =============================================================================
   COMPONENT: BASE (8.2 KB)
   ============================================================================= */
/* =============================================================================
   OneiroMetrics Base & Reset Component
   Foundational styles, resets, typography, and Obsidian integration
   ============================================================================= */

/* =============================================================================
   OBSIDIAN INTEGRATION - Plugin Foundation
   ============================================================================= */

.markdown-preview-view.markdown-rendered.oom-project-note-view .inline-title,
.markdown-preview-view:has(.oneirometrics-title) .inline-title {
    display: none;
}

.markdown-preview-view[data-type="oom-project-note"] {
    /* Project note context base styling */
}

.markdown-rendered table.oom-table {
    /* Integration with Obsidian's markdown renderer */
    td {
        vertical-align: top;
    }
    
    tbody > tr > td.column-content {
        max-width: 300px;
        word-wrap: break-word;
    }
}

/* =============================================================================
   THEME COMPATIBILITY - Light & Dark Mode Support
   ============================================================================= */

.theme-dark .oom-toggle-slider {
    /* Dark theme toggle adjustments */
}

.theme-light .oom-validation-error,
.theme-dark .oom-validation-error {
    /* Theme-specific validation styling */
}

/* Dark theme heatmap adjustments moved to heatmap.css component */

.theme-dark .oom-export-button {
    /* Dark theme export button */
}

.theme-dark .oom-export-button:hover {
    /* Dark theme export button hover */
}

.theme-dark .oom-export-error-content {
    /* Dark theme error content */
}

.theme-dark .oom-insights-section {
    /* Dark theme insights */
}

.theme-dark .oom-insights-section:hover {
    /* Dark theme insights hover */
}

.theme-dark {
    /* Global dark theme adjustments */
}

/* =============================================================================
   BASE TYPOGRAPHY & COMPONENT NESTING
   ============================================================================= */

/* Properly nested headings within their parent components */
.oom-template-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--oom-spacing-sm);
    cursor: pointer;
    
    h3 {
        margin: 0;
        /* NO VISUAL STYLING - Let theme handle heading appearance */
    }
}

.oom-collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: var(--oom-spacing-sm);
    
    h3 {
        margin: 0;
        /* NO VISUAL STYLING - Let theme handle heading appearance */
    }
}

.oom-metrics-tabs-button {
    &[data-tab-id="overview"] {
        h2 {
            margin: 0;
            font-size: var(--font-ui-medium);
            /* NO VISUAL STYLING - Let theme handle */
        }
    }
}

h4 {
    margin-bottom: var(--oom-spacing-sm);
    font-size: var(--font-ui-medium);
}

/* Specific heading contexts */
.oom-callout-section h3 {
    margin: 0 0 var(--oom-spacing-lg) 0;
    padding-bottom: var(--oom-spacing-sm);
    border-bottom: 1px solid var(--background-modifier-border);
    font-size: var(--font-ui-large);
    font-weight: 600;
    color: var(--text-normal);
}

.oom-callout-settings h3 {
    margin: 0 0 var(--oom-spacing-lg) 0;
    padding-bottom: var(--oom-spacing-sm);
    border-bottom: 1px solid var(--background-modifier-border);
    font-size: var(--font-ui-large);
    font-weight: 600;
    color: var(--text-normal);
}

.oom-metrics-tabs-content h2:first-of-type {
    margin-block-start: 0;
}

.oom-metrics-tabs-content h3 {
    margin: 0 0 var(--oom-spacing-md) 0;
}

/* =============================================================================
   FOUNDATIONAL ELEMENTS
   ============================================================================= */

.oom-callout-section {
    margin-bottom: var(--oom-spacing-xl);
    padding: var(--oom-spacing-lg);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-lg);
    background: var(--background-secondary);
}

.oom-callout-section .oom-callout-structure-box {
    margin-bottom: var(--oom-spacing-lg);
}

.oom-callout-section .oom-copy-btn {
    justify-content: center;
    width: 100%;
}

.oom-callout-settings {
    margin-top: var(--oom-spacing-xl);
    padding-top: var(--oom-spacing-lg);
    border-top: 1px solid var(--background-modifier-border);
}

/* =============================================================================
   MODAL INTEGRATION - Base Obsidian Modal Styles
   ============================================================================= */

.modal:has(.template-tabs-modal) {
    width: var(--modal-width);
    max-width: var(--modal-max-width);
    height: var(--modal-height);
    max-height: var(--modal-max-height);
    padding: 0;
    contain: layout style;
}

.template-tabs-modal {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: var(--oom-spacing-sm);
}

/* =============================================================================
   UNIVERSAL RESETS & NORMALIZATIONS
   ============================================================================= */

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    
    .oom-button--loading::after,
    .oom-table-loading::after,
    .oom-metrics-summary.loading::after,
    .oom-icon-picker-loading::after {
        animation: none;
    }
    
    .oom-button:hover,
    .oom-button:active,
    .oom-button--clicked,
    .oom-button-icon:hover,
    .oom-icon-picker-btn:hover,
    .oom-draggable:hover,
    .oom-sortable-item:hover {
        transform: none;
    }
    
    .oom-button--state-expanded .oom-button-icon,
    .oom-preview-toggle:not(.collapsed) svg,
    .oom-preview-toggle.collapsed svg {
        transform: none;
    }
    
    .oom-modal.is-opening,
    .oom-modal.is-open,
    .oom-modal.is-closing {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    
    .oom-multiselect-dropdown.is-opening,
    .oom-multiselect-dropdown.is-open,
    .oom-multiselect-dropdown.is-closing {
        opacity: 1;
        transform: translateY(0);
    }
}

/* High Contrast Mode Support */
@media (forced-colors: active) {
    .oom-button--loading::after,
    .oom-table-loading::after,
    .oom-metrics-summary.loading::after {
        border-top-color: CanvasText;
        border-right-color: transparent;
    }
    
    .oom-day-cell.highlight-pulse {
        animation: none;
    }
}

/* Print Media - Disable All Animations */
@media print {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
    
    .oom-content-wrapper .oom-content-preview {
        display: none !important;
    }
    
    .oom-content-wrapper .oom-content-full {
        display: block !important;
    }
    
    .oom-button--loading::after,
    .oom-table-loading::after,
    .oom-metrics-summary.loading::after {
        display: none !important;
    }
}

/* =============================================================================
   RESPONSIVE FOUNDATION
   ============================================================================= */

@media screen and (max-width: var(--oom-breakpoint-tablet)) {
    .oom-callout-section {
        margin-bottom: var(--oom-spacing-lg);
        padding: var(--oom-spacing-md);
    }
    
    .oom-callout-section h3 {
        font-size: var(--font-ui-medium);
    }
}

@media screen and (max-width: var(--oom-breakpoint-mobile)) {
    .oom-callout-section {
        margin-bottom: var(--oom-spacing-md);
        padding: var(--oom-spacing-sm);
    }
    
    .oom-callout-section .oom-callout-structure-box {
        min-height: 70px;
        margin-bottom: var(--oom-spacing-md);
        font-size: 0.85em;
    }
    
    .oom-callout-section .oom-copy-btn {
        padding: var(--oom-spacing-xs) var(--oom-spacing-sm);
        font-size: var(--font-ui-smaller);
    }
} 

/* =============================================================================
   COMPONENT: MODALS (18.7 KB)
   ============================================================================= */
/* ==========================================================================
   OneiroMetrics Modal Components
   ========================================================================== */

/* =============================================================================
   MODAL CONTAINER - Theme Integrated & Modernized
   ============================================================================= */

.oom-modal {
    /* === STRUCTURAL PROPERTIES ONLY === */
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: var(--oom-z-modal);
    padding: var(--oom-modal-padding);
    border-radius: var(--oom-modal-border-radius);
    
    /* Layout & Behavior */
    overflow-x: hidden;
    transform: translate(-50%, -50%);
    transition: transform var(--oom-transition-normal),
                opacity var(--oom-transition-normal);
    box-sizing: border-box;
    
    /* NO VISUAL STYLING - Let Obsidian theme handle:
     * - background-color
     * - color
     * - border
     * - box-shadow
     */
    
    /* === MODAL ANIMATION STATES === */
    &.is-opening {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    
    &.is-open {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    
    &.is-closing {
        opacity: 0;
        transform: translate(-50%, -52%);
    }
    
    /* === MODAL SIZE VARIANTS === */
    &.oom-modal--sm,
    &.oom-progress-modal,
    &.oneirometrics-custom-date-modal {
        max-width: var(--oom-modal-width-sm);
    }
    
    &.oom-modal--md,
    &.oom-callout-modal {
        max-width: var(--oom-modal-width-md);
    }
    
    &.oom-modal--lg,
    &.oom-icon-picker-modal {
        max-width: var(--oom-modal-width-lg);
    }
    
    /* === SPECIFIC MODAL TYPES === */
    &.oom-metrics-modal {
        width: 750px;
    }
    
    &.oom-date-navigator-modal {
        /* Let theme handle modal sizing */
        max-width: var(--oom-modal-width-lg);
    }
    
    &.oom-log-viewer-modal,
    &.oom-journal-structure-modal,
    &.oom-journal-manager-modal {
        /* Large modals for complex interfaces */
        width: 90vw;
        max-width: 1000px;
        height: 80vh;
        max-height: 800px;
    }
    
    /* === NEW MODAL TYPES - CONSOLIDATED === */
    &.oom-date-selection-modal {
        max-width: var(--oom-modal-width-md);
    }
    
    &.oom-dream-journal-test-modal,
    &.oom-date-utils-test-modal,
    &.oom-content-parser-test-modal,
    &.oom-service-registry-test-modal,
    &.oom-universal-worker-pool-test-modal,
    &.oom-universal-metrics-calculator-test-modal {
        /* Test modals need more space */
        width: 85vw;
        max-width: 900px;
        height: 75vh;
        max-height: 700px;
    }
}

/* Modal container context adjustments using :has() */
.modal {
    /* === SMART MODAL SIZING WITH :has() === */
    &:has(.oom-metrics-modal) {
        width: 800px;
    }
    
    &:has(.oom-date-navigator-modal) {
        width: auto;

        /* Auto-adjust for date navigator content */
        min-width: 400px;
    }
    
    &:has(.oom-journal-structure-modal),
    &:has(.oom-journal-manager-modal) {
        /* Large modal containers */
        width: 95vw;
        height: 85vh;
    }
    
    &:has(.oom-log-viewer-modal) {
        width: 90vw;
        height: 80vh;
    }
    
    &:has(.oom-date-selection-modal) {
        width: auto;
        min-width: 500px;
    }
    
    /* === TEST SUITE MODAL CONTAINERS === */
    &:has(.oom-dream-journal-test-modal),
    &:has(.oom-date-utils-test-modal),
    &:has(.oom-content-parser-test-modal),
    &:has(.oom-service-registry-test-modal),
    &:has(.oom-universal-worker-pool-test-modal),
    &:has(.oom-universal-metrics-calculator-test-modal) {
        width: 90vw;
        height: 80vh;
    }
    
    &:has(.oneirometrics-custom-date-modal) {
        width: auto;
    }
}

/* =============================================================================
   MODAL CONTENT STRUCTURE - Nested Organization
   ============================================================================= */

.oom-modal {
    /* === NESTED CONTENT ELEMENTS === */
    .oom-modal-title {
        /* Title styling - structural only */
        margin: 0 0 var(--oom-spacing-md) 0;
        font-size: var(--font-ui-large);
        font-weight: 600;
        
        /* NO VISUAL STYLING - Let theme handle colors */
    }
    
    .oom-modal-content {
        flex: 1;

        /* Content area - structural only */
        margin-bottom: var(--oom-spacing-lg);
        overflow-y: auto;
        
        /* NO VISUAL STYLING - Let theme handle */
    }
    
    /* === MODAL SECTIONS === */
    .oom-modal-section {
        margin-bottom: var(--oom-spacing-lg);
        
        h4 {
            margin: 0 0 var(--oom-spacing-sm) 0;
            font-size: var(--font-ui-medium);
            font-weight: 600;
            
            /* NO VISUAL STYLING - Let theme handle */
        }
    }
    
    /* === MODAL UTILITIES === */
    .oom-section-helper {
        margin-bottom: var(--oom-spacing-sm);
        font-size: var(--font-ui-smaller);
        line-height: var(--line-height-normal);
        
        /* NO VISUAL STYLING - Let theme handle muted text color */
    }
    
    /* === MODAL GRID LAYOUTS === */
    .oom-modal-grid {
        display: grid;
        align-items: center;
        gap: var(--oom-spacing-md);
        
        /* NO VISUAL STYLING - Let theme handle */
        
        /* Nested input styling */
        input[type='text'],
        input[type='date'],
        input[type='number'] {
            /* NO VISUAL STYLING - Let theme handle form controls */
            padding: var(--oom-spacing-sm);
            border-radius: var(--oom-radius-sm);
        }
        
        label {
            font-size: var(--font-ui-smaller);
            font-weight: 500;
            
            /* NO VISUAL STYLING - Let theme handle label colors */
        }
    }
}

/* =============================================================================
   MODAL LAYOUT VARIANTS - Smart Responsive Design
   ============================================================================= */

/* Multi-column modal layouts */
.oom-modal-container,
.oom-test-modal-container,
.oom-journal-structure-container,
.oom-journal-manager-container {
    display: flex;
    gap: var(--oom-spacing-lg);
    height: 100%;
    
    /* === NESTED LAYOUT COLUMNS === */
    .oom-modal-content-pane,
    .oom-test-modal-content-pane,
    .oom-journal-structure-content,
    .oom-journal-manager-main-content {
        flex: 1;
        overflow-y: auto;
    }
    
    .oom-modal-results-pane,
    .oom-test-modal-results-pane,
    .oom-journal-structure-sidebar,
    .oom-journal-manager-sidebar {
        flex: 0 0 250px;
        overflow-y: auto;
        
        /* NO VISUAL STYLING - Let theme handle sidebar styling */
    }
}

/* =============================================================================
   MODAL BUTTONS - Modern Button System
   ============================================================================= */

/* Modern Modal Button (consolidates .oom-modal-btn and .oom-modal-button) */
.oom-modal-btn,
.oom-modal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--oom-button-gap);
    min-width: var(--oom-button-min-width);

    /* === STRUCTURAL PROPERTIES ONLY === */
    padding: var(--oom-button-padding);
    border: none;
    border-radius: var(--oom-button-border-radius);
    font-size: var(--oom-button-font-size);
    text-decoration: none;
    cursor: pointer;
    
    /* NO VISUAL STYLING - Let theme handle:
     * - background-color
     * - color
     * - border-color
     * - box-shadow
     */
    
    /* === NESTED STATES === */
    &:hover,
    &:focus {
        /* NO VISUAL STYLING - Let theme handle hover/focus states */
        text-decoration: none;
    }
    
    /* === MODAL BUTTON VARIANTS === */
    &.mod-cta,
    &.oom-modal-btn--apply,
    &.oom-modal-btn--primary {
        /* NO VISUAL STYLING - Let theme handle primary button appearance */
        font-weight: 600;
    }
    
    &.mod-warning {
        /* NO VISUAL STYLING - Let theme handle warning button appearance */
        border: 1px solid var(--text-error);
        color: var(--text-on-accent);
        background: var(--text-error);
        
        &:hover {
            background: var(--text-error-hover);
        }
    }
    
    &.mod-muted,
    &.oom-modal-btn-muted {
        /* NO VISUAL STYLING - Let theme handle muted button appearance */
        opacity: 0.6;
        
        &:hover {
            opacity: 0.8;
        }
    }
}

/* Modal Button Container */
.oom-modal-button-container {
    /* === STRUCTURAL PROPERTIES ONLY === */
    display: flex;
    justify-content: flex-end;
    gap: var(--oom-spacing-sm);
    margin-top: var(--oom-spacing-lg);
    
    /* NO VISUAL STYLING - Let theme handle container appearance */
    
    /* === NESTED STATES === */
    .oom-modal-btn,
    .oom-modal-button {
        /* NO VISUAL STYLING - Let theme handle nested button appearance */
        flex: 0 0 auto;
    }
}

/* =============================================================================
   MODAL HELPER AND INFORMATION COMPONENTS
   ============================================================================= */

/* Helper Text and Information */
.oom-modal-helper,
.oom-section-helper,
.oom-favorites-helper {
    /* NO VISUAL STYLING - Let theme handle helper appearance */

    /* Structural layout only */
    margin-bottom: var(--oom-spacing-sm);
}

.oom-help-text,
.oom-info-text {
    /* NO VISUAL STYLING - Let theme handle text appearance */

    /* Structural layout only */
    margin-bottom: var(--oom-spacing-sm);
    font-size: var(--font-ui-smaller);
    line-height: var(--line-height-normal);
}

/* =============================================================================
   STICKY FOOTER COMPONENTS - Dream Scrape Tab
   ============================================================================= */

/* Dream Scrape Tab Sticky Footer */
.oom-dream-scrape-sticky-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--oom-z-dropdown);
    margin-top: auto;
    padding: var(--oom-spacing-md) var(--oom-spacing-lg);
    box-shadow: 0 -2px 8px var(--background-modifier-box-shadow);
    border-top: 1px solid var(--background-modifier-border);
    background: var(--background-primary);
}

.oom-dream-scrape-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--oom-spacing-md);
    max-width: 400px;
    margin: 0 auto;
}

.oom-dream-scrape-actions .oom-button {
    flex: 0 0 auto;
    min-width: 140px;
}

/* Base styling for metrics tabs content container */
.oom-metrics-tabs-content {
    overflow-y: auto;
    max-height: 100%;
    min-height: 0; /* Ensure flexbox children can shrink */
    
    /* Ensure Setting components and other content can scroll properly */
    > * {
        flex-shrink: 0; /* Prevent content from shrinking unexpectedly */
    }
}

/* Ensure Setting components within tabs have proper layout */
.oom-metrics-tabs-content .setting-item {
    flex-shrink: 0;
}

/* Specific fixes for markdown-rendered content tabs */
.oom-metrics-tabs-content .oom-metrics-tabs-sources-content,
.oom-metrics-tabs-content .oom-metrics-tabs-description {
    /* Ensure these containers don't interfere with parent scrolling */
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    flex-shrink: 0;
}

/* Ensure markdown rendered content doesn't create scroll contexts */
.oom-metrics-tabs-content .oom-metrics-tabs-sources-content > *,
.oom-metrics-tabs-content .oom-metrics-tabs-description > * {
    overflow: visible !important;
}

/* Specific fixes for Journal Structure tab */
.oom-metrics-tabs-content .oom-metrics-tabs-callout-settings-text,
.oom-metrics-tabs-content .oom-callout-settings {
    /* Ensure these containers don't interfere with parent scrolling */
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    flex-shrink: 0;
}

/* Ensure Setting components within Journal Structure don't interfere */
.oom-metrics-tabs-content .oom-callout-settings .setting-item {
    overflow: visible !important;
    flex-shrink: 0;
}

/* Specific fixes for Metrics Settings tab */
.oom-metrics-tabs-content .oom-hub-section,
.oom-metrics-tabs-content .oom-hub-content-description {
    /* Ensure these containers don't interfere with parent scrolling */
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    flex-shrink: 0;
}

/* Ensure the content container has proper layout for sticky footer */
.oom-metrics-tabs-content:has(.oom-dream-scrape-sticky-footer) {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    /* Maintain scrolling even with flexbox layout */
    overflow-y: auto;
}

/* =============================================================================
   RESPONSIVE DESIGN - Mobile Adjustments
   ============================================================================= */

@media (width <= 768px) {
    .oom-modal {
        width: var(--oom-modal-mobile-width);
        padding: var(--oom-modal-mobile-padding);
        
        &.oom-log-viewer-modal,
        &.oom-journal-structure-modal,
        &.oom-journal-manager-modal {
            width: 95vw;
            height: 90vh;
        }
    }
    
    .oom-modal-container,
    .oom-test-modal-container,
    .oom-journal-structure-container,
    .oom-journal-manager-container {
        flex-direction: column;
        
        .oom-modal-results-pane,
        .oom-test-modal-results-pane,
        .oom-journal-structure-sidebar,
        .oom-journal-manager-sidebar {
            flex: 0 0 auto;
            max-height: 200px;
        }
    }
    
    .oom-modal-button-container {
        flex-direction: column;
        gap: var(--oom-spacing-xs);
        
        .oom-modal-btn,
        .oom-modal-button {
            width: 100%;
        }
    }
    
    /* Mobile responsive adjustments for sticky footer */
    .oom-dream-scrape-sticky-footer {
        padding: var(--oom-spacing-sm) var(--oom-spacing-md);
    }
    
    .oom-dream-scrape-actions {
        flex-direction: column;
        gap: var(--oom-spacing-sm);
        max-width: 100%;
    }
    
    .oom-dream-scrape-actions .oom-button {
        width: 100%;
        min-width: unset;
    }
} 

/* =============================================================================
   ONBOARDING BANNER COMPONENT
   ============================================================================= */

/* Onboarding Banner Styles */
.oom-onboarding-banner {
    background: linear-gradient(135deg, var(--background-modifier-success) 0%, var(--background-modifier-success-hover) 100%);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-m);
    margin-bottom: var(--oom-spacing-lg);
    padding: 0;
    position: relative;
    box-shadow: 0 2px 8px var(--background-modifier-box-shadow);
}

.oom-onboarding-content {
    padding: var(--oom-spacing-lg);
}

.oom-onboarding-header {
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-md);
    margin-bottom: var(--oom-spacing-md);
}

.oom-onboarding-header h3 {
    margin: 0;
    flex: 1;
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
    font-weight: var(--font-weight-semibold);
}

.oom-onboarding-icon {
    font-size: var(--font-ui-large);
}

.oom-onboarding-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: var(--oom-spacing-xs);
    border-radius: var(--radius-s);
    transition: all var(--anim-duration-fast) var(--anim-motion-smooth);
}

.oom-onboarding-dismiss:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.oom-onboarding-banner p {
    margin: 0 0 var(--oom-spacing-lg) 0;
    color: var(--text-normal);
    line-height: var(--line-height-normal);
}

.oom-onboarding-actions {
    display: flex;
    gap: var(--oom-spacing-md);
    align-items: center;
}

.oom-onboarding-hub-btn {
    background: var(--color-accent);
    color: var(--text-on-accent);
    border: none;
    padding: var(--oom-spacing-sm) var(--oom-spacing-lg);
    border-radius: var(--radius-m);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    transition: all var(--anim-duration-fast) var(--anim-motion-smooth);
}

.oom-onboarding-hub-btn:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
}

.oom-onboarding-dismiss-btn {
    background: none;
    border: 1px solid var(--background-modifier-border);
    color: var(--text-muted);
    padding: var(--oom-spacing-sm) var(--oom-spacing-lg);
    border-radius: var(--radius-m);
    cursor: pointer;
    transition: all var(--anim-duration-fast) var(--anim-motion-smooth);
}

.oom-onboarding-dismiss-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
    border-color: var(--background-modifier-border-hover);
}

/* Mobile responsive adjustments for onboarding banner */
@media (width <= 768px) {
    .oom-onboarding-banner {
        margin-bottom: var(--oom-spacing-md);
    }
    
    .oom-onboarding-content {
        padding: var(--oom-spacing-md);
    }
    
    .oom-onboarding-header {
        gap: var(--oom-spacing-sm);
        margin-bottom: var(--oom-spacing-sm);
    }
    
    .oom-onboarding-header h3 {
        font-size: var(--font-ui-small);
    }
    
    .oom-onboarding-banner p {
        margin-bottom: var(--oom-spacing-md);
        font-size: var(--font-ui-smaller);
    }
    
    .oom-onboarding-actions {
        flex-direction: column;
        gap: var(--oom-spacing-sm);
    }
    
    .oom-onboarding-hub-btn,
    .oom-onboarding-dismiss-btn {
        width: 100%;
        padding: var(--oom-spacing-sm) var(--oom-spacing-md);
    }
}

/* =============================================================================
   PHASE 7L: ServiceRegistryTestModal Component Styles
   ============================================================================= */

/* Service Registry Test Results Container */
.oom-service-registry-results {
    height: 200px;
    overflow: auto;
    border: 1px solid var(--background-modifier-border);
    padding: 10px;
    margin-bottom: 10px;
    font-family: monospace;
    font-size: var(--font-ui-smaller);
    background: var(--background-secondary);
    border-radius: var(--radius-s);
}

/* Service Registry Test Text Area */
.oom-service-registry-textarea {
    height: 100px !important;
    width: 100% !important;
    font-family: var(--font-monospace);
    font-size: var(--font-ui-smaller);
}

/* Service Registry Test Button Container */
.oom-service-registry-buttons {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: var(--oom-spacing-sm);
} 

/* =============================================================================
   COMPONENT: BUTTONS (21.1 KB)
   ============================================================================= */
/* ==========================================================================
   OneiroMetrics Button Components
   ========================================================================== */

/* =============================================================================
   BASE BUTTON SYSTEM - Theme Integrated & Modernized
   ============================================================================= */

.oom-button {
    /* === STRUCTURAL PROPERTIES ONLY === */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--oom-button-gap);
    
    /* Layout & Behavior */
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let Obsidian theme handle:
     * - background-color
     * - color
     * - border
     * - box-shadow
     */
    
    /* === NESTED STATES === */
    &:hover {
        /* Let theme handle color changes */
        transform: translateY(var(--oom-drag-hover-translate));
    }
    
    &:focus {
        outline: none;

        /* Let theme handle focus ring */
    }
    
    &:active {
        transform: scale(0.98);
    }
    
    /* === CTA MODIFIER (from scattered modal rules) === */
    &.mod-cta {
        /* Let theme handle CTA styling, no custom overrides */
        font-weight: 600;
    }
    
    /* === SPECIAL BUTTON STATES === */
    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }
    
    &.enabled {
        /* Just structural - let theme handle enabled state */
        pointer-events: auto;
    }
    
    /* === LOADING STATE === */
    &--loading::after {
        width: 16px;
        height: 16px;
        border: 2px solid transparent;
        border-top: 2px solid currentcolor;
        border-radius: 50%;
        animation: oom-button-spin 1s linear infinite;
        content: "";
    }
    
    &--clicked {
        transform: scale(0.95);
    }
    
    /* === BUTTON TEXT VARIANT === */
    &--text {
        border: none;
        text-decoration: underline;

        /* Text-only button styling */
        background: transparent;
        
        &:hover {
            text-decoration: none;
        }
    }
}

/* === BUTTON ANIMATIONS === */
@keyframes oom-button-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =============================================================================
   MODAL BUTTONS - Consolidated from scattered rules
   ============================================================================= */

/* Modern Modal Button (consolidates .oom-modal-btn and .oom-modal-button) */
.oom-modal-btn,
.oom-modal-button {
    /* === STRUCTURAL PROPERTIES ONLY === */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-content: center;
    min-width: var(--oom-button-min-width);
    padding: var(--oom-button-padding);
    border: none;
    border-radius: var(--oom-button-border-radius);
    font-size: var(--oom-button-font-size);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle:
     * - background-color
     * - color
     * - border-color
     * - box-shadow
     */
    
    /* === NESTED STATES === */
    &:hover,
    &:focus {
        /* NO VISUAL STYLING - Let theme handle hover/focus states */
        text-decoration: none;
        transform: translateY(var(--oom-drag-hover-translate));
    }
    
    /* === MODAL BUTTON VARIANTS === */
    &.mod-cta,
    &.oom-modal-btn--apply,
    &.oom-modal-btn--primary {
        /* NO VISUAL STYLING - Let theme handle primary button appearance */
        font-weight: 600;
    }
    
    &.mod-warning {
        /* WARNING: Keep warning state for functional clarity */
        border: 1px solid var(--text-error);
        color: var(--text-on-accent);
        background: var(--text-error);
        
        &:hover {
            background: var(--text-error-hover);
        }
    }
    
    &.mod-muted,
    &.oom-modal-btn-muted {
        /* NO VISUAL STYLING - Let theme handle muted button appearance */
        opacity: 0.6;
        
        &:hover {
            opacity: 0.8;
        }
    }
}

/* =============================================================================
   ICON BUTTONS & PICKER BUTTONS - Theme Integrated
   ============================================================================= */

.oom-button-icon {
    /* === STRUCTURAL PROPERTIES ONLY === */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--oom-icon-grid-item-size);
    height: var(--oom-icon-grid-item-size);
    padding: 0;
    border-radius: var(--oom-radius-md);
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle colors/backgrounds */
    
    /* === NESTED STATES === */
    &:hover {
        /* Let theme handle color changes */
        transform: translateY(var(--oom-drag-hover-translate));
    }
    
    /* === NESTED ICON SIZING === */
    svg {
        width: var(--oom-icon-svg-size);
        height: var(--oom-icon-svg-size);
    }
}

/* Icon Picker Buttons */
.oom-icon-picker-btn {
    /* === STRUCTURAL PROPERTIES ONLY === */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--oom-icon-grid-item-size);
    height: var(--oom-icon-grid-item-size);
    border-radius: var(--oom-radius-md);
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle */
    
    /* === NESTED STATES === */
    &:hover,
    &:focus {
        /* Let theme handle hover/focus styling */
        transform: scale(1.05);
    }
    
    &.selected {
        /* Let theme handle selected state */
        font-weight: 600;
        
        /* NO VISUAL STYLING - Let theme handle selection colors */
    }
    
    /* === NESTED ICON STYLING === */
    svg {
        width: var(--oom-icon-svg-size);
        height: var(--oom-icon-svg-size);
        
        /* NO VISUAL STYLING - Let theme handle icon colors */
    }
}

/* =============================================================================
   EXPAND BUTTONS - Smart State Management with :has()
   ============================================================================= */

.oom-button--expand,
.oom-expand-button {
    /* === STRUCTURAL PROPERTIES ONLY === */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    border-radius: var(--oom-button-border-radius);
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle */
    
    /* === SMART STATE MANAGEMENT WITH :has() === */

    /* Automatically rotate based on expanded content state */
    &:has(+ .oom-content-wrapper.expanded) {
        .oom-button-icon {
            transform: rotate(180deg);
        }
    }
    
    /* === NESTED STATES === */
    &:hover {
        /* Let theme handle hover styling */
        transform: scale(1.05);
    }
    
    &:focus {
        outline: none;

        /* Let theme handle focus styling */
    }
    
    &:active {
        transform: scale(0.95);
    }
    
    /* === STATE VARIANTS === */
    &.oom-button--state-expanded {
        .oom-button-icon {
            transform: rotate(180deg);
        }
    }
    
    /* === POSITIONED EXPAND BUTTONS === */
    &[style*="position: absolute"] {
        /* Specific positioning adjustments for absolute positioned expand buttons */
        &:hover {
            /* Reduce transform intensity for positioned buttons */
            transform: scale(1.02);
        }
    }
    
    /* === EXPAND BUTTON TEXT INDICATORS === */
    &[data-expanded="true"] .oom-button-text::before {
        /* Text indicators for expanded state */
        content: "▲ ";
    }
    
    &[data-expanded="false"] .oom-button-text::before,
    &:not([data-expanded="true"]) .oom-button-text::before {
        content: "▼ ";
    }
}

/* =============================================================================
   NAVIGATION & TAB BUTTONS - Smart State Management
   ============================================================================= */

/* Navigation/Tab Buttons */
.oom-nav-item,
.oom-hub-tab-nav-item,
.oom-metrics-tabs-button {
    /* Layout structure only */
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-sm);
    padding: var(--oom-spacing-sm);
    border-radius: var(--oom-radius-sm);
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle */
    
    &:hover {
        /* Let theme handle hover state */
        transform: translateY(var(--oom-drag-hover-translate));
    }
    
    &.active,
    &.is-active,
    &.oom-metrics-tabs-active {
        /* Let theme handle active state */
        font-weight: 600;
    }
    
    /* === NESTED ICON STYLING === */
    .oom-nav-icon,
    .oom-hub-tab-icon,
    .oom-metrics-tabs-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        
        /* NO VISUAL STYLING - Let theme handle icon colors */
        
        svg {
            width: var(--oom-icon-svg-size);
            height: var(--oom-icon-svg-size);
        }
    }
    
    /* === NESTED LABEL STYLING === */
    .oom-nav-label,
    .oom-hub-tab-label,
    .oom-metrics-tabs-label {
        font-size: calc(var(--font-ui-small) + 1px);
        
        /* NO VISUAL STYLING - Let theme handle text colors */
    }
}

/* Special tab button variants */
.oom-metrics-tabs-button {
    &[data-tab-id="overview"] {
        /* Special overview tab styling */
        h2 {
            margin: 0;
            font-size: var(--font-ui-medium);
            
            /* NO VISUAL STYLING - Let theme handle */
        }
    }
}

/* =============================================================================
   SPECIALIZED BUTTON TYPES - Consolidated
   ============================================================================= */

/* Time Filter Buttons */
.oneirometrics-time-filter-button {
    /* === STRUCTURAL PROPERTIES ONLY === */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--oom-button-padding);
    border-radius: var(--oom-button-border-radius);
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle */
    
    /* === NESTED STATES === */
    &:hover,
    &:focus {
        /* Let theme handle hover/focus styling */
        transform: translateY(var(--oom-drag-hover-translate));
    }
}

/* Apply Button (from date navigator) */
.oom-apply-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--oom-button-padding);
    border-radius: var(--oom-button-border-radius);

    /* Inherits from base button - no additional styling needed */
    font-weight: 600;
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle */
    
    &:hover {
        /* Let theme handle hover state */
        transform: translateY(var(--oom-drag-hover-translate));
    }
}

/* Today Button (from calendar/date navigator) */
.oom-today-button {
    /* Let theme handle today button styling */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--oom-button-padding);
    border-radius: var(--oom-button-border-radius);
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle */
    
    &:hover {
        /* Let theme handle hover state */
        transform: translateY(var(--oom-drag-hover-translate));
    }
}

/* Month Buttons (from date navigator) */
.oom-month-button {
    /* Let theme handle month button styling */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--oom-button-border-radius);
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle */
    
    &:hover,
    &:focus {
        /* Let theme handle hover/focus states */
        transform: translateY(var(--oom-drag-hover-translate));
    }
}

/* Action Buttons */
.oom-action-button,
.oom-quick-action-button {
    /* Structural layout only */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--oom-button-border-radius);
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle */
    
    &:hover {
        /* Let theme handle hover state */
        transform: translateY(var(--oom-drag-hover-translate));
    }
}

/* Filter Buttons */
.oom-filter-button {
    /* Let theme handle filter button styling */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--oom-button-border-radius);
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle */
    
    &:hover {
        /* Let theme handle hover state */
        transform: translateY(var(--oom-drag-hover-translate));
    }
}

/* Open Note Button */
.oom-open-note-button {
    /* Structural properties only */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--oom-button-padding);
    border-radius: var(--oom-button-border-radius);
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle */
    
    &.enabled {
        opacity: 1;
        pointer-events: auto;
    }
    
    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }
    
    &:hover {
        /* Let theme handle hover state */
        transform: translateY(var(--oom-drag-hover-translate));
    }
}

/* Action Button Specialized Types */
.oom-action-btn {
    /* Structural action button */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--oom-spacing-xs);
    border-radius: var(--oom-button-border-radius);
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle */
    
    &:hover {
        /* Let theme handle hover state */
        transform: scale(1.05);
    }
}

/* Pattern Delete Button */
.oom-pattern-delete {
    /* Specialized delete button */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--oom-spacing-xs);
    border-radius: var(--oom-button-border-radius);
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle */
    
    &:hover {
        /* Let theme handle hover state */
        transform: scale(1.05);
    }
}

/* Text Input Toggle Button */
.oom-text-input-toggle {
    /* Text input section toggle */
    cursor: pointer;
    transition: transform var(--oom-transition-fast);
    
    /* NO VISUAL STYLING - Let theme handle */
    
    &:hover {
        transform: scale(1.1);
    }
}

/* Hidden Button */
.oom-button--hidden {
    display: none;
}

/* =============================================================================
   BUTTON GROUPS - Smart Layout with :has()
   ============================================================================= */

.oom-button-group {
    display: inline-flex;
    gap: var(--oom-spacing-xs);
    
    /* === NESTED BUTTON STYLING === */
    .oom-button {
        border-radius: 0;
        
        &:first-child {
            border-top-left-radius: var(--oom-button-border-radius);
            border-bottom-left-radius: var(--oom-button-border-radius);
        }
        
        &:last-child {
            border-top-right-radius: var(--oom-button-border-radius);
            border-bottom-right-radius: var(--oom-button-border-radius);
        }
    }
}

/* =============================================================================
   BUTTON CONTAINERS - Layout Only
   ============================================================================= */

/* Dialog Button Container */
.oom-dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--oom-spacing-sm);
    margin-top: var(--oom-spacing-lg);
}

/* Modal Button Container */
.oom-modal-button-container {
    /* === STRUCTURAL PROPERTIES ONLY === */
    display: flex;
    justify-content: flex-end;
    gap: var(--oom-spacing-sm);
    margin-top: var(--oom-spacing-lg);
    
    /* NO VISUAL STYLING - Let theme handle container appearance */
    
    /* === NESTED STATES === */
    .oom-modal-btn,
    .oom-modal-button {
        /* NO VISUAL STYLING - Let theme handle nested button appearance */
        flex: 0 0 auto;
    }
}

/* Metric Editor Button Container */
.oom-metric-editor-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--oom-spacing-sm);
    margin-top: var(--oom-spacing-md);
}

/* Action Buttons Container */
.oom-action-buttons {
    display: flex;
    justify-content: center;
    gap: var(--oom-spacing-sm);
}

/* Quick Navigation Buttons Container */
.oom-quick-nav-buttons {
    display: flex;
    justify-content: center;
    gap: var(--oom-spacing-xs);
}

/* Button Container with Smart Layout */
.oom-button-container {
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-sm);
    
    /* === SMART RESPONSIVE LAYOUT WITH :has() === */

    /* Adjust layout based on content */
    &:has(.oom-button--primary) {
        justify-content: flex-end;
    }
    
    /* Stack on mobile when many buttons */
    &:has(.oom-button:nth-child(4)) {
        @media screen and (max-width: var(--oom-breakpoint-mobile)) {
            flex-direction: column;
            align-items: stretch;
        }
    }
}

/* =============================================================================
   SPECIALIZED MODAL/CONTEXT BUTTONS
   ============================================================================= */

/* Log Action Buttons */
.oom-log-actions button {
    /* Structural layout only */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--oom-spacing-sm);
    border-radius: var(--oom-button-border-radius);
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle */
    
    &:hover {
        /* Let theme handle hover state */
        transform: translateY(var(--oom-drag-hover-translate));
    }
}

/* Test Modal Action Buttons */
.oom-test-modal-actions-section button {
    /* NO VISUAL STYLING - Let theme handle button styling */
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    &.oom-validating {
        /* Loading state indicator */
        opacity: 0.7;
        cursor: wait;
    }
    
    &:hover {
        /* Let theme handle hover state */
        transform: translateY(var(--oom-drag-hover-translate));
    }
}

/* =============================================================================
   BUTTON RESPONSIVE DESIGN
   ============================================================================= */

@media (width <= 768px) {
    .oom-modal-button-container {
        flex-direction: column;
        gap: var(--oom-spacing-xs);
        
        .oom-modal-btn,
        .oom-modal-button {
            width: 100%;
        }
    }
    
    .oom-button-container {
        &:has(.oom-button:nth-child(3)) {
            flex-direction: column;
            align-items: stretch;
            
            .oom-button {
                width: 100%;
            }
        }
    }
}

/* =============================================================================
   ACCESSIBILITY & REDUCED MOTION
   ============================================================================= */

@media (forced-colors: active) {
    .oom-button,
    .oom-button-icon,
    .oom-modal-btn,
    .oom-modal-button,
    .oneirometrics-time-filter-button,
    .oom-icon-picker-btn,
    .oom-action-button,
    .oom-quick-action-button,
    .oom-filter-button,
    .oom-nav-item,
    .oom-hub-tab-nav-item,
    .oom-metrics-tabs-button {
        /* High contrast mode - minimal overrides */
        border: 1px solid ButtonText;
    }
    
    .oom-button:focus,
    .oom-button-icon:focus,
    .oom-modal-btn:focus,
    .oom-modal-button:focus,
    .oneirometrics-time-filter-button:focus,
    .oom-icon-picker-btn:focus {
        outline: 2px solid Highlight;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oom-button,
    .oom-button-icon,
    .oom-button--expand,
    .oom-expand-button,
    .oom-modal-btn,
    .oom-modal-button,
    .oneirometrics-time-filter-button,
    .oom-icon-picker-btn,
    .oom-action-button,
    .oom-quick-action-button,
    .oom-filter-button,
    .oom-nav-item,
    .oom-hub-tab-nav-item,
    .oom-metrics-tabs-button {
        transition: none;
    }
    
    .oom-button:hover,
    .oom-button:active,
    .oom-button-icon:hover,
    .oom-button--expand:hover,
    .oom-expand-button:hover,
    .oom-action-button:hover,
    .oom-quick-action-button:hover {
        transform: none;
    }
    
    .oom-button--loading::after {
        animation: none;
    }
    
    .oom-button--clicked {
        transform: none;
    }
} 

/* =============================================================================
   COMPONENT: TABLES (18.5 KB)
   ============================================================================= */
/* =============================================================================
   OneiroMetrics Tables Component
   Theme-agnostic structural styling for all table components
   ============================================================================= */

/* =============================================================================
   MIGRATION NOTICE - Legacy Metrics Note
   ============================================================================= */

.oom-migration-notice {
    background: var(--background-modifier-info);
    padding: 1em;
    margin: 1em 0;
    border-radius: var(--radius-m);
    border: 1px solid var(--background-modifier-border-hover);
}

.oom-migration-notice strong {
    display: block;
    margin-bottom: 0.5em;
}

.oom-migration-notice > div {
    margin-top: 0.8em;
}

.oom-migration-notice button:first-child {
    margin-right: 0.5em;
}

.oom-migration-notice button:last-child {
    font-size: 0.9em;
}

/* =============================================================================
   TABLE CONTAINERS - Layout Foundation
   ============================================================================= */

.oom-table-container {
    /* === STRUCTURAL PROPERTIES ONLY === */
    position: relative;
    margin: var(--oom-spacing-md) 0;
    border-radius: var(--oom-radius-md);
    overflow-x: auto;
    overflow-y: visible;
    
    /* NO VISUAL STYLING - Let Obsidian theme handle:
     * - background-color
     * - border
     * - box-shadow
     */
    
    /* === RESPONSIVE SCROLLING === */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    
    /* === NESTED WRAPPER STYLING === */
    .oom-table-wrapper {
        position: relative;
        min-width: 100%;
        
        /* NO VISUAL STYLING - Let theme handle */
    }
    
    /* === LOADING STATE === */
    &.loading {
        position: relative;
        
        .oom-table {
            opacity: 0.6;
            pointer-events: none;
        }
    }
}

.oom-table-wrapper {
    /* Structural properties only */
    width: 100%;
    overflow: visible;
    
    /* NO VISUAL STYLING - Let theme handle */
}

/* =============================================================================
   MAIN TABLE SYSTEM - Theme Integrated
   ============================================================================= */

.oom-table {
    /* === STRUCTURAL PROPERTIES === */
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
    
    /* NO VISUAL STYLING - Let theme handle table styling */
    
    /* === TABLE HEADER === */
    th {
        position: relative;

        /* Structural properties only - using size utility pattern */
        padding: var(--oom-spacing-sm) var(--oom-spacing-md); /* Same as .u-size--md */
        font-weight: 600;
        text-align: left;
        vertical-align: middle;
        cursor: pointer;
        user-select: none;
        
        /* NO VISUAL STYLING - Let theme handle header styling */
        
        /* === NESTED HOVER STATE === */
        &:hover {
            /* Let theme handle hover styling */
        }
        
        &:focus {
            /* Let theme handle focus styling */
            outline: none;
        }
        
        /* === SORTABLE COLUMN INDICATORS === */
        &[data-sort]::after {
            position: absolute;
            top: 50%;
            right: var(--oom-spacing-sm);
            transform: translateY(-50%);
            content: "";
            
            /* NO VISUAL STYLING - Let theme handle sort indicators */
        }
        
        &[data-sort="asc"]::after {
            font-size: 0.8em;
            content: "▲";
        }
        
        &[data-sort="desc"]::after {
            font-size: 0.8em;
            content: "▼";
        }
    }
    
    /* === TABLE CELLS === */
    td {
        /* Structural properties only */
        padding: 4px 8px;
        vertical-align: top;
        
        /* NO VISUAL STYLING - Let theme handle cell styling */
    }
    
    /* === TABLE ROWS === */
    tr {
        /* Structural properties only */
        transition: all var(--oom-transition-fast);
        
        /* NO VISUAL STYLING - Let theme handle row styling */
        
        /* === NESTED ROW HOVER === */
        &:hover {
            /* Let theme handle row hover styling */
        }
    }
    
    /* === SPECIALIZED COLUMN TYPES === */
    .oom-date-column {
        width: var(--oom-table-date-width);
        white-space: nowrap;
    }
    
    .oom-title-column {
        width: var(--oom-table-title-width);
        min-width: 200px;
    }
    
    .oom-words-column {
        width: var(--oom-table-words-width);
        text-align: center;
    }
    
    .oom-content-column {
        width: var(--oom-table-content-width);
        max-width: 300px;
    }
    
    .oom-metrics-column {
        width: var(--oom-table-metrics-width);
        text-align: center;
    }
}

/* =============================================================================
   DREAM ENTRIES TABLE - Specialized Functionality
   ============================================================================= */

.oom-dream-row {
    /* === STRUCTURAL PROPERTIES === */
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle */
    
    /* === VISIBILITY STATES === */
    &.oom-row--hidden {
        display: none;
    }
    
    &.oom-row--visible {
        display: table-row;
    }
    
    /* === SMART STATE MANAGEMENT WITH :has() === */
    &:has(.oom-content-wrapper.expanded) {
        /* Auto-adjust row when content is expanded */
        .oom-content-column {
            max-width: none;
        }
    }
}

/* =============================================================================
   VIRTUAL SCROLLING - Dynamic Positioning System
   ============================================================================= */

.oom-virtualized-container {
    /* Container for virtual scrolling rows */
    position: relative;
    height: calc(var(--oom-total-rows, 0) * var(--oom-row-height, 50px));
    overflow: hidden;
}

.oom-virtualized-rows-container {
    /* Container that holds all virtualized rows */
    position: relative;
    height: calc(var(--oom-total-rows, 0) * var(--oom-row-height, 50px));
    width: 100%;
}

.oom-dream-row.oom-virtualized {
    /* Virtualized row positioning using CSS custom properties */
    position: absolute;
    top: calc(var(--oom-row-index, 0) * var(--oom-row-height, 50px));
    width: 100%;
    height: var(--oom-row-height, 50px);
    display: var(--oom-row-display, table-row);
    
    /* Performance optimizations for virtual scrolling */
    contain: layout style;
    will-change: transform;
}

.oom-virtualized-table-template {
    /* Template row for cloning - hidden by default */
    position: absolute;
    width: 100%;
    height: var(--oom-row-height, 50px);
    display: none;
}

/* Virtual scrolling container overflow handling */
.oom-table-container:has(.oom-virtualized-rows-container) {
    /* Only apply virtual scrolling styles when container has virtualized rows */
    overflow-y: auto;
    max-height: calc(var(--oom-visible-rows, 12) * var(--oom-row-height, 50px));
    
    /* Scrollbar styling for virtual tables */
    scrollbar-width: thin;
    
    &::-webkit-scrollbar {
        width: 8px;
    }
    
    &::-webkit-scrollbar-track {
        /* Let theme handle scrollbar track styling */
    }
    
    &::-webkit-scrollbar-thumb {
        /* Let theme handle scrollbar thumb styling */
        border-radius: 4px;
    }
}

.oom-content-cell {
    /* Structural properties for expandable content */
    position: relative;
    
    /* NO VISUAL STYLING - Let theme handle */
}

/* =============================================================================
   TABLE STATES - Loading & Empty
   ============================================================================= */

.oom-table-loading {
    position: relative;

    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    
    /* NO VISUAL STYLING - Let theme handle */
    
    /* === LOADING SPINNER === */
    &::after {
        width: 24px;
        height: 24px;
        border: 2px solid currentcolor;
        border-radius: 50%;
        animation: oom-table-spin 1s linear infinite;
        content: "";
        border-right-color: transparent;
        
        /* NO VISUAL STYLING - Let theme handle spinner colors */
    }
}

.oom-table-empty {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    font-size: var(--font-ui-medium);
    
    /* NO VISUAL STYLING - Let theme handle empty state styling */
}

@keyframes oom-table-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* =============================================================================
   TABLE SECTIONS - Layout & Organization
   ============================================================================= */

h2.oom-table-title.oom-stats-title {
    margin-block-start: 0;
}

.oom-table-section {
    /* Structural layout */

    /* NO VISUAL STYLING - Let theme handle */
    
    /* === NESTED SECTION VARIANTS === */
    &.oom-stats-section {
        /* Stats section specific layout */
        margin-bottom: var(--oom-spacing-xl);
    }
}

.oom-metric-category {
    font-size: var(--font-ui-smaller);

    /* Category row styling */
    font-weight: 600;
    
    /* NO VISUAL STYLING - Let theme handle category styling */
    
    td {
        padding: var(--oom-spacing-md);
        
        /* NO VISUAL STYLING - Let theme handle */
    }
}

/* =============================================================================
   TABLE FILTER INTEGRATION - Smart Display
   ============================================================================= */

.oom-filter-display {
    /* Structural properties for filter state */
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle */
    
    &--updated {
        /* Updated filter state indicator */
        animation: oom-filter-pulse 0.3s ease-in-out;
    }
}

@keyframes oom-filter-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* =============================================================================
   METRIC ICON INTEGRATION - Table Cells
   ============================================================================= */

.oom-table th .oom-metric-icon,
.oom-table td .oom-metric-icon {
    /* Icon positioning in tables */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--oom-spacing-xs);
    
    /* NO VISUAL STYLING - Let theme handle icons */
}

td:has(.oom-metric-icon-container) {
    /* Smart cell layout with icons */
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-xs);
}

.oom-metric-icon-container {
    /* Icon container in tables */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* NO VISUAL STYLING - Let theme handle */
}

/* =============================================================================
   TABLE INTEGRATION - Project Note Context
   ============================================================================= */

.markdown-preview-view[data-type="oom-project-note"] {
    /* === NESTED TABLE SECTION STYLING === */
    .oom-table-section {
        margin: var(--oom-spacing-lg) 0;
        
        /* NO VISUAL STYLING - Let theme handle */
    }
    
    .oom-table-container {
        margin: var(--oom-spacing-md) 0;
        
        /* NO VISUAL STYLING - Let theme handle */
    }
    
    /* === TABLE TITLE STYLING === */
    .oom-table-title {
        margin-bottom: var(--oom-spacing-md);
        font-size: var(--font-ui-large);
        font-weight: 600;
        
        /* NO VISUAL STYLING - Let theme handle */
    }
    
    .oom-dream-entries-title {
        margin: var(--oom-spacing-lg) 0 var(--oom-spacing-md) 0;
        font-size: var(--font-ui-large);
        font-weight: 600;
        
        /* NO VISUAL STYLING - Let theme handle */
    }
}

.markdown-rendered table.oom-table {
    /* Integration with Obsidian's markdown renderer */
    td {
        /* NO VISUAL STYLING - Let theme handle */
        vertical-align: top;
    }
    
    tbody > tr > td.column-content {
        /* Content column specific styling */
        max-width: 300px;
        word-wrap: break-word;
    }
}

/* =============================================================================
   RESPONSIVE DESIGN - Mobile First
   ============================================================================= */

@media screen and (max-width: var(--oom-breakpoint-tablet)) {
    .oom-table-container {
        /* Tablet responsive adjustments */
        margin: var(--oom-spacing-sm) 0;
    }
    
    .oom-table,
    .oom-stats-table,
    .oom-metrics-tabs-score-table table {
        /* Smaller padding on tablets - using size utility pattern */
        th,
        td {
            padding: var(--oom-spacing-xs) var(--oom-spacing-sm); /* Same as .u-size--sm */
            font-size: var(--font-ui-smaller);
        }
    }
    
    .markdown-preview-view[data-type="oom-project-note"] {
        .oom-table-section {
            margin: var(--oom-spacing-md) 0;
        }
    }
}

@media screen and (max-width: var(--oom-breakpoint-mobile)) {
    .oom-table-container {
        /* Mobile responsive adjustments */
        margin: var(--oom-spacing-xs) 0;
        border-radius: var(--oom-radius-sm);
    }
    
    .oom-table,
    .oom-stats-table,
    .oom-metrics-tabs-score-table table {
        /* Mobile table adjustments */
        font-size: var(--font-ui-smaller);
        
        th,
        td {
            padding: var(--oom-spacing-xs); /* Same as .u-size--xs */
        }
        
        /* === MOBILE COLUMN ADJUSTMENTS === */
        .oom-date-column {
            width: 80px;
            font-size: var(--font-ui-smallest);
        }
        
        .oom-title-column {
            min-width: 150px;
        }
        
        .oom-content-column {
            max-width: 200px;
        }
        
        .oom-metrics-column {
            width: 60px;
        }
    }
    
    .markdown-preview-view[data-type="oom-project-note"] {
        .oom-table-section {
            margin: var(--oom-spacing-sm) 0;
        }
        
        .oom-table-container {
            margin: var(--oom-spacing-xs) 0;
        }
    }
}

/* =============================================================================
   ACCESSIBILITY & REDUCED MOTION
   ============================================================================= */

@media (forced-colors: active) {
    .oom-table-container {
        /* High contrast mode support */
        border: 1px solid ButtonText;
    }
    
    .oom-table th,
    .oom-table td,
    .oom-stats-table th,
    .oom-stats-table td,
    .oom-metrics-tabs-score-table th,
    .oom-metrics-tabs-score-table td {
        border: 1px solid ButtonText;
    }
    
    .oom-table th,
    .oom-stats-table th,
    .oom-metrics-tabs-score-table th {
        color: ButtonText;
        background: ButtonFace;
    }
    
    .oom-metric-category td {
        color: HighlightText;
        background: Highlight;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oom-table tr,
    .oom-stats-table tr,
    .oom-dream-row,
    .oom-filter-display {
        transition: none;
    }
    
    .oom-table-loading::after {
        animation: none;
    }
    
    .oom-filter-display--updated {
        animation: none;
    }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
    .oom-table-container {
        margin: var(--oom-spacing-sm) 0;

        /* Print-friendly table styles */
        overflow: visible;
    }
    
    .oom-table th,
    .oom-stats-table th,
    .oom-metrics-tabs-score-table th {
        border-bottom: 2px solid black !important;
        color: black !important;

        /* Print header styling */
        background: none !important;
    }
    
    .oom-table td,
    .oom-stats-table td,
    .oom-metrics-tabs-score-table td {
        /* Print cell styling */
        border-bottom: 1px solid #ccc !important;
    }
    
    .oom-table tr,
    .oom-stats-table tr {
        /* Print row styling */
        page-break-inside: avoid;
    }
    
    /* Expand all content for print */
    .oom-content-wrapper .oom-content-preview {
        display: none !important;
    }
    
    .oom-content-wrapper .oom-content-full {
        display: block !important;
    }
    
    .oom-table-loading,
    .oom-table-empty {
        display: none;
    }
}

/* Content visibility control for table expansions */
.oom-content-full--hidden {
    display: none;
}

/* =============================================================================
   CONTENT VISIBILITY STATES - Dynamic Toggle System
   ============================================================================= */

.oom-content-full {
    /* Default visible state for full content */
    display: block;
    
    /* Enhanced transition for smooth expand/collapse */
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle */
}

.oom-content-full--visible {
    /* Explicitly visible state */
    display: block !important;
}

.oom-content-full--hidden {
    /* Hidden state for content toggle */
    display: none !important;
}

.oom-content-full--collapsed {
    /* Alternative collapsed state with height animation */
    display: block;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all var(--oom-transition-normal);
}

.oom-content-full--expanded {
    /* Expanded state with height animation */
    display: block;
    height: auto;
    opacity: 1;
    transition: all var(--oom-transition-normal);
}

/* =============================================================================
   PHASE 7L: ContentToggler Inline Style Elimination
   ============================================================================= */

/* Content cell overflow control during transitions */
.oom-content-cell--transitioning {
    overflow: hidden;
}

.oom-content-cell--expanded {
    overflow: visible;
}

/* Table row dynamic height for expanded content */
.oom-table-row--auto-height {
    height: auto !important;
    min-height: fit-content !important;
}

.oom-table-row--expanded {
    height: auto;
    min-height: fit-content;
    transition: height var(--oom-transition-normal);
} 

/* =============================================================================
   COMPONENT: SETTINGS (4.7 KB)
   ============================================================================= */
/* Settings visibility control */
.oom-settings-hidden {
    display: none;
}

/* =============================================================================
   OneiroMetrics Settings Component
   Theme-agnostic structural styling for settings UI components
   ============================================================================= */

/* =============================================================================
   SETTINGS VISIBILITY STATES - Dynamic UI Management
   ============================================================================= */

/* Backup settings container */
.oom-backup-folder-container {
    /* Default visible state */
    display: block;
    
    /* Smooth transitions for show/hide */
    transition: all var(--oom-transition-normal);
}

.oom-backup-folder-container--hidden {
    display: none !important;
}

.oom-backup-folder-container--visible {
    display: block !important;
}

/* Advanced settings collapsible content */
.oom-advanced-content {
    /* Default hidden state for collapsible content */
    display: none;
    
    /* Enhanced transition for smooth expand/collapse */
    transition: all var(--oom-transition-normal);
}

.oom-advanced-content--expanded {
    display: block !important;
}

.oom-advanced-content--collapsed {
    display: none !important;
}

/* Logging management settings */
.oom-logging-management {
    /* Default visible state */
    display: block;
    
    /* Transition for conditional visibility */
    transition: all var(--oom-transition-normal);
}

.oom-logging-management--hidden {
    display: none !important;
}

.oom-logging-management--visible {
    display: block !important;
}

/* Performance section visibility */
.oom-performance-section {
    /* Default visible state */
    display: block;
    
    /* Transition for conditional visibility */
    transition: all var(--oom-transition-normal);
}

.oom-performance-section--hidden {
    display: none !important;
}

.oom-performance-section--visible {
    display: block !important;
}

/* Template manager container */
.oom-template-manager {
    /* Default hidden state */
    display: none;
    
    /* Enhanced transition for template management UI */
    transition: all var(--oom-transition-normal);
}

.oom-template-manager--visible {
    display: block !important;
}

.oom-template-manager--hidden {
    display: none !important;
}

/* Template preview container */
.oom-template-preview {
    /* Default hidden state for previews */
    display: none;
    
    /* Smooth transition for preview toggle */
    transition: all var(--oom-transition-normal);
}

.oom-template-preview--visible {
    display: block !important;
}

.oom-template-preview--hidden {
    display: none !important;
}

/* =============================================================================
   SETTINGS UI ENHANCEMENTS - Accessibility & UX
   ============================================================================= */

/* Enhanced collapsible section behavior */
.oom-collapsible-section.collapsed .oom-advanced-content {
    display: none;
}

.oom-collapsible-section:not(.collapsed) .oom-advanced-content {
    display: block;
}

/* Smooth transitions for all settings visibility states */
.oom-backup-folder-container,
.oom-advanced-content,
.oom-logging-management,
.oom-performance-section,
.oom-template-manager,
.oom-template-preview {
    /* Performance optimization for frequent visibility changes */
    will-change: display, opacity;
    
    /* Consistent transition timing */
    transition-duration: var(--oom-transition-fast);
    transition-property: opacity, transform;
    transition-timing-function: ease-in-out;
}

/* Alternative fade-based visibility (for smoother UX) */
.oom-settings-fade-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--oom-transition-normal), transform var(--oom-transition-normal);
}

.oom-settings-fade-out {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity var(--oom-transition-fast), transform var(--oom-transition-fast);
}

/* =============================================================================
   INTERACTIVE ELEMENTS - Buttons & Controls
   ============================================================================= */

/* Advanced settings toggle button */
.oom-advanced-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 20px;
    height: 20px;
}

/* Advanced setting container positioning */
.oom-advanced-setting-container {
    position: relative;
    cursor: pointer;
}

/* Template close button */
.oom-template-close-button {
    float: right;
    border: none;
    background: none;
    font-size: 1.5em;
    cursor: pointer;
    padding: 0 0.5em;
} 

/* =============================================================================
   COMPONENT: UTILITIES (24.9 KB)
   ============================================================================= */
/* =============================================================================
   OneiroMetrics Utilities Component
   Helper classes, layout utilities, and common patterns
   ============================================================================= */

/* =============================================================================
   SIZE UTILITIES - Standardized Padding/Sizing Patterns
   Extracts commonly repeated sizing patterns from components
   ============================================================================= */

/* =============================================================================
   VERIFIED SIZE UTILITIES - Based on actual repeated patterns
   ============================================================================= */

/* Pattern: var(--oom-spacing-xs) var(--oom-spacing-sm) 
   Found in: base.css, tables.css, navigation.css + CSS variables */
.u-size--sm {
    padding: var(--oom-spacing-xs) var(--oom-spacing-sm);
}

/* Pattern: var(--oom-spacing-sm) var(--oom-spacing-md)
   Found in: tables.css, navigation.css, icons.css + 4 CSS variables */
.u-size--md {
    padding: var(--oom-spacing-sm) var(--oom-spacing-md);
}

/* Pattern: display: flex + align-items: center + justify-content: center
   Found in: icons.css (5+ times), likely other components too */
.u-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =============================================================================
   STATE UTILITIES - Form and Component States (Obsidian Native Variables)
   ============================================================================= */

/* Error state utility using Obsidian's native semantic color
   Pattern: border-color: var(--text-error) - Found 10+ times across components */
.u-state--error {
    border-color: var(--text-error);
}

/* Success state utility using Obsidian's native semantic color
   Pattern: border-color: var(--text-success) - Found in forms/validation */
.u-state--success {
    border-color: var(--text-success);
}

/* Warning state utility using Obsidian's native semantic color
   Pattern: border-color: var(--text-warning) - Found in forms/validation */
.u-state--warning {
    border-color: var(--text-warning);
}

/* Loading state utility for forms and buttons
   Pattern: opacity + cursor - Found in multiple button states */
.u-state--loading {
    opacity: 0.6;
    cursor: wait;
}

/* Focus outline removal utility for accessibility scenarios
   Replaces: style.outline = 'none' in DateSelectionModal.ts */
.oom-focus-no-outline {
    outline: none;
}

/* Interactive state utility using Obsidian's native hover color
   Pattern: background-color on hover - Found throughout components */
.u-state--interactive:hover {
    background-color: var(--interactive-hover);
}

/* =============================================================================
   OBSIDIAN NATIVE SPACING UTILITIES - Leverage Obsidian's 4px Grid System
   ============================================================================= */

/* Margin utilities using Obsidian's official --size-4-* variables */
.u-margin--xs { margin: var(--oom-spacing-xs); }      /* 4px - replaces direct usage */
.u-margin--sm { margin: var(--oom-spacing-sm); }      /* 8px - replaces direct usage */
.u-margin--md { margin: var(--oom-spacing-md); }      /* 16px - replaces direct usage */
.u-margin--lg { margin: var(--oom-spacing-lg); }      /* 24px - replaces direct usage */
.u-margin--xl { margin: var(--oom-spacing-xl); }      /* 32px - replaces direct usage */

/* Padding utilities using Obsidian's official --size-4-* variables */
.u-padding--xs { padding: var(--oom-spacing-xs); }    /* 4px - replaces direct usage */
.u-padding--sm { padding: var(--oom-spacing-sm); }    /* 8px - replaces direct usage */
.u-padding--md { padding: var(--oom-spacing-md); }    /* 16px - replaces direct usage */
.u-padding--lg { padding: var(--oom-spacing-lg); }    /* 24px - replaces direct usage */
.u-padding--xl { padding: var(--oom-spacing-xl); }    /* 32px - replaces direct usage */

/* Gap utilities for flexbox/grid using reliable oom spacing variables */
.u-gap--xs { gap: var(--oom-spacing-xs); }            /* 4px - consolidates gap patterns */
.u-gap--sm { gap: var(--oom-spacing-sm); }            /* 8px - consolidates gap patterns */
.u-gap--md { gap: var(--oom-spacing-md); }            /* 16px - consolidates gap patterns */
.u-gap--lg { gap: var(--oom-spacing-lg); }            /* 24px - consolidates gap patterns */

/* Directional spacing utilities for common patterns */
.u-margin-bottom--sm { margin-bottom: var(--oom-spacing-sm); }    /* margin-bottom patterns */
.u-margin-bottom--md { margin-bottom: var(--oom-spacing-md); }    /* margin-bottom patterns */
.u-margin-bottom--lg { margin-bottom: var(--oom-spacing-lg); }    /* margin-bottom patterns */

.u-margin-top--md { margin-top: var(--oom-spacing-md); }         /* margin-top patterns */
.u-margin-top--lg { margin-top: var(--oom-spacing-lg); }         /* margin-top patterns */
.u-margin-top--xl { margin-top: var(--oom-spacing-xl); }         /* margin-top patterns */

/* =============================================================================
   TRANSITION UTILITIES - Common Animation Patterns
   ============================================================================= */

/* Standard transition utility - consolidates 50+ occurrences
   Pattern: transition: all var(--oom-transition-normal) */
.u-transition {
    transition: all var(--oom-transition-normal);
}

/* Standard transition with easing - found in specific components */
.u-transition--eased {
    transition: all var(--oom-transition-normal) var(--oom-ease-out);
}

/* =============================================================================
   GRID SYSTEMS - Layout Utilities
   ============================================================================= */

.oom-actions-grid,
.oom-icon-picker-grid,
.oom-quick-actions-grid {
    display: grid;
    gap: var(--size-4-4); /* Using Obsidian native instead of var(--oom-spacing-md) */
    
    /* Grid-specific configurations */
    &.oom-actions-grid,
    &.oom-quick-actions-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        margin-top: var(--size-4-4); /* Using Obsidian native instead of var(--oom-spacing-md) */
    }
    
    &.oom-icon-picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        max-height: 200px;
        padding: var(--size-4-2); /* Using Obsidian native instead of var(--oom-spacing-sm) */
        overflow-y: auto;
    }
}

.oom-modal-grid {
    display: grid;
    gap: var(--size-4-4); /* Using Obsidian native instead of var(--oom-spacing-md) */
    grid-template-columns: 1fr 1fr;
    margin-top: var(--size-4-2); /* Using Obsidian native instead of var(--oom-spacing-sm) */
}

.oom-dashboard-info-grid {
    display: grid;
    gap: var(--size-4-6); /* Using Obsidian native instead of var(--oom-spacing-lg) */
    grid-template-columns: 1fr 1fr;
    margin-top: var(--size-4-6); /* Using Obsidian native instead of var(--oom-spacing-lg) */
}

/* =============================================================================
   ACCESSIBILITY UTILITIES
   ============================================================================= */

.oom-sr-only,
.oom-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    overflow: hidden;
    clip: var(--oom-utility-sr-clip);
}

/* Screen reader announcement - used by DateNavigator.announceToScreenReader() */
.sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.oom-focus-visible:focus {
    outline: var(--oom-focus-outline);
    outline-offset: var(--oom-focus-outline-offset);
}

.oom-focus-trap {
    position: relative;
}

.oom-skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    z-index: 9999;
    padding: 8px;
    text-decoration: none;
    transition: top var(--oom-transition-fast);
    
    &:focus {
        top: 6px;
    }
}

/* =============================================================================
   VISIBILITY UTILITIES
   ============================================================================= */

.oom-hide,
.oom-hidden {
    display: none !important;
}

.oom-show {
    display: block !important;
}

.oom-show-inline {
    display: inline !important;
}

.oom-show-inline-block {
    display: inline-block !important;
}

.oom-show-flex {
    display: flex !important;
}

.oom-show-grid {
    display: grid !important;
}

.oom-invisible {
    visibility: hidden !important;
}

.oom-visible {
    visibility: visible !important;
}

.oom-metrics-hide {
    display: none !important;
}

.oom-button--hidden {
    display: none;
}

.oom-row--hidden {
    position: absolute;
    display: none !important;
    opacity: 0;
    visibility: hidden;
    transform: translateZ(0);
}

.oom-row--visible {
    opacity: 1;
    visibility: visible;
    transform: translateZ(0);
}

/* =============================================================================
   PHASE 7M-1: Complete Display/Visibility System
   ============================================================================= */

/* Enhanced display utilities for inline style elimination */
.oom-display-block {
    display: block !important;
}

.oom-display-none {
    display: none !important;
}

.oom-display-show {
    display: block !important;
}

.oom-display-hide {
    display: none !important;
}

/* Row visibility with display control (combines display + classes) */
.oom-table-row--show {
    display: table-row !important;
}

.oom-table-row--hide {
    display: none !important;
}

/* Container visibility toggles */
.oom-container-visible {
    display: block !important;
}

.oom-container-hidden {
    display: none !important;
}

/* Conditional visibility utilities */
.oom-show-when-active {
    display: none;
}

.oom-show-when-active.active {
    display: block !important;
}

.oom-hide-when-empty:empty {
    display: none !important;
}

/* Dropdown/Menu visibility */
.oom-dropdown-show {
    display: block !important;
}

.oom-dropdown-hide {
    display: none !important;
}

/* =============================================================================
   LAYOUT UTILITIES - Content Wrappers
   ============================================================================= */

.oom-content-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 30px;
    transition: max-height var(--oom-transition-duration) ease-in-out;
    
    .oom-content-preview {
        display: block;
        max-height: 120px;
        margin-bottom: var(--size-4-2); /* Using Obsidian native instead of var(--oom-spacing-sm) */
        text-overflow: ellipsis;
        white-space: normal;
        overflow: hidden;
    }
    
    .oom-content-full {
        display: none;
        margin-bottom: var(--size-4-2); /* Using Obsidian native instead of var(--oom-spacing-sm) */
        white-space: normal;
    }
    
    &.expanded,
    &[data-expanded="true"] {
        .oom-content-preview {
            display: none;
        }
        
        .oom-content-full {
            display: block;
        }
    }
}

/* =============================================================================
   SECTION LAYOUTS - Modal & Dashboard
   ============================================================================= */

.oom-modal-section {
    margin-bottom: var(--size-4-6); /* Using Obsidian native instead of var(--oom-spacing-lg) */
    
    h4 {
        margin-bottom: var(--size-4-2); /* Using Obsidian native instead of var(--oom-spacing-sm) */
    }
}

.oom-dashboard-section {
    margin-bottom: var(--size-4-8); /* Using Obsidian native instead of var(--oom-spacing-xl) */
    
    h4 {
        margin-bottom: var(--size-4-4); /* Using Obsidian native instead of var(--oom-spacing-md) */
    }
}

.oom-dashboard-info-grid .oom-dashboard-section {
    margin-top: 0;
}

.oom-journal-structure-sections {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-4); /* Using Obsidian native instead of var(--oom-spacing-md) */
}

/* =============================================================================
   SIDEBAR LAYOUTS
   ============================================================================= */

.oom-journal-manager-sidebar,
.oom-journal-structure-sidebar,
.oom-metrics-tabs-sidebar {
    min-width: 180px;
    padding: var(--oom-spacing-lg) 0;
    overflow-y: auto;
    
    &.oom-journal-manager-sidebar {
        width: 180px;
    }
    
    &.oom-journal-structure-sidebar {
        width: 200px;
        padding: var(--oom-spacing-lg);
    }
    
    &.oom-metrics-tabs-sidebar {
        min-width: 180px;
        max-width: 250px;
        padding: var(--oom-spacing-lg) var(--oom-spacing-sm);
        flex-shrink: 0;
    }
}

.oom-journal-manager-main-content,
.oom-journal-structure-content,
.oom-metrics-tabs-content {
    flex: 1;
    padding: var(--oom-spacing-lg);
    overflow-y: auto;
}

.oom-metrics-tabs-content h2:first-of-type {
    margin-block-start: 0;
}

/* =============================================================================
   COMPACT DISPLAY UTILITIES
   ============================================================================= */

.oom-metrics-compact {
    padding: var(--oom-utility-compact-padding) !important;
    font-size: var(--oom-utility-compact-font-size) !important;
}

/* =============================================================================
   INTERACTION UTILITIES
   ============================================================================= */

.oom-drop-indicator {
    opacity: 0;
    transition: opacity var(--oom-transition-normal) var(--oom-ease-out);
    
    &.visible {
        opacity: 1;
    }
}

.oom-hover-opacity:hover {
    will-change: opacity;
}

/* =============================================================================
   CLEARFIX UTILITY
   ============================================================================= */

.oom-clearfix::after {
    display: table;
    clear: both;
    content: "";
}

/* =============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================= */

.oom-transform,
.oom-hover-lift,
.oom-hover-scale,
.oom-loading {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.oom-hover-lift:hover,
.oom-hover-scale:hover,
.oom-loading {
    will-change: transform;
}

.oom-dream-row,
.oom-content-wrapper,
.oom-modal,
.oom-multiselect-dropdown {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.oom-button--expand,
.oom-preview-toggle,
.oom-drop-indicator {
    will-change: transform, opacity;
}

/* =============================================================================
   RESPONSIVE GRID ADJUSTMENTS
   ============================================================================= */

@media screen and (max-width: var(--oom-breakpoint-tablet)) {
    .oom-dashboard-info-grid {
        gap: var(--oom-spacing-md);
        grid-template-columns: 1fr;
    }
    
    .oom-icon-picker-grid {
        gap: var(--oom-spacing-xs);
        grid-template-columns: repeat(auto-fill, minmax(var(--oom-icon-grid-item-mobile-size), 1fr));
    }
    
    .oom-modal-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: var(--oom-breakpoint-mobile)) {
    .oom-dashboard-info-grid {
        gap: var(--oom-spacing-sm);
    }
    
    .oom-icon-picker-grid {
        gap: 2px;
        grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
        padding: var(--oom-spacing-xs);
    }
    
    .oom-modal-grid {
        gap: var(--oom-spacing-sm);
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   FEEDBACK SYSTEM - Dream Scrape Feedback Components
   ============================================================================= */

/* Dream Scrape Feedback Area */
.oom-dream-scrape-feedback {
    margin: 16px 0;
    padding: 0;
}

.oom-feedback-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 6px;
    border: 1px solid;
    font-size: 14px;
    line-height: 1.4;
}

/* Feedback type styles */
.oom-feedback-info {
    border-color: var(--text-accent);
    color: var(--text-normal);
    background-color: var(--background-modifier-info);
}

.oom-feedback-warning {
    border-color: var(--text-warning);
    color: var(--text-normal);
    background-color: var(--background-modifier-error-hover);
}

.oom-feedback-success {
    border-color: var(--text-success);
    color: var(--text-normal);
    background-color: var(--background-modifier-success);
}

.oom-feedback-error {
    border-color: var(--text-error);
    color: var(--text-normal);
    background-color: var(--background-modifier-error);
}

.oom-feedback-icon {
    display: flex;
    flex-shrink: 0;
    height: 16px;
    width: 16px;
    align-items: center;
    justify-content: center;
}

.oom-feedback-message {
    flex: 1;
    font-weight: 500;
}

.oom-feedback-buttons {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.oom-feedback-buttons .oom-button {
    height: auto;
    padding: 4px 12px;
    font-size: 13px;
}

/* Loading Indicators */
.oom-loading-indicator {
    position: fixed;
    top: 10px;
    right: 10px;
    background: var(--background-primary);
    color: var(--text-normal);
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: 0 2px 8px var(--background-modifier-box-shadow);
    z-index: 1000;
    font-size: 14px;
    border: 1px solid var(--background-modifier-border);
    backdrop-filter: blur(4px);
    animation: oom-loading-fade-in 0.2s ease-out;
}

@keyframes oom-loading-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================================================
   DROPDOWN POSITIONING UTILITIES - For Autocomplete and Suggestion Systems
   ============================================================================= */

/* Base dropdown positioning (used by autocomplete.ts fallback positioning)
   Replaces inline styles: position: absolute, top/left/width from getBoundingClientRect */
.oom-dropdown-absolute {
    position: absolute;
    z-index: 1000;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    box-shadow: var(--shadow-s);
    max-height: 200px;
    overflow-y: auto;
}

/* Dynamic positioning using CSS custom properties 
   Used for setting top/left/width values dynamically from JavaScript */
.oom-dropdown-positioned {
    top: var(--oom-dropdown-top, auto);
    left: var(--oom-dropdown-left, auto);
    width: var(--oom-dropdown-width, auto);
}

/* Suggestion container positioning for folder autocomplete
   Replaces inline styles: --oom-suggestion-top, --oom-suggestion-left, --oom-suggestion-width */
.oom-suggestion-positioned {
    position: absolute;
    top: var(--oom-suggestion-top, auto);
    left: var(--oom-suggestion-left, auto);
    width: var(--oom-suggestion-width, auto);
    z-index: 1000;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    box-shadow: var(--shadow-s);
    max-height: 150px;
    overflow-y: auto;
}

/* Performance optimization for dropdown elements */
.oom-dropdown-absolute,
.oom-dropdown-positioned,
.oom-suggestion-positioned {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Utility for matching input width - common pattern in autocomplete */
.oom-dropdown-match-input-width {
    width: var(--oom-input-width, 100%);
}

/* Utility for dropdown below element - common positioning pattern */
.oom-dropdown-below {
    top: var(--oom-element-bottom, 100%);
    left: var(--oom-element-left, 0);
    min-width: var(--oom-element-width, 200px);
}

/* =============================================================================
   MODAL SIZING UTILITIES - Dynamic Width/Height for ModalFactory
   Replaces inline style width/height assignments in ModalFactory.ts
   ============================================================================= */

/* Dynamic modal width utility - replaces contentEl.style.width = width */
.oom-modal-dynamic-width {
    width: var(--oom-modal-width, auto);
}

/* Dynamic modal height utility - replaces contentEl.style.height = height */
.oom-modal-dynamic-height {
    height: var(--oom-modal-height, auto);
}

/* Dynamic progress bar utility - replaces progressBar.style.width = `${percent}%` */
.oom-progress-bar-dynamic {
    width: var(--oom-progress-width, 0%);
    transition: width 0.2s ease-in-out;
}

/* =============================================================================
   PERFORMANCE OPTIMIZATION UTILITIES - will-change Properties
   Replaces inline style will-change assignments in FilterUI.ts and related components
   ============================================================================= */

/* Performance utility for table content changes - replaces setAttribute('style', 'will-change: contents;') */
.oom-perf-will-change-contents {
    will-change: contents;
}

/* Performance utility for transform and content changes - replaces setAttribute('style', 'will-change: transform, contents; contain: content;') */
.oom-perf-will-change-transform-contents {
    will-change: transform, contents;
    contain: content;
}

/* Performance utility to reset will-change - replaces style.willChange = 'auto' */
.oom-perf-will-change-auto {
    will-change: auto;
}

/* Tooltip bar dynamic styling - replaces HTML style attributes in PatternTooltips.ts */
.oom-tooltip-bar-dynamic {
    width: var(--bar-width, 0%);
    background-color: var(--bar-color, #ccc);
}

/* Display utility classes - replaces inline style.removeProperty('display') and style.display assignments */
.oom-display-none {
    display: none;
}

.oom-display-reset {
    display: revert;
}

/* =============================================================================
   TABLE UTILITIES - Reset and Override Classes  
   ============================================================================= */

/* Utility to reset overflow-x property (used in HubModal for markdown renderer cleanup) */
.oom-table-reset-overflow {
    overflow-x: initial !important;
}

/* Progress bar utilities for dynamic width values */
.oom-progress-bar {
    width: var(--oom-progress-width, 0%);
    transition: width var(--oom-transition-normal, 0.2s ease);
}

/* =============================================================================
   ERROR BOUNDARY VISIBILITY STATES
   ============================================================================= */

/* Error boundary containers */
.oom-error-boundary-content {
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.oom-error-boundary-fallback {
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Content element states */
.oom-error-boundary-content--visible {
  display: block;
  opacity: 1;
  visibility: visible;
}

.oom-error-boundary-content--hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
}

/* Fallback element states */  
.oom-error-boundary-fallback--visible {
  display: block;
  opacity: 1;
  visibility: visible;
}

.oom-error-boundary-fallback--hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
}

/* Error details states */
.oom-error-details--visible {
  display: block;
  opacity: 1;
  visibility: visible;
  max-height: 500px;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

.oom-error-details--hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

/* =============================================================================
   PROGRESS INDICATOR UTILITIES - Full-Screen Overlay Progress Indicator
   Used by src/workers/ui/ProgressIndicator.ts
   ============================================================================= */

/* Main progress indicator overlay container */
.oom-progress-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--background-primary), 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    border-radius: 4px;
}

/* Content container for progress indicator */
.oom-progress-content {
    text-align: center;
    padding: 20px;
    background: var(--background-secondary);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: 200px;
}

/* Progress text/status message */
.oom-progress-text {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text-normal);
}

/* Progress bar container/track */
.oom-progress-bar-container {
    width: 100%;
    height: 6px;
    background: var(--background-modifier-border);
    border-radius: 3px;
    overflow: hidden;
}

/* Progress bar fill - uses existing .oom-progress-bar class */
.oom-progress-bar-container .oom-progress-bar {
    height: 100%;
    background: var(--interactive-accent);
    border-radius: 3px;
} 

/* =============================================================================
   COMPONENT: ICONS (11.5 KB)
   ============================================================================= */
/* =============================================================================
   OneiroMetrics Icons Component
   Comprehensive icon systems for metrics, buttons, navigation, and interface
   ============================================================================= */

/* =============================================================================
   METRIC ICONS - Dream Metrics and Score Indicators
   ============================================================================= */

.oom-metric-icon,
.oom-metric-icon-svg {
    display: inline-flex;
    align-items: center;
    width: var(--oom-icon-size);
    height: var(--oom-icon-size);
    margin-right: 0;
    margin-left: var(--oom-spacing-sm);
    font-size: 1em;
    vertical-align: middle;
    opacity: var(--oom-icon-opacity);
    pointer-events: none;
    transition: color var(--oom-transition-normal),
                opacity var(--oom-transition-normal),
                fill var(--oom-transition-normal);
}

.oom-metric-icon--start {
    margin-right: var(--oom-spacing-sm);
    margin-left: 0;
}

.oom-metric-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--oom-icon-container-min-width);
}

td:has(.oom-metric-icon-container) {
    text-align: center;
    vertical-align: middle;
}

.oom-table th .oom-metric-icon,
.oom-table td .oom-metric-icon,
.oom-select option .oom-metric-icon {
    width: var(--oom-icon-size-sm);
    height: var(--oom-icon-size-sm);
    margin: 0;
}

span.oom-metric-header svg {
    margin-left: var(--oom-spacing-xs);
    vertical-align: middle;
}

/* =============================================================================
   BUTTON ICONS - Icon Elements within Buttons
   ============================================================================= */

.oom-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--oom-spacing-xs);
    transition: all var(--oom-transition-normal);
}

.oom-button-icon svg {
    width: var(--oom-button-icon-size);
    height: var(--oom-button-icon-size);
}

.oom-button--state-expanded .oom-button-icon,
.oom-button--state-collapsed .oom-button-icon {
    transition: transform var(--oom-transition-normal);
}

.oom-button--state-expanded .oom-button-icon {
    transform: rotate(180deg);
}

/* =============================================================================
   NAVIGATION ICONS - Sidebar and Menu Icons
   ============================================================================= */

.oom-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--oom-nav-icon-size);
    height: var(--oom-nav-icon-size);
    margin-right: var(--oom-spacing-sm);
    flex-shrink: 0;
}

.oom-quick-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--oom-quick-action-icon-size);
}

.oom-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--oom-spacing-sm);
    font-size: var(--oom-action-icon-size);
}

/* =============================================================================
   TAB ICONS - Metrics Tabs and Hub Tab Icons
   ============================================================================= */

.oom-metrics-tabs-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--oom-tab-icon-size);
    height: var(--oom-tab-icon-size);
    margin-right: var(--oom-spacing-sm);
    flex-shrink: 0;
}

.oom-hub-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--oom-tab-icon-size);
    height: var(--oom-tab-icon-size);
    margin-right: var(--oom-spacing-sm);
    flex-shrink: 0;
}

.oom-hub-tab-icon svg {
    width: var(--oom-tab-icon-svg-size);
    height: var(--oom-tab-icon-svg-size);
}

/* =============================================================================
   ICON PICKER SYSTEM - Icon Selection Interface
   ============================================================================= */

.oom-icon-picker-container {
    display: flex;
    flex-direction: column;
    gap: var(--oom-spacing-md);
    height: var(--oom-icon-picker-height);
}

.oom-icon-picker-search {
    position: relative;
    margin-bottom: var(--oom-spacing-sm);
}

.oom-icon-picker-search::before {
    position: absolute;
    top: 50%;
    left: var(--oom-spacing-sm);
    width: var(--oom-search-icon-size);
    height: var(--oom-search-icon-size);
    transform: translateY(-50%);
    content: "";
}

.oom-icon-picker-search input {
    width: 100%;
    padding: var(--oom-input-padding);
    padding-left: calc(var(--oom-search-icon-size) + var(--oom-spacing-lg));
    border-radius: var(--oom-input-radius);
    font-size: var(--oom-input-font-size);
}

.oom-icon-picker-search input:focus {
    outline: none;
    box-shadow: var(--oom-focus-ring);
}

.oom-icon-picker-grid {
    display: grid;
    gap: var(--oom-spacing-xs);
    grid-template-columns: repeat(auto-fill, minmax(var(--oom-icon-picker-cell-size), 1fr));
    max-height: var(--oom-icon-picker-grid-height);
    padding: var(--oom-spacing-sm);
    border-radius: var(--oom-radius-md);
    overflow-y: auto;
}

.oom-icon-picker-grid::-webkit-scrollbar {
    width: var(--oom-scrollbar-width);
}

.oom-icon-picker-grid::-webkit-scrollbar-thumb {
    border-radius: var(--oom-scrollbar-radius);
}

.oom-icon-picker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--oom-icon-picker-btn-size);
    height: var(--oom-icon-picker-btn-size);
    border-radius: var(--oom-radius-sm);
    cursor: pointer;
    transition: all var(--oom-transition-normal);
}

.oom-icon-picker-btn:hover {
    transform: scale(1.05);
}

.oom-icon-picker-btn:focus {
    outline: none;
    box-shadow: var(--oom-focus-ring);
}

.oom-icon-picker-btn.selected {
    transform: scale(1.1);
}

.oom-icon-picker-btn svg {
    width: var(--oom-icon-picker-svg-size);
    height: var(--oom-icon-picker-svg-size);
}

.oom-icon-picker-clear {
    margin-top: var(--oom-spacing-sm);
    padding: var(--oom-spacing-sm) var(--oom-spacing-md); /* Same as .u-size--md */
    border-radius: var(--oom-radius-sm);
    font-size: var(--oom-font-size-sm);
    text-align: center;
    cursor: pointer;
    transition: all var(--oom-transition-normal);
}

.oom-icon-picker-clear:focus {
    outline: none;
    box-shadow: var(--oom-focus-ring);
}

/* =============================================================================
   ICON FALLBACK SYSTEM - Error Handling and Placeholder Icons
   ============================================================================= */

.oom-icon-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--oom-icon-size);
    height: var(--oom-icon-size);
    border-radius: var(--oom-radius-sm);
    font-size: var(--oom-icon-fallback-font-size);
    font-weight: var(--font-bold);
}

/* =============================================================================
   FILTER ICONS - Status and State Indicator Icons
   ============================================================================= */

.oom-filter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--oom-filter-icon-size);
    height: var(--oom-filter-icon-size);
    margin-right: var(--oom-spacing-xs);
    color: inherit;
}

/* =============================================================================
   RESPONSIVE DESIGN - Mobile First
   ============================================================================= */

@media screen and (max-width: var(--oom-breakpoint-tablet)) {
    .oom-nav-icon,
    .oom-quick-action-icon,
    .oom-action-icon {
        width: var(--oom-icon-size-lg);
        height: var(--oom-icon-size-lg);
        margin-right: var(--oom-spacing-xs);
    }
    
    .oom-icon-picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--oom-icon-picker-cell-size-tablet), 1fr));
        max-height: var(--oom-icon-picker-grid-height-tablet);
    }
    
    .oom-metrics-tabs-icon,
    .oom-hub-tab-icon {
        width: var(--oom-tab-icon-size-tablet);
        height: var(--oom-tab-icon-size-tablet);
    }
}

@media screen and (max-width: var(--oom-breakpoint-mobile)) {
    .oom-metric-icon,
    .oom-metric-icon-svg {
        width: var(--oom-icon-size-mobile);
        height: var(--oom-icon-size-mobile);
        margin-left: var(--oom-spacing-xs);
    }
    
    .oom-button-icon svg {
        width: var(--oom-button-icon-size-mobile);
        height: var(--oom-button-icon-size-mobile);
    }
    
    .oom-nav-icon {
        width: var(--oom-nav-icon-size-mobile);
        height: var(--oom-nav-icon-size-mobile);
        margin-right: var(--oom-spacing-xs);
    }
    
    .oom-icon-picker-grid {
        gap: var(--oom-spacing-xxs);
        grid-template-columns: repeat(auto-fill, minmax(var(--oom-icon-picker-cell-size-mobile), 1fr));
        max-height: var(--oom-icon-picker-grid-height-mobile);
    }
    
    .oom-icon-picker-btn {
        width: var(--oom-icon-picker-btn-size-mobile);
        height: var(--oom-icon-picker-btn-size-mobile);
    }
    
    .oom-metrics-tabs-icon,
    .oom-hub-tab-icon {
        width: var(--oom-tab-icon-size-mobile);
        height: var(--oom-tab-icon-size-mobile);
        margin-right: var(--oom-spacing-xs);
    }
}

/* =============================================================================
   ACCESSIBILITY & HIGH CONTRAST
   ============================================================================= */

@media (forced-colors: active) {
    .oom-metric-icon,
    .oom-metric-icon-svg,
    .oom-button-icon,
    .oom-nav-icon,
    .oom-metrics-tabs-icon,
    .oom-hub-tab-icon {
        color: ButtonText;
        forced-color-adjust: auto;
    }
    
    .oom-icon-picker-btn {
        border: 2px solid ButtonText;
    }
    
    .oom-icon-picker-btn:focus {
        border-color: Highlight;
        color: HighlightText;
        background-color: Highlight;
    }
    
    .oom-icon-picker-btn.selected {
        border-color: Highlight;
        color: HighlightText;
        background-color: Highlight;
    }
    
    .oom-icon-picker-clear {
        border: 1px solid ButtonText;
    }
    
    .oom-icon-picker-clear:focus {
        color: HighlightText;
        background-color: Highlight;
    }
    
    .oom-icon-fallback {
        border: 2px solid ButtonText;
        color: ButtonText;
        background-color: Canvas;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oom-metric-icon,
    .oom-metric-icon-svg,
    .oom-button-icon,
    .oom-icon-picker-btn,
    .oom-icon-picker-clear,
    .oom-button--state-expanded .oom-button-icon,
    .oom-button--state-collapsed .oom-button-icon {
        transition: none;
    }
    
    .oom-icon-picker-btn:hover {
        transform: none;
    }
    
    .oom-icon-picker-btn.selected {
        transform: none;
    }
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
    .oom-icon-picker-container,
    .oom-icon-picker-search,
    .oom-icon-picker-grid,
    .oom-icon-picker-btn,
    .oom-icon-picker-clear {
        display: none;
    }
    
    .oom-metric-icon,
    .oom-metric-icon-svg,
    .oom-button-icon,
    .oom-nav-icon {
        opacity: 1 !important;
        color: black !important;
    }
    
    .oom-icon-fallback {
        border: 1px solid black !important;
        color: black !important;
        background-color: white !important;
    }
}


/* =============================================================================
   COMPONENT: NAVIGATION (23.9 KB)
   ============================================================================= */
/* =============================================================================
   NAVIGATION COMPONENT - OneiroMetrics Tab & Navigation System
   ============================================================================= */

/* COMPONENT OVERVIEW:
   - Tab Systems (metrics tabs, hub tabs, navigation tabs)
   - Sidebar Navigation (journal manager, structure, metrics)
   - Template Wizard Navigation
   - Quick Navigation & Year Navigation
   - Date Navigator Integration
   - Tab Modal Containers
   - Navigation Icons & Labels
   - Responsive Navigation Design
   - Print & Accessibility Optimizations
*/

/* =============================================================================
   NAVIGATION ICONS - Comprehensive Icon System (MOVED FIRST for specificity order)
   ============================================================================= */

/* Base Navigation Icons - STANDALONE FIRST */
.oom-nav-icon {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--oom-icon-size);
    height: var(--oom-icon-size);
    flex-shrink: 0;
    
    /* NO VISUAL STYLING - Let theme handle icon colors */
    
    /* === SVG SIZING === */
    svg {
        width: var(--oom-icon-svg-size);
        height: var(--oom-icon-svg-size);
        
        /* NO VISUAL STYLING - Let theme handle SVG colors */
    }
}

/* Tab Icons - Unified System - STANDALONE FIRST */
.oom-metrics-tabs-icon,
.oom-hub-tab-icon {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--oom-tab-icon-size);
    height: var(--oom-tab-icon-size);
    margin-right: var(--oom-spacing-sm);
    flex-shrink: 0;
    
    /* NO VISUAL STYLING - Let theme handle icon colors */
    
    /* === NESTED SVG STYLING === */
    svg {
        width: var(--oom-tab-icon-svg-size);
        height: var(--oom-tab-icon-svg-size);
        
        /* NO VISUAL STYLING - Let theme handle SVG colors */
    }
}

/* Remove margin for hub tab icons (they use gap on parent) */
.oom-hub-tab-icon {
    margin-right: 0;
}

/* =============================================================================
   NAVIGATION LABELS - Text Content Management (MOVED FIRST for specificity order)
   ============================================================================= */

/* STANDALONE LABELS FIRST */
.oom-nav-label,
.oom-hub-tab-label,
.oom-metrics-tabs-label {
    /* === STRUCTURAL PROPERTIES === */
    flex: 1;
    font-size: var(--font-ui-medium);
    font-weight: 400;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    
    /* NO VISUAL STYLING - Let theme handle label colors */
}

/* Special heading labels */
h2.oom-metrics-tabs-label {
    font-size: var(--h3-size);
    margin-block-start: 0;
    margin-block-end: 0;
}

/* =============================================================================
   TAB NAVIGATION BUTTONS - Enhanced State Management (MOVED FIRST for specificity order)
   ============================================================================= */

/* STANDALONE BUTTON STYLES FIRST */
.oom-metrics-tabs-button,
.oom-hub-tab-nav-item {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-sm);
    padding: .45em 0;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: all var(--oom-transition-fast);
    
    /* NO VISUAL STYLING - Let theme handle button colors and backgrounds */
}

/* Hover states for tab buttons */
.oom-metrics-tabs-button:hover,
.oom-hub-tab-nav-item:hover {
    /* Let theme handle hover styling */
}

/* =============================================================================
   GENERAL NAVIGATION ITEMS - Smart State Management
   ============================================================================= */

/* Base Navigation Items */
.oom-nav-item,
.oom-hub-tab-nav-item,
.oom-metrics-tabs-button {
    /* === STRUCTURAL PROPERTIES ONLY === */
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-sm);
    padding: var(--oom-spacing-sm);
    border-radius: var(--oom-radius-sm);
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle colors/backgrounds */
    
    /* === HOVER STATE === */
    &:hover {
        /* Let theme handle hover styling */
        transform: translateY(var(--oom-drag-hover-translate));
    }
    
    /* === ACTIVE STATE === */
    &.active,
    &.is-active,
    &.oom-metrics-tabs-active {
        /* Let theme handle active state colors */
        font-weight: 600;
    }
    
    /* === NESTED ICON STYLING - Higher specificity after standalone icons === */
    .oom-nav-icon,
    .oom-hub-tab-icon,
    .oom-metrics-tabs-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        
        /* NO VISUAL STYLING - Let theme handle icon colors */
        
        svg {
            width: var(--oom-icon-svg-size);
            height: var(--oom-icon-svg-size);
        }
    }
    
    /* === NESTED LABEL STYLING - Higher specificity after standalone labels === */
    .oom-nav-label,
    .oom-hub-tab-label,
    .oom-metrics-tabs-label {
        font-size: calc(var(--font-ui-small) + 1px);
        
        /* NO VISUAL STYLING - Let theme handle text colors */
    }
}

/* PARENT STATE CHANGES - Higher specificity after standalone icons */
.oom-nav-item:hover .oom-nav-icon,
.oom-nav-item.active .oom-nav-icon {
    /* Let theme handle state-based icon changes */
}

.oom-metrics-tabs-active .oom-metrics-tabs-icon,
.oom-hub-tab-nav-item.is-active .oom-hub-tab-icon {
    /* Let theme handle active icon colors */
}

/* Special tab button variants */
.oom-metrics-tabs-button {
    &[data-tab-id="overview"] {
        /* Special overview tab styling */
        h2 {
            margin: 0;
            font-size: var(--font-ui-medium);
            
            /* NO VISUAL STYLING - Let theme handle */
        }
    }
}

/* =============================================================================
   TAB MODAL CONTAINERS - Theme Integrated
   ============================================================================= */

/* Main modal container with tab interface */
.modal:has(.oom-metrics-tabs-modal) {
    width: var(--modal-width);
    max-width: var(--modal-max-width);

    /* === STRUCTURAL PROPERTIES ONLY === */
    height: var(--modal-height);
    max-height: var(--modal-max-height);
    padding: 0;
    contain: layout style;
    
    /* NO VISUAL STYLING - Let Obsidian modal handle all styling */
}

.oom-metrics-tabs-modal {
    /* === STRUCTURAL LAYOUT === */
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: var(--oom-spacing-sm);
    
    /* NO VISUAL STYLING - Let theme handle modal styling */
}

/* Modal content area adjustments */
.oom-metrics-tabs-modal {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: calc(100% - 30px);
    min-height: 0; /* Allow flex children to shrink */
}

/* Modal content label spacing */
.modal-content:has(.oom-metrics-tabs-label) {
    .oom-metrics-tabs-label {
        font-size: calc(var(--font-ui-small) + 1px);
        
        &:first-of-type {
            font-size: var(--h3-size);
        }
    }
}

/* =============================================================================
   TAB HEADER - Theme Integrated
   ============================================================================= */

.oom-metrics-tabs-header {
    /* === STRUCTURAL PROPERTIES === */
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    text-align: center;
    margin-block-start: 0;
    
    /* NO VISUAL STYLING - Let theme handle header colors and borders */
}

/* =============================================================================
   TAB CONTAINER LAYOUT - Unified System
   ============================================================================= */

.oom-metrics-tabs-container {
    /* === FLEXBOX LAYOUT === */
    display: flex;
    flex: 1;
    gap: 0;
    min-height: 0;
    border-radius: var(--oom-radius-md);
    overflow: hidden;
    /* Ensure proper height for scrolling */
    height: 100%;
    
    /* NO VISUAL STYLING - Let theme handle borders and backgrounds */
}

/* =============================================================================
   SIDEBAR NAVIGATION - Consolidated System
   ============================================================================= */

/* Unified Sidebar System */
.oom-journal-manager-sidebar,
.oom-journal-structure-sidebar,
.oom-metrics-tabs-sidebar {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
    
    /* NO VISUAL STYLING - Let theme handle sidebar appearance */
    
    /* === SCROLLBAR STYLING === */
    scrollbar-width: thin;
    
    &::-webkit-scrollbar {
        width: 8px;
    }
    
    &::-webkit-scrollbar-track {
        /* NO VISUAL STYLING - Let theme handle scrollbar track */
    }
    
    &::-webkit-scrollbar-thumb {
        border-radius: var(--oom-radius-sm);
        
        /* NO VISUAL STYLING - Let theme handle scrollbar thumb */
        
        &:hover {
            /* Let theme handle scrollbar hover */
        }
    }
}

/* Sidebar-specific sizing */
.oom-journal-manager-sidebar {
    width: var(--oom-sidebar-width);
    min-width: var(--oom-sidebar-width);
    padding: var(--oom-spacing-sm);
}

.oom-journal-structure-sidebar {
    width: var(--oom-sidebar-width);
    min-width: var(--oom-sidebar-width);
    padding: var(--oom-spacing-sm);
}

.oom-metrics-tabs-sidebar {
    width: var(--oom-tab-sidebar-width);
    min-width: var(--oom-tab-sidebar-width);
    padding: var(--oom-spacing-sm) 0;
}

/* =============================================================================
   TAB GROUP HEADERS - Unified Organization
   ============================================================================= */

/* Group headers for both metrics tabs and hub tabs */
.oom-metrics-tabs-group-header,
.oom-hub-tab-group-title {
    /* === STRUCTURAL PROPERTIES === */
    margin: var(--oom-spacing-sm) 0 var(--oom-spacing-xs) 0;
    padding: 0 .32em;
    font-size: var(--font-ui-smaller);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    
    /* NO VISUAL STYLING - Let theme handle group header colors */
    
    /* === NESTED FIRST CHILD === */
    &:first-child {
        margin-top: 0;
    }
}

/* =============================================================================
   TAB NAVIGATION BUTTONS - Enhanced State Management
   ============================================================================= */

/* MOVED FIRST for proper specificity order - Base button styles */
.oom-metrics-tabs-button,
.oom-hub-tab-nav-item {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-sm);
    padding: .45em 0;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: all var(--oom-transition-fast);
    
    /* NO VISUAL STYLING - Let theme handle button colors and backgrounds */
}

/* Hover states - MOVED AFTER base styles for proper specificity order */
.oom-metrics-tabs-button:hover,
.oom-hub-tab-nav-item:hover {
    /* Let theme handle hover styling */
}

/* =============================================================================
   TAB CONTENT AREAS - Scrollable Content Management
   ============================================================================= */

.oom-metrics-tabs-content {
    /* === STRUCTURAL PROPERTIES === */
    flex: 1;
    padding: var(--oom-spacing-lg);
    overflow-y: auto;
    min-height: 0; /* Critical for proper flexbox scrolling */
    height: 100%; /* Ensure full height utilization */
    
    /* NO VISUAL STYLING - Let theme handle content area styling */
    
    /* === SCROLLBAR STYLING === */
    scrollbar-width: thin;
    
    &::-webkit-scrollbar {
        width: 8px;
    }
    
    &::-webkit-scrollbar-track {
        /* NO VISUAL STYLING - Let theme handle scrollbar track */
    }
    
    &::-webkit-scrollbar-thumb {
        border-radius: var(--oom-radius-sm);
        
        /* NO VISUAL STYLING - Let theme handle scrollbar thumb */
        
        &:hover {
            /* Let theme handle scrollbar hover */
        }
    }
}

/* =============================================================================
   TAB CONTENT ELEMENTS - Content Styling
   ============================================================================= */

/* Metric headers in tab content */
.oom-metrics-tabs-metric-header {
    /* === STRUCTURAL PROPERTIES === */
    margin-top: 0;
    margin-bottom: var(--oom-spacing-md);
    padding-bottom: var(--oom-spacing-sm);
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    
    /* NO VISUAL STYLING - Let theme handle header colors */
}

/* Description text */
.oom-metrics-tabs-description {
    /* === STRUCTURAL PROPERTIES === */
    margin-bottom: var(--oom-spacing-lg);
    line-height: var(--line-height-normal);
    
    /* NO VISUAL STYLING - Let theme handle description styling */
    
    /* === ENSURE SCROLLING COMPATIBILITY === */
    flex-shrink: 0; /* Don't shrink in flex container */
    min-height: 0; /* Allow content to determine height */
}

/* Overview text content */
.oom-metrics-tabs-overview-text {
    /* === STRUCTURAL PROPERTIES === */
    margin-bottom: var(--oom-spacing-xl);
    line-height: var(--line-height-normal);
    
    /* NO VISUAL STYLING - Let theme handle text styling */
    
    /* === NESTED FIRST PARAGRAPH === */
    p:first-child {
        margin-top: 0;
    }
}

/* Sources content section */
.oom-metrics-tabs-sources-content {
    /* NO VISUAL STYLING - Let theme handle content styling */
    
    /* === ENSURE SCROLLING COMPATIBILITY === */
    flex-shrink: 0; /* Don't shrink in flex container */
    min-height: 0; /* Allow content to determine height */
    
    /* === NESTED HEADING STYLING === */
    h2,
    h3,
    h4 {
        margin-top: var(--oom-spacing-md);
        margin-bottom: var(--oom-spacing-sm);
        
        /* NO VISUAL STYLING - Let theme handle heading colors */
    }
    
    /* === NESTED LIST STYLING === */
    ul {
        margin-left: 0;
        padding-left: var(--oom-spacing-lg);
    }
    
    li {
        margin-bottom: var(--oom-spacing-xs);
    }
}

/* =============================================================================
   TAB FOOTER - Action Area
   ============================================================================= */

.oom-metrics-tabs-footer {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    justify-content: flex-end;
    gap: var(--oom-spacing-sm);
    margin-top: var(--oom-spacing-lg);
    padding-top: var(--oom-spacing-md);
    
    /* NO VISUAL STYLING - Let theme handle footer borders and styling */
}

/* =============================================================================
   TAB INTEGRATION - Score Tables
   ============================================================================= */

/* Score tables within tab content */
.oom-metrics-tabs-score-table {
    /* === STRUCTURAL PROPERTIES === */
    margin-top: var(--oom-spacing-lg);
    overflow-x: auto;
    
    /* NO VISUAL STYLING - Let theme handle table styling */
    
    /* === NESTED TABLE STYLING === */
    table {
        width: 100%;
        border-collapse: collapse;
        
        /* NO VISUAL STYLING - Let theme handle table styling */
    }
    
    th,
    td {
        padding: var(--oom-spacing-sm);
        text-align: left;
        
        /* NO VISUAL STYLING - Let theme handle cell styling */
    }
}

/* =============================================================================
   TEMPLATE WIZARD NAVIGATION - Specialized Navigation
   ============================================================================= */

.oom-template-wizard-navigation {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--oom-spacing-lg);
    padding: var(--oom-spacing-md) 0;
    
    /* NO VISUAL STYLING - Let theme handle navigation appearance */
    
    .oom-button-container {
        display: flex;
        gap: var(--oom-spacing-sm);
    }
}

/* =============================================================================
   QUICK NAVIGATION - Centered Navigation System
   ============================================================================= */

.oom-quick-navigation {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* NO VISUAL STYLING - Let theme handle navigation appearance */
}

.oom-quick-nav-buttons {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    gap: var(--oom-spacing-sm);
    
    /* NO VISUAL STYLING - Let theme handle buttons appearance */
}

/* =============================================================================
   YEAR NAVIGATION - Date-Based Navigation
   ============================================================================= */

.oom-year-nav {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--oom-spacing-md);
    
    /* NO VISUAL STYLING - Let theme handle navigation appearance */
}

.oom-year-display {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-md);
    
    /* NO VISUAL STYLING - Let theme handle display appearance */
}

/* =============================================================================
   DATE NAVIGATOR - Component Variables Integration
   ============================================================================= */

.oom-date-navigator {
    /* === COMPONENT-SCOPED VARIABLES === */
    --month-bg: var(--background-primary);
    --month-border: var(--background-modifier-border);
    --month-text: var(--text-normal);
    --month-header: var(--text-accent);
    --day-bg: var(--background-primary);
    --day-border: var(--background-modifier-border);
    --day-text: var(--text-normal);
    --day-today: var(--interactive-accent);
    --day-selected: var(--interactive-accent-hover);
    --day-dream: var(--text-accent);
    --day-no-dream: var(--text-muted);
    --day-other-month: var(--background-secondary);
    --day-hover: var(--background-modifier-hover);
    --day-with-entry-bg: rgb(var(--interactive-accent-rgb), 0.1);
    
    /* === STRUCTURAL PROPERTIES === */

    /* Component-specific structure handled by date-navigator component */
}

/* Navigation Active State Variables */
.oom-nav-item.active {
    --background-modifier-hover: var(--interactive-accent);
    --icon-color: var(--text-on-accent);
}

/* =============================================================================
   RESPONSIVE DESIGN - Mobile First Navigation
   ============================================================================= */

@media screen and (max-width: var(--oom-breakpoint-tablet)) {
    /* === TABLET RESPONSIVE LAYOUT === */
    .oom-metrics-tabs-container {
        flex-direction: column;
    }
    
    .oom-metrics-tabs-sidebar {
        flex-direction: row;

        /* === HORIZONTAL SIDEBAR ON TABLET === */
        width: 100%;
        max-height: 200px;
        padding: var(--oom-spacing-sm) var(--oom-spacing-md); /* Same as .u-size--md */
        overflow-x: auto;
        overflow-y: hidden;
        
        /* NO VISUAL STYLING - Let theme handle tablet borders */
    }
    
    .oom-metrics-tabs-button,
    .oom-hub-tab-nav-item {
        padding: var(--oom-spacing-xs) var(--oom-spacing-sm); /* Same as .u-size--sm */
        border-bottom: 3px solid transparent;
        border-left: none;
        white-space: nowrap;

        /* === TABLET TAB ITEM ADJUSTMENTS === */
        flex-shrink: 0;
        
        &.oom-metrics-tabs-active,
        &.is-active {
            /* NO VISUAL STYLING - Let theme handle active tablet styling */
        }
    }
    
    .oom-metrics-tabs-content {
        padding: var(--oom-spacing-md);
    }
    
    .oom-metrics-tabs-header {
        margin-bottom: var(--oom-spacing-sm);
        padding-bottom: var(--oom-spacing-xs);
        font-size: var(--h2-size);
    }
    
    /* === SIDEBAR RESPONSIVE ADJUSTMENTS === */
    .oom-journal-manager-sidebar,
    .oom-journal-structure-sidebar {
        width: 100%;
        max-height: 150px;
        padding: var(--oom-spacing-sm);
        overflow-x: auto;
    }
}

@media screen and (max-width: var(--oom-breakpoint-mobile)) {
    /* === MOBILE MODAL ADJUSTMENTS === */
    .oom-metrics-tabs-modal {
        padding: var(--oom-spacing-xs);
    }
    
    .oom-metrics-tabs-sidebar {
        /* === MOBILE SIDEBAR STYLING === */
        max-height: 150px;
        padding: var(--oom-spacing-xs);
    }
    
    .oom-metrics-tabs-button,
    .oom-hub-tab-nav-item {
        padding: var(--oom-spacing-xs);

        /* === MOBILE TAB ADJUSTMENTS === */
        font-size: var(--font-ui-smaller);
        
        .oom-metrics-tabs-icon,
        .oom-hub-tab-icon {
            width: calc(var(--oom-tab-icon-size) * 0.8);
            height: calc(var(--oom-tab-icon-size) * 0.8);
        }
        
        .oom-metrics-tabs-label,
        .oom-hub-tab-label {
            font-size: var(--font-ui-small);
        }
    }
    
    /* === MOBILE NAVIGATION ADJUSTMENTS === */
    .oom-template-wizard-navigation .oom-button-container {
        flex-direction: column;
        gap: var(--oom-spacing-xs);
    }
    
    .oom-quick-navigation,
    .oom-year-nav {
        flex-direction: column;
        gap: var(--oom-spacing-sm);
    }
    
    /* === MOBILE SIDEBAR ADJUSTMENTS === */
    .oom-journal-manager-sidebar,
    .oom-journal-structure-sidebar {
        width: 100%;
        max-height: 150px;
        padding: var(--oom-spacing-sm);
        overflow-x: auto;
    }
}

/* =============================================================================
   PRINT OPTIMIZATION - Navigation
   ============================================================================= */

@media print {
    /* === HIDE INTERACTIVE NAVIGATION IN PRINT === */
    .oom-template-wizard-navigation,
    .oom-quick-navigation,
    .oom-year-nav,
    .oom-journal-manager-sidebar,
    .oom-journal-structure-sidebar,
    .oom-metrics-tabs-sidebar {
        display: none;
    }
    
    /* === SIMPLIFY TAB CONTENT FOR PRINT === */
    .oom-metrics-tabs-container {
        flex-direction: column;
    }
    
    .oom-metrics-tabs-content {
        padding: 0;
        overflow: visible;
    }
    
    /* === HIDE INTERACTIVE ELEMENTS === */
    .oom-metrics-tabs-footer {
        display: none;
    }
}

/* =============================================================================
   ACCESSIBILITY - High Contrast & Focus Management
   ============================================================================= */

/* High contrast mode adjustments */
@media (forced-colors: active) {
    .oom-nav-item,
    .oom-hub-tab-nav-item,
    .oom-metrics-tabs-button {
        border: 1px solid ButtonText;
        
        &.active,
        &.is-active,
        &.oom-metrics-tabs-active {
            color: HighlightText;
            background: Highlight;
        }
    }
    
    .oom-metrics-tabs-sidebar,
    .oom-journal-manager-sidebar,
    .oom-journal-structure-sidebar {
        border: 1px solid ButtonText;
    }
}

/* Focus management for keyboard navigation */
.oom-nav-item:focus-visible,
.oom-hub-tab-nav-item:focus-visible,
.oom-metrics-tabs-button:focus-visible {
    outline: var(--oom-focus-ring-accent);
    outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .oom-nav-item,
    .oom-hub-tab-nav-item,
    .oom-metrics-tabs-button {
        transition: none;
        
        &:hover {
            transform: none;
        }
    }
    
    .oom-metrics-tabs-container,
    .oom-metrics-tabs-content {
        scroll-behavior: auto;
    }
} 

/* =============================================================================
   COMPONENT: ENHANCED-DATE-NAVIGATOR (55.9 KB)
   ============================================================================= */
/* ==========================================================================
   Enhanced Date Navigator Modal
   ========================================================================== */

/* Enhanced Date Navigator Modal - Complete Implementation */
.oomp-enhanced-date-navigator-modal {
    border-radius: 12px;
    padding: 16px;
    max-width: none;
    width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-l);
    background: var(--modal-background);
    
    /* Main container */
    .enhanced-date-navigator-container {
        display: flex;
        flex-direction: column;
        gap: 8px; /* Reduced from 16px for optimized layout */
    }

    /* Optimized Navigation Section - First Row */
    .enhanced-nav-section.optimized-nav-row {
        display: flex;
        flex-direction: column;
        gap: 0; /* No internal gaps needed */
        
        .nav-header.optimized-nav-header {
            display: flex;
            flex-wrap: nowrap; /* No wrapping for tighter layout */
            gap: 8px; /* Reduced from 12px */
            align-items: center;
            padding: 8px 12px; /* Reduced vertical padding */
            background: var(--background-secondary);
            border-radius: 6px;
            border: 1px solid var(--background-modifier-border);
        }
    }

    /* Optimized Interaction Section - Second Row (Recent removed) */
    .enhanced-interaction-section.optimized-interaction-row {
        display: flex;
        flex-direction: column;
        
        .interaction-header.optimized-interaction-header {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 6px 12px;
            background: transparent;
            border-bottom: 1px solid var(--background-modifier-border);
            gap: 24px; /* Increased gap since we have more space */
        }
    }

    /* Simplified interaction sections (no left section needed) */
    .interaction-center {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .interaction-right {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
    }

    /* Optimized mode buttons */
    .mode-buttons.optimized-mode-buttons {
        display: flex;
        gap: 4px; /* Tighter than original */
        
        .selection-mode-btn {
            padding: 4px 12px; /* Slightly more compact */
            font-size: 12px;
            border-radius: 4px;
        }
    }

    /* Year Picker */
    .year-picker-container {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .year-picker {
            background: var(--background-primary);
            border: 1px solid var(--background-modifier-border);
            border-radius: 4px;
            padding: 4px 8px;
            color: var(--text-normal);
            font-size: 12px;
            cursor: pointer;
            
            &:focus {
                outline: 2px solid var(--interactive-accent);
                outline-offset: 1px;
            }
            
            option[data-has-dreams="true"] {
                font-weight: 600;
            }
        }
    }

    /* Month Jump */
    .month-jump-container {
        position: relative;
        
        .month-jump-trigger {
            background: var(--background-primary);
            border: 1px solid var(--background-modifier-border);
            border-radius: 4px;
            padding: 4px 8px;
            color: var(--text-normal);
            font-size: 12px;
            cursor: pointer;
            
            &:hover {
                background: var(--background-modifier-hover);
            }
            
            &:focus {
                outline: 2px solid var(--interactive-accent);
                outline-offset: 1px;
            }
        }
        
        .month-jump-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background: var(--background-primary);
            border: 1px solid var(--background-modifier-border);
            border-radius: 6px;
            box-shadow: var(--shadow-s);
            z-index: 100;
            min-width: 200px;
            
            .month-item {
                padding: 8px 12px;
                cursor: pointer;
                font-size: 12px;
                border-bottom: 1px solid var(--background-modifier-border);
                
                &:hover {
                    background: var(--background-modifier-hover);
                }
                
                &:last-child {
                    border-bottom: none;
                }
                
                &[data-has-dreams="true"]::after {
                    content: " ●";
                    color: var(--interactive-accent);
                }
            }
        }
    }

    /* Quarter Toggle */
    .quarter-toggle-container {
        .quarter-toggle {
            background: var(--background-primary);
            border: 1px solid var(--background-modifier-border);
            border-radius: 4px;
            padding: 4px 8px;
            color: var(--text-normal);
            font-size: 12px;
            cursor: pointer;
            
            &:hover {
                background: var(--background-modifier-hover);
            }
            
            &.active {
                background: var(--interactive-accent);
                color: var(--text-on-accent);
            }
            
            &:focus {
                outline: 2px solid var(--interactive-accent);
                outline-offset: 1px;
            }
        }
    }

    /* Go to Date */
    .goto-date-container {
        display: flex;
        align-items: center;
        gap: 4px;
        
        .goto-date-input {
            background: var(--background-primary);
            border: 1px solid var(--background-modifier-border);
            border-radius: 4px;
            padding: 4px 8px;
            color: var(--text-normal);
            font-size: 12px;
            width: 100px;
            
            &:focus {
                outline: 2px solid var(--interactive-accent);
                outline-offset: 1px;
                border-color: var(--interactive-accent);
            }
            
            &::placeholder {
                color: var(--text-muted);
            }
        }
        
        .goto-date-btn {
            background: var(--interactive-accent);
            border: 1px solid var(--interactive-accent);
            border-radius: 4px;
            padding: 4px 8px;
            color: var(--text-on-accent);
            font-size: 12px;
            cursor: pointer;
            
            &:hover {
                background: var(--interactive-accent-hover);
            }
            
            &:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }
        }
    }

    /* Navigation Memory */
    .navigation-memory-container {
        min-width: 0;         /* Allow shrinking */
        overflow: hidden;     /* Hide overflow */
        
        .memory-chips {
            display: flex;
            flex-wrap: nowrap;    /* Single line to prevent wrapping */
            gap: 4px;
            overflow-x: auto;     /* Horizontal scroll if needed */
            scrollbar-width: none; /* Hide scrollbar in Firefox */
            -ms-overflow-style: none; /* Hide scrollbar in IE/Edge */
            
            &::-webkit-scrollbar {
                display: none;    /* Hide scrollbar in Webkit browsers */
            }
            
            .memory-chip {
                background: var(--background-primary);
                border: 1px solid var(--background-modifier-border);
                border-radius: 12px;
                padding: 2px 8px;
                font-size: 10px;
                color: var(--text-normal);
                cursor: pointer;
                transition: all 0.2s ease;
                white-space: nowrap;  /* Prevent text wrapping inside chips */
                flex-shrink: 0;       /* Prevent chips from shrinking */

                &:hover {
                    background: var(--background-modifier-hover);
                    transform: translateY(-1px);
                }

                .remove-chip {
                    margin-left: 4px;
                    color: var(--text-muted);
                    cursor: pointer;
                    font-size: 8px;

                    &:hover {
                        color: var(--text-error);
                    }
                }
            }
        }
    }

    /* Selection Mode Buttons - now in optimized interaction row */

    /* Calendar Section */
    .enhanced-calendar-section {
        .calendar-header {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            
            .month-navigation {
                display: flex;
                align-items: center;
                gap: 12px;
                
                .nav-button {
                    background: var(--background-secondary);
                    border: 1px solid var(--background-modifier-border);
                    color: var(--text-normal);
                    width: 28px;
                    height: 28px;
                    border-radius: 4px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 14px;
                    transition: all 0.2s ease;

                    &:hover {
                        background: var(--background-modifier-hover);
                    }
                    
                    &:focus {
                        outline: 2px solid var(--interactive-accent);
                        outline-offset: 1px;
                    }
                }
                
                .month-display {
                    font-size: 16px;
                    font-weight: 600;
                    color: var(--text-normal);
                }
            }
        }
        
        .calendar-grid {
            max-width: fit-content;
            width: fit-content;
            margin: 0 auto;
            padding: 10px;
            border-radius: 8px;
            border: 1px solid var(--background-modifier-border);
            background: var(--background-secondary);
            
            .day-header {
                text-align: center;
                font-size: 11px;
                font-weight: 600;
                color: var(--text-muted);
                padding: 6px 2px;
                border-bottom: 1px solid var(--background-modifier-border);
                margin-bottom: 4px;
            }
            
            .calendar-day {
                position: relative;
                display: flex;
                aspect-ratio: 1;
                min-height: 64px;
                height: 64px;
                border-radius: 6px;
                border: 1px solid transparent;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                cursor: pointer;
                transition: all 0.15s ease;
                user-select: none;
                color: var(--text-normal);
                background: var(--background-primary);

                &:hover {
                    background: var(--background-modifier-hover);
                    transform: scale(1.03);
                    z-index: 1;
                }

                &:focus {
                    outline: 2px solid var(--interactive-accent);
                    outline-offset: 1px;
                    z-index: 2;
                }

                &.today {
                    border: 2px solid var(--interactive-accent);
                    font-weight: 600;
                }

                &.other-month {
                    color: var(--text-muted);
                    opacity: 0.4;
                }

                &.selected {
                    background: var(--interactive-accent);
                    color: var(--text-on-accent);
                    font-weight: 600;
                    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
                }

                &.range-start {
                    background: var(--interactive-accent);
                    color: var(--text-on-accent);
                    border-top-left-radius: 12px;
                    border-bottom-left-radius: 12px;
                    border-top-right-radius: 4px;
                    border-bottom-right-radius: 4px;
                }

                &.range-end {
                    background: var(--interactive-accent);
                    color: var(--text-on-accent);
                    border-top-left-radius: 4px;
                    border-bottom-left-radius: 4px;
                    border-top-right-radius: 12px;
                    border-bottom-right-radius: 12px;
                }

                &.range-middle {
                    background: var(--interactive-accent-hover);
                    color: var(--text-on-accent);
                    border-radius: 4px;
                }

                &.multi-selected {
                    background: var(--interactive-accent);
                    color: var(--text-on-accent);
                    border-radius: 8px;

                    &::after {
                        content: "✓";
                        position: absolute;
                        top: 2px;
                        right: 2px;
                        font-size: 8px;
                        opacity: 0.8;
                    }
                }

                &.drag-preview {
                    background: var(--interactive-accent-hover);
                    color: var(--text-on-accent);
                    opacity: 0.7;
                    border: 2px dashed var(--interactive-accent);
                }

                /* Dream Quality Indicators */
                .dream-indicator {
                    position: absolute;
                    bottom: 1px;
                    right: 1px;
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    border: 1px solid var(--background-primary);

                    &.quality-high {
                        background: radial-gradient(circle, #48bb78 0%, #2f855a 100%);
                        box-shadow: 0 0 4px rgba(72, 187, 120, 0.4);
                    }

                    &.quality-medium {
                        background: radial-gradient(circle, #ed8936 0%, #c05621 100%);
                        box-shadow: 0 0 4px rgba(237, 137, 54, 0.4);
                    }

                    &.quality-low {
                        background: radial-gradient(circle, #f56565 0%, #c53030 100%);
                        box-shadow: 0 0 4px rgba(245, 101, 101, 0.4);
                    }

                    &.quality-none {
                        background: #718096;
                    }

                    &.multiple-entries {
                        width: 8px;
                        height: 8px;
                        bottom: 0px;
                        right: 0px;

                        &.quality-high {
                            background: radial-gradient(circle, #48bb78 0%, #2f855a 50%, #1a5d3a 100%);
                            box-shadow: 0 0 6px rgba(72, 187, 120, 0.6);
                        }

                        &.quality-medium {
                            background: radial-gradient(circle, #ed8936 0%, #c05621 50%, #8b3d15 100%);
                            box-shadow: 0 0 6px rgba(237, 137, 54, 0.6);
                        }

                        &.quality-low {
                            background: radial-gradient(circle, #f56565 0%, #c53030 50%, #9b2c2c 100%);
                            box-shadow: 0 0 6px rgba(245, 101, 101, 0.6);
                        }
                    }
                }

                .entry-count {
                    position: absolute;
                    top: -1px;
                    right: -1px;
                    background: var(--interactive-accent);
                    color: var(--text-on-accent);
                    font-size: 7px;
                    font-weight: bold;
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px solid var(--background-primary);
                }
            }
        }
    }

    /* Quarter View - Alternative Implementation */
    .quarter-view {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        padding: 12px;
        width: 100%;
    }

    /* Individual Month Containers in Quarter View */
    .oomp-quarter-month {
        display: flex;
        flex-direction: column;
        background: var(--background-secondary);
        border: 1px solid var(--background-modifier-border);
        border-radius: 8px;
        padding: 12px;
        min-width: 0;
    }

    /* Quarter Month Headers */
    .oomp-quarter-month-header {
        font-size: 14px;
        font-weight: 700;
        text-align: center;
        color: var(--text-normal);
        margin-bottom: 10px;
        padding: 6px 0;
        border-bottom: 1px solid var(--background-modifier-border);
    }

    /* Compact Month Grid */
    .oomp-compact-month-grid {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    /* Compact Header Row (Weekdays) */
    .oomp-compact-header-row {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
        margin-bottom: 4px;
    }

    /* Compact Weekday Headers */
    .oomp-compact-weekday {
        font-size: 11px;
        font-weight: 600;
        text-align: center;
        color: var(--text-muted);
        padding: 1px;
        min-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Compact Days Container */
    .oomp-compact-days-container {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
    }

    /* Compact Day Cells */
    .oomp-compact-day {
        position: relative;
        min-height: 18px;
        max-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 2px;
        transition: background-color 0.15s ease;
        background: var(--background-primary);
        border: 1px solid transparent;
        font-size: 11px;
        padding: 1px;
    }

    .oomp-compact-day:hover {
        background: var(--background-modifier-hover);
    }

    .oomp-compact-day.today {
        background: var(--interactive-accent);
        color: var(--text-on-accent);
        font-weight: 600;
    }

    .oomp-compact-day.other-month {
        visibility: hidden;
        pointer-events: none;
    }

    /* Accessibility: Focus styles for compact calendar days */
    .oomp-compact-day:focus {
        outline: 2px solid var(--interactive-accent);
        outline-offset: 2px;
        background: var(--background-modifier-hover);
        z-index: 10;
        border-color: var(--interactive-accent);
        box-shadow: 0 0 0 1px var(--interactive-accent);
    }

    .oomp-compact-day:focus .oomp-compact-day-number {
        font-weight: 600;
        color: var(--interactive-accent);
    }

    /* High contrast support for compact calendar focus */
    @media (prefers-contrast: high) {
        .oomp-compact-day:focus {
            outline: 3px solid var(--interactive-accent);
            outline-offset: 1px;
            box-shadow: 0 0 0 2px var(--interactive-accent);
        }

        .oomp-compact-day:focus .oomp-compact-day-number {
            color: var(--text-accent);
        }
    }

    /* Focus-visible support for compact calendar days */
    .oomp-compact-day:focus-visible {
        outline: 2px solid var(--interactive-accent);
        outline-offset: 2px;
    }

    /* Remove focus outline when clicked (not keyboard focused) */
    .oomp-compact-day:focus:not(:focus-visible) {
        outline: none;
        box-shadow: none;
    }

    /* Compact Day Selection Styles */
    .oomp-compact-day.selected {
        background: var(--interactive-accent);
        color: var(--text-on-accent);
        border-color: var(--interactive-accent);
        font-weight: 600;
    }

    .oomp-compact-day.selected .oomp-compact-day-number {
        color: var(--text-on-accent);
        font-weight: 600;
    }

    .oomp-compact-day.selected .oomp-compact-dream-indicator {
        color: var(--text-on-accent);
        font-weight: bold;
    }

    /* Selection with today state */
    .oomp-compact-day.selected.today {
        background: var(--interactive-accent);
        border-color: var(--text-accent);
        box-shadow: 0 0 0 1px var(--text-accent);
    }

    /* Compact Day Numbers */
    .oomp-compact-day-number {
        font-size: 10px;
        font-weight: 500;
        line-height: 1;
        z-index: 1;
        color: var(--text-normal);
    }

    /* Compact Dream Indicators */
    .oomp-compact-dream-indicator {
        position: absolute;
        bottom: 1px;
        right: 1px;
        font-size: 6px;
        color: var(--color-green);
        line-height: 1;
        z-index: 2;
    }

    /* Quarter Toggle Enhancement */
    .quarter-toggle-container {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .quarter-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        border-radius: 4px;
        background: var(--background-secondary);
        border: 1px solid var(--background-modifier-border);
        cursor: pointer;
        transition: all 0.15s ease;
        user-select: none;
    }

    .quarter-toggle:hover {
        border-color: var(--background-modifier-border-hover);
        background: var(--background-modifier-hover);
    }

    .quarter-toggle:active {
        transform: translateY(1px);
        background: var(--background-modifier-active);
    }

    .toggle-switch input[type="checkbox"] {
        height: 14px;
        width: 14px;
        margin: 0;
        pointer-events: none;
        accent-color: var(--interactive-accent);
    }

    .toggle-label {
        pointer-events: none;
        user-select: none;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-normal);
    }

    .quarter-toggle:has(input:checked) {
        border-color: var(--interactive-accent);
        background: var(--interactive-accent-hover);
    }

    .quarter-toggle:has(input:checked) .toggle-label {
        font-weight: 600;
        color: var(--text-on-accent);
    }

    /* Dark Mode Adjustments */
    .theme-dark .oomp-quarter-month {
        background: var(--background-primary-alt);
    }

    .theme-dark .oomp-compact-day {
        background: var(--background-secondary);
    }

    .theme-dark .oomp-compact-dream-indicator {
        color: var(--color-green-rgb);
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .quarter-view {
            grid-template-columns: 1fr;
            gap: 12px;
        }
        
        .oomp-quarter-month {
            padding: 6px;
        }
        
        .oomp-compact-day {
            min-height: 24px;
        }
        
        .oomp-compact-day-number {
            font-size: 11px;
        }
    }

    /* Visualization Dropdown */
    .oomp-visualization-dropdown-container {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .oomp-visualization-dropdown {
            min-width: 110px;
            padding: 4px 8px;
            border: 1px solid var(--background-modifier-border);
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            color: var(--text-normal);
            background: var(--background-primary);
            
            &:focus {
                outline: 2px solid var(--interactive-accent);
                outline-offset: 1px;
                border-color: var(--interactive-accent);
            }
            
            &:hover {
                background: var(--background-modifier-hover);
            }
            
            option {
                padding: 4px;
                color: var(--text-normal);
                background: var(--background-primary);
            }
        }
    }

    /* Pattern Visualization Elements */
    .oomp-pattern-indicator {
        position: absolute;
        z-index: 2;
        top: 2px;
        right: 2px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--pattern-color, #666);
        opacity: var(--pattern-opacity, 1);
    }

    .oomp-quality-score {
        position: absolute;
        z-index: 2;
        bottom: 2px;
        right: 2px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        font-size: 0.6em;
        padding: 1px 3px;
        border-radius: 2px;
    }

    .oomp-metric-overlay {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        pointer-events: none;
    }

    .oomp-metric-dot {
        height: 4px;
        width: 4px;
        margin: auto;
        border-radius: 50%;
        background-color: var(--metric-color, #666);
        opacity: var(--metric-opacity, 1);
    }

    .oomp-pattern-icon {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.2em;
        color: var(--pattern-color, #666);
        opacity: var(--pattern-opacity, 1);
    }

    .oomp-fallback-indicator {
        position: absolute;
        z-index: 2;
        top: 2px;
        right: 2px;
        height: 8px;
        width: 8px;
        border-radius: 50%;
        background-color: #666;
    }

    /* Pattern Legend System */
    .oomp-pattern-legend {
        background: var(--background-secondary);
        border: 1px solid var(--background-modifier-border);
        border-radius: 6px;
        padding: 12px;
        margin: 16px 0;
        max-width: 300px;
    }

    .oomp-legend-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-normal);
        margin-bottom: 8px;
        border-bottom: 1px solid var(--background-modifier-border);
        padding-bottom: 4px;
    }

    .oomp-legend-items {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .oomp-legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--text-normal);
    }

    .oomp-legend-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        flex-shrink: 0;
        background-color: var(--legend-color, #666);
    }

    .oomp-legend-gradient {
        width: 16px;
        height: 12px;
        border-radius: 2px;
        flex-shrink: 0;
        background: var(--legend-gradient, #666);
    }

    .oomp-legend-icon {
        font-size: 16px;
        flex-shrink: 0;
    }

    /* Pattern Type Classes */
    .oomp-pattern-high-quality {
        background: var(--color-green);
    }

    .oomp-pattern-fragmented {
        background: var(--color-yellow);
    }

    .oomp-pattern-rich-narrative {
        background: var(--color-blue);
    }

    .oomp-pattern-basic-recall {
        background: var(--color-orange);
    }

    /* Quality Level Classes */
    .oomp-quality-high {
        background: var(--color-green);
    }

    .oomp-quality-medium {
        background: var(--color-yellow);
    }

    .oomp-quality-low {
        background: var(--color-red);
    }

    /* Metric-Specific Classes for Multi-Layer Visualization */
    .oomp-sensory {
        background-color: #7c3aed;
    }

    .oomp-emotional {
        background-color: #06d6a0;
    }

    .oomp-fragmentation {
        background-color: #f72585;
    }

    .oomp-descriptiveness {
        background-color: #f77f00;
    }

    /* Tooltips */
    .oomp-pattern-tooltip {
        position: absolute;
        left: 50%;
        bottom: 100%;
        z-index: 100;
        max-width: 250px;
        margin-bottom: 8px;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 0.75em;
        line-height: 1.4;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        transform: translateX(-50%);
        color: white;
        background: rgba(0, 0, 0, 0.9);
    }

    .oomp-tooltip-title {
        font-weight: bold;
    }

    .oomp-tooltip-date {
        color: #ccc;
    }

    .oomp-tooltip-pattern {
        font-weight: bold;
        color: #7c3aed;
    }

    .oomp-tooltip-pattern-desc {
        font-style: italic;
        color: #bbb;
    }

    .oomp-tooltip-metric {
        font-size: 0.9em;
    }

    .oomp-tooltip-calculated {
        font-weight: bold;
        color: #faa61a;
    }

    .oomp-tooltip-no-metrics {
        font-style: italic;
        color: #888;
    }

    /* Tooltip Arrow */
    .oomp-tooltip-arrow {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid rgba(0, 0, 0, 0.9);
        width: 0;
        height: 0;
    }

    /* Tooltip Metric Bars */
    .oom-tooltip-bar {
        display: inline-block;
        width: 40px;
        height: 4px;
        background: #333;
        margin-left: 4px;
        position: relative;
        border-radius: 2px;
    }

    .oom-tooltip-bar-fill {
        display: block;
        height: 100%;
        border-radius: 2px;
    }

    /* Tooltip Visibility States */
    .oom-tooltip-visible {
        opacity: 1 !important;
    }

    /* Tooltip Position Adjustments */
    .oom-tooltip-left {
        left: 0 !important;
        transform: none !important;
    }

    .oom-tooltip-right {
        left: auto !important;
        right: 0 !important;
        transform: none !important;
    }

    /* Calendar Day Focus Styles for Accessibility */
    .calendar-day:focus {
        border: 3px solid var(--interactive-accent) !important;
        background: var(--background-modifier-hover) !important;
        outline: none;
        box-shadow: 0 0 8px rgba(var(--interactive-accent-rgb), 0.3);
        z-index: 1;
        position: relative;
        transform: scale(1.05);
        transition: all 0.2s ease;
    }

    .calendar-day:focus .day-number {
        color: var(--interactive-accent);
        font-weight: 700;
        font-size: 1.1em;
    }

    /* High contrast focus for better accessibility */
    @media (prefers-contrast: high) {
        .calendar-day:focus {
            border: 4px solid var(--text-normal) !important;
            background: var(--background-secondary) !important;
            box-shadow: 0 0 0 2px var(--background-primary), 0 0 0 6px var(--text-normal);
            transform: scale(1.1);
        }
        
        .calendar-day:focus .day-number {
            color: var(--text-normal);
            font-weight: 800;
        }
    }

    /* Focus visible for keyboard-only navigation */
    .calendar-day:focus-visible {
        border: 3px solid var(--interactive-accent) !important;
        background: var(--background-modifier-hover) !important;
        outline: none;
        box-shadow: 0 0 8px rgba(var(--interactive-accent-rgb), 0.3);
        transform: scale(1.05);
    }

    /* Remove focus outline for mouse clicks */
    .calendar-day:focus:not(:focus-visible) {
        border: 1px solid var(--background-modifier-border);
        background: initial;
        box-shadow: none;
        transform: none;
    }

    /* Compact Calendar Container Focus Styles for Tab Navigation */
    .oomp-enhanced-date-navigator-modal .oomp-compact-days-container:focus {
        outline: 2px solid var(--interactive-accent);
        outline-offset: 2px;
        border-radius: 4px;
    }

    .oomp-enhanced-date-navigator-modal .oomp-compact-days-container:focus-visible {
        outline: 2px solid var(--interactive-accent);
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* Remove focus outline when clicked (not keyboard focused) */
    .oomp-enhanced-date-navigator-modal .oomp-compact-days-container:focus:not(:focus-visible) {
        outline: none;
    }

    /* High contrast support for compact calendar container focus */
    @media (prefers-contrast: high) {
        .oomp-enhanced-date-navigator-modal .oomp-compact-days-container:focus {
            outline: 3px solid var(--interactive-accent);
            outline-offset: 1px;
        }
    }
}

.modal.oomp-enhanced-date-navigator-modal:has(.dual-view) {
    height: 570px;
}

.modal.oomp-enhanced-date-navigator-modal:has(.quarter-view) {
    height: 525px;
}

/* Accessibility and Preferences */
@media (prefers-reduced-motion: reduce) {
    .oomp-enhanced-date-navigator-modal {
        .calendar-day {
            transition: none;

            &:hover {
                transform: none;
            }
        }
        
        .selection-mode-btn {
            transition: none;
        }
    }
}

@media (prefers-contrast: high) {
    .oomp-enhanced-date-navigator-modal {
        .calendar-day.selected {
            border: 2px solid var(--text-on-accent);
        }
        
        .selection-mode-btn.active {
            border: 2px solid var(--text-on-accent);
        }
    }
}

/* Responsive Adjustments */
@container (max-width: 500px) {
    .oomp-enhanced-date-navigator-modal {
        .calendar-day {
            min-height: 28px;
            font-size: 12px;
        }

        .calendar-grid {
            padding: 8px;
            gap: 1px;
        }

        .enhanced-nav-section .nav-header {
            flex-direction: column;
            align-items: stretch;
        }

        .selection-mode-section {
            flex-direction: column;
            align-items: stretch;
            
            .mode-buttons {
                justify-content: center;
            }
        }
    }
}

/* Calendar Days Grid - CRITICAL GRID LAYOUT */
.oomp-enhanced-date-navigator-modal .calendar-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    max-width: none;
    width: 100%;
    padding: 4px;
}

/* Calendar Header Row */  
.oomp-enhanced-date-navigator-modal .calendar-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    max-width: none;
    width: 100%;
    margin-bottom: 6px;
    padding: 0 4px;
}

/* Weekday Headers */
.oomp-enhanced-date-navigator-modal .calendar-weekday {
    padding: 5px 2px;
    text-align: center;
    font-size: 11px;
    border-bottom: 1px solid var(--background-modifier-border);
    font-weight: 600;
    color: var(--text-muted);
}

/* Quarter View Layout */
.oomp-enhanced-date-navigator-modal .quarter-view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 12px;
    width: 100%;
}

/* Individual Month Containers in Quarter View */
.oomp-enhanced-date-navigator-modal .oomp-quarter-month {
    display: flex;
    flex-direction: column;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    padding: 12px;
    min-width: 0;
}

/* Quarter Month Headers */
.oomp-enhanced-date-navigator-modal .oomp-quarter-month-header {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: var(--text-normal);
    margin-bottom: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--background-modifier-border);
}

/* Compact Month Grid */
.oomp-enhanced-date-navigator-modal .oomp-compact-month-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Compact Header Row (Weekdays) */
.oomp-enhanced-date-navigator-modal .oomp-compact-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

/* Compact Weekday Headers */
.oomp-enhanced-date-navigator-modal .oomp-compact-weekday {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: var(--text-muted);
    padding: 1px;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Compact Days Container */
.oomp-enhanced-date-navigator-modal .oomp-compact-days-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

/* Compact Day Cells */
.oomp-enhanced-date-navigator-modal .oomp-compact-day {
    position: relative;
    min-height: 18px;
    max-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 2px;
    transition: background-color 0.15s ease;
    background: var(--background-primary);
    border: 1px solid transparent;
    font-size: 11px;
    padding: 1px;
}

.oomp-enhanced-date-navigator-modal .oomp-compact-day:hover {
    background: var(--background-modifier-hover);
}

.oomp-enhanced-date-navigator-modal .oomp-compact-day.today {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    font-weight: 600;
}

.oomp-enhanced-date-navigator-modal .oomp-compact-day.other-month {
    visibility: hidden;
    pointer-events: none;
}

/* Accessibility: Focus styles for compact calendar days */
.oomp-enhanced-date-navigator-modal .oomp-compact-day:focus {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
    background: var(--background-modifier-hover);
    z-index: 10;
    border-color: var(--interactive-accent);
    box-shadow: 0 0 0 1px var(--interactive-accent);
}

.oomp-enhanced-date-navigator-modal .oomp-compact-day:focus .oomp-compact-day-number {
    font-weight: 600;
    color: var(--interactive-accent);
}

/* High contrast support for compact calendar focus */
@media (prefers-contrast: high) {
    .oomp-enhanced-date-navigator-modal .oomp-compact-day:focus {
        outline: 3px solid var(--interactive-accent);
        outline-offset: 1px;
        box-shadow: 0 0 0 2px var(--interactive-accent);
    }

    .oomp-enhanced-date-navigator-modal .oomp-compact-day:focus .oomp-compact-day-number {
        color: var(--text-accent);
    }
}

/* Focus-visible support for compact calendar days */
.oomp-enhanced-date-navigator-modal .oomp-compact-day:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

/* Remove focus outline when clicked (not keyboard focused) */
.oomp-enhanced-date-navigator-modal .oomp-compact-day:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Compact Day Numbers */
.oomp-enhanced-date-navigator-modal .oomp-compact-day-number {
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    z-index: 1;
    color: var(--text-normal);
}

/* Compact Dream Indicators */
.oomp-enhanced-date-navigator-modal .oomp-compact-dream-indicator {
    position: absolute;
    bottom: 1px;
    right: 1px;
    font-size: 6px;
    color: var(--color-green);
    line-height: 1;
    z-index: 2;
}

/* Quarter Toggle Enhancement */
.oomp-enhanced-date-navigator-modal .quarter-toggle-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.oomp-enhanced-date-navigator-modal .quarter-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.oomp-enhanced-date-navigator-modal .quarter-toggle:hover {
    border-color: var(--background-modifier-border-hover);
    background: var(--background-modifier-hover);
}

.oomp-enhanced-date-navigator-modal .quarter-toggle:active {
    transform: translateY(1px);
    background: var(--background-modifier-active);
}

.oomp-enhanced-date-navigator-modal .toggle-switch input[type="checkbox"] {
    height: 14px;
    width: 14px;
    margin: 0;
    pointer-events: none;
    accent-color: var(--interactive-accent);
}

.oomp-enhanced-date-navigator-modal .toggle-label {
    pointer-events: none;
    user-select: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-normal);
}

.oomp-enhanced-date-navigator-modal .quarter-toggle:has(input:checked) {
    border-color: var(--interactive-accent);
    background: var(--interactive-accent-hover);
}

.oomp-enhanced-date-navigator-modal .quarter-toggle:has(input:checked) .toggle-label {
    font-weight: 600;
    color: var(--text-on-accent);
}

/* Dark Mode Adjustments */
.theme-dark .oomp-enhanced-date-navigator-modal .oomp-quarter-month {
    background: var(--background-primary-alt);
}

.theme-dark .oomp-enhanced-date-navigator-modal .oomp-compact-day {
    background: var(--background-secondary);
}

.theme-dark .oomp-enhanced-date-navigator-modal .oomp-compact-dream-indicator {
    color: var(--color-green-rgb);
}

/* Responsive Design */
@media (max-width: 768px) {
    .oomp-enhanced-date-navigator-modal .quarter-view {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .oomp-enhanced-date-navigator-modal .oomp-quarter-month {
        padding: 6px;
    }
    
    .oomp-enhanced-date-navigator-modal .oomp-compact-day {
        min-height: 24px;
    }
    
    .oomp-enhanced-date-navigator-modal .oomp-compact-day-number {
        font-size: 11px;
    }
}

/* Visualization Dropdown */
.oomp-visualization-dropdown-container {
    display: flex;
    align-items: center;
    gap: 8px;
    
    .oomp-visualization-dropdown {
        min-width: 110px;
        padding: 4px 8px;
        border: 1px solid var(--background-modifier-border);
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        color: var(--text-normal);
        background: var(--background-primary);
        
        &:focus {
            outline: 2px solid var(--interactive-accent);
            outline-offset: 1px;
            border-color: var(--interactive-accent);
        }
        
        &:hover {
            background: var(--background-modifier-hover);
        }
        
        option {
            padding: 4px;
            color: var(--text-normal);
            background: var(--background-primary);
        }
    }
}

/* Pattern Visualization Elements */
.oomp-pattern-indicator {
    position: absolute;
    z-index: 2;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--pattern-color, #666);
    opacity: var(--pattern-opacity, 1);
}

.oomp-quality-score {
    position: absolute;
    z-index: 2;
    bottom: 2px;
    right: 2px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.6em;
    padding: 1px 3px;
    border-radius: 2px;
}

.oomp-metric-overlay {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    pointer-events: none;
}

.oomp-metric-dot {
    height: 4px;
    width: 4px;
    margin: auto;
    border-radius: 50%;
    background-color: var(--metric-color, #666);
    opacity: var(--metric-opacity, 1);
}

.oomp-pattern-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
    color: var(--pattern-color, #666);
    opacity: var(--pattern-opacity, 1);
}

.oomp-fallback-indicator {
    position: absolute;
    z-index: 2;
    top: 2px;
    right: 2px;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: #666;
}

/* Pattern Legend System */
.oomp-pattern-legend {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    padding: 12px;
    margin: 16px 0;
    max-width: 300px;
}

.oomp-legend-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-normal);
    margin-bottom: 8px;
    border-bottom: 1px solid var(--background-modifier-border);
    padding-bottom: 4px;
}

.oomp-legend-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.oomp-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-normal);
}

.oomp-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--legend-color, #666);
}

.oomp-legend-gradient {
    width: 16px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--legend-gradient, #666);
}

.oomp-legend-icon {
    font-size: 16px;
    flex-shrink: 0;
}

/* Pattern Type Classes */
.oomp-pattern-high-quality {
    background: var(--color-green);
}

.oomp-pattern-fragmented {
    background: var(--color-yellow);
}

.oomp-pattern-rich-narrative {
    background: var(--color-blue);
}

.oomp-pattern-basic-recall {
    background: var(--color-orange);
}

/* Quality Level Classes */
.oomp-quality-high {
    background: var(--color-green);
}

.oomp-quality-medium {
    background: var(--color-yellow);
}

.oomp-quality-low {
    background: var(--color-red);
}

/* Metric-Specific Classes for Multi-Layer Visualization */
.oomp-sensory {
    background-color: #7c3aed;
}

.oomp-emotional {
    background-color: #06d6a0;
}

.oomp-fragmentation {
    background-color: #f72585;
}

.oomp-descriptiveness {
    background-color: #f77f00;
}

/* Tooltips */
.oomp-pattern-tooltip {
    position: absolute;
    left: 50%;
    bottom: 100%;
    z-index: 100;
    max-width: 250px;
    margin-bottom: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.75em;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transform: translateX(-50%);
    color: white;
    background: rgba(0, 0, 0, 0.9);
}

.oomp-tooltip-title {
    font-weight: bold;
}

.oomp-tooltip-date {
    color: #ccc;
}

.oomp-tooltip-pattern {
    font-weight: bold;
    color: #7c3aed;
}

.oomp-tooltip-pattern-desc {
    font-style: italic;
    color: #bbb;
}

.oomp-tooltip-metric {
    font-size: 0.9em;
}

.oomp-tooltip-calculated {
    font-weight: bold;
    color: #faa61a;
}

.oomp-tooltip-no-metrics {
    font-style: italic;
    color: #888;
}

/* Tooltip Arrow */
.oomp-tooltip-arrow {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid rgba(0, 0, 0, 0.9);
    width: 0;
    height: 0;
}

/* Tooltip Metric Bars */
.oom-tooltip-bar {
    display: inline-block;
    width: 40px;
    height: 4px;
    background: #333;
    margin-left: 4px;
    position: relative;
    border-radius: 2px;
}

.oom-tooltip-bar-fill {
    display: block;
    width: var(--bar-width, 0%);
    height: 100%;
    background: var(--bar-color, var(--text-muted));
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Tooltip Visibility States */
.oom-tooltip-visible {
    opacity: 1 !important;
}

/* Tooltip Position Adjustments */
.oom-tooltip-left {
    left: 0 !important;
    transform: none !important;
}

.oom-tooltip-right {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

/* Calendar Day Focus Styles for Accessibility */
.calendar-day:focus {
    border: 3px solid var(--interactive-accent) !important;
    background: var(--background-modifier-hover) !important;
    outline: none;
    box-shadow: 0 0 8px rgba(var(--interactive-accent-rgb), 0.3);
    z-index: 1;
    position: relative;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

.calendar-day:focus .day-number {
    color: var(--interactive-accent);
    font-weight: 700;
    font-size: 1.1em;
}

/* High contrast focus for better accessibility */
@media (prefers-contrast: high) {
    .calendar-day:focus {
        border: 4px solid var(--text-normal) !important;
        background: var(--background-secondary) !important;
        box-shadow: 0 0 0 2px var(--background-primary), 0 0 0 6px var(--text-normal);
        transform: scale(1.1);
    }
    
    .calendar-day:focus .day-number {
        color: var(--text-normal);
        font-weight: 800;
    }
}

/* Focus visible for keyboard-only navigation */
.calendar-day:focus-visible {
    border: 3px solid var(--interactive-accent) !important;
    background: var(--background-modifier-hover) !important;
    outline: none;
    box-shadow: 0 0 8px rgba(var(--interactive-accent-rgb), 0.3);
    transform: scale(1.05);
}

/* Remove focus outline for mouse clicks */
.calendar-day:focus:not(:focus-visible) {
    border: 1px solid var(--background-modifier-border);
    background: initial;
    box-shadow: none;
    transform: none;
}

/* Hide main calendar headers in Quarter view */
.oomp-enhanced-date-navigator-modal .quarter-view ~ .calendar-header-row,
.oomp-enhanced-date-navigator-modal .calendar-days-grid.quarter-view ~ .calendar-header-row {
    display: none;
}

/* Hide main calendar headers when Quarter or Dual view is active */
.oomp-enhanced-date-navigator-modal .calendar-days-grid.quarter-view + .calendar-header-row,
.oomp-enhanced-date-navigator-modal .calendar-days-grid.quarter-view ~ .calendar-header-row,
.oomp-enhanced-date-navigator-modal .calendar-days-grid.dual-view + .calendar-header-row,
.oomp-enhanced-date-navigator-modal .calendar-days-grid.dual-view ~ .calendar-header-row,
.oomp-enhanced-date-navigator-modal:has(.quarter-view) .calendar-header-row,
.oomp-enhanced-date-navigator-modal:has(.dual-view) .calendar-header-row {
    display: none !important;
}

/* Selection Info and Action Buttons */
.oomp-enhanced-date-navigator-modal .selection-info,
.oomp-enhanced-date-navigator-modal .action-buttons {
    margin-top: .5em;
    text-align: center;
}

/* View Mode Dropdown */
.oomp-enhanced-date-navigator-modal .view-mode-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.oomp-enhanced-date-navigator-modal .view-mode-dropdown {
    min-width: 110px;
    padding: 4px 8px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-normal);
    background: var(--background-primary);
    transition: all 0.15s ease;
}

.oomp-enhanced-date-navigator-modal .view-mode-dropdown:focus {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 1px;
    border-color: var(--interactive-accent);
}

.oomp-enhanced-date-navigator-modal .view-mode-dropdown:hover {
    background: var(--background-modifier-hover);
    border-color: var(--background-modifier-border-hover);
}

.oomp-enhanced-date-navigator-modal .view-mode-dropdown option {
    padding: 4px;
    color: var(--text-normal);
    background: var(--background-primary);
}

/* Dual View Layout */
.oomp-enhanced-date-navigator-modal .dual-view {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 12px;
    width: 100%;
}

/* Individual Month Containers in Dual View */
.oomp-enhanced-date-navigator-modal .oomp-dual-month {
    display: flex;
    flex-direction: column;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    padding: 12px;
    min-width: 0;
}

/* Dual Month Headers */
.oomp-enhanced-date-navigator-modal .oomp-dual-month-header {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: var(--text-normal);
    margin-bottom: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--background-modifier-border);
}

/* Larger sizing for Dual View - we have more space than Quarter view */
.oomp-enhanced-date-navigator-modal .dual-view .oomp-compact-month-grid {
    gap: 4px; /* Increased from 3px */
}

.oomp-enhanced-date-navigator-modal .dual-view .oomp-compact-header-row {
    gap: 3px; /* Increased from 2px */
    margin-bottom: 6px; /* Increased from 4px */
}

.oomp-enhanced-date-navigator-modal .dual-view .oomp-compact-weekday {
    font-size: 12px; /* Increased from 11px */
    font-weight: 600;
    min-height: 24px; /* Increased from 20px */
    padding: 2px; /* Increased from 1px */
}

.oomp-enhanced-date-navigator-modal .dual-view .oomp-compact-days-container {
    gap: 3px; /* Increased from 2px */
}

.oomp-enhanced-date-navigator-modal .dual-view .oomp-compact-day {
    min-height: 24px; /* Increased from 18px */
    max-height: 28px; /* Increased from 20px */
    border-radius: 3px; /* Increased from 2px */
    font-size: 12px; /* Increased from 11px */
    padding: 2px; /* Increased from 1px */
}

.oomp-enhanced-date-navigator-modal .dual-view .oomp-compact-day-number {
    font-size: 11px; /* Increased from 10px */
    font-weight: 500;
}

/* Enhanced Mobile and Responsive Design */
@media (max-width: 768px) {
    /* Make modal responsive */
    .oomp-enhanced-date-navigator-modal {
        width: 95vw;
        max-width: 500px;
        height: auto !important;
        max-height: 90vh;
        padding: 12px;
    }
    
    /* Responsive navigation controls */
    .oomp-enhanced-date-navigator-modal .nav-header.optimized-nav-header {
        flex-wrap: wrap;
        gap: 6px;
        padding: 6px 8px;
    }
    
    /* Quarter view - single column */
    .oomp-enhanced-date-navigator-modal .quarter-view {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    /* Dual view - single column on mobile */
    .oomp-enhanced-date-navigator-modal .dual-view {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    /* Compact month containers */
    .oomp-enhanced-date-navigator-modal .oomp-quarter-month,
    .oomp-enhanced-date-navigator-modal .oomp-dual-month {
        padding: 8px;
    }
    
    /* Larger touch targets for mobile */
    .oomp-enhanced-date-navigator-modal .oomp-compact-day {
        min-height: 32px;
        max-height: 36px;
        font-size: 13px;
        padding: 2px;
    }
    
    .oomp-enhanced-date-navigator-modal .oomp-compact-day-number {
        font-size: 12px;
    }
    
    /* Larger weekday headers */
    .oomp-enhanced-date-navigator-modal .oomp-compact-weekday {
        min-height: 28px;
        font-size: 12px;
        padding: 3px;
    }
    
    /* Navigation dropdowns */
    .oomp-enhanced-date-navigator-modal .view-mode-dropdown,
    .oomp-enhanced-date-navigator-modal .year-picker {
        min-width: 80px;
        font-size: 11px;
        padding: 6px 8px;
    }
    
    /* Selection mode buttons */
    .oomp-enhanced-date-navigator-modal .selection-mode-btn {
        padding: 6px 10px;
        font-size: 11px;
        min-width: 50px;
    }
}

@media (max-width: 480px) {
    /* Extra small screens */
    .oomp-enhanced-date-navigator-modal {
        width: 98vw;
        padding: 8px;
    }
    
    /* Stack navigation controls vertically */
    .oomp-enhanced-date-navigator-modal .nav-header.optimized-nav-header {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    /* Smaller compact days */
    .oomp-enhanced-date-navigator-modal .oomp-compact-day {
        min-height: 28px;
        max-height: 32px;
        font-size: 12px;
    }
    
    .oomp-enhanced-date-navigator-modal .oomp-compact-day-number {
        font-size: 11px;
    }
    
    /* Smaller headers */
    .oomp-enhanced-date-navigator-modal .oomp-dual-month-header,
    .oomp-enhanced-date-navigator-modal .oomp-quarter-month-header {
        font-size: 13px;
        padding: 4px 0;
        margin-bottom: 8px;
    }
}

/* Landscape phone orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .oomp-enhanced-date-navigator-modal {
        height: auto !important;
        max-height: 95vh;
    }
    
    /* Keep dual view as 2 columns in landscape */
    .oomp-enhanced-date-navigator-modal .dual-view {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Calendar Fallback Indicators */
.oom-calendar-indicator {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #666;
    z-index: 2;
}

.oom-calendar-indicator--count {
    font-size: 0.6em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
} 

/* =============================================================================
   COMPONENT: UNIFIED-TEST-SUITE (27.8 KB)
   ============================================================================= */
/* =============================================================================
   UNIFIED TEST SUITE - Complete Modal System & Configuration Components
   ============================================================================= */

/* Modal Container */
.modal:has(.unified-test-suite-modal) {
    contain: layout style;
    width: var(--modal-width);
    max-width: var(--modal-max-width);
    height: var(--modal-height);
    max-height: var(--modal-max-height);
    padding: 0;
}

.unified-test-suite-modal {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: var(--oom-spacing-sm);
}

/* Header & Description */
.unified-test-suite-header {
    margin-bottom: 0;
    margin-block-start: 0;
    padding-bottom: 0;
    text-align: center;
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
}

.unified-test-suite-description {
    margin-bottom: var(--oom-spacing-lg);
    text-align: center;
    line-height: var(--line-height-normal);
    color: var(--text-muted);
}

/* Two-Column Layout */
.unified-test-suite-container {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    gap: 0;
    border-radius: var(--oom-radius-md);
}

/* Sidebar Navigation */
.unified-test-suite-sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
    width: var(--oom-tab-sidebar-width);
    min-width: var(--oom-tab-sidebar-width);
    padding: var(--oom-spacing-sm) 0;
    scrollbar-width: thin;
}

.unified-test-suite-sidebar::-webkit-scrollbar {
    width: 8px;
}

.unified-test-suite-sidebar::-webkit-scrollbar-track {
    /* Let theme handle scrollbar track styling */
}

.unified-test-suite-sidebar::-webkit-scrollbar-thumb {
    border-radius: var(--oom-radius-sm);
    /* Let theme handle scrollbar thumb styling */
}

.unified-test-suite-sidebar::-webkit-scrollbar-thumb:hover {
    /* Let theme handle scrollbar hover styling */
}

/* Tab Group Headers */
.unified-test-suite-tab-group-title {
    margin: var(--oom-spacing-sm) 0 var(--oom-spacing-xs) 0;
    padding: 0 .32em;
    font-weight: 700;
    font-size: var(--font-ui-smaller);
    letter-spacing: 0.05rem;
    text-transform: uppercase;
}

.unified-test-suite-tab-group-title:first-child {
    margin-top: 0;
}

/* Tab Navigation Items */
.unified-test-suite-tab-nav-item {
    display: flex;
    align-items: center;
    padding: .45em 0;
    gap: var(--oom-spacing-sm);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: all var(--oom-transition-fast);
}

.unified-test-suite-tab-nav-item:hover {
    /* Let theme handle hover styling */
}

.unified-test-suite-tab-nav-item:focus {
    outline: none;
    /* Let theme handle focus styling */
}

.unified-test-suite-tab-nav-item.is-active {
    font-weight: 600;
    /* Let theme handle active state colors */
}

.unified-test-suite-tab-label {
    /* Inherits from the navigation item styling */
}

/* Content Area */
.unified-test-suite-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1em;
    scrollbar-width: thin;
}

.unified-test-suite-content::-webkit-scrollbar {
    width: 8px;
}

.unified-test-suite-content::-webkit-scrollbar-track {
    /* Let theme handle scrollbar track styling */
}

.unified-test-suite-content::-webkit-scrollbar-thumb {
    border-radius: var(--oom-radius-sm);
    /* Let theme handle scrollbar thumb styling */
}

.unified-test-suite-content::-webkit-scrollbar-thumb:hover {
    /* Let theme handle scrollbar hover styling */
}

/* Content Headers */
.unified-test-suite-content-header {
    margin-bottom: var(--oom-spacing-md);
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
}

.unified-test-suite-content-description {
    margin-bottom: var(--oom-spacing-lg);
    line-height: var(--line-height-normal);
    color: var(--text-muted);
}

/* Dashboard Components */
.unified-test-suite-dashboard-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oom-spacing-md);
    margin-bottom: var(--oom-spacing-lg);
}

.unified-test-suite-stat-widget {
    flex: 1;
    min-width: 120px;
    padding: var(--oom-spacing-md);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-md);
    background: var(--background-secondary);
}

.unified-test-suite-stat-label {
    margin-bottom: var(--oom-spacing-xs);
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
}

.unified-test-suite-stat-value {
    color: var(--text-normal);
    font-size: var(--h3-size);
    font-weight: 600;
}

.unified-test-suite-dashboard-actions {
    margin-top: var(--oom-spacing-lg);
}

.unified-test-suite-dashboard-actions h3 {
    margin-bottom: var(--oom-spacing-md);
    font-size: var(--h3-size);
}

/* Action Buttons */
.unified-test-suite-action-button {
    display: inline-flex;
    align-items: center;
    gap: var(--oom-spacing-sm);
    padding: var(--oom-spacing-sm) var(--oom-spacing-md);
    margin-right: var(--oom-spacing-sm);
    margin-bottom: var(--oom-spacing-sm);
    border: none;
    border-radius: var(--oom-radius-sm);
    cursor: pointer;
    transition: background-color var(--oom-transition-fast);
    color: var(--text-on-accent);
    background: var(--interactive-normal);
}

.unified-test-suite-action-button:hover {
    background: var(--interactive-hover);
}

.unified-test-suite-test-button,
.unified-test-suite-utility-button {
    display: block;
    width: 100%;
    padding: var(--oom-spacing-sm) var(--oom-spacing-md);
    margin-bottom: var(--oom-spacing-xs);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-sm);
    cursor: pointer;
    transition: all var(--oom-transition-fast);
    background: var(--background-secondary);
    color: var(--text-normal);
}

.unified-test-suite-test-button:hover,
.unified-test-suite-utility-button:hover {
    background: var(--background-modifier-hover);
    border-color: var(--background-modifier-border-hover);
}

.unified-test-suite-quick-test-button {
    display: inline-block;
    padding: var(--oom-spacing-sm) var(--oom-spacing-md);
    margin-right: var(--oom-spacing-sm);
    margin-bottom: var(--oom-spacing-sm);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-sm);
    cursor: pointer;
    transition: all var(--oom-transition-fast);
    background: var(--background-secondary);
    color: var(--text-normal);
}

.unified-test-suite-quick-test-button:hover {
    background: var(--background-modifier-hover);
    border-color: var(--background-modifier-border-hover);
}

/* Test Areas */
.unified-test-suite-test-controls {
    margin: var(--oom-spacing-lg) 0;
    padding: var(--oom-spacing-md);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-md);
    background: var(--background-secondary);
}

.unified-test-suite-test-results {
    margin-top: var(--oom-spacing-lg);
}

.unified-test-suite-results-area {
    padding: var(--oom-spacing-md);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-md);
    background: var(--background-primary-alt);
}

/* Quick Tests */
.unified-test-suite-quick-tests {
    margin: var(--oom-spacing-lg) 0;
}

.unified-test-suite-quick-tests h3 {
    margin-bottom: var(--oom-spacing-md);
    font-size: var(--h3-size);
}

.unified-test-suite-custom-test {
    margin-top: var(--oom-spacing-lg);
    padding: var(--oom-spacing-md);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-md);
    background: var(--background-secondary);
}

.unified-test-suite-custom-test h3 {
    margin-bottom: var(--oom-spacing-md);
    font-size: var(--h4-size);
}

/* Memory/Scaling Tests */
.unified-test-suite-memory-tests,
.unified-test-suite-scaling-tests {
    margin: var(--oom-spacing-lg) 0;
}

.unified-test-suite-memory-tests h3,
.unified-test-suite-scaling-tests h3 {
    margin-bottom: var(--oom-spacing-md);
    font-size: var(--h3-size);
}

/* Utilities Container */
.unified-test-suite-utilities-container {
    display: flex;
    flex-direction: column;
    gap: var(--oom-spacing-lg);
}

.unified-test-suite-utility-description {
    margin-bottom: 1rem;
    line-height: 1.4;
    font-size: 0.9rem;
}

.unified-test-suite-utility-section {
    padding: var(--oom-spacing-md);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-md);
    background: var(--background-secondary);
}

.unified-test-suite-utility-section h3 {
    margin-bottom: var(--oom-spacing-md);
    color: var(--text-normal);
    font-size: var(--h4-size);
}

/* Folder Configuration */
.unified-test-suite-folder-config {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: var(--background-secondary);
}

.unified-test-suite-folder-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
    font-family: var(--font-monospace);
    margin-top: 0.5rem;
}

.unified-test-suite-folder-input:focus {
    outline: none;
    border-color: var(--interactive-accent);
    box-shadow: 0 0 0 2px var(--interactive-accent-hover);
}

.unified-test-suite-generation-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Template Configuration */
.unified-test-suite-template-config {
    margin: var(--oom-spacing-md) 0;
    padding: var(--oom-spacing-md);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-md);
    background: var(--background-secondary);
}

.unified-test-suite-template-input {
    width: 100%;
    padding: var(--oom-spacing-sm) var(--oom-spacing-md);
    margin: var(--oom-spacing-xs) 0;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-sm);
    background: var(--background-primary);
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
}

.unified-test-suite-template-input:focus {
    outline: none;
    border-color: var(--interactive-accent);
    box-shadow: 0 0 0 2px var(--interactive-accent-hover);
}

.unified-test-suite-browse-button {
    padding: var(--oom-spacing-sm) var(--oom-spacing-md);
    margin-top: var(--oom-spacing-sm);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-sm);
    background: var(--background-secondary);
    color: var(--text-normal);
    cursor: pointer;
    transition: all var(--oom-transition-fast);
}

.unified-test-suite-browse-button:hover {
    background: var(--background-modifier-hover);
}

/* Template Selector Dialog */
.unified-test-suite-template-selector-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-height: 500px;
    padding: var(--oom-spacing-lg);
    border: 2px solid var(--interactive-accent);
    border-radius: var(--oom-radius-md);
    background: var(--background-primary);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.unified-test-suite-template-selector-dialog h4 {
    margin: 0 0 var(--oom-spacing-md) 0;
    color: var(--interactive-accent);
    font-weight: 600;
}

.unified-test-suite-template-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-sm);
}

.unified-test-suite-template-list::-webkit-scrollbar {
    width: 8px;
}

.unified-test-suite-template-list::-webkit-scrollbar-track {
    background: var(--background-secondary);
}

.unified-test-suite-template-list::-webkit-scrollbar-thumb {
    background: var(--background-modifier-border);
    border-radius: 4px;
}

.unified-test-suite-template-list::-webkit-scrollbar-thumb:hover {
    background: var(--background-modifier-border-hover);
}

.unified-test-suite-template-option {
    padding: var(--oom-spacing-sm) var(--oom-spacing-md);
    border-bottom: 1px solid var(--background-modifier-border);
    cursor: pointer;
    transition: background-color var(--oom-transition-fast);
}

.unified-test-suite-template-option:last-child {
    border-bottom: none;
}

.unified-test-suite-template-option:hover {
    background: var(--background-modifier-hover);
}

.unified-test-suite-template-option span {
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
    word-break: break-all;
}

.unified-test-suite-template-close {
    padding: var(--oom-spacing-sm) var(--oom-spacing-lg);
    background: var(--background-modifier-border);
    color: var(--text-normal);
    border: none;
    border-radius: var(--oom-radius-sm);
    cursor: pointer;
    font-size: var(--font-ui-medium);
    transition: background-color var(--oom-transition-normal);
}

.unified-test-suite-template-close:hover {
    background: var(--background-modifier-border-hover);
}

/* Help Content */
.unified-test-suite-help-content {
    max-width: none;
    line-height: var(--line-height-normal);
}

.unified-test-suite-help-content h3 {
    margin: var(--oom-spacing-lg) 0 var(--oom-spacing-md) 0;
    font-size: var(--h3-size);
}

.unified-test-suite-help-content h4 {
    margin: var(--oom-spacing-md) 0 var(--oom-spacing-sm) 0;
    font-size: var(--h4-size);
}

.unified-test-suite-help-content p {
    margin-bottom: var(--oom-spacing-md);
    color: var(--text-normal);
}

.unified-test-suite-help-content ul {
    margin: var(--oom-spacing-sm) 0 var(--oom-spacing-md) var(--oom-spacing-lg);
}

.unified-test-suite-help-content li {
    margin-bottom: var(--oom-spacing-xs);
    color: var(--text-normal);
}

.unified-test-suite-help-content code {
    padding: 2px 4px;
    border-radius: var(--oom-radius-xs);
    background: var(--background-primary-alt);
    font-family: var(--font-monospace);
}

/* Recent Results */
.unified-test-suite-recent-results {
    margin-top: var(--oom-spacing-xl);
}

.unified-test-suite-recent-results h3 {
    margin-bottom: var(--oom-spacing-md);
    font-size: var(--h3-size);
}

.unified-test-suite-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--oom-spacing-sm);
}

.unified-test-suite-result-item {
    padding: var(--oom-spacing-sm);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-sm);
    border-left-width: 4px;
    background: var(--background-secondary);
}

.unified-test-suite-result-success {
    border-left-color: var(--color-green);
}

.unified-test-suite-result-failure {
    border-left-color: var(--color-red);
}

.unified-test-suite-result-warning {
    border-left-color: var(--color-orange);
}

.unified-test-suite-result-running {
    border-left-color: var(--color-blue);
}

.unified-test-suite-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--oom-spacing-xs);
}

.unified-test-suite-result-name {
    font-weight: 600;
}

.unified-test-suite-result-status {
    padding: 2px 8px;
    border-radius: var(--oom-radius-xs);
    font-size: var(--font-ui-smaller);
    font-weight: 600;
    text-transform: uppercase;
}

.unified-test-suite-result-success .unified-test-suite-result-status {
    background: var(--color-green);
    color: white;
}

.unified-test-suite-result-failure .unified-test-suite-result-status {
    background: var(--color-red);
    color: white;
}

.unified-test-suite-result-warning .unified-test-suite-result-status {
    background: var(--color-orange);
    color: white;
}

.unified-test-suite-result-running .unified-test-suite-result-status {
    background: var(--color-blue);
    color: white;
}

.unified-test-suite-result-duration,
.unified-test-suite-result-details {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}

/* Data Table */
.unified-test-suite-data-table {
    margin: var(--oom-spacing-lg) 0;
}

.unified-test-suite-data-table table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.unified-test-suite-data-table th,
.unified-test-suite-data-table td {
    padding: var(--oom-spacing-sm);
    border-bottom: 1px solid var(--background-modifier-border);
    text-align: left;
}

.unified-test-suite-data-table th {
    background: var(--background-secondary);
    color: var(--text-normal);
    font-weight: 600;
}

.unified-test-suite-data-table td {
    color: var(--text-normal);
}

.unified-test-suite-data-table tr:hover {
    background: var(--background-modifier-hover);
}

/* Item Actions */
.unified-test-suite-item-actions {
    display: flex;
    gap: var(--oom-spacing-sm);
    margin-top: var(--oom-spacing-lg);
}

.unified-test-suite-item-actions button {
    padding: var(--oom-spacing-sm) var(--oom-spacing-md);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-sm);
    background: var(--background-secondary);
    color: var(--text-normal);
    cursor: pointer;
    transition: all var(--oom-transition-fast);
}

.unified-test-suite-item-actions button:hover {
    background: var(--background-modifier-hover);
}

.unified-test-suite-item-actions button.mod-warning {
    border-color: var(--background-modifier-error);
    background: var(--background-modifier-error);
    color: var(--text-error);
}

/* Logging Settings */
.unified-test-suite-logging-settings {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
}

.unified-test-suite-setting-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.unified-test-suite-setting-label {
    min-width: 180px;
    font-weight: 500;
    color: var(--text-normal);
}

.unified-test-suite-log-level-select {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
    transition: all var(--oom-transition-fast);
}

.unified-test-suite-log-level-select:hover {
    border-color: var(--background-modifier-border-hover);
}

.unified-test-suite-log-level-select:focus {
    outline: none;
    border-color: var(--interactive-accent);
    box-shadow: 0 0 0 2px var(--interactive-accent-hover);
}

.unified-test-suite-setting-helper {
    margin-top: 0.5rem;
}

.unified-test-suite-helper-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.unified-test-suite-logging-testing,
.unified-test-suite-performance-testing {
    margin: var(--oom-spacing-lg) 0;
}

/* Custom Dialog Container */
.oomp-unified-test-suite-custom-dialog {
    max-width: 800px;
    width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.5rem;
    border-radius: 8px;
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    box-shadow: var(--shadow-l);
}

/* Configuration Sections */
.oomp-unified-test-suite-config-section {
    margin-bottom: 2rem;
    padding: 1rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: var(--background-secondary);
}

.oomp-unified-test-suite-config-section h5 {
    margin: 0 0 1rem 0;
    color: var(--text-accent);
    font-weight: 600;
    font-size: 1.1rem;
}

.oomp-unified-test-suite-config-section h6 {
    margin: 0 0 0.75rem 0;
    color: var(--text-normal);
    font-weight: 500;
    font-size: 1rem;
}

/* Setting Items */
.oomp-unified-test-suite-setting-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.oomp-unified-test-suite-setting-item label {
    min-width: 180px;
    font-weight: 500;
    color: var(--text-normal);
}

.oomp-unified-test-suite-setting-item input,
.oomp-unified-test-suite-setting-item select {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
    color: var(--text-normal);
}

/* Template Preview */
.oomp-unified-test-suite-template-preview {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
}

.oomp-unified-test-suite-template-preview-content {
    margin: 0.5rem 0 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    background: var(--code-background);
    padding: 0.75rem;
    border-radius: 4px;
    white-space: pre-wrap;
    overflow-x: auto;
}

/* Metrics Info & Help Text */
.oomp-unified-test-suite-metrics-info {
    margin-bottom: 1rem;
}

.oomp-unified-test-suite-help-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.oomp-unified-test-suite-metrics-group {
    margin-bottom: 1.5rem;
}

/* Metrics Container & Items */
.oomp-unified-test-suite-metrics-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.oomp-unified-test-suite-metric-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    background: var(--background-primary);
}

.oomp-unified-test-suite-metric-item label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--text-normal);
    cursor: pointer;
    min-width: auto;
}

.oomp-unified-test-suite-metric-item input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    flex: none;
    appearance: checkbox;
    -webkit-appearance: checkbox;
    border-radius: 3px;
}

.oomp-unified-test-suite-metric-item input[type="checkbox"]:checked {
    background: var(--interactive-accent);
    border-color: var(--interactive-accent);
}

.oomp-unified-test-suite-metric-item input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: -1px;
    left: 2px;
    color: var(--text-on-accent);
    font-size: 12px;
    font-weight: bold;
}

.oomp-unified-test-suite-metric-description {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-left: 1.25rem;
}

/* Quick Selection */
.oomp-unified-test-suite-quick-select {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.oomp-unified-test-suite-quick-btn {
    padding: 0.375rem 0.75rem;
    background: var(--interactive-normal);
    color: var(--text-normal);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.1s ease;
}

.oomp-unified-test-suite-quick-btn:hover {
    background: var(--interactive-hover);
}

/* Dialog Actions */
.oomp-unified-test-suite-dialog-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--background-modifier-border);
}

.oomp-unified-test-suite-preview-btn {
    padding: 0.5rem 1rem;
    background: var(--interactive-normal);
    color: var(--text-normal);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.1s ease;
}

.oomp-unified-test-suite-preview-btn:hover {
    background: var(--interactive-hover);
}

/* Collapsible Sections */
.unified-test-suite-collapsible-section {
    margin: 1rem 0;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: var(--background-secondary);
}

.unified-test-suite-collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    cursor: pointer;
    background: var(--background-secondary);
    border-radius: 6px 6px 0 0;
    transition: background 0.1s ease;
}

.unified-test-suite-collapsible-header:hover {
    background: var(--background-modifier-hover);
}

.unified-test-suite-collapsible-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-normal);
}

.unified-test-suite-toggle {
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.unified-test-suite-collapsible-content {
    padding: 1rem;
    border-top: 1px solid var(--background-modifier-border);
    background: var(--background-primary);
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .oomp-unified-test-suite-custom-dialog {
        width: 95vw;
        padding: 1rem;
    }
    
    .oomp-unified-test-suite-setting-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .oomp-unified-test-suite-setting-item label {
        min-width: auto;
    }
    
    .oomp-unified-test-suite-metrics-container {
        grid-template-columns: 1fr;
    }
    
    .oomp-unified-test-suite-dialog-buttons {
        flex-direction: column;
    }
}

/* Responsive Design */
@media screen and (max-width: var(--oom-breakpoint-tablet)) {
    .unified-test-suite-container {
        flex-direction: column;
    }

    .unified-test-suite-sidebar {
        width: 100%;
        min-width: 100%;
        max-height: 200px;
        padding: var(--oom-spacing-sm);
        border-bottom: 1px solid var(--background-modifier-border);
    }

    .unified-test-suite-tab-nav-item {
        padding: var(--oom-spacing-sm);
        border-left: none;
        border-bottom: 2px solid transparent;
    }

    .unified-test-suite-dashboard-stats {
        flex-direction: column;
    }

    .unified-test-suite-quick-test-button {
        display: block;
        margin-right: 0;
        margin-bottom: var(--oom-spacing-sm);
    }
}

@media screen and (max-width: var(--oom-breakpoint-mobile)) {
    .unified-test-suite-modal {
        padding: var(--oom-spacing-xs);
    }

    .unified-test-suite-content {
        padding: 0 var(--oom-spacing-sm);
    }

    .unified-test-suite-action-button {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: var(--oom-spacing-sm);
    }

    .unified-test-suite-item-actions {
        flex-direction: column;
    }

    .unified-test-suite-utility-section {
        padding: var(--oom-spacing-sm);
    }

    .unified-test-suite-result-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =============================================================================
   TEST TEXTAREA UTILITIES - Replaces inline style height/width assignments
   ============================================================================= */

/* Large textarea for test modals - replaces style.height = '300px'; style.width = '100%' */
.oom-test-textarea-large {
    height: 300px !important;
    width: 100% !important;
}

/* Medium textarea for test modals - replaces style.height = '150px'; style.width = '100%' */
.oom-test-textarea-medium {
    height: 150px !important;
    width: 100% !important;
}

/* =============================================================================
   WEB WORKER TEST MODAL STYLES
   Used by src/workers/ui/WebWorkerTestModal.ts
   ============================================================================= */

/* Test controls container */
.test-controls {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Test result container */
.test-result {
    margin: 10px 0;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--background-modifier-border);
}

.test-result.passed {
    background-color: var(--color-green);
    color: var(--text-on-accent);
}

.test-result.failed {
    background-color: var(--color-red);
    color: var(--text-on-accent);
}

.test-result h4 {
    margin: 0 0 5px 0;
}

/* Test details text */
.test-details {
    font-size: 0.9em;
    margin: 5px 0;
}

/* Test error display */
.test-error {
    font-family: monospace;
    background-color: rgba(0,0,0,0.1);
    padding: 5px;
    border-radius: 2px;
    margin-top: 5px;
}

/* Test summary container */
.test-summary {
    margin: 20px 0;
    padding: 15px;
    background-color: var(--background-secondary);
    border-radius: 6px;
} 

/* =============================================================================
   COMPONENT: METRICS-CHARTS (29.6 KB)
   ============================================================================= */
/* =============================================================================
   OneiroMetrics Charts & Visualization Component
   Complete chart system including tabs, heatmaps, Chart.js integration, and metrics visualization
   ============================================================================= */

/* =============================================================================
   ENHANCED CHART TOOLBAR SYSTEM
   ============================================================================= */

.oom-chart-toolbar {
    display: flex;
    min-height: 40px;
    margin-bottom: 12px;
    padding: 8px 12px;
    align-items: center;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    justify-content: space-between;
    background: var(--background-secondary);
}

.oom-chart-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    /* NO VISUAL STYLING - Let theme handle */
}

.oom-chart-content {
    flex: 1;
}

/* Statistics Tab Specific - No title in toolbar, just export button */
.oom-chart-container:has(.oom-chart-content table) .oom-chart-toolbar {
    justify-content: flex-end;
}

/* =============================================================================
   ENHANCED HEATMAP CONTROLS
   ============================================================================= */

.oom-heatmap-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 8px 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    background: var(--background-secondary);
}

.oom-heatmap-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-normal);
    white-space: nowrap;
}

.oom-heatmap-selector {
    flex: 1;
    min-width: 150px;
    padding: 6px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    font-size: 13px;
    background: var(--background-primary);
    color: var(--text-normal);
    cursor: pointer;
    transition: all 0.2s ease;
}

.oom-heatmap-selector:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
    border-color: var(--interactive-accent);
}

.oom-heatmap-selector:hover {
    background: var(--background-modifier-hover);
    border-color: var(--background-modifier-border-hover);
}

.oom-heatmap-calendar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.oom-metric-selector {
    flex: 1;
    min-width: 200px;
    padding: 6px 10px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    font-size: 13px;
    /* NO VISUAL STYLING - Let theme handle */
    background: var(--background-primary);
}

.oom-metric-selector:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
    border-color: var(--interactive-accent);
}

/* =============================================================================
   EXPORT ERROR NOTIFICATIONS SYSTEM
   ============================================================================= */

.oom-export-error {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    max-width: 400px;
    animation: slideInFromRight 0.3s ease-out;
}

.oom-export-error-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--color-red);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* NO VISUAL STYLING - Let theme handle */
    background: var(--background-primary);
}

.oom-export-error-icon {
    flex-shrink: 0;
    font-size: 16px;
}

.oom-export-error-message {
    flex: 1;
    line-height: 1.4;
    font-size: 13px;
}

.oom-export-error-close {
    display: flex;
    height: 20px;
    width: 20px;
    padding: 0;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    /* NO VISUAL STYLING - Let theme handle */
    background: none;
}

.oom-export-error-close:hover {
    /* NO VISUAL STYLING - Let theme handle */
    background: var(--background-modifier-hover);
}

/* Success notification variant */
.oom-export-success .oom-export-error-content {
    border-color: var(--color-green);
    /* NO VISUAL STYLING - Let theme handle */
}

/* Animation for error notifications */
@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* =============================================================================
   INSIGHTS TAB ANALYTICS SYSTEM
   ============================================================================= */

.oom-insights-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.oom-insights-section {
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.oom-insights-section:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.oom-insights-header {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    /* NO VISUAL STYLING - Let theme handle */
    border-bottom: 2px solid var(--background-modifier-border);
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.oom-insight-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--background-modifier-border-hover);
    gap: 12px;
}

.oom-insight-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.oom-insight-label {
    font-weight: 500;
    /* NO VISUAL STYLING - Let theme handle */
    flex: 1;
    font-size: 14px;
}

.oom-insight-value {
    max-width: 60%;
    font-weight: 600;
    text-align: right;
    font-size: 14px;
    word-wrap: break-word;
    /* NO VISUAL STYLING - Let theme handle */
}

/* Trend indicators */
.oom-trend-positive {
    color: var(--color-green);
}

.oom-trend-negative {
    color: var(--color-red);
}

.oom-trend-stable {
    /* NO VISUAL STYLING - Let theme handle */
}

/* Outlier indicators */
.oom-outlier-high {
    font-weight: 700;
    color: var(--color-orange);
}

.oom-outlier-low {
    font-weight: 700;
    color: var(--color-blue);
}

/* Correlation strength indicators */
.oom-correlation-strong {
    font-weight: 700;
    color: var(--color-purple);
}

.oom-correlation-moderate {
    font-weight: 600;
    color: var(--color-cyan);
}

/* Empty and error states */
.oom-insights-empty,
.oom-insights-error {
    padding: 40px 20px;
    border-radius: 8px;
    border: 2px dashed var(--background-modifier-border);
    text-align: center;
    font-style: italic;
    /* NO VISUAL STYLING - Let theme handle */
    background: var(--background-secondary);
}

.oom-insights-error {
    border-color: var(--color-red);
    color: var(--color-red);
    background: rgba(var(--color-red-rgb), 0.1);
}

/* =============================================================================
   ADVANCED CHART CONTROLS WITH NESTING AND :has()
   ============================================================================= */

.oom-chart-container {
    /* Chart type selector */
    .oom-chart-type-selector {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 12px;

        .oom-chart-selector-label {
            white-space: nowrap;
            font-size: 12px;
            font-weight: 500;
            /* NO VISUAL STYLING - Let theme handle */
        }

        .oom-chart-selector {
            min-width: 120px;
            padding: 4px 8px;
            border: 1px solid var(--background-modifier-border);
            border-radius: 4px;
            font-size: 12px;
            /* NO VISUAL STYLING - Let theme handle */
            background: var(--background-primary);

            &:hover {
                border-color: var(--background-modifier-border-hover);
                transform: translateY(-1px);
                transition: transform 0.2s ease;
            }

            &:focus {
                outline: none;
                border-color: var(--interactive-accent);
                box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2);
            }
        }
    }

    /* Smoothing toggle */
    .oom-chart-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0 12px;

        input[type="checkbox"] {
            width: 14px;
            height: 14px;
            margin: 0;
            accent-color: var(--interactive-accent);
        }

        label {
            margin: 0;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            /* NO VISUAL STYLING - Let theme handle */
        }

        &:hover label {
            /* NO VISUAL STYLING - Let theme handle */
        }
    }

    /* Correlation threshold controls */
    .oom-correlation-threshold {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 12px;

        .oom-threshold-label {
            white-space: nowrap;
            font-size: 12px;
            font-weight: 500;
            /* NO VISUAL STYLING - Let theme handle */
        }

        .oom-threshold-slider {
            width: 80px;
            height: 4px;
            border-radius: 2px;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            background: var(--background-modifier-border);

            &:hover {
                transform: translateY(-1px);
                transition: transform 0.2s ease;
            }

            &::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                cursor: pointer;
                border: 2px solid var(--background-primary);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
                background: var(--interactive-accent);
            }
        }

        .oom-threshold-value {
            min-width: 24px;
            padding: 2px 6px;
            border-radius: 3px;
            border: 1px solid var(--background-modifier-border);
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            /* NO VISUAL STYLING - Let theme handle */
            background: var(--background-modifier-form-field);
        }
    }

    /* Chart toolbar */
    .oom-chart-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
        min-height: 48px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--background-modifier-border);
        background: var(--background-secondary);

        .oom-chart-title {
            flex-shrink: 0;
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            /* NO VISUAL STYLING - Let theme handle */
        }

        .oom-chart-controls {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }
    }

    /* Enhanced chart canvas */
    .oom-chart-canvas {
        min-height: 400px;
        max-height: 600px;
    }

    /* Loading state */
    &.oom-chart-container--loading {
        .oom-chart-canvas {
            opacity: 0.6;
            pointer-events: none;
        }

        &::after {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 10;
            padding: 8px 16px;
            content: "Loading chart...";
            transform: translate(-50%, -50%);
            border-radius: 4px;
            border: 1px solid var(--background-modifier-border);
            font-size: 12px;
            /* NO VISUAL STYLING - Let theme handle */
            background: var(--background-primary);
        }
    }

    /* Special styling when container has correlation controls */
    &:has(.oom-correlation-threshold) {
        .oom-chart-toolbar {
            background: linear-gradient(135deg, var(--background-secondary), var(--background-modifier-hover));
        }
    }

    /* Box plot info styling when box plot is present */
    &:has(.oom-chart-selector option[value="box"]:checked) {
        .oom-box-plot-info {
            position: absolute;
            top: 8px;
            right: 8px;
            padding: 6px 8px;
            border: 1px solid var(--background-modifier-border);
            border-radius: 4px;
            pointer-events: none;
            font-size: 10px;
            /* NO VISUAL STYLING - Let theme handle */
            background: var(--background-primary);
        }
    }
}

/* =============================================================================
   CORRELATION MATRIX & TREND DECOMPOSITION
   ============================================================================= */

.oom-correlation-matrix {
    position: relative;

    .oom-correlation-legend {
        display: flex;
        gap: 12px;
        margin: 8px 0;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        /* NO VISUAL STYLING - Let theme handle */

        .oom-correlation-legend-item {
            display: flex;
            align-items: center;
            gap: 4px;

            .oom-correlation-legend-color {
                width: 12px;
                height: 12px;
                border-radius: 2px;

                &.oom-correlation-legend-positive {
                    background: rgba(0, 100, 255, 0.7);
                }

                &.oom-correlation-legend-negative {
                    background: rgba(255, 100, 0, 0.7);
                }
            }
        }
    }
}

.oom-trend-decomposition {
    .oom-trend-decomposition-legend {
        display: flex;
        gap: 12px;
        margin: 8px 0;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        /* NO VISUAL STYLING - Let theme handle */

        .oom-trend-decomposition-item {
            display: flex;
            align-items: center;
            gap: 4px;

            .oom-trend-line-original {
                width: 16px;
                height: 2px;
                background: var(--color-blue);
            }

            .oom-trend-line-trend {
                width: 16px;
                height: 2px;
                background: var(--color-green);
            }

            .oom-trend-line-residual {
                width: 16px;
                height: 2px;
                background: var(--color-red);
            }
        }
    }
}

/* Chart transition animation */
.oom-chart-transition {
    transition: all 0.3s ease;
}

/* =============================================================================
   TAB-BASED CHART SYSTEM
   ============================================================================= */

.oom-metrics-chart-tabs-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    /* NO VISUAL STYLING - Let theme handle container styling */
}

.oom-metrics-chart-tabs-nav {
    display: flex;
    flex-shrink: 0; /* Prevent navigation from shrinking */
    /* NO VISUAL STYLING - Let theme handle navigation styling */
}

.oom-metrics-chart-tab {
    position: relative;
    margin-right: var(--oom-spacing-xs);
    padding: var(--oom-spacing-sm) var(--oom-spacing-md);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: all 0.2s ease;
    font-weight: 500;
    color: var(--text-muted);
}

.oom-metrics-chart-tab:hover {
    color: var(--text-normal);
    background-color: var(--background-modifier-hover);
}

.oom-metrics-chart-tab--active {
    font-weight: 600;
    color: var(--text-accent);
    background-color: var(--background-primary);
}

.oom-metrics-chart-tab--active:hover {
    color: var(--text-accent);
    background-color: var(--background-primary);
}

.oom-metrics-chart-tabs-content {
    flex: 1;
    overflow: auto;
    min-height: 0; /* Important for flex child with overflow */
    border-right: 1px solid var(--background-modifier-border);
    border-left: 1px solid var(--background-modifier-border);
    border-bottom: 1px solid var(--background-modifier-border);
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    /* NO VISUAL STYLING - Let theme handle content styling */
}

/* =============================================================================
   CHART.JS INTEGRATION & CANVAS MANAGEMENT
   ============================================================================= */

.oom-chart-container {
    width: 100%;
    padding: var(--oom-spacing-md);
    height: auto;
    max-height: 500px;
    display: flex;
    flex-direction: column;
    /* NO VISUAL STYLING - Let theme handle chart container styling */
}

.oom-chart-title {
    margin: 0 0 var(--oom-spacing-md) 0;
    flex-shrink: 0; /* Prevent title from shrinking */
    font-size: var(--font-ui-medium);
    font-weight: 600;
    color: var(--text-normal);
}

.oom-chart-canvas {
    flex: 1;
    width: 100% !important; /* Override Chart.js default */
    height: 400px !important; /* Override Chart.js default */
    max-width: 100%;
    max-height: 400px;
    min-height: 300px;
    /* NO VISUAL STYLING - Chart.js handles canvas styling */
}

.oom-chart-placeholder {
    padding: var(--oom-spacing-xl);
    text-align: center;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--background-secondary);
    border-radius: var(--oom-radius-lg);
    border: 1px dashed var(--background-modifier-border);
    color: var(--text-muted);
}

.oom-chart-placeholder h3 {
    margin: 0 0 var(--oom-spacing-sm) 0;
    font-size: var(--font-ui-medium);
    color: var(--text-normal);
}

.oom-chart-placeholder p {
    margin: 0;
    font-size: var(--font-ui-small);
    color: var(--text-muted);
}

.oom-chart-placeholder-actions {
    margin: var(--oom-spacing-lg) 0;
}

.oom-chart-placeholder-hub-btn {
    background: var(--color-accent);
    color: var(--text-on-accent);
    border: none;
    padding: var(--oom-spacing-sm) var(--oom-spacing-lg);
    border-radius: var(--radius-m);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-ui-small);
    transition: all var(--anim-duration-fast) var(--anim-motion-smooth);
    display: inline-flex;
    align-items: center;
    gap: var(--oom-spacing-xs);
}

.oom-chart-placeholder-hub-btn:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px var(--background-modifier-box-shadow);
}

.oom-chart-placeholder-hub-btn:active {
    transform: translateY(0);
}

/* Fix for Chart.js responsive behavior */
.oom-chart-container canvas {
    position: relative !important;
}

/* Animation prevention during initial render */
.oom-chart-container--loading .oom-chart-canvas {
    animation: none !important;
    transition: none !important;
}

/* =============================================================================
   HEATMAP VISUALIZATION SYSTEM
   ============================================================================= */

.oom-heatmap-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

.oom-heatmap-placeholder {
    text-align: center;
    padding: var(--oom-spacing-xl);
    color: var(--text-muted);
    font-style: italic;
    background: var(--background-modifier-hover);
    border-radius: 6px;
    margin: var(--oom-spacing-md) 0;
}

/* =============================================================================
   HEATMAP LEGEND SYSTEM
   ============================================================================= */

.oom-heatmap-legend {
    display: flex;
    flex-direction: column;
    gap: var(--oom-spacing-sm);
    margin-bottom: var(--oom-spacing-xl);
    padding: var(--oom-spacing-md);
    background: var(--background-secondary);
    border-radius: 6px;
    border: 1px solid var(--background-modifier-border);
}

.oom-heatmap-legend-title {
    font-weight: 600;
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
    text-align: center;
}

.oom-heatmap-legend-scale {
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-sm);
    justify-content: center;
}

.oom-heatmap-legend-min,
.oom-heatmap-legend-max {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
    font-weight: 500;
    min-width: 40px;
    text-align: center;
}

.oom-heatmap-legend-gradient {
    display: flex;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--background-modifier-border);
    min-width: 120px;
}

.oom-heatmap-legend-color-low {
    flex: 1;
    background: var(--color-green-rgb);
    background: rgba(var(--color-green-rgb), 0.3);
}

.oom-heatmap-legend-color-medium {
    flex: 1;
    background: var(--color-yellow-rgb);
    background: rgba(var(--color-yellow-rgb), 0.6);
}

.oom-heatmap-legend-color-high {
    flex: 1;
    background: var(--color-red-rgb);
    background: rgba(var(--color-red-rgb), 0.8);
}

/* =============================================================================
   HEATMAP MONTHS & GRIDS
   ============================================================================= */

.oom-heatmap-months {
    display: flex;
    flex-direction: column;
    gap: var(--oom-spacing-xl);
}

.oom-heatmap-month {
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--background-primary);
}

.oom-heatmap-month-header {
    background: var(--background-modifier-hover);
    padding: var(--oom-spacing-md);
    font-weight: 600;
    color: var(--text-normal);
    text-align: center;
    border-bottom: 1px solid var(--background-modifier-border);
    font-size: var(--font-ui-medium);
}

.oom-heatmap-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    padding: var(--oom-spacing-sm);
    background: var(--background-modifier-border);
}

.oom-heatmap-day-label {
    background: var(--background-secondary);
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    font-weight: 600;
    text-align: center;
    padding: var(--oom-spacing-xs);
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =============================================================================
   HEATMAP DAY CELLS & STATES
   ============================================================================= */

.oom-heatmap-day {
    background: var(--background-primary);
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-ui-small);
    border-radius: 3px;
    cursor: default;
    position: relative;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.oom-heatmap-day-empty {
    background: var(--background-modifier-hover);
    opacity: 0.3;
}

.oom-heatmap-day-no-data {
    background: var(--background-primary);
    color: var(--text-faint);
    opacity: 0.6;
}

.oom-heatmap-day-no-data:hover {
    opacity: 0.8;
    border-color: var(--background-modifier-border);
}

.oom-heatmap-day-data {
    color: var(--text-on-accent);
    font-weight: 600;
    cursor: pointer;
}

.oom-heatmap-day-data:hover {
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-color: var(--text-accent);
}

/* =============================================================================
   INTENSITY-BASED COLORING SYSTEM
   ============================================================================= */

.oom-heatmap-intensity-low {
    background: rgba(var(--color-green-rgb), 0.4);
    color: var(--text-normal);
}

.oom-heatmap-intensity-medium {
    background: rgba(var(--color-yellow-rgb), 0.7);
    color: var(--text-normal);
}

.oom-heatmap-intensity-high {
    background: rgba(var(--color-red-rgb), 0.8);
    color: var(--text-on-accent);
}

/* Dynamic Intensity Using CSS Custom Properties */
.oom-heatmap-day-data {
    background: rgba(
        calc(var(--color-green-rgb) * (1 - var(--intensity, 0)) + var(--color-red-rgb) * var(--intensity, 0)),
        calc(0.3 + var(--intensity, 0) * 0.5)
    );
}

/* =============================================================================
   PROGRESS BAR SYSTEM
   ============================================================================= */

.oom-progress-bar {
    height: var(--oom-progress-bar-height, 8px);
    background: var(--oom-progress-bar-bg, var(--background-modifier-border));
    border-radius: var(--oom-progress-bar-radius, 4px);
    margin: var(--oom-progress-bar-margin, 1em 0);
    overflow: hidden;
    position: relative;
}

.oom-progress-fill {
    height: 100%;
    background: var(--oom-progress-fill-bg, var(--interactive-accent));
    border-radius: inherit;
    transition: width 0.3s ease;
    min-width: 2px; /* Ensure visibility even at 0% */
}

.oom-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-ui-smaller);
    font-weight: 600;
    color: var(--text-on-accent);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* =============================================================================
   PATTERN VISUALIZATION ELEMENTS
   ============================================================================= */

.oom-pattern-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--oom-spacing-xs);
    padding: var(--oom-spacing-xs);
    border-radius: var(--oom-radius-sm);
    font-size: var(--font-ui-smaller);
    font-weight: 500;
}

.oom-quality-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: var(--font-ui-smaller);
    font-weight: 600;
    color: var(--text-on-accent);
}

.oom-metric-overlay {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--background-primary);
    z-index: 2;
}

.oom-pattern-high-quality { background: var(--color-green); }
.oom-pattern-fragmented { background: var(--color-yellow); }
.oom-pattern-rich-narrative { background: var(--color-blue); }
.oom-pattern-basic-recall { background: var(--color-orange); }

.oom-quality-high { background: var(--color-green); }
.oom-quality-medium { background: var(--color-yellow); }
.oom-quality-low { background: var(--color-red); }

/* =============================================================================
   RESPONSIVE DESIGN
   ============================================================================= */

@media (max-width: 768px) {
    .oom-metrics-chart-tabs-nav {
        flex-wrap: wrap;
        gap: var(--oom-spacing-xs);
    }
    
    .oom-metrics-chart-tab {
        margin-right: 0;
        flex: 1;
        min-width: 80px;
        text-align: center;
    }
    
    .oom-chart-container {
        height: 400px;
    }
    
    .oom-chart-canvas {
        height: 300px !important;
        max-height: 300px;
    }
    
    .oom-chart-placeholder {
        height: 300px;
        padding: var(--oom-spacing-lg);
    }
    
    .oom-chart-placeholder-hub-btn {
        padding: var(--oom-spacing-sm) var(--oom-spacing-md);
        font-size: var(--font-ui-smaller);
    }
    
    .oom-heatmap-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .oom-metric-selector {
        min-width: unset;
    }
    
    .oom-heatmap-day {
        min-height: 28px;
        font-size: var(--font-ui-smaller);
    }
    
    .oom-heatmap-legend-scale {
        flex-direction: column;
        gap: var(--oom-spacing-xs);
    }
    
    .oom-heatmap-legend-gradient {
        min-width: unset;
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }
}

/* =============================================================================
   ACCESSIBILITY & THEME SUPPORT
   ============================================================================= */

/* High Contrast Theme Support */
@media (prefers-contrast: high) {
    .oom-heatmap-day {
        border: 1px solid var(--text-normal);
    }
    
    .oom-heatmap-intensity-low {
        background: var(--color-green);
        color: var(--text-on-accent);
    }
    
    .oom-heatmap-intensity-medium {
        background: var(--color-yellow);
        color: var(--text-normal);
    }
    
    .oom-heatmap-intensity-high {
        background: var(--color-red);
        color: var(--text-on-accent);
    }
    
    .oom-progress-fill {
        border: 1px solid var(--text-normal);
    }
}

/* Dark Theme Adjustments */
.theme-dark .oom-heatmap-legend-color-low {
    background: rgba(var(--color-green-rgb), 0.5);
}

.theme-dark .oom-heatmap-legend-color-medium {
    background: rgba(var(--color-yellow-rgb), 0.7);
}

.theme-dark .oom-heatmap-legend-color-high {
    background: rgba(var(--color-red-rgb), 0.9);
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */

@media print {
    .oom-heatmap-day:hover {
        transform: none;
        box-shadow: none;
    }
    
    .oom-heatmap-container {
        overflow: visible;
    }
    
    .oom-chart-container {
        page-break-inside: avoid;
    }
    
    .oom-progress-bar {
        print-color-adjust: exact;
    }
} 

/* =============================================================================
   COMPONENT: HUB (30.3 KB)
   ============================================================================= */
/* =============================================================================
   OneiroMetrics Hub & Dashboard Component
   ============================================================================= */

/* =============================================================================  
   UTILITY CLASSES - Common helpers
   ============================================================================= */

.oom-hidden {
    display: none !important;
}

/* Table styling classes for analysis results */
.oom-table-header {
    border: 1px solid var(--background-modifier-border);
    padding: 0.5em;
    text-align: left;
}

.oom-table-header--right {
    text-align: right;
}

.oom-table-cell {
    border: 1px solid var(--background-modifier-border);
    padding: 0.5em;
}

.oom-table-cell--right {
    text-align: right;
}

/* Typography utility classes */
.oom-title-italic {
    font-style: italic;
}

/* Modal feedback area styling */
.oom-feedback-area-hidden {
    display: none;
}

/* =============================================================================
   HUB HEADER - Title and Subtitle Layout
   ============================================================================= */

.oom-hub-header-container {
    /* === STRUCTURAL PROPERTIES === */
    margin: .5em 0 .5em .5em;
    padding: 0 0 .5em 0;
    border-bottom: 1px solid #ccc;
    
    /* NO VISUAL STYLING - Let theme handle container styling */
}

.oom-hub-title {
    /* === STRUCTURAL PROPERTIES === */
    margin: 0 0 var(--oom-spacing-xs) 0;
    padding: 0;
    text-align: left;
    font-size: var(--h2-size);
    
    /* NO VISUAL STYLING - Let theme handle title colors */
}

.oom-hub-subtitle {
    /* === STRUCTURAL PROPERTIES === */
    margin: 0;
    padding: 0;
    font-size: var(--font-ui-medium);
    font-weight: var(--font-weight-normal);
    text-align: left;
    line-height: var(--line-height-normal);
    
    /* NO VISUAL STYLING - Let theme handle subtitle colors */
}

/* =============================================================================  
   DASHBOARD SECTIONS - Content Organization
   ============================================================================= */

.oom-dashboard-section {
    /* === STRUCTURAL PROPERTIES === */
    margin-bottom: var(--oom-spacing-lg);
    padding: var(--oom-spacing-md);
    border-radius: var(--oom-radius-md);
    
    /* NO VISUAL STYLING - Let theme handle section styling */
    
    /* === NESTED HEADING === */
    h3 {
        font-size: var(--font-ui-medium);
        font-weight: var(--font-semibold);
        /* NO VISUAL STYLING - Let theme handle */
    }

    h4 {
        margin-top: 0;
        margin-bottom: var(--oom-spacing-sm);
        padding-bottom: var(--oom-spacing-xs);
        font-size: var(--font-ui-large);
        font-weight: 600;
        
        /* NO VISUAL STYLING - Let theme handle heading borders and colors */
    }
}

.oom-template-import-export h3,
.oom-template-status h3,
.oom-analysis-targets h3,
.oom-metrics-tabs-content h3 {
    font-size: var(--font-ui-medium);
    font-weight: var(--font-semibold);
    /* NO VISUAL STYLING - Let theme handle */
}

.oom-suggestions-hidden .suggestion {
    display: none;
}

/* =============================================================================
   TEMPLATE WIZARD NAVIGATION SYSTEM
   ============================================================================= */

.oom-template-wizard-navigation {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    margin-top: var(--oom-spacing-lg);
    padding-top: var(--oom-spacing-md);
    justify-content: space-between;
    align-items: center;
    
    /* NO VISUAL STYLING - Let theme handle navigation borders */
    
    .oom-button-container {
        display: flex;
        gap: var(--oom-spacing-sm);
    }
}

.oom-step-indicator {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-xs);
    font-size: var(--font-ui-small);
    
    /* NO VISUAL STYLING - Let theme handle step indicator colors */
}

/* =============================================================================
   COMPREHENSIVE TEMPLATE MANAGEMENT SYSTEM
   ============================================================================= */

.oom-journal-section {
    /* Template management container */
    & .oom-setting {
        margin-top: 1em;
    }
    
    & .oom-template-import-export {
        margin-top: 1.5em;
    }
    
    & .oom-template-status {
        margin-top: 1em;
    }
    
    /* Template List Container */
    & .oom-templates-list {
        margin-top: 0.5em;
        border: 1px solid var(--background-modifier-border);
        border-radius: 4px;
    }
    
    /* Import/Export Button Container */
    & .oom-import-export-buttons {
        display: flex;
        gap: 0.75em;
        margin-top: 0.5em;
    }
    
    /* Wizard Navigation Button Container */
    & .oom-wizard-navigation-buttons {
        display: flex;
        gap: 0.5em;
        flex-wrap: wrap;
    }
    
    /* Right-aligned Button Container */
    & .oom-button-container-right {
        text-align: right;
        margin-top: 1em;
    }
    
    /* Modal Dialog Button Container */
    & .oom-modal-button-container {
        margin-top: 1.5em;
        display: flex;
        gap: 0.75em;
        justify-content: flex-end;
    }
    
    /* Large Modal Dialog Button Container */
    & .oom-button-container-large {
        text-align: right;
        margin-top: 2em;
    }
    
    /* Template Row - Individual Template Items */
    & .oom-template-row {
        display: flex;
        padding: 0.75em 1em;
        border-bottom: 1px solid var(--background-modifier-border);
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        transition: background-color 0.15s;
    }
    
    & .oom-template-row:hover {
        background-color: var(--background-modifier-hover);
    }
    
    & .oom-template-row.oom-template-expanded {
        background-color: var(--background-modifier-hover);
    }
    
    /* Template Information Display */
    & .oom-template-info {
        & .oom-template-details {
            font-size: 0.9em;
            /* NO VISUAL STYLING - Let theme handle */
        }
    }
    
    /* Template Action Buttons Container */
    & .oom-template-actions {
        display: flex;
        gap: 0.5em;
    }
    
    /* Template Preview Container */
    & .oom-template-preview-container {
        display: block;
        margin-bottom: 0.5em;
        padding: 0 1em;
        border-top: 1px solid var(--background-modifier-border);
        background-color: var(--background-secondary);
        
        & .oom-preview-section {
            margin-bottom: 0.75em;
            
            & .oom-template-preview-code {
                max-height: 200px;
                padding: 0.75em;
                overflow-y: auto;
                white-space: pre-wrap;
                border: 1px solid var(--background-modifier-border);
                border-radius: 4px;
                font-size: 0.85em;
                font-family: var(--font-monospace);
                /* NO VISUAL STYLING - Let theme handle */
                background-color: var(--code-background);
            }
        }
    }
}

.oom-wizard-footer .oom-button-container {
    margin-top: 0;
}

/* =============================================================================
   TEMPLATE ACTION BUTTONS - Icon Button System
   ============================================================================= */

.oom-template-action-btn.oom-icon-button {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    min-width: 32px;
    padding: 0.4em;
    border: none;
    border-radius: 3px;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    /* NO VISUAL STYLING - Let theme handle */
    background-color: var(--interactive-normal);
}

.oom-template-action-btn.oom-icon-button:hover {
    transform: translateY(-1px);
    /* NO VISUAL STYLING - Let theme handle */
    background-color: var(--interactive-hover);
}

.oom-template-action-btn.oom-icon-button:focus {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

.oom-template-action-btn.oom-icon-button:active {
    transform: translateY(0);
    background-color: var(--interactive-active);
}

/* Delete button specific styling */
.oom-template-action-btn.oom-template-delete-btn.oom-icon-button {
    /* NO VISUAL STYLING - Let theme handle */
    background-color: var(--color-red);
}

.oom-template-action-btn.oom-template-delete-btn.oom-icon-button:hover {
    opacity: 0.9;
    background-color: var(--color-red-hover, var(--color-red));
}

/* Icon sizing within buttons */
.oom-template-action-btn.oom-icon-button svg {
    height: 16px;
    width: 16px;
    stroke-width: 2;
}

/* Template actions container adjustment */
.oom-template-actions {
    display: flex;
    gap: 0.5em;
    align-items: center;
}

/* =============================================================================
   JOURNAL MANAGER SIDEBAR NAVIGATION
   ============================================================================= */

.oom-journal-manager-sidebar {
    /* === STRUCTURAL PROPERTIES === */
    flex-shrink: 0;
    width: var(--oom-sidebar-width);
    padding: var(--oom-spacing-md);
    overflow-y: auto;
    
    /* NO VISUAL STYLING - Let theme handle sidebar styling */
    
    /* === SCROLLBAR STYLING === */
    scrollbar-width: thin;
    
    &::-webkit-scrollbar {
        width: 6px;
    }
    
    &::-webkit-scrollbar-track {
        /* NO VISUAL STYLING - Let theme handle scrollbar track */
    }
    
    &::-webkit-scrollbar-thumb {
        border-radius: var(--oom-radius-sm);
        
        /* NO VISUAL STYLING - Let theme handle scrollbar thumb */
        
        &:hover {
            /* Let theme handle scrollbar hover */
        }
    }
}

/* =============================================================================
   RESPONSIVE DESIGN SYSTEM - Mobile First
   ============================================================================= */

/* Mobile Responsiveness for Template Action Buttons */
@media screen and (max-width: 768px) {
    .oom-template-action-btn.oom-icon-button {
        min-width: 28px;
        min-height: 28px;
        padding: 0.3em;
    }
    
    .oom-template-action-btn.oom-icon-button svg {
        width: 14px;
        height: 14px;
    }
}

/* Tablet Layout Adjustments */
@media screen and (max-width: var(--oom-breakpoint-tablet)) {
    .oom-actions-grid {
        /* === TABLET GRID ADJUSTMENTS === */
        grid-template-columns: repeat(2, 1fr);
        gap: var(--oom-spacing-xs);
    }
    
    .oom-action-button {
        /* === TABLET BUTTON ADJUSTMENTS === */
        min-height: 60px;
        padding: var(--oom-spacing-sm) var(--oom-spacing-xs);
    }
    
    .oom-action-icon {
        height: 20px;
        font-size: var(--font-ui-large);
        margin-bottom: var(--oom-spacing-xxs);
    }
    
    .oom-dashboard-section {
        padding: var(--oom-spacing-sm);
        margin-bottom: var(--oom-spacing-md);
    }
    
    .oom-journal-manager-sidebar,
    .oom-journal-structure-sidebar {
        width: 100%;
        max-height: 200px;
        padding: var(--oom-spacing-sm);
    }
    
    .oom-template-wizard-navigation {
        flex-direction: column;
        gap: var(--oom-spacing-sm);
        
        .oom-button-container {
            width: 100%;
            justify-content: space-between;
        }
    }
}

/* Mobile Layout Optimizations */
@media screen and (max-width: var(--oom-breakpoint-mobile)) {
    .oom-nav-item {
        /* === MOBILE NAV ADJUSTMENTS === */
        padding: var(--oom-spacing-xs);
        margin-bottom: var(--oom-spacing-xxs);
        
        .oom-nav-icon {
            width: 16px;
            height: 16px;
            
            svg {
                width: 14px;
                height: 14px;
            }
        }
        
        .oom-nav-label {
            font-size: var(--font-ui-small);
        }
    }
    
    .oom-actions-grid {
        /* === MOBILE SINGLE COLUMN === */
        grid-template-columns: 1fr;
    }
    
    .oom-action-button {
        /* === MOBILE COMPACT BUTTONS === */
        flex-direction: row;
        min-height: 40px;
        text-align: left;
        
        .oom-action-icon {
            margin-bottom: 0;
            margin-right: var(--oom-spacing-xs);
            height: 16px;
            font-size: var(--font-ui-medium);
        }
    }
    
    .oom-collapsible-header {
        padding: var(--oom-spacing-xs);
        
        h3 {
            font-size: var(--font-ui-medium);
            /* NO VISUAL STYLING - Let theme handle */
        }
    }
    
    .oom-dashboard-section {
        padding: var(--oom-spacing-xs);
        margin-bottom: var(--oom-spacing-sm);
        
        h4 {
            font-size: var(--font-ui-medium);
            margin-bottom: var(--oom-spacing-xs);
            /* NO VISUAL STYLING - Let theme handle */
        }
    }
}

/* =============================================================================
   ACCESSIBILITY & REDUCED MOTION SUPPORT
   ============================================================================= */

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .oom-template-action-btn.oom-icon-button {
        transition: none;
    }
    
    .oom-template-action-btn.oom-icon-button:hover {
        transform: none;
    }
    
    .oom-nav-item,
    .oom-action-button,
    .oom-collapsible-toggle {
        /* === REDUCED MOTION === */
        transition: none;
    }
    
    .oom-action-button:hover {
        transform: none;
    }
    
    .oom-action-button:active {
        transform: none;
    }
}

/* High Contrast Mode Support */
@media (forced-colors: active) {
    .oom-template-action-btn.oom-icon-button {
        border: 1px solid ButtonText;
    }
    
    .oom-template-action-btn.oom-template-delete-btn.oom-icon-button {
        border-color: Highlight;
    }
    
    .oom-nav-item {
        /* === HIGH CONTRAST NAVIGATION === */
        border: 1px solid ButtonText;
        
        &.active {
            color: HighlightText;
            background-color: Highlight;
            border-left-color: Highlight;
            
            .oom-nav-icon {
                color: HighlightText;
            }
        }
    }
    
    .oom-action-button {
        border: 1px solid ButtonText;
        
        &:hover {
            background-color: Highlight;
            color: HighlightText;
        }
    }
    
    .oom-collapsible-section {
        border: 1px solid ButtonText;
    }
    
    .oom-dashboard-section {
        border: 1px solid ButtonText;
    }
}

/* =============================================================================
   PRINT STYLES - Clean Print Layout
   ============================================================================= */

@media print {
    .oom-journal-manager-sidebar,
    .oom-journal-structure-sidebar {
        /* === HIDE SIDEBARS IN PRINT === */
        display: none;
    }
    
    .oom-template-wizard-navigation {
        /* === HIDE NAVIGATION IN PRINT === */
        display: none;
    }
    
    .oom-quick-actions {
        /* === HIDE ACTIONS IN PRINT === */
        display: none;
    }
    
    .oom-dashboard-section {
        /* === PRINT SECTION STYLING === */
        page-break-inside: avoid;
        margin-bottom: var(--oom-spacing-md);
        
        h4 {
            page-break-after: avoid;
        }
    }
}

/* =============================================================================
   DASHBOARD GRID SYSTEM INTEGRATION
   ============================================================================= */

.oom-dashboard-info-grid {
    display: grid;
    gap: var(--oom-spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    
    .oom-dashboard-section {
        margin-bottom: 0; /* Override default margin in grid context */
    }
}

/* Action Grid System for Dashboard */
.oom-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--oom-spacing-sm);
    margin: var(--oom-spacing-md) 0;
}

.oom-action-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 80px;
    padding: var(--oom-spacing-sm);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    /* NO VISUAL STYLING - Let theme handle */
    background: var(--background-primary);
    
    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background: var(--background-modifier-hover);
    }
    
    &:active {
        transform: translateY(0);
    }
}

.oom-action-icon {
    height: 24px;
    font-size: var(--font-ui-large);
    margin-bottom: var(--oom-spacing-xs);
    /* NO VISUAL STYLING - Let theme handle */
}

/* =============================================================================
   NAVIGATION ITEM INTEGRATION 
   ============================================================================= */

.oom-nav-item {
    display: flex;
    align-items: center;
    padding: var(--oom-spacing-sm);
    margin-bottom: var(--oom-spacing-xs);
    border-radius: var(--oom-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    /* NO VISUAL STYLING - Let theme handle */
    
    &:hover {
        background: var(--background-modifier-hover);
    }
    
    &.active {
        /* NO VISUAL STYLING - Let theme handle active states */
        background: var(--background-modifier-active-hover);
        border-left: 3px solid var(--interactive-accent);
        
        .oom-nav-icon {
            /* NO VISUAL STYLING - Let theme handle active icon color */
        }
    }
}

.oom-nav-icon {
    width: 20px;
    height: 20px;
    margin-right: var(--oom-spacing-sm);
    /* NO VISUAL STYLING - Let theme handle icon colors */
    
    svg {
        width: 100%;
        height: 100%;
    }
}

.oom-nav-label {
    font-size: var(--font-ui-medium);
    font-weight: 500;
    /* NO VISUAL STYLING - Let theme handle text color */
}

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

.oom-collapsible-section {
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-md);
    margin-bottom: var(--oom-spacing-md);
    overflow: hidden;
}

.oom-collapsible-header {
    display: flex;
    align-items: center;
    padding: var(--oom-spacing-sm) var(--oom-spacing-md);
    cursor: pointer;
    transition: background-color 0.2s ease;
    background: var(--background-secondary);
    
    &:hover {
        background: var(--background-modifier-hover);
    }
    
    h3 {
        margin: 0;
        font-size: var(--font-ui-medium);
        font-weight: var(--font-semibold);
        /* NO VISUAL STYLING - Let theme handle */
    }
}

.oom-collapsible-toggle {
    margin-left: auto;
    transition: transform 0.2s ease;
    /* NO VISUAL STYLING - Let theme handle */
    
    &.oom-expanded {
        transform: rotate(180deg);
    }
}

.oom-collapsible-content {
    padding: var(--oom-spacing-md);
    background: var(--background-primary);
    border-top: 1px solid var(--background-modifier-border);
}

.oneirometrics-settings .oom-collapsible-content {
    border-top: none;
}

.oneirometrics-settings .oom-collapsible-section .setting-item-heading {
    padding: 0 0 .5em .5em;
}

/* =============================================================================
   QUICK ACTIONS INTEGRATION
   ============================================================================= */

.oom-quick-actions {
    display: flex;
    gap: var(--oom-spacing-sm);
    margin: var(--oom-spacing-md) 0;
    flex-wrap: wrap;
}

.oom-quick-action-btn {
    padding: var(--oom-spacing-xs) var(--oom-spacing-sm);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--font-ui-small);
    text-decoration: none;
    /* NO VISUAL STYLING - Let theme handle */
    background: var(--background-primary);
    
    &:hover {
        background: var(--background-modifier-hover);
        transform: translateY(-1px);
    }
    
    &:active {
        transform: translateY(0);
    }
}

/* ========================================
   HUBMODAL TEMPLATE SYSTEM STYLING
   ======================================== */

/* Callout Box Styling */
.oom-callout-box {
    width: 100%;
    min-height: 90px;
    font-family: var(--font-monospace, monospace);
    font-size: 0.93em;
    background: var(--background-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 1em;
    padding: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    user-select: all;
}

/* Copy Button Styling */
.oom-copy-button {
    margin-bottom: 1.5em;
}

/* Templater Configuration Section */
.oom-templater-config-section {
    margin-bottom: 1.5em;
    padding: 1em;
    background-color: var(--background-secondary);
    border-radius: 4px;
    border: 1px solid var(--background-modifier-border);
}

.oom-templater-status {
    margin-bottom: 1em;
}

/* Status Element Styling */
.oom-status-success {
    color: var(--text-success);
    font-weight: 500;
}

.oom-status-warning {
    color: var(--text-warning);
    font-style: italic;
}

.oom-status-error {
    color: var(--text-error);
    font-weight: 500;
}

.oom-templater-folder-info,
.oom-templater-count-info {
    color: var(--text-muted);
    font-size: 0.9em;
    margin: 0.25em 0;
}

.oom-templater-help-text {
    color: var(--text-muted);
    font-size: 0.9em;
}

/* Button Container */
.oom-template-button-container {
    flex-wrap: wrap;
}

/* Template Buttons */
.oom-template-settings-button {
    padding: 0.5em 1em;
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}

.oom-template-settings-button:hover {
    background-color: var(--interactive-accent-hover);
}

.oom-templater-debug-button {
    padding: 0.5em 1em;
    background-color: var(--background-modifier-border);
    color: var(--text-normal);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}

.oom-templater-debug-button:hover {
    background-color: var(--background-modifier-hover);
}

/* Template Wizard Direct Input */
.oom-direct-input-container {
    margin: 1em 0;
    width: 100%;
}

.oom-wizard-textarea {
    width: 100%;
    min-height: 300px;
    font-family: var(--font-monospace);
    font-size: 14px;
    padding: 12px;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    resize: vertical;
}

/* Content Helpers */
.oom-content-helpers {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

/* Sample Dropdown */
.oom-sample-dropdown-container {
    position: relative;
    display: inline-block;
}

.oom-sample-dropdown-button {
    padding: 6px 12px;
    font-size: 14px;
}

.oom-sample-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 200px;
}

.oom-sample-option {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--background-modifier-border);
}

.oom-sample-option:hover {
    background-color: var(--background-modifier-hover);
}

.oom-sample-option:last-child {
    border-bottom: none;
}

/* Helper Button */
.oom-helper-button {
    padding: 6px 12px;
    font-size: 14px;
} 
/* =============================================================================
   HUBMODAL COMPREHENSIVE COMPONENT STYLES 
   Generated by fix-hubmodal-comprehensive.ps1
   ============================================================================= */

/* ClearButton */
.oom-clear-btn {
padding: 6px 12px;
font-size: 14px;
}

/* ComplexitySection */
.oom-complexity-section {
margin-bottom: 1.5em;
padding: 1em;
background: var(--background-secondary);
border-radius: 5px;
}

/* NoteItem */
.oom-note-item {
padding: 0.5em;
border-bottom: 1px solid var(--background-modifier-border);
cursor: pointer;
transition: background-color 0.15s ease;

&:hover {
    background-color: var(--background-modifier-hover);
}
}

/* InfoSection */
.oom-info-section {
margin-top: 0.5em;
font-size: 0.9em;
color: var(--text-muted);
}

/* MoreItem */
.oom-more-item {
padding: 0.5em;
text-align: center;
color: var(--text-muted);
}

/* StatusText */
.oom-status-text {
margin-top: 1em;
text-align: center;
}

/* ProgressFill */
.oom-progress-fill {
height: 100%;
background-color: var(--interactive-accent);
width: 0%;
transition: width 0.3s ease;
}
.oom-progress-fill--complete {
width: 100%;
}

/* DropdownHover */
.oom-dropdown-option--hover {
background-color: var(--background-modifier-hover);
}

/* WizardStep */
.oom-wizard-step--visible {
display: block;
}

/* PathElement */
.oom-path-element {
font-size: 0.8em;
color: var(--text-muted);
}

/* SearchInput */
.oom-search-input {
width: 100%;
padding: 0.5em;
border: 1px solid var(--background-modifier-border);
border-radius: 4px;
}

/* DropdownMenu */
.oom-sample-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: var(--background-primary);
border: 1px solid var(--background-modifier-border);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
z-index: 1000;
min-width: 200px;
}

/* DropdownContainer */
.oom-sample-dropdown-container {
position: relative;
display: inline-block;
}

/* Explanation */
.oom-explanation {
margin-top: 1em;
padding: 1em;
background-color: var(--background-primary);
border-radius: 4px;
font-size: 14px;
}

/* DropdownOption */
.oom-dropdown-option {
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid var(--background-modifier-border);
transition: background-color 0.15s ease;

&:hover {
    background-color: var(--background-modifier-hover);
}
}

/* ProgressBar */
.oom-progress-bar {
width: 100%;
height: 20px;
background-color: var(--background-modifier-border);
border-radius: 10px;
overflow: hidden;
}

/* FolderItem */
.oom-folder-item {
padding: 0.5em;
border-bottom: 1px solid var(--background-modifier-border);
cursor: pointer;
transition: background-color 0.15s ease;

&:hover {
    background-color: var(--background-modifier-hover);
}
}

/* FolderList */
.oom-folder-list {
max-height: 300px;
overflow-y: auto;
border: 1px solid var(--background-modifier-border);
border-radius: 4px;
margin: 1em 0;
}

/* NoteItemHover */
.oom-note-item--hover {
background-color: var(--background-modifier-hover);
}

/* PreviewSpan */
.oom-preview-span--bold {
font-weight: bold;
}

/* FileContainer */
.oom-file-container {
margin-bottom: 1.5em;
border: 1px solid var(--background-modifier-border);
border-radius: 5px;
}

/* ButtonContainer */
.oom-button-container {
margin-top: 1em;
}
.oom-button-container--right {
text-align: right; margin-top: 1em;
}

/* SearchContainer */
.oom-search-container {
margin: 1em 0;
}

/* ProgressTitle */
.oom-progress-title {
margin-bottom: 1em;
}

/* CreateButtonContainer */
.oom-create-btn-container {
margin-top: 1em;
}
.oom-create-btn-container--extended {
margin-top: 1.5em;
}

/* FolderItemHover */
.oom-folder-item--hover {
background-color: var(--background-modifier-hover);
}

/* NoteList */
.oom-note-list {
max-height: 300px;
overflow-y: auto;
border: 1px solid var(--background-modifier-border);
border-radius: 4px;
margin: 1em 0;
}

/* HelpersContainer */
.oom-helpers-container {
margin-top: 10px;
display: flex;
gap: 10px;
}

/* DropdownButton */
.oom-sample-dropdown-btn {
padding: 6px 12px;
font-size: 14px;
}

/* ProgressContainer */
.oom-progress-container {
margin-top: 2em;
padding: 2em;
border: 2px solid var(--background-modifier-border);
border-radius: 8px;
}

/* ============================================================================= */

/* Phase 7K: Remaining HubModal.ts Styles */
.oom-file-container { padding: 1em; }
.oom-file-header { margin-bottom: 0.5em; font-weight: bold; }
.oom-file-path { font-size: 0.9em; color: var(--text-muted); font-weight: normal; }
.oom-callout-table { width: 100%; border-collapse: collapse; }
.oom-button-container-spaced { margin-top: 2em; }
.oom-close-btn-spaced { margin-top: 2em; }
.oom-title-muted { color: var(--text-muted); }
.oom-item-container { border: 1px solid var(--background-modifier-border); padding: 1em; margin: 0.5em 0; border-radius: 4px; }
.oom-preview-element { font-size: 0.8em; background: var(--background-secondary); padding: 0.5em; border-radius: 3px; }
.oom-textarea-editor { width: 100%; height: 200px; font-family: var(--font-monospace); padding: 1em; }
.oom-template-name-input { width: 100%; margin: 1em 0; padding: 0.5em; }
.oom-template-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--background-modifier-border); border-radius: 4px; padding: 0.5em; margin-top: 1em; }
.oom-template-item { display: flex; align-items: center; padding: 0.5em; border-bottom: 1px solid var(--background-modifier-border-focus); }
.oom-template-checkbox { margin-right: 0.75em; }
.oom-select-all-container { margin-top: 0.75em; }
.oom-select-all-checkbox { margin-right: 0.5em; }
.oom-visible { display: block !important; }
.oom-hidden { display: none !important; }

/* =============================================================================
   PHASE 7L: Debug Button Styling
   ============================================================================= */

/* Yellow debug button for FilterControls */
.oom-debug-btn--yellow {
    background-color: var(--color-yellow);
    color: black;
    margin-left: 8px;
    padding: 0.5em 1em;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}

.oom-debug-btn--yellow:hover {
    background-color: var(--color-yellow);
    opacity: 0.8;
}

/* Red debug button for expand-all and event handlers */
.oom-debug-btn--red {
    background-color: var(--color-red);
    color: white;
    margin-left: 8px;
    padding: 0.5em 1em;
    border: 1px solid var(--background-modifier-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}

.oom-debug-btn--red:hover {
    background-color: var(--color-red);
    opacity: 0.8;
}


/* =============================================================================
   COMPONENT: FORMS (26.7 KB)
   ============================================================================= */
/* =============================================================================
   FORMS COMPONENT - OneiroMetrics Form Controls & Validation System
   ============================================================================= */

/* COMPONENT OVERVIEW:
   - Form Field Layouts (Obsidian-style settings forms)
   - Toggle Switches (custom toggle controls)
   - Input Controls (text, date, search, select)
   - Validation System (error, warning, success states)
   - Filter Controls (dropdowns, date ranges, search)
   - Form Sections (collapsible, wizard forms)
   - Responsive Form Design
   - Accessibility & Keyboard Navigation
   - Print & High Contrast Optimizations
*/

/* =============================================================================
   VALIDATION SYSTEM - Error, Warning & Success States
   ============================================================================= */

/* Base validation indicators - functional state colors */
.oom-validation-error {
    border-left-color: var(--text-error);
}

.oom-validation-warning {
    border-left-color: var(--text-warning);
}

.oom-validation-info {
    border-left-color: var(--text-accent);
}

/* Editor validation markers - code highlighting */
.oom-cm-validation-error {
    text-decoration: red wavy underline;
}

.oom-cm-validation-warning {
    text-decoration: orange wavy underline;
}

.oom-cm-validation-info {
    text-decoration: blue wavy underline;
}

/* Button error/success states */
.oom-button--error {
    color: var(--text-error);
}

.oom-button--success {
    color: var(--text-success);
}

/* Modal warning states */
.oom-modal-button.mod-warning {
    border-color: var(--text-error);
    background: var(--text-error);
}

.oom-modal-button.mod-warning:hover {
    background: var(--text-error-hover);
}

/* =============================================================================
   FORM FIELDS - Obsidian-Style Settings Layout
   ============================================================================= */

/* Base form field layout - emulates Obsidian settings */
.oom-form-field,
.oom-setting-toggle {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--oom-spacing-md);
    min-height: 40px;
    padding: var(--oom-spacing-sm) 0;
    
    /* NO VISUAL STYLING - Let theme handle form field appearance */
}

/* Labels and descriptions - left aligned */
.oom-form-label,
.oom-setting-info,
.oom-form-field .oom-form-label {
    flex: 1;

    /* === STRUCTURAL PROPERTIES === */
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    
    /* NO VISUAL STYLING - Let theme handle label styling */
}

/* Form controls - right aligned */
.oom-form-control,
.oom-form-field .oom-toggle-container,
.oom-form-field-toggle .oom-toggle-container {
    /* === STRUCTURAL PROPERTIES === */
    flex: 0 0 auto;
    margin: 0;
    margin-left: auto;
    
    /* NO VISUAL STYLING - Let theme handle form control appearance */
}

/* Form spacing - visual separation */
.oom-journal-structure-modal .oom-form-field + .oom-form-field {
    margin-top: var(--oom-spacing-xs);
    padding-top: var(--oom-spacing-sm);
    border-top: 1px solid var(--background-modifier-border-hover);
}

/* =============================================================================
   TOGGLE SWITCHES - Custom Toggle Controls
   ============================================================================= */

.oom-toggle-container {
    /* === STRUCTURAL PROPERTIES === */
    position: relative;
    cursor: pointer;
    
    /* NO VISUAL STYLING - Let theme handle toggle container */
}

.oom-toggle-input {
    /* === HIDDEN INPUT === */
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.oom-toggle-switch {
    /* === STRUCTURAL PROPERTIES === */
    position: relative;
    width: var(--oom-toggle-width);
    height: var(--oom-toggle-height);
    border-radius: calc(var(--oom-toggle-height) / 2);
    cursor: pointer;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle toggle switch styling */
    
    &:hover {
        /* Let theme handle hover styling */
    }
    
    .oom-toggle-slider {
        position: absolute;
        top: var(--oom-toggle-border-width);
        left: var(--oom-toggle-border-width);
        width: var(--oom-toggle-slider-size);
        height: var(--oom-toggle-slider-size);
        border-radius: 50%;
        transition: transform var(--oom-transition-normal);
        
        /* NO VISUAL STYLING - Let theme handle slider styling */
    }
    
    /* === TOGGLE STATES === */
    &.oom-toggle-on,
    &:has(.oom-toggle-input:checked) {
        /* NO VISUAL STYLING - Let theme handle active toggle */
        
        .oom-toggle-slider {
            transform: translateX(var(--oom-toggle-travel));
        }
        
        &:hover {
            /* Let theme handle active hover styling */
        }
    }
    
    &.oom-toggle-off {
        /* NO VISUAL STYLING - Let theme handle inactive toggle */
    }
}

/* Focus states for toggle */
.oom-toggle-input:focus + .oom-toggle-switch {
    /* === ACCESSIBILITY FOCUS === */
    box-shadow: var(--oom-focus-ring);
}

/* Toggle labels and text */
.oom-toggle-label {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-sm);
    font-size: var(--font-ui-medium);
    cursor: pointer;
    
    /* NO VISUAL STYLING - Let theme handle toggle label styling */
}

.oom-toggle-text {
    /* === STRUCTURAL PROPERTIES === */
    font-size: var(--font-ui-small);
    line-height: 1.4;
    
    /* NO VISUAL STYLING - Let theme handle toggle text styling */
}

/* =============================================================================
   TEXT INPUT SECTIONS - Modal Text Input Layouts
   ============================================================================= */

.oom-text-input-section {
    /* === STRUCTURAL PROPERTIES === */
    padding: var(--oom-spacing-sm);
    border-radius: var(--oom-radius-md);
    
    /* NO VISUAL STYLING - Let theme handle text input section backgrounds and borders */
    
    .oom-text-input-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--oom-spacing-xs);
    }
    
    .oom-text-input-title {
        font-size: var(--oom-text-input-title-size);
        font-weight: var(--font-semibold);
        
        /* NO VISUAL STYLING - Let theme handle title styling */
    }
    
    .oom-text-input-toggle {
        font-size: var(--oom-text-input-toggle-size);
        cursor: pointer;
        user-select: none;
        
        /* NO VISUAL STYLING - Let theme handle toggle text styling */
        
        &:hover {
            /* Let theme handle hover styling */
        }
    }
    
    .oom-text-input-row {
        display: grid;
        align-items: end;
        gap: var(--oom-spacing-sm);
        grid-template-columns: 1fr 1fr;
    }
    
    &.collapsed .oom-text-input-row {
        display: none;
    }
}

/* Input row layouts */
.oom-input-row,
.oom-actions-row,
.oom-text-input-row {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-sm);
    margin-bottom: var(--oom-spacing-sm);
    
    /* NO VISUAL STYLING - Let theme handle row appearance */
}

.oom-fav-name-row {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-sm);
    margin-bottom: var(--oom-spacing-md);
    
    /* NO VISUAL STYLING - Let theme handle favorite name row appearance */
}

/* Text input field wrapper */
.oom-text-input-field {
    /* === STRUCTURAL PROPERTIES === */
    flex: 1;
    margin-right: var(--oom-spacing-sm);
    
    /* NO VISUAL STYLING - Let theme handle field appearance */
}

/* =============================================================================
   SELECT CONTROLS - Dropdown Elements
   ============================================================================= */

.oom-select {
    /* === STRUCTURAL PROPERTIES === */
    flex: 1;
    max-width: 150px;
    padding: 0 0 0 .5em;
    transition: all var(--oom-transition-normal);
    
    /* NO VISUAL STYLING - Let theme handle select styling */
    
    &:hover {
        /* Let theme handle hover styling */
    }
    
    &:focus {
        /* Let theme handle focus styling */
        outline: none;
        box-shadow: var(--oom-focus-ring);
    }
    
    /* === OPTION STYLING === */
    option {
        /* NO VISUAL STYLING - Let theme handle option styling */
        
        .oom-metric-icon {
            /* Preserve icon structure in options */
            margin-right: var(--oom-spacing-xs);
        }
    }
}

/* Obsidian context-specific styling */
.markdown-preview-view[data-type="oom-project-note"] .oom-select {
    /* Inherit from base .oom-select */

    /* Additional context-specific overrides only if needed */
}

/* =============================================================================
   INPUT CONTAINERS - Context-Specific Layouts
   ============================================================================= */

.oom-input-container,
.oom-input-row {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-sm);
    
    /* NO VISUAL STYLING - Let theme handle input container appearance */
}

.oom-fav-save-container,
.oom-fav-name-row {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-sm);
    
    /* NO VISUAL STYLING - Let theme handle favorite input containers */
    
    label {
        min-width: fit-content;
        font-size: var(--oom-input-label-size);
        font-weight: var(--font-medium);
        
        /* NO VISUAL STYLING - Let theme handle favorite labels */
    }
    
    input {
        flex: 1;

        /* Inherits all styling from base input elements */
    }
    
    button {
        /* NO VISUAL STYLING - Let theme handle favorite buttons */

        /* Inherits button styling from theme */
    }
}

/* Modal section input containers */
.oom-modal-section .oom-notes-selector-container {
    /* === STRUCTURAL PROPERTIES === */
    margin-top: var(--oom-spacing-md);
    
    /* NO VISUAL STYLING - Let theme handle modal section containers */
    
    .oom-multiselect-search-container {
        margin-bottom: var(--oom-spacing-sm);
    }
}

/* =============================================================================
   SEARCH INPUT COMPONENTS - Search and Filter Inputs
   ============================================================================= */

.oom-icon-picker-search {
    /* === STRUCTURAL PROPERTIES === */
    position: relative;
    margin-bottom: var(--oom-spacing-sm);
    
    /* NO VISUAL STYLING - Let theme handle search container */
    
    &::before {
        position: absolute;
        top: 50%;
        left: var(--oom-spacing-sm);
        width: var(--oom-search-icon-size);
        height: var(--oom-search-icon-size);
        transform: translateY(-50%);

        /* Search icon placeholder - structural only */
        content: "";
        
        /* NO VISUAL STYLING - Let theme handle search icon */
    }
    
    input {
        width: 100%;
        padding-left: calc(var(--oom-search-icon-size) + var(--oom-spacing-lg));
        
        /* Inherits all styling from base input elements */
    }
}

/* =============================================================================
   DATE INPUT CONTROLS - Date Selection
   ============================================================================= */

.oom-date-input-container {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--oom-filter-gap);
    min-width: 200px;
    
    /* NO VISUAL STYLING - Let theme handle date input container */
    
    label {
        font-size: var(--oom-filter-label-size);
        font-weight: var(--font-medium);
        
        /* NO VISUAL STYLING - Let theme handle label colors */
    }
    
    input[type="date"] {
        padding: var(--oom-filter-input-padding);
        border-radius: var(--oom-filter-input-radius);
        font-size: var(--oom-filter-label-size);
        transition: all var(--oom-transition-normal);
        
        /* NO VISUAL STYLING - Let theme handle date input styling */
        
        &:hover {
            /* Let theme handle hover styling */
        }
        
        &:focus {
            /* Let theme handle focus styling */
            outline: none;
            box-shadow: var(--oom-focus-ring);
        }
    }
}

.oom-date-range-container {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    flex-wrap: wrap;
    gap: var(--oom-filter-gap);
    
    /* NO VISUAL STYLING - Let theme handle date range container */
}

/* =============================================================================
   FILTER CONTROLS - Filter System Components
   ============================================================================= */

.oom-filter-container {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    flex-direction: column;
    gap: var(--oom-filter-gap);
    margin-bottom: var(--oom-spacing-md);
    padding: var(--oom-filter-padding);
    border-radius: var(--oom-filter-border-radius);
    
    /* NO VISUAL STYLING - Let theme handle filter container styling */
}

/* Filter display states - visual feedback */
.oom-filter-display {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    
    /* NO VISUAL STYLING - Default state handled by theme */
    
    .oom-filter-icon {
        margin-right: 0.25em;

        /* Icon inherits color from parent text state */
        color: inherit;
    }
    
    /* === FILTER STATE INDICATORS === */
    &:has(.oom-filter-text.oom-filter--all-visible) {
        color: var(--text-success);
        
        .oom-filter-icon {
            color: var(--text-success);
        }
    }
    
    &:has(.oom-filter-text.oom-filter--partially-visible) {
        color: var(--text-warning);
        
        .oom-filter-icon {
            color: var(--text-warning);
        }
    }
    
    &:has(.oom-filter-text.oom-filter--none-visible) {
        color: var(--text-error);
        
        .oom-filter-icon {
            color: var(--text-error);
        }
    }
    
    /* === UPDATED STATE === */
    &.oom-filter-display--updated {
        /* Temporary highlight for filter updates */
        animation: filter-update-flash 0.3s ease-out;
    }
}

/* Individual filter state classes */
.oom-filter--all-visible {
    color: var(--text-success);
}

.oom-filter--mostly-visible {
    opacity: 0.8;
    color: var(--text-success);
}

.oom-filter--partially-visible {
    color: var(--text-warning);
}

.oom-filter--none-visible {
    color: var(--text-error);
}

.oom-filter-hidden {
    display: none;
}

/* Special ID-based filter display */
div#oom-time-filter-display {
    margin: var(--oom-spacing-sm) 0;

    /* === STRUCTURAL PROPERTIES === */
    padding: var(--oom-spacing-sm);
    border-radius: var(--oom-radius-sm);
    
    /* NO VISUAL STYLING - Let theme handle time filter display */
}

/* =============================================================================
   SELECTION CONTROLS - Selection and Info Displays
   ============================================================================= */

.oom-selection-info {
    /* === STRUCTURAL PROPERTIES === */
    margin-bottom: var(--oom-spacing-sm);
    padding: var(--oom-spacing-sm);
    border-radius: var(--oom-radius-sm);
    font-size: var(--font-ui-small);
    
    /* NO VISUAL STYLING - Let theme handle selection info styling */
}

.oom-selected-text {
    /* === STRUCTURAL PROPERTIES === */
    font-weight: var(--font-medium);
    
    /* NO VISUAL STYLING - Let theme handle selected text styling */
}

/* =============================================================================
   STRUCTURE FORM COMPONENTS - Journal Structure Forms
   ============================================================================= */

/* Structure list item layout */
.oom-structure-list-item {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-sm);
    margin-bottom: var(--oom-spacing-xs);
    padding: var(--oom-spacing-sm);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    
    /* NO VISUAL STYLING - Let theme handle structure list item appearance */
}

.oom-structure-list-item .oom-structure-toggle {
    display: flex;
    align-items: center;
    margin-right: var(--oom-spacing-sm);
    order: -1;
}

.oom-structure-list-item .oom-structure-info {
    flex: 1;
    min-width: 0;
}

.oom-structure-list-item .oom-structure-actions {
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-xs);
    margin-left: auto;
    flex-shrink: 0;
}

.oom-structure-item.editing {
    margin-top: 1em;
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 6px;
}

/* Journal section styling */
.oom-journal-section {
    margin-bottom: var(--oom-spacing-md);

    /* === STRUCTURAL PROPERTIES === */
    padding: var(--oom-spacing-md);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    
    /* NO VISUAL STYLING - Let theme handle journal section appearance */
}

.oom-section-header {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--oom-spacing-sm);
    padding-bottom: var(--oom-spacing-xs);
    border-bottom: 1px solid var(--background-modifier-border);
    font-size: var(--font-ui-medium);
    font-weight: 600;
    
    /* NO VISUAL STYLING - Let theme handle section header appearance */
}

/* =============================================================================
   WIZARD FORMS - Step-by-Step Form Components
   ============================================================================= */

.oom-wizard-header {
    /* === STRUCTURAL PROPERTIES === */
    position: sticky;
    top: 0;
    z-index: 101;
    padding: .5em;
    border-bottom: 1px solid var(--background-modifier-border);
    box-shadow: rgb(0 0 0 / 10%) 0 2px 8px;
    background-color: var(--background-primary);
    
    /* NO VISUAL STYLING - Uses theme background */
}

.oom-wizard-main-content {
    padding-top: 1em;

    /* === STRUCTURAL PROPERTIES === */
    padding-bottom: 80px;
}

.oom-wizard-step.step-1 h3,
.oom-wizard-step.step-2 h3,
.oom-wizard-step.step-3 h3 {
    font-size: var(--h4-size);
    margin-block-start: 0;
}

.oom-wizard-footer {
    /* === STRUCTURAL PROPERTIES === */
    position: sticky;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: .5em;
    border-top: 1px solid var(--background-modifier-border);
    box-shadow: rgb(0 0 0 / 10%) 0 -2px 8px;
    background-color: var(--background-primary);
    
    /* NO VISUAL STYLING - Uses theme background */
}

.oom-nav-container {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.oom-button-container {
    /* === STRUCTURAL PROPERTIES === */
    display: flex;
    gap: 0.5em;
}

.oom-wizard-footer .oom-step-indicator {
    /* === STRUCTURAL PROPERTIES === */
    min-width: auto;
    font-size: var(--font-ui-small);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    
    /* NO VISUAL STYLING - Let theme handle step indicator */
}

/* =============================================================================
   FORM DESCRIPTIONS & HELP TEXT
   ============================================================================= */

p.oom-journal-structure-description {
    font-size: var(--font-ui-smaller);
}

p.oom-journal-structure-description:nth-of-type(2) {
    margin-bottom: 0;
    margin-block-end: 0;
}

/* Preview containers */
pre.oom-markdown-preview.oom-templater-preview {
    border: 1px solid var(--color-accent);
    font-size: 12px;
    background-color: var(--background-secondary);
}

pre.oom-markdown-preview.oom-journal-structure-preview {
    font-size: 12px;
    background-color: var(--background-secondary);
}

/* =============================================================================
   STATUS INDICATORS - Form State Feedback
   ============================================================================= */

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

.oom-status-success {
    color: var(--text-success);
}

/* =============================================================================
   RESPONSIVE DESIGN - Mobile First Forms
   ============================================================================= */

@media screen and (max-width: var(--oom-breakpoint-tablet)) {
    /* === TABLET FORM ADJUSTMENTS === */
    .oom-text-input-row {
        gap: var(--oom-spacing-sm);
        grid-template-columns: 1fr;
    }
    
    .oom-date-range-container {
        flex-direction: column;
    }
    
    .oom-filter-container {
        gap: var(--oom-spacing-sm);
    }
}

@media screen and (max-width: var(--oom-breakpoint-mobile)) {
    /* === MOBILE FORM ADJUSTMENTS === */
    .oom-form-field,
    .oom-setting-toggle {
        flex-direction: column;
        align-items: stretch;
        gap: var(--oom-spacing-sm);
        min-height: auto;
    }
    
    .oom-form-label,
    .oom-setting-info {
        text-align: left;
    }
    
    .oom-form-control,
    .oom-form-field .oom-toggle-container,
    .oom-form-field-toggle .oom-toggle-container {
        margin-left: 0;
        align-self: flex-end;
    }
    
    .oom-input-row,
    .oom-actions-row,
    .oom-fav-name-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .oom-text-input-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--oom-spacing-xs);
    }
    
    .oom-text-input-field {
        margin-right: 0;
    }
    
    .oom-wizard-header,
    .oom-wizard-footer {
        padding: var(--oom-spacing-sm);
    }
    
    .oom-nav-container {
        flex-direction: column;
        gap: var(--oom-spacing-sm);
    }
    
    .oom-button-container {
        flex-direction: column;
        gap: var(--oom-spacing-xs);
    }
}

/* =============================================================================
   PRINT OPTIMIZATION - Forms
   ============================================================================= */

@media print {
    /* === HIDE INTERACTIVE FORM ELEMENTS IN PRINT === */
    .oom-wizard-header,
    .oom-wizard-footer,
    .oom-button-container,
    .oom-toggle-container,
    .oom-structure-actions {
        display: none;
    }
    
    /* === SIMPLIFY FORM LAYOUT FOR PRINT === */
    .oom-form-field,
    .oom-setting-toggle {
        flex-direction: row;
        justify-content: flex-start;
        gap: var(--oom-spacing-lg);
    }
    
    /* === PRESERVE FORM CONTENT === */
    .oom-form-label,
    .oom-selected-text,
    .oom-filter-display {
        color: black !important;
    }
    
    /* === REMOVE FORM BACKGROUNDS === */
    .oom-wizard-main-content {
        padding: 0;
    }
}

/* =============================================================================
   ACCESSIBILITY - High Contrast & Focus Management
   ============================================================================= */

/* High contrast mode adjustments */
@media (forced-colors: active) {
    .oom-validation-error,
    .oom-cm-validation-error {
        border-color: Mark;
        text-decoration-color: Mark;
    }
    
    .oom-validation-warning,
    .oom-cm-validation-warning {
        border-color: Highlight;
        text-decoration-color: Highlight;
    }
    
    .oom-filter--all-visible {
        color: LinkText;
    }
    
    .oom-filter--partially-visible,
    .oom-filter--none-visible {
        color: VisitedText;
    }
    
    .oom-toggle-switch {
        border: 1px solid ButtonText;
    }
    
    .oom-toggle-input:checked + .oom-toggle-switch {
        background: Highlight;
    }
    
    .oom-form-field,
    .oom-structure-list-item {
        border: 1px solid ButtonText;
    }
}

/* Focus management for form controls */
.oom-select:focus-visible,
.oom-toggle-container:focus-visible,
input[type="date"]:focus-visible {
    outline: var(--oom-focus-ring-accent);
    outline-offset: 2px;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .oom-toggle-switch,
    .oom-toggle-slider,
    .oom-filter-display {
        transition: none;
    }
    
    .oom-filter-display--updated {
        animation: none;
    }
}

/* =============================================================================
   DARK THEME SPECIFIC ADJUSTMENTS
   ============================================================================= */

/* Dark theme toggle visibility enhancement */
.theme-dark .oom-toggle-slider {
    /* Add subtle border for better visibility in dark themes */
    box-shadow: inset 0 0 0 1px var(--background-modifier-border);
}

/* =============================================================================
   TEMPLATE WIZARD COMPONENT STATES
   ============================================================================= */

/* Wizard step containers */
.oom-template-wizard-step {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Step visibility states */
.oom-template-wizard-step--visible {
  display: block;
  opacity: 1;
  visibility: visible;
}

.oom-template-wizard-step--hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
}

/* Content area sizing states */
.oom-template-wizard-content-area {
  height: 300px;
  width: 100%;
  min-height: 200px;
  resize: vertical;
  font-family: var(--font-monospace);
  font-size: var(--font-ui-small);
  line-height: 1.4;
  transition: height 0.2s ease;
}

.oom-template-wizard-content-area:focus {
  outline: 2px solid var(--interactive-accent);
  outline-offset: 2px;
}

/* Enhanced wizard step animations */
.oom-template-wizard-step.step-entering {
  animation: slideInRight 0.3s ease-out;
}

.oom-template-wizard-step.step-exiting {
  animation: slideOutLeft 0.3s ease-in;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

/* =============================================================================
   END TEMPLATE WIZARD COMPONENT STATES
   ============================================================================= */

/* Templater section visibility states */
.oom-templater-section--visible {
  display: block;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.oom-templater-section--hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}


/* =============================================================================
   COMPONENT: WIZARDS (17.7 KB)
   ============================================================================= */
/* =============================================================================
   WIZARDS COMPONENT - Template Creation & Other Wizard Interfaces
   ============================================================================= */

/* COMPONENT OVERVIEW:
   - Template Wizard Modal (Material Design approach)
   - Step-by-step wizard interface patterns
   - Monochrome design following Obsidian aesthetics
   - Lucide icon integration
   - Responsive design patterns
   
   DESIGN PRINCIPLES:
   - Clean, distraction-free interface
   - Clear visual hierarchy and progress indication
   - Accessibility-first approach
   - Theme-agnostic monochrome palette
   */

/* =============================================================================
   TEMPLATE WIZARD MODAL - Main Container
   ============================================================================= */

/* Modal container override for template wizard */
.modal.oom-template-wizard-modal {
    --modal-max-height: 90vh;
    --modal-max-width: 800px;
    width:800px;
}

.modal.oom-template-wizard-modal .modal-bg {
    background: rgba(0, 0, 0, 0.5);
}

.modal.oom-template-wizard-modal .modal-container {
    max-width: var(--modal-max-width);
    max-height: var(--modal-max-height);
    margin: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--background-modifier-border);
    overflow: hidden;
}

/* Template wizard content structure */
.oom-template-wizard-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--background-primary);
}

/* =============================================================================
   WIZARD HEADER - Title, Step Indicator, Close Button
   ============================================================================= */

.oom-wizard-header {
    padding: var(--oom-spacing-lg);
    background: var(--background-primary);
    border-bottom: 1px solid var(--background-modifier-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.oom-wizard-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--text-normal);
}

/* Step indicator */
.oom-step-indicator {
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-sm);
}

.oom-step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    transition: all var(--oom-transition-normal);
}

.oom-step-number.active {
    background: var(--text-normal);
    color: var(--background-primary);
}

.oom-step-number.completed {
    background: var(--text-normal);
    color: var(--background-primary);
}

.oom-step-number.inactive {
    background: var(--background-modifier-border);
    color: var(--text-muted);
}

.oom-step-divider {
    width: 20px;
    height: 1px;
    background: var(--background-modifier-border);
}

/* Close button */
.oom-wizard-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--oom-spacing-sm);
    border-radius: var(--oom-radius-sm);
    color: var(--text-muted);
    transition: all var(--oom-transition-normal);
}

.oom-wizard-close:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.oom-wizard-close svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* =============================================================================
   WIZARD CONTENT - Main Step Container
   ============================================================================= */

.oom-wizard-content {
    flex: 1;
    padding: var(--oom-spacing-xl);
    overflow-y: auto;
    min-height: 400px;
}

.oom-step-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 var(--oom-spacing-sm) 0;
    color: var(--text-normal);
}

.oom-step-description {
    color: var(--text-muted);
    margin: 0 0 var(--oom-spacing-xl) 0;
    font-size: 16px;
    line-height: var(--oom-line-height-normal);
}

/* =============================================================================
   METHOD SELECTION CARDS - Step 1 Interface
   ============================================================================= */

.oom-method-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--oom-spacing-md);
    margin: var(--oom-spacing-lg) 0;
}

.oom-method-card {
    background: var(--background-primary);
    border: 2px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-md);
    padding: var(--oom-spacing-lg);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    position: relative;
}

.oom-method-card:hover {
    border-color: var(--text-normal);
    box-shadow: var(--oom-shadow-md);
    transform: translateY(-2px);
}

.oom-method-card.selected {
    border-color: var(--text-normal);
    background: var(--background-secondary);
    box-shadow: var(--oom-shadow-sm);
}

.oom-method-content {
    text-align: center;
}

.oom-method-icon {
    margin-bottom: var(--oom-spacing-md);
    display: flex;
    justify-content: center;
}

.oom-method-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
    color: var(--text-normal);
}

.oom-method-title {
    font-weight: 600;
    font-size: 16px;
    margin: 0 0 var(--oom-spacing-sm) 0;
    color: var(--text-normal);
}

.oom-method-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

/* =============================================================================
   WIZARD FORM ELEMENTS - Inputs, Textareas, Dropdowns
   ============================================================================= */

/* Override Obsidian's setting styles for wizard */
.oom-wizard-content .setting-item {
    border: none;
    padding: var(--oom-spacing-md) 0;
}

.oom-wizard-content .setting-item-info {
    flex-grow: 1;
}

.oom-wizard-content .setting-item-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-normal);
    margin-bottom: var(--oom-spacing-xs);
}

.oom-wizard-content .setting-item-description {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: var(--oom-spacing-sm);
}

.oom-wizard-content .setting-item-control {
    margin-top: var(--oom-spacing-sm);
}

/* Text inputs */
.oom-wizard-content input[type="text"] {
    width: 100%;
    padding: 12px var(--oom-spacing-md);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-sm);
    font-size: 14px;
    background: var(--background-primary);
    color: var(--text-normal);
    transition: all var(--oom-transition-normal);
}

.oom-wizard-content input[type="text"]:focus {
    outline: none;
    border-color: var(--text-normal);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.oom-wizard-content input[type="text"]::placeholder {
    color: var(--text-muted);
}

/* Textarea styling - prominent and well-sized */
.oom-wizard-textarea {
    width: 100% !important;
    min-height: 320px !important;
    padding: var(--oom-spacing-md) !important;
    border: 1px solid var(--background-modifier-border) !important;
    border-radius: var(--oom-radius-md) !important;
    font-family: var(--font-monospace) !important;
    font-size: 13px !important;
    line-height: var(--oom-line-height-normal) !important;
    resize: vertical !important;
    background: var(--background-primary) !important;
    color: var(--text-normal) !important;
    transition: all var(--oom-transition-normal) !important;
}

.oom-wizard-textarea:focus {
    outline: none !important;
    border-color: var(--text-normal) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;
}

.oom-wizard-textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Dropdown styling */
.oom-wizard-content select {
    width: 100%;
    /*padding: 12px var(--oom-spacing-md);*/
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-sm);
    font-size: 14px;
    background: var(--background-primary);
    color: var(--text-normal);
    cursor: pointer;
}

.oom-wizard-content select:focus {
    outline: none;
    border-color: var(--text-normal);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* Content section layout for proper textarea placement */
.oom-content-section {
    margin: var(--oom-spacing-lg) 0;
}

.oom-content-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-normal);
    margin: 0 0 var(--oom-spacing-xs) 0;
}

.oom-content-description {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0 0 var(--oom-spacing-md) 0;
}

/* =============================================================================
   HELPER CHIPS - Content Creation Assistance
   ============================================================================= */

.oom-content-helpers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oom-spacing-sm);
    margin: var(--oom-spacing-md) 0 0 0;
}

.oom-helper-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--oom-spacing-sm) 12px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.oom-helper-chip:hover {
    background: var(--text-normal);
    color: var(--background-primary);
    border-color: var(--text-normal);
    transform: translateY(-1px);
    box-shadow: var(--oom-shadow-sm);
}

.oom-helper-chip-icon {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

/* =============================================================================
   PREVIEW CARD - Template Content Preview
   ============================================================================= */

.oom-preview-card {
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--oom-radius-md);
    padding: 20px;
    margin: var(--oom-spacing-lg) 0;
}

.oom-preview-title {
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 var(--oom-spacing-md) 0;
    color: var(--text-normal);
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-sm);
}

.oom-preview-title svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.oom-preview-content {
    font-family: var(--font-monospace);
    font-size: 12px;
    white-space: pre-wrap;
    color: var(--text-normal);
    max-height: 240px;
    overflow-y: auto;
    background: var(--background-primary);
    padding: var(--oom-spacing-md);
    border-radius: var(--oom-radius-sm);
    border: 1px solid var(--background-modifier-border-focus);
    margin: 0;
}

/* =============================================================================
   WIZARD FOOTER - Progress & Navigation
   ============================================================================= */

.oom-wizard-footer {
    padding: 20px var(--oom-spacing-lg);
    background: var(--background-secondary);
    border-top: 1px solid var(--background-modifier-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.oom-footer-progress {
    display: flex;
    align-items: center;
    gap: var(--oom-spacing-md);
}

.oom-progress-text {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

/* Override positioning for wizard modal progress text */
.oom-template-wizard-modal .oom-progress-text {
    position: absolute;
    top: 50%;
    left: 29%;
    transform: translate(-50%, -50%);
}

.oom-progress-indicator {
    width: 80px;
    height: 3px;
    background: var(--background-modifier-border);
    border-radius: 2px;
    overflow: hidden;
}

.oom-progress-fill {
    height: 100%;
    background: var(--text-normal);
    transition: width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    width: 0;
}

.oom-footer-buttons {
    display: flex;
    gap: 12px;
}

/* =============================================================================
   WIZARD BUTTONS - Navigation & Actions
   ============================================================================= */

.oom-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--oom-spacing-sm);
    padding: 10px 20px;
    border-radius: var(--oom-radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    text-decoration: none;
    border: none;
}

.oom-btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--background-modifier-border);
}

.oom-btn-ghost:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
    border-color: var(--text-normal);
}

.oom-btn-primary {
    background: var(--text-normal);
    color: var(--background-primary);
    border: 1px solid var(--text-normal);
}

.oom-btn-primary:hover {
    background: var(--text-accent);
    transform: translateY(-1px);
    box-shadow: var(--oom-shadow-sm);
}

.oom-btn-primary:disabled {
    background: var(--background-modifier-border);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    border-color: var(--background-modifier-border);
}

.oom-btn-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* =============================================================================
   RESPONSIVE DESIGN - Mobile & Tablet Adaptations
   ============================================================================= */

@media (max-width: 768px) {
    .modal.oom-template-wizard-modal .modal-container {
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
        border: none;
    }
    
    .oom-method-grid {
        grid-template-columns: 1fr;
    }
    
    .oom-wizard-header,
    .oom-wizard-content,
    .oom-wizard-footer {
        padding: var(--oom-spacing-md);
    }
    
    .oom-footer-buttons {
        flex-direction: column-reverse;
        width: 100%;
    }
    
    .oom-btn {
        justify-content: center;
        width: 100%;
    }
    
    .oom-step-title {
        font-size: 20px;
    }
    
    .oom-step-description {
        font-size: 14px;
    }
}

/* =============================================================================
   ACCESSIBILITY & REDUCED MOTION SUPPORT
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .oom-method-card,
    .oom-helper-chip,
    .oom-btn,
    .oom-progress-fill {
        transition: none;
    }
    
    .oom-method-card:hover,
    .oom-btn-primary:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (forced-colors: active) {
    .oom-method-card {
        border: 1px solid ButtonText;
    }
    
    .oom-method-card.selected {
        background-color: Highlight;
        color: HighlightText;
        border-color: Highlight;
    }
    
    .oom-btn-ghost {
        border: 1px solid ButtonText;
    }
    
    .oom-btn-primary {
        background-color: Highlight;
        color: HighlightText;
        border-color: Highlight;
    }
}

/* =============================================================================
   PLACEHOLDER & EMPTY STATES
   ============================================================================= */

.oom-placeholder-text {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 40px 20px;
    background: var(--background-secondary);
    border-radius: var(--oom-radius-md);
    border: 1px solid var(--background-modifier-border);
}

/* =============================================================================
   FUTURE WIZARD PATTERNS - Extensible Base Styles
   ============================================================================= */

/* Base wizard modal class for consistency across different wizard types */
.oom-wizard-modal {
    /* Standard wizard sizing */
    --wizard-max-width: 800px;
    --wizard-max-height: 90vh;
}

/* Common wizard step patterns */
.oom-wizard-step-hidden {
    display: none;
}

.oom-wizard-step-visible {
    display: block;
}

/* Common wizard validation states */
.oom-wizard-field-error {
    border-color: var(--text-error);
}

.oom-wizard-field-success {
    border-color: var(--text-success);
}

.oom-wizard-error-message {
    color: var(--text-error);
    font-size: 12px;
    margin-top: var(--oom-spacing-xs);
}

/* =============================================================================
   TEMPLATE WIZARD TEXTAREA UTILITIES
   ============================================================================= */

/* Template content textarea styling */
.oom-textarea-template {
    min-height: 320px;
    font-family: var(--font-monospace);
    resize: vertical;
    border-radius: var(--radius-s);
}

/* Code-style textarea utility for template editing */
.oom-textarea-code {
    font-family: var(--font-monospace);
    background: var(--background-primary-alt);
    border: 1px solid var(--background-modifier-border);
}

/* =============================================================================
   COMPONENT: DASHBOARD (31.4 KB)
   ============================================================================= */
/* OneiroMetrics Dashboard Styles */
/* Following Obsidian UI patterns and theme compatibility */

/* Tab Navigation Styles */
.oom-dashboard-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--background-modifier-border);
    padding-bottom: 0;
}

.oom-tab-button {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.2s ease;
    margin-bottom: -2px;
}

.oom-tab-button:hover {
    color: var(--text-normal);
    background-color: var(--background-modifier-hover);
}

.oom-tab-button.active {
    color: var(--text-accent);
    border-bottom-color: var(--interactive-accent);
    background-color: transparent;
}

.oom-tab-button:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: -2px;
}

/* Content Container */
.oom-dashboard-content-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Tab content wrappers */
.oom-entries-content,
.oom-analytics-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.oom-hidden {
    display: none !important;
}

/* Virtual Scrolling Styles */
.oom-virtual-scroll-container {
    height: 100%;
    overflow: hidden;
}

.oom-scroll-viewport {
    height: var(--viewport-height);
    overflow-y: auto;
    position: relative;
}

.oom-virtual-table tbody {
    position: relative;
}

.oom-virtual-spacer-top,
.oom-virtual-spacer-bottom {
    height: 0;
    display: block;
}

/* Content visibility toggling */
.oom-content-preview,
.oom-content-full {
    display: block;
}

.oom-content-preview.hidden {
    display: none;
}

.oom-content-full.hidden {
    display: none;
}

/* Sortable headers */
.sortable {
    cursor: pointer;
}

/* Chart container visibility */
.oom-dashboard-charts-container {
    display: block;
}

/* Main container */
.oneirometrics-dashboard {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--background-primary);
}

.oom-dashboard-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--size-4-2);
    gap: var(--size-4-2);
    overflow: hidden;
}

/* Content wrapper for table and charts */
.oom-dashboard-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--size-4-2);
    overflow: hidden;
}

/* Header section */
.oom-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--size-4-2);
    border-bottom: 1px solid var(--background-modifier-border);
}

.oom-dashboard-header h2 {
    margin: 0;
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    color: var(--text-normal);
}

.oom-update-info {
    font-size: var(--font-smaller);
    color: var(--text-muted);
}

/* Controls section */
.oom-dashboard-controls {
    display: flex;
    gap: var(--size-4-3);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--size-4-2);
}

/* Export button styles */
.oom-export-container {
    display: inline-block;
    position: relative;
}

.oom-export-button {
    padding: var(--size-4-1) var(--size-4-3);
    background-color: var(--interactive-normal);
    color: var(--text-normal);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    cursor: pointer;
    font-size: var(--font-ui-small);
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.oom-export-dropdown-arrow {
    font-size: 10px;
    opacity: 0.7;
    margin-left: 2px;
}

.oom-export-button:hover {
    background-color: var(--interactive-hover);
    border-color: var(--background-modifier-border-hover);
}

.oom-export-button:hover .oom-export-dropdown-arrow {
    opacity: 1;
}

.oom-export-button:active {
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
}


/* Filter buttons group - mirrors action buttons */
.oom-filter-buttons {
    display: flex;
    gap: var(--size-4-2);
    align-items: center;
    flex: 1;
}

/* Dropdown wrapper */
.oom-dropdown-wrapper {
    display: inline-block;
}

.oom-dropdown-wrapper .dropdown {
    min-width: 150px;
}

/* Custom range button styling */
.oom-custom-range-button {
    white-space: nowrap;
}

/* Action buttons group */
.oom-action-buttons {
    display: flex;
    gap: var(--size-4-2);
    align-items: center;
    margin-left: auto;
}

.oom-custom-range-button.active {
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
}

.oom-filter-info {
    display: inline-flex;
    align-items: center;
    gap: var(--size-4-1);
    padding: var(--size-4-1) var(--size-4-2);
    background-color: var(--background-secondary-alt);
    border-radius: var(--radius-s);
    font-size: var(--font-smaller);
    color: var(--text-muted);
    margin-left: auto;
}

.oom-filter-display,
.oom-custom-range-display {
    display: flex;
    align-items: center;
    gap: var(--size-4-1);
}

/* Custom date range modal styles */
.oom-custom-date-modal {
    width: 480px;
    max-width: 90vw;
}

/* Charts Section in Dashboard */
.oom-dashboard-charts-section {
    margin-top: var(--size-4-4);
    padding: var(--size-4-2);
    background-color: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
}

.oom-dashboard-charts-header {
    margin-bottom: var(--size-4-3);
}

.oom-dashboard-charts-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.oom-dashboard-charts-title h3 {
    margin: 0;
    font-size: var(--h3-size);
    font-weight: var(--h3-weight);
    color: var(--text-normal);
}


.oom-dashboard-charts-container {
    min-height: 400px;
    transition: all 0.3s ease;
}

.oom-chart-tabs-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: var(--size-4-4);
}

.oom-charts-placeholder-text {
    color: var(--text-muted);
    font-style: italic;
}

.oom-charts-error {
    padding: var(--size-4-3);
    margin: var(--size-4-2) 0;
    background-color: var(--background-modifier-error);
    border: 1px solid var(--background-modifier-error-hover);
    border-radius: var(--radius-s);
    color: var(--text-error);
}

/* Statistics table within charts */
.oom-statistics-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--size-4-2);
}

.oom-statistics-table th,
.oom-statistics-table td {
    padding: var(--size-4-2);
    text-align: left;
    border-bottom: 1px solid var(--background-modifier-border);
}

.oom-statistics-table th {
    font-weight: var(--font-semibold);
    background-color: var(--background-secondary-alt);
    color: var(--text-normal);
}

.oom-statistics-table td {
    color: var(--text-muted);
}

.oom-statistics-table td.metric-name {
    font-weight: var(--font-medium);
    color: var(--text-normal);
}

.oom-statistics-table td.metric-avg,
.oom-statistics-table td.metric-total {
    font-weight: var(--font-semibold);
    color: var(--text-accent);
}

.oom-no-data {
    text-align: center;
    padding: var(--size-4-4);
    color: var(--text-muted);
    font-style: italic;
}

.oom-modal-description {
    color: var(--text-muted);
    margin-bottom: var(--size-4-4);
}

.oom-date-input {
    width: 100%;
    padding: var(--size-4-1) var(--size-4-2);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    background-color: var(--background-primary);
    color: var(--text-normal);
}

.oom-quick-ranges {
    margin: var(--size-4-4) 0;
    padding: var(--size-4-3);
    background-color: var(--background-secondary);
    border-radius: var(--radius-m);
}

.oom-quick-ranges h3 {
    margin: 0 0 var(--size-4-2) 0;
    font-size: var(--font-small);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
}

.oom-quick-range-buttons {
    display: flex;
    gap: var(--size-4-2);
    flex-wrap: wrap;
}

.oom-quick-range-buttons button {
    padding: var(--size-4-1) var(--size-4-2);
    font-size: var(--font-smaller);
}

.oom-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--size-4-2);
    margin-top: var(--size-4-4);
    padding-top: var(--size-4-3);
    border-top: 1px solid var(--background-modifier-border);
}

.oom-refresh-button {
    padding: var(--size-4-1) var(--size-4-3);
    background-color: var(--interactive-normal);
    color: var(--text-normal);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.oom-refresh-button:hover {
    background-color: var(--interactive-hover);
}

.oom-refresh-button:active {
    background-color: var(--interactive-accent);
}

/* Table container */
.oom-table-container {
    flex: 1;
    overflow: hidden; /* Prevent double scrollbar */
    background-color: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    padding: var(--size-4-2);
    display: flex;
    flex-direction: column;
}

/* Virtual scrolling support - enhanced implementation */
.oom-virtual-scroll-container {
    --oom-total-rows: 0;
    --oom-row-height: 50px;
    --oom-visible-rows: 20;
    position: relative;
    width: 100%;
}

.oom-scroll-viewport {
    position: relative;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    flex: 1; /* Take remaining space */
    height: 100%;
}

.oom-virtual-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* Auto layout for dynamic column widths */
}

.oom-virtual-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--background-primary);
    border-bottom: 2px solid var(--background-modifier-border);
}

.oom-virtual-table thead tr {
    min-height: 60px; /* Ensure header row has enough height for wrapped text */
}

.oom-virtual-table thead th {
    padding: var(--size-4-2) var(--size-4-3);
    text-align: left;
    font-weight: var(--font-semibold);
    white-space: nowrap;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    min-height: 60px; /* Ensure enough height for wrapped text */
}

/* Specific column header widths to match cell widths */
.oom-virtual-table thead th:nth-child(1) { /* Date column */
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    white-space: nowrap; /* Keep date header single line */
}

.oom-virtual-table thead th:nth-child(2) { /* Title column */
    width: 250px;
    min-width: 200px;
    max-width: 300px;
    white-space: nowrap; /* Keep title header single line */
}

.oom-virtual-table thead th:nth-child(3) { /* Content column */
    width: 400px;
    min-width: 350px;
    max-width: 500px;
    white-space: nowrap; /* Keep content header single line */
}

/* Metric columns (4th child onwards) - Allow text wrapping */
.oom-virtual-table thead th:nth-child(n+4) {
    width: 110px;
    min-width: 100px;
    max-width: 120px;
    text-align: center;
    white-space: normal; /* Allow text wrapping */
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
    hyphens: auto;
    padding: var(--size-4-3) var(--size-4-2); /* Slightly more vertical padding */
}

/* Text metric headers - wider to accommodate lists and allow wrapping */
.oom-virtual-table thead th.metric-dream-themes,
.oom-virtual-table thead th.metric-symbolic-content,
.oom-virtual-table thead th.metric-characters-list {
    width: 150px;
    min-width: 120px;
    max-width: 200px;
    white-space: normal; /* Allow text wrapping */
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
}

.oom-virtual-table thead th.sortable {
    cursor: pointer;
    transition: background-color 0.15s ease;
    position: relative;
}

.oom-virtual-table thead th.sortable:hover {
    background-color: var(--background-modifier-hover);
}

/* Virtual spacers for maintaining scroll height */
.oom-virtual-spacer-top,
.oom-virtual-spacer-bottom {
    width: 100%;
    pointer-events: none;
    visibility: hidden;
}

/* Virtual row styles */
.oom-dream-row {
    height: var(--oom-row-height, 50px);
    border-bottom: 1px solid var(--background-modifier-border);
    transition: background-color 0.15s ease;
}

.oom-dream-row:hover {
    background-color: var(--background-modifier-hover);
}

.oom-dream-row td {
    padding: var(--size-4-2) var(--size-4-3);
    vertical-align: middle;
}

/* Date and title cells with proper widths */
.oom-date-cell {
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    white-space: nowrap;
}

.oom-title-cell {
    width: 250px;
    min-width: 200px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oom-title-link {
    color: var(--text-accent);
    text-decoration: none;
    cursor: pointer;
}

.oom-title-link:hover {
    text-decoration: underline;
}

/* Content cell styles with proper width */
.oom-content-cell {
    width: 400px;
    min-width: 350px;
    max-width: 500px;
}

.oom-content-container {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--size-4-2);
}

.oom-expand-toggle {
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    padding-top: 2px;
}

.oom-expand-toggle:hover {
    color: var(--text-normal);
}

.oom-content-preview,
.oom-content-full {
    flex: 1;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1.5;
    overflow: hidden;
}

.oom-content-preview {
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: none; /* Override the previous max-height */
}

.oom-content-full {
    color: var(--text-normal);
    max-height: none; /* No limit for expanded content */
}

/* Metric cells with consistent widths */
.oom-dream-row td[class*="metric-"] {
    width: 100px;
    min-width: 80px;
    max-width: 120px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bulleted list styles for text metrics */
.oom-metric-list {
    text-align: left;
    margin: 0;
    padding: 0;
    list-style-position: inside;
    font-size: var(--font-smaller);
    line-height: 1.4;
}

.oom-metric-list li {
    margin: 0;
    padding: 0 0 2px 0;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Adjust cells containing lists to allow wrapping */
.oom-dream-row td.metric-dream-themes,
.oom-dream-row td.metric-symbolic-content,
.oom-dream-row td.metric-characters-list {
    white-space: normal;
    text-overflow: unset;
    overflow: visible;
    text-align: left;
    padding: var(--size-4-1) var(--size-4-2);
    width: 150px;
    min-width: 120px;
    max-width: 200px;
}

/* Performance optimizations */
.oom-virtual-scroll-container * {
    will-change: auto;
}

.oom-scroll-viewport::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.oom-scroll-viewport::-webkit-scrollbar-track {
    background: var(--background-primary);
}

.oom-scroll-viewport::-webkit-scrollbar-thumb {
    background: var(--background-modifier-border);
    border-radius: 4px;
}

.oom-scroll-viewport::-webkit-scrollbar-thumb:hover {
    background: var(--background-modifier-hover);
}

/* Table styles */
.oom-metrics-table,
.oom-dashboard-table {
    width: 100%;
    border-collapse: collapse;
}

.oom-metrics-table thead,
.oom-dashboard-table thead {
    position: sticky;
    top: 0;
    background-color: var(--background-secondary);
    z-index: 1;
}

.oom-metrics-table th,
.oom-dashboard-table th {
    text-align: left;
    padding: var(--size-4-2);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    border-bottom: 2px solid var(--background-modifier-border);
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    min-height: 60px;
}

.oom-metrics-table th:hover,
.oom-dashboard-table th:hover {
    color: var(--text-normal);
}

.oom-metrics-table th.sortable::after,
.oom-dashboard-table th.sortable::after {
    content: ' ⇅';
    opacity: 0.3;
}

.oom-metrics-table th.sorted-asc::after,
.oom-dashboard-table th.sorted-asc::after {
    content: ' ↑';
    opacity: 1;
}

.oom-metrics-table th.sorted-desc::after,
.oom-dashboard-table th.sorted-desc::after {
    content: ' ↓';
    opacity: 1;
}

.oom-metrics-table td,
.oom-dashboard-table td {
    padding: var(--size-4-2);
    border-bottom: 1px solid var(--background-modifier-border);
}

/* Allow wrapping for metric column headers in regular tables */
.oom-metrics-table th.metric-header,
.oom-dashboard-table th.metric-header {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
    hyphens: auto;
    max-width: 120px;
    text-align: center;
}

/* Row expansion */
.oom-row-expandable {
    cursor: pointer;
}

.oom-row-expandable:hover {
    background-color: var(--background-modifier-hover);
}

.oom-row-expanded {
    background-color: var(--background-primary-alt);
}

/* Duplicate style - now using the main definition above */

.oom-content-container {
    display: flex;
    align-items: flex-start;
    gap: var(--size-4-1);
}

/* Duplicate style - now using the main definition above */

.oom-content-full {
    white-space: pre-wrap;
    line-height: var(--line-height-normal);
    flex: 1;
}

.oom-content-expanded {
    white-space: normal;
    line-height: var(--line-height-normal);
}

.oom-expand-toggle {
    color: var(--text-accent);
    cursor: pointer;
    font-size: var(--font-ui-small);
    margin-right: var(--size-4-1);
    user-select: none;
    transition: transform 0.2s ease;
}

.oom-expand-toggle:hover {
    color: var(--text-accent-hover);
}

/* Source link styles */
.oom-source-cell {
    white-space: nowrap;
}

.oom-source-link {
    color: var(--text-accent);
    text-decoration: none;
    cursor: pointer;
}

.oom-source-link:hover {
    text-decoration: underline;
}

/* Date and title cells - additional styling */
.oom-date-cell {
    font-family: var(--font-monospace);
}

.oom-title-cell {
    font-weight: var(--font-medium);
    color: var(--text-normal);
}

/* Title link styles */
.oom-title-link {
    color: var(--text-accent);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

.oom-title-link:hover {
    color: var(--text-accent-hover);
    text-decoration: underline;
}

/* Empty state */
.oom-empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: var(--size-4-8);
    font-size: var(--font-ui-medium);
}

/* Loading state */
.oom-dashboard-container.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.oom-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--background-primary-alt);
    z-index: 100;
}

.oom-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--background-modifier-border);
    border-top-color: var(--text-accent);
    border-radius: 50%;
    animation: oom-spin 1s linear infinite;
}

@keyframes oom-spin {
    to { transform: rotate(360deg); }
}

.oom-loading-overlay p {
    margin-top: var(--size-4-3);
    color: var(--text-muted);
}

/* Specific header class styles for better control */
.oom-header-date {
    white-space: nowrap !important;
    text-align: left !important;
}

.oom-header-title {
    white-space: nowrap !important;
    text-align: left !important;
}

.oom-header-content {
    white-space: nowrap !important;
    text-align: left !important;
}

.oom-header-metric {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

/* Error state */
.oom-error-container {
    padding: var(--size-4-4);
    background-color: var(--background-modifier-error);
    border: 1px solid var(--text-error);
    border-radius: var(--radius-m);
    margin: var(--size-4-2);
}

.oom-error-message {
    color: var(--text-error);
    margin: 0;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .oom-dashboard-container {
        padding: var(--size-4-1);
    }
    
    .oom-dashboard-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .oom-filter-buttons {
        width: 100%;
    }
    
    .oom-metrics-table {
        font-size: var(--font-smaller);
    }
    
    .oom-metrics-table th,
    .oom-metrics-table td {
        padding: var(--size-4-1);
    }
    
    /* Ensure 44px minimum touch targets on mobile */
    .oom-refresh-button,
    .oom-expand-toggle {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Accessibility */
.oom-dashboard-container:focus-visible,
.oom-metrics-table th:focus-visible,
.oom-metrics-table td:focus-visible,
.oom-refresh-button:focus-visible {
    outline: 2px solid var(--text-accent);
    outline-offset: 2px;
}

/* Screen reader only content */
.oom-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Theme compatibility for popular themes */
.theme-dark .oom-dashboard-container {
    background-color: var(--background-primary);
}

.theme-light .oom-dashboard-container {
    background-color: var(--background-primary);
}

/* Minimal theme compatibility */
body.minimal-theme .oom-dashboard-container {
    --size-4-1: var(--size-2-1);
    --size-4-2: var(--size-2-2);
    --size-4-3: var(--size-2-3);
}

/* Blue Topaz theme compatibility */
body.blue-topaz-theme .oom-metrics-table th {
    background-color: var(--background-secondary-alt);
}

/* Shimmering Focus theme compatibility */
body.shimmering-focus .oom-dashboard-header {
    border-bottom-color: var(--divider-color);
}

/* ============================================
   PLACEHOLDER STYLES
   ============================================ */

.oom-dashboard-placeholder {
    text-align: center;
    padding: 3rem 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.oom-dashboard-placeholder h3 {
    color: var(--text-normal);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.oom-dashboard-placeholder p {
    color: var(--text-muted);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.oom-dashboard-placeholder ul {
    text-align: left;
    display: inline-block;
    margin-bottom: 1rem;
}

.oom-dashboard-placeholder li {
    color: var(--text-normal);
    margin-bottom: 0.5rem;
}

.oom-dashboard-placeholder .oom-muted {
    font-style: italic;
    font-size: 0.9em;
    margin-top: 2rem;
}

/* ============================================
   ENHANCED DATE NAVIGATOR MODAL STYLES
   ============================================ */

.oomp-dashboard-date-navigator .modal-container {
    max-width: 900px;
    width: 90%;
}

.enhanced-date-navigator-container.dashboard-variant {
    padding: var(--size-4-4);
    max-height: 80vh;
    overflow-y: auto;
}

.dashboard-date-navigator-title {
    text-align: center;
    margin-bottom: var(--size-4-4);
    color: var(--text-normal);
    font-size: var(--h2-size);
}

/* Navigation Header */
.nav-header-section {
    margin-bottom: var(--size-4-3);
    border-bottom: 1px solid var(--background-modifier-border);
    padding-bottom: var(--size-4-3);
}

.nav-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--size-4-2);
    flex-wrap: wrap;
}

.view-mode-controls {
    display: flex;
    gap: var(--size-2-1);
}

.view-mode-controls button {
    padding: var(--size-2-1) var(--size-4-2);
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    color: var(--text-normal);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-mode-controls button:hover {
    background: var(--background-modifier-hover);
}

.view-mode-controls button.active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border-color: var(--interactive-accent);
}

.month-nav-controls {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
}

.nav-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    color: var(--text-normal);
    border-radius: var(--radius-s);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s ease;
}

.nav-btn:hover {
    background: var(--background-modifier-hover);
}

.current-month-display {
    font-weight: 500;
    color: var(--text-normal);
    min-width: 150px;
    text-align: center;
}

/* Selection Controls */
.selection-controls-section {
    margin-bottom: var(--size-4-3);
    padding-bottom: var(--size-4-2);
    border-bottom: 1px solid var(--background-modifier-border-focus);
}

.quick-ranges {
    display: flex;
    align-items: center;
    gap: var(--size-2-1);
    flex-wrap: wrap;
}

.quick-ranges-label {
    color: var(--text-muted);
    font-size: var(--font-smaller);
}

.quick-range-btn {
    padding: var(--size-2-1) var(--size-2-3);
    border: 1px solid var(--background-modifier-border);
    background: var(--background-primary);
    color: var(--text-normal);
    border-radius: var(--radius-s);
    cursor: pointer;
    font-size: var(--font-smaller);
    transition: all 0.2s ease;
}

.quick-range-btn:hover {
    background: var(--background-modifier-hover);
    border-color: var(--interactive-accent);
}

/* Calendar Section */
.calendar-section {
    margin-bottom: var(--size-4-3);
}

.single-month-view,
.dual-month-view,
.quarter-view {
    display: flex;
    gap: var(--size-4-3);
    justify-content: center;
}

.dual-month-view {
    flex-wrap: wrap;
}

.month-container,
.quarter-month {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
}

.month-header {
    text-align: center;
    font-weight: 600;
    color: var(--text-normal);
    margin-bottom: var(--size-4-2);
    font-size: var(--font-ui-medium);
}

.month-header.compact {
    font-size: var(--font-ui-small);
    margin-bottom: var(--size-2-2);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    overflow: hidden;
}

.calendar-grid.compact {
    gap: 0;
}

.day-header {
    background: var(--background-secondary);
    color: var(--text-muted);
    padding: var(--size-2-2);
    text-align: center;
    font-size: var(--font-smaller);
    font-weight: 500;
    border-bottom: 1px solid var(--background-modifier-border);
}

.calendar-day {
    background: var(--background-primary);
    border: 1px solid transparent;
    padding: var(--size-2-2);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-normal);
}

.calendar-grid.compact .calendar-day {
    padding: var(--size-2-1);
    min-height: 24px;
    font-size: var(--font-smaller);
}

.calendar-day:hover {
    background: var(--background-modifier-hover);
    border-color: var(--interactive-accent);
}

.calendar-day.today {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    font-weight: 600;
}

.calendar-day.selected {
    background: var(--interactive-accent-hover);
    color: var(--text-on-accent);
    border-color: var(--interactive-accent);
}

.calendar-day.in-range {
    background: var(--background-modifier-success);
    color: var(--text-normal);
}

.calendar-day.other-month {
    color: var(--text-faint);
    background: var(--background-secondary-alt);
}

/* Action Section */
.action-section {
    border-top: 1px solid var(--background-modifier-border);
    padding-top: var(--size-4-3);
}

.selection-info {
    text-align: center;
    margin-bottom: var(--size-4-2);
    padding: var(--size-2-3) var(--size-4-2);
    background: var(--background-secondary);
    border-radius: var(--radius-s);
    color: var(--text-normal);
    font-weight: 500;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: var(--size-4-2);
}

.action-buttons button {
    padding: var(--size-2-3) var(--size-4-3);
    border: 1px solid var(--background-modifier-border);
    background: var(--background-secondary);
    color: var(--text-normal);
    border-radius: var(--radius-s);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 80px;
}

.action-buttons button:hover {
    background: var(--background-modifier-hover);
}

.action-buttons .primary-btn {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    border-color: var(--interactive-accent);
}

.action-buttons .primary-btn:hover {
    background: var(--interactive-accent-hover);
}

.action-buttons .cancel-btn:hover {
    background: var(--background-modifier-error-hover);
    border-color: var(--background-modifier-error);
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-controls-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .dual-month-view,
    .quarter-view {
        flex-direction: column;
    }
    
    .month-container,
    .quarter-month {
        max-width: none;
    }
    
    .quick-ranges {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .action-buttons {
        flex-direction: column;
    }
}

/* Export Modal Styles */
.oom-export-type-container,
.oom-export-scope-container,
.oom-export-format-container,
.oom-export-chart-tab-container,
.oom-export-options-container,
.oom-export-preview-container {
    margin-bottom: var(--size-4-4);
}

.oom-export-type-container h3,
.oom-export-scope-container h3,
.oom-export-format-container h3,
.oom-export-chart-tab-container h3,
.oom-export-options-container h3,
.oom-export-preview-container h3 {
    margin-bottom: var(--size-4-2);
    font-size: var(--font-ui-medium);
    font-weight: var(--font-semibold);
    color: var(--text-normal);
}

.oom-export-info {
    margin-top: var(--size-4-2);
    padding: var(--size-4-2);
    background-color: var(--background-secondary);
    border-radius: var(--radius-s);
    font-size: var(--font-ui-small);
}

.oom-export-scope-detail {
    color: var(--text-muted);
}

.oom-export-option {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
    margin-bottom: var(--size-4-2);
}

.oom-export-option-label {
    font-size: var(--font-ui-small);
    color: var(--text-normal);
}

.oom-export-preview-info {
    padding: var(--size-4-3);
    background-color: var(--background-secondary);
    border-radius: var(--radius-s);
    border: 1px solid var(--background-modifier-border);
}

.oom-export-preview-text {
    font-family: var(--font-monospace);
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    white-space: pre-line;
}

.oom-export-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--size-4-2);
    margin-top: var(--size-4-4);
    padding-top: var(--size-4-3);
    border-top: 1px solid var(--background-modifier-border);
}

/* =============================================================================
   COMPONENT: DREAM-TAXONOMY (16.3 KB)
   ============================================================================= */
/**
 * Dream Taxonomy Tab Styles
 * 
 * Styles for the Dream Taxonomy tree view in the Control Center.
 * Follows Obsidian's native UI patterns and supports all themes.
 */

/* Main content container */
.oom-dream-taxonomy-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--size-4-4);
    gap: var(--size-4-3);
    overflow: hidden;
}

/* Introduction section */
.oom-taxonomy-introduction {
    margin-bottom: var(--size-4-2);
}

.oom-intro-text {
    color: var(--text-muted);
    font-size: var(--font-ui-medium);
    line-height: var(--line-height-normal);
    text-align: left;
    background: var(--background-modifier-form-field);
    border-radius: var(--radius-s);
    margin: 0;
}

/* Toolbar */
.oom-taxonomy-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--size-4-4);
    flex-shrink: 0;
}

/* Search container */
.oom-search-container {
    flex: 1;
    max-width: 400px;
    position: relative;
    display: flex;
    align-items: center;
}

.oom-search-input {
    width: 100%;
    padding: var(--size-4-2) var(--size-4-3);
    padding-left: var(--size-4-8);
    padding-right: var(--size-4-8);
    background: var(--background-modifier-form-field);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    color: var(--text-normal);
    font-size: var(--font-ui-small);
}

.oom-search-input:focus {
    outline: none;
    border-color: var(--interactive-accent);
    box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
}

.oom-search-input::placeholder {
    color: var(--text-muted);
}

.oom-search-icon {
    position: absolute;
    left: var(--size-4-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    pointer-events: none;
}

.oom-search-clear {
    position: absolute;
    right: var(--size-4-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--size-2-1);
    border-radius: var(--radius-s);
}

.oom-search-clear:hover {
    color: var(--text-normal);
    background: var(--background-modifier-hover);
}

/* Toolbar actions */
.oom-toolbar-actions {
    display: flex;
    gap: var(--size-4-2);
}

.oom-button {
    padding: var(--size-4-2) var(--size-4-3);
    background: var(--interactive-normal);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    color: var(--text-normal);
    cursor: pointer;
    font-size: var(--font-ui-small);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.oom-button:hover:not([disabled]) {
    background: var(--interactive-hover);
    border-color: var(--background-modifier-border-hover);
}

.oom-button:active:not([disabled]) {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

.oom-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.oom-button.oom-primary {
    background: var(--interactive-accent);
    border-color: var(--interactive-accent);
    color: var(--text-on-accent);
}

.oom-button.oom-primary:hover:not([disabled]) {
    background: var(--interactive-accent-hover);
    border-color: var(--interactive-accent-hover);
}

.oom-button.oom-danger {
    background: var(--background-modifier-error);
    border-color: var(--text-error);
    color: var(--text-error);
}

.oom-button.oom-danger:hover:not([disabled]) {
    background: var(--text-error);
    color: var(--text-on-accent);
}

/* Tree container */
.oom-taxonomy-tree-container {
    flex: 1;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    overflow: auto;
    padding: var(--size-4-3);
    min-height: 0;
}

/* Custom scrollbar for tree container */
.oom-taxonomy-tree-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.oom-taxonomy-tree-container::-webkit-scrollbar-track {
    background: transparent;
}

.oom-taxonomy-tree-container::-webkit-scrollbar-thumb {
    background: var(--background-modifier-border);
    border-radius: 4px;
}

.oom-taxonomy-tree-container::-webkit-scrollbar-thumb:hover {
    background: var(--background-modifier-border-hover);
}

/* Tree structure */
.oom-tree-item {
    margin: var(--size-2-1) 0;
}

.oom-tree-node {
    display: flex;
    align-items: center;
    padding: var(--size-4-1) var(--size-4-2);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    min-height: 32px;
}

.oom-tree-node:hover {
    background: var(--background-modifier-hover);
}

.oom-tree-node:active {
    background: var(--background-modifier-active-hover);
}

/* Selected state */
.oom-tree-node.oom-selected {
    background: var(--background-modifier-active-hover);
    box-shadow: inset 2px 0 0 var(--interactive-accent);
}

/* Action buttons */
.oom-node-actions {
    display: none;
    gap: var(--size-2-1);
    margin-left: auto;
    padding-left: var(--size-4-2);
}

.oom-tree-node:hover .oom-node-actions,
.oom-tree-node.oom-selected .oom-node-actions {
    display: flex;
}

.oom-action-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-s);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    background: transparent;
}

.oom-action-btn:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

.oom-action-btn svg {
    width: 14px;
    height: 14px;
}

.oom-edit-btn:hover {
    color: var(--interactive-accent);
}

.oom-add-btn:hover {
    color: var(--text-success);
}

.oom-delete-btn:hover {
    color: var(--text-error);
}

/* Inline editing */
.oom-inline-edit-input {
    background: var(--background-modifier-form-field);
    border: 1px solid var(--interactive-accent);
    border-radius: var(--radius-s);
    padding: 0 var(--size-4-1);
    font-size: inherit;
    color: var(--text-normal);
    outline: none;
    width: auto;
    min-width: 100px;
    max-width: 300px;
}

.oom-inline-edit-input:focus {
    box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
}

/* Drag and drop */
.oom-tree-node.oom-dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.oom-tree-node.oom-drop-zone-active {
    background: var(--background-modifier-active-hover);
    box-shadow: inset 0 0 0 2px var(--interactive-accent);
}

.oom-tree-node[draggable="true"] {
    cursor: grab;
}

.oom-tree-node[draggable="true"]:active {
    cursor: grabbing;
}

/* Expand/collapse icon */
.oom-expand-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.oom-expand-icon svg {
    width: 14px;
    height: 14px;
}

/* Node icons */
.oom-node-icon {
    width: 20px;
    height: 20px;
    margin-right: var(--size-4-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

.oom-node-icon svg {
    width: 16px;
    height: 16px;
}

/* Node label */
.oom-node-label {
    flex: 1;
    font-size: var(--font-ui-small);
    color: var(--text-normal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Node count */
.oom-node-count {
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    margin-left: var(--size-4-2);
    opacity: 0.7;
}

/* Usage count for themes */
.oom-node-usage {
    color: var(--text-accent);
    font-size: var(--font-ui-smaller);
    margin-left: var(--size-4-2);
    padding: 0 var(--size-4-1);
    background: var(--background-modifier-active-hover);
    border-radius: var(--radius-s);
}

/* Nested levels */
.oom-tree-children {
    margin-left: var(--size-4-5);
    display: none;
}

.oom-tree-item.oom-expanded > .oom-tree-children {
    display: block;
}

/* Cluster styling */
.oom-cluster-node {
    font-weight: var(--font-semibold);
}

.oom-cluster-node .oom-node-label {
    font-size: var(--font-ui-medium);
}

.oom-cluster-color {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-s);
    margin-right: var(--size-4-2);
    flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--background-modifier-border);
}

/* Vector styling */
.oom-vector-node {
    font-weight: var(--font-medium);
}

.oom-vector-node .oom-node-label {
    font-size: var(--font-ui-small);
}

/* Theme styling */
.oom-theme-node .oom-node-label {
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
}

.oom-theme-node:hover .oom-node-label {
    color: var(--text-normal);
}

.oom-theme-icon {
    font-size: var(--font-ui-small);
    opacity: 0.5;
}

/* Highlighted search results */
.oom-tree-node.oom-search-match {
    background: var(--background-modifier-active-hover);
}

.oom-tree-node.oom-search-match .oom-node-label {
    color: var(--text-accent);
    font-weight: var(--font-medium);
}

/* Stats panel */
.oom-stats-panel {
    margin-top: var(--size-4-3);
    padding: var(--size-4-3);
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    display: flex;
    gap: var(--size-4-6);
    font-size: var(--font-ui-small);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.oom-stat-item {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
}

.oom-stat-label {
    color: var(--text-muted);
}

.oom-stat-value {
    font-weight: var(--font-semibold);
    color: var(--text-accent);
}

/* Modal enhancements for taxonomy editing */
.oom-taxonomy-edit-modal {
    min-width: 500px;
}

.oom-color-input-container {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
}

.oom-color-input {
    width: 60px;
    height: 32px;
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    cursor: pointer;
}

.oom-color-input:hover {
    border-color: var(--background-modifier-border-hover);
}

.oom-color-input:focus {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

.oom-color-preview {
    padding: var(--size-4-2) var(--size-4-3);
    border-radius: var(--radius-s);
    margin-top: var(--size-4-2);
    text-align: center;
    font-weight: var(--font-semibold);
    color: var(--text-on-accent);
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oom-icon-preview {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
    margin-top: var(--size-4-2);
    padding: var(--size-4-2);
    background: var(--background-secondary);
    border-radius: var(--radius-s);
}

.oom-icon-preview-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-normal);
}

.oom-icon-preview-icon svg {
    width: 20px;
    height: 20px;
}

.oom-icon-preview-label {
    color: var(--text-muted);
    font-size: var(--font-ui-small);
}

.oom-icon-preview-error {
    color: var(--text-error);
    font-size: var(--font-ui-small);
}

.oom-vector-assignment {
    margin-top: var(--size-4-4);
}

.oom-section-title {
    font-size: var(--font-ui-medium);
    font-weight: var(--font-semibold);
    margin-bottom: var(--size-4-2);
    color: var(--text-normal);
}

.oom-section-description {
    color: var(--text-muted);
    font-size: var(--font-ui-small);
    margin-bottom: var(--size-4-3);
}

.oom-vector-list {
    max-height: 300px;
    overflow-y: auto;
    padding: var(--size-4-2);
    background: var(--background-secondary);
    border-radius: var(--radius-s);
    border: 1px solid var(--background-modifier-border);
}

.oom-cluster-group {
    margin-bottom: var(--size-4-3);
}

.oom-cluster-group:last-child {
    margin-bottom: 0;
}

.oom-cluster-group-title {
    font-size: var(--font-ui-small);
    font-weight: var(--font-semibold);
    color: var(--text-accent);
    margin-bottom: var(--size-4-2);
}

.oom-vector-checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-1);
    padding-left: var(--size-4-3);
}

.oom-vector-item {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
}

.oom-vector-checkbox {
    cursor: pointer;
}

.oom-vector-label {
    cursor: pointer;
    font-size: var(--font-ui-small);
    color: var(--text-normal);
}

.oom-vector-label:hover {
    color: var(--text-accent);
}

/* Invalid input styling */
.oom-invalid {
    border-color: var(--text-error) !important;
}

.oom-invalid:focus {
    box-shadow: 0 0 0 2px rgba(var(--text-error-rgb), 0.2) !important;
}

.oom-taxonomy-delete-modal .oom-warning-container {
    display: flex;
    align-items: flex-start;
    gap: var(--size-4-3);
    padding: var(--size-4-4);
    background: var(--background-modifier-error-rgb);
    border-radius: var(--radius-m);
    margin-bottom: var(--size-4-4);
}

.oom-taxonomy-delete-modal .oom-warning-icon {
    color: var(--text-error);
    flex-shrink: 0;
}

.oom-taxonomy-delete-modal .oom-warning-icon svg {
    width: 24px;
    height: 24px;
}

.oom-taxonomy-delete-modal .oom-warning-message {
    flex: 1;
}

.oom-taxonomy-delete-modal .oom-warning-text {
    color: var(--text-normal);
    font-weight: var(--font-semibold);
    margin-bottom: var(--size-4-2);
}

.oom-taxonomy-delete-modal .oom-warning-children {
    color: var(--text-muted);
    margin-bottom: var(--size-4-2);
}

.oom-taxonomy-delete-modal .oom-warning-permanent {
    color: var(--text-error);
    font-weight: var(--font-semibold);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .oom-dream-taxonomy-content {
        padding: var(--size-4-2);
    }

    .oom-taxonomy-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--size-4-2);
    }

    .oom-search-container {
        max-width: none;
    }

    .oom-toolbar-actions {
        flex-wrap: wrap;
        justify-content: center;
    }

    .oom-button {
        flex: 1;
        min-width: 100px;
    }

    .oom-stats-panel {
        flex-direction: column;
        gap: var(--size-4-2);
    }

    /* Larger touch targets on mobile */
    .oom-tree-node {
        min-height: 44px;
        padding: var(--size-4-2) var(--size-4-2);
    }

    .oom-expand-icon {
        width: 44px;
        height: 44px;
    }
    
    /* Always show actions on mobile for touch accessibility */
    .oom-node-actions {
        display: flex;
    }
    
    .oom-action-btn {
        width: 44px;
        height: 44px;
    }
}

/* Accessibility */
.oom-tree-node:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: -2px;
}

.oom-button:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

.oom-search-input:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: -2px;
}

/* Theme-specific adjustments */
.theme-light .oom-cluster-color {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.theme-light .oom-node-usage {
    background: var(--background-secondary-alt);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .oom-tree-node:hover {
        outline: 1px solid var(--text-muted);
    }

    .oom-cluster-color {
        outline: 1px solid var(--text-normal);
    }
}

/* Loading state */
.oom-taxonomy-tree-container.oom-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.oom-taxonomy-tree-container.oom-loading::after {
    content: 'Loading taxonomy...';
    color: var(--text-muted);
    font-size: var(--font-ui-small);
}

/* Empty state */
.oom-taxonomy-tree-container.oom-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-muted);
    font-size: var(--font-ui-small);
    text-align: center;
    padding: var(--size-4-6);
}

/* Tooltip support */
.oom-tree-node[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--size-4-1) var(--size-4-2);
    background: var(--background-modifier-message);
    color: var(--text-normal);
    font-size: var(--font-ui-smaller);
    border-radius: var(--radius-s);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: var(--layer-tooltip);
}

.oom-tree-node[data-tooltip]:hover::after {
    opacity: 1;
}

/* =============================================================================
   COMPONENT: COMPONENTS/ONEIROGRAPH (21.3 KB)
   ============================================================================= */
/**
 * Oneirograph Styles
 * 
 * Visual styling for the Oneirograph force-directed graph visualization.
 * Uses "oom-" prefix for all classes (OneiroMetrics namespace).
 */

/* Main container */
.oom-oneirograph-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--background-primary);
}

/* Canvas container */
.oom-oneirograph-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60px; /* Space for controls */
    overflow: hidden;
}

/* Main canvas */
.oom-oneirograph-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
}

.oom-oneirograph-canvas:active {
    cursor: grabbing;
}

/* Overlay for HTML elements */
.oom-oneirograph-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60px;
    pointer-events: none;
    z-index: 10;
}

/* Controls panel */
.oom-oneirograph-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--background-secondary);
    border-top: 1px solid var(--background-modifier-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--size-4-4);
    gap: var(--size-4-4);
}

/* Zoom controls */
.oom-oneirograph-zoom-controls {
    display: flex;
    gap: var(--size-4-2);
}

.oom-oneirograph-zoom-controls button {
    padding: var(--size-4-1) var(--size-4-2);
    background: var(--interactive-normal);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: all 0.2s ease;
}

.oom-oneirograph-zoom-controls button:hover {
    background: var(--interactive-hover);
    border-color: var(--interactive-accent);
}

.oom-oneirograph-zoom-controls button:active {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

/* Options container */
.oom-oneirograph-options {
    display: flex;
    gap: var(--size-4-4);
    align-items: center;
    flex: 1;
    justify-content: center;
}

/* Option toggle */
.oom-oneirograph-option {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
    font-size: var(--font-ui-small);
    color: var(--text-muted);
}

.oom-oneirograph-option input[type="checkbox"] {
    cursor: pointer;
}

.oom-oneirograph-option span {
    user-select: none;
}

/* FPS counter */
.oom-oneirograph-fps {
    font-size: var(--font-ui-small);
    color: var(--text-faint);
    font-family: var(--font-monospace);
    min-width: 60px;
    text-align: right;
}

/* Loading indicator */
.oom-oneirograph-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--background-secondary);
    padding: var(--size-4-4);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-s);
    z-index: 100;
}

.oom-oneirograph-loading span {
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
}

/* Error message */
.oom-oneirograph-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--background-secondary);
    padding: var(--size-4-4);
    border-radius: var(--radius-m);
    border: 2px solid var(--background-modifier-error);
    box-shadow: var(--shadow-s);
    z-index: 100;
}

.oom-oneirograph-error span {
    color: var(--text-error);
    font-size: var(--font-ui-medium);
}

/* Tooltip styles */
.oom-oneirograph-tooltip {
    position: absolute;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: var(--size-4-2);
    box-shadow: var(--shadow-s);
    max-width: 300px;
    font-size: var(--font-ui-small);
    pointer-events: none;
    z-index: 1000;
}

.oom-tooltip-hidden {
    display: none;
}

.oom-oneirograph-tooltip-title {
    font-weight: var(--font-semibold);
    color: var(--text-normal);
    margin-bottom: var(--size-2-1);
}

.oom-oneirograph-tooltip-type {
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.oom-oneirograph-tooltip-date {
    color: var(--text-muted);
    margin-top: var(--size-2-1);
}

.oom-oneirograph-tooltip-themes {
    color: var(--text-faint);
    margin-top: var(--size-2-1);
    font-style: italic;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .oom-oneirograph-controls {
        height: 80px;
        flex-wrap: wrap;
        padding: var(--size-4-2);
    }
    
    .oom-oneirograph-canvas-container {
        bottom: 80px;
    }
    
    .oom-oneirograph-overlay {
        bottom: 80px;
    }
    
    .oom-oneirograph-options {
        width: 100%;
        justify-content: space-around;
    }
    
    .oom-oneirograph-option {
        font-size: var(--font-ui-smaller);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .oom-oneirograph-canvas {
        outline: 2px solid var(--text-normal);
    }
    
    .oom-oneirograph-controls {
        border-top-width: 2px;
    }
    
    .oom-oneirograph-tooltip {
        border-width: 2px;
    }
}

/* Dark mode specific adjustments */
.theme-dark .oom-oneirograph-container {
    background: var(--background-primary);
}

.theme-dark .oom-oneirograph-loading,
.theme-dark .oom-oneirograph-error {
    background: var(--background-secondary-alt);
}

/* Animation classes */
@keyframes oom-oneirograph-pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.oom-oneirograph-loading span {
    animation: oom-oneirograph-pulse 1.5s ease-in-out infinite;
}

/* Context menu (future feature) */
.oom-oneirograph-context-menu {
    position: absolute;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    box-shadow: var(--shadow-l);
    min-width: 150px;
    z-index: 1001;
    display: none;
}

.oom-oneirograph-context-menu-item {
    padding: var(--size-4-2) var(--size-4-3);
    cursor: pointer;
    transition: background 0.1s ease;
}

.oom-oneirograph-context-menu-item:hover {
    background: var(--background-modifier-hover);
}

/* Performance mode indicator */
.oom-oneirograph-perf-indicator {
    position: absolute;
    top: var(--size-4-2);
    right: var(--size-4-2);
    background: var(--interactive-accent);
    color: var(--text-on-accent);
    padding: var(--size-2-1) var(--size-4-2);
    border-radius: var(--radius-s);
    font-size: var(--font-ui-smaller);
    font-weight: var(--font-semibold);
    pointer-events: none;
    z-index: 50;
}

/* Phase 4: Dream Content Panel */
.oom-dream-content-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 400px;
    max-height: calc(100% - 140px); /* Account for controls at bottom */
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-l);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Dream content header */
.oom-dream-content-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--size-4-4);
    border-bottom: 1px solid var(--background-modifier-border);
    background: var(--background-primary);
    gap: var(--size-4-2);
}

.oom-dream-content-title {
    font-weight: var(--font-semibold);
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
    flex: 1;
    line-height: 1.4;
}

.oom-dream-content-date {
    color: var(--text-muted);
    font-size: var(--font-ui-small);
    white-space: nowrap;
    margin-top: 2px;
}

.oom-dream-content-close {
    color: var(--text-muted);
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-s);
    line-height: 1;
    margin-left: var(--size-4-2);
    transition: all 0.2s ease;
    user-select: none;
}

.oom-dream-content-close:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

/* Dream content body */
.oom-dream-content-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--size-4-4);
}

.oom-dream-content-text {
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
    line-height: 1.6;
    margin-bottom: var(--size-4-6);
    white-space: pre-wrap;
}

/* Dream metrics section */
.oom-dream-content-metrics {
    border-top: 1px solid var(--background-modifier-border);
    padding-top: var(--size-4-4);
}

.oom-dream-content-metrics h4 {
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
    font-weight: var(--font-semibold);
    margin: 0 0 var(--size-4-3) 0;
}

.oom-dream-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--size-2-1) 0;
    border-bottom: 1px solid var(--background-modifier-border-hover);
}

.oom-dream-metric:last-child {
    border-bottom: none;
}

.oom-dream-metric-key {
    color: var(--text-muted);
    font-size: var(--font-ui-small);
    font-weight: var(--font-medium);
    flex: 1;
}

.oom-dream-metric-value {
    color: var(--text-normal);
    font-size: var(--font-ui-small);
    text-align: right;
    max-width: 60%;
    word-wrap: break-word;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .oom-dream-content-panel {
        width: calc(100% - 40px);
        left: 20px;
        right: 20px;
        top: 20px;
        max-height: calc(100% - 120px);
    }
    
    .oom-dream-content-header {
        padding: var(--size-4-3);
    }
    
    .oom-dream-content-body {
        padding: var(--size-4-3);
    }
    
    .oom-dream-metric {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--size-2-1);
    }
    
    .oom-dream-metric-value {
        max-width: 100%;
        text-align: left;
    }
}

/* Dark mode adjustments */
.theme-dark .oom-dream-content-panel {
    background: var(--background-secondary-alt);
    border-color: var(--background-modifier-border-hover);
}

.theme-dark .oom-dream-content-header {
    background: var(--background-primary-alt);
}

/* Phase 4: Search and Filter Panel (Top Left) */
.oom-oneirograph-search-panel {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-l);
    z-index: 100;
    min-width: 300px;
    max-width: 350px;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Search panel visibility states */
.oom-search-panel-hidden {
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
}

.oom-search-panel-visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Info Panel (Top Right) */
.oom-oneirograph-info-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--background-secondary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-l);
    z-index: 100;
    min-width: 320px;
    max-width: 400px;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Info panel visibility states */
.oom-info-panel-hidden {
    opacity: 0;
    transform: translateX(100%);
    pointer-events: none;
}

.oom-info-panel-visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.oom-info-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--size-4-3);
    border-bottom: 1px solid var(--background-modifier-border);
    background: var(--background-modifier-form-field);
    border-radius: var(--radius-m) var(--radius-m) 0 0;
}

.oom-info-panel-title {
    font-weight: var(--font-semibold);
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
}

.oom-info-panel-content {
    padding: var(--size-4-4);
}

.oom-info-panel-text {
    font-weight: var(--font-medium);
    color: var(--text-normal);
    margin-bottom: var(--size-4-3);
}

.oom-info-checklist {
    margin-bottom: var(--size-4-4);
}

.oom-info-check-item {
    display: flex;
    align-items: flex-start;
    gap: var(--size-4-2);
    margin-bottom: var(--size-4-2);
}

.oom-info-check-mark {
    color: var(--color-green);
    font-weight: bold;
    font-size: var(--font-ui-medium);
    flex-shrink: 0;
    margin-top: 1px;
}

.oom-info-check-text {
    color: var(--text-normal);
    font-size: var(--font-ui-small);
    line-height: 1.4;
}

.oom-info-panel-footer {
    border-top: 1px solid var(--background-modifier-border);
    padding-top: var(--size-4-3);
    margin-top: var(--size-4-3);
}

.oom-info-description {
    color: var(--text-muted);
    font-size: var(--font-ui-smaller);
    line-height: 1.4;
    margin-bottom: var(--size-4-3);
}

.oom-info-settings-note {
    color: var(--text-accent);
    font-size: var(--font-ui-smaller);
    font-weight: var(--font-medium);
    line-height: 1.4;
}

.oom-search-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--size-4-3);
    border-bottom: 1px solid var(--background-modifier-border);
    background: var(--background-primary);
    border-radius: var(--radius-m) var(--radius-m) 0 0;
    cursor: pointer;
    user-select: none;
}

.oom-search-panel-header:hover {
    background: var(--background-modifier-hover);
}

.oom-search-panel-title {
    font-weight: var(--font-semibold);
    color: var(--text-normal);
    font-size: var(--font-ui-medium);
}

.oom-oneirograph-search-controls {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-3);
    padding: var(--size-4-4);
    transition: all 0.3s ease;
}

.oom-oneirograph-search-controls.collapsed {
    max-height: 0;
    padding: 0 var(--size-4-4);
    overflow: hidden;
    opacity: 0;
}

/* Search input container */
.oom-search-input-container {
    display: flex;
    align-items: center;
    gap: var(--size-4-2);
}

.oom-search-label {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
    font-weight: var(--font-medium);
    white-space: nowrap;
}

.oom-search-input {
    flex: 1;
    padding: var(--size-2-1) var(--size-4-2);
    font-size: var(--font-ui-small);
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    color: var(--text-normal);
    transition: border-color 0.2s ease;
}

.oom-search-input:focus {
    outline: none;
    border-color: var(--interactive-accent);
    box-shadow: 0 0 0 2px var(--interactive-accent-opacity);
}

.oom-search-input::placeholder {
    color: var(--text-faint);
    font-style: italic;
}

/* Filter container */
.oom-filter-container {
    display: flex;
    flex-direction: column;
    gap: var(--size-4-2);
}

.oom-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--size-2-2);
}

.oom-filter-label {
    font-size: var(--font-ui-small);
    color: var(--text-muted);
    font-weight: var(--font-medium);
}

/* Date inputs */
.oom-date-inputs {
    display: flex;
    gap: var(--size-4-2);
}

.oom-date-input {
    flex: 1;
    padding: var(--size-2-1) var(--size-4-2);
    font-size: var(--font-ui-small);
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    color: var(--text-normal);
    transition: border-color 0.2s ease;
}

.oom-date-input:focus {
    outline: none;
    border-color: var(--interactive-accent);
    box-shadow: 0 0 0 2px var(--interactive-accent-opacity);
}

/* Multi-select controls */
.oom-theme-select,
.oom-cluster-select {
    padding: var(--size-2-1);
    font-size: var(--font-ui-small);
    background: var(--background-primary);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    color: var(--text-normal);
    transition: border-color 0.2s ease;
    min-height: 80px;
    max-height: 120px;
    overflow-y: auto;
}

.oom-theme-select:focus,
.oom-cluster-select:focus {
    outline: none;
    border-color: var(--interactive-accent);
    box-shadow: 0 0 0 2px var(--interactive-accent-opacity);
}

.oom-theme-select option,
.oom-cluster-select option {
    padding: var(--size-2-1) var(--size-4-2);
    background: var(--background-primary);
    color: var(--text-normal);
    line-height: 1.4;
    min-height: 20px;
}

.oom-theme-select option:checked,
.oom-cluster-select option:checked {
    background: var(--interactive-accent);
    color: var(--text-on-accent);
}

/* Active filters */
.oom-active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--size-4-2);
    margin-top: var(--size-4-2);
}

.oom-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--size-2-1);
    background: var(--background-modifier-hover);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-s);
    padding: var(--size-2-1) var(--size-4-2);
    font-size: var(--font-ui-smaller);
    color: var(--text-muted);
    max-width: 200px;
}

.oom-filter-tag-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oom-filter-tag button {
    background: transparent;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    padding: 2px;
    border-radius: var(--radius-s);
    line-height: 1;
    transition: all 0.2s ease;
}

.oom-filter-tag button:hover {
    background: var(--background-modifier-hover);
    color: var(--text-normal);
}

/* Responsive adjustments for search panel */
@media (max-width: 768px) {
    .oom-oneirograph-search-panel {
        top: 10px;
        left: 10px;
        right: 10px;
        min-width: auto;
        max-width: none;
    }
    
    .oom-oneirograph-info-panel {
        top: 10px;
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
    }
    
    .oom-search-panel-header {
        padding: var(--size-4-2);
    }
    
    .oom-oneirograph-search-controls {
        padding: var(--size-4-3);
        gap: var(--size-4-2);
    }
    
    .oom-filter-container {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .oom-filter-group {
        flex: 1;
        min-width: 120px;
    }
    
    .oom-date-inputs {
        flex-direction: column;
        gap: var(--size-2-1);
    }
    
    .oom-active-filters {
        justify-content: flex-start;
        margin-top: var(--size-2-2);
    }
    
    .oom-filter-tag {
        max-width: 150px;
    }
}

/* Dark mode adjustments for search panel */
.theme-dark .oom-oneirograph-search-panel {
    background: var(--background-secondary-alt);
    border-color: var(--background-modifier-border-hover);
}

.theme-dark .oom-search-panel-header {
    background: var(--background-primary-alt);
    border-color: var(--background-modifier-border-hover);
}

/* Dark mode adjustments for info panel */
.theme-dark .oom-oneirograph-info-panel {
    background: var(--background-secondary-alt);
    border-color: var(--background-modifier-border-hover);
}

.theme-dark .oom-info-panel-header {
    background: var(--background-primary-alt);
    border-color: var(--background-modifier-border-hover);
}

.theme-dark .oom-search-input,
.theme-dark .oom-date-input,
.theme-dark .oom-theme-select,
.theme-dark .oom-cluster-select {
    background: var(--background-secondary);
    border-color: var(--background-modifier-border-hover);
}

.theme-dark .oom-filter-tag {
    background: var(--background-modifier-border);
    border-color: var(--background-modifier-border-hover);
}

/* Phase 4: Keyboard Navigation & Focus Styles */
.oom-oneirograph-container:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
}

.oom-oneirograph-canvas:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: -2px;
}

.oom-search-panel-header:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
    background: var(--background-modifier-hover);
}

.oom-search-input:focus-visible,
.oom-date-input:focus-visible,
.oom-theme-select:focus-visible,
.oom-cluster-select:focus-visible {
    outline: 2px solid var(--interactive-accent);
    outline-offset: 2px;
    border-color: var(--interactive-accent);
}

/* Keyboard navigation hints */
.oom-oneirograph-canvas[aria-label]:after {
    content: "";
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: var(--text-faint);
    opacity: 0.3;
    border-radius: 50%;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.oom-oneirograph-canvas:focus[aria-label]:after {
    opacity: 0.8;
}

/* Screen reader only text for keyboard instructions */
.oom-keyboard-instructions {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* High contrast mode for search controls */
@media (prefers-contrast: high) {
    .oom-oneirograph-search-panel {
        border-width: 2px;
    }
    
    .oom-search-panel-header {
        border-bottom-width: 2px;
    }
    
    .oom-oneirograph-info-panel {
        border-width: 2px;
    }
    
    .oom-info-panel-header {
        border-bottom-width: 2px;
    }
    
    .oom-search-input,
    .oom-date-input,
    .oom-theme-select,
    .oom-cluster-select {
        border-width: 2px;
    }
    
    .oom-filter-tag {
        border-width: 2px;
    }
}