/* light theme */
:root {
    /* palleton main colors */
    /*--primary-color-1: #007348;*/ /* cardif color: border color & logo */
    --primary-color-1: black; /* cardif color: border color & logo */
    /*--primary-color-2: #00935B;*/ /* sidemenu menu active border */
    --primary-color-2: black; /* sidemenu menu active border */
    --primary-color-3: #006C43; 
    --primary-color-4: #00643E; 
    --primary-color-5: #005A38; /* h1-6 font color */
                                  /* tooltip text color */                                   
    --primary-color-6: #B3EDD7; /* background sidemenu hovered buttons */
}
:root {
    --sideMenuBorder: var(--primary-color-1)/*#007348*/ ;
    --sideMenuBackground: white;
    --menuActiveBorder: var(--primary-color-2)/*gray*/;
    --menuNonactiveBorder: whitesmoke; /*var(--primary-color-6)*/;
    /* --ribbonBtnHoverBackgroundColor: var(--primary-color-6); */
    --ribbonBtnHoverBackgroundColor: whitesmoke;
    --tooltipBtnHoverBackgroundColor: whitesmoke;
    --tooltipBtnHoveTextColor: var(--primary-color-5);
    --sidemenuTextColor:var(--primary-color-5);
}

/* dark theme */
@media (prefers-color-scheme: dark) {
    :root {    
    --sideMenuBorder: var(--primary-color-2); /*#007348;*/
    --sideMenuBackground: black;
    --menuActiveBorder: darkgray;
    --menuNonactiveBorder: rgb(44, 44, 44);
    --ribbonBtnHoverBackgroundColor: rgb(44, 44, 44);
    --tooltipBtnHoverBackgroundColor: whitesmoke;
    --tooltipBtnHoveTextColor: gray;
    }
    
    .icon.search {content: url("../icons/icons8-search-50-white.png");}
    .icon.monitor {content: url("../icons/icons8-monitoring-50-white.png");}
    .icon.table {content: url("../icons/icons8-table-50-white.png");}
    .icon.money {content: url("../icons/icons8-money-50-white.png");}
    .icon.config {content: url("../icons/icons8-wrench-50-white.png");}
    .icon.tasklist {content: url("../icons/icons8-task-list-50-white.png");}      
    .icon.user {content: url("../icons/icons8-user-50-white.png");}  
    .icon.profiling {content: url("../icons/icons8-combo-chart-50-white.png");} 
    
    /* .sidemenu span {color:var(--htag-text-color);} */
    
}

@media screen and (min-width: 1501px) {
    :root {
        --sideboxmiddleexpanded: 230px;
    }
    .sideboxleft {flex: 0 0 80px; display: flex; flex-direction: column; align-items: stretch;
        padding: 1.5vh 0 1.5vh 1.5vh; 
        border-width: 1px; border-style: solid none solid solid; border-color: var(--sideMenuBorder); background-color: var(--sideMenuBackground);}
    .sideboxmiddle {flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch;
        padding: 1.5vh 0vh 1.5vh 0;
        border-width: 1px; border-style: solid none solid none; border-color: var(--sideMenuBorder); background-color: var(--sideMenuBackground);
        width: var(--sideboxmiddleexpanded);
        max-width: var(--sideboxmiddleexpanded);
        transition: width 1s ease;
        overflow: hidden; 
        /* transform-origin: left; transform: scaleX(1); transition: transform 0s ease; */
        /* transition: all 2s; transition-behavior: allow-discrete; opacity:1; scale:1; */
    }
}
@media screen and (max-width: 1500px) {
    :root {
        --sideboxmiddleexpanded: 230px;
    }    
    .sideboxleft {flex: 0 0 70px; display: flex; flex-direction: column; align-items: stretch;
        padding: 1.5vh 0 1.5vh 1.5vh; 
        border-width: 1px; border-style: solid none solid solid; border-color: var(--sideMenuBorder); background-color: var(--sideMenuBackground);}
    .sideboxmiddle {flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch;
        padding: 1.5vh 0vh 1.5vh 0;
        border-width: 1px; border-style: solid none solid none; border-color: var(--sideMenuBorder); background-color: var(--sideMenuBackground);
        width: var(--sideboxmiddleexpanded);
        max-width: var(--sideboxmiddleexpanded);
        transition: width 1s ease;
        overflow: hidden;
        height: 100%;        
    }  
}

/* .sidemenu span {color:var(--sidemenuTextColor);}
.sidemenu h1, h2, h3, h4, h5, h6 {color:var(--sidemenuTextColor);} */

/* .sideboxmiddle.collapsed {transform: scaleX(0);flex-basis: 0px;} */
.sideboxmiddle.collapsed {width: 0px;}

.sideboxright {flex: 0 0 0px; display: flex; flex-direction: column; align-items: stretch;
    padding: 0 1.5vh 0 0; 
    border-width: 1px; border-style: solid solid solid none; border-color: var(--sideMenuBorder); background-color: var(--sideMenuBackground);}
.sideboxright.collapsed {padding: 0 1.5vh 0 0;}

/* sidebar box left */
/* .applogobox {flex: 0 0 70px; padding: 1.5vh 0vh 0vh 0; max-height: 70px; align-items:center;} */
.applogobox {
    flex: 0 0 70px;
    padding: 0; /* odstraníme horní padding */
    max-height: 70px;
    display: flex;
    align-items: center; /* vertikální zarovnání uprostřed */
    justify-content: center; /* zarovnání horizontálně na střed */
    text-align: center;
}

.applogobox > a > img {height: 50px; width: 50px; content:var(--appLogoImg);}

.ribbonbox {flex: 1 1 auto; padding: 1.5vh 0vh 1.5vh 0;}
.rbuttonbox {height: calc(100% / 6);}   /* 6 rbuttons */
.rbutton {height: 100%; width: 100%; border-width: 1px; background-color:var(--sideMenuBackground); padding-block: 0px; padding-inline: 0px; /*text-align: center; align-content: center;*/}
.rbutton:hover {background-color: var(--ribbonBtnHoverBackgroundColor);}
.rbutton.unpressed {border-style:solid; border-color: var(--menuNonactiveBorder) var(--menuActiveBorder) var(--menuNonactiveBorder) var(--menuNonactiveBorder);}
.rbutton.unpressed.collapsed {border-style:solid; border-color: var(--menuNonactiveBorder);}
.rbutton.pressed {/*background-color: var(--ribbonBtnHoverBackgroundColor);*/ border-style:solid none solid solid; border-color:  var(--menuActiveBorder) white var(--menuActiveBorder) var(--menuActiveBorder);} /* just one rbut is pressed only*/
.rbutton.pressed.collapsed {background-color: var(--ribbonBtnHoverBackgroundColor); border-style:solid solid solid solid; border-color:  var(--menuActiveBorder);}
.tooltip .tooltiptext {
    visibility: hidden; width: auto; background-color: var(--tooltipBtnHoverBackgroundColor); color: var(--tooltipBtnHoveTextColor); text-align: center; 
    position: absolute; z-index: 20; margin-left: 2px; margin-top: -12px; border-radius: 2px; font-size:small;}
.tooltip:hover .tooltiptext {visibility: visible;}

.loginbox {flex: 0 0 90px; padding: 0vh 0vh 1.5vh 0; max-height: 90px;}
.iconbutton {height: 50%;}
.loginbutton {
    height: 100%; width: 100%; border-width: 0px; background-color: var(--sideMenuBackground); 
    padding-block: 0px; padding-inline: 0px; cursor: pointer;}

/* sidebar box middle */
/* .appnamebox {flex: 0 0 70px; max-height: 70px; padding: 1.5vh 0vh 0vh 0vh; text-align: left; align-content: center;} */
.appnamebox {
    flex: 0 0 70px;
    padding: 0; /* odstraníme horní padding */
    max-height: 70px;
    display: flex;
    align-items: center; /* vertikální zarovnání uprostřed */
    justify-content: center; /* zarovnání horizontálně na střed */
    text-align: center;
}


.menubox { flex: 1 1 auto; padding: 1.5vh 0vh 1.5vh 0; height: 100%; overflow:hidden}
.menu { height: 100%; padding: 1.5vh; border-style: solid solid solid none; border-width: 1px; border-color: var(--menuActiveBorder) var(--menuActiveBorder) var(--menuActiveBorder) white;}

.aboutbox {flex: 0 0 90px; max-height: 90px; display: flex; flex-direction: column; padding: 0vh 0vh 1.5vh 0vh;}
.versionbox {flex: 1 1 0; font-size: small;}
.countrybox {flex: 1 1 0; font-size: small;}
.userbox {flex: 1 1 0;  font-size: small;}
.rolebox {flex: 1 1 0;  font-size: small;}

/* sidemenu expand & collapse button position */   
/* -----  Big screens > 1500 px (fullHD included)  ------------------------------ */
@media screen and (min-width: 1501px) {
    :root {                    
        --sidebarbtnXshiftCollapse: calc(var(--sideboxmiddleexpanded) + 90px) /*304px*/;
        --sidebarbtnXshiftExpand: 90px;
        --sidebarbtnYshift: 50px;
    }
}
/* -----  Small screens > 900 px (HD included)  ------------------------------ */
@media screen and /*(min-width: 900px) and*/ (max-width: 1500px) {
    :root {        
        --sidebarbtnXshiftCollapse: calc(var(--sideboxmiddleexpanded) + 80px) /*278px*/;
        --sidebarbtnXshiftExpand: 80px;
        --sidebarbtnYshift: 45px;
    }
}

#sidebarbtncollapse.show {
    font-size: 14px; 
    border: 1px solid var(--menuActiveBorder); border-radius: 50%; padding: 14px 14px;
    background-image: url("../icons/icons8-back-50-cardif.png"); 
    background-size: 22px 22px;  
    background-position: center; 
    background-color: var(--backgroundColor);
    /* position: fixed;  */
    /* left: var(--sidebarbtnXshiftCollapse) var(--sidebarbtnXshiftCollapse);  */
    /* top: var(--sidebarbtnYshift);  */
    z-index: 10;
    cursor: pointer;
    }
#sidebarbtnexpand.show {
    font-size: 14px; 
    border: 1px solid var(--menuActiveBorder); border-radius: 50%; padding: 14px 14px;
    background-image: url("../icons/icons8-forward-50-cardif.png"); 
    background-size: 22px 22px;  
    background-position: center; 
    background-color: var(--backgroundColor);
    /* position: fixed;
    left: var(--sidebarbtnXshiftExpand);
    top: var(--sidebarbtnYshift);  */
    z-index: 10;
    cursor: pointer;
    }

/* Dark mode */
@media (prefers-color-scheme: dark) {
    #sidebarbtncollapse.show {
        background-image: url("../icons/icons8-back-50-white.png"); /* Dark mode icon */
    }
    #sidebarbtnexpand.show {
        background-image: url("../icons/icons8-forward-50-white.png"); /* Dark mode icon */
    }
}    
#sidebarbtncollapse.hide, #sidebarbtnexpand.hide {display:none;}