/* ============================================================================= * Allpinion — Appleish theme * * Loaded after Radzen + material3 so this file wins specificity. Override-only; * doesn't try to replicate the entire Radzen token graph. Keep this thin — * if a component needs invasive restyling, use a dedicated component CSS file * rather than piling selectors here. * * Layered intent: * 1. Tokens — CSS custom props + system-font stack * 2. Radzen — overrides for the loudest Radzen primitives * 3. Layout — sidebar/rail, content max-width, mobile breakpoints * 4. Motion — transitions, skeleton shimmer, view transitions * 5. Utilities — helper classes wizard pages use * ============================================================================= */ /* ============================================================================ * 1. Tokens * ============================================================================ */ :root { /* Type — system stack so the app picks up SF Pro on macOS, Segoe on Windows. */ --ap-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", "Inter", system-ui, sans-serif; --ap-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; --ap-text-xs: 12px; --ap-text-sm: 14px; --ap-text-base: 17px; --ap-text-lg: 20px; --ap-text-xl: 24px; --ap-text-2xl: 28px; --ap-text-3xl: 34px; --ap-text-4xl: 44px; --ap-leading-tight: 1.2; --ap-leading-normal: 1.55; /* Color — mostly grayscale + one accent. Semantic colors for status only. */ --ap-bg: #fbfbfd; --ap-bg-elevated: #ffffff; --ap-bg-sunken: #f4f4f7; --ap-bg-tinted: rgba(0, 0, 0, 0.04); --ap-text: #1d1d1f; --ap-text-secondary: #6e6e73; --ap-text-tertiary: #86868b; --ap-border: rgba(0, 0, 0, 0.08); --ap-border-strong: rgba(0, 0, 0, 0.16); --ap-accent: #0071e3; --ap-accent-hover: #0077ed; --ap-accent-pressed: #006edb; --ap-accent-soft: rgba(0, 113, 227, 0.08); --ap-success: #34c759; --ap-warning: #ff9f0a; --ap-danger: #ff3b30; --ap-info: #5ac8fa; /* Radius — consistent: cards 12, inputs 8, pills 999 */ --ap-radius-sm: 8px; --ap-radius: 12px; --ap-radius-lg: 16px; --ap-radius-pill: 999px; /* Shadow — soft, double-layered */ --ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --ap-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04); --ap-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.08); --ap-shadow-focus: 0 0 0 4px var(--ap-accent-soft); /* Spacing — 4px base */ --ap-space-1: 4px; --ap-space-2: 8px; --ap-space-3: 12px; --ap-space-4: 16px; --ap-space-5: 20px; --ap-space-6: 24px; --ap-space-8: 32px; --ap-space-10: 40px; --ap-space-12: 48px; --ap-space-16: 64px; /* Motion — spring-ish curves */ --ap-ease: cubic-bezier(0.4, 0, 0.2, 1); --ap-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ap-duration-fast: 120ms; --ap-duration: 200ms; --ap-duration-slow: 400ms; /* Tap target floor — Apple HIG says 44px */ --ap-tap-min: 44px; /* Bridges to Radzen tokens — minimal set; the rest cascades from these. */ --rz-primary: var(--ap-accent); --rz-primary-light: var(--ap-accent-hover); --rz-primary-dark: var(--ap-accent-pressed); --rz-secondary: var(--ap-text-secondary); --rz-base: var(--ap-bg); --rz-base-100: var(--ap-bg); --rz-base-200: var(--ap-bg-sunken); --rz-base-300: var(--ap-border); --rz-text-color: var(--ap-text); --rz-text-secondary-color: var(--ap-text-secondary); --rz-text-disabled-color: var(--ap-text-tertiary); --rz-border-radius: var(--ap-radius); --rz-card-border-radius: var(--ap-radius); --rz-card-shadow: var(--ap-shadow); } /* Dark theme — driven by `data-theme="dark"` on . _Host.cshtml sets it from the cookie on first paint (no FOUC); App.razor mirrors it on toggle. Aligns ap-* tokens with the Radzen theme actually loaded, so the shell can't drift out of sync with widgets (the old `prefers-color-scheme` media query could trigger ap-dark on a light-OS-defaulted Radzen — visible mismatch). */ :root[data-theme="dark"] { /* Shell — true-black OLED-friendly */ --ap-bg: #000000; --ap-bg-elevated: #1c1c1e; --ap-bg-sunken: #2c2c2e; --ap-bg-tinted: rgba(255, 255, 255, 0.06); --ap-text: #f5f5f7; --ap-text-secondary: #a1a1a6; --ap-text-tertiary: #6e6e73; --ap-border: rgba(255, 255, 255, 0.1); --ap-border-strong: rgba(255, 255, 255, 0.18); /* Accent — Apple-vivid: saturated SF blue, brighter than v0 (#0a84ff). */ --ap-accent: #1e90ff; --ap-accent-hover: #4aa8ff; --ap-accent-pressed: #1a7fdb; --ap-accent-soft: rgba(30, 144, 255, 0.20); /* Status — vivid variants tuned for chips/badges/cards on dark. The light theme keeps the more muted Apple HIG values (see :root) — these override only in dark so the same components read as 'lively' against #000. */ --ap-success: #30d158; --ap-warning: #ffb340; --ap-danger: #ff453a; --ap-info: #64d2ff; --ap-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --ap-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3); --ap-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.5); } /* ============================================================================ * 2. Base + Radzen overrides * ============================================================================ */ html, body { font-family: var(--ap-font); font-size: var(--ap-text-base); line-height: var(--ap-leading-normal); color: var(--ap-text); background: var(--ap-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, .rz-text-h1, .rz-text-h2, .rz-text-h3 { font-family: var(--ap-font-display); font-weight: 700; letter-spacing: -0.022em; line-height: var(--ap-leading-tight); color: var(--ap-text); } h1, .rz-text-h1 { font-size: var(--ap-text-3xl); } h2, .rz-text-h2 { font-size: var(--ap-text-2xl); } h3, .rz-text-h3 { font-size: var(--ap-text-xl); } /* Buttons — primary stands out, others are ghost. */ .rz-button { border-radius: var(--ap-radius-sm); font-family: var(--ap-font); font-size: var(--ap-text-sm); font-weight: 500; min-height: var(--ap-tap-min); padding: 0 var(--ap-space-5); transition: transform var(--ap-duration-fast) var(--ap-ease), box-shadow var(--ap-duration-fast) var(--ap-ease), background var(--ap-duration-fast) var(--ap-ease); box-shadow: none; border: none; } .rz-button.rz-button-sm, .rz-button-md.rz-button-extrasmall { min-height: 36px; padding: 0 var(--ap-space-3); } .rz-button.rz-primary { background: var(--ap-accent); color: white; font-weight: 600; } .rz-button.rz-primary:hover { background: var(--ap-accent-hover); transform: translateY(-1px); box-shadow: var(--ap-shadow-sm); } .rz-button.rz-primary:active { background: var(--ap-accent-pressed); transform: translateY(0); } .rz-button.rz-secondary, .rz-button.rz-light { background: var(--ap-bg-tinted); color: var(--ap-text); } .rz-button.rz-secondary:hover, .rz-button.rz-light:hover { background: var(--ap-border-strong); } .rz-button:focus-visible { outline: none; box-shadow: var(--ap-shadow-focus); } /* Inputs — taller, softer, with focus glow instead of border-color shift. */ .rz-textbox, .rz-textarea, .rz-dropdown, .rz-numeric, .rz-datepicker .rz-textbox { border-radius: var(--ap-radius-sm); border: 1px solid var(--ap-border); background: var(--ap-bg-elevated); font-family: var(--ap-font); font-size: var(--ap-text-base); min-height: var(--ap-tap-min); padding: 10px var(--ap-space-4); transition: border-color var(--ap-duration) var(--ap-ease), box-shadow var(--ap-duration) var(--ap-ease); } .rz-textbox:focus, .rz-textarea:focus, .rz-dropdown:focus-within, .rz-numeric:focus-within { border-color: var(--ap-accent); box-shadow: var(--ap-shadow-focus); outline: none; } /* Form fields — more breathing room, kinder labels */ .rz-form-field { margin-bottom: var(--ap-space-5); } .rz-form-field-label { color: var(--ap-text-secondary); font-size: var(--ap-text-sm); font-weight: 500; margin-bottom: var(--ap-space-2); } /* Cards — soft shadow, generous padding, subtle hover lift */ .rz-card { border-radius: var(--ap-radius); border: 1px solid var(--ap-border); background: var(--ap-bg-elevated); box-shadow: var(--ap-shadow-sm); padding: var(--ap-space-6); transition: transform var(--ap-duration) var(--ap-ease), box-shadow var(--ap-duration) var(--ap-ease); } .rz-card.ap-interactive:hover { transform: translateY(-2px); box-shadow: var(--ap-shadow); cursor: pointer; } /* Badges as pills */ .rz-badge { border-radius: var(--ap-radius-pill); padding: 2px 10px; font-size: var(--ap-text-xs); font-weight: 500; letter-spacing: 0.01em; } /* Sidebar / panel menu — quieter chrome */ .demos-sidebar { background: var(--ap-bg-elevated); border-right: 1px solid var(--ap-border); } .rz-panel-menu .rz-navigation-item-link { border-radius: var(--ap-radius-sm); padding: 10px var(--ap-space-4); margin: 1px var(--ap-space-2); font-weight: 500; color: var(--ap-text); transition: background var(--ap-duration-fast) var(--ap-ease); } .rz-panel-menu .rz-navigation-item-link:hover { background: var(--ap-bg-tinted); } .rz-panel-menu .rz-state-active > .rz-navigation-item-link, .rz-panel-menu .rz-navigation-item-wrapper-active > .rz-navigation-item-link { background: var(--ap-accent-soft); color: var(--ap-accent); } /* Quick-access pin star. The "add" (unpinned) star is hidden by default to remove permanent visual clutter, and revealed only while the menu row is hovered (or the star is keyboard- focused). The pinned star always stays visible so you can still see/unpin favourites. */ .ap-pin-star--unpinned { opacity: 0; transition: opacity var(--ap-duration-fast, 0.12s) var(--ap-ease, ease); } .rz-panel-menu .rz-navigation-item-link:hover .ap-pin-star--unpinned, .ap-pin-star--unpinned:hover, .ap-pin-star--unpinned:focus-visible { opacity: 0.55; } /* Touch / no-hover devices can't reveal on hover — keep the add-star visible so pinning still works. */ @media (hover: none) { .ap-pin-star--unpinned { opacity: 0.55; } } /* Header strip — flat, no heavy shadow */ .rz-header { background: var(--ap-bg-elevated); border-bottom: 1px solid var(--ap-border); box-shadow: none; } /* Data grid — keep dense for expert mode but soften the chrome */ .rz-data-grid, .rz-data-grid .rz-paginator { background: var(--ap-bg-elevated); border-radius: var(--ap-radius); border: 1px solid var(--ap-border); } .rz-data-grid thead th { background: var(--ap-bg-sunken); color: var(--ap-text-secondary); font-size: var(--ap-text-sm); font-weight: 600; text-transform: none; } /* Steps — quieter when AdminWizard uses them */ .rz-steps-item .rz-steps-number { background: var(--ap-bg-sunken); color: var(--ap-text-secondary); border: none; } .rz-steps-item.rz-state-active .rz-steps-number { background: var(--ap-accent); color: white; } /* ============================================================================ * 3. Layout * ============================================================================ */ /* Content container — readable line length on wide screens */ .ap-content { max-width: 1280px; margin-left: auto; margin-right: auto; padding: var(--ap-space-6) var(--ap-space-4); } .ap-content-wide { max-width: 1600px; } .ap-content-narrow { max-width: 640px; } /* Mobile breakpoint utilities */ @media (max-width: 768px) { /* Hide the wide demos-nav search; we'll add a compact replacement later. */ .ap-hide-on-mobile { display: none !important; } .rz-card { padding: var(--ap-space-4); } .ap-content { padding: var(--ap-space-4) var(--ap-space-3); } /* Bigger touch targets on mobile */ .rz-button { min-height: 48px; } .rz-textbox, .rz-textarea, .rz-dropdown { min-height: 48px; } /* Sidebar becomes a sheet on mobile (Radzen handles overlay; widen for thumbs) */ .demos-sidebar { width: 80vw !important; max-width: 320px; } } @media (min-width: 769px) { .ap-show-on-mobile { display: none !important; } } /* Bottom tab bar slot — the actual component lands in D-7 */ .ap-bottom-tabs { display: none; } @media (max-width: 768px) { .ap-bottom-tabs { display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: var(--ap-bg-elevated); border-top: 1px solid var(--ap-border); z-index: 100; padding-bottom: env(safe-area-inset-bottom); } /* Body needs bottom padding so content isn't hidden behind the tab bar */ body.ap-has-bottom-tabs { padding-bottom: 64px; } } /* ============================================================================ * 4. Motion * ============================================================================ */ /* Skeleton shimmer for loading placeholders */ @keyframes ap-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .ap-skeleton { background: linear-gradient( 90deg, var(--ap-bg-sunken) 0%, var(--ap-bg-tinted) 50%, var(--ap-bg-sunken) 100% ); background-size: 200% 100%; animation: ap-shimmer 1.4s var(--ap-ease) infinite; border-radius: var(--ap-radius-sm); } /* Page transitions — subtle slide + fade. Hosts opt-in via .ap-page-transition */ .ap-page-transition { animation: ap-page-in var(--ap-duration-slow) var(--ap-ease-spring) both; } @keyframes ap-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Fade-in for cards in a feed */ .ap-fade-in { animation: ap-fade-in var(--ap-duration-slow) var(--ap-ease) both; } @keyframes ap-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Reduce motion for users who ask for it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================================ * 5. Utilities * ============================================================================ */ /* Hero card on the home feed — bigger, attention-grabbing */ .ap-hero-card { background: linear-gradient(135deg, var(--ap-bg-elevated), var(--ap-bg-sunken)); border-radius: var(--ap-radius-lg); padding: var(--ap-space-8) var(--ap-space-6); border: 1px solid var(--ap-border); box-shadow: var(--ap-shadow); } /* Section title — used between rails on the home feed */ .ap-section-title { font-family: var(--ap-font-display); font-size: var(--ap-text-xl); font-weight: 700; letter-spacing: -0.012em; margin: var(--ap-space-8) 0 var(--ap-space-4); } /* Card rail — responsive grid that wraps to fill available width without truncating cards. On wide screens cards span more columns; on narrow screens they stack. Mobile keeps the carousel feel via overflow scroll. */ .ap-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ap-space-3); padding-bottom: var(--ap-space-4); } .ap-rail > * { min-width: 0; } @media (max-width: 768px) { .ap-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--ap-space-3)); padding-left: var(--ap-space-3); padding-right: var(--ap-space-3); scrollbar-width: none; } .ap-rail::-webkit-scrollbar { display: none; } .ap-rail > * { flex: 0 0 80%; scroll-snap-align: start; } } /* Save status pill — used by the D-3 component */ .ap-pill { display: inline-flex; align-items: center; gap: var(--ap-space-2); border-radius: var(--ap-radius-pill); padding: 4px 12px; font-size: var(--ap-text-sm); color: var(--ap-text-secondary); background: var(--ap-bg-tinted); } .ap-pill-success { color: var(--ap-success); background: rgba(52, 199, 89, 0.1); } .ap-pill-warning { color: var(--ap-warning); background: rgba(255, 159, 10, 0.1); } .ap-pill-danger { color: var(--ap-danger); background: rgba(255, 59, 48, 0.1); } /* Floating action button — used by Copilot sheet entry in D-5 */ .ap-fab { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--ap-accent); color: white; box-shadow: var(--ap-shadow-lg); display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; transition: transform var(--ap-duration) var(--ap-ease-spring); z-index: 50; } .ap-fab:hover { transform: scale(1.05); } .ap-fab:active { transform: scale(0.96); } @media (max-width: 768px) { .ap-fab { bottom: 80px; } /* clear the bottom tab bar */ } /* Sticky bottom CTA — wizards lean on this for the primary action */ .ap-sticky-cta { position: sticky; bottom: 0; background: linear-gradient(to top, var(--ap-bg-elevated) 80%, transparent); padding: var(--ap-space-4) 0; margin-top: var(--ap-space-6); z-index: 10; } /* Empty state */ .ap-empty { text-align: center; padding: var(--ap-space-12) var(--ap-space-4); color: var(--ap-text-secondary); } .ap-empty-illustration { width: 120px; height: 120px; margin: 0 auto var(--ap-space-4); background: var(--ap-bg-sunken); border-radius: var(--ap-radius); display: flex; align-items: center; justify-content: center; color: var(--ap-text-tertiary); font-size: 14px; } .ap-empty-title { font-size: var(--ap-text-xl); font-weight: 600; color: var(--ap-text); margin-bottom: var(--ap-space-2); } .ap-empty-message { margin-bottom: var(--ap-space-6); max-width: 360px; margin-left: auto; margin-right: auto; } /* Header logo + toggle row — sits in the top-left column. The logo links to / and the sidebar toggle (auth users only) sits next to it without overlapping. Logo hides on small screens so the toggle gets the full slot. */ .ap-header-left { display: flex !important; align-items: center; gap: 0.5rem; flex-wrap: nowrap; min-width: 0; } .ap-header-logo { display: inline-flex; align-items: center; line-height: 0; padding: 0 8px; border-radius: 8px; flex: 0 0 auto; transition: opacity 0.15s ease, background-color 0.15s ease; } .ap-header-logo:hover { opacity: 0.85; background-color: rgba(0, 0, 0, 0.04); } .ap-header-logo:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 2px; } .ap-header-logo img { height: 32px; width: auto; display: block; } /* Dark theme: logo.png is a near-black monochrome wordmark that disappears on the dark header. Render a light variant in place: brightness(0) flattens it to black (preserving alpha), invert(1) flips that to near-white. */ :root[data-theme="dark"] .ap-header-logo img { filter: brightness(0) invert(1); } /* Home anon hero — West Elm-inspired split: editorial text + map preview. Two columns on desktop, stacks on narrow viewports. The map is a bounded preview (not page-filling) and breathes with whitespace around it. */ .ap-home-hero-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--ap-space-8); align-items: stretch; background: linear-gradient(135deg, var(--ap-bg-elevated), var(--ap-bg-sunken)); border: 1px solid var(--ap-border); border-radius: var(--ap-radius-lg); padding: var(--ap-space-8); box-shadow: var(--ap-shadow); margin-bottom: var(--ap-space-8); } .ap-home-hero-text { display: flex; flex-direction: column; justify-content: center; gap: var(--ap-space-4); padding: var(--ap-space-2) 0; } .ap-home-hero-eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--ap-text-xs); font-weight: 600; color: var(--ap-accent); margin: 0; } .ap-home-hero-title { font-family: var(--ap-font-display); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -0.022em; margin: 0; } .ap-home-hero-body { color: var(--ap-text-muted, var(--ap-on-surface-variant)); margin: 0; max-width: 38ch; } .ap-home-hero-actions { display: flex; gap: var(--ap-space-3); flex-wrap: wrap; margin-top: var(--ap-space-3); } .ap-home-hero-map { position: relative; min-height: 420px; border-radius: var(--ap-radius); overflow: hidden; border: 1px solid var(--ap-border); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); background: var(--ap-bg-sunken); } .ap-home-hero-map-link { position: absolute; right: 12px; bottom: 12px; z-index: 500; background: rgba(255, 255, 255, 0.95); border-radius: 999px; padding: 8px 14px; font-size: 0.85rem; font-weight: 500; color: var(--ap-accent); text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); display: inline-flex; align-items: center; gap: 6px; transition: transform 0.15s ease, box-shadow 0.15s ease; } .ap-home-hero-map-link:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22); } @media (max-width: 900px) { .ap-home-hero-split { grid-template-columns: 1fr; padding: var(--ap-space-6) var(--ap-space-5); gap: var(--ap-space-6); } .ap-home-hero-map { min-height: 300px; } } /* ============================================================================ * Admin layout utilities (transport screens and future admin-only pages) * * Prefixed `el-` (element) to distinguish from the `ap-` design-system classes. * All values resolve through ap-* tokens so they automatically follow the theme. * ============================================================================ */ /* Page container — full-bleed admin pages, same max-width as ap-content */ .el-page { max-width: 1280px; margin-left: auto; margin-right: auto; padding: var(--ap-space-6) var(--ap-space-4); } /* Toolbar — flex strip housing a heading, status badge and action buttons */ .el-toolbar { display: flex; align-items: center; gap: var(--ap-space-4); margin-bottom: var(--ap-space-5); flex-wrap: wrap; } .el-toolbar h1 { margin: 0; flex: 1 1 auto; } /* Hint — small secondary-text paragraph for contextual help */ .el-hint { font-size: var(--ap-text-sm); color: var(--ap-text-secondary); margin: var(--ap-space-2) 0; } /* Count — muted inline count used inside section headings */ .el-count { font-size: var(--ap-text-sm); color: var(--ap-text-secondary); font-weight: 400; } /* Row — flex item row for selected-object lists and plan-entry rows */ .el-row { display: flex; align-items: center; gap: var(--ap-space-3); padding: var(--ap-space-2) 0; border-bottom: 1px solid var(--ap-border); } .el-row:last-child { border-bottom: none; } /* Muted — secondary text colour; same semantic role as ap-text-secondary */ .el-muted { color: var(--ap-text-secondary); font-size: var(--ap-text-sm); } /* Status badge — neutral pill for transport status ("Open", "Released") */ .el-status-badge { display: inline-flex; align-items: center; border-radius: var(--ap-radius-pill); padding: 2px 10px; font-size: var(--ap-text-sm); font-weight: 500; background: var(--ap-bg-tinted); color: var(--ap-text-secondary); } /* Callout — block notice; --info tints with the ap-info colour */ .el-callout { border-radius: var(--ap-radius-sm); padding: var(--ap-space-4); margin-bottom: var(--ap-space-5); border: 1px solid var(--ap-border); background: var(--ap-bg-tinted); font-size: var(--ap-text-sm); } /* Info variant: soft tint using the ap-info hue (same pattern as ap-pill-*) */ .el-callout--info { border-color: rgba(90, 200, 250, 0.4); background: rgba(90, 200, 250, 0.08); } :root[data-theme="dark"] .el-callout--info { border-color: rgba(100, 210, 255, 0.35); background: rgba(100, 210, 255, 0.08); } /* Transport builder — three-column layout: type tree | object picker | selected list */ .transport-builder-grid { display: grid; grid-template-columns: 220px 1fr 260px; gap: var(--ap-space-5); align-items: start; min-height: 400px; } @media (max-width: 900px) { .transport-builder-grid { grid-template-columns: 1fr; } } /* ============================================================================ * Map pin halos (Path B — event-type color encoding) * * Leaflet sets Icon.ClassName on the marker . We use drop-shadow filters * so the halo follows the PNG's alpha silhouette (not a rectangle), works on * both light and dark tiles, and needs no PNG regeneration. Two stops give a * crisp inner ring + softer outer glow. Class names are emitted by * IndexPage.ResolveHaloClassName — keep the variants in sync. * ============================================================================ */ .ap-pin-halo--blue { filter: drop-shadow(0 0 2px #1e90ff) drop-shadow(0 0 5px rgba( 30,144,255,0.75)); } .ap-pin-halo--green { filter: drop-shadow(0 0 2px #30d158) drop-shadow(0 0 5px rgba( 48,209, 88,0.75)); } .ap-pin-halo--lime { filter: drop-shadow(0 0 2px #a8e063) drop-shadow(0 0 5px rgba(168,224, 99,0.80)); } .ap-pin-halo--red { filter: drop-shadow(0 0 2px #ff453a) drop-shadow(0 0 5px rgba(255, 69, 58,0.75)); } .ap-pin-halo--yellow { filter: drop-shadow(0 0 2px #ffd60a) drop-shadow(0 0 5px rgba(255,214, 10,0.80)); } .ap-pin-halo--orange { filter: drop-shadow(0 0 2px #ffb340) drop-shadow(0 0 5px rgba(255,179, 64,0.80)); } .ap-pin-halo--purple { filter: drop-shadow(0 0 2px #bf5af2) drop-shadow(0 0 5px rgba(191, 90,242,0.75)); } .ap-pin-halo--pink { filter: drop-shadow(0 0 2px #ff375f) drop-shadow(0 0 5px rgba(255, 55, 95,0.75)); } .ap-pin-halo--cyan { filter: drop-shadow(0 0 2px #64d2ff) drop-shadow(0 0 5px rgba(100,210,255,0.80)); } .ap-pin-halo--indigo { filter: drop-shadow(0 0 2px #5e5ce6) drop-shadow(0 0 5px rgba( 94, 92,230,0.75)); }