/* ============================================================================ SafetyPTT Admin — design system A cohesive, modern control-surface language layered over MudBlazor. Two fully realised colour schemes (light + dark) driven by CSS custom properties, so a single [data-theme] switch on re-themes the whole portal — including MudBlazor's own components, whose --mud-palette-* variables are remapped for the dark scheme. No inline styles; every rule lives here. ============================================================================ */ /* ── Light scheme (default) ─────────────────────────────────────────────── */ :root { color-scheme: light; --spt-bg: #f5f6f8; --spt-surface: #ffffff; --spt-surface-2: #f8f9fb; --spt-topbar: #ffffff; --spt-sidebar: #ffffff; --spt-border: #e6e8ec; --spt-border-str: #d6dae0; --spt-hover: #f0f2f6; --spt-text: #14161b; --spt-text-2: #414855; --spt-muted: #6b7280; --spt-accent: #2f6fed; --spt-accent-strong: #1d5fd6; --spt-accent-weak: #eaf1fe; --spt-brand-1: #1b3a68; --spt-brand-2: #2f6fed; --spt-success: #12805c; --spt-success-bg: #e6f4ef; --spt-warning: #b45309; --spt-warning-bg: #fbeedd; --spt-error: #c0392b; --spt-error-bg: #fbeae8; --spt-info: #1e5f9e; --spt-info-bg: #e8f1fa; --spt-neutral-bg: #eef1f6; --spt-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05); --spt-shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 6px 16px rgba(16, 24, 40, .06); --spt-shadow-lg: 0 10px 34px rgba(16, 24, 40, .13); --spt-radius: 14px; --spt-radius-sm: 10px; --spt-topbar-h: 62px; } /* ── Dark scheme (zinc) ─────────────────────────────────────────────────── */ html[data-theme="dark"] { color-scheme: dark; --spt-bg: #18181b; --spt-surface: #27272a; --spt-surface-2: #2c2c2f; --spt-topbar: #19191c; --spt-sidebar: #19191c; --spt-border: #2f2f34; --spt-border-str: #3c3c43; --spt-hover: rgba(255, 255, 255, .055); --spt-text: #f4f4f5; --spt-text-2: #d3d3d8; --spt-muted: #9a9aa4; --spt-accent: #6ea8ff; --spt-accent-strong: #93c0ff; --spt-accent-weak: #21304a; --spt-brand-1: #2f6fed; --spt-brand-2: #6ea8ff; --spt-success: #4ade80; --spt-success-bg: #16311f; --spt-warning: #fbbf24; --spt-warning-bg: #37280d; --spt-error: #f87171; --spt-error-bg: #3a1d1d; --spt-info: #7cc0ff; --spt-info-bg: #14293f; --spt-neutral-bg: #303035; --spt-shadow-sm: none; --spt-shadow: 0 1px 2px rgba(0, 0, 0, .4); --spt-shadow-lg: 0 12px 40px rgba(0, 0, 0, .55); /* Remap MudBlazor's runtime palette so every Mud component (buttons, inputs, selects, popovers, alerts, progress) follows the dark scheme. !important overrides the light values MudThemeProvider emits at :root. */ --mud-palette-black: #000 !important; --mud-palette-background: var(--spt-bg) !important; --mud-palette-background-gray: var(--spt-bg) !important; --mud-palette-surface: var(--spt-surface) !important; --mud-palette-appbar-background: var(--spt-topbar) !important; --mud-palette-appbar-text: var(--spt-text) !important; --mud-palette-drawer-background: var(--spt-sidebar) !important; --mud-palette-drawer-text: var(--spt-text-2) !important; --mud-palette-drawer-icon: var(--spt-muted) !important; --mud-palette-text-primary: var(--spt-text) !important; --mud-palette-text-secondary: var(--spt-muted) !important; --mud-palette-text-disabled: rgba(244, 244, 245, .38) !important; --mud-palette-action-default: var(--spt-text-2) !important; --mud-palette-action-default-hover: rgba(255, 255, 255, .08) !important; --mud-palette-action-disabled: rgba(244, 244, 245, .26) !important; --mud-palette-action-disabled-background: rgba(244, 244, 245, .10) !important; --mud-palette-lines-default: var(--spt-border) !important; --mud-palette-lines-inputs: var(--spt-border-str) !important; --mud-palette-table-lines: var(--spt-border) !important; --mud-palette-table-hover: var(--spt-surface-2) !important; --mud-palette-table-striped: rgba(255, 255, 255, .02) !important; --mud-palette-divider: var(--spt-border) !important; --mud-palette-divider-light: var(--spt-border) !important; --mud-palette-primary: var(--spt-accent) !important; --mud-palette-primary-text: #0b1220 !important; --mud-palette-secondary: var(--spt-accent-strong) !important; --mud-palette-surface-rgb: 39, 39, 42 !important; --mud-palette-hover: rgba(255, 255, 255, .06) !important; --mud-palette-success: var(--spt-success) !important; --mud-palette-warning: var(--spt-warning) !important; --mud-palette-error: var(--spt-error) !important; --mud-palette-info: var(--spt-info) !important; --mud-palette-grey-default: #52525b !important; --mud-palette-grey-light: #3f3f46 !important; --mud-palette-grey-lighter: #2c2c2f !important; } /* ── Base ───────────────────────────────────────────────────────────────── */ html, body { background: var(--spt-bg); color: var(--spt-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mud-layout { background: var(--spt-bg); } .mud-main-content { background: var(--spt-bg); } /* ── App bar (header) ───────────────────────────────────────────────────── */ .mud-appbar { border-bottom: 1px solid var(--spt-border); box-shadow: none !important; backdrop-filter: saturate(160%) blur(6px); } .mud-appbar .mud-toolbar { min-height: var(--spt-topbar-h); padding-inline: 1.1rem 1.25rem; } .spt-topbar { display: flex; align-items: center; gap: .55rem; width: 100%; } .spt-topbar__spacer { flex: 1 1 auto; } .spt-topbar__sep { width: 1px; height: 26px; background: var(--spt-border-str); margin: 0 .35rem; } /* brand lockup */ .spt-brand { display: flex; align-items: center; gap: .6rem; } .spt-brand__mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--spt-brand-1), var(--spt-brand-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; letter-spacing: .01em; box-shadow: 0 2px 8px rgba(47, 111, 237, .35); } .spt-brand__name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; color: var(--spt-text); } .spt-brand__tag { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--spt-accent-strong); background: var(--spt-accent-weak); padding: .17rem .45rem; border-radius: 6px; } /* icon button (theme toggle) */ .spt-iconbtn { appearance: none; border: 1px solid var(--spt-border); background: var(--spt-surface-2); color: var(--spt-text-2); width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .15s ease, color .15s ease, border-color .15s ease; } .spt-iconbtn:hover { background: var(--spt-hover); color: var(--spt-text); border-color: var(--spt-border-str); } /* Navigation trigger — replaces the persistent rail below the layout breakpoint (see Responsive). */ .spt-navbtn { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: .1rem; border: 1px solid var(--spt-border-str); border-radius: 10px; background: var(--spt-surface); color: var(--spt-text-2); cursor: pointer; flex: 0 0 auto; transition: background .12s ease, color .12s ease; } .spt-navbtn:hover { background: var(--spt-hover); color: var(--spt-text); } .spt-navbtn svg { width: 20px; height: 20px; } .spt-iconbtn .spt-ico { width: 19px; height: 19px; } .spt-ico--sun { display: none; } .spt-ico--moon { display: block; } html[data-theme="dark"] .spt-ico--sun { display: block; } html[data-theme="dark"] .spt-ico--moon { display: none; } /* user chip */ .spt-user { display: flex; align-items: center; gap: .55rem; } .spt-user__avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--spt-brand-1), var(--spt-brand-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; text-transform: uppercase; } .spt-user__name { font-weight: 600; font-size: .88rem; color: var(--spt-text); } /* sign out */ .spt-logout { display: inline-flex; align-items: center; gap: .4rem; padding: .44rem .7rem; border-radius: 10px; color: var(--spt-text-2); font-weight: 600; font-size: .86rem; text-decoration: none; transition: background .15s ease, color .15s ease; } .spt-logout:hover { background: var(--spt-error-bg); color: var(--spt-error); } .spt-logout svg { width: 18px; height: 18px; } /* ── Drawer (sidebar) ───────────────────────────────────────────────────── */ .mud-drawer { border-right: 1px solid var(--spt-border); box-shadow: none !important; } .spt-nav-section { padding: 1.15rem 1.5rem .4rem; font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--spt-muted); } .spt-nav-section:first-child { padding-top: .9rem; } .mud-navmenu .mud-nav-link { position: relative; border-radius: 10px; margin: 2px 12px; padding: .55rem .7rem; min-height: 42px; font-weight: 500; font-size: .9rem; color: var(--spt-text-2); transition: background .13s ease, color .13s ease; } .mud-navmenu .mud-nav-link .mud-nav-link-icon { color: var(--spt-muted); min-width: 34px; } .mud-navmenu .mud-nav-link::before { content: ""; position: absolute; left: 3px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: transparent; transition: background .13s ease; } .mud-navmenu .mud-nav-link:hover { background: var(--spt-hover); color: var(--spt-text); } .mud-navmenu .mud-nav-link.active { background: var(--spt-accent-weak); color: var(--spt-accent-strong); font-weight: 650; } .mud-navmenu .mud-nav-link.active::before { background: var(--spt-accent); } .mud-navmenu .mud-nav-link.active .mud-nav-link-icon { color: var(--spt-accent-strong); } /* ── Content shell ──────────────────────────────────────────────────────── */ .spt-content { padding: 1.9rem 2rem 3.5rem; max-width: 1360px; margin: 0 auto; } /* ── Page header ────────────────────────────────────────────────────────── */ .spt-page-header { margin-bottom: 1.6rem; } .spt-page-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; color: var(--spt-text); margin: 0; line-height: 1.2; } .spt-page-subtitle { color: var(--spt-muted); font-size: .92rem; margin: .4rem 0 0; max-width: 72ch; } .spt-page-header::after { content: ""; display: block; height: 1px; background: var(--spt-border); margin-top: 1.2rem; } .spt-header-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } /* ── Toolbar (search / filters) ─────────────────────────────────────────── */ .spt-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1.4rem; padding: .85rem .95rem; background: var(--spt-surface); border: 1px solid var(--spt-border); border-radius: var(--spt-radius-sm); box-shadow: var(--spt-shadow-sm); } .spt-search { width: 300px; max-width: 100%; } .spt-select { width: 210px; max-width: 100%; } .spt-num { width: 220px; max-width: 100%; } .spt-spacer { flex: 1 1 auto; } .spt-fill { height: 100%; } /* ── Cards / panels ─────────────────────────────────────────────────────── */ .spt-card { background: var(--spt-surface); border: 1px solid var(--spt-border); border-radius: var(--spt-radius); box-shadow: var(--spt-shadow-sm); padding: 1.3rem 1.45rem; } .spt-panel { background: var(--spt-surface); border: 1px solid var(--spt-border); border-radius: var(--spt-radius); box-shadow: var(--spt-shadow-lg); padding: 1.45rem 1.65rem; margin-top: 1.5rem; } .spt-panel__title { font-size: 1.15rem; font-weight: 660; color: var(--spt-text); margin: 0; } .spt-panel__meta { color: var(--spt-muted); font-size: .85rem; margin-top: .3rem; } .spt-section-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--spt-muted); margin: 2.1rem 0 .9rem; } /* ── KPI stat tiles ─────────────────────────────────────────────────────── */ .spt-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 1.15rem; } .spt-stat { display: flex; align-items: center; gap: 1.1rem; padding: 1.4rem 1.45rem; background: var(--spt-surface); border: 1px solid var(--spt-border); border-radius: var(--spt-radius); box-shadow: var(--spt-shadow-sm); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .spt-stat:hover { box-shadow: var(--spt-shadow-lg); transform: translateY(-3px); border-color: var(--spt-border-str); } .spt-stat__icon { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .spt-stat__icon .mud-icon-root { font-size: 1.7rem; } .spt-stat__value { font-size: 1.9rem; font-weight: 750; line-height: 1.05; color: var(--spt-text); letter-spacing: -.02em; } .spt-stat__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--spt-muted); margin-top: .35rem; font-weight: 650; } /* soft icon tints */ .spt-tint-navy { background: var(--spt-accent-weak); color: var(--spt-accent-strong); } .spt-tint-info { background: var(--spt-info-bg); color: var(--spt-info); } .spt-tint-success { background: var(--spt-success-bg); color: var(--spt-success); } .spt-tint-warning { background: var(--spt-warning-bg); color: var(--spt-warning); } .spt-tint-error { background: var(--spt-error-bg); color: var(--spt-error); } .spt-tint-muted { background: var(--spt-neutral-bg); color: var(--spt-text-2); } /* ── Tables ─────────────────────────────────────────────────────────────── */ .spt-table { background: var(--spt-surface); border: 1px solid var(--spt-border); border-radius: var(--spt-radius); box-shadow: var(--spt-shadow-sm); /* Wide tables scroll sideways within their card rather than being clipped, so every column stays reachable on a narrow viewport. The vertical axis stays clipped to preserve the rounded corners. */ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; } .spt-table table { width: 100%; border-collapse: separate; border-spacing: 0; } .spt-table thead th { text-transform: uppercase; font-size: .71rem; letter-spacing: .055em; color: var(--spt-muted); font-weight: 700; text-align: left; padding: .82rem 1.05rem; background: var(--spt-surface-2); border-bottom: 1px solid var(--spt-border-str); white-space: nowrap; } .spt-table tbody td { padding: .8rem 1.05rem; border-bottom: 1px solid var(--spt-border); font-size: .875rem; color: var(--spt-text-2); vertical-align: middle; } .spt-table tbody tr:last-child td { border-bottom: none; } .spt-table tbody tr { transition: background .12s ease; } .spt-table tbody tr:hover { background: var(--spt-hover); } .spt-table td .mud-button-root { min-width: 0; } .spt-mono { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: .8rem; color: var(--spt-muted); } .spt-strong { color: var(--spt-text); font-weight: 600; } /* ── Status pills ───────────────────────────────────────────────────────── */ .spt-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .64rem; border-radius: 999px; font-size: .74rem; font-weight: 650; line-height: 1.35; white-space: nowrap; } .spt-pill--success { background: var(--spt-success-bg); color: var(--spt-success); } .spt-pill--warning { background: var(--spt-warning-bg); color: var(--spt-warning); } .spt-pill--error { background: var(--spt-error-bg); color: var(--spt-error); } .spt-pill--info { background: var(--spt-info-bg); color: var(--spt-info); } .spt-pill--muted { background: var(--spt-neutral-bg); color: var(--spt-text-2); } .spt-pill--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; } .spt-threat { color: var(--spt-error); font-size: .75rem; display: block; margin-top: .15rem; } /* ── Pager / empty / feedback ───────────────────────────────────────────── */ .spt-pager { display: flex; align-items: center; gap: 1rem; margin-top: 1.15rem; color: var(--spt-muted); font-size: .85rem; } .spt-empty { text-align: center; color: var(--spt-muted); padding: 2.6rem 1rem; font-size: .9rem; } .spt-alert { margin-bottom: 1.1rem; } /* ── Login ──────────────────────────────────────────────────────────────── */ .spt-login-wrap { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(1100px 560px at 50% -12%, var(--spt-accent-weak), transparent 62%), var(--spt-bg); padding: 1.5rem; } .spt-login-toggle { position: absolute; top: 1.25rem; right: 1.25rem; } .spt-login { width: 100%; max-width: 410px; background: var(--spt-surface); border: 1px solid var(--spt-border); border-radius: 18px; box-shadow: var(--spt-shadow-lg); padding: 2.35rem 2.3rem 2.1rem; } .spt-login__brand { display: flex; align-items: center; gap: .65rem; justify-content: center; margin-bottom: .35rem; } .spt-login__mark { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--spt-brand-1), var(--spt-brand-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; box-shadow: 0 4px 14px rgba(47, 111, 237, .4); } .spt-login__title { font-size: 1.32rem; font-weight: 700; color: var(--spt-text); } .spt-login__subtitle { text-align: center; color: var(--spt-muted); font-size: .9rem; margin: .15rem 0 1.65rem; } .spt-login .form-label { font-size: .8rem; font-weight: 600; color: var(--spt-text-2); margin-bottom: .35rem; } .spt-login .form-control { background: var(--spt-surface-2); color: var(--spt-text); border: 1px solid var(--spt-border-str); border-radius: 10px; padding: .62rem .85rem; font-size: .9rem; transition: border-color .12s ease, box-shadow .12s ease, background .12s ease; } .spt-login .form-control::placeholder { color: var(--spt-muted); } .spt-login .form-control:focus { background: var(--spt-surface); border-color: var(--spt-accent); box-shadow: 0 0 0 3px rgba(47, 111, 237, .18); outline: none; } .spt-login .btn-primary { background: var(--spt-accent); border-color: var(--spt-accent); border-radius: 10px; padding: .64rem 1rem; font-weight: 650; margin-top: .45rem; box-shadow: 0 2px 10px rgba(47, 111, 237, .3); transition: background .12s ease, border-color .12s ease, transform .05s ease; } .spt-login .btn-primary:hover { background: var(--spt-accent-strong); border-color: var(--spt-accent-strong); } .spt-login .btn-primary:active { transform: translateY(1px); } .spt-login .alert { border-radius: 10px; font-size: .85rem; } /* ── MudBlazor surface nudges ───────────────────────────────────────────── */ .mud-paper { border-radius: var(--spt-radius); } .mud-table { box-shadow: none; } /* ── Geofence polygon authoring map ─────────────────────────────────────── */ .spt-geofence-map { height: 380px; width: 100%; border: 1px solid var(--spt-border, #d0d7de); border-radius: var(--spt-radius); overflow: hidden; } /* ── Off-canvas navigation scrim ────────────────────────────────────────── */ /* Inert above the layout breakpoint; the Responsive section below activates it. */ .spt-nav-scrim { display: none; } /* ── Responsive ─────────────────────────────────────────────────────────── */ /* Three tiers: ≤1024px the persistent navigation rail becomes an off-canvas panel and the content reclaims the full width (the rail alone consumed 258px of a phone viewport). ≤760px filter toolbars stack to full width and dense chrome is trimmed. ≤420px spacing and type tighten for the smallest handsets. Widths are overridden with !important only where MudBlazor sets them inline or from its own variables (drawer width, main-content margin). */ @media (max-width: 1024px) { .spt-navbtn { display: inline-flex; } /* Content and top bar span the viewport: the drawer no longer reserves space in either (MudBlazor insets both by the rail width while a persistent drawer is open). */ .mud-main-content { margin-left: 0 !important; } .mud-appbar { margin-left: 0 !important; width: 100% !important; z-index: 1260; /* above the panel and its scrim, so the trigger stays reachable */ } /* The rail becomes an off-canvas panel, hidden from assistive tech and the tab order while closed, and sliding in over the content when opened. Its top offset and height stay with MudBlazor's clipped-drawer rule. */ .mud-drawer.mud-drawer-pos-left { position: fixed !important; left: 0; width: min(84vw, 288px) !important; max-width: 288px !important; transform: translateX(-101%); visibility: hidden; transition: transform .24s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .24s; z-index: 1250; } html[data-spt-nav="open"] .mud-drawer.mud-drawer-pos-left { transform: none; visibility: visible; box-shadow: 0 18px 48px rgba(0, 0, 0, .3); transition: transform .24s cubic-bezier(.4, 0, .2, 1), visibility 0s; } .spt-nav-scrim { display: block; position: fixed; inset: 0; background: rgba(9, 11, 16, .45); opacity: 0; pointer-events: none; transition: opacity .24s ease; z-index: 1240; } html[data-spt-nav="open"] .spt-nav-scrim { opacity: 1; pointer-events: auto; } /* Hold the page still while the panel is open. */ html[data-spt-nav="open"], html[data-spt-nav="open"] body { overflow: hidden; } /* Keep every column reachable by scrolling instead of squeezing them illegibly. */ .spt-table table { min-width: 680px; } .spt-brand__tag { display: none; } .spt-content { padding: 1.5rem 1.25rem 3rem; } } @media (max-width: 760px) { .spt-content { padding: 1.2rem 1rem 2.6rem; } /* Filters stack: every control spans the row and the flexible spacer would otherwise become an empty full-width gap between them. */ .spt-toolbar { padding: .75rem; gap: .6rem; } .spt-search, .spt-select, .spt-num { width: 100%; } .spt-spacer { display: none; } .spt-page-title { font-size: 1.35rem; } .spt-page-header { margin-bottom: 1.2rem; } .spt-user__name { display: none; } .spt-topbar__sep { display: none; } .spt-topbar { gap: .5rem; } .spt-card, .spt-panel { padding: 1.05rem 1rem; } /* Confirmation and action rows wrap instead of overflowing their panel. */ .spt-panel .d-flex, .spt-card .d-flex { flex-wrap: wrap; } .spt-pager { flex-wrap: wrap; justify-content: center; gap: .6rem; row-gap: .5rem; } .spt-stats { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; } .spt-geofence-map { height: 300px; } .spt-login { padding: 1.8rem 1.35rem 1.6rem; } } @media (max-width: 420px) { .spt-content { padding: 1rem .75rem 2.2rem; } .spt-page-title { font-size: 1.2rem; } .spt-stats { grid-template-columns: 1fr; } .spt-table thead th { padding: .7rem .8rem; } .spt-table tbody td { padding: .7rem .8rem; } .spt-brand__name { font-size: .95rem; } .spt-logout span { display: none; } }