/* CIE Logic Gates — logic-gates.css */

/* ── THEME VARIABLES ──────────────────────────────────────── */
:root {
  --bg-main:       #0d0d12;
  --bg-panel:      #131318;
  --bg-editor:     #0f0f15;
  --bg-sidebar:    #0a0a0f;
  --bg-hover:      #1a1a24;
  --bg-active:     #1e1e2e;
  --accent:        #67e8f9;
  --accent-dim:    rgba(103,232,249,0.15);
  --accent-glow:   rgba(103,232,249,0.15);
  --green:         #22c55e;
  --green-dim:     rgba(34,197,94,0.15);
  --red:           #f87171;
  --yellow:        #fbbf24;
  --cyan:          #67e8f9;
  --text-primary:  #e2e8f0;
  --text-secondary:#94a3b8;
  --text-muted:    #475569;
  --border:        rgba(148,163,184,0.08);
  --border-bright: rgba(103,232,249,0.2);
  --scrollbar:     rgba(0,180,200,0.2);
  --font-mono:     'JetBrains Mono','Fira Code',monospace;
  --font-ui:       'Outfit',sans-serif;
  --radius:        6px;
  --transition:    0.15s cubic-bezier(0.4,0,0.2,1);
  --wire-dead:     #0e7490;
  --wire-live:     #22c55e;
  --canvas-grid:   rgba(148,163,184,0.06);
}

body.light-mode {
  --bg-main:       #f8fafc;
  --bg-panel:      #f0f0f5;
  --bg-editor:     #ffffff;
  --bg-sidebar:    #e8e8f0;
  --bg-hover:      #e0f9fc;   /* cyan-tinted hover */
  --bg-active:     #cff3f8;
  --accent:        #0891b2;
  --accent-dim:    rgba(8,145,178,0.12);
  --accent-glow:   rgba(8,145,178,0.15);
  --green:         #15803d;
  --green-dim:     rgba(21,128,61,0.12);
  --red:           #dc2626;
  --yellow:        #b45309;
  --cyan:          #0369a1;
  --text-primary:  #1e1b2e;
  --text-secondary:#4a4a6a;
  --text-muted:    #7a7a9a;
  --border:        rgba(0,0,0,0.08);
  --border-bright: rgba(8,145,178,0.25);
  --scrollbar:     rgba(0,0,0,0.12);
  --wire-dead:     #0891b2;
  --wire-live:     #15803d;
  --canvas-grid:   rgba(0,0,50,0.05);
}

/* ── RESET ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--scrollbar); border-radius:3px; }

html,body {
  height:100%; background:var(--bg-main); color:var(--text-primary);
  font-family:var(--font-ui); overflow:hidden; font-size:14px; user-select:none;
}

/* ── TITLEBAR ─────────────────────────────────────────────── */
#titlebar {
  position:fixed; top:0; left:0; right:0; height:38px;
  background:var(--bg-sidebar); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 12px; z-index:200; gap:16px;
}
.logo {
  display:flex; align-items:center; gap:8px;
  font-weight:700; font-size:13px; color:var(--accent);
  letter-spacing:0.5px; text-decoration:none; white-space:nowrap; flex-shrink:0;
}
.logo svg { width:20px; height:20px; flex-shrink:0; }
.title-center {
  flex:1; text-align:center; font-size:12px;
  color:var(--text-muted); font-family:var(--font-mono);
}
.title-actions { display:flex; gap:6px; align-items:center; }
.title-btn {
  background:transparent; border:1px solid var(--border);
  color:var(--text-secondary); font-family:var(--font-ui);
  font-size:11px; padding:3px 10px; border-radius:var(--radius);
  cursor:pointer; transition:var(--transition);
  display:flex; align-items:center; gap:5px;
  text-decoration:none; white-space:nowrap;
}
.title-btn:hover { background:var(--bg-hover); color:var(--text-primary); border-color:var(--border-bright); }
.title-btn svg { width:12px; height:12px; }
#btn-theme { font-size:14px; padding:4px 10px; }

/* ── LAYOUT ─────────────────────────────────────────────────── */
#app { display:flex; flex-direction:column; height:100vh; padding-top:38px; }
#workspace { display:flex; flex:1; overflow:hidden; }

/* ── LEFT SIDEBAR ─────────────────────────────────────────── */
#left-sidebar {
  width:190px; flex-shrink:0; background:var(--bg-panel);
  border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden;
}
.sidebar-header {
  padding:10px 12px; font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:1.5px;
  color:var(--text-muted); border-bottom:1px solid var(--border); flex-shrink:0;
}
#component-library { flex:1; overflow-y:auto; padding:8px 6px; }
#component-library::-webkit-scrollbar { width:4px; }
#component-library::-webkit-scrollbar-thumb { background:var(--scrollbar); border-radius:2px; }

.comp-category {
  font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:1px; color:var(--accent); padding:10px 4px 4px;
}
.comp-category:first-child { padding-top:4px; }

.comp-item {
  display:flex; align-items:center; gap:8px; padding:5px 6px;
  border-radius:var(--radius); cursor:grab; transition:var(--transition);
  font-size:12px; color:var(--text-secondary);
  border:1px solid transparent; position:relative;
}
.comp-item:hover {
  background:var(--bg-hover); color:var(--text-primary); border-color:var(--border-bright);
}
/* Light mode: purple hover */
body.light-mode .comp-item:hover {
  background:rgba(8,145,178,0.12); border-color:var(--accent); color:var(--accent);
}
.comp-item:active { cursor:grabbing; }

/* ── GLOBAL TOOLTIP (JS-positioned, appended to body) ─────── */
#global-tooltip {
  display:none;
  position:fixed; z-index:9999; pointer-events:none;
  background:var(--bg-active); border:1px solid var(--border-bright);
  border-radius:var(--radius); padding:8px;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  white-space:nowrap;
}
.mini-tt { border-collapse:collapse; font-family:var(--font-mono); font-size:10px; }
.mini-tt th,.mini-tt td { padding:2px 8px; border:1px solid var(--border); text-align:center; color:var(--text-secondary); }
.mini-tt th { color:var(--accent); background:var(--bg-sidebar); font-weight:600; }
.mini-tt .tt-one  { color:var(--green); font-weight:700; }
.mini-tt .tt-zero { color:var(--text-muted); }

/* ── CENTER CANVAS ─────────────────────────────────────────── */
#canvas-wrapper {
  flex:1; overflow:scroll; background:var(--bg-main);
  position:relative;
}
#canvas-wrapper::-webkit-scrollbar { width:8px; height:8px; }
#canvas-wrapper::-webkit-scrollbar-thumb { background:var(--scrollbar); border-radius:4px; }

/* ── ZOOM CONTROLS (fixed to viewport bottom-right of canvas area) ── */
/* position:fixed keeps the buttons locked to the screen on BOTH axes.
   The `right` value is set initially here and updated via JS whenever
   the right sidebar is resized.                                        */
#zoom-controls {
  position: fixed;
  bottom: 44px;      /* 32px expression-bar + 12px gap              */
  right: 272px;      /* 260px default sidebar width + 12px gap       */
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 100;
  pointer-events: all;
}

.zoom-btn {
  width:32px; height:32px; background:var(--bg-panel);
  border:1px solid var(--border-bright); color:var(--accent);
  font-family:var(--font-mono); font-size:16px;
  border-radius:var(--radius); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition); box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.zoom-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.zoom-label { font-size:10px !important; cursor:default !important; pointer-events:none; }

/* ── SELECTION RECT ─────────────────────────────────────────── */
.sel-rect-style {
  fill:var(--accent-dim); stroke:var(--accent);
  stroke-width:1; stroke-dasharray:5 3; pointer-events:none;
}

/* ── SVG COMPONENT STYLES ─────────────────────────────────── */
.comp-group { cursor:move; }
/* Gate outlines — no fill, CSS-driven stroke color */
.comp-body {
  fill:none; stroke:var(--text-secondary); stroke-width:1.5; stroke-linejoin:round;
  transition:stroke var(--transition);
}
.comp-group:hover  .comp-body { stroke:var(--accent); }
.comp-group.selected .comp-body {
  stroke:var(--accent);
  filter:drop-shadow(0 0 6px var(--accent-glow));
}
.comp-stub { stroke:var(--text-secondary); stroke-width:1.5; stroke-linecap:round; fill:none; }
.comp-group:hover .comp-stub { stroke:var(--accent); }
.comp-fill {
  fill:var(--bg-editor); stroke:var(--text-secondary); stroke-width:1.5; stroke-linejoin:round;
  transition:fill var(--transition), stroke var(--transition);
}
.comp-group:hover  .comp-fill { stroke:var(--accent); }
.comp-group.selected .comp-fill { stroke:var(--accent); filter:drop-shadow(0 0 6px var(--accent-glow)); }

.comp-label {
  fill:var(--text-muted); font-family:var(--font-ui); font-size:10px; font-weight:600;
  pointer-events:none; dominant-baseline:central; text-anchor:middle;
}

/* ── INPUT TOGGLE ─────────────────────────────────────────── */
.input-body { stroke-width:1.5; transition:fill var(--transition),stroke var(--transition); rx:6; }
.input-body.off { fill:var(--bg-editor); stroke:var(--text-secondary); }
.input-body.on  { fill:var(--accent);    stroke:var(--accent); }

/* Label text — CSS controls fill, NO inline style override */
.input-label-text {
  fill:var(--text-primary);
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  dominant-baseline:central; text-anchor:middle; cursor:text;
}
.input-value-text {
  fill:var(--text-muted);
  font-family:var(--font-mono); font-size:14px; font-weight:700;
  dominant-baseline:central; text-anchor:middle; pointer-events:none;
}
/* When input is ON, flip both texts to white via group class */
.comp-group.input-on .input-label-text { fill:#ffffff; }
.comp-group.input-on .input-value-text  { fill:#ffffff; }

/* Inline label edit input */
.label-fo { overflow:visible; }
.label-input {
  background:var(--bg-active); border:1px solid var(--accent);
  border-radius:3px; color:var(--text-primary);
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  padding:1px 3px; outline:none; text-align:center;
  width:100%; height:100%;
}

/* ── OUTPUT BULB ──────────────────────────────────────────── */
.output-glow { transition:fill-opacity var(--transition); }
.output-body  { stroke-width:1.5; transition:fill var(--transition),stroke var(--transition); }
.output-body.off { fill:var(--bg-editor); stroke:var(--text-secondary); }
.output-body.on  { fill:var(--green);     stroke:var(--green); }
.output-value-text {
  fill:var(--text-muted);
  font-family:var(--font-mono); font-size:14px; font-weight:700;
  dominant-baseline:central; text-anchor:middle; pointer-events:none;
}
.comp-group.selected .output-value-text,
.output-body.on ~ .output-value-text { fill:#fff; }
.output-name-text {
  fill:var(--text-secondary); font-family:var(--font-mono);
  font-size:11px; dominant-baseline:central; text-anchor:middle; cursor:text;
}

/* ── COMMENT BOX ──────────────────────────────────────────── */
.comment-body { fill:var(--bg-active); stroke:var(--border-bright); stroke-width:1; stroke-dasharray:5 3; }
.comment-editable {
  width:100%; height:100%; font-size:11px; color:var(--text-muted);
  font-family:var(--font-ui); outline:none; overflow:auto;
  line-height:1.5; user-select:text; cursor:text; resize:none; box-sizing:border-box;
}
.comment-resize { fill:var(--accent); opacity:0.45; cursor:nwse-resize; }
.comment-resize:hover { opacity:1; }
/* Comment group uses move cursor on the border rect, text cursor inside */
.comp-group.comment-group { cursor:move; }

/* ── PORT CIRCLES ─────────────────────────────────────────── */
.port-circle { stroke-width:1.5; cursor:crosshair; }
.port-in  { fill:var(--bg-editor); stroke:var(--text-muted); }
.port-out { fill:var(--bg-editor); stroke:var(--accent); }

/* ── WIRES ────────────────────────────────────────────────── */
.wire-path { fill:none; stroke-width:2; stroke-linecap:round; cursor:pointer; }
.wire-path.selected { stroke-width:3; }
.wire-path:hover    { stroke-width:3; }
.wire-dead { stroke:var(--wire-dead); }
.wire-live { stroke:var(--wire-live); }
#temp-wire { fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:6 4; pointer-events:none; }

/* ── RIGHT SIDEBAR (resizable) ─────────────────────────────── */
#right-sidebar {
  width:260px; min-width:140px; max-width:600px;
  background:var(--bg-panel);
  border-left:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden;
}

/* ── SIDEBAR RESIZE HANDLE ──────────────────────────────────── */
#sidebar-resizer {
  width: 5px; flex-shrink:0; cursor:col-resize;
  background:transparent; transition:background var(--transition);
  position:relative; z-index:10;
}
#sidebar-resizer:hover, #sidebar-resizer.dragging {
  background: var(--accent-dim);
}
#truth-table-container { flex:1; overflow:auto; padding:8px; }
#truth-table-container::-webkit-scrollbar { width:4px; }
#truth-table-container::-webkit-scrollbar-thumb { background:var(--scrollbar); border-radius:2px; }
.tt-hint { color:var(--text-muted); font-size:12px; text-align:center; padding:24px 12px; line-height:1.6; }
.truth-table { width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:12px; }
.truth-table th {
  background:var(--bg-active); color:var(--accent);
  padding:5px 10px; border:1px solid var(--border);
  text-align:center; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.8px; position:sticky; top:0;
}
.truth-table td { padding:4px 10px; border:1px solid var(--border); text-align:center; color:var(--text-secondary); }
.truth-table tr:hover td { background:var(--bg-hover); color:var(--text-primary); }
.truth-table .tt-one  { color:var(--green); font-weight:700; }
.truth-table .tt-zero { color:var(--text-muted); }
.truth-table .tt-active td { background:var(--accent-dim); }

/* ── EXPRESSION BAR ─────────────────────────────────────────── */
#expression-bar {
  height:32px; flex-shrink:0; background:var(--bg-sidebar);
  border-top:1px solid var(--border);
  display:flex; align-items:center; padding:0 16px; gap:10px;
}
.expr-label {
  font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:1.2px; color:var(--accent); white-space:nowrap; flex-shrink:0;
}
/* Wrapper makes the expression + copy button act as one hover target */
#expression-wrap {
  flex:1; display:flex; align-items:center; gap:6px;
  min-width:0; overflow:hidden; cursor:pointer;
}
#expression-text {
  font-family:var(--font-mono); font-size:12px; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1;
}
#copy-expr-btn {
  flex-shrink:0; opacity:0; transition:opacity var(--transition);
  background:none; border:none; color:var(--accent); cursor:pointer;
  display:flex; align-items:center; padding:2px;
  border-radius:3px;
}
#copy-expr-btn:hover { background:var(--accent-dim); }
#expression-wrap:hover #copy-expr-btn { opacity:1; }
/* Flash green on successful copy */
#copy-expr-btn.copied { color:var(--green); opacity:1; }
/* Attribution — bottom-right of expression bar */
#attr-link {
  color:var(--accent); text-decoration:none; font-size:10px;
  opacity:0.6; transition:opacity var(--transition); white-space:nowrap; flex-shrink:0;
}
#attr-link:hover { opacity:1; }

/* ── GLOBAL TOOLTIP (fixed to viewport) ──────────────────── */
#global-tooltip {
  display:none;
  position:fixed;
  background:var(--bg-active);
  border:1px solid var(--border-bright);
  border-radius:var(--radius);
  padding:8px;
  z-index:500;
  pointer-events:none;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
/* ═══════════════════════════════════════════════════════════════
   MOBILE / TOUCH SUPPORT
   ═══════════════════════════════════════════════════════════════ */

/* ── TOUCH RESETS ─────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }
#canvas-wrapper { touch-action: none; }
.port-circle, .comp-group { touch-action: none; }
#canvas { touch-action: none; }

/* ── PLACE-MODE HINT BAR ──────────────────────────────────────── */
#place-hint {
  display: none;
  position: fixed;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #000c10;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-ui);
  padding: 6px 18px;
  border-radius: 20px;
  z-index: 500;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(103,232,249,0.4);
}
#place-hint.visible { display: block; }

/* ── MOBILE BACKDROP ─────────────────────────────────────────── */
#mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 140;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
#mobile-backdrop.visible { display: block; }

/* ── MOBILE NAV (injected by JS) ─────────────────────────────── */
#mobile-nav {
  display: none;
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  gap: 6px;
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  border-radius: 28px;
  padding: 5px 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  align-items: center;
}
.mobile-nav-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: var(--transition);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.mobile-nav-btn svg { flex-shrink: 0; }
.mobile-nav-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
}
.mobile-nav-btn:active { opacity: 0.7; }

/* Drag handle pill on bottom sheets */
.sidebar-drag-handle {
  display: none;
  width: 36px; height: 4px;
  background: var(--border-bright);
  border-radius: 2px;
  margin: 0 auto 0;
  flex-shrink: 0;
}

/* ── TABLET (≤ 900px) ─────────────────────────────────────────── */
@media (max-width: 900px) {
  #left-sidebar  { width: 160px; }
  #right-sidebar { width: 200px; }
  .title-center  { display: none; }
}

/* ── MOBILE (≤ 640px) ─────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Titlebar: keep logo + critical actions, hide text labels */
  .title-center { display: none; }
  .title-btn-label { display: none; } /* added by JS to Export/Clear text */
  #attr-link { display: none; }

  /* Sidebars become slide-up bottom sheets */
  #left-sidebar, #right-sidebar {
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 52vh;
    min-height: 220px;
    z-index: 150;
    border: none;
    border-top: 1px solid var(--border-bright);
    border-radius: 16px 16px 0 0;
    transform: translateY(110%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-direction: column;
    overflow: hidden;
  }
  #left-sidebar.mobile-open,
  #right-sidebar.mobile-open {
    transform: translateY(0);
  }

  /* Drag handle visible on mobile */
  .sidebar-drag-handle { display: block; margin: 8px auto 0; }

  /* Sidebar header adjustments for mobile */
  .sidebar-header {
    padding: 6px 16px 8px;
    display: flex; align-items: center; justify-content: space-between;
  }

  /* Canvas takes full width, no sidebars inline */
  #workspace { position: relative; }
  #sidebar-resizer { display: none; }

  /* Canvas area — full height minus titlebar and expression bar */
  #canvas-wrapper { flex: 1; }

  /* Mobile nav bar visible */
  #mobile-nav { display: flex; }

  /* Expression bar: compact */
  #expression-bar { padding: 0 10px; gap: 6px; height: 34px; }
  .expr-label { display: none; }
  #expression-text { font-size: 11px; }

  /* Zoom controls: anchored to bottom-right of canvas */
  #zoom-controls {
    right: 12px !important;
    bottom: 42px;
  }

  /* Larger touch targets for ports (scale up visually) */
  .port-circle { r: 7; }
  /* Compensate with CSS transform so layout doesn't shift */
  .port-in, .port-out { transform-box: fill-box; transform-origin: center; }

  /* Title buttons — icon only on very small screens */
  #btn-export .export-label,
  #btn-clear  .clear-label  { display: none; }

  /* Component items slightly taller for easier tapping */
  .comp-item { padding: 8px 6px; }

  /* Truth table: scrollable with slightly smaller font */
  #truth-table-container { overflow: auto; }
  .truth-table { font-size: 11px; }
  .truth-table th, .truth-table td { padding: 5px 8px; }
}

/* Extra small phones */
@media (max-width: 400px) {
  .title-btn { padding: 3px 6px; font-size: 10px; }
  #titlebar { gap: 8px; padding: 0 8px; }
}