/*
Copyright: (c) 2026 Jörn Menne
Licensed under the Apache License, Version 2.0
See NOTICE file for details.
*/

:root{

    /* General variables */
    --border-radius: 8px;

    --transition-duration: 1s;

    /* Colors */
    --color-card-bg: snow;
    --color-bg: #cfeaf3;
    --color-border: black;
    --color-shadow: black;
    --color-accent: orange;
    --color-button: #9ed0d2;

    --color-entry-open: salmon;
    --color-entry-in-progress: royalblue;
    --color-entry-finished: #3ec73e;


    /* Info for the darkmode-toogle */
    --radius: 0.75rem;
    --rotation: 0deg;  

    --invert: 0%;
    --brightness: 100%;
    --contrast: 100%;


    transition: all var(--transition-duration);

}

:root:has(#dark:checked){
    /* Dark Colors */
    --color-bg: navy;
    /* --color-card-bg: darkgray; */
    --color-card-bg: hsl(from snow h 0% 70%);
    --color-txt: lightgray;
    --color-button: #5f9ea0;


    --rotation: 180deg;
    --position-right: var(--radius);

    /* Color-change for the map */
    --invert: 100%;
    --brightness: 90%;
    --contract: 90%;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-txt);
    margin: 0px 0px 1rem 0px;

    transition: all var(--transition-duration);
}

header{
    background: var(--color-card-bg);
    color: var(--color-txt);

    img{
        width: var(--radius)*2;
    }



    label{
        float:right;
        padding: 1rem;
    }

    .header-nav {
        float: right;
        
        a, button {
            display: inline-block;
            padding: 0.5rem;
            margin: 0.5rem;
            border-radius: var(--border-radius);
            text-decoration: none;
            color: var(--color-txt);

            &:hover {
                box-shadow: 1px 1px 2px 2px var(--color-shadow);
            }

            &:active {
                box-shadow: inset 1px 1px 2px 2px var(--color-shadow);
            }
        }

        button {
            background: none;
            border: none;
            font-family: inherit;
            font-size: inherit;
            cursor: pointer;
        }

        form {
            display: inline-block;
        }
    }

    transition: all var(--transition-duration);

}

.circle{
    width: calc(var(--radius)*2);
    height: calc(var(--radius)*2);
    border-radius: 100%;
    background: rgb(36, 34, 34);
    position: relative;
}

.semicircle{
    width: var(--radius);
    height: calc(var(--radius)*2);
    background: rgb(140, 139, 139);
    position: absolute;
    border-radius:  var(--radius) 0 0 var(--radius);    
    transform: rotate(var(--rotation));
    translate: var(--position-right);

    transition: all var(--transition-duration);
}

#dark{
    display: none;
}