:root { color-scheme: dark; --head2-top: 32px; /* Base font sizing scales the entire UI to mimic 90% browser zoom */ --base-font-size: 90%; /* Normalized font sizes in rem units for consistent scaling */ --font-size-11: 0.6875rem; --font-size-12: 0.75rem; --font-size-13: 0.8125rem; --font-size-14: 0.875rem; --font-size-16: 1rem; --font-size-18: 1.125rem; } /* Theme tokens ----------- The variables below provide a single source of truth for the UI color palette. Additional theme packs can override any of the `--color-*` tokens by applying a `data-theme` attribute to the `` element and defining a new rule block, e.g. `:root[data-theme="sunrise"] { ... }`. */ :root, :root[data-theme="midnight"] { /* Core surfaces */ --color-surface-canvas: #0f172a; --color-surface-panel: #131f35; --color-surface-panel-elevated: #16273f; --color-surface-panel-hover: #1e3456; --color-surface-panel-soft: #182840; --color-surface-panel-muted: #151f33; --color-surface-table: #14203a; --color-surface-table-label: #1b2d4a; --color-surface-table-label-hover: #243b63; --color-surface-chip: #1e3254; /* Rule surfaces */ --color-surface-rule-group: var(--color-surface-panel-elevated); --color-surface-rule-card: #1f3254; --color-surface-rule-card-hover: #27426d; /* Rule presentation tokens */ --rule-group-surface: linear-gradient(160deg, rgba(76, 132, 248, 0.18), rgba(15, 23, 42, 0.08)), var(--color-surface-rule-group); --rule-group-shadow: 0 20px 40px rgba(8, 15, 35, 0.37); --rule-card-surface: linear-gradient(155deg, rgba(76, 132, 248, 0.22), rgba(15, 23, 42, 0.05)), var(--color-surface-rule-card); --rule-card-hover-surface: linear-gradient(155deg, rgba(96, 165, 250, 0.28), rgba(15, 23, 42, 0.1)), var(--color-surface-rule-card-hover); --rule-card-shadow: 0 18px 36px rgba(8, 15, 35, 0.45); /* Borders */ --color-border-subtle: #1b2a43; --color-border: #2c4065; --color-border-strong: #31466c; --color-border-focus: rgba(59, 130, 246, 0.45); /* Text */ --color-text-primary: #f5f7ff; --color-text-secondary: #aebbd4; --color-text-muted: #8492af; --color-text-inverse: #0b1220; --color-text-on-strong: #ffffff; /* Accents */ --color-accent: #3b82f6; --color-accent-strong: #2563eb; --color-accent-soft: rgba(59, 130, 246, 0.18); --color-success: #34d399; --color-success-strong: #22c55e; --color-danger: #f87171; --color-danger-strong: #ef4444; --color-warning: #fbbf24; /* Utility tokens */ --color-navbar: #121d33; --color-selection-strong: #4c84f8; --color-selection-soft: rgba(76, 132, 248, 0.28); --color-selection-flash: rgba(96, 165, 250, 0.45); --shadow-elevated: 0 16px 40px rgba(8, 15, 35, 0.5); /* Component aliases */ --bg: var(--color-surface-canvas); --panel: var(--color-surface-panel); --panel-alt: var(--color-surface-panel-elevated); --panel-hover: var(--color-surface-panel-hover); --toggle-bg: var(--color-surface-panel-soft); --ink: var(--color-text-primary); --muted: var(--color-text-secondary); --muted-strong: var(--color-text-muted); --ink-inverse: var(--color-text-inverse); --ink-contrast: var(--color-text-on-strong); --accent: var(--color-accent); --accent-hi: var(--color-accent-strong); --accent-soft: var(--color-accent-soft); --danger: var(--color-danger); --danger-hi: var(--color-danger-strong); --success: var(--color-success); --success-hi: var(--color-success-strong); --navbar-bg: var(--color-navbar); --navbar-divider: linear-gradient( to bottom, rgba(230, 232, 238, 0) 0%, rgba(230, 232, 238, 0.43) 50%, rgba(230, 232, 238, 0) 100% ); --grid-border: var(--color-border); --grid-border-strong: var(--color-border-strong); --grid-border-subtle: var(--color-border-subtle); --header-fill: var(--panel-alt); --header-fill-2: var(--panel); --header-row-bg: var(--panel-hover); --spacer: var(--color-surface-panel-muted); --table-cell-bg: var(--color-surface-table); --table-label-bg: var(--color-surface-table-label); --table-label-hover: var(--color-surface-table-label-hover); --table-text-shadow: 0 1px 1px rgba(8, 15, 35, 0.7); --entity-divider: #4f6286; --selection-color: var(--color-selection-strong); --selection-overlay: var(--color-selection-soft); --selection-flash: var(--color-selection-flash); --loading-overlay: rgba(15, 23, 42, 0.45); --btn-bg: #1a2c4a; --btn-hover-bg: #21395b; --btn-border: var(--grid-border); --btn-close-filter: brightness(0) invert(1); --panel-card-bg: var(--panel-alt); --popover-border: var(--grid-border-strong); --swatch-border: var(--grid-border); --chip-bg: var(--color-surface-chip); --chip-color: #d7e4ff; /* Form controls */ --form-control-bg: var(--panel-card-bg); --form-control-border: var(--grid-border); --form-control-focus-border: var(--accent); --form-control-placeholder: var(--muted-strong); --form-control-disabled-bg: var(--spacer); --form-control-disabled-color: var(--muted); /* Dropdowns and menus */ --dropdown-bg: var(--panel-card-bg); --dropdown-color: var(--ink); --dropdown-border: var(--grid-border); --dropdown-hover-bg: var(--panel-hover); --dropdown-hover-color: var(--ink); --dropdown-active-bg: var(--accent); --dropdown-active-color: var(--ink-contrast); --dropdown-disabled-color: var(--muted-strong); --dropdown-header-color: var(--muted); --dropdown-divider: rgba(148, 163, 184, 0.22); --dropdown-shadow: 0 24px 55px rgba(8, 15, 35, 0.55); /* List group tokens */ --list-bg: var(--panel); --list-color: var(--ink); --list-border: var(--grid-border); --list-hover-bg: var(--panel-hover); --list-hover-color: var(--ink); --list-active-bg: var(--accent); --list-active-color: var(--ink-contrast); --list-active-border: var(--accent); --list-disabled-bg: var(--spacer); --list-disabled-color: var(--muted); --list-muted-color: var(--muted); /* Overlays */ --tooltip-bg: rgba(15, 23, 42, 0.94); --tooltip-color: var(--ink-contrast); --tooltip-border: rgba(59, 76, 110, 0.6); --tooltip-shadow: 0 18px 45px rgba(8, 15, 35, 0.55); --switch-track: #24354f; --switch-track-border: #2d4464; --switch-track-active: var(--success-hi); --switch-thumb: #ffffff; --rule-row-bg: #233a5d; --rule-row-hover-bg: #2c4d79; --rule-group-bg: var(--color-surface-rule-group); --rule-group-border: var(--grid-border); --rule-card-bg: var(--color-surface-rule-card); --rule-card-border: var(--grid-border); --rule-card-hover: var(--color-surface-rule-card-hover); --rule-card-disabled-bg: #111a2c; --rule-card-disabled-border: var(--grid-border-subtle); --border-translucent: rgba(36, 52, 82, 0.65); /* Bootstrap variable bridge */ --bs-body-bg: var(--bg); --bs-body-color: var(--ink); --bs-heading-color: var(--ink); --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--muted); --bs-tertiary-color: var(--muted-strong); --bs-secondary-bg: var(--panel); --bs-tertiary-bg: var(--panel-alt); --bs-border-color: var(--grid-border); --bs-border-color-translucent: var(--border-translucent); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent-hi); --bs-form-control-bg: var(--form-control-bg); --bs-form-control-color: var(--ink); --bs-form-control-border-color: var(--form-control-border); --bs-form-control-focus-bg: var(--form-control-bg); --bs-form-control-focus-color: var(--ink); --bs-form-control-focus-border-color: var(--form-control-focus-border); --bs-form-control-focus-box-shadow: 0 0 0 2px var(--color-border-focus); --bs-form-control-disabled-bg: var(--form-control-disabled-bg); --bs-form-control-disabled-color: var(--form-control-disabled-color); --bs-form-control-placeholder-color: var(--form-control-placeholder); --bs-form-select-bg: var(--form-control-bg); --bs-form-select-color: var(--ink); --bs-form-select-border-color: var(--form-control-border); --bs-form-select-focus-border-color: var(--form-control-focus-border); --bs-form-select-focus-box-shadow: 0 0 0 2px var(--color-border-focus); --bs-form-check-bg: var(--form-control-bg); --bs-form-check-border-color: var(--form-control-border); --bs-form-check-checked-bg: var(--accent); --bs-form-check-checked-border-color: var(--accent); --bs-form-check-focus-border-color: var(--form-control-focus-border); --bs-form-check-focus-box-shadow: 0 0 0 2px var(--color-border-focus); --bs-dropdown-bg: var(--dropdown-bg); --bs-dropdown-color: var(--dropdown-color); --bs-dropdown-border-color: var(--dropdown-border); --bs-dropdown-box-shadow: var(--dropdown-shadow); --bs-dropdown-link-color: var(--dropdown-color); --bs-dropdown-link-hover-color: var(--dropdown-hover-color); --bs-dropdown-link-hover-bg: var(--dropdown-hover-bg); --bs-dropdown-link-active-bg: var(--dropdown-active-bg); --bs-dropdown-link-active-color: var(--dropdown-active-color); --bs-dropdown-link-disabled-color: var(--dropdown-disabled-color); --bs-dropdown-divider-bg: var(--dropdown-divider); --bs-dropdown-header-color: var(--dropdown-header-color); --bs-list-group-bg: var(--list-bg); --bs-list-group-color: var(--list-color); --bs-list-group-border-color: var(--list-border); --bs-list-group-action-color: var(--list-muted-color); --bs-list-group-action-hover-color: var(--list-hover-color); --bs-list-group-action-hover-bg: var(--list-hover-bg); --bs-list-group-action-active-color: var(--list-hover-color); --bs-list-group-action-active-bg: var(--list-hover-bg); --bs-list-group-disabled-bg: var(--list-disabled-bg); --bs-list-group-disabled-color: var(--list-disabled-color); --bs-list-group-active-bg: var(--list-active-bg); --bs-list-group-active-color: var(--list-active-color); --bs-list-group-active-border-color: var(--list-active-border); --bs-tooltip-bg: var(--tooltip-bg); --bs-tooltip-color: var(--tooltip-color); --bs-popover-bg: var(--panel-card-bg); --bs-popover-border-color: var(--popover-border); --bs-popover-header-bg: var(--header-fill); --bs-popover-header-color: var(--ink); --bs-popover-body-color: var(--ink); --bs-popover-arrow-color: var(--panel-card-bg); --bs-popover-arrow-border: var(--popover-border); --bs-btn-close-color: var(--ink); --bs-btn-close-opacity: 0.8; --bs-offcanvas-bg: var(--panel-card-bg); --bs-offcanvas-color: var(--ink); --bs-offcanvas-border-color: var(--grid-border-strong); --bs-modal-bg: var(--panel-card-bg); --bs-modal-color: var(--ink); --bs-modal-border-color: var(--grid-border); --bs-modal-header-border-color: var(--grid-border); --bs-modal-footer-border-color: var(--grid-border); --bs-modal-footer-bg: var(--panel); } /* Vanilla light theme ------------------- A clean, high-contrast palette tuned for daylight viewing. The palette keeps the token structure identical to the dark theme so the application can switch themes by simply toggling the `data-theme` attribute on ``. */ :root[data-theme="vanilla-light"] { color-scheme: light; /* Core surfaces */ --color-surface-canvas: #f5f7fb; --color-surface-panel: #ffffff; --color-surface-panel-elevated: #f1f5ff; --color-surface-panel-hover: #e8f0ff; --color-surface-panel-soft: #f7f9ff; --color-surface-panel-muted: #edf2fb; --color-surface-table: #ffffff; --color-surface-table-label: #eef4ff; --color-surface-table-label-hover: #dae7ff; --color-surface-chip: #dbeafe; /* Rule surfaces */ --color-surface-rule-group: var(--color-surface-panel-elevated); --color-surface-rule-card: var(--color-surface-panel); --color-surface-rule-card-hover: #f8fbff; /* Rule presentation tokens */ --rule-group-surface: linear-gradient(160deg, rgba(37, 99, 235, 0.08), rgba(148, 163, 184, 0.04)), var(--color-surface-rule-group); --rule-group-shadow: 0 18px 38px rgba(15, 23, 42, 0.12); --rule-card-surface: linear-gradient(155deg, rgba(37, 99, 235, 0.1), rgba(148, 163, 184, 0.04)), var(--color-surface-rule-card); --rule-card-hover-surface: linear-gradient(155deg, rgba(59, 130, 246, 0.16), rgba(148, 163, 184, 0.08)), var(--color-surface-rule-card-hover); --rule-card-shadow: 0 14px 30px rgba(15, 23, 42, 0.14); /* Borders */ --color-border-subtle: #e2e8f0; --color-border: #cbd5e1; --color-border-strong: #94a3b8; --color-border-focus: rgba(37, 99, 235, 0.35); /* Text */ --color-text-primary: #0f172a; --color-text-secondary: #475569; --color-text-muted: #64748b; --color-text-inverse: #ffffff; --color-text-on-strong: #ffffff; /* Accents */ --color-accent: #2563eb; --color-accent-strong: #1d4ed8; --color-accent-soft: rgba(37, 99, 235, 0.14); --color-success: #16a34a; --color-success-strong: #15803d; --color-danger: #dc2626; --color-danger-strong: #b91c1c; --color-warning: #f59e0b; /* Utility tokens */ --color-navbar: #ffffff; --color-selection-strong: #2563eb; --color-selection-soft: rgba(37, 99, 235, 0.18); --color-selection-flash: rgba(191, 219, 254, 0.75); --shadow-elevated: 0 12px 30px rgba(15, 23, 42, 0.12); /* Component aliases */ --bg: var(--color-surface-canvas); --panel: var(--color-surface-panel); --panel-alt: var(--color-surface-panel-elevated); --panel-hover: var(--color-surface-panel-hover); --toggle-bg: var(--color-surface-panel-soft); --ink: var(--color-text-primary); --muted: var(--color-text-secondary); --muted-strong: var(--color-text-muted); --ink-inverse: var(--color-text-inverse); --ink-contrast: var(--color-text-on-strong); --accent: var(--color-accent); --accent-hi: var(--color-accent-strong); --accent-soft: var(--color-accent-soft); --danger: var(--color-danger); --danger-hi: var(--color-danger-strong); --success: var(--color-success); --success-hi: var(--color-success-strong); --navbar-bg: var(--color-navbar); --navbar-divider: linear-gradient( to bottom, rgba(148, 163, 184, 0) 0%, rgba(81, 89, 101, 0.68) 50%, rgba(148, 163, 184, 0) 100% ); --grid-border: var(--color-border); --grid-border-strong: var(--color-border-strong); --grid-border-subtle: var(--color-border-subtle); --header-fill: #f0f4ff; --header-fill-2: #e7ecf6; --header-row-bg: #e5ecf8; --spacer: var(--color-surface-panel-muted); --table-cell-bg: var(--color-surface-panel); --table-label-bg: var(--color-surface-table-label); --table-label-hover: var(--color-surface-table-label-hover); --table-text-shadow: none; --entity-divider: #cbd5f5; --selection-color: var(--color-selection-strong); --selection-overlay: var(--color-selection-soft); --selection-flash: var(--color-selection-flash); --loading-overlay: rgba(148, 163, 184, 0.25); --btn-bg: #e2e8f0; --btn-hover-bg: #cbd5f5; --btn-border: var(--grid-border); --btn-close-filter: none; --panel-card-bg: var(--panel); --popover-border: var(--grid-border); --swatch-border: #cbd5e1; --chip-bg: var(--color-surface-chip); --chip-color: #1d4ed8; /* Form controls */ --form-control-bg: var(--panel); --form-control-border: var(--grid-border); --form-control-focus-border: var(--accent); --form-control-placeholder: var(--muted-strong); --form-control-disabled-bg: var(--spacer); --form-control-disabled-color: var(--muted); /* Dropdowns and menus */ --dropdown-bg: var(--panel); --dropdown-color: var(--ink); --dropdown-border: var(--grid-border); --dropdown-hover-bg: var(--panel-hover); --dropdown-hover-color: var(--ink); --dropdown-active-bg: var(--accent); --dropdown-active-color: var(--ink-contrast); --dropdown-disabled-color: var(--muted-strong); --dropdown-header-color: var(--muted); --dropdown-divider: var(--grid-border-subtle); --dropdown-shadow: 0 16px 40px rgba(15, 23, 42, 0.18); /* List group tokens */ --list-bg: var(--panel); --list-color: var(--ink); --list-border: var(--grid-border); --list-hover-bg: var(--panel-hover); --list-hover-color: var(--ink); --list-active-bg: var(--accent); --list-active-color: var(--ink-contrast); --list-active-border: var(--accent); --list-disabled-bg: var(--spacer); --list-disabled-color: var(--muted); --list-muted-color: var(--muted); /* Overlays */ --tooltip-bg: rgba(15, 23, 42, 0.92); --tooltip-color: #f8fafc; --tooltip-border: rgba(15, 23, 42, 0.2); --tooltip-shadow: 0 18px 40px rgba(15, 23, 42, 0.18); --switch-track: #dbeafe; --switch-track-border: #bfdbfe; --switch-track-active: var(--success-hi); --switch-thumb: #ffffff; --rule-row-bg: #f1f5f9; --rule-row-hover-bg: #e2e8f0; --rule-group-bg: var(--color-surface-rule-group); --rule-group-border: var(--grid-border); --rule-card-bg: var(--color-surface-rule-card); --rule-card-border: var(--grid-border-subtle); --rule-card-hover: var(--color-surface-rule-card-hover); --rule-card-disabled-bg: #f1f5f9; --rule-card-disabled-border: var(--grid-border-subtle); --border-translucent: rgba(148, 163, 184, 0.35); } html { font-size: var(--base-font-size); } html, body { height: 100%; margin: 0; padding: 0 !important; background: var(--bg); color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; overflow: hidden; } .app { height: calc(100vh - var(--navbar-height, 0px)); margin-top: var(--navbar-height, 0px); box-sizing: border-box; overflow: hidden; } /* Form controls */ .form-control, .form-select { background-color: var(--form-control-bg); color: var(--ink); border-color: var(--form-control-border); } .form-control:focus, .form-select:focus { color: var(--ink); background-color: var(--form-control-bg); border-color: var(--form-control-focus-border); box-shadow: 0 0 0 2px var(--color-border-focus); } .form-control::placeholder { color: var(--form-control-placeholder); opacity: 1; } .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--form-control-disabled-bg); color: var(--form-control-disabled-color); } .form-control-plaintext { color: var(--ink); } .form-check-input { background-color: var(--form-control-bg); border-color: var(--form-control-border); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-input:focus { border-color: var(--form-control-focus-border); box-shadow: 0 0 0 2px var(--color-border-focus); } .form-check-input:disabled { background-color: var(--form-control-disabled-bg); border-color: var(--form-control-border); } .form-control[type="file"] { color: var(--ink); } .form-control[type="file"]::file-selector-button, .form-control[type="file"]::-webkit-file-upload-button { background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: 6px; color: var(--ink); padding: 0.375rem 0.75rem; margin-right: 12px; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .form-control[type="file"]::file-selector-button:hover, .form-control[type="file"]::file-selector-button:focus, .form-control[type="file"]::-webkit-file-upload-button:hover, .form-control[type="file"]::-webkit-file-upload-button:focus { background: var(--btn-hover-bg); border-color: var(--grid-border-strong); color: var(--ink); } .form-control[type="file"]::file-selector-button:active, .form-control[type="file"]::-webkit-file-upload-button:active { background: var(--accent); border-color: var(--accent); color: var(--ink-contrast); } /* Dropdowns */ .dropdown-menu { background-color: var(--dropdown-bg); border: 1px solid var(--dropdown-border); box-shadow: var(--dropdown-shadow); color: var(--dropdown-color); padding: 0.5rem 0; } .dropdown-item { color: var(--dropdown-color); transition: background-color .12s ease, color .12s ease; } .dropdown-item:hover, .dropdown-item:focus { color: var(--dropdown-hover-color); background-color: var(--dropdown-hover-bg); } .dropdown-item.active, .dropdown-item:active { color: var(--dropdown-active-color); background-color: var(--dropdown-active-bg); } .dropdown-item.disabled, .dropdown-item:disabled { color: var(--dropdown-disabled-color); } .dropdown-divider { border-color: var(--dropdown-divider); opacity: 1; } .dropdown-header { color: var(--dropdown-header-color); } /* List groups */ .list-group { --bs-list-group-bg: var(--list-bg); --bs-list-group-color: var(--list-color); --bs-list-group-border-color: var(--list-border); --bs-list-group-action-color: var(--list-muted-color); --bs-list-group-action-hover-color: var(--list-hover-color); --bs-list-group-action-hover-bg: var(--list-hover-bg); --bs-list-group-action-active-color: var(--list-hover-color); --bs-list-group-action-active-bg: var(--list-hover-bg); --bs-list-group-disabled-bg: var(--list-disabled-bg); --bs-list-group-disabled-color: var(--list-disabled-color); --bs-list-group-active-bg: var(--list-active-bg); --bs-list-group-active-color: var(--list-active-color); --bs-list-group-active-border-color: var(--list-active-border); } .list-group-item { background-color: var(--list-bg); border-color: var(--list-border); color: var(--list-color); transition: background-color .12s ease, color .12s ease, border-color .12s ease; } .list-group-item:hover, .list-group-item:focus { background-color: var(--list-hover-bg); color: var(--list-hover-color); } .list-group-item.active { background-color: var(--list-active-bg); border-color: var(--list-active-border); color: var(--list-active-color); } .list-group-item.disabled, .list-group-item:disabled { background-color: var(--list-disabled-bg); color: var(--list-disabled-color); } /* Tooltips and popovers */ .tooltip .tooltip-inner { background: var(--tooltip-bg); color: var(--tooltip-color); border-radius: 6px; border: 1px solid var(--tooltip-border); box-shadow: var(--tooltip-shadow); } .tooltip .tooltip-arrow::before { border-top-color: var(--tooltip-bg) !important; border-right-color: var(--tooltip-bg) !important; border-bottom-color: var(--tooltip-bg) !important; border-left-color: var(--tooltip-bg) !important; } .popover { background: var(--bs-popover-bg); border: 1px solid var(--bs-popover-border-color); box-shadow: var(--shadow-elevated); color: var(--bs-popover-body-color); } .popover-header { background: var(--bs-popover-header-bg); color: var(--bs-popover-header-color); border-bottom: 1px solid var(--bs-popover-border-color); } .popover-body { color: var(--bs-popover-body-color); } .title { font-weight: 800; letter-spacing: .2px; } .subtitle { color: var(--muted); font-size: var(--font-size-12); } .navbar .subtitle { font-size: var(--font-size-18); padding-top: 0; } #title { padding-bottom: 0; } .navbar-logo { padding-bottom: 0.5rem; padding-top: 0.5rem; height: 50px; width: auto; } .navbar-branding { gap: 0.75rem; } .navbar-divider { align-self: stretch; width: 1px; background: var(--navbar-divider); } .theme-toggle, .navbar-action-toggle { align-items: center; background: var(--toggle-bg); border: 1px solid var(--grid-border); border-radius: 999px; color: var(--ink); cursor: pointer; display: inline-flex; height: 34px; justify-content: center; padding: 0; transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; width: 34px; } .theme-toggle:hover, .theme-toggle:focus, .navbar-action-toggle:hover, .navbar-action-toggle:focus { background: var(--panel-hover); border-color: var(--grid-border-strong); color: var(--ink); } .theme-toggle:focus-visible, .navbar-action-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-border-focus); } .theme-toggle .bi, .navbar-action-toggle .bi { font-size: 1rem; line-height: 1; } .user-menu { position: relative; } .user-menu-toggle { align-items: center; background: var(--toggle-bg); border: 1px solid var(--grid-border); border-radius: 999px; color: var(--ink); cursor: pointer; display: inline-flex; height: 36px; justify-content: center; padding: 0; transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; width: 36px; } .user-menu-toggle:hover, .user-menu-toggle:focus { background: var(--panel-hover); border-color: var(--grid-border-strong); color: var(--ink); } .user-menu-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-border-focus); } .user-menu-toggle::after { display: none; } .user-menu-avatar { display: inline-block; width: 20px; height: 20px; background: url('images/person.svg') no-repeat center / contain; } /* Tint the avatar with the surrounding text color when mask support is available. */ @supports ((mask: url()) or (-webkit-mask: url())) { .user-menu-avatar { background-color: currentColor; background-image: none; mask: url('images/person.svg') no-repeat center / contain; -webkit-mask: url('images/person.svg') no-repeat center / contain; } } /* Gear icon shared by aggregation controls and rule cards. */ .icon-gear { display: inline-block; width: 1rem; height: 1rem; background: url('images/gear.svg') no-repeat center / contain; vertical-align: middle; } @supports ((mask: url()) or (-webkit-mask: url())) { .icon-gear { background-color: currentColor; background-image: none; mask: url('images/gear.svg') no-repeat center / contain; -webkit-mask: url('images/gear.svg') no-repeat center / contain; } } /* Ensure the dropdown provides enough space for the profile summary. */ .user-menu .dropdown-menu { min-width: 16rem; } /* Profile summary shown at the top of the user menu. */ .user-menu-profile { max-width: 18rem; } .user-menu-org, .user-menu-email { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-org { color: var(--dropdown-color); font-size: var(--font-size-18); font-weight: 600; line-height: 1.2; } .user-menu-email { color: var(--muted); font-size: var(--font-size-16); line-height: 1.2; margin-top: 0.125rem; min-height: 1rem; } /* Set custom background color for the fixed top navbar */ .navbar.fixed-top { background-color: var(--navbar-bg) !important; border-bottom: 1px solid var(--grid-border-subtle); --bs-navbar-padding-y: 0rem; } .navbar .navbar-brand, .navbar .navbar-text { color: var(--ink); } .navbar .navbar-brand:focus, .navbar .navbar-brand:hover, .navbar .navbar-text:focus, .navbar .navbar-text:hover { color: var(--ink); } .view-switch { display: flex; gap: 6px; background: var(--toggle-bg); padding: 4px; border: 1px solid var(--grid-border); border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); } .aggregate-toggle { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--grid-border); border-radius: 10px; font-size: var(--font-size-12); cursor: default; background: var(--toggle-bg); } #aggregateToggle { background: var(--toggle-bg); } .aggregate-toggle.active { border-color: var(--success-hi); box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35); } .aggregate-toggle.disabled { opacity: 0.55; } /* Tooltip styling for disabled Report Manager button */ .report-tooltip .tooltip-inner { max-width: 240px; white-space: normal; } /* Ensure toggle uses success/danger colors and retains hover styles */ .aggregate-toggle .btn-success { background: var(--success); border-color: var(--success); color: var(--ink-contrast); } .aggregate-toggle .btn-success:hover { background: var(--success-hi); border-color: var(--success-hi); } .aggregate-toggle .btn-danger { background: var(--danger); border-color: var(--danger); color: var(--ink-contrast); } .aggregate-toggle .btn-danger:hover { background: var(--danger-hi); border-color: var(--danger-hi); } .aggregate-toggle .toggle-handle.btn-default { background: var(--switch-thumb); border-color: var(--switch-track-border); border-radius: 4px; } .btn.toggle { background: transparent; border: none; padding: 6px 10px; border-radius: 8px; font-size: var(--font-size-12); font-weight: 700; color: var(--muted); cursor: pointer; transition: background-color .15s ease, color .15s ease; } .btn.toggle:hover { background: var(--accent-soft); color: var(--ink); } .btn.toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-border-focus); } .btn.toggle.active { background: var(--accent); color: var(--ink-contrast); } /* Shared dark card styling for grid and rule panels */ .panel-card { --bs-card-bg: var(--panel-card-bg); background-color: var(--panel-card-bg); border: 1px solid var(--grid-border); border-radius: 0; box-shadow: var(--shadow-elevated); } .table-actions-toggle { opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 5; } .grid-card:hover .table-actions-toggle { opacity: 1; pointer-events: auto; } .grid-card .table-actions { width: 250px; position: absolute; top: 0; right: 0; bottom: 0; background: var(--panel-card-bg); color: var(--ink); border-left: 1px solid var(--grid-border); } table.grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; } .grid th, .grid td { border-right: 1px solid var(--grid-border); border-bottom: 1px solid var(--grid-border); padding: 6px 10px; white-space: nowrap; user-select: none; cursor: default; } .grid th { position: sticky; top: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(15, 23, 42, 0.22)), var(--header-fill); color: var(--ink); font-weight: 700; z-index: 3; font-size: var(--font-size-13); border-bottom: 1px solid var(--grid-border-strong); box-shadow: inset 0 -1px 0 0 var(--grid-border-strong), 0 2px 10px rgba(8, 15, 35, 0.25); } .grid tr.header-entities th { text-align: center; border-top: 1px solid var(--grid-border); } .grid tr.header-metrics th { font-weight: 600; text-align: center; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(15, 23, 42, 0.26)), var(--header-fill-2); top: var(--head2-top); z-index: 4; border-bottom: 2px solid var(--grid-border-strong); } .grid tr.header-entities th.label-col, .grid tr.header-metrics th.row-spacer { position: static; top: auto; z-index: auto; } .grid th.row-spacer { background: var(--header-fill-2); color: var(--muted); font-weight: 700; border-right: 1px solid var(--grid-border-strong); } .grid th.label-col { background: var(--table-label-bg); color: var(--ink); font-weight: 600; border-right: 2px solid var(--grid-border-strong); box-shadow: 2px 0 8px rgba(8, 15, 35, 0.28); } .grid tr.header-entities th { font-size: var(--font-size-18); font-weight: 700; letter-spacing: .3px; } .grid tr.header-metrics th { font-size: var(--font-size-14); } .grid tbody td.label-col.body { position: sticky; left: 0; z-index: 2; background: var(--table-label-bg); color: var(--ink); font-weight: 700; border-right: 2px solid var(--grid-border-strong); border-bottom: 2px solid var(--grid-border-strong); box-shadow: inset -1px 0 0 var(--grid-border-strong), inset 0 -1px 0 rgba(255, 255, 255, 0.03); } .grid tbody tr:first-child td.label-col.body { border-top: 2px solid var(--grid-border-strong); } .grid tbody tr:last-child td.label-col.body { border-bottom: 2px solid var(--grid-border-strong); } .grid tbody td.header-cell { background: var(--header-row-bg); color: var(--ink); font-weight: 800; font-size: var(--font-size-16); user-select: none; cursor: default; pointer-events: none; border-bottom: 2px solid var(--grid-border-strong); position: sticky; left: 0; z-index: 1; } .grid tbody td.has-path { padding-left: calc(8px + var(--level) * 16px); position: relative; } .grid tbody td.has-path::before { content: ''; position: absolute; left: calc(4px + (var(--level) - 1) * 16px); top: 0; bottom: 0; border-left: 2px solid var(--grid-border-strong); } .grid tbody td.label-col.body.has-path, .grid tbody td.header-cell.has-path { border-bottom: none; } .grid tbody td.label-col.body.has-path { box-shadow: inset -1px 0 0 var(--grid-border-strong); } .grid tbody td.label-col.body.has-path::after, .grid tbody td.header-cell.has-path::after { content: ''; position: absolute; left: calc(4px + (var(--level) - 1) * 16px); right: 0; bottom: 0; border-bottom: 2px solid var(--grid-border-strong); } .grid tbody td { background: var(--table-cell-bg); font-variant-numeric: tabular-nums; position: relative; z-index: 0; color: var(--ink); text-shadow: var(--table-text-shadow); transition: background-color .12s ease; } .right { text-align: right; } .entity-start { border-left: 3px solid var(--entity-divider) !important; } .cell-selected { box-shadow: inset 0 0 0 9999px var(--selection-overlay), inset 0 0 0 2px var(--selection-color) !important; } .btn { background: var(--btn-bg); color: var(--ink); border: 1px solid var(--btn-border); padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: var(--font-size-12); font-weight: 600; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .btn:hover { background: var(--btn-hover-bg); border-color: var(--grid-border-strong); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-border-focus); } .btn-ghost { background: transparent; } .btn.primary { border-color: var(--accent); background: var(--accent); color: var(--ink-contrast); } .btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn-close { filter: var(--btn-close-filter, none); } /* SweetAlert2 prompt dialog */ .prompt-popup { background: var(--panel); color: var(--ink); border: 1px solid var(--grid-border); border-radius: 10px; } .prompt-popup .swal2-title, .prompt-popup .swal2-html-container { color: var(--ink); } .prompt-popup .prompt-actions { display: flex; gap: 8px; justify-content: center; } /* Popover */ .rule-popover { position: fixed; z-index: 1080; display: none; max-width: 340px; --bs-popover-bg: var(--panel); --bs-popover-border-color: var(--popover-border); --bs-popover-color: var(--ink); --bs-popover-header-bg: var(--header-fill); --bs-popover-header-color: var(--ink); --bs-popover-arrow-color: var(--header-fill); --bs-popover-arrow-border: var(--bs-popover-border-color); } .rule-popover .popover-body { padding: 0.75rem; } .rule-popover .popover-arrow { position: absolute; } .hidden { display: none; } /* Utility class ensuring helper popovers overlay the rule editor */ .field-popover { z-index: 1100; } /* Show blocked cursor for read-only or disabled controls */ .cursor-blocked { cursor: not-allowed; } /* Prevent users from selecting text in read-only controls */ .no-select { user-select: none; } /* Global loading overlay */ .loading-overlay { position: fixed; inset: 0; background: var(--loading-overlay); backdrop-filter: blur(4px); /* Use a z-index higher than Bootstrap modals so uploads blur the report manager */ z-index: 2000; display: none; cursor: wait; } .loading-overlay.visible { display: block; } /* Reusable square element for color display */ .color-swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--swatch-border); cursor: pointer; } /* Larger variant used in popovers */ .color-swatch-lg { width: 32px; height: 32px; } /* Example theme override ---------------------- Uncomment or copy this block into a separate stylesheet to spin up a new theme pack. Applying `data-theme="aurora"` on the `` element switches the palette at runtime. */ :root[data-theme="aurora"] { --color-surface-canvas: #111320; --color-surface-panel: #172136; --color-surface-panel-elevated: #1c2a45; --color-surface-panel-hover: #243659; --color-accent: #22d3ee; --color-accent-strong: #0ea5e9; --color-accent-soft: rgba(14, 165, 233, 0.22); --color-selection-strong: #38bdf8; --color-selection-soft: rgba(56, 189, 248, 0.28); } /* Share modal recipients field */ .share-email-field { min-height: calc(2.5rem + var(--bs-border-width, 1px) * 2); background-color: var(--form-control-bg); border-color: var(--form-control-border); color: var(--ink); } .share-email-field:focus-within { border-color: var(--form-control-focus-border); box-shadow: 0 0 0 2px var(--color-border-focus); } .share-email-field.is-invalid, .share-email-field.is-invalid:focus-within { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.35); } .share-email-field .share-email-input { min-width: 12rem; flex: 1 0 10rem; background: transparent; color: inherit; } .share-email-field .share-email-input:focus { outline: none; box-shadow: none; } .share-email-field .share-email-input::placeholder { color: var(--form-control-placeholder); } .share-email-chip { padding: 0.25rem 0.5rem; background-color: var(--accent); color: var(--ink-contrast); } .share-email-chip .btn-close { width: 0.65rem; height: 0.65rem; font-size: 0.55rem; margin-left: 0.25rem; }