/**
 * SkiGiesing – Frontend-Stile für Kindergarten-Anmeldung und
 * Interessentenliste.
 *
 * WARUM ES DIESE DATEI GIBT
 * -------------------------
 * Das Joomla-3-Frontend lud für genau diese beiden Ansichten Bootstrap 2 nach:
 *
 *     $document->addStyleSheet($base . '/media/jui/css/bootstrap.min.css');
 *
 * (site/fork/views/kigakids/view.html.php und kigakiditem/view.html.php)
 *
 * Daher stammten .btn, .btn-primary, .pull-right, .input-prepend, .add-on,
 * .table und die Icon-Schrift. media/jui/ gibt es ab Joomla 4 nicht mehr, und
 * das Seitentemplate baut nicht auf Bootstrap auf – die Ansichten kamen
 * deshalb unformatiert.
 *
 * Diese Datei bringt genau die Regeln mit, die diese beiden Ansichten
 * brauchen. Kein vollständiges Bootstrap, nur das Nötige.
 *
 * Die Farbwerte sind aus dem Bootstrap-2-Original übernommen, damit die
 * Darstellung der bisherigen entspricht. Der grüne Button entspricht dem, was
 * template.css ab Zeile 1188 als "übernommen aus .btn-success" für den
 * Joomla-3-Toolbar-Button hinterlegt hatte.
 *
 * @copyright  Michael Hertlein
 * @license    GNU General Public License version 2 or later
 */


/* ============================================================
   Schaltflächen
   ============================================================ */

.sg-btn {
	display: inline-block;
	padding: 6px 14px;
	margin-bottom: 0;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid #ccc;
	border-radius: 4px;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	text-decoration: none;
}

.sg-btn:hover,
.sg-btn:focus {
	text-decoration: none;
}

/*
 * Grössere Ausführung für die Hauptaktion einer Seite – im Frontend ist das
 * "Neuen Interessenten eintragen". Der Anmelde-Button bleibt bewusst in der
 * normalen Grösse.
 */
.sg-btn-gross {
	padding: 12px 28px !important;
	font-size: 16px;
	font-weight: bold;
	min-width: 240px;
}

/*
 * Grün – "Eintragen". Werte wie in template.css Zeile 1188 ff.
 *
 * ZUR SELEKTOR-SCHREIBWEISE: a.sg-btn.sg-btn-success statt nur
 * .sg-btn-success. template.css hat ab Zeile 323 die Regel
 *
 *     p a[href], p a[href]:link, … { background: url(../images/link.png) …; }
 *
 * mit der Spezifität (0,2,2). Sie setzt die Kurzschreibweise "background" und
 * würde damit Farbe und Verlauf hier überschreiben – sichtbar am
 * Pfeil-Bildchen vor der Beschriftung. a.sg-btn.sg-btn-success:link kommt auf
 * (0,3,1) und gewinnt.
 *
 * Zusätzlich stehen die Schaltflächen im Layout nicht mehr in einem <p>,
 * womit die Regel gar nicht erst greift. Beides zusammen, weil die
 * Schaltfläche auch an anderer Stelle verwendet werden kann.
 */
a.sg-btn.sg-btn-success,
a.sg-btn.sg-btn-success:link,
a.sg-btn.sg-btn-success:visited,
.sg-btn-success,
.sg-btn-success:link,
.sg-btn-success:visited,
 .formResponsive button[type="submit"].sg-btn-success {
	color: #fff;
	background-color: #5bb75b;
	background-image: linear-gradient(to bottom, #62c462, #51a351);
	background-repeat: repeat-x;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

a.sg-btn.sg-btn-success:hover,
a.sg-btn.sg-btn-success:focus,
a.sg-btn.sg-btn-success:active,
.sg-btn-success:hover,
.sg-btn-success:focus,
.sg-btn-success:active,
.formResponsive button[type="submit"].sg-btn-success:hover,
.formResponsive button[type="submit"].sg-btn-success:focus,
.formResponsive button[type="submit"].sg-btn-success:active {
	color: #fff;
	background-color: #51a351;
	background-image: none;
}

/* Blau – "Anmelden" */
.sg-btn-primary {
	color: #fff;
	background-color: #006dcc;
	background-image: linear-gradient(to bottom, #08c, #04c);
	background-repeat: repeat-x;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.sg-btn-primary:hover,
.sg-btn-primary:focus,
.sg-btn-primary:active {
	color: #fff;
	background-color: #04c;
	background-image: none;
}


/* ============================================================
   Anmeldeformular
   ============================================================
   Ersetzt .input-prepend / .add-on aus Bootstrap 2. Das Symbol kommt als
   eingebettetes SVG aus dem Layout und nicht aus einer Icon-Schrift – damit
   hängt die Darstellung an keiner weiteren Ressource.
   ------------------------------------------------------------ */

.sg-anmeldung {
	max-width: 420px;
}

.sg-feld {
	margin-bottom: 12px;
}

.sg-feld label {
	display: block;
	margin-bottom: 4px;
}

.sg-eingabe-gruppe {
	display: flex;
	align-items: stretch;
}

.sg-eingabe-symbol {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	padding: 0 4px;
	background-color: #eee;
	border: 1px solid #ccc;
	border-right: 0;
	border-radius: 4px 0 0 4px;
	color: #555;
	flex: 0 0 auto;
}

.sg-eingabe-symbol svg {
	width: 16px;
	height: 16px;
	display: block;
	fill: currentColor;
}

.sg-eingabe-gruppe input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 5px 8px;
	border: 1px solid #ccc;
	border-radius: 0 4px 4px 0;
	line-height: 20px;
}

.sg-eingabe-gruppe input:focus {
	border-color: #b8e6ff;
	outline: none;
}

.form-control-feedback {
	color: red;
}


/* ============================================================
   Interessentenliste
   ============================================================ */

.kigadata {
	margin-bottom: 12px;
}

.kigadata h3 {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
}

/*
 * Ersetzt .pull-right aus Bootstrap 2.
 *
 * Die Schriftgrösse wird NICHT verkleinert: Abmelden ist die einzige Aktion
 * in dieser Zeile und muss auf Anhieb zu finden sein. Sie erbt damit die
 * Grösse der Überschrift.
 */
.kigadata .sg-rechts {
	white-space: nowrap;
}

.kigadata .sg-rechts a {
	text-decoration: underline;
}

.kigadata .sg-rechts a:hover,
.kigadata .sg-rechts a:focus {
	text-decoration: none;
}

#grid-kigakids {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
}

#grid-kigakids th,
#grid-kigakids td {
	padding: 8px;
	text-align: left;
	border-bottom: 1px solid #ddd;
	vertical-align: middle;
}

#grid-kigakids thead th {
	border-bottom: 2px solid #ddd;
	font-weight: bold;
}

#grid-kigakids tbody tr:hover {
	background-color: #f5f5f5;
}

/* Kursklasse als Auszeichnung – entspricht dem .label aus Bootstrap 2, mit
   dem der Joomla-3-Bestand den Wert dargestellt hat. */
.sg-kursklasse {
	display: inline-block;
	padding: 2px 6px;
	font-size: 12px;
	line-height: 15px;
	color: #fff;
	background-color: #999;
	border-radius: 3px;
	white-space: nowrap;
}

/* Abstand unter der Aktionszeile – ersetzt den Absatzabstand des <p>, das
   hier aus Gründen der Spezifität nicht verwendet werden kann. */
.sg-aktionen {
	margin: 0 0 16px;
}

/* ============================================================
   Feldbezogene Fehlermeldungen im Interessenten-Formular
   ============================================================
   Gefüllt von media/js/frontend.js über die Constraint-Validation-API.
   Der Abstand von 5px hält die Meldung dicht am betroffenen Feld.
   ------------------------------------------------------------ */

.formResponsive input[type="text"]:has(+ .sg-feldfehler:not([hidden])),
.formResponsive input[type="email"]:has(+ .sg-feldfehler:not([hidden])) {
	margin-bottom: 0;
}

.sg-feldfehler {
	color: #c00;
	font-size: 13px;
	line-height: 1.3;
}

.sg-feldfehler[hidden] {
	display: none;
}

/* Das beanstandete Feld selbst hervorheben. */
.sg-feld [aria-invalid="true"] {
	border-color: #c00;
}

.sg-abbrechen {
	margin-left: 12px;
}