:root {
  --bg: #12161b;
  --panel: #181d24;
  --panel-2: #1f262f;
  --line: #2b3440;
  --text: #e6e9ee;
  --muted: #8b95a3;
  --accent: #f5b83d;
  --ok: #3fbf7f;
  --info: #5aa9e6;
  --warn: #f0a63a;
  --error: #ef5350;

  --leg-A: #0b0b0b;
  --leg-A-edge: #c9cfd8;
  --leg-B: #e5372b;
  --leg-C: #2f7de1;
  --leg-N: #f2f2f2;

  --cat-source: #f5b83d;
  --cat-distro: #a77bf2;
  --cat-led: #4fd1c5;
  --cat-tungsten: #ff8a3d;
  --cat-hmi: #8fb8ff;
  --cat-fluor: #b9e769;
  --cat-fx: #f06fa8;
  --cat-other: #9aa5b1;
  --cat-cable: #c3c9d1;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
button {
  font: inherit;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}
button:hover { border-color: #46515f; background: #252d38; }
button.primary { background: var(--accent); color: #1a1408; border-color: var(--accent); font-weight: 600; }
button.primary:hover { filter: brightness(1.08); }
button.danger:hover { border-color: var(--error); color: var(--error); }
button.small { padding: 2px 8px; font-size: 12px; }
button:disabled { opacity: .4; cursor: default; }
input, select {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  width: 100%;
}
input:focus, select:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
kbd {
  font: 11px ui-monospace, monospace;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 4px;
  margin: 0 1px;
  background: var(--panel-2);
}

/* ---------- top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 { font-size: 15px; margin: 0; letter-spacing: .2px; }
.brand p { margin: 0; color: var(--muted); font-size: 12px; }
.logo {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 8px; background: #2a2210; font-size: 18px;
}
.toolbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ordersel { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.ordersel select { width: auto; padding: 4px 6px; }
.plan { border-color: var(--accent); }
.plan ol { margin: 8px 0 0; padding-left: 20px; font-size: 12px; }
.plan li { margin: 4px 0; cursor: pointer; }
.plan li:hover { color: var(--accent); }
.sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }

/* ---------- layout */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 270px 1fr 380px;
  min-height: 0;
}
.palette, .panel {
  background: var(--panel);
  overflow-y: auto;
  min-height: 0;
}
.palette { border-right: 1px solid var(--line); padding: 10px; }
.panel { border-left: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.hint { color: var(--muted); font-size: 12px; margin: 8px 2px 10px; }
.muted { color: var(--muted); }

/* ---------- catalogue */
.cat { margin-bottom: 6px; }
.cat summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #c4cad3;
}
.cat summary::-webkit-details-marker { display: none; }
.cat summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
.cat[open] summary::before { transform: rotate(90deg); }
.cat summary .count { margin-left: auto; color: var(--muted); font-weight: 400; }
.cat-dot { width: 8px; height: 8px; border-radius: 2px; }
.item {
  display: block;
  padding: 6px 8px 6px 10px;
  margin: 2px 0;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid transparent;
  border-left: 3px solid var(--c, var(--muted));
  cursor: grab;
  user-select: none;
}
.item:hover { border-color: var(--line); border-left-color: var(--c); background: #252d38; }
.item:active { cursor: grabbing; }
.item .nm { font-weight: 500; }
.item .sp { color: var(--muted); font-size: 11.5px; }

/* ---------- cable sizing & line loss */
.rec { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: #12171d; border-left: 3px solid var(--muted); font-size: 12.5px; }
.rec.ok { border-left-color: var(--ok); }
.rec.info { border-left-color: var(--info, #6aa9ff); }
.rec.warn { border-left-color: var(--warn); }
.rec.error { border-left-color: var(--error); }
.rec .muted { font-size: 11.5px; margin-top: 3px; }
.rec button { margin-top: 8px; }
.cables .row { flex-wrap: wrap; align-items: center; gap: 6px; }
table.runs { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
table.runs th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11px; padding: 4px 2px; border-bottom: 1px solid var(--line); }
table.runs td { padding: 5px 2px; border-bottom: 1px solid #232b35; vertical-align: top; }
table.runs tr[data-select] { cursor: pointer; }
table.runs tr[data-select]:hover td { background: #1c232c; }
table.runs .n { text-align: right; white-space: nowrap; }
table.runs .muted { font-size: 11px; }
table.runs .pill { white-space: nowrap; }
button:disabled { opacity: .45; cursor: default; }

/* ---------- bulb switches on multi-lamp fixtures */
.lamps { display: grid; grid-template-columns: repeat(var(--cols, 3), 38px); gap: 6px; margin: 4px 0 8px; }
.lamp {
  width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 12px; font-weight: 600;
  background: #12171d; color: var(--muted); border: 1px dashed #3b4757;
}
.lamp.on { background: radial-gradient(circle at 40% 35%, #fff3c4, #f5b83d 60%, #b5791a); color: #1a1408; border: 1px solid #f5b83d; box-shadow: 0 0 10px rgba(245,184,61,.45); }
.lampquick { gap: 6px; }

/* ---------- select several */
.palhead { display: flex; gap: 6px; }
.palhead input { flex: 1; min-width: 0; }
.palhead button { flex: 0 0 auto; white-space: nowrap; }
#btnPick.on { background: var(--accent); color: #1a1408; border-color: var(--accent); font-weight: 600; }
.item { display: flex; align-items: center; gap: 8px; }
.item .txt { flex: 1; min-width: 0; }
.item .qty { display: none; align-items: center; gap: 2px; flex: 0 0 auto; }
.item .qty b { min-width: 22px; text-align: center; font-size: 14px; }
.item .qty button { width: 30px; height: 30px; padding: 0; font-size: 17px; line-height: 1; border-radius: 6px; }
body.picking .item { cursor: pointer; }
body.picking .item.picked { background: #2c2a1f; border-color: var(--accent); border-left-color: var(--c); }
body.picking .item.picked .qty { display: flex; }
.tray {
  display: none; position: sticky; bottom: -10px; margin: 8px -10px -10px; padding: 10px;
  background: var(--panel); border-top: 1px solid var(--accent); box-shadow: 0 -6px 16px rgba(0,0,0,.35);
}
.tray.show { display: block; }
.trayrow { display: flex; align-items: center; gap: 8px; }
.trayrow + .trayrow { margin-top: 8px; }
.trayrow button:not(.small) { flex: 1; padding: 9px 10px; }
#pickSum { flex: 1; min-width: 0; font-size: 13px; }
#pickSum small { display: block; color: var(--muted); font-size: 11.5px; }
.tray button:disabled { opacity: .45; cursor: default; }

/* ---------- canvas */
.stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#canvas { width: 100%; height: 100%; display: block; background: #161b21; cursor: default; outline: none; touch-action: none; }
#canvas.panning { cursor: grabbing; }
.gridline { stroke: #20262e; stroke-width: 1; }

.node { cursor: grab; }
.node.dragging { cursor: grabbing; opacity: .9; }
.node .body { fill: var(--panel-2); stroke: #36404d; stroke-width: 1.2; }
.node.selected:not(.legged) .body { stroke: var(--accent); stroke-width: 2; }
.node.legged .body { stroke-width: 3.5; }
.node .leg-casing { fill: none; stroke: #c9cfd8; stroke-width: 6; opacity: .55; }
.node .leg-tint { opacity: .09; pointer-events: none; stroke: none; }
.node .sel-ring { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 6 4; }
.node.cat-cable .body { fill: #1a2027; }
.node.drop-target .body { stroke: var(--ok); stroke-width: 2.5; stroke-dasharray: 5 3; }
.node.off .body { fill: #171b20; }
.node.off text { opacity: .55; }
.node.unpowered .body { stroke-dasharray: 4 3; }
.node .stripe { fill: var(--c); }
.node .title { fill: var(--text); font-size: 12.5px; font-weight: 600; }
.node .sub { fill: var(--muted); font-size: 11px; }
.node .sub.hot { fill: var(--text); }
.node .flag { font-size: 11px; font-weight: 700; }
.node .flag-error circle { fill: var(--error); }
.node .flag-warn circle { fill: var(--warn); }
.node .flag text { fill: #111; text-anchor: middle; }
.node .lock { fill: var(--muted); font-size: 11px; }
.legdot { stroke-width: 1.5; cursor: pointer; }
.legdot.fixed { cursor: default; }
.legdot.leg-A { fill: var(--leg-A); stroke: var(--leg-A-edge); }
.legdot.leg-B { fill: var(--leg-B); stroke: #ffb3ad; }
.legdot.leg-C { fill: var(--leg-C); stroke: #a9cbff; }
.legdot:not(.fixed):hover { stroke: var(--accent); stroke-width: 2.5; }
.minibar-bg { fill: #10141a; }
.minibar.leg-A { fill: #3b3f45; stroke: var(--leg-A-edge); stroke-width: .6; }
.minibar.leg-B { fill: var(--leg-B); }
.minibar.leg-C { fill: var(--leg-C); }
.minibar.over { fill: var(--error) !important; }
.minilabel { fill: var(--muted); font-size: 10px; }

.link-casing { stroke: #3a4452; stroke-linecap: round; fill: none; }
.link { stroke-width: 2.6; fill: none; stroke-linecap: round; }
.link.leg-A { stroke: var(--leg-A); }
.link.leg-B { stroke: var(--leg-B); }
.link.leg-C { stroke: var(--leg-C); }
.link.dead { stroke: #555; stroke-dasharray: 5 4; }
.link-label { fill: var(--muted); font-size: 10px; text-anchor: middle; paint-order: stroke; stroke: #161b21; stroke-width: 3px; }
.link-label.over { fill: var(--error); font-weight: 700; }

.legend {
  position: absolute; left: 12px; bottom: 12px;
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  background: rgba(24, 29, 36, .92); border: 1px solid var(--line);
  padding: 6px 10px; border-radius: 8px; font-size: 12px;
}
.legend span { display: flex; align-items: center; gap: 5px; }
.chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.chip.leg-A { background: var(--leg-A); box-shadow: 0 0 0 1px var(--leg-A-edge); }
.chip.leg-B { background: var(--leg-B); }
.chip.leg-C { background: var(--leg-C); }
.chip.leg-N { background: var(--leg-N); }
.kbd-hint {
  position: absolute; right: 12px; top: 12px; color: var(--muted); font-size: 11.5px;
  background: rgba(24, 29, 36, .85); padding: 5px 8px; border-radius: 6px;
}
.empty {
  position: absolute; inset: 0; display: none; place-content: center; text-align: center;
  pointer-events: none; color: var(--muted);
}
.empty.show { display: grid; }
.empty h2 { color: var(--text); margin: 0 0 6px; font-size: 18px; }
.empty p { margin: 0 0 14px; }
.empty button { pointer-events: auto; justify-self: center; }
.drop-hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: var(--ok); color: #08200f; font-weight: 600; padding: 5px 12px; border-radius: 20px;
  display: none; pointer-events: none;
}
.drop-hint.show { display: block; }

/* ---------- right panel cards */
.card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.card h3 { margin: 0; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.card h4 { margin: 12px 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 600; }
.card .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.section-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); margin: 4px 2px 0; font-weight: 600; }

.legrow { display: grid; grid-template-columns: 54px 1fr 92px; align-items: center; gap: 8px; margin: 6px 0; }
.legrow .lbl { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; }
.legrow .val { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
.legrow .val small { display: block; color: var(--muted); font-size: 11px; }
.legrow .val small.def { color: var(--warn); }
.legrow .val small.sur { color: var(--info); }
.bar { position: relative; height: 14px; background: #10141a; border-radius: 4px; overflow: visible; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; max-width: 100%; }
.bar .fill.leg-A { background: #3b3f45; box-shadow: inset 0 0 0 1px var(--leg-A-edge); }
.bar .fill.leg-B { background: var(--leg-B); }
.bar .fill.leg-C { background: var(--leg-C); }
.bar .fill.leg-N { background: #cfd3d8; }
.bar .fill.over { background: repeating-linear-gradient(45deg, var(--error), var(--error) 5px, #b53532 5px, #b53532 10px); }
.bar .mark80 { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--warn); opacity: .7; }
.bar .markavg { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed var(--accent); }

.balance {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 8px;
  border-radius: 6px; background: #12171d; font-size: 12px;
}
.pill { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: .4px; }
.pill.ok { background: rgba(63, 191, 127, .18); color: var(--ok); }
.pill.info { background: rgba(90, 169, 230, .18); color: var(--info); }
.pill.warn { background: rgba(240, 166, 58, .18); color: var(--warn); }
.pill.error { background: rgba(239, 83, 80, .2); color: var(--error); }

.sugg { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12px; }
.sugg:first-of-type { border-top: 0; }
.sugg .txt { flex: 1; }
.sugg .txt b { font-weight: 600; }
.legtag { font-weight: 700; padding: 0 5px; border-radius: 4px; font-size: 11px; white-space: nowrap; }
.legtag.leg-A { background: var(--leg-A); color: #e8e8e8; box-shadow: inset 0 0 0 1px #777; }
.legtag.leg-B { background: var(--leg-B); color: #fff; }
.legtag.leg-C { background: var(--leg-C); color: #fff; }

.breakdown { margin-top: 8px; font-size: 12px; }
.breakdown summary { cursor: pointer; color: var(--muted); }
.breakdown table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.breakdown td { padding: 2px 4px; border-bottom: 1px solid #262e38; }
.breakdown td.n { text-align: right; font-variant-numeric: tabular-nums; }
.breakdown tr.grp td { color: var(--muted); font-weight: 600; padding-top: 8px; border-bottom-color: var(--line); }
.breakdown tr { cursor: pointer; }
.breakdown tr:hover td { background: #262e38; }

.issue {
  display: flex; gap: 8px; padding: 7px 8px; border-radius: 6px; margin: 4px 0; font-size: 12px;
  background: #12171d; border-left: 3px solid var(--muted); cursor: pointer;
}
.issue:hover { background: #1a2028; }
.issue.error { border-left-color: var(--error); }
.issue.warn { border-left-color: var(--warn); }
.issue.info { border-left-color: var(--info); }
.allgood { color: var(--ok); font-size: 12.5px; padding: 4px 2px; }

/* ---------- inspector */
.field { margin: 8px 0; }
.field label { display: block; color: var(--muted); font-size: 11.5px; margin-bottom: 3px; }
.field .row { display: flex; gap: 6px; align-items: center; }
.legbtns { display: flex; gap: 5px; flex-wrap: wrap; }
.legbtns button { padding: 4px 9px; font-weight: 600; }
.legbtns button.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.legbtns button.leg-A { background: var(--leg-A); border-color: #777; }
.legbtns button.leg-B { background: var(--leg-B); border-color: var(--leg-B); }
.legbtns button.leg-C { background: var(--leg-C); border-color: var(--leg-C); }
.legbtns button.pair { background: linear-gradient(90deg, var(--l1) 50%, var(--l2) 50%); border-color: #666; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.stat { background: #12171d; border-radius: 6px; padding: 6px 8px; }
.stat b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 11px; }
.btnrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.check { display: flex; gap: 6px; align-items: center; color: var(--text); font-size: 12.5px; }
.check input { width: auto; }
input[type=range] { padding: 0; accent-color: var(--accent); }
.note { color: var(--muted); font-size: 11.5px; margin-top: 6px; }

@media (max-width: 1100px) {
  .layout { grid-template-columns: 230px 1fr 320px; }
}

/* ---------- phones: one view at a time, switched by the bottom tab bar */
.mtabs, #btnDetails, .phone-only { display: none; }
.badge:empty { display: none; }
.badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px;
  background: var(--error); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px;
}

@media (max-width: 760px) {
  body { height: 100dvh; }
  .topbar { flex-wrap: nowrap; padding: 6px 8px; gap: 8px; }
  .brand > div { display: none; }
  .logo { width: 28px; height: 28px; font-size: 16px; flex: 0 0 auto; }
  .toolbar { flex-wrap: nowrap; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar > * { flex: 0 0 auto; white-space: nowrap; }
  .toolbar button { padding: 7px 10px; }

  .layout { display: flex; flex-direction: column; }
  .palette, .stage, .panel { display: none; flex: 1; min-height: 0; border: 0; }
  body[data-view="catalog"] .palette,
  body[data-view="canvas"] .stage { display: block; }
  body[data-view="panel"] .panel { display: flex; }

  .mtabs {
    display: flex; background: var(--panel); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mtabs button {
    flex: 1; border: 0; border-radius: 0; background: transparent; padding: 12px 0;
    font-size: 13px; font-weight: 600; color: var(--muted);
  }
  .mtabs button.on { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }

  .kbd-hint, .legend .muted, .desk-only { display: none; }
  .phone-only { display: block; }
  .legend { left: 8px; bottom: 8px; gap: 8px; font-size: 11px; padding: 4px 8px; }
  #btnDetails.show { display: block; position: absolute; right: 12px; bottom: 10px; padding: 9px 16px; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
  .drop-hint { top: 8px; max-width: calc(100% - 24px); text-align: center; }

  .item { padding: 10px 10px 10px 12px; }
  input, select { font-size: 16px; } /* stops iOS zooming into fields */
  .legrow { grid-template-columns: 50px 1fr 84px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}