@charset "utf-8";

:root {
}


/* モバイル */
@media screen and (max-width: 1024px) {
	:root {
		--Modal_Wrap_width: 90vw;
		--Modal_Wrap_height: 80vh;
	}
}

/* PC */
@media screen and (min-width: 1025px) {
	:root {
		--Modal_Wrap_width: 60vw;
		--Modal_Wrap_height: 80vh;
	}
}




section#Admin {
	& div#app {
		& div.Modal {
			position: fixed;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            background: var(--Color_1D080);
            z-index: 2000;
            animation: fadeIn 0.2s ease-out;
			& div.Wrap {
				position: relative;
				display: flex;
                flex-direction: column;
                width: var(--Modal_Wrap_width);
                max-height: var(--Modal_Wrap_height);
                min-height: var(--Modal_Wrap_height);
				background: var(--Color_FF100);
                border-radius: var(--Border-radius_S);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
				& div.title {
					flex-shrink: 0;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: calc(.5 * var(--BaseSize)) calc(.5 * var(--BaseSize));
                    background: var(--Theme-100);
					& strong {
						font-size: calc( 1.2 * var(--BaseSize) );
						color: var(--Color_FF100);
						font-weight: 600;
					}
				}
				& div.header {
					flex-shrink: 0;
					display: flex;
					flex-direction: column;
					gap: calc( .5 * var(--BaseSize) );
					padding: calc( 1 * var(--BaseSize) );
					background: var(--Theme-010);
					& strong {
						font-size: calc( 1.2 * var(--BaseSize) );
						font-weight: 600;
					}
				}
				& div.Body {
					flex: 1;
					display: flex;
					flex-direction: column;
					padding: calc(1 * var(--BaseSize));
					min-height: 0;
					background: var(--Color_FF100);
                    padding: calc(1 * var(--BaseSize)) calc(1 * var(--BaseSize));
                    background: var(--Color_FF100);
					& div.Line1 {
						display: flex;
						flex-direction: column;
					}
					& div.Line2 {
						display: flex;
						flex-direction: row;
						gap: calc( .5 * var(--BaseSize) );
					}
					& div.Col-3 {
						flex-basis: calc( calc( 100% - calc( 2 * calc( .5 * var(--BaseSize) ) ) ) / 3 );
					}
					& div.Col-4 {
						flex-basis: calc( calc( 100% - calc( 3 * calc( .5 * var(--BaseSize) ) ) ) / 4 );
					}
					& div.Col-5 {
						flex-basis: calc( calc( 100% - calc( 4 * calc( .5 * var(--BaseSize) ) ) ) / 5 );
					}
					& div.TableWrap {
						flex: 1;
						width: 100%;
						min-height: 0;
						overflow-y: auto;
						& table {
							& thead {
								& tr {
									& th {
										padding: calc(.5 * var(--BaseSize));
										font-size: calc( .8 * var(--BaseSize) );
										background: var(--Theme-010);
									}
								}
							}
							& tbody {
								& tr {
									& td {
										& input,
										& select {
											height: calc( 2 * var(--BaseSize) );
										}
									}
									& td:nth-of-type(1) {
										border-left: 1px var(--Color_FF000) solid;
									}
								}
							}
						}
						& div.form-group {
							display: flex;
							padding: 0 0 calc( .5 * var(--BaseSize) ) 0;
							& label {
								flex-basis: calc( 10 * var(--BaseSize) );
								padding: calc( .5 * var(--BaseSize) ) 0;
							}
							& div.FormWrap {
								flex: 1;
								display: flex;
								flex-direction: column;
								width: 100%;
								& div.Form {
									display: flex;
									& div.ButtonArea {
										display: flex;
										justify-content: flex-start;
										gap: calc( .25 * var(--BaseSize) );
										padding: calc(.25 * var(--BaseSize));
										width: calc( 2.5 * var(--BaseSize));
									}
								}
							}
							& div.None {

							}
						}
					}
				}
				& div.Actions {
					position: sticky;
                    bottom: 0;
                    display: flex;
                    justify-content: space-between;
                    gap: calc(.5 * var(--BaseSize));
                    padding: calc(.5 * var(--BaseSize)) calc(.5 * var(--BaseSize));
                    background: var(--Theme-100);
					& div {
						display: flex;
						gap: calc( .5 * var(--BaseSize) );
					}
				}
			}
		}
	}
}




@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes slideInRight {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}
@keyframes slideOutRight { 
	from { transform: translateX(0); } 
	to { transform: translateX(100%); } 
}

.panel-enter-active .side-panel {
    animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.panel-leave-active .side-panel {
    animation: slideOutRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.panel-enter-active, .panel-leave-active {
    transition: opacity 0.3s ease;
}
.panel-enter-from, .panel-leave-to {
    opacity: 0;
}