/* 공통 크기와 색상. 업무별 배치는 별도 구성요소 CSS에서 관리한다. */
:root {
  --erp-gap: .75rem;
  --erp-radius: .25rem;
  --erp-control-height: 2.25rem;
  --erp-button-compact-size: 1.75rem;
  --erp-header-height: 3.5rem;
  --erp-surface: #fff;
  --erp-input-bg: #fff;
  --erp-text: #111827;
  --erp-muted: #6b7280;
  --erp-border: #d1d5db;
  --erp-accent: #3c8dbc;
  --erp-primary: #f59e0b;
  --erp-primary-hover: #d97706;
  --erp-danger: #dc2626;
  --erp-danger-hover: #b91c1c;
  --erp-danger-text: #dc2626;
  --erp-danger-border: #fca5a5;
  --erp-danger-soft: #fef2f2;
  --erp-success: #059669;
  --erp-success-hover: #047857;
  --erp-success-text: #047857;
  --erp-success-soft: #ecfdf5;
  --erp-info: #2563eb;
  --erp-info-hover: #1d4ed8;
  --erp-hover: #f9fafb;
}
html.dark {
  --erp-surface: #222c38;
  --erp-input-bg: #1f2937;
  --erp-text: #e7edf4;
  --erp-muted: #acb8c6;
  --erp-border: #4b5563;
  --erp-accent: #435a6e;
  --erp-hover: #374151;
  --erp-danger-text: #f87171;
  --erp-danger-border: #b91c1c;
  --erp-danger-soft: rgb(127 29 29 / .3);
  --erp-success-text: #34d399;
  --erp-success-soft: rgb(6 78 59 / .3);
}
.erp-card, .erp-modal {
  background-color: var(--erp-surface);
  color: var(--erp-text);
}
.erp-card {
  border-top: 3px solid var(--erp-accent);
  border-radius: .3rem;
  box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}
.erp-modal { border-radius: .5rem; box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; }
.erp-card-body { padding: 1rem; }
.erp-modal-body { padding: 1.5rem; }
@media (max-width: 639px) { .erp-modal-body { padding: 1rem; } }
.erp-header { display: grid; grid-template-columns: auto minmax(max-content, 1fr) auto; align-items: center; gap: .75rem; min-height: var(--erp-header-height); padding: .5rem 1rem; font-size: .875rem; overflow-x: auto; }
.erp-breadcrumb { min-width: 0; white-space: nowrap; }
.erp-header.erp-header-with-refresh { grid-template-columns: auto max-content minmax(max-content, 1fr) auto; }
.erp-header-refresh { display: flex; align-items: center; justify-content: center; justify-self: center; gap: .375rem; white-space: nowrap; }
.erp-header-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: .75rem; min-width: max-content; white-space: nowrap; }
.erp-header-tools > * { flex-shrink: 0; }
.erp-header .erp-header-tools select { max-width: 100%; color: #fff; }
.erp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: var(--erp-gap); }
/* 페이지 조작 영역: 권한에 따른 버튼 유무와 관계없이 한 행은 36px. */
.erp-page-toolbar { align-items: center; min-height: var(--erp-control-height); margin-bottom: var(--erp-gap); padding-top: 0; padding-bottom: 0; }
.erp-list-filters { align-items: center; }
.erp-role-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .75rem; border-bottom: 1px solid #e5e7eb; }
.erp-role-tabs a, .erp-role-tabs button { padding: .5rem .75rem; border-bottom: 2px solid transparent; color: #6b7280; font-size: .875rem; white-space: nowrap; background: none; }
.erp-role-tabs a:hover, .erp-role-tabs button:hover { color: #1f2937; }
.erp-role-tabs a[aria-current="page"], .erp-role-tabs button[aria-selected="true"] { border-bottom-color: #3c8dbc; color: #256b92; font-weight: 600; }
/* 카드 안 탭 (2026-10-23) — 페이지 이동 없이 표를 바꾸는 button 형. 머리줄 안에 끼우므로 아래 여백·구분선 없음 */
.erp-role-tabs.erp-card-tabs { margin-bottom: 0; border-bottom: 0; gap: 0; }
.erp-role-tabs.erp-card-tabs button { padding: .25rem .625rem; }
.dark .erp-role-tabs { border-bottom-color: #374151; }
.dark .erp-role-tabs a, .dark .erp-role-tabs button { color: #9ca3af; }
.dark .erp-role-tabs a:hover, .dark .erp-role-tabs button:hover { color: #e5e7eb; }
.dark .erp-role-tabs a[aria-current="page"], .dark .erp-role-tabs button[aria-selected="true"] { color: #7dd3fc; }
.erp-control-group { display: inline-flex; align-items: center; border-radius: var(--erp-radius); overflow: hidden; outline: 1px solid var(--erp-border); outline-offset: -1px; }
.erp-filter-field { display: inline-flex; align-items: center; gap: .5rem; flex: none; }
.erp-filter-field > label { flex: none; white-space: nowrap; }
/* 검색어가 아닌 고정 안내 문구로 폭을 잡고, 지우기 버튼 자리도 확보한다. */
.erp-filter-search { position: relative; display: inline-block; flex: none; max-width: 100%; min-width: 0; font-size: .875rem; }
.erp-filter-search::before {
  content: attr(data-placeholder); display: block; visibility: hidden; pointer-events: none;
  height: var(--erp-control-height); box-sizing: border-box; border: 1px solid transparent;
  padding: .25rem 2rem .25rem .5rem; white-space: nowrap; line-height: 1.25rem;
}
.erp-filter-search > input[type=search] { position: absolute; inset: 0; width: 100%; min-width: 0; }
.erp-form { font-size: .875rem; }
.erp-autocomplete { position: relative; flex: 1; min-width: 0; width: 100%; }
.erp-autocomplete-options { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; max-height: 14rem; overflow-y: auto; overscroll-behavior: contain; margin-top: 2px; padding: .25rem; border: 1px solid var(--erp-border); border-radius: var(--erp-radius); background: var(--erp-input-bg); color: var(--erp-text); box-shadow: 0 4px 12px #0002; }
.erp-autocomplete-options[hidden] { display: none; }
.erp-autocomplete-options [role=option] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; padding: .5rem; text-align: left; border-radius: var(--erp-radius); }
.erp-autocomplete-options [role=option] span { min-width: 0; overflow-wrap: anywhere; }
.erp-autocomplete-options [role=option] small { flex-shrink: 0; color: var(--erp-muted); }
.erp-autocomplete-options [role=option]:hover, .erp-autocomplete-options [aria-selected=true] { background: var(--erp-hover); outline: 1px solid var(--erp-accent); outline-offset: -1px; }
.erp-autocomplete-note { padding: .5rem; color: var(--erp-muted); font-size: .75rem; }
.erp-autocomplete-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.erp-form > div, .erp-form .grid > div { min-width: 0; }
.erp-control,
.erp-form :where(select, textarea, input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button])) {
  box-sizing: border-box; min-width: 0; min-height: var(--erp-control-height);
  border: 1px solid var(--erp-border); border-radius: var(--erp-radius);
  padding: .5rem .75rem; background-color: var(--erp-input-bg); color: var(--erp-text);
  font-size: .875rem; line-height: 1.25rem;
}
.erp-form :where(select, textarea, input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button])) { width: 100%; }
/* 공통 입력·버튼·필터·체크박스 그룹의 크기는 이 선언 한 곳에서 관리한다. */
.erp-ui-control, .erp-button:not(.erp-button-compact),
input.erp-control, select.erp-control:not([multiple]),
.erp-form :where(select:not([multiple]), input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button])) {
  box-sizing: border-box; height: var(--erp-control-height); min-height: var(--erp-control-height);
  padding-block: calc((var(--erp-control-height) - 1.25rem - 2px) / 2); font-size: .875rem; line-height: 1.25rem;
}
.erp-ui-control:is(a, button, fieldset) { display: inline-flex; align-items: center; justify-content: center; }
fieldset.erp-ui-control { flex: none; max-width: 100%; }

/* 목록과 표의 폭·밀도는 유지하고 입력 색상만 같은 팔레트를 사용한다. */
body :where(main, #modal, #modal2) :is(select, textarea, input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button])) {
  background-color: var(--erp-input-bg); border-color: var(--erp-border); color: var(--erp-text);
}
.erp-control:focus-visible, .erp-form :is(input, select, textarea):focus-visible,
.erp-button:focus-visible { outline: 2px solid var(--erp-primary); outline-offset: 2px; }
.erp-control:disabled, .erp-form :is(input, select, textarea):disabled { opacity: .5; cursor: not-allowed; }
.erp-form input[type=checkbox], .erp-form input[type=radio] { accent-color: var(--erp-primary); }
.erp-form input[type=file] { padding-left: .5rem; }
.erp-form .errorlist { color: #dc2626; font-size: .75rem; margin-top: .25rem; }
html.dark .erp-form .errorlist { color: #f87171; }
.erp-choice-list > div { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.erp-choice-list label { display: inline-flex; align-items: center; gap: .35rem; }
.erp-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  padding-inline: 1rem;
  border: 1px solid transparent; border-radius: var(--erp-radius);
  font-size: .875rem; line-height: 1.25rem; font-weight: 500; white-space: nowrap;
}
.erp-button.erp-button-primary { background-color: var(--erp-primary); color: #fff; }
.erp-button.erp-button-primary:hover { background-color: var(--erp-primary-hover); }
.erp-button.erp-button-neutral { background-color: #1e293b; color: #fff; }
.erp-button.erp-button-neutral:hover { background-color: #334155; }
.erp-button.erp-button-secondary { border-color: var(--erp-border); background-color: transparent; color: var(--erp-text); }
.erp-button.erp-button-secondary:hover { background-color: var(--erp-hover); }
.erp-button.erp-button-danger { background-color: var(--erp-danger); color: #fff; }
.erp-button.erp-button-danger:hover { background-color: var(--erp-danger-hover); }
.erp-button.erp-button-danger-outline { border-color: var(--erp-danger-border); background-color: transparent; color: var(--erp-danger-text); }
.erp-button.erp-button-danger-outline:hover { background-color: var(--erp-danger-soft); }
.erp-button.erp-button-success { background-color: var(--erp-success); color: #fff; }
.erp-button.erp-button-success:hover { background-color: var(--erp-success-hover); }
.erp-button.erp-button-success-outline { border-color: var(--erp-border); background-color: transparent; color: var(--erp-success-text); }
.erp-button.erp-button-success-outline:hover { background-color: var(--erp-success-soft); }
.erp-button.erp-button-info { background-color: var(--erp-info); color: #fff; }
.erp-button.erp-button-info:hover { background-color: var(--erp-info-hover); }
.erp-button.erp-button-compact { height: var(--erp-button-compact-size); min-height: var(--erp-button-compact-size); align-self: center; padding: .25rem .5rem; font-size: .75rem; line-height: 1rem; }
/* 아이콘 버튼은 공통 높이와 같은 정사각형으로 표시한다. */
.erp-button.erp-button-icon { width: var(--erp-control-height); padding-inline: 0; flex-shrink: 0; }
.erp-button.erp-button-icon.erp-button-compact { width: var(--erp-button-compact-size); }
.erp-button:disabled { opacity: .5; cursor: not-allowed; }
.erp-table-compact tr > :first-child { padding-left: .5rem; }
.erp-table-compact tr > :last-child { padding-right: .5rem; }
/* 대시보드 목록 헤더 — 수주·재고 생산·최근 수불이 같은 배경을 참조한다. */
table thead tr.erp-table-head { background-color: #f9fafb; }
html.dark table thead tr.erp-table-head { background-color: rgb(17 24 39 / .4); }

/* 표 헤더 클릭 정렬 (2026-09-07) — table.sortable 의 글자 있는 th: 손 커서 + hover 점선 밑줄, 정렬 중인 열은 ▲▼ */
table.sortable thead th:not(:empty) { cursor: pointer; user-select: none; }
table.sortable thead th:not(:empty):hover { text-decoration: underline dotted; text-underline-offset: 3px; }
table.sortable thead th[data-dir]::after { font-size: 0.5625rem; margin-left: 3px; opacity: .8; }
table.sortable thead th[data-dir="asc"]::after { content: "▲"; }
table.sortable thead th[data-dir="desc"]::after { content: "▼"; }
/* 표 열 폭 조절 (2026-09-20) — 헤더 칸 오른쪽 끝의 손잡이(.col-resizer, 스크립트가 끼워 넣음)를 끌면 그 열만 넓어지고 좁아진다.
   고정 열이 있거나 폭을 바꾼 표에는 data-colw 가 붙는다. 좁은 셀은 줄바꿈 대신 말줄임. 터치 기기·인쇄에서는 손잡이를 숨긴다. */
table thead th { position: relative; }
.col-resizer { position: absolute; top: 0; bottom: 0; right: 0; width: 7px; cursor: col-resize; z-index: 1; touch-action: none; }
.col-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: transparent; transition: background .12s; }
.col-resizer:hover::after, .col-resizer.active::after { background: #3c8dbc; }
html.col-resizing, html.col-resizing * { user-select: none; cursor: col-resize !important; }
table[data-colw] > :is(thead, tbody, tfoot) > tr > :is(th, td) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 셀 안의 별도 설명 줄도 각각 말줄임한다. 버튼·진행 막대 등은 이 클래스를 붙이지 않는다. */
table[data-colw] .erp-cell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: none), (pointer: coarse) { .col-resizer { display: none; } }
@media print { .col-resizer { display: none; } }
/* 표 세로 보더 (2026-09-09 사용자 요청) — 모든 table 요소의 셀 사이 선. 셀마다 오른쪽 선, 행의 마지막 칸만 끈다(바깥 테두리 아님).
   주의: 이 주석에 꺾쇠로 감싼 태그 이름(table 등)을 쓰지 말 것 — HTML 에 그대로 실려 테스트가 첫 table 태그를 여기서 찾는다(2026-09-09 실패 사례).
   처음엔 `td + td` 의 왼쪽 선이었는데 rowspan 표(품목 = 행)에서 둘째 행부터 첫 td 가 rowspan 뒤 칸이라 선이 빠졌다 → 오른쪽 선으로.
   행의 :last-child 는 rowspan 과 무관하게 항상 그 행의 실제 마지막 칸이라 정확하다.
   본문은 두 번째 칸부터 기본 왼쪽 여백을 준다. 헤더는 첫 칸 포함 공통 .5rem으로 통일한다. */
table th, table td { border-right: 1px solid #e5e7eb; }
table tr > :last-child { border-right: 0; }
.dark table th, .dark table td { border-right-color: #374151; }
table td + td { padding-left: .5rem; }
/* 표별 px/pl 유틸리티와 일보의 고정 px 여백보다 우선하여 헤더 왼쪽 여백을 한 곳에서 관리한다. */
table th { padding-left: .5rem !important; }
/* AdminLTE 박스 느낌 — 기존 카드(.erp-card)에 상단 액센트 보더 일괄 적용
   (모달은 shadow-xl 이라 제외됨) */
/* 셀렉트 안내 문구(빈 옵션 '품목을 선택하세요' 등) — 입력 placeholder 처럼 흐리게 (빈 값이 선택된 동안만) */
:where(main, #modal, #modal2) select:has(option[value=""]:checked), :where(main, #modal, #modal2) select option[value=""] { color: var(--erp-muted); }
/* 수주 썸네일 칩 — 목록·대시보드 공통 40px (2026-09-01 통일), hover 시 원본 확대 */
.order-thumb { height: 2.5rem; width: 2.5rem; flex: none; object-fit: cover; border-radius: .25rem; display: block; }
.order-thumb.dim { opacity: .5; }
/* 사진 셀은 첫/마지막 열 여백과 표별 padding 유틸리티보다 우선하여 사방 3px로 통일한다. */
table td.order-thumb-cell { padding: 3px !important; }
.order-thumb-cell .photo-pop { display: flex; justify-content: center; }
.photo-pop { display: inline-flex; }
/* 사용 중지 행: 데이터 칸만 흐리게 — 수정/삭제 버튼 칸(.row-actions)은 원색 유지 */
.row-inactive > td:not(.row-actions) { opacity: .4; }
/* 인쇄(브라우저 'PDF로 저장' 포함): 사이드바·헤더·폼·버튼류를 숨기고 데이터만 */
@media print {
  html { font-size: 100% !important; }
  aside, header, nav, #modal, form, button, .no-print { display: none !important; }
  body { background: #fff !important; }
  .content-shell { padding-left: 0 !important; }
  main { max-width: none; padding: 0; }
  .erp-card, .erp-modal, .shadow, .shadow-lg, .shadow-xl { box-shadow: none !important; }
  .erp-card { border-top: none; }
  .overflow-x-auto { overflow: visible !important; }
}
/* 사이드바 폭 = CSS 변수 하나 (2026-09-08 사용자 요청) — 사이드바 width 와 본문 padding-left 가 같이 움직인다.
   데스크톱(md 이상)에서만 폭 조절·숨김. 저장 = localStorage daol-sidebar-w / daol-sidebar(0 = 숨김) */
:root { --sidebar-w: 224px; }
#sidebar { width: var(--sidebar-w); }
/* 메뉴의 위·아래 끝에서 휠/터치 스크롤이 본문으로 넘어가지 않게 한다. */
#sidebar-scroll { overscroll-behavior-y: contain; }
@media (max-width: 767px) { #sidebar { width: min(var(--sidebar-w), 80vw); } }   /* 모바일 = 화면 80% 상한 */
@media (min-width: 768px) {
  .content-shell.with-sidebar { padding-left: var(--sidebar-w); }
  /* 아이콘 모드 (2026-09-08 사용자 요청: 상태 = 펼침·아이콘 둘뿐) — 폭 56px, 글자·캐럿·하위 목록·폭 핸들 숨김, 툴팁은 title */
  html.sb-icons #sidebar { width: 56px; }
  html.sb-icons .content-shell.with-sidebar { padding-left: 56px; }
  html.sb-icons .nav-txt, html.sb-icons .nav-caret, html.sb-icons #nav-sales, html.sb-icons #nav-master,
  html.sb-icons #nav-hr, html.sb-icons #nav-office, html.sb-icons #nav-management,
  html.sb-icons #sb-resize { display: none; }
  html.sb-icons a.nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sb-icons #sidebar > a:first-of-type { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sb-icons #sidebar nav > .border-t { margin-left: .5rem; margin-right: .5rem; }
  html.sb-resizing, html.sb-resizing * { user-select: none; cursor: col-resize; }
  html.sb-resizing #sidebar { transition: none; }
}
/* 폭 조절 핸들 — 사이드바 오른쪽 경계에 겹친 8px 띠 (간트 열 핸들과 같은 모양) */
#sb-resize { position: absolute; top: 0; bottom: 0; right: -4px; width: 8px; cursor: col-resize; z-index: 41; }
#sb-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .12s; }
#sb-resize:hover::after, html.sb-resizing #sb-resize::after { background: #3c8dbc; }   /* lte-blue = 사이드바 활성 표시선과 같은 색 (2026-09-08 사용자 요청 — 앰버는 튐) */
a.nav-item { display: flex; align-items: center; gap: .625rem; }   /* a. = Tailwind CDN(런타임 주입)의 .block 보다 우선 */
.nav-ico { width: 20px; height: 20px; flex: none; opacity: .85; }
.nav-item:hover .nav-ico, .nav-item.text-white .nav-ico { opacity: 1; }

body { font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; }
table { font-variant-numeric: tabular-nums; }
/* 실제 파일 입력이 칸 전체의 클릭·키보드·필수 검증을 담당한다. */
.erp-file-field { position: relative; display: block; width: 100%; height: var(--erp-control-height); }
.erp-file-field > input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; }
.erp-file-prompt { display: flex; align-items: center; box-sizing: border-box; height: 100%; padding: .25rem .75rem; border: 1px solid var(--erp-border); border-radius: var(--erp-radius); background: var(--erp-input-bg); color: var(--erp-muted); font-size: .875rem; pointer-events: none; }
.erp-file-field:focus-within .erp-file-prompt { outline: 2px solid var(--erp-primary); outline-offset: 1px; }
.erp-file-field:has(input:disabled) { opacity: .6; }
.erp-file-field > input:disabled { cursor: not-allowed; }
.erp-file-current, .erp-file-selection { display: block; overflow-wrap: anywhere; font-size: .75rem; color: var(--erp-muted); }
.erp-file-current { margin-bottom: .25rem; }
.erp-file-current a { text-decoration: underline; }
.erp-file-selection:empty { display: none; }
.erp-file-selection:not(:empty) { margin-top: .25rem; }
.order-status-pill.order-status-open { background-color: #dbeafe; color: #1e40af; }
.order-status-pill.order-status-done { background-color: #d1fae5; color: #065f46; }
.order-status-pill.order-status-canceled { background-color: #fee2e2; color: #991b1b; }
html.dark .order-status-pill.order-status-open { background-color: #1e3a8a; color: #dbeafe; }
html.dark .order-status-pill.order-status-done { background-color: #065f46; color: #d1fae5; }
html.dark .order-status-pill.order-status-canceled { background-color: #7f1d1d; color: #fee2e2; }
html.dark { color-scheme: dark; scrollbar-color: #647181 #192229; }
html.dark body { background-color: #111820; color: #e7edf4; }
html.dark [class~="dark:bg-gray-800"] { background-color: #222c38; }
html.dark [class~="dark:text-gray-400"] { color: #acb8c6; }
html.dark [class~="dark:text-gray-500"] { color: #9ba9b9; }
html.dark [class~="dark:text-blue-400"] { color: #80baff; }
html.dark table thead tr { background-color: #2b3744; color: #c2cdda; }
html.dark table th, html.dark table td { border-right-color: #34414e; }
html.dark #sidebar { background-color: #192229; }
#sidebar a.nav-item.text-white { background-color: #293f50; border-left-color: #80baff; }
#nav-sales a span { color: #a3b3bf; }
#nav-sales { font-size: .8125rem; }
html.dark input::placeholder, html.dark textarea::placeholder { color: #9ba9b9; }
.order-table { --order-divider-color: #cbd5e1; }
html.dark .order-table { --order-divider-color: #485563; }
.order-table .group { border-top: 1px solid var(--order-divider-color); }
.order-table .order-detail-row + .order-detail-row > td {
  border-top: 1px solid transparent;
  background-image: repeating-linear-gradient(to right, var(--order-divider-color) 0 1px, transparent 1px 3px);
  background-size: 3px 1px;
  background-repeat: repeat-x;
  background-position: left top;
}
.order-table tbody tr:hover { background-color: #eff6ff; }
html.dark .order-table tbody tr:hover { background-color: #304153; }
.order-table .order-detail-row[hidden] { display: none; }
.order-detail-row { background-color: #f1f5f9; }
html.dark .order-detail-row { background-color: #1c2631; }
.order-name-wrap { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.order-name-text { flex: 1; min-width: 0; }
.order-name-text > a, .order-name-text > div { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-expand { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: .25rem; color: #475569; }
html.dark .order-expand { color: #c2cdda; }
.order-expand:hover { background-color: #dbeafe; }
html.dark .order-expand:hover { background-color: #40546b; }
.order-expand:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.order-expand[aria-expanded="true"] svg { transform: rotate(180deg); }
@media print { .order-table .order-detail-row[hidden] { display: table-row; } }

.order-table .text-red-600 { font-weight: 500; }

/* 수불 구분: 입고 / 출고 / 이동 / 예외 처리 / 폐기 */
.approval-kind-pill { display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; line-height: 1.25rem; white-space: nowrap; background: #e2e8f0; color: #334155; }
.approval-kind-pill[data-kind="LEAVE"] { background: #dbeafe; color: #1e40af; }
.approval-kind-pill[data-kind="HOLIDAY_WORK"] { background: #ede9fe; color: #5b21b6; }
.approval-kind-pill[data-kind="CERTIFICATE"] { background: #fef3c7; color: #92400e; }
.approval-kind-pill[data-kind="RECEIPT"] { background: #d1fae5; color: #065f46; }
html.dark .approval-kind-pill { background: #334155; color: #e2e8f0; }
html.dark .approval-kind-pill[data-kind="LEAVE"] { background: #1e3a8a; color: #bfdbfe; }
html.dark .approval-kind-pill[data-kind="HOLIDAY_WORK"] { background: #4c1d95; color: #ddd6fe; }
html.dark .approval-kind-pill[data-kind="CERTIFICATE"] { background: #78350f; color: #fde68a; }
html.dark .approval-kind-pill[data-kind="RECEIPT"] { background: #064e3b; color: #a7f3d0; }
.movement-kind-pill { display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; line-height: 1.25rem; background: #e2e8f0; color: #334155; }
html.dark .movement-kind-pill { background: #334155; color: #e2e8f0; }
.movement-kind-pill[data-kind="IN_PURCHASE"], .movement-kind-pill[data-kind="IN_PRODUCTION"], .movement-kind-pill[data-kind="IN_SUBCON"] { background: #d1fae5; color: #065f46; }
html.dark .movement-kind-pill[data-kind="IN_PURCHASE"], html.dark .movement-kind-pill[data-kind="IN_PRODUCTION"], html.dark .movement-kind-pill[data-kind="IN_SUBCON"] { background: #064e3b; color: #a7f3d0; }
.movement-kind-pill[data-kind="OUT_CONSUME"], .movement-kind-pill[data-kind="OUT_SHIP"] { background: #dbeafe; color: #1e40af; }
html.dark .movement-kind-pill[data-kind="OUT_CONSUME"], html.dark .movement-kind-pill[data-kind="OUT_SHIP"] { background: #1e3a8a; color: #bfdbfe; }
.movement-kind-pill[data-kind="MOVE"] { background: #ede9fe; color: #5b21b6; }
html.dark .movement-kind-pill[data-kind="MOVE"] { background: #4c1d95; color: #ddd6fe; }
.movement-kind-pill[data-kind="IN_RETURN"], .movement-kind-pill[data-kind="ADJUST"], .movement-kind-pill[data-kind="PROD_CANCEL"], .movement-kind-pill[data-kind="CONSUME_CANCEL"], .movement-kind-pill[data-kind="SHIP_CORRECT"] { background: #fef3c7; color: #92400e; }
html.dark .movement-kind-pill[data-kind="IN_RETURN"], html.dark .movement-kind-pill[data-kind="ADJUST"], html.dark .movement-kind-pill[data-kind="PROD_CANCEL"], html.dark .movement-kind-pill[data-kind="CONSUME_CANCEL"], html.dark .movement-kind-pill[data-kind="SHIP_CORRECT"] { background: #78350f; color: #fde68a; }
.movement-kind-pill[data-kind="OUT_SCRAP"] { background: #ffe4e6; color: #9f1239; }
html.dark .movement-kind-pill[data-kind="OUT_SCRAP"] { background: #881337; color: #fecdd3; }