/* =================================================================
   SOP Chart Builder — Custom Styles
   Tailwind handles utilities; this file handles custom tokens,
   animations, and rules Tailwind can't express.
================================================================= */

/* ── Fonts ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Custom Properties ─────────────────────────────────────── */
:root {
  --color-primary: #3498db;
  --color-primary-dark: #2980b9;
  --color-primary-light: #e8f4fd;
  --color-secondary: #ecf0f1;
  --color-critical: #f39c12;
  --color-critical-light: #fef9ec;
  --color-decision: #8b5cf6;
  --color-decision-light: #f3f0ff;
  --color-resolved: #10b981;
  --color-resolved-light: #ecfdf5;
  --color-surface: #ffffff;
  --color-bg: #f5f7fa;
  --color-border: #e2e8f0;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 32px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
}

/* ── Base ───────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.bg-app { background-color: var(--color-bg); }

/* ── Header ─────────────────────────────────────────────────────── */
.app-header {
  background: linear-gradient(135deg, #1a2a4a 0%, #1e3a5f 60%, #2c4a7a 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08), var(--shadow-sm);
}

.header-logo {
  background: rgba(52, 152, 219, 0.4);
  border: 1px solid rgba(255,255,255,0.15);
}

.header-btn {
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
}
.header-btn:hover {
  color: white;
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.2);
}

.header-btn-primary {
  background: var(--color-primary);
  color: white;
  border: 1px solid rgba(255,255,255,0.15);
}
.header-btn-primary:hover:not(:disabled) {
  background: var(--color-primary-dark);
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
}

.chart-select {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
  max-width: 200px;
}
.chart-select:focus {
  ring-color: var(--color-primary);
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar {
  background: var(--color-surface);
  box-shadow: 1px 0 0 var(--color-border);
}

.add-node-btn {
  background: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-sm);
}
.add-node-btn:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 3px 10px rgba(52, 152, 219, 0.35);
  transform: translateY(-1px);
}
.add-node-btn:active {
  transform: translateY(0);
}

.empty-icon {
  background: var(--color-secondary);
}

/* ── Sidebar Node Cards ──────────────────────────────────────────── */
.node-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.node-card:hover {
  border-color: #c2d6ee;
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}
.node-card--selected {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.12);
}
.node-card--critical {
  border-left: 3px solid var(--color-critical);
}
.node-card--critical.node-card--selected {
  border-color: var(--color-critical);
  background: var(--color-critical-light);
  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.12);
}
.node-card--decision {
  border-left: 3px solid var(--color-decision);
}
.node-card--decision.node-card--selected {
  border-color: var(--color-decision);
  background: var(--color-decision-light);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}
.node-card--resolved {
  border-left: 3px solid var(--color-resolved);
}
.node-card--resolved.node-card--selected {
  border-color: var(--color-resolved);
  background: var(--color-resolved-light);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.node-card.dragging {
  opacity: 0.4;
  transform: scale(0.97);
}

.node-number {
  background: var(--color-secondary);
  color: var(--color-text-muted);
  font-size: 10px;
}
.node-card--selected .node-number { background: var(--color-primary); color: white; }
.node-card--critical .node-number { background: var(--color-critical); color: white; }
.node-card--decision .node-number { background: var(--color-decision); color: white; }
.node-card--resolved .node-number { background: var(--color-resolved); color: white; }

.node-type-label {
  color: var(--color-primary);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.node-card--critical .node-type-label { color: var(--color-critical); }
.node-card--decision .node-type-label { color: var(--color-decision); }
.node-card--resolved .node-type-label { color: var(--color-resolved); }

/* ── Canvas ─────────────────────────────────────────────────────── */
.canvas-toolbar {
  background: var(--color-surface);
}

.canvas-bg {
  background-color: #eef2f7;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.18) 1px, transparent 1px);
  background-size: 24px 24px;
}

.canvas-inner {
  transition: transform 0.15s ease;
}

.canvas-empty-icon {
  background: white;
  box-shadow: var(--shadow-md);
}

/* ── Toolbar buttons ────────────────────────────────────────────── */
.toolbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.12s;
  cursor: pointer;
}
.toolbar-icon-btn:hover {
  background: white;
  border-color: var(--color-border);
  color: #334155;
  box-shadow: var(--shadow-sm);
}

.view-btn {
  color: #64748b;
  background: transparent;
  cursor: pointer;
}
.view-btn:hover { color: #334155; }
.view-btn-active {
  background: white;
  color: #1e293b;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  cursor: default;
}

/* ── Canvas Chart Nodes ─────────────────────────────────────────── */
.chart-node {
  position: absolute;
  cursor: grab;
  border-radius: 14px;
  background: white;
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.08s;
  user-select: none;
}
.chart-node:hover {
  box-shadow: var(--shadow-lg);
  border-color: #c2d6ee;
  transform: translateY(-2px);
}
.chart-node--selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2), var(--shadow-lg);
}
.chart-node--critical {
  border-color: var(--color-critical);
  border-left: 4px solid var(--color-critical);
}
.chart-node--critical.chart-node--selected {
  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.2), var(--shadow-lg);
}
.chart-node--decision {
  border-color: var(--color-decision);
  border-left: 4px solid var(--color-decision);
}
.chart-node--decision.chart-node--selected {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2), var(--shadow-lg);
}
.chart-node--resolved {
  border-color: var(--color-resolved);
  border-left: 4px solid var(--color-resolved);
}
.chart-node--resolved.chart-node--selected {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), var(--shadow-lg);
}
.chart-node--dragging {
  cursor: grabbing;
  opacity: 0.85;
  transform: scale(1.02) rotate(1deg);
  box-shadow: var(--shadow-lg), 0 0 0 2px rgba(52, 152, 219, 0.4);
  z-index: 100;
}

/* Node badge */
.node-badge {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 10px;
  letter-spacing: 0.03em;
}
.chart-node--critical .node-badge { background: var(--color-critical-light); color: var(--color-critical); }
.chart-node--decision .node-badge { background: var(--color-decision-light); color: var(--color-decision); }
.chart-node--resolved .node-badge { background: var(--color-resolved-light); color: var(--color-resolved); }

/* Connect buttons */
.connect-btn {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid transparent;
}
.connect-btn:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.connect-btn-active {
  background: var(--color-primary);
  color: white;
  border: 1px solid var(--color-primary-dark);
}

/* Connection target overlay */
.connection-target-overlay {
  border-radius: 14px;
  background: rgba(52, 152, 219, 0.08);
  border: 2px dashed var(--color-primary);
}
.connection-target-overlay:hover {
  background: rgba(52, 152, 219, 0.18);
}

/* SVG connections */
.connection-path {
  transition: stroke 0.2s, stroke-width 0.2s;
}
.connection-path--standard { stroke: #94a3b8; }
.connection-path--critical { stroke: var(--color-critical); }
.connection-path--decision { stroke: var(--color-decision); }
.connection-path--resolved { stroke: var(--color-resolved); }

.arrow-marker { fill: #94a3b8; }

/* ── Inspector Panel ────────────────────────────────────────────── */
.inspector-panel {
  background: var(--color-surface);
}
.inspector-panel--closed { /* always visible, no toggling needed */ }

.inspector-input {
  background: #f8fafc;
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
}
.inspector-input:focus {
  border-color: var(--color-primary);
  background: white;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
.inspector-input::placeholder { color: #cbd5e1; }
.inspector-input--mono { font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace; }

/* Type selection buttons */
.type-btn {
  background: #f8fafc;
  border: 1.5px solid var(--color-border);
  color: #64748b;
}
.type-btn:hover {
  border-color: #c2d6ee;
  background: #f1f8fe;
}
.type-btn-active {
  background: var(--color-primary-light);
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

/* ── List View ──────────────────────────────────────────────────── */
.list-node-card {
  background: white;
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.list-node-card:hover {
  border-color: #c2d6ee;
  box-shadow: var(--shadow-md);
}
.list-node-card--selected { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(52,152,219,0.1); }
.list-node-card--critical { border-left: 4px solid var(--color-critical); }
.list-node-card--decision { border-left: 4px solid var(--color-decision); }
.list-node-card--resolved { border-left: 4px solid var(--color-resolved); }

.list-node-number {
  background: var(--color-secondary);
  color: var(--color-text-muted);
}
.list-node-card--selected .list-node-number { background: var(--color-primary); color: white; }
.list-node-card--critical .list-node-number { background: var(--color-critical); color: white; }
.list-node-card--decision .list-node-number { background: var(--color-decision); color: white; }
.list-node-card--resolved .list-node-number { background: var(--color-resolved); color: white; }

/* ── Modal ──────────────────────────────────────────────────────── */
.modal-backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}
.modal-card {
  background: white;
}

/* ── Save indicator ─────────────────────────────────────────────── */
.save-indicator { color: #10b981; }

/* ── Toast ──────────────────────────────────────────────────────── */
.toast {
  background: #1e293b;
  color: white;
  min-width: 220px;
}
.toast--success { background: #0f4c2a; color: #86efac; }
.toast--error { background: #4c0519; color: #fca5a5; }

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes nodeEntrance {
  from { opacity: 0; transform: scale(0.9) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.chart-node { animation: nodeEntrance 0.2s ease both; }

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4); }
  70%  { box-shadow: 0 0 0 8px rgba(52, 152, 219, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
}
.chart-node--selected { animation: pulse-ring 1.5s ease-out 1; }

@keyframes dragOver {
  0%, 100% { border-color: var(--color-border); }
  50%       { border-color: var(--color-primary); }
}
.node-card.drag-over { animation: dragOver 0.4s ease infinite; background: var(--color-primary-light); }

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Focus visible ──────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ── Line clamp fallback ────────────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}