/* Illustrator-style DARK editor shell — shared by BOTH visu editors (Phase 0).
 *
 * A page opts in by wrapping its editor in <div class="visu-ill-shell">. This file
 * styles ONLY the layout REGIONS + dark chrome skin; each editor keeps its own
 * widget-internal rules in its scoped .razor.css. Every selector is namespaced
 * under .visu-ill-shell so nothing leaks into the rest of the (light) app.
 *
 * Colours come exclusively from the --editor-chrome-* token group
 * (design-tokens/tokens.json → tokens.generated.css). No hard-coded hex.
 * Visu ELEMENT colours (pipe/puffer ramps, fill/stroke) stay literal on the
 * canvas (data-encoding carve-out) — this file never touches them.
 */

/* ── Shell grid: topbar / (rail · canvas · dock) / status ── */
.visu-ill-shell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "topbar topbar topbar"
        "rail   canvas dock"
        "status status status";
    height: calc(100vh - var(--topbar-height, 56px));
    min-height: 32rem;
    background: var(--editor-chrome-bg);
    color: var(--editor-chrome-text);
    font-size: var(--font-size-sm);
    overflow: hidden;
}

/* ── Top control bar ── */
.visu-ill-shell .vis-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-2) var(--space-3);
    background: var(--editor-chrome-rail);
    border-bottom: 1px solid var(--editor-chrome-border);
}
.visu-ill-shell .vis-topbar .vis-topbar-group {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding-right: var(--space-2);
    border-right: 1px solid var(--editor-chrome-border);
}
.visu-ill-shell .vis-topbar .vis-topbar-group:last-child { border-right: none; }
.visu-ill-shell .vis-topbar-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 var(--space-2) 0 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    color: var(--editor-chrome-text);
}

/* ── Left tool rail ── */
.visu-ill-shell .vis-rail {
    grid-area: rail;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-1);
    background: var(--editor-chrome-rail);
    border-right: 1px solid var(--editor-chrome-border);
    overflow-y: auto;
}
.visu-ill-shell .vis-rail-sep {
    height: 1px;
    margin: var(--space-1) var(--space-1);
    background: var(--editor-chrome-border);
}
.visu-ill-shell .vis-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--editor-chrome-text-muted);
    cursor: pointer;
    transition: background var(--duration-fast, 120ms) var(--ease-out, ease),
                color var(--duration-fast, 120ms) var(--ease-out, ease);
}
.visu-ill-shell .vis-tool:hover {
    background: var(--editor-chrome-raised);
    color: var(--editor-chrome-text);
}
.visu-ill-shell .vis-tool.is-active {
    background: var(--editor-chrome-active);
    border-color: var(--editor-chrome-accent);
    color: var(--editor-chrome-text);
}
.visu-ill-shell .vis-tool svg { width: 1.25rem; height: 1.25rem; }

/* ── Canvas workspace (rulers + scroll) ── */
.visu-ill-shell .vis-canvas {
    grid-area: canvas;
    display: grid;
    grid-template-columns: var(--vis-ruler-size, 20px) 1fr;
    grid-template-rows: var(--vis-ruler-size, 20px) 1fr;
    grid-template-areas:
        "corner ruler-h"
        "ruler-v scroll";
    min-width: 0;
    min-height: 0;
    background: var(--editor-chrome-bg);
}
.visu-ill-shell .vis-ruler-corner {
    grid-area: corner;
    background: var(--editor-chrome-ruler-bg);
    border-right: 1px solid var(--editor-chrome-border);
    border-bottom: 1px solid var(--editor-chrome-border);
}
.visu-ill-shell .vis-ruler-h {
    grid-area: ruler-h;
    background: var(--editor-chrome-ruler-bg);
    border-bottom: 1px solid var(--editor-chrome-border);
    overflow: hidden;
}
.visu-ill-shell .vis-ruler-v {
    grid-area: ruler-v;
    background: var(--editor-chrome-ruler-bg);
    border-right: 1px solid var(--editor-chrome-border);
    overflow: hidden;
}
.visu-ill-shell .vis-canvas-scroll {
    grid-area: scroll;
    overflow: auto;
    background: var(--editor-chrome-bg);
    /* the artboard (the actual <canvas>) sits inside, centred with margin */
    display: block;
    position: relative;
}
.visu-ill-shell .vis-canvas-scroll canvas { background: var(--surface-card); }
/* Fabric web editor: it renders TWO stacked canvases (lower = drawing, upper = interaction on
   top), both created in JS so they carry no Blazor scope attribute — a scoped .razor.css rule
   can't reach them. The rule above (dark after the --surface-card re-alias) gave the transparent
   UPPER canvas an opaque dark background that COVERED the drawing → "nothing on the artboard".
   Keep the Fabric canvases transparent so the lower canvas's own white artboard + content show.
   Non-scoped here (this file), specific enough to win over the rule above. */
.visu-editor-web.visu-ill-shell .vis-canvas-scroll canvas { background: transparent; }
/* When rulers are hidden, collapse the ruler tracks. */
.visu-ill-shell .vis-canvas[data-rulers="off"] {
    grid-template-columns: 0 1fr;
    grid-template-rows: 0 1fr;
}

/* ── Right panel dock ── */
.visu-ill-shell .vis-dock {
    grid-area: dock;
    width: var(--vis-dock-width, 300px);
    display: flex;
    flex-direction: column;
    background: var(--editor-chrome-panel);
    border-left: 1px solid var(--editor-chrome-border);
    overflow-y: auto;
}
.visu-ill-shell .vis-panel {
    border-bottom: 1px solid var(--editor-chrome-border);
}
.visu-ill-shell .vis-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--editor-chrome-rail);
    color: var(--editor-chrome-text);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    user-select: none;
}
.visu-ill-shell .vis-panel-head:hover { background: var(--editor-chrome-raised); }
.visu-ill-shell .vis-panel-body {
    padding: var(--space-2) var(--space-3);
    color: var(--editor-chrome-text);
}
.visu-ill-shell .vis-panel[data-collapsed="true"] .vis-panel-body { display: none; }
.visu-ill-shell .vis-panel-caret { color: var(--editor-chrome-text-muted); transition: transform var(--duration-fast, 120ms); }
.visu-ill-shell .vis-panel[data-collapsed="true"] .vis-panel-caret { transform: rotate(-90deg); }

/* Layers panel rows */
.visu-ill-shell .vis-layer-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--editor-chrome-text);
    cursor: pointer;
}
.visu-ill-shell .vis-layer-row:hover { background: var(--editor-chrome-raised); }
.visu-ill-shell .vis-layer-row.is-active { background: var(--editor-chrome-active); }
.visu-ill-shell .vis-layer-row[data-depth="1"] { padding-left: var(--space-4); }
.visu-ill-shell .vis-layer-row .vis-layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visu-ill-shell .vis-layer-row .vis-layer-toggle {
    background: none;
    border: none;
    color: var(--editor-chrome-text-muted);
    cursor: pointer;
    padding: 0 var(--space-1);
}
.visu-ill-shell .vis-layer-row .vis-layer-toggle:hover { color: var(--editor-chrome-text); }
.visu-ill-shell .vis-layer-row[data-hidden="true"] .vis-layer-name { opacity: 0.5; }

/* ── Bottom status bar ── */
.visu-ill-shell .vis-status {
    grid-area: status;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) var(--space-3);
    background: var(--editor-chrome-rail);
    border-top: 1px solid var(--editor-chrome-border);
    color: var(--editor-chrome-text-muted);
    font-size: var(--font-size-xs);
}
.visu-ill-shell .vis-status .vis-status-zoom { color: var(--editor-chrome-text); font-variant-numeric: tabular-nums; }
.visu-ill-shell .vis-status .vis-status-spacer { flex: 1; }

/* ── Shared control skin (buttons/selects/inputs inside the shell chrome) ── */
.visu-ill-shell .vis-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--editor-chrome-border);
    border-radius: var(--radius);
    background: var(--editor-chrome-raised);
    color: var(--editor-chrome-text);
    cursor: pointer;
}
.visu-ill-shell .vis-btn:hover { background: var(--editor-chrome-active); border-color: var(--editor-chrome-border-strong); }
.visu-ill-shell .vis-btn.is-primary { background: var(--editor-chrome-accent); border-color: var(--editor-chrome-accent); color: var(--editor-chrome-accent-text); }
.visu-ill-shell .vis-select,
.visu-ill-shell .vis-input {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--editor-chrome-border);
    border-radius: var(--radius);
    background: var(--editor-chrome-bg);
    color: var(--editor-chrome-text);
}
.visu-ill-shell .vis-input:focus,
.visu-ill-shell .vis-select:focus { outline: none; border-color: var(--editor-chrome-accent); }

/* ── Canvas hover tooltip (value-label full name) ──
 * NOT namespaced under .visu-ill-shell: the editor appends this to <body> (position:fixed)
 * so the canvas scroll area can't clip it. Colours from the same --editor-chrome-* group. */
.visu-editor-hover-tip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    max-width: 22rem;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--editor-chrome-border-strong);
    border-radius: var(--radius);
    background: var(--editor-chrome-panel);
    color: var(--editor-chrome-text);
    font-size: var(--font-size-xs);
    line-height: 1.3;
    box-shadow: var(--shadow-lg);
    white-space: normal;
}