/* Shared toast/dialog UI, replacing the browser's native alert()/confirm()/
   prompt(). Visual language matches innerg-marianatek's existing instructor
   modal (centered dialog, blurred backdrop) for consistency across plugins.
   Depends on innerg-buttons for the .innerg-btn classes used inside
   dialogs -- see Assets.php's STYLE_DEPS. */

.innerg-toast-region {
	position: fixed;
	inset-block-start: max( 1rem, env( safe-area-inset-top ) );
	inset-inline-end: 1rem;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	max-inline-size: min( 22rem, calc( 100vw - 2rem ) );
	pointer-events: none;
}

.innerg-toast {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.85rem 0.9rem;
	background: var( --background );
	border: 1px solid var( --border );
	border-inline-start: 3px solid var( --accent );
	box-shadow: 0 0.5rem 1.5rem color-mix( in srgb, var( --foreground ) 18%, transparent );
	opacity: 0;
	transform: translateY( -0.5rem );
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: auto;
}

.innerg-toast.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

.innerg-toast--success {
	border-inline-start-color: var( --accent );
}

.innerg-toast--error {
	border-inline-start-color: #b8433a;
}

.innerg-toast__message {
	margin: 0;
	flex: 1 1 auto;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var( --foreground );
}

.innerg-toast__close {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: var( --muted-foreground );
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.innerg-toast__close:hover,
.innerg-toast__close:focus-visible {
	color: var( --foreground );
}

/* Dialogs (confirm / rating / date-range) -- same backdrop+centered-card
   pattern as innerg-marianatek's .innerg-mt-instructor-modal. */

.innerg-mt-modal-open {
	overflow: hidden;
}

.innerg-dialog-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 1.25rem;
	background: color-mix( in srgb, var( --foreground ) 62%, transparent );
	backdrop-filter: blur( 5px );
}

.innerg-dialog {
	position: relative;
	inline-size: min( 100%, 26rem );
	max-block-size: min( 90vh, 32rem );
	overflow: auto;
	padding: clamp( 1.25rem, 4vw, 2rem );
	border: 1px solid var( --border );
	background: var( --background );
	color: var( --foreground );
}

.innerg-dialog__message {
	margin: 0 0 1.25rem;
	font-size: 1rem;
	line-height: 1.5;
}

.innerg-dialog__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-block-start: 1.5rem;
}

.innerg-dialog__confirm--danger {
	background-color: #b8433a;
}

.innerg-dialog__confirm--danger:hover {
	background-color: #96362f;
}

.innerg-dialog__stars {
	display: flex;
	gap: 0.4rem;
	font-size: 2rem;
	line-height: 1;
}

.innerg-dialog__star {
	border: 0;
	background: transparent;
	color: var( --border );
	cursor: pointer;
	padding: 0.15rem;
	transition: color 0.15s ease, transform 0.15s ease;
}

.innerg-dialog__star:hover,
.innerg-dialog__star:focus-visible {
	transform: scale( 1.1 );
}

.innerg-dialog__star.is-active {
	color: var( --accent );
}

.innerg-dialog__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-block-end: 1rem;
	font-size: 0.85rem;
	color: var( --muted-foreground );
}

.innerg-dialog__field input {
	padding: 0.6rem 0.75rem;
	border: 1px solid var( --border );
	background: var( --background );
	color: var( --foreground );
	font: inherit;
	/* iOS Safari renders date inputs with its own oversized native chrome
	   and can clip/shrink them inside a narrow flex/grid ancestor; a fixed
	   min-height plus 100% width keeps the tappable area consistent there. */
	min-block-size: 2.75rem;
	inline-size: 100%;
}