/* ═══════════════════════════════════════════════════════════════════════════
   IoT Dashboard — main stylesheet
   Uses CSS custom properties for easy theming.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Language switcher ───────────────────────────────────────────────────── */
.wd-lang-select {
    -webkit-appearance: none; appearance: none;
    padding: 3px 22px 3px 8px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 5px;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: var(--wd-fs-xs);
    cursor: pointer;
    margin-left: 8px;
}
.wd-lang-select:focus { outline: none; border-color: rgba(255,255,255,.7); }
.wd-lang-select option { color: #333; background: #fff; }

:root {
    --wd-primary:   #1565c0;
    --wd-accent:    #42a5f5;
    --wd-surface:   #f5f7fa;
    --wd-border:    #e2e6ea;
    --wd-text:      #2d3748;
    --wd-text-muted:#718096;
    --wd-ok:        #43a047;
    --wd-warn:      #fb8c00;
    --wd-crit:      #e53935;
    --wd-topbar-h:  58px;
    --wd-radius:    10px;
    --wd-shadow:    0 2px 12px rgba(0,0,0,.10);

    /* Typography scale */
    --wd-fs-hero:     2.2rem;   /* ~35px – hero h1 */
    --wd-fs-kpi:      2rem;     /* ~32px – KPI numbers */
    --wd-fs-title:    1.4rem;   /* ~22px – page h1, section titles */
    --wd-fs-subtitle: 1.2rem;   /* ~19px – h2, view title, card headings */
    --wd-fs-body:     1rem;     /* 16px  – regular text, descriptions */
    --wd-fs-small:    0.9rem;   /* ~14px – nav, labels, secondary info */
    --wd-fs-xs:       0.8rem;   /* ~13px – badges, timestamps, minimal */
}

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

body.wd-body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--wd-surface);
    color: var(--wd-text);
    font-size: var(--wd-fs-body);
    line-height: 1.5;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.wd-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: var(--wd-topbar-h);
    background: var(--wd-primary);
    color: #fff;
    display: flex; align-items: center; gap: 16px;
    padding: 0 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.wd-topbar-brand { display: flex; align-items: center; gap: 8px; font-size: var(--wd-fs-body); flex-shrink: 0; }
.wd-topbar-brand i { font-size: 22px; color: var(--wd-accent); }
.wd-topbar-nav { display: flex; gap: 6px; flex: 1; }
.wd-topbar-nav a {
    color: rgba(255,255,255,.8); text-decoration: none; padding: 7px 14px;
    border-radius: 5px; font-size: var(--wd-fs-small); transition: background .15s;
}
.wd-topbar-nav a:hover, .wd-topbar-nav a.active { background: rgba(255,255,255,.15); color: #fff; }
.wd-topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.wd-clock { font-size: var(--wd-fs-small); color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.wd-status-dot { width: 8px; height: 8px; border-radius: 50%; }
.wd-status-dot.online { background: #66bb6a; box-shadow: 0 0 0 3px rgba(102,187,106,.3); }

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.wd-page-wrapper { margin-top: var(--wd-topbar-h); padding: 28px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.wd-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--wd-radius); border: none;
    cursor: pointer; font-size: var(--wd-fs-small); font-weight: 500; transition: all .15s;
    text-decoration: none; white-space: nowrap;
}
.wd-btn-primary   { background: var(--wd-primary); color: #fff; }
.wd-btn-primary:hover { background: #0d47a1; }
.wd-btn-secondary { background: #fff; color: var(--wd-primary); border: 1px solid var(--wd-border); }
.wd-btn-secondary:hover { background: #f0f4ff; }
.wd-btn-danger    { background: #fff; color: var(--wd-crit); border: 1px solid #ffc5c5; }
.wd-btn-danger:hover { background: #fff5f5; }
.wd-btn-sm { padding: 5px 12px; font-size: var(--wd-fs-xs); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.wd-hero {
    background: linear-gradient(135deg, var(--wd-primary) 0%, #1976d2 60%, #42a5f5 100%);
    border-radius: var(--wd-radius);
    padding: 56px 48px;
    color: #fff; text-align: center;
    margin-bottom: 32px;
}
.wd-hero-icon { font-size: 52px; margin-bottom: 16px; opacity: .9; }
.wd-hero h1  { font-size: var(--wd-fs-hero); font-weight: 700; margin-bottom: 10px; }
.wd-hero-sub { font-size: var(--wd-fs-body); opacity: .85; margin-bottom: 28px; }
.wd-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.wd-hero-actions .wd-btn { font-size: var(--wd-fs-body); padding: 11px 24px; }
.wd-hero-actions .wd-btn-primary  { background: #fff; color: var(--wd-primary); }
.wd-hero-actions .wd-btn-secondary{ background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }

/* ── Feature grid (home page) ─────────────────────────────────────────────── */
.wd-feature-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px; margin-bottom: 32px;
}
.wd-feature-card {
    background: #fff; border-radius: var(--wd-radius); padding: 28px;
    box-shadow: var(--wd-shadow); border: 1px solid var(--wd-border);
}
.wd-feature-card h3 { font-size: var(--wd-fs-subtitle); margin: 12px 0 8px; }
.wd-feature-card p  { font-size: var(--wd-fs-small); color: var(--wd-text-muted); line-height: 1.6; }
.wd-feature-icon {
    width: 52px; height: 52px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
}

/* ── Architecture note (home) ─────────────────────────────────────────────── */
.wd-architecture-note {
    background: #fff; border-radius: var(--wd-radius);
    padding: 28px; box-shadow: var(--wd-shadow); border: 1px solid var(--wd-border);
}
.wd-architecture-note h2 { font-size: var(--wd-fs-subtitle); margin-bottom: 16px; color: var(--wd-primary); }
.wd-arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; }
.wd-arch-item {
    border-radius: 6px; padding: 16px; border-left: 4px solid;
}
.wd-arch-item.yes  { background: #f1f8e9; border-color: #66bb6a; }
.wd-arch-item.no   { background: #fbe9e7; border-color: #ef5350; }
.wd-arch-item.alt  { background: #e8f5e9; border-color: #42a5f5; }
.wd-arch-title { font-weight: 600; font-size: var(--wd-fs-small); margin-bottom: 8px; }
.wd-arch-item ul   { padding-left: 16px; font-size: var(--wd-fs-xs); color: #444; }
.wd-arch-item li   { margin-bottom: 3px; }
.wd-arch-item code { background: rgba(0,0,0,.06); padding: 1px 4px; border-radius: 3px; font-size: var(--wd-fs-xs); }

/* ── Page header ──────────────────────────────────────────────────────────── */
.wd-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.wd-page-header h1 { font-size: var(--wd-fs-title); }
.wd-page-sub { color: var(--wd-text-muted); font-size: var(--wd-fs-small); margin-top: 2px; }

/* ── Compact list toolbar (replaces wd-page-header on index) ─────────────── */
.wd-list-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; gap: 12px;
}
.wd-list-toolbar-title {
    font-size: var(--wd-fs-subtitle); font-weight: 600; color: var(--wd-text);
}

/* ── Dashboard card grid ──────────────────────────────────────────────────── */
.wd-dashboard-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 20px;
}
.wd-dash-card {
    background: #fff; border-radius: var(--wd-radius); padding: 24px;
    box-shadow: var(--wd-shadow); border: 1px solid var(--wd-border);
    transition: box-shadow .2s, transform .15s;
}
.wd-dash-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-2px); }
.wd-dash-card-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.wd-dash-icon {
    width: 46px; height: 46px; background: #e3f2fd; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--wd-primary); font-size: 20px; flex-shrink: 0;
}
.wd-dash-meta h3 { font-size: var(--wd-fs-subtitle); font-weight: 600; }
.wd-dash-tabs { font-size: var(--wd-fs-xs); color: var(--wd-text-muted); }
.wd-dash-desc { font-size: var(--wd-fs-small); color: var(--wd-text-muted); margin-bottom: 12px; }
.wd-dash-stats { display: flex; gap: 12px; font-size: var(--wd-fs-xs); color: var(--wd-text-muted); margin-bottom: 14px; }
.wd-dash-actions { display: flex; gap: 6px; }
.wd-empty-state {
    grid-column: 1/-1; text-align: center; padding: 64px 24px;
    color: var(--wd-text-muted);
}
.wd-empty-state i { font-size: 52px; display: block; margin-bottom: 16px; opacity: .3; }
.wd-empty-state h3 { font-size: var(--wd-fs-subtitle); margin-bottom: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGNER
   ═══════════════════════════════════════════════════════════════════════ */
#designer-root {
    display: flex; flex-direction: column;
    height: calc(100vh - var(--wd-topbar-h));
    overflow: hidden;
    margin: 0 -24px;          /* bleed to edges */
}
.des-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--wd-border);
    flex-shrink: 0; gap: 12px;
}
.des-toolbar-left, .des-toolbar-right { display: flex; align-items: center; gap: 8px; }
.des-hide-sliders-label {
    display: flex; align-items: center; gap: 5px;
    font-size: var(--wd-fs-xs); color: var(--wd-text-muted); cursor: pointer;
    user-select: none; white-space: nowrap;
}
.des-hide-sliders-label input[type="checkbox"] { cursor: pointer; }
.des-mode-badge {
    background: #e3f2fd; color: var(--wd-primary);
    padding: 4px 10px; border-radius: 12px; font-size: var(--wd-fs-xs); font-weight: 600;
}
.des-tabs-bar {
    display: flex; align-items: center; gap: 2px; padding: 6px 12px;
    background: var(--wd-surface); border-bottom: 1px solid var(--wd-border);
    flex-shrink: 0; overflow-x: auto;
}
.des-tab-btn {
    display: flex; align-items: center; gap: 5px; padding: 6px 14px;
    border: 1px solid transparent; border-radius: 6px; background: none;
    cursor: pointer; font-size: var(--wd-fs-small); color: var(--wd-text-muted);
    white-space: nowrap; transition: all .15s;
}
.des-tab-btn:hover { background: #fff; border-color: var(--wd-border); }
.des-tab-btn.active { background: #fff; border-color: var(--wd-primary); color: var(--wd-primary); font-weight: 600; }
.des-tab-edit, .des-tab-del {
    opacity: 0; padding: 2px 4px; border-radius: 3px; cursor: pointer;
    font-size: var(--wd-fs-xs); transition: opacity .15s; margin-left: 4px;
}
.des-tab-btn:hover .des-tab-edit,
.des-tab-btn:hover .des-tab-del { opacity: 1; }
.des-tab-del:hover { background: #fee; color: var(--wd-crit); }
.des-tab-add {
    padding: 6px 10px; border: 1px dashed var(--wd-border); border-radius: 6px;
    background: none; cursor: pointer; color: var(--wd-text-muted); font-size: var(--wd-fs-xs);
}
.des-tab-add:hover { border-color: var(--wd-primary); color: var(--wd-primary); }

.des-main {
    display: flex; flex: 1; overflow: hidden;
}

/* Palette */
.des-palette {
    width: 200px; min-width: 180px; flex-shrink: 0;
    background: #fff; border-right: 1px solid var(--wd-border);
    overflow-y: auto; padding: 12px;
}
.des-palette-title {
    font-size: var(--wd-fs-xs); font-weight: 700; color: var(--wd-text-muted);
    text-transform: uppercase; letter-spacing: .08em; padding: 4px 0 8px;
}
.des-palette-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 6px; margin-bottom: 4px;
    border: 1px solid var(--wd-border); background: var(--wd-surface);
    cursor: grab; font-size: var(--wd-fs-xs); user-select: none; transition: all .15s;
}
.des-palette-item:hover { background: #e3f2fd; border-color: var(--wd-accent); }
.des-palette-item i { width: 16px; text-align: center; color: var(--wd-primary); }
.des-tab-filter select, .des-tab-filter .dx-texteditor { margin-bottom: 4px; }

/* ── Splitter sizes panel (designer sidebar) ──────────────────────────────── */
.des-splitter-sizes { padding: 4px 0; }
.des-splitter-row-group {
    padding: 6px 0; border-bottom: 1px solid #f0f0f0; margin-bottom: 4px;
}
.des-splitter-row-group:last-child { border-bottom: none; }
.des-splitter-row-label {
    font-size: var(--wd-fs-xs); font-weight: 600; color: var(--wd-primary); margin-bottom: 4px;
}
.des-splitter-col-label {
    font-size: var(--wd-fs-xs); color: var(--wd-text-muted); margin: 4px 0 2px; text-transform: uppercase;
    letter-spacing: 0.04em;
}
.des-splitter-input-row {
    display: flex; align-items: center; gap: 4px; margin-bottom: 3px;
}
.des-splitter-col-name {
    font-size: var(--wd-fs-xs); color: #888; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.des-splitter-input {
    width: 52px; padding: 2px 4px; font-size: var(--wd-fs-xs); border: 1px solid var(--wd-border);
    border-radius: 4px; text-align: right;
}
.des-splitter-input:focus { border-color: var(--wd-accent); outline: none; }
.des-splitter-pct { font-size: var(--wd-fs-xs); color: #aaa; }

/* Canvas */
.des-canvas {
    flex: 1; overflow-y: auto; padding: 16px;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 31px, #e8ecf0 31px, #e8ecf0 32px
    ), repeating-linear-gradient(
        90deg, transparent, transparent 31px, #e8ecf0 31px, #e8ecf0 32px
    ), var(--wd-surface);
    position: relative;
}
.des-canvas-inner { min-height: 200px; padding-bottom: 8px; }

/* ── Widget row — flexbox so narrow drop-zone slots fit between cards ─────── */
.des-row {
    display: flex;
    align-items: stretch;
    margin-bottom: 12px;
}
.des-widget-card {
    background: #fff; border-radius: var(--wd-radius);
    border: 2px solid var(--wd-border);
    box-shadow: var(--wd-shadow); cursor: pointer; transition: border-color .15s, opacity .15s, box-shadow .15s;
    min-width: 0; overflow: hidden;
    height: 100%; display: flex; flex-direction: column;
}
.des-widget-card.col-span-1 { flex: 1; }
.des-widget-card.col-span-2 { flex: 2; }
.des-widget-card.col-span-3 { flex: 3; }
.des-widget-card.col-span-4 { flex: 4; }
.des-widget-card:hover  { border-color: var(--wd-accent); }
.des-widget-card.selected { border-color: var(--wd-primary); box-shadow: 0 0 0 3px rgba(21,101,192,.15); }
/* State while being dragged */
.des-widget-card.wdd-dragging { opacity: .35; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.des-wcard-header {
    display: flex; align-items: center; gap: 6px; padding: 8px 10px;
    border-bottom: 1px solid var(--wd-border); background: var(--wd-surface);
}
.des-wcard-icon { color: var(--wd-primary); font-size: 14px; }
.des-wcard-title { font-size: var(--wd-fs-small); font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.des-wcard-type { font-size: var(--wd-fs-xs); color: #aaa; }
.des-wcard-actions { display: flex; gap: 2px; }
.des-wcard-btn {
    padding: 3px 6px; border: none; border-radius: 4px;
    background: none; cursor: pointer; color: #888; font-size: var(--wd-fs-xs);
}
.des-wcard-btn:hover { background: #eee; color: var(--wd-primary); }
.des-wcard-btn.danger:hover { background: #fee; color: var(--wd-crit); }
.des-wcard-preview { flex: 1; min-height: 0; overflow: auto; padding: 10px; }
.des-wcard-titleblock { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-width: 0; }
.des-wcard-subtitle { font-size: var(--wd-fs-xs); color: var(--wd-text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.des-wcard-resize {
    padding: 4px 10px; border-top: 1px solid var(--wd-border);
    background: #fafafa; display: flex; align-items: center; gap: 8px; font-size: var(--wd-fs-xs);
}
.des-wcard-resize select { font-size: var(--wd-fs-xs); padding: 2px 4px; border-radius: 4px; border: 1px solid #ddd; }

/* ── Drop zones (inline separators between / around widget cards) ─────────── */
.des-drop-zone {
    flex: 0 0 14px;
    display: flex; align-items: center; justify-content: center;
    border: 2px dashed transparent;
    border-radius: 8px;
    cursor: pointer;
    color: transparent;
    font-size: var(--wd-fs-small);
    overflow: hidden;
    user-select: none;
    transition: flex-basis .15s, border-color .15s, background .15s, color .15s;
}
/* Reveal on row hover */
.des-row:hover .des-drop-zone {
    flex-basis: 22px;
    border-color: #d0d7e4;
    color: #b8c4d4;
}
/* Reveal (bigger) while ANY drag is active */
body.wdd-dragging .des-drop-zone {
    flex-basis: 36px;
    border-color: #a8bcd0;
    color: #8aaac0;
}
/* Hover / active drop target */
.des-drop-zone:hover,
.des-drop-zone.drag-over {
    flex-basis: 56px !important;
    border-color: var(--wd-primary) !important;
    background: rgba(21,101,192,.07);
    color: var(--wd-primary) !important;
}
/* Row is full — target is disabled */
.des-drop-zone.dz-full {
    pointer-events: none;
    opacity: .25;
}

/* ── Spacer / empty widget ────────────────────────────────────────────────── */
.des-widget-spacer {
    height: 100%; display: flex; align-items: center; justify-content: center;
    border: 2px dashed #c8d5e8; border-radius: var(--wd-radius);
    background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(200,213,232,.15) 6px, rgba(200,213,232,.15) 12px);
}
.des-spacer-inner {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: #a8b8cc; font-size: var(--wd-fs-xs); pointer-events: none;
}
.des-spacer-inner i { font-size: 22px; }
.des-spacer-actions { pointer-events: all; }

/* ── Row title bar (in designer, shown when row has a title set) ──────────── */
.des-row-title-bar {
    padding: 4px 10px; background: linear-gradient(90deg, #fff8e8, #fafafa);
    border-bottom: 1px solid #e8ddd0; flex-shrink: 0;
}
.des-row-title-text {
    display: block; font-size: var(--wd-fs-xs); font-weight: 600; color: #8a6d3b;
}
.des-row-title-desc {
    display: block; font-size: var(--wd-fs-xs); color: #a08050; margin-top: 1px;
}

/* ── Design-time row blocks (independent, no shared vertical splitter) ──── */

/* Each row is an independent block with fixed pixel height */
.des-row-block {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--wd-border);
    border-radius: var(--wd-radius);
    background: #fff;
    margin-bottom: 6px;
    overflow: hidden;
    box-shadow: var(--wd-shadow);
}

/* Bottom drag handle — resizes only this row */
.des-row-resizer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 7px;
    cursor: ns-resize;
    z-index: 20;
    background: transparent;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.des-row-resizer::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: #c8d5e8;
    transition: background .15s;
}
.des-row-resizer:hover::after,
.des-row-resizer.resizing::after {
    background: var(--wd-accent);
    width: 80px;
}

/* Row header: drag target + row label + buttons */
.des-row-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: linear-gradient(90deg, #e8eef6, #f5f7fa);
    border-bottom: 1px solid #d0dbe8;
    flex-shrink: 0;
    cursor: default;
    min-height: 28px;
    user-select: none;
}
.des-row-header.drag-over-hdr {
    background: rgba(21,101,192,.12);
    border-bottom-color: var(--wd-primary);
    outline: 2px dashed var(--wd-primary);
    outline-offset: -2px;
}
.des-row-label {
    font-size: var(--wd-fs-xs);
    font-weight: 700;
    color: var(--wd-primary);
    text-transform: uppercase;
    letter-spacing: .06em;
    flex: 1;
    pointer-events: none;
}
.des-row-drop-hint {
    font-size: var(--wd-fs-xs);
    color: #aab;
    pointer-events: none;
}
.des-row-actions {
    display: flex;
    align-items: center;
    gap: 3px;
}
.des-row-btn {
    padding: 2px 7px;
    font-size: var(--wd-fs-xs);
    border: 1px solid #d0dbe8;
    border-radius: 4px;
    background: #fff;
    color: var(--wd-text);
    cursor: pointer;
    line-height: 1.4;
    transition: background .12s, border-color .12s, color .12s;
}
.des-row-btn:hover {
    background: #e3f2fd;
    border-color: var(--wd-accent);
    color: var(--wd-primary);
}
.des-row-btn.danger:hover {
    background: #fee;
    border-color: #ffc5c5;
    color: var(--wd-crit);
}

/* Row body: horizontal splitter for columns */
.des-row-body {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    padding-bottom: 7px;  /* leave room for the resizer */
}
.des-row-body .dx-splitter {
    border: none;
    background: transparent;
    height: 100%;
}
.des-row-body .dx-splitter-item {
    overflow: hidden;
    height: 100%;
}
.des-row-body .dx-splitter-separator {
    background: #c8d5e8;
    opacity: 0.8;
}
.des-row-body .dx-splitter-separator:hover {
    background: var(--wd-accent);
    opacity: 1;
}

/* Widget pane inside row body */
.des-widget-pane {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 4px;
}

/* "Add new row" drop zone (full-width, below all rows) ────────────────── */
.des-newrow-zone {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 14px;
    margin-top: 8px;
    border: 2px dashed #d0d7e4;
    border-radius: var(--wd-radius);
    cursor: pointer;
    color: #a0aab8;
    font-size: var(--wd-fs-small);
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}
.des-newrow-zone:hover,
.des-newrow-zone.drag-over {
    border-color: var(--wd-primary);
    background: rgba(21,101,192,.05);
    color: var(--wd-primary);
}

/* ── Empty canvas drop zone ──────────────────────────────────────────────── */
.des-empty-zone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px;
    min-height: 220px; width: 100%;
    border: 2px dashed #c8d2de;
    border-radius: var(--wd-radius);
    cursor: pointer;
    color: #b0bec8;
    font-size: var(--wd-fs-small);
    transition: border-color .15s, background .15s, color .15s;
    user-select: none;
}
.des-empty-zone i { font-size: 36px; }
.des-empty-zone:hover,
.des-empty-zone.drag-over {
    border-color: var(--wd-primary);
    background: rgba(21,101,192,.05);
    color: var(--wd-primary);
}

/* ── Widget-type picker popup ────────────────────────────────────────────── */
.des-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 4px 0 8px;
}
.des-picker-item {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 16px 8px 12px;
    border: 2px solid var(--wd-border); border-radius: 8px;
    background: #fff; cursor: pointer;
    font-size: var(--wd-fs-xs); color: var(--wd-text); text-align: center;
    transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.des-picker-item i { font-size: 22px; color: var(--wd-primary); }
.des-picker-item:hover {
    border-color: var(--wd-primary); background: #f0f4ff;
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(21,101,192,.12);
}

/* KPI preview in designer */
.des-prev-kpi { text-align: center; padding: 4px; }
.des-prev-value { font-size: var(--wd-fs-title); font-weight: 700; color: var(--wd-text); }
.des-prev-sensor { font-size: var(--wd-fs-xs); color: #999; margin-top: 2px; }
.des-prev-chartmini {
    height: 30px; background: linear-gradient(90deg, #e3f2fd 0%, #90caf9 50%, #42a5f5 100%);
    border-radius: 3px; margin-top: 6px; opacity: .5;
}

/* Props panel */
.des-props {
    width: 220px; min-width: 200px; flex-shrink: 0;
    background: #fff; border-left: 1px solid var(--wd-border);
    overflow-y: auto; padding: 12px;
}
.des-props-title {
    font-size: var(--wd-fs-xs); font-weight: 700; color: var(--wd-text-muted);
    text-transform: uppercase; letter-spacing: .08em; padding: 4px 0 12px;
}
.des-props-empty { color: #bbb; text-align: center; padding: 32px 8px; font-size: var(--wd-fs-xs); }
.des-props-empty i { font-size: 28px; display: block; margin-bottom: 8px; }
.des-props-summary { font-size: var(--wd-fs-small); padding: 8px 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   VIEWER
   ═══════════════════════════════════════════════════════════════════════ */
#viewer-root { min-height: calc(100vh - var(--wd-topbar-h) - 48px); }
.view-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0 16px; gap: 12px; flex-wrap: wrap;
}
.view-toolbar-left { display: flex; align-items: center; gap: 10px; }
.view-title { font-size: var(--wd-fs-title); font-weight: 700; }
.view-desc { font-size: var(--wd-fs-xs); color: var(--wd-text-muted); }
.view-toolbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.view-tab-panel .dx-multiview-wrapper { padding: 16px 0 0; }
.view-tab-content { padding: 4px 0; }

/* ── Splitter-based viewer layout ─────────────────────────────────────────── */
.view-splitter-outer {
    min-height: 400px;
}
.view-splitter-outer .dx-splitter {
    border: none;
    background: transparent;
}
.view-splitter-row .dx-splitter {
    border: none;
    background: transparent;
}

/* Splitter separator styling */
.view-splitter-outer .dx-splitter-separator,
.view-splitter-row .dx-splitter-separator {
    background: var(--wd-border);
    opacity: 0.6;
    transition: opacity .2s, background .2s;
}
.view-splitter-outer .dx-splitter-separator:hover,
.view-splitter-row .dx-splitter-separator:hover {
    opacity: 1;
    background: var(--wd-accent);
}

/* ── Static viewer layout (hideSplittersInView = true) ───────────────────── */
.view-rows-static {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.view-row-static {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    min-height: 0;
}
.view-col-static {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── Viewer row title bar ─────────────────────────────────────────────────── */
.view-row-title-bar {
    padding: 8px 14px 6px; flex-shrink: 0;
    border-bottom: 2px solid var(--wd-border);
    margin-bottom: 4px;
}
.view-row-heading {
    font-size: var(--wd-fs-body); font-weight: 700; color: var(--wd-text);
}
.view-row-heading-desc {
    font-size: var(--wd-fs-xs); color: var(--wd-text-muted); margin-top: 2px;
}

/* Splitter pane with title: flex column */
.view-splitter-pane-inner {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
}
.view-splitter-pane-inner .view-splitter-row {
    flex: 1; min-height: 0;
}

/* Static row group (title bar + flex row) */
.view-row-group { display: flex; flex-direction: column; }
.view-row-group .view-row-title-bar { margin-bottom: 0; }
.view-row-group .view-row-static { flex: 1; }

/* Widget cell inside splitter pane */
.view-cell {
    background: #fff; border-radius: var(--wd-radius);
    box-shadow: var(--wd-shadow); border: 1px solid var(--wd-border);
    overflow: hidden;
    height: 100%;
    display: flex; flex-direction: column;
}
.view-col-static { height: 100%; }
.view-cell-header {
    padding: 12px 16px; border-bottom: 1px solid var(--wd-border);
    background: var(--wd-surface);
    flex-shrink: 0;
}
.view-cell-title { font-size: var(--wd-fs-small); font-weight: 600; }
.view-cell-subtitle { font-size: var(--wd-fs-xs); color: var(--wd-text-muted); margin-top: 1px; }
.view-cell-body { padding: 14px; flex: 1; min-height: 0; overflow: auto; }
.view-cell-spacer { flex: 1; min-height: 0; background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(200,213,232,.12) 8px, rgba(200,213,232,.12) 16px); }
.view-empty { text-align: center; padding: 48px; color: #bbb; }
.view-empty i { font-size: 40px; display: block; margin-bottom: 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   KPI WIDGET
   ═══════════════════════════════════════════════════════════════════════ */
/* ── KPI Card ──────────────────────────────────────────────────────────────── */
.wd-kpi { padding: 8px 12px; text-align: left; }

.wd-kpi-value-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.wd-kpi-value {
    font-size: var(--wd-fs-kpi);
    font-weight: 700;
    line-height: 1.1;
}
.wd-kpi-unit {
    font-size: var(--wd-fs-small);
    font-weight: 400;
    color: var(--wd-text-muted);
}

.wd-kpi-target {
    font-size: var(--wd-fs-xs);
    color: #999;
    white-space: nowrap;
}

.wd-kpi-target-pct {
    font-weight: 600;
}
.wd-kpi-target-pct.up { color: var(--wd-crit); }
.wd-kpi-target-pct.down { color: var(--wd-ok); }

.wd-kpi-delta {
    font-size: var(--wd-fs-small);
    font-weight: 600;
    margin-bottom: 6px;
}
.wd-kpi-delta.up { color: var(--wd-crit); }
.wd-kpi-delta.down { color: var(--wd-ok); }

/* Progress bar */
.wd-kpi-progress {
    margin-bottom: 8px;
}
.wd-kpi-progress-track {
    width: 100%;
    height: 6px;
    background: #eee;
    border-radius: 3px;
    overflow: hidden;
}
.wd-kpi-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.wd-kpi-label {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: var(--wd-fs-xs);
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
}

.wd-kpi-sparkline { margin-top: 4px; }

/* Status variants */
.kpi-ok .wd-kpi-value { color: var(--wd-ok); }
.kpi-ok .wd-kpi-label { background: var(--wd-ok); }
.kpi-warning .wd-kpi-value { color: var(--wd-warn); }
.kpi-warning .wd-kpi-label { background: var(--wd-warn); }
.kpi-critical .wd-kpi-value { color: var(--wd-crit); }
.kpi-critical .wd-kpi-label { background: var(--wd-crit); }

.wd-kpi-empty, .wd-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    color: #ccc;
    font-size: var(--wd-fs-small);
    gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SENSOR DOTS (SVG & OSM)
   ═══════════════════════════════════════════════════════════════════════ */
.wd-sensor-dot {
    position: absolute; width: 18px; height: 18px; border-radius: 50%;
    border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3);
    cursor: pointer; transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
}
.wd-sensor-dot:hover .wd-sensor-dot-label { opacity: 1; transform: translateY(-4px); }
.wd-sensor-dot-label {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.75); color: #fff; padding: 2px 6px; border-radius: 4px;
    font-size: var(--wd-fs-xs); white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .2s, transform .2s;
}
.wd-sensor-dot.status-online   { background: var(--wd-ok); }
.wd-sensor-dot.status-warning  { background: var(--wd-warn); }
.wd-sensor-dot.status-critical { background: var(--wd-crit); animation: pulse 1.5s infinite; }
.wd-sensor-dot.status-offline  { background: #bdbdbd; }
.wd-sensor-dot.status-unknown  { background: #90a4ae; }

/* SVG editor dots */
.wd-svg-sensor-dot {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3);
    cursor: move; transform: translate(-50%, -50%);
    z-index: 20;
}
.wd-svg-dot-label {
    position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.7); color: #fff; padding: 2px 6px; border-radius: 4px;
    font-size: var(--wd-fs-xs); white-space: nowrap; pointer-events: none;
}
.wd-sensor-dot-sm { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.wd-sensor-dot-sm.status-online   { background: var(--wd-ok); }
.wd-sensor-dot-sm.status-warning  { background: var(--wd-warn); }
.wd-sensor-dot-sm.status-critical { background: var(--wd-crit); }
.wd-sensor-dot-sm.status-offline  { background: #bdbdbd; }

@keyframes pulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,.3); }
    50% { box-shadow: 0 0 0 6px rgba(229,57,53,.25), 0 2px 6px rgba(0,0,0,.3); }
}

/* Leaflet custom icon */
.wd-leaflet-icon { display: flex; align-items: center; justify-content: center; }
.wd-marker-pulse circle { animation: leafletPulse 1.5s infinite; }
@keyframes leafletPulse {
    0%, 100% { r: 10; }
    50% { r: 12; fill-opacity: .7; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SVG EDITOR
   ═══════════════════════════════════════════════════════════════════════ */
.svg-editor { display: flex; flex-direction: column; gap: 8px; }
.svg-editor-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px; background: var(--wd-surface); border-radius: 6px;
    border: 1px solid var(--wd-border);
}
.svg-editor-body { display: flex; gap: 8px; }
.svg-sensor-list {
    width: 170px; flex-shrink: 0; border: 1px solid var(--wd-border);
    border-radius: 6px; overflow-y: auto; max-height: 400px; background: #fff;
}
.svg-sensor-item {
    display: flex; align-items: center; gap: 6px; padding: 6px 8px;
    cursor: grab; border-bottom: 1px solid #f0f0f0; font-size: var(--wd-fs-xs);
    transition: background .1s;
}
.svg-sensor-item:hover { background: #f0f4ff; }
.svg-canvas-wrap { flex: 1; border: 1px solid var(--wd-border); border-radius: 6px; overflow: hidden; }
.svg-canvas { position: relative; min-height: 300px; background: #fafafa; }
.svg-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; min-height: 200px; gap: 8px;
}
.wd-svg-wrap { position: relative; }

/* ═══════════════════════════════════════════════════════════════════════════
   OSM EDITOR
   ═══════════════════════════════════════════════════════════════════════ */
.osm-editor-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px; background: var(--wd-surface); border-radius: 6px;
    border: 1px solid var(--wd-border); margin-bottom: 8px;
}
.osm-editor-body { display: flex; gap: 8px; }
.osm-sensor-list {
    width: 170px; flex-shrink: 0; border: 1px solid var(--wd-border);
    border-radius: 6px; overflow-y: auto; max-height: 420px; background: #fff;
}
.osm-sensor-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    cursor: pointer; border-bottom: 1px solid #f0f0f0; font-size: var(--wd-fs-small);
    transition: background .1s;
}
.osm-sensor-item:hover { background: #f0f4ff; }
.osm-sensor-item.placing {
    background: #bbdefb;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #1976d2;
    animation: osm-placing-pulse 1.2s ease-in-out infinite;
}
@keyframes osm-placing-pulse {
    0%, 100% { background: #bbdefb; }
    50% { background: #90caf9; }
}
.osm-sensor-item.selected { background: #e3f2fd; font-weight: 600; box-shadow: inset 3px 0 0 #42a5f5; }

/* ═══════════════════════════════════════════════════════════════════════════
   SENSOR POPUP (viewer)
   ═══════════════════════════════════════════════════════════════════════ */
.wd-sensor-popup { padding: 4px; }
.wd-sp-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 5px; font-size: var(--wd-fs-small); }
.wd-sp-label { color: var(--wd-text-muted); font-size: var(--wd-fs-xs); min-width: 70px; }
.wd-sp-status { padding: 2px 8px; border-radius: 10px; font-size: var(--wd-fs-xs); font-weight: 600; color: #fff; }
.wd-sp-online   { background: var(--wd-ok); }
.wd-sp-warning  { background: var(--wd-warn); }
.wd-sp-critical { background: var(--wd-crit); }
.wd-sp-offline  { background: #9e9e9e; }

/* ── Map placeholder ─────────────────────────────────────────────────────── */
.wd-map-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 200px; color: #bbb; gap: 8px;
}

/* ── Misc ──────────────────────────────────────────────────────────────────── */
a { color: inherit; }

/* ═══════════════════════════════════════════════════════════════════════════
   SVG FLOOR PLAN EDITOR — full-popup 3-column layout
   ═══════════════════════════════════════════════════════════════════════ */

.svge-root {
    display: flex; flex-direction: column;
    height: 100%; overflow: hidden; gap: 0;
}

/* Toolbar */
.svge-toolbar {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--wd-surface); border-bottom: 1px solid var(--wd-border);
}
.svge-toolbar-hint {
    font-size: var(--wd-fs-xs); color: var(--wd-text-muted); margin-left: 4px;
}

/* 3-column body */
.svge-body {
    display: flex; flex: 1; overflow: hidden; min-height: 0;
}

/* ── Column 1: Sensor list ─────────────────────────────────────── */
.svge-col-list {
    width: 230px; min-width: 200px; flex-shrink: 0;
    display: flex; flex-direction: column;
    border-right: 1px solid var(--wd-border); background: #fff; overflow: hidden;
}
.svge-col-title {
    padding: 8px 10px 4px;
    font-size: var(--wd-fs-small); font-weight: 700; color: var(--wd-text-muted);
    text-transform: uppercase; letter-spacing: .07em; flex-shrink: 0;
    border-bottom: 1px solid var(--wd-border);
}
.svge-search-wrap { padding: 6px 8px; flex-shrink: 0; }
.svge-search {
    width: 100%; padding: 4px 8px; font-size: var(--wd-fs-xs); border-radius: 5px;
    border: 1px solid var(--wd-border); outline: none; font-family: inherit;
}
.svge-search:focus { border-color: var(--wd-accent); }
.svge-sensor-items { flex: 1; overflow-y: auto; }

.svge-sensor-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    cursor: grab; border-bottom: 1px solid #f2f2f2; font-size: var(--wd-fs-small);
    user-select: none; transition: background .1s; position: relative;
}
.svge-sensor-item:hover { background: #f0f4ff; }
.svge-sensor-item.svge-placed { background: #e8f5e9; }
.svge-sensor-item.svge-selected { background: #bbdefb; font-weight: 600; box-shadow: inset 3px 0 0 #1976d2; }
.svge-sensor-item.svge-placed::after {
    content: '✓'; position: absolute; right: 8px;
    font-size: 10px; color: var(--wd-ok); font-weight: 700;
}
.svge-sensor-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.svge-sensor-name  { font-size: var(--wd-fs-small); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svge-sensor-meta  { font-size: var(--wd-fs-xs); color: #aaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svge-sensor-info  { min-width: 0; }

/* ── Column 2: SVG canvas ──────────────────────────────────────── */
.svge-col-canvas {
    flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    background: #f0f0f0; border-right: 1px solid var(--wd-border);
}
.svge-canvas-hint {
    padding: 4px 10px; font-size: var(--wd-fs-xs); color: var(--wd-text-muted);
    background: #fffde7; border-bottom: 1px solid #fff9c4; flex-shrink: 0;
}
.svge-canvas-scroll { flex: 1; overflow: auto; }
.svge-canvas {
    position: relative; display: inline-block; min-width: 100%; min-height: 280px;
}
.svge-canvas svg {
    display: block; width: 100%; height: auto;
    pointer-events: none; user-select: none;
}
.svge-canvas.svge-drop-active { outline: 3px dashed var(--wd-accent); outline-offset: -3px; }
.svge-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 300px; gap: 10px; color: #ccc; font-size: var(--wd-fs-small);
}

/* ── Column 3: Properties panel ────────────────────────────────── */
.svge-col-props {
    width: 260px; min-width: 230px; flex-shrink: 0;
    display: flex; flex-direction: column; background: #fff; overflow-y: auto;
}
.svge-props-empty {
    padding: 28px 12px; color: #bbb; font-size: var(--wd-fs-xs); text-align: center;
}
.svge-props-empty i { font-size: 26px; display: block; margin-bottom: 8px; }
.svge-props-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.svge-prop-label {
    display: block; font-size: var(--wd-fs-xs); font-weight: 600; color: var(--wd-text-muted); margin-bottom: 3px;
}
.svge-input {
    width: 100%; padding: 4px 8px; font-size: var(--wd-fs-xs); border-radius: 5px;
    border: 1px solid var(--wd-border); outline: none; font-family: inherit;
    box-sizing: border-box;
}
.svge-input:focus { border-color: var(--wd-accent); }
textarea.svge-input { resize: vertical; min-height: 50px; }

/* Shape picker */
.svge-shape-picker { display: flex; gap: 6px; }
.svge-shape-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px 2px; border: 2px solid var(--wd-border); border-radius: 6px;
    background: var(--wd-surface); cursor: pointer; font-size: var(--wd-fs-xs);
    color: var(--wd-text-muted); transition: all .15s;
}
.svge-shape-btn:hover { border-color: var(--wd-accent); background: #e3f2fd; }
.svge-shape-btn.active { border-color: var(--wd-primary); background: #e3f2fd; color: var(--wd-primary); font-weight: 600; }
.svge-shape-icon { width: 18px; height: 18px; background: currentColor; }
.svge-shape-icon.si-circle   { border-radius: 50%; }
.svge-shape-icon.si-rect     { border-radius: 2px; }
.svge-shape-icon.si-triangle { clip-path: polygon(50% 0%,0% 100%,100% 100%); border-radius: 0; }

/* Color row */
.svge-color-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.svge-color-row label { font-size: var(--wd-fs-xs); display: flex; align-items: center; gap: 4px; cursor: pointer; }
input[type=color].svge-color-input {
    width: 32px; height: 24px; padding: 0 1px; border: 1px solid var(--wd-border);
    border-radius: 4px; cursor: pointer;
}

/* Size slider */
.svge-size-row { display: flex; align-items: center; gap: 8px; }
.svge-size-row input[type=range] { flex: 1; }
.svge-size-val { font-size: var(--wd-fs-xs); color: var(--wd-text-muted); min-width: 30px; text-align: right; }

/* Checkbox */
.svge-check { display: flex; align-items: center; gap: 6px; font-size: var(--wd-fs-xs); cursor: pointer; }
.svge-check input { width: 14px; height: 14px; cursor: pointer; }

/* Props action buttons */
.svge-props-actions { padding: 0 12px 12px; display: flex; gap: 6px; }
.svge-props-actions .wd-btn { flex: 1; justify-content: center; font-size: var(--wd-fs-xs); }

/* Sensor header in props */
.svge-props-sensor-hdr {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-bottom: 1px solid var(--wd-border);
    font-size: var(--wd-fs-small); font-weight: 600;
}

/* Footer */
.svge-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border-top: 1px solid var(--wd-border);
    background: var(--wd-surface); flex-shrink: 0; gap: 8px;
}
.svge-placed-count { font-size: var(--wd-fs-xs); color: var(--wd-text-muted); }

/* ── Sensor markers on canvas ──────────────────────────────────── */
.svge-marker {
    position: absolute;
    cursor: move;
    transform: translate(-50%, -50%);
    border: 2.5px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
    z-index: 20;
    transition: box-shadow .15s;
}
.svge-marker:hover,
.svge-marker.svge-sel {
    box-shadow: 0 0 0 3px rgba(21,101,192,.45), 0 2px 6px rgba(0,0,0,.3);
    z-index: 30;
}
.svge-marker.svge-dragging { opacity: .7; z-index: 40; cursor: grabbing; }
/* shape variants */
.svge-marker.shape-circle   { border-radius: 50%; }
.svge-marker.shape-rect     { border-radius: 3px; }
.svge-marker.shape-triangle {
    clip-path: polygon(50% 0%,0% 100%,100% 100%);
    border-radius: 0; border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.svge-marker.shape-triangle.svge-sel,
.svge-marker.shape-triangle:hover {
    box-shadow: 0 0 0 3px rgba(21,101,192,.45), 0 2px 6px rgba(0,0,0,.3);
}

/* Label tooltip above marker */
.svge-marker-label {
    position: absolute;
    bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.78); color: #fff;
    padding: 2px 7px; border-radius: 4px;
    font-size: var(--wd-fs-xs); white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .18s;
}
.svge-marker:hover .svge-marker-label { opacity: 1; }
/* viewer-mode markers are not draggable */
.svge-marker.view-mode { cursor: default; }
.svge-marker.view-mode.clickable { cursor: pointer; }

/* ── Editor-specific marker classes ───────────────────────────────── */
/* Marker in editor mode — inner shape div carries the actual colour/size */
.svge-marker-editor { cursor: grab; }
.svge-marker-editor:active { cursor: grabbing; }
/* Selected state (editor) */
.svge-marker-selected,
.svge-marker-editor.svge-marker-selected {
    box-shadow: 0 0 0 3px rgba(21,101,192,.55), 0 2px 6px rgba(0,0,0,.3);
    z-index: 30;
}
.svge-marker-editor.svge-marker-selected .svge-marker-label { opacity: 1; }

/* ── SVG wrapper inside canvas ────────────────────────────────────── */
.svge-svg-wrap {
    position: relative;
    width: 100%;
}

/* ── Drag-over highlight ──────────────────────────────────────────── */
.svge-canvas.svge-canvas-drag {
    outline: 3px dashed var(--wd-accent);
    outline-offset: -3px;
}

/* ── Sensor list panel items ──────────────────────────────────────── */
.svge-list-header {
    padding: 8px 10px 6px;
    font-size: var(--wd-fs-xs); font-weight: 700; color: #888;
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.svge-list-body {
    flex: 1; overflow-y: auto;
}
.svge-list-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px;
    cursor: grab; font-size: var(--wd-fs-xs);
    border-bottom: 1px solid #f4f4f4;
    transition: background .12s;
}
.svge-list-item:hover { background: #f0f4ff; }
.svge-list-item.svge-list-item-placed { background: #f0fdf4; }
.svge-list-item.svge-list-item-placed:hover { background: #dcfce7; }

/* ── Props panel header ───────────────────────────────────────────── */
.svge-props-header {
    padding: 10px 12px 8px;
    border-bottom: 1px solid #eee;
    font-size: var(--wd-fs-small);
    flex-shrink: 0;
}

/* ── Toolbar filename badge ───────────────────────────────────────── */
.svge-filename {
    font-size: var(--wd-fs-xs); color: #555;
    padding: 0 6px;
    max-width: 200px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}