/* ============================================================
   ECU Viewer — enhanced dark theme (Pass 2, increment 5)
   Loaded AFTER /styles/ecuviewer.css and the inline <style> in
   index.php, so it wins the cascade for the few overrides it makes.
   Purely additive styling — no markup or behaviour changes.

   Tokens borrowed from your existing CSS:
     bg #000 · cards #1a1a1a · inner #111 · accent #00e5ff
     muted #999 · borders #2a2a2a/#333
   ============================================================ */

/* ---- subtle hover glow on the viewer's action buttons ---- */
.tool-button { transition: background .25s, transform .1s, box-shadow .2s, opacity .2s; }
.tool-button:hover { box-shadow: 0 0 10px rgba(0, 229, 255, 0.30); }

/* ---- action-button icons (inline SVG, no dependencies) ----
   Project buttons sit on coloured variant backgrounds with white
   text, so their glyphs are white. The diff toggle is a dark pill,
   so its glyph is cyan. */
#btn-save-project::before,
#btn-my-projects::before,
#btn-share-project::before,
#ecu-diff-toggle::before {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 7px;
  vertical-align: -2px;
  background: no-repeat center / contain;
}

/* save / download tray (white) */
#btn-save-project::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203v12'/%3E%3Cpath%20d='M7%2011l5%205%205-5'/%3E%3Cpath%20d='M5%2021h14'/%3E%3C/svg%3E");
}
/* folder (white) */
#btn-my-projects::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%208a2%202%200%200%201%202-2h4l2%202h8a2%202%200%200%201%202%202v7a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z'/%3E%3C/svg%3E");
}
/* share nodes (white) */
#btn-share-project::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='6'%20cy='12'%20r='2.5'/%3E%3Ccircle%20cx='18'%20cy='6'%20r='2.5'/%3E%3Ccircle%20cx='18'%20cy='18'%20r='2.5'/%3E%3Cpath%20d='M8.3%2011l7.4-3.8M8.3%2013l7.4%203.8'/%3E%3C/svg%3E");
}
/* diff columns (cyan) */
#ecu-diff-toggle::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2300e5ff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='8'%20height='16'%20rx='1'/%3E%3Crect%20x='13'%20y='4'%20width='8'%20height='16'%20rx='1'/%3E%3C/svg%3E");
}

/* ---- diff toolbar ---- */
#ecu-diff-bar {
  border-top: 1px solid #2a2a2a;
  padding-top: 10px;
}
#ecu-diff-bar .tool-button {
  background: #111;
  color: #00e5ff;
  border: 1px solid rgba(0, 229, 255, 0.35);
  box-shadow: none;
}
#ecu-diff-bar .tool-button:hover {
  background: #15212a;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
  opacity: 1;
}
#ecu-diff-bar .tool-button:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
  background: #111;
}
#ecu-diff-toggle.active {
  background: #00e5ff;
  color: #001018;
  border-color: #00e5ff;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}
#ecu-diff-toggle.active::before {
  /* swap to dark glyph on the lit pill */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23001018'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='8'%20height='16'%20rx='1'/%3E%3Crect%20x='13'%20y='4'%20width='8'%20height='16'%20rx='1'/%3E%3C/svg%3E");
}
#ecu-diff-status { color: #9fb6c2; }

/* ---- project status line ---- */
#project-status .ecu-ok   { color: #2ec27e; }
#project-status .ecu-warn { color: #ffcc66; }
#project-status a { color: #00e5ff; }

/* ---- projects modal: retheme to black/cyan ---- */
.ecu-modal { background: rgba(0, 0, 0, 0.7); }
.ecu-modal-card {
  background: #1a1a1a;
  color: #e0e0e0;
  border: 1px solid #2a2a2a;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.ecu-modal-head {
  color: #00e5ff;
  border-bottom: 1px solid #2a2a2a;
}
.ecu-modal-x { color: #00e5ff; }
.ecu-proj { border-bottom: 1px solid #222; }
.ecu-proj-name { color: #fff; }
.ecu-proj-meta { color: #999; }
.ecu-empty { color: #999; }

/* ---- resize affordance on the 2D plot ----
   #canvas-container is position:relative in your CSS, so a corner
   grip sits over the native resizer without scrolling. */
#canvas-container::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 12px;
  height: 12px;
  pointer-events: none;
  opacity: 0.65;
  background:
    linear-gradient(135deg,
      transparent 0 45%,
      rgba(0, 229, 255, 0.8) 45% 55%,
      transparent 55% 70%,
      rgba(0, 229, 255, 0.8) 70% 80%,
      transparent 80%);
}

/* ---- horizontal split (viewer-split.js) ---- */
.ecu-split {
  display: flex;
  align-items: flex-start;
  margin: 0 15px;
}
.ecu-split > .rounded-box {
  margin-left: 0;
  margin-right: 0;
  min-width: 280px;
}
.ecu-split.stacked {
  flex-direction: column;
}
.ecu-split.stacked > .rounded-box {
  width: 100%;
  min-width: 0;
}
.ecu-split-divider {
  flex: 0 0 14px;
  align-self: stretch;
  min-height: 120px;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.ecu-split-divider span {
  width: 4px;
  height: 46px;
  border-radius: 3px;
  background: #2a2a2a;
  box-shadow: 0 0 0 1px #000 inset;
  transition: background .2s, box-shadow .2s;
}
.ecu-split-divider:hover span {
  background: #00e5ff;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}
.ecu-split.stacked .ecu-split-divider {
  display: none;
}