/*
 * ContractFlow select system — the single source for every dropdown in wp-admin, the plugin
 * screens and the login page. Every single-choice <select> inherits it:
 *
 *   base          select.cfp-select, .cfp select.cfp-input, body.cfp-theme select, body.login select
 *   field size    .cfp select.cfp-input            (42px, full width — the height of form inputs)
 *   small size    .cfp-select--sm, .tablenav and toolbar filters (32px)
 *   default size  everything else                  (38px — the height of buttons)
 *
 * Multi-selects and list boxes ([multiple], [size] > 1) keep the colours but not the arrow or height.
 * Exclusions sit inside :where() so they add no specificity and size rules win.
 */

:root {
	--cfs-h: 38px;
	--cfs-h-sm: 32px;
	--cfs-h-field: 42px;
	--cfs-radius: 10px;
	--cfs-font: 500 14px/1.4 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
	--cfs-ink: #15232c;
	--cfs-muted: #5d6870;
	--cfs-line: #e4ddcf;
	--cfs-petrol: #0f4c5c;
	--cfs-petrol-2: #146b7d;
	--cfs-petrol-soft: #e4f0f1;
	--cfs-disabled: #f7f5f0;
	--cfs-focus: 0 0 0 3px rgba(20, 107, 125, .15);
	--cfs-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d6870' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--cfs-arrow-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23146b7d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
body select.cfp-select,
.cfp select.cfp-input,
body.cfp-theme select:where(:not([multiple], [size]:not([size="1"]))),
body.login select:where(:not([multiple], [size]:not([size="1"]))) {
	-webkit-appearance: none; appearance: none; box-sizing: border-box;
	height: var(--cfs-h); min-height: var(--cfs-h); margin: 0;
	padding: 0 12px; padding-inline-end: 34px;
	border: 1px solid var(--cfs-line); border-radius: var(--cfs-radius);
	background: #fff var(--cfs-arrow) no-repeat right 12px center / 12px;
	font: var(--cfs-font); color: var(--cfs-ink); text-overflow: ellipsis; white-space: nowrap;
	box-shadow: none; cursor: pointer; vertical-align: middle;
	transition: border-color .15s, box-shadow .15s;
}
body.rtl select.cfp-select,
.rtl .cfp select.cfp-input,
body.rtl.cfp-theme select:where(:not([multiple], [size]:not([size="1"]))),
body.rtl.login select:where(:not([multiple], [size]:not([size="1"]))) {
	background-position: left 12px center;
}

/* ---------- States ---------- */
body select.cfp-select:hover,
.cfp select.cfp-input:hover,
body.cfp-theme select:where(:not([multiple], [size]:not([size="1"]))):hover,
body.login select:where(:not([multiple], [size]:not([size="1"]))):hover {
	border-color: var(--cfs-petrol-2); background-image: var(--cfs-arrow-hover); color: var(--cfs-ink);
}
body select.cfp-select:focus,
.cfp select.cfp-input:focus,
body.cfp-theme select:focus,
body.login select:focus {
	border-color: var(--cfs-petrol-2); box-shadow: var(--cfs-focus); outline: 0; color: var(--cfs-ink);
}
body select.cfp-select:disabled,
.cfp select.cfp-input:disabled,
body.cfp-theme select:disabled {
	background-color: var(--cfs-disabled); color: var(--cfs-muted); border-color: var(--cfs-line); cursor: not-allowed; opacity: 1;
}
body.cfp-theme select option { color: var(--cfs-ink); }

/* ---------- Sizes ---------- */
/* Form fields: the height of text inputs, full width of their grid cell. */
.cfp select.cfp-input { width: 100%; max-width: none; height: var(--cfs-h-field); min-height: var(--cfs-h-field); }

/* Toolbars and list filters sit beside small buttons. */
body select.cfp-select--sm,
body.cfp-theme .tablenav select:where(:not([multiple])),
body.cfp-theme .subsubsub select,
body.cfp-theme #screen-meta select {
	height: var(--cfs-h-sm); min-height: var(--cfs-h-sm); padding-inline-start: 10px; padding-inline-end: 30px; font-size: 13px; background-size: 11px;
}
body.cfp-theme .tablenav select { margin-inline-end: 6px; }

/* ---------- Ghost: frameless, inside a pill that draws its own border (header organisation switcher) ---------- */
body select.cfp-select--ghost {
	height: 30px; min-height: 30px; border-color: transparent; background-color: transparent; font-weight: 700; color: var(--cfs-petrol);
}
body select.cfp-select--ghost:hover,
body select.cfp-select--ghost:focus { border-color: transparent; box-shadow: none; color: var(--cfs-petrol-2); }

/* ---------- Multi-select and list boxes ---------- */
body.cfp-theme select:where([multiple], [size]:not([size="1"])),
.cfp select.cfp-input[multiple] {
	height: auto; min-height: 0; padding: 6px; border: 1px solid var(--cfs-line); border-radius: var(--cfs-radius);
	background: #fff; font: var(--cfs-font); color: var(--cfs-ink);
}

/*
 * ---------- Open list ----------
 * Native dropdown lists are drawn by the operating system (the highlighted option is the system blue).
 * Browsers with customizable selects let the list itself be styled, so options take the brand colours;
 * elsewhere the closed control above still applies and the list stays native.
 */
@supports (appearance: base-select) {
	body select.cfp-select,
	.cfp select.cfp-input,
	body.cfp-theme select:where(:not([multiple], [size]:not([size="1"]))),
	body.login select:where(:not([multiple], [size]:not([size="1"]))) {
		appearance: base-select;
		display: inline-flex; align-items: center;
	}
	.cfp select.cfp-input { display: flex; }

	/* Closed label: the select's own text cannot be cut with "…" in this mode, so selects built by
	   Html::select() carry <button><selectedcontent>, which shows the chosen option and can be. */
	body select.cfp-select > button,
	.cfp select.cfp-input > button,
	body.cfp-theme select > button,
	body.login select > button {
		display: block; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
		font: inherit; color: inherit; text-align: start; overflow: hidden; cursor: inherit;
	}
	body select.cfp-select > button selectedcontent,
	.cfp select.cfp-input > button selectedcontent,
	body.cfp-theme select > button selectedcontent,
	body.login select > button selectedcontent { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

	body select.cfp-select::picker-icon,
	.cfp select.cfp-input::picker-icon,
	body.cfp-theme select::picker-icon,
	body.login select::picker-icon { display: none; }

	body select.cfp-select::picker(select),
	.cfp select.cfp-input::picker(select),
	body.cfp-theme select::picker(select),
	body.login select::picker(select) {
		appearance: base-select;
		min-width: anchor-size(width); max-height: min(340px, 60vh); margin-block: 4px; padding: 5px;
		border: 1px solid var(--cfs-line); border-radius: 12px; background: #fff;
		box-shadow: 0 12px 32px -12px rgba(21, 35, 44, .28), 0 2px 6px rgba(21, 35, 44, .06);
		overflow-y: auto;
	}
	body.cfp-theme select option,
	body.login select option,
	body select.cfp-select option,
	.cfp select.cfp-input option {
		display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 12px; border-radius: 8px;
		font: var(--cfs-font); color: var(--cfs-ink); background: transparent; white-space: nowrap; cursor: pointer;
	}
	body.cfp-theme select option:hover,
	body.cfp-theme select option:focus-visible,
	body.login select option:hover,
	body select.cfp-select option:hover,
	.cfp select.cfp-input option:hover,
	.cfp select.cfp-input option:focus-visible { background: var(--cfs-petrol-soft); color: var(--cfs-petrol); outline: 0; }
	body.cfp-theme select option:checked,
	body.login select option:checked,
	body select.cfp-select option:checked,
	.cfp select.cfp-input option:checked { background: var(--cfs-petrol); color: #fff; font-weight: 700; }
	body.cfp-theme select option::checkmark,
	body.login select option::checkmark,
	body select.cfp-select option::checkmark,
	.cfp select.cfp-input option::checkmark { display: none; }
	body.cfp-theme select option:disabled,
	.cfp select.cfp-input option:disabled { color: var(--cfs-muted); background: transparent; cursor: not-allowed; }
	body.cfp-theme select optgroup { padding: 4px 0; font-weight: 700; color: var(--cfs-muted); }
	body.cfp-theme select:open,
	.cfp select.cfp-input:open,
	body select.cfp-select:open { border-color: var(--cfs-petrol-2); box-shadow: var(--cfs-focus); }
}