/* variables.css */

/*     max-width: calc(var(--navbar_width) - var(--navbar_padding) * 2); */
:root {
    --navbar_padding: 8px;
    --navbar_width: 300px;
    --border_radius: 7px;
    --border_radius_small: 4px;
    --border_radius_tiny: 3px;
    --button_pressed_scale: 0.98;
    --transition-time: 0.5s;
    /* z-index hierarchy */
    --z-modal: 101000;
    --z-overlay: 100000;
    --z_show_menu_button: 10000;
    --z-navbar: 99999;
    --z-filterbar: 100001;
    --filterbar-breakpoint: 1590px;
    /* --filterbar_width: 450px; */

    --bg_color: #ccc;
    --bg_color_1_5: #ddd;
    --bg_color_2: #f0f0f0;
    --bg_color_extreme: rgb(255 255 255);
    --bg_color_text: var(--bg_color_extreme);
    --bg_color_blended: rgb(0 0 0 / 15%);
    --bg_color_blended_2: color-mix(in srgb, var(--bg_color_2) 80%, var(--bg_color_extreme) 20%);
    --bg_color_card_frame: hsl(0deg 0% 80% / 1);
    --bg_color_image: #555;

    --navbar_shadow_color: var(--bg_color_2);

    --card_border_color: #bbb;

    --text_color: #000;
    --border_color: #bbb;
    --table_border_color: #ccc;
    --input_bg_color: #fff;

    /* Painikkeiden tyylit vaaleassa teemassa */
    --button_bg_color: #ccc;
    --button_text_color: #000;
    --button_hover_bg_color: #888;
    --button_hover_text_color: #fff;

    /* Aktiivisen ja painetun painikkeen tyylit */
    --button_active_bg_color: #fff;
    --button_active_text_color: #000;
    --button_active_border_color: #444;

    --add_row_form_box_shadow: 0 2px 60px 30px rgb(0 0 0 / 30%);
}

/* WebKit (Chrome, Safari) */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #aaa;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox */
* {
    scrollbar-color: #aaa #f1f1f1;
    transition: 
    color var(--transition-time), 
    background-color var(--transition-time), 
    border-color var(--transition-time),
    fill var(--transition-time),
    stroke var(--transition-time);
}


/* Vaalea teema */
body.light-mode {
    --bg_color: #ccc;
    --bg_color_1_5: #ddd;
    --bg_color_2: #f0f0f0;
    --bg_color_extreme: rgb(255 255 255);
    --bg_color_text: var(--bg_color_extreme);
    --bg_color_blended: rgb(0 0 0 / 15%);
    --bg_color_blended_2: color-mix(in srgb, var(--bg_color_2) 80%, var(--bg_color_extreme) 20%);
    --bg_color_card_frame: hsl(0deg 0% 80% / 1);
    --bg_color_image: #555;

    --navbar_shadow_color: var(--bg_color_2);

    --card_border_color: #bbb;

    --text_color: #000;
    --border_color: #bbb;
    --table_border_color: #ccc;
    --input_bg_color: #fff;

    --button_bg_color: #ccc;
    --button_text_color: #000;
    --button_hover_bg_color: #888;
    --button_hover_text_color: #fff;

    --button_active_bg_color: #fff;
    --button_active_text_color: #000;
    --button_active_border_color: #444;

    --add_row_form_box_shadow: 0 2px 60px 30px rgb(0 0 0 / 30%);
}

body.light-mode ::-webkit-scrollbar-track {
    background: #f1f1f1;
}
body.light-mode ::-webkit-scrollbar-thumb {
    background: #aaa;
}
body.light-mode ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Scrollbar-vaalealle teemalle (Firefox) */
body.light-mode * {
    scrollbar-color: #aaa #f1f1f1;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg_color: #222;
        --bg_color_1_5: #181818;
        --bg_color_2: #111;
        --bg_color_extreme: rgb(0 0 0);
        --bg_color_text: var(--bg_color_extreme);
        --bg_color_blended: rgb(255 255 255 / 20%);
        --bg_color_blended_2: color-mix(in srgb, var(--bg_color_2) 70%, var(--bg_color_extreme) 30%);
        --bg_color_card_frame: hsl(0deg 0% 18% / 1);
        --bg_color_image: #222;

        --navbar_shadow_color: var(--bg_color_2);

        --card_border_color: #222;

        --text_color: rgb(255 254 253);
        --border_color: #333;
        --table_border_color: #444;
        --input_bg_color: #111;

        --button_bg_color: #333;
        --button_text_color: #fff;
        --button_hover_bg_color: #222;
        --button_hover_text_color: #fff;

        --button_active_bg_color: #222;
        --button_active_text_color: #fff;
        --button_active_border_color: #555;

        --add_row_form_box_shadow: 0 2px 60px 30px rgb(0 0 0 / 50%);
    }

    ::-webkit-scrollbar-track {
        background: #2b2b2b;
    }

    ::-webkit-scrollbar-thumb {
        background: #555;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #777;
    }

    /* Firefox */
    * {
        scrollbar-color: #555 #2b2b2b;
    }
}

/* Tumma teema */
body.dark-mode {
    --bg_color: #222;
    --bg_color_1_5: #181818;
    --bg_color_2: #111;
    --bg_color_extreme: rgb(0 0 0);
    --bg_color_text: var(--bg_color_extreme);
    --bg_color_blended: rgb(255 255 255 / 20%);
    --bg_color_blended_2: color-mix(in srgb, var(--bg_color_2) 70%, var(--bg_color_extreme) 30%);
    --bg_color_card_frame: hsl(0deg 0% 18% / 1);
    --bg_color_image: #222;

    --navbar_shadow_color: var(--bg_color_2);

    --card_border_color: #222;

    --text_color: rgb(255 254 253);
    --border_color: #333;
    --table_border_color: #444;
    --input_bg_color: #111;

    --button_bg_color: #333;
    --button_text_color: #fff;
    --button_hover_bg_color: #222;
    --button_hover_text_color: #fff;

    --button_active_bg_color: #222;
    --button_active_text_color: #fff;
    --button_active_border_color: #555;

    --add_row_form_box_shadow: 0 2px 60px 30px rgb(0 0 0 / 50%);
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #2b2b2b;
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background: #555;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* Scrollbar-tummalle teemalle (Firefox) */
body.dark-mode * {
    scrollbar-color: #555 #2b2b2b;
}