/* ============================================================
   MODALS — Report, Update, Deletion-Request
   ============================================================ */

/* Generic dashboard-style modal (used by support-modal & update-modal) */
.t-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--bg-modal-backdrop);
	z-index: var(--z-modal);
	align-items: center;
	justify-content: center;
	padding: var(--sp-6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	overflow-y: auto;
}
.t-modal.is-open {
	display: flex;
}
.t-modal--top {
	align-items: flex-start;
	padding-top: var(--sp-9);
}

.t-modal__panel {
	background: var(--bg-surface);
	border-radius: var(--radius-lg);
	width: 100%;
	max-width: 480px;
	box-shadow: var(--shadow-xl);
	animation: modal-slide-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.t-modal__panel--lg { max-width: 640px; }

@keyframes modal-slide-up {
	from { opacity: 0; transform: translateY(20px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.t-modal__body {
	padding: var(--sp-7) var(--sp-7);
}

.t-modal__header {
	padding: var(--sp-6) var(--sp-7);
	background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
	color: var(--txt-on-primary);
}
.t-modal__header--update {
	background: linear-gradient(135deg, #0D9488, #0891B2);
}
.t-modal__title {
	color: var(--txt-on-primary);
	font-size: var(--font-size-md);
	margin: 0;
}
.t-modal__sub {
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--font-size-xs);
	margin: 4px 0 0;
}

.t-modal__icon {
	font-size: 48px;
	text-align: center;
	margin-bottom: var(--sp-3);
}
.t-modal__icon--md { font-size: 36px; }

.t-modal__center {
	text-align: center;
}

.t-modal__actions {
	display: flex;
	gap: var(--sp-3);
	justify-content: flex-end;
	margin-top: var(--sp-5);
}
.t-modal__actions--equal > * {
	flex: 1;
	justify-content: center;
}

/* Locked / read-only field group */
.t-modal__locked {
	background: var(--bg-surface-2);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	margin-bottom: var(--sp-5);
}
.t-modal__locked-label {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--txt-muted);
	letter-spacing: 0.08em;
	margin-bottom: var(--sp-2);
}
.t-modal__locked-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-2);
}
.t-modal__locked-key {
	font-size: 0.72rem;
	color: var(--txt-muted);
}
.t-modal__locked-val {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--txt-primary);
}
.t-modal__locked-val--mono {
	font-family: monospace;
}

.t-modal__loading {
	text-align: center;
	padding: var(--sp-8);
}
.t-modal__loading-spinner {
	width: 36px;
	height: 36px;
	border: 3px solid var(--border-color);
	border-top-color: var(--clr-primary);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	margin: 0 auto var(--sp-3);
}

.t-modal__form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
}

.t-modal__danger-btn {
	background: linear-gradient(135deg, var(--clr-danger), var(--clr-danger-dark));
	color: var(--txt-on-primary);
}

.t-modal__update-btn {
	background: linear-gradient(135deg, #0D9488, #0891B2);
	color: var(--txt-on-primary);
	min-width: 160px;
	justify-content: center;
}

/* Inline message banner (success/error inside modals) */
.t-modal__msg {
	display: none;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius-md);
	margin-bottom: var(--sp-4);
	font-size: var(--font-size-sm);
	font-weight: 500;
}
.t-modal__msg.is-shown { display: block; }
.t-modal__msg--success {
	background: var(--bg-success-soft);
	color: var(--clr-success-dark);
}
.t-modal__msg--error {
	background: var(--bg-danger-soft);
	color: var(--clr-danger);
}

/* Existing legacy report-modal centering tweaks */
.report-modal__icon {
	font-size: 36px;
	text-align: center;
	margin-bottom: var(--sp-3);
}
.report-modal__title-center  { text-align: center; }
.report-modal__desc-center   { text-align: center; }
.report-modal__actions {
	display: flex;
	gap: var(--sp-3);
	justify-content: flex-end;
}
.report-modal__msg {
	display: none;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius-md);
	margin-bottom: var(--sp-4);
	font-size: var(--font-size-sm);
	font-weight: 500;
}
.report-modal__msg.is-shown { display: block; }

/* Status variants for the report-modal message bubble. JS swaps these
   classes instead of writing inline background/color, so the colours
   stay in lockstep with the design tokens (and dark mode). */
.report-modal__msg--error {
	background: rgba(239, 68, 68, 0.10);
	color:      var(--clr-danger);
}
.report-modal__msg--success {
	background: rgba(34, 197, 94, 0.10);
	color:      var(--clr-success);
}
.report-modal__msg--warn {
	background: rgba(245, 158, 11, 0.10);
	color:      var(--clr-warning);
}
.report-modal__spinner {
	width: 16px;
	height: 16px;
	display: none;
}
.report-modal__spinner.is-shown { display: inline-block; }

/* ======================================================================
   W3.4 — Modal helpers (inline-style replacements for support + update)
   ====================================================================== */

/* Sub-caption inside an alert/header (used in deletion-request and
   roll-out-update modals). Smaller text, muted colour, soft bottom space. */
.t-modal__caption {
	color: var(--txt-muted);
	font-size: var(--font-size-xs);
	margin-bottom: var(--sp-5);
}

/* The large modal panel (max-width:640px) needs overflow:hidden so the
   colourful header bar respects the rounded corners. */
.t-modal__panel--lg { overflow: hidden; }

/* Loading-state inner caption (same vibe as t-modal__sub but lives in body) */
.t-modal__loading-text {
	color: var(--txt-muted);
	font-size: var(--font-size-sm);
}

/* Smaller-margin variants for c-form-group inside compact modals */
.c-form-group--mb-sm { margin-bottom: 14px; }
.c-form-group--mb-md { margin-bottom: 18px; }

/* Smaller alert variants used in compact modals */
.c-alert--mb-md { margin-bottom: 16px; }
.c-alert--small { font-size: var(--font-size-xs); }