/* Sidebar / Navigation module (extracted from styles.css) Depends on theme tokens defined in :root (styles.css) */ /* Chart Navigation Sidebar */ .chart-navigation { width: var(--sidebar-w); /* Leave room for fixed bottom ribbon and safe area to avoid cut off */ height: calc(100vh - var(--topbar-h) - var(--edu-ribbon-h) - env(safe-area-inset-bottom)); /* Theme-aware gradient using CSS variables */ background: linear-gradient( 90deg, var(--header-gradient-left) 0%, var(--header-gradient-right) 100% ); border-right: 1px solid rgba(0, 0, 0, 0.12); position: fixed; left: 0; top: var(--topbar-h); overflow-y: auto; overflow-x: visible; z-index: var(--z-sidebar); box-shadow: var(--shadow-1); transition: transform 0.3s ease; contain: layout style; /* Performance optimization - isolate layout calculations */ will-change: transform; /* Optimize for frequent transforms */ } .chart-navigation.collapsed { transform: translateX(calc(-1 * var(--sidebar-w))); } /* Dark mode is represented by the absence of data-theme="light" on */ html[data-theme='dark'] .chart-navigation { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } /* Ensure full height for chart navigation */ body:has(.chart-navigation) { margin: 0; } .chart-navigation * { box-sizing: border-box; } /* Reset list styles to avoid bullets/radios in nav */ .chart-navigation ul, .chart-navigation li, .sidebar-nav-panel ul, .sidebar-nav-panel li { list-style: none; margin: 0; padding: 0; } /* General sidebar text on UND Gray chrome */ html[data-theme='dark'] .chart-navigation { color: rgba(255, 255, 255, 0.92); } html:not([data-theme='dark']) .chart-navigation { color: var(--text); } /* Nav items and their children use near-white only in dark theme */ html[data-theme='dark'] .chart-navigation .section-nav-item, html[data-theme='dark'] .chart-navigation .section-nav-item * { color: rgba(255, 255, 255, 0.92); } /* Keep case header card using default text color (it has a light background) */ .chart-navigation .case-header, .chart-navigation .case-header * { color: var(--text); } /* Optional: titles inside the gray zone can be pure white */ .chart-navigation .nav-section-title, .chart-navigation .sidebar-title { color: #ffffff; } /* Note Progress header geometry */ .chart-navigation .note-progress-header { margin: 0 0 12px 0; padding: 8px 12px; font-size: 0.875rem; /* 14px */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 4px; text-align: center; } /* Theme-aware colors: subtle UND gray background, UND green text/border */ html[data-theme='dark'] .chart-navigation .note-progress-header { background: rgb(174 174 174 / 12%); /* transparent UND gray */ color: #ffffff; /* white text for readability in dark theme */ border-bottom: 2px solid var(--und-green); } html:not([data-theme='dark']) .chart-navigation .note-progress-header { background: rgb(174 174 174 / 12%); /* transparent UND gray */ color: #ffffff; /* white text per request in light theme */ border-bottom: 2px solid var(--und-green); } /* Artifact pills styling */ .chart-navigation .artifact-list { display: flex; flex-direction: column; gap: 4px; /* tighter stack for table-like density */ } /* Wrapper for artifacts area to control spacing above/below */ .chart-navigation .artifact-block { margin: 4px 0 6px 0; /* reduce space above first pill and below footer */ } .chart-navigation .artifact-pill { width: 100%; text-align: left; padding: 6px 10px; /* more condensed vertically */ font-size: 1rem; /* 16px, larger text while staying compact */ display: flex; align-items: center; gap: 8px; /* keep spacing tight */ justify-content: flex-start !important; min-height: 32px; /* override base .btn height for compact rows */ line-height: 1.25; } .chart-navigation .artifact-pill svg { flex-shrink: 0; opacity: 0.8; width: 20px; height: 20px; /* scale icon up to match larger font */ } /* Tighter footer area under list (Add Artifact button wrapper) */ .chart-navigation .artifact-add-footer { display: flex; justify-content: center; margin: 4px 0 4px 0; /* decrease space beneath add button */ } /* White panel for navigation list inside gray sidebar */ .sidebar-nav-panel { /* Comfortable outer spacing so gradient shows around cards */ margin: 8px 8px 12px 8px; padding: 12px; /* Safe bottom space so sticky footer actions don't collide with fixed page footer/ribbon */ /* Modest safe space so content doesn't collide with bottom ribbon */ padding-bottom: calc(var(--edu-ribbon-h) + env(safe-area-inset-bottom) + 16px); background: transparent; /* let gradient show through */ border-radius: 0; box-shadow: none; overflow: visible; } /* Ensure base text color is dark in light theme within the white-panel area */ html:not([data-theme='dark']) .sidebar-nav-panel { color: var(--text-on-light); } /* Case Info pill (card) */ .case-info-card { background: var(--surface-light); border: 1px solid var(--surface-light-border); border-radius: 12px; padding: 12px; margin: 8px 0 12px 0; box-shadow: none; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .case-info-card:hover { background-color: var(--surface-light-hover); border-color: var(--surface-light-border); } .case-info-card:focus-visible { outline: 3px solid var(--und-orange); outline-offset: 2px; } .case-info-card .case-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .case-info-card .case-title-text { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); } .case-info-grid { display: grid; grid-template-columns: 1fr; gap: 6px; } .case-info-row { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 8px; } .case-info-row .label { color: var(--text-secondary); font-weight: 600; font-size: 0.75rem; /* 12px */ } .case-info-row .value { color: var(--text); font-size: 0.75rem; /* 12px */ } /* Ensure text uses dark-on-light inside white card */ .sidebar-nav-panel .case-info-card, .sidebar-nav-panel .case-info-card * { color: var(--text); } /* Dark theme: case info card should be dark */ html[data-theme='dark'] .sidebar-nav-panel .case-info-card { background: var(--panel); border-color: var(--border); } html[data-theme='dark'] .sidebar-nav-panel .case-info-card:hover { background: var(--bg-hover); border-color: var(--border); } /* (Removed) Autosave status pill styles */ /* Flat list items in white panel */ .sidebar-nav-panel .section-nav-item { background: var(--surface-light); border: 1px solid var(--surface-light-border); /* use light surface border */ box-shadow: none; /* keep flat card look */ border-radius: 10px; } .sidebar-nav-panel .section-nav-item + .section-nav-item { margin-top: 6px; } .sidebar-nav-panel .section-nav-item:hover { background-color: var(--surface-light-hover); border-color: var(--surface-light-border); box-shadow: none; } .sidebar-nav-panel .section-nav-item.active { background: var(--und-green-light); border-color: var(--und-green); border-width: 2px; box-shadow: none; } /* Dark theme: tracker pills should be dark with lighter text */ html[data-theme='dark'] .sidebar-nav-panel .section-nav-item { background: var(--panel); border: 1px solid var(--border); } html[data-theme='dark'] .sidebar-nav-panel .section-nav-item:hover { background-color: var(--bg-hover); border-color: var(--border); } /* Navigation item base styles */ .sidebar-nav-panel .section-nav-item { color: var(--text-on-light); } .sidebar-nav-panel .section-nav-item * { color: inherit; } .sidebar-nav-panel .section-nav-item .nav-progress-text { color: var(--text-secondary-on-light); opacity: 0.9; } .sidebar-nav-panel .section-nav-item .nav-label { color: var(--text-on-light); } /* Dark theme overrides with higher specificity */ html[data-theme='dark'] .sidebar-nav-panel .section-nav-item { color: var(--text); } html[data-theme='dark'] .sidebar-nav-panel .section-nav-item .nav-progress-text { color: var(--text-secondary); opacity: 0.95; } /* Chart navigation items - using proper cascade without !important */ .chart-navigation .section-nav-item { color: var(--text-on-light); } .chart-navigation .section-nav-item * { color: inherit; } .chart-navigation .section-nav-item .nav-progress-text { color: var(--text-secondary-on-light); } /* Dark theme chart navigation */ html[data-theme='dark'] .chart-navigation .section-nav-item { color: var(--text); } html[data-theme='dark'] .chart-navigation .section-nav-item .nav-progress-text { color: var(--text-secondary); } /* Subsection list visuals inside the panel (rendered on dark gradient in both themes) */ .sidebar-nav-panel .subsection-toc { border-left: 2px solid rgba(255, 255, 255, 0.25); } .sidebar-nav-panel .subsection-item { color: rgba(255, 255, 255, 0.92); } .sidebar-nav-panel .subsection-item:hover { color: #ffffff; background-color: rgba(255, 255, 255, 0.08); } /* Case header (within sidebar) */ .case-header { padding: var(--space-5) var(--space-4); border-bottom: 1px solid var(--border); background: var(--bg-secondary); position: sticky; top: 0; z-index: var(--z-case-header); margin: 0; } /* Patient sticky header border (applied to #patient-sticky-header) */ /* Patient sticky header border handled in styles.css for unified geometry */ /* Sidebar "Case File" header styles */ .case-file-header { position: sticky; top: 0; /* sticks to top within the fixed sidebar scroll area */ z-index: var(--z-case-header); height: var(--header-h); padding: 0; /* no top padding above the tab */ margin: 0; /* avoid collapsing margins/gaps */ display: flex; /* robust centering */ align-items: center; /* vertical centering */ justify-content: center; /* center horizontally */ } .case-file-badge { display: flex; /* fill and center content */ align-items: center; justify-content: center; width: 100%; height: 100%; /* fill the header height */ margin: 0; /* flush to sidebar edges */ text-align: center; padding: 0 16px; /* only horizontal padding; vertical is from height */ background: var(--und-green); color: #ffffff; border: var(--header-b) solid transparent; border-bottom-color: #ffffff; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 900; font-size: 1.125rem; /* 18px */ border-radius: 0; /* align as a continuous row with the patient header */ } /* Case editing form in sidebar */ .case-header input, .case-header select { font-family: inherit; background: var(--input-bg); border: 1px solid var(--input-border); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .case-header input:focus-visible, .case-header select:focus-visible { outline: 2px solid var(--und-green); outline-offset: 2px; } .case-header input:focus, .case-header select:focus { border-color: var(--und-green); box-shadow: 0 0 0 2px var(--und-green-light); } .case-header button:hover { background-color: var(--bg-hover) !important; } /* Match dark state consistently (no data-theme="light") */ html[data-theme='dark'] .case-header { background: var(--bg-secondary); } /* ======================================== SIDEBAR NAVIGATION WITH PROGRESS ======================================== */ .section-nav-item { display: flex; align-items: center; padding: var(--space-3) var(--space-4); margin: var(--space-1) 0; border-radius: var(--radius-md); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .section-nav-item:hover { background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); } .section-nav-item.active { background: transparent; border-left-color: var(--und-green); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); } /* Tighter rhythm between items on solid gray */ .section-nav-item + .section-nav-item { margin-top: 6px; } /* Subsection list */ .subsection-toc { margin-left: var(--space-6); margin-top: var(--space-2); padding-left: var(--space-3); border-left: 2px solid rgba(255, 255, 255, 0.15); } .subsection-item { padding: var(--space-1) var(--space-2); font-size: 0.75rem; /* 12px */ color: rgba(255, 255, 255, 0.8); cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; border-radius: var(--radius-sm); } .subsection-item:hover { color: #ffffff; background-color: rgba(255, 255, 255, 0.08); } /* Neutralize auto-highlight of current subsection for a simpler look */ .sidebar-nav-panel .subsection-item.current-subsection { color: rgba(255, 255, 255, 0.85); background: transparent; border: none; } /* Keyboard focus visibility */ .sidebar-nav-panel .section-nav-item:focus-visible, .sidebar-nav-panel .subsection-item:focus-visible { outline: 3px solid var(--und-orange); outline-offset: 2px; } /* High-contrast preference support */ @media (prefers-contrast: more) { .sidebar-nav-panel { box-shadow: 0 0 0 2px var(--neutral-400); } .sidebar-nav-panel .section-nav-item { border-color: var(--neutral-500); background: var(--neutral-100); } .sidebar-nav-panel .section-nav-item.active { background: #ffffff; border-color: var(--und-green); box-shadow: 0 0 0 3px rgba(0, 154, 68, 0.25); } .sidebar-nav-panel .subsection-item.current-subsection { background: transparent; border-color: transparent; } } /* Progress percentage text styling */ html[data-theme='dark'] .chart-navigation .nav-progress-text { color: rgba(255, 255, 255, 0.85); } /* .section-anchor scroll offsets are defined in styles.css to keep a single source of truth */ /* Keep left border accent only in light theme */ html:not([data-theme='dark']) .sidebar-nav-panel .section-nav-item:not(.active) { border-left: 1px solid var(--neutral-500); /* UND gray spectrum */ } html:not([data-theme='dark']) .sidebar-nav-panel .section-nav-item:hover:not(.active) { border-left-color: var(--neutral-600); /* UND gray spectrum */ } /* Theme-scoped tracker pills to avoid conflicts */ html:not([data-theme='dark']) .sidebar-nav-panel .section-nav-item { border: 1px solid var(--surface-light-border) !important; background: var(--surface-light) !important; box-shadow: none !important; } html:not([data-theme='dark']) .sidebar-nav-panel .section-nav-item:hover { border-color: var(--surface-light-border) !important; background-color: var(--surface-light-hover) !important; /* not dark in light theme */ } html:not([data-theme='dark']) .sidebar-nav-panel .section-nav-item.active { border: 2px solid var(--und-green) !important; background: var(--surface-light) !important; /* keep active pill white */ box-shadow: none !important; } /* Keep active state white even on hover in light theme */ html:not([data-theme='dark']) .sidebar-nav-panel .section-nav-item.active:hover { background: var(--surface-light) !important; } html[data-theme='dark'] .sidebar-nav-panel .section-nav-item { border: 1px solid var(--border) !important; background: var(--panel) !important; /* dark pills in dark theme */ box-shadow: none !important; } html[data-theme='dark'] .sidebar-nav-panel .section-nav-item:hover { border-color: var(--border) !important; background-color: var(--bg-hover) !important; } html[data-theme='dark'] .sidebar-nav-panel .section-nav-item.active { border: 2px solid var(--und-green) !important; background: var(--und-green-light) !important; /* subtle green tint */ box-shadow: none !important; } /* Navigation text styles with consistent hierarchy */ .nav-text-primary { font-size: 0.875rem; font-weight: 600; color: var(--text); line-height: 1.4; } .nav-text-secondary { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; } .nav-text-meta { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; display: block; line-height: 1.4; } .nav-success-indicator { color: var(--success); font-size: 0.875rem; font-weight: 600; margin-right: 6px; } /* Chart navigation specific */ .case-info-header { margin: 0 0 var(--space-2) 0; font-size: 1rem; font-weight: 600; color: var(--text); flex: 1; line-height: 1.3; } .case-info-description { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; } /* Mobile-first sidebar behavior is now handled by mobile-patch-v2.css */