/* ========================================================================== OpenMetrix — AURORA design system · production CSS Dark-first: :root = dark theme. Light theme: . Fonts: load Manrope + IBM Plex Mono via (see base.html). This file replaces static/css/app.css. om-* class API documented in README. ========================================================================== */ /* Box model — standalone pages (login, public dashboards) load aurora.css without Tailwind, whose preflight normally provides this. Idempotent for app pages. Without it width:100% inputs overflow their cards. */ *, *::before, *::after { box-sizing: border-box; } /* ==================== tokens · colors.css ==================== */ /* OpenMetrix — color tokens · AURORA (final, approved 7a/7b) DARK-FIRST: :root = dark default. Light theme = html.light (CREAM), tokens/light.css. Accent: flat orange #FF7A2E. No gradients anywhere. */ :root { /* Accent scale (kept under --om-primary-* API) */ --om-primary-50: #fff3ea; --om-primary-100: #ffe4d1; --om-primary-200: #ffc9a3; --om-primary-300: #ffa76b; --om-primary-400: #ff8f4d; --om-primary-500: #ff7a2e; /* main accent (dark) */ --om-primary-600: #ff7a2e; --om-primary-700: #ff9557; /* hover on dark = lighter */ --om-primary-800: #d95b00; --om-primary-900: #a34400; --om-accent: #ff7a2e; --om-accent-hover: #ff9557; --om-accent-on: #1a0d02; /* text on accent */ --om-accent-text: #ffa05e; /* accent as text on dark bg */ --om-accent-dim: rgba(255, 122, 46, 0.10); /* selected fills */ --om-accent-dim2: rgba(255, 122, 46, 0.32); /* stronger fills, rings */ --om-accent-glow: 0 4px 16px rgba(255, 122, 46, 0.25); /* Semantic (dark values) */ --om-success: #3ddc84; --om-success-text: #3ddc84; --om-success-light: rgba(61, 220, 132, 0.10); --om-success-border: rgba(61, 220, 132, 0.35); --om-error: #ff5d55; --om-error-text: #ff5d55; --om-error-light: rgba(255, 93, 85, 0.10); --om-error-border: rgba(255, 93, 85, 0.40); --om-warning: #ffd166; --om-warning-text: #ffd166; --om-warning-light: rgba(255, 209, 102, 0.10); --om-warning-border: rgba(255, 209, 102, 0.35); --om-info: #5ea1ff; --om-info-text: #5ea1ff; --om-info-light: rgba(94, 161, 255, 0.10); --om-info-border: rgba(94, 161, 255, 0.40); /* Platform brand colors (logos/badges only, never UI accents) */ --om-facebook: #1877F2; --om-google: #4285F4; --om-ga4: #E37400; /* Neutrals — semantic aliases (components consume THESE) */ --om-bg: #0f1013; --om-surface: #16171b; /* cards, rail */ --om-surface-2: #1c1e24; /* wells: krows, table heads, hover fills */ --om-surface-raised: #1e2027; /* dropdowns, popovers, toasts */ --om-surface-sunken: #131419; /* inset fields on dark */ --om-surface-hover: #1a1c22; --om-surface-pressed: #23252d; --om-border: #24262d; --om-border-strong: #2f323b; --om-border-subtle: #1e2026; --om-text: #edeff3; --om-text-body: #d3d6dd; --om-text-secondary: #b9bdc7; --om-text-muted: #7e828d; --om-text-inverse: #0f1013; /* Elevation (dark: borders do the work; cards flat) */ --om-card-shadow: none; --om-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); color-scheme: dark; } /* ==================== tokens · light.css ==================== */ /* OpenMetrix — LIGHT theme "CREAM" · html.light Warm paper bg, white floating cards with soft shadows, deeper orange for contrast. */ html.light { --om-primary-500: #ff6f1a; --om-primary-600: #ff6f1a; --om-primary-700: #f26205; /* hover on light = darker */ --om-accent: #ff6f1a; --om-accent-hover: #f26205; --om-accent-on: #1a0d02; --om-accent-text: #c2510a; --om-accent-dim: rgba(255, 111, 26, 0.09); --om-accent-dim2: rgba(255, 111, 26, 0.30); --om-accent-glow: 0 4px 14px rgba(255, 111, 26, 0.28); --om-success: #12813f; --om-success-text: #12813f; --om-success-light: rgba(18, 129, 63, 0.08); --om-success-border: rgba(18, 129, 63, 0.40); --om-error: #d92d20; --om-error-text: #d92d20; --om-error-light: rgba(217, 45, 32, 0.08); --om-error-border: rgba(217, 45, 32, 0.40); --om-warning: #b54708; --om-warning-text: #b54708; --om-warning-light: rgba(181, 71, 8, 0.09); --om-warning-border: rgba(181, 71, 8, 0.40); --om-info: #175cd3; --om-info-text: #175cd3; --om-info-light: rgba(23, 92, 211, 0.08); --om-info-border: rgba(23, 92, 211, 0.40); --om-bg: #f1f0ee; --om-surface: #ffffff; --om-surface-2: #f5f4f2; --om-surface-raised: #ffffff; --om-surface-sunken: #f5f4f2; --om-surface-hover: #f6f5f3; --om-surface-pressed: #eceae7; --om-border: #e7e6e2; --om-border-strong: #d3d2cc; --om-border-subtle: #eeedea; --om-text: #171715; --om-text-body: #2f2f2b; --om-text-secondary: #454540; --om-text-muted: #8a8a83; --om-text-inverse: #ffffff; /* Cards float on light */ --om-card-shadow: 0 1px 2px rgba(25, 24, 20, 0.04), 0 6px 20px rgba(25, 24, 20, 0.05); --om-shadow-lg: 0 12px 32px rgba(25, 24, 20, 0.14); color-scheme: light; } /* ==================== tokens · typography.css ==================== */ /* OpenMetrix — typography · AURORA Manrope = UI voice (titles, labels, rows, buttons). IBM Plex Mono = data voice (numbers, timestamps, cron, meta counts, kbd). */ :root { --om-font-sans: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --om-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* Size scale (compact) */ --om-text-2xs: 0.5625rem; /* 9px — kpi labels, meta counts (mono) */ --om-text-xs: 0.625rem; /* 10px — chips, feed timestamps */ --om-text-sm: 0.71875rem; /* 11.5px — list rows, seg buttons */ --om-text-base: 0.78125rem; /* 12.5px — default UI, table cells, buttons */ --om-text-md: 0.84375rem; /* 13.5px — emphasized rows */ --om-text-lg: 0.75rem; /* 12px — card titles (700) */ --om-text-xl: 1.1875rem; /* 19px — page titles (800) */ --om-text-2xl: 1.375rem; /* 22px — hero titles (800) */ --om-text-num: 0.875rem; /* 14px — kpi values (mono 600) */ --om-text-num-lg: 1.375rem; /* 22px — stat card values (mono 600) */ /* Weights */ --om-weight-normal: 400; --om-weight-medium: 500; --om-weight-semibold: 600; --om-weight-bold: 700; --om-weight-black: 800; } body { font-family: var(--om-font-sans); color: var(--om-text); background: var(--om-bg); } /* ==================== tokens · layout.css ==================== */ /* OpenMetrix — layout, radii, elevation, motion · AURORA COMPACT */ :root { /* Spacing — 4px grid, compact density (approved 7a) */ --om-space-1: 0.25rem; --om-space-2: 0.5rem; --om-space-3: 0.75rem; /* card padding (12px) */ --om-space-4: 1rem; --om-space-5: 1.25rem; --om-space-6: 1.5rem; /* Radii — soft, layered */ --om-radius-xs: 5px; /* checkboxes */ --om-radius-sm: 8px; /* seg inner, small controls */ --om-radius: 10px; /* buttons, inputs, list rows, krows */ --om-radius-lg: 14px; /* cards */ --om-radius-xl: 18px; /* hero cards / shell corners */ --om-radius-full: 999px; /* pills, avatars, bars */ /* Focus */ --om-ring: 0 0 0 2px var(--om-accent-dim2); --om-ring-error: 0 0 0 2px rgba(255, 93, 85, 0.3); /* App chrome (au-shell dense) */ --om-shell-pad: 12px; /* outer padding + gaps between floating panels */ --om-rail-width: 56px; /* icon rail card */ --om-ric-size: 38px; /* rail icon button */ --om-col-side: 250px; /* left config column */ --om-col-feed: 262px; /* right feed column */ /* Motion */ --om-transition: 120ms ease; --om-transition-slow: 180ms ease-out; } /* ==================== tokens · charts.css ==================== */ /* OpenMetrix — chart series (ECharts) · flat orange first, dark-first */ :root { --om-chart-1: #ff7a2e; /* accent — primary series */ --om-chart-2: #5ea1ff; /* blue */ --om-chart-3: #3ddc84; /* green */ --om-chart-4: #ffd166; /* yellow */ --om-chart-5: #f472b6; /* pink */ --om-chart-6: #a78bfa; /* violet */ --om-chart-7: #2dd4bf; /* teal */ --om-chart-8: #fb7185; /* rose */ --om-chart-grid: var(--om-border); --om-chart-axis-label: var(--om-text-muted); --om-chart-prev: var(--om-border-strong); /* "previous period" series = neutral */ } html.light { --om-chart-1: #ff6f1a; --om-chart-2: #175cd3; --om-chart-3: #12813f; --om-chart-4: #b54708; --om-chart-5: #db2777; --om-chart-6: #7c3aed; --om-chart-7: #0f766e; --om-chart-8: #e11d48; } /* ==================== components.css ==================== */ /* OpenMetrix component classes · AURORA COMPACT (final) Dark-first; html.light = CREAM. Same om-* API as before where possible. Language: floating cards (radius 14, gap 12), pill controls, flat orange accent, Manrope UI + IBM Plex Mono data. No gradients. */ /* ============ BUTTONS ============ */ .om-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 13px; font: 600 0.71875rem/1.25 var(--om-font-sans); border-radius: var(--om-radius); transition: all var(--om-transition); cursor: pointer; border: 1px solid var(--om-border-strong); background: var(--om-surface); color: var(--om-text); text-decoration: none; white-space: nowrap; } .om-btn:focus-visible { outline: 2px solid var(--om-accent); outline-offset: 1px; } .om-btn:disabled { opacity: 0.45; cursor: not-allowed; } .om-btn svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--om-text-secondary); } .om-btn:hover:not(:disabled) { border-color: var(--om-text-muted); } .om-btn-primary { background: var(--om-accent); border-color: var(--om-accent); color: var(--om-accent-on); box-shadow: var(--om-accent-glow); } .om-btn-primary svg { color: var(--om-accent-on); } .om-btn-primary:hover:not(:disabled) { background: var(--om-accent-hover); border-color: var(--om-accent-hover); } .om-btn-secondary { background: var(--om-surface); color: var(--om-text); } .om-btn-secondary:hover:not(:disabled) { border-color: var(--om-text-muted); } .om-btn-danger { background: transparent; color: var(--om-error-text); border-color: var(--om-error-border); box-shadow: none; } .om-btn-danger svg { color: var(--om-error-text); } .om-btn-danger:hover:not(:disabled) { background: var(--om-error-light); border-color: var(--om-error); } .om-btn-ghost { background: transparent; border-color: transparent; color: var(--om-text-secondary); box-shadow: none; } .om-btn-ghost:hover:not(:disabled) { background: var(--om-surface-pressed); color: var(--om-text); border-color: transparent; } .om-btn-sm { padding: 4px 9px; font-size: 0.65625rem; gap: 5px; border-radius: var(--om-radius-sm); } .om-btn-sm svg { width: 12px; height: 12px; } .om-btn-lg { padding: 10px 18px; font-size: 0.78125rem; gap: 8px; border-radius: 12px; } .om-btn-lg svg { width: 15px; height: 15px; } /* ============ CARDS ============ */ .om-card { background: var(--om-surface); border: 1px solid var(--om-border); border-radius: var(--om-radius-lg); padding: 12px; box-shadow: var(--om-card-shadow); } .om-card-hover { transition: border-color var(--om-transition); cursor: pointer; } .om-card-hover:hover { border-color: var(--om-text-muted); } /* Card title row — h3 inside a card */ .om-card-title { margin: 0 0 8px; font: 700 0.75rem var(--om-font-sans); color: var(--om-text); display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; } .om-card-title svg { width: 15px; height: 15px; color: var(--om-text-muted); } /* Mono meta counter for card titles: "97 · 1 SELECTED" */ .om-meta { font: 600 0.5625rem var(--om-font-mono); color: var(--om-text-muted); letter-spacing: 0.02em; } /* ============ FORMS ============ */ .om-input { display: block; width: 100%; padding: 7px 11px; font: 500 0.71875rem/1.3 var(--om-font-sans); color: var(--om-text); background: var(--om-surface-sunken); border: 1px solid var(--om-border-strong); border-radius: var(--om-radius); transition: border-color var(--om-transition), box-shadow var(--om-transition); } .om-input:focus { outline: none; border-color: var(--om-accent); box-shadow: var(--om-ring); } .om-input::placeholder { color: var(--om-text-muted); } .om-input.is-error { border-color: var(--om-error); } .om-input.is-error:focus { box-shadow: var(--om-ring-error); } .om-input.om-mono { font-family: var(--om-font-mono); font-size: 0.6875rem; } .om-select { display: block; width: 100%; padding: 7px 30px 7px 11px; font: 600 0.6875rem var(--om-font-sans); color: var(--om-text); background-color: var(--om-surface-sunken); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%237e828d' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 9px center; background-repeat: no-repeat; background-size: 1.2em 1.2em; border: 1px solid var(--om-border-strong); border-radius: var(--om-radius); appearance: none; transition: border-color var(--om-transition); } .om-select:focus { outline: none; border-color: var(--om-accent); box-shadow: var(--om-ring); } .om-input.om-sm, .om-select.om-sm { padding-top: 5px; padding-bottom: 5px; font-size: 0.65625rem; } /* Single-line inputs and native selects are pills, matching om-sel/om-hq ("controls are pills" — AURORA language). Textareas keep the soft radius. */ input.om-input, select.om-select { border-radius: var(--om-radius-full); } textarea.om-input { border-radius: var(--om-radius); } /* Pill select-row (au-sel): icon + label + chevron, used in config cards */ .om-sel { display: flex; align-items: center; gap: 9px; border: 1px solid var(--om-border-strong); border-radius: var(--om-radius-full); background: var(--om-surface-2); padding: 7px 12px; font: 600 0.6875rem var(--om-font-sans); color: var(--om-text); cursor: pointer; transition: border-color var(--om-transition); } .om-sel:hover { border-color: var(--om-text-muted); } .om-sel svg { width: 14px; height: 14px; color: var(--om-text-muted); flex-shrink: 0; } .om-sel img { width: 14px; height: 14px; flex-shrink: 0; } .om-sel .chev { margin-left: auto; transition: transform var(--om-transition); } button.om-sel { width: 100%; box-sizing: border-box; text-align: left; } .om-sel[aria-expanded="true"] { border-color: var(--om-accent); } .om-sel[aria-expanded="true"] .chev { transform: rotate(180deg); } .om-checkbox { width: 14px; height: 14px; border-radius: var(--om-radius-xs); border: 1px solid var(--om-border-strong); cursor: pointer; accent-color: var(--om-accent); } .om-checkbox:focus-visible { outline: none; box-shadow: var(--om-ring); } .om-label { display: flex; align-items: center; gap: 5px; font: 600 0.65625rem var(--om-font-sans); color: var(--om-text-secondary); margin-bottom: 5px; } .om-field-error { display: flex; align-items: center; gap: 5px; margin-top: 5px; font: 500 0.65625rem var(--om-font-sans); color: var(--om-error-text); } .om-field-help { margin-top: 5px; font: 500 0.625rem var(--om-font-sans); color: var(--om-text-muted); line-height: 1.5; } /* Search pill (au-hq) — the omnibar query box; also inline search */ .om-hq { display: flex; align-items: center; gap: 9px; border: 1px solid var(--om-border-strong); border-radius: var(--om-radius-full); background: var(--om-surface); padding: 8px 14px; color: var(--om-text-muted); font: 500 0.71875rem var(--om-font-sans); cursor: text; transition: border-color var(--om-transition); } .om-hq:hover, .om-hq:focus-within { border-color: var(--om-accent); } .om-hq svg { width: 14px; height: 14px; flex-shrink: 0; } .om-hq input { flex: 1; background: none; border: none; outline: none; color: var(--om-text); font: inherit; min-width: 0; } .om-kbd { margin-left: auto; border: 1px solid var(--om-border-strong); border-radius: var(--om-radius-full); padding: 1px 7px; font: 600 0.5625rem var(--om-font-mono); color: var(--om-text-muted); flex-shrink: 0; } /* ============ STATUS CHIPS (pill + dot) ============ */ .om-status { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--om-radius-full); padding: 3px 10px; font: 700 0.625rem var(--om-font-sans); letter-spacing: 0.02em; line-height: 1.3; } .om-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .om-status--success { color: var(--om-success-text); background: var(--om-success-light); } .om-status--error { color: var(--om-error-text); background: var(--om-error-light); } .om-status--warning { color: var(--om-warning-text); background: var(--om-warning-light); } .om-status--info { color: var(--om-info-text); background: var(--om-info-light); } .om-status--neutral { color: var(--om-text-secondary); background: var(--om-surface-pressed); } /* System pill (omnibar right): "Pipeline OK" */ .om-pill { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--om-radius-full); padding: 5px 12px; font: 700 0.65625rem var(--om-font-sans); color: var(--om-success-text); background: var(--om-success-light); white-space: nowrap; } .om-pill i, .om-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--om-success); flex-shrink: 0; } .om-pill i { display: inline-block; } .om-pill.has-i::before { content: none; } .om-pill--error { color: var(--om-error-text); background: var(--om-error-light); } .om-pill--error i, .om-pill--error::before { background: var(--om-error); } /* Run-history dots */ .om-runs { display: inline-flex; gap: 3px; } .om-runs i { width: 7px; height: 7px; border-radius: 50%; } .om-runs .s { background: var(--om-success); } .om-runs .e { background: var(--om-error); } .om-runs .r { background: var(--om-info); } .om-runs .p { background: var(--om-border-strong); } /* ============ SEGMENTED FILTER ============ */ .om-seg { display: inline-flex; background: var(--om-surface); border: 1px solid var(--om-border); border-radius: var(--om-radius); padding: 3px; gap: 2px; } .om-seg button, .om-seg a { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; border-radius: var(--om-radius-sm); padding: 6px 13px; font: 600 0.71875rem var(--om-font-sans); color: var(--om-text-secondary); cursor: pointer; text-decoration: none; transition: all var(--om-transition); white-space: nowrap; } .om-seg button:hover, .om-seg a:hover { color: var(--om-text); } .om-seg .on { background: var(--om-accent); color: var(--om-accent-on); } .om-seg .n { font: 600 0.625rem var(--om-font-mono); opacity: 0.65; } .om-seg svg { width: 12px; height: 12px; } /* ============ FIELD CHIPS (selected metrics/dims/filters) ============ */ .om-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--om-accent); background: var(--om-accent-dim); color: var(--om-accent-text); border-radius: var(--om-radius-full); padding: 3px 10px; font: 600 0.625rem var(--om-font-mono); } .om-chip svg { width: 10px; height: 10px; } .om-chip-remove { display: inline-flex; border: none; background: none; padding: 0; cursor: pointer; color: inherit; } .om-chip-add { border: 1px dashed var(--om-border-strong); background: transparent; color: var(--om-text-muted); cursor: pointer; } .om-chip-add:hover { color: var(--om-accent-text); border-color: var(--om-accent); } .om-chip-add:disabled { opacity: 0.45; cursor: not-allowed; } .om-chip-add:disabled:hover { color: var(--om-text-muted); border-color: var(--om-border-strong); } /* "+ add" pill — the multi-account toggle inside the account dropdown */ .om-addpill { flex-shrink: 0; font: 600 0.5625rem var(--om-font-mono); padding: 2px 7px; border-radius: 999px; cursor: pointer; background: transparent; border: 1px dashed var(--om-border-strong); color: var(--om-text-muted); transition: border-color var(--om-transition), color var(--om-transition), background-color var(--om-transition); } .om-addpill:hover { border-color: var(--om-accent); color: var(--om-accent-text); } .om-addpill--on { background: var(--om-accent); border: 1px solid var(--om-accent); color: var(--om-accent-on); } .om-addpill--on:hover { border-color: var(--om-accent); color: var(--om-accent-on); } /* Muted text utility (placeholder states) — class, not :style, so it can't clobber an element's static style attribute (Alpine string :style trap). */ .om-muted-text { color: var(--om-text-muted); } .om-chips { display: flex; flex-wrap: wrap; gap: 6px; } /* ============ APP CHROME · shell + rail ============ */ .om-shell { display: flex; height: 100%; padding: var(--om-shell-pad); gap: var(--om-shell-pad); background: var(--om-bg); font-family: var(--om-font-sans); } .om-rail { width: var(--om-rail-width); flex-shrink: 0; background: var(--om-surface); border: 1px solid var(--om-border); border-radius: 16px; box-shadow: var(--om-card-shadow); display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap: 3px; overflow: hidden; transition: width var(--om-transition-slow); } .om-rail-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; text-decoration: none; min-height: 28px; } .om-rail-logo { width: 28px; height: 28px; border-radius: 9px; background: var(--om-accent); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .om-rail-word { display: none; font: 800 0.8125rem var(--om-font-sans); letter-spacing: -0.02em; color: var(--om-text); white-space: nowrap; } .om-ric { width: var(--om-ric-size); height: var(--om-ric-size); border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--om-text-muted); cursor: pointer; text-decoration: none; transition: all var(--om-transition); } .om-ric svg { width: 16px; height: 16px; } .om-ric:hover { color: var(--om-text); background: var(--om-surface-2); } .om-ric--on { color: var(--om-accent-on); background: var(--om-accent); box-shadow: var(--om-accent-glow); } .om-ric--bottom { margin-top: auto; } .om-ric-label { display: none; font: 600 0.71875rem var(--om-font-sans); white-space: nowrap; } /* Expanded rail — chevrons toggle at the bottom; state = html.rail-x, boot script reads localStorage "om-rail-x" before paint (no flash). */ html.rail-x .om-rail { width: 188px; align-items: stretch; padding: 10px 8px; } html.rail-x .om-rail-brand { padding-left: 5px; } html.rail-x .om-ric { width: auto; justify-content: flex-start; gap: 10px; padding: 0 11px; } html.rail-x .om-ric-label, html.rail-x .om-rail-word { display: block; } /* toggle icon swap */ .om-rail .om-rail-when-c { display: flex; } .om-rail .om-rail-when-x { display: none; } html.rail-x .om-rail .om-rail-when-x { display: flex; } html.rail-x .om-rail .om-rail-when-c { display: none; } /* ============ APP CHROME · head row ============ */ .om-head { display: flex; align-items: center; gap: 16px; } .om-head-titles { flex-shrink: 0; } .om-head-titles h1 { margin: 0; font: 800 1.1875rem var(--om-font-sans); color: var(--om-text); white-space: nowrap; } .om-head-titles p { margin: 2px 0 0; font: 500 0.6875rem var(--om-font-sans); color: var(--om-text-muted); white-space: nowrap; } .om-head .om-hq { flex: 1; max-width: 460px; } .om-head-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .om-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--om-accent); color: var(--om-accent-on); display: inline-flex; align-items: center; justify-content: center; font: 800 0.6875rem var(--om-font-sans); flex-shrink: 0; } .om-clock { font: 500 0.65625rem var(--om-font-mono); color: var(--om-text-secondary); } /* ============ KPI ROW (au-krow) ============ */ .om-krow { display: flex; align-items: center; gap: 10px; background: var(--om-surface-2); border-radius: var(--om-radius); padding: 7px 10px; } .om-krow + .om-krow { margin-top: 6px; } .om-kic { width: 27px; height: 27px; border-radius: 50%; background: var(--om-accent-dim); color: var(--om-accent-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .om-kic svg { width: 13px; height: 13px; } .om-krow .l { font: 600 0.71875rem var(--om-font-sans); color: var(--om-text); } .om-krow .v { margin-left: auto; font: 700 0.78125rem var(--om-font-sans); color: var(--om-accent-text); white-space: nowrap; } .om-krow .v.plain { color: var(--om-text-secondary); } .om-krow .v.ok { color: var(--om-success-text); } .om-krow .v.er { color: var(--om-error-text); } /* ============ KPI STRIP (xa-kpi) — results stats ============ */ .om-kpis { display: flex; gap: 8px; } .om-kpi { flex: 1; background: var(--om-surface-2); border-radius: 11px; padding: 8px 12px; } .om-kpi .l { font: 600 0.5625rem var(--om-font-sans); letter-spacing: 0.03em; text-transform: uppercase; color: var(--om-text-muted); } .om-kpi .v { font: 600 0.875rem var(--om-font-mono); color: var(--om-text); margin-top: 3px; } .om-kpi .v.ok { color: var(--om-success-text); } .om-kpi .v.er { color: var(--om-error-text); } .om-kpi .v.ac { color: var(--om-accent-text); } /* ============ STAT CARD (sf-stat) — dashboard KPIs ============ */ .om-stat { background: var(--om-surface); border: 1px solid var(--om-border); border-radius: var(--om-radius-lg); padding: 12px 14px; box-shadow: var(--om-card-shadow); } .om-stat .l { font: 600 0.65625rem var(--om-font-sans); color: var(--om-text-muted); letter-spacing: 0.02em; } .om-stat .v { font: 600 1.375rem var(--om-font-mono); color: var(--om-text); margin-top: 5px; line-height: 1.1; } .om-stat .v.ok { color: var(--om-success-text); } .om-stat .v.er { color: var(--om-error-text); } .om-stat .v.sans { font-family: var(--om-font-sans); font-weight: 600; font-size: 0.8125rem; padding-top: 6px; } .om-stat .d { display: inline-flex; margin-top: 7px; border-radius: var(--om-radius-full); padding: 2px 8px; font: 700 0.59375rem var(--om-font-mono); } .om-stat .d.up { color: var(--om-success-text); background: var(--om-success-light); } .om-stat .d.dn { color: var(--om-error-text); background: var(--om-error-light); } .om-stat .d.nt { color: var(--om-text-muted); background: var(--om-surface-2); } /* ============ LIST ROW (au-rrow) ============ */ .om-rrow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--om-radius); cursor: pointer; text-decoration: none; color: inherit; transition: background-color var(--om-transition); } .om-rrow:hover { background: var(--om-surface-2); } .om-rrow img, .om-rrow .ic { width: 22px; height: 22px; border-radius: 6px; padding: 3px; background: var(--om-surface-2); flex-shrink: 0; box-sizing: border-box; } .om-rrow .ic { display: flex; align-items: center; justify-content: center; color: var(--om-text-muted); padding: 0; } .om-rrow .ic svg { width: 13px; height: 13px; } .om-rrow .nm { font: 600 0.71875rem var(--om-font-sans); color: var(--om-text); } .om-rrow .sub { font: 500 0.59375rem var(--om-font-sans); color: var(--om-text-muted); margin-top: 1px; } .om-rrow .sub.mono { font-family: var(--om-font-mono); } .om-rrow .end { margin-left: auto; display: flex; align-items: center; gap: 8px; } .om-rrow .end svg { width: 14px; height: 14px; color: var(--om-text-muted); } /* ============ ACTIVITY FEED (au-frow) ============ */ .om-frow { display: flex; gap: 8px; padding: 5px 7px; border-radius: 9px; align-items: flex-start; } .om-frow:hover { background: var(--om-surface-2); } .om-frow i { width: 7px; height: 7px; border-radius: 50%; background: var(--om-border-strong); margin-top: 4px; flex-shrink: 0; } .om-frow--success i { background: var(--om-success); } .om-frow--error i { background: var(--om-error); } .om-frow--warning i { background: var(--om-warning); } .om-frow .t { font: 500 0.5625rem var(--om-font-mono); color: var(--om-text-muted); flex-shrink: 0; margin-top: 1.5px; } .om-frow .m { font: 500 0.65625rem var(--om-font-sans); color: var(--om-text-secondary); line-height: 1.45; } .om-frow .m b { color: var(--om-text); font-weight: 600; } .om-live { display: inline-flex; align-items: center; gap: 6px; font: 700 0.59375rem var(--om-font-sans); color: var(--om-success-text); } .om-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--om-success); } /* ============ CHECK LIST (xa-item) ============ */ .om-xitem { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 9px; font: 500 0.71875rem var(--om-font-sans); color: var(--om-text-secondary); cursor: pointer; transition: background-color var(--om-transition); } .om-xitem:hover { background: var(--om-surface-2); } .om-xbox { width: 14px; height: 14px; border-radius: var(--om-radius-xs); border: 1px solid var(--om-border-strong); flex-shrink: 0; position: relative; } .om-xitem.on { color: var(--om-text); } .om-xitem.on .om-xbox { background: var(--om-accent); border-color: var(--om-accent); } .om-xitem.on .om-xbox::after { content: ""; position: absolute; inset: 4px; border-radius: 2px; background: var(--om-accent-on); } .om-xitem .u { margin-left: auto; font: 500 0.5625rem var(--om-font-mono); color: var(--om-text-muted); } /* ============ TABLES ============ */ .om-table { width: 100%; border-collapse: collapse; } .om-table th { padding: 9px 14px; text-align: left; font: 700 0.59375rem var(--om-font-sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--om-text-muted); background: var(--om-surface-2); border-bottom: 1px solid var(--om-border); white-space: nowrap; } .om-table td { padding: 9px 14px; font: 500 0.78125rem var(--om-font-sans); color: var(--om-text); border-bottom: 1px solid var(--om-border); white-space: nowrap; } .om-table tbody tr:last-child td { border-bottom: none; } .om-table tbody tr:hover td { background: var(--om-surface-2); } .om-table .num, .om-table .mono { font-family: var(--om-font-mono); font-size: 0.6875rem; } .om-table .dim { color: var(--om-text-muted); } .om-table .sec { color: var(--om-text-secondary); } .om-table .up { color: var(--om-success-text); } .om-table .dn { color: var(--om-error-text); } .om-table tr.om-total td { background: var(--om-accent-dim); color: var(--om-accent-text); font: 700 0.6875rem var(--om-font-mono); } /* wrap a table in a rounded well inside a card */ .om-table-well { border: 1px solid var(--om-border); border-radius: 11px; overflow: hidden; } .om-th-sort { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; color: inherit; text-decoration: none; font: inherit; letter-spacing: inherit; text-transform: inherit; } .om-th-sort:hover { color: var(--om-text-secondary); } .om-th-sort svg { width: 11px; height: 11px; opacity: 0.5; } .om-th-sort--active svg { opacity: 1; color: var(--om-accent-text); } .om-tfoot { display: flex; justify-content: space-between; align-items: center; padding: 9px 2px 0; font: 500 0.625rem var(--om-font-mono); color: var(--om-text-muted); } /* ============ DISTRIBUTION BAR ============ */ .om-bar { width: 110px; height: 8px; background: var(--om-surface-2); border-radius: var(--om-radius-full); overflow: hidden; display: inline-block; vertical-align: middle; } .om-bar i { display: block; height: 100%; background: var(--om-accent); border-radius: var(--om-radius-full); } /* ============ CHART PRIMS (bars) ============ */ .om-leg { display: flex; gap: 16px; margin-top: 8px; font: 500 0.59375rem var(--om-font-sans); color: var(--om-text-muted); align-items: center; } .om-leg i { width: 8px; height: 8px; border-radius: 50%; background: var(--om-accent); display: inline-block; margin-right: 6px; } .om-leg i.g2 { background: var(--om-border-strong); } /* ============ TOOLTIP ============ */ .om-tooltip { position: relative; } .om-tooltip::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 4px 9px; font: 500 0.625rem var(--om-font-sans); color: var(--om-text); background: var(--om-surface-raised); border: 1px solid var(--om-border-strong); border-radius: var(--om-radius-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--om-transition); z-index: 50; box-shadow: var(--om-shadow-lg); } .om-tooltip:hover::after { opacity: 1; } /* ============ DROPDOWN MENU ============ */ .om-quick-actions { position: relative; } .om-quick-actions-menu { position: absolute; right: 0; top: 100%; margin-top: 4px; width: 13rem; background: var(--om-surface-raised); border: 1px solid var(--om-border-strong); border-radius: 12px; box-shadow: var(--om-shadow-lg); z-index: 40; overflow: hidden; padding: 4px; } .om-quick-actions-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--om-radius-sm); font: 600 0.71875rem var(--om-font-sans); color: var(--om-text-body); text-decoration: none; width: 100%; border: none; background: none; cursor: pointer; text-align: left; transition: background-color var(--om-transition); box-sizing: border-box; } .om-quick-actions-item:hover { background: var(--om-surface-pressed); color: var(--om-text); } .om-quick-actions-item svg { width: 13px; height: 13px; color: var(--om-text-muted); flex-shrink: 0; } .om-quick-actions-item--danger, .om-quick-actions-item--danger svg { color: var(--om-error-text); } .om-quick-actions-divider { border-top: 1px solid var(--om-border); margin: 4px 6px; } /* ============ EMPTY STATE ============ */ .om-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; } .om-empty-state-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--om-surface-2); color: var(--om-text-muted); margin-bottom: 12px; } .om-empty-state-icon svg { width: 18px; height: 18px; } .om-empty-state-title { font: 700 0.78125rem var(--om-font-sans); color: var(--om-text); margin-bottom: 3px; } .om-empty-state-text { font: 500 0.6875rem var(--om-font-sans); color: var(--om-text-muted); margin-bottom: 14px; max-width: 26rem; line-height: 1.55; } /* ============ TOAST ============ */ .om-toast { display: flex; align-items: flex-start; gap: 8px; border: 1px solid; border-radius: 12px; padding: 10px 14px; box-shadow: var(--om-shadow-lg); font: 500 0.71875rem var(--om-font-sans); background: var(--om-surface-raised); } .om-toast--success { color: var(--om-success-text); border-color: var(--om-success-border); } .om-toast--error { color: var(--om-error-text); border-color: var(--om-error-border); } .om-toast--warning { color: var(--om-warning-text); border-color: var(--om-warning-border); } .om-toast--info { color: var(--om-info-text); border-color: var(--om-info-border); } /* ============ SKELETON / MOTION ============ */ .om-skeleton { background: var(--om-surface-pressed); border-radius: 6px; } @keyframes om-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .om-pulse { animation: om-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes om-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } .om-spin { animation: om-spin 1s linear infinite; } /* ============ SEARCH WRAPPER (legacy inline search) ============ */ .om-search-wrapper { position: relative; } .om-search-wrapper svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--om-text-muted); pointer-events: none; } .om-search-wrapper .om-input { padding-left: 32px; } /* ============ PLATFORM BADGE ============ */ .om-platform-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--om-border-strong); border-radius: var(--om-radius-full); font: 600 0.625rem var(--om-font-sans); color: var(--om-text-secondary); background: var(--om-surface); } .om-platform-badge svg, .om-platform-badge img { width: 13px; height: 13px; flex-shrink: 0; } /* ============ WIZARD ============ */ .om-wizard-steps { display: flex; align-items: center; justify-content: center; padding: 18px 0; } .om-wizard-step { display: flex; flex-direction: column; align-items: center; position: relative; flex: 1; max-width: 10rem; } .om-wizard-step-circle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font: 700 0.71875rem var(--om-font-sans); border: 1px solid var(--om-border-strong); background: var(--om-surface); color: var(--om-text-muted); z-index: 1; transition: all var(--om-transition); } .om-wizard-step-circle svg { width: 15px; height: 15px; } .om-wizard-step--active .om-wizard-step-circle, .om-wizard-step--completed .om-wizard-step-circle { border-color: var(--om-accent); background: var(--om-accent); color: var(--om-accent-on); } .om-wizard-step--active .om-wizard-step-circle { box-shadow: var(--om-accent-glow); } .om-wizard-step-label { margin-top: 7px; font: 600 0.625rem var(--om-font-sans); color: var(--om-text-muted); text-align: center; } .om-wizard-step--active .om-wizard-step-label { color: var(--om-text); } .om-wizard-step--completed .om-wizard-step-label { color: var(--om-text-secondary); } .om-wizard-connector { flex: 1; height: 1px; background: var(--om-border-strong); margin: 0 -0.5rem; align-self: flex-start; margin-top: 17px; } .om-wizard-connector--completed { background: var(--om-accent); } /* ============ RADIO CARD ============ */ .om-radio-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--om-border-strong); border-radius: 12px; cursor: pointer; transition: all var(--om-transition); background: var(--om-surface); } .om-radio-card:hover { border-color: var(--om-text-muted); } .om-radio-card--selected { border-color: var(--om-accent); background: var(--om-accent-dim); } .om-radio-card input[type="radio"] { display: none; } .om-radio-card-check { display: none; width: 15px; height: 15px; color: var(--om-accent-text); margin-left: auto; flex-shrink: 0; } .om-radio-card--selected .om-radio-card-check { display: block; } /* ============ MENU / LISTBOX (open dropdown panel) ============ */ .om-menu { background: var(--om-surface-raised); border: 1px solid var(--om-border-strong); border-radius: 12px; box-shadow: var(--om-shadow-lg); padding: 4px; } .om-option { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--om-radius-sm); font: 600 0.71875rem var(--om-font-sans); color: var(--om-text-body); cursor: pointer; transition: background-color var(--om-transition); } .om-option:hover { background: var(--om-surface-pressed); color: var(--om-text); } .om-option--on { color: var(--om-text); background: var(--om-accent-dim); } .om-option img, .om-option svg { width: 14px; height: 14px; flex-shrink: 0; } .om-option .u, .om-option .ck { margin-left: auto; } .om-option .u ~ .ck { margin-left: 8px; } .om-option .u { font: 500 0.5625rem var(--om-font-mono); color: var(--om-text-muted); } .om-option .ck { color: var(--om-accent-text); display: none; align-items: center; } .om-option--on .ck { display: inline-flex; } .om-menu-divider { border-top: 1px solid var(--om-border); margin: 4px 6px; } .om-menu-label { padding: 6px 10px 2px; font: 600 0.5625rem var(--om-font-mono); color: var(--om-text-muted); letter-spacing: 0.04em; text-transform: uppercase; } /* ============ SHELL COLUMNS & HELPERS ============ */ .om-shell-body { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: var(--om-shell-pad); } .om-main { flex: 1; display: flex; gap: var(--om-shell-pad); min-height: 0; } .om-col { display: flex; flex-direction: column; gap: var(--om-shell-pad); min-height: 0; } .om-col--side { width: var(--om-col-side); flex-shrink: 0; overflow-x: hidden; } .om-col--main { flex: 1; min-width: 0; } .om-col--feed { width: var(--om-col-feed); flex-shrink: 0; } .om-scroll-y { overflow-y: auto; } .om-head-titles p:empty { display: none; } /* ============ LOGO CHIP (platform logo on a well) ============ */ .om-logo-chip { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--om-surface-2); flex-shrink: 0; } .om-logo-chip--sm { width: 26px; height: 26px; border-radius: 7px; } .om-logo-chip--lg { width: 48px; height: 48px; border-radius: 12px; } /* ============ FIELD PILL (filter builder field trigger) ============ */ .om-field-pill { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 5px 10px; border-radius: var(--om-radius-full); font: 600 0.625rem var(--om-font-mono); text-align: left; cursor: pointer; transition: all var(--om-transition); background: var(--om-surface); color: var(--om-text-muted); border: 1px dashed var(--om-border-strong); } .om-field-pill:hover { border-color: var(--om-text-muted); } .om-field-pill--set { background: var(--om-accent-dim); color: var(--om-accent-text); border: 1px solid var(--om-accent); } /* ============ DASHED ADD TILE ============ */ .om-tile-add { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 10rem; gap: 8px; border: 1px dashed var(--om-border-strong); border-radius: var(--om-radius-lg); color: var(--om-text-muted); text-decoration: none; font: 600 0.71875rem var(--om-font-sans); transition: border-color var(--om-transition), color var(--om-transition); } .om-tile-add:hover, .om-tile-add:focus-visible { border-color: var(--om-accent); color: var(--om-accent-text); outline: none; } /* ============ LEGACY ALIASES (kept working) ============ */ .om-explorer-layout { display: flex; flex: 1; min-height: 0; gap: var(--om-shell-pad); } .om-explorer-sidebar { width: var(--om-col-side); flex-shrink: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--om-shell-pad); } .om-explorer-results { flex: 1; display: flex; flex-direction: column; overflow: hidden; } [x-cloak]{display:none!important} .htmx-indicator{display:none} .htmx-request .htmx-indicator{display:inline-flex} .htmx-request.htmx-indicator{display:inline-flex} /* ============================================================ Tabulator — Data Explorer grid, AURORA-tokenized. Tabulator adds the `tabulator` class to the SAME element that carries `om-grid` (#results-grid), so the root selector is `.om-grid` and inner parts are its descendants. Built on the simple base theme (tabulator_simple.min.css); these overrides flip it onto the AURORA tokens (dark & light). Ported from v1 app.css during the redesign — do not delete with the bridge. ============================================================ */ .om-grid.tabulator { border: 1px solid var(--om-border); border-radius: 11px; /* match .om-table-well */ background: transparent; font-family: inherit; font-size: 0.78125rem; } /* Header */ .om-grid .tabulator-header { border: none; border-bottom: 1px solid var(--om-border); background: var(--om-surface-2); color: var(--om-text-muted); font-weight: 500; } .om-grid .tabulator-header .tabulator-col { border-right: none; background: transparent; } .om-grid .tabulator-header .tabulator-col .tabulator-col-content { padding: 9px 14px; } .om-grid .tabulator-col-title { font-size: 0.59375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; } .om-grid .tabulator-col .tabulator-col-sorter { color: var(--om-border-strong); } .om-grid .tabulator-col[aria-sort="ascending"] .tabulator-col-sorter, .om-grid .tabulator-col[aria-sort="descending"] .tabulator-col-sorter { color: var(--om-accent-text); } /* Rows + cells — flat, hover only, no stripes; data voice = mono */ .om-grid .tabulator-row, .om-grid .tabulator-row.tabulator-row-even { border: none; border-bottom: 1px solid var(--om-border-subtle); background: var(--om-surface); } .om-grid .tabulator-row:hover { background: var(--om-surface-2); } .om-grid .tabulator-cell { border: none; padding: 9px 14px; color: var(--om-text); } /* Header filter controls -> om-input look */ .om-grid .tabulator-header-filter input, .om-grid .tabulator-header-filter select { border: 1px solid var(--om-border-strong); border-radius: 6px; padding: 1px 5px; height: 20px; font: 400 0.625rem/1.3 var(--om-font-mono); text-transform: none; letter-spacing: normal; background: var(--om-surface-sunken); color: var(--om-text-body); box-sizing: border-box; } .om-grid .tabulator-header-filter input::placeholder { color: var(--om-text-muted); } .om-grid .tabulator-header-filter input:focus, .om-grid .tabulator-header-filter select:focus { outline: none; border-color: var(--om-accent); box-shadow: var(--om-ring); } /* Frozen first column */ .om-grid .tabulator-frozen.tabulator-frozen-left { border-right: 1px solid var(--om-border); box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.25); } .om-grid .tabulator-header .tabulator-frozen.tabulator-frozen-left { background: var(--om-surface-2); } .om-grid .tabulator-row .tabulator-frozen.tabulator-frozen-left { background: inherit; } /* Calculated columns — accent tint */ .om-grid .tabulator-col.om-computed-col, .om-grid .tabulator-cell.om-computed-col { background: var(--om-accent-dim); } .om-grid .tabulator-col.om-computed-col .tabulator-col-title { color: var(--om-accent-text); } /* Footer / pagination */ .om-grid .tabulator-footer { background: var(--om-surface); border-top: 1px solid var(--om-border); color: var(--om-text-muted); padding: 0; font-size: 0.625rem; font-family: var(--om-font-mono); } .om-grid .tabulator-footer .tabulator-page { background: var(--om-surface); border: 1px solid var(--om-border-strong); border-radius: var(--om-radius-sm); color: var(--om-text-body); margin: 0 2px; padding: 3px 9px; font-weight: 500; } .om-grid .tabulator-footer .tabulator-page:not(:disabled):hover { background: var(--om-surface-pressed); color: var(--om-text); } .om-grid .tabulator-footer .tabulator-page.active { background: var(--om-accent); color: var(--om-accent-on); border-color: var(--om-accent); } .om-grid .tabulator-footer .tabulator-page:disabled { opacity: 0.45; } .om-grid .tabulator-footer .tabulator-page-size { border: 1px solid var(--om-border-strong); border-radius: var(--om-radius-sm); background: var(--om-surface-sunken); color: var(--om-text-body); padding: 2px 6px; margin-left: 4px; } .om-grid .tabulator-placeholder { color: var(--om-text-muted); font-size: 0.78125rem; background: transparent; } .om-grid .tabulator-tableholder { background: transparent; } /* ============================================================ Responsive fallback — the shell is desktop-first; below 900px columns stack, the page scrolls as one, and the head row wraps. The 56px rail itself stays (works at phone widths). ============================================================ */ @media (max-width: 900px) { .om-shell { padding: 8px; gap: 8px; } .om-main { flex-direction: column; overflow-y: auto; } .om-col { min-height: auto; } .om-col--side, .om-col--feed, .om-col--main { width: auto; flex: none; } .om-col .om-scroll-y, .om-col.om-scroll-y { overflow-y: visible; } .om-head { flex-wrap: wrap; row-gap: 8px; } .om-head .om-hq { order: 10; flex-basis: 100%; max-width: none; } .om-explorer-layout { flex-direction: column; overflow-y: auto; } .om-explorer-sidebar { width: auto; overflow-y: visible; } } /* --- grid polish: design-7b table look ------------------------------- */ /* All data cells speak mono (the "data voice"); dimensions muted like the reference table's `mono sec` cells. */ .om-grid .tabulator-cell { font-family: var(--om-font-mono); font-size: 0.6875rem; } .om-grid .tabulator-cell.om-col-dim { color: var(--om-text-secondary); } .om-grid .tabulator-row .tabulator-cell { border-right: none; } .om-cell-up { color: var(--om-success-text); font-weight: 600; } .om-cell-dn { color: var(--om-error-text); font-weight: 600; } .om-cell-dim { color: var(--om-text-muted); } /* Row hover — the vendor "simple" theme paints #bbb via a higher-specificity media rule; match its specificity to keep the token color. */ @media (hover: hover) and (pointer: fine) { .om-grid .tabulator-row.tabulator-selectable:hover { background-color: var(--om-surface-2); } } /* Sorter arrows (vendor draws borders, not glyphs) */ .om-grid .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-sorter .tabulator-arrow { border-bottom-color: var(--om-border-strong); } .om-grid .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-sorter .tabulator-arrow { border-bottom-color: var(--om-accent); } .om-grid .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-sorter .tabulator-arrow { border-top-color: var(--om-accent); } /* TOTAL row (column calcs) — orange tint like the reference om-total row. Vendor uses !important on the holder background, so mirror it. */ .om-grid .tabulator-footer .tabulator-calcs-holder, .om-grid .tabulator-footer .tabulator-calcs-holder .tabulator-row, .om-grid .tabulator-header .tabulator-calcs-holder, .om-grid .tabulator-header .tabulator-calcs-holder .tabulator-row { background: var(--om-accent-dim) !important; border-color: var(--om-border); } .om-grid .tabulator-footer .tabulator-calcs-holder .tabulator-cell, .om-grid .tabulator-header .tabulator-calcs-holder .tabulator-cell { color: var(--om-accent-text); font-weight: 700; border-right: none; } .om-grid .tabulator-footer { border-top: 1px solid var(--om-border); } .om-grid .tabulator-row.tabulator-calcs { background: var(--om-accent-dim) !important; } /* Tabulator popups (header-filter lists) render in , outside .om-grid — theme them globally on the raised surface. */ .tabulator-popup-container { background: var(--om-surface-raised); border: 1px solid var(--om-border-strong); border-radius: var(--om-radius-sm); box-shadow: var(--om-shadow-lg); color: var(--om-text); } .tabulator-edit-list .tabulator-edit-list-item { color: var(--om-text-body); } .tabulator-edit-list .tabulator-edit-list-item.active, .tabulator-edit-list .tabulator-edit-list-item.focused { background: var(--om-accent); color: var(--om-accent-on); outline: none; } @media (hover: hover) and (pointer: fine) { .tabulator-edit-list .tabulator-edit-list-item:hover { background: var(--om-surface-pressed); color: var(--om-text); cursor: pointer; } } .tabulator-edit-list .tabulator-edit-list-placeholder { color: var(--om-text-muted); } /* --- fields checklist: real checkboxes drive the om-xitem/om-xbox look ---- The explorer keeps native inputs (JS + htmx read them); they are visually hidden and the design's orange box with the inner dark square is drawn by CSS from :checked via :has(). --- */ .om-xitem { position: relative; } .om-xitem input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .om-xitem:has(input:checked) { color: var(--om-text); } .om-xitem:has(input:checked) .om-xbox { background: var(--om-accent); border-color: var(--om-accent); } .om-xitem:has(input:checked) .om-xbox::after { content: ""; position: absolute; inset: 4px; border-radius: 2px; background: var(--om-accent-on); } .om-xitem:has(input:focus-visible) .om-xbox { box-shadow: var(--om-ring); } /* field-list category header (sticky, mono-ish uppercase on a well) */ .om-fieldcat { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 3px 10px; background: var(--om-surface-2); font: 700 0.5rem var(--om-font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--om-text-muted); } .om-fieldcat .n { margin-left: auto; font: 600 0.5625rem var(--om-font-mono); } .om-field-list { border: 1px solid var(--om-border); border-radius: 10px; overflow-y: auto; } /* --- search pills: field searches look like the design's om-sel search row (well background, 600 weight) instead of a sunken input --- */ .om-search-wrapper .om-input { background: var(--om-surface-2); font-weight: 600; } .om-search-wrapper .om-input:focus { background: var(--om-surface-sunken); } /* --- slim scrollbars everywhere (design language: quiet chrome) --- */ * { scrollbar-width: thin; scrollbar-color: var(--om-border-strong) transparent; } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--om-border-strong); border-radius: var(--om-radius-full); } *::-webkit-scrollbar-thumb:hover { background: var(--om-text-muted); }