/* MatBlazor/MDC component style overrides */ /* CityFab menu: MatMenu portals .mdc-menu into , outside the scoped component tree, so ::deep in CityFab.razor.css never reaches it. Global rule required. */ .city-fab-menu.mdc-menu { transform: translateY(-50px) !important; z-index: 75; & .mdc-list { padding: 0; & .mdc-list-item { padding: 0; & .mdc-button { padding: 8px 24px; height: 100%; width: 100%; justify-content: flex-start; } } } } /* RouteFilters lives inside MatExpansionPanelDetails, which MatBlazor renders as .mat-expansion-panel__content outside the RouteFilters scoped-CSS tree, so ::deep can't reach it. Scoped to the transit-map accordion so other expansion panels in the app are unaffected. */ .transit-map__accordion .mat-expansion-panel__content { max-height: 60vh; overflow-y: auto !important; overflow-x: hidden; } .mdc-button { border-radius: 4px; } .mdc-card { border-radius: 8px; } /* Dark mode overrides — scoped to .mj-dark set on the MainLayout wrapper */ .mj-theme { min-height: 100vh; background-color: var(--background); color: var(--on-background); } .mj-dark { --background: #1A1C1E; --on-background: #E2E2E6; background-color: #1A1C1E; color: #E2E2E6; } .mj-dark .mat-accordion .mat-expansion-panel { border-bottom-color: rgba(255, 255, 255, 0.12); } .mj-dark .mat-accordion .mat-expansion-panel__content + .mat-expansion-panel__actions { border-top-color: rgba(255, 255, 255, 0.12); } .mj-dark .mat-accordion .mat-expansion-panel__summary .after { color: rgba(226, 226, 230, 0.7); } .mj-dark .mat-accordion .mat-expansion-panel__header { color: #E2E2E6; } .mj-dark .mdc-checkbox .mdc-checkbox__background { border-color: rgba(226, 226, 230, 0.7) !important; } .mj-dark .mdc-form-field > label { color: #E2E2E6; }