/* 업무화면 공통 UI 기준.
   html/01_기준정보/01_거래처코드_v7기준.html (전체 Web MES 공통 UI 기준 화면) 에서 추출했다.
   화면별 필드 좌표·컬럼 폭은 각 페이지의 스코프 CSS 에 둔다.

   모든 선택자를 .screen-page 로 한정한다 — 한정자가 없던 시절
   .crud / .search-input / .search-btn 이 다른 화면으로 새어나가 충돌이 세 번 났다.
   (quality-screen.css 의 .quality-page, equipment-screen.css 의 .equipment-page 와 같은 방식) */

.screen-page {
    /* 목록 우측 여백과 상세 패널 폭. 폭이 다른 화면은 이 두 값만 덮어쓴다. */
    --detail-width: 431px;
    --list-right: 438px;

    position: relative; width: 100%; height: 100%; overflow: hidden;
}

/* ===== 패널 헤더 =====
   수주관리 두 화면은 루트가 .screen-page 가 아니라 .reg-page · .schedule-page 다.
   여기에 함께 걸어 두지 않으면 머리줄이 흰 칸으로 남고, 크기를 지정하지 않은 아이콘 SVG 가
   기본 300×200 으로 부풀어 검은 호처럼 보인다. */
.screen-page .panel-head,
.reg-page .panel-head,
.schedule-page .panel-head {
    height: 42px; background: var(--mes-panel-head); color: #fff;
    display: flex; align-items: center; padding: 0 0 0 5px;
    font-size: 18px; font-weight: 700; overflow: hidden;
}
.screen-page .head-icon,
.reg-page .head-icon,
.schedule-page .head-icon {
    width: 28px; height: 42px; flex: 0 0 28px;
    display: flex; align-items: center; justify-content: center; color: var(--mes-orange);
}
.screen-page .head-icon svg,
.reg-page .head-icon svg,
.schedule-page .head-icon svg { width: 20px; height: 20px; display: block; }

/* ===== 조회조건 ===== */
.screen-page .search-section { position: absolute; left: 0; right: 0; top: 0; height: 106px; background: #fff; overflow: hidden; }
.screen-page .search-fields { position: absolute; left: 0; right: 0; top: 42px; height: 64px; background: #fff; }
.screen-page .search-fields label { position: absolute; top: 17px; color: #000; font-size: 16px; line-height: 31px; white-space: nowrap; }

.screen-page .search-input, .screen-page .search-select {
    position: absolute; top: 16px; height: 31px; padding: 2px 7px;
    border: 1px solid #D4D4D4; background: #fff; outline: none; color: #000; font-size: 17.33px;
}
.screen-page .search-select { font-size: 15px; }
.screen-page .search-input:focus, .screen-page .search-select:focus { outline: 1px solid #86B7FE; outline-offset: -1px; }

.screen-page .search-btn {
    position: absolute; right: 7px; top: 7px; width: 140px; height: 49px; padding: 0;
    border: 0; background: var(--mes-new); color: #fff;
    display: flex; align-items: center; justify-content: center; gap: 13px;
    font-size: 16px; font-weight: 700; cursor: pointer;
}
.screen-page .search-btn svg { width: 24px; height: 24px; }

/* ===== 목록 · 상세 배치 ===== */
.screen-page .work-area { position: absolute; left: 0; right: 0; top: 112px; bottom: 0; overflow: hidden; }
.screen-page .list-head { position: absolute; left: 3px; right: var(--list-right); top: 0; height: 42px; }
.screen-page .table-wrap {
    position: absolute; left: 3px; right: var(--list-right); top: 48px; bottom: 5px;
    overflow: auto; background: #fff; border: 1px solid #8A8A8A;
}
.screen-page .detail-panel {
    position: absolute; width: var(--detail-width); right: 6px; top: 0; bottom: 5px;
    background: #fff; border: 1px solid #8A8A8A; overflow: hidden;
}
.screen-page .detail-panel > .panel-head { position: absolute; left: 0; right: 0; top: 0; height: 42px; }

/* ===== 목록·상세 분할선 (Layout/PaneSplitter) =====
   .work-area.split 에서는 상세 폭을 --right-w(드래그로 정한 값)가 있으면 그 값, 없으면 화면 기본값 --detail-width 로 잡는다.
   목록 오른쪽 여백을 4px 더 두어(7 → 11) 그 5px 틈에 7px 손잡이가 앉는다. split-pane.js 는 --right-w 만 바꾼다. */
.screen-page .work-area.split { --list-right: calc(var(--right-w, var(--detail-width)) + 11px); }
.screen-page .work-area.split .detail-panel { width: var(--right-w, var(--detail-width)); }
.screen-page .splitter {
    position: absolute; top: 0; bottom: 5px; width: 7px; z-index: 5;
    right: calc(var(--right-w, var(--detail-width)) + 5px);
    cursor: col-resize; touch-action: none; background: transparent;
}
.screen-page .splitter::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 2px; right: 2px;
    background: #C3CCD3;
}
.screen-page .splitter:hover::before, .screen-page .splitter.dragging::before { background: var(--mes-orange); }

.screen-page .notice {
    /* 목록 패널 제목 띠(42px) 안, 목록 띠의 오른쪽 끝에 붙인다. 상세 패널 띠가 아니라 목록 띠 기준이며 그리드 헤더를 가리지 않는다. */
    position: absolute; z-index: 20; right: calc(var(--list-right) + 12px); top: 7px; left: auto;
    max-width: calc(100% - var(--list-right) - 180px); height: 28px; line-height: 26px; padding: 0 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border: 1px solid #bbb; border-left: 4px solid var(--mes-new);
    background: #fff; font-size: 13px;
}

/* ===== 그리드 : ApplyMaterialDesignTheme() ===== */
.screen-page .data-table { border-collapse: collapse; table-layout: fixed; background: #fff; font-size: 14.5px; }
.screen-page .data-table th {
    position: sticky; top: 0; z-index: 2; height: 42px; padding: 0 8px;
    background: var(--mes-grid-head); color: #fff;
    font-size: 14.5px; font-weight: 700; text-align: left; white-space: nowrap; border: 0;
    box-shadow: inset -1px 0 0 #547083, inset 0 -1px 0 #D9E0E4, 0 1px 0 #7C8F99;
}
.screen-page .data-table td {
    height: 29px; padding: 3px 8px; background: #fff; color: #000;
    font-size: 14.5px; white-space: nowrap; overflow: hidden;
    border: 0; border-bottom: 1px solid var(--mes-grid-line);
}
.screen-page .data-table tbody tr { cursor: pointer; }
.screen-page .data-table tbody tr:hover td { background: #E8F4F2; }
.screen-page .data-table tbody tr.selected td,
.screen-page .data-table tbody tr.selected:hover td { background: var(--mes-grid-selected); color: #000; }
.screen-page .data-table .center { text-align: center; }
.screen-page .data-table .empty { padding: 30px; color: #777; text-align: center; cursor: default; }

/* ===== 우측 상세 폼 : 좌표는 42px 헤더 기준 ===== */
.screen-page .detail-form { position: absolute; left: 0; right: 0; top: 42px; bottom: 0; background: #fff; overflow: hidden; }
.screen-page .detail-label {
    position: absolute; left: 0; width: 111px; text-align: right;
    color: #000; font-size: 14.67px; line-height: 27px; white-space: nowrap;
}
.screen-page .detail-input, .screen-page .detail-textarea, .screen-page .detail-select, .screen-page .code-label {
    position: absolute; left: 116px; width: 261px; color: #000; font-size: 14.67px;
}
.screen-page .detail-input, .screen-page .detail-select {
    height: 27px; padding: 1px 5px; background: #fff; outline: none;
    border-style: solid; border-width: 1px;
    border-color: #ECECEC #E6E6E6 #838383 #ECECEC;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96);
}
.screen-page .detail-textarea {
    height: 82px; padding: 5px; resize: none; background: #fff; outline: none;
    border-style: solid; border-width: 1px;
    border-color: #ECECEC #E6E6E6 #838383 #ECECEC;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96);
}
.screen-page .detail-input:focus, .screen-page .detail-textarea:focus, .screen-page .detail-select:focus { outline: 1px solid #86B7FE; outline-offset: -1px; }
.screen-page .code-label {
    height: 27px; display: flex; align-items: center; padding: 0 5px;
    background: #DCDCDC; color: #696969; border: 1px solid #8A8A8A;
}
.screen-page .detail-input.readonly { background: #DCDCDC; color: #696969; border: 1px solid #8A8A8A; box-shadow: none; }

.screen-page .option-row {
    position: absolute; height: 27px; display: flex; align-items: center;
    color: #000; font-size: 14.67px;
}
.screen-page .option-row label { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.screen-page .option-row input { accent-color: #0B78D0; }

.screen-page .validation-summary { position: absolute; left: 116px; right: 20px; color: #BD3737; font-size: 12px; }

/* Designer: 버튼 97x44. 높이는 사용자 요청으로 90%(40px) — 창 높이가 낮을 때 위 항목과 덜 겹친다. */
.screen-page .crud { position: absolute; left: 11px; bottom: 9px; height: 40px; display: flex; gap: 6px; }
.screen-page .crud button {
    width: 97px; height: 40px; padding: 0; border: 0; color: #fff;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 16px; font-weight: 700; cursor: pointer;
}
.screen-page .crud button svg { width: 18px; height: 18px; flex: 0 0 18px; }
.screen-page .crud button:disabled { opacity: .42; cursor: not-allowed; }
.screen-page .btn-new { background: var(--mes-new); }
.screen-page .btn-add { background: var(--mes-add); }
.screen-page .btn-mod { background: var(--mes-edit); }
.screen-page .btn-del { background: var(--mes-delete); }