/*
Pitch-class set visualizer
Copyright (C) 2024 Josias Matschulat

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
    --sans-font: "Inter Tight", sans-serif;
    --serif-font: "Frank Ruhl Libre", serif;
    --set-font: "JetBrains Mono", monospace;
    --bg-light: #fbfbfb;
    --bg-dark: #111;
    --fg-light: black;
    --fg-dark: #eee;
    --bg-alternate-light: #eee;
    --bg-alternate-dark: #202020;
    &[theme="light"], &:not([theme]) {
        --bg-border-color: gray;
        --bg-color: var(--bg-light);
        --fg-color: var(--fg-light);
        --fg-same-set: #cc0000;
        --fg-dim-color: #444;
        --table-alternate-color: var(--bg-alternate-light);
        --hyperlink-fg-color: #0000dd;
        --hyperlink-hover-bg-color: rgba(0,0,0,0.05);
        --hyperlink-hover-border-color: rgba(0,0,0,0.6);
        --same-set-border-color: rgba(0,0,0,0.4);
        --button-bg-color: lightgray;
        --input-bg-color: #fff;
        --input-fg-color: var(--fg-light);
        --input-border-color: lightgray;
        --polygon-border-color: var(--fg-color);
        --polygon-fill-color: #ccc;
        --axis-color: var(--fg-color);
        --pc-hover-color: #b0edff;
        --pc-selected-hover-color: #ffc1c1;
        --pc-moving-from-stroke: red;
        --pc-moving-to-stroke: green;
        --pc-moving-to-fill: #98ffbf;
        --dialog-border-color: var(--bg-color);
        --dialog-bg-dim-color: rgba(63, 63, 63, 0.9);
        --dialog-shadow-color: black;
        --dialog-title-bg-color: #333;
        --dialog-title-fg-color: white;
        --close-btn-bg-color: var(--dialog-title-bg-color);
        --close-btn-fg-color: var(--dialog-title-fg-color);
    }
    &[theme="dark"] {
        --bg-border-color: #333;
        --bg-color: var(--bg-dark);
        --fg-color: var(--bg-light);
        --fg-same-set: #ffdddd;
        --fg-dim-color: #aaa;
        --table-alternate-color: var(--bg-alternate-dark);
        --hyperlink-fg-color: #ddffaa;
        --hyperlink-hover-bg-color: rgba(255,255,255,0.1);
        --hyperlink-hover-border-color: rgba(255,255,255,0.6);
        --same-set-border-color: rgba(255,255,255,0.4);
        --button-bg-color: gray;
        --input-bg-color: #111;
        --input-fg-color: var(--fg-dark);
        --input-border-color: gray;
        --polygon-border-color: var(--fg-color);
        --polygon-fill-color: #444;
        --axis-color: var(--fg-color);
        --pc-hover-color: #0c4d61;
        --pc-selected-hover-color: #521c1c;
        --pc-moving-from-stroke: red;
        --pc-moving-to-stroke: lightgreen;
        --pc-moving-to-fill: darkgreen;
        --dialog-border-color: #777;
        --dialog-bg-dim-color: rgba(63, 63, 63, 0.9);
        --dialog-shadow-color: black;
        --dialog-title-bg-color: #444;
        --dialog-title-fg-color: var(--fg-color);
        --close-btn-bg-color: var(--dialog-title-bg-color);
        --close-btn-fg-color: var(--dialog-title-fg-color);
    }
}

body.font-sans {
    font-family: var(--sans-font);
    font-weight: 300;
    select, input {
        font-family: var(--sans-font);
    }
}

body.font-serif {
    font-family: var(--serif-font);
    font-weight: 300;
    select, input {
        font-family: var(--serif-font);
    }
}

body {
    position: absolute; 
    width: 100%; 
    background-color: var(--bg-border-color); 
    box-sizing: border-box;
    margin: 0;
    font-style: normal;
}

@media (aspect-ratio >= 1.2) {
    body {
        overflow: hidden; 
        height: 100%;
        font-size: 12pt;
    }
}
@media (aspect-ratio < 1.2) {
    body {
        overflow: visible; 
        height: auto;
    }
}

main {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    color: var(--fg-color);
}

@media (aspect-ratio >= 1.2) {
    main {
        height: 100%;
        flex-direction: row;
        & > div:first-child {
            border-right: none !important;
        }
    }
}
@media (aspect-ratio < 1.2) {
    main {
        height: auto;
        flex-direction: column;
        & > div:first-child {
            border-bottom: none !important;
        }
    }
}

#visualization-area, #data-area {
    border: 6px solid var(--bg-border-color);
    box-sizing: border-box;
    padding: 10px;
}

#visualization-area {
    background-color: var(--bg-color);
}

@media (aspect-ratio >= 1.2) {
    #visualization-area {
        width: 50%;
        height: 100%;
    }
}
@media (1.0 < aspect-ratio < 1.2) {
    #visualization-area {
        width: 100%;
        height: 99.3vh;
    }
}
@media (aspect-ratio <= 1.0) {
    #visualization-area {
        width: 100%;
        aspect-ratio: 1;
    }
}

#data-area {
    background-color: var(--bg-color);
    color: var(--fg-color);
    overflow: auto;
    table {
        #input-main {
            appearance: none;
            color: var(--input-fg-color);
            background-color: var(--input-bg-color);
            border-color: var(--input-border-color);
            border-style: solid;
            font-family: var(--serif-font);
            font-size: 140%;
            width: 98%;
            padding: 0 0.5ch;
        }
        select, input[type="number"] {
            vertical-align: bottom;
        }
    }
    .graphics-view {
        line-height: 0px;
        svg {
            box-sizing: border-box; 
            object-fit: contain;
            max-width: 100%; 
            height: auto;
        }
    }
    #ruler-view {
        padding-top: 3px;
        padding-bottom: 3px;
    }
    #staff-view {
        padding-top: 1px;
        padding-bottom: 1px;
        svg {
            width: 100%;
        }
    }
}

@media (aspect-ratio >= 1.2) {
    #data-area {
        width: 50%;
        height: 100%;
        th, td {
            &:first-child {
                width: 23ch;
            }
        }
    }
    html[lang="en"] #data-area {
        th, td {
            &:first-child {
                width: 20ch;
            }
        }
    }
    html[lang="pt"] #data-area {
        th, td {
            &:first-child {
                width: 21ch;
            }
        }
    }
}

@media (aspect-ratio < 1.2) {
    #data-area {
        width: 100%;
        height: auto;
        th, td {
            &:first-child {
                width: 20ch;
            }
        }
    }
}

@media (aspect-ratio < 0.8) {
    #data-area {
        th, td {
            &:first-child {
                width: 30%;
            }
        }
        /* font-size: 3.0vw; */
        &, label, input, select {
            font-size: 3.7vw;
        }
        #staff-view svg {
            height: 10vh;
        }
    }
}

.setfont {
    font-family: var(--set-font);
    font-size: 90%;
    font-weight: 200;
}

table {
    table-layout: fixed;
    width: 100%;
    th, td {
        line-height: 140%;
        padding: 7px 15px;
        &:first-child {
            width: 25%;
        }
    }
    :nth-child(odd of tr:not([hidden])) {
        background-color: var(--table-alternate-color);
    }
}

select, input[type="number"] {
    box-sizing: border-box;
    height: 1.5lh;
    border-radius: 0%;
    border: 1px solid var(--same-set-border-color);
    color: var(--fg-color);
}

select {
    padding: 0 1ch;
}

input[type="number"] {
    padding-left: 1.5ch;
    margin-right: 0.5ch;
    width: 8ch;
}

#input-export-file-png-size {
    width: 11ch;
}

a, span.same-set {
    text-decoration: none;
    border: 1px solid transparent;
    padding: 1px 1px 0.5px;
    text-wrap: nowrap;
    user-select: none;
    &:not(.same-set):not(.close-button) { color: var(--hyperlink-fg-color); }
    &.same-set { 
        color: var(--fg-same-set); 
    }
    &.same-set, &.similar-set {
        border: 1px solid var(--same-set-border-color);
    }
    &:hover {
        background-color: var(--hyperlink-hover-bg-color);
        border: 1px solid var(--hyperlink-hover-border-color);
    }
}

.icon-search, .icon-star {
    float: right;
}

.icon-star {
    font-size: 130%;
    vertical-align: middle;
}

#staff-up-btn {
    float: left; 
    padding-top: 0.5lh;
}

#staff-down-btn {
    float: right;
}

.svg-icon {
    box-sizing: border-box; 
    object-fit: contain;
    width: auto; 
    height: 0.7lh; 
    vertical-align: -7%;
    .svg-hyperlink {
        fill: var(--hyperlink-fg-color);
    }
}

.disabled-link {
    text-decoration: none;
    border: 1px solid transparent;
    padding: 1px 1px;
    text-wrap: nowrap;
    /* color: var(--fg-dim-color); */
    opacity: 25%;
}

input[type="checkbox"], input[type="radio"] {
    width: 1lh;
    height: 1lh;
    &[disabled]+label {
        color: var(--fg-dim-color);
    }
    &:not([disabled]) {
        &, + label {
            cursor: pointer;
        }
    }
    margin-right: 2px;
}

body.font-sans {
    input[type="checkbox"], input[type="radio"] {
        vertical-align: -10%;
    }
    td sub {
        font-size: 0.75em;
    }
}

body.font-serif {
    input[type="checkbox"], input[type="radio"] {
        vertical-align: -15%;
    }
    td sub {
        font-size: 0.8em;
    }
}

/* Hack for Firefox */
@-moz-document url-prefix() {
    body.font-sans {
        input[type="checkbox"], input[type="radio"] {
            vertical-align: -6% !important;
        }
    }
    body.font-serif {
        input[type="checkbox"], input[type="radio"] {
            vertical-align: -12% !important;
        }
    }
}

span.range-label {
    font-size: smaller;
    color: var(--fg-dim-color);
    vertical-align: middle;
    padding: 0 0 0.3lh 1ch;
    margin: 0;
    /* padding-bottom: 0.5lh; */
}

td sub {
    vertical-align: baseline;
    position: relative;
    bottom: -0.2em;
}

.operator {
    font-family: var(--serif-font);
}