@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url("./tokens.css");

body, button, input{
    font-family: "Neue Haas Grotesk Text Pro", "Aptos", "Helvetica Neue", "Helvetica", 
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Noto Sans JP", "游ゴシック",sans-serif;
}

.info_table{
    border-collapse: collapse;
    border-width: 2px;
    border-radius: 8px;
    border-color: var(--table_border);
    border-style: solid;
}
.info_table > tbody > tr > td,
.info_table > tbody > tr > th{
    padding: 4px;
}
.info_table > tbody > tr:first-child >th{
    border-bottom: 2px solid var(--table_border);
}
.info_table > tbody > tr:not(:last-child) >td{
    border-bottom: 1px solid var(--table_border);
}
.info_table > tbody > tr >th:not(:last-child),
.info_table > tbody > tr >td:not(:last-child){
    border-right: 1px solid var(--table_border);
}
.info_table > tbody > tr:nth-child(1) >th:first-child{
    padding-left: 6px;
}
.info_table > tbody > tr:nth-child(1) >th:last-child{
    padding-right: 6px;
}
.info_table_date > tbody > tr > td{
    text-align: right;
}
.info_table_basic > tbody > tr > td{
    text-align: center;
}
.info_table_page > tbody > tr > td{
    text-align: right;
}
.print_price > div > table{
    border-collapse: collapse;
    border-radius: 8px;
}
.print_price > div > table > tbody > tr:first-child > th{
    border-bottom: 2px solid var(--table_border);
    padding-top: 4px;
    padding-bottom: 4px;
}
.print_price > div > table > tbody > tr:not(:last-child) > td{
    border-bottom: 1px solid var(--table_border);
}
.print_price > div > table > tbody > tr >td,
.print_price > div > table > tbody > tr >th{
    padding-left: 4px;
    padding-right: 4px;
}
.print_price > div > table > tbody > tr > td{
    text-align: right;
}
.mono_font{
    font-family: 'Red Hat Mono',"Neue Haas Grotesk Text Pro", "Aptos", "Helvetica Neue", "Helvetica", 
    "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Noto Sans JP", "游ゴシック", monospace;
}
.print_price > div > table > tbody > tr > .no_data{
    text-align: center;
}

@media screen {
    :root{
        --table_border: var(--md-sys-color-on-surface-light);
        --title-background: rgba(250, 252, 255, 0.8)
    }
    body{
        color: var(--md-sys-color-on-surface-light);
        background-color: var(--md-sys-color-background-light);
        margin-top: calc(env(titlebar-area-height, 1rem) + 12px);
    }
    .dialog_main{
        padding: 0;
        max-width: 640px;
        max-height: calc(100% - 24px);
        width: calc(100% - 24px);
        overflow: hidden;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        border: none;
        border-radius: 32px;
        margin-bottom: 12px;
        transform-origin: bottom;
        color: var(--md-sys-color-on-surface-light);
        background-color: var(--md-sys-color-background-light);
    }
    .dialog_main:modal{
        display: grid;
        animation-name: show_dialog;
        animation-duration: .3s;
    }
    @keyframes show_dialog {
        0%{
            opacity: 0;
            transform:scale(0.9) translate(0, calc(100% + 36px));
        }
    }
    .dialog_main[data-view="closing"]{
        animation-name: close_dialog;
        animation-fill-mode:forwards;
    }
    @keyframes close_dialog {
        100%{
            opacity: 0;
            transform: scale(0.9) translate(0, calc(100% + 36px));
        }
    }
    .dialog_main::backdrop{
        background: linear-gradient(#fafcff, #73f8e7);
        opacity: 0.5;
        animation-name: show_backdrop;
        animation-duration: .3s;
    }
    @keyframes show_backdrop {
        0%{
            opacity: 0;
        }
    }
    .dialog_main[data-view="closing"]::backdrop{
        animation-name: close_backdrop;
    }
    @keyframes close_backdrop {
        100%{
            opacity: 0;
        }
    }
    .form_main{
        margin: 0;
        overflow: hidden;
        display: grid;
        grid-template-rows: 1fr auto;
    }
    .form_body{
        margin-top: 18px;
        margin-left: 12px;
        margin-right: 12px;
        margin-bottom: 12px;
        overflow: auto;
    }
    .form_body >*{
        min-width: 240px;
    }
    .form_main_grid{
        user-select: none;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 6px 6px;
        align-items: center;
    }
    .form_main_grid > hr{
        border: none;
        height: 2px;
        margin: 0 auto;
        background-color: var(--md-sys-color-outline-variant-light);
        width: calc(100% - 12px);
        border-radius: 20px;
        grid-column: 1 / 3;
    }
    .form_button_row{
        margin-top: 12px;
        display: flex;
        margin-left: 12px;
        margin-right: 12px;
        margin-bottom: 12px;
        gap: 6px;
    }
    .form_button_row > button{
        flex: 1;
    }
    .filled_button{
        color: var(--md-sys-color-on-primary-light);
        background: none;
        background-color: var(--md-sys-color-primary-light);
        outline: none;
        border:none;
        font-size: 100%;
        min-height: 40px;
        box-sizing: border-box;
        cursor: pointer;
        user-select: none;
        transition: all 0.2s;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);    
        border-radius: 20px;
        outline-width: 2px;
        outline-style: solid;
        outline-offset: 2px;
        outline-color: transparent;
    }
    .filled_button:hover{
        background-color: var(--md-ref-palette-primary50);
    }
    .filled_button:active{
        background-color: var(--md-ref-palette-primary60);
    }
    .filled_button:focus{
        outline-color: var(--md-sys-color-primary-light);
    }
    .outlined_button{
        color: var(--md-sys-color-primary-light);
        background: none;
        outline: none;
        border:none;
        border-color: var(--md-sys-color-outline-light);
        border-width: 1px;
        border-style: solid;
        font-size: 100%;
        min-height: 40px;
        box-sizing: border-box;
        cursor: pointer;
        user-select: none;
        transition: all 0.2s;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);    
        border-radius: 20px;
        outline-width: 2px;
        outline-style: solid;
        outline-offset: 2px;
        outline-color: transparent;
    }
    .outlined_button:hover{
        color: var(--md-ref-palette-primary50);
        border-color: var(--md-ref-palette-neutral-variant40);
        background-color: var(--md-ref-palette-primary98);
    }
    .outlined_button:active{
        color: var(--md-ref-palette-primary60);
        border-color: var(--md-ref-palette-neutral-variant35);
        background-color: var(--md-ref-palette-primary95);
    }
    .outlined_button:focus{
        outline-color: var(--md-sys-color-primary-light);
    }
    .input_area_full_affix{
        display: flex;
        align-items: center;
        overflow: hidden;
        border-radius: 20px;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
        transition: all 0.2s;
    }
    .input_area_full_affix input{
        flex-grow: 1;
        flex: 1;
        min-width: 48px;
        width: 48px;
        border: none;
        background: none;
        outline: none;
        color: var(--md-sys-color-on-surface-light);
        caret-color: var(--md-sys-color-on-surface-light);
        font-size: 100%;
        box-sizing: border-box;
        transition: all 0.3s;
        border-radius: 20px;
        min-height: 40px;
    }
    .input_area_full_affix:not(:has(input[disabled])){
        outline-width: 1px;
        outline-style: solid;
        outline-offset: -3px;
        outline-color: var(--md-sys-color-outline-light);
    }
    .input_area_full_affix:not(:has(input[disabled])):has(input:focus),
    .input_area_full_affix:not(:has(input[disabled])):has(input:hover),
    .input_area_full_affix:not(:has(input[disabled])):has(input:active){
        outline-width: 3px;
    }
    .input_area_full_affix:not(:has(input[disabled])):has(input:focus){
        outline-color: var(--md-sys-color-primary-light);
    }
    .radio_ap_normal{
        display: flex;
        border-color: var(--md-sys-color-outline-light);
        border-style: solid;
        border-width: 1px;
        border-radius: 20px;
    }
    .radio_ap_normal > div{
        flex: 1;
        display: grid;
        border-radius: 19px;
        transition: all 0.3s;
    }
    .radio_ap_normal > div > label{
        display: grid;
        place-items: center;
        min-height: 38px;
    }
    .radio_ap_normal > div:has(input:checked){
        background-color: var(--md-sys-color-primary-light);
        color: var(--md-sys-color-on-primary-light);
    }
    .radio_ap_normal > div:not(:has(input:checked)):hover{
        background-color: var(--md-ref-palette-primary90);
    }
    .radio_ap_normal > div > input[type="radio"]{
        display: none;
    }
    #float_button{
        display: flex;
        position: fixed;
        bottom: 24px;
        right: 24px;
        gap: 12px;
    }
    #float_button > button{
        min-width: 64px;
    }
    .info_det >:not(:last-child){
        margin-right: 4px;
    }
    .info_det > table{
        display: inline-block;
    }
    .print_price > div{
        display: inline-block;
    }
    .print_price > div > table{
        display: inline-block;
        border: 2px solid var(--table_border);
    }
    .print_price > div > table > tbody > tr >:not(:last-child){
        border-right: 1px solid var(--table_border);
    }
    .print_price > div:not(:last-child){
        margin-right: 4px;
    }
    #rendering_anm{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        place-items: center;
        background-color: var(--md-sys-color-background-light);
        display: grid;
        animation-duration: 1s;
    }
    #rendering_anm[data-view="hide"]{
        display: none;
    }
    #rendering_anm[data-view="show"]{
        animation-name: rendering_show;
    }
    #rendering_anm[data-view="out"]{
        animation-name: rendering_out;
        animation-fill-mode:forwards;
    }
    @keyframes rendering_show {
        0%{
            opacity: 0;
        }
    }
    @keyframes rendering_out {
        100%{
            opacity: 0;
        }
    }
    #rendering_anm > div{
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: center;
    }
    #wait_msessage{
        font-size: x-large;
    }
    .progerss_out{
        height: 6px;
        background-color: var(--md-sys-color-outline-variant-light);
        border-radius: 3px;
        width: min(calc(100vw - 72px), 640px);
        overflow: hidden;
        display: grid;
    }
    .progerss_mid{
        height: 100%;
        width: 100%;
        display: grid;
        place-items: center;
        animation-name: progress_mid_anm;
        animation-duration: calc(calc(pi / 4) * 1s);
        animation-direction:alternate;
        animation-iteration-count:infinite;
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .progerss_mid_2{
        animation-name: progress_mid_anm_2;
        animation-duration: calc(calc(pi / e) * 1s);
    }
    .progerss_mid_3{
        animation-duration: calc(calc(e / pi) * 1s);
        animation-name: progress_mid_anm_3;
    }
    @keyframes progress_mid_anm {
        0%{
            transform: translateX(-25%);
        }
        100%{
            transform: translateX(25%);
        }
    }
    @keyframes progress_mid_anm_2 {
        0%{
            transform: translateX(-50%);
        }
        100%{
            transform: translateX(25%);
        }
    }
    @keyframes progress_mid_anm_3 {
        0%{
            transform: translateX(-25%);
        }
        100%{
            transform: translateX(50%);
        }
    }
    .progerss_in{
        height: 100%;
        width: 50%;
        background-color: var(--md-sys-color-primary-light);
        border-radius: 3px;
        animation-name: progress_in_anm;
        animation-duration: calc(calc(pi * e) * 0.05s);
        animation-direction:alternate;
        animation-iteration-count:infinite;
    }
    .progerss_mid_2 > .progerss_in{
        background-color: var(--md-sys-color-secondary-light);
        animation-duration: calc(calc(e / 6) * 1s);
    }
    .progerss_mid_3 > .progerss_in{
        background-color: var(--md-sys-color-tertiary-light);
        animation-duration: calc(calc(pi / 6) * 1s);
    }
    @keyframes progress_in_anm {
        0%{
            width: 10%;
        }
        100%{
            width: 100%;
            opacity: 0.5;
        }
    }
    #title-bar{
        background-color: var(--title-background);
        backdrop-filter: saturate(180%) blur(20px);
        width: 200px;
        height: 300px;
        position: fixed;
        top: env(titlebar-area-y, 0);
        left: env(titlebar-area-x, 0);
        height: env(titlebar-area-height, auto);
        width: env(titlebar-area-width, 100%);
        -webkit-app-region: drag;
        display: grid;
        place-items: center;
    }
    #title-bar > span{
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration: none;
        overflow: hidden;
        max-width: 100%;
        -webkit-app-region: no-drag;
        color: var(--md-sys-color-primary-light);
        font-weight: bold;
    }
    @media (prefers-color-scheme: dark){
        :root {
            color-scheme: dark;
            --table_border: var(--md-sys-color-on-surface-dark);
            --title-background: rgba(8, 30, 41,0.7);
        }
        body{
            color: var(--md-sys-color-on-surface-dark);
            background-color: var(--md-sys-color-background-dark);
        }
        .dialog_main{
            color: var(--md-sys-color-on-surface-dark);
            background-color: var(--md-ref-palette-neutral20);
        }
        .dialog_main::backdrop{
            background: linear-gradient(#001f2a, #000000);
        }
        .form_main_grid > hr{
            background-color: var(--md-sys-color-outline-variant-dark);
        }
        .filled_button{
            color: var(--md-sys-color-on-primary-dark);
            background-color: var(--md-sys-color-primary-dark);
        }
        .filled_button:hover{
            color: var(--md-ref-palette-primary10);
            background-color: var(--md-ref-palette-primary70);
        }
        .filled_button:active{
            color: var(--md-ref-palette-primary0);
            background-color: var(--md-ref-palette-primary60);
        }
        .filled_button:focus{
            outline-color: var(--md-sys-color-primary-dark);
        }    
        .outlined_button{
            color: var(--md-sys-color-primary-dark);
            border-color: var(--md-sys-color-outline-dark);
        }
        .outlined_button:hover{
            color: var(--md-ref-palette-primary90);
            border-color: var(--md-ref-palette-neutral-variant70);
            background-color: var(--md-ref-palette-primary20);
        }
        .outlined_button:active{
            color: var(--md-ref-palette-primary95);
            border-color: var(--md-ref-palette-neutral-variant80);
            background-color: var(--md-ref-palette-primary25);
        }
        .outlined_button:focus{
            outline-color: var(--md-sys-color-primary-dark);
        }
        .input_area_full_affix input{
            color: var(--md-sys-color-on-surface-dark);
            caret-color: var(--md-sys-color-on-surface-dark);
        }
        .input_area_full_affix:not(:has(input[disabled])){
            outline-color: var(--md-sys-color-outline-dark);
        }
        .input_area_full_affix:not(:has(input[disabled])):has(input:focus){
            outline-color: var(--md-sys-color-primary-dark);
        }
        .radio_ap_normal{
            border-color: var(--md-sys-color-outline-dark);
        }
        .radio_ap_normal > div:has(input:checked){
            background-color: var(--md-sys-color-primary-dark);
            color: var(--md-sys-color-on-primary-dark);
        }
        .radio_ap_normal > div:not(:has(input:checked)):hover{
            background-color: var(--md-ref-palette-primary40);
        }
        #rendering_anm{
            background-color: var(--md-sys-color-background-dark);
        }
        .progerss_out{
            background-color: var(--md-sys-color-outline-variant-dark)
        }
        .progerss_in{
            background-color: var(--md-sys-color-primary-dark);
        }
        .progerss_mid_2 > .progerss_in{
            background-color: var(--md-sys-color-secondary-dark);
        }
        .progerss_mid_3 > .progerss_in{
            background-color: var(--md-sys-color-tertiary-dark);
        }
        #title-bar > span{
            color: var(--md-sys-color-primary-dark);
        }
    }
}

@media print{
    :root{
        --table_border: gray;
    }
    @page {
        size: A4 portrait;
    }
    #setup_form,
    #float_button{
        display: none;
    }
    body{
        width: 190mm;
    }
    article > section{
        width: 190mm;
        height: 277mm;
        overflow: hidden;
        page-break-after: always;
        box-sizing: border-box;
        /* border: 2px solid black; */
        display: grid;
        grid-template-rows: auto auto 1fr;
        gap: 12px;
    }
    article > section:last-child{
        page-break-after: auto;
    }
    article > section > h1{
        margin: 0;
    }
    .info_det{
        display: flex;
        gap: 10px;
    }
    .info_det > table{
        display: block;
    }
    .print_price{
        display: flex;
        justify-content: space-between;
    }
    .print_price > div{
        flex: 1;
    }
    .print_price > div > table{
        height: 100%;
        border-top: 2px solid var(--table_border);
        border-bottom: 2px solid var(--table_border);
    }
    #rendering_anm{
        display: none;
    }
    #title-bar{
        display: none;
    }
 }