/* ==========================================================================
   eaxPLC Web Studio - eaxStudio Unified Industrial Engineering Design System

   The colour tokens (--eax-*), their three themes (dark, light, ISA-101) and
   the fonts are eaxScada's, copied verbatim from
   eaxScada/web/static/css/studio_theme.css so both studios look the same.
   Keep the two in sync until they share one theme source.

   Layers:
     1. --eax-*   eaxScada tokens (do not change the values here alone)
     2. --ide-*   IDE semantic tokens derived per theme (status tints, code
                  editor, ladder power flow, chart series)
     3. legacy aliases (--bg-main, --text-main, ...) used by the IDE rules
   Every colour below is one of these tokens.
   ========================================================================== */

/* ---- 1. eaxScada tokens: light (default root) ---- */
:root {
    --eax-bg-app: #f1f5f9;
    --eax-bg-surface: #ffffff;
    --eax-bg-panel: #f8fafc;
    --eax-bg-header: #ffffff;
    --eax-bg-hover: #e2e8f0;
    --eax-bg-active: #cbd5e1;
    --eax-bg-canvas: #f8fafc;
    --eax-grid-dot: rgba(0, 0, 0, 0.12);
    --eax-grid-line: rgba(0, 0, 0, 0.06);

    --eax-border: #cbd5e1;
    --eax-border-subtle: #e2e8f0;
    --eax-border-strong: #94a3b8;

    --eax-text-primary: #0f172a;
    --eax-text-secondary: #475569;
    --eax-text-muted: #94a3b8;
    --eax-text-inverse: #ffffff;

    --eax-accent: #2563eb;
    --eax-accent-hover: #1d4ed8;
    --eax-accent-muted: rgba(37, 99, 235, 0.1);

    --eax-status-online: #16a34a;
    --eax-status-warning: #d97706;
    --eax-status-danger: #dc2626;

    --eax-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --eax-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --eax-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);

    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Roboto Mono', 'Fira Code', Consolas, monospace;
}

/* ---- eaxScada tokens: dark ---- */
html.dark,
body.studio-dark-theme,
.dark {
    --eax-bg-app: #090d16;
    --eax-bg-surface: #0f172a;
    --eax-bg-panel: #131b2e;
    --eax-bg-header: #0a0f1d;
    --eax-bg-hover: #1e293b;
    --eax-bg-active: #334155;
    --eax-bg-canvas: #090d16;
    --eax-grid-dot: rgba(255, 255, 255, 0.1);
    --eax-grid-line: rgba(255, 255, 255, 0.05);

    --eax-border: #1e293b;
    --eax-border-subtle: #172033;
    --eax-border-strong: #334155;

    --eax-text-primary: #f8fafc;
    --eax-text-secondary: #94a3b8;
    --eax-text-muted: #64748b;
    --eax-text-inverse: #0f172a;

    --eax-accent: #38bdf8;
    --eax-accent-hover: #0284c7;
    --eax-accent-muted: rgba(56, 189, 248, 0.12);

    --eax-status-online: #34d399;
    --eax-status-warning: #fbbf24;
    --eax-status-danger: #f87171;

    --eax-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --eax-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
    --eax-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.6);
}

/* ---- eaxScada tokens: ISA-101 High-Performance HMI ----
   Chrome is desaturated grey so that alarm/status colour is the only thing
   competing for attention; status and alarm hues are kept. */
body.studio-isa101-theme {
    --eax-bg-app: #c8ccce;
    --eax-bg-surface: #d4d8da;
    --eax-bg-panel: #cdd1d3;
    --eax-bg-header: #bfc4c6;
    --eax-bg-hover: #b9bec0;
    --eax-bg-active: #aab0b2;
    --eax-bg-canvas: #c2c7c9;
    --eax-grid-dot: rgba(0, 0, 0, 0.16);
    --eax-grid-line: rgba(0, 0, 0, 0.08);

    --eax-border: #9aa0a3;
    --eax-border-subtle: #b3b8bb;
    --eax-border-strong: #7e8588;

    --eax-text-primary: #1b1f21;
    --eax-text-secondary: #3d4447;
    --eax-text-muted: #667074;
    --eax-text-inverse: #ffffff;

    --eax-accent: #4a5356;
    --eax-accent-hover: #363d3f;
    --eax-accent-muted: rgba(74, 83, 86, 0.12);
}

/* ---- 2. IDE semantic tokens ----
   Declared on body (not :root) so that var() resolves against the body's
   theme: the ISA-101 tokens live on body, as in eaxScada.
   Tints are eaxScada's chip recipe (bg <hue>-600/20, border <hue>-500/40,
   text <hue>-300 in dark) and its light / ISA-101 corrections. */
body {
    --ide-primary-bg: var(--eax-accent);
    --ide-primary-hover: var(--eax-accent-hover);
    --ide-on-accent: #ffffff;
    --ide-chip-bg: var(--eax-bg-surface);
    --ide-tint-hover: rgba(0, 0, 0, 0.05);
    --ide-overlay: rgba(15, 23, 42, 0.45);

    --ide-ok-bg: rgba(5, 150, 105, 0.12);
    --ide-ok-bd: rgba(16, 185, 129, 0.45);
    --ide-ok-fg: #047857;
    --ide-warn-bg: rgba(217, 119, 6, 0.14);
    --ide-warn-bd: rgba(245, 158, 11, 0.5);
    --ide-warn-fg: #b45309;
    --ide-danger-bg: rgba(225, 29, 72, 0.12);
    --ide-danger-bd: rgba(244, 63, 94, 0.45);
    --ide-danger-fg: #be123c;
    --ide-ai-bg: rgba(124, 58, 237, 0.12);
    --ide-ai-bd: rgba(139, 92, 246, 0.45);
    --ide-ai-fg: #6d28d9;
    --ide-info-bg: rgba(2, 132, 199, 0.12);
    --ide-info-bd: rgba(14, 165, 233, 0.45);
    --ide-info-fg: #0369a1;

    --ide-code-bg: var(--eax-bg-surface);
    --ide-gutter-bg: var(--eax-bg-panel);
    --ide-code-fg: var(--eax-text-primary);
    --ide-term-fg: #047857;

    --ide-energized: var(--eax-status-online);
    --ide-glow-on: 0 0 6px rgba(22, 163, 74, 0.35);
    --ide-glow-accent: 0 0 6px rgba(37, 99, 235, 0.3);

    --ide-series-1: #0284c7;
    --ide-series-2: #16a34a;
    --ide-series-3: #db2777;
    --ide-series-4: #ca8a04;
    --ide-series-5: #7c3aed;
    --ide-series-6: #ea580c;
}

body.studio-dark-theme {
    --ide-primary-bg: #0284c7;      /* eaxScada bg-sky-600 buttons */
    --ide-primary-hover: #0ea5e9;   /* hover:bg-sky-500 */
    --ide-chip-bg: rgba(15, 23, 42, 0.8);
    --ide-tint-hover: rgba(255, 255, 255, 0.06);
    --ide-overlay: rgba(0, 0, 0, 0.75);

    --ide-ok-bg: rgba(5, 150, 105, 0.2);
    --ide-ok-bd: rgba(16, 185, 129, 0.4);
    --ide-ok-fg: #6ee7b7;
    --ide-warn-bg: rgba(217, 119, 6, 0.2);
    --ide-warn-bd: rgba(245, 158, 11, 0.4);
    --ide-warn-fg: #fcd34d;
    --ide-danger-bg: rgba(225, 29, 72, 0.2);
    --ide-danger-bd: rgba(244, 63, 94, 0.4);
    --ide-danger-fg: #fda4af;
    --ide-ai-bg: rgba(124, 58, 237, 0.2);
    --ide-ai-bd: rgba(139, 92, 246, 0.4);
    --ide-ai-fg: #ddd6fe;
    --ide-info-bg: rgba(2, 132, 199, 0.2);
    --ide-info-bd: rgba(14, 165, 233, 0.4);
    --ide-info-fg: #7dd3fc;

    --ide-code-bg: var(--eax-bg-app);
    --ide-gutter-bg: var(--eax-bg-header);
    --ide-term-fg: #4ade80;

    --ide-energized: #4ade80;
    --ide-glow-on: 0 0 8px rgba(74, 222, 128, 0.8);
    --ide-glow-accent: 0 0 10px rgba(56, 189, 248, 0.5);

    --ide-series-1: #38bdf8;
    --ide-series-2: #4ade80;
    --ide-series-3: #f472b6;
    --ide-series-4: #facc15;
    --ide-series-5: #a78bfa;
    --ide-series-6: #fb923c;
}

body.studio-isa101-theme {
    --ide-chip-bg: var(--eax-bg-surface);
    --ide-overlay: rgba(27, 31, 33, 0.45);

    /* Non-alarm accents go neutral; alarm and status hues stay (eaxScada's
       ISA-101 chip overrides). */
    --ide-ok-bg: #b0b6b8;
    --ide-ok-bd: #8b9295;
    --ide-ok-fg: #17603a;
    --ide-warn-bg: rgba(154, 91, 0, 0.16);
    --ide-warn-bd: #9a5b00;
    --ide-warn-fg: #9a5b00;
    --ide-danger-bg: rgba(180, 20, 27, 0.14);
    --ide-danger-bd: #b4141b;
    --ide-danger-fg: #b4141b;
    --ide-ai-bg: rgba(74, 83, 86, 0.14);
    --ide-ai-bd: var(--eax-border);
    --ide-ai-fg: var(--eax-text-primary);
    --ide-info-bg: rgba(74, 83, 86, 0.14);
    --ide-info-bd: var(--eax-border);
    --ide-info-fg: var(--eax-text-primary);

    --ide-term-fg: #17603a;
    --ide-energized: #17603a;
    --ide-glow-on: none;
    --ide-glow-accent: none;

    --ide-series-1: #3d4447;
    --ide-series-2: #6b7376;
    --ide-series-3: #8b9295;
    --ide-series-4: #4a5356;
    --ide-series-5: #9aa0a3;
    --ide-series-6: #2a3033;
}

/* ---- 3. Legacy aliases used throughout the IDE rules ---- */
body {
    --bg-main: var(--eax-bg-app);
    --bg-darker: var(--eax-bg-surface);
    --bg-panel: var(--eax-bg-panel);
    --bg-pane-header: var(--eax-bg-header);
    --bg-hover: var(--eax-bg-hover);
    --border-color: var(--eax-border);
    --border-light: var(--eax-border-strong);

    --text-main: var(--eax-text-primary);
    --text-muted: var(--eax-text-secondary);
    --text-dim: var(--eax-text-muted);

    --primary: var(--eax-accent);
    --primary-hover: var(--eax-accent-hover);
    --success: var(--eax-status-online);
    --warning: var(--eax-status-warning);
    --danger: var(--eax-status-danger);
    --cyan: var(--eax-accent);

    --editor-bg: var(--ide-code-bg);
    --gutter-bg: var(--ide-gutter-bg);
    --editor-fg: var(--ide-code-fg);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--eax-bg-app);
    color: var(--eax-text-primary);
    font-family: var(--font-ui);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.15s ease, color 0.15s ease;
}

button, input, select, textarea { font-family: inherit; letter-spacing: inherit; }

/* Icons (icons.js: Lucide glyphs) */
.ic { width: 14px; height: 14px; flex-shrink: 0; display: inline-block; vertical-align: middle; }

@keyframes eaxMenuFadeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scrollbars (eaxScada) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--eax-bg-app); }
::-webkit-scrollbar-thumb { background: var(--eax-border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--eax-text-muted); }

/* ==========================================================================
   Top Menubar (eaxScada .eax-menubar)
   ========================================================================== */
.app-header {
    background: var(--eax-bg-header);
    border-bottom: 1px solid var(--eax-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
    z-index: 50;
}

.menubar {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    background: var(--eax-bg-header);
    border-bottom: 1px solid var(--eax-border);
}

.menubar-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.menus {
    display: flex;
    align-items: center;
    gap: 2px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    white-space: nowrap;
}
.brand-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--ide-info-bg);
    border: 1px solid var(--ide-info-bd);
    color: var(--eax-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.brand-text {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--eax-text-primary);
}
.brand-accent { color: var(--eax-accent); }
.brand-sub { color: var(--eax-text-secondary); font-weight: 500; margin-left: 4px; }

.menu-item { position: relative; }
.menu-title {
    display: block;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--eax-text-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.1s ease;
}
.menu-item:hover .menu-title,
.menu-item:focus-within .menu-title {
    background: var(--eax-bg-hover);
    color: var(--eax-text-primary);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    border-radius: 6px;
    box-shadow: var(--eax-shadow-lg);
    padding: 4px;
    z-index: 1000;
    animation: eaxMenuFadeIn 0.12s ease-out;
}
.menu-item:hover .dropdown-menu,
.menu-item:focus-within .dropdown-menu {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--eax-text-primary);
    text-align: left;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.1s ease;
}
.dropdown-item > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.dropdown-item .ic { color: var(--eax-text-secondary); }
.dropdown-item:hover {
    background: var(--eax-accent);
    color: var(--ide-on-accent);
}
.dropdown-item:hover .ic,
.dropdown-item:hover .dd-shortcut { color: var(--ide-on-accent); }
.dd-shortcut {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--eax-text-muted);
}
.menu-divider {
    border: none;
    height: 1px;
    background: var(--eax-border-subtle);
    margin: 4px 0;
}

/* ---- Header status chips (eaxScada gateway / env chips) ---- */
.header-metrics {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 0;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    background: var(--ide-chip-bg);
    border: 1px solid var(--eax-border);
    color: var(--eax-text-secondary);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}
.chip-k {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--eax-text-muted);
}
.chip strong,
.chip-v {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--eax-text-primary);
    font-variant-numeric: tabular-nums;
}
#metric-cycle { display: inline-block; min-width: 7ch; text-align: right; }
#metric-version { font-family: var(--font-mono); font-weight: 600; }

.state-pill {
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.state-pill::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.state-running {
    background: var(--ide-ok-bg);
    border-color: var(--ide-ok-bd);
    color: var(--ide-ok-fg);
}
.state-running::before { background: var(--eax-status-online); box-shadow: var(--ide-glow-on); }
.state-paused {
    background: var(--ide-warn-bg);
    border-color: var(--ide-warn-bd);
    color: var(--ide-warn-fg);
}
.state-fault {
    background: var(--ide-danger-bg);
    border-color: var(--ide-danger-bd);
    color: var(--ide-danger-fg);
}

.icon-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--eax-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.1s ease;
}
.icon-btn:hover {
    background: var(--eax-bg-hover);
    color: var(--eax-text-primary);
}
.btn-theme-toggle .lucide-sun { color: var(--ide-warn-fg); }

/* ==========================================================================
   Action Toolbar (eaxScada .eax-canvas-toolbar / .eax-tool-btn)
   One row, never wraps, never scrolls: labels collapse to icons instead.
   ========================================================================== */
.toolbar {
    height: 36px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    background: var(--eax-bg-surface);
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
}

.tool-group {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.toolbar-spacer { flex: 1 1 auto; min-width: 6px; }

.tool-separator {
    width: 1px;
    height: 18px;
    background: var(--eax-border);
    margin: 0 3px;
    flex-shrink: 0;
}

.tool-btn {
    height: 26px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--eax-text-secondary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.tool-btn:hover {
    background: var(--eax-bg-hover);
    color: var(--eax-text-primary);
    border-color: var(--eax-border-subtle);
}
.tool-btn.active {
    background: var(--eax-accent-muted);
    color: var(--eax-accent);
    border-color: var(--eax-accent);
}
.tool-btn:disabled { opacity: 0.65; cursor: progress; }

/* Primary: the one main action (Build & Deploy) */
.tool-btn.primary {
    background: var(--ide-primary-bg);
    border-color: transparent;
    color: var(--ide-on-accent);
    font-weight: 600;
}
.tool-btn.primary:hover { background: var(--ide-primary-hover); color: var(--ide-on-accent); }

/* Semantic run-state actions: eaxScada's tinted chip buttons */
.tool-btn.success,
.tool-btn.warning,
.tool-btn.danger,
.tool-btn.ai { font-weight: 600; }
.tool-btn.success { background: var(--ide-ok-bg); border-color: var(--ide-ok-bd); color: var(--ide-ok-fg); }
.tool-btn.warning { background: var(--ide-warn-bg); border-color: var(--ide-warn-bd); color: var(--ide-warn-fg); }
.tool-btn.danger { background: var(--ide-danger-bg); border-color: var(--ide-danger-bd); color: var(--ide-danger-fg); }
.tool-btn.ai { background: var(--ide-ai-bg); border-color: var(--ide-ai-bd); color: var(--ide-ai-fg); }
.tool-btn.success:hover,
.tool-btn.warning:hover,
.tool-btn.danger:hover,
.tool-btn.ai:hover { box-shadow: inset 0 0 0 99px var(--ide-tint-hover); }
.tool-btn.success:hover { color: var(--ide-ok-fg); border-color: var(--ide-ok-bd); background: var(--ide-ok-bg); }
.tool-btn.warning:hover { color: var(--ide-warn-fg); border-color: var(--ide-warn-bd); background: var(--ide-warn-bg); }
.tool-btn.danger:hover { color: var(--ide-danger-fg); border-color: var(--ide-danger-bd); background: var(--ide-danger-bg); }
.tool-btn.ai:hover { color: var(--ide-ai-fg); border-color: var(--ide-ai-bd); background: var(--ide-ai-bg); }

.kbd {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    padding: 2px 4px;
    border-radius: 3px;
    background: color-mix(in srgb, currentColor 18%, transparent);
}

/* Online / Offline toggle */
.online-toggle-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.online-toggle-btn.online,
.online-toggle-btn.online:hover {
    background: var(--ide-ok-bg);
    border-color: var(--ide-ok-bd);
    color: var(--ide-ok-fg);
}
.online-toggle-btn.offline,
.online-toggle-btn.offline:hover {
    background: var(--ide-chip-bg);
    border-color: var(--eax-border);
    color: var(--eax-text-secondary);
}
.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.online-toggle-btn.online .status-dot { background: var(--eax-status-online); box-shadow: var(--ide-glow-on); }
.online-toggle-btn.offline .status-dot { background: var(--eax-text-muted); }

/* Narrower windows: labels go before controls do (eaxScada hides the AI
   label below 1800 px the same way). Every button keeps its title. */
@media (max-width: 1799px) {
    .lbl-xl { display: none; }
}
@media (max-width: 1599px) {
    .toolbar .kbd { display: none; }
}
@media (max-width: 1199px) {
    .lbl-run { display: none; }
}
@media (max-width: 1099px) {
    .lbl-view, .lbl-deploy { display: none; }
    .chip-cycles { display: none; }
}
@media (max-width: 899px) {
    .chip-jitter, .brand-sub { display: none; }
}

/* ==========================================================================
   Left Sidebar: Project Navigator & Library Manager
   ========================================================================== */
.studio-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.sidebar {
    width: 300px;
    flex-shrink: 0;
    background: var(--eax-bg-panel);
    border-right: 1px solid var(--eax-border);
    display: flex;
    flex-direction: column;
}

.sidebar-tabs {
    height: 34px;
    display: flex;
    align-items: stretch;
    padding: 0 4px;
    background: var(--eax-bg-header);
    border-bottom: 1px solid var(--eax-border);
    flex-shrink: 0;
}
.s-tab-btn {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 4px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--eax-text-secondary);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.s-tab-btn .ic { width: 13px; height: 13px; }
.s-tab-btn:hover { color: var(--eax-text-primary); }
.s-tab-btn.active {
    color: var(--eax-accent);
    border-bottom-color: var(--eax-accent);
}

.sidebar-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}
.sidebar-content.active {
    display: flex;
    flex-direction: column;
}

/* Section header (eaxScada: 10px bold uppercase tracking-wider) */
.tree-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 24px;
    padding: 0 6px 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--eax-text-secondary);
    border-bottom: 1px solid var(--eax-border);
    margin-bottom: 6px;
}

.mini-btn {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--eax-border);
    border-radius: 4px;
    color: var(--eax-text-secondary);
    cursor: pointer;
}
.mini-btn:hover { background: var(--eax-bg-hover); color: var(--eax-text-primary); }

.tree-view {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Collapsible Tree Groups: indent guides, fill only for hover/selection
   (eaxScada .eax-tree-*) */
.tree-group .group-header {
    padding: 4px 6px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 4px;
    color: var(--eax-text-primary);
}
.tree-group .group-header strong { font-weight: 600; }
.tree-group .group-header:hover { background: var(--eax-bg-hover); }
.tree-group .caret {
    display: inline-flex;
    color: var(--eax-text-muted);
    transition: transform 0.15s ease;
}
.tree-group .caret .ic { width: 12px; height: 12px; }
.tree-group.collapsed .caret { transform: rotate(-90deg); }
.tree-group.collapsed .group-items { display: none; }
.tree-group.open .group-items {
    display: flex;
    flex-direction: column;
    margin-left: 11px;
    padding-left: 4px;
    border-left: 1px solid var(--eax-border);
    gap: 1px;
}

.tree-category {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--eax-text-muted);
    margin: 8px 0 2px 8px;
}

.tree-item, .tree-sub-item {
    position: relative;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--eax-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tree-sub-item { color: var(--eax-text-secondary); }
.tree-item:hover, .tree-sub-item:hover {
    background: var(--eax-bg-hover);
    color: var(--eax-text-primary);
}
.tree-item.active {
    background: var(--eax-accent-muted);
    color: var(--eax-text-primary);
}
.tree-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--eax-accent);
}
.node-icon {
    display: inline-flex;
    color: var(--eax-text-secondary);
}
.tree-item.active .node-icon { color: var(--eax-accent); }
.node-icon.ok { color: var(--eax-status-online); }

.node-type {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--eax-text-muted);
}

/* Library Inspector Box */
.lib-inspector {
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-accent);
    border-radius: 6px;
    margin-top: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.inspector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    color: var(--eax-accent);
}
.close-btn {
    background: none;
    border: none;
    color: var(--eax-text-secondary);
    cursor: pointer;
}
.close-btn:hover { color: var(--eax-text-primary); }
.insp-desc {
    font-size: 11px;
    color: var(--eax-text-secondary);
}
.insp-pins {
    background: var(--eax-bg-panel);
    border: 1px solid var(--eax-border);
    padding: 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
}
.btn-insert-code {
    background: var(--ide-primary-bg);
    color: var(--ide-on-accent);
    border: none;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
}
.btn-insert-code:hover { background: var(--ide-primary-hover); }

/* ==========================================================================
   Center Workspace Area
   ========================================================================== */
.workspace {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--eax-bg-app);
}

.view-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.view-panel.active { display: flex; }

/* Split-Pane ST Editor */
.pou-header {
    height: 34px;
    flex-shrink: 0;
    background: var(--eax-bg-surface);
    padding: 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--eax-border);
}
.pou-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--eax-text-primary);
}
.pou-icon { display: inline-flex; color: var(--eax-accent); }
.pou-actions { display: flex; gap: 6px; }

.split-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.decl-pane {
    height: 38%;
    min-height: 80px;
}
.impl-pane {
    flex: 1;
    min-height: 120px;
}

/* Panel header (eaxScada section header) */
.pane-bar {
    height: 26px;
    flex-shrink: 0;
    background: var(--eax-bg-header);
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--eax-border);
}
.pane-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--eax-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pane-title .ic { width: 12px; height: 12px; color: var(--eax-text-muted); }
.pane-sub { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--eax-text-muted); }

.tag-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    background: var(--ide-info-bg);
    border: 1px solid var(--ide-info-bd);
    color: var(--ide-info-fg);
}
.tag-count b { font-family: var(--font-mono); font-weight: 600; }

.online-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ide-ok-fg);
    white-space: nowrap;
}
.online-pill.is-offline { color: var(--eax-text-muted); }

.split-divider {
    height: 6px;
    flex-shrink: 0;
    background: var(--eax-bg-panel);
    border-top: 1px solid var(--eax-border);
    border-bottom: 1px solid var(--eax-border);
    cursor: row-resize;
    display: flex;
    justify-content: center;
    align-items: center;
}
.split-divider:hover { background: var(--eax-accent-muted); }
.divider-handle {
    width: 36px;
    height: 2px;
    background: var(--eax-border-strong);
    border-radius: 1px;
}

.editor-wrap {
    flex: 1;
    display: flex;
    position: relative;
    overflow: hidden;
    background: var(--ide-code-bg);
}

.line-numbers {
    width: 44px;
    flex-shrink: 0;
    background: var(--ide-gutter-bg);
    border-right: 1px solid var(--eax-border);
    color: var(--eax-text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 20px;
    padding: 8px 4px;
    text-align: right;
    user-select: none;
    overflow: hidden;
}

.code-textarea {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--ide-code-fg);
    caret-color: var(--eax-accent);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0;
    padding: 8px;
    resize: none;
    outline: none;
    white-space: pre;
    overflow-y: auto;
    user-select: text;
}
.code-textarea::placeholder { color: var(--eax-text-muted); }
.code-textarea::selection { background: var(--eax-accent-muted); }

.online-watch-column {
    width: 250px;
    flex-shrink: 0;
    background: var(--ide-gutter-bg);
    border-left: 1px solid var(--eax-border);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 20px;
    padding: 8px 6px;
    overflow-y: auto;
    pointer-events: none;
}

.watch-badge {
    display: inline-block;
    padding: 0 6px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 18px;
    background: var(--ide-info-bg);
    color: var(--ide-info-fg);
    white-space: nowrap;
}
.watch-badge.true {
    background: var(--ide-ok-bg);
    color: var(--ide-ok-fg);
}
.watch-badge.false {
    background: var(--eax-bg-hover);
    color: var(--eax-text-secondary);
}

/* ==========================================================================
   Sampling Trace (ECharts)
   ========================================================================== */
.trace-toolbar {
    background: var(--eax-bg-surface);
    padding: 6px 12px;
    border-bottom: 1px solid var(--eax-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.trace-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.trace-tag-picker {
    display: flex;
    gap: 4px;
}
.trace-tag-picker select {
    height: 26px;
    background: var(--eax-bg-surface);
    color: var(--eax-text-primary);
    border: 1px solid var(--eax-border);
    padding: 0 8px;
    border-radius: 4px;
    font-size: 12px;
}

.trace-active-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.trace-chip {
    background: var(--ide-chip-bg);
    border: 1px solid var(--eax-border);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-family: var(--font-mono);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chip-remove {
    cursor: pointer;
    color: var(--eax-text-muted);
}
.chip-remove:hover { color: var(--eax-status-danger); }

.trace-chart-container {
    flex: 1;
    position: relative;
    background: var(--eax-bg-canvas);
    overflow: hidden;
}

/* ==========================================================================
   AG Grid (Watch, Fieldbus, Logs, DVR): quartz themes driven by eax tokens
   ========================================================================== */
/* body-qualified: AG Grid injects its own theme rules after this file. */
body .ag-theme-quartz,
body .ag-theme-quartz-dark {
    --ag-font-family: var(--font-ui);
    --ag-font-size: 12px;
    --ag-background-color: var(--eax-bg-surface);
    --ag-foreground-color: var(--eax-text-primary);
    --ag-data-color: var(--eax-text-primary);
    --ag-secondary-foreground-color: var(--eax-text-secondary);
    --ag-header-background-color: var(--eax-bg-header);
    --ag-header-foreground-color: var(--eax-text-secondary);
    --ag-chrome-background-color: var(--eax-bg-header);
    --ag-control-panel-background-color: var(--eax-bg-panel);
    --ag-border-color: var(--eax-border);
    --ag-row-border-color: var(--eax-border-subtle);
    --ag-row-hover-color: var(--eax-bg-hover);
    --ag-odd-row-background-color: var(--eax-bg-surface);
    --ag-selected-row-background-color: var(--eax-accent-muted);
    --ag-range-selection-border-color: var(--eax-accent);
    --ag-input-focus-border-color: var(--eax-accent);
    --ag-active-color: var(--eax-accent);
    --ag-wrapper-border-radius: 0;
    --ag-header-height: 30px;
    --ag-row-height: 28px;
    --ag-grid-size: 6px;
}
body .ag-theme-quartz .ag-header-cell-text,
body .ag-theme-quartz-dark .ag-header-cell-text {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.grid-toolbar {
    background: var(--eax-bg-surface);
    padding: 6px 12px;
    border-bottom: 1px solid var(--eax-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.grid-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.fieldbus-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--eax-text-secondary);
}
.fieldbus-status strong { font-family: var(--font-mono); color: var(--eax-text-primary); }
.fieldbus-status .status-dot { background: var(--eax-status-online); }
.grid-search input {
    height: 26px;
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    color: var(--eax-text-primary);
    padding: 0 8px;
    border-radius: 4px;
    font-size: 12px;
    width: 220px;
}

.ag-grid-wrapper {
    flex: 1;
    overflow: hidden;
}

.sev-badge {
    display: inline-block;
    padding: 0 6px;
    border-radius: 3px;
    border: 1px solid;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
}
.sev-info { background: var(--ide-info-bg); border-color: var(--ide-info-bd); color: var(--ide-info-fg); }
.sev-warning { background: var(--ide-warn-bg); border-color: var(--ide-warn-bd); color: var(--ide-warn-fg); }
.sev-danger { background: var(--ide-danger-bg); border-color: var(--ide-danger-bd); color: var(--ide-danger-fg); }
.val-delta { color: var(--ide-warn-fg); font-weight: 700; font-family: var(--font-mono); }
.val-none { color: var(--eax-text-muted); }

/* ==========================================================================
   CODESYS-Style Visual Ladder Logic (LD) Editor
   ========================================================================== */
.ladder-toolbox {
    display: flex;
    align-items: center;
    padding: 5px 12px;
    background: var(--eax-bg-surface);
    border-bottom: 1px solid var(--eax-border);
    gap: 8px;
    flex-wrap: wrap;
    row-gap: 4px;
    z-index: 10;
    flex-shrink: 0;
}

.toolbox-group {
    display: flex;
    align-items: center;
    gap: 3px;
}

.tb-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--eax-text-muted);
    margin-right: 4px;
    white-space: nowrap;
}

.tb-symbol-btn {
    background: var(--eax-bg-panel);
    border: 1px solid var(--eax-border-subtle);
    border-radius: 4px;
    padding: 3px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    cursor: pointer;
    color: var(--eax-text-primary);
    min-width: 54px;
    transition: all 0.12s ease;
}
.tb-symbol-btn:hover {
    border-color: var(--eax-accent);
    background: var(--eax-accent-muted);
}
.tb-symbol-btn:active { transform: translateY(1px); }
.tb-symbol-btn .sym-art {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--eax-accent);
    letter-spacing: -0.5px;
}
.tb-symbol-btn .sym-name {
    font-size: 9px;
    color: var(--eax-text-secondary);
    white-space: nowrap;
}

.tb-tool-btn {
    height: 26px;
    background: transparent;
    border: 1px solid var(--eax-border);
    border-radius: 4px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--eax-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: all 0.12s;
}
.tb-tool-btn .ic { width: 13px; height: 13px; }
.tb-tool-btn:hover {
    background: var(--eax-bg-hover);
    color: var(--eax-text-primary);
}
.tb-tool-btn.danger:hover {
    background: var(--ide-danger-bg);
    border-color: var(--ide-danger-bd);
    color: var(--ide-danger-fg);
}

.toolbox-separator {
    width: 1px;
    height: 28px;
    background: var(--eax-border);
    margin: 0 2px;
}

.toolbox-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.active-pou-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    background: var(--ide-info-bg);
    border: 1px solid var(--ide-info-bd);
    color: var(--ide-info-fg);
    padding: 0 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Ladder Workspace & Rungs */
.ladder-editor-workspace {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    background: var(--eax-bg-canvas);
    display: flex;
    flex-direction: column;
    gap: 16px;
    user-select: none;
}

/* Virtualised network list (app.js ladderView): one child in the flex
   workspace; the gap between networks is the cards' margin. */
.ladder-editor-workspace { overflow-anchor: none; }
.ladder-virtual { display: block; flex: 0 0 auto; }
.ladder-virtual-list > .ladder-network-card { margin-bottom: 16px; }
.ld-goto-input {
    width: 72px;
    height: 26px;
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    border-radius: 4px;
    color: var(--eax-text-primary);
    padding: 0 6px;
    font-family: var(--font-mono);
    font-size: 12px;
}
.ld-goto-input.invalid { border-color: var(--eax-status-danger); }
.ld-network-count { color: var(--eax-text-muted); font-size: 11px; margin-left: 4px; white-space: nowrap; }

/* Online values read by the PLC: not yet read / not a variable of it. */
.ladder-tag-val.val-pending { color: var(--eax-text-muted); }
.ladder-tag-val.val-unknown { color: var(--ide-warn-fg); border-color: var(--ide-warn-bd); }
.box-live { font-family: var(--font-mono); font-size: 10px; color: var(--ide-info-fg); margin-top: 3px; min-height: 12px; }

.ladder-network-card {
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--eax-shadow-md);
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}
.ladder-network-card.selected {
    border-color: var(--eax-accent);
    box-shadow: 0 0 0 1px var(--eax-accent), var(--eax-shadow-lg);
}

.network-header {
    background: var(--eax-bg-header);
    padding: 5px 12px;
    border-bottom: 1px solid var(--eax-border);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.network-num-pill {
    background: var(--eax-accent-muted);
    border: 1px solid var(--eax-accent);
    color: var(--eax-accent);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: pointer;
}

.network-title-input {
    background: transparent;
    border: 1px solid transparent;
    color: var(--eax-text-primary);
    font-weight: 600;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 3px;
    flex: 1;
}
.network-title-input:hover { border-color: var(--eax-border); }
.network-title-input:focus {
    background: var(--eax-bg-panel);
    border-color: var(--eax-accent);
    outline: none;
}

.network-comment-input {
    background: transparent;
    border: 1px solid transparent;
    color: var(--eax-text-muted);
    font-size: 11px;
    font-style: italic;
    padding: 2px 6px;
    border-radius: 3px;
    flex: 2;
}
.network-comment-input:hover { border-color: var(--eax-border); }
.network-comment-input:focus {
    background: var(--eax-bg-panel);
    border-color: var(--eax-accent);
    outline: none;
}

.network-actions {
    display: flex;
    gap: 4px;
}

.network-canvas-wrap {
    padding: 24px 20px;
    display: flex;
    align-items: center;
    position: relative;
    overflow-x: auto;
    min-height: 120px;
    background: var(--eax-bg-canvas);
    background-image: radial-gradient(var(--eax-grid-dot) 1px, transparent 1px);
    background-size: 16px 16px;
}


/* ==========================================================================
   CLI Terminal
   ========================================================================== */
.browser-header {
    background: var(--eax-bg-surface);
    padding: 6px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--eax-border);
    flex-shrink: 0;
}
.browser-title,
.tasks-title,
.dvr-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--eax-text-primary);
}
.browser-title .ic, .tasks-title .ic, .dvr-title .ic { color: var(--eax-accent); }
.quick-commands {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.terminal-screen {
    flex: 1;
    background: var(--ide-code-bg);
    display: flex;
    flex-direction: column;
    padding: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    min-height: 0;
}
.terminal-output {
    flex: 1;
    overflow-y: auto;
    white-space: pre-wrap;
    color: var(--ide-term-fg);
    line-height: 1.5;
    user-select: text;
}
.terminal-prompt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    border-top: 1px solid var(--eax-border);
    padding-top: 8px;
}
.prompt-symbol {
    color: var(--eax-accent);
    font-weight: 700;
}
.terminal-prompt input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ide-code-fg);
    font-family: var(--font-mono);
    font-size: 12px;
}

/* ==========================================================================
   Bottom Diagnostics & Log Dock
   ========================================================================== */
.studio-footer {
    height: 160px;
    flex-shrink: 0;
    background: var(--eax-bg-panel);
    border-top: 1px solid var(--eax-border);
    display: flex;
    flex-direction: column;
    transition: height 0.2s ease;
}
.studio-footer.collapsed { height: 29px; }
.studio-footer.collapsed .dock-toggle .ic { transform: rotate(180deg); }

.footer-tabs {
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    background: var(--eax-bg-header);
    border-bottom: 1px solid var(--eax-border);
    padding: 0 8px;
    gap: 8px;
}
.f-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--eax-text-secondary);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: pointer;
}
.f-tab-btn .ic { width: 12px; height: 12px; }
.f-tab-btn.active {
    color: var(--eax-accent);
    border-bottom-color: var(--eax-accent);
}
.footer-tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
.footer-tools input {
    height: 22px;
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    color: var(--eax-text-primary);
    padding: 0 8px;
    border-radius: 4px;
    font-size: 11px;
    width: 180px;
}
.dock-toggle { width: 22px; height: 22px; }
.dock-toggle .ic { transition: transform 0.15s ease; }

.footer-grid-wrap {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
#log-ag-grid {
    --ag-font-size: 11px;
    --ag-header-height: 26px;
    --ag-row-height: 24px;
    --ag-grid-size: 4px;
}

/* ==========================================================================
   Statusbar (eaxScada .eax-statusbar)
   ========================================================================== */
.statusbar {
    height: 24px;
    flex-shrink: 0;
    background: var(--eax-bg-header);
    border-top: 1px solid var(--eax-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--eax-text-muted);
    overflow: hidden;
    white-space: nowrap;
}
.sb-left, .sb-right {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.sb-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sb-item strong { font-weight: 600; }
/* Active forces: always visible, never subtle */
.sb-forced { background: var(--eax-status-danger); color: #fff; font-weight: 700; padding: 0 8px; border-radius: 3px; letter-spacing: .04em; cursor: help; }
.forced-badge { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; background: var(--eax-status-danger); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; cursor: help; }
.status-online { color: var(--eax-status-online); }
.status-offline { color: var(--eax-text-muted); }
.status-indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.status-indicator-dot.online { background: var(--eax-status-online); box-shadow: var(--ide-glow-on); }
.status-indicator-dot.offline { background: var(--eax-text-muted); }

/* Status-bar buttons (RT monitor, account) */
.sb-btn {
    height: 18px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    border-radius: 3px;
    border: 1px solid var(--eax-border);
    background: transparent;
    color: var(--eax-text-secondary);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.sb-btn .ic { width: 12px; height: 12px; }
.sb-btn:hover, .sb-btn.active {
    background: var(--eax-bg-hover);
    color: var(--eax-text-primary);
}
.sb-btn.active { border-color: var(--eax-accent); color: var(--eax-accent); }
#sb-account { display: inline-flex; gap: 4px; }
#sb-account:empty { display: none; }

/* ==========================================================================
   Editor Right-Click Context Menu
   ========================================================================== */
.context-menu {
    position: fixed;
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    border-radius: 6px;
    padding: 4px;
    box-shadow: var(--eax-shadow-lg);
    z-index: 9999;
    min-width: 200px;
    display: flex;
    flex-direction: column;
}
.context-header {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--eax-accent);
    font-family: var(--font-mono);
    border-bottom: 1px solid var(--eax-border-subtle);
    margin-bottom: 4px;
}
.ctx-item {
    background: none;
    border: none;
    color: var(--eax-text-primary);
    padding: 6px 8px;
    text-align: left;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ctx-item .ic { color: var(--eax-text-secondary); }
.ctx-item:hover {
    background: var(--eax-accent);
    color: var(--ide-on-accent);
}
.ctx-item:hover .ic { color: var(--ide-on-accent); }
.ctx-divider {
    border: none;
    height: 1px;
    background: var(--eax-border-subtle);
    margin: 4px 0;
}

/* ==========================================================================
   Buttons (eaxScada hierarchy: primary / secondary / semantic tints)
   ========================================================================== */
.btn-sm, .btn-xs, .btn-force {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    color: var(--eax-text-primary);
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.1s ease;
}
.btn-sm { height: 26px; padding: 0 10px; font-size: 12px; }
.btn-xs, .btn-force { height: 22px; padding: 0 7px; font-size: 11px; }
.btn-sm .ic { width: 13px; height: 13px; }
.btn-xs .ic { width: 12px; height: 12px; }
.btn-sm:hover, .btn-xs:hover, .btn-force:hover { background: var(--eax-bg-hover); border-color: var(--eax-border-strong); }
.btn-sm.primary, .btn-xs.primary {
    background: var(--ide-primary-bg);
    border-color: transparent;
    color: var(--ide-on-accent);
    font-weight: 600;
}
.btn-sm.primary:hover, .btn-xs.primary:hover { background: var(--ide-primary-hover); }
.btn-sm.success, .btn-xs.success { background: var(--ide-ok-bg); border-color: var(--ide-ok-bd); color: var(--ide-ok-fg); font-weight: 600; }
.btn-sm.warning, .btn-xs.warning { background: var(--ide-warn-bg); border-color: var(--ide-warn-bd); color: var(--ide-warn-fg); font-weight: 600; }
.btn-sm.danger, .btn-xs.danger { background: var(--ide-danger-bg); border-color: var(--ide-danger-bd); color: var(--ide-danger-fg); font-weight: 600; }
.btn-sm.success:hover, .btn-sm.warning:hover, .btn-sm.danger:hover,
.btn-xs.success:hover, .btn-xs.warning:hover, .btn-xs.danger:hover { box-shadow: inset 0 0 0 99px var(--ide-tint-hover); }
.btn-xs.mono { font-family: var(--font-mono); }

/* Sign-in, e-signature and users dialogs (auth.js builds them in JS) */
.auth-dialog h3 { font-size: 14px; font-weight: 600; color: var(--eax-text-primary); }
.auth-dialog button:not(.btn-sm) {
    height: 26px;
    padding: 0 10px;
    border-radius: 4px;
    border: 1px solid var(--eax-border);
    background: var(--eax-bg-surface);
    color: var(--eax-text-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.auth-dialog button:not(.btn-sm):hover { background: var(--eax-bg-hover); }
.auth-dialog button[type="submit"]:not(.btn-sm) {
    background: var(--ide-primary-bg);
    border-color: transparent;
    color: var(--ide-on-accent);
    font-weight: 600;
}
.auth-dialog select,
.auth-dialog form > input,
.auth-dialog td input {
    height: 26px;
    padding: 0 6px;
    border-radius: 4px;
    border: 1px solid var(--eax-border);
    background: var(--eax-bg-surface);
    color: var(--eax-text-primary);
    font-size: 12px;
}

/* ==========================================================================
   Modal Dialogs
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--ide-overlay);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-box {
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    border-radius: 8px;
    width: 900px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--eax-shadow-lg);
    overflow: hidden;
    color: var(--eax-text-primary);
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--eax-border);
    background: var(--eax-bg-header);
}
.modal-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--eax-text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-title .ic { color: var(--eax-accent); width: 16px; height: 16px; }
.modal-close {
    background: transparent;
    border: none;
    color: var(--eax-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.modal-close:hover { color: var(--eax-text-primary); }
.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}
.modal-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--eax-border);
    padding-bottom: 8px;
}
.modal-tab-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--eax-text-secondary);
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
}
.modal-tab-btn:hover { background: var(--eax-bg-hover); color: var(--eax-text-primary); }
.modal-tab-btn.active {
    background: var(--eax-accent-muted);
    color: var(--eax-accent);
    border-color: var(--eax-accent);
}
.modal-hint { font-size: 12px; color: var(--eax-text-muted); }
.modal-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; }
.modal-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 8px; }
.section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--eax-text-secondary); margin-bottom: 4px; }

.version-item {
    background: var(--eax-bg-panel);
    border: 1px solid var(--eax-border);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.version-item:hover {
    border-color: var(--eax-accent);
    background: var(--eax-accent-muted);
}
.version-title { color: var(--eax-text-primary); font-size: 13px; font-weight: 600; }
.version-meta { font-size: 11px; color: var(--eax-text-muted); }
.version-reason { font-size: 11px; color: var(--eax-text-secondary); margin-top: 2px; }
.version-head-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.head-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--ide-ok-bg);
    color: var(--ide-ok-fg);
    border: 1px solid var(--ide-ok-bd);
}
.cat-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--ide-ai-bg);
    color: var(--ide-ai-fg);
    border: 1px solid var(--ide-ai-bd);
}
.msg-error { color: var(--eax-status-danger); padding: 10px; font-size: 12px; }
.msg-ok { color: var(--eax-status-online); }
.msg-bad { color: var(--eax-status-danger); }
.msg-empty { color: var(--eax-text-muted); padding: 10px; font-size: 12px; }
.audit-status { font-size: 12px; font-weight: 600; color: var(--eax-status-online); }
.audit-count { font-size: 11px; color: var(--eax-text-muted); margin-left: 8px; }

.commit-hash-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--eax-bg-hover);
    color: var(--eax-accent);
}
.diff-view-box {
    background: var(--ide-code-bg);
    border: 1px solid var(--eax-border);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 12px;
    white-space: pre-wrap;
    max-height: 280px;
    overflow-y: auto;
    color: var(--ide-code-fg);
    margin-top: 8px;
    user-select: text;
}
.diff-added { color: var(--ide-ok-fg); background: var(--ide-ok-bg); }
.diff-removed { color: var(--ide-danger-fg); background: var(--ide-danger-bg); }

/* ==========================================================================
   Form Controls & Inputs
   ========================================================================== */
.form-row {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.form-row label {
    font-size: 11px;
    font-weight: 600;
    color: var(--eax-text-secondary);
}
.form-input, .form-select {
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    color: var(--eax-text-primary);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    width: 100%;
}
.form-input:focus, .form-select:focus,
.grid-search input:focus, .footer-tools input:focus, .trace-tag-picker select:focus,
.ld-goto-input:focus, .dvr-grid-filter input:focus, .form-select-sm:focus {
    border-color: var(--eax-accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--eax-accent-muted);
}
input::placeholder { color: var(--eax-text-muted); }

/* ==========================================================================
   IEC 61131-3 Task Configuration & Scheduler Matrix
   ========================================================================== */
.tasks-toolbar {
    padding: 8px 16px;
    background: var(--eax-bg-surface);
    border-bottom: 1px solid var(--eax-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.tasks-title-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.tasks-title { font-size: 13px; }
.tasks-subtitle {
    font-size: 11px;
    color: var(--eax-text-muted);
}
.tasks-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.tasks-content-grid {
    display: flex;
    flex: 1;
    overflow: hidden;
    padding: 14px;
    gap: 14px;
    background: var(--eax-bg-app);
}

.tasks-table-card {
    flex: 1;
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    border-radius: 6px;
    overflow-y: auto;
}

.industrial-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 12px;
}
.industrial-table th {
    background: var(--eax-bg-header);
    color: var(--eax-text-secondary);
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--eax-border);
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}
.industrial-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--eax-border-subtle);
    color: var(--eax-text-primary);
    vertical-align: middle;
}
.industrial-table tbody tr:hover { background: var(--eax-bg-hover); }
.td-mono { font-family: var(--font-mono); }
.td-accent { font-family: var(--font-mono); color: var(--eax-accent); }
.td-ok { font-family: var(--font-mono); color: var(--eax-status-online); }
.td-bad { font-family: var(--font-mono); color: var(--eax-status-danger); }
.td-unit { color: var(--eax-text-muted); font-size: 11px; }
.td-none { color: var(--eax-text-muted); font-style: italic; }

/* Priority Badges */
.priority-pill {
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
    border: 1px solid;
}
.priority-rt { background: var(--ide-danger-bg); color: var(--ide-danger-fg); border-color: var(--ide-danger-bd); }
.priority-high { background: var(--ide-warn-bg); color: var(--ide-warn-fg); border-color: var(--ide-warn-bd); }
.priority-normal { background: var(--ide-info-bg); color: var(--ide-info-fg); border-color: var(--ide-info-bd); }
.priority-low { background: var(--eax-bg-hover); color: var(--eax-text-secondary); border-color: var(--eax-border); }

.task-status-cyclic { color: var(--eax-status-online); font-weight: 600; font-size: 11px; }
.task-status-free { color: var(--eax-accent); font-weight: 600; font-size: 11px; }
.task-status-event { color: var(--ide-ai-fg); font-weight: 600; font-size: 11px; }

.task-pou-badge {
    background: var(--eax-bg-hover);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    margin-right: 4px;
    font-family: var(--font-mono);
}

/* Task Detail Drawer */
.task-detail-card {
    width: 380px;
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.detail-header {
    padding: 8px 14px;
    background: var(--eax-bg-header);
    border-bottom: 1px solid var(--eax-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}
.detail-header h4 { font-size: 12px; font-weight: 600; }
.detail-body {
    padding: 14px;
    overflow-y: auto;
    flex: 1;
}
.pou-order-section {
    margin-top: 14px;
    border-top: 1px solid var(--eax-border);
    padding-top: 12px;
}
.section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--eax-text-secondary);
    margin-bottom: 6px;
}
.pou-call-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0;
    max-height: 180px;
    overflow-y: auto;
}
.pou-call-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--eax-bg-panel);
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--eax-border);
    font-size: 11px;
    font-family: var(--font-mono);
}
.add-pou-to-task {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

/* ==========================================================================
   Graphical Function Block Inspector Modal
   ========================================================================== */
.fb-inspector-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.fb-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.fb-info-row h3 { color: var(--eax-accent); margin: 0; font-family: var(--font-mono); font-size: 16px; }
.fb-badge {
    background: var(--ide-info-bg);
    color: var(--ide-info-fg);
    border: 1px solid var(--ide-info-bd);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.fb-desc {
    color: var(--eax-text-secondary);
    font-size: 12px;
}
.fb-diagram-wrap {
    background: var(--eax-bg-canvas);
    border: 1px solid var(--eax-border);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}
/* SVG schematic (renderFBSvgSchematic) */
.fb-svg-schematic .fb-body { fill: var(--eax-bg-surface); stroke: var(--eax-accent); stroke-width: 2; }
.fb-svg-schematic .fb-band { fill: var(--eax-bg-header); }
.fb-svg-schematic .fb-name { fill: var(--eax-accent); font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.fb-svg-schematic .fb-lib { fill: var(--eax-text-muted); font-family: var(--font-ui); font-size: 10px; }
.fb-svg-schematic .fb-pin-in { stroke: var(--eax-accent); fill: var(--eax-accent); stroke-width: 2; }
.fb-svg-schematic .fb-pin-out { stroke: var(--ide-energized); fill: var(--ide-energized); stroke-width: 2; }
.fb-svg-schematic .fb-pin-type { fill: var(--eax-text-secondary); font-family: var(--font-mono); font-size: 10px; }
.fb-svg-schematic .fb-pin-name { fill: var(--eax-text-primary); font-family: var(--font-mono); font-size: 11px; font-weight: 600; }

.fb-pins-table-wrap {
    border: 1px solid var(--eax-border);
    border-radius: 6px;
    overflow: hidden;
    max-height: 180px;
    overflow-y: auto;
}
.fb-pins-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.fb-pins-table th {
    background: var(--eax-bg-header);
    color: var(--eax-text-secondary);
    padding: 6px 10px;
    border-bottom: 1px solid var(--eax-border);
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.fb-pins-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--eax-border-subtle);
    font-family: var(--font-mono);
}
.pin-dir-in { color: var(--eax-accent); font-weight: 700; }
.pin-dir-out { color: var(--eax-status-online); font-weight: 700; }

/* Interactive Task Timing Number Inputs */
.task-timing-input {
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    color: var(--eax-accent);
    border-radius: 4px;
    padding: 3px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    width: 68px;
    text-align: right;
    transition: all 0.15s ease-in-out;
}
.task-timing-input.priority-input {
    width: 48px;
    color: var(--ide-warn-fg);
    text-align: center;
}
.task-timing-input:hover {
    border-color: var(--eax-border-strong);
    background: var(--eax-bg-hover);
}
.task-timing-input:focus {
    outline: none;
    border-color: var(--eax-accent);
    box-shadow: 0 0 0 2px var(--eax-accent-muted);
}

/* ==========================================================================
   Per-Cycle Snapshot Audit & DVR Flight Recorder Styles (Enterprise)
   ========================================================================== */
.dvr-panel-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    gap: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

.dvr-community-banner {
    background: var(--ide-danger-bg);
    border: 1px solid var(--ide-danger-bd);
    border-radius: 6px;
    padding: 12px 16px;
}
.dvr-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dvr-banner-icon { display: inline-flex; color: var(--ide-danger-fg); }
.dvr-banner-icon .ic { width: 22px; height: 22px; }
.dvr-banner-text {
    flex: 1;
    font-size: 12px;
    color: var(--eax-text-primary);
}
.dvr-banner-text strong {
    color: var(--ide-danger-fg);
    display: block;
    margin-bottom: 2px;
}

.dvr-control-deck {
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.dvr-deck-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.dvr-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dvr-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid;
    white-space: nowrap;
}
.dvr-live-pill { background: var(--ide-ok-bg); border-color: var(--ide-ok-bd); color: var(--ide-ok-fg); }
.dvr-paused-pill { background: var(--ide-warn-bg); border-color: var(--ide-warn-bd); color: var(--ide-warn-fg); }
.dvr-mode-pill { background: var(--ide-ai-bg); border-color: var(--ide-ai-bd); color: var(--ide-ai-fg); }

.dvr-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    flex-wrap: wrap;
}
.dvr-metric { color: var(--eax-text-secondary); white-space: nowrap; }
.dvr-metric strong {
    color: var(--eax-text-primary);
    font-family: var(--font-mono);
}

.dvr-scrub-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--eax-border);
    padding-top: 8px;
}
.dvr-transport-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.dvr-speed-selector, .dvr-resolution-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--eax-text-secondary);
    margin-left: 6px;
}

.form-select-sm {
    height: 24px;
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    color: var(--eax-text-primary);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 11px;
}

.dvr-slider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.dvr-slider {
    flex: 1;
    accent-color: var(--eax-accent);
    cursor: pointer;
    height: 6px;
}
.dvr-slider-time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--eax-text-secondary);
    min-width: 60px;
    text-align: center;
}

.dvr-waveform-card {
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.dvr-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--eax-text-secondary);
    margin-bottom: 6px;
}
.dvr-card-header > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.dvr-card-header .ic { width: 12px; height: 12px; color: var(--eax-text-muted); }

.dvr-cursor-readout {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--eax-accent);
}

.dvr-detail-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.dvr-state-card {
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.dvr-state-badge {
    padding: 1px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.05em;
    border: 1px solid var(--ide-ok-bd);
    background: var(--ide-ok-bg);
    color: var(--ide-ok-fg);
}
/* app.js dvrSetBadge: recorded (default), start, keyframe, lost, boundary */
.dvr-state-badge:not([data-state]) { background: var(--eax-bg-panel); border-color: var(--eax-border); color: var(--eax-text-secondary); }
.dvr-state-badge[data-state="start"] { background: var(--ide-info-bg); border-color: var(--ide-info-bd); color: var(--ide-info-fg); }
.dvr-state-badge[data-state="keyframe"] { background: var(--ide-ai-bg); border-color: var(--ide-ai-bd); color: var(--ide-ai-fg); }
.dvr-state-badge[data-state="boundary"] { background: var(--ide-warn-bg); border-color: var(--ide-warn-bd); color: var(--ide-warn-fg); }
.dvr-state-badge[data-state="lost"] { background: var(--ide-danger-bg); border-color: var(--ide-danger-bd); color: var(--ide-danger-fg); }

.dvr-state-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}
.dvr-kv-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid var(--eax-border-subtle);
    font-size: 11px;
}
.kv-key { color: var(--eax-text-secondary); }
.kv-val {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--eax-text-primary);
}
.kv-val.mono { font-size: 11px; }
.kv-val.highlight {
    color: var(--ide-warn-fg);
    font-weight: 700;
}

.dvr-section-divider {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--eax-text-muted);
    margin-top: 8px;
    margin-bottom: 4px;
}

.dvr-kv-row .kv-val[data-level="ok"] { color: var(--ide-ok-fg); }
.dvr-kv-row .kv-val[data-level="bad"] { color: var(--ide-danger-fg); font-weight: 700; }

/* Chart variables (app.js renderDvrPicker) */
.dvr-divider-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dvr-picker-count {
    font-family: var(--font-mono);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.dvr-picker-filter {
    height: 22px;
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    color: var(--eax-text-primary);
    border-radius: 4px;
    padding: 0 8px;
    font-size: 11px;
    margin-bottom: 4px;
}
.dvr-picker-filter:focus { outline: none; border-color: var(--eax-accent); }
.dvr-picker {
    background: var(--eax-bg-panel);
    border: 1px solid var(--eax-border);
    border-radius: 4px;
    padding: 4px;
    min-height: 60px;
    max-height: 150px;
    overflow-y: auto;
    font-size: 11px;
    font-family: var(--font-mono);
    flex-shrink: 0;
}
.dvr-picker-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 4px;
    border-radius: 3px;
    cursor: pointer;
    color: var(--eax-text-primary);
}
.dvr-picker-row:hover { background: var(--eax-bg-hover); }
.dvr-picker-row.disabled { opacity: 0.5; cursor: default; }
.dvr-picker-row input { margin: 0; accent-color: var(--eax-accent); }
.dvr-picker-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dvr-picker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvr-picker-addr { margin-left: auto; color: var(--eax-text-muted); white-space: nowrap; }

/* Changed in this cycle (app.js fetchAndDisplayDvrCycle) */
.dvr-changes-box {
    background: var(--eax-bg-panel);
    border: 1px solid var(--eax-border);
    border-radius: 4px;
    padding: 6px;
    min-height: 48px;
    max-height: 130px;
    overflow-y: auto;
    font-size: 11px;
    font-family: var(--font-mono);
    flex-shrink: 0;
}
.dvr-change-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px;
    color: var(--ide-warn-fg);
    border-bottom: 1px dashed var(--ide-warn-bd);
}
.dvr-change-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvr-change-vals { white-space: nowrap; }
.dvr-note {
    padding: 3px 6px;
    margin-bottom: 4px;
    border-radius: 4px;
    border: 1px solid;
    font-size: 11px;
}
.dvr-note-lost { background: var(--ide-danger-bg); border-color: var(--ide-danger-bd); color: var(--ide-danger-fg); }
.dvr-note-info { background: var(--ide-info-bg); border-color: var(--ide-info-bd); color: var(--ide-info-fg); }
.dvr-note-boundary { background: var(--ide-warn-bg); border-color: var(--ide-warn-bd); color: var(--ide-warn-fg); font-weight: 600; }
.dvr-epoch-choice {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 8px;
    margin-bottom: 4px;
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    border-radius: 4px;
    color: var(--eax-text-primary);
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: pointer;
}
.dvr-epoch-choice:hover { background: var(--eax-bg-hover); border-color: var(--eax-accent); }
.dvr-no-changes {
    color: var(--eax-text-muted);
    font-family: var(--font-ui);
    font-style: italic;
    font-size: 10px;
}

.dvr-grid-card {
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.dvr-grid-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: 0;
}
.dvr-grid-filter input[type="text"] {
    height: 22px;
    background: var(--eax-bg-surface);
    border: 1px solid var(--eax-border);
    color: var(--eax-text-primary);
    border-radius: 4px;
    padding: 0 8px;
    font-size: 11px;
    width: 160px;
}
.dvr-checkbox-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--eax-text-secondary);
    cursor: pointer;
}
.dvr-grid-wrap {
    flex: 1;
    min-height: 0;
    width: 100%;
    margin-top: 6px;
}
.dvr-cell-changed {
    color: var(--ide-warn-fg) !important;
    font-weight: 700 !important;
    background-color: var(--ide-warn-bg) !important;
}

/* Ladder view empty state (app.js renderLadderEditor) */
.ld-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--eax-text-muted);
}
.ld-empty h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--eax-text-secondary);
    margin-bottom: 4px;
}

/* ==========================================================================
   Fieldbus configurator (fieldbus.js)
   ========================================================================== */
.fb-toolbar { flex-wrap: wrap; }
.fb-toolbar .grid-actions { flex-wrap: wrap; }
.fb-sep { width: 1px; height: 18px; background: var(--eax-border); margin: 0 4px; }
.tool-btn.fb-primary { background: var(--eax-accent); color: var(--ide-on-accent); border-color: var(--eax-accent); }
.tool-btn.fb-primary:hover { filter: brightness(1.08); background: var(--eax-accent); color: var(--ide-on-accent); }
.tool-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.fb-state { font-size: 12px; color: var(--eax-text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.fb-bad { color: var(--ide-danger-fg); }
.fb-warn { color: var(--ide-warn-fg); }
.fb-banner { padding: 6px 12px; font-size: 12px; border-bottom: 1px solid var(--ide-danger-bd); background: var(--ide-danger-bg); color: var(--ide-danger-fg); }
.fb-banner.hidden, .fb-grid-wrap.hidden, .fb-problems.hidden { display: none; }
.fb-body { flex: 1; display: flex; min-height: 0; }
.fb-tree { width: 250px; flex-shrink: 0; overflow: auto; border-right: 1px solid var(--eax-border); background: var(--eax-bg-panel); padding: 6px 0; }
.fb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.fb-node { display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--eax-text-primary); white-space: nowrap; }
.fb-node:hover { background: var(--eax-bg-hover); }
.fb-node.selected { background: var(--eax-accent-muted); box-shadow: inset 2px 0 0 var(--eax-accent); }
.fb-node svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--eax-text-secondary); }
.fb-bus { font-weight: 600; margin-top: 4px; }
.fb-dev { padding-left: 26px; }
.fb-name { overflow: hidden; text-overflow: ellipsis; }
.fb-meta { color: var(--eax-text-muted); font-size: 11px; font-family: var(--font-mono); margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
.fb-tag { font-size: 10px; font-weight: 600; padding: 0 5px; border-radius: 3px; border: 1px solid var(--ide-info-bd); background: var(--ide-info-bg); color: var(--ide-info-fg); }
.fb-tag.off { border-color: var(--eax-border); background: transparent; color: var(--eax-text-muted); }
.fb-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--eax-text-muted); }
.fb-dot.ok { background: var(--ide-ok-fg); }
.fb-dot.warn { background: var(--ide-warn-fg); }
.fb-dot.bad { background: var(--ide-danger-fg); }
.fb-empty, .fb-hint { padding: 12px; font-size: 12px; color: var(--eax-text-muted); }
.fb-form { flex-shrink: 0; max-height: 45%; overflow: auto; padding: 10px 14px; border-bottom: 1px solid var(--eax-border); background: var(--eax-bg-surface); }
.fb-form-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.fb-title { font-size: 13px; font-weight: 600; color: var(--eax-text-primary); }
.fb-status { display: flex; align-items: center; gap: 8px; font-size: 11px; min-width: 0; flex: 1; }
.fb-status .fb-meta { margin-left: 0; }
.fb-chip { padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; border: 1px solid var(--eax-border); color: var(--eax-text-secondary); }
.fb-chip.ok { background: var(--ide-ok-bg); color: var(--ide-ok-fg); border-color: var(--ide-ok-bd); }
.fb-chip.warn { background: var(--ide-warn-bg); color: var(--ide-warn-fg); border-color: var(--ide-warn-bd); }
.fb-chip.bad { background: var(--ide-danger-bg); color: var(--ide-danger-fg); border-color: var(--ide-danger-bd); }
.fb-err { color: var(--ide-danger-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.fb-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; }
.fb-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: var(--eax-text-secondary); }
.fb-field .form-input, .fb-field .form-select { padding: 4px 8px; height: 28px; }
.fb-field.fb-bool { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; align-self: end; height: 28px; }
.fb-mono { font-family: var(--font-mono); }
.fb-grid-wrap { flex: 1; display: flex; flex-direction: column; min-height: 160px; }
.fb-io-title { font-size: 12px; color: var(--eax-text-primary); margin-right: 6px; }
.fb-live { color: var(--eax-accent); }
.ag-row.fb-row-bad { background: var(--ide-danger-bg) !important; }
.fb-problems { flex-shrink: 0; max-height: 30%; overflow: auto; border-top: 1px solid var(--ide-danger-bd); background: var(--eax-bg-panel); font-size: 12px; }
.fb-problems-head { padding: 6px 12px; font-weight: 600; color: var(--ide-danger-fg); background: var(--ide-danger-bg); position: sticky; top: 0; }
.fb-problem { padding: 4px 12px; cursor: pointer; color: var(--eax-text-primary); border-bottom: 1px solid var(--eax-border-subtle); }
.fb-problem:hover { background: var(--eax-bg-hover); }
.fb-problem .fb-mono { color: var(--eax-text-muted); margin-right: 6px; }
.fb-side .fb-node { padding: 3px 10px; }
.fb-side .fb-dev { padding-left: 22px; }
.fb-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; }
.fb-dialog { min-width: 380px; max-width: 640px; background: var(--eax-bg-panel); color: var(--eax-text-primary); border: 1px solid var(--eax-border-strong); border-radius: 6px; box-shadow: var(--eax-shadow-lg); padding: 16px; }
.fb-dialog h3 { margin: 0 0 10px; font-size: 14px; }
.fb-dialog-body { display: flex; flex-direction: column; gap: 8px; font-size: 12px; max-height: 60vh; overflow: auto; }
.fb-dialog-body p { margin: 0; color: var(--eax-text-secondary); }
.fb-dialog-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.fb-dialog-btns .tool-btn { border-color: var(--eax-border); }
.fb-disc { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 6px; border: 1px solid var(--eax-border); border-radius: 4px; cursor: pointer; }
.fb-disc .fb-meta { grid-column: 2; margin-left: 0; }
.fb-scan { border-collapse: collapse; font-size: 12px; width: 100%; }
.fb-scan th, .fb-scan td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--eax-border-subtle); vertical-align: top; }
.fb-scan th { color: var(--eax-text-secondary); font-weight: 600; }
.fb-dialog:has(.fb-scan) { max-width: 900px; }
.dvr-changed-flag { color: var(--ide-warn-fg); font-weight: 700; font-family: var(--font-mono); }
.dvr-unchanged-flag { color: var(--eax-text-muted); }

/* ==========================================================================
   Shared dialogs (modals.js): eaxAlert / eaxConfirm / eaxPrompt / eaxForm
   and the autocomplete list. Theme tokens only (dark, light, ISA-101).
   ========================================================================== */
.eax-dlg-overlay {
    position: fixed; inset: 0; z-index: 100000;
    background: var(--ide-overlay); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    animation: eax-dlg-fade 0.12s ease-out;
}
@keyframes eax-dlg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes eax-dlg-pop { from { transform: translateY(6px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }
.eax-dlg {
    width: 440px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px);
    display: flex; flex-direction: column;
    background: var(--eax-bg-surface); color: var(--eax-text-primary);
    border: 1px solid var(--eax-border-strong); border-radius: 8px;
    box-shadow: var(--eax-shadow-lg); font-family: var(--font-ui); font-size: 12px;
    animation: eax-dlg-pop 0.14s ease-out; overflow: hidden;
}
.eax-dlg-head {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    background: var(--eax-bg-header); border-bottom: 1px solid var(--eax-border);
}
.eax-dlg-title { margin: 0; font-size: 13px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eax-dlg-danger .eax-dlg-head { box-shadow: inset 3px 0 0 var(--eax-status-danger); }
.eax-dlg-warning .eax-dlg-head { box-shadow: inset 3px 0 0 var(--eax-status-warning); }
.eax-dlg-x {
    background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--eax-text-muted);
    width: 24px; height: 24px; cursor: pointer; font-size: 13px; line-height: 1;
}
.eax-dlg-x:hover { color: var(--eax-text-primary); background: var(--eax-bg-hover); }
.eax-dlg-x:focus-visible { outline: 2px solid var(--eax-accent); outline-offset: 1px; }
.eax-dlg-body { padding: 14px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.eax-dlg-msg { color: var(--eax-text-secondary); line-height: 1.5; white-space: pre-line; }
.eax-dlg-fields { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.eax-dlg-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 100%; min-width: 0; }
.eax-dlg-field.half { flex: 1 1 calc(50% - 6px); }
.eax-dlg-field > label { font-size: 11px; font-weight: 600; color: var(--eax-text-secondary); }
.eax-dlg-req { color: var(--eax-status-danger); }
.eax-dlg-field .form-input, .eax-dlg-field .form-select { height: 30px; padding: 4px 8px; box-sizing: border-box; }
.eax-dlg-field .form-input.mono { font-family: var(--font-mono); }
.eax-dlg-field .eax-dlg-textarea { height: auto; resize: vertical; font-family: var(--font-ui); line-height: 1.4; }
.eax-dlg-field [aria-invalid="true"] { border-color: var(--eax-status-danger); box-shadow: 0 0 0 2px var(--ide-danger-bg); }
.eax-dlg-hint { font-size: 11px; color: var(--eax-text-muted); }
.eax-dlg-error { font-size: 11px; color: var(--ide-danger-fg); min-height: 0; }
.eax-dlg-error:empty { display: none; }
.eax-dlg-form-error:not(:empty) {
    padding: 6px 8px; border-radius: 4px; background: var(--ide-danger-bg); border: 1px solid var(--ide-danger-bd);
}
.eax-dlg-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--eax-text-primary); }
.eax-dlg-foot {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    border-top: 1px solid var(--eax-border); background: var(--eax-bg-panel);
}
.eax-dlg-spacer { flex: 1; }
.eax-dlg-foot .btn-sm { min-width: 72px; justify-content: center; }
.eax-dlg-foot .btn-sm:focus-visible { outline: 2px solid var(--eax-accent); outline-offset: 1px; }
.eax-dlg-note {
    padding: 8px 10px; border-radius: 4px; font-size: 11px; line-height: 1.45;
    background: var(--ide-info-bg); border: 1px solid var(--ide-info-bd); color: var(--ide-info-fg);
}
.eax-dlg-note.warn { background: var(--ide-warn-bg); border-color: var(--ide-warn-bd); color: var(--ide-warn-fg); }

.eax-ac-list {
    position: fixed; z-index: 200000; max-height: 240px; overflow: auto; max-width: 460px;
    background: var(--eax-bg-surface); border: 1px solid var(--eax-border-strong); border-radius: 6px;
    box-shadow: var(--eax-shadow-lg); padding: 3px; font-size: 12px;
}
.eax-ac-item {
    display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 4px; cursor: pointer;
    color: var(--eax-text-primary); white-space: nowrap;
}
.eax-ac-item.active, .eax-ac-item:hover { background: var(--eax-accent-muted); }
.eax-ac-item.active { box-shadow: inset 2px 0 0 var(--eax-accent); }
.eax-ac-label { font-family: var(--font-mono); font-weight: 600; }
.eax-ac-detail { margin-left: auto; padding-left: 12px; color: var(--eax-text-muted); font-family: var(--font-mono); font-size: 11px; }
.eax-ac-kind {
    font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 1px 4px; border-radius: 3px; min-width: 26px; text-align: center;
    background: var(--ide-info-bg); color: var(--ide-info-fg); border: 1px solid var(--ide-info-bd);
}
.eax-ac-kind-sym { background: var(--ide-ok-bg); color: var(--ide-ok-fg); border-color: var(--ide-ok-bd); }
.eax-ac-kind-io { background: var(--ide-warn-bg); color: var(--ide-warn-fg); border-color: var(--ide-warn-bd); }
.eax-ac-kind-fb { background: var(--ide-ai-bg); color: var(--ide-ai-fg); border-color: var(--ide-ai-bd); }

/* ==========================================================================
   Ladder Diagram editor (ladder.js): toolbox, networks drawn in SVG, online
   view, in-place editor, drag and drop. Theme tokens only.
   ========================================================================== */
.ld-glyph { width: 30px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; color: var(--eax-accent); overflow: visible; }
.ld-glyph text { fill: currentColor; stroke: none; font: 700 9px var(--font-mono); }
.tb-symbol-btn { min-width: 50px; padding: 3px 5px 2px; cursor: grab; }
.tb-symbol-btn:focus-visible, .tb-box-btn:focus-visible, .tb-icon-btn:focus-visible, .tb-tool-btn:focus-visible { outline: 2px solid var(--eax-accent); outline-offset: 1px; }
.tb-box-btn {
    height: 34px; min-width: 38px; padding: 0 7px; border-radius: 4px; cursor: grab;
    background: var(--eax-bg-panel); border: 1px solid var(--eax-border-subtle); color: var(--eax-text-primary);
    font: 600 11px var(--font-mono); display: inline-flex; align-items: center; justify-content: center;
    box-shadow: inset 0 3px 0 -1px var(--eax-accent-muted);
}
.tb-box-btn.op { color: var(--eax-text-secondary); }
.tb-box-btn.more { min-width: 30px; }
.tb-box-btn .ic { width: 14px; height: 14px; }
.tb-box-btn:hover, .tb-symbol-btn:hover { border-color: var(--eax-accent); background: var(--eax-accent-muted); }
.ld-blocks { flex-wrap: wrap; }
.ladder-subbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 4px; padding: 4px 12px;
    background: var(--eax-bg-panel); border-bottom: 1px solid var(--eax-border); flex-shrink: 0; min-height: 34px;
}
.tb-icon-btn {
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
    background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--eax-text-secondary); cursor: pointer;
}
.tb-icon-btn .ic { width: 15px; height: 15px; }
.tb-icon-btn:hover:not(:disabled) { background: var(--eax-bg-hover); color: var(--eax-text-primary); border-color: var(--eax-border); }
.tb-icon-btn:disabled { opacity: 0.35; cursor: default; }
.tb-icon-btn.danger:hover { background: var(--ide-danger-bg); color: var(--ide-danger-fg); border-color: var(--ide-danger-bd); }
.tb-mini-sep { width: 1px; height: 18px; background: var(--eax-border); margin: 0 3px; }
.ld-decl-count { color: var(--eax-text-muted); font-weight: 500; margin-left: 2px; }
#ld-decl-toggle[aria-expanded="true"] { background: var(--eax-accent-muted); border-color: var(--eax-accent); color: var(--eax-text-primary); }
.ld-subbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ld-status-msg { font-size: 11px; color: var(--eax-text-secondary); opacity: 0; transition: opacity 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.ld-status-msg.show { opacity: 1; }
.ld-problems {
    height: 22px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 11px; cursor: pointer;
    font-size: 11px; font-weight: 600; background: var(--ide-ok-bg); border: 1px solid var(--ide-ok-bd); color: var(--ide-ok-fg);
}
.ld-problems .ic { width: 13px; height: 13px; }
.ld-problems.bad { background: var(--ide-danger-bg); border-color: var(--ide-danger-bd); color: var(--ide-danger-fg); }
.ld-online-pill {
    height: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 11px;
    font: 700 10px var(--font-ui); letter-spacing: 0.05em; white-space: nowrap; border: 1px solid var(--eax-border);
    color: var(--eax-text-secondary); background: var(--eax-bg-surface);
}
.ld-online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--eax-text-muted); }
.ld-online-pill.on { background: var(--ide-ok-bg); border-color: var(--ide-ok-bd); color: var(--ide-ok-fg); }
.ld-online-pill.on .ld-online-dot { background: var(--eax-status-online); box-shadow: var(--ide-glow-on); animation: ld-pulse 1.6s ease-in-out infinite; }
.ld-online-pill.warn { background: var(--ide-warn-bg); border-color: var(--ide-warn-bd); color: var(--ide-warn-fg); }
.ld-online-pill.warn .ld-online-dot { background: var(--eax-status-warning); }
@keyframes ld-pulse { 50% { opacity: 0.45; } }
.ld-save.ld-unsaved { border-color: var(--ide-warn-bd); }
.ld-save.ld-unsaved::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--eax-status-warning); margin-left: 2px; }

.ld-decl-panel { display: none; flex-shrink: 0; border-bottom: 1px solid var(--eax-border); background: var(--ide-code-bg); }
.ld-decl-panel.open { display: block; }
.ld-decl-text {
    display: block; width: 100%; height: 170px; min-height: 80px; max-height: 60vh; resize: vertical; box-sizing: border-box;
    border: none; outline: none; padding: 8px 14px; background: transparent; color: var(--ide-code-fg);
    font: 12px/1.55 var(--font-mono); tab-size: 4;
}
.ld-decl-text:focus { box-shadow: inset 0 0 0 1px var(--eax-accent); }

/* networks */
.ladder-editor-workspace:focus { outline: none; }
.ladder-editor-workspace:focus-visible .ladder-network-card.selected { box-shadow: 0 0 0 2px var(--eax-accent), var(--eax-shadow-lg); }
.network-header { padding: 4px 10px; }
.network-comment-row { padding: 0 10px 4px 10px; background: var(--eax-bg-header); border-bottom: 1px solid var(--eax-border); }
.network-comment-row .network-comment-input { width: 100%; box-sizing: border-box; }
.network-actions .btn-xs { width: 24px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.network-actions .btn-xs .ic { width: 13px; height: 13px; }
.network-canvas-wrap.ld-canvas { padding: 6px 8px; display: block; min-height: 0; }
.ld-svg { display: block; overflow: visible; font-family: var(--font-mono); user-select: none; }

.ld-rail { stroke: var(--eax-accent); stroke-width: 4; stroke-linecap: round; }
.ld-wire { stroke: var(--eax-text-muted); stroke-width: 2; stroke-linecap: square; transition: stroke 0.12s; }
.ld-online .ld-wire.conductive { stroke: var(--ide-energized); stroke-width: 3; }
.ld-stroke { stroke: var(--eax-text-primary); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.ld-sym-bg { fill: transparent; stroke: none; }
.ld-letter { fill: var(--eax-text-primary); font: 700 11px var(--font-mono); }
.ld-online .ld-contact-sym.conductive .ld-stroke,
.ld-online .ld-coil-sym.energized .ld-stroke { stroke: var(--ide-energized); }
.ld-online .ld-contact-sym.conductive .ld-sym-bg,
.ld-online .ld-coil-sym.energized .ld-sym-bg { fill: var(--ide-ok-bg); }
.ld-online .ld-contact-sym.conductive .ld-letter,
.ld-online .ld-coil-sym.energized .ld-letter { fill: var(--ide-energized); }

.ld-hit { fill: transparent; stroke: transparent; stroke-width: 1.5; pointer-events: all; }
.ld-el { cursor: pointer; }
.ld-el:hover > .ld-hit { fill: var(--ide-tint-hover); stroke: var(--eax-border); }
.ld-el.ld-selected > .ld-hit { fill: var(--eax-accent-muted); stroke: var(--eax-accent); }
.ld-el.ld-drag-src { opacity: 0.35; }
.ld-name { fill: var(--eax-text-primary); font-size: 12px; font-weight: 600; cursor: text; }
.ld-name.ld-empty { fill: var(--ide-danger-fg); font-weight: 700; }
.ld-bad .ld-name { fill: var(--ide-danger-fg); text-decoration: underline dotted; }
.ld-name-hit { fill: transparent; pointer-events: all; cursor: text; }
.ld-name-hit:hover { fill: var(--eax-accent-muted); stroke: var(--eax-accent); stroke-width: 1; stroke-dasharray: 3 2; }
.ld-addr { fill: var(--eax-text-muted); font-size: 10px; }
.ld-ecomment { fill: var(--eax-text-muted); font: italic 10px var(--font-ui); }
.ld-hint { fill: var(--eax-text-muted); font: italic 11px var(--font-ui); }

.ld-val { pointer-events: none; }
.ld-val rect { fill: var(--eax-bg-surface); stroke: var(--eax-border); }
.ld-val text { font: 700 9.5px var(--font-mono); fill: var(--eax-text-muted); letter-spacing: 0.03em; }
.ld-val.val-true rect { fill: var(--ide-ok-bg); stroke: var(--ide-ok-bd); }
.ld-val.val-true text { fill: var(--ide-ok-fg); }
.ld-val.val-false text { fill: var(--eax-text-secondary); }
.ld-val.val-unknown rect { fill: var(--ide-warn-bg); stroke: var(--ide-warn-bd); }
.ld-val.val-unknown text { fill: var(--ide-warn-fg); }
.ld-offline .ld-val, .ld-offline .ld-boxlive, .ld-offline .ld-pv { display: none; }

/* boxes */
.ld-box-body { fill: var(--eax-bg-surface); stroke: var(--eax-border-strong); stroke-width: 1.5; }
.ld-box-head { fill: var(--eax-bg-header); stroke: var(--eax-border-strong); stroke-width: 1.5; cursor: pointer; }
.ld-box-head:hover { fill: var(--eax-accent-muted); }
.ld-box-type { fill: var(--eax-accent); font: 700 11.5px var(--font-mono); cursor: pointer; letter-spacing: 0.03em; }
.ld-box-type.ld-empty { fill: var(--ide-danger-fg); }
.ld-online .ld-box-sym.conductive .ld-box-body, .ld-online .ld-box-sym.conductive .ld-box-head { stroke: var(--ide-energized); }
.ld-bad .ld-box-body { stroke: var(--ide-danger-bd); }
.ld-inst { font-size: 12px; }
.ld-pin { cursor: pointer; }
.ld-pin-hit { fill: transparent; pointer-events: all; }
.ld-pin:not([data-pseudo]):hover .ld-pin-hit { fill: var(--eax-accent-muted); stroke: var(--eax-accent); stroke-width: 1; stroke-dasharray: 3 2; }
.ld-pin-stub { stroke: var(--eax-text-muted); stroke-width: 1.6; }
.ld-pin-name { fill: var(--eax-text-secondary); font-size: 10.5px; font-weight: 600; }
.ld-pin-out { fill: var(--eax-text-primary); }
.ld-pin[data-pseudo] .ld-pin-name { fill: var(--eax-text-muted); font-weight: 500; }
.ld-pin-val { fill: var(--eax-text-primary); font-size: 11px; font-weight: 600; }
.ld-pin-val.ld-default { fill: var(--eax-text-muted); font-style: italic; font-weight: 500; }
.ld-pin-val.ld-unset { fill: var(--eax-text-muted); font-weight: 400; }
.ld-pv { fill: var(--ide-info-fg); font-size: 10px; font-weight: 700; }
.ld-pv.on { fill: var(--ide-ok-fg); }
.ld-boxlive { fill: var(--ide-warn-fg); font: 700 10px var(--font-mono); display: none; }
.ld-online .ld-boxlive.ld-shown { display: inline; }

/* drag and drop */
.ld-gap { fill: transparent; pointer-events: none; }
.ld-dragging .ld-gap { pointer-events: all; }
.ld-dragging .ld-gap:hover, .ld-gap.ld-drop { fill: var(--eax-accent-muted); stroke: var(--eax-accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ld-el.ld-drop > .ld-hit { stroke: var(--eax-accent); stroke-dasharray: 4 3; fill: var(--eax-accent-muted); }
.ld-el.ld-drop-par > .ld-hit { stroke: var(--eax-status-online); stroke-dasharray: 4 3; fill: var(--ide-ok-bg); }
.ld-svg.ld-drop { outline: 1px dashed var(--eax-accent); outline-offset: -2px; }
.ld-dragging, .ld-dragging * { cursor: grabbing !important; }
.ld-drag-ghost {
    position: fixed; z-index: 150000; pointer-events: none; padding: 3px 8px; border-radius: 4px;
    background: var(--eax-bg-surface); border: 1px dashed var(--eax-border-strong); color: var(--eax-text-secondary);
    font: 600 11px var(--font-mono); box-shadow: var(--eax-shadow-md); white-space: nowrap;
}
.ld-drag-ghost.ok { border-color: var(--eax-accent); color: var(--eax-accent); }

/* in-place editor */
.ld-inline { position: fixed; z-index: 90000; }
.ld-inline-input {
    width: 100%; height: 28px; box-sizing: border-box; padding: 3px 8px; border-radius: 4px;
    border: 1px solid var(--eax-accent); box-shadow: 0 0 0 3px var(--eax-accent-muted), var(--eax-shadow-lg);
    background: var(--eax-bg-surface); color: var(--eax-text-primary); font: 600 12px var(--font-mono); outline: none;
}
.ld-inline-input[aria-invalid="true"] { border-color: var(--eax-status-danger); box-shadow: 0 0 0 3px var(--ide-danger-bg); }
.ld-inline-err:not(:empty) {
    margin-top: 3px; padding: 4px 7px; border-radius: 4px; font: 11px var(--font-ui);
    background-color: var(--eax-bg-surface); box-shadow: inset 0 0 0 99px var(--ide-danger-bg);
    border: 1px solid var(--ide-danger-bd); color: var(--ide-danger-fg);
}
.ld-inline-hint { position: absolute; left: 0; bottom: calc(100% + 4px); white-space: nowrap; font: 10px var(--font-ui); color: var(--eax-text-muted); background: var(--eax-bg-surface); padding: 2px 6px; border-radius: 3px; border: 1px solid var(--eax-border); width: max-content; max-width: 320px; }

/* shortcuts / problems dialogs */
.ld-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.ld-keys-group h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--eax-text-muted); }
.ld-key-row { display: flex; align-items: baseline; gap: 10px; padding: 2px 0; font-size: 12px; color: var(--eax-text-primary); }
.ld-kbd { flex: 0 0 132px; font: 600 11px var(--font-mono); color: var(--eax-text-primary); }
.ld-prob-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; }
.ld-prob {
    text-align: left; background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 5px 8px; cursor: pointer;
    color: var(--eax-text-primary); font: 12px var(--font-ui); display: flex; gap: 10px;
}
.ld-prob:hover, .ld-prob:focus-visible { background: var(--eax-bg-hover); border-color: var(--eax-border); outline: none; }
.ld-prob-net { flex: 0 0 78px; font: 600 11px var(--font-mono); color: var(--ide-danger-fg); }
@media (max-width: 720px) { .ld-keys { grid-template-columns: 1fr; } }