/**
 * Dev Tools Styles
 *
 * Unified CSS for all theme development tools.
 * This file is only loaded in development environments.
 *
 * STYLE ISOLATION: Uses high-specificity selectors and explicit property
 * declarations to prevent theme styles from affecting DevTools.
 *
 * @package Theme_Dev_Tools
 */

/* ============================================================================
   Dev Tools Dock
   ============================================================================ */

.dev-tools-scope .dev-tools-dock {
	position: fixed !important;
	z-index: 999999 !important;
	font-family: system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: #ffffff !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	word-spacing: 0 !important;
}

.dev-tools-scope .dev-tools-dock--bottom-right {
	bottom: 20px !important;
	right: 20px !important;
}

.dev-tools-scope .dev-tools-dock--bottom-left {
	bottom: 20px !important;
	left: 20px !important;
}

/* Main Toggle Button */
.dev-tools-scope .dev-tools-toggle {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 10px 14px !important;
	margin: 0 !important;
	background: #1a1a1a !important;
	color: #ffffff !important;
	border: 1px solid #333333 !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
	cursor: pointer !important;
	font-family: system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: all 0.2s ease !important;
}

.dev-tools-scope .dev-tools-toggle:hover {
	background: #2a2a2a !important;
	transform: translateY(-2px) !important;
}

/* SVG Icons */
.dev-tools-scope .dev-tools-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 14px !important;
	height: 14px !important;
	flex-shrink: 0 !important;
}

.dev-tools-scope .dev-tools-icon svg {
	width: 100% !important;
	height: 100% !important;
	fill: currentColor !important;
}

/* Legacy FA icon support */
.dev-tools-scope .dev-tools-toggle i {
	font-size: 12px !important;
	color: #ffffff !important;
}

.dev-tools-scope .dev-tools-toggle .dev-tools-toggle-label {
	color: #ffffff !important;
}

/* Hide toggle when panel is open */
.dev-tools-scope .dev-tools-dock.is-open .dev-tools-toggle {
	display: none !important;
}

/* ============================================================================
   Dev Tools Panel
   ============================================================================ */

.dev-tools-scope .dev-tools-panel {
	position: absolute !important;
	bottom: 0 !important;
	right: 0 !important;
	width: 240px !important;
	background: #1a1a1a !important;
	border: 1px solid #333333 !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
	overflow: hidden !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(10px) !important;
	transition: all 0.2s ease !important;
}

.dev-tools-scope .dev-tools-dock--bottom-left .dev-tools-panel {
	right: auto !important;
	left: 0 !important;
}

.dev-tools-scope .dev-tools-dock.is-open .dev-tools-panel {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
}

/* Panel Header */
.dev-tools-scope .dev-tools-panel-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 12px 14px !important;
	margin: 0 !important;
	border-bottom: 1px solid #333333 !important;
	background: transparent !important;
}

.dev-tools-scope .dev-tools-panel-title {
	font-family: system-ui, sans-serif !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: #ffffff !important;
	margin: 0 !important;
	padding: 0 !important;
}

.dev-tools-scope .dev-tools-panel-title span {
	color: #ffffff !important;
}

.dev-tools-scope .dev-tools-close {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 4px !important;
	color: #888888 !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

.dev-tools-scope .dev-tools-close:hover {
	background: #2a2a2a !important;
	color: #ffffff !important;
}

.dev-tools-scope .dev-tools-close i {
	color: inherit !important;
}

/* Tools List */
.dev-tools-scope .dev-tools-list {
	padding: 8px !important;
	margin: 0 !important;
	list-style: none !important;
	background: transparent !important;
}

.dev-tools-scope .dev-tools-item {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: 100% !important;
	padding: 8px 12px !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 6px !important;
	color: #ffffff !important;
	cursor: pointer !important;
	font-family: system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	text-align: left !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: all 0.15s ease !important;
}

.dev-tools-scope .dev-tools-item:hover {
	background: #2a2a2a !important;
}

.dev-tools-scope .dev-tools-item.is-active {
	background: #3b82f6 !important;
}

.dev-tools-scope .dev-tools-item i {
	width: 16px !important;
	text-align: center !important;
	font-size: 12px !important;
	opacity: 0.7 !important;
	color: #ffffff !important;
}

.dev-tools-scope .dev-tools-item.is-active i {
	opacity: 1 !important;
}

.dev-tools-scope .dev-tools-item-label {
	flex: 1 !important;
	color: #ffffff !important;
	font-family: system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
}

.dev-tools-scope .dev-tools-item-shortcut {
	padding: 2px 5px !important;
	margin: 0 !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border-radius: 4px !important;
	font-family: "SF Mono", Monaco, "Courier New", monospace !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	color: #888888 !important;
}

.dev-tools-scope .dev-tools-item.is-active .dev-tools-item-shortcut {
	background: rgba(255, 255, 255, 0.2) !important;
	color: #ffffff !important;
}

/* Panel Footer */
.dev-tools-scope .dev-tools-panel-footer {
	display: flex !important;
	gap: 8px !important;
	align-items: center !important;
	padding: 8px !important;
	margin: 0 !important;
	border-top: 1px solid #333333 !important;
	background: transparent !important;
}

.dev-tools-scope .dev-tools-all-off {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	flex: 1 !important;
	padding: 8px 12px !important;
	margin: 0 !important;
	background: transparent !important;
	border: 1px solid #333333 !important;
	border-radius: 6px !important;
	color: #888888 !important;
	cursor: pointer !important;
	font-family: system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
}

.dev-tools-scope .dev-tools-all-off:hover {
	background: #ef4444 !important;
	border-color: #ef4444 !important;
	color: #ffffff !important;
}

.dev-tools-scope .dev-tools-all-off i {
	color: inherit !important;
}

.dev-tools-scope .dev-tools-all-off span {
	color: inherit !important;
	font-family: system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
}

.dev-tools-scope .dev-tools-settings-link {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	margin: 0 !important;
	background: transparent !important;
	border: 1px solid #333333 !important;
	border-radius: 6px !important;
	color: #888888 !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
}

.dev-tools-scope .dev-tools-settings-link:hover {
	background: #2a2a2a !important;
	color: #ffffff !important;
}

.dev-tools-scope .dev-tools-settings-link i {
	color: inherit !important;
}

/* ============================================================================
   Module Labels
   ============================================================================ */

.dev-tools-scope.dev-tools-module-label {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	z-index: 999998 !important;
	display: none !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 10px !important;
	margin: 0 !important;
	background: #1a1a1a !important;
	border: 1px solid #333333 !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
	font-family: system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: #ffffff !important;
	white-space: nowrap !important;
}

.dev-tools-labels-active .dev-tools-scope.dev-tools-module-label {
	display: flex !important;
}

.dev-tools-labels-active [data-module-name] {
	position: relative;
}

.dev-tools-scope.dev-tools-module-label .dev-tools-module-label-text {
	font-family: "SF Mono", Monaco, "Courier New", monospace !important;
	font-size: 12px !important;
	color: #ffffff !important;
}

.dev-tools-scope.dev-tools-module-label .dev-tools-module-label-buttons {
	display: flex !important;
	gap: 4px !important;
}

.dev-tools-scope.dev-tools-module-label .dev-tools-module-label-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	height: 24px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: #2a2a2a !important;
	border: none !important;
	border-radius: 4px !important;
	color: #888888 !important;
	cursor: pointer !important;
	font-size: 12px !important;
	transition: all 0.15s ease !important;
}

.dev-tools-scope.dev-tools-module-label .dev-tools-module-label-btn:hover {
	background: #3b82f6 !important;
	color: #ffffff !important;
}

.dev-tools-scope.dev-tools-module-label .dev-tools-module-label-btn.is-copied {
	background: #22c55e !important;
	color: #ffffff !important;
}

.dev-tools-scope.dev-tools-module-label .dev-tools-module-label-btn i {
	color: inherit !important;
}

/* ============================================================================
   Module Reorder Panel
   ============================================================================ */

.dev-tools-scope .dev-tools-reorder-panel {
	position: fixed !important;
	top: 50% !important;
	right: -320px !important;
	transform: translateY(-50%) !important;
	z-index: 1000000 !important;
	width: 300px !important;
	max-height: 80vh !important;
	background: #1a1a1a !important;
	border: 1px solid #333333 !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
	font-family: system-ui, sans-serif !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: #ffffff !important;
	transition: right 0.3s ease !important;
	display: flex !important;
	flex-direction: column !important;
}

.dev-tools-scope .dev-tools-reorder-panel.is-open {
	right: 20px !important;
}

.dev-tools-scope .dev-tools-reorder-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 14px 16px !important;
	margin: 0 !important;
	border-bottom: 1px solid #333333 !important;
	font-weight: 600 !important;
	color: #ffffff !important;
}

.dev-tools-scope .dev-tools-reorder-header span {
	color: #ffffff !important;
}

.dev-tools-scope .dev-tools-reorder-close {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 4px !important;
	color: #888888 !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

.dev-tools-scope .dev-tools-reorder-close:hover {
	background: #2a2a2a !important;
	color: #ffffff !important;
}

.dev-tools-scope .dev-tools-reorder-close i {
	color: inherit !important;
}

.dev-tools-scope .dev-tools-reorder-list {
	flex: 1 !important;
	overflow-y: auto !important;
	padding: 8px !important;
	margin: 0 !important;
	list-style: none !important;
}

.dev-tools-scope .dev-tools-reorder-item {
	padding: 12px 14px !important;
	margin: 0 0 6px 0 !important;
	background: #2a2a2a !important;
	border: 1px solid #333333 !important;
	border-radius: 6px !important;
	cursor: grab !important;
	font-size: 12px !important;
	color: #ffffff !important;
	transition: all 0.15s ease !important;
}

.dev-tools-scope .dev-tools-reorder-item:hover {
	border-color: #3b82f6 !important;
}

.dev-tools-scope .dev-tools-reorder-item:active {
	cursor: grabbing !important;
}

.dev-tools-scope .dev-tools-reorder-item span {
	color: #ffffff !important;
}

.dev-tools-scope .dev-tools-reorder-ghost {
	opacity: 0.5 !important;
	background: #3b82f6 !important;
}

.dev-tools-scope .dev-tools-reorder-chosen {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.dev-tools-scope .dev-tools-reorder-footer {
	display: flex !important;
	gap: 8px !important;
	padding: 12px 16px !important;
	margin: 0 !important;
	border-top: 1px solid #333333 !important;
}

.dev-tools-scope .dev-tools-reorder-btn {
	flex: 1 !important;
	padding: 10px 16px !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 6px !important;
	font-family: system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-align: center !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

.dev-tools-scope .dev-tools-reorder-cancel {
	background: #2a2a2a !important;
	color: #ffffff !important;
}

.dev-tools-scope .dev-tools-reorder-cancel:hover {
	background: #3a3a3a !important;
}

.dev-tools-scope .dev-tools-reorder-save {
	background: #3b82f6 !important;
	color: #ffffff !important;
}

.dev-tools-scope .dev-tools-reorder-save:hover {
	background: #2563eb !important;
}

.dev-tools-scope .dev-tools-reorder-save:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

.dev-tools-reorder-highlight {
	outline: 3px solid #3b82f6 !important;
	outline-offset: 2px;
}

.dev-tools-scope .dev-tools-reorder-error {
	padding: 20px !important;
	margin: 0 !important;
	text-align: center !important;
	color: #dc3545 !important;
}

.dev-tools-scope .dev-tools-reorder-error p {
	margin: 0 0 15px 0 !important;
	line-height: 1.5 !important;
	color: inherit !important;
}

/* ============================================================================
   Grid Overlay
   ============================================================================ */

.dev-tools-scope .dev-tools-grid-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 999997 !important;
	pointer-events: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.2s ease !important;
}

.dev-tools-scope .dev-tools-grid-overlay.is-visible {
	opacity: 1 !important;
	visibility: visible !important;
}

.dev-tools-scope .dev-tools-grid-container {
	/*
	 * Width, grid-template-columns, and gap are set dynamically
	 * via config.php -> class-tool-grid-overlay.php
	 * Do NOT hardcode these values here or they will override the config!
	 */
	height: 100% !important;
	margin: 0 auto !important;
	padding: 0 !important;
	display: grid !important;
}

.dev-tools-scope .dev-tools-grid-column {
	background: rgba(255, 0, 0, 0.08) !important;
	border-left: 1px solid rgba(255, 0, 0, 0.15) !important;
	border-right: 1px solid rgba(255, 0, 0, 0.15) !important;
}

/* ============================================================================
   Browser Width Indicator
   ============================================================================ */

.dev-tools-scope .dev-tools-browser-width {
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 999997 !important;
	height: 28px !important;
	background: #1a1a1a !important;
	border-top: 1px solid #333333 !important;
	pointer-events: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.2s ease !important;
	overflow: hidden !important;
}

.dev-tools-scope .dev-tools-browser-width.is-visible {
	opacity: 1 !important;
	visibility: visible !important;
}

.dev-tools-scope .dev-tools-browser-width-ruler {
	position: relative !important;
	width: 1920px !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.dev-tools-scope .dev-tools-browser-width-marker {
	position: absolute !important;
	top: 0 !important;
	height: 100% !important;
	border-left: 1px solid #333333 !important;
	padding-left: 6px !important;
	display: flex !important;
	align-items: center !important;
}

.dev-tools-scope .dev-tools-browser-width-marker[data-bp="base"] {
	background: linear-gradient(90deg, rgba(107, 114, 128, 0.2) 0%, transparent 100%) !important;
}

.dev-tools-scope .dev-tools-browser-width-marker[data-bp="sm"] {
	background: linear-gradient(90deg, rgba(139, 92, 246, 0.2) 0%, transparent 100%) !important;
}

.dev-tools-scope .dev-tools-browser-width-marker[data-bp="md"] {
	background: linear-gradient(90deg, rgba(59, 130, 246, 0.2) 0%, transparent 100%) !important;
}

.dev-tools-scope .dev-tools-browser-width-marker[data-bp="lg"] {
	background: linear-gradient(90deg, rgba(34, 197, 94, 0.2) 0%, transparent 100%) !important;
}

.dev-tools-scope .dev-tools-browser-width-marker[data-bp="xl"] {
	background: linear-gradient(90deg, rgba(245, 158, 11, 0.2) 0%, transparent 100%) !important;
}

.dev-tools-scope .dev-tools-browser-width-marker[data-bp="2xl"] {
	background: linear-gradient(90deg, rgba(239, 68, 68, 0.2) 0%, transparent 100%) !important;
}

.dev-tools-scope .dev-tools-browser-width-marker-label {
	font-family: "SF Mono", Monaco, "Courier New", monospace !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: #888888 !important;
	text-transform: uppercase !important;
}

.dev-tools-scope .dev-tools-browser-width-current {
	position: fixed !important;
	bottom: 4px !important;
	right: 80px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 2px 8px !important;
	margin: 0 !important;
	background: #3b82f6 !important;
	border-radius: 4px !important;
	font-family: "SF Mono", Monaco, "Courier New", monospace !important;
	font-size: 12px !important;
	color: #ffffff !important;
}

.dev-tools-scope .dev-tools-browser-width-px {
	font-weight: 600 !important;
	color: #ffffff !important;
}

.dev-tools-scope .dev-tools-browser-width-bp {
	text-transform: uppercase !important;
	opacity: 0.8 !important;
	color: #ffffff !important;
}

/* ============================================================================
   Outline Toggle (applies to body)
   ============================================================================ */

.dev-tools-outline-divs div {
	outline: 1px solid red !important;
}

.dev-tools-outline-all * {
	outline: 1px solid red !important;
}

.dev-tools-outline-all div {
	outline: 1px solid red !important;
}

.dev-tools-outline-all p,
.dev-tools-outline-all span,
.dev-tools-outline-all a,
.dev-tools-outline-all li {
	outline: 1px solid blue !important;
}

.dev-tools-outline-all h1,
.dev-tools-outline-all h2,
.dev-tools-outline-all h3,
.dev-tools-outline-all h4,
.dev-tools-outline-all h5,
.dev-tools-outline-all h6 {
	outline: 1px solid green !important;
}

.dev-tools-outline-all img,
.dev-tools-outline-all video {
	outline: 1px solid orange !important;
}

.dev-tools-outline-all button,
.dev-tools-outline-all input,
.dev-tools-outline-all select,
.dev-tools-outline-all textarea {
	outline: 1px solid purple !important;
}

.dev-tools-outline-all section,
.dev-tools-outline-all article,
.dev-tools-outline-all main,
.dev-tools-outline-all header,
.dev-tools-outline-all footer,
.dev-tools-outline-all nav {
	outline: 2px solid darkred !important;
}

/* ============================================================================
   Typography Inspector
   ============================================================================ */

.dev-tools-scope.dev-tools-typography-label-wrapper {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	pointer-events: none !important;
	z-index: 999998 !important;
}

.dev-tools-scope.dev-tools-typography-label-wrapper .dev-tools-typography-label {
	position: absolute !important;
	top: -8px !important;
	left: -2px !important;
	padding: 2px 6px !important;
	margin: 0 !important;
	font-size: 12px !important;
	font-family: "SF Mono", Monaco, "Courier New", monospace !important;
	font-weight: bold !important;
	line-height: 1.2 !important;
	letter-spacing: 0.5px !important;
	border-radius: 3px !important;
	pointer-events: none !important;
	white-space: nowrap !important;
	opacity: 0.95 !important;
	animation: devToolsLabelFadeIn 0.2s ease-out forwards !important;
}

@keyframes devToolsLabelFadeIn {
	from {
		opacity: 0;
		transform: translate(-2px, -8px);
	}
	to {
		opacity: 0.95;
		transform: translate(-2px, 0);
	}
}

/* ============================================================================
   Element Picker
   ============================================================================ */

/* Active state - cursor change */
.dev-tools-element-picker-active {
	cursor: crosshair !important;
}

.dev-tools-element-picker-active * {
	cursor: crosshair !important;
}

/* Highlight overlay */
.dev-tools-scope.dev-tools-element-picker-highlight {
	position: absolute !important;
	z-index: 999990 !important;
	pointer-events: none !important;
	background: rgba(59, 130, 246, 0.1) !important;
	border: 2px solid #3b82f6 !important;
	border-radius: 2px !important;
	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
}

/* Tooltip */
.dev-tools-scope.dev-tools-element-picker-tooltip {
	position: fixed !important;
	z-index: 999999 !important;
	max-width: 400px !important;
	padding: 10px 12px !important;
	margin: 0 !important;
	background: #1a1a1a !important;
	border: 1px solid #333333 !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
	font-family: system-ui, sans-serif !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: #ffffff !important;
	pointer-events: none !important;
}

.dev-tools-scope.dev-tools-element-picker-tooltip .dev-tools-picker-selector {
	padding: 6px 8px !important;
	margin: 0 0 8px 0 !important;
	background: #2a2a2a !important;
	border-radius: 4px !important;
	font-family: "SF Mono", Monaco, "Courier New", monospace !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #22c55e !important;
	word-break: break-all !important;
}

.dev-tools-scope.dev-tools-element-picker-tooltip .dev-tools-picker-styles {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	margin: 0 0 6px 0 !important;
}

.dev-tools-scope.dev-tools-element-picker-tooltip .dev-tools-picker-tag {
	padding: 2px 6px !important;
	background: #3b82f6 !important;
	border-radius: 3px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #ffffff !important;
	text-transform: uppercase !important;
}

.dev-tools-scope.dev-tools-element-picker-tooltip .dev-tools-picker-id {
	padding: 2px 6px !important;
	background: #f59e0b !important;
	border-radius: 3px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #000000 !important;
}

.dev-tools-scope.dev-tools-element-picker-tooltip .dev-tools-picker-class {
	padding: 2px 6px !important;
	background: #8b5cf6 !important;
	border-radius: 3px !important;
	font-size: 12px !important;
	color: #ffffff !important;
}

.dev-tools-scope.dev-tools-element-picker-tooltip .dev-tools-picker-computed {
	margin: 0 0 6px 0 !important;
	padding: 0 !important;
	font-family: "SF Mono", Monaco, "Courier New", monospace !important;
	font-size: 12px !important;
	color: #888888 !important;
}

.dev-tools-scope.dev-tools-element-picker-tooltip .dev-tools-picker-template {
	padding: 4px 8px !important;
	margin: 0 0 6px 0 !important;
	background: rgba(34, 197, 94, 0.15) !important;
	border-left: 2px solid #22c55e !important;
	font-family: "SF Mono", Monaco, "Courier New", monospace !important;
	font-size: 12px !important;
	color: #22c55e !important;
}

.dev-tools-scope.dev-tools-element-picker-tooltip .dev-tools-picker-text-preview {
	padding: 2px 8px !important;
	margin: 0 0 6px 0 !important;
	font-size: 11px !important;
	color: #999999 !important;
	font-style: italic !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 350px !important;
}

.dev-tools-scope.dev-tools-element-picker-tooltip .dev-tools-picker-hint {
	padding-top: 6px !important;
	margin: 0 !important;
	border-top: 1px solid #333333 !important;
	font-size: 12px !important;
	color: #666666 !important;
	text-align: center !important;
}

/* Context Menu */
.dev-tools-scope.dev-tools-element-picker-menu {
	position: fixed !important;
	z-index: 1000001 !important;
	min-width: 180px !important;
	padding: 6px !important;
	margin: 0 !important;
	background: #1a1a1a !important;
	border: 1px solid #333333 !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
	font-family: system-ui, sans-serif !important;
	font-size: 12px !important;
}

.dev-tools-scope.dev-tools-element-picker-menu .dev-tools-element-picker-menu-item {
	display: block !important;
	width: 100% !important;
	padding: 8px 12px !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 4px !important;
	font-family: system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: #ffffff !important;
	text-align: left !important;
	cursor: pointer !important;
	transition: all 0.1s ease !important;
}

.dev-tools-scope.dev-tools-element-picker-menu .dev-tools-element-picker-menu-item:hover {
	background: #3b82f6 !important;
}

.dev-tools-scope.dev-tools-element-picker-menu .dev-tools-element-picker-menu-divider {
	height: 1px !important;
	margin: 6px 0 !important;
	background: #333333 !important;
}

/* Copy Feedback Toast */
.dev-tools-scope.dev-tools-element-picker-feedback {
	position: fixed !important;
	bottom: 80px !important;
	left: 50% !important;
	transform: translateX(-50%) translateY(20px) !important;
	z-index: 1000002 !important;
	padding: 12px 20px !important;
	margin: 0 !important;
	background: #22c55e !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
	font-family: system-ui, sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #ffffff !important;
	opacity: 0 !important;
	transition: all 0.3s ease !important;
}

.dev-tools-scope.dev-tools-element-picker-feedback.is-visible {
	opacity: 1 !important;
	transform: translateX(-50%) translateY(0) !important;
}

/* ============================================================================
   Module Spacing Tool
   ============================================================================ */

body.dev-tools-spacing-active .acf-module-wrapper {
	outline: 1px dashed rgba(59, 130, 246, 0.4) !important;
	outline-offset: -1px !important;
}

.dev-tools-spacing-puck {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	z-index: 999990 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 4px 10px !important;
	margin: 0 !important;
	background: #3b82f6 !important;
	border: none !important;
	border-radius: 999px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
	font-family: system-ui, sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	color: #ffffff !important;
	cursor: pointer !important;
	opacity: 0.6 !important;
	transition: opacity 0.15s ease, background 0.15s ease !important;
}

.dev-tools-spacing-puck:hover,
.dev-tools-spacing-puck:focus-visible {
	opacity: 1 !important;
	background: #2563eb !important;
	outline: none !important;
}

.acf-module-wrapper {
	position: relative !important;
}

.dev-tools-scope.dev-tools-spacing-popover {
	position: absolute !important;
	z-index: 999999 !important;
	width: 320px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: #1a1a1a !important;
	border: 1px solid #333333 !important;
	border-radius: 10px !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
	font-family: system-ui, sans-serif !important;
	color: #ffffff !important;
	overflow: hidden !important;
}

.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-popover-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 10px 14px !important;
	background: #111111 !important;
	border-bottom: 1px solid #333333 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
}

.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-popover-close {
	background: transparent !important;
	border: none !important;
	color: #999999 !important;
	font-size: 14px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	padding: 2px 6px !important;
}
.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-popover-close:hover { color: #ffffff !important; }

.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-popover-body {
	padding: 12px 14px !important;
	font-size: 12px !important;
}

.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-type {
	display: flex !important;
	gap: 0 !important;
	margin-bottom: 12px !important;
	border: 1px solid #333333 !important;
	border-radius: 6px !important;
	overflow: hidden !important;
}

.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-typebtn {
	flex: 1 !important;
	padding: 6px 10px !important;
	background: #1a1a1a !important;
	border: none !important;
	font-family: system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #888888 !important;
	cursor: pointer !important;
}
.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-typebtn.is-active {
	background: #3b82f6 !important;
	color: #ffffff !important;
}

.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-row {
	margin-bottom: 10px !important;
}

.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-row label {
	display: block !important;
	margin: 0 0 6px 0 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: #888888 !important;
}

.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-pills {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 4px !important;
}

.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-pill {
	padding: 8px 0 !important;
	background: #262626 !important;
	border: 1px solid #333333 !important;
	border-radius: 6px !important;
	font-family: system-ui, sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #cccccc !important;
	text-align: center !important;
	cursor: pointer !important;
	transition: all 0.12s ease !important;
}
.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-pill:hover {
	background: #333333 !important;
	color: #ffffff !important;
}
.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-pill.is-active {
	background: #3b82f6 !important;
	border-color: #3b82f6 !important;
	color: #ffffff !important;
}

.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-popover-footer {
	display: flex !important;
	justify-content: flex-end !important;
	gap: 8px !important;
	margin-top: 14px !important;
	padding-top: 12px !important;
	border-top: 1px solid #2a2a2a !important;
}

.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-btn {
	padding: 6px 14px !important;
	background: #262626 !important;
	border: 1px solid #333333 !important;
	border-radius: 6px !important;
	font-family: system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #ffffff !important;
	cursor: pointer !important;
}
.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-btn:hover { background: #333333 !important; }
.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-btn.dev-tools-spacing-save {
	background: #3b82f6 !important;
	border-color: #3b82f6 !important;
}
.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-btn.dev-tools-spacing-save:hover { background: #2563eb !important; }
.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-btn:disabled { opacity: 0.5 !important; cursor: wait !important; }

.dev-tools-scope.dev-tools-spacing-popover .dev-tools-spacing-error {
	padding: 10px !important;
	background: rgba(239, 68, 68, 0.1) !important;
	border-radius: 6px !important;
	color: #ef4444 !important;
	font-size: 12px !important;
}

/* ============================================================================
   Print Styles
   ============================================================================ */

@media print {
	.dev-tools-scope,
	.dev-tools-scope.dev-tools-module-label,
	.dev-tools-scope.dev-tools-typography-label-wrapper,
	.dev-tools-spacing-puck {
		display: none !important;
	}
}