/* ITMS 공통 화면 스타일 */
/* ITMS 공통 색상 기준
   _ITMSLayout.cshtml의 동일 변수와 함께 사용합니다. */
:root {
    --itms-quickmenu-bg: #d6e4f0;
    --itms-quickmenu-border: #b8cce0;
    --itms-quickmenu-tab-bg: #f8fbfe;
    --itms-quickmenu-hover-bg: #c7dbec;
    --itms-quickmenu-active-bg: #1f4e78;

    --itms-page-bg: #e6ecf2;
    --itms-surface-bg: #f8fafc;
    --itms-surface-header-bg: #dce8f2;
    --itms-surface-footer-bg: #f2f5f7;
    --itms-surface-border: #bccad7;
    --itms-surface-header-text: #1f3f5b;

    --itms-input-bg: #ffffff;
    --itms-input-border: #c5d0da;
    --itms-primary-action: #0d6efd;

    --itms-footer-bg: #f3f4f6;
    --itms-footer-text: #6b7280;
}

body {
    color: #2f3a45;
}

/*
    ITMS 공통 화면 배경
    - 좌측 주메뉴와 같은 청회색 계열을 밝게 사용합니다.
    - 입력창은 흰색으로 유지하여 입력 영역을 명확하게 구분합니다

    전체 페이지 배경색만 변경: _ITMSLayout.cshtml
    카드 제목·카드 테두리·표·입력창 등 세부 색상까지 변경: itms.css도 함께 수정
    itms.css에서 !important로 강제 적용하는 방식은 향후 관리가 어려워 권장하지 않음

    좌측 주메뉴: 기존 #343a40 유지
    본문 전체 배경: 밝은 청회색 #e7ecf1
    카드 본문: 부드러운 회백색 #f8fafc
    카드 제목 영역: 연한 청회색 #edf2f6
    입력창과 목록 표: 흰색 유지
    카드 테두리: 기존보다 분명한 #cbd5df
    화면 하단: 연한 회청색 적용

*/
.itms-content {
    background-color: var(--itms-page-bg, #e7ecf1);
}

    .itms-content .card {
        border-color: var(--itms-surface-border, #cbd5df);
        background-color: var(--itms-surface-bg, #f8fafc);
        box-shadow: 0 .125rem .35rem rgba(33, 43, 54, .07);
    }

    .itms-content .card-header {
        border-bottom: 1px solid var(--itms-surface-border, #bccad7);
        border-left: 4px solid var(--itms-quickmenu-active-bg, #1f4e78);
        background-color: var(--itms-surface-header-bg, #dce8f2);
        color: var(--itms-surface-header-text, #1f3f5b);
        font-weight: 600;
    }

    .itms-content .card-body {
        background-color: var(--itms-surface-bg, #f8fafc);
    }

    .itms-content .card-footer {
        border-top-color: var(--itms-surface-border, #cbd5df);
        background-color: var(--itms-surface-footer-bg, #f2f5f7);
    }

    .itms-content .form-control,
    .itms-content .form-select,
    .itms-content .input-group-text {
        border-color: var(--itms-input-border, #c5d0da);
        background-color: var(--itms-input-bg, #fff);
    }

    .itms-content .form-control:focus,
    .itms-content .form-select:focus {
        border-color: var(--itms-primary-action, #0d6efd);
        box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
    }

    .itms-content .table {
        --bs-table-bg: var(--itms-input-bg, #fff);
    }

    /* 목록 화면의 표 영역만 상·하·좌·우 스크롤 */
    .itms-list-scroll {
    width: 100%;
    /* 목록 행 때문에 전체 페이지가 길어지지 않도록 제한 */
    max-height: calc(100vh - 430px);
    max-height: calc(100dvh - 430px);
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border: 1px solid var(--itms-surface-border, #bccad7);
    background-color: var(--itms-input-bg, #fff);
    }

    /* 열이 많을 때 열 너비가 지나치게 축소되지 않도록 유지 */
    .itms-list-scroll > table {
        min-width: 1250px;
        margin-bottom: 0;
        }
        /* 상하 스크롤 중에도 표 제목행 고정 */
        .itms-list-scroll > table > thead > tr > th {
            position: sticky;
            top: 0;
            z-index: 2;
            background-color: var(--itms-surface-header-bg, #edf2f6);
            box-shadow: inset 0 -1px 0 var(--itms-surface-border, #cbd5df);
        }

    /* 태블릿과 작은 화면에서는 목록 높이를 확보 */
    @media (max-width: 991.98px) {
        .itms-list-scroll {
            max-height: 55vh;
            max-height: 55dvh;
        }
    }

/* 상단 선택 메뉴 탭 */
.itms-topbar-inner {
    min-width: 0;
    flex-wrap: nowrap;
}

.itms-topbar-title,
.itms-topbar-account {
    flex: 0 0 auto;
}

.itms-topbar-title {
    white-space: nowrap;
}

.itms-open-menu-tabs {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    padding: .2rem .4rem;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--itms-quickmenu-border, #b8cce0);
    border-radius: .35rem;
    background-color: var(--itms-quickmenu-bg, #d6e4f0);
    scrollbar-width: thin;
}

    .itms-open-menu-tabs:empty {
        display: none;
    }

.itms-open-menu-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-width: 0;
    max-width: 220px;
    height: 30px;
    border: 1px solid var(--itms-quickmenu-border, #b8cce0);
    border-radius: 999px;
    background-color: var(--itms-quickmenu-tab-bg, #f8fbfe);
    color: #405466;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

    .itms-open-menu-tab:hover {
        border-color: var(--itms-quickmenu-border, #b8cce0);
        background-color: var(--itms-quickmenu-hover-bg, #c7dbec);
    }

    .itms-open-menu-tab.active {
        border-color: var(--itms-quickmenu-active-bg, #1f4e78);
        background-color: var(--itms-quickmenu-active-bg, #1f4e78);
        color: #fff;
        font-weight: 600;
        box-shadow: 0 1px 4px rgba(31, 78, 120, .25);
    }

.itms-open-menu-tab-link {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 100%;
    padding: 0 .25rem 0 .7rem;
    color: inherit;
    text-decoration: none;
}

    .itms-open-menu-tab-link:hover,
    .itms-open-menu-tab-link:focus {
        color: inherit;
        text-decoration: none;
    }

.itms-open-menu-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 600;
}

.itms-open-menu-tab-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    margin-right: 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6c757d;
    font-size: 1rem;
    line-height: 1;
}

    .itms-open-menu-tab-close:hover,
    .itms-open-menu-tab-close:focus {
        background: rgba(108, 117, 125, .14);
        color: #212529;
        outline: none;
    }

.itms-open-menu-tab.active .itms-open-menu-tab-close {
    color: #fff;
}

    .itms-open-menu-tab.active
    .itms-open-menu-tab-close:hover,
    .itms-open-menu-tab.active
    .itms-open-menu-tab-close:focus {
        background-color: rgba(255, 255, 255, .18);
        color: #fff;
    }

@media (max-width: 767.98px) {
    .itms-open-menu-tab {
        max-width: 165px;
    }
}

@media (max-width: 575.98px) {
    .itms-topbar-title {
        display: none;
    }
}

/* 화면 하단 */
.itms-footer {
    border-top-color: var(--itms-surface-border, #bccad7);
    background-color: var(--itms-footer-bg, #f3f4f6);
    color: var(--itms-footer-text, #6b7280);
}