/**
Das Layout soll die gleiche dunkelblaue Theme-Color nutzen, wie die Seite des Umweltministeriums:
https://www.umwelt.nrw.de/
In dieser Datei hier befinden sich die dafür nötigen Anpassungen für BeWa an das Standard-Bootstrap-5.1.3-CSS.
 */

/* Theme-Color des Umweltministeriums */
:root {
    --theme-color-blue: #003064;
    --theme-color-blue-darker: #001729;
    --theme-color-blue-light: #185cb9;
    --theme-color-blue-lighter: #009EE0;
}

/* Theme-Color des Umweltministeriums als Hintergrundfarbe */
.theme-color-background {
    color: white;
    background-color: var(--theme-color-blue);
}

/* Theme-Color des Umweltministeriums als Textfarbe */
.theme-color {
    color: var(--theme-color-blue);
}

/* Hintergrund-Colors als eine Farbleiste im Header, die den Header visuell vom Body trennt und das Layout der
Umweltministerium-Homepage spiegelt.  */
.farbleiste {
    height: 8px;
    /* Von links nach rechts: blau (bis zu 91,5% der Breite, grün 91,5-94,3% der Breite, orange, dunkelorange */
    /* Inspection-Ergebnis nicht korrekt: Die Funktion wird richtig angewendet und erzielt das gewünschte Ergebnis: */
    /*noinspection CssInvalidFunction*/
    background: linear-gradient(to right, var(--theme-color-blue-lighter) 91.500%, #B1C800 91.500% 94.333%, #F29400 94.333% 97.166%, #E75112 97.166%);
}

body {
    background-color: #f1f1f1;
    color: rgba(13, 13, 13, .68);
    /* CUSTOM: Default line-height verringert von 1.8 auf 1.4: */
    line-height: 1.4;
}

/* Weißer Block (üblicherweise ein div), in dem Inhalte präsentiert werden (z.B. eine Erfassungsmaske oder die Version eines Servicebausteins.
Der Block wird auf einem hellgrauen Hintergrund dargestellt und wirft einen Schatten. */
.content {
    clear: both;
    min-height: 1em !important;
    display: block;
    padding: 1em;
    background: #fff;
    box-shadow: 0 0 0 0, 0 6px 12px rgba(34, 34, 34, .1);
}

/* CUSTOM: Sorgt dafür, dass DataTables-Tabellen sich dynamisch an die Bildschirmbreite anpassen - auch wenn man z.B. ein Tablet vom
Querformat ins Hochformat dreht. */
table.dataTable {
    width: 100% !important;
}

/* CUTSOM: Bilder, die als Link fungieren, bei Fokus oder Hover mit einem Rahmen hervorheben, im gleichen Stil wie Eingabefelder. */
a:hover > img,
a:focus > img {
    box-shadow: 0 0 0 2px var(--theme-color-blue);
    /* Ecken des Fokus-Rahmens gleich abgerundet wie andere Bootstrap-gestylte Elemente: */
    border-radius: 0.375rem;
}

/* CUSTOM: Grundeinstellungen für den oben genannten Fokus-Rahmen */
a > img {
    /* Abstand zur Kante des einblendbaren Fokus-Rahmens: */
    padding: 2px;
}

img {
    border: 0;
    max-width: 100%;
    outline: none;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

/* CUSTOM: Ausklappbare Bereiche bei Tastatur-Fokus mit dickem, kontrastreichem Rahmen in Theme-Color hervorheben. Für Barrierefreiheit. */
.accordion-button:focus { /* accordion-button = style-Klasse von Bootstrap für ausklappbare "Accordion"-Bereiche. */
    box-shadow: 0 0 0 2px var(--theme-color-blue);
}

/* CUSTOM: Eingabe- / Auswahlfelder bei Tastatur-Fokus mit dickem, kontrastreichem Rahmen in Theme-Color hervorheben. Für Barrierefreiheit. */
/* Hinweis: Bei Bedarf diesen Style auch für weitere Interaktions-Elemente einführen. */
.form-control:focus, /*form-control = style-Klasse von Bootstrap für einzeilige & mehrzeilige Textfelder etc. (<textarea>, <input> etc.)*/
.form-select:focus { /*form-select = style-Klasse von Bootstrap für Auswahlfelder (<select>)*/
    box-shadow: 0 0 0 1px var(--theme-color-blue);
    border-color: var(--theme-color-blue);
}

/* CUSTOM: Platzhalter in Eingabefeldern werden kursiv etwas gesperrt (Abstände zwischen den Zeichen) dargestellt. */
::placeholder {
    font-style: italic;
    letter-spacing: .2rem;
}

/* CUSTOM: Formatierung einer Form-Zeile für ein Feld im Lesemodus. Im Gegensatz zu .col-form-label soll ein Label mit
	.col-form-display-label ohne Padding oben und unten ausgegeben werden, damit kein übermäßiger Abstand zwischen Zeilen
	im Lesemodus entsteht. */
.row .col-form-display-label {
    margin-bottom: 0;
    font-size: inherit;
}

/* CUSTOM: Für Buttons, die nur ein Icon als Erkennungsmerkmal haben. Icon soll etwas größer als der Default angezeigt werden. */
button > .icon-button {
    font-size: medium;
}

/* CUSTOM: Auffällige Hervorhebung von Buttons, auf denen der Fokus liegt (durch Tastatur-Bedienung). Für Barrierefreiheit. */
.btn:focus, .btn.focus {
    outline: groove !important; /* Dieser groove-Kasten ist nicht hübsch. */
    outline-offset: -6px !important;
    box-shadow: none; /* Alternative wäre vielleicht: box-shadow nutzen, aber dafür eine passende Farbe mit ausreichendem Kontrast finden. */
}

/* Buttons in der dunkelblauen Theme-Color */
.btn-primary {
    color: #ffffff;
    background-color: var(--theme-color-blue);
    border-color: transparent;
}

.btn-primary:focus,
.btn-primary.focus {
    color: #ffffff;
    background-color: var(--theme-color-blue);
    border-color: rgba(0, 0, 0, 0);
}

.btn-primary:hover {
    color: #ffffff;
    background-color: var(--theme-color-blue-darker);
    border-color: rgba(0, 0, 0, 0);
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: #ffffff;
    background-color: var(--theme-color-blue-darker);
    border-color: rgba(0, 0, 0, 0);
}

/* Während man einen Button gedrückt hält, wird der Button hellblau. */
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    color: #ffffff;
    background-color: var(--theme-color-blue-light);
    border-color: rgba(0, 0, 0, 0);
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-image: none;
}

.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
    background-color: var(--theme-color-blue);
    border-color: transparent;
}

.btn-primary .badge {
    color: var(--theme-color-blue);
    background-color: #ffffff;
}

/*--CUSTOM: left und right um Componente nach links zu floaten----------------*/
.left {
    float: left;
}

/*--CUSTOM: right um Componente nach rechts zu floaten----------------*/
.right {
    float: right;
}

/*--CUSTOM: Seite Login für Felder (Name und Passwort)----------------*/
.input-login {
    width: 300px;
}

/* CUSTOM: switcher in Modul Kopplung Indirekteinleiter für schedule Ein oder Ausschlaten.*/
.custom-switch.custom-switch-lg .custom-control-label {
    padding-left: 3rem;
    padding-bottom: 2rem;
}

.custom-switch.custom-switch-lg .custom-control-label::before {
    height: 2rem;
    width: calc(3rem + 0.75rem);
    border-radius: 4rem;
}

.custom-switch.custom-switch-lg .custom-control-label::after {
    width: calc(2rem - 4px);
    height: calc(2rem - 4px);
    border-radius: calc(3rem - (2rem / 2));
}

.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(calc(2rem - 0.25rem));
}

/*--FOOTER-------------*/
.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/*-- Manuell eingegebene Zeilenumbrüche ("Newline") führen in Ausgabefeldern ("read-only") zu Zeilenwechseln. --*/
.whiteSpacePreWrap {
    white-space: pre-wrap;
}

/*-- Dropdown-menu schmaler machen (lange Items auf 2-3 Zeilen darstellen), damit sie über den Bildschirm nicht hinaus geht. --*/
.dropdown-menu .dropdown-item {
    white-space: normal;
}

/*
 * Von JavaScript abhängige Bestandteile der Seite ohne JavaScript beim Seitenaufbau per Default unsichtbar machen.
 *
 * Siehe auch: default-layout*.html, dort werden die unsichtbaren Teile _mit Javascript_ auf sichtbar umgeschaltet.
 */
.needsJavaScript {
    display: none;
}

/* Überschriften fett */
legend, h1, h2, h3 {
    font-weight: bold;
}

/* Beginn: Effekt für Kacheln auf der Startseite */
.kachel:hover {
    transform: scale(1.05);
    transition: 0.5s ease-in-out;
}

.kachel:active {
    transform: scale(0.9);
    transition: 0.1s;
}


/* Ende: Effekt für Kacheln auf der Startseite */

/* Beginn: Zusammengehörige Anzeige-/Eingabefelder in einem Kasten darstellen. */
fieldset:not(.kein-kasten) {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 10px; /* Runde Ecken */
}

/*   Wichtige zusammengehörige Anzeige-/Eingabefelder hervorheben, indem der umgebende Kasten rot gefärbt wird.*/
/*   Konkret: In BeWa Medok - Erfassung - für den Abschnitt "Sicherheits- und Zugangsregelungen". */
fieldset.important-fieldset-red {
    border-color: #C9372C;
    background-color: #FFD5D2;
}

legend:not(.kein-kasten) {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 10px;
    /* border-top: 2px solid #007BFF; */
    padding-top: 5px;
    border-radius: 5px; /* Runde Ecken für Legend */
}

/* Ende: Zusammengehörige Anzeige-/Eingabefelder in einem Kasten darstellen. */