/**
 * Split Panel Layout Styles
 * For unified izivedit + Harpoon interface
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   SPLIT PANEL CONTAINER
   ═══════════════════════════════════════════════════════════════════════════════ */

.split-panel-container {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	background: var(--bg-primary, #f5f5f5);
}

.split-panel-container.is-dragging {
	cursor: col-resize;
	user-select: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SPLIT PANELS
   ═══════════════════════════════════════════════════════════════════════════════ */

.split-panel {
	height: 100%;
	overflow: auto;
	flex-shrink: 0;
	position: relative;
	/* #f8f9fa, not white: a white panel background bleeds through every transparent
	   gap (the sidebar resizer, any uncovered strip) as a white line. Match the
	   surround so nothing pure-white shows except the device canvas itself. */
	background: #f8f9fa;
}

.split-panel-left {
	border-right: 1px solid var(--border-color, #ddd);
}

.split-panel-right {
	border-left: 1px solid var(--border-color, #ddd);
	overflow: hidden; /* No scrollbar on the right panel */
}

/* When dragging, disable pointer events on panels */
.split-panel-container.is-dragging .split-panel {
	pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SEPARATOR
   ═══════════════════════════════════════════════════════════════════════════════ */

.split-separator {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 10px;
	margin-left: -5px;
	cursor: col-resize;
	z-index: 1000;
	background: rgba(0, 123, 255, 0.05); /* Slightly visible by default */
	transition: background 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
}

.split-separator:hover,
.split-separator:focus {
	background: rgba(0, 123, 255, 0.1);
	outline: none;
}

.split-separator:focus {
	box-shadow: inset 0 0 0 2px rgba(0, 123, 255, 0.5);
}

.split-separator.dragging {
	background: rgba(0, 123, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SEPARATOR HANDLE
   ═══════════════════════════════════════════════════════════════════════════════ */

.separator-handle {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	padding: 8px 2px;
	background: transparent;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: auto;
}

.split-separator:hover .separator-handle,
.split-separator:focus .separator-handle,
.split-separator.dragging .separator-handle {
	opacity: 1;
}

/* Grip (the three lines in the center) */
.separator-grip {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 8px 3px;
	background: var(--border-color, #ddd);
	border-radius: 4px;
	cursor: col-resize;
	transition: background 0.2s ease;
}

.split-separator:hover .separator-grip,
.split-separator:focus .separator-grip,
.split-separator.dragging .separator-grip {
	background: rgba(0, 123, 255, 0.3);
}

.separator-line {
	width: 1px;
	height: 20px;
	background: var(--text-secondary, #666);
	border-radius: 1px;
	transition: background 0.2s ease;
}

/* Hover effect: lines turn blue when hovering over separator */
.split-separator:hover .separator-line,
.split-separator:focus .separator-line,
.split-separator.dragging .separator-line {
	background: rgba(0, 123, 255, 0.9);
}

/* Collapse buttons with triangles - minimalist style */
.separator-collapse-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: auto;
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 22px;
	color: var(--text-secondary, #888);
	transition: all 0.2s ease;
	flex-shrink: 0;
	opacity: 0.6;
}

.separator-collapse-btn:hover {
	color: rgba(0, 123, 255, 0.9);
	opacity: 1;
	transform: scale(1.2);
}

.separator-collapse-btn:active {
	transform: scale(1.0);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PANEL HEADERS (Optional)
   ═══════════════════════════════════════════════════════════════════════════════ */

.panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: var(--bg-secondary, #f9f9f9);
	border-bottom: 1px solid var(--border-color, #ddd);
	font-weight: 600;
	font-size: 14px;
	color: var(--text-primary, #333);
}

.panel-header-title {
	display: flex;
	align-items: center;
	gap: 8px;
}

.panel-header-actions {
	display: flex;
	gap: 4px;
}

.panel-header-btn {
	padding: 4px 8px;
	background: transparent;
	border: 1px solid var(--border-color, #ddd);
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	color: var(--text-secondary, #666);
	transition: all 0.2s ease;
}

.panel-header-btn:hover {
	background: var(--bg-hover, #f0f0f0);
	color: var(--text-primary, #333);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
	.split-separator {
		width: 12px;
		margin-left: -6px;
	}

	.separator-handle {
		padding: 10px 3px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   COLLAPSED STATES
   ═══════════════════════════════════════════════════════════════════════════════ */

.split-panel.collapsed-left {
	width: 0 !important;
	min-width: 0;
	overflow: hidden;
	border-right: none;
}

.split-panel.collapsed-right {
	width: 0 !important;
	min-width: 0;
	overflow: hidden;
	border-left: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

.split-panel {
	transition: width 0.3s ease;
}

.split-separator {
	transition: left 0.3s ease, background 0.2s ease;
}

/* Disable transitions when dragging */
.split-panel-container.is-dragging .split-panel,
.split-panel-container.is-dragging .split-separator {
	transition: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Focus indicator for keyboard navigation */
.split-separator:focus-visible {
	background: rgba(0, 123, 255, 0.15);
	box-shadow: inset 0 0 0 2px rgba(0, 123, 255, 0.7);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.split-separator {
		border: 2px solid currentColor;
	}

	.separator-handle {
		background: currentColor;
	}

	.separator-line {
		background: white;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.split-panel,
	.split-separator,
	.separator-handle {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   "ACTIVE PANEL" FEEDBACK (on click within a half)
   Chosen combination: (2) subtle inner border + (3) inactive dimmed.
   --------------------------------------------------------------------------- */

/* (2) Subtle inner border all around the active panel */
.split-panel.panel-active {
	box-shadow: inset 0 0 0 1px rgba(0, 122, 204, 0.55);
}

/* (3) INACTIVE panel slightly dimmed (the active one stays fully crisp) */
.split-panel:not(.panel-active) {
	filter: brightness(0.96) saturate(0.95);
}

/* Alternatives not chosen:
   (1) Top accent line
       .split-panel.panel-active { box-shadow: inset 0 2px 0 0 var(--accent-primary, #007acc); }
   (4) Accent side bar on the separator side
       .split-panel-left.panel-active  { box-shadow: inset -3px 0 0 0 var(--accent-primary, #007acc); }
       .split-panel-right.panel-active { box-shadow: inset  3px 0 0 0 var(--accent-primary, #007acc); }
   (5) Underlined toolbar of the active panel
       .split-panel.panel-active .alignment-toolbar,
       .split-panel.panel-active #harpoon-toolbar-band { border-bottom: 2px solid var(--accent-primary, #007acc); }
*/