/* ========================================================================== Swiss Fleet Management — operations console design system -------------------------------------------------------------------------- Swiss Systems corporate palette: corporate navy (#001433) chrome, white paper, one green accent. Light first. The dark console is opt-in through data-theme="dark" on , set by site.js from localStorage before first paint; the server renders data-theme="dark" so the console never flashes. Contents 01 Design tokens 02 Tone vocabulary 03 Reset and base 04 Typography helpers 05 Application shell 06 Brand 07 Sidebar navigation 08 Topbar, search, connection, bell, user menu 09 Page header and breadcrumbs 10 Cards and panels 11 KPI stat tiles 12 Dense tables 13 Forms 14 Buttons 15 Badges, chips and dots 16 Alerts 17 Toasts 18 Bootstrap overrides: dropdowns, modals, tooltips 19 Map and overlay panels 20 Timeline 21 Empty states 22 Skeleton loaders 23 Pager 24 Authentication layout 25 Utilities 26 Scrollbars and focus 27 Motion preferences 28 Print ========================================================================== */ /* ========================================================================== 01 Design tokens The brand layer (--ink … --line-soft) is the Swiss Systems palette, shared verbatim with www.swisssystems.co.za and Swiss Workshop. The --c-* layer is this console's per-theme rendering of it: every --c-* value is derived from a brand token and tuned so text, badges and solid fills clear WCAG AA. ========================================================================== */ :root { /* --- Swiss Systems brand palette ------------------------------------- */ --ink: #001433; --ink-2: #0a2748; --ink-3: #143a6b; --paper: #ffffff; --paper-2: #f6f8fb; --paper-3: #eef2f7; --green: #1f9d6b; --green-hi: #25b87d; --green-lo: #178556; --amber: #ffb100; --rose: #e85b6b; --rose-deep: #b03446; --text-on-navy: #e9eef6; --text-on-navy-2: #b8c4d6; --line-on-navy: rgba(255, 255, 255, .14); --text: #001433; --text-2: #3b4a64; --muted: #66768b; --line: rgba(0, 20, 51, .12); --line-soft: rgba(0, 20, 51, .07); /* Accent is overridden per tenant by the layout from Tenant.AccentColour. With no tenant accent it is the single corporate green. */ --sf-accent: var(--green); /* --- surfaces -------------------------------------------------------- */ --c-bg: var(--paper-2); --c-bg-deep: var(--paper-3); --c-surface: var(--paper); --c-surface-2: var(--paper-2); --c-raised: var(--paper-3); --c-overlay: var(--paper); --c-hover: rgba(0, 20, 51, .045); --c-active: rgba(0, 20, 51, .075); /* --- lines ----------------------------------------------------------- */ --c-border: var(--line); --c-border-strong: rgba(0, 20, 51, .22); --c-border-faint: var(--line-soft); /* --- text ------------------------------------------------------------ */ --c-text: var(--text); --c-text-dim: var(--text-2); --c-text-faint: color-mix(in srgb, var(--muted) 92%, var(--ink)); --c-text-invert: var(--paper); /* --- status --------------------------------------------------------- moving / healthy green idling / awaiting amber stopped / neutral muted offline / critical rose informational ink-3 The eight tone hues are written out as literals because map.js reads them off the root element at runtime to colour Leaflet markers, and a custom property hands JavaScript its token text, not a resolved colour. Each one is the brand hue shaded to clear AA on this theme's paper; the derivation is in the comment beside it. ------------------------------------------------------------------- */ --c-green: #137150; /* green-lo 82% + ink */ --c-green-soft: color-mix(in srgb, var(--green) 10%, transparent); --c-amber: #7a5f1b; /* amber 48% + ink */ --c-amber-soft: color-mix(in srgb, var(--amber) 10%, transparent); --c-red: #9e4459; /* rose 68% + ink */ --c-red-soft: color-mix(in srgb, var(--rose) 10%, transparent); --c-critical: #b03446; /* rose-deep */ --c-critical-soft: color-mix(in srgb, var(--rose-deep) 10%, transparent); --c-violet: #3e5d86; /* ink-3 82% + paper */ --c-violet-soft: color-mix(in srgb, var(--ink-3) 10%, transparent); --c-slate: #526279; /* muted 80% + ink */ --c-slate-soft: color-mix(in srgb, var(--muted) 10%, transparent); --c-blue: #143a6b; /* ink-3 */ --c-blue-soft: color-mix(in srgb, var(--ink-3) 10%, transparent); /* The accent as a --c-* surface token, so the status vocabulary below is complete. Thirty-one rules in this file reference it; without the declaration each of those was an invalid value at computed-value time, which is how the page title, the focus ring and the nav marker ended up silently unpainted. It resolves to the tenant accent, so a customer colour still flows through everything. */ --c-accent: var(--sf-accent); --c-accent-soft: color-mix(in srgb, var(--sf-accent) 11%, transparent); --c-accent-line: color-mix(in srgb, var(--sf-accent) 40%, transparent); --c-accent-text: color-mix(in srgb, var(--sf-accent) 68%, var(--ink)); /* --- type ------------------------------------------------------------ */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13.5px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; /* --- metrics --------------------------------------------------------- */ --sidebar-w: 244px; --sidebar-w-collapsed: 60px; --topbar-h: 52px; --radius-sm: 4px; --radius: 7px; --radius-lg: 11px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 22px; --space-6: 32px; --row-h: 34px; /* --- elevation ------------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(0, 20, 51, .07); --shadow-2: 0 8px 20px -10px rgba(0, 20, 51, .20); --shadow-3: 0 22px 50px -20px rgba(0, 20, 51, .28); --ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--sf-accent); --ease: cubic-bezier(.2, .7, .3, 1); --dur: 140ms; --sf-close-filter: none; color-scheme: light; } :root[data-theme='dark'] { --c-bg: var(--ink); --c-bg-deep: color-mix(in srgb, var(--ink) 72%, #000000); --c-surface: var(--ink-2); --c-surface-2: color-mix(in srgb, var(--ink-2) 62%, var(--ink)); --c-raised: var(--ink-3); --c-overlay: var(--ink-2); --c-hover: rgba(255, 255, 255, .055); --c-active: rgba(255, 255, 255, .095); --c-border: var(--line-on-navy); --c-border-strong: rgba(255, 255, 255, .26); --c-border-faint: rgba(255, 255, 255, .07); --c-text: var(--text-on-navy); --c-text-dim: var(--text-on-navy-2); --c-text-faint: color-mix(in srgb, var(--text-on-navy-2) 74%, var(--ink)); --c-text-invert: var(--ink); /* Literals for the same reason as the light block: map.js reads these. */ --c-green: #36be87; /* green-hi 92% + paper */ --c-green-soft: color-mix(in srgb, var(--green-hi) 13%, transparent); --c-amber: #ffb100; /* amber */ --c-amber-soft: color-mix(in srgb, var(--amber) 13%, transparent); --c-red: #ed7c89; /* rose 80% + paper */ --c-red-soft: color-mix(in srgb, var(--rose) 13%, transparent); --c-critical: #f096a0; /* rose 64% + paper */ --c-critical-soft: color-mix(in srgb, var(--rose) 13%, transparent); --c-violet: #a5b4ca; /* ink-3 32% + text-on-navy */ --c-violet-soft: color-mix(in srgb, var(--ink-3) 45%, transparent); --c-slate: #939faf; /* muted 66% + text-on-navy */ --c-slate-soft: color-mix(in srgb, var(--muted) 24%, transparent); --c-blue: #879bb6; /* ink-3 46% + text-on-navy */ --c-blue-soft: color-mix(in srgb, var(--ink-3) 55%, transparent); --c-accent-soft: color-mix(in srgb, var(--sf-accent) 20%, transparent); --c-accent-line: color-mix(in srgb, var(--sf-accent) 48%, transparent); --c-accent-text: color-mix(in srgb, var(--sf-accent) 70%, var(--text-on-navy)); --shadow-1: 0 1px 2px rgba(0, 6, 18, .55); --shadow-2: 0 6px 18px -6px rgba(0, 6, 18, .72); --shadow-3: 0 20px 48px -18px rgba(0, 6, 18, .85); --sf-close-filter: invert(1) grayscale(1) brightness(1.7); color-scheme: dark; } /* The navy chrome. The sidebar, the topbar and everything anchored inside them sit on --ink in BOTH themes, so they carry the on-navy rendering of the same tokens. Nothing is renamed: only the values change inside the scope, and every component below keeps reading --c-*. */ .sf-sidebar, .sf-topbar { --c-bg: var(--ink); --c-bg-deep: var(--ink); --c-surface: var(--ink-2); --c-surface-2: color-mix(in srgb, var(--ink-2) 70%, var(--ink)); --c-raised: var(--ink-3); --c-overlay: var(--ink-2); --c-hover: rgba(255, 255, 255, .07); --c-active: rgba(255, 255, 255, .12); --c-border: var(--line-on-navy); --c-border-strong: rgba(255, 255, 255, .24); --c-border-faint: rgba(255, 255, 255, .08); --c-text: var(--text-on-navy); --c-text-dim: var(--text-on-navy-2); --c-text-faint: color-mix(in srgb, var(--text-on-navy-2) 74%, var(--ink)); --c-text-invert: var(--ink); --c-green: color-mix(in srgb, var(--green-hi) 92%, var(--paper)); --c-green-soft: color-mix(in srgb, var(--green-hi) 13%, transparent); --c-amber: var(--amber); --c-amber-soft: color-mix(in srgb, var(--amber) 13%, transparent); --c-red: color-mix(in srgb, var(--rose) 80%, var(--paper)); --c-red-soft: color-mix(in srgb, var(--rose) 13%, transparent); --c-critical: color-mix(in srgb, var(--rose) 64%, var(--paper)); --c-critical-soft: color-mix(in srgb, var(--rose) 13%, transparent); --c-violet: color-mix(in srgb, var(--ink-3) 32%, var(--text-on-navy)); --c-violet-soft: color-mix(in srgb, var(--ink-3) 45%, transparent); --c-slate: color-mix(in srgb, var(--muted) 66%, var(--text-on-navy)); --c-slate-soft: color-mix(in srgb, var(--muted) 24%, transparent); --c-blue: color-mix(in srgb, var(--ink-3) 46%, var(--text-on-navy)); --c-blue-soft: color-mix(in srgb, var(--ink-3) 55%, transparent); --c-accent-soft: color-mix(in srgb, var(--sf-accent) 22%, transparent); --c-accent-line: color-mix(in srgb, var(--sf-accent) 50%, transparent); --c-accent-text: color-mix(in srgb, var(--sf-accent) 70%, var(--text-on-navy)); --sf-close-filter: invert(1) grayscale(1) brightness(1.7); color-scheme: dark; } /* ========================================================================== 02 Tone vocabulary Every UiHelpers colour method returns one of these tokens. A .tone-* class sets --tone and --tone-soft; badges, chips, dots, tiles, rows and markers all read those two variables, so one class recolours any component. ok green · warn amber · muted slate · danger and critical rose · info navy · planned navy tint · accent the tenant green. ========================================================================== */ .tone-ok { --tone: var(--c-green); --tone-soft: var(--c-green-soft); } .tone-info { --tone: var(--c-blue); --tone-soft: var(--c-blue-soft); } .tone-warn { --tone: var(--c-amber); --tone-soft: var(--c-amber-soft); } .tone-danger { --tone: var(--c-red); --tone-soft: var(--c-red-soft); } .tone-critical { --tone: var(--c-critical); --tone-soft: var(--c-critical-soft); } .tone-muted { --tone: var(--c-slate); --tone-soft: var(--c-slate-soft); } .tone-accent { --tone: var(--c-accent-text); --tone-soft: var(--c-accent-soft); } .tone-planned { --tone: var(--c-violet); --tone-soft: var(--c-violet-soft); } .tone-text { color: var(--tone, var(--c-text)); } .tone-bar { box-shadow: inset 3px 0 0 var(--tone, var(--c-border)); } /* ========================================================================== 03 Reset and base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-ui); font-size: var(--fs-base); line-height: 1.5; font-feature-settings: 'cv05' 1, 'ss01' 1, 'tnum' 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.22; letter-spacing: -.015em; color: var(--c-text); } p { margin: 0 0 var(--space-3); } p:last-child { margin-bottom: 0; } a { color: var(--c-accent-text); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: color-mix(in srgb, var(--c-accent-text) 80%, var(--c-text)); text-decoration: underline; } hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--space-4) 0; } img, svg { vertical-align: middle; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; } code { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 1px 5px; color: var(--c-text); } ul, ol { margin: 0; padding-left: 1.2em; } fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } legend { padding: 0; } ::selection { background: var(--c-accent-soft); color: var(--c-text); } .sf-skip-link { position: absolute; top: -60px; left: var(--space-3); z-index: 2000; padding: 10px 16px; background: var(--ink); color: var(--text-on-navy); border: 1px solid var(--line-on-navy); border-radius: var(--radius); font-weight: 600; transition: top var(--dur) var(--ease); } .sf-skip-link:focus { top: var(--space-3); color: var(--text-on-navy); text-decoration: none; } /* ========================================================================== 04 Typography helpers ========================================================================== */ .sf-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.015em; } .sf-num { font-variant-numeric: tabular-nums; } .sf-muted { color: var(--c-text-dim); } .sf-faint { color: var(--c-text-faint); } .sf-strong { font-weight: 600; } .sf-nowrap { white-space: nowrap; } .sf-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .sf-upper { text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-xs); font-weight: 600; } .sf-reg { font-family: var(--font-mono); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; } /* --- brochure type furniture ------------------------------------------ The four pieces the Swiss Systems brochure leans on: a small uppercase eyebrow, a 2px navy rule, a big mono figure and the line that reads it. */ .eyebrow { display: block; margin: 0 0 var(--space-1); font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-faint); } .rule { display: block; width: 46px; height: 2px; margin: var(--space-2) 0 0; padding: 0; border: 0; border-radius: 2px; background: var(--c-text); } .card-num { display: block; font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--tone, var(--c-text)); } .card-take { margin: var(--space-1) 0 0; max-width: 46ch; font-size: var(--fs-sm); line-height: 1.45; color: var(--c-text-dim); } /* ========================================================================== 05 Application shell ========================================================================== */ .sf-app { min-height: 100vh; } .sf-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } .sf-shell.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); } .sf-main-column { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; } .sf-main { flex: 1 1 auto; min-width: 0; padding: var(--space-5) var(--space-5) var(--space-6); } .sf-main--bleed { padding: 0; display: flex; flex-direction: column; } .sf-narrow { max-width: 640px; } .sf-medium { max-width: 900px; } .sf-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--space-4); align-items: start; } .sf-scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 62%, transparent); backdrop-filter: blur(2px); z-index: 60; } @media (max-width: 991.98px) { .sf-shell { grid-template-columns: minmax(0, 1fr); } .sf-split { grid-template-columns: minmax(0, 1fr); } .sf-main { padding: var(--space-4) var(--space-3) var(--space-5); } } /* ========================================================================== 06 Brand ========================================================================== */ .sf-brand { display: flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--c-text); text-decoration: none; } .sf-brand:hover { color: var(--c-text); text-decoration: none; } .sf-brand__mark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: linear-gradient(150deg, color-mix(in srgb, var(--sf-accent) 82%, var(--ink)), color-mix(in srgb, var(--sf-accent) 44%, var(--ink))); color: var(--paper); font-size: 16px; box-shadow: var(--shadow-1); } .sf-brand__mark--lg { width: 48px; height: 48px; border-radius: 12px; font-size: 24px; } .sf-brand__logo { width: 30px; height: 30px; border-radius: 7px; object-fit: contain; flex: none; } .sf-brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; } .sf-brand__name { font-weight: 650; font-size: var(--fs-base); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-brand__product { font-size: var(--fs-xs); color: var(--c-text-faint); letter-spacing: .12em; text-transform: uppercase; } /* ========================================================================== 07 Sidebar navigation ========================================================================== */ .sf-sidebar { display: flex; flex-direction: column; background: var(--c-bg-deep); border-right: 1px solid var(--c-border); position: sticky; top: 0; height: 100vh; z-index: 70; overflow: hidden; } .sf-sidebar__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: var(--topbar-h); padding: 0 var(--space-3); border-bottom: 1px solid var(--c-border); flex: none; } .sf-nav { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-3) var(--space-2) var(--space-4); } .sf-nav__group + .sf-nav__group { margin-top: var(--space-4); } .sf-nav__heading { margin: 0 0 var(--space-1); padding: 0 var(--space-2); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-faint); } .sf-nav__list { list-style: none; margin: 0; padding: 0; } .sf-nav__link { position: relative; display: flex; align-items: center; gap: var(--space-2); padding: 7px var(--space-2); margin-bottom: 1px; border-radius: var(--radius); color: var(--c-text-dim); font-size: var(--fs-base); font-weight: 500; line-height: 1.3; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .sf-nav__link > i { flex: none; width: 18px; text-align: center; font-size: 14px; color: var(--c-text-faint); transition: color var(--dur) var(--ease); } .sf-nav__link > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-nav__link:hover { background: var(--c-hover); color: var(--c-text); text-decoration: none; } .sf-nav__link:hover > i { color: var(--c-text-dim); } .sf-nav__link.is-active { background: var(--c-accent-soft); color: var(--c-text); font-weight: 600; } .sf-nav__link.is-active > i { color: var(--c-accent-text); } .sf-nav__link.is-active::before { content: ''; position: absolute; left: calc(var(--space-2) * -1); top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c-accent-text); } .sf-nav__count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--c-red); color: var(--c-text-invert); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; text-align: center; line-height: 17px; } .sf-sidebar__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--c-border); color: var(--c-text-faint); font-size: var(--fs-xs); } .sf-sidebar__version { letter-spacing: .08em; text-transform: uppercase; } /* collapsed rail */ .sf-shell.is-collapsed .sf-brand__text, .sf-shell.is-collapsed .sf-nav__heading, .sf-shell.is-collapsed .sf-nav__link > span, .sf-shell.is-collapsed .sf-sidebar__version { display: none; } .sf-shell.is-collapsed .sf-nav__link { justify-content: center; padding-inline: 0; } .sf-shell.is-collapsed .sf-nav__count { position: absolute; top: 2px; right: 4px; margin: 0; } .sf-shell.is-collapsed .sf-nav__group + .sf-nav__group { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--c-border); } .sf-shell.is-collapsed .sf-sidebar__brand { justify-content: center; padding-inline: 0; } .sf-shell.is-collapsed [data-sf-sidebar-collapse] i { transform: rotate(180deg); } @media (max-width: 991.98px) { .sf-sidebar { position: fixed; inset: 0 auto 0 0; width: min(84vw, var(--sidebar-w)); transform: translateX(-101%); transition: transform 180ms var(--ease); box-shadow: var(--shadow-3); } .sf-sidebar.is-open { transform: none; } } @media (min-width: 992px) { .sf-sidebar__close { display: none; } .sf-scrim { display: none !important; } } /* ========================================================================== 08 Topbar, search, connection, bell, user menu ========================================================================== */ .sf-topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--space-3); height: var(--topbar-h); padding: 0 var(--space-4); background: color-mix(in srgb, var(--c-bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-border); color: var(--c-text); } .sf-topbar__tenant { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: none; } .sf-topbar__tenant-name { font-weight: 650; font-size: var(--fs-md); letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 26ch; } .sf-topbar__actions { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; flex: none; } /* --- global search --------------------------------------------------- */ .sf-search { position: relative; flex: 1 1 420px; max-width: 520px; min-width: 0; } .sf-search__icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--c-text-faint); font-size: 13px; pointer-events: none; } .sf-search__input { width: 100%; height: 32px; padding: 0 40px 0 30px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); font: inherit; font-size: var(--fs-base); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .sf-search__input::placeholder { color: var(--c-text-faint); } .sf-search__input:focus { outline: none; border-color: var(--c-accent-line); box-shadow: 0 0 0 3px var(--c-accent-soft); } .sf-search__input::-webkit-search-cancel-button { -webkit-appearance: none; } .sf-search__kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 1px 6px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); background: var(--c-surface-2); color: var(--c-text-faint); font-family: var(--font-mono); font-size: var(--fs-xs); pointer-events: none; } .sf-search__results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 90; margin: 0; padding: var(--space-1); list-style: none; max-height: 60vh; overflow-y: auto; background: var(--c-overlay); border: 1px solid var(--c-border-strong); border-radius: var(--radius); box-shadow: var(--shadow-3); } .sf-search__results li + li { margin-top: 1px; } .sf-search__option { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 7px var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--c-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .sf-search__option i { color: var(--c-text-faint); width: 16px; text-align: center; } .sf-search__option:hover, .sf-search__option.is-active { background: var(--c-accent-soft); color: var(--c-text); text-decoration: none; } .sf-search__group { margin-left: auto; font-size: var(--fs-xs); color: var(--c-text-faint); } .sf-search__empty { padding: var(--space-3); color: var(--c-text-dim); text-align: center; } /* --- connection indicator -------------------------------------------- */ .sf-conn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border: 1px solid var(--c-border); border-radius: var(--radius-pill); background: var(--c-surface); color: var(--c-text-dim); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .sf-conn__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-slate); flex: none; } .sf-conn[data-state='live'] { color: var(--c-green); border-color: color-mix(in srgb, var(--c-green) 40%, transparent); } .sf-conn[data-state='live'] .sf-conn__dot { background: var(--c-green); box-shadow: 0 0 0 0 var(--c-green-soft); animation: sf-pulse 2.4s var(--ease) infinite; } .sf-conn[data-state='idle'] { color: var(--c-amber); border-color: color-mix(in srgb, var(--c-amber) 40%, transparent); } .sf-conn[data-state='idle'] .sf-conn__dot { background: var(--c-amber); } .sf-conn[data-state='offline'] { color: var(--c-red); border-color: color-mix(in srgb, var(--c-red) 40%, transparent); } .sf-conn[data-state='offline'] .sf-conn__dot { background: var(--c-red); } @keyframes sf-pulse { 0% { box-shadow: 0 0 0 0 var(--c-green-soft); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (max-width: 767.98px) { .sf-conn__label { display: none; } .sf-conn { padding: 0 8px; } .sf-topbar { padding: 0 var(--space-2); gap: var(--space-2); } .sf-topbar__tenant-name { max-width: 12ch; } .sf-search__kbd { display: none; } } @media (max-width: 575.98px) { .sf-topbar__tenant .sf-chip { display: none; } .sf-search__input { padding-right: 12px; } } /* --- icon button ------------------------------------------------------ */ .sf-icon-btn { display: inline-grid; place-items: center; position: relative; width: 32px; height: 32px; flex: none; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--c-text-dim); font-size: 15px; cursor: pointer; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .sf-icon-btn:hover { background: var(--c-hover); color: var(--c-text); text-decoration: none; } .sf-icon-btn:active { background: var(--c-active); } /* --- alert bell ------------------------------------------------------- */ .sf-bell__count { position: absolute; top: -2px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-pill); border: 2px solid var(--c-bg); background: var(--c-red); color: var(--c-text-invert); font-family: var(--font-mono); font-size: 10px; font-weight: 700; line-height: 13px; text-align: center; } .sf-bell.is-ringing { animation: sf-ring 700ms var(--ease) 2; } @keyframes sf-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-11deg); } 40% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } } /* --- theme toggle ----------------------------------------------------- */ :root:not([data-theme='dark']) .sf-theme-icon--light { display: none; } :root[data-theme='dark'] .sf-theme-icon--dark { display: none; } /* --- user menu -------------------------------------------------------- */ .sf-avatar { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: linear-gradient(150deg, color-mix(in srgb, var(--sf-accent) 80%, var(--ink)), color-mix(in srgb, var(--sf-accent) 40%, var(--ink))); color: var(--paper); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; } .sf-avatar--lg { width: 46px; height: 46px; font-size: 17px; } .sf-user { display: inline-flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--c-text); font: inherit; cursor: pointer; transition: background var(--dur) var(--ease); } .sf-user:hover { background: var(--c-hover); } .sf-user__name { font-weight: 550; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-user__caret { font-size: 10px; color: var(--c-text-faint); } @media (max-width: 767.98px) { .sf-user__name, .sf-user__caret { display: none; } } .sf-menu__meta { padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: 1px; } .sf-menu__meta-name { font-weight: 600; } .sf-menu__meta-tenant { font-size: var(--fs-xs); color: var(--c-text-faint); } .sf-menu__form { margin: 0; } .sf-menu__danger { color: var(--c-red) !important; } /* ========================================================================== 09 Page header and breadcrumbs ========================================================================== */ .sf-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); } .sf-page-header__text { min-width: 0; } .sf-page-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .sf-page-title { font-size: var(--fs-2xl); font-weight: 680; letter-spacing: -.025em; } /* the 2px navy rule that sits under every page title */ .sf-page-title::after { content: ''; display: block; width: 46px; height: 2px; margin-top: 9px; border-radius: 2px; background: var(--c-text); } .sf-page-subtitle { margin: var(--space-2) 0 0; color: var(--c-text-dim); font-size: var(--fs-md); max-width: 76ch; } .sf-crumbs { margin-bottom: 3px; } .sf-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--c-text-faint); } .sf-crumbs li + li::before { content: '/'; margin-right: var(--space-1); color: var(--c-border-strong); } .sf-crumbs a { color: var(--c-text-dim); } .sf-crumbs a:hover { color: var(--c-accent-text); } .sf-crumbs [aria-current='page'] { color: var(--c-text); font-weight: 550; } /* ========================================================================== 10 Cards and panels ========================================================================== */ .sf-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden; } .sf-card--muted { background: var(--c-surface-2); } .sf-card--flush { border-radius: var(--radius); } .sf-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-border); background: linear-gradient(var(--c-hover), transparent); } .sf-card__title { font-size: var(--fs-md); font-weight: 620; letter-spacing: -.012em; display: flex; align-items: center; gap: var(--space-2); } .sf-card__title i { color: var(--c-text-faint); } .sf-card__subtitle { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--c-text-dim); } .sf-card__tools { display: flex; align-items: center; gap: var(--space-2); flex: none; } .sf-card__body { padding: var(--space-4); } .sf-card__body--flush { padding: 0; } .sf-card__footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--c-border); background: var(--c-surface-2); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .sf-card__footnote { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--c-border); color: var(--c-text-faint); font-size: var(--fs-sm); } .sf-card__footnote i { margin-right: 4px; } .sf-grid { display: grid; gap: var(--space-4); } .sf-grid--2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .sf-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .sf-grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .sf-toolbar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); } .sf-toolbar__spacer { margin-left: auto; } .sf-rule { margin: var(--space-4) 0; border-top: 1px solid var(--c-border); } /* ========================================================================== 11 KPI stat tiles ========================================================================== */ .sf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); } .sf-tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden; color: var(--c-text); text-decoration: none; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } a.sf-tile:hover { border-color: var(--c-border-strong); transform: translateY(-1px); text-decoration: none; color: var(--c-text); } .sf-tile::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tone, var(--c-border-strong)); } .sf-tile__label { margin: 0; font-size: var(--fs-xs); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-faint); display: flex; align-items: center; gap: 6px; } .sf-tile__value { font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--tone, var(--c-text)); } .sf-tile__unit { font-size: var(--fs-md); font-weight: 500; color: var(--c-text-dim); margin-left: 3px; } .sf-tile__meta { margin: 0; font-size: var(--fs-sm); color: var(--c-text-dim); display: flex; align-items: center; gap: 5px; } .sf-tile__delta { font-weight: 600; font-family: var(--font-mono); } .sf-tile__delta.is-up { color: var(--c-green); } .sf-tile__delta.is-down { color: var(--c-red); } .sf-spark { display: block; width: 100%; height: 28px; margin-top: var(--space-1); } .sf-spark path { fill: none; stroke: var(--tone, var(--c-accent-text)); stroke-width: 1.5; } /* ========================================================================== 12 Dense tables ========================================================================== */ .sf-table-wrap { position: relative; width: 100%; overflow: auto; max-height: var(--table-max-h, none); } .sf-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); } .sf-table th, .sf-table td { padding: 0 var(--space-3); height: var(--row-h); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--c-border); white-space: nowrap; } .sf-table thead th { position: sticky; top: 0; z-index: 2; background: var(--c-surface-2); border-bottom: 1px solid var(--c-border-strong); color: var(--c-text-dim); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; user-select: none; } .sf-table tbody tr { transition: background 90ms linear; } .sf-table tbody tr:hover { background: var(--c-hover); } .sf-table tbody tr.is-selected { background: var(--c-accent-soft); } .sf-table tbody tr:last-child td { border-bottom: 0; } .sf-table--striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--c-text) 3%, transparent); } .sf-table--striped tbody tr:nth-child(even):hover { background: var(--c-hover); } .sf-table--comfortable th, .sf-table--comfortable td { height: 42px; } .sf-table td.sf-wrap { white-space: normal; min-width: 220px; } .sf-table .sf-num, .sf-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .sf-table th.num { text-align: right; } .sf-table__row-accent { box-shadow: inset 3px 0 0 var(--tone, transparent); } /* sortable headers driven by SwissFleet.table */ .sf-table th[data-sort] { cursor: pointer; } .sf-table th[data-sort]::after { content: '\F282'; font-family: 'bootstrap-icons'; font-size: 9px; margin-left: 5px; opacity: .25; vertical-align: 1px; } .sf-table th[data-sort][aria-sort='ascending']::after { content: '\F235'; opacity: 1; color: var(--c-accent-text); } .sf-table th[data-sort][aria-sort='descending']::after { content: '\F229'; opacity: 1; color: var(--c-accent-text); } .sf-table__actions { display: flex; align-items: center; gap: 2px; justify-content: flex-end; } .sf-table__link { color: var(--c-text); font-weight: 550; } .sf-table__link:hover { color: var(--c-accent-text); } .sf-table__sub { display: block; font-size: var(--fs-xs); color: var(--c-text-faint); line-height: 1.2; } .sf-table tr[hidden] { display: none; } .sf-table__foot td { background: var(--c-surface-2); font-weight: 650; border-top: 1px solid var(--c-border-strong); position: sticky; bottom: 0; } /* ========================================================================== 13 Forms ========================================================================== */ .sf-form { display: flex; flex-direction: column; gap: var(--space-4); } .sf-fieldset { display: flex; flex-direction: column; gap: var(--space-4); } .sf-legend { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-faint); padding-bottom: var(--space-2); border-bottom: 1px solid var(--c-border); width: 100%; } .sf-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .sf-label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); margin: 0; } .sf-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); } .sf-input { width: 100%; min-height: 36px; padding: 7px 11px; border: 1px solid var(--c-border-strong); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); font: inherit; font-size: var(--fs-base); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); } :root[data-theme='dark'] .sf-input { background: var(--c-bg); } .sf-input::placeholder { color: var(--c-text-faint); } .sf-input:hover:not(:disabled) { border-color: var(--c-text-faint); } .sf-input:focus { outline: none; border-color: var(--sf-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); } .sf-input:disabled, .sf-input[readonly] { background: var(--c-surface-2); color: var(--c-text-dim); cursor: not-allowed; } .sf-input.input-validation-error, .sf-input[aria-invalid='true'] { border-color: var(--c-red); box-shadow: 0 0 0 3px var(--c-red-soft); } textarea.sf-input { min-height: 92px; resize: vertical; line-height: 1.5; } .sf-select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .sf-input-group { position: relative; display: flex; align-items: center; } .sf-input-group__icon { position: absolute; left: 11px; color: var(--c-text-faint); font-size: 13px; pointer-events: none; } .sf-input-group .sf-input { padding-left: 34px; } .sf-input-group__button { position: absolute; right: 4px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--c-text-faint); cursor: pointer; } .sf-input-group__button:hover { background: var(--c-hover); color: var(--c-text); } .sf-hint { margin: 0; font-size: var(--fs-sm); color: var(--c-text-dim); } .sf-error, .field-validation-error { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--c-red); min-height: 0; } .sf-error:empty, .field-validation-valid { display: none; } .sf-readout { margin: 0; padding: 8px 11px; border: 1px dashed var(--c-border-strong); border-radius: var(--radius); background: var(--c-surface-2); color: var(--c-text-dim); } .sf-check { display: flex; align-items: flex-start; gap: var(--space-2); } .sf-check__input { appearance: none; width: 16px; height: 16px; margin: 2px 0 0; flex: none; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); background: var(--c-surface); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } :root[data-theme='dark'] .sf-check__input { background: var(--c-bg); } /* The tick is a white glyph, so the checked box is always the deep end of the accent: the same fill reads in both themes. */ .sf-check__input:checked { background: color-mix(in srgb, var(--sf-accent) 80%, var(--ink)); border-color: color-mix(in srgb, var(--sf-accent) 80%, var(--ink)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.4 4.3 6.6 11.1 2.6 7.1l1.1-1.1 2.9 2.9 5.7-5.7z'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat; } .sf-check__input[type='radio'] { border-radius: 50%; } .sf-check__input:disabled { opacity: .5; cursor: not-allowed; } .sf-check__label { font-size: var(--fs-base); color: var(--c-text-dim); cursor: pointer; margin: 0; } .sf-switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; } .sf-switch__input { position: absolute; opacity: 0; width: 0; height: 0; } .sf-switch__track { width: 34px; height: 19px; border-radius: var(--radius-pill); background: var(--c-border-strong); position: relative; transition: background var(--dur) var(--ease); flex: none; } .sf-switch__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); transition: transform var(--dur) var(--ease); } .sf-switch__input:checked + .sf-switch__track { background: var(--c-accent-text); } .sf-switch__input:checked + .sf-switch__track::after { transform: translateX(15px); } .sf-switch__input:focus-visible + .sf-switch__track { box-shadow: 0 0 0 3px var(--c-accent-soft); } .sf-form__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-2); border-top: 1px solid var(--c-border); } .sf-filters { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; } .sf-filters .sf-field { min-width: 170px; } /* ========================================================================== 14 Buttons Primary, danger and success all fill with a tone and take --c-text-invert for their label: white on the deep light-theme tone, navy on the bright dark-theme one. Both directions clear AA. ========================================================================== */ .sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 14px; border: 1px solid var(--c-border-strong); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); font: inherit; font-size: var(--fs-base); font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 80ms var(--ease); } .sf-btn:hover { background: var(--c-raised); border-color: var(--c-text-faint); color: var(--c-text); text-decoration: none; } .sf-btn:active { transform: translateY(1px); } .sf-btn[disabled], .sf-btn.is-busy { opacity: .55; pointer-events: none; } .sf-btn i { font-size: 13px; } .sf-btn--primary { background: color-mix(in srgb, var(--sf-accent) 78%, var(--c-text)); border-color: color-mix(in srgb, var(--sf-accent) 62%, var(--c-text)); color: var(--c-text-invert); } .sf-btn--primary:hover { background: color-mix(in srgb, var(--sf-accent) 64%, var(--c-text)); border-color: color-mix(in srgb, var(--sf-accent) 50%, var(--c-text)); color: var(--c-text-invert); } .sf-btn--danger { background: var(--c-red); border-color: color-mix(in srgb, var(--c-red) 68%, var(--c-text)); color: var(--c-text-invert); } .sf-btn--danger:hover { background: color-mix(in srgb, var(--c-red) 82%, var(--c-text)); color: var(--c-text-invert); } .sf-btn--success { background: var(--c-green); border-color: color-mix(in srgb, var(--c-green) 68%, var(--c-text)); color: var(--c-text-invert); } .sf-btn--ghost { background: transparent; border-color: var(--c-border); } .sf-btn--ghost:hover { background: var(--c-hover); } .sf-btn--quiet { background: transparent; border-color: transparent; color: var(--c-text-dim); font-weight: 550; } .sf-btn--quiet:hover { background: var(--c-hover); color: var(--c-text); border-color: transparent; } .sf-btn--sm { min-height: 27px; padding: 3px 9px; font-size: var(--fs-sm); } .sf-btn--lg { min-height: 42px; padding: 10px 20px; font-size: var(--fs-md); } .sf-btn--block { width: 100%; } .sf-btn--icon { width: 32px; padding: 0; } .sf-btn-group { display: inline-flex; } .sf-btn-group .sf-btn { border-radius: 0; margin-left: -1px; } .sf-btn-group .sf-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; } .sf-btn-group .sf-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; } .sf-btn-group .sf-btn.is-active { background: var(--c-accent-soft); border-color: var(--c-accent-line); color: var(--c-text); z-index: 1; } .sf-link { color: var(--c-accent-text); font-weight: 550; } .sf-link--quiet { color: var(--c-text-dim); font-weight: 500; font-size: var(--fs-sm); } .sf-link--quiet:hover { color: var(--c-accent-text); } .sf-btn__spinner { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sf-spin 620ms linear infinite; } @keyframes sf-spin { to { transform: rotate(360deg); } } /* ========================================================================== 15 Badges, chips and dots ========================================================================== */ .sf-badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px; border: 1px solid color-mix(in srgb, var(--tone, var(--c-slate)) 32%, transparent); border-radius: var(--radius-pill); background: var(--tone-soft, var(--c-slate-soft)); color: var(--tone, var(--c-slate)); font-size: var(--fs-xs); font-weight: 650; letter-spacing: .01em; line-height: 17px; white-space: nowrap; vertical-align: 1px; } .sf-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .sf-badge--square { border-radius: var(--radius-sm); } .sf-badge--solid { background: var(--tone, var(--c-slate)); color: var(--c-text-invert); border-color: transparent; } .sf-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border: 1px solid color-mix(in srgb, var(--tone, var(--c-slate)) 28%, transparent); border-radius: var(--radius-sm); background: var(--tone-soft, var(--c-slate-soft)); color: var(--tone, var(--c-text-dim)); font-size: var(--fs-xs); font-weight: 600; line-height: 17px; white-space: nowrap; } .sf-chip + .sf-chip { margin-left: 4px; } .sf-chip--removable { padding-right: 3px; } .sf-chip__x { display: grid; place-items: center; width: 15px; height: 15px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font-size: 9px; cursor: pointer; } .sf-chip__x:hover { background: color-mix(in srgb, currentColor 20%, transparent); } .sf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--c-slate)); flex: none; vertical-align: 0; } .sf-dot--pulse { box-shadow: 0 0 0 0 var(--tone-soft); animation: sf-dot-pulse 2s var(--ease) infinite; } @keyframes sf-dot-pulse { 0% { box-shadow: 0 0 0 0 var(--tone-soft); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .sf-meter { position: relative; height: 5px; border-radius: var(--radius-pill); background: var(--c-border); overflow: hidden; min-width: 60px; } .sf-meter__fill { position: absolute; inset: 0 auto 0 0; background: var(--tone, var(--c-accent-text)); border-radius: inherit; transition: width 260ms var(--ease); } /* ========================================================================== 16 Alerts ========================================================================== */ .sf-alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--tone, var(--c-blue)) 30%, transparent); border-left-width: 3px; border-radius: var(--radius); background: var(--tone-soft, var(--c-blue-soft)); } .sf-alert--info { --tone: var(--c-blue); --tone-soft: var(--c-blue-soft); } .sf-alert--success { --tone: var(--c-green); --tone-soft: var(--c-green-soft); } .sf-alert--warning { --tone: var(--c-amber); --tone-soft: var(--c-amber-soft); } .sf-alert--error { --tone: var(--c-red); --tone-soft: var(--c-red-soft); } .sf-alert__icon { color: var(--tone); font-size: 15px; line-height: 1.4; flex: none; } .sf-alert__body { min-width: 0; } .sf-alert__title { margin: 0; font-weight: 650; color: var(--c-text); } .sf-alert__text { margin: 2px 0 0; color: var(--c-text-dim); } .sf-alert__list { margin: 3px 0 0; padding-left: 1.1em; color: var(--c-text-dim); } .sf-alert__list li + li { margin-top: 2px; } /* ========================================================================== 17 Toasts ========================================================================== */ .sf-toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 1090; display: flex; flex-direction: column; gap: var(--space-2); width: min(380px, calc(100vw - var(--space-4) * 2)); pointer-events: none; } .sf-toast { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--c-border-strong); border-left: 3px solid var(--tone, var(--c-blue)); border-radius: var(--radius); background: var(--c-overlay); box-shadow: var(--shadow-3); pointer-events: auto; animation: sf-toast-in 200ms var(--ease); } .sf-toast--info { --tone: var(--c-blue); } .sf-toast--success { --tone: var(--c-green); } .sf-toast--warning { --tone: var(--c-amber); } .sf-toast--error { --tone: var(--c-red); } .sf-toast.is-leaving { animation: sf-toast-out 160ms var(--ease) forwards; } .sf-toast__icon { color: var(--tone); font-size: 15px; line-height: 1.4; flex: none; } .sf-toast__body { min-width: 0; flex: 1 1 auto; } .sf-toast__title { margin: 0; font-weight: 650; } .sf-toast__text { margin: 2px 0 0; color: var(--c-text-dim); font-size: var(--fs-sm); } .sf-toast__text:empty { display: none; } .sf-toast__close { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--c-text-faint); font-size: 10px; cursor: pointer; } .sf-toast__close:hover { background: var(--c-hover); color: var(--c-text); } @keyframes sf-toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes sf-toast-out { to { opacity: 0; transform: translateX(16px); } } @media (max-width: 575.98px) { .sf-toasts { left: var(--space-3); right: var(--space-3); width: auto; } } /* ========================================================================== 18 Bootstrap overrides: dropdowns, modals, tooltips ========================================================================== */ .dropdown-menu.sf-menu, .sf-app .dropdown-menu, .sf-auth .dropdown-menu { --bs-dropdown-bg: var(--c-overlay); --bs-dropdown-border-color: var(--c-border-strong); --bs-dropdown-link-color: var(--c-text); --bs-dropdown-link-hover-bg: var(--c-hover); --bs-dropdown-link-hover-color: var(--c-text); --bs-dropdown-link-active-bg: var(--c-accent-soft); --bs-dropdown-link-active-color: var(--c-text); --bs-dropdown-divider-bg: var(--c-border); --bs-dropdown-font-size: var(--fs-base); --bs-dropdown-padding-y: 5px; --bs-dropdown-item-padding-y: 6px; --bs-dropdown-item-padding-x: 12px; --bs-dropdown-border-radius: var(--radius); min-width: 216px; box-shadow: var(--shadow-3); } .dropdown-item { display: flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-sm); } .dropdown-item i { width: 15px; text-align: center; color: var(--c-text-faint); } .dropdown-item:hover i { color: inherit; } .modal-content { background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--radius-lg); color: var(--c-text); box-shadow: var(--shadow-3); } .modal-header, .modal-footer { border-color: var(--c-border); padding: var(--space-3) var(--space-4); } .modal-body { padding: var(--space-4); } .modal-title { font-size: var(--fs-md); font-weight: 620; letter-spacing: -.012em; } .modal-backdrop { --bs-backdrop-bg: var(--ink); } .modal-backdrop.show { opacity: .62; } .btn-close { filter: var(--sf-close-filter, none); } .tooltip-inner { background: var(--ink); color: var(--text-on-navy); border: 1px solid var(--line-on-navy); border-radius: var(--radius-sm); font-size: var(--fs-sm); box-shadow: var(--shadow-2); } .tooltip .tooltip-arrow::before { border-top-color: var(--ink); } .offcanvas { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border); } /* ========================================================================== 19 Map and overlay panels ========================================================================== */ .sf-map-shell { position: relative; flex: 1 1 auto; min-height: 420px; display: flex; } .sf-map { position: absolute; inset: 0; background: var(--c-bg-deep); } .sf-map:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: -2px; } .sf-map-panel { position: absolute; z-index: 500; width: 296px; max-height: calc(100% - var(--space-4) * 2); display: flex; flex-direction: column; background: color-mix(in srgb, var(--c-surface) 94%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--c-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden; } .sf-map-panel--left { top: var(--space-3); left: var(--space-3); } .sf-map-panel--right { top: var(--space-3); right: var(--space-3); } .sf-map-panel--bottom { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); top: auto; width: auto; max-height: 40%; } .sf-map-panel__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--c-border); flex: none; } .sf-map-panel__title { font-size: var(--fs-sm); font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-dim); } .sf-map-panel__body { overflow-y: auto; padding: var(--space-2); flex: 1 1 auto; } .sf-map-panel__footer { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--c-border); flex: none; } .sf-map-panel.is-collapsed .sf-map-panel__body, .sf-map-panel.is-collapsed .sf-map-panel__footer { display: none; } @media (max-width: 575.98px) { .sf-map-panel { width: calc(100% - var(--space-3) * 2); } .sf-map-panel--right { right: var(--space-3); left: var(--space-3); } } .sf-asset-row { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 6px var(--space-2); border: 0; border-left: 3px solid var(--tone, transparent); border-radius: var(--radius-sm); background: transparent; color: var(--c-text); font: inherit; text-align: left; cursor: pointer; } .sf-asset-row:hover { background: var(--c-hover); } .sf-asset-row.is-active { background: var(--c-accent-soft); } .sf-asset-row__main { min-width: 0; flex: 1 1 auto; } .sf-asset-row__reg { display: block; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-sm); letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-asset-row__meta { display: block; font-size: var(--fs-xs); color: var(--c-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-asset-row__speed { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; color: var(--tone, var(--c-text-dim)); flex: none; } .sf-map-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); color: var(--c-text-dim); } .sf-map-legend span { display: inline-flex; align-items: center; gap: 5px; } /* replay scrubber */ .sf-replay { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); } .sf-replay__range { flex: 1 1 auto; appearance: none; height: 4px; border-radius: var(--radius-pill); background: var(--c-border-strong); cursor: pointer; } .sf-replay__range::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c-accent-text); border: 2px solid var(--c-surface); cursor: grab; } .sf-replay__range::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--c-surface); border-radius: 50%; background: var(--c-accent-text); cursor: grab; } .sf-replay__stamp { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-text-dim); min-width: 15ch; text-align: right; } /* leaflet skin */ .sf-marker { display: grid; place-items: center; } .sf-marker__arrow { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--tone, var(--c-slate)) 24%, var(--paper)); border: 2px solid var(--tone, var(--c-slate)); box-shadow: 0 2px 8px rgba(0, 20, 51, .45); color: var(--tone, var(--c-slate)); transition: transform 320ms linear; } :root[data-theme='dark'] .sf-marker__arrow { background: color-mix(in srgb, var(--tone, var(--c-slate)) 26%, var(--ink)); } .sf-marker__arrow svg { width: 13px; height: 13px; fill: currentColor; } .sf-marker.is-focused .sf-marker__arrow { box-shadow: 0 0 0 4px var(--tone-soft), 0 2px 8px rgba(0, 20, 51, .45); } .sf-marker__label { margin-top: 2px; padding: 0 5px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink) 86%, transparent); color: var(--text-on-navy); font-family: var(--font-mono); font-size: 10px; font-weight: 600; white-space: nowrap; } .leaflet-container { background: var(--c-bg-deep); font-family: var(--font-ui); font-size: var(--fs-sm); } .leaflet-control-zoom a, .leaflet-bar a { background: var(--c-surface) !important; color: var(--c-text) !important; border-color: var(--c-border) !important; } .leaflet-bar a:hover { background: var(--c-raised) !important; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--c-overlay); color: var(--c-text); border: 1px solid var(--c-border-strong); box-shadow: var(--shadow-3); } .leaflet-popup-content-wrapper { border-radius: var(--radius); } .leaflet-popup-content { margin: var(--space-3); font-size: var(--fs-base); } .leaflet-container a.leaflet-popup-close-button { color: var(--c-text-faint); } .leaflet-control-attribution { background: color-mix(in srgb, var(--c-bg) 80%, transparent) !important; color: var(--c-text-faint) !important; font-size: 10px; } .leaflet-control-attribution a { color: var(--c-text-dim) !important; } :root[data-theme='dark'] .leaflet-tile-pane { filter: brightness(.76) contrast(1.08) saturate(.8); } .sf-popup__title { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-base); margin-bottom: 3px; } .sf-popup__row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); } .sf-popup__row dt { color: var(--c-text-faint); font-weight: 500; } .sf-popup__row dd { margin: 0; font-family: var(--font-mono); } /* ========================================================================== 20 Timeline ========================================================================== */ .sf-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--space-4); position: relative; } .sf-timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--c-border); } .sf-timeline__item { position: relative; padding: 0 0 var(--space-4) var(--space-3); } .sf-timeline__item:last-child { padding-bottom: 0; } .sf-timeline__item::before { content: ''; position: absolute; left: calc(var(--space-4) * -1 + 2px); top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--c-slate)); box-shadow: 0 0 0 3px var(--c-surface); } .sf-timeline__time { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-faint); } .sf-timeline__title { font-weight: 600; margin: 0; } .sf-timeline__text { margin: 2px 0 0; color: var(--c-text-dim); font-size: var(--fs-sm); } /* ========================================================================== 21 Empty states ========================================================================== */ .sf-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); text-align: center; color: var(--c-text-dim); } .sf-empty--page { min-height: 60vh; } .sf-empty__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-faint); font-size: 25px; margin-bottom: var(--space-1); } .sf-empty__icon--danger { color: var(--c-red); border-color: color-mix(in srgb, var(--c-red) 30%, transparent); background: var(--c-red-soft); } .sf-empty__code { margin: 0; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .16em; color: var(--c-text-faint); } .sf-empty__title { font-size: var(--fs-xl); color: var(--c-text); } .sf-empty__text { margin: 0; max-width: 52ch; } .sf-empty__meta { margin: 0; font-size: var(--fs-sm); color: var(--c-text-faint); } .sf-empty__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-top: var(--space-3); } /* ========================================================================== 22 Skeleton loaders ========================================================================== */ .sf-skeleton { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--c-surface-2); color: transparent !important; user-select: none; } .sf-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--c-hover), transparent); animation: sf-shimmer 1.25s infinite; } @keyframes sf-shimmer { to { transform: translateX(100%); } } .sf-skeleton--text { height: 11px; margin: 4px 0; } .sf-skeleton--title { height: 18px; width: 40%; margin: 6px 0; } .sf-skeleton--line { height: 11px; width: 100%; } .sf-skeleton--pill { height: 18px; width: 74px; border-radius: var(--radius-pill); } .sf-skeleton--tile { height: 78px; border-radius: var(--radius-lg); } .sf-skeleton--block { height: 220px; border-radius: var(--radius-lg); } .sf-skeleton-row td { padding-block: 9px; } .sf-skeleton-row td > span { display: block; height: 11px; border-radius: var(--radius-sm); background: var(--c-surface-2); } /* ========================================================================== 23 Pager ========================================================================== */ .sf-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--c-border); background: var(--c-surface-2); } .sf-pager__summary { margin: 0; font-size: var(--fs-sm); color: var(--c-text-dim); } .sf-pager__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .sf-pager__link { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--c-text-dim); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; } .sf-pager__link:hover { background: var(--c-hover); color: var(--c-text); text-decoration: none; } .sf-pager__link.is-current { background: var(--c-accent-soft); border-color: var(--c-accent-line); color: var(--c-text); } .sf-pager__link.is-disabled { opacity: .35; pointer-events: none; } .sf-pager__gap { padding: 0 3px; color: var(--c-text-faint); } /* ========================================================================== 24 Authentication layout ========================================================================== */ .sf-auth-body { min-height: 100vh; background: var(--c-bg); } .sf-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; } /* The pitch panel is always the navy half, in both themes. */ .sf-auth__aside { position: relative; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: radial-gradient(1000px 620px at 18% 12%, color-mix(in srgb, var(--sf-accent) 22%, transparent), transparent 62%), linear-gradient(160deg, var(--ink-2), var(--ink)); border-right: 1px solid var(--line-on-navy); color: var(--text-on-navy); overflow: hidden; } .sf-auth__grid { position: absolute; inset: -10%; background-image: linear-gradient(var(--line-on-navy) 1px, transparent 1px), linear-gradient(90deg, var(--line-on-navy) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 1) 20%, transparent 72%); -webkit-mask-image: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 1) 20%, transparent 72%); } .sf-auth__pitch { position: relative; max-width: 400px; } .sf-auth__pitch-title { margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.025em; color: var(--text-on-navy); } .sf-auth__pitch-text { color: var(--text-on-navy-2); font-size: var(--fs-md); } .sf-auth__pitch-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); } .sf-auth__pitch-list li { display: flex; align-items: center; gap: var(--space-3); color: var(--text-on-navy-2); } .sf-auth__pitch-list i { color: color-mix(in srgb, var(--sf-accent) 70%, var(--text-on-navy)); font-size: 15px; width: 20px; text-align: center; } .sf-auth__main { display: flex; flex-direction: column; align-items: center; padding: var(--space-4) var(--space-4) var(--space-6); overflow-y: auto; } .sf-auth__topline { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 460px; margin-bottom: auto; padding-bottom: var(--space-5); } .sf-auth__card { width: 100%; max-width: 460px; padding: var(--space-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); } .sf-auth__card--wide { max-width: 640px; } .sf-auth__header { margin-bottom: var(--space-4); } .sf-auth__title { font-size: var(--fs-xl); font-weight: 680; letter-spacing: -.025em; } .sf-auth__lead { margin: var(--space-1) 0 0; color: var(--c-text-dim); } .sf-auth__switch { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--c-border); text-align: center; color: var(--c-text-dim); font-size: var(--fs-sm); } .sf-auth__foot { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-5); color: var(--c-text-faint); font-size: var(--fs-xs); } .sf-invite { display: grid; gap: 6px; padding: var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-2); } .sf-invite__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .sf-invite__key { font-size: var(--fs-sm); color: var(--c-text-faint); } .sf-invite__value { font-weight: 600; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 991.98px) { .sf-auth { grid-template-columns: minmax(0, 1fr); } .sf-auth__aside { display: none; } } @media (max-width: 575.98px) { .sf-auth__main { padding: var(--space-3) var(--space-3) var(--space-5); } .sf-auth__card { padding: var(--space-4); } } /* ========================================================================== 25 Utilities ========================================================================== */ .sf-identity { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .sf-identity__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; } .sf-identity__text { min-width: 0; } .sf-identity__name { margin: 0; font-weight: 650; font-size: var(--fs-md); } .sf-identity__meta { margin: 0; font-size: var(--fs-sm); color: var(--c-text-faint); } .sf-datalist { margin: 0; display: grid; gap: var(--space-3); } .sf-datalist > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; } .sf-datalist dt { color: var(--c-text-faint); font-size: var(--fs-sm); } .sf-datalist dd { margin: 0; min-width: 0; } @media (max-width: 575.98px) { .sf-datalist > div { grid-template-columns: minmax(0, 1fr); gap: 0; } .sf-page-title { font-size: var(--fs-xl); } .sf-tile__value { font-size: var(--fs-xl); } } .sf-stack { display: flex; flex-direction: column; gap: var(--space-4); } .sf-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .sf-row--tight { gap: var(--space-1); } .sf-push { margin-left: auto; } .sf-antiforgery { display: none; } .visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== 26 Scrollbars and focus ========================================================================== */ * { scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--c-border-strong); border: 3px solid transparent; background-clip: content-box; border-radius: var(--radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--c-text-faint); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } :focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; border-radius: var(--radius-sm); } .sf-input:focus-visible, .sf-search__input:focus-visible { outline: none; } [hidden] { display: none !important; } /* ========================================================================== 27 Motion preferences ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 28 Print ========================================================================== */ @media print { :root { --paper: #ffffff; --paper-2: #ffffff; --paper-3: #f2f2f2; --ink: #000000; --text: #000000; --text-2: #333333; --muted: #555555; --line: #bbbbbb; --c-bg: var(--paper); --c-bg-deep: var(--paper); --c-surface: var(--paper); --c-surface-2: var(--paper); --c-overlay: var(--paper); --c-raised: var(--paper); --c-text: var(--text); --c-text-dim: var(--text-2); --c-text-faint: var(--muted); --c-text-invert: var(--paper); --c-border: var(--line); --c-border-strong: #999999; --c-print-head: #eeeeee; } body { background: var(--paper); color: var(--text); font-size: 10.5pt; } .sf-sidebar, .sf-topbar, .sf-toasts, .sf-scrim, .sf-pager__list, .sf-page-header__actions, .sf-card__tools, .sf-toolbar, .sf-map-panel, .sf-skip-link, .sf-btn { display: none !important; } .sf-shell { display: block; } .sf-main { padding: 0; } .sf-card { border: 1px solid var(--c-border); box-shadow: none; break-inside: avoid; page-break-inside: avoid; } .sf-table-wrap { overflow: visible; max-height: none; } .sf-table thead th { position: static; background: var(--c-print-head); color: var(--text); } .sf-table th, .sf-table td { height: auto; padding: 4px 6px; } .sf-table tbody tr { break-inside: avoid; page-break-inside: avoid; } .sf-badge, .sf-chip { border-color: var(--c-border-strong); background: transparent; color: var(--text); } a[href]::after { content: ''; } }