/* ==========================================================================
   GUARD FLOW - COMFYUI STYLE NODE GRAPH SYSTEM CSS
   ========================================================================== */

:root {
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-digital: 'Orbitron', monospace;

  /* ComfyUI Color Scheme - Dark Theme (Default) */
  --bg-darker: #0c0d12;
  --bg-dark: #12131a;
  --bg-panel: rgba(18, 20, 29, 0.75);
  --border-glow: rgba(0, 242, 254, 0.2);
  --border-muted: rgba(255, 255, 255, 0.08);

  --color-text: #f1f5f9;
  --color-text-muted: #64748b;
  --color-text-dark: #475569;

  /* Neon Statuses */
  --neon-cyan: #00f2fe;
  --neon-green: #00e676;
  --neon-amber: #ff9100;
  --neon-red: #ff1744;
  --neon-purple: #c51162;

  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

  /* Theme-specific Overridable Variables */
  --grid-dot-color: rgba(255, 255, 255, 0.08);
  --node-header-bg: rgba(0, 0, 0, 0.4);
  --input-bg: rgba(10, 12, 18, 0.8);
  --bg-menu: rgba(18, 20, 29, 0.95);
  --scrollbar-thumb: rgba(255, 255, 255, 0.08);
  
  --sidebar-section-bg: rgba(0, 0, 0, 0.25);
  --sidebar-section-border: rgba(255, 255, 255, 0.02);
  --timer-clock-bg: rgba(0, 0, 0, 0.25);
  --timer-digital-row-bg: rgba(0, 0, 0, 0.3);
  --patrol-mode-widget-bg: rgba(0, 0, 0, 0.15);
  --guard-badge-list-bg: rgba(0, 0, 0, 0.15);
  --log-item-bg: rgba(255, 255, 255, 0.01);
  --node-queue-list-bg: rgba(0, 0, 0, 0.25);
  --node-queue-item-bg: rgba(255, 255, 255, 0.02);
  --node-queue-item-border: rgba(255, 255, 255, 0.04);
  --patrol-card-bg: rgba(0, 0, 0, 0.3);
  --checkmark-bg: rgba(255, 255, 255, 0.05);
  --sidebar-toggle-bg: rgba(18, 20, 29, 0.95);
  
  --option-bg: #12141d;
  --option-color: #ffffff;
  --option-hover-bg: rgba(255, 255, 255, 0.08);
}

/* Ice-White / Slate-Gray Frosted Glass Light Theme */
body.light-mode {
  --bg-darker: #f0f2f5;
  --bg-dark: #ffffff;
  --bg-panel: rgba(248, 250, 252, 0.85);
  --border-glow: rgba(2, 132, 199, 0.2);
  --border-muted: rgba(15, 23, 42, 0.08);

  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-text-dark: #94a3b8;

  /* Readability-enhanced Light Accents */
  --neon-cyan: #0284c7;
  --neon-green: #16a34a;
  --neon-amber: #ea580c;
  --neon-red: #dc2626;
  --neon-purple: #9333ea;

  --glass-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);

  /* Light Theme Variable Overrides */
  --grid-dot-color: rgba(15, 23, 42, 0.15);
  --node-header-bg: rgba(15, 23, 42, 0.04);
  --input-bg: rgba(255, 255, 255, 0.95);
  --bg-menu: rgba(255, 255, 255, 0.98);
  --scrollbar-thumb: rgba(15, 23, 42, 0.15);
  
  --sidebar-section-bg: rgba(15, 23, 42, 0.03);
  --sidebar-section-border: rgba(15, 23, 42, 0.04);
  --timer-clock-bg: rgba(15, 23, 42, 0.04);
  --timer-digital-row-bg: rgba(15, 23, 42, 0.05);
  --patrol-mode-widget-bg: rgba(15, 23, 42, 0.02);
  --guard-badge-list-bg: rgba(15, 23, 42, 0.03);
  --log-item-bg: rgba(15, 23, 42, 0.02);
  --node-queue-list-bg: rgba(15, 23, 42, 0.04);
  --node-queue-item-bg: rgba(15, 23, 42, 0.02);
  --node-queue-item-border: rgba(15, 23, 42, 0.04);
  --patrol-card-bg: rgba(15, 23, 42, 0.03);
  --checkmark-bg: rgba(15, 23, 42, 0.05);
  --sidebar-toggle-bg: rgba(248, 250, 252, 0.95);
  
  --option-bg: #ffffff;
  --option-color: #0f172a;
  --option-hover-bg: rgba(15, 23, 42, 0.05);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

body.comfy-app {
  font-family: var(--font-main);
  background-color: var(--bg-darker);
  color: var(--color-text);
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
}

/* ==========================================================================
   1. COLLAPSIBLE CONTROL SIDE PANEL
   ========================================================================== */
.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 100%;
  background: var(--bg-panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--border-muted);
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.6);
  z-index: 100;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sidebar.collapsed {
  transform: translateX(-100%);
}

/* Collapsible Handle Trigger */
.sidebar-toggle {
  position: absolute;
  top: 50%;
  right: -24px;
  transform: translateY(-50%);
  width: 24px;
  height: 60px;
  background: var(--sidebar-toggle-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-muted);
  border-left: none;
  border-radius: 0 12px 12px 0;
  color: var(--neon-cyan);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  box-shadow: 5px 0 15px rgba(0,0,0,0.3);
  transition: var(--transition-smooth);
  outline: none;
  z-index: 101;
}

.sidebar-toggle:hover {
  background: var(--neon-cyan);
  color: var(--bg-darker);
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  overflow-y: auto;
}

/* Custom Scrollbars */
.sidebar-content::-webkit-scrollbar,
.guard-badge-list::-webkit-scrollbar,
.log-feed::-webkit-scrollbar {
  width: 4px;
}
.sidebar-content::-webkit-scrollbar-thumb,
.guard-badge-list::-webkit-scrollbar-thumb,
.log-feed::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 2px;
}

.sidebar-header {
  margin-bottom: 20px;
  text-align: center;
}

.logo-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.shield-icon {
  font-size: 26px;
  filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.4));
}

.logo-area h1 {
  font-family: var(--font-digital);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Sidebar Section Headers */
.sidebar-section {
  background: var(--sidebar-section-bg);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid var(--sidebar-section-border);
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.sidebar-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sidebar-section-title h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text);
}

.section-desc {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Timer styles in sidebar */
.timer-widget {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timer-digital-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--timer-digital-row-bg);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-muted);
}

.timer-digital {
  font-family: var(--font-digital);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 1px;
}

/* Flex Scroll Roster Wrapper */
.flex-section {
  flex: 1;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

.guards-container {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
}

.guard-sub-list-section h4 {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.guard-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--guard-badge-list-bg);
  border-radius: 8px;
  padding: 8px;
  min-height: 42px;
}

/* Activity Logs Section */
.log-section {
  height: 120px;
  flex-shrink: 0;
}

.log-feed {
  flex: 1;
  overflow-y: auto;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
}

.log-item {
  padding: 4px 6px;
  background: var(--log-item-bg);
  border-radius: 4px;
  border-left: 2.5px solid var(--color-text-muted);
}

.log-item.info { border-left-color: var(--neon-cyan); }
.log-item.warning { border-left-color: var(--neon-amber); color: #ffb74d; }
.log-item.success { border-left-color: var(--neon-green); }

.sidebar-footer {
  margin-top: auto;
  padding-top: 10px;
}

/* ==========================================================================
   2. INTERACTIVE COMFY INFINITE CANVAS WORKSPACE
   ========================================================================== */
.comfy-canvas-container {
  flex: 1;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: var(--bg-darker);
  cursor: grab;
  touch-action: none; /* disable browser touch gestures like swipe-to-scroll */
}

.comfy-canvas-container:active {
  cursor: grabbing;
}

/* Panning Workspace Grid */
.comfy-grid {
  position: absolute;
  width: 5000px;
  height: 5000px;
  top: 0;
  left: 0;
  background-image: 
    radial-gradient(var(--grid-dot-color) 1px, transparent 1px);
  background-size: 24px 24px;
  transform-origin: 0 0;
  z-index: 1;
}

/* SVG Connection Lines Layer */
#canvas-svg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

#canvas-nodes-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Nodes themselves enable pointer events */
  z-index: 3;
}

/* ComfyUI style connection lines */
.comfy-wire {
  fill: none;
  stroke: rgba(0, 242, 254, 0.35);
  stroke-width: 3.5;
  stroke-linecap: round;
  pointer-events: stroke; /* Wire detects clicks */
  cursor: pointer;
  transition: stroke 0.15s ease, stroke-width 0.15s ease;
}

.comfy-wire:hover {
  stroke: var(--neon-red);
  stroke-width: 4.5;
}

/* Wires flowing dash execution animations */
.comfy-wire-active {
  fill: none;
  stroke: var(--neon-cyan);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 8, 12;
  animation: comfyFlow 5s linear infinite;
  pointer-events: none;
}

@keyframes comfyFlow {
  to {
    stroke-dashoffset: -100;
  }
}

/* Helper connection wire during drag */
.temp-wire {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 4, 4;
  pointer-events: none;
}

/* ==========================================================================
   3. COMFY NODE ELEMENTS (GUARD POSITIONS)
   ========================================================================== */
.comfy-node {
  position: absolute;
  width: 190px;
  background: var(--bg-dark);
  border: 1.5px solid var(--border-muted);
  border-radius: 8px;
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  pointer-events: auto; /* enable click drag inside node card */
  touch-action: none; /* prevent touch panning/scrolling while dragging node */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comfy-node.node-station {
  height: 110px;
}

.comfy-node.node-standby,
.comfy-node.node-break,
.comfy-node.node-hub {
  height: 150px;
}

/* Allow text and dropdown click selection inside node contents */
.comfy-node select, .comfy-node option, .comfy-node button {
  user-select: auto !important;
  -webkit-user-select: auto !important;
}

.comfy-node:hover {
  border-color: rgba(255,255,255,0.18);
}

.comfy-node.active-occupied {
  border-color: rgba(0, 242, 254, 0.4);
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.15);
}

.comfy-node.vacant {
  border-color: rgba(255, 145, 0, 0.4);
  animation: nodeBlink 2s infinite alternate;
}

.comfy-node.closed-post {
  border-color: var(--color-text-dark);
  opacity: 0.5;
}

/* Node Sequence Order Badge */
.node-order-badge {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--neon-cyan), #00d2ff);
  border: 2px solid var(--bg-dark);
  border-radius: 50%;
  color: #0c0d12; /* high contrast dark text for neon cyan */
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
  z-index: 10;
  font-family: var(--font-digital), sans-serif;
  pointer-events: none;
}

body.light-mode .node-order-badge {
  background: linear-gradient(135deg, var(--neon-cyan), #0284c7);
  color: #ffffff; /* white text for high contrast on darker blue */
  border-color: var(--bg-dark);
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.4);
}

/* Drag Handle Header */
.node-drag-handle {
  background: var(--node-header-bg);
  border-bottom: 1px solid var(--border-muted);
  padding: 6px 10px;
  border-radius: 7px 7px 0 0;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  -webkit-user-select: none;
}

.node-drag-handle:active {
  cursor: grabbing;
}

.node-title-badge {
  font-family: var(--font-digital);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.active-occupied .node-title-badge {
  color: var(--neon-cyan);
}

.vacant .node-title-badge {
  color: var(--neon-amber);
}

.btn-remove-node {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  padding: 0 2px;
}

.btn-remove-node:hover {
  color: var(--neon-red);
}

/* Node Contents Body */
.node-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.node-station-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-guard-select-row {
  width: 100%;
}

.comfy-node .form-control {
  background: var(--bg-darker);
  border: 1px solid var(--border-muted);
  font-size: 12px;
  padding: 5px 8px;
  height: 28px;
  color: var(--color-text);
}

.comfy-node .form-control:focus {
  border-color: var(--neon-cyan);
}

.node-footer-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.node-btn-action {
  font-size: 9px;
  background: transparent;
  border: none;
  color: var(--neon-amber);
  cursor: pointer;
  font-weight: bold;
}

.node-btn-action:hover {
  text-decoration: underline;
}

/* ==========================================================================
   4. NODE IN & OUT PORT DOTS (HANDLES)
   ========================================================================== */
.node-port {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--bg-dark);
  cursor: crosshair;
  z-index: 10;
  transition: transform 0.15s ease, background 0.15s ease;
}

/* Input handle dot on the left center */
.node-port-in {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
}

/* Output handle dot on the right center */
.node-port-out {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--neon-cyan);
  box-shadow: 0 0 6px var(--neon-cyan);
}

.node-port:hover {
  transform: translateY(-50%) scale(1.6);
  background-color: white !important;
}

/* Port label tooltip display on hover */
.node-port::after {
  content: attr(data-label);
  position: absolute;
  background: #000;
  color: #fff;
  font-size: 8px;
  padding: 2px 4px;
  border-radius: 3px;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.node-port:hover::after {
  opacity: 0.8;
}

/* ==========================================================================
   5. BUTTONS, BADGES, AND OTHER UTILITIES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: var(--transition-smooth);
  gap: 6px;
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  color: #0c0d12;
  box-shadow: 0 4px 10px rgba(0, 242, 254, 0.25);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(0, 242, 254, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-muted);
  color: var(--color-text);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
}

.btn-xs { padding: 4px 8px; font-size: 11px; border-radius: 4px; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 5px; }

.badge {
  padding: 2px 6px;
  font-size: 9px;
  font-weight: bold;
  border-radius: 4px;
  text-transform: uppercase;
}

.badge-success { background: rgba(0, 230, 118, 0.15); color: var(--neon-green); border: 1px solid rgba(0, 230, 118, 0.3); }
.badge-warning { background: rgba(255, 145, 0, 0.15); color: var(--neon-amber); border: 1px solid rgba(255, 145, 0, 0.3); }
.badge-danger { background: rgba(255, 23, 68, 0.15); color: var(--neon-red); border: 1px solid rgba(255, 23, 68, 0.3); }
.badge-info { background: rgba(0, 242, 254, 0.15); color: var(--neon-cyan); border: 1px solid rgba(0, 242, 254, 0.3); }

/* Switch container */
.switch-container {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;
}

.switch-container input { display: none; }
.switch-slider {
  width: 32px;
  height: 16px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  position: relative;
  transition: var(--transition-smooth);
}

.switch-slider::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-text);
  top: 2px;
  left: 2px;
  transition: var(--transition-smooth);
}

.switch-container input:checked + .switch-slider {
  background: var(--neon-cyan);
}

.switch-container input:checked + .switch-slider::before {
  transform: translateX(16px);
  background: var(--bg-darker);
}

.switch-label { font-size: 11px; color: var(--color-text-muted); }

/* Guard Roster Badges List */
.guard-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-muted);
  color: var(--color-text);
  padding: 4px 8px;
  border-radius: 100px;
  font-size: 11px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.guard-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.02);
}

.guard-pill.status-active { border-color: rgba(0, 242, 254, 0.25); }
.guard-pill.status-standby { border-color: rgba(0, 230, 118, 0.25); background: rgba(0, 230, 118, 0.02); }
.guard-pill.status-break { border-color: rgba(255, 145, 0, 0.25); background: rgba(255, 145, 0, 0.02); }
.guard-pill.status-hub { border-color: rgba(147, 51, 234, 0.25); background: rgba(147, 51, 234, 0.02); }

/* Help Instructions Bar */
.comfy-instructions {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(18, 20, 29, 0.85);
  border: 1px solid var(--border-muted);
  padding: 8px 14px;
  border-radius: 6px;
  display: flex;
  gap: 16px;
  font-size: 10px;
  color: var(--color-text-muted);
  z-index: 10;
  pointer-events: none;
}

/* Modals */
.modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.modal-backdrop.active { display: flex; }
.modal-card {
  width: 100%;
  max-width: 320px;
  background: var(--bg-dark);
  border: 1px solid var(--border-muted);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--glass-shadow);
  animation: scaleUp 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.modal-header h3 { font-size: 15px; font-weight: bold; }
.btn-close { background: transparent; border: none; color: var(--color-text-muted); font-size: 24px; cursor: pointer; }
.form-group label { display: block; font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }

/* Toast Notifications Container */
#toast-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 90%;
  max-width: 280px;
}

.toast {
  background: var(--bg-panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-muted);
  color: var(--color-text);
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: var(--glass-shadow);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: toastIn 0.3s ease;
}

.toast.toast-success { border-left: 3px solid var(--neon-green); }
.toast.toast-warning { border-left: 3px solid var(--neon-amber); }
.toast.toast-info { border-left: 3px solid var(--neon-cyan); }

/* Hidden utility */
.hidden { display: none !important; }

/* Keyframe animations */
@keyframes nodeBlink {
  from { border-color: rgba(255, 145, 0, 0.2); }
  to { border-color: rgba(255, 145, 0, 0.8); }
}

@keyframes toastIn {
  from { transform: translateY(15px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes scaleUp {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Standby Pool Card Specifics */
.comfy-node.node-standby {
  border-color: rgba(0, 230, 118, 0.35);
  box-shadow: 0 0 15px rgba(0, 230, 118, 0.15);
}

/* Break Area Card Specifics */
.comfy-node.node-break {
  border-color: rgba(255, 145, 0, 0.35);
  box-shadow: 0 0 15px rgba(255, 145, 0, 0.15);
}

/* Hub Card Specifics */
.comfy-node.node-hub {
  border-color: rgba(147, 51, 234, 0.35);
  box-shadow: 0 0 15px rgba(147, 51, 234, 0.15);
}

/* Node Queue List inside cards */
.node-queue-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 60px;
  overflow-y: auto;
  background: var(--node-queue-list-bg);
  border-radius: 6px;
  padding: 4px;
  border: 1px solid var(--border-muted);
}

/* Queue List scrollbars */
.node-queue-list::-webkit-scrollbar {
  width: 3px;
}
.node-queue-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
}

/* Queue Item Row */
.node-queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--node-queue-item-bg);
  border: 1px solid var(--node-queue-item-border);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 10px;
}

.node-queue-item .queue-num {
  font-family: var(--font-digital);
  color: var(--neon-cyan);
  font-size: 9px;
  margin-right: 4px;
}

.node-queue-item .queue-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Small delete/action button in queue items */
.node-queue-item button {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  padding: 0 4px;
  display: flex;
  align-items: center;
}

.node-queue-item button.btn-remove-queue:hover {
  color: var(--neon-red);
}

.node-queue-item button.btn-return-queue:hover {
  color: var(--neon-green);
}

/* Custom Floating Context Menu for Wires */
.wire-menu-popup {
  position: fixed;
  z-index: 10000;
  background: rgba(18, 20, 29, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 23, 68, 0.4);
  box-shadow: 0 4px 20px rgba(255, 23, 68, 0.25);
  border-radius: 6px;
  padding: 4px;
  animation: scaleUp 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: auto; /* ensure we can click context menu buttons */
}

.btn-delete-wire-action {
  background: transparent;
  border: none;
  color: #ff1744;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-delete-wire-action:hover {
  background: rgba(255, 23, 68, 0.1);
  color: #ff5252;
}

.btn-delete-wire-action .delete-icon {
  font-size: 13px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sidebar {
    width: 280px;
  }
  .sidebar.collapsed {
    transform: translateX(-100%);
  }
  .comfy-instructions {
    display: none;
  }
}

/* Canvas Context Menu for Adding Nodes */
.canvas-menu-popup {
  position: fixed;
  z-index: 10000;
  background: rgba(18, 20, 29, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-glow);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: scaleUp 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: auto;
}

.btn-add-node-option {
  background: transparent;
  border: none;
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  text-align: left;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.btn-add-node-option:hover {
  background: var(--option-hover-bg);
}

.node-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ==========================================================================
   10. RIGHT COLLAPSIBLE SIDEBAR: PATROL MONITORING
   ========================================================================== */
.sidebar-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: var(--bg-panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid var(--border-muted);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6);
  z-index: 100;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sidebar-right.collapsed {
  transform: translateX(100%);
}

.sidebar-right-toggle {
  position: absolute;
  top: 50%;
  left: -24px;
  transform: translateY(-50%);
  width: 24px;
  height: 60px;
  background: var(--sidebar-toggle-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-muted);
  border-right: none;
  border-radius: 12px 0 0 12px;
  color: var(--neon-cyan);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  box-shadow: -5px 0 15px rgba(0,0,0,0.3);
  transition: var(--transition-smooth);
  outline: none;
  z-index: 101;
}

.sidebar-right-toggle:hover {
  background: var(--neon-cyan);
  color: var(--bg-darker);
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
}

/* Checklist and Patrol Cards */
.patrol-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

.patrol-card {
  background: var(--patrol-card-bg);
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: var(--transition-smooth);
}

.patrol-card.pending {
  border-left: 3px solid var(--neon-amber);
}

.patrol-card.completed {
  border-left: 3px solid var(--neon-green);
  background: rgba(0, 230, 118, 0.03);
}

.patrol-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.patrol-time {
  font-family: var(--font-digital);
  font-size: 12px;
  color: var(--neon-cyan);
  font-weight: bold;
}

.patrol-type {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: 3px;
}

.patrol-card.pending .patrol-type {
  background: rgba(255, 145, 0, 0.15);
  color: var(--neon-amber);
}

.patrol-card.completed .patrol-type {
  background: rgba(0, 230, 118, 0.15);
  color: var(--neon-green);
}

.patrol-guard {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}

.patrol-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.05);
  padding-top: 6px;
}

/* Custom Checkbox Design */
.checkbox-container {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 11px;
  color: var(--color-text-muted);
  user-select: none;
  gap: 8px;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  height: 16px;
  width: 16px;
  background-color: var(--checkmark-bg);
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  display: inline-block;
  position: relative;
  transition: var(--transition-smooth);
}

.checkbox-container:hover input ~ .checkmark {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

.checkbox-container input:checked ~ .checkmark {
  background-color: var(--neon-green);
  border-color: var(--neon-green);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #0c0d12;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Glowing Predecessor Alerts */
.comfy-node.patrol-warning-outer {
  border-color: var(--neon-red) !important;
  box-shadow: 0 0 15px rgba(255, 23, 68, 0.3) !important;
  animation: nodePatrolAlertOuter 1.5s infinite alternate;
}

.comfy-node.patrol-warning-inner {
  border-color: var(--neon-amber) !important;
  box-shadow: 0 0 15px rgba(255, 145, 0, 0.3) !important;
  animation: nodePatrolAlertInner 1.5s infinite alternate;
}

@keyframes nodePatrolAlertOuter {
  from { box-shadow: 0 0 4px rgba(255, 23, 68, 0.15); border-color: rgba(255, 23, 68, 0.4); }
  to { box-shadow: 0 0 20px rgba(255, 23, 68, 0.6); border-color: var(--neon-red); }
}

@keyframes nodePatrolAlertInner {
  from { box-shadow: 0 0 4px rgba(255, 145, 0, 0.15); border-color: rgba(255, 145, 0, 0.4); }
  to { box-shadow: 0 0 20px rgba(255, 145, 0, 0.6); border-color: var(--neon-amber); }
}

.patrol-badge {
  background: rgba(255, 145, 0, 0.2);
  border: 1px solid var(--neon-amber);
  color: var(--neon-amber);
  font-size: 8px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-top: 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: pulsePatrol 1s infinite alternate;
}

.patrol-badge.outer {
  border-color: var(--neon-red);
  color: var(--neon-red);
  background: rgba(255, 23, 68, 0.25);
}

@keyframes pulsePatrol {
  from { opacity: 0.75; }
  to { opacity: 1; }
}

/* Global Form Controls (for inputs and selects inside modals) */
.form-control {
  width: 100%;
  background: var(--input-bg) !important;
  border: 1px solid var(--border-muted) !important;
  border-radius: 6px !important;
  font-family: var(--font-main) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  height: 38px !important;
  color: var(--color-text) !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  outline: none !important;
}

.form-control:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.25) !important;
}

select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f2fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 14px !important;
  padding-right: 32px !important;
}

select.form-control option {
  background: var(--option-bg) !important;
  color: var(--option-color) !important;
}

/* Edit node setting option button hover style */
.btn-edit-node {
  transition: color 0.15s ease, transform 0.15s ease !important;
}
.btn-edit-node:hover {
  color: var(--neon-cyan) !important;
  transform: scale(1.3);
}

/* Version Update Popup Banner */
.update-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(18, 20, 29, 0.9) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--neon-cyan) !important;
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.35) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  z-index: 9999 !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
  color: var(--color-text) !important;
  animation: slideInUp 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.update-banner-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--neon-cyan);
  font-size: 14px;
}

.update-banner-body {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.update-banner-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@keyframes slideInUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   LIGHT MODE CUSTOM COMPONENT ADJUSTMENTS
   ========================================================================== */
body.light-mode .subtitle {
  color: var(--color-text-dark);
}

body.light-mode .log-item.warning {
  color: #c2410c;
}

body.light-mode .switch-slider {
  background: rgba(15, 23, 42, 0.08);
}

body.light-mode .guard-pill {
  background: rgba(15, 23, 42, 0.03);
}

body.light-mode .guard-pill:hover {
  background: rgba(15, 23, 42, 0.06);
}

body.light-mode .comfy-node:hover {
  border-color: rgba(15, 23, 42, 0.18);
}

body.light-mode .btn-secondary {
  background: rgba(15, 23, 42, 0.03);
}

body.light-mode .btn-secondary:hover {
  background: rgba(15, 23, 42, 0.08);
}

body.light-mode .comfy-instructions {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

body.light-mode .update-banner {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 0 25px rgba(2, 132, 199, 0.2) !important;
}

/* SVG Connection line dynamic marker fill overrides */
#arrow path {
  fill: var(--neon-cyan);
  transition: fill 0.3s ease;
}

#arrow-selected path {
  fill: var(--neon-green);
  transition: fill 0.3s ease;
}

/* Smooth transitions for theme toggle switching */
body.comfy-app, 
.sidebar, 
.sidebar-right, 
.comfy-canvas-container, 
.comfy-node, 
.sidebar-section, 
.form-control, 
.timer-digital-row, 
.comfy-instructions, 
.update-banner, 
.toast, 
.modal-card, 
.btn, 
.log-item,
.patrol-card,
.node-drag-handle {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Floating Viewport Controls */
.viewport-controls {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 101; /* float on top of map but shift if sidebar-right is open */
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.viewport-controls .btn-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-muted);
  background: var(--bg-menu);
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.viewport-controls .btn-circle:hover {
  background: var(--option-hover-bg);
  transform: scale(1.08);
}

.viewport-controls #btn-zoom-reset {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  color: #0c0d12;
  border: none;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(0, 242, 254, 0.35);
}

.viewport-controls #btn-zoom-reset:hover {
  box-shadow: 0 6px 18px rgba(0, 242, 254, 0.55);
  transform: scale(1.08);
}

/* Shift viewport controls on desktop when right sidebar is open */
@media (min-width: 769px) {
  #right-sidebar-panel.active ~ .viewport-controls {
    right: 320px;
  }
}

/* QR Scanner Laser Animation */
@keyframes scan-laser {
  0% { top: 0%; }
  50% { top: 100%; }
  100% { top: 0%; }
}