/*
 * Anpassungen der Kaffeeliste gegenueber dem HTML5-UP-Template (main.css).
 * Bewusst eine eigene Datei, damit main.css unveraendert bleibt und bei einem
 * Template-Update nicht mit eigenen Aenderungen kollidiert. Wird in header.php
 * NACH main.css geladen.
 */

/* ---------------------------------------------------------------------------
 * Formular-Abstaende
 *
 * Im Template hat das Label 1em Abstand nach unten, das Eingabefeld aber gar
 * keinen. In einem Formular mit mehreren Feldern klebte das naechste Label
 * dadurch direkt am Feld darueber und wirkte, als gehoere es zu diesem statt
 * zum eigenen Feld. Jetzt gilt: Label eng am eigenen Feld, deutlicher Abstand
 * zur naechsten Gruppe.
 * ------------------------------------------------------------------------ */
label {
	margin-bottom: 0.5em;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="file"],
select,
textarea {
	margin-bottom: 1.5em;
}

/* Achtung: hier bewusst KEIN ".row > * > :last-child { margin-bottom: 0 }".
   In einer Grid-Spalte ist das Eingabefeld das letzte Kind - genau dessen
   unterer Abstand erzeugt die Trennung zur naechsten Formularzeile. */

/* In Tabellen und nebeneinanderliegenden Bedienelementen wuerde der
   zusaetzliche Abstand die Zeilen auseinanderziehen. */
td label,
td input,
td select,
td textarea,
.form-inline label,
.form-inline input,
.form-inline select {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Zahlen-, Datums- und Dateifelder
 *
 * main.css stylt diese Typen nicht, sie erschienen deshalb als kleine native
 * Kaestchen zwischen den sonst einheitlich gestalteten Feldern. Hier wird das
 * Aussehen der Textfelder uebernommen.
 * ------------------------------------------------------------------------ */
input[type="number"],
input[type="date"],
input[type="datetime-local"] {
	background: #ffffff;
	border: solid 1px rgba(210, 215, 217, 0.75);
	border-radius: 0.375em;
	color: inherit;
	display: block;
	height: 2.75em;
	outline: 0;
	padding: 0 1em;
	text-decoration: none;
	width: 100%;
}

input[type="number"]:focus,
input[type="date"]:focus {
	border-color: #38761d;
	box-shadow: 0 0 0 1px #38761d;
}

/* In Tabellen (Striche/Einzahlungen erfassen) bleiben die Zahlenfelder
   kompakt, sonst sprengen sie die Spaltenbreite. */
td input[type="number"] {
	width: 100%;
	min-width: 5em;
}

input[type="file"] {
	display: block;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Checkbox-Zeilen
 *
 * Checkbox und zugehoeriges Label stehen nebeneinander; ohne Ausgleich sitzt
 * die Beschriftung nicht auf einer Linie mit den Feldern der Nachbarspalte.
 * ------------------------------------------------------------------------ */
input[type="checkbox"] + label,
input[type="radio"] + label {
	margin-bottom: 1.5em;
}

/* ---------------------------------------------------------------------------
 * Hinweisboxen
 *
 * main.css definiert den Grundstil und die Varianten .info/.warning/.success,
 * aber keine .error-Variante - obwohl sie in der App am haeufigsten verwendet
 * wird. Ohne sie erscheinen Fehlermeldungen ungefaerbt wie neutrale Hinweise.
 * Farbgebung analog zu den vorhandenen Varianten.
 * ------------------------------------------------------------------------ */
.hint-box.error {
	background: #fdecea;
	border-left: 5px solid #d32f2f;
	color: #7f1d1d;
}

/* Der Grundstil ist ein Flex-Container; Absaetze darin sollen unten keinen
   zusaetzlichen Abstand erzeugen. */
.hint-box > :last-child {
	margin-bottom: 0;
}

/* Mehrere Absaetze/Listen in einer Box sollen untereinander stehen statt
   nebeneinander (Flex-Grundstil).
   Bewusst auf div eingegrenzt: .hint-box macht aus einem Element einen
   Flex-Container. Auf einer Tabellenzeile zerstoert das die Spalten - fuer
   hervorgehobene Zeilen gibt es .tarif-aktuell weiter unten. */
div.hint-box {
	flex-direction: column;
}

/* ---------------------------------------------------------------------------
 * Kopfzeile mit Mandanten-Logo (headerline.php)
 *
 * Das Logo soll erkennbar, aber kein Blickfang sein - die Kaffeeliste bleibt
 * eine Arbeitsoberflaeche. Feste Maximalhoehe, damit ein hochkantes oder sehr
 * grosses Logo nicht die halbe Seite einnimmt.
 * ------------------------------------------------------------------------ */
.tenant-brand-line {
	margin-bottom: 1.5em;
	padding-bottom: 1em;
}

.tenant-brand-logo {
	display: block;
	max-height: 60px;
	max-width: 100%;
	width: auto;
}

/* ---------------------------------------------------------------------------
 * Hervorgehobene Tabellenzeile (aktuell gebuchter Tarif)
 *
 * Muss eine normale Tabellenzeile bleiben, damit die Zellen unter ihren
 * Spaltenueberschriften stehen.
 * ------------------------------------------------------------------------ */
tr.tarif-aktuell > td {
	background: #e8fbe8;
	color: #1b5e20;
	font-weight: 600;
}

tr.tarif-aktuell > td:first-child {
	box-shadow: inset 5px 0 0 0 #4caf50;
}

/* ---------------------------------------------------------------------------
 * Wasserzeichen im kostenlosen Tarif (app/plan-watermark.php)
 *
 * Fest unten rechts, damit es unabhaengig von der Seitenlaenge sichtbar
 * bleibt. Zurueckhaltend gehalten: die Kaffeeliste ist eine Arbeitsflaeche,
 * der Hinweis soll erkennbar sein, aber nichts verdecken - deshalb halb
 * transparent, erst beim Darueberfahren voll sichtbar.
 * ------------------------------------------------------------------------ */
.plan-watermark {
	align-items: center;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	bottom: 0.9rem;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	color: #4a4a4a;
	display: inline-flex;
	font-size: 0.7rem;
	gap: 0.4em;
	letter-spacing: 0.02em;
	line-height: 1;
	opacity: 0.65;
	padding: 0.45em 0.8em;
	position: fixed;
	right: 0.9rem;
	text-decoration: none;
	transition: opacity 0.2s ease;
	z-index: 900;
}

a.plan-watermark {
	border-bottom: 0;
}

.plan-watermark:hover,
.plan-watermark:focus {
	color: #4a4a4a;
	opacity: 1;
}

.plan-watermark-logo {
	flex: 0 0 auto;
}

/* Auf schmalen Bildschirmen bleibt nur das Logo - der Schriftzug wuerde dort
   ueber den Inhalt laufen. */
@media screen and (max-width: 480px) {
	.plan-watermark-text {
		display: none;
	}
}