/**
 * Visual Block Inspector - Editor Styles
 * @package VisualBlockInspector
 */

/* CSS Variables */
:root {
	--visualblockinsp-color-layout: #4CAF50;
	--visualblockinsp-color-content: #2196F3;
	--visualblockinsp-color-media: #FF9800;
	--visualblockinsp-color-title: #9b59b6;
	--visualblockinsp-color-green-grid: #43A047;
	--visualblockinsp-color-white: #fff;
	--visualblockinsp-outline-color: #2196F3;
	--visualblockinsp-outline-opacity: 0.4;
}

/* Base style for inspected blocks */
.visualblockinsp-inspected-block {
	position: relative !important;
	outline: 1px dotted color-mix(in srgb, var(--visualblockinsp-outline-color) calc(var(--visualblockinsp-outline-opacity) * 100%), transparent) !important;
	outline-offset: 1px !important;
	box-sizing: border-box !important;
	transition: outline-color 0.15s ease !important;
}

/* Hover state - fully opaque borders */
.visualblockinsp-inspected-block:hover {
	outline-color: var(--visualblockinsp-outline-color) !important;
	--visualblockinsp-outline-opacity: 1;
}

/* Block type colors */
.visualblockinsp-type-layout {
	--visualblockinsp-outline-color: var(--visualblockinsp-color-layout);
}

.visualblockinsp-type-content {
	--visualblockinsp-outline-color: var(--visualblockinsp-color-content);
}

.visualblockinsp-type-media {
	--visualblockinsp-outline-color: var(--visualblockinsp-color-media);
}

/* Block label - visible on hover, positioned at top-right by default */
.visualblockinsp-inspected-block::before {
	content: attr(data-visualblockinsp-block-name);
	position: absolute;
	top: 0;
	right: 0;
	background: var(--visualblockinsp-outline-color);
	color: var(--visualblockinsp-color-white);
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 500;
	border-radius: 2px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 9999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.4;
	opacity: 0;
	transition: opacity 0.15s ease;
}

/* Show label on hover */
.visualblockinsp-inspected-block:hover::before {
	opacity: 0.95 !important;
	z-index: 10000;
}

/* Blocks WITH children - label outside (top), no background, text only */
.visualblockinsp-inspected-block[data-visualblockinsp-has-children="true"]::before {
	top: -16px !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	background: transparent !important;
	color: var(--visualblockinsp-outline-color) !important;
	padding: 0 !important;
	font-weight: 600 !important;
}

/* Individual columns (core/column) */
.visualblockinsp-inspected-block[data-visualblockinsp-block-name="core/column"]::before {
	content: attr(data-visualblockinsp-block-name);
}

/* Show column label on hover */
.visualblockinsp-inspected-block[data-visualblockinsp-block-name="core/column"]:hover::before {
	opacity: 0.95 !important;
	z-index: 10000;
}

/* Show column numbers when hovering over parent core/columns */
.visualblockinsp-inspected-block[data-visualblockinsp-block-name="core/columns"]:hover .visualblockinsp-inspected-block[data-visualblockinsp-block-name="core/column"]::before {
	content: attr(data-visualblockinsp-column-number) !important;
	top: 0px !important;
	left: 11px !important;
	right: auto !important;
	background: var(--visualblockinsp-color-layout) !important;
	color: var(--visualblockinsp-color-white) !important;
	padding: 2px 8px !important;
	font-size: 10px !important;
	font-weight: 500 !important;
	border-radius: 2px !important;
	opacity: 0.95 !important;
	z-index: 10000;
}

/* Grid items - ::before shows number on left */
.visualblockinsp-inspected-block[data-visualblockinsp-grid-item-number]::before {
	content: attr(data-visualblockinsp-grid-item-number);
	top: 2px;
	left: 2px;
	right: auto;
	background: var(--visualblockinsp-color-green-grid);
	color: var(--visualblockinsp-color-white);
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 500;
	border-radius: 2px;
}

/* Grid items - ::after shows block name on right */
.visualblockinsp-inspected-block[data-visualblockinsp-grid-item-number]::after {
	content: attr(data-visualblockinsp-block-name);
	position: absolute;
	top: 2px;
	right: 2px;
	background: var(--visualblockinsp-outline-color);
	color: var(--visualblockinsp-color-white);
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 500;
	border-radius: 2px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 9999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.4;
	opacity: 0;
	transition: opacity 0.15s ease;
}

/* Show both labels when hovering over grid item */
.visualblockinsp-inspected-block[data-visualblockinsp-grid-item-number]:hover::before,
.visualblockinsp-inspected-block[data-visualblockinsp-grid-item-number]:hover::after {
	opacity: 0.95 !important;
	z-index: 10000;
}

/* Show grid item labels when hovering over parent core/grid */
.visualblockinsp-inspected-block[data-visualblockinsp-block-name="core/grid"]:hover .visualblockinsp-inspected-block[data-visualblockinsp-grid-item-number]::before,
.visualblockinsp-inspected-block[data-visualblockinsp-block-name="core/grid"]:hover .visualblockinsp-inspected-block[data-visualblockinsp-grid-item-number]::after {
	opacity: 0.95 !important;
	z-index: 10000;
}

/* Post/Page title styling */
.editor-post-title__input,
.wp-block-post-title {
	outline: 1px dotted var(--visualblockinsp-color-title) !important;
	outline-offset: 1px !important;
	border-radius: 2px !important;
	transition: outline-color 0.15s ease !important;
	position: relative !important;
}

.editor-post-title__input:hover,
.wp-block-post-title:hover,
.editor-post-title__input:focus,
.wp-block-post-title:focus {
	outline-color: var(--visualblockinsp-color-title) !important;
}

/* Title tooltip - centered above */
.editor-post-title__input::before,
.wp-block-post-title::before {
	content: "Post/Page Title";
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--visualblockinsp-color-title);
	color: var(--visualblockinsp-color-white);
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 500;
	border-radius: 2px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 9999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.4;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.editor-post-title__input:hover::before,
.wp-block-post-title:hover::before {
	opacity: 0.95;
}