/**
 * Admin "Edit directory" page (post type: w2dc_directory / w2dc_directory) — custom layout.
 * MIRROR of admin-map-edit.css: top toolbar (title + Save) at top, Redux metaboxes on the
 * LEFT, the React page-builder CANVAS sticky on the RIGHT. Same harness as Edit Map — only
 * the right pane holds the layout constructor instead of a live map preview, and the
 * constructor pane is the WIDER column (it's the main work area).
 *
 * Classes use the w2dc- prefix (core convention); the w2dc build codemod rewrites them to
 * w2dc-. On rmaps this file is never enqueued (no directory CPT) → inert.
 */

/* ===== Top toolbar (replaces native title input + side Publish metabox actions) ===== */
.w2dc-directory-toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	margin: 0 0 16px;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	position: sticky;
	top: 32px; /* WP admin bar */
	z-index: 99;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.w2dc-directory-toolbar-left {
	display: flex;
	align-items: end;
	gap: 12px;
	flex-shrink: 0;
}
.w2dc-directory-toolbar-heading {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: #1d2327;
	line-height: 1.2;
	padding: 0;
}
.w2dc-directory-toolbar-newbtn {
	font-size: 13px;
	padding: 4px 10px;
	border: 1px solid var(--w2dc-primary, #2271b1);
	color: var(--w2dc-primary, #2271b1);
	background: #fff;
	border-radius: 4px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s;
}
.w2dc-directory-toolbar-newbtn:hover,
.w2dc-directory-toolbar-newbtn:focus {
	background: var(--w2dc-primary, #2271b1);
	color: #fff;
	text-decoration: none;
}
/* Title + slug group — fills the flex space between left chrome and right action buttons. */
.w2dc-directory-toolbar-titlegroup {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.w2dc-directory-toolbar .w2dc-directory-title-input {
	flex: 1;
	font-size: 16px;
	font-weight: 500;
	padding: 6px 10px;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	min-width: 0;
}
.w2dc-directory-toolbar .w2dc-directory-slug-input {
	flex: 0 0 220px;
	font-size: 13px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	padding: 6px 10px;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	color: #6b7280;
	background: #f9fafb;
	min-width: 0;
}
.w2dc-directory-toolbar .w2dc-directory-title-input:focus,
.w2dc-directory-toolbar .w2dc-directory-slug-input:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	outline: none;
	background: #fff;
	color: #1f2937;
}
.w2dc-directory-toolbar .w2dc-directory-slug-input:invalid {
	border-color: #dc2626;
	box-shadow: 0 0 0 1px #dc2626;
}
.w2dc-directory-toolbar-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.w2dc-directory-toolbar .w2dc-directory-undo-btn,
.w2dc-directory-toolbar .w2dc-directory-redo-btn,
.w2dc-directory-toolbar .w2dc-directory-export-btn {
	padding: 6px 12px;
	font-size: 13px;
	background: #fff;
	color: #374151;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s;
}
.w2dc-directory-toolbar .w2dc-directory-export-btn { color: #64748b; }
.w2dc-directory-toolbar .w2dc-directory-undo-btn:hover:not(:disabled),
.w2dc-directory-toolbar .w2dc-directory-redo-btn:hover:not(:disabled),
.w2dc-directory-toolbar .w2dc-directory-export-btn:hover:not(:disabled) {
	background: #f9fafb;
}
.w2dc-directory-toolbar .w2dc-directory-undo-btn:disabled,
.w2dc-directory-toolbar .w2dc-directory-redo-btn:disabled,
.w2dc-directory-toolbar .w2dc-directory-export-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
/* + Page — outlined sibling of Save. */
.w2dc-directory-toolbar .w2dc-directory-addpage-btn {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	font-size: 13px;
	font-weight: 500;
	background: #fff;
	color: var(--w2dc-btn1, #2563eb);
	border: 1px solid var(--w2dc-btn1, #2563eb);
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.w2dc-directory-toolbar .w2dc-directory-addpage-btn:hover:not(:disabled) {
	background: color-mix(in srgb, var(--w2dc-btn1, #2563eb) 8%, #fff);
	border-color: var(--w2dc-btn2, #1d4ed8);
}
/* Save — primary action; reads the admin's button palette like the map toolbar. */
.w2dc-directory-toolbar .w2dc-directory-save-btn {
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 500;
	background: var(--w2dc-btn1, #2563eb);
	color: var(--w2dc-btn-text, #fff);
	border: 1px solid var(--w2dc-btn1, #2563eb);
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, border-color 0.15s;
}
.w2dc-directory-toolbar .w2dc-directory-save-btn:hover:not(:disabled) {
	background: var(--w2dc-btn2, #1d4ed8);
	border-color: var(--w2dc-btn2, #1d4ed8);
}
.w2dc-directory-toolbar .w2dc-directory-save-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Save toast — mirror of the map screen's .w2dc-map-toast; floats under the
 * toolbar buttons and auto-hides (DirectoryApp fills + times it out). */
.w2dc-directory-toolbar-right { position: relative; }
.w2dc-directory-toast {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 100;
	max-width: min(680px, 96vw);
	padding: 8px 12px;
	font-size: 13px;
	line-height: 1.5;
	border-radius: 4px;
	white-space: pre-line;
	text-align: left;
	background: #dcfce7;
	color: #15803d;
	border: 1px solid #86efac;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.w2dc-directory-toast.w2dc-directory-toast--error {
	background: #fee2e2;
	color: #b91c1c;
	border-color: #fca5a5;
}
.w2dc-directory-toast[hidden] { display: none !important; }

/* Hide WP elements we replaced (mirror of the map screen). */
body.w2dc-directory-edit #titlediv,
body.w2dc-directory-edit #postbox-container-1,            /* right sidebar (Publish, etc.) */
body.w2dc-directory-edit #screen-meta,
body.w2dc-directory-edit #screen-meta-links,
body.w2dc-directory-edit #post-status-info,
body.w2dc-directory-edit #message,
body.w2dc-directory-edit h1.wp-heading-inline,
body.w2dc-directory-edit .page-title-action,
body.w2dc-directory-edit .wrap > hr.wp-header-end {
	display: none !important;
}

/* Flush the admin content to the top — Edit-Map gets this from the Redux vendor
 * sheet (redux-admin.min.css `.wrap { margin-top: 0 }`), which loads on the
 * settings/map screens but NOT this metabox screen; assert it here (scoped) so the
 * toolbar sits flush like the map. */
body.w2dc-directory-edit .wrap { margin-top: 0; }

/* ===== Two-column workspace: Redux metaboxes left, sticky CANVAS right ===== */
body.w2dc-directory-edit #poststuff { padding-top: 0; }
body.w2dc-directory-edit #post-body.columns-2,
body.w2dc-directory-edit #post-body {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin: 0 !important;
	padding: 0 !important;
}
/* Right column = the page-builder canvas (lives inside #post-body-content via
 * edit_form_after_editor). The constructor is the WIDER pane (default 60%,
 * clamped 50–72% by the resize handle, persisted to --w2dc-dir-w). */
body.w2dc-directory-edit #post-body-content {
	order: 3;
	flex: 0 0 var(--w2dc-dir-w, 60%) !important;
	width: var(--w2dc-dir-w, 60%) !important;
	min-width: 0 !important;
	max-width: var(--w2dc-dir-w, 60%) !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	position: sticky;
	top: 92px;            /* admin bar (32) + toolbar (~50) + spacing */
	height: calc(100vh - 110px);
	display: flex;
	flex-direction: column;
}
/* Resize bar between the metaboxes (order 1) and the canvas (order 3). */
body.w2dc-directory-edit .w2dc-directory-resize-handle {
	order: 2;
	flex: 0 0 6px;
	align-self: stretch;
	background: #c3c4c7;
	cursor: col-resize;
	position: sticky;
	top: 92px;
	height: calc(100vh - 110px);
	transition: background-color 0.12s;
}
body.w2dc-directory-edit .w2dc-directory-resize-handle:hover,
body.w2dc-directory-edit .w2dc-directory-resize-handle.is-dragging {
	background: rgba(37, 99, 235, 0.55);
}
/* Left column — Redux metaboxes (General). */
body.w2dc-directory-edit #postbox-container-2 {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	float: none;
	width: auto !important;
	margin: 0 !important;
}
body.w2dc-directory-edit .postbox { margin-bottom: 12px; }
body.w2dc-directory-edit .postbox .inside { padding: 10px 12px; }
/* Per-element settings boxes (React, portaled into the left column below General).
 * Selected element → blue ring, matching the canvas selection. */
body.w2dc-directory-edit .w2dc-dir-element-box--sel { box-shadow: 0 0 0 2px var(--w2dc-primary, #2271b1); }
/* Header: icon + label, LEFT-aligned (WP's postbox-header is flex/space-between —
 * force start so the label sits next to the icon, like the General title). The th/td
 * field layout itself is inherited from redux-style.css via the box's
 * `…_options-metabox-…` id, so it matches the General/map metaboxes exactly. */
body.w2dc-directory-edit .w2dc-dir-element-box .postbox-header .hndle.w2dc-dir-el-hndle {
	display: flex; align-items: center; justify-content: flex-start; gap: 8px;
	cursor: pointer; font-size: 14px;
}
/* Field title weight = the map's `.redux_field_th` (600), NOT the th's inherited
 * bold (700). Redux's own `.redux-container .redux_field_th { font-weight: 600 }`
 * can't reach these React boxes (portaled outside any `.redux-container`), so
 * assert it here; padding:0 already comes from redux-style.css via the box id. */
body.w2dc-directory-edit .w2dc-dir-element-box .redux_field_th { font-weight: 600; }
body.w2dc-directory-edit .w2dc-dir-el-note { color: #646970; font-size: 13px; margin: 0; }
body.w2dc-directory-edit .w2dc-dir-check-group { display: flex; flex-direction: column; gap: 4px; }
body.w2dc-directory-edit .w2dc-dir-inline-check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
/* Redux-switch (toggle) base layout — copied from the field's redux-switch.css so our
 * React <Switch> renders as the rmaps toggle. The ON/OFF COLOURS are reused from
 * redux-style.css (.postbox[id*=_options-metabox-] .redux-container-switch …) via the
 * box id, so a switch inside any element/General metabox matches the map exactly. */
body.w2dc-directory-edit .redux-container-switch { display: inline-block; overflow: hidden; vertical-align: middle; line-height: 0; }
body.w2dc-directory-edit .redux-container-switch .cb-enable,
body.w2dc-directory-edit .redux-container-switch .cb-disable { float: left; padding: 0 10px; border-width: 1px; border-style: solid; box-sizing: border-box; white-space: nowrap; cursor: pointer; }
body.w2dc-directory-edit .redux-container-switch .cb-enable { border-right: 0; border-radius: 3px 0 0 3px; }
body.w2dc-directory-edit .redux-container-switch .cb-disable { border-left: 0; border-radius: 0 3px 3px 0; }
/* span: NO font-size (Redux inherits the ~13px metabox font) + line-height 30px, matching redux-switch.css. */
body.w2dc-directory-edit .redux-container-switch .cb-enable span,
body.w2dc-directory-edit .redux-container-switch .cb-disable span { display: block; float: left; line-height: 30px; font-weight: 700; user-select: none; }
/* ON/OFF colours for switches OUTSIDE a Redux `_options-metabox-` box (e.g. the
 * TermPicker switches inside the plans constructor, box id `w2dc-dir-plans`):
 * redux-style.css scopes its colours to the box id, so replicate them on the
 * component's own .w2dc-dir-switch class — the selected ON segment follows the
 * plugin's primary colour everywhere on the directory-edit screen. */
body.w2dc-directory-edit .w2dc-dir-switch .cb-enable,
body.w2dc-directory-edit .w2dc-dir-switch .cb-disable { background: #f6f7f7; color: #50575e; border-color: #ccc !important; }
body.w2dc-directory-edit .w2dc-dir-switch .cb-enable.selected {
	background: var(--w2dc-primary, #2271b1) !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #fff !important;
	border-color: var(--w2dc-primary, #2271b1) !important;
}
body.w2dc-directory-edit .w2dc-dir-switch .cb-disable.selected {
	background: #94a3b8 !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #fff !important;
	border-color: #94a3b8 !important;
}

/* ===== Term picker (categories/locations) — MATCH of the map's MarkersFilterBuilder
 * TaxonomyFilterEditor (admin-map-edit/styles.css `.w2dc-mfb-tax*`): identical list
 * geometry, `--depth` indent, meta row + links, and checkbox tint. The "Use all …"
 * caption is a Redux `.description` (styled by redux-style.css via the box id). ===== */
body.w2dc-directory-edit .w2dc-dir-tax { display: flex; flex-direction: column; gap: 4px; max-width: 540px; }
/* Kill the Redux vendor default (redux-fields.min.css `.redux-main span.description { padding-bottom: 20px }`)
 * for the compact "Use all …" caption so it sits tight above the panel. */
body.w2dc-directory-edit .w2dc-dir-tax .description { padding-bottom: 0 !important; }
/* Collapsible panel wrapper (inside <Collapse>) — restores the 4px inter-row gap the flex container gives. */
body.w2dc-directory-edit .w2dc-dir-tax__panel { display: flex; flex-direction: column; gap: 4px; }
body.w2dc-directory-edit .w2dc-dir-tax__panel-header { font-size: 11px; color: #4b5563; margin-top: 6px; margin-bottom: 2px; }
body.w2dc-directory-edit .w2dc-dir-tax__list { max-height: 192px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 4px; background: #fff; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
body.w2dc-directory-edit .w2dc-dir-tax__empty { padding: 14px; font-size: 12px; color: #6b7280; text-align: center; font-style: italic; }
/* !important beats WP-admin's `<label>{display:block;margin}` reset (else checkbox stacks above text). */
body.w2dc-directory-edit .w2dc-dir-tax__list .w2dc-dir-tax__item {
	display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important;
	padding-top: 3px !important; padding-bottom: 3px !important; padding-right: 4px !important;
	padding-left: calc(4px + var(--depth, 0) * 16px) !important;
	margin: 0 !important; font-size: 12px !important; color: #374151 !important; cursor: pointer !important;
	line-height: 1.3 !important; width: 100% !important; box-sizing: border-box !important; border-radius: 2px; min-height: 22px;
}
body.w2dc-directory-edit .w2dc-dir-tax__list .w2dc-dir-tax__item:hover { background: #f9fafb; }
body.w2dc-directory-edit .w2dc-dir-tax__list .w2dc-dir-tax__item > span {
	flex: 1 !important; min-width: 0 !important; display: inline-block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #374151 !important;
}
body.w2dc-directory-edit .w2dc-dir-tax__meta { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: #2563eb; margin-top: 4px; }
body.w2dc-directory-edit .w2dc-dir-tax__meta-actions { display: flex; gap: 8px; }
body.w2dc-directory-edit .w2dc-dir-tax__link { background: none; border: none; padding: 0; font-size: 10px; color: #9ca3af; cursor: pointer; }
body.w2dc-directory-edit .w2dc-dir-tax__link:hover { color: #2563eb; }
body.w2dc-directory-edit .w2dc-dir-tax__link--danger:hover { color: #dc2626; }

/* Checkbox tint — copy of the map's plugin-checkbox rule: WP-admin forms.css sets
 * appearance:none + redraws via ::before (ignoring accent-color). Force appearance:auto,
 * reset WP's border/bg/shadow, apply the plugin primary accent, kill the ::before glyph. */
body.w2dc-directory-edit .w2dc-dir-tax__list input[type="checkbox"],
body.w2dc-directory-edit .w2dc-dir-inline-check input[type="checkbox"] {
	appearance: auto !important; -webkit-appearance: auto !important; -moz-appearance: auto !important;
	width: auto; height: auto; min-width: 0; min-height: 0;
	background: initial; border: initial; border-radius: initial; box-shadow: none;
	accent-color: var(--w2dc-primary, #2563eb); vertical-align: middle; margin: 0; padding: 0; flex-shrink: 0;
}
body.w2dc-directory-edit .w2dc-dir-tax__list input[type="checkbox"]::before,
body.w2dc-directory-edit .w2dc-dir-inline-check input[type="checkbox"]::before { content: none !important; }

/* Search element embeds the map's search-form builder (.w2dc-sfb, styled by the map's
 * React bundle enqueued on this screen). Keep the map's 3-col grid (200px+1fr+1fr) by
 * default; stack it ONLY when the metabox column is genuinely narrow — measured with a
 * CONTAINER query on the wrapper, because the map's own breakpoints are viewport-based
 * and can't see the column width. Browsers without @container support keep 3-col (fine). */
body.w2dc-directory-edit .w2dc-dir-sfb-wrap { container-type: inline-size; }
@container (max-width: 720px) {
	body.w2dc-directory-edit .w2dc-dir-sfb { grid-template-columns: 200px 1fr; grid-template-rows: auto auto; }
	body.w2dc-directory-edit .w2dc-dir-sfb .w2dc-sfb__properties { grid-column: 1 / 3; }
}
@container (max-width: 480px) {
	body.w2dc-directory-edit .w2dc-dir-sfb { grid-template-columns: 1fr; }
	body.w2dc-directory-edit .w2dc-dir-sfb .w2dc-sfb__properties { grid-column: 1; }
}
/* General-metabox fields — EXACT copy of the map's Redux metabox field CSS
 * (redux-style.css :: .postbox[id*=_options-metabox-] .form-table ...). Same th/td
 * geometry, colours and borders so Edit Directory's metabox is pixel-identical to
 * Edit Map's. (The map's `.redux-container input` polish is .wrap-scoped → does NOT
 * reach the metabox, which uses WP-default inputs at width:100% — matched here.) */
body.w2dc-directory-edit .w2dc-dir-table {
	display: table !important;
	table-layout: fixed;
	width: 100% !important;
	border-collapse: collapse;
	margin: 0;
}
body.w2dc-directory-edit .w2dc-dir-table > tbody > tr {
	display: table-row !important;
	border-bottom: 1px solid #eee;
}
body.w2dc-directory-edit .w2dc-dir-table > tbody > tr:last-child { border-bottom: none; }
body.w2dc-directory-edit .w2dc-dir-table > tbody > tr > th {
	display: table-cell !important;
	vertical-align: top;
	width: 200px !important;
	max-width: 200px !important;
	min-width: 200px;
	padding: 20px !important;
	font-size: 1em;
	font-weight: bold;
	color: #1e1e1e;
	line-height: 1.4;
}
body.w2dc-directory-edit .w2dc-dir-table > tbody > tr > td {
	display: table-cell !important;
	vertical-align: top;
	width: 100%;
	padding: 20px !important;
	position: relative;
}
body.w2dc-directory-edit .w2dc-dir-table > tbody > tr > td input[type=text],
body.w2dc-directory-edit .w2dc-dir-table > tbody > tr > td select {
	width: 100%;
	max-width: 100%;
}

/* Canvas panel — the React mount fills the sticky right pane as a flex column:
 * palette (top) → canvas rows (middle, scrolls) → page tabs (bottom, always visible). */
.w2dc-directory-canvas-panel {
	background: #f3f4f6;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* ===== Responsive ===== */
@media (max-width: 1023px) {
	.w2dc-directory-toolbar {
		flex-wrap: wrap;
		gap: 8px;
		position: static;
		top: auto;
	}
	.w2dc-directory-toolbar-left { flex: 1 1 100%; justify-content: space-between; align-items: center; }
	.w2dc-directory-toolbar .w2dc-directory-title-input { flex: 1 1 100%; min-width: 0; }
	.w2dc-directory-toolbar-right { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; }
	body.w2dc-directory-edit #post-body-content,
	body.w2dc-directory-edit #post-body.columns-2 #post-body-content {
		flex: 0 0 55% !important;
		width: 55% !important;
		max-width: 55% !important;
	}
	body.w2dc-directory-edit .w2dc-directory-resize-handle { display: none; }
}
@media (max-width: 850px) {
	body.w2dc-directory-edit #post-body.columns-2,
	body.w2dc-directory-edit #post-body { flex-direction: column; }
	body.w2dc-directory-edit #post-body-content,
	body.w2dc-directory-edit #post-body.columns-2 #post-body-content {
		order: 0 !important;
		position: static !important;
		flex: 0 0 auto !important;
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		min-height: 70vh !important;
		margin: 0 0 12px 0 !important;
	}
}