/* ══════════════════════════════════════════════════════════
   supply-request.css — 비품신청현황 (sec-supply)
   tokens.css 변수만 사용 (인라인 hex/px 금지 원칙)
   ══════════════════════════════════════════════════════════ */

#sec-supply .sup-toolbar{
  display:flex; flex-direction:column; gap:10px;
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:12px 14px; margin-bottom:12px;
}
.sup-modeTabs{ display:flex; gap:6px; flex-wrap:wrap; }
.sup-modeTab{
  font:inherit; font-size:13px; cursor:pointer;
  background:var(--bg-2); color:var(--fg-muted);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:5px 12px; transition:.12s;
}
.sup-modeTab:hover{ color:var(--fg); border-color:var(--border-hi); }
.sup-modeTab.on{ background:var(--primary); color:var(--fg-on); border-color:var(--primary); }

.sup-modePanels{ min-height:34px; }
.sup-modePanel{ display:none; align-items:center; gap:8px; flex-wrap:wrap; }
.sup-modePanel input[type=month],
.sup-modePanel input[type=number],
.sup-modePanel input[type=date]{
  font:inherit; background:var(--bg-2); color:var(--fg);
  border:1px solid var(--border); border-radius:var(--radius); padding:5px 8px;
}
.sup-hint{ color:var(--fg-dim); font-size:12px; }
.sup-searchBtn{
  font:inherit; font-size:13px; cursor:pointer;
  background:var(--primary); color:var(--fg-on);
  border:1px solid var(--primary); border-radius:var(--radius); padding:5px 16px;
}
.sup-searchBtn:hover{ filter:brightness(1.06); }

.sup-filterRow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sup-stateLbl{ color:var(--fg-muted); font-size:12px; }
.sup-stateBtn{
  font:inherit; font-size:12px; cursor:pointer;
  background:var(--bg-2); color:var(--fg); border:1px solid var(--border);
  border-radius:999px; padding:3px 12px; transition:.12s;
}
.sup-stateBtn.off{ opacity:.4; text-decoration:line-through; }
#sec-supply select#supDept,
#sec-supply input#supQ{
  font:inherit; font-size:13px; background:var(--bg-2); color:var(--fg);
  border:1px solid var(--border); border-radius:var(--radius); padding:5px 8px;
}
#sec-supply input#supQ{ min-width:160px; }

/* 헤더 요약 */
.sup-header{ margin-bottom:10px; }
.sup-rangeLbl{ color:var(--fg-muted); font-size:13px; margin-bottom:6px; }
.sup-rangeLbl b{ color:var(--fg); }
.sup-sumChips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.sup-sumChip{
  background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius);
  padding:3px 10px; font-size:12px; color:var(--fg-muted);
}
.sup-sumChip b{ color:var(--fg); }
.sup-tag{
  background:var(--bg-3); border:1px solid var(--border); border-radius:var(--radius);
  padding:1px 7px; font-size:11px; color:var(--fg-dim);
}
.sup-dim{ color:var(--fg-dim); }

/* 처리완료 필터 칩 */
.sup-procFilters{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--fg-dim); margin-left:4px; }
.sup-procF{
  font:inherit; font-size:11.5px; cursor:pointer;
  background:var(--bg-2); color:var(--fg-muted); border:1px solid var(--border);
  border-radius:999px; padding:2px 10px; transition:.12s;
}
.sup-procF:hover{ color:var(--fg); border-color:var(--border-hi); }
.sup-procF.on{ background:var(--primary); color:var(--fg-on); border-color:var(--primary); }

/* 처리완료 체크 셀 */
.sup-procCell{ text-align:center; white-space:nowrap; }
.sup-chk{ display:inline-flex; align-items:center; cursor:pointer; vertical-align:middle; }
.sup-chk input{ width:16px; height:16px; cursor:pointer; accent-color:var(--ok); margin:0; }
.sup-procDt{ display:block; font-size:10.5px; color:var(--fg-dim); margin-top:2px; }

/* 메모 셀 */
.sup-memoCell{ padding:4px 8px; }
.sup-memoInp{
  width:100%; box-sizing:border-box; font:inherit; font-size:12px;
  background:var(--bg-2); color:var(--fg);
  border:1px solid var(--border); border-radius:var(--radius); padding:4px 7px;
  transition:border-color .15s, box-shadow .15s;
}
.sup-memoInp::placeholder{ color:var(--fg-dim); }
.sup-memoInp:focus{ outline:none; border-color:var(--primary); }
.sup-memoInp.saved{ border-color:var(--ok); box-shadow:0 0 0 2px rgba(16,185,129,.18); }

/* 상태 배지 */
.sup-badge{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:11.5px; font-weight:600; border:1px solid var(--border);
}
.sup-st-done{    background:rgba(16,185,129,.14);  border-color:rgba(16,185,129,.45);  color:var(--ok); }
.sup-st-pending{ background:rgba(245,158,11,.14);  border-color:rgba(245,158,11,.45);  color:var(--warn); }
.sup-st-reject{  background:rgba(239,68,68,.14);   border-color:rgba(239,68,68,.45);   color:var(--danger); }

/* 테이블 */
.sup-tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.sup-tbl thead th{
  text-align:left; padding:8px 10px; color:var(--fg-muted); font-weight:600;
  border-bottom:1px solid var(--border-hi); background:var(--bg-1);
  position:sticky; top:0;
}
.sup-tbl td{ padding:7px 10px; border-bottom:1px solid var(--border); color:var(--fg); }
.sup-row{ cursor:pointer; transition:.1s; }
.sup-row:hover td{ background:var(--bg-2); }
.sup-tbl code{ font-family:var(--font-mono); font-size:12px; color:var(--fg-muted); }
.sup-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:0; }
.sup-proj{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:0; color:var(--fg-muted); }

.sup-empty{ display:flex; align-items:center; justify-content:center; gap:8px; padding:40px; color:var(--fg-dim); }

/* 상세 모달 */
.sup-modal{
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.5); align-items:center; justify-content:center; padding:20px;
}
.sup-modalCard{
  background:var(--bg-1); border:1px solid var(--border-hi);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:min(1180px,97vw); max-height:95vh; overflow:auto; padding:16px 20px;
}
.sup-mMeta{ margin-left:auto; font-size:12px; color:var(--fg-dim); }
/* 본문 PDF 뷰어 + 파일 버튼 — 문서를 크게 */
.sup-pdf{ width:100%; height:min(80vh,1000px); border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-2); margin-top:4px; }
.sup-fbtn{ display:inline-block; font-size:12px; padding:3px 11px; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg-2); color:var(--fg); text-decoration:none; margin-left:6px; cursor:pointer; }
.sup-fbtn:hover{ border-color:var(--border-hi); }
.sup-fbtn-dl{ background:var(--primary); color:var(--fg-on); border-color:var(--primary); }
.sup-fbtn-dl:hover{ filter:brightness(1.06); }
.sup-attRow{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--border); }
.sup-attNm{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sup-attBtns{ flex-shrink:0; white-space:nowrap; }
/* 추출 품목 표 패널 */
#supTablePanel:empty{ display:none; }
#supTablePanel{ margin:4px 0 10px; }
.sup-tblWrap{ max-height:40vh; overflow:auto; border:1px solid var(--border); border-radius:var(--radius); }
.sup-extTbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
.sup-extTbl th{ position:sticky; top:0; background:var(--bg-2); color:var(--fg-muted); font-weight:600; padding:6px 9px; border-bottom:1px solid var(--border-hi); text-align:left; white-space:nowrap; }
.sup-extTbl td{ padding:5px 9px; border-bottom:1px solid var(--border); color:var(--fg); vertical-align:top; }
.sup-extTbl tr:hover td{ background:var(--bg-2); }
.sup-tblLbl{ font-size:11.5px; color:var(--fg-muted); font-weight:600; margin:9px 0 3px; }
/* 본문 전체 텍스트 */
.sup-bodyText{ max-height:46vh; overflow:auto; margin:0; padding:10px 12px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius); font-family:var(--font-mono); font-size:12px; line-height:1.55; color:var(--fg); white-space:pre-wrap; word-break:break-word; user-select:text; }
.sup-modalClose{
  float:right; cursor:pointer; font-size:20px; line-height:1; color:var(--fg-dim);
  background:none; border:none;
}
.sup-modalClose:hover{ color:var(--fg); }
.sup-mHdr{ display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.sup-mTitle{ margin:4px 0 14px; font-size:15px; color:var(--fg); }
.sup-fields{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.sup-field{ display:flex; background:var(--bg-1); }
.sup-fLabel{ width:120px; flex-shrink:0; padding:7px 10px; background:var(--bg-2); color:var(--fg-muted); font-size:12.5px; }
.sup-fVal{ padding:7px 10px; color:var(--fg); font-size:13px; }
.sup-mSec{ margin-top:14px; }
.sup-mSecHd{ font-size:12px; color:var(--fg-muted); margin-bottom:6px; font-weight:600; }
.sup-attList{ list-style:none; margin:0; padding:0; }
.sup-attList li{ padding:4px 0; font-size:13px; color:var(--fg); }
.sup-note{ margin-top:14px; padding:8px 10px; background:var(--bg-2); border-radius:var(--radius); color:var(--fg-dim); font-size:12px; }