/* jodash.css - (C) JoEmbedded.de */
:root {
    /* CSS Variablen, extern aenderbar! Farben mit Helligkeitswert*/
    --white100: #ffffff;
    --txtwhite97: #f8f8f8;
    --whitegray94: #f0f0f0;
    --lightgray88: #e0e0e0;
    --infogray82: #d0d0d0;
    --hovergray75: #c0c0c0;
    --silvergray69: #b0b0b0;
    --menugray63: #a0a0a0;
    --midgray50: #808080;
    --lowmidgray38: #606060;
    --darkgray25: #404040;
    --nightgray13: #202020;
    --txtblack3: #080808;
    --black0: #000000;

    /* Spezialmarkierungen */
    --red: red;
    --gold: #ffd000;
    --orange: #d36804;
    --brown: #775b0f;
    --green: #008500;
    --lime: lime;
    --blue: #1100ff;
    --bleblue: #1E90FF;
    --blebluelight: #ecf4fc;

    /* *** App Scaling ***  Einrueckung/Dyn. Elemente. Koennen gesetzt und gelesen werden. */
    /* Default Font: 16px == 1em, 0.5..2.0 OK */
    --fontrel: 1;
    --scrollms: 200ms;
    /* Maximalbreite Sidebar, so dass alles i.d.R. reinpasst */
    --lnavwidth_max: calc(32px + var(--fontrel)*200px);

    /* Heights Header/Footer, unterschiedlich falls noch Menues rein muessen */
    --hdrheight: calc(16px + var(--fontrel)*32px);
    --ftrheight: calc(16px + var(--fontrel)*16px);

}

html,
body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    background-color: var(--white100);
    color: var(--txtblack3);

    font-family: sans-serif;
    font-size: calc(var(--fontrel) * 16px);
    font-family: Arial, Helvetica, sans-serif;

}

/* Variable Breakpoints: Nur auf Mobiles: <br class='mobile-br'> */
.mobile-br {
    @media (min-width:551px) {
        display: none;
    }
}

/* ---Only for checkbox set size --- */
select,
option,
input {
    font-size: inherit;
}

input[type=checkbox] {
    margin: 0;
    width: 1em;
    height: 1em; 
    vertical-align: -0.125em; 
}

/* Fuer PWA: Hide Install button 'joInstallApp' until beforeinstallprompt fires */
#joInstallApp { 
    display: none;
  }

/* === Ein paar Animationen fuer die icons. Verwendung durch setzen der Klasse === */

.jo-icon-ani-blink::before {
    position: relative;
    animation: joanblink 1s steps(2) infinite;
}
@keyframes joanblink {
    0% {
        opacity: 20%;
    } 
  }

/* Icon in Uhrzeiger rotieren */
.jo-icon-ani-rotate::before {
    position: relative;
    animation: joanir360 3s linear infinite;
}

/* joani: jo-icon-animation-xxx , immer nur eine moeglich*/
@keyframes joanir360 {
    to {
        rotate: 1turn;
    }
}

/* Icon pulsiert */
.jo-icon-ani-beat::before {
    position: relative;
    animation: joanibeat 1.2s linear infinite;
}

@keyframes joanibeat {

    0%,
    90% {
        scale: 1;
    }

    45% {
        scale: 1.3;
    }
}

.jo-icon-ani-shake::before {
    position: relative;
    animation: joanishake 1.5s linear infinite;
}

@keyframes joanishake {

    0%,
    10%,
    20%,
    30% {
        rotate: -25deg;
    }

    5%,
    15%,
    25%,
    35% {
        rotate: 25deg;
    }

    40% {
        rotate: 0deg;
    }
}

/* ====== Helpers fuer Farben, allgemein verwendbar fuers colordesign ====== */
.white {
    color: var(--white100);
}

.black {
    color: var(--black0);
}

.red {
    color: var(--red);
}

.gold {
    color: var(--gold);
}

.orange {
    color: var(--orange);
}

.brown {
    color: var(--brown);
}

.green {
    color: var(--green);
}

.blue {
    color: var(--blue);
}

/* Alles mit BLE: */
.bleblue {
    color: var(--bleblue);
}

.blebluelight {
    color: var(----blebluelight);
}

/* Fuer kleine Effekte, ein roter Neon-Effekt */
.neonEffectRed {
    color: var(--red);
    text-shadow:
        0 0 10px #fff,
        0 0 30px #f77,
        0 0 100px #f33;
  }

  .back-white {
    background-color: var(--white100);
}

.back-black {
    background-color: var(--black0);
}
  

/* === Bei Icons Hintergrundfarb im ::before festgelegt, kann nur via class gesetzt werden (z.B. fuer Animationen) ===*/
.jo-icon-back-white {
    &::before {
        background-color: var(--white100);
    }
}

.jo-icon-back-red {
    &::before {
        background-color: var(--red)
    }
}

.jo-icon-back-orange {
    &::before {
        background-color: var(--orange)
    }
}

.jo-icon-back-gray {
    &::before {
        background-color: var(--midgray50)
    }
}

/*--- Spacer (thin black line) (separate Menue items )---*/
.jo-thin-hr {
    border-bottom: 1px solid var(--midgray50);
    margin: 0 0.5em;
}

/* Plaziert einen EIntrag in einer Flexbox (Mneues) rechts, z.B. fuer Menues */
.jo-menu-right {
    margin-left: auto;
}

.jo-font-small {
    font-size: 0.7em;
}

/* Element verstecken als Klasse einfacher */
.jo-hidden {
    display: none;
}

/* Die UI-Container mit ihren speziellen Elementen als nested CSS*/
.jo-vcontainer {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;

    /* header footer START */
    .jo-menu-header {
        display: flex;
        /* flex-direction: row; // default */
        background-color: var(--nightgray13);
        color: var(--txtwhite97);
        padding: .2em;
        height: var(--hdrheight);
        /* align-items: center: Alle auf einer Linie */
        align-items: center;

        /* Main Hamburger in 2s mit Indidkator */
        .jo-main-hamb {
            position: relative;
            background-color: var(--txtwhite97);
            color: var(--txtblack3);
            border-radius: 0.2em;

            &>i {
                font-size: 2em;
            }

            .jo-main-hambind {
                position: absolute;
                bottom: -0.1em;
                right: -0.1em;
                color: var(--bleblue);
                rotate: 90deg;
            }

            &:hover {
                background-color: var(--hovergray75);
            }
        }
    }

    .jo-menu-footer {
        display: flex;
        /* flex-direction: row; // default */
        background-color: var(--nightgray13);
        color: var(--txtwhite97);
        gap: 0.5em;
        padding: .2em;
        height: var(--ftrheight);
        /* align-items: center: Alle auf einer Linie */
        align-items: center;
    }
    /* header footer  ENDE */

    .jo-chcontent {
        /* border: 4px solid goldenrod; */

        .jo-sidebarcontent {
            display: flex;
            /* flex-direction: row; // default */
            /* border: 4px solid blue; */

            /* ====== Komponenten ====== */
            .jo-sidebar {
                height: calc(100svh - var(--hdrheight) - var(--ftrheight));
                flex: 0 0 var(--lnavwidth_max);
                transition: flex-basis var(--scrollms);
                background-color: var(--whitegray94);

                color: var(--txtblack3);
                padding-right: 0.1em;
                overflow: auto;

                /* Small: Only Icons */
                &.jo-sidebar-small {
                    flex: 0 0 2.7em;

                    /* Platz fuer dickeren Scrollbar auf Desktop */
                    @media (min-width:551px) {
                        flex: 0 0 3.7em;
                    }

                    /* Text invisible */
                    span:nth-child(2) {
                        color: rgba(0, 0, 0, 0);
                    }
                }

                /* Completely hidden */
                &.jo-sidebar-hidden {
                    display: none;
                }

                .jo-sinavinfo {
                    padding: .1em 0.33em;
                    background-color: var(--silvergray69);
                    font-size: 0.7em;
                    font-weight: bold;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    height: 1.2em;
                }

                /* sibu: ***Side-Button*** */
                .jo-sibu {
                    display: flex;
                    position: relative;
                    align-items: center;
                    flex-wrap: nowrap;

                    background-color: var(--lightgray88);
                    text-decoration: none;

                    padding: 0.6em 0.33em;
                    cursor: pointer;
                    white-space: nowrap;
                    overflow: hidden;

                    /* Icons im Button groesser, nur direkte Kids, Icons in Buttons daher z.B. in span */
                    &>i::before {
                        font-size: 1.5em;
                        vertical-align: -0.25em;
                        margin-right: 0.5em;
                    }

                    /* optinale Sub-Componente: Badge innerhalb eines jo-sibu */
                    .jo-badge-span {
                        position: absolute;
                        background-color: var(--orange);
                        color: var(--white100);
                        top: 0.8em;
                        right: 0.1em;
                        border-radius: 1em;
                        padding: 0.1em 0.3em;
                        font-size: 0.9em;
                        text-align: center;
                        vertical-align: middle;
                        min-width: 1em;
                        min-height: 1em;

                        &.jo-badge-unimportant {
                            background-color: var(--lowmidgray38);

                            .jo-sidebar-small & {
                                display: none;
                            }
                        }

                        /* Normal: auch klein mit Inhalt, 1-2 Zeichen max. */
                        .jo-sidebar-small & {
                            /* inverse Hierarchie */
                            top: 0.3em;
                            left: 1.5em;
                            padding: 0;
                            font-size: 0.8em;
                            max-width: 1.4em;
                            overflow: hidden;

                            /* -smallcircle Klein NUR Indikator, invisible text */
                            .jo-badge-smallcircle & {
                                color: rgba(0, 0, 0, 0);
                                width: 1em;
                                height: 1em;
                                overflow: hidden;
                            }
                        }
                    }

                    /* Button verstecken als Klasse einfacher */
                    &.jo-disabled {
                        opacity: 0.5;
                        cursor: not-allowed;
                    }

                    &:hover {
                        transition: all ease var(--scrollms);
                        background-color: var(--hovergray75);
                    }
                }

                /* Sidebar Elements Ende */
            }

            .jo-content {
                /* border: 4px solid green; */
                height: calc(100svh - var(--hdrheight) - var(--ftrheight));
                flex: 1;
                white-space: nowrap;
                overflow: auto;
                scroll-behavior: smooth;

                .jo-user-section {
                    /* height: calc(100svh - var(--hdrheight) - var(--ftrheight) - 1em); */
                    /* overflow: hidden; */
                    background-color: var(--white);
                    color: var(--txtblack);
                    font-size: calc(1rem * var(--fontrel));
                    padding: 0.5em;
                    display: flex;
                    flex-direction: column;
                }

            }
        }
    }
}

/* Dialoge alle moeglichst aehnlich */
button {
    font-size: 1em;
    padding: 0.1em 0.3em;
    background-color: var(--lightgray88);
    color: var(--txtblack3);
    border-radius: 0.3em;
    border: 1px solid var(--txtblack3);

    &:hover {
        background-color: var(--hovergray75)
    }

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

}

dialog {
    position: relative;
    border-radius: 0.5em;
    border: 1px solid var(--txtblack3);
    color: var(--txtblack3);
    background-color: var(--txtwhite97);
    min-width: 35%;
    max-width: 90%;
    padding: 0.8em;
    /* Anscheinend fuer Leaflet Z-index >=401.. */
    z-index: 1000;
    white-space: nowrap;

    .jo-dialog-progress {
        width: calc(100% - 2.5em);
        margin-bottom: 0.5em;
    }

    /* Scroller-Content, passend fuer Header und 1 Ueberschriftszeile */
    .jo-dialog-big {
        border: 1px solid var(--silvergray69);
        overflow: auto;
        max-height: calc(85vh - 5em);
        padding: 0.8em;
    }
    .jo-dialog-buttonclose {
        margin: 0;
        position: absolute;
        border: none;
        top: 0;
        right: 0;
        padding: 0.3em;

        &:hover {
            background-color: var(--hovergray75)
        }
    }

    .jo-dialog-header {
        font-size: 1.2em;
        font-weight: bold;
        padding-bottom: 0.5em;
    }

    .jo-dialog-footer {
        padding-top: 0.5em;
        text-align: center;
    }

    /* Spinner bekommt Sonderbehandlung */
    &#spinner-dialog {
        color: var(--bleblue);
        overflow: hidden;
        text-align: center;
        min-width: 60%;

        & i {
            font-size: 5em;
        }

        & progress {
            width: 90%;
        }
    }
}