/* 사용자 권한·내 정보·자동 로그아웃 화면 스타일 (HRUserAccess.md) */

/* 사이드바·하위 메뉴 배지 (서명 대기 N건, 수정 요청 N건) */
.nav-badge {
  display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 10px;
  background: #d9534f; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; vertical-align: middle;
}
.message.info { background: #eaf3fc; color: var(--blue-dark); border: 1px solid #c6d9ec; }
.ua-sign-notice a { color: var(--blue-dark); font-weight: 700; }

/* 권한 표 */
.ua-filters select { border: 1px solid #bdcad5; border-radius: 6px; padding: 9px; font: inherit; background: #fff; max-width: 260px; }
.ua-toggle { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 600; cursor: pointer; }
.ua-toggle input { margin: 0; width: 16px; height: 16px; }
.ua-legend { margin-right: 12px; }
.ua-table-wrap { overflow: auto; max-height: 72vh; border: 1px solid var(--line); border-radius: 8px; }
.ua-table { border-collapse: separate; border-spacing: 0; font-size: 13px; white-space: nowrap; }
.ua-table th, .ua-table td { border-bottom: 1px solid var(--line); border-right: 1px solid #eef2f6; background: #fff; vertical-align: middle; }
/* 머리글 두 줄이 모두 위에 고정된다. 둘째 줄의 위치는 첫째 줄의 실제 높이(user_access.js 가 잰다)를 따른다.
   고정값을 쓰면 글꼴·확대 비율에 따라 두 줄 사이에 틈이 생겨 아래 행의 체크박스가 비쳐 보인다. */
.ua-table thead th { position: sticky; top: 0; z-index: 3; background: #f8fafc;
  background-clip: padding-box; box-shadow: 0 1px 0 0 var(--line); }
.ua-table thead tr:nth-child(2) th { top: var(--ua-head-top, 37px); }
.ua-table th.ua-check-head { min-width: 64px; }   /* 머리글은 한 줄, 글씨 크기는 다른 머리글과 같다 (2026-10-13) */
.ua-table td { text-align: center; }
.ua-table td.ua-check { text-align: center; }
.ua-table td.ua-check-admin { background: #fdf6e8; }
.ua-table td.ua-check input { width: 17px; height: 17px; margin: 0; }
.ua-col-name { min-width: 110px; }
.ua-col-scope { min-width: 150px; }
.ua-scope-line { display: flex; gap: 6px; align-items: center; }
.ua-table td.ua-level { text-align: center; }
.ua-level-select { border: 1px solid #bdcad5; border-radius: 6px; padding: 4px 4px; font: inherit; font-size: 12px; background: #fff; }
.ua-row--off td { color: #9aa8b5; background: #fafbfc; }
.ua-row--off strong { color: #9aa8b5; }
.ua-me { display: inline-block; padding: 0 6px; border-radius: 9px; background: #dbeaf8; color: var(--blue-dark); font-size: 11px; font-weight: 700; vertical-align: middle; }
.ua-dot.on { color: #18794e; }
.ua-dot.off { color: #9aa8b5; }
.ua-note { display: block; color: var(--muted); font-size: 11px; }
.ua-note.warn { color: #b3372f; }
.ua-scope-select { border: 1px solid #bdcad5; border-radius: 6px; padding: 5px 6px; font: inherit; font-size: 13px; background: #fff; }
.ua-auto { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.ua-link { color: var(--blue); font-size: 11px; text-decoration: underline; }
.ua-extra { margin-top: 4px; }
.ua-extra small { display: block; color: var(--muted); font-size: 11px; white-space: normal; max-width: 260px; }
.ua-extra-select { width: 100%; min-width: 200px; border: 1px solid #bdcad5; border-radius: 6px; font: inherit; font-size: 12px; }
.ua-table .button.small { padding: 3px 8px; font-size: 12px; }
.ua-table .link-button { font: inherit; }
.ua-row--changed td { background: #fffbe6; }

/* 직원 관리 — 전체 목록 권한자의 안내줄 */
.ua-directory-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

/* 내 정보 */
.ua-pending ul { margin: 8px 0 0; padding-left: 18px; }
.ua-pending li { margin: 6px 0; }
.ua-pending .button { margin-left: 8px; }
.ua-request-form { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; padding: 6px 0 12px; }
.ua-request-form .field label { display: block; font-weight: 600; margin-bottom: 4px; }
.ua-request-form select, .ua-request-form input { border: 1px solid #bdcad5; border-radius: 6px; padding: 9px; font: inherit; background: #fff; }
.ua-request-value { flex: 1 1 260px; }
.ua-request-value input { width: 100%; }
.ua-current th, .ua-current td { text-align: center; white-space: normal; }
.ua-handle-form { display: flex; gap: 6px; align-items: center; }
.ua-handle-form input { border: 1px solid #bdcad5; border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 12px; width: 160px; }
/* 배지 색은 app.css 의 배지 규칙 하나를 따른다 */

/* 수정 요청 diff: 빨강 = 지워지는 내용, 초록 = 새로 들어가는 내용 */
.ua-request-card { margin-bottom: 18px; }
.ua-diff { padding-bottom: 6px; }
.ua-diff-heading { margin: 14px 0 6px; font-size: 14px; color: #33475c; }
/* 표는 패널 너비를 다 쓰고, 짧은 칸(구분·화살표)만 고정한다. 한글은 낱말 안에서 끊기지 않게 keep-all. */
.ua-diff-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 4px; table-layout: auto; }
.ua-diff-table th, .ua-diff-table td { border: 1px solid var(--line); padding: 6px 10px; white-space: normal; word-break: keep-all; vertical-align: middle; }
.ua-diff-table th { background: #f8fafc; white-space: nowrap; }
/* `추가`·`수정`·`삭제` 태그가 두 줄로 접히지 않을 만큼 넓게 잡는다 */
.ua-diff-table .ua-diff-kind { width: 70px; min-width: 70px; text-align: center; white-space: nowrap; }
.ua-diff-old { background: #fdeaea; color: #b3372f; text-decoration: line-through; padding: 1px 5px; border-radius: 4px; }
.ua-diff-new { background: #e3f4e8; color: #1c7d3d; padding: 1px 5px; border-radius: 4px; font-weight: 600; }
.ua-diff-arrow { color: var(--muted); text-align: center; width: 34px; min-width: 34px; }
.ua-diff-tag { display: inline-block; padding: 2px 8px; border-radius: 9px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ua-diff-tag.add { background: #e3f4e8; color: #1c7d3d; }
.ua-diff-tag.edit { background: #fff6db; color: var(--amber); }
.ua-diff-tag.del { background: #fdeaea; color: #b3372f; }
tr.ua-diff-added td { background: #f4fbf6; }
tr.ua-diff-removed td { background: #fdf6f6; color: #8a5a56; }
tr.ua-diff-removed td:not(.ua-diff-kind) { text-decoration: line-through; }

/* +추가 창: 부서장 범위 밖에 더 볼 부서 선택 */
.ua-modal-backdrop[hidden] { display: none; }
.ua-modal-backdrop { position: fixed; inset: 0; background: #1b2a3a66; z-index: 900; display: flex; align-items: center; justify-content: center; }
.ua-modal { background: #fff; border-radius: 10px; width: min(520px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  padding: 18px 20px; box-shadow: 0 16px 40px #1b2a3a55; }
.ua-modal-head { display: flex; justify-content: space-between; align-items: center; }
.ua-modal-head h2 { margin: 0; font-size: 17px; }
.ua-dept-list { overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin: 8px 0 12px; max-height: 50vh; }
.ua-dept-item { display: block; padding: 4px 0; cursor: pointer; white-space: nowrap; }
.ua-dept-item input { margin-right: 6px; }
.ua-dept-item small { color: var(--muted); margin-left: 4px; }
.ua-dept-depth-1 { padding-left: 1.2em; }
.ua-dept-depth-2 { padding-left: 2.4em; }
.ua-modal-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.ua-modal-status { margin-right: auto; color: var(--muted); font-size: 12px; }

/* 자동 로그아웃 안내 */
#logout-warning {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 1000;
  background: #fff4d6; color: #5a4600; border: 1px solid #e0b97a; border-radius: 8px; padding: 12px 16px;
  box-shadow: 0 8px 24px #1b2a3a33; display: flex; gap: 12px; align-items: center; font-weight: 600;
}
#logout-warning button { white-space: nowrap; }

/* 제출서류 (인사카드 최하단): 등록 줄과 목록 */
.emp-doc-upload { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 0; }   /* 위아래 여백은 패널 안 간격 규칙(app.css) */
/* 인사카드 겸임 표의 해제 줄: 종료일 칸 + 단추 (2026-10-14) */
.emp-concurrent-end { display: inline-flex; gap: 6px; align-items: center; }
.emp-concurrent-end .keyboard-date-input { width: 112px; }
.emp-doc-upload select, .emp-doc-upload input[type="text"], .emp-doc-upload input[type="file"] {
  height: 38px; box-sizing: border-box; border: 1px solid #bdcad5; border-radius: 6px; font: inherit; background: #fff;
}
.emp-doc-upload select, .emp-doc-upload input[type="text"] { padding: 8px 9px; }
.emp-doc-upload input[type="file"] { padding: 6px 9px; max-width: 320px; }
.emp-doc-upload input[type="text"] { flex: 1 1 180px; min-width: 140px; }
.emp-docs td.emp-doc-actions { white-space: nowrap; }
.emp-doc-actions form { display: inline; }
.emp-doc-actions .button { margin-left: 4px; }