/* 에스제이코퍼레이션 전용 테마
 *
 * 색은 본사 로고(sjcorps.com)에서 뽑았다.
 *   #00489C  딥 블루   — 'SJ Corp.' 글자. 주색
 *   #B4CC30  라임      — 순환 심볼 왼쪽. 강조·성공
 *   #009054  틸 그린   — 심볼 그라데이션 중간
 *   #0A6364  딥 틸     — 홈페이지 포인트
 *
 * 헤더는 딥 블루 단색을 기본으로 하고, 오른쪽 끝에만 틸을 아주 옅게 섞었다.
 * 폭 전체에 걸친 무지개 그라데이션은 매일 보는 화면에서 산만하다.
 * 브랜드 색은 하단 라임 라인과 포인트 요소로 드러낸다.
 *
 * ⚠ 기존 sb-admin-2.css 를 덮어쓰는 방식이다. 원본은 건드리지 않으므로
 *   이 파일 하나만 빼면 원래 모습으로 돌아간다.
 */

:root {
    --sj-blue: #00489C;
    --sj-blue-dark: #00356F;
    --sj-blue-light: #1565C0;
    --sj-lime: #B4CC30;
    --sj-lime-dark: #8FA320;
    --sj-teal: #009054;
    --sj-teal-deep: #0A6364;

    --sj-ink: #1B2430;
    --sj-muted: #6B7785;
    --sj-line: #DFE4EA;
    --sj-bg: #F4F6F8;
    --sj-surface: #FFFFFF;
}

/* ---------------------------------------------------------------- 바탕 */

html {
    /* index.html 이 인라인으로 회색(#8a8a8a)을 박아둬서 중요도를 올린다 */
    background: var(--sj-bg) !important;
}

body {
    color: var(--sj-ink);
}

/* ---------------------------------------------------------------- 헤더 */

/* 딥 블루 단색 + 오른쪽 끝에만 틸 기미. 거의 단색으로 보인다 */
#header_bg,
.header-menu .title {
    background: linear-gradient(90deg,
                var(--sj-blue) 0%,
                var(--sj-blue) 62%,
                #005E8C 100%) !important;
    border-bottom: 3px solid var(--sj-lime);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

/* 헤더 안 글자·아이콘을 전부 흰색으로. 원본은 진회색(#343a40)이라 안 보인다 */
#header_bg #e-name,
#header_bg .text-muted,
#header_bg #currentDateTime,
#header_bg button,
#header_bg .div_center,
#header_bg .header-item,
#header_bg i {
    color: #FFFFFF !important;
}

#header_bg .text-muted {
    opacity: .75;
}

#header_bg #divider1,
#header_bg #divider2 {
    color: rgba(255, 255, 255, .35) !important;
}

#header_bg button:hover,
#header_bg .div_center:hover {
    color: var(--sj-lime) !important;
}

/* 로고 칩.
 *
 * 본사 로고는 짙은 파랑(#00489C) 글자라 파란 헤더 위에서는 거의 안 보인다.
 * 흰 칩을 깔아 브랜드 색을 그대로 살린다. 로고를 흰색으로 반전시키는 방법도
 * 있지만, 순환 심볼의 파랑→초록 그라데이션이 사라져 아깝다.
 */
.sj-logo-chip {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-radius: 7px;
    padding: 4px 10px;
    height: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
    transition: box-shadow .15s, transform .15s;
}

.sj-logo-chip:hover {
    box-shadow: 0 2px 7px rgba(0, 0, 0, .22);
    transform: translateY(-1px);
}

.sj-logo-chip img {
    height: 22px;
    width: auto;
    display: block;
}

/* 로고 자리 버튼 — 등록 로고도 기본 로고도 못 쓸 때의 대체 */
#e-name-logo-btn.btn-danger {
    background: var(--sj-lime) !important;
    border-color: var(--sj-lime) !important;
    color: var(--sj-blue-dark) !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
}

/* ---------------------------------------------------------------- 서브메뉴 */

/* 높이·간격은 아래 '메뉴바' 절에서 한 번에 다룬다 (규칙이 갈리면 헷갈린다) */
.header-submenu {
    background: var(--sj-surface);
}

.header-submenu .button-text,
.header-submenu .dropdown-toggle {
    color: var(--sj-ink);
    font-weight: 600;
}

.header-submenu .button-text:hover {
    color: var(--sj-blue);
}

.dropdown-menu {
    border: 1px solid var(--sj-line);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(27, 36, 48, .10);
    padding: 6px;
}

.dropdown-item {
    border-radius: 5px;
    padding: 7px 12px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(0, 72, 156, .07);
    color: var(--sj-blue);
}

/* ---------------------------------------------------------------- 탭 */

/* (상세 규칙은 아래 '탭' 절에 모았다 — 명시도를 올려야 원본 인라인 style 을
 *  이긴다. 여기서는 잔여 표시만 정리한다) */
#tab_header-list .nav-linkc.active::after {
    color: var(--sj-lime);
}

/* ---------------------------------------------------------------- 버튼 */

.btn-primary {
    background-color: var(--sj-blue);
    border-color: var(--sj-blue);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--sj-blue-dark);
    border-color: var(--sj-blue-dark);
    box-shadow: 0 0 0 .2rem rgba(0, 72, 156, .25);
}

.btn-outline-primary {
    color: var(--sj-blue);
    border-color: var(--sj-blue);
}

.btn-outline-primary:hover {
    background-color: var(--sj-blue);
    border-color: var(--sj-blue);
}

.btn-success {
    background-color: var(--sj-teal);
    border-color: var(--sj-teal);
}

.btn-success:hover {
    background-color: #00733F;
    border-color: #00733F;
}

.btn-info {
    background-color: var(--sj-teal-deep);
    border-color: var(--sj-teal-deep);
}

/* ---------------------------------------------------------------- 폼 */

.form-control:focus,
.custom-select:focus {
    border-color: var(--sj-blue-light);
    box-shadow: 0 0 0 .2rem rgba(0, 72, 156, .15);
}

a {
    color: var(--sj-blue);
}

a:hover {
    color: var(--sj-blue-dark);
}

/* ---------------------------------------------------------------- 표 */

.table thead th {
    background: #EEF2F6;
    color: var(--sj-ink);
    border-bottom: 2px solid var(--sj-blue);
    font-weight: 700;
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 72, 156, .04);
}

/* 선택된 행 — 라임으로 표시하면 파란 헤더와 겹치지 않는다 */
.table tbody tr.selected,
.table tbody tr.table-active {
    background-color: rgba(180, 204, 48, .18) !important;
    box-shadow: inset 3px 0 0 var(--sj-lime);
}

/* ---------------------------------------------------------------- 배지·기타 */

.badge-primary {
    background-color: var(--sj-blue);
}

.badge-success {
    background-color: var(--sj-teal);
}

.text-primary {
    color: var(--sj-blue) !important;
}

.bg-primary {
    background-color: var(--sj-blue) !important;
}

.border-primary {
    border-color: var(--sj-blue) !important;
}

/* ---------------------------------------------------------------- 스크롤 */

/* 규칙 두 가지
 *   1. 바깥(문서)은 스크롤하지 않는다. 내용 영역 안에서만 스크롤한다.
 *   2. 스크롤바는 스크롤할 때만 보인다.
 *
 * 2번은 CSS 만으로 안 된다. ':hover' 는 마우스를 올린 것일 뿐 스크롤 중인지
 * 모른다. sj-scroll.js 가 scroll 이벤트를 받아 .sj-scrolling 을 붙였다 뗀다.
 */

/* --- 1. 바깥 껍데기만 스크롤 금지 --- */

/* ⚠ html, body 에 전역으로 overflow:hidden 을 걸면 안 된다.
 *   이 CSS 는 header.html 을 통해 **iframe 안 화면에도** 적용된다.
 *   전역으로 막으면 품목관리·공정관리 같은 화면의 표가 잘려서 못 본다.
 *
 * 스크롤 계층은 이렇게 나뉜다.
 *   껍데기(index.html)  스크롤 안 함  ← .wrapper 가 이미 overflow-y:hidden
 *   탭 내용 영역          스크롤 안 함  ← 안의 iframe 이 대신 맡는다
 *   iframe 안 화면        스크롤 함     ← 이것이 '내부 스크롤' 이다
 *
 * 껍데기 body 에만 .mes-shell 클래스를 달아 구분한다.
 * (:has() 로 구조를 보는 방법도 있지만, 표식을 다는 쪽이 의도가 분명하다)
 */
body.mes-shell,
html:has(> body.mes-shell) {
    overflow: hidden;
    height: 100%;
}

/* 탭 내용 영역은 스크롤하지 않는다. 안의 iframe 이 자기 내용을 스크롤한다 */
#tab_content-list,
#tab_content-list .tab-pane,
#tab_content-list [id^="container-"] {
    overflow: hidden;
}

/* --- 2. 스크롤바 자동 숨김 --- */

* {
    /* 파이어폭스 */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

*.sj-scrolling {
    scrollbar-color: #B9C4D0 transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* 평소에는 보이지 않는다 */
::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: content-box;
}

/* 스크롤 중이거나 마우스를 올렸을 때만 */
.sj-scrolling::-webkit-scrollbar-thumb {
    background: #B9C4D0;
    background-clip: content-box;
}

.sj-scrolling::-webkit-scrollbar-thumb:hover {
    background: var(--sj-blue-light);
    background-clip: content-box;
}


/* ================================================================
 * 아래는 '색만 바뀐 느낌' 을 없애기 위한 모양 변경.
 * 색 교체만으로는 원래 MES 와 구분되지 않는다는 지적을 반영했다.
 * ================================================================ */

/* ---------------------------------------------------------------- 메뉴바 */

/* 원래는 버튼이 네모나게 붙어 있어 툴바처럼 보인다.
 * 간격을 주고 아래쪽 밑줄로 현재 위치를 표시하는 방식으로 바꾼다.
 *
 * ⚠ style.css 가 .header-submenu 높이를 26px !important 로 고정한다.
 *   버튼 패딩을 키우면 그 높이를 넘쳐 아래 탭 영역을 밀어낸다.
 *   높이를 34px 로 조금만 올리고 패딩은 그 안에 들어가게 맞춘다. */
.header-submenu {
    height: 34px !important;
    padding: 0 10px;
    box-shadow: inset 0 -1px 0 var(--sj-line);
    display: flex;
    align-items: stretch;
}

.header-submenu .dropdown-div {
    margin: 0 2px;
    display: flex;
    align-items: stretch;
}

.header-submenu .atm-dropdown-toggle {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 13px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 13px;
    letter-spacing: -.01em;
    position: relative;
    white-space: nowrap;
    transition: color .12s;
}

.header-submenu .atm-dropdown-toggle::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 0;
    height: 2.5px;
    background: var(--sj-blue);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transition: transform .15s ease;
}

.header-submenu .dropdown-div:hover .atm-dropdown-toggle::after,
.header-submenu .show .atm-dropdown-toggle::after {
    transform: scaleX(1);
}

.header-submenu .atm-dropdown-toggle:hover {
    color: var(--sj-blue) !important;
    background: transparent !important;
}

/* 아이콘은 글자보다 약하게. 원래는 같은 굵기라 시끄럽다 */
.header-submenu .atm-dropdown-toggle i {
    opacity: .55;
    font-size: .92em;
    margin-right: 6px !important;
}

.header-submenu .dropdown-div:hover .atm-dropdown-toggle i {
    opacity: 1;
    color: var(--sj-blue);
}

/* ---------------------------------------------------------------- 탭 */

/* 탭 줄 높이를 한 값으로 묶는다.
 *
 * 원래 마크업은 여백이 제각각이다.
 *   - 탭 바로 위에 <div class="row m-2"></div> 빈 칸이 있다 (위아래 8px 씩)
 *   - 탭 줄에 h-100 이 걸려 있어 남는 높이를 다 먹는다
 *   - '탭 정리' 버튼만 인라인 height:37px 이라 탭(28px)과 안 맞는다
 * 그래서 탭 버튼이 줄 안에서 붕 뜨고, 아래 내용과도 멀어진다.
 *
 * --tabbar-h 하나로 줄 높이를 정하고 버튼·탭을 그 안에 맞춘다.
 */
:root {
    --tabbar-h: 34px;
    --tab-h: 26px;
}

/* 탭 위 빈 스페이서 — 순수 여백이라 없앤다 */
#content > .row.m-2 {
    margin: 0 !important;
    height: 0;
}

/* 탭 줄. h-100 이 남는 높이를 다 먹던 것을 고정값으로 바꾼다 */
#content > .row.h-100 {
    height: var(--tabbar-h) !important;
    align-items: center;
}

#tab_header-list {
    border-bottom: none !important;
    /* 양끝 여백. 첫·마지막 탭이 컨테이너 모서리에 딱 붙어 잘려 보이지 않게 */
    padding: 0 4px;
    gap: 3px;
    height: var(--tabbar-h);
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;

    /* 탭 줄의 가로 스크롤바는 항상 숨긴다.
     * 34px 안에 스크롤바가 끼면 탭이 눌려 보인다. 대신 아래 그라데이션과
     * sj-tabs.js 의 자동 스크롤로 '더 있다' 를 알린다. */
    scrollbar-width: none;
}

#tab_header-list::-webkit-scrollbar {
    height: 0;
    display: none;
}

/* ⚠ 탭이 줄어들지 않게 한다.
 *
 * 탭 줄은 flex 컨테이너고 <li class="nav-item"> 이 flex 항목이다. flex 항목은
 * 기본이 flex-shrink:1 이라 자리가 모자라면 **스스로 줄어든다.** 그래서
 *   - 탭 글자가 잘리고
 *   - 넘치질 않으니 overflow-x:auto 가 있어도 스크롤할 것이 없었다
 * 두 증상이 한 원인에서 나왔다. */
#tab_header-list > .nav-item {
    flex: 0 0 auto;
}

/* 양끝 그라데이션은 뺐다.
 *
 * '더 있다' 를 알리려고 sticky + 음수 마진으로 덮개를 뒀는데, 그 덮개가
 * 첫·마지막 탭 글자를 22px 씩 가렸다. 단서를 주려다 정작 내용을 못 읽게
 * 만든 셈이다.
 *
 * (글자가 잘리는 데에는 원인이 하나 더 있었다 — nav-item 이 flex 로 줄어드는
 *  문제. 위 'flex: 0 0 auto' 참고. 둘 다 고쳐야 했다.)
 *
 * 단서는 두 가지로 충분하다.
 *   - 가장자리에 탭이 반쯤 걸쳐 보이는 것 자체가 '더 있다' 는 신호다
 *   - 활성 탭은 sj-tabs.js 가 알아서 보이는 곳으로 끌어온다
 * sj-tabs.js 는 .has-left / .has-right 를 계속 붙이지만 지금은 쓰지 않는다.
 * 나중에 화살표 버튼 같은 것을 붙일 때 그대로 쓸 수 있다.
 */
#content > .row.h-100 {
    position: relative;
}

/* 원래 탭은 '브라우저 탭' 모양이라 위·좌·우에만 테두리를 두르고
 * **border-bottom 을 일부러 비워** 아래 내용과 이어 붙인다.
 *
 *   .nav-linkc { border-top/right/left: 1px solid lightgrey !important; }
 *
 * 이 규칙이 header-menu.html **본문의 인라인 <style>** 에 있다. <head> 에서
 * 불러오는 이 파일보다 나중에 오므로, 같은 !important·같은 명시도면 저쪽이
 * 이긴다. 그 결과 아래만 뚫린 탭이 되어 iframe 이 그 자리를 덮는 것처럼 보였다.
 *
 * → #tab_header-list 를 앞에 붙여 명시도를 올린다(ID > class). 이러면 순서와
 *   무관하게 이긴다. 알약 모양이라 네 변이 모두 있어야 한다. */
#tab_header-list .nav-linkc {
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    height: var(--tab-h);
    line-height: calc(var(--tab-h) - 2px);
    padding: 0 10px !important;
    font-size: 12.5px;
    white-space: nowrap;
    margin: 0 !important;
    transition: background .12s, color .12s;
}

#tab_header-list .nav-linkc:hover {
    background: rgba(0, 72, 156, .06) !important;
    border-color: rgba(0, 72, 156, .18) !important;
    font-weight: normal;
    color: var(--sj-blue);
}

#tab_header-list .nav-linkc.active {
    background: var(--sj-blue) !important;
    border-color: var(--sj-blue) !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(0, 72, 156, .25);
}

/* '탭 정리' 는 인라인 height:37px 이라 !important 로 눌러야 한다 */
#content .btn-outline-dark {
    height: var(--tab-h) !important;
    min-height: var(--tab-h) !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid var(--sj-line) !important;
    border-radius: 6px !important;
    color: var(--sj-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

#content .btn-outline-dark:hover {
    background: #fff !important;
    color: var(--sj-blue) !important;
    border-color: var(--sj-blue) !important;
}

#content .btn-outline-dark i {
    font-size: .95em !important;
    margin-right: 4px !important;
}

/* ---------------------------------------------------------------- 콘텐츠 */

/* 탭 줄과 내용 사이를 4px 로 좁힌다. 원래는 탭 줄이 남는 높이를 먹어
 * 사이가 크게 벌어져 있었다. */
#tab_content-list {
    background: transparent !important;
    padding: 4px 4px 4px;
}

#tab_content-list .tab-pane {
    background: #fff;
    border: 1px solid var(--sj-line);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

/* iframe 이 class="w-100 h-100" 이라 부모 높이를 그대로 따른다.
 * tab-pane → container → iframe 으로 높이가 끊기지 않게 이어준다. */
#tab_content-list .tab-pane > div,
#tab_content-list [id^="container-"] {
    height: 100%;
}

#tab_content-list iframe {
    display: block;
    border: none;
}

/* ---------------------------------------------------------------- 헤더 밀도 */

/* 회사명을 조금 키우고 자간을 좁혀 로고처럼 보이게 */
#header_bg #e-name {
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
}

/* 헤더 아이콘이 원래 fa-2xl 이라 과하게 크다 */
#header_bg .fa-2xl {
    font-size: 1.32em !important;
}