/* ===================================================================== * Zeno RMM — Material Design 3 (dark) stylesheet * -------------------------------------------------------------------- * Token set follows the M3 design-token spec (m3.material.io). * Two schemes are defined: dark (default) and light (auto-applied via * `prefers-color-scheme: light` AND a manual `[data-theme="light"]` * toggle hook on for runtime switching in the future). * * Layout uses a 56dp top app bar, an 80dp navigation rail at >= 840dp * viewport, collapsing to a modal navigation drawer below that. * No external CSS frameworks — vanilla CSS variables, no preprocessor. * ===================================================================== */ /* ---------- 1. Type & icon fonts (loaded by in base.html) ---------- */ /* Roboto Flex, Material Symbols Outlined, JetBrains Mono */ /* ---------- 2. M3 color tokens — DARK scheme (default) ---------- */ :root, [data-theme="dark"] { /* Primary (M3 cyan-blue tone 80 for dark) */ --md-sys-color-primary: #a8c7fa; --md-sys-color-on-primary: #062e6f; --md-sys-color-primary-container: #1a4588; --md-sys-color-on-primary-container: #d3e3fd; /* Secondary */ --md-sys-color-secondary: #bfc6dc; --md-sys-color-on-secondary: #293041; --md-sys-color-secondary-container: #3f4359; --md-sys-color-on-secondary-container: #dbe2f9; /* Tertiary (accent) */ --md-sys-color-tertiary: #ffb787; --md-sys-color-on-tertiary: #4e2500; --md-sys-color-tertiary-container: #6f3a00; --md-sys-color-on-tertiary-container: #ffdcc2; /* Error */ --md-sys-color-error: #f2b8b5; --md-sys-color-on-error: #601410; --md-sys-color-error-container: #8c1d18; --md-sys-color-on-error-container: #f9dedc; /* Success / warn (M3 has no semantic roles; we extend with a fixed mapping used by chips and toasts) */ --md-sys-color-success: #7ddc9b; --md-sys-color-on-success: #003918; --md-sys-color-success-container: #1c5128; --md-sys-color-warn: #f5c168; --md-sys-color-on-warn: #3a2a00; --md-sys-color-warn-container: #5b3f00; /* Surfaces (M3 elevation tone palette) */ --md-sys-color-background: #111318; --md-sys-color-on-background: #e2e2e9; --md-sys-color-surface: #111318; --md-sys-color-on-surface: #e2e2e9; --md-sys-color-surface-variant: #44474f; --md-sys-color-on-surface-variant: #c4c6d0; --md-sys-color-surface-dim: #111318; --md-sys-color-surface-bright: #37393f; --md-sys-color-surface-container-lowest: #0c0e13; --md-sys-color-surface-container-low: #191c20; --md-sys-color-surface-container: #1d2024; --md-sys-color-surface-container-high: #272a2f; --md-sys-color-surface-container-highest:#32353a; --md-sys-color-inverse-surface: #e2e2e9; --md-sys-color-inverse-on-surface: #2e3135; --md-sys-color-inverse-primary: #1a5fb4; --md-sys-color-outline: #8e9099; --md-sys-color-outline-variant: #44474f; --md-sys-color-scrim: #000000; /* State-layer opacities (M3 spec) */ --md-sys-state-hover-state-layer-opacity: 0.08; --md-sys-state-focus-state-layer-opacity: 0.12; --md-sys-state-pressed-state-layer-opacity: 0.12; --md-sys-state-dragged-state-layer-opacity: 0.16; /* Elevation shadows (M3 dark scheme) */ --md-sys-elevation-0: none; --md-sys-elevation-1: 0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15); --md-sys-elevation-2: 0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15); --md-sys-elevation-3: 0 1px 3px 0 rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15); --md-sys-elevation-4: 0 2px 3px 0 rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15); --md-sys-elevation-5: 0 4px 4px 0 rgba(0,0,0,.30), 0 8px 12px 6px rgba(0,0,0,.15); /* Shape scale */ --md-sys-shape-corner-none: 0; --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 9999px; /* Type scale (M3 spec) */ --md-sys-typescale-display-large-size: 57px; --md-sys-typescale-display-large-weight: 400; --md-sys-typescale-display-large-line: 64px; --md-sys-typescale-display-large-track: -0.25px; --md-sys-typescale-headline-large-size: 32px; --md-sys-typescale-headline-large-weight: 400; --md-sys-typescale-headline-large-line: 40px; --md-sys-typescale-headline-medium-size: 28px; --md-sys-typescale-headline-medium-weight: 400; --md-sys-typescale-headline-medium-line: 36px; --md-sys-typescale-headline-small-size: 24px; --md-sys-typescale-headline-small-weight: 400; --md-sys-typescale-headline-small-line: 32px; --md-sys-typescale-title-large-size: 22px; --md-sys-typescale-title-large-weight: 400; --md-sys-typescale-title-large-line: 28px; --md-sys-typescale-title-medium-size: 16px; --md-sys-typescale-title-medium-weight: 500; --md-sys-typescale-title-medium-line: 24px; --md-sys-typescale-title-medium-track: 0.15px; --md-sys-typescale-title-small-size: 14px; --md-sys-typescale-title-small-weight: 500; --md-sys-typescale-title-small-line: 20px; --md-sys-typescale-title-small-track: 0.1px; --md-sys-typescale-body-large-size: 16px; --md-sys-typescale-body-large-weight: 400; --md-sys-typescale-body-large-line: 24px; --md-sys-typescale-body-large-track: 0.5px; --md-sys-typescale-body-medium-size: 14px; --md-sys-typescale-body-medium-weight: 400; --md-sys-typescale-body-medium-line: 20px; --md-sys-typescale-body-medium-track: 0.25px; --md-sys-typescale-body-small-size: 12px; --md-sys-typescale-body-small-weight: 400; --md-sys-typescale-body-small-line: 16px; --md-sys-typescale-body-small-track: 0.4px; --md-sys-typescale-label-large-size: 14px; --md-sys-typescale-label-large-weight: 500; --md-sys-typescale-label-large-line: 20px; --md-sys-typescale-label-large-track: 0.1px; --md-sys-typescale-label-medium-size: 12px; --md-sys-typescale-label-medium-weight: 500; --md-sys-typescale-label-medium-line: 16px; --md-sys-typescale-label-medium-track: 0.5px; --md-sys-typescale-label-small-size: 11px; --md-sys-typescale-label-small-weight: 500; --md-sys-typescale-label-small-line: 16px; --md-sys-typescale-label-small-track: 0.5px; /* Motion easing (M3 spec) */ --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --md-sys-motion-duration-short1: 50ms; --md-sys-motion-duration-short2: 100ms; --md-sys-motion-duration-short3: 150ms; --md-sys-motion-duration-short4: 200ms; --md-sys-motion-duration-medium1: 250ms; --md-sys-motion-duration-medium2: 300ms; --md-sys-motion-duration-medium3: 350ms; --md-sys-motion-duration-medium4: 400ms; --md-sys-motion-duration-long1: 450ms; --md-sys-motion-duration-long2: 500ms; --md-sys-motion-duration-long3: 550ms; --md-sys-motion-duration-long4: 600ms; /* Layout dims */ --md-layout-top-app-bar-height: 64px; --md-layout-nav-rail-width: 80px; --md-layout-nav-rail-width-extended: 220px; --md-layout-content-max-width: 1280px; --md-layout-gutter: 24px; --md-layout-card-padding: 20px; } /* ---------- 3. M3 color tokens — LIGHT scheme (auto via media query) ---------- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --md-sys-color-primary: #1a5fb4; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #d3e3fd; --md-sys-color-on-primary-container: #001b3d; --md-sys-color-secondary: #595e72; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #dbe2f9; --md-sys-color-on-secondary-container: #161b2c; --md-sys-color-tertiary: #7c5800; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #ffdcc2; --md-sys-color-on-tertiary-container: #271900; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #f9dedc; --md-sys-color-on-error-container: #410002; --md-sys-color-success: #006d3c; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #9bf6b6; --md-sys-color-warn: #7c5800; --md-sys-color-on-warn: #ffffff; --md-sys-color-warn-container: #ffdcc2; --md-sys-color-background: #fbfcff; --md-sys-color-on-background: #1a1c1e; --md-sys-color-surface: #fbfcff; --md-sys-color-on-surface: #1a1c1e; --md-sys-color-surface-variant: #e0e2ec; --md-sys-color-on-surface-variant: #44474f; --md-sys-color-surface-dim: #d9dbe1; --md-sys-color-surface-bright: #fbfcff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f4f4fa; --md-sys-color-surface-container: #eeeff4; --md-sys-color-surface-container-high: #e8e9ee; --md-sys-color-surface-container-highest:#e2e3e8; --md-sys-color-inverse-surface: #2f3033; --md-sys-color-inverse-on-surface: #f1f0f4; --md-sys-color-inverse-primary: #a8c7fa; --md-sys-color-outline: #74777f; --md-sys-color-outline-variant: #c4c6d0; --md-sys-color-scrim: #000000; --md-sys-elevation-1: 0 1px 2px 0 rgba(0,0,0,.10), 0 1px 3px 1px rgba(0,0,0,.06); --md-sys-elevation-2: 0 1px 2px 0 rgba(0,0,0,.10), 0 2px 6px 2px rgba(0,0,0,.08); --md-sys-elevation-3: 0 4px 8px 3px rgba(0,0,0,.10); --md-sys-elevation-4: 0 6px 10px 4px rgba(0,0,0,.10); --md-sys-elevation-5: 0 8px 12px 6px rgba(0,0,0,.10); } } /* ---------- 4. Base / reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--md-sys-color-background); color: var(--md-sys-color-on-background); font-family: "Roboto Flex", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: var(--md-sys-typescale-body-medium-size); line-height: var(--md-sys-typescale-body-medium-line); font-weight: var(--md-sys-typescale-body-medium-weight); letter-spacing: var(--md-sys-typescale-body-medium-track); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; /* app shell handles its own scroll regions */ } a { color: var(--md-sys-color-primary); text-decoration: none; } a:hover { text-decoration: underline; } .material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; user-select: none; vertical-align: middle; } ::selection { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } /* Scrollbar (webkit) */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--md-sys-color-outline-variant); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--md-sys-color-outline); } ::-webkit-scrollbar-track { background: transparent; } /* ---------- 5. App shell: top app bar + nav rail + main ---------- */ .app-shell { display: grid; grid-template-columns: var(--md-layout-nav-rail-width) 1fr; grid-template-rows: var(--md-layout-top-app-bar-height) 1fr; grid-template-areas: "rail topbar" "rail main"; height: 100vh; background: var(--md-sys-color-background); } body.no-rail .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; } body.is-login .app-shell { grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "main"; } body.is-login .app-topbar, body.is-login .app-rail { display: none; } /* Top app bar */ .app-topbar { grid-area: topbar; display: flex; align-items: center; gap: 16px; padding: 0 16px 0 12px; background: var(--md-sys-color-surface-container); border-bottom: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface); z-index: 5; } .app-topbar__title { font: var(--md-sys-typescale-title-large-weight) var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line) var(--md-sys-typescale-title-large-weight), var(--md-sys-typescale-title-large-weight); font-weight: 500; margin: 0; } .app-topbar__brand { display: flex; align-items: center; gap: 8px; padding-right: 12px; border-right: 1px solid var(--md-sys-color-outline-variant); margin-right: 4px; height: 32px; } .app-topbar__brand-mark { width: 28px; height: 28px; border-radius: var(--md-sys-shape-corner-small); background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary)); display: grid; place-items: center; color: var(--md-sys-color-on-primary); font-weight: 700; font-size: 14px; } .app-topbar__spacer { flex: 1; } /* Search field inside top bar */ .md-search { position: relative; width: 320px; } .md-search input { width: 100%; height: 40px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-high); border: none; color: var(--md-sys-color-on-surface); padding: 0 16px 0 44px; font: inherit; transition: background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); } .md-search input::placeholder { color: var(--md-sys-color-on-surface-variant); } .md-search input:focus { outline: 2px solid var(--md-sys-color-primary); outline-offset: -2px; } .md-search .material-symbols-outlined { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--md-sys-color-on-surface-variant); pointer-events: none; } /* User menu */ .app-topbar__user { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--md-sys-shape-corner-full); background: transparent; color: var(--md-sys-color-on-surface); border: none; cursor: pointer; font: inherit; transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .app-topbar__user:hover { background: var(--md-sys-color-surface-container-high); } .app-topbar__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); display: grid; place-items: center; font-size: 14px; font-weight: 600; } /* Navigation rail (left) */ .app-rail { grid-area: rail; background: var(--md-sys-color-surface-container); border-right: 1px solid var(--md-sys-color-outline-variant); display: flex; flex-direction: column; padding: 12px 0 16px; overflow-y: auto; z-index: 4; } .app-rail__brand { display: none; /* brand lives in topbar; rail is icon-only */ } .app-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .app-rail__link { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; margin: 0 12px; border-radius: var(--md-sys-shape-corner-large); color: var(--md-sys-color-on-surface-variant); text-decoration: none; font: var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line) "Roboto Flex", sans-serif; font-weight: 500; position: relative; transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .app-rail__link .material-symbols-outlined { font-size: 24px; transition: font-variation-settings var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .app-rail__link:hover { background: rgba(232,234,246,0.08); color: var(--md-sys-color-on-surface); text-decoration: none; } .app-rail__link.is-active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } .app-rail__link.is-active .material-symbols-outlined { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; } .app-rail__link.is-soon { opacity: 0.55; cursor: not-allowed; } .app-rail__link.is-soon:hover { background: transparent; } .app-rail__link .material-symbols-outlined + .app-rail__label { margin-top: 2px; } .app-rail__divider { height: 1px; margin: 12px 16px; background: var(--md-sys-color-outline-variant); } .app-rail__footer { margin-top: auto; padding: 0 12px; } /* Main content area */ .app-main { grid-area: main; overflow-y: auto; overflow-x: hidden; padding: 32px clamp(16px, 4vw, 40px); background: var(--md-sys-color-background); } .app-main__inner { max-width: var(--md-layout-content-max-width); margin: 0 auto; display: flex; flex-direction: column; gap: 24px; } /* Page header */ .page-header { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; } .page-header__title { font: var(--md-sys-typescale-headline-small-size)/var(--md-sys-typescale-headline-small-line) "Roboto Flex", sans-serif; font-weight: 500; margin: 0; color: var(--md-sys-color-on-background); } .page-header__subtitle { margin: 0; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line) "Roboto Flex", sans-serif; } .page-header__spacer { flex: 1; } /* ---------- 6. M3 Buttons ---------- */ .md-button { --_height: 40px; --_bg: transparent; --_fg: var(--md-sys-color-primary); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 64px; height: var(--_height); padding: 0 20px; border-radius: var(--md-sys-shape-corner-full); background: var(--_bg); color: var(--_fg); border: 1px solid transparent; font: 500 var(--md-sys-typescale-label-large-size)/20px "Roboto Flex", sans-serif; letter-spacing: var(--md-sys-typescale-label-large-track); cursor: pointer; text-decoration: none; position: relative; transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .md-button .material-symbols-outlined { font-size: 18px; } .md-button::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .md-button:hover::before { opacity: var(--md-sys-state-hover-state-layer-opacity); } .md-button:focus-visible::before { opacity: var(--md-sys-state-focus-state-layer-opacity); } .md-button:active::before { opacity: var(--md-sys-state-pressed-state-layer-opacity); } .md-button:disabled, .md-button[aria-disabled="true"] { opacity: 0.38; pointer-events: none; } .md-button--filled { --_bg: var(--md-sys-color-primary); --_fg: var(--md-sys-color-on-primary); } .md-button--filled:hover { box-shadow: var(--md-sys-elevation-1); } .md-button--tonal { --_bg: var(--md-sys-color-secondary-container); --_fg: var(--md-sys-color-on-secondary-container); } .md-button--outlined { --_fg: var(--md-sys-color-primary); border-color: var(--md-sys-color-outline); } .md-button--text { --_fg: var(--md-sys-color-primary); padding: 0 12px; } .md-button--danger { --_bg: var(--md-sys-color-error-container); --_fg: var(--md-sys-color-on-error-container); } .md-button--icon { width: 40px; min-width: 40px; padding: 0; border-radius: 50%; } .md-button--fab { --_height: 56px; width: 56px; min-width: 56px; border-radius: var(--md-sys-shape-corner-large); box-shadow: var(--md-sys-elevation-3); --_bg: var(--md-sys-color-primary-container); --_fg: var(--md-sys-color-on-primary-container); } .md-button--fab:hover { box-shadow: var(--md-sys-elevation-4); } .md-button--fab-extended { width: auto; padding: 0 20px; gap: 12px; font-weight: 500; } /* ---------- 7. M3 Cards ---------- */ .md-card { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); border-radius: var(--md-sys-shape-corner-medium); box-shadow: var(--md-sys-elevation-1); overflow: hidden; transition: box-shadow var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard), transform var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard); } .md-card--outlined { box-shadow: none; border: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container-low); } .md-card--elevated { background: var(--md-sys-color-surface-container-low); } .md-card--hover:hover { box-shadow: var(--md-sys-elevation-2); transform: translateY(-1px); } .md-card__header { display: flex; align-items: center; gap: 16px; padding: 16px 20px; } .md-card__title { font: 500 var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line) "Roboto Flex", sans-serif; margin: 0; color: var(--md-sys-color-on-surface); } .md-card__subtitle { font: var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line) "Roboto Flex", sans-serif; color: var(--md-sys-color-on-surface-variant); margin: 0; } .md-card__body { padding: 8px 20px 20px; } .md-card__body--flush { padding: 0; } .md-card__actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 8px 12px 12px; } /* KPI card variant */ .md-kpi { display: flex; flex-direction: column; gap: 8px; padding: var(--md-layout-card-padding); background: var(--md-sys-color-surface-container); border-radius: var(--md-sys-shape-corner-medium); box-shadow: var(--md-sys-elevation-1); min-height: 124px; position: relative; overflow: hidden; } .md-kpi__label { font: var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line) "Roboto Flex", sans-serif; color: var(--md-sys-color-on-surface-variant); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; } .md-kpi__label .material-symbols-outlined { font-size: 18px; } .md-kpi__value { font: 500 36px/44px "Roboto Flex", sans-serif; color: var(--md-sys-color-on-surface); font-feature-settings: "tnum" 1; } .md-kpi__value--good { color: var(--md-sys-color-success); } .md-kpi__value--bad { color: var(--md-sys-color-error); } .md-kpi__value--warn { color: var(--md-sys-color-warn); } .md-kpi__delta { font: var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line) "Roboto Flex", sans-serif; color: var(--md-sys-color-on-surface-variant); display: flex; align-items: center; gap: 4px; } .md-kpi__delta--up { color: var(--md-sys-color-success); } .md-kpi__delta--down { color: var(--md-sys-color-error); } .md-kpi__icon-bg { position: absolute; right: -8px; bottom: -16px; width: 96px; height: 96px; border-radius: 50%; background: var(--md-sys-color-primary-container); display: grid; place-items: center; opacity: 0.4; } .md-kpi__icon-bg .material-symbols-outlined { font-size: 48px; color: var(--md-sys-color-on-primary-container); font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48; } .md-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } /* ---------- 8. M3 Text fields ---------- */ .md-field { position: relative; display: flex; flex-direction: column; margin-top: 16px; } .md-field__input { width: 100%; height: 56px; padding: 16px 16px 8px; background: var(--md-sys-color-surface-container-high); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0; border-bottom-width: 2px; color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-large-size)/24px "Roboto Flex", sans-serif; outline: none; transition: border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .md-field__input::placeholder { color: transparent; } .md-field__input:hover { background: var(--md-sys-color-surface-container-highest); } .md-field__input:focus { border-color: var(--md-sys-color-primary); border-bottom-color: var(--md-sys-color-primary); background: var(--md-sys-color-surface-container-highest); } .md-field__label { position: absolute; left: 16px; top: 18px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-large-size)/24px "Roboto Flex", sans-serif; pointer-events: none; transform-origin: left top; transition: transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .md-field__input:focus + .md-field__label, .md-field__input:not(:placeholder-shown) + .md-field__label { transform: translateY(-10px) scale(0.75); color: var(--md-sys-color-on-surface-variant); } .md-field__input:focus + .md-field__label { color: var(--md-sys-color-primary); } .md-field__supporting { margin: 4px 16px 0; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small-size)/16px "Roboto Flex", sans-serif; min-height: 16px; } .md-field--invalid .md-field__input, .md-field--invalid .md-field__input:focus { border-color: var(--md-sys-color-error); } .md-field--invalid .md-field__label { color: var(--md-sys-color-error); } .md-field--invalid .md-field__supporting { color: var(--md-sys-color-error); } /* Outlined variant */ .md-field--outlined .md-field__input { background: transparent; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-extra-small); padding: 14px 16px; height: 56px; } .md-field--outlined .md-field__label { background: var(--md-sys-color-background); padding: 0 4px; left: 12px; top: 16px; } .md-field--outlined .md-field__input:focus + .md-field__label, .md-field--outlined .md-field__input:not(:placeholder-shown) + .md-field__label { transform: translateY(-26px) scale(0.75); } /* ---------- 9. M3 Chips (status pills) ---------- */ .md-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); font: 500 var(--md-sys-typescale-label-small-size)/16px "Roboto Flex", sans-serif; letter-spacing: 0.5px; border: 1px solid var(--md-sys-color-outline-variant); } .md-chip .material-symbols-outlined { font-size: 14px; } .md-chip--good { background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success); border-color: transparent; } .md-chip--bad { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error); border-color: transparent; } .md-chip--warn { background: var(--md-sys-color-warn-container); color: var(--md-sys-color-on-warn); border-color: transparent; } .md-chip--info { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); border-color: transparent; } .md-chip--muted { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); } /* Live status dot */ .md-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px rgba(0,0,0,0.05); display: inline-block; flex-shrink: 0; } /* ---------- 10. M3 Data tables ---------- */ .md-table-wrap { overflow: auto; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container); border: 1px solid var(--md-sys-color-outline-variant); } .md-table { width: 100%; border-collapse: separate; border-spacing: 0; font: var(--md-sys-typescale-body-medium-size)/20px "Roboto Flex", sans-serif; } .md-table thead th { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); text-align: left; font: 500 var(--md-sys-typescale-label-large-size)/20px "Roboto Flex", sans-serif; letter-spacing: 0.1px; padding: 12px 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); position: sticky; top: 0; white-space: nowrap; } .md-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface); vertical-align: middle; } .md-table tbody tr:last-child td { border-bottom: none; } .md-table tbody tr { transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .md-table tbody tr:hover { background: rgba(232,234,246,0.06); } .md-table tbody tr.is-row-link { cursor: pointer; } .md-table .num { font-feature-settings: "tnum" 1; text-align: right; font-variant-numeric: tabular-nums; } .md-table .empty { text-align: center; padding: 64px 16px; color: var(--md-sys-color-on-surface-variant); } /* ---------- 11. M3 Tabs (secondary) ---------- */ .md-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); margin-bottom: 16px; } .md-tab { --_height: 48px; display: inline-flex; align-items: center; gap: 8px; height: var(--_height); padding: 0 16px; color: var(--md-sys-color-on-surface-variant); font: 500 var(--md-sys-typescale-label-large-size)/20px "Roboto Flex", sans-serif; text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); position: relative; background: transparent; border-top: none; border-left: none; border-right: none; cursor: pointer; } .md-tab:hover { color: var(--md-sys-color-on-surface); text-decoration: none; background: rgba(232,234,246,0.06); } .md-tab.is-active { color: var(--md-sys-color-primary); border-bottom-color: var(--md-sys-color-primary); } /* ---------- 12. M3 List items ---------- */ .md-list { list-style: none; margin: 0; padding: 0; } .md-list-item { display: flex; align-items: center; gap: 16px; padding: 12px 16px; min-height: 56px; border-bottom: 1px solid var(--md-sys-color-outline-variant); transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .md-list-item:last-child { border-bottom: none; } .md-list-item:hover { background: rgba(232,234,246,0.05); } .md-list-item__leading { color: var(--md-sys-color-on-surface-variant); } .md-list-item__leading .material-symbols-outlined { font-size: 24px; } .md-list-item__body { flex: 1; min-width: 0; } .md-list-item__title { font: var(--md-sys-typescale-body-large-size)/24px "Roboto Flex", sans-serif; color: var(--md-sys-color-on-surface); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .md-list-item__subtitle { font: var(--md-sys-typescale-body-small-size)/16px "Roboto Flex", sans-serif; color: var(--md-sys-color-on-surface-variant); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .md-list-item__trailing { display: flex; align-items: center; gap: 8px; color: var(--md-sys-color-on-surface-variant); } /* ---------- 13. Code / monospace block ---------- */ .md-code { background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface); border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small); padding: 12px 16px; font: 13px/20px "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-x: auto; white-space: pre-wrap; word-break: break-all; } .md-code--inline { padding: 2px 6px; display: inline; white-space: pre; word-break: normal; } /* ---------- 14. Snackbars / toasts ---------- */ .md-snackbar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); min-width: 288px; max-width: 568px; background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); padding: 14px 16px; border-radius: var(--md-sys-shape-corner-extra-small); box-shadow: var(--md-sys-elevation-3); font: var(--md-sys-typescale-body-medium-size)/20px "Roboto Flex", sans-serif; display: flex; align-items: center; gap: 12px; z-index: 100; opacity: 0; pointer-events: none; transition: opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate), transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate); } .md-snackbar.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .md-snackbar--error { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); } .md-snackbar--success { background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success); } .md-snackbar__action { margin-left: auto; color: var(--md-sys-color-inverse-primary); background: transparent; border: none; padding: 0 8px; height: 36px; border-radius: var(--md-sys-shape-corner-full); cursor: pointer; font: 500 var(--md-sys-typescale-label-large-size)/20px "Roboto Flex", sans-serif; letter-spacing: 0.1px; } .md-snackbar--error .md-snackbar__action { color: var(--md-sys-color-error); } .md-snackbar--success .md-snackbar__action { color: var(--md-sys-color-success); } .md-snackbar__action:hover { background: rgba(232,234,246,0.08); } /* ---------- 15. Dialog / modal ---------- */ .md-dialog-scrim { position: fixed; inset: 0; background: var(--md-sys-color-scrim); opacity: 0.55; z-index: 90; animation: m3-fade-in 150ms var(--md-sys-motion-easing-emphasized-decelerate); } .md-dialog { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 320px; max-width: 560px; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); border-radius: var(--md-sys-shape-corner-extra-large); box-shadow: var(--md-sys-elevation-3); z-index: 100; overflow: hidden; animation: m3-zoom-in 200ms var(--md-sys-motion-easing-emphasized-decelerate); } .md-dialog__head { padding: 24px 24px 16px; } .md-dialog__title { font: 500 var(--md-sys-typescale-headline-small-size)/32px "Roboto Flex", sans-serif; margin: 0; } .md-dialog__body { padding: 0 24px 24px; color: var(--md-sys-color-on-surface-variant); } .md-dialog__actions { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 16px 16px; } @keyframes m3-fade-in { from { opacity: 0; } to { opacity: 0.55; } } @keyframes m3-zoom-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* ---------- 16. Login: split-screen brand panel + form ---------- */ .login-shell { grid-area: main; min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--md-sys-color-background); } .login-shell__brand { position: relative; background: linear-gradient(135deg, var(--md-sys-color-primary-container) 0%, var(--md-sys-color-surface-container-highest) 70%, var(--md-sys-color-tertiary-container) 100%); color: var(--md-sys-color-on-primary-container); padding: 56px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .login-shell__brand::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(168,199,250,0.20), transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,183,135,0.18), transparent 55%); pointer-events: none; } .login-shell__brand-mark { position: relative; display: flex; align-items: center; gap: 12px; font: 500 28px/32px "Roboto Flex", sans-serif; } .login-shell__brand-mark .md-card__title { color: inherit; } .login-shell__brand-mark-glyph { width: 44px; height: 44px; border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); display: grid; place-items: center; font-weight: 700; font-size: 22px; box-shadow: var(--md-sys-elevation-2); } .login-shell__hero { position: relative; font: 400 40px/48px "Roboto Flex", sans-serif; letter-spacing: -0.5px; max-width: 460px; margin: 48px 0 24px; } .login-shell__bullets { position: relative; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .login-shell__bullets li { display: flex; align-items: flex-start; gap: 12px; color: var(--md-sys-color-on-surface); } .login-shell__bullets .material-symbols-outlined { color: var(--md-sys-color-primary); font-size: 22px; } .login-shell__legal { position: relative; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small-size)/16px "Roboto Flex", sans-serif; } .login-shell__form { display: flex; align-items: center; justify-content: center; padding: 56px 32px; } .login-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 0; } .login-card__title { font: 500 var(--md-sys-typescale-headline-small-size)/32px "Roboto Flex", sans-serif; margin: 0 0 8px; color: var(--md-sys-color-on-surface); } .login-card__subtitle { font: var(--md-sys-typescale-body-medium-size)/20px "Roboto Flex", sans-serif; color: var(--md-sys-color-on-surface-variant); margin: 0 0 24px; } .login-card__actions { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; } .login-card__error { margin-top: 16px; color: var(--md-sys-color-error); font: var(--md-sys-typescale-body-small-size)/16px "Roboto Flex", sans-serif; min-height: 16px; display: flex; align-items: center; gap: 8px; } /* ---------- 17. Remote-desktop panel (device detail) ---------- */ .remote-card { padding: 0; overflow: hidden; } .remote-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container); } .remote-stage { position: relative; background: #000; aspect-ratio: 16/9; max-height: 70vh; display: flex; align-items: center; justify-content: center; } .remote-stage video { width: 100%; height: 100%; object-fit: contain; cursor: crosshair; } .remote-overlay { position: absolute; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-medium-size)/20px "Roboto Flex", sans-serif; pointer-events: none; display: flex; align-items: center; gap: 8px; } /* ---------- 18. Tabs / hero section / empty state ---------- */ .section-stack { display: flex; flex-direction: column; gap: 24px; } .section-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; } @media (max-width: 1100px) { .section-grid-2 { grid-template-columns: 1fr; } } .empty-state { text-align: center; padding: 64px 24px; color: var(--md-sys-color-on-surface-variant); } .empty-state .material-symbols-outlined { font-size: 64px; opacity: 0.4; } .empty-state h3 { font: 500 var(--md-sys-typescale-title-large-size)/28px "Roboto Flex", sans-serif; margin: 16px 0 4px; color: var(--md-sys-color-on-surface); } .empty-state p { font: var(--md-sys-typescale-body-medium-size)/20px "Roboto Flex", sans-serif; margin: 0 0 24px; max-width: 420px; margin-inline: auto; } .hero-card { background: linear-gradient(135deg, var(--md-sys-color-primary-container), var(--md-sys-color-tertiary-container)); color: var(--md-sys-color-on-primary-container); border-radius: var(--md-sys-shape-corner-large); padding: 32px; box-shadow: var(--md-sys-elevation-1); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .hero-card__title { font: 500 var(--md-sys-typescale-headline-small-size)/32px "Roboto Flex", sans-serif; margin: 0 0 8px; } .hero-card__sub { font: var(--md-sys-typescale-body-large-size)/24px "Roboto Flex", sans-serif; margin: 0; opacity: 0.85; } .hero-card__actions { display: flex; gap: 8px; } /* ---------- 19. Side-panel metadata list (device detail) ---------- */ .metadata { display: flex; flex-direction: column; gap: 0; } .metadata__row { display: grid; grid-template-columns: 140px 1fr; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); font: var(--md-sys-typescale-body-medium-size)/20px "Roboto Flex", sans-serif; } .metadata__row:last-child { border-bottom: none; } .metadata__label { color: var(--md-sys-color-on-surface-variant); font-weight: 500; font-size: var(--md-sys-typescale-label-large-size); } .metadata__value { color: var(--md-sys-color-on-surface); font-feature-settings: "tnum" 1; overflow-wrap: anywhere; } /* ---------- 20. Sidebar nav (legacy, fallback for <840px) ---------- */ .md-drawer { position: fixed; inset: 0 auto 0 0; width: 280px; background: var(--md-sys-color-surface-container); border-right: 1px solid var(--md-sys-color-outline-variant); transform: translateX(-100%); transition: transform var(--md-sys-motion-duration-medium3) var(--md-sys-motion-easing-emphasized); z-index: 80; display: flex; flex-direction: column; padding-top: var(--md-layout-top-app-bar-height); } body.drawer-open .md-drawer { transform: translateX(0); } .md-drawer__scrim { position: fixed; inset: 0; background: var(--md-sys-color-scrim); opacity: 0; pointer-events: none; z-index: 79; transition: opacity var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard); } body.drawer-open .md-drawer__scrim { opacity: 0.55; pointer-events: auto; } .md-drawer__list { list-style: none; padding: 12px 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .md-drawer__link { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 28px; color: var(--md-sys-color-on-surface-variant); text-decoration: none; font: var(--md-sys-typescale-body-large-size)/24px "Roboto Flex", sans-serif; border-radius: 0 var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0; margin-right: 12px; transition: background var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); } .md-drawer__link .material-symbols-outlined { font-size: 24px; } .md-drawer__link:hover { background: rgba(232,234,246,0.08); color: var(--md-sys-color-on-surface); text-decoration: none; } .md-drawer__link.is-active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); } /* ---------- 21. Responsive breakpoints ---------- */ @media (max-width: 839px) { .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; } .app-rail { display: none; } .login-shell { grid-template-columns: 1fr; } .login-shell__brand { display: none; } .md-search { width: 100%; } .section-grid-2 { grid-template-columns: 1fr; } .page-header { flex-wrap: wrap; } } @media (max-width: 599px) { .app-topbar { padding: 0 8px; } .app-topbar__brand { padding-right: 8px; } .app-topbar__title { font-size: 18px; } .md-kpi-grid { grid-template-columns: 1fr; } .hero-card { grid-template-columns: 1fr; } } /* ---------- 22. Utility classes (sparingly used) ---------- */ .muted { color: var(--md-sys-color-on-surface-variant); } .center { text-align: center; } .mono { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; } .flex { display: flex; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .full-w { width: 100%; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .hidden { display: none !important; } .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; }