/*
  Admin media pickers must match the dark admin chrome and keep Upload
  readable. Injected only on /_emdash/admin.
*/

html[data-theme] [role="dialog"].fixed,
html[data-theme] [role="alertdialog"].fixed,
html[data-theme] .emdash-media-picker.fixed,
html[data-theme] .scofc-media-picker {
	z-index: 21000 !important;
	isolation: isolate;
}

html[data-theme] .emdash-media-picker.fixed {
	min-width: 0 !important;
	width: min(56rem, calc(100vw - 2rem)) !important;
	max-width: calc(100vw - 2rem) !important;
	max-height: 80vh !important;
}

html[data-theme] [data-base-ui-portal] {
	z-index: 21000;
}

html[data-theme] [data-base-ui-portal] > .fixed.inset-0,
html[data-theme] *:has(> .emdash-media-picker.fixed) > .fixed.inset-0,
html[data-theme] *:has(> [role="dialog"].fixed) > .fixed.inset-0,
html[data-theme] *:has(> [role="alertdialog"].fixed) > .fixed.inset-0 {
	z-index: 20990 !important;
	background: rgb(0 0 0 / 0.72) !important;
	opacity: 1 !important;
}

html[data-theme] body > div:has(> .emdash-media-picker) {
	z-index: 21000 !important;
	isolation: isolate;
	background: rgb(0 0 0 / 0.72) !important;
}

html[data-mode="dark"] [role="dialog"].fixed,
html[data-mode="dark"] [role="alertdialog"].fixed,
html[data-mode="dark"] .emdash-media-picker,
html[data-mode="dark"] .emdash-media-picker.fixed {
	background: #1d2327 !important;
	color: #f3f4f6 !important;
}

html[data-mode="dark"] .emdash-media-picker button:not(:has(+ input[type="file"])):not([data-scofc-upload]) {
	color: #f3f4f6 !important;
}

.scofc-media-picker,
.scofc-media-picker > div {
	background: #1d2327 !important;
	color: #f3f4f6 !important;
}

.scofc-media-picker {
	background: rgba(0, 0, 0, 0.72) !important;
}

.scofc-media-picker > div {
	border-color: #3c434a !important;
}

html:has([role="dialog"].fixed) [data-emdash-inline-bubble-menu],
html:has([role="dialog"].fixed) [data-emdash-table-bubble-menu],
html:has([role="dialog"].fixed) .slash-command-menu-positioner,
html:has(.emdash-media-picker) [data-emdash-inline-bubble-menu],
html:has(.emdash-media-picker) [data-emdash-table-bubble-menu],
html:has(.emdash-media-picker) .slash-command-menu-positioner,
html:has(.emdash-media-picker) .emdash-bubble-menu,
html:has(.emdash-media-picker) .emdash-slash-menu,
html:has(.scofc-media-picker) [data-emdash-inline-bubble-menu],
html:has(.scofc-media-picker) .emdash-bubble-menu {
	z-index: 1 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

html[data-theme] [role="dialog"] button:has(+ input[type="file"]),
html[data-theme] .emdash-media-picker button:has(+ input[type="file"]),
html[data-theme] .scofc-media-picker [data-scofc-upload] {
	background: #72aee6 !important;
	background-color: #72aee6 !important;
	color: #0b1220 !important;
	border-color: #72aee6 !important;
	box-shadow: none !important;
	font-weight: 700 !important;
}

/* Labeled passkey Remove. EmDash only shows a rename pencil when this is
   the last key; this control stays visible on that row. */
button.scofc-passkey-remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 2rem;
	padding: 0.25rem 0.75rem !important;
	margin-inline-start: 0.35rem;
	border: 1px solid #b32d2e !important;
	border-radius: 6px !important;
	background: #b32d2e !important;
	color: #ffffff !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	line-height: 1.25rem;
	cursor: pointer;
	white-space: nowrap;
}

button.scofc-passkey-remove:hover,
button.scofc-passkey-remove:focus-visible {
	background: #8a2424 !important;
	border-color: #8a2424 !important;
	color: #ffffff !important;
}

button.scofc-passkey-remove:disabled {
	opacity: 0.7;
	cursor: wait;
}

html[data-mode="dark"] button.scofc-passkey-remove {
	background: #e35d5d !important;
	border-color: #e35d5d !important;
	color: #1d2327 !important;
}

html[data-mode="dark"] button.scofc-passkey-remove:hover,
html[data-mode="dark"] button.scofc-passkey-remove:focus-visible {
	background: #f87171 !important;
	border-color: #f87171 !important;
	color: #1d2327 !important;
}