/* bev_style.css */
/* overrides tre_dark.css */


/* ################################################ */
/* COPY TO TRE*/

multiselect-list {
    --multiselect-background-color: var(--c_bg);
    --multiselect-color: var(--c_body_text);
    --multiselect-width: max-content;
}

.hidden {
    /* class to attach/detach for exposing/hiding some element */
    display: none;
}


/* ################################################ */
html, body {
    width: 100vw;
    height: 100vh;  /* fallback */
    height: 100dvh;
    margin: 0%;
    align-items: top;
    justify-items: center;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    grid-template-columns: 100%;
    grid-template-rows: 85% 1fr;
    /* grid-auto-rows: max-content; */
    row-gap: 0%;
    align-items: start;
    grid-template-areas: 
        /* "header" */
        "main"
        "nav"
    ;
    overflow-y: scroll;
}

* {
    /* applies to all elements */
    scrollbar-width: auto;
    scrollbar-color:  var(--c_body_text) transparent;
}

/* base class for tooltips */
.tooltip {
    color: var(--c_body_text);
    /* hide info */
    position: absolute;
    visibility: hidden;
    opacity: 0;
    /* box positioning */
    z-index: 1000;
    bottom: 125%; /* above the hovered element */
    left: 50%;
    transform: translateX(-50%);
    /* text styling */
    font-size: 1rem;
    font-weight: normal;
    overflow-wrap: break-word;
    
    /* box styling */
    width: max(100%, 15rem);
    /* height: 5em; */
    height: auto;
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--c_bg), var(--c_body_text) 20%);
    padding: 0.4em 0.5em;
    overflow-y: scroll;

    /* text styling */
    white-space: pre;

    /* smoothing effects */
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

/* ################################################################## */
/* HTML AREAS */
nav {
    width: max-content;
    height: auto;
    margin-top: 0;
    padding-top: 0;
    bottom: 0%;
    position: sticky;
    z-index: 100;
    background: transparent;
}
nav ul {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    column-gap: 1em;
}
nav ul > li {
    /* width: 100%; */
    color: var(--c_link_text);
    white-space: pre;
    font-size: 0.8em;
}

main {
    width: 98%;
    height: 100%;
    display: grid;
    justify-items: center;
    grid-template-columns: 97%;
    grid-template-rows: 2fr 1fr;
    /* column-gap: 3px; */
    /* row-gap: 10%; */
    grid-template-areas: 
        "bev-plot-container"
        "bev-plot-settings"
        ;
    overflow: hidden;
}

/* plot */
#bev-plot-container {
    grid-area: "bev-plot-container";
    width: 98%;
    height: min-content;
    justify-items: center;
    margin-bottom: 0;
    padding-bottom: 0;    
    background-color: var(--c_poster_sectnode);
    border-radius: 15px;
    box-shadow: 
        0 0 20px var(--c_body_text);

}
#bev-plot {
    width: 98%;
    height: 97%;
    padding: 2%;
    /* border-radius: 15px; */
}

/* ui area for sequence definition */
section.bev-plot-settings {
    width: 98%;
    margin-top: 1em;
    padding-left: 0.3em;
    grid-area: "bev-plot-settings";
    overflow-y: scroll;
    /* background-color: color-mix(in srgb, var(--c_bg) 80%, var(--c_body_text) 20%); */
    background-color: var(--c_poster_sectnode);
    border-radius: 15px;
    box-shadow: 
        0 0 20px var(--c_body_text);
}
section.bev-plot-settings :where(h1, h2, h3) {
    position: sticky;
    top: 0;
    margin-bottom: 0;
    background-color: var(--c_poster_sectnode);
    margin-top: 0.2em;
    padding: 0.2em;
    grid-column: 1 / -1;
    z-index: 1;
}
section.bev-plot-settings section {
    margin-bottom: 1em;
}


/* ################################################################## */
/* UI AREAS */
#btn-update {
    width: max-content;
    border-radius: 100%;
    /* aspect-ratio: 1; */
    background-color: var(--c_main);
    font-weight: bold;
    /* font-size: inherit; */
}
#btn-update:hover::after {
    content: "Update Plot";
    position: absolute;
    transform: translateX(-50%);
    bottom: 100%;
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--c_bg), var(--c_body_text) 20%);
}

/* global settings */
section.global-options {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, max-content auto);
    column-gap: 1em;
}
section .global-options .global-option {
    position: relative;
    /* display: inline-block; */
}

.global-option:hover .tooltip {
    /* shot tooltip on hover */
    display: block;
    visibility: visible;
    opacity: 0.95;
    /* modification specific for this class */
    left: 50%;
}


/* sequence definition */
section.sequence-definition {
    overflow-y: visible;
}
.io-options {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: max-content;
    column-gap: 0.3em;
    justify-content: center;
}
.io-options .io-option {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
}
.io-option button {
    height: min-content;
}

.shotlist {
    overflow-x: scroll;
    margin-top: 0.3em;
}
.shotlist-controls {
    width: max-content;
    display: grid;
    grid-auto-flow: column;
    column-gap: 10px;
    grid-template-rows: 1fr;
    grid-auto-columns: auto;
}

.shotlist-table {
    width: 100%;
    display: grid;
    /* grid-template-columns: repeat(9, min-content); */
    text-align: left;
}
.shotlist-table .row {
    display: contents;  /* removes row from layout => grid acts on all children */
}
.shotlist-table .row > * {
    padding-left: 0.3em;
    padding-right: 0.3em;
}
.shotlist-table .table-cell {
    position: relative;
}
.shotlist-table .row.header > * {
    font-weight: bold;
    text-transform: capitalize;
    border-bottom: 2px solid var(--c_body_text);
}
.shotlist-table .row.header .table-cell:hover > .tooltip {
    /* shot tooltip on hover */
    display: block;
    visibility: visible;
    opacity: 0.95;
    /* styling */
    /* top: 125%; */
}
.shotlist-table .row.item:hover > * {
    background-color: var(--c_tabrow_bg);
}
.shotlist-table .row.item:hover > * > * {
    background-color: var(--c_tabrow_bg);
}


/* ################################################################## */
/* INTERACTIVE ELEMENTS */
select, input, textarea, button {
    background-color: var(--c_bg);
    color: var(--c_body_text);
    border-radius: 5px;
}
button {
    font-weight: bold;
}
button:active {
    background-color: color-mix(in srgb, var(--c_bg) 70%, var(--c_body_text) 30%);
}
button:hover {
    cursor: pointer;
    background-color: color-mix(in srgb, var(--c_bg) 80%, var(--c_body_text) 20%);
}

@keyframes flash-bg {
    0%   { background-color: transparent; }
    20%  { background-color: color-mix(in srgb, var(--c_main) 50%, var(--c_body_text) 50%); }
    40%  { background-color: transparent; }
    60%  { background-color: color-mix(in srgb, var(--c_main) 50%, var(--c_body_text) 50%); }
    100% { background-color: transparent; }
}
.error-highlight {
    animation: flash-bg 0.8s ease-in-out;
}
.hint {
    color: var(--c_todo_ls);
}
.hint::before {
    content: "Hint: ";
}
ul.hint::before {
    content: "Hints:";
}
.overlay {
    height: 90%;
    position: fixed;
    margin: 0.5em;
    padding: 1em;
    border-radius: 10px;
    box-shadow: 
        0 0 20px var(--c_body_text);
    inset: 0;
    background: var(--c_bg);
    opacity: 0.9;
    justify-content: center;
    align-items: top;
    overflow-y: scroll;
    z-index: 1000;
}
.hidden {
    /* class to show/hide some content */
    display: none;
}

/* ################################################################## */
/* MODIFICATIONS TO  BASE CLASSES */
.tooltip {
    pointer-events: none;
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 80%;
    text-transform: none;
}

/* ################################################################## */
/* MEDIA QUERIES */
/* @media (min-width: 768px) {
    .tooltip {
        pointer-events: all;
    }
} */