/**
* CSS File for Coder application
* 
* @version 0.0.3
* 
* @since 0.0.3 2025-03-08 moved all color props to colors.css
* @since 0.0.2 2024-12-27 added sleep/active attributes
* @since 0.0.1 2024-03-07 cleaned copy from tatchi css
* 
* @author Hans Druyts <hans.druyts@custom8.be>
*/

/*@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500&family=Roboto:wght@300;400;500&display=swap');

:root{ 
    /* variables used in different elements */

    --view-h-min: 1024;  /* min height */
    --view-h-max: 3840; /* max height */

    --view-w-min: 320;
    --view-w-max: 1920;

    --font-min: 12;     /* font size at min height (28)*/
    --font-max: 36;     /* font size at max height (72) */

    --size-mult: calc(1px + (4 - 1) * (100vw - var(--view-w-min)*1px)) / (var(--view-w-max) - var(--view-w-min));
    --size-mult-low: calc(1px + (2 - 1) * (100vw - var(--view-w-min)*1px)) / (var(--view-w-max) - var(--view-w-min));
    
    --font-size: calc( var(--font-min)*1px + (var(--font-max) - var(--font-min)) * ((100vh - var(--view-h-min)*1px) / (var(--view-h-max) - var(--view-h-min))) );

    --height-header: 6vh;                                                         /* header is 8% of total viewport height */
    --height-footer: 5vh;                                                         /* footer is 6% of total viewport height */

    /*--margin-logo: 10vw;*/
    --margin-logo: 0.5rem;
    --height-logo: calc(var(--height-header) - 2*var(--margin-logo));
    --width-logo: calc(var(--height-logo) * 205/50);                               /* LOGO_custom8: 665x589 // svg: 205x50*/

    --width-bckgrnd: 60vw;                                  /* set width to 60% of viewport */
    --height-bckgrnd: calc(0.325 * var(--width-bckgrnd));  /* side.svg: 800x260 >> height = 0.325 * width */

    --height-main: calc(100vh - (var(--height-header) + var(--height-footer)));   /* calculated portion main (viewport - header & footer) */
    --height-main-xl: calc((100vh - var(--height-header)));                       /* calculated portion main (no footer) */

    --height-v-slider: calc(var(--height-main) - (var(--height-bckgrnd) + var(--font-size) + (var(--size-mult) * 30)));

    /* COLORS */
    --color-custom8-orange: rgb(223, 103, 6);
    --color-deep-orange: rgb(196, 82, 6);
    --color-dark-grey: rgb(65, 63, 63);
    --color-light-grey: rgb(230, 229, 229);
	--color-light-ivory: rgb(255,255,250);
	--color-dark-blue: #0c0230;

}

/* GENERAL PAGE SETTINGS */
html, body {
	height: 100%;
	font-size: var(--font-size);
    font-family: 'Roboto Slab', serif;
    /*font-family: 'Roboto', serif;*/
    font-weight: 400;
}

/* SPECIFIC FONT WEIGHTS & SIZES */
h1 {
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    font-size: 3rem;
}
h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: 500;
    font-size: 2rem;
}
h3 {
    font-weight: 400;
    font-size: 1.5rem;
}
h3.center {
    text-align: center;
}

p.settings{
    font-weight: 300;
    font-size: 0.8rem;
}



/* PAGE SETUP - GENERAL DIVISIONS */

/* header (with LOGO) */
#header {
    height: -webkit-calc(var(--height-header));
    height: -moz-calc(var(--height-header));
    height: var(--height-header);
    padding-top: calc(var(--margin-logo)/2);
}

/* main part, BETWEEN header and footer */
#main {
    height: -webkit-calc(var(--height-main));
    height: -moz-calc(var(--height-main));
    height: var(--height-main);
    /*width: 100%;*/
    
    /* Bugfix 2025.04.22: omit margins left&right (that will cause appearance of rulers)
    margin-right: var(--margin-logo);
    margin-left: var(--margin-logo);
    */
}

/* main part extended : BELOW header BUT NO FOOTER */
#main.no-footer {
    height: -webkit-calc(var(--height-main-xl));
    height: -moz-calc(var(--height-main-xl));
    height: var(--height-main-xl);  
}

/* footer (with settings wheel) */
#footer {
    height: -webkit-calc(var(--height-footer));
    height: -moz-calc(var(--height-footer));
    height: var(--height-footer);
}

/* background image */
#main_sliders {
    background-image: url('../img/scene/side.svg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: var(--width-bckgrnd); 
}

/* Special divisions */

.demo{
    font-size:1rem;
    position: fixed;
    top: 5px;
    left: 60px;
}

.timing{
    font-size:1rem;
    position: fixed;
    top: 5px;
    left: 10px;
}

.debug{
    font-size:1rem;
    position: fixed;
    top: 25px;
    left: 10px;
    display: none;
}

div.card-body.hide { 
    display: none; 
}

div.card-body.show{
    display: block;
}

/* HTML OBJECTS (buttons etc) */
/*
.btn {

    cursor: pointer;
    outline: none; 

    --pad-top: calc(3 * var(--size-mult));
    --pad-side: calc(5 * var(--size-mult));
    --btn-border: calc(1 * var(--size-mult));
    --btn-radius: 6px;

    padding: var(--pad-top) var(--pad-side);
    font-size: 1rem;
    border: var(--btn-border) solid;
    border-radius: var(--btn-radius);
}

.btn-primary {
    font-weight: 500;
    padding: 0.5rem 1.5rem;
}
*/

button.logo {

    height: -webkit-calc(var(--height-logo));
    height: -moz-calc(var(--height-logo));
    height: var(--height-logo);
    width: var(--width-logo);

    outline: none; 
    border: 0;

    background-image: url('../img/btn/logo_sleepcoder.png');
    background-size: contain;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: transparent;

    display: block;
    margin-left: auto;
    margin-right: var(--margin-logo);

}
/*
button.settings{
    
    height: -webkit-calc(var(--height-settings));
    height: -moz-calc(var(--height-settings));
    height: var(--height-settings);
    width: var(--height-settings);

    outline: none; 
    border: 0;

    background-image: url('../img/btn/settings_orange.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;

    display: block;
    margin-left: auto;
    margin-right: var(--margin-settings);

}
*/

button.exit{

	display: block;

	/*padding-top: 1rem;*/

	margin-left: auto;
	margin-right: var(--margin-settings);

}

.button.config {
    /*display: block;
    margin-right: auto;*/
    margin-left: var(--margin-settings);
    /*display: none;*/
    height: calc(var(--height-footer)*0.8);
    object-fit: contain;
}

.button.next {
    /*display: block;*/
    /*margin-left: auto;*/
    margin-right: var(--margin-settings);
    display: none;
}

/*-- male - female images --*/
.gender_m{background-image:url("../img/btn/gender_m-1.png");}
.gender_f{background-image:url("../img/btn/gender_f-1.png");}

/*-- body profile images --*/
.profile_1{background-image:url("../img/btn/profile_1-1.png");}
.profile_2{background-image:url("../img/btn/profile_2-1.png");}
.profile_3{background-image:url("../img/btn/profile_3-1.png");}
.profile_4{background-image:url("../img/btn/profile_4-1.png");}

/*-- disable radio selector items --*/
.radio-selector{
    display: inline-block;
    vertical-align: middle;
}

.radio-selector input{
    margin:0;padding:0px;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

/* change opacity when hovering/active/checked... */
.radio-selector input:active +.radio-type{
    opacity: .9;
}

.radio-selector input:checked +.radio-type{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.radio-type{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    outline: none; /* prevent from showing a blue border when selected...*/
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.radio-type:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

.radio-type {
    width: calc(50px + 10 * var(--size-mult));
    height:calc(50px + 10 * var(--size-mult));
    border-radius: calc(3px + 1 * var(--size-mult));
}

/* Images */
img.rounded {
    outline: none; /* prevent from showing a blue border when selected... */
    border-radius: calc(3 * var(--size-mult));
}

.summary-img {
    width: calc(50px + 10 * var(--size-mult));
    height:calc(50px + 10 * var(--size-mult));
    border-radius: calc(3px + 1 * var(--size-mult));    
}
.unknown {
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.known {
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.square {
    --sq-m: calc(5px + 10 * (var(--size-mult) - 1));
    --sq-h: calc(10px + 20 * (var(--size-mult) - 1));
    --sq-r: calc(4px + 10 * (var(--size-mult) - 1));
    --sq-s: calc(2px + 5 * (var(--size-mult) - 1));

    margin: 0px var(--sq-m);
    height: var(--sq-h);
    width: var(--sq-h);
    border-radius: var(--sq-r);
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    box-shadow: 0 0 var(--sq-s);
}

/* SLIDERS */

/* TOOLTIP: only show the tooltip when dragging a particular slider: */

.noUi-tooltip {
    display: none;
}
.noUi-active .noUi-tooltip {
    display: block;
}

/* HORIZONTAL (PROFILE) SLIDERS */

.sliders.profile {
    display: inline-block;
    vertical-align: bottom;
}
.sliders.profile {
    /*width: 280px;*/
    width: 60%;
    height: calc(4px + 4 * var(--size-mult));
    margin: calc(12px + 4 * var(--size-mult));
}	
.sliders.profile .noUi-handle {
    height: calc(10px + 4 * var(--size-mult)); 
    width: calc(10px + 4 * var(--size-mult)); 
    border-radius: 6px; 
    border: none;
}
.noUi-pips-horizontal {
    top: 100%;
    left: 0;
    width: 100%;
    padding: 10px 0;
    height: 40px;
}
.sliders.profile .noUi-handle::after {
    display: none;
}
.sliders.profile .noUi-handle::before {
    display: none;
}	
.sliders.profile .noUi-value {
    /* don't show pip values */
    display: none;
}

/* VERTICAL (MODULE) SLIDERS */

/* show tooltip at right hand side */
.noUi-vertical .noUi-tooltip {

      -webkit-transform: translate(220%, -50%);
     transform: translate(220%, -50%);

}

.sliders.vertical {

    height: var(--height-v-slider);
    width: calc(60 * var(--size-mult-low)); 
    margin: calc(10 * var(--size-mult-low)); /* 10px;*/
    display: inline-block;

}
.sliders.vertical .noUi-handle{

    height: calc(10px + 40 * var(--size-mult-low)); 
    width: calc(10px + 60 * var(--size-mult-low)); 

}
.zonecontrol{

    height: calc(var(--height-v-slider) / 3);

}
#general-slider {

    margin-left: calc(20 * var(--size-mult));

}