/**
 * Theme.json Design Manager — Admin Styles.
 *
 * Minimal CSS that extends WordPress native admin styling.
 * Only loaded on the plugin's own admin page.
 *
 * @package ThemeJsonDesignManager
 * @since   1.0.0
 */

/* ------------------------------------------------------------------ */
/* Wrapper                                                            */
/* ------------------------------------------------------------------ */

.gdtm-wrap {
	max-width: 1200px;
}

/* ------------------------------------------------------------------ */
/* Subtitle                                                           */
/* ------------------------------------------------------------------ */

.gdtm-subtitle {
	font-size: 14px;
	color: #646970;
	margin: -8px 0 16px;
	max-width: 700px;
	line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* Tabs                                                               */
/* ------------------------------------------------------------------ */

.gdtm-tabs {
	margin-bottom: 20px;
}

.gdtm-tab-content {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-top: none;
	padding: 20px;
	margin-bottom: 0;
}

.gdtm-tab-content h2 {
	margin-top: 0;
	padding-top: 0;
}

.gdtm-tab-content .description {
	margin-bottom: 16px;
	color: #646970;
}

.gdtm-tab-content .description code {
	font-size: 12px;
	background: #f0f0f1;
	padding: 1px 5px;
	border-radius: 3px;
}

/* Tab Count Badge */
.gdtm-tab-count {
	display: inline-block;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	background: #dcdcde;
	color: #50575e;
	border-radius: 9px;
	margin-left: 6px;
	padding: 0 5px;
}

.nav-tab-active .gdtm-tab-count {
	background: #2271b1;
	color: #fff;
}

/* ------------------------------------------------------------------ */
/* Section Header (h2 + tooltip)                                      */
/* ------------------------------------------------------------------ */

.gdtm-section-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.gdtm-section-header h2 {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Tooltip                                                            */
/* ------------------------------------------------------------------ */

.gdtm-tooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: help;
}

.gdtm-tooltip .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	color: #a7aaad;
	transition: color 0.15s ease;
}

.gdtm-tooltip:hover .dashicons,
.gdtm-tooltip:focus .dashicons {
	color: #2271b1;
}

.gdtm-tooltip-text {
	display: none;
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	background: #1d2327;
	color: #fff;
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
	max-width: 300px;
	white-space: normal;
	z-index: 100;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.gdtm-tooltip-text::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #1d2327;
}

.gdtm-tooltip:hover .gdtm-tooltip-text,
.gdtm-tooltip:focus .gdtm-tooltip-text {
	display: block;
}

/* ------------------------------------------------------------------ */
/* Field Legend Row                                                    */
/* ------------------------------------------------------------------ */

.gdtm-field-legend {
	display: flex;
	gap: 12px;
	padding: 0 12px 6px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #646970;
	border-bottom: 1px solid #dcdcde;
	margin-bottom: 8px;
}

.gdtm-field-legend span {
	min-width: 80px;
}

/* ------------------------------------------------------------------ */
/* Empty State                                                        */
/* ------------------------------------------------------------------ */

.gdtm-empty-state {
	text-align: center;
	padding: 32px 20px;
	background: #f6f7f7;
	border: 2px dashed #dcdcde;
	border-radius: 4px;
	color: #646970;
	margin-bottom: 16px;
}

.gdtm-empty-state .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
	color: #a7aaad;
	margin-bottom: 8px;
}

.gdtm-empty-state p {
	margin: 0;
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Token Rows (Repeater)                                              */
/* ------------------------------------------------------------------ */

.gdtm-repeater {
	margin-bottom: 16px;
}

.gdtm-token-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	padding: 12px;
	margin-bottom: 8px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	transition: background-color 0.15s ease;
}

.gdtm-token-row:hover {
	background: #f0f0f1;
}

/* ------------------------------------------------------------------ */
/* Field Labels                                                       */
/* ------------------------------------------------------------------ */

.gdtm-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gdtm-field-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #1d2327;
}

.gdtm-field input[type="text"].regular-text {
	width: 160px;
}

.gdtm-field input[type="text"].small-text {
	width: 100px;
}

.gdtm-field-wide input[type="text"].large-text {
	width: 320px;
}

/* Slug inputs — monospace for clarity */
.gdtm-slug-input {
	font-family: Consolas, Monaco, 'Courier New', monospace !important;
	font-size: 13px !important;
}

/* ------------------------------------------------------------------ */
/* CSS Variable Name Preview                                          */
/* ------------------------------------------------------------------ */

.gdtm-css-var {
	display: flex;
	align-items: center;
	margin-top: 19px;
}

.gdtm-css-var code {
	font-size: 11px;
	color: #646970;
	background: #f0f0f1;
	padding: 3px 8px;
	border-radius: 3px;
	border: 1px solid #dcdcde;
	font-family: Consolas, Monaco, 'Courier New', monospace;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Sortable Handle (Spacing)                                          */
/* ------------------------------------------------------------------ */

.gdtm-sort-handle {
	cursor: grab;
	color: #a7aaad;
	font-size: 20px;
	margin-top: 19px;
	padding: 4px;
	transition: color 0.15s ease;
}

.gdtm-sort-handle:hover {
	color: #2271b1;
}

.gdtm-sortable-placeholder {
	background: #e0e7ee;
	border: 2px dashed #2271b1;
	border-radius: 4px;
	height: 58px;
	margin-bottom: 8px;
}

.ui-sortable-helper {
	cursor: grabbing !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ------------------------------------------------------------------ */
/* Remove Button                                                      */
/* ------------------------------------------------------------------ */

.gdtm-remove-row {
	background: transparent !important;
	border: 1px solid transparent !important;
	color: #a7aaad !important;
	padding: 4px !important;
	min-height: 30px;
	min-width: 30px;
	margin-top: 19px;
	flex-shrink: 0;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.gdtm-remove-row .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 1;
	vertical-align: middle;
}

.gdtm-remove-row:hover {
	background: transparent !important;
	color: #b32d2e !important;
	border-color: #b32d2e !important;
}

.gdtm-remove-row:focus {
	outline: 2px solid #2271b1;
	outline-offset: -2px;
	box-shadow: none !important;
}

/* ------------------------------------------------------------------ */
/* Add Row Button                                                     */
/* ------------------------------------------------------------------ */

.gdtm-add-row {
	margin-top: 4px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	vertical-align: middle;
}

.gdtm-add-row .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
	vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Color Contrast Preview                                             */
/* ------------------------------------------------------------------ */

.gdtm-contrast-preview-wrap {
	/* no extra margin — has its own label */
}

.gdtm-contrast-preview {
	display: inline-flex;
	gap: 4px;
	padding: 4px 8px;
	border: 1px solid #dcdcde;
	border-radius: 3px;
	min-width: 60px;
	justify-content: center;
}

.gdtm-contrast-light {
	color: #ffffff;
	font-weight: 700;
	font-size: 14px;
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}

.gdtm-contrast-dark {
	color: #000000;
	font-weight: 700;
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Border Radius Preview                                              */
/* ------------------------------------------------------------------ */

.gdtm-radius-preview-wrap {
	/* no extra margin — has its own label */
}

.gdtm-radius-preview {
	display: inline-block;
	width: 40px;
	height: 40px;
	background: #2271b1;
	border: 1px solid #dcdcde;
	transition: border-radius 0.15s ease;
}

/* ------------------------------------------------------------------ */
/* Shadow Preview                                                     */
/* ------------------------------------------------------------------ */

.gdtm-shadow-preview-wrap {
	/* no extra margin — has its own label */
}

.gdtm-shadow-preview {
	display: inline-block;
	width: 48px;
	height: 32px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	transition: box-shadow 0.15s ease;
}

/* ------------------------------------------------------------------ */
/* Fluid Typography Fields                                            */
/* ------------------------------------------------------------------ */

.gdtm-fluid-toggle {
	flex-direction: row;
	align-items: center;
	gap: 6px;
	margin-top: 19px;
}

.gdtm-fluid-fields {
	display: flex;
	gap: 12px;
}

/* ------------------------------------------------------------------ */
/* Color Picker Overrides                                             */
/* ------------------------------------------------------------------ */

.gdtm-token-row .wp-picker-container {
	display: inline-block;
}

.gdtm-token-row .wp-picker-container .wp-color-result {
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                         */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 782px) {
	.gdtm-token-row {
		flex-direction: column;
		align-items: stretch;
	}

	.gdtm-field input[type="text"].regular-text,
	.gdtm-field-wide input[type="text"].large-text {
		width: 100%;
	}

	.gdtm-remove-row,
	.gdtm-css-var,
	.gdtm-fluid-toggle,
	.gdtm-sort-handle {
		margin-top: 0;
	}

	.gdtm-remove-row {
		align-self: flex-end;
	}

	.gdtm-field-legend {
		display: none;
	}

	.gdtm-css-var {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* Settings Tab                                                       */
/* ------------------------------------------------------------------ */

.gdtm-settings-table th {
	font-weight: 600;
	padding: 20px 10px 20px 0;
	width: 200px;
}

.gdtm-settings-table td {
	padding: 15px 10px;
}

.gdtm-settings-table td label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.gdtm-settings-table td .description {
	margin-top: 6px;
	margin-left: 26px;
}