/*
    Custom-CSS fuer Fischfangliste
    April 2022
*/


/* Variablen Definitionen ------------------------------------------------------------------------------------------- */

:root {
    --bg-color-page-1:      #cfd5df; /* #cbcbcb; */
    --bg-color-page-2:      white;
    --bg-color-box-1:       white;
    --bg-color-box-2:       #dde8f8; /* #e9e9ed; */
    --bg-color-input-ff:    white;
    --border-color:         #8f8f8f;
    --shadow-color:         #788599;
    --shadow-color-dark:    #474e58;
    --navbar-bg-color:      #788599;
    --border-color-error-field:     #ff0000;
    --bg-color-error-field:         #ff9797;
    --bg-color-greyed:      #ced8e7;
    --bg-color-disabled:    #e0e0e0;

    --shadow-box-1:         -4px 6px 20px 2px var(--shadow-color);
    --shadow-navbar:        0px -30px 20px 30px var(--shadow-color);

    --font-color:           black;
    --font-color-link-1:    #227af9; /* #0d6efd; */
    --font-color-link-2:    #1751a6; /* #0a58ca; */
    --font-color-box-1:     black;
    --font-color-greyed:    #788599;

    --font-family:          system-ui,-apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;

    --width-of-longest-fischname:   101px;     /* Wie lang der laengste Fischname ist (fuer Tabelle) */
    --width-entnahme:               42px;
    --width-geschlecht:             52px;
    --padding-lr-box-2:             10px;


}

/* Desktop-View */
/* Width-limit (560px) should be the same as in desktop-mobile-view.js!*/
@media (min-width: 560px)
{
    :root {
        --width-entnahme:       125px;
        --width-geschlecht:     100px;
        --padding-lr-box-2:     12px;
    }
}


/* Animationen ------------------------------------------------------------------------------------------------------ */

@keyframes dropDown {
    0% {
        transform: translate(-50%, -100%);
    }
    30% {
        transform: translate(-50%, 10px);
    }
    70% {
        transform: translate(-50%, 10px);
    }
    100% {
        transform: translate(-50%, -100%);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Druck Einstellungen -------------------------------------------------------------------------------------------- */
@media print {
    .navbar {
        display: none !important;
    }
    .b-content {
        padding-top: 0px !important;
    }

    .b-substatistics {
        display: block !important;
        box-shadow: unset !important;
    }

    .b-content-box-2,
    .vs-chart
    {
        break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
        break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
        break-inside: avoid; /* or 'auto' */
        display: block;
    }

    .b-content-box-1.b-ge,
    .b-gt
    {
        break-inside: avoid;
    }

    .gt-header,
    .info-header {
        break-after: avoid;
    }
}


/* Globale Einstellungen -------------------------------------------------------------------------------------------- */


/* Damit Fonts überall übernommen werden */
*,
::after,
::before {
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
}

/* Farbe von Platzhalter von z.B. Inputs (ausgegraut) */
::placeholder {
   color: var(--font-color-greyed);
   opacity: 1;
}


/* min-height wichtig für Hintergrund-Farbverlauf */
html,
body {
    min-height: 100%;
}


body {
    font-family: var(--font-family);
    font-size: 12pt;
    font-weight: 400;
    color: var(--font-color);
}


div.bg {
  background: linear-gradient(30deg, var(--bg-color-page-1), var(--bg-color-page-2));
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: -1;
}


div.b-content {
    padding-top: 90px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.no-display {
    display: none;
}

.opacity-50 {
    opacity: 0.5;
}

/* damit die Pfeile bei Number-Inputs verschwinden */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance:textfield;
    text-align: right;
    padding: 8px;
}

h1,
h2 {
    font-size: 18pt;
    line-height: 18pt;
    font-weight: 500;
    /* color: var(--font-color-link-1); */
    margin-top: 5px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    text-align: center;
}

h2 {
    font-size: 15pt;
    line-height: 15pt;
    margin-top: 0px;
    margin-bottom: 10px;
}

a,
.link-style {
    color: var(--font-color-link-1);
    font-weight: 600;
    text-decoration: none;
}

a:hover,
.link-style:hover {
    cursor: pointer;
    color: var(--font-color-link-2);
}

/* Navigationsleiste */
.navbar {
    position: fixed;
    top: 0;
    width: 100vw;
    /*background-color: var(--navbar-bg-color) !important;*/
    box-shadow: var(--shadow-navbar);
    z-index: 999;
}

.nav-link {
    transition: none !important;
}


/* Box, die z.B. einen Gewässereintrag anzeigt */
.b-content-box-1 {
    var(--font-color-box-1);
    background-color: var(--bg-color-box-1);
    box-shadow: var(--shadow-box-1);
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 10px;
}

/* Box, die z.B. die Notizen innerhalb eines Gewässereintrags anzeigt */
.b-content-box-2,
.b-content-box-2-parent > * {
    color: var(--font-color);
    background-color: var(--bg-color-box-2);
    border-radius: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: var(--padding-lr-box-2);
    padding-right: var(--padding-lr-box-2);
}


/* Messages die eingeblendet werden */
.container.message {
    width: max-content;
    max-width: 90%;
    position: fixed;
    left: 50%;
    top: 0;
    transform: translate(-50%, -100%);
    animation: dropDown 12s;
    z-index: 1100;
}

/* Form-Errors */
.errorlist {
    display: none;
}

.container.message .errorlist {
    display: block !important;
}

.errorlist + input,
.errorlist + select {
    /* border-style: solid !important;
    border-width: 3px !important;
    border-color: var(--border-color-error-field) !important;
    background-color: var(--bg-color-error-field) !important;*/
    outline: 2px solid red;
}

.btn-primary {
    background-color: var(--font-color-link-1);
    border-color: var(--font-color-link-1);

}

.btn-primary:hover {
    background-color: var(--font-color-link-2);
    border-color: var(--font-color-link-2);
}

.btn-secondary {
    background-color: var(--shadow-color);
    border-color: var(--shadow-color);
}

.btn-secondary:hover {
    background-color: var(--shadow-color-dark);
    border-color: var(--shadow-color-dark);
}

.bolder {
    font-weight: 600;
}

.centered-text {
    text-align: center;
}

.b-page-navigation {
}

.b-page-header {
    margin-top: 25px;
}

input.disabled-field {
    background-color: var(--bg-color-disabled) !important;
    pointer-events: none; 
}

/* page-content ----------------------------------------------------------------------------------------------------- */
.b-page-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
}

    .b-page-content select,
    .b-page-content input[type="number"],
    .b-page-content input[type="text"],
    .b-page-content input[type="email"],
    .b-page-content input[type="password"] {
        color: var(--font-color);
        background-color: var(--bg-color-box-1);
        border-style: hidden;
        border-radius: 4px;
        height: 29px;
    }

     .b-page-content input[type="text"],
     .b-page-content input[type="email"],
     .b-page-content input[type="password"] {
        padding-left: 10px;
    }

    .b-page-content select {
        padding: 4px;
    }

    .b-page-content select:disabled {
        color: var(--font-color-greyed);
        background-color: var(--bg-color-greyed);
    }

    /* Ersten Eintrag im Select ausgrauen */
    .b-page-content select:not(.geschlecht) option[value=""] {
        color: var(--font-color-greyed);
    }

    .b-page-content select > optgroup,
    .b-page-content select option:not(option[value=""]) {
        color: var(--font-color);
    }

    .b-page-content select:focus {
        outline: auto;
    }


/* admin-dashboard -------------------------------------------------------------------------------------------------- */
.b-admin-dashboard {
    align-items: center;
    display: flex;
    flex-direction: column;
}

    .b-admin-dashboard .search-form {
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .b-admin-dashboard .card {
        background-color: var(--bg-color-input-ff);
        border-color: var(--bg-color-input-ff);
        padding-left: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-right: 10px;
        margin-bottom: 10px;
    }
    .b-admin-dashboard .create-new-member {
        align-items: center;
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        margin-bottom: 30px;
    }

    .b-admin-dashboard.b-member-email {
        display: flex;
        flex-direction: row;
        margin-bottom: 40px;
    }

    .b-admin-dashboard .sub-header {
        margin-top: 20px;
    }

/* dashboard create form -------------------------------------------------------------------------------------------- */

.b-create-form .b-gt-create {
    display: inline-flex;
    justify-content: center;
    width: 100%;
}
    .b-gt-create input[type="date"] {
        background-color: var(--bg-color-box-1);
        border-style: solid;
        border-color: var(--font-color-link-1);
        padding-left: 20px;
        border-radius: 4px;
        height: 29px;
    }


/* dashboard und gewaessertag_edit------------------------------------------------------------------------------ */

.b-dashboard {
    max-width: 35em;
    width: 95%;
}


/* Elemente ----------------------------------------------------------------------- */

    .b-dashboard textarea {
        border-style: hidden;
        font-size: 11pt;
    }

    .b-dashboard select,
    input[type="number"] {
        background-color: var(--bg-color-box-2);
    }

    /* Klassen ----------------------------------------------------------------------- */
    .b-gt {
        margin-top: 50px;
    }

    .b-gt.form {
        margin-top: 10px;
    }

        .b-gt .gt-header {
            margin-bottom: 15px;
        }

        .b-content-box-1.b-ge {
            display: flex;
            flex-direction: column;
        }

        .b-content-box-1.b-ge.form {
            display: block;
            margin-top: 10px;
            margin-bottom: 60px;

            animation: fadeIn 1s;
        }

                .b-ge-loeschen-button {
                    display: inline-flex;
                    justify-content: end;
                    width: 100%;
                    margin-bottom: 8px;
                }

                .b-ge-loeschen-button .ge-loeschen-button {
                    display: inline-flex;
                    align-items: center;
                }

            .b-ge .ge-label {
                color: var(--font-color-box-1);
                margin-bottom: 4px;
                height: 24px;
                display: inline-block;
            }

            .b-gewaesser {
                margin-top: 2px;
                margin-bottom: 8px;
                display: flex;
            }

            .b-notizen {
                margin-top: 8px;
            }

            .b-ge .b-notizen textarea {
                height: 160px;
                width: 100%;
                font-size: 16px;
            }

            @media (min-width: 560px) {
                .b-ge .b-notizen textarea {
                    font-size: 11pt;
                }
            }

            .b-ge .ge-title {
                color: var(--font-color-box-1);
                display: flex;
                flex-direction: row;
                font-size: 13pt;
                padding-left: 4px;
                margin-bottom: 5px;
            }

            .b-ge .ge-subtitle {
                color: var(--font-color-box-1);
                padding-left: 4px;
                margin-top: 5px;
                margin-bottom: 0px;
                font-style: italic;
            }

            .b-ge .b-content-box-2.notizen {
                margin-top: 5px;
            }

            .b-content-box-2.b-ff.b-img.form {
                margin-top: 0px;
            }

            .b-bilder-view {
                padding-bottom: 0px;
                margin-top: 10px;
            }

            .b-bilder {
                margin-top: 8px;
            }

                .b-bilder .b-img-del-toggle-button {
                    background-color: white;
                    border: 4px solid white;
                    border-radius: 4px;
                }



            .b-content-box-2.b-ff.form {
                margin-top: 10px;
            }

                .b-ff-labels,
                .b-ff-entry-row,
                .b-img-entry-row {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                }

                .b-ff-entry-row,
                .b-img-entry-row {
                    padding-top: 5px;
                    padding-bottom: 5px;
                    width: 100%;
                    animation: fadeIn 1s;
                }

                    .b-img-input {
                        overflow: hidden;
                    }

                    .b-img-entry-row > svg {
                        flex-shrink: 0;
                        align-self: center;
                    }

                    .b-ff-entry-row > div > select,
                    .b-ff-entry-row > div > input[type="number"]{
                        background-color: var(--bg-color-input-ff);
                    }

                    .b-ff-labels .c1,
                    .b-ff-entry-row .c1 > select {
                        width: 80px;
                    }

                    .b-ff-labels .c2,
                    .b-ff-entry-row .c2 > input {
                        width: 46px;
                    }

                    .b-ff-labels .c3,
                    .b-ff-entry-row .c3 > input {
                        width: 64px;
                    }

                    .b-ff-labels .c4,
                    .b-ff-entry-row .c4 {
                        width: var(--width-entnahme);
                    }
                    .b-ff-labels .c5,
                    .b-ff-entry-row .c5 {
                        width: var(--width-geschlecht);
                    }

                    /* Mobile-View */
                    .b-ff-labels .c4.entnahme-label > span {
                        display: none;
                    }

                    .b-ff-entry-row .c4 > select.entnommen {
                        width: var(--width-entnahme);
                    }
                    .b-ff-entry-row .c5 > select.geschlecht {
                        width: var(--width-geschlecht);
                    }

                    .b-ff-labels .c2,
                    .b-ff-entry-row .c2,
                    .b-ff-labels .c3,
                    .b-ff-entry-row .c3,
                    .b-ff-labels .c4,
                    .b-ff-entry-row .c4,
                    .b-ff-labels .c5,
                    .b-ff-entry-row .c5 {
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                    }


                    /* Desktop-View */
                    @media (min-width: 560px) {

                        .b-ff-labels .c1,
                        .b-ff-entry-row .c1 > select {
                            width: 125px;
                        }

                        .b-ff-labels .c4.entnahme-label > span {
                            display: block;
                        }

                        .b-ff-labels .c4.entnahme-label > i {
                            display: none;
                        }

                        .b-ff-entry-row .c4 > select.entnommen {
                            width: var(--width-entnahme);
                        }
                        .b-ff-entry-row .c5 > select.geschlecht {
                            width: var(--width-geschlecht);
                        }

                        .b-ff-labels .c4,
                        .b-ff-entry-row .c4 {
                            display: unset;
                            flex-direction: unset;
                            justify-content: unset;
                        }
                    }

                .b-ff .ff-table {
                    width: 100%;
                    max-width: 26em;
                    white-space: nowrap;
                }

                    .b-ff .ff-table th {
                        padding-bottom: 2px;
                    }

                    .b-ff .ff-table td {
                        padding-bottom: 0px;
                    }

                    .b-ff .ff-table .c1 {
                        text-align: left;
                        width: var(--width-of-longest-fischname);
                    }

                    .b-ff .ff-table .c2 {
                        text-align: right;
                        width: 52px;
                    }

                    .b-ff .ff-table .c3 {
                        text-align: right;
                        width: 60px;
                    }

                    .b-ff .ff-table .c4 {
                        text-align: right;
                        width: 53px;
                    }

    .b-dashboard .no-gt-text {
        margin-top: 20px;
    }

    .b-dashboard .sort-gewaesser a svg.bi {
        position: relative;
        bottom: 2px;
    }

    .b-dashboard .sort-datum a svg.bi {
        position: absolute;
        left: calc(100% + 7px);
        top: 4px;
        }

    .b-select-year {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .b-submit-or-cancel {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
        margin-bottom: 30px;
    }


/* Elemente ein/-ausblenden mit CSS -------------------------------------------------------- */


/* Begehung blendet Fischfaenge aus: */
.b-ge.form > label.view-ctrl-1 + input:checked ~ div.b-ff.form {
    display: none;
}


/* "+" blendet Fischfang-Form ein: */
.b-ff.form > input.view-ctrl {
    display: none;
}

.b-ff.form > input.view-ctrl:checked + label.view-ctrl {
    display: none;
}

.b-ff.form > input.view-ctrl:checked ~ input.view-ctrl:not(:checked) + label.view-ctrl ~ * {
    display: none;
}


/* "+" blendet Gewaessereintrag-Form ein: */
.b-gt.form > input.view-ctrl-2 {
    display: none;
}

.b-gt.form > input.view-ctrl-2:checked + label.view-ctrl-2 {
    display: none;
}

.b-gt.form > input.view-ctrl-2:checked ~ input.view-ctrl-2:not(:checked) + label.view-ctrl-2 ~ * {
    display: none;
}

label.view-ctrl,
label.view-ctrl-2 {
    font-weight: 600;
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

label.view-ctrl:focus-visible,
label.view-ctrl-2:focus-visible {
    outline: auto;
}

label.view-ctrl {
    background-color: var(--bg-color-input-ff);
    padding: 4px;
    width: var(--max-width-ff);
    border-radius: 4px;
}

label.view-ctrl:active,
label.view-ctrl-2:active {
    background-color: var(--bg-color-box-2);
}


/* Cover Image auf der login page */
#cover-image {
    background: url('images/logo.jpg') no-repeat center left fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
    -o-background-size: contain;
}


/* Info-Icon */
i.icon-question {
    position: relative;
    bottom: 1px;
}


/* Statistiken --------------------------------------------------------------------------------------- */
.c3 svg {
    font: 12pt var(--font-family);
}

.c3-tooltip * {
    font-size: 11pt !important;
}

#chart .c3-chart-line {
    display: none;
}

.b-select-chart-type {
    margin-bottom: 15px;
    margin-top: 25px;
}

.info-table th,
.info-label {
    font-weight: normal;
    font-style: italic;
}

.info-label {
    width: 85px;
    display: inline-flex;
}

.b-substatistics {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    max-width: 54em;
    width: 95%;
}

    .b-substatistics .info-box {
        width: fit-content;
    }

    .b-substatistics .select-box {
        display: flex;
        flex-direction: column;
        row-gap: 6px;
    }

    .b-substatistics .info-header {
        font-style: italic;
        padding-top: 10px;
        padding-bottom: 5px;
    }

    .info-table .td-top-space {
        padding-top: 10px;
    }

/* Form styling -------------------------------------------------------- */

.form-container {
    width: 250px; /* Set a fixed width */
}

.submit-button-create-edit-user,
#allow-login-group label {
    width: 100%; /* Ensure elements don't exceed container width */
    white-space: normal; /* Allow text to wrap */
}

/* Tabelle --------------------------------------------------------------------------------------------------------- */
.odd-row {
    background-color: #cfd5df;
}
.even-row {
    background-color: #e6eaef
}

/* Geschätze Werte */

.estimated-value {
    border: 1px solid rgba(57, 129, 2, 0.642) !important;
    background-color: rgba(57, 129, 0, 0.1) !important;
}

/* Dokumenten-Seite --------------------------------------------------------------------------------- */
.info-page h2 {
    text-align: left !important;
  }