/**
 * MLS Import Design Settings — two-level vertical menu layout.
 *
 * Left rail lists every screen: top-level items, and — for a section that has
 * subtabs (e.g. Property Page) — its subtabs indented directly underneath it.
 * The right panel shows only the selected screen's fields.
 */

/* Two-pane shell: left rail + right panel side by side, equal height. */
.mlsimport-settings-tabs {
	display: flex;
	align-items: stretch;
	gap: 0;
}

/* Left rail — fixed 210px column holding the stacked menu items. */
.mlsimport-settings-tabs__menu {
	flex: 0 0 210px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-right: 1px solid var(--border-color, rgba(28, 25, 23, 0.12));
	padding-right: 8px;
}

.mlsimport-settings-tabs__group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Base menu button (shared by top-level items, parents and subtabs). */
.mlsimport-settings-tabs__item {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 12px;
	background: none;
	border: none;
	border-radius: 4px;
	text-align: left;
	font-size: 13px;
	color: var(--text-primary, #1c1917);
	cursor: pointer;
}

.mlsimport-settings-tabs__item:hover {
	background: var(--background-soft, #f3efe7);
}

.mlsimport-settings-tabs__item:focus-visible {
	outline: 2px solid var(--primary-color, #1c1917);
	outline-offset: -2px;
}

/* Selected screen. One active-state colour plugin-wide: the near-black
   --primary-color fill, the same as the selected tab on
   admin.php?page=mlsimport_plugin_options. This was the pastel --accent-soft,
   which is the badge/checkbox accent, not an active state. */
.mlsimport-settings-tabs__item.is-active {
	background: var(--primary-color, #1c1917);
	color: #ffffff;
	font-weight: 600;
}

.mlsimport-settings-tabs__item.is-active:hover {
	background: var(--primary-hover, #33302b);
	color: #ffffff;
}

/* Section header for a group of subtabs — reads as the parent of the items below. */
.mlsimport-settings-tabs__item.is-parent {
	color: var(--text-secondary, #6b6358);
	font-weight: 600;
}

/* Subtab: indented under its parent, with a rail marking the nesting. */
.mlsimport-settings-tabs__item.is-child {
	margin-left: 12px;
	width: calc( 100% - 12px );
	padding-left: 14px;
	border-left: 2px solid var(--border-color, rgba(28, 25, 23, 0.12));
	border-radius: 0 4px 4px 0;
}

.mlsimport-settings-tabs__item.is-child.is-active {
	border-left-color: var(--primary-color, #1c1917);
}

/* Right panel — fills remaining width and renders the active screen's fields. */
.mlsimport-settings-tabs__panel {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 4px 4px 20px;
	min-height: 320px;
}

/* Section title (e.g. "Social & Contact") — space it off from the fields below. */
#mlsimport-standalone-app .mlsimport-settings-tabs__panel > .components-heading {
	margin-bottom: 15px;
}

/* WP component input labels (TextControl, SelectControl, …) default to ALL-CAPS.
   Render them in normal sentence case to match the field text and the button-group
   headings (e.g. "Cards per row"), so no label shouts. */
#mlsimport-standalone-app .components-base-control__label,
#mlsimport-standalone-app .components-input-control__label {
	text-transform: none;
	letter-spacing: normal;
}

/* ===========================================================================
   Match the shared wp-admin "2025" look (the field_options tab on
   admin.php?page=mlsimport_plugin_options). This React page is built from
   @wordpress/components, whose default chrome differs from the plugin's own
   settings screens. The rules below re-skin those components — inputs, labels,
   help text and buttons — to the SAME tokens defined in mlsimport-admin.css
   (.mlsimport-2025-input, .mlsimport-label, .button.mlsimport_button), so both
   surfaces read as one design system. Scoped to #mlsimport-standalone-app; the
   #id selector out-specifies wp-components without needing !important.
   =========================================================================== */

/* Text / number / email / textarea / select — bordered, rounded, soft shadow,
   mirroring input.mlsimport-2025-input and select.mlsimport-2025-select. */
#mlsimport-standalone-app .components-text-control__input,
#mlsimport-standalone-app .components-textarea-control__input,
#mlsimport-standalone-app .components-select-control__input {
	padding: 5px 12px;
	min-height: 40px;
	box-sizing: border-box;
	background: #ffffff;
	color: var(--text-primary, #1c1917);
	border: 1px solid rgba(28, 25, 23, 0.18);
	border-radius: 8px;
	box-shadow: 0px 1px 2px rgba( 0, 0, 0, 0.08 );
}

#mlsimport-standalone-app .components-textarea-control__input {
	min-height: 0;
}

/* SelectControl is special: unlike TextControl (a plain <input> that carries its
   own border), WP's SelectControl draws the *visible* border on a separate
   overlay element, .components-input-control__backdrop — a 1px solid #949494 box
   that sits on top of the <select>. So the border rules above only recolored the
   hidden inner <select> border; the backdrop kept painting the darker WP default
   over it. Style the backdrop itself to the 2025 token (rgba(28,25,23,0.18), 8px
   radius) so the select border matches the text inputs and the field_options
   selects. The soft drop shadow lives on the inner <select>, re-asserted with
   !important because the SelectControl emotion class forces box-shadow: none. */
#mlsimport-standalone-app .components-input-control__backdrop {
	border-color: rgba(28, 25, 23, 0.18) !important;
	border-radius: 8px !important;
}

#mlsimport-standalone-app .components-select-control__input {
	box-shadow: 0px 1px 2px rgba( 28, 25, 23, 0.08 ) !important;
}

/* Focus: an actual border in --primary-color, no glow — the same focus
   affordance the plugin's own fields got in the Tools-tab pass. It used to be
   an --accent-color ring; accent is reserved for badges and checked checkboxes.
   The SelectControl backdrop is named too, since that overlay (not the inner
   <select>) is what paints a select's visible border. */
#mlsimport-standalone-app .components-text-control__input:focus,
#mlsimport-standalone-app .components-textarea-control__input:focus,
#mlsimport-standalone-app .components-select-control__input:focus {
	border-color: var(--primary-color, #1c1917);
	box-shadow: 0px 1px 2px rgba( 0, 0, 0, 0.08 );
	outline: none;
}

#mlsimport-standalone-app .components-input-control__input:focus ~ .components-input-control__backdrop,
#mlsimport-standalone-app .components-select-control__input:focus ~ .components-input-control__backdrop {
	border-color: var(--primary-color, #1c1917) !important;
}

/* Field labels — block, 14px, medium weight, dark text (matches .mlsimport-label
   on the field_options tab). Covers BOTH label classes: TextControl/TextareaControl
   use .components-base-control__label, while SelectControl renders its label as an
   InputControl label (.components-input-control__label). WP components render both at
   11px by default — smaller than the 12px help text, which reads as broken — so the
   font-size is forced up with !important to beat the emotion-hashed default. */
#mlsimport-standalone-app .components-base-control__label,
#mlsimport-standalone-app .components-input-control__label {
	display: block;
	margin-bottom: 4px;
	font-size: 14px !important;
	font-weight: 500;
	color: var(--text-primary, #1c1917);
}

/* Help / explanation text under a field — muted (matches .mls_explanations). */
#mlsimport-standalone-app .components-base-control__help {
	color: var(--text-secondary, #6b6358);
	font-size: 12px;
}

/* --- Buttons ---------------------------------------------------------------
   Primary buttons take the solid dark fill of .button.mlsimport_button; the
   bottom "Save changes" button (tagged .mlsimport-save-button) takes the green
   save fill (.button.mlsimport_button.save_data), exactly like the Save
   Changes button on the field_options tab. Secondary/tertiary buttons become a
   neutral bordered control on the same pill-radius token. */
#mlsimport-standalone-app .components-button.is-primary {
	height: auto;
	padding: 7px 30px;
	color: #ffffff;
	background: var(--primary-color, #1c1917);
	border: 1px solid var(--primary-color, #1c1917);
	border-radius: 999px;
	box-shadow: rgba( 28, 25, 23, 0.08 ) 0px 1px 2px 0px, rgba( 28, 25, 23, 0.08 ) 0px 0px 0px 1px inset, rgba( 255, 255, 255, 0.06 ) 0px 2px 0px 0px inset;
}

#mlsimport-standalone-app .components-button.is-primary:hover:not( :disabled ),
#mlsimport-standalone-app .components-button.is-primary:focus:not( :disabled ) {
	color: #ffffff;
	background: var(--primary-hover, #33302b);
	border: 1px solid var(--primary-hover, #33302b);
	box-shadow: 0 10px 24px -10px rgba( 0, 0, 0, .45 );
}

/* Save changes — the same pastel mint save pill the rest of the plugin uses
   (.button.mlsimport_button.save_data in mlsimport-admin.css): --success-soft
   fill with --success-deep text. This button was a solid saturated
   --success-color green, a fill no other MLSImport screen shows. The 57px
   min-height goes with it, so Save stands at the same height as every other
   button instead of towering over the panel it closes. */
#mlsimport-standalone-app .components-button.is-primary.mlsimport-save-button {
	padding: 9px 24px;
	background: var(--success-soft, #b8e6cc);
	border: 1px solid var(--success-soft, #b8e6cc);
	color: var(--success-deep, #1c5c3a);
	box-shadow: 0px 1px 2px rgba( 0, 0, 0, 0.06 );
}

#mlsimport-standalone-app .components-button.is-primary.mlsimport-save-button:hover:not( :disabled ),
#mlsimport-standalone-app .components-button.is-primary.mlsimport-save-button:focus:not( :disabled ) {
	background: #a5dfc0;
	border: 1px solid #a5dfc0;
	color: var(--success-deep, #1c5c3a);
	box-shadow: 0 8px 20px -10px rgba( 28, 92, 58, 0.5 );
}

/* Secondary / tertiary — white bordered button on the same rounded token. */
#mlsimport-standalone-app .components-button.is-secondary,
#mlsimport-standalone-app .components-button.is-tertiary {
	height: auto;
	padding: 7px 18px;
	background: #ffffff;
	color: var(--text-primary, #1c1917);
	border: 1px solid rgba(28, 25, 23, 0.18);
	border-radius: 999px;
	box-shadow: 0px 1px 2px rgba( 28, 25, 23, 0.08 );
}

#mlsimport-standalone-app .components-button.is-secondary:hover:not( :disabled ),
#mlsimport-standalone-app .components-button.is-tertiary:hover:not( :disabled ) {
	background: var(--background-soft, #f3efe7);
	color: var(--text-primary, #1c1917);
	border-color: rgba(28, 25, 23, 0.18);
}

/* Colors screen — the Main Color control is wp-admin's own Iris picker
   (button.wp-color-result), which core renders as a square grey .button with a
   4px radius. It sat next to our 8px rounded fields as the one un-restyled
   control on the page. Give it the same 40px height, border and radius as a
   text field; the inline background-color core sets on the button is the swatch,
   so only the border, radius and the text half are touched. */
#mlsimport-standalone-app .wp-picker-container .wp-color-result.button {
	height: 40px;
	margin: 0;
	border: 1px solid rgba(28, 25, 23, 0.18);
	border-radius: 8px;
	box-shadow: 0px 1px 2px rgba( 0, 0, 0, 0.08 );
}

#mlsimport-standalone-app .wp-picker-container .wp-color-result.button:focus,
#mlsimport-standalone-app .wp-picker-container .wp-color-result.button:hover {
	border-color: var(--primary-color, #1c1917);
	box-shadow: 0px 1px 2px rgba( 0, 0, 0, 0.08 );
}

#mlsimport-standalone-app .wp-picker-container .wp-color-result-text {
	background: #ffffff;
	color: var(--text-primary, #1c1917);
	border-left: 1px solid rgba(28, 25, 23, 0.18);
	border-radius: 0 7px 7px 0;
	line-height: 38px;
}

/* --- Focus / accent ---------------------------------------------------------
   The selected option pill was ringed in WP admin blue (#3858e9): every
   @wordpress/components control paints its focus ring, checkbox fill and
   toggle from --wp-components-color-accent / --wp-admin-theme-color, neither
   of which our tokens touched. Repoint both at --primary-color at the app
   root, so anything core draws in "the accent" adopts the plugin's near-black
   instead of leaking WP blue into a screen that has none. */
#mlsimport-standalone-app {
	--wp-admin-theme-color: var(--primary-color, #1c1917);
	--wp-admin-theme-color-darker-10: var(--primary-hover, #33302b);
	--wp-admin-theme-color-darker-20: var(--primary-hover, #33302b);
	--wp-components-color-accent: var(--primary-color, #1c1917);
	--wp-components-color-accent-darker-10: var(--primary-hover, #33302b);
	--wp-components-color-accent-darker-20: var(--primary-hover, #33302b);
}

/* Keyboard focus on a button: a near-black ring OUTSIDE the pill, so it reads
   on the dark primary fill as well as on the white secondary one. Plain :focus
   is left alone — a mouse click on an option pill should not leave a ring
   behind, which is what made the selected pill look permanently outlined. */
#mlsimport-standalone-app .components-button:focus:not( :disabled ) {
	outline: 2px solid transparent;
	outline-offset: 0;
}

#mlsimport-standalone-app .components-button:focus-visible:not( :disabled ) {
	outline: 2px solid var(--primary-color, #1c1917);
	outline-offset: 2px;
}

/* Core paints an accent ring as a box-shadow on a focused secondary button, so
   clicking an option pill left a ring on it. Hold the resting shadow on plain
   :focus and let the outline above carry keyboard focus instead. */
#mlsimport-standalone-app .components-button.is-secondary:focus:not( :disabled ),
#mlsimport-standalone-app .components-button.is-tertiary:focus:not( :disabled ) {
	box-shadow: 0px 1px 2px rgba( 28, 25, 23, 0.08 );
}

/* ===========================================================================
   Mobile layout

   WordPress collapses its admin navigation at 782px. At that width the fixed
   210px settings rail and the field panel no longer fit side by side: the panel
   is squeezed into a narrow strip and the full-height card can cover the Save
   action below it. Stack the same two public controls in document order so the
   menu, active panel, and Save button each own a separate vertical region.
   =========================================================================== */
@media screen and ( max-width: 782px ) {
	.mlsimport-settings-tabs {
		flex-direction: column;
		align-items: stretch;
	}

	.mlsimport-settings-tabs__menu {
		flex: 0 1 auto;
		width: 100%;
		box-sizing: border-box;
		padding: 0 0 12px;
		margin: 0 0 12px;
		border-right: 0;
		border-bottom: 1px solid var(--border-color, rgba(28, 25, 23, 0.12));
	}

	.mlsimport-settings-tabs__panel {
		width: 100%;
		box-sizing: border-box;
		min-height: 0;
		padding: 8px 4px 4px;
	}
}