/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/* Label/tag denoting the user that shared a connection */
.jdbc-share-tag {

    background: #0095ff;
    padding: 0.25em;

    -moz-border-radius:    0.25em;
    -webkit-border-radius: 0.25em;
    -khtml-border-radius:  0.25em;
    border-radius:         0.25em;

    color: white;
    font-size: 0.75em;
    font-weight: bold;

}
/*
 * SabreX Design System v2 — Design Tokens (canonical source of truth)
 *
 * @package    @sabrex/design-system
 * @license    Proprietary — SabreX Ltd
 *
 * Copyright © 2026 SabreX Ltd. All rights reserved.
 *
 * Every design value in SXD v2 originates here as a CSS custom property. There
 * is no second copy of any token value anywhere. Tailwind v4 exposes these as
 * utilities via the `@theme` block at the foot of this file. Components
 * reference SEMANTIC tokens (--bg-*, --fg-*, --border-*); semantic tokens
 * reference SCALAR tokens (--primary-700, --neutral-200).
 *
 * Theming: light is the default (:root). `[data-theme="dark"]` forces dark;
 * `[data-theme="light"]` forces light; absence of the attribute follows
 * prefers-color-scheme. See brief §5 and §8.
 *
 * Proprietary. This file is the intellectual property of SabreX Ltd and may
 * not be copied, redistributed, or modified without prior written authorisation.
 *
 * AI Use Policy: This code must not be used for training, fine-tuning, evaluation,
 * indexing, embedding, or retrieval by any AI/ML system without prior written
 * consent from SabreX Ltd.
 */

/* Brand logo assets (real SABREX wordmark + SX monogram, base64-inlined). Kept
 * first so the @import is valid CSS (must precede other rules). Ships the
 * official marks with the tokens so apps use them via .sxd-logo / .sxd-logomark
 * instead of inventing their own. See src/tokens/brand.css and src/assets/brand/. */
@import './brand.css';

/* ===========================================================================
 * Self-hosted fonts (brief §5.8) — no external CDN loads, ever.
 * Shipped weights: Source Sans 3 400/500/600/700; JetBrains Mono 400/500/600.
 * Open Sans (Source Sans 3 fallback family) self-hosted at 400/600/700 (latin).
 * =========================================================================== */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/SourceSans3-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../fonts/SourceSans3-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../../fonts/SourceSans3-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/SourceSans3-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../fonts/JetBrainsMono-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../../fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/OpenSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../../fonts/OpenSans-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/OpenSans-Bold.woff2') format('woff2');
}

/* ===========================================================================
 * SCALAR TOKENS — theme-invariant (type scale, spacing, radii, motion, layout)
 * =========================================================================== */
:root {
  /* Brand red (§5.3) — use sparingly. */
  --sabrex-red: #f30022;

  /* Type scale (§5.9) */
  /* Micro steps — below the 12px body/caption floor, for genuinely dense,
   * space-constrained surfaces only (viz/canvas node labels, dense meters,
   * micro-chips). NOT for prose, body, or table text — those floor at --fs-12. */
  --fs-9: 0.5625rem;
  --fs-10: 0.625rem;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --font-sans:
    'Source Sans 3', 'Aptos', 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* Spacing — 4px base grid (§5.10) */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* Radii (§5.11) */
  /* Radii — lifted for a softer, contemporary read (2026 restyle). The old
   * 2/4/6/8 scale read as 2021-era "productive/sharp"; this is gentler without
   * going rounded-toy. Controls 6px, cards/inputs 8px, dialogs 12px. */
  --radius-xs: 3px;
  --radius-sm: 6px; /* buttons, chips, small controls */
  --radius-md: 8px; /* cards, inputs, menus */
  --radius-lg: 12px; /* dialogs, drawers, large surfaces */
  --radius-pill: 999px;

  /* Motion (§5.13) — enterprise restraint: no bounce/spring/overshoot.
   * --ease-standard for most; --ease-entrance is a pure decelerate (no overshoot)
   * for overlay/menu entrances; --ease-emphasis for deliberate moves. */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.2, 0, 0, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-slow: 320ms;

  /* Layout (§5.14) */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
  --breadcrumb-h: 40px;
  --topbar-accent-h: 3px;

  /* Overlay scrim (brief §5.12) — the dim layer behind dialogs/drawers. Theme-
   * invariant: the same near-black wash reads correctly over light and dark. */
  --scrim: rgba(12, 15, 20, 0.45);

  /* ---------------------------------------------------------------------------
   * DENSITY (2026 restyle) — comfortable is the default; [data-density="compact"]
   * (set by <DensityProvider> or a `data-density` attribute on any container)
   * overrides the whole set. Components consume these via h-[var(--density-*)] and
   * arbitrary padding so density is one token flip, not per-component branching.
   * ------------------------------------------------------------------------- */
  --density-control-sm: 32px;
  --density-control-md: 38px;
  --density-control-lg: 44px;
  --density-row: 44px;
  --density-row-dense: 36px; /* opt-in dense table rows within comfortable mode */
  --density-pad-x: 14px;
  --density-pad-y: 9px;
  --density-gap: 8px;
}

/* Compact density — tighter controls/rows for data-heavy views. */
[data-density='compact'] {
  --density-control-sm: 28px;
  --density-control-md: 32px;
  --density-control-lg: 38px;
  --density-row: 34px;
  --density-row-dense: 30px;
  --density-pad-x: 10px;
  --density-pad-y: 6px;
  --density-gap: 6px;
}

/* ===========================================================================
 * LIGHT THEME — scalar colour ramps + semantic mapping (default)
 * =========================================================================== */
:root,
[data-theme='light'] {
  /* Primary — Cobalt (§5.2) */
  --primary-50: #e9f0fb;
  --primary-100: #c5d7f2;
  --primary-200: #9cbae6;
  --primary-300: #6e98d5;
  --primary-400: #437bc2;
  --primary-500: #2961ae;
  --primary-600: #154e9a;
  --primary-700: #0b3f82; /* primary action colour */
  --primary-800: #092f61;
  --primary-900: #071f42; /* sidebar background */
  --primary-950: #04122a;

  /* Neutrals — Slate, warmed (§5.4 + 2026 restyle). Surface stops (0–200) carry
   * a faint warm cast (Stripe-style paper, not cold/clinical); text stops (400–900)
   * stay near-neutral slate so body text reads crisp and AA contrast is preserved
   * against the original cool ramp. */
  --neutral-0: #ffffff;
  --neutral-50: #f8f8f6; /* warm off-white — sunken */
  --neutral-100: #f2f2ef; /* warm paper — app background */
  --neutral-150: #eae9e5; /* row hover */
  --neutral-200: #e1e0db; /* subtle border (warm hairline) */
  --neutral-300: #c3c6cb; /* strong border, disabled, dividers */
  --neutral-400: #888f99; /* placeholder text */
  --neutral-500: #5a626d; /* secondary text */
  --neutral-600: #404853; /* icons */
  --neutral-700: #272d36; /* body text on light */
  --neutral-800: #181d24;
  --neutral-900: #0c0f14;

  /* Status (§5.5) */
  --status-processing: #1976d2;
  --status-processing-bg: #e3f2fd;
  --status-completed: #2e7d32;
  --status-completed-bg: #e8f5e9;
  --status-failed: #c62828;
  --status-failed-bg: #ffebee;
  --status-warning: #ed6c02;
  --status-warning-bg: #fff4e5;

  /* Severity (§5.6) — consistent fg/bg naming throughout */
  --severity-critical-fg: #ffe7e4;
  --severity-critical-bg: #d23a2e; /* intentional exception: light text on solid red */
  --severity-high-fg: #c2185b;
  --severity-high-bg: #fce4ec;
  --severity-medium-fg: #a8760a;
  --severity-medium-bg: #fff4d6;
  --severity-low-fg: #3d4c5c;
  --severity-low-bg: #e5ecf2;
  --severity-info-fg: #566779;
  --severity-info-bg: #eef3f8;

  /* Semantic foreground / background / border (§5.7) */
  --bg-app: var(--neutral-100);
  --bg-surface: var(--neutral-0);
  --bg-sunken: var(--neutral-50);
  --bg-sidebar: var(--primary-900);
  --bg-topbar: var(--neutral-0);
  --bg-topbar-accent: var(--sabrex-red);

  --fg-primary: var(--neutral-700);
  --fg-secondary: var(--neutral-500);
  --fg-tertiary: var(--neutral-400);
  --fg-inverse: var(--neutral-0);
  --fg-on-primary: #ffffff; /* MUST be defined — was a v1 bug (§5.7) */
  --fg-on-sidebar: #ffffff;
  /* Rest-state sidebar nav text. A light, low-saturation blue-grey reads cleanly on
   * the deep cobalt without looking like a filled button — the saturated --primary-200
   * was too button-like at rest (2026 restyle). */
  --fg-on-sidebar-muted: #c3d0e2;
  --fg-link: var(--primary-600);

  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-focus: var(--primary-700);

  /* Primary action — semantic layer so dark can shift luminance (see note). */
  --bg-primary-action: var(--primary-700);
  --bg-primary-action-hover: var(--primary-800);

  /* Elevation — light (§5.12 + 2026 restyle). Layered, low-spread (Linear-style):
   * a hairline contact line + a soft ambient blur, both tight, so surfaces read
   * as "lifted paper" rather than dropped boxes. Depth is primarily layer + border
   * (Carbon DNA); shadow is the additive, never the whole story. */
  --shadow-0: none;
  --shadow-1: 0 1px 1px rgba(12, 15, 20, 0.04), 0 1px 2px rgba(12, 15, 20, 0.06);
  --shadow-2: 0 1px 2px rgba(12, 15, 20, 0.05), 0 2px 6px rgba(12, 15, 20, 0.07);
  --shadow-3: 0 2px 4px rgba(12, 15, 20, 0.05), 0 6px 16px -2px rgba(12, 15, 20, 0.1);
  --shadow-4: 0 4px 8px rgba(12, 15, 20, 0.06), 0 16px 32px -8px rgba(12, 15, 20, 0.16);
  /* Focus ring — refined: a tight inset-feeling hairline + soft cobalt halo. */
  --shadow-focus: 0 0 0 2px var(--bg-surface), 0 0 0 4px rgba(11, 63, 130, 0.45);

  /* Charts (light) — three colour ROLES + shared chrome. Categorical has no
   * inherent meaning (series in trends/grouped bars); severity and status reuse
   * the finding/pipeline semantics. Promoted from the v1 charts-tokens spec. */
  --chart-grid: #eceff2;
  --chart-axis: var(--neutral-300);
  --chart-axis-label: var(--neutral-500);
  --chart-tooltip-bg: var(--neutral-900);
  --chart-tooltip-fg: #f4f6f8;
  --chart-muted: var(--neutral-300);
  --chart-highlight: var(--primary-700);

  --chart-cat-1: #2a4068;
  --chart-cat-2: #4f8cb8;
  --chart-cat-3: #7a6ba8;
  --chart-cat-4: #c4805e;
  --chart-cat-5: #6ba088;
  --chart-cat-6: #a8895e;

  --chart-sev-critical: #d23a2e;
  --chart-sev-high: #c2185b;
  --chart-sev-medium: #ed6c02;
  --chart-sev-low: #6b7580;
  --chart-sev-info: #9aa3ae;

  --chart-st-ok: #2e7d32;
  --chart-st-warning: #ed6c02;
  --chart-st-critical: #c62828;
  --chart-st-processing: #1976d2;
  --chart-st-unknown: #9aa3ae;
}

/* ===========================================================================
 * DARK THEME
 *
 * Primary uses POSITIONAL INVERSION (§5.2): the light ramp reversed, so a
 * "lighter" stop number yields a darker colour and vice versa. NOTE: the brief's
 * worked example (dark --primary-700 == #437BC2) is a ~3-stop shift, not a clean
 * mirror; we honour its INTENT at the semantic layer instead — --bg-primary-action
 * maps to a lighter stop in dark so the action colour reads correctly against
 * --fg-on-primary. (Flagged for confirmation in the scaffold report.)
 *
 * Neutrals are REBALANCED, not pure-inverted (§5.4): 0–200 are dark surfaces,
 * 300–900 are light text. --neutral-150 (row hover) is LIGHTER than --neutral-0
 * (surface) so hover reads as "lifted".
 * =========================================================================== */
[data-theme='dark'] {
  /* Primary — reversed ramp */
  --primary-50: #04122a;
  --primary-100: #071f42;
  --primary-200: #092f61;
  --primary-300: #0b3f82;
  --primary-400: #154e9a;
  --primary-500: #2961ae;
  --primary-600: #437bc2;
  --primary-700: #6e98d5;
  --primary-800: #9cbae6;
  --primary-900: #c5d7f2;
  --primary-950: #e9f0fb;

  /* Neutrals — rebalanced */
  --neutral-0: #17202b; /* surface */
  --neutral-50: #0b1119; /* sunken (darker than surface) */
  --neutral-100: #0b1119; /* app background */
  --neutral-150: #26323f; /* row hover — LIGHTER than surface */
  --neutral-200: #2f3d4c; /* subtle borders */
  --neutral-300: #3d4c5c;
  --neutral-400: #8294a4; /* placeholder */
  --neutral-500: #b7c3cf; /* secondary text */
  --neutral-600: #d6dfe8;
  --neutral-700: #e5ecf2; /* body text on dark */
  --neutral-800: #f7fafc;
  --neutral-900: #ffffff;

  /* Status — same foregrounds; backgrounds become low-alpha washes (§5.5) */
  --status-processing: #5b9bd5;
  --status-processing-bg: rgba(91, 155, 213, 0.16);
  --status-completed: #66bb6a;
  --status-completed-bg: rgba(102, 187, 106, 0.16);
  --status-failed: #ef5350;
  --status-failed-bg: rgba(239, 83, 80, 0.16);
  --status-warning: #ffa726;
  --status-warning-bg: rgba(255, 167, 38, 0.16);

  /* Severity — washes in dark; Critical stays solid for emphasis */
  --severity-critical-fg: #ffe7e4;
  --severity-critical-bg: #d23a2e;
  --severity-high-fg: #f48fb1;
  --severity-high-bg: rgba(244, 143, 177, 0.16);
  --severity-medium-fg: #e0b65d;
  --severity-medium-bg: rgba(224, 182, 93, 0.16);
  --severity-low-fg: #b7c3cf;
  --severity-low-bg: rgba(183, 195, 207, 0.14);
  --severity-info-fg: #8294a4;
  --severity-info-bg: rgba(130, 148, 164, 0.14);

  /* Semantic */
  --bg-app: var(--neutral-100);
  --bg-surface: var(--neutral-0);
  --bg-sunken: var(--neutral-50);
  --bg-sidebar: var(--primary-50);
  --bg-topbar: var(--neutral-0);
  --bg-topbar-accent: var(--sabrex-red);

  --fg-primary: var(--neutral-700);
  --fg-secondary: var(--neutral-500);
  --fg-tertiary: var(--neutral-400);
  --fg-inverse: var(--neutral-900);
  --fg-on-primary: #0b1119; /* dark value (§5.7) */
  --fg-on-sidebar: var(--neutral-800);
  --fg-on-sidebar-muted: var(--neutral-500);
  --fg-link: var(--primary-700);

  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-focus: var(--primary-700);

  /* Action shifts to a lighter stop so it reads against the near-black fg. */
  --bg-primary-action: var(--primary-600);
  --bg-primary-action-hover: var(--primary-700);

  /* Elevation — dark (§5.12 + 2026 restyle). Borders carry most of the elevation
   * on dark surfaces (soft shadows barely read); shadows stay near-black and tight
   * as a subtle anchor under raised surfaces. */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 6px 16px -2px rgba(0, 0, 0, 0.6);
  --shadow-4: 0 16px 32px -8px rgba(0, 0, 0, 0.7);
  /* Focus ring — surface gap + brighter cobalt halo for dark contrast. */
  --shadow-focus: 0 0 0 2px var(--bg-surface), 0 0 0 4px rgba(110, 152, 213, 0.6);

  /* Charts (dark) — categorical brightened for contrast on dark surfaces; grid
   * and axis lifted; tooltip inverts to a light surface. Semantic chart colours
   * track the dark status/severity foregrounds so chips and series agree. */
  --chart-grid: #2f3d4c;
  --chart-axis: var(--neutral-300);
  --chart-axis-label: var(--neutral-500);
  --chart-tooltip-bg: #e5ecf2;
  --chart-tooltip-fg: #0b1119;
  --chart-muted: #3d4c5c;
  --chart-highlight: var(--primary-700);

  --chart-cat-1: #6e98d5;
  --chart-cat-2: #4f8cb8;
  --chart-cat-3: #a18fd0;
  --chart-cat-4: #d99a72;
  --chart-cat-5: #7fb89e;
  --chart-cat-6: #c4a673;

  --chart-sev-critical: #ef5350;
  --chart-sev-high: #f48fb1;
  --chart-sev-medium: #ffa726;
  --chart-sev-low: #8294a4;
  --chart-sev-info: #b7c3cf;

  --chart-st-ok: #66bb6a;
  --chart-st-warning: #ffa726;
  --chart-st-critical: #ef5350;
  --chart-st-processing: #5b9bd5;
  --chart-st-unknown: #8294a4;
}

/* Auto mode: no data-theme attribute → follow the OS preference. Mirrors the
 * [data-theme='dark'] block above. Keep the two in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='dark']) {
    --primary-50: #04122a;
    --primary-100: #071f42;
    --primary-200: #092f61;
    --primary-300: #0b3f82;
    --primary-400: #154e9a;
    --primary-500: #2961ae;
    --primary-600: #437bc2;
    --primary-700: #6e98d5;
    --primary-800: #9cbae6;
    --primary-900: #c5d7f2;
    --primary-950: #e9f0fb;

    --neutral-0: #17202b;
    --neutral-50: #0b1119;
    --neutral-100: #0b1119;
    --neutral-150: #26323f;
    --neutral-200: #2f3d4c;
    --neutral-300: #3d4c5c;
    --neutral-400: #8294a4;
    --neutral-500: #b7c3cf;
    --neutral-600: #d6dfe8;
    --neutral-700: #e5ecf2;
    --neutral-800: #f7fafc;
    --neutral-900: #ffffff;

    --status-processing: #5b9bd5;
    --status-processing-bg: rgba(91, 155, 213, 0.16);
    --status-completed: #66bb6a;
    --status-completed-bg: rgba(102, 187, 106, 0.16);
    --status-failed: #ef5350;
    --status-failed-bg: rgba(239, 83, 80, 0.16);
    --status-warning: #ffa726;
    --status-warning-bg: rgba(255, 167, 38, 0.16);

    --severity-critical-fg: #ffe7e4;
    --severity-critical-bg: #d23a2e;
    --severity-high-fg: #f48fb1;
    --severity-high-bg: rgba(244, 143, 177, 0.16);
    --severity-medium-fg: #e0b65d;
    --severity-medium-bg: rgba(224, 182, 93, 0.16);
    --severity-low-fg: #b7c3cf;
    --severity-low-bg: rgba(183, 195, 207, 0.14);
    --severity-info-fg: #8294a4;
    --severity-info-bg: rgba(130, 148, 164, 0.14);

    --bg-app: var(--neutral-100);
    --bg-surface: var(--neutral-0);
    --bg-sunken: var(--neutral-50);
    --bg-sidebar: var(--primary-50);
    --bg-topbar: var(--neutral-0);
    --bg-topbar-accent: var(--sabrex-red);

    --fg-primary: var(--neutral-700);
    --fg-secondary: var(--neutral-500);
    --fg-tertiary: var(--neutral-400);
    --fg-inverse: var(--neutral-900);
    --fg-on-primary: #0b1119;
    --fg-on-sidebar: var(--neutral-800);
    --fg-on-sidebar-muted: var(--neutral-500);
    --fg-link: var(--primary-700);

    --border-subtle: var(--neutral-200);
    --border-strong: var(--neutral-300);
    --border-focus: var(--primary-700);

    --bg-primary-action: var(--primary-600);
    --bg-primary-action-hover: var(--primary-700);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.55);
    --shadow-3: 0 6px 16px -2px rgba(0, 0, 0, 0.6);
    --shadow-4: 0 16px 32px -8px rgba(0, 0, 0, 0.7);
    --shadow-focus: 0 0 0 2px var(--bg-surface), 0 0 0 4px rgba(110, 152, 213, 0.6);

    /* Charts (auto-dark) — mirror of [data-theme='dark']. */
    --chart-grid: #2f3d4c;
    --chart-axis: var(--neutral-300);
    --chart-axis-label: var(--neutral-500);
    --chart-tooltip-bg: #e5ecf2;
    --chart-tooltip-fg: #0b1119;
    --chart-muted: #3d4c5c;
    --chart-highlight: var(--primary-700);

    --chart-cat-1: #6e98d5;
    --chart-cat-2: #4f8cb8;
    --chart-cat-3: #a18fd0;
    --chart-cat-4: #d99a72;
    --chart-cat-5: #7fb89e;
    --chart-cat-6: #c4a673;

    --chart-sev-critical: #ef5350;
    --chart-sev-high: #f48fb1;
    --chart-sev-medium: #ffa726;
    --chart-sev-low: #8294a4;
    --chart-sev-info: #b7c3cf;

    --chart-st-ok: #66bb6a;
    --chart-st-warning: #ffa726;
    --chart-st-critical: #ef5350;
    --chart-st-processing: #5b9bd5;
    --chart-st-unknown: #8294a4;
  }
}

/* Honour reduced-motion globally (brief §9). Components add their own variants. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }
}

/* ===========================================================================
 * Numeric posture — context-scoped, NEVER global. SabreX content is figure-dense
 * (percentages, counts, versions, IDs, hex). Tabular + slashed-zero earns its
 * place in data/identifier surfaces; plain proportional figures read better in
 * prose. Apply .sx-nums-data on table roots / stat cards / metric readouts / ID
 * + version strings / code-config viewers; apply .sx-nums-prose on narrative and
 * description blocks (including prose nested inside a data surface, to reset).
 * Source Sans 3 carries a real `zero` OpenType feature, so slashed-zero is
 * reachable via the high-level font-variant-numeric property (preferred over
 * font-feature-settings, which composes badly). Do NOT set these on body/root.
 * =========================================================================== */
.sx-nums-data {
  font-variant-numeric: tabular-nums slashed-zero;
}
.sx-nums-prose {
  font-variant-numeric: normal;
}

/* ===========================================================================
 * Overlay motion — the `animate-in` / `animate-out` utilities used by Dialog,
 * Drawer, Popover, Dropdown, Select, Tooltip, etc. Tailwind v4 ships no such
 * utilities and no animation dependency is installed, so without these the
 * overlays popped in instantly and the --ease-entrance curve went unused.
 *
 * Enterprise restraint (brief §5.13): a quick fade + 2% scale settle on entrance,
 * a faster fade on exit — no slide, no bounce, no overshoot. Reduced-motion is
 * already honoured because --dur-* collapse to 0ms under the media query above,
 * and components also carry `motion-reduce:animate-none` as a belt-and-braces.
 * =========================================================================== */
@keyframes sxd-enter {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes sxd-exit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}

@utility animate-in {
  animation: sxd-enter var(--dur-med) var(--ease-entrance);
}
@utility animate-out {
  animation: sxd-exit var(--dur-fast) var(--ease-standard);
}

/* Loading / pulse motion (brief §5.13) — a steady spinner and a subtle attention
 * pulse for loading affordances and live indicators. Literal durations (not --dur-*
 * tokens), so they need their own reduced-motion guard below. */
@keyframes sxd-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes sxd-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
@utility sx-spin {
  animation: sxd-spin 0.7s linear infinite;
}
@utility sx-pulse {
  animation: sxd-pulse 1.4s var(--ease-standard) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sx-spin,
  .sx-pulse {
    animation: none;
  }
}

/* Menu entrance — a touch quicker than the dialog `animate-in` (dropdowns should
 * feel snappy), reusing the same fade + 2% settle. Don't fold this into animate-in;
 * Dialog/Drawer deliberately use the slower --dur-med. */
@utility menu-in {
  animation: sxd-enter var(--dur-fast) var(--ease-entrance);
}

/* ===========================================================================
 * Sidebar collapsed-rail peek (brief §6.1). Tailwind v4 can't compose the
 * collapsed-AND-hover state into one selector, so the rail's group headings and the
 * full wordmark are folded away in the 64px rail here and revealed — with a gentle
 * fade-slide — when a peekable rail (`[data-peek]`) is hovered. Nav-item labels are
 * handled by the panel's width/overflow in Sidebar.tsx and need no rule here.
 * =========================================================================== */
[data-sxd-rail][data-collapsed] .sxd-sb-grouplabel,
[data-sxd-rail][data-collapsed] .sxd-sb-brand-full {
  display: none;
}
[data-sxd-rail][data-collapsed] .sxd-sb-brand-mark {
  display: inline-flex;
}
[data-sxd-rail][data-peek]:hover .sxd-sb-grouplabel {
  display: block;
}
[data-sxd-rail][data-peek]:hover .sxd-sb-brand-full {
  display: inline-flex;
}
[data-sxd-rail][data-peek]:hover .sxd-sb-brand-mark {
  display: none;
}
[data-sxd-rail][data-peek]:hover .sxd-sb-grouplabel,
[data-sxd-rail][data-peek]:hover .sxd-sb-brand-full {
  animation: sxd-peek-label var(--dur-slow) var(--ease-entrance) both;
}
@keyframes sxd-peek-label {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-sxd-rail][data-peek]:hover .sxd-sb-grouplabel,
  [data-sxd-rail][data-peek]:hover .sxd-sb-brand-full {
    animation: none;
  }
}

/* ===========================================================================
 * Tailwind v4 — expose tokens as utilities. `@theme inline` keeps the custom
 * properties above as the source of truth; these just name the utilities.
 * e.g. bg-surface, text-fg-primary, rounded-md, shadow-2, font-sans.
 * =========================================================================== */
@theme inline {
  --color-primary-50: var(--primary-50);
  --color-primary-100: var(--primary-100);
  --color-primary-200: var(--primary-200);
  --color-primary-300: var(--primary-300);
  --color-primary-400: var(--primary-400);
  --color-primary-500: var(--primary-500);
  --color-primary-600: var(--primary-600);
  --color-primary-700: var(--primary-700);
  --color-primary-800: var(--primary-800);
  --color-primary-900: var(--primary-900);
  --color-primary-950: var(--primary-950);

  --color-neutral-0: var(--neutral-0);
  --color-neutral-50: var(--neutral-50);
  --color-neutral-100: var(--neutral-100);
  --color-neutral-150: var(--neutral-150);
  --color-neutral-200: var(--neutral-200);
  --color-neutral-300: var(--neutral-300);
  --color-neutral-400: var(--neutral-400);
  --color-neutral-500: var(--neutral-500);
  --color-neutral-600: var(--neutral-600);
  --color-neutral-700: var(--neutral-700);
  --color-neutral-800: var(--neutral-800);
  --color-neutral-900: var(--neutral-900);

  --color-sabrex-red: var(--sabrex-red);

  --color-bg-app: var(--bg-app);
  --color-bg-surface: var(--bg-surface);
  --color-bg-sunken: var(--bg-sunken);
  --color-scrim: var(--scrim);
  --color-bg-sidebar: var(--bg-sidebar);
  --color-bg-topbar: var(--bg-topbar);
  --color-bg-topbar-accent: var(--bg-topbar-accent);
  --color-bg-primary-action: var(--bg-primary-action);
  --color-bg-primary-action-hover: var(--bg-primary-action-hover);

  --color-fg-primary: var(--fg-primary);
  --color-fg-secondary: var(--fg-secondary);
  --color-fg-tertiary: var(--fg-tertiary);
  --color-fg-inverse: var(--fg-inverse);
  --color-fg-on-primary: var(--fg-on-primary);
  --color-fg-on-sidebar: var(--fg-on-sidebar);
  --color-fg-on-sidebar-muted: var(--fg-on-sidebar-muted);
  --color-fg-link: var(--fg-link);

  --color-border-subtle: var(--border-subtle);
  --color-border-strong: var(--border-strong);
  --color-border-focus: var(--border-focus);

  --color-status-processing: var(--status-processing);
  --color-status-processing-bg: var(--status-processing-bg);
  --color-status-completed: var(--status-completed);
  --color-status-completed-bg: var(--status-completed-bg);
  --color-status-failed: var(--status-failed);
  --color-status-failed-bg: var(--status-failed-bg);
  --color-status-warning: var(--status-warning);
  --color-status-warning-bg: var(--status-warning-bg);

  --color-severity-critical-fg: var(--severity-critical-fg);
  --color-severity-critical-bg: var(--severity-critical-bg);
  --color-severity-high-fg: var(--severity-high-fg);
  --color-severity-high-bg: var(--severity-high-bg);
  --color-severity-medium-fg: var(--severity-medium-fg);
  --color-severity-medium-bg: var(--severity-medium-bg);
  --color-severity-low-fg: var(--severity-low-fg);
  --color-severity-low-bg: var(--severity-low-bg);
  --color-severity-info-fg: var(--severity-info-fg);
  --color-severity-info-bg: var(--severity-info-bg);

  --color-chart-grid: var(--chart-grid);
  --color-chart-axis: var(--chart-axis);
  --color-chart-axis-label: var(--chart-axis-label);
  --color-chart-tooltip-bg: var(--chart-tooltip-bg);
  --color-chart-tooltip-fg: var(--chart-tooltip-fg);
  --color-chart-muted: var(--chart-muted);
  --color-chart-highlight: var(--chart-highlight);
  --color-chart-cat-1: var(--chart-cat-1);
  --color-chart-cat-2: var(--chart-cat-2);
  --color-chart-cat-3: var(--chart-cat-3);
  --color-chart-cat-4: var(--chart-cat-4);
  --color-chart-cat-5: var(--chart-cat-5);
  --color-chart-cat-6: var(--chart-cat-6);
  --color-chart-sev-critical: var(--chart-sev-critical);
  --color-chart-sev-high: var(--chart-sev-high);
  --color-chart-sev-medium: var(--chart-sev-medium);
  --color-chart-sev-low: var(--chart-sev-low);
  --color-chart-sev-info: var(--chart-sev-info);
  --color-chart-st-ok: var(--chart-st-ok);
  --color-chart-st-warning: var(--chart-st-warning);
  --color-chart-st-critical: var(--chart-st-critical);
  --color-chart-st-processing: var(--chart-st-processing);
  --color-chart-st-unknown: var(--chart-st-unknown);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);

  --text-9: var(--fs-9);
  --text-10: var(--fs-10);
  --text-11: var(--fs-11);
  --text-12: var(--fs-12);
  --text-13: var(--fs-13);
  --text-14: var(--fs-14);
  --text-15: var(--fs-15);
  --text-16: var(--fs-16);
  --text-18: var(--fs-18);
  --text-20: var(--fs-20);
  --text-24: var(--fs-24);
  --text-30: var(--fs-30);
  --text-36: var(--fs-36);

  --spacing-0: var(--sp-0);
  --spacing-1: var(--sp-1);
  --spacing-2: var(--sp-2);
  --spacing-3: var(--sp-3);
  --spacing-4: var(--sp-4);
  --spacing-5: var(--sp-5);
  --spacing-6: var(--sp-6);
  --spacing-8: var(--sp-8);
  --spacing-10: var(--sp-10);
  --spacing-12: var(--sp-12);
  --spacing-16: var(--sp-16);

  --radius-xs: var(--radius-xs);
  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --radius-pill: var(--radius-pill);

  --shadow-0: var(--shadow-0);
  --shadow-1: var(--shadow-1);
  --shadow-2: var(--shadow-2);
  --shadow-3: var(--shadow-3);
  --shadow-4: var(--shadow-4);
  --shadow-focus: var(--shadow-focus);

  --ease-standard: var(--ease-standard);
  --ease-emphasis: var(--ease-emphasis);
  --ease-entrance: var(--ease-entrance);

  /* Density — exposed as spacing utilities (h-density-control-md, p-density-pad-x,
   * gap-density-gap, etc.). Values flip under [data-density="compact"]. */
  --spacing-density-control-sm: var(--density-control-sm);
  --spacing-density-control-md: var(--density-control-md);
  --spacing-density-control-lg: var(--density-control-lg);
  --spacing-density-row: var(--density-row);
  --spacing-density-row-dense: var(--density-row-dense);
  --spacing-density-pad-x: var(--density-pad-x);
  --spacing-density-pad-y: var(--density-pad-y);
  --spacing-density-gap: var(--density-gap);
}
/* SabreX Lab branding for Guacamole (SabreX Autopilot, task_223) — every colour is a
   design-system custom property from css/tokens.css, loaded alongside this file per
   guac-manifest.json's own "css" array. Nothing here is a colour literal. */
.login-ui .login-dialog {
    background: var(--bg-surface);
    color: var(--fg-primary);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    border-top: 4px solid var(--sabrex-red);
}
.login-ui .login-dialog .logo {
    background-image: url("app/ext/sabrex-lab/images/logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    max-width: 12em;
    height: 4.3em;
    margin: 0.5em auto 0.25em auto;
}
/* The "APACHE GUACAMOLE" wordmark and the version line under the logo. */
.login-ui .login-dialog .version { display: none; }
.login-ui .sabrex-title {
    text-align: center;
    font-size: 1.15em;
    font-weight: 600;
    color: var(--fg-primary);
    margin: 0 0 0.75em 0;
}
.login-ui .login-dialog .buttons input[type=submit],
.login-ui .login-dialog .buttons button {
    background: var(--sabrex-red);
    border-color: var(--sabrex-red);
    color: var(--bg-surface);
    font-family: inherit;
}
.login-ui .login-dialog .buttons input[type=submit]:hover,
.login-ui .login-dialog .buttons input[type=submit]:focus {
    opacity: 0.85;
}
.login-ui .login-dialog input[type=text]:focus,
.login-ui .login-dialog input[type=password]:focus {
    border-color: var(--sabrex-red);
    outline: none;
}