/**
 * Harpoon Editor - Unified SM + PN interface on a single canvas
 * Layout: Left sidebar | Central canvas | Properties panel
 *
 * @requires design-system.css (unified variables)
 * @requires components.css (reusable components)
 */

/* ========== Import Design System ========== */
@import url('../../styles/design-system.css');
@import url('../../styles/components.css');
@import url('../../styles/components/hierarchical-menu.css');
@import url('../../shared/formula/ui/formula-editor.css');
@import url('../../styles/components/shared-tabs.css'); /* unified tab system — must be before any rule */

/* ========== Variables CSS ========== */
/* MIGRATED to design-system.css */
/* All --harpoon-* variables have been replaced by --color-* */
/* See /src/styles/design-system.css for the source of truth */

/* ========== Main layout ========== */
.harpoon-editor-unified {
	display: flex;
	flex-direction: column;
	height: 100%; /* ✅ FIX: 100% of the parent, not 100vh which causes overflow */
	min-width: 0; /* Allows horizontal scroll if the panel is too small */
	background: var(--color-bg-primary);
	color: var(--color-text-primary);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	font-size: 14px;
	position: relative; /* ✅ FIX: Force relative positioning */
	left: 0; /* ✅ FIX: No horizontal offset */
	margin: 0; /* ✅ FIX: No margin */
	padding: 0; /* ✅ FIX: No padding */
}

/* ========== Header ========== */
.harpoon-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 20px;
	background: var(--color-bg-secondary);
	border-bottom: 1px solid var(--color-border-default);
	box-shadow: 0 2px 4px var(--color-shadow-medium);
	z-index: 100;
}

.header-left {
	display: flex;
	align-items: center;
	gap: 15px;
}

.header-left h1 {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

.harpoon-icon {
	font-size: 24px;
}

.project-name {
	font-size: 13px;
	color: var(--color-text-secondary);
	padding: 4px 12px;
	background: var(--color-bg-tertiary);
	border-radius: 12px;
}

.source-badge {
	font-size: 11px;
	color: var(--color-accent-primary);
	padding: 3px 10px;
	background: rgba(0, 122, 255, 0.15);
	border: 1px solid var(--color-accent-primary);
	border-radius: 10px;
	font-weight: 600;
}

.header-right {
	display: flex;
	gap: 8px;
}

/* ========== Buttons ========== */
.btn-action {
	padding: 8px 16px;
	background: var(--color-bg-tertiary);
	color: var(--color-text-primary);
	border: 1px solid var(--color-border-default);
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.2s;
}

.btn-action:hover {
	background: var(--color-bg-secondary);
	border-color: var(--color-accent-primary);
}

.btn-primary {
	background: var(--color-accent-primary);
	color: white;
	border-color: var(--color-accent-primary);
}

.btn-primary:hover {
	background: var(--color-accent-primary-hover);
	border-color: var(--color-accent-primary-hover);
}

.btn-delete {
	padding: 8px 16px;
	background: var(--color-danger);
	color: white;
	border: 1px solid var(--color-danger);
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	transition: all 0.2s;
}

.btn-delete:hover {
	background: var(--color-danger-hover);
	border-color: var(--color-danger-hover);
}

/* ========== Main layout (3 panels) ========== */
.harpoon-main {
	display: grid !important; /* ✅ CRITICAL FIX: Force grid, otherwise overridden by flex */
	grid-template-columns: minmax(0, 1fr) 320px; /* ✅ Canvas (left, stuck to the Trident canvas) | Right side panel */
	grid-template-rows: auto 0 1fr auto; /* R1: tabs, R2: (removed toolbar band, collapsed), R3: content, R4: zoom */
	flex: 1;
	overflow: hidden;
	min-width: 0; /* Allows the grid not to force the columns to shrink */
	padding: 0; /* ✅ FIX: Neutralize any inherited offset */
	margin: 0;
	position: relative; /* ✅ FIX: Force relative positioning */
	left: 0; /* ✅ FIX: No horizontal offset */
	transform: none; /* ✅ FIX: No transformation */
}

/* ========================================================================
   TABS SYSTEM - Import of the system shared with Izivedit
   ======================================================================== */

/* (shared-tabs.css is imported at the top of this file — an @import after rules
   is invalid CSS and ignored by browsers.) */

/* ========================================================================
   HARPOON-SPECIFIC STYLES - TokenTypes
   ======================================================================== */

/* The tabs container must span the full width of the grid and have the tabs-bar styles */
.token-tabs-container {
	grid-column: 1 / -1;
	grid-row: 1 / 2;
	/* Inherits the .tabs-bar styles */
	height: 36px;
	background: var(--color-bg-tertiary);
	border-bottom: 1px solid var(--color-border-default);
	display: flex;
	align-items: center;
	padding: 0 var(--space-2); /* 8px */
	position: relative;
}

/* Mirror toolbar band (above the canvas), aligned with the Trident alignment bar.
   Empty for now: will host a future Harpoon function. Its height is
   synchronized by JS with that of .alignment-toolbar (cf. unified-app.js). */
/* The Trident-mirror toolbar band was removed (the Trident top toolbar no longer
   exists); collapse it entirely so the Harpoon canvas starts right below the tabs. */
.harpoon-toolbar-band {
	display: none;
}

/* The token-tabs inherit the .tab styles */
.token-tab {
	/* All base styles are in shared-tabs.css via .tab */
}

/* ========== Sidebar (navigation + contextual block): now nested in the right panel ========== */
.properties-panel > .sidebar-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	min-height: 0; /* Fix for flex overflow */
	background: var(--color-bg-secondary);
	width: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding-top: 0;
}

/* Harpoon uses the same styles as izivedit for the sidebar */
/* The .controls-section, .variables-section, etc. classes are defined in sidebar.css */

/* Specific adjustment for Token Management */
.sidebar-left #token-management.controls-section {
	min-height: auto;
	margin-top: 0; /* No margin since sidebar has padding-top */
}

#token-management .controls-header {
	padding: 10px 12px; /* Same padding as the other sections */
}

#token-management .controls-content {
	padding-top: 0; /* Align the content to the same level */
}

/* ========== Main canvas ========== */
.canvas-main {
	grid-column: 1; /* ✅ Left column: canvas stuck to the Trident canvas */
	grid-row: 3 / 4; /* Content row (below the toolbar, above the zoom) */
	display: flex;
	flex-direction: column;
	background: var(--color-bg-primary);
	min-height: 0; /* ✅ Allows the container not to overflow the grid */
	overflow: hidden; /* ✅ Prevents overflow */
	margin-left: 0; /* ✅ FIX: Neutralize any inherited offset */
	padding-left: 0;
	left: auto;
	transform: none;
}

.canvas-toolbar {
	display: flex;
	gap: 8px;
	padding: 10px; /* ✅ FIX: Uniform padding, TOUCHES the sidebars */
	background: var(--color-bg-secondary);
	border-bottom: 1px solid var(--color-border-default);
}

.btn-tool {
	padding: 6px 12px;
	background: var(--color-bg-tertiary);
	color: var(--color-text-primary);
	border: 1px solid var(--color-border-default);
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	transition: all 0.2s;
}

.btn-tool:hover {
	background: var(--color-bg-secondary);
	border-color: var(--color-accent-primary);
}

.btn-tool.active {
	background: var(--color-accent-primary);
	color: white;
	border-color: var(--color-accent-primary);
}

.canvas-container {
	flex: 1;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%; /* ✅ FIX: Fills the full width of the column */
	margin: 0;
	padding: 0; /* ✅ FIX: NO padding - the canvas TOUCHES the sidebars */
}

/* ✅ FIX: NO width/height CSS! Only the width/height attributes count */
/* The canvas sizes itself via its width/height attributes set by setupCanvas() */
.canvas-container canvas {
	display: block;
	margin: 0; /* Removes any implicit margin */
	padding: 0; /* Removes any implicit padding */
	border: none; /* Removes any border */
	vertical-align: top; /* Avoids the baseline space */
	/* NO width/height CSS to avoid stretching the content */
}

/* ========== Zoom controls ========== */
.zoom-controls {
	grid-column: 1; /* Below the canvas (left column) */
	grid-row: 4 / 5; /* Zoom controls row */
	height: 40px;
	background: var(--color-bg-secondary);
	border-top: 1px solid var(--color-border-default);
	display: flex;
	align-items: center;
	padding: 0 10px; /* ✅ FIX: Uniform padding, TOUCHES the sidebars */
	gap: 8px;
	flex-shrink: 0; /* ✅ Never shrink or hide the controls */
	margin-left: 0; /* ✅ FIX: Neutralize any inherited offset */
	left: auto;
	transform: none;
}

.zoom-btn {
	width: 28px;
	height: 24px;
	background: #3c3c3c;
	border: 1px solid var(--color-border-default);
	color: var(--color-text-primary);
	border-radius: 3px;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.zoom-btn:hover {
	background: #4c4c4c;
	border-color: var(--color-accent-primary);
}

.zoom-btn:active {
	transform: scale(0.95);
}

.zoom-reset {
	width: auto;
	padding: 0 8px;
}

.zoom-slider-container {
	flex: 1;
	max-width: 200px;
	position: relative;
	margin: 0 8px;
}

.zoom-slider {
	flex: 1;
	max-width: 200px;
	height: 4px;
	-webkit-appearance: none;
	appearance: none;
	background: #3c3c3c;
	border-radius: 2px;
	outline: none;
	margin: 0 8px;
	position: relative;
	width: 100%;
}

.zoom-ticks {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	pointer-events: none;
}

.zoom-tick {
	position: absolute;
	width: 1px;
	height: 8px;
	top: -2px;
	background: #666;
}

.zoom-tick.tick-100 {
	background: #fff;
	width: 2px;
}

.zoom-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 14px;
	background: var(--color-accent-primary);
	border-radius: 50%;
	cursor: pointer;
}

.zoom-slider::-moz-range-thumb {
	width: 14px;
	height: 14px;
	background: var(--color-accent-primary);
	border-radius: 50%;
	cursor: pointer;
	border: none;
}

/* Display-only zoom indicator (no longer a button). */
.zoom-value {
	min-width: 45px;
	padding: 3px 6px;
	background: var(--color-bg-tertiary);
	border: 1px solid var(--color-border-default);
	color: #9cdcfe;
	border-radius: 3px;
	font-size: 11px;
	text-align: center;
	cursor: default;
	user-select: none;
	font-family: monospace;
}

/* ========== Properties panel ========== */
.properties-panel {
	grid-column: 2; /* ✅ Right column (far right of the Harpoon half) */
	grid-row: 2 / 5; /* Extends from the toolbar until after zoom-controls */
	background: var(--color-bg-secondary);
	border-left: 1px solid var(--color-border-default);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.panel-header {
	padding: var(--space-3);
	background: var(--color-bg-tertiary);
	border-bottom: 1px solid var(--color-border-default);
	font-weight: var(--font-weight-semibold);
}

.panel-header h2 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-primary);
}

.panel-content {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-4);
}

.no-selection {
	padding: var(--space-6);
	text-align: center;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.property-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.property-form h3 {
	margin: 0 0 var(--space-3) 0;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--color-border-default);
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.form-group label {
	font-size: 12px;
	font-weight: 500;
	color: var(--color-text-secondary);
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
	padding: 8px 12px;
	background: var(--color-bg-tertiary);
	color: var(--color-text-primary);
	border: 1px solid var(--color-border-default);
	border-radius: 4px;
	font-size: 13px;
	font-family: inherit;
}

.form-group textarea {
	min-height: 80px;
	resize: vertical;
	font-family: 'Courier New', monospace;
}

.form-group input[type="checkbox"] {
	margin-right: 8px;
}

.form-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

/* ========== Status bar ========== */
.harpoon-status {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 20px;
	background: var(--color-bg-secondary);
	border-top: 1px solid var(--color-border-default);
	font-size: 12px;
}

.status-left,
.status-right {
	display: flex;
	gap: 15px;
}

/* ========== Color configuration modal ========== */
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 1000;
	align-items: center;
	justify-content: center;
}

.modal.show {
	display: flex;
}

.modal-content {
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border-default);
	border-radius: 8px;
	width: 90%;
	max-width: 600px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	border-bottom: 1px solid var(--color-border-default);
}

.modal-header h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.btn-close {
	background: none;
	border: none;
	color: var(--color-text-primary);
	font-size: 28px;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: background 0.2s;
}

.btn-close:hover {
	background: var(--color-bg-tertiary);
}

.modal-body {
	padding: 20px;
	overflow-y: auto;
	flex: 1;
}

.color-section {
	margin-bottom: 20px;
}

.color-section h3 {
	margin: 0 0 12px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text-primary);
}

.color-input {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	padding: 8px 12px;
	background: var(--color-bg-tertiary);
	border-radius: 4px;
}

.color-input label {
	font-size: 13px;
	color: var(--color-text-primary);
}

.color-input input[type="color"] {
	width: 60px;
	height: 32px;
	border: 1px solid var(--color-border-default);
	border-radius: 4px;
	cursor: pointer;
}

.modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 15px 20px;
	border-top: 1px solid var(--color-border-default);
}

/* ========== Responsive ========== */
@media (max-width: 1400px) {
	.harpoon-main {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

@media (max-width: 1200px) {
	.harpoon-main {
		grid-template-columns: minmax(0, 1fr) 280px;
	}
}

@media (max-width: 900px) {
	.harpoon-main {
		grid-template-columns: minmax(0, 1fr) 250px;
	}

	.sidebar-section {
		padding: 10px;
	}

	.properties-panel .panel-content {
		padding: 10px;
	}
}

/* ========== Scrollbars ========== */
.sidebar-left::-webkit-scrollbar,
.properties-panel::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
	width: 8px;
}

.sidebar-left::-webkit-scrollbar-track,
.properties-panel::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track {
	background: var(--color-bg-tertiary);
}

.sidebar-left::-webkit-scrollbar-thumb,
.properties-panel::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
	background: var(--color-border-default);
	border-radius: 4px;
}

.sidebar-left::-webkit-scrollbar-thumb:hover,
.properties-panel::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover {
	background: var(--color-scrollbar-thumb-hover);
}

/* Fix for sidebar sections when not floating */
.sidebar-left .controls-section,
.sidebar-left .variables-section {
	position: relative;
}

/* Header layout (flex + left-aligned title) is defined once in
   components/sidebar.css for .controls-header/.variables-header/.history-header/
   .expandable-header. No `justify-content: space-between` here — it pushed the
   title to the right, out of line with the other section headers. */

/* ========== Element Type Buttons (Add Element section) ========== */

/* Container for element type buttons - centered in sidebar */
.element-types {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 8px 0;
}

/* Individual element type buttons - fixed size with centered icons */
.element-type-btn {
	width: 36px;
	height: 36px;
	padding: 0;
	background: #2d2d30;
	border: 1px solid var(--color-border-default);
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.element-type-btn:hover {
	background: var(--color-bg-hover);
	border-color: var(--color-accent-primary);
	transform: scale(1.05);
}

.element-type-btn:active {
	transform: scale(0.95);
}

.element-type-btn.dragging {
	opacity: 0.5;
}

/* SVG icons inside buttons are centered automatically by flex */
.element-type-btn svg {
	display: block;
	pointer-events: none;
}

/* ========== Bottom sections (Add Element + Shortcuts) ========== */

/* Push Add Element section to bottom of sidebar */
#add-element-section {
	margin-top: auto;
}

/* Shortcuts Info immediately below Add Element */
.shortcuts-info {
	padding: 12px;
	text-align: center;
	font-size: 11px;
	color: var(--color-text-secondary);
	border-top: 1px solid var(--color-border-default);
	background: var(--color-bg-tertiary);
}

/* ========== Modal for Connector Instances Editor ========== */
/* Styles moved to connector-instances-editor.css */

/* ========== Formula Editor Integration ========== */
.formula-preview-container {
	display: flex;
	gap: 8px;
	align-items: center;
}

.formula-preview {
	flex: 1;
	padding: 8px 12px;
	background: var(--color-bg-tertiary, #f5f5f5);
	border: 1px solid var(--color-border-default, #ddd);
	border-radius: 4px;
	font-family: 'Courier New', monospace;
	font-size: 13px;
	color: var(--color-text-primary, #333);
	min-height: 36px;
	display: flex;
	align-items: center;
}

.formula-preview em {
	color: var(--color-text-tertiary, #999);
	font-style: italic;
}

.btn-edit-formula {
	padding: 6px 12px;
	background: var(--color-accent-primary, #007bff);
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	white-space: nowrap;
	transition: background 0.2s;
}

.btn-edit-formula:hover {
	background: var(--color-primary-hover, #0056b3);
}

/* ===== Right-click context menu on SM/PN elements ===== */
.harpoon-context-menu {
	position: fixed;
	/* Topmost, above the control→trigger binding overlay (z-index 5000) and any
	   transition/arrow layer — matches the generic/alignment context-menu tier. */
	z-index: 12000;
	min-width: 190px;
	padding: 4px;
	background: var(--color-bg-secondary, #2a2a2a);
	border: 1px solid var(--color-border-default, #444);
	border-radius: 6px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.harpoon-context-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 7px 10px;
	background: transparent;
	color: var(--color-text-primary, #eee);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	text-align: left;
}
/* Leading node-shape icon: outline = create, filled = select/deselect. A fixed
   box keeps every label left-aligned whether or not an item carries an icon. */
.harpoon-context-icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.harpoon-context-icon svg { display: block; }
.harpoon-context-item:hover:not(:disabled) {
	background: var(--color-accent-primary, #007acc);
	color: #fff;
}
.harpoon-context-item.danger:hover:not(:disabled) {
	background: rgba(231, 76, 60, 0.9);
	color: #fff;
}
.harpoon-context-item:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ── Trigger properties: Input / Output / Firing tabs ─────────────────────────
   Groups the From (source states), To (target state) and Triggered-transitions
   sections into three tabs. The sections' own titles/content are unchanged; only
   one is visible at a time. No persistence — always reopens on Input. */
.trigger-io-tabs {
	margin-bottom: 12px;
}
.trigger-io-tabstrip {
	display: flex;
	gap: 2px;
	border: 1px solid var(--color-border-default, #444);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 8px;
}
.trigger-io-tab {
	flex: 1;
	padding: 6px 8px;
	background: var(--color-bg-primary, #1e1e1e);
	color: var(--color-text-secondary, #9a9a9a);
	border: none;
	border-right: 1px solid var(--color-border-default, #444);
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	transition: background 0.12s ease, color 0.12s ease;
}
.trigger-io-tab:last-child { border-right: none; }
.trigger-io-tab:hover {
	background: var(--color-bg-hover, #2f2f2f);
	color: var(--color-text-primary, #eee);
}
.trigger-io-tab.active {
	background: var(--color-accent-primary, #007acc);
	color: #fff;
}
.trigger-io-panel[hidden] { display: none; }

/* ── Discreet add/remove for the trigger Input/Firing sections ────────────────
   A small [+] next to the section title reveals a hidden picker (already-added
   items are filtered out); items carry a subtle × remove icon. Replaces the
   attention-grabbing always-visible dropdown + filled buttons. */
.io-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}
.io-section-head > label { margin: 0; }
/* .io-add-btn / .io-remove-btn appearance — see components/icon-button.css. */
.io-add-controls { margin-top: 6px; }
.io-add-controls[hidden] { display: none; }
.io-add-controls select {
	width: 100%;
	padding: 4px 8px;
	font-size: 11px;
	border: 1px solid var(--color-border-default, #444);
	border-radius: 4px;
	background: var(--color-bg-primary, #1e1e1e);
	color: var(--color-text-primary, #eee);
}