@charset "UTF-8";

:root {

    /**
     *   https://drafts.csswg.org/css-color-4/#css-system-colors
     */
    --color-safe: #009688;
    --color-caution: #F44336;
    --color-deco: #0174DF;
    --color-tgray: rgb(128 128 128 / 0.5);
    --color-bg: Field;
    --color-text: FieldText;

    --fontSize: max(12px, 0.9vw);
    --lineHeight: 1.75;

    --gap-50: calc(var(--fontSize) * .5);
    --gap-100: calc(var(--fontSize) * 1);
    --gap-200: calc(var(--fontSize) * 2);
    --gap-300: calc(var(--fontSize) * 4);

    --border-radius: 3px;
    --opacity: 0.75;
    --viewport-inline: max(calc(var(--fontSize) * 0.5), calc(50% - 315px + var(--fontSize) * 0.5));

    /* https://drafts.csswg.org/css-fonts/#absolute-size-mapping */
    --font-s: calc(var(--fontSize) * 0.888);
    --font-m: clac(var(--fontSize) * 1);
    --font-l: calc(var(--fontSize) * 1.2);
    --font-xl: calc(var(--fontSize) * 1.44);
    --font-2xl: calc(var(--fontSize) * 1.728);
    --font-3xl: calc(var(--fontSize) * 2.068);
}


/*************************** reset & default ***************************/
@media all {

    /*
    ::selection,
    ::target-text {}
    */
    html,
    body,
    address,
    article,
    aside,
    footer,
    header,
    main,
    nav,
    section,
    details,
    blockquote,
    div,
    figcaption,
    figure,
    hr,
    menu,
    ol,
    p,
    pre,
    ul,
    dl,
    dt,
    dd,
    datalist,
    form,
    fieldset,
    legend,
    label,
    meter,
    optgroup,
    output,
    progress,
    textarea,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        display: block;
        word-break: break-all;
        box-sizing: border-box;
        border: none;
        margin-inline: 0;
        margin-block: 0;
        padding-inline: 0;
        padding-block: 0;
        /*text-autospace: no-autospace;*/
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    dt,
    dd,
    th,
    td,
    img,
    span,
    label,
    a,
    div,
    button{
        text-box-trim: trim-both;
    }


    /*************************** tag base ***************************/
    html{
        scrollbar-width: thin;
        font-size: var(--font-m);
        font-family: "Noto Sans JP", sans-serif;
        line-height: var(--lineHeight);
        overflow-x: hidden;
    }

    body {
        min-inline-size: 300px;
        min-block-size: 100svh;
        margin: 0;
    }

    h1 {
        font-size: var(--font-3xl);
        line-height: calc(var(--font-3xl));
        text-wrap: balance;
        letter-spacing: 1px;
    }

    h2 {
        font-size: var(--font-2xl);
        line-height: calc(var(--font-2xl));
    }

    h3 {
        font-size: var(--font-xl);
        line-height: calc(var(--font-xl));
    }

    img{
        block-size: 100%;

        &.square-image{
            display: block;
            block-size: 150px;
            aspect-ratio: 1;
            background: var(--color-tgray);
            object-fit: scale-down;
            margin-block: var(--gap-100);

        }
    }

    div.image{
        inline-size: 150px;
        aspect-ratio: 1;
        margin-block: var(--gap-100);
        background: var(--color-tgray);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }

    table{
        inline-size: 100%;
        box-sizing: border-box;
        border-collapse: collapse;

        & :where(th, td){
            padding-block: var(--gap-100);
            padding-inline: var(--gap-100);
            border: 1px solid;
            border-color: GrayText;
        }

        & td.no-border{
            border: none;
        }

        & td.white-space{
            white-space: break-spaces;
        }

        & td.right{
            text-align: right;
        }

        & td.three{
            inline-size: 300px;
        }
        & td.two{
            inline-size: 200px;
        }
        & td.one{
            inline-size: 100px;
        }
        & td.half{
            inline-size: 50px;
        }

    }

    *[inert]{
        opacity: .25;
    }

    ul{
        &[class]{
            margin-inline: 0;
            list-style-type: none;
        }

        &:not([class]){
            margin-inline-start: 3ch;
        }
        
        &[id^="err-"]{
            color: var(--color-caution);
        }

        > li{
            margin-block-end: var(--gap-50);
        }

        &:has(> li > input + label){
            margin-inline: 0;

            > li{
                flex: 0 0 auto;
                display: flex;
                align-items: center;
                flex-flow: row nowrap;
                gap: var(--gap-50);
                margin-block-end: var(--gap-100);
                
                > input{
                    flex: 0 0 auto;
                    inline-size: var(--font-l);
                    block-size: var(--font-l);
                    margin: 0;
                    cursor: pointer;

                    + label[for]{
                        cursor: pointer;
                        user-select: none;
                        flex: 0 1 auto;
                    }
                }            
            }
        }

    }
    
    ol:not([class]) {
        counter-reset: number 0;
        list-style-type: none;

        > li{
            &::before{
                counter-increment: number 1;
                content: counter(number) ". ";
            }
        }
    }

    dl{
        > div{
            > *:not(:first-child) {
                margin-block-start: calc(var(--gap-100) * .5);
            }
            > dt{
                font-weight: bold;
            }


            &:not(:first-child){
                margin-block-start: var(--gap-100);
            }
        }

        

    }

    textarea,
    input:not([type="checkbox"]):not([type="radio"]){
        display: block;
        box-sizing: border-box;
        inline-size: 100%;
        font-family: inherit;
        font-size:  inherit;
        padding-block: var(--gap-100);
        padding-inline: var(--gap-100);
        border: 1px solid;
        border-radius: var(--border-radius);

        &[read-only]{
            cursor: auto;
        }

        &:focus{
            outline-width: 2px;
        }
    }

    textarea {
        resize: vertical;
        /*form-sizing: content;*/
    }

    select{
        display: block;
        box-sizing: border-box;
        inline-size: 100%;
        border-radius: var(--border-radius);
        padding-block: var(--gap-100);
        padding-inline: var(--gap-100);
        border: 1px solid;
        font-size: var(--font-m);

        > option{
            font-family: inherit;
            font-size:  inherit;
            color: inherit;
        }                
    }


    /************** base color manegement ********************/
    a {
        color: var(--color-deco);
        font-size: var(--font-m);

        &.button{
            display: block;
            width: fit-content;
            text-align: center;
            padding-block: var(--gap-100);
            padding-inline: var(--gap-100);
            margin-inline-start: auto;
            border: 1px solid var(--color-deco);
        }
    }

    body {
        color: var(--color-text);
        background: var(--color-bg);
    }

    select,
    textarea,
    input {
        border-color: var(--color-text);
        background: transparent;
        color: inherit;

        &::placeholder{
            opacity: 0.5;
        }

        &[type="number"]{
            text-align: right;
        }

        &[read-only]{
            border-color: GrayText;
        }
    }


    button{
        background: var(--color-bg);
        color: var(--color-text);
    }


    .caution{
        color: var(--color-caution);
    }


    /***** form ******************f****************************/
    form > div:has(> button){
        margin-block-start: var(--gap-200);

        > button{
            inline-size: fit-content;
            display: block;
            margin-inline-start: auto;
            padding-block: var(--gap-100);
            padding-inline: var(--gap-100);
            border-radius: var(--border-radius);
            visibility: visible;
            font-size: inherit;
            line-height: inherit;
            cursor: pointer;
            border: 1px solid var(--color-text);
            text-align: center;

            &:focus{
                outline-width: 2px;
            }

            &:disabled{
                visibility: hidden;
            }
        }
    }
    
    :where(legend, label){
        > span[id^="required-"]{
            color: var(--color-caution);
            font-size: var(--font-s);
            margin-inline-start: var(--gap-100);
        }

    }

    fieldset{

        &:has(> fieldset){
            > legend{
                font-weight: bold;
                font-size: var(--font-xl);
                line-height: var(--font-2xl);
                text-wrap: balance;
                letter-spacing: 1px;
            }

            > fieldset:not(:first-child){
                margin-block-start: var(--gap-100);
            }
        }

        &:not(:has(> fieldset)){

            > legend{
                gap: var(--gap-100);
                font-weight: bold;
            }
    
            > div{
                margin-block-start: var(--gap-50);
            }
        }
    }

}

/*********************  layout ******************************/
body{
    &:not([class]){
        > :where(nav, header){
            padding-inline: 5%;
        }
        > article > * {
            padding-inline: 5%;
        }
    
    }

    &.administrator{
        display: grid;
        grid-template-columns: 25% 75%;
        grid-template-rows: min-content 1fr;


        > nav:not(.crumbs){
            grid-row: 1 / 3;
            block-size: 100svh;
            overflow-y: scroll;
            scrollbar-width: thin;
            scrollbar-color: #fff transparent;
            background: var(--color-tgray);
            position: sticky;
            top: 0;
            padding-block: var(--gap-100);
            padding-inline: var(--gap-100);

            > ul {
                block-size: max-content;
            }
        }

        > nav.crumbs{
            grid-column: 2 / 3;
            padding-block: var(--gap-100);
            padding-inline: var(--gap-200);

            > ul{
                display: flex;
                flex-flow: row wrap;
                > li {
                    flex: 0 0 auto;

                    &:not(:first-child)::before{
                        content: " > ";
                        margin-inline: var(--gap-100);
                    }
                }
            }
        }

        > article{
            grid-column: 2 / 3;
            padding-block: var(--gap-100);
            padding-inline: var(--gap-200);
        }
    }

    &.print{
        size: A4 portrait;
        margin: 5mm 5mm;
        display: none;
    }
}

@media print {
    body.print{
        display: block;
    }
}


article{

    > *:not(header){
        margin-block: var(--gap-200);

        & section{
            margin-block: var(--gap-200);

            > *{
                margin-block: var(--gap-100);
            }
        }

        > * {
            margin-block: var(--gap-100);
        }
    }

    > div.flash.message{
        padding-block: var(--gap-100);
        padding-inline: var(--gap-100);
    }

    > header{
        padding-block: var(--gap-200);

        > *:not(:first-child){
            margin-block-start: var(--gap-100);
        }
    }
}



/*********************  components ******************************/
body:not([class]) > nav {
    > ul{
        display: flex;
        flex-flow: row wrap;
        list-style-type: none;
        justify-content: flex end;
        margin-inline: 0;
        gap: var(--gap-200);
        padding-block: var(--gap-100);

        > li:first-child{
            margin-inline-end: auto;
        }
    }
    

}

body > footer {
    padding-block: var(--gap-100);
    text-align: center;
    background: var(--color-deco);
    color: var(--color-text);
}

div.danger{
    padding-inline: var(--gap-100);
    border-block: 1px solid var(--color-caution);
    border-inline: 1px solid var(--color-caution);
    color: var(--color-caution);
    & a{
        color: var(--color-caution);
    }

    & button{
        inline-size: fit-content;
        display: block;
        margin-inline-start: auto;
        padding-block: var(--gap-100);
        padding-inline: var(--gap-100);
        visibility: visible;
        font-size: inherit;
        line-height: inherit;
        cursor: pointer;
        border: none;
        text-align: center;
        border: 1px solid var(--color-caution);
        color: var(--color-caution);

        &:focus{
            outline-width: 2px;
        }

        &:disabled{
            visibility: hidden;
        }
    }
}

.flex-row{
    display: flex;
    flex-flow: row wrap;
    gap: var(--gap-100);
    > *{
        flex: 0 0 auto;
    }
}



div.flash.message{
    color: #fff;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-inline: var(--gap-100);
    margin-block: var(--gap-100);    
    padding-inline: var(--gap-100);
    padding-block: var(--gap-100);    
    inline-size: 30%;
    animation: snackbar 0s linear 5s forwards;

    &.success{
        background: var(--color-safe);
    }

    &.error{
        background: var(--color-caution);
    }

    &.hidden{
        display: none;
    }

}

@keyframes snackbar {
    to {
        display: none;
    }
}

ul#dandd{
    margin-inline: 0;

    > li {
        border-block: 1px solid var(--color-text);
        border-inline: 1px solid var(--color-text);
        border-radius: var(--border-radius);
        padding-block: var(--gap-100);
        padding-inline: var(--gap-100);

        &.overlap{
            opacity: .25;
        }

        &:not(:first-child){
            margin-block: var(--gap-100);
        }

        > label{
            display: flex;
            gap: var(--gap-100);
        }

        > div.sell-order{            
            > div:last-child{
                margin-block-start: var(--gap-100);
            }
        }
        > span.acc{
            margin-inline-start: auto;
            padding-inline: var(--gap-100);
            cursor: grab;
            align-self: center;
        }
    }
}

.item-info{
    display: block flex;
    flex-flow: row wrap;
    gap: var(--gap-100);
    > span{
        min-width: 4em;
        text-align: center;
        font-size: var(--font-s);
        padding-block: calc(var(--gap-100) * .5);
        padding-inline: calc(var(--gap-100) * .5);
        &.item-info-enable{
            background: var(--color-safe);
            color: var(--color-bg);
        }
        &.item-info-disable{
            background: var(--color-caution);
            color: var(--color-bg);
        }
        &.item-info-available{
            background: var(--color-tgray);
            color: var(--color-bg);
        }
        &.item-info-unavailable{
            background: var(--color-text);
            color: var(--color-bg);
        }

    }
}


nav.pagination{
    > ul{
        display: flex block;
        flex-flow: row wrap;
        gap: var(--gap-100);
        list-style-type: none;

        > li{
            &:not(:has(> a)){
                padding-inline: var(--gap-50);
                padding-block: var(--gap-50);
            }
            > a{
                display: block;
                padding-inline: var(--gap-50);
                padding-block: var(--gap-50);
            }
        }
    }

}