/* ============================================================================================================================
	rm-brand-states.css - Recuro Media's colours for every interactive state (4 Oct 2026; brand.css until Step 4, 5 Oct 2026). Loaded
	last of the common stylesheets (after rm-components.css), so it wins over Bootstrap, the vendor stylesheets and our older rules.

	The palette is in assets/tokens/rm-brand-tokens.css (--rm-orange, --rm-dark, --rm-grey, ...; generated from the project's
	brands\recuro-brand.json since Step 4, 5 Oct 2026). So is the accent used below (--rm-accent: the company theme colour
	--theme-color, our orange by default or the colour the workspace sets for a company) and its focus rings, so focus rings follow
	a company's own colour; --rm-orange itself stays the brand value.
	Rule of thumb for the states (:focus, :focus-visible, :active, .active, :hover, :checked, :disabled):
	- where the site showed our orange or our dark/grey style before, it shows exactly that again (Bootstrap 4.6 had put its own
	  blue background on focused buttons);
	- where it showed Bootstrap's blue (focus rings, pressed buttons, active list rows, native checkbox/radio ticks, paging focus),
	  it shows our orange now: a focus ring is a semi-transparent orange shadow in Bootstrap's shape, so keyboard focus stays
	  visible.
============================================================================================================================ */

/* ---- Primary buttons: orange with the white border in every state (before: blue when focused or pressed) ---- */
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
	color: var(--rm-white);
	background-color: var(--rm-accent);
	border-color: var(--rm-white);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 .2rem var(--rm-accent-focus);
}

/* ---- Secondary buttons: our grey, as before (Bootstrap 4.6 made a focused one dark grey) ---- */
.btn-secondary:focus,
.btn-secondary.focus {
	color: var(--rm-white);
	background-color: var(--rm-grey);
	border-color: var(--rm-white);
}

.btn-secondary:focus:hover,
.btn-secondary.focus:hover {
	background-color: var(--rm-grey-hover);
}

.btn-secondary:focus,
.btn-secondary.focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
	--rm-btn-secondary-ring: rgba(108, 117, 125, 0.5);	/* Bootstrap 4's secondary grey at 50 % */
	box-shadow: 0 0 0 .2rem var(--rm-btn-secondary-ring);
}

/* ---- Light buttons (the bootstrap-select fields; their colours are in rm-components.css): the focus ring they had ---- */
.btn-light:focus,
.btn-light.focus,
.btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-light.dropdown-toggle:focus {
	--rm-btn-light-ring: rgba(248, 249, 250, 0.5);		/* Bootstrap 4's light grey at 50 % */
	box-shadow: 0 0 0 .2rem var(--rm-btn-light-ring);
}

/* ---- Drop-down rows: a pressed row is orange (before: blue); bootstrap-select's selected row: rm-components.css ---- */
.dropdown-item:active {
	background-color: var(--rm-accent);
}

/* ---- Fields: the grey focus border they had stays (rm-components-theme.css, also for DataTables' "Show N entries", a form-control too);
   Bootstrap's blue on other custom selects/controls becomes orange ---- */
.custom-select:not(.form-control):focus {
	border-color: var(--rm-accent);
	box-shadow: 0 0 0 .2rem var(--rm-accent-focus-soft);
}

.custom-control-input:checked ~ .custom-control-label::before {
	color: var(--rm-white);
	border-color: var(--rm-accent);
	background-color: var(--rm-accent);
}

.custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 .2rem var(--rm-accent-focus-soft);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
	border-color: var(--rm-accent);
}

/* Native checkboxes, radios, range sliders and progress elements: our orange instead of the browser's blue */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
	accent-color: var(--rm-accent);
}

/* ---- Paging (DataTables uses Bootstrap's pagination): the orange focus ring (before: blue); colours: rm-components-theme.css ---- */
.page-link:focus {
	box-shadow: 0 0 0 .2rem var(--rm-accent-focus-soft);
}

/* ---- Bootstrap components that are blue when active (in case a page uses them; .btn-link and links: rm-base.css / rm-components-theme.css use ours) ---- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background-color: var(--rm-accent);
}

.list-group-item.active {
	background-color: var(--rm-accent);
	border-color: var(--rm-accent);
}

.page-item.active .page-link {
	background-color: var(--rm-accent);
	border-color: var(--rm-accent);
}

/* ---- Keyboard focus (JS plugins sweep, 6 Oct 2026; UI Code Style Guide 4.4: focus is always visible): rm-base.css removes every outline
   (:focus { outline: none !important }); the links and buttons that had no ring of their own (menu, logo, footer, social icons, the
   gallery tiles, ...) show the accent ring for the keyboard (not for a mouse click: :focus-visible); Windows High Contrast drops
   box-shadow rings, so there every focused element gets the system's outline ---- */
:is(a[href], button, [role="button"], summary, [tabindex]:not([tabindex="-1"])):not(.page-link, .form-control, .rm-select__control, .rm-gallery__button, .rm-gallery__poster, .rm-notify__close, .rm-table__sort, .rm-developer__toc-link, .rm-developer__toc-toggle, .rm-developer__anchor, .rm-clip-btn, .rm-signin-tab, .rm-signin-btn, .rm-signin-wrap, .rm-signin-link-row > a, .my-file-delete, .rm-selectkeyframes__delete, .media-editor-btn, .sample-video):focus-visible {
	outline: 2px solid var(--rm-accent) !important;		/* (!important: beats rm-base.css's :focus { outline: none !important }) */
	outline-offset: 2px;
}
/* The trash icons never show the orange (owner, 18 Oct 2026: "never show the orange selection on the trash can" - left out of the accent
   ring above): a neutral ring for the keyboard, the dark text colour on a media entry's grey title bar (inside its 44-px box, which fills
   the bar's height), the light grey over the Select Keyframes pictures. A press on a list row's trash (the preset and upload server lists
   of Job Settings) does not turn the row orange either: the row keeps its highlight; the pencil keeps its look */
/* (owner, 18 Oct 2026, later: "The trash can now shows a black selector, it should never be shown" - no focus ring of any colour on the
   trash icons, also not for the keyboard; Windows High Contrast below keeps its system ring) */
:is(.my-file-delete, .rm-selectkeyframes__delete):is(:focus, :focus-visible, :active) { outline: none !important; box-shadow: none !important; }
/* (the play icons too - owner, 18 Oct 2026: "The focus ring should never be displayed on the play icon either in workspace or settings": the
   workspace entry's player button and Job Settings' play/pause sample video links) */
:is(.media-editor-btn, .sample-video):is(:focus, :focus-visible, :active) { outline: none !important; box-shadow: none !important; }
.rm-select .rm-select__option[data-selectable]:active:has([data-list-action="delete"]:active) { color: var(--rm-select-row-active); background-color: var(--rm-select-row-active-bg); }
/* (the dialogs' close button has a large padding box over the dialog's corner: its ring inside it) */
.modal .modal-header button.btn-close:focus-visible { outline-offset: -6px; }
@media (forced-colors: active) {
	:focus-visible { outline: 2px solid Highlight !important; outline-offset: 1px; }
	/* (the trash icons: no ring in High Contrast either - owner, 18 Oct 2026: "It should be disabled") */
	:is(.my-file-delete, .rm-selectkeyframes__delete, .media-editor-btn, .sample-video):is(:focus, :focus-visible, :active) { outline: none !important; }
	/* (inside the developer page's scrolling contents list: drawn inside the link, not clipped) */
	:is(.rm-developer__toc-link, .rm-developer__toc-toggle, .rm-developer__anchor):focus-visible { outline-offset: -2px; }
}

/* ---- Autofilled fields (the browser's saved logins/addresses) keep our colours: Chrome/Edge paint them light blue (#E8F0FE) ---- */
/* (also when focused: written stronger than rm-components-theme.css's .form-control:focus { box-shadow: none }) */
input:-webkit-autofill,
input:autofill,
input.form-control:-webkit-autofill:focus,
input.form-control:autofill:focus { -webkit-text-fill-color: var(--rm-dark); caret-color: var(--rm-dark); box-shadow: 0 0 0 1000px var(--rm-white) inset; }
:is(.dark, .modal-content) input:-webkit-autofill,
:is(.dark, .modal-content) input:autofill,
:is(.dark, .modal-content) input.form-control:-webkit-autofill:focus,
:is(.dark, .modal-content) input.form-control:autofill:focus { -webkit-text-fill-color: var(--rm-grey-99); caret-color: var(--rm-grey-99); box-shadow: 0 0 0 1000px var(--rm-darker) inset; }