﻿
.page-form-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--page-wrap-border);
    border-radius: var(--page-wrap-radius);
    overflow: hidden;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/* 폼 제목바 스타일 */
.form-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dbe3ef;
    padding: 0.45rem 0.6rem;
    background: var(--bg-main);
}
/* 폼 제목바 버튼 그룹 스타일 */
.form-btns {
    display: flex;
    gap: 0.3rem;
}

    .form-btns.flex-end {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
/* 폼 타이틀 스타일 */
.form-title {
    font-weight: 800;
    font-size: 1.1rem;
    color: #1e3a8a;
    margin-left: 0.5rem;
}

.form-grid {
    display: grid;
    align-items: center;
    gap: 0.3rem 0.4rem;
    padding: 0.5rem;
    margin-bottom: 0;
}
    .form-grid.col4 {
        grid-template-columns: max-content 1fr max-content 1fr;
    }
    .form-grid.col6 {
        grid-template-columns: max-content 1fr max-content 1fr max-content 1fr;
    }
    .form-grid.col8 {
        grid-template-columns: max-content 1fr max-content 1fr max-content 1fr max-content 1fr;
    }
    .form-grid.col10 {
        grid-template-columns: max-content 1fr max-content 1fr max-content 1fr max-content 1fr max-content 1fr;
    }

.form-section {
    display: flex;
    flex-direction: column;
}

.form-grid > * {
    min-width: 0;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
    width: 100%;
    box-sizing: border-box;
}

.form-grid .list-table,
.form-grid .list-table-scroll {
    width: 100%;
}

/* 폼 그리드 스타일 */
.form-grid label:not([class^="mud-"]), .form-text-line .text-label {
    font-weight: 600;
    color: rgb(100 116 139);
    align-self: start;
    text-align: right;
    padding-top: 0.45rem;
}

.form-grid .text-label {
    padding-top: 0.2rem;
}

.form-grid .col-2-5 {
    grid-column: 2 / 5;
}

.form-grid .col-2-3 {
    grid-column: 2 / 3;
}

.form-grid .cols3 {
    grid-column: auto / span 3;
}

.form-grid .cols4 {
    grid-column: auto / span 4;
}

.form-grid .cols6 {
    grid-column: auto / span 6;
}

.form-grid .cols8 {
    grid-column: auto / span 8;
}
/*============= mudblazor 스타일 ==================*/
.form-grid .mud-input > input.mud-input-root-outlined, .form-grid div.mud-input-slot.mud-input-root-outlined,
td .mud-input > input.mud-input-root-outlined, td div.mud-input-slot.mud-input-root-outlined {
    padding: 0.4rem 0.5rem;
}
/*달력*/
.form-grid .mud-icon-button,
td .mud-icon-button {
    padding: 0.3rem;
}

.form-grid .mud-icon-button-edge-end,
td .mud-icon-button-edge-end {
    margin-right: 0;
}

.form-grid .mud-input-adornment-end,
td .mud-input-adornment-end {
    margin-left: 0;
    margin-inline-start: 0;
}
/*select*/
.form-grid .mud-input > input.mud-input-root-outlined.mud-input-root-adorned-end,
.form-grid div.mud-input-slot.mud-input-root-outlined.mud-input-root-adorned-end,
td .mud-input > input.mud-input-root-outlined.mud-input-root-adorned-end,
td div.mud-input-slot.mud-input-root-outlined.mud-input-root-adorned-end {
    padding-inline-start: 0.5rem;
}

.form-grid .mud-input.mud-input-outlined.mud-input-adorned-end,
td .mud-input.mud-input-outlined.mud-input-adorned-end {
    padding-right: 0.2rem;
    padding-inline-end: 0.2rem;
}
/*textarea*/
.form-grid .mud-input > textarea.mud-input-root-outlined,
td .mud-input > textarea.mud-input-root-outlined {
    margin-top: 0;
    padding: 0.5rem;
}
