/**
 * Captain-edit surfaces — component styles (AC-112).
 *
 * Plugin-owned so the modal, request-link forms and buttons don't depend on the
 * theme (the current theme is slated for replacement; the plugin outlives it).
 * Colours use theme.json preset tokens (orange = brand
 * var(--wp--preset--color--ic-orange) = #FF6D00); preset vars are always present
 * on the front end via WordPress global styles, so no theme CSS dependency.
 *
 * Extracted from inline styles previously living in captain-edit.php:
 *   - the wp_footer modal <style> block (this file, below)
 *   - inline button style= attrs        → unified to .btn.invictus-orange-bg in the theme (AC-114)
 *   - JS STYLE_OK/STYLE_ERR cssText      → .ic-alert component (AC-112 commit 2)
 */

/*
 * Request-link modal — native <dialog>, plugin classes (AC-171).
 *
 * Fully plugin-owned: no Bootstrap, no theme framework. Colour tokens chain
 * old-theme preset → Challenge preset → literal, so the dialog renders the
 * same whichever theme is active:
 *   var(--wp--preset--color--ic-orange, var(--wp--preset--color--orange, #FF6D00))
 */
.ic-modal {
	background-color: var(--wp--preset--color--ic-bg-medium, var(--wp--preset--color--bg-medium, #212224));
	color: var(--wp--preset--color--ic-text-primary, var(--wp--preset--color--text, #BBBBBB));
	border: 1px solid #3a3b3d; /* divider grey — no preset equivalent */
	border-radius: 8px;
	padding: 0;
	width: min(480px, calc(100vw - 2rem));
	font-family: inherit;
}
.ic-modal::backdrop {
	background: rgb(0 0 0 / 0.6);
}
.ic-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #3a3b3d;
	padding: 1.25rem 1.5rem;
}
.ic-modal__title {
	color: var(--wp--preset--color--ic-orange, var(--wp--preset--color--orange, #FF6D00));
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	margin: 0;
	line-height: 1.2;
}
.ic-modal__close {
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 0.25rem;
	opacity: 0.7;
	line-height: 0;
}
.ic-modal__close:hover { opacity: 1; }
.ic-modal__body {
	padding: 1.5rem;
}
.ic-modal__body > p {
	color: var(--wp--preset--color--ic-text-muted, var(--wp--preset--color--text-muted, #999999));
	margin: 0 0 1.25rem;
	line-height: 1.5;
}
.ic-modal__label {
	display: block;
	color: var(--wp--preset--color--ic-text-primary, var(--wp--preset--color--text-sub, #DDDDDD));
	font-weight: 600;
	margin-bottom: 0.5rem;
}
.ic-modal__input {
	display: block;
	width: 100%;
	padding: 0.6rem 0.75rem;
	background: var(--wp--preset--color--ic-bg-dark, var(--wp--preset--color--bg-dark, #16151A));
	color: inherit;
	border: 1px solid #3a3b3d;
	border-radius: 6px;
}
.ic-modal__input:focus {
	outline: 2px solid var(--wp--preset--color--ic-orange, var(--wp--preset--color--orange, #FF6D00));
	outline-offset: 1px;
}
.ic-modal__footer {
	border-top: 1px solid #3a3b3d;
	padding: 1rem 1.5rem;
}

/*
 * Inline status messages for the AJAX request-link forms (modal + expired-link
 * prefill). Same .ic-alert component the server-rendered edit-page alerts use;
 * plugin-owned here so these surfaces don't depend on the theme. The JS toggles
 * the modifier class instead of writing inline cssText. Success/error greens and
 * reds have no preset equivalent — semantic one-offs kept as literals.
 */
.ic-alert {
	padding: .85rem 1rem;
	border: 1px solid transparent;
	border-radius: 6px;
	font-weight: 600;
	margin-top: 1rem;
}
.ic-alert--success { background: #1c3a1c; color: #c8f7c8; border-color: #3a7a3a; }
.ic-alert--error   { background: #5b1a1a; color: #ffdada; border-color: #a33; }

/* Expired-link prefill form (locked /uredi-hipodrom/ state). */
.ic-captain-link-form { max-width: 420px; }

/*
 * Link-sent state — once the e-mail is on its way, collapse the form to just the
 * confirmation message (.ic-alert stays). Added to the form on success by the JS.
 */
.ic-link-sent label,
.ic-link-sent input,
.ic-link-sent button,
.ic-link-sent .ic-modal__body > p,
.ic-link-sent .ic-modal__footer { display: none; }