/* =========================================
   Admin > Employees — Consolidated Styles
   ========================================= */

/* ===== Base & Variables ===== */
:root{
  --fs-base: 1rem;
  --radius-xs: .25rem;
  --radius-sm: .375rem;
  --radius-md: .625rem;
  --gap-2: .5rem;
  --gap-3: .75rem;

  --clr-text: #222;
  --clr-muted: #6b7280;
  --clr-border: #ccd3e1;
  --clr-border-soft: #e7e9ef;

  --clr-brand: #385395;
  --clr-brand-weak: #eef2ff;
  --clr-accent: #4fa85f;
  --clr-accent-contrast: #fff;

  --clr-row-hover: #eef4ff;
  --clr-row-alt: #fbfcff;
  --clr-row-selected: #deebf7;

  --clr-chip-bg: #f4f6fb;
  --clr-chip-border: #e3e7f0;

  --shadow-1: 0 1px 0 rgba(0,0,0,.03);
  --shadow-2: 0 10px 26px rgba(0,0,0,.08);
}

*,
*::before,
*::after{ box-sizing: border-box; font-size: inherit; }
html{ font-size: var(--fs-base); }
body{ margin:0; color:var(--clr-text); background:#fff; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
img{ max-width:100%; display:block; }

/* ===== Utilities ===== */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.text-left{ text-align:left !important; }
.td-ellipsis{ max-width: 18rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.max-width-max-content{ max-width:max-content !important; }
.justify-content-right{ justify-content:flex-end; }
.margin-bottom-10{ margin-bottom:10px !important; }

/* ===== Container ===== */
.custom-container{
  width: 80%;
  margin: 0 auto;
}

/* ===== Form Rows ===== */
.form-group,
.form-group-half,
.form-group-two-thirds{
  display:flex; align-items:center; gap: var(--gap-2);
  width:100%; min-height:2.5rem; flex-wrap:nowrap;
}
.form-group span,
.form-group .form-group-three span{
  font-weight:700; text-align:right; padding-right: var(--gap-2);
}
.form-group span{ font-size:.875rem; min-width:7.5rem; }
.form-group .form-group-three{ display:flex; gap:var(--gap-2); width:33.333%; }
.form-group .form-group-three span{ font-size:.8125rem; width:6.875rem; align-content:center; }

/* Inputs */
.form-group input,
.form-group select,
.form-group textarea,
.form-control{
  width:100%;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xs);
  padding: .5rem .625rem;
  background:#fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-group textarea{ min-height:3.125rem; }
.form-group .form-group-three input,
.form-group .form-group-three select{ flex:1; }

/* Focus ring (접근성) */
input:focus,
select:focus,
textarea:focus,
.button-container-v2 button:focus-visible,
.page-toolbar .btn:focus-visible{
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147,197,253,.45);
}

/* Width helpers */
.form-group-half  input,
.form-group-half  select,
.form-group-half  textarea{ width:50%; }
.form-group-two-thirds input,
.form-group-two-thirds select,
.form-group-two-thirds textarea{ width:66.666%; }
.form-group-quarter input,
.form-group-quarter select,
.form-group-quarter textarea{ width:25%; }

.form-label{ font-size:.875rem; font-weight:700; }

/* ===== Input with icon ===== */
.input-container{ position:relative; display:flex; align-items:center; flex: 2 1 min-content; }
.input-container.input-date{ flex:0.2; min-width:9.375rem; }
.input-container input{ width:100%; padding-right:1.875rem; }
.input-container i{
  position:absolute; right:.625rem; top:50%; transform:translateY(-50%);
  color:#888; cursor:pointer;
}
.input-container i:hover{ color:#333; }
.datepicker-icon { cursor: pointer; pointer-events: auto; }


/* ===== Search Box ===== */
.bottom-container{ display:block; padding:.625rem 0; border-radius: var(--radius-md); }

.search-section-title{
  border-left:.25rem solid #d63384; padding-left:.75rem; margin-bottom:.75rem;
}
.search-section-title h2{
  margin:0; color:var(--clr-text);
}

.bottom-container .bottom-container-search form{
  width:100%;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-3) 1rem;
  background:#fff;
  border:1px solid var(--clr-border);
  border-radius:.3125rem;
  padding:.625rem;
  margin-bottom:.625rem;
}
.form-group .input-wrap{ flex:1; display:flex; align-items:center; gap:.5rem; }

.search-actions{
  grid-column:1 / -1; display:flex; gap:.5rem; justify-content:center; margin-top:.25rem;
}
.search-actions button{
  border: 2px solid var(--clr-accent) !important;
  border-radius: var(--radius-xs);
  background:#fff !important; color: var(--clr-accent) !important;
  padding:.375rem .625rem; font-weight:700; cursor:pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.search-actions button:hover{ background: var(--clr-accent); color:#fff !important; }

/* 퇴사자 포함 칩 */
.badge-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:999px;
  background: var(--clr-chip-bg); color:#3a4260; font-weight:600;
  border:1px solid var(--clr-chip-border);
  white-space:nowrap;
}
.badge-chip input[type="checkbox"]{
  appearance: checkbox; -webkit-appearance: checkbox; -moz-appearance: checkbox;
  width:auto; height:auto; margin:0; padding:0; transform:none; position:static;
  vertical-align:middle; line-height:1;
}

/* ===== Toolbar (상단 버튼들) ===== */
.page-toolbar{
  display:flex; gap:.5rem; justify-content:flex-end; margin:.5rem 0 1rem;
}
.page-toolbar .btn,
.header-right-v2 .button-container-v2 [data-action]{
  appearance:none; border:1px solid #c9ccd4; background:#fff; color:#2a2f3a;
  padding:.45rem .75rem; border-radius:.5rem; font-weight:600; line-height:1;
  box-shadow: var(--shadow-1);
  transition: transform .04s ease, background .2s, color .2s, border-color .2s;
}
.page-toolbar .btn:hover,
.header-right-v2 .button-container-v2 [data-action]:hover{ background:#f5f7fb; }
.page-toolbar .btn:active,
.header-right-v2 .button-container-v2 [data-action]:active{ transform: translateY(1px); }
.page-toolbar .btn.primary{ border-color: var(--clr-accent); color: var(--clr-accent); }
.page-toolbar .btn.primary:hover{ background: var(--clr-accent); color:#fff; }

/* ===== Table Wrapper ===== */
.bottom-container-table{
  position:relative;
  border:1px solid var(--clr-border-soft);
  border-radius:.5rem;
  overflow:auto; /* x,y 스크롤 허용 */
  max-height:100vh;
}
.bottom-container-table table{
  min-width:100%; width:max-content;
  border-collapse:separate; border-spacing:0;
  margin:0;
}

/* Header */
.bottom-container-table thead{
  position:sticky; top:0; z-index:2;
  background: var(--clr-brand); color:#fff;
}
.bottom-container-table thead th{
  padding:.6rem .5rem;
  white-space:nowrap; text-align:center; font-weight:700;
}

/* Body */
.bottom-container-table tbody td{
  padding:.55rem .5rem; text-align:center;
  border-top:1px solid #f0f2f6; white-space:nowrap;
}
.bottom-container-table tbody tr:nth-child(even):not(:has(td[colspan])) td{ background: var(--clr-row-alt); }
.bottom-container-table tbody tr:not(:has(td[colspan])):hover td{ background: var(--clr-row-hover) !important; }

/* 메시지 행 */
.bottom-container-table tbody tr:has(td[colspan]){ cursor:not-allowed !important; }
.bottom-container-table tbody tr:has(td[colspan]):hover{ background:inherit !important; }

/* 행 선택/포커스 표시 */
.bottom-container-table tbody tr.selected td{
  background: var(--clr-row-selected) !important;
}
.bottom-container-table tbody input[type="radio"]:focus-visible{
  outline: 2px solid #93c5fd; outline-offset: 2px;
}

/* 상태 뱃지 */
.badge{
  display:inline-block; padding:.15rem .45rem; border-radius:.375rem;
  font-size:.75rem; font-weight:700; line-height:1;
}
.badge.green{ background:#e8f6ee; color:#1b8a4b; border:1px solid #cfeedd; }
.badge.gray { background:#eff1f5; color:#5a6478; border:1px solid #e2e6ee; }

/* ===== Pagination ===== */
.pagination{
  display:flex; gap:.35rem; justify-content:center; align-items:center;
  padding:.75rem 0 1rem;
}
.pagination .pagination-btn{
  min-width:34px; height:34px; display:inline-grid; place-items:center;
  border:1px solid #cfd6e4; border-radius:.45rem; background:#fff; color:#2b3344;
  font-weight:600; box-shadow: var(--shadow-1);
}
.pagination .pagination-btn:hover{ background:#f5f7fb; }
.pagination .pagination-btn.current-page{ background: var(--clr-brand); color:#fff; border-color: var(--clr-brand); }
.pagination .pagination-btn.disabled{ opacity:.45; pointer-events:none; }

/* ===== Autocomplete ===== */
.autocomplete-wrap{ position:relative; }
.autocomplete-menu{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border:1px solid #d7dbe6; border-radius:8px;
  box-shadow: var(--shadow-2);
  margin-top:6px; z-index:2000; max-height:280px; overflow:auto; display:none;
}
.autocomplete-menu.is-open{ display:block; }
.autocomplete-item{
  padding:10px 12px; cursor:pointer; line-height:1.25; font-size:14px;
  display:flex; align-items:baseline; gap:8px;
}
.autocomplete-item .k{ color: var(--clr-muted); font-weight:600; min-width:84px; }
.autocomplete-item:hover,
.autocomplete-item.is-active{ background:#f3f6fb; }
.autocomplete-empty{ padding:10px 12px; color:#888; }

/* 선택 유도(테이블 강조) */
.bottom-container-table.need-select{
  border:2px solid #e25d5d !important;
  animation: blink-border .6s ease-in-out 2;
}
@keyframes blink-border{
  0%,100% { border-color:#e25d5d; }
  50%     { border-color:transparent; }
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .custom-container{ width:95%; }
  .form-group span{ min-width:6.25rem; text-align:left; }
  .bottom-container .bottom-container-search form{ grid-template-columns:1fr; }
}
@media (max-width: 768px){
  .form-group, .form-group .form-group-three{ flex-wrap:wrap; }
  .form-group span{ text-align:left; padding-right:0; }
  .form-group .form-group-three{ width:100%; }
  .form-group-half input,
  .form-group-half select,
  .form-group-half textarea,
  .form-group-two-thirds input,
  .form-group-two-thirds select,
  .form-group-two-thirds textarea,
  .form-group-quarter input,
  .form-group-quarter select,
  .form-group-quarter textarea{ width:100%; }

  /* 모바일에선 가독성을 위해 줄바꿈 허용 */
  .bottom-container-table th,
  .bottom-container-table td{ white-space: normal; }
  /* 특정 셀만 말줄임 유지하려면 .td-ellipsis 클래스 사용 */
}

/* ===== Datepicker Layering over Add-Modal ===== */
#mpsDialogAdd { overflow: visible; } /* 모달 내부 위젯 표시 여유 */

.ui-datepicker,
.datepicker-dropdown,
.flatpickr-calendar,
.xdsoft_datetimepicker {
  z-index: 20060 !important; /* 모달(10003)보다 항상 위 */
}

/* Bootstrap Datepicker의 backdrop 형태를 쓰는 테마 대응 */
.datepicker {
  z-index: 20060 !important;
}

.ui-datepicker .ui-datepicker-title select {
  padding: 0 !important;
}

#mpsModalEmpPick {
  z-index: 20070 !important; /* 사원 선택 모달은 datepicker보다 위 */
}

#empPick-result {
  height: 400px;
}