/* ==========================================================================
   Smart UI Industrial Theme - Dark (control room)
   ==========================================================================
   Purpose:        Operator screens in low-light control rooms, 24/7 wall
                   displays, test benches.
   Usage:          Load after jqx.default.css, then set theme="industrial-dark"
                   on body or on individual elements.
   Design rules:   ISA-101 governs *colour coding* - saturated colour is
                   reserved for abnormal states - but the neutrals still have to
                   be legible and to separate. Surfaces step up from the canvas
                   so a panel reads as a panel, and text carries real contrast
                   instead of sitting flat against its background.
   ========================================================================== */

body[theme="industrial-dark"],
.jqx-element[theme="industrial-dark"],
.jqx-ui-component[theme="industrial-dark"] {
    /* ── Brand / Semantic Colors ──────────────────────────────────────── */
    --jqx-primary-rgb: 88, 160, 235;
    --jqx-primary: rgb(var(--jqx-primary-rgb));
    --jqx-primary-color: #0b1016;
    --jqx-secondary-rgb: 141, 156, 170;
    --jqx-secondary: rgb(var(--jqx-secondary-rgb));
    --jqx-secondary-color: #0b1016;
    --jqx-error-rgb: 233, 98, 102;
    --jqx-error: rgb(var(--jqx-error-rgb));
    --jqx-error-color: #0b1016;
    --jqx-success-rgb: 106, 190, 116;
    --jqx-success: rgb(var(--jqx-success-rgb));
    --jqx-success-color: #0b1016;
    --jqx-info-rgb: 88, 160, 235;
    --jqx-info: rgb(var(--jqx-info-rgb));
    --jqx-info-color: #0b1016;
    --jqx-warning-rgb: 232, 165, 66;
    --jqx-warning: rgb(var(--jqx-warning-rgb));
    --jqx-warning-color: #0b1016;

    /* ── Neutral ramp: four distinct surface steps ────────────────────── */
    --jqx-base: #2b3540;
    --jqx-base-50: #0b1016;
    --jqx-base-100: #10161d;
    --jqx-base-200: #171f27;
    --jqx-base-300: #1e2731;
    --jqx-base-400: #26313d;
    --jqx-base-500: #313e4b;
    --jqx-base-600: #46566a;
    --jqx-base-700: #93a3b2;
    --jqx-base-800: #c2ced9;
    --jqx-base-900: #eaf0f6;

    /* ── Surfaces ─────────────────────────────────────────────────────── */
    --jqx-background: #1e2731;
    --jqx-background-color: #eaf0f6;
    --jqx-surface: #1e2731;
    --jqx-surface-color: #eaf0f6;
    --jqx-body-background-color: #10161d;
    --jqx-base-background-color: var(--jqx-base-200);
    --jqx-disabled: #26313d;
    --jqx-disabled-color: #66788a;

    /* ── Borders ──────────────────────────────────────────────────────── */
    --jqx-border: #313e4b;
    --jqx-border-rgb: 49, 62, 75;
    --jqx-outline: #46566a;
    --jqx-border-normal: #313e4b;
    --jqx-border-hover: #46566a;
    --jqx-border-focus: var(--jqx-primary);
    --jqx-border-disabled: #26313d;
    --jqx-border-radius: 3px;
    --jqx-border-top-left-radius: var(--jqx-border-radius);
    --jqx-border-top-right-radius: var(--jqx-border-radius);
    --jqx-border-bottom-left-radius: var(--jqx-border-radius);
    --jqx-border-bottom-right-radius: var(--jqx-border-radius);

    /* ── Typography ───────────────────────────────────────────────────── */
    --jqx-text-title-color: #f3f7fb;
    --jqx-text-color: #eaf0f6;
    --jqx-text-secondary-color: #c2ced9;
    --jqx-text-tertiary-color: #93a3b2;
    --jqx-text-disabled-color: #66788a;
    --jqx-text-contrast-color: #0b1016;

    /* ── Interaction States ───────────────────────────────────────────── */
    --jqx-ui-state-hover: #26313d;
    --jqx-ui-state-color-hover: #f3f7fb;
    --jqx-ui-state-border-hover: #46566a;
    --jqx-ui-state-active: var(--jqx-primary);
    --jqx-ui-state-color-active: var(--jqx-primary-color);
    --jqx-ui-state-border-active: var(--jqx-primary);
    --jqx-ui-state-focus: rgba(var(--jqx-primary-rgb), .18);
    --jqx-ui-state-color-focus: #f3f7fb;
    --jqx-ui-state-border-focus: var(--jqx-primary);
    --jqx-ui-state-selected: rgba(var(--jqx-primary-rgb), .22);
    --jqx-ui-state-color-selected: #f3f7fb;
    --jqx-ui-state-border-selected: rgba(var(--jqx-primary-rgb), .45);

    /* ── Instrument scales (jqxGauge, jqxTank, jqxSlider) ─────────────── */
    --jqx-tick-color: #56687c;
    --jqx-tick-label-color: #c2ced9;

    /* ── Alternating rows ─────────────────────────────────────────────── */
    --jqx-alternation-index0-background: transparent;
    --jqx-alternation-index0-color: var(--jqx-text-color);
    --jqx-alternation-index0-border: var(--jqx-border);
    --jqx-alternation-index1-background: #232d38;
    --jqx-alternation-index1-color: var(--jqx-text-color);
    --jqx-alternation-index1-border: var(--jqx-border);

    /* ── Grid frozen cells ────────────────────────────────────────────── */
    --jqx-grid-cell-background-freeze: #1e2731;
    --jqx-grid-cell-color-freeze: #eaf0f6;

    /* ── Scrollbars ───────────────────────────────────────────────────── */
    --jqx-scroll-bar-background: #10161d;
    /* resolved at :root from the light default, so it has to be said here too: the track of a
       tree's scroll bar stayed white on the dark theme */
    --jqx-scroll-bar-track-background: #10161d;
    --jqx-scroll-bar-border: #1e2731;
    --jqx-scroll-bar-thumb-background: #3a4757;
    --jqx-scroll-bar-thumb-border: #3a4757;
    --jqx-scroll-bar-thumb-background-hover: #56687c;
    --jqx-scroll-bar-thumb-border-hover: #56687c;
    --jqx-scroll-bar-thumb-background-active: #6f8296;
    --jqx-scroll-bar-thumb-border-active: #6f8296;
    --jqx-scroll-bar-button-background: #10161d;
    --jqx-scroll-bar-button-border: #1e2731;
    --jqx-scroll-bar-button-color: #93a3b2;
    --jqx-scroll-bar-button-color-hover: var(--jqx-primary);
    --jqx-scroll-bar-button-color-active: var(--jqx-primary);

    /* ══ Industrial tokens ════════════════════════════════════════════════
       Alarm and equipment-state colours. These are the only saturated colours
       in the theme - an operator seeing colour must mean something is wrong.
       ==================================================================== */
    --jqx-industrial-alarm-critical: #e8474d;
    --jqx-industrial-alarm-critical-color: #16080a;
    --jqx-industrial-alarm-warning: #f0a02a;
    --jqx-industrial-alarm-warning-color: #170f03;
    --jqx-industrial-alarm-advisory: #f2d13c;
    --jqx-industrial-alarm-advisory-color: #171303;
    --jqx-industrial-ok: #52c26a;
    --jqx-industrial-ok-color: #06150a;
    --jqx-industrial-abnormal-background: #2e1a1f;
    --jqx-industrial-unknown: #5f7183;
    --jqx-industrial-unknown-color: #ffffff;
    --jqx-industrial-accent-color: #0b1016;

    /* Severity as text. The fills above are chosen for a chip; these are the same
       meanings chosen to be read on a dark panel. See jqx.industrial.css. */
    --jqx-industrial-accent-text: #6fb2ec;
    --jqx-industrial-alarm-critical-text: #ff8a8a;
    --jqx-industrial-alarm-warning-text: #f7bf6b;
    --jqx-industrial-alarm-advisory-text: #f2d97a;
    --jqx-industrial-ok-text: #83dd93;
    --jqx-industrial-unknown-text: #9dabb9;

    /* Focus. Two tones rather than one, because an operator screen puts controls
       on both the raised panel and the darker canvas, and a single-colour ring
       that clears 3:1 on one of those will not clear it on the other. The halo
       carries the contrast wherever the core does not. */
    --jqx-industrial-focus: #a8d5ff;
    --jqx-industrial-focus-halo: rgba(0, 0, 0, .85);

    /* Equipment / process states */
    --jqx-industrial-running: #52c26a;
    --jqx-industrial-stopped: #66788a;
    --jqx-industrial-manual: #58a0eb;
    --jqx-industrial-maintenance: #a684e0;

    /* Process-diagram equipment: running drawn solid neutral, as ISA-101 asks. See
       jqx.industrial.css; the jqx-mimic-classic class brings the green back. */
    --jqx-mimic-running-fill: #c2ced9;
    --jqx-mimic-running-stroke: #eaf0f6;
    --jqx-mimic-running-detail: #10161d;

    /* Panel chrome used by the Industrial screen templates. The surface steps
       up from the canvas and the header steps up again, so a panel reads as a
       panel without needing a heavy border. */
    --jqx-industrial-canvas: #10161d;
    --jqx-industrial-panel-background: #1e2731;
    --jqx-industrial-panel-header-background: #26313d;
    --jqx-industrial-panel-border: #313e4b;
    --jqx-industrial-panel-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    --jqx-industrial-accent-line: rgba(255, 255, 255, .04);
    --jqx-industrial-readout-background: #0a0f14;
    --jqx-industrial-readout-color: #6fe08a;
}

/* ── Instruments sit on the panel, not in a box of their own ──────────────
   Every element inherits `background: var(--jqx-background)` from .jqx-element.
   For a gauge or tank dropped into a panel that paints a second, differently
   shaded rectangle inside the tile - the single most visible flaw on a dense
   screen. Instruments stay transparent and let the panel show through. */
jqx-gauge[theme="industrial-dark"],
jqx-tank[theme="industrial-dark"],
jqx-slider[theme="industrial-dark"],
body[theme="industrial-dark"] jqx-gauge.jqx-element,
body[theme="industrial-dark"] jqx-tank.jqx-element,
body[theme="industrial-dark"] jqx-slider.jqx-element {
    background: transparent;
}

/* ── The canvas ───────────────────────────────────────────────────────────
   A page that puts the theme on its body gets the ISA-101 canvas and the theme's text
   colour with it, so the prose around the components reads in this theme as well; a
   page that paints its own background overrides this with any rule of its own. */
body[theme="industrial-dark"] {
    background-color: var(--jqx-industrial-canvas);
    color: var(--jqx-text-color);
}

body[theme="industrial-dark"] a:not([class]) {
    color: var(--jqx-industrial-accent-text, var(--jqx-primary));
}

/* ── Gauge range bands ────────────────────────────────────────────────────
   Thin arc at the edge of the scale rather than the wide default band, and
   the normal range stays neutral: an operator glancing at a wall of
   instruments should only see colour where something needs attention. */
jqx-gauge[theme="industrial-dark"] .jqx-range,
body[theme="industrial-dark"] .jqx-gauge .jqx-range {
    width: 12px;
    fill: var(--jqx-base-500);
}

jqx-gauge[theme="industrial-dark"] .jqx-range.industrial-normal,
body[theme="industrial-dark"] .jqx-gauge .jqx-range.industrial-normal,
jqx-gauge[theme="industrial-dark"] .jqx-range.industrial-ok,
body[theme="industrial-dark"] .jqx-gauge .jqx-range.industrial-ok {
    fill: var(--jqx-base-500);
}

jqx-gauge[theme="industrial-dark"] .jqx-range.industrial-advisory,
body[theme="industrial-dark"] .jqx-gauge .jqx-range.industrial-advisory {
    fill: var(--jqx-industrial-alarm-advisory);
}

jqx-gauge[theme="industrial-dark"] .jqx-range.industrial-warning,
body[theme="industrial-dark"] .jqx-gauge .jqx-range.industrial-warning {
    fill: var(--jqx-industrial-alarm-warning);
}

jqx-gauge[theme="industrial-dark"] .jqx-range.industrial-critical,
body[theme="industrial-dark"] .jqx-gauge .jqx-range.industrial-critical {
    fill: var(--jqx-industrial-alarm-critical);
}

/* The gauge track is the unfilled part of the arc - it should read as a groove
   in the panel, not as another surface. */
jqx-gauge[theme="industrial-dark"] .jqx-track,
body[theme="industrial-dark"] .jqx-gauge .jqx-track {
    fill: var(--jqx-base-400);
    stroke: var(--jqx-base-500);
}

/* Slimmer needle than the stock 20px - instrument tiles on an operator screen
   are small, and a narrow pointer reads more precisely against the bands.
   (Only `width` applies to a centred needle; its length is derived from the
   scale geometry. `height` would set the length of an edge needle.) */
jqx-gauge[theme="industrial-dark"] .jqx-needle,
body[theme="industrial-dark"] .jqx-gauge .jqx-needle {
    width: 16px;
}

/* The stock gauge hard-codes `color: black` on the digital display and the numeric input
   inside it inherits that, while the unit cell takes the surface colour - so on this
   theme "6.47 bar" came out as a near-invisible black number beside a white unit. The
   readout is the one thing on a gauge an operator reads; it gets the text colour. */
jqx-gauge[theme="industrial-dark"] .jqx-digital-display,
body[theme="industrial-dark"] .jqx-gauge .jqx-digital-display {
    /* half the dial at most: 150px on a small gauge covered its 0 and 100 labels */
    width: clamp(80px, 52%, 150px);
    color: var(--jqx-text-color);
    --jqx-numeric-text-box-default-unit-display-width: 52px;
}

/* ── Tank range bands ─────────────────────────────────────────────────────
   Same discipline as the gauge: the normal band stays neutral and only
   abnormal zones carry colour. */
jqx-tank[theme="industrial-dark"] .jqx-range,
body[theme="industrial-dark"] .jqx-tank .jqx-range {
    background: var(--jqx-base-500);
}

jqx-tank[theme="industrial-dark"] .jqx-range.industrial-normal,
body[theme="industrial-dark"] .jqx-tank .jqx-range.industrial-normal,
jqx-tank[theme="industrial-dark"] .jqx-range.industrial-ok,
body[theme="industrial-dark"] .jqx-tank .jqx-range.industrial-ok {
    background: var(--jqx-base-500);
}

jqx-tank[theme="industrial-dark"] .jqx-range.industrial-advisory,
body[theme="industrial-dark"] .jqx-tank .jqx-range.industrial-advisory {
    background: var(--jqx-industrial-alarm-advisory);
}

jqx-tank[theme="industrial-dark"] .jqx-range.industrial-warning,
body[theme="industrial-dark"] .jqx-tank .jqx-range.industrial-warning {
    background: var(--jqx-industrial-alarm-warning);
}

jqx-tank[theme="industrial-dark"] .jqx-range.industrial-critical,
body[theme="industrial-dark"] .jqx-tank .jqx-range.industrial-critical {
    background: var(--jqx-industrial-alarm-critical);
}

/* The tank track is a groove too, so the fill and the bands read against it. */
jqx-tank[theme="industrial-dark"] .jqx-track,
body[theme="industrial-dark"] .jqx-tank .jqx-track {
    background-color: var(--jqx-base-200);
    border-color: var(--jqx-base-500);
}

/* ── Digital display unit ─────────────────────────────────────────────────
   The unit addon sets a background and never a colour, so it inherits - which on
   a dark panel is black on near-black, 1.39:1, and the unit simply disappears.
   The value beside it is legible, which makes the reading look unitless rather
   than broken: worse, on an instrument. */
jqx-gauge[theme="industrial-dark"] .jqx-numeric-text-box-unit-display,
jqx-tank[theme="industrial-dark"] .jqx-numeric-text-box-unit-display,
jqx-slider[theme="industrial-dark"] .jqx-numeric-text-box-unit-display,
body[theme="industrial-dark"] .jqx-numeric-text-box-unit-display {
    color: var(--jqx-text-secondary-color);
}

/* ── Focus you can see ────────────────────────────────────────────────────
   WCAG 2.2 asks that the focus indicator exist and clear 3:1 against what it
   sits on. Measured against the stock stylesheets, three of the controls these
   screens are built from show nothing at all when tabbed to: jqx-button has no
   :focus rule, jqx-slider scales a halo that is painted behind opaque content,
   and jqx-gauge sets outline:none and compensates with a rule on .jqx-needle.

   The ring goes on the host so it does not depend on any of that, and it is
   scoped to the industrial themes: what the default theme shows every existing
   customer is a wider decision than this product line gets to make. */
body[theme="industrial-dark"] jqx-button.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-toggle-button.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-repeat-button.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-power-button.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-slider.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-gauge.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-tank.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-knob.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-bar-graph.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-bit-field.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-strip-chart.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-grid.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-tree.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-table.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-alarm-grid.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-sequence-editor.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-annunciator.jqx-element:focus-visible,
body[theme="industrial-dark"] jqx-alarm-banner.jqx-element:focus-visible,
body[theme="industrial-dark"] .jqx-mimic-viewport:focus-visible,
body[theme="industrial-dark"] .jqx-mimic-item:focus-visible,
body[theme="industrial-dark"] .jqx-terminal-input:focus-visible {
    outline: 2px solid var(--jqx-industrial-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--jqx-industrial-focus-halo);
}

/* A symbol on the canvas is drawn edge to edge, so an outward ring would be
   clipped by the neighbour it sits against. */
body[theme="industrial-dark"] .jqx-mimic-item:focus-visible {
    outline-offset: 1px;
    box-shadow: 0 0 0 3px var(--jqx-industrial-focus-halo);
}

/* A table, a grid and a tree each put their scroll container in the tab order
   as well as their host - that is how the body is reached without a pointer.
   The container fills the host, so the ring is drawn inside it: an outward one
   would be clipped by the very element it is meant to mark. */
body[theme="industrial-dark"] jqx-grid > .jqx-container:focus-visible,
body[theme="industrial-dark"] jqx-tree > .jqx-container:focus-visible,
body[theme="industrial-dark"] jqx-table > .jqx-container:focus-visible,
body[theme="industrial-dark"] jqx-alarm-grid > .jqx-container:focus-visible,
body[theme="industrial-dark"] jqx-sequence-editor > .jqx-container:focus-visible {
    outline: 2px solid var(--jqx-industrial-focus);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 4px var(--jqx-industrial-focus-halo);
}