@import url('https://fonts.googleapis.com/css2?family=Murecho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Murecho:wght@600&display=swap');

:root{
    --millionlive: #ffc20b;
    --princess: #ff2284;
    --fairy: #005eff;
    --angel: #ffbb00;

    --allgreen: #AAC674;
    --all-grade: #AAC674, #45ADD2 50%, #AA7AC5 100%;/* memo */
    --all-grade-angle: 180deg;

    --twomix: #37D500;
    --fourmix: #00C3D6;
    --sixmix: #FB6300;
    --millionmix: #CE09DF;
    --overmix: #856886;
    --twomixplus: #FE4DAD;

    --mizuki: #99b7dc;
    --shiho: #afa690;
    --tsumugi: #ebe1ff;

    --text-color: light-dark(#282416,#E0DED6);
    --bg-color: light-dark(#FFFFFF,#000000);
    --primary-color: light-dark(var(--millionlive),color-mix(in oklch,var(--millionlive) 90%,var(--bg-color)));

    color-scheme: light dark;
}
body{
  font-family: "Murecho", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-size: 14px;

  color: var(--text-color);
  background-color: var(--bg-color);
}
h1{
    font-weight: bold;
    font-size: 2em;
}

.hidden{
    display: none;
}

#songs-table tbody tr {
    will-change: auto;
}

#songs-table tbody tr.hidden {
    display: none !important;
}

/* lazyload */
#songs-table img {
    transition: opacity 0.2s ease-in-out;
}

#songs-table img[loading="lazy"] {
    opacity: 0.8;
}

#songs-table img[loading="lazy"]:not([src]) {
    opacity: 0.3;
}

#wrap-loading{
    & [id*=-loading]{
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        color: #afa690;
        z-index: 52;
        transition: opacity ease-in .2s;

        & p{
            color: 
                light-dark(
                    color-mix(in oklab, var(--shiho) 60%, var(--text-color)),
                    color-mix(in oklab, var(--shiho) 60%, var(--text-color))
                );
        }

        &.hidden-loading{
            opacity: 0 !important;
            pointer-events: none !important;
        }
    }
    & #now-loading{
        background-color: 
            light-dark(
                color-mix(in oklab, var(--tsumugi) 52%, var(--bg-color)),
                color-mix(in oklab, var(--tsumugi) 39%, var(--bg-color))
            );
    }
    & #filter-loading{
        background-color: 
            light-dark(
                color-mix(in oklab, var(--tsumugi) 39%, transparent),
                color-mix(in oklab, var(--bg-color) 13%, transparent)
            );
        backdrop-filter: blur(5px) brightness(110%);
        z-index: 51;
    }
    &:has(#now-loading.hidden-loading) #filter-loading{
        opacity: 1;
    }
}

.navbar.fixed-top{
    /*padding: 0;*/
    pointer-events: none;
    z-index: 50;

    & .container > *{
        pointer-events: auto !important;
    }

    & .navbar-toggler{
        padding: 8px;
        font-size: 16px;
        color: white;
        background-color: var(--bg-color);
        border: none;
        /*border-radius: 5px 0 5px 5px;*/
        border-radius: 52px;
        box-shadow: 0 0 10px .25rem rgba(0, 0, 0, 0.1);

        &:focus{
            filter: brightness(95%);
            border: none;
            box-shadow: 0 0 0 .25rem rgba(0, 0, 0, 0.1);;
        }
    }
    & .offcanvas{
        max-width: 90%;
    }
    & .nav-item{
        & a{
            cursor: pointer;
            &:hover{
                text-decoration: underline;
            }
        }
    }
}

#table-wrap{
    --scrollbar-size: 10px;
    --searchbox-height: 0px;

    width: 100%;
    height: calc(100vh - var(--searchbox-height));
    overflow: scroll;

    &::-webkit-scrollbar{
        width: var(--scrollbar-size);
        height: var(--scrollbar-size);
    }
    &::-webkit-scrollbar-track{
        background: color-mix(in oklch,var(--shiho) 39%,var(--bg-color));
    }
    &::-webkit-scrollbar-thumb{
        background: var(--shiho);
    }
    &::-webkit-resizer,
    &::-webkit-scrollbar-corner{
        background: transparent;
    }

    &.show-searchbox{
        --searchbox-height: calc((1rem * 2) + 1.5rem + var(--scrollbar-size));
        /* searchbox padding-y * 2 + input height + yoko-scrollbar height */
    }
}
table#songs-table{
    --cell-padding: 0.5em;
    --border-color: light-dark(#ddd,dimgray);
    --jacket-size: 39px;
    
    width: auto;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 auto;

    thead,tbody{
        & th,& td{
            width: 1px;
            padding: var(--cell-padding);
            border: 1px solid var(--border-color);
            /*text-wrap: nowrap;*/
            white-space: nowrap;
        }
        /* タイプ */
        & tr th:not(#thead-course-unit):nth-child(2){
            margin: 0;
            padding: 0;
            min-width: 8px;

            &.All{
                --all-grade-alpha: 0.8;
                background-color: white;
                background-image: linear-gradient(var(--all-grade-angle), rgba(168, 197, 117, var(--all-grade-alpha)), rgba(69, 173, 209, var(--all-grade-alpha)) 50%, rgba(170, 122, 197, var(--all-grade-alpha)));
            }
            &.Princess{
                background-color: var(--princess);

                &.Fairy{
                    background-image: linear-gradient(to top, transparent 50%, var(--princess) 50%);
                }
                &.Angel{
                    background-image: linear-gradient(to top, transparent 50%, var(--princess) 50%);
                }
            }
            &.Fairy{
                background-color: var(--fairy);

                &.Angel{
                    background-image: linear-gradient(to top, transparent 50%, var(--fairy) 50%);
                }
            }
            &.Angel{
                background-color: var(--angel);
            }
        }
    }
    thead{
        font-size: .9em;

        & tr{
            &:nth-child(2){
                & th, & td{
                    position: sticky;
                    top: 0;
                    left: 0;
                    z-index: 30;
                    user-select: none;
                }
            }
            & th,& td{
                font-weight: bold;
                color: white;
            }
            & th{
                background-color: light-dark(var(--mizuki), color-mix(in oklch,var(--mizuki) 65%,var(--bg-color)));

                &:nth-child(3){
                    max-width: calc(var(--cell-padding) * 2 + var(--jacket-size));
                }
            }
            & th.sticky:nth-child(3){ /* ジャケ */
                position: sticky;
                left: 0;
                z-index: 31;
            }
            & td{
                background-color: 
                    light-dark(
                        var(--current-course),
                        color-mix(in oklch,var(--current-course) 80%,var(--bg-color))
                    );

                &.course-0,
                &.course-5{
                    --current-course: var(--twomix);
                }
                &.course-1{
                    --current-course: var(--fourmix);
                }
                &.course-2{
                    --current-course: var(--sixmix);
                }
                &.course-3{
                    --current-course: var(--millionmix);
                }
                &.course-4{
                    --current-course: var(--overmix);
                }
                &.course-6{
                    --current-course: var(--twomixplus);
                }
            }
        }
    }/* thead */
    tbody{
        & tr{            
            & th{
                font-weight: normal;
            }
            & th,
            & td,
            & input.memo-input{
                color: color-mix(in oklab, var(--current-type) 25%, var(--text-color));
                background-color: light-dark(
                    color-mix(in oklab, var(--current-type) 10%, var(--bg-color)),
                    color-mix(in oklab, var(--current-type) 39%, var(--bg-color))
                );
            }
            & th:nth-child(3){ /* ジャケ */
                position: sticky;
                left: 0;
            }
            &:has(.All){
                --current-type: var(--allgreen);

                & th,& td {
                    --all-grade-alpha: 0.1;

                }
            }
            &:has(.Princess){
                --current-type: var(--princess);

                &:has(.Fairy){
                    --second-type: var(--princess);

                    & th,& td {
                        background-image: linear-gradient(to top, transparent 50%, 
                            light-dark(
                                color-mix(in oklab, var(--second-type) 10%, var(--bg-color)),
                                color-mix(in oklab, var(--second-type) 39%, var(--bg-color))
                            ) 50%);    
                    }
                }
                &:has(.Angel){
                    --second-type: var(--princess);

                    & th,& td {
                        background-image: linear-gradient(to top, transparent 50%, 
                            light-dark(
                                color-mix(in oklab, var(--second-type) 10%, var(--bg-color)),
                                color-mix(in oklab, var(--second-type) 39%, var(--bg-color))
                            ) 50%); 
                    }
                }
            }
            &:has(.Fairy){
                --current-type: var(--fairy);

                & th,& td {
                    background-color: light-dark(
                        color-mix(in oklab, var(--current-type) 8%, var(--bg-color)),
                        color-mix(in oklab, var(--current-type) 39%, var(--bg-color))
                    );
                    /*background-color: color-mix(in oklab, var(--fairy) 8%, white);*/
                }
                &:has(.Angel){
                    --second-type: var(--fairy);

                    & th,& td {
                        background-image: linear-gradient(to top, transparent 50%, 
                            light-dark(
                                color-mix(in oklab, var(--second-type) 10%, var(--bg-color)),
                                color-mix(in oklab, var(--second-type) 39%, var(--bg-color))
                            ) 50%); 
                    }
                }
            }
            &:has(.Angel){
                --current-type: var(--angel);
            }

            & td.disabled {
                background-color: 
                    light-dark(
                        darkgray,
                        dimgray
                    );
                background-image: none !important;
            }
            & select{
                background-color: 
                    light-dark(
                        rgba(255, 255, 255, 0.5),
                        rgba(0, 0, 0, 0.39)
                    );
                border: none;
                color: 
                    light-dark(
                        var(--text-color),
                        color-mix(in oklch,var(--text-color) 98%,transparent)
                    );
                /*color: black !important;*/
                /*font-weight: bold;*/
            }
            & option{
                background-color: var(--bg-color);
                color:var(--text-color);
            }
        }
        /* ジャケ */
        & th:nth-child(3) {
            max-width: calc(var(--jacket-size) + (var(--cell-padding) * 2));
            z-index: 2;

            & img {
                width: var(--jacket-size);
                height: var(--jacket-size);
            }
        }
        /* 曲名 */
        & tr th:nth-child(4) {
            max-width: 15em;
            overflow: hidden;
            text-overflow: ellipsis;

            &.overflow{
                max-width: none;
                overflow: auto;
                text-overflow: unset;
            }
        }
        /* 各コース */
        & td:has(select option[value='8']:checked){
            background-image: 
                linear-gradient(90deg, 
                    color-mix(in oklch,var(--princess) 52%, white) 0%, 
                    color-mix(in oklch,var(--angel) 52%, white) 50%,
                    color-mix(in oklch,var(--fairy) 52%, white) 100%);
            
            background-image:
                    linear-gradient(90deg, 
                    light-dark(
                        color-mix(in oklch,var(--princess) 52%, var(--bg-color)),
                        color-mix(in oklch,var(--princess) 39%, var(--bg-color))
                    ) 0%, 
                    light-dark(
                        color-mix(in oklch,var(--angel) 52%, var(--bg-color)),
                        color-mix(in oklch,var(--angel) 39%, var(--bg-color))
                    ) 50%,
                    light-dark(
                        color-mix(in oklch,var(--fairy) 52%, var(--bg-color)),
                        color-mix(in oklch,var(--fairy) 39%, var(--bg-color))
                    ) 100%
                );
            
        }
        & td:has(select option[value='7']:checked){
            background-image: 
                linear-gradient(90deg,
                    light-dark(
                        khaki,
                        goldenrod
                    ),
                    light-dark(
                        goldenrod,
                        goldenrod
                    )
                );
        }
        & td:has(select option[value='6']:checked),
        & td:has(select option[value='5']:checked){
            background-image: 
                linear-gradient(90deg,
                    light-dark(
                        lightgrey,
                        darkgray
                    ),
                    light-dark(
                        silver,
                        darkgray
                    )
                );
        }
        & td:has(select option[value='4']:checked),
        & td:has(select option[value='3']:checked){
            background-image: 
                linear-gradient(90deg, 
                    light-dark(
                        lightcyan,
                        mediumaquamarine
                    ),
                    light-dark(
                        paleturquoise,
                        mediumaquamarine
                    )
                );
        }
        & td:has(select option[value='2']:checked),
        & td:has(select option[value='1']:checked){
            background-image: 
                linear-gradient(90deg, 
                    light-dark(
                        lightyellow,
                        darkkhaki
                    ),
                    light-dark(
                        palegoldenrod,
                        darkkhaki
                    )
                );
        }
        & td:has(select option[value='0']:checked){
            background-image: 
                linear-gradient(90deg, 
                    light-dark(
                        whitesmoke,
                        gainsboro
                    ),
                    light-dark(
                        whitesmoke,
                        gainsboro
                    )
                );
        }
        & td div.course-level,
        & td div.course-notes{
            text-align: center;
            margin-top: 3px;
            padding: 1px 4px;
            background-color: 
                    light-dark(
                        rgba(255, 255, 255, 0.5),
                        rgba(0, 0, 0, 0.39)
                    );
            border-radius: 2px;
        }
        &:has(.course-notes:not(.hidden)) td div.course-level{
            margin-bottom: 3px;
        }
        & th:has(input[type=text]){
            padding: 0 .5em;

            input[type=text]{
                border: none;
                background-color: transparent;
                min-width: 20em;
                width: 100%;
                height: 100%;

                &:active,&:focus{
                    border: none;
                    border-bottom: 2px solid var(--primary-color);
                    outline: none;
                }
            }
        }
    }/* tbody */
}
/* List.js */
th, td, button{
    &.sort{
        cursor: pointer;

        &.desc::after,
        &.asc::after{
            font-family: bootstrap-icons;
            margin-left: 5px;
            margin: 0 .05em 0 .1em;
            vertical-align: -0.1em;
        }

        &.desc::after{
            content: '\F229';
        }

        &.asc::after{
            content: '\F235';
        }
    }
}
/* filter options */
details{
    & summary{
        display: inline-block;
        font-size: 1.25em;
        font-weight: bold;
        user-select: none;
        list-style: none;
        &::-webkit-details-marker {
            display: none;
        }
        & i::before{
            margin-right: 3px;
            color: var(--primary-color);
            transform: rotate(-90deg);
        }
    }
    &[open] i::before{
        transform: rotate(0deg);
    }
    & > *:not(summary,hr,input){
        margin: 0 .75rem;
    }
    & p.komidashi{
        padding-left: 8px;
        border-left: 8px solid color-mix(in oklab, var(--millionlive) 50%, var(--bg-color));
    }
}
.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;

    &[id*=-twomix],
    &[id*=-solotwomix]{
        background-color: var(--twomix);
        border-color: var(--twomix);
    }
    &[id*=-fourmix]{
        background-color: var(--fourmix);
        border-color: var(--fourmix);
    }
    &[id*=-sixmix]{
        background-color: var(--sixmix);
        border-color: var(--sixmix);
    }
    &[id*=-millionmix]{
        background-color: var(--millionmix);
        border-color: var(--millionmix);
    }
    &[id*=-overmix]{
        background-color: var(--overmix);
        border-color: var(--overmix);
    }
    &[id*=solotwomixplus]{
        background-color: var(--twomixplus);
        border-color: var(--twomixplus);
    }
    &[id*=all]{
        background-color: var(--twomix);
        border-color: var(--twomix);
    }
    &[id*=princess]{
        background-color: var(--princess);
        border-color: var(--princess);
    }
    &[id*=fairy]{
        background-color: var(--fairy);
        border-color: var(--fairy);
    }
    &[id*=angel]{
        background-color: var(--angel);
        border-color: var(--angel);
    }
}
ul li::marker{
    color: var(--primary-color);
}
.btn-outline-primary{
    --bs-btn-color: 
        light-dark(
            #0d6efd,
            color-mix(in oklch,var(--text-color) 76.5%,#0d6efd)
        );
}
/* shinchoku result */
textarea{
    field-sizing: content;
    min-height: min-content;
    max-width: 765px;

    &.alert{
        padding: .375rem .75rem;
    }
}

/* searchbox */
#searchbox{
    & input{
        margin-left: .75em;
        width: 100%;
        height: 1.5rem;
        background-color: transparent;
        border: none;

        &:focus{
            outline: none;
            border-bottom: 1px solid grey;
        }
    }
}

/* shinchoku table */
#result-table{
    font-size: 1rem;
    width: auto;

    & caption{
        font-size: .75rem;
        text-align: end;
        line-height: 1;
        background-color: white;
        color: black;

        & small{
            font-size: .5rem !important;
            color: grey;
        }

        & span{
            white-space: nowrap;
        }
    }

    & tbody.table-group-divider{
        border-color: black;
    }

    & th,& td{
        white-space: nowrap;
        text-align: center;
        min-width: 3.5em;
    }
    & tbody{
        & tr{
            &:nth-child(1),
            &:nth-child(6){
                --current-result-course: var(--twomix);
            }
            &:nth-child(2){
                --current-result-course: var(--fourmix);
            }
            &:nth-child(3){
                --current-result-course: var(--sixmix);
            }
            &:nth-child(4){
                --current-result-course: var(--millionmix);
            }
            &:nth-child(5){
                --current-result-course: var(--overmix);
            }
            &:nth-child(7){
                --current-result-course: var(--twomixplus);
            }

            & td.course-name{
                font-weight: bold;
                color: white;
                background-color: var(--current-result-course);
            }
        }
    }
}