@charset "utf-8";

/* ==========================================================================
   C.D.S. Systemmeldungen Layout 2027 (Frontend, Joomla 4+)
   Copyright (c) by Code-Design Hechl :: www.code-design.at
   --------------------------------------------------------------------------
   - Geladen im Template cds_alpha (cds_alpha.inc.php -> load_HEAD(), nur Joomla 4+)
   - HTML kommt aus dem Override templates/cds_alpha/html/layouts/joomla/system/message.php
     (gleicher Aufbau wie im Joomla Backend):
       <div id="system-message-container">
         <joomla-alert type="success|info|warning|danger" dismiss="true">
           <button class="joomla-alert--close">  (erzeugt das Webcomponent)
           <div class="alert-heading"><span class="success"></span><span class="visually-hidden">Erfolg</span></div>
           <div class="alert-wrapper"><div class="alert-message">Text</div></div>
         </joomla-alert>
       </div>
   - Farben je Typ über Variablen, das Template kann sie überschreiben:
       --meldung-text, --meldung-bg, --meldung-rand, --meldung-kopf-bg, --meldung-kopf-text, --meldung-radius
   ========================================================================== */


/* ---------- Hilfsklassen aus Bootstrap 5 (Joomla 6 Core nutzt sie, das Template ist Bootstrap 3) ---------- */

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}


/* ---------- Meldungsbox ---------- */

#system-message-container joomla-alert {
	--meldung-text: #17663a;
	--meldung-bg: #ecf8f0;
	--meldung-rand: #c7ebd4;
	--meldung-kopf-bg: #1a9b4b;
	--meldung-kopf-text: #ffffff;
	--meldung-radius: 6px;

	position: relative;
	display: flex;
	width: 100%;
	min-width: 16rem;
	padding: 0;
	margin: 0 0 1rem 0;
	overflow: hidden;
	color: var(--meldung-text);
	background-color: var(--meldung-bg);
	border: 1px solid var(--meldung-rand);
	border-radius: var(--meldung-radius);
	transition: opacity .15s linear;
}

/* Ohne JavaScript ist das Webcomponent nicht definiert - dann zeigt nur der <noscript> Fallback die Meldung */
#system-message-container joomla-alert:not(:defined) {
	display: none;
}

/* Farben je Typ */
#system-message-container joomla-alert[type="info"] {
	--meldung-text: #1d6f99;
	--meldung-bg: #eef7fd;
	--meldung-rand: #cfe8f7;
	--meldung-kopf-bg: #20a2e5;
}

#system-message-container joomla-alert[type="warning"] {
	--meldung-text: #8a5300;
	--meldung-bg: #fff7e8;
	--meldung-rand: #f7dcaa;
	--meldung-kopf-bg: #e08a00;
}

#system-message-container joomla-alert[type="danger"] {
	--meldung-text: #9b1c1c;
	--meldung-bg: #fdecec;
	--meldung-rand: #f6caca;
	--meldung-kopf-bg: #c94a4a;
}

/* Links in der Meldung */
#system-message-container joomla-alert a:not(.btn),
#system-message-container joomla-alert .alert-link {
	color: var(--meldung-text);
	font-weight: normal;
	text-decoration: underline;
}


/* ---------- Kopf (farbiger Balken links mit Icon) ---------- */

#system-message-container joomla-alert .alert-heading {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	padding: .8rem;
	font-size: 1.15rem;
	line-height: 1;
	color: var(--meldung-kopf-text);
	background: var(--meldung-kopf-bg);
}

/* Icons über Font Awesome (wird im Template geladen) */
#system-message-container joomla-alert .alert-heading span:not(.visually-hidden)::before {
	display: inline-block;
	width: 1em;
	text-align: center;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f05a"; /* circle-info */
}

#system-message-container joomla-alert .alert-heading .success::before,
#system-message-container joomla-alert .alert-heading .message::before {
	content: "\f058"; /* circle-check */
}

#system-message-container joomla-alert .alert-heading .warning::before {
	content: "\f071"; /* triangle-exclamation */
}

#system-message-container joomla-alert .alert-heading .danger::before,
#system-message-container joomla-alert .alert-heading .error::before {
	content: "\f057"; /* circle-xmark */
}


/* ---------- Text ---------- */

#system-message-container joomla-alert .alert-wrapper {
	width: 100%;
}

#system-message-container joomla-alert .alert-message {
	margin: .5rem;
	padding: .15rem .3rem;
	padding-right: 2rem;
	font-size: 1rem;
}

#system-message-container joomla-alert .alert-message:not(:first-of-type) {
	border-top: 1px solid var(--meldung-rand);
}


/* ---------- Schließen-Button (erzeugt das Webcomponent) ---------- */

#system-message-container joomla-alert .joomla-alert--close,
#system-message-container joomla-alert .joomla-alert-button--close {
	position: absolute;
	top: 0;
	right: 0;
	float: none;
	padding: .75rem .8rem;
	font-size: 2rem;
	font-weight: 400;
	line-height: 1rem;
	color: var(--meldung-text);
	text-shadow: none;
	background: none;
	border: 0;
	opacity: 1;
}

#system-message-container joomla-alert .joomla-alert--close:hover,
#system-message-container joomla-alert .joomla-alert--close:focus,
#system-message-container joomla-alert .joomla-alert-button--close:hover,
#system-message-container joomla-alert .joomla-alert-button--close:focus {
	text-decoration: none;
	cursor: pointer;
	opacity: .75;
}