/**
 * Rajgir Parent Theme
 *
 * Component CSS — Alerts
 *
 * Canonical path:
 * assets/css/components/alerts.css
 *
 * IMPORTANT ARCHITECTURAL DISTINCTION:
 *
 * ALERT
 *   ≠
 * NOTIFICATION
 *   ≠
 * ESCALATION
 *
 * This file owns visual alert presentation only.
 *
 * It does NOT:
 * - detect operational conditions;
 * - create production alerts;
 * - determine alert severity;
 * - send notifications;
 * - perform escalation;
 * - assign operational ownership;
 * - perform authorization;
 * - access the database;
 * - perform API operations;
 * - mutate business/application state.
 *
 * @package Rajgir
 */


/* ==========================================================================
   1. ALERT FOUNDATION
   ========================================================================== */

.rg-alert {
	position: relative;

	display: flex;

	align-items: flex-start;

	gap:
		var(--rajgir-space-component-gap);

	width: 100%;

	padding:
		var(--rajgir-space-alert-block)
		var(--rajgir-space-alert-inline);

	border:
		1px solid var(--rajgir-color-border);

	border-radius:
		var(--rajgir-radius-alert);

	background:
		var(--rajgir-color-surface);

	color:
		var(--rajgir-color-text);
}


/* ==========================================================================
   2. ALERT ICON
   ========================================================================== */

.rg-alert__icon {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	flex:
		0 0 auto;

	width:
		var(--rajgir-size-icon-md);

	min-width:
		var(--rajgir-size-icon-md);

	height:
		var(--rajgir-size-icon-md);
}


/* ==========================================================================
   3. ALERT CONTENT
   ========================================================================== */

.rg-alert__content {
	flex:
		1 1 auto;

	min-width: 0;
}


/* ==========================================================================
   4. ALERT TITLE
   ========================================================================== */

.rg-alert__title {
	margin: 0;

	color:
		var(--rajgir-color-text);

	font-family:
		var(--rajgir-type-alert-title-font-family);

	font-size:
		var(--rajgir-type-alert-title-font-size);

	font-weight:
		var(--rajgir-type-alert-title-font-weight);

	line-height:
		var(--rajgir-type-alert-title-line-height);

	overflow-wrap:
		break-word;
}


/* ==========================================================================
   5. ALERT MESSAGE
   ========================================================================== */

.rg-alert__message {
	margin:
		var(--rajgir-space-alert-title-message-gap)
		0
		0;

	color:
		var(--rajgir-color-text);

	font-family:
		var(--rajgir-font-family-body);

	font-size:
		var(--rajgir-font-size-body);

	line-height:
		var(--rajgir-line-height-body);

	overflow-wrap:
		break-word;
}


/* ==========================================================================
   6. ALERT DESCRIPTION
   ========================================================================== */

.rg-alert__description {
	margin:
		var(--rajgir-space-alert-message-description-gap)
		0
		0;

	color:
		var(--rajgir-color-text-muted);

	font-family:
		var(--rajgir-font-family-body);

	font-size:
		var(--rajgir-font-size-small);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   7. ALERT ACTIONS
   ========================================================================== */

.rg-alert__actions {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap:
		var(--rajgir-space-component-gap);

	margin-top:
		var(--rajgir-space-alert-actions-gap);
}


/* ==========================================================================
   8. ALERT ACTION LINK
   ========================================================================== */

.rg-alert__actions a {
	color:
		var(--rajgir-color-primary);

	font-weight:
		var(--rajgir-font-weight-semibold);

	text-decoration: underline;

	text-underline-offset:
		0.15em;
}


/* ==========================================================================
   9. ALERT ACTION FOCUS
   ========================================================================== */

.rg-alert__actions a:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   10. ALERT CLOSE CONTROL
   ========================================================================== */

.rg-alert__close {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	flex:
		0 0 auto;

	width:
		var(--rajgir-button-icon-size);

	min-width:
		var(--rajgir-button-icon-size);

	height:
		var(--rajgir-button-icon-size);

	padding: 0;

	border:
		1px solid transparent;

	border-radius:
		var(--rajgir-radius-control);

	background:
		transparent;

	color:
		var(--rajgir-color-text);

	cursor: pointer;
}


/* ==========================================================================
   11. ALERT CLOSE — HOVER
   ========================================================================== */

.rg-alert__close:hover {
	background:
		var(--rajgir-color-surface-hover);

	color:
		var(--rajgir-color-primary);
}


/* ==========================================================================
   12. ALERT CLOSE — FOCUS
   ========================================================================== */

.rg-alert__close:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   13. INFORMATIONAL ALERT
   ========================================================================== */

.rg-alert--informational,
.rg-alert--info {
	background:
		var(--rajgir-color-info-surface);

	color:
		var(--rajgir-color-text);

	border-color:
		var(--rajgir-color-info);
}


/* ==========================================================================
   14. INFORMATIONAL ALERT ICON
   ========================================================================== */

.rg-alert--informational .rg-alert__icon,
.rg-alert--info .rg-alert__icon {
	color:
		var(--rajgir-color-info);
}


/* ==========================================================================
   15. WARNING ALERT
   ========================================================================== */

.rg-alert--warning {
	background:
		var(--rajgir-color-warning-surface);

	color:
		var(--rajgir-color-text);

	border-color:
		var(--rajgir-color-warning);
}


/* ==========================================================================
   16. WARNING ALERT ICON
   ========================================================================== */

.rg-alert--warning .rg-alert__icon {
	color:
		var(--rajgir-color-warning);
}


/* ==========================================================================
   17. HIGH PRIORITY ALERT
   ========================================================================== */

.rg-alert--high-priority {
	background:
		var(--rajgir-color-high-priority-surface);

	color:
		var(--rajgir-color-text);

	border-color:
		var(--rajgir-color-high-priority);
}


/* ==========================================================================
   18. HIGH PRIORITY ALERT ICON
   ========================================================================== */

.rg-alert--high-priority .rg-alert__icon {
	color:
		var(--rajgir-color-high-priority);
}


/* ==========================================================================
   19. CRITICAL ALERT
   ========================================================================== */

.rg-alert--critical {
	background:
		var(--rajgir-color-critical-surface);

	color:
		var(--rajgir-color-text);

	border-color:
		var(--rajgir-color-critical);
}


/* ==========================================================================
   20. CRITICAL ALERT ICON
   ========================================================================== */

.rg-alert--critical .rg-alert__icon {
	color:
		var(--rajgir-color-critical);
}


/* ==========================================================================
   21. ERROR PRESENTATION
   ========================================================================== */

.rg-alert--error {
	background:
		var(--rajgir-color-error-surface);

	color:
		var(--rajgir-color-text);

	border-color:
		var(--rajgir-color-error);
}


/* ==========================================================================
   22. ERROR ALERT ICON
   ========================================================================== */

.rg-alert--error .rg-alert__icon {
	color:
		var(--rajgir-color-error);
}


/* ==========================================================================
   23. SUCCESS / RESOLVED PRESENTATION
   ========================================================================== */

.rg-alert--success,
.rg-alert--resolved {
	background:
		var(--rajgir-color-success-surface);

	color:
		var(--rajgir-color-text);

	border-color:
		var(--rajgir-color-success);
}


/* ==========================================================================
   24. SUCCESS ALERT ICON
   ========================================================================== */

.rg-alert--success .rg-alert__icon,
.rg-alert--resolved .rg-alert__icon {
	color:
		var(--rajgir-color-success);
}


/* ==========================================================================
   25. ALERT SEVERITY LABEL
   ========================================================================== */

.rg-alert__severity {
	display: inline-flex;

	align-items: center;

	width: fit-content;

	margin-bottom:
		var(--rajgir-space-alert-severity-gap);

	padding:
		var(--rajgir-space-alert-severity-block)
		var(--rajgir-space-alert-severity-inline);

	border-radius:
		var(--rajgir-radius-pill);

	font-size:
		var(--rajgir-font-size-small);

	font-weight:
		var(--rajgir-font-weight-semibold);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   26. INFORMATIONAL SEVERITY LABEL
   ========================================================================== */

.rg-alert--informational .rg-alert__severity,
.rg-alert--info .rg-alert__severity {
	background:
		var(--rajgir-color-info);

	color:
		var(--rajgir-color-text-inverse);
}


/* ==========================================================================
   27. WARNING SEVERITY LABEL
   ========================================================================== */

.rg-alert--warning .rg-alert__severity {
	background:
		var(--rajgir-color-warning);

	color:
		var(--rajgir-color-text-inverse);
}


/* ==========================================================================
   28. HIGH PRIORITY SEVERITY LABEL
   ========================================================================== */

.rg-alert--high-priority .rg-alert__severity {
	background:
		var(--rajgir-color-high-priority);

	color:
		var(--rajgir-color-text-inverse);
}


/* ==========================================================================
   29. CRITICAL SEVERITY LABEL
   ========================================================================== */

.rg-alert--critical .rg-alert__severity {
	background:
		var(--rajgir-color-critical);

	color:
		var(--rajgir-color-text-inverse);
}


/* ==========================================================================
   30. ALERT STATUS
   ========================================================================== */

.rg-alert__status {
	display: inline-flex;

	align-items: center;

	margin-top:
		var(--rajgir-space-alert-status-gap);

	color:
		var(--rajgir-color-text-muted);

	font-size:
		var(--rajgir-font-size-small);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   31. ALERT METADATA
   ========================================================================== */

.rg-alert__meta {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap:
		var(--rajgir-space-meta-gap);

	margin-top:
		var(--rajgir-space-alert-meta-gap);

	color:
		var(--rajgir-color-text-muted);

	font-size:
		var(--rajgir-font-size-small);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   32. ALERT RESPONSIBLE PATH
   ========================================================================== */

.rg-alert__owner,
.rg-alert__responsibility {
	color:
		var(--rajgir-color-text);

	font-weight:
		var(--rajgir-font-weight-semibold);
}


/*
 * This is presentation only.
 *
 * Ownership is determined by the approved operational architecture.
 */


/* ==========================================================================
   33. ALERT ACKNOWLEDGED
   ========================================================================== */

.rg-alert.is-acknowledged,
.rg-alert[data-state="acknowledged"] {
}


/* ==========================================================================
   34. ALERT OPEN
   ========================================================================== */

.rg-alert.is-open,
.rg-alert[data-state="open"] {
}


/* ==========================================================================
   35. ALERT RESOLVED
   ========================================================================== */

.rg-alert.is-resolved,
.rg-alert[data-state="resolved"] {
	opacity:
		var(--rajgir-state-resolved-opacity);
}


/* ==========================================================================
   36. ALERT ESCALATED
   ========================================================================== */

.rg-alert.is-escalated,
.rg-alert[data-state="escalated"] {
}


/*
 * Escalation state is represented only.
 *
 * The escalation decision belongs to the operational governance layer.
 */


/* ==========================================================================
   37. ALERT DISMISSED
   ========================================================================== */

.rg-alert.is-dismissed,
.rg-alert[hidden] {
	display: none;
}


/* ==========================================================================
   38. ALERT LIVE REGION
   ========================================================================== */

/*
 * ARIA live behavior belongs to semantic markup.
 *
 * Example where appropriate:
 *
 * role="alert"
 *
 * or:
 *
 * aria-live="polite"
 *
 * CSS does not create accessibility semantics.
 */


/* ==========================================================================
   39. ALERT FOCUS
   ========================================================================== */

.rg-alert a:focus-visible,
.rg-alert button:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   40. ALERT CONTRAST
   ========================================================================== */

/*
 * Alert foreground/background combinations must consume approved
 * accessible color tokens.
 *
 * Do not introduce arbitrary alert colors here.
 */


/* ==========================================================================
   41. ALERT NOTIFICATION BOUNDARY
   ========================================================================== */

/*
 * ALERT
 *     ↓
 * Operational condition
 *
 * NOTIFICATION
 *     ↓
 * Delivery to relevant person/role/system
 *
 * ESCALATION
 *     ↓
 * Higher or alternate response path
 *
 * These are separate concerns.
 */


/* ==========================================================================
   42. NO NOTIFICATION ENGINE
   ========================================================================== */

/*
 * This CSS does NOT:
 *
 * - send email;
 * - send SMS;
 * - send push notifications;
 * - create notification records;
 * - select recipients;
 * - broadcast alerts.
 */


/* ==========================================================================
   43. NO ESCALATION ENGINE
   ========================================================================== */

/*
 * This CSS does NOT:
 *
 * - escalate incidents;
 * - assign responsibility;
 * - select backup responders;
 * - determine escalation thresholds;
 * - change operational ownership.
 */


/* ==========================================================================
   44. ALERT CONTENT SAFETY
   ========================================================================== */

/*
 * Alert content should expose only information appropriate to the
 * audience and context.
 *
 * Sensitive information must not be exposed merely because an alert
 * component can visually display text.
 */


/* ==========================================================================
   45. ALERT DEDUPLICATION BOUNDARY
   ========================================================================== */

/*
 * Multiple underlying signals may represent one operational problem.
 *
 * Correlation and deduplication belong to the approved observability /
 * operational layer.
 *
 * CSS must not attempt to infer root cause.
 */


/* ==========================================================================
   46. ALERT FATIGUE BOUNDARY
   ========================================================================== */

/*
 * More alerts
 *     ≠
 * Better operations
 *
 * The component must remain visually clear without encouraging
 * excessive alert generation.
 */


/* ==========================================================================
   47. ALERT ACTION
   ========================================================================== */

.rg-alert__action {
	display: inline-flex;

	align-items: center;

	gap:
		var(--rajgir-space-icon-gap);

	color:
		var(--rajgir-color-primary);

	font-weight:
		var(--rajgir-font-weight-semibold);

	text-decoration: none;
}


/* ==========================================================================
   48. ALERT ACTION — HOVER
   ========================================================================== */

.rg-alert__action:hover {
	color:
		var(--rajgir-color-primary-hover);
}


/* ==========================================================================
   49. ALERT ACTION — FOCUS
   ========================================================================== */

.rg-alert__action:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   50. ALERT LAYOUT
   ========================================================================== */

.rg-alert--compact {
	padding:
		var(--rajgir-space-alert-compact-block)
		var(--rajgir-space-alert-compact-inline);
}


/* ==========================================================================
   51. ALERT FULL WIDTH
   ========================================================================== */

.rg-alert--full {
	width: 100%;
}


/* ==========================================================================
   52. ALERT INLINE
   ========================================================================== */

.rg-alert--inline {
	display: inline-flex;

	width: auto;

	max-width: 100%;
}


/* ==========================================================================
   53. ALERT STACK
   ========================================================================== */

.rg-alert-stack {
	display: flex;

	flex-direction: column;

	gap:
		var(--rajgir-space-alert-stack-gap);

	width: 100%;
}


/* ==========================================================================
   54. ALERT MOTION
   ========================================================================== */

/*
 * Alerts must not continuously animate.
 *
 * Any entrance/exit animation must remain lightweight and purposeful.
 */


/* ==========================================================================
   55. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.rg-alert,
	.rg-alert-stack {
		transition: none;
	}

}


/* ==========================================================================
   56. MOBILE ALERT
   ========================================================================== */

@media (max-width: 767px) {

	.rg-alert {
		align-items: flex-start;

		padding:
			var(--rajgir-space-alert-mobile-block)
			var(--rajgir-space-alert-mobile-inline);
	}

	.rg-alert__actions {
		align-items: stretch;

		flex-direction: column;
	}

	.rg-alert__actions .rg-button {
		width: 100%;
	}

}


/* ==========================================================================
   57. ALERT RESPONSIVE SAFETY
   ========================================================================== */

.rg-alert__content {
	min-width: 0;

	overflow-wrap:
		break-word;
}


/* ==========================================================================
   58. ALERT COMPONENT COMPOSITION
   ========================================================================== */

/*
 * Alert may compose:
 *
 *     Badge
 *       +
 *     Message
 *       +
 *     Button
 *
 * Existing common components should be reused where appropriate.
 */


/* ==========================================================================
   59. ALERT + BADGE
   ========================================================================== */

.rg-alert .rg-badge {
	flex:
		0 0 auto;
}


/* ==========================================================================
   60. ALERT + BUTTON
   ========================================================================== */

.rg-alert .rg-button {
	flex:
		0 0 auto;
}


/* ==========================================================================
   61. ALERT + MODAL
   ========================================================================== */

/*
 * An alert may be presented inside a modal when the interaction
 * requires it.
 *
 * The modal remains the container.
 *
 * Alert remains the message/status component.
 */


/* ==========================================================================
   62. ALERT + FORM
   ========================================================================== */

/*
 * Form validation errors may use the Alert presentation where the
 * approved pattern requires a higher-level message.
 *
 * Field-level errors remain associated with their individual fields.
 */


/* ==========================================================================
   63. ALERT COMPONENT BOUNDARY
   ========================================================================== */

/*
 * Component:
 *
 *     alerts.css
 *
 * Behavior:
 *
 *     approved JS component, where required
 *
 * Operational authority:
 *
 *     monitoring / operations / application layer
 *
 * Notification authority:
 *
 *     notification system
 *
 * Escalation authority:
 *
 *     governed operational process
 */


/* ==========================================================================
   64. PRODUCTION ALERT MODEL
   ========================================================================== */

/*
 * The production operational model is conceptually:
 *
 * PRODUCTION SIGNAL
 *       ↓
 * DEFINED CONDITION
 *       ↓
 * ALERT
 *       ↓
 * SEVERITY + CONTEXT
 *       ↓
 * RELEVANT NOTIFICATION
 *       ↓
 * IDENTIFIED OWNER
 *       ↓
 * ACKNOWLEDGEMENT
 *       ↓
 * INITIAL RESPONSE
 *       ↓
 * RESOLVED?
 *
 * CSS begins only at the presentation boundary.
 */


/* ==========================================================================
   65. ALERT SEVERITY BOUNDARY
   ========================================================================== */

/*
 * Source conceptual model:
 *
 * INFORMATIONAL
 *      ↓
 * WARNING
 *      ↓
 * HIGH PRIORITY
 *      ↓
 * CRITICAL
 *
 * Severity communicates expected urgency and response priority.
 *
 * Technical error magnitude alone must not determine business impact.
 */


/* ==========================================================================
   66. NO ARBITRARY THRESHOLDS
   ========================================================================== */

/*
 * This component does not define:
 *
 * CPU > X
 * ERROR > Y
 * LATENCY > Z
 *
 * or any other operational threshold.
 *
 * Threshold authority belongs to approved operational specifications.
 */


/* ==========================================================================
   67. NO ARBITRARY SEVERITY VALUES
   ========================================================================== */

/*
 * The component provides presentation modifiers for the approved
 * conceptual severity model.
 *
 * It does not establish new severity taxonomy or numeric severity.
 */


/* ==========================================================================
   68. ALERT STATE PRESENTATION
   ========================================================================== */

/*
 * Possible presentation states include:
 *
 * OPEN
 * ACKNOWLEDGED
 * ESCALATED
 * RESOLVED
 * DISMISSED
 *
 * Actual state transitions belong to the authoritative application /
 * operational layer.
 */


/* ==========================================================================
   69. SECURITY BOUNDARY
   ========================================================================== */

/*
 * Alert content must not expose:
 *
 * - API keys;
 * - passwords;
 * - access tokens;
 * - private user data;
 * - unnecessary security-sensitive information.
 *
 * Presentation capability is not authorization.
 */


/* ==========================================================================
   70. FINAL COMPONENT RULE
   ========================================================================== */

/*
 * ALERT
 *
 * = meaningful signal presentation
 *
 * NOT
 *
 * = notification engine
 *
 * NOT
 *
 * = escalation engine
 *
 * NOT
 *
 * = business authority
 */