/**
 * Unified Styles for izivedit + Harpoon Interface
 * Additional styles to ensure cohesive appearance
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   CSS VARIABLES - UNIFIED THEME
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
	/* Primary colors */
	--unified-primary: #007bff;
	--unified-primary-dark: #0056b3;
	--unified-primary-light: #4da3ff;

	/* Background colors */
	--unified-bg-primary: #ffffff;
	--unified-bg-secondary: #f8f9fa;
	--unified-bg-tertiary: #e9ecef;

	/* Text colors */
	--unified-text-primary: #212529;
	--unified-text-secondary: #6c757d;
	--unified-text-muted: #adb5bd;

	/* Border colors */
	--unified-border-color: #dee2e6;
	--unified-border-dark: #adb5bd;

	/* Status colors */
	--unified-success: #28a745;
	--unified-danger: #dc3545;
	--unified-warning: #ffc107;
	--unified-info: #17a2b8;

	/* Shadows */
	--unified-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--unified-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	--unified-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);

	/* Transitions */
	--unified-transition: all 0.2s ease;
	--unified-transition-fast: all 0.1s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PANEL HEADERS
   ═══════════════════════════════════════════════════════════════════════════════ */

.panel-header {
	user-select: none;
	-webkit-user-select: none;
}

.panel-header-title {
	font-weight: 600;
	color: var(--unified-text-primary);
}

/* Add left panel header if needed */
#izivedit-panel .workspace::before {
	content: '';
	display: none; /* No header for left panel by default */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   WORKSPACE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Ensure izivedit workspace fills the panel */
#izivedit-panel .workspace {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HARPOON PANEL CRITICAL FIX
   Maximum specificity to guarantee display: grid on .harpoon-main
   ═══════════════════════════════════════════════════════════════════════════════ */

/* CRITICAL FIX: Force .harpoon-main to use CSS Grid layout
   Uses a very high specificity (#id + 2 classes) to ensure
   that this rule wins over all others, even with browser cache */
#harpoon-panel .harpoon-editor-unified > .harpoon-main {
	display: grid !important;
	/* No flex-direction because we use grid, not flex */
}

/* CRITICAL FIX: Force grid children to respect grid columns
   The .canvas-main and .properties-panel elements must have width: auto
   so that the grid can size them correctly according to grid-template-columns */
#harpoon-panel .harpoon-main > .canvas-main {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}

#harpoon-panel .harpoon-main > .properties-panel {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}

#izivedit-panel .container {
	flex: 1;
	overflow: hidden;
	min-height: 0; /* Allows vertical centering of the canvas */
}

/* Force canvas-area to use full height for proper vertical centering */
#izivedit-panel .canvas-area {
	min-height: 0; /* Fix flex overflow for vertical centering */
	min-width: 0 !important; /* ✅ CRITICAL: Allows panel to shrink below canvas size */
}

#izivedit-panel .canvas-container {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 0;
	min-width: 0 !important; /* ✅ CRITICAL: Allows horizontal scroll if canvas overflows */
}

/* CRITICAL FIX: Force fixed widths for izivedit sidebars
   These rules have a higher specificity (#izivedit-panel .sidebar-left = 0,1,1,0)
   than the generic rules in harpoon-editor.css (.sidebar-left = 0,0,1,0)
   This guarantees that the widths stay fixed even if harpoon-editor.css is loaded afterwards */
/* Width driven by --izv-sidebar-width (default 320px), set by the resize handle
   (src/ui/sidebar-resize.js). Kept !important to still win over harpoon-editor.css. */
#izivedit-panel .sidebar-left {
	width: var(--izv-sidebar-width, 320px) !important;
	min-width: var(--izv-sidebar-width, 320px) !important;
	max-width: var(--izv-sidebar-width, 320px) !important;
	flex-shrink: 0 !important;
	overflow-y: auto !important;
}

#izivedit-panel .sidebar-right {
	width: var(--izv-sidebar-width, 320px) !important;
	min-width: var(--izv-sidebar-width, 320px) !important;
	max-width: var(--izv-sidebar-width, 320px) !important;
	flex-shrink: 0 !important;
}

/* Empty right sidebar (edit mode): hidden to stick the two canvases together. */
#izivedit-panel .sidebar-right:empty {
	display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MENUBAR ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

.menubar {
	background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
	border-bottom: 1px solid var(--unified-border-color);
	box-shadow: var(--unified-shadow-sm);
}

.menu-dropdown {
	box-shadow: var(--unified-shadow-lg);
	border: 1px solid var(--unified-border-color);
	border-radius: 4px;
}

.menu-option:hover {
	background: var(--unified-primary);
	color: white;
	transition: var(--unified-transition-fast);
}

.menu-option.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.unified-status {
	display: flex;
	align-items: center;
	padding: 0 12px;
	font-size: 12px;
	color: var(--unified-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SCROLLBAR STYLING
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Webkit browsers (Chrome, Safari, Edge) */
.split-panel::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.split-panel::-webkit-scrollbar-track {
	background: var(--unified-bg-secondary);
}

.split-panel::-webkit-scrollbar-thumb {
	background: var(--unified-border-dark);
	border-radius: 5px;
}

.split-panel::-webkit-scrollbar-thumb:hover {
	background: var(--unified-text-secondary);
}

/* Firefox */
.split-panel {
	scrollbar-width: thin;
	scrollbar-color: var(--unified-border-dark) var(--unified-bg-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE LAYOUT
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
	.panel-header {
		padding: 6px 12px;
		font-size: 12px;
	}

	.menu-label {
		font-size: 13px;
	}
}

@media (max-width: 768px) {
	.split-panel-container {
		flex-direction: column !important;
	}

	.split-separator {
		width: 100% !important;
		height: 10px !important;
		top: auto !important;
		left: 0 !important;
		right: 0 !important;
		cursor: row-resize !important;
	}

	.split-panel {
		width: 100% !important;
		height: 50% !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FOCUS STATES & ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Focus visible for keyboard navigation */
button:focus-visible,
.menu-label:focus-visible,
.menu-option:focus-visible {
	outline: 2px solid var(--unified-primary);
	outline-offset: 2px;
}

/* Keyboard navigation highlight */
.menu-option:focus {
	background: var(--unified-bg-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LOADING STATES
   ═══════════════════════════════════════════════════════════════════════════════ */

.loading-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.loading-spinner {
	animation: spin 1s linear infinite;
}

/* The boot loading screen switched to a progress bar, so the `spin` keyframe it
   used to define inline is gone. Define it here so this in-app overlay spinner
   stays self-contained. */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UNIFIED PANEL CONSISTENCY
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Ensure both panels have consistent padding and spacing */
.split-panel-left,
.split-panel-right {
	background: var(--unified-bg-primary);
}

/* Ensure consistent font rendering */
#izivedit-panel,
#harpoon-panel {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BUTTON CONSISTENCY
   ═══════════════════════════════════════════════════════════════════════════════ */

button,
.btn,
.menu-option {
	font-family: inherit;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

button:disabled,
.btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MODAL OVERLAYS
   ═══════════════════════════════════════════════════════════════════════════════ */

.modal.show {
	z-index: 10000;
}

.modal-backdrop {
	z-index: 9999;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TOOLTIPS & HINTS
   ═══════════════════════════════════════════════════════════════════════════════ */

[title] {
	cursor: help;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

@media print {
	.menubar,
	.panel-header,
	.split-separator {
		display: none !important;
	}

	.split-panel-container {
		flex-direction: column !important;
	}

	.split-panel {
		width: 100% !important;
		page-break-inside: avoid;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT (OPTIONAL)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
	:root {
		--unified-bg-primary: #1e1e1e;
		--unified-bg-secondary: #2d2d2d;
		--unified-bg-tertiary: #3d3d3d;
		--unified-text-primary: #e0e0e0;
		--unified-text-secondary: #a0a0a0;
		--unified-text-muted: #707070;
		--unified-border-color: #404040;
		--unified-border-dark: #606060;
	}

	.menubar {
		background: linear-gradient(180deg, #2d2d2d 0%, #1e1e1e 100%);
	}

	.panel-header {
		background: linear-gradient(180deg, #2d2d2d 0%, #252525 100%);
	}
}

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

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideDown {
	from {
		transform: translateY(-10px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.menu-dropdown {
	animation: slideDown 0.15s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════════ */

.hidden {
	display: none !important;
}

.invisible {
	visibility: hidden !important;
}

.text-center {
	text-align: center !important;
}

.text-muted {
	color: var(--unified-text-muted) !important;
}

.text-success {
	color: var(--unified-success) !important;
}

.text-danger {
	color: var(--unified-danger) !important;
}

.text-warning {
	color: var(--unified-warning) !important;
}

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }