/* Argo — 공통 스타일 (samples/ui 토큰 기준) */
:root {
  --bg: #eef1f4;
  --panel: #fff;
  --line: #d5dbe3;
  --text: #1a2332;
  --muted: #5c6b7a;
  --brand: #2c5f8a;
  --brand-hover: #234a6d;
  --side: #243447;
  --side-hover: #2f4258;
  --side-text: #c8d4e0;
  --side-muted: #8aa0b5;
  --ok: #1f7a4c;
  --warn: #9a6b00;
  --danger: #a33b3b;
  --sidebar-w: 200px;
  --top-h: 48px;
  --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /*
   * Input 역할 색 (배경으로 성격 구분)
   * .in-text     일반 텍스트 — 상품명, 비고, 주소…
   * .in-search   검색·룩업  — 상품/거래처/카테고리 검색
   * .in-num      수량·정수   — 수량, 개수 (우측정렬·콤마)
   * .in-idx      순번·번호   — 결과 번호 등 짧은 번호 (콤마 없음)
   * .in-money    금액        — 단가, 합계 (우측정렬·콤마)
   * .in-code     코드        — SKU, 바코드, 계좌번호
   * .in-date     날짜
   * .in-readonly 읽기전용·자동생성
   */
  --in-h: 34px;
  --in-h-field: 36px;
  --in-text-bg: #ffffff;
  --in-search-bg: #f3ebe1;
  --in-num-bg: #e8f0f8;
  --in-money-bg: #e6f2ed;
  --in-code-bg: #eef1ec;
  --in-date-bg: #ebe6f4;
  --in-readonly-bg: #eef1f4;
  --in-focus-ring: rgba(44, 95, 138, 0.15);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  height: 100%;
  overflow: hidden;
}

html {
  height: 100%;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----- App shell (top / side fixed) ----- */
.app {
  height: 100%;
}

.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-h);
  z-index: 30;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.top .brand {
  font-weight: 700;
  color: var(--brand);
  font-size: 15px;
  letter-spacing: -0.02em;
}

.top .meta {
  color: var(--muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.top .meta a {
  color: var(--muted);
}
.top .meta a:hover {
  color: var(--brand);
  text-decoration: none;
}

.side {
  position: fixed;
  top: var(--top-h);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  z-index: 20;
  background: var(--side);
  color: var(--side-text);
  padding: 8px 0 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.side .nav-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--side-muted);
  padding: 14px 16px 6px;
}

.side a {
  display: block;
  color: var(--side-text);
  padding: 7px 16px;
  text-decoration: none;
  font-size: 13px;
}

.side a:hover,
.side a.active {
  background: var(--side-hover);
  color: #fff;
  text-decoration: none;
}

.main {
  margin-left: var(--sidebar-w);
  margin-top: var(--top-h);
  height: calc(100vh - var(--top-h));
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-gutter: stable;
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
}

.page {
  padding: 16px 20px 32px;
}

/* 목록: 상단 패딩을 sticky 바에 옮겨, 스크롤 시 위쪽 틈으로 행이 비치지 않게 */
.page:has(.list-shell) {
  padding-top: 0;
}

.page:has(.list-shell) > .alert {
  margin-top: 16px;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.page-head h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ----- Forms / buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  background: #f5f7f9;
  text-decoration: none;
}

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.btn-primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: #fff;
}

.btn-ok {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}

.btn-ok:hover {
  filter: brightness(0.92);
  color: #fff;
}

.btn-danger {
  background: #fff;
  border-color: #e2b4b4;
  color: var(--danger);
}

.btn-danger:hover {
  background: #fdf2f2;
  color: var(--danger);
}

.filters .filter-range {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filters .filter-range input[type="date"] {
  width: auto;
  min-width: 0;
  background: var(--in-date-bg);
}

.filters .filter-day {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.filters .day-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

.filters .day-nav-link {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
}

.filters .day-nav-link:hover {
  text-decoration: underline;
}

.filters .day-nav-link.is-active {
  color: var(--text);
  pointer-events: none;
}

.filters .day-nav-sep {
  color: var(--line);
  font-weight: 400;
  user-select: none;
}

.filters .field-check {
  justify-content: flex-end;
}

.filters .check-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

a.doc-link {
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}

a.doc-link:hover {
  text-decoration: underline;
}

.view-items-head {
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 600;
}

.view-items-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 14px 0 8px;
}

.view-items-toolbar .view-items-head {
  margin: 0;
}

.view-items-toolbar .purchase-totals-bar {
  margin: 0;
  padding: 6px 10px;
}

.view-items-toolbar .view-items-link {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.view-items-toolbar .view-items-head .muted {
  font-weight: 500;
  font-size: 12px;
}

.view-items td.qty-in {
  color: var(--ok);
  font-weight: 600;
}

.view-items td.qty-out {
  color: var(--danger);
  font-weight: 600;
}

.view-items-history td.col-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.view-items {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 13px;
}

.view-items th,
.view-items td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
}

.view-items th {
  position: static;
  background: #f3f6f9;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
}

.view-items td.num,
.view-items th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#purchase-lines .line-qty,
#purchase-lines .line-cost,
#purchase-lines .line-vat {
  width: 100%;
  height: var(--in-h);
  display: block;
}

.btn-block {
  width: 100%;
  height: 40px;
  font-size: 14px;
}

.field {
  margin-bottom: 12px;
}

.field label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
}

.field input[type="text"],
.field input[type="password"],
.field input[type="date"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  height: var(--in-h-field);
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
}

.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field select,
.field textarea {
  background: var(--in-text-bg);
}

.field input[type="date"] {
  background: var(--in-date-bg);
}

.field textarea {
  height: auto;
  min-height: 72px;
  padding: 8px 10px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--in-focus-ring);
}

/* ----- Input roles (배경색으로 입력 성격 구분) ----- */
input.in-text,
input.in-search,
input.in-num,
input.in-idx,
input.in-money,
input.in-code,
input.in-date,
input.in-readonly,
.field input.in-text,
.field input.in-search,
.field input.in-num,
.field input.in-idx,
.field input.in-money,
.field input.in-code,
.field input.in-date,
.field input.in-readonly {
  height: var(--in-h);
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  color: var(--text);
  box-sizing: border-box;
}

.field input.in-text,
.field input.in-search,
.field input.in-num,
.field input.in-idx,
.field input.in-money,
.field input.in-code,
.field input.in-date,
.field input.in-readonly {
  height: var(--in-h-field);
  width: 100%;
}

input.in-text,
.field input.in-text { background: var(--in-text-bg); }

input.in-search,
.field input.in-search,
.field input.partner-pick-label,
.field input.product-pick-label,
.field input.ac-input { background: var(--in-search-bg); }

input.in-num,
input.in-idx,
.field input.in-num,
.field input.in-idx { background: var(--in-num-bg); }

input.in-money,
.field input.in-money { background: var(--in-money-bg); }

input.in-code,
.field input.in-code { background: var(--in-code-bg); }

input.in-date,
.field input.in-date,
.field input[type="date"].in-date { background: var(--in-date-bg); }

input.in-readonly,
.field input.in-readonly {
  background: var(--in-readonly-bg);
  color: var(--muted);
  cursor: default;
}

input.in-num,
input.in-idx,
input.in-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

input.in-text:focus,
input.in-search:focus,
input.in-num:focus,
input.in-idx:focus,
input.in-money:focus,
input.in-code:focus,
input.in-date:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--in-focus-ring);
}

.alert {
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 14px;
}

.alert-error {
  background: #f8eaea;
  border: 1px solid #e5c4c4;
  color: var(--danger);
}

.alert-ok {
  background: #e8f5ee;
  border: 1px solid #b9dcc8;
  color: var(--ok);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px;
}

.muted { color: var(--muted); }
.text-sm { font-size: 13px; }

/* ----- Login ----- */
.login-page {
  height: 100%;
  min-height: 100%;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  background: var(--bg);
}

.login-brand {
  background: var(--side);
  color: #fff;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.login-brand .mark {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.2;
}

.login-brand .mark span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--side-muted);
  margin-top: 10px;
  letter-spacing: 0;
}

.login-brand .foot {
  font-size: 12px;
  color: var(--side-muted);
  line-height: 1.5;
}

.login-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}

.login-box {
  width: 100%;
  max-width: 360px;
}

.login-box h1 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.login-box .lead {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 720px) {
  .login-page {
    grid-template-columns: 1fr;
  }
  .login-brand {
    padding: 28px 24px;
    min-height: auto;
  }
  .login-brand .foot { display: none; }
  .side { display: none; }
  .main { margin-left: 0; }
  .list-shell {
    --list-vis-w: calc(100vw - 40px);
  }
}

/* ----- Home shortcuts ----- */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.home-link {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 14px 12px;
  color: var(--text);
  text-decoration: none;
}

.home-link:hover {
  border-color: #b8c7d6;
  text-decoration: none;
  background: #fafbfc;
}

.home-link strong {
  display: block;
  font-size: 14px;
  color: var(--brand);
  margin-bottom: 4px;
}

.home-link span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* ----- List / filters / table ----- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  margin-bottom: 12px;
}

.filters .field {
  margin-bottom: 0;
}

.filters .field input,
.filters .field select {
  min-width: 120px;
  height: 32px;
}

.filters .btn { height: 32px; }

/*
 * 목록 sticky — 스크롤 기준은 .main
 * --list-* 값은 list-view-modal.js 가 측정해 설정
 * 여백은 margin 대신 padding 으로 두어 sticky 구간이 불투명하게 덮이도록 함
 *
 * 제목·툴바는 셸 전체 폭(테이블과 동일)으로 덮어 우측 틈으로 행이 비치지 않게 함.
 * 페이저만 sticky left + --list-vis-w 로 가시 폭 안에 유지.
 */
.list-shell {
  position: relative;
  display: inline-block;
  /* 목록 최소 가로: 일반 컬럼(No·코드·명·상태·금액)이 답답하지 않은 폭 */
  --list-min-w: 1080px;
  --list-pad-x: 20px;
  --list-vis-w: calc(100vw - var(--sidebar-w) - 40px);
  min-width: max(100%, var(--list-min-w));
  vertical-align: top;
  --list-head-h: 0px;
  --list-toolbar-h: 0px;
}

.list-shell > .table-wrap,
.list-shell > .list-toolbar,
.list-shell > .filters,
.list-shell > .page-head {
  min-width: 100%;
}

.list-shell > .page-head {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-bottom: 0;
  padding-top: 16px;
  padding-bottom: 14px;
  background: var(--bg);
}

.list-shell > .list-toolbar {
  position: sticky;
  top: var(--list-head-h);
  z-index: 4;
  margin-bottom: 0;
  padding-bottom: 20px;
  background: var(--bg);
  /* 리스트 상단 보더를 툴바에 고정 — 스크롤 시 table-wrap 보더가 사라져도 유지 */
  border-bottom: 1px solid var(--line);
}

.list-shell > .filters {
  position: sticky;
  top: var(--list-head-h);
  z-index: 4;
  margin-bottom: 0;
  padding-bottom: 12px;
  background: var(--bg);
}

/* 페이저: 화면(가시) 폭을 넘지 않음 — 위로가기와 같은 우측 한계 */
.list-shell > .list-pager {
  box-sizing: border-box;
  width: var(--list-vis-w);
  max-width: var(--list-vis-w);
  min-width: 0;
}

.list-toolbar .filters {
  position: static;
  margin-bottom: 0;
  padding-bottom: 0;
}

.list-toolbar-divider {
  display: block;
  width: 100%;
  height: 0;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.list-toolbar .list-summary {
  margin: 0;
  padding: 20px 0 0;
  background: none;
  border: none;
  box-shadow: none;
}

.list-summary-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
}

.list-summary-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 0 40px;
  background: none;
  border: none;
  border-left: 1px solid var(--line);
  box-shadow: none;
}

.list-summary-stat:first-child {
  border-left: none;
}

.stat-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.stat-value {
  display: block;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.2;
}

.list-summary-stat--total .stat-value {
  font-size: 15px;
  color: var(--brand);
}

.stat-unit {
  margin-left: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
}

/* 상단 선은 sticky 툴바 border-bottom 이 담당 */
.list-shell .table-wrap:has(table.data) {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

table.data {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

table.data th,
table.data td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
  font-size: 13px;
}

.list-shell table.data th {
  background: linear-gradient(180deg, #e4ecf4 0%, #d3dee9 100%);
  background-clip: padding-box;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  position: sticky;
  top: var(--list-toolbar-h);
  z-index: 3;
  box-shadow: 0 1px 0 var(--line);
}

.list-shell table.data tbody td {
  background: var(--panel);
}

/* 목록 외 테이블(폼 품목 등) — sticky 불필요 시 기본 헤더 스타일만 */
table.data th {
  background: linear-gradient(180deg, #e4ecf4 0%, #d3dee9 100%);
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
}

table.data tbody tr.data-row { cursor: pointer; }
table.data tbody tr.data-row:hover { background: #f5f8fb; }
table.data tbody tr.data-row.selected { background: #e4eef7; }
table.data tbody tr.data-row:hover td { background: #f5f8fb; }
table.data tbody tr.data-row.selected td { background: #e4eef7; }

table.data td.num,
table.data th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

table.data th.col-no,
table.data td.col-no {
  width: 50px;
  min-width: 50px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 12px;
  border-right: 1px solid #e8ecf1;
}

.list-shell table.data th.col-no {
  box-shadow: 1px 0 0 #e8ecf1, 0 1px 0 var(--line);
}

.inventory-list-shell table.data {
  width: max-content;
  table-layout: fixed;
}

.inventory-list-shell table.data col.col-no {
  width: 50px;
}

.inventory-list-shell table.data col.col-sku {
  width: 120px;
}

.inventory-list-shell table.data col.col-name {
  width: 220px;
}

.inventory-list-shell table.data col.col-wh,
.inventory-list-shell table.data col.col-wh-total {
  width: 88px;
}

.inventory-list-shell table.data col.col-money {
  width: 100px;
}

.inventory-list-shell table.data th.col-wh,
.inventory-list-shell table.data td.col-wh,
.inventory-list-shell table.data th.col-wh-total,
.inventory-list-shell table.data td.col-wh-total,
.inventory-list-shell table.data th.col-money,
.inventory-list-shell table.data td.col-money {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 1px solid #c5d0dc;
}

.inventory-list-shell table.data th.col-wh,
.inventory-list-shell table.data td.col-wh,
.inventory-list-shell table.data th.col-wh-total,
.inventory-list-shell table.data td.col-wh-total {
  width: 88px;
}

.inventory-list-shell table.data th.col-wh-total,
.inventory-list-shell table.data td.col-wh-total {
  font-weight: 600;
}

.inventory-list-shell table.data th.col-wh,
.inventory-list-shell table.data th.col-wh-total,
.inventory-list-shell table.data th.col-money {
  box-shadow: 0 1px 0 var(--line);
}

.inventory-list-shell table.data td.col-wh-inactive,
.inventory-list-shell table.data th.col-wh-inactive {
  color: #9aa3ad;
}

.inventory-list-shell table.data td.col-wh.qty-zero {
  color: #c0c7cf;
}

.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}

.badge-on { background: #e6f5ec; color: var(--ok); border-color: #b7dfc6; }
.badge-off { background: #f0f1f3; color: #6b7280; border-color: #d8dbe0; }
.badge-type { background: #eef2f7; color: #3d5470; border-color: #c9d4e0; }
.badge-doc-draft { background: #f0f1f3; color: #4b5563; border-color: #d1d5db; }
.badge-doc-confirmed { background: #e6f5ec; color: var(--ok); border-color: #b7dfc6; }
.badge-doc-cancelled { background: #fdecec; color: var(--danger); border-color: #f0c2c2; }
.badge-doc-closed { background: #e6f5ec; color: var(--ok); border-color: #b7dfc6; }
.badge-doc-open { background: #f0f1f3; color: #4b5563; border-color: #d1d5db; }
.badge-doc-return { background: #fdecec; color: var(--danger); border-color: #f0c2c2; }

.empty-row {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ----- Back to top (list pages) ----- */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 28px;
  z-index: 45;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(44, 95, 138, 0.28);
  border-radius: 4px;
  background:
    linear-gradient(165deg, #3a6f9c 0%, var(--brand) 48%, var(--brand-hover) 100%);
  color: #f4f8fb;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 20px rgba(36, 52, 71, 0.18);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background:
    linear-gradient(165deg, #4579a6 0%, #34709c 45%, var(--brand) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 10px 24px rgba(36, 52, 71, 0.24);
}

.back-to-top:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 4px 12px rgba(36, 52, 71, 0.16);
}

.back-to-top-icon {
  display: flex;
  line-height: 0;
}

.back-to-top-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

table.data tr.empty-data-row td {
  padding: 28px 10px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  border-bottom: 0;
  white-space: normal;
}

/* ----- List pager ----- */
.list-pager {
  position: sticky;
  left: var(--list-pad-x);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 0;
  margin-top: 10px;
  margin-bottom: 100px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--muted);
  background: var(--bg);
}

.list-pager-meta {
  font-variant-numeric: tabular-nums;
}

.list-pager-nav,
.list-pager-per {
  margin-left: 100px;
}

.list-pager-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.btn-pager {
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
}

.btn-pager:hover {
  text-decoration: none;
}

.btn-pager.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  cursor: default;
}

.btn-pager.disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.list-pager-ellipsis {
  padding: 0 2px;
  color: var(--muted);
}

.list-pager-per label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.list-pager-per-select {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 6px;
  font: inherit;
  background: #fff;
  color: var(--text);
}

/* ----- View modal (목록 조회) ----- */
body.modal-open {
  overflow: hidden;
}

body.modal-open .main {
  overflow: hidden;
}

.view-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 30, 40, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.view-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.view-modal {
  width: min(520px, 100%);
  max-height: min(80vh, 740px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.15s ease;
}

.view-modal-purchase,
.view-modal.has-items {
  width: min(960px, 100%);
  max-height: min(88vh, 900px);
}

.view-modal-purchase .view-modal-body {
  padding: 16px 20px;
}

.view-modal-purchase .kv {
  grid-template-columns: 100px 1fr 100px 1fr;
}

.view-modal-purchase .kv dd.span-3 {
  grid-column: span 3;
}

.view-modal-purchase .kv dt.kv-end {
  border-left: 1px solid #e8ecf1;
}

.view-modal-purchase .view-items {
  table-layout: fixed;
  width: 100%;
  font-size: 13px;
}

.view-modal-purchase .view-items th,
.view-modal-purchase .view-items td {
  padding: 7px 8px;
}

.view-modal-purchase .view-items tbody tr:last-child th,
.view-modal-purchase .view-items tbody tr:last-child td {
  border-bottom: 0;
}

.view-modal-purchase .view-items th.col-no,
.view-modal-purchase .view-items td.col-no {
  width: 44px;
  min-width: 44px;
}

.view-modal-purchase .view-items th:nth-child(2),
.view-modal-purchase .view-items td:nth-child(2) {
  width: 88px;
}

.view-modal-purchase .view-items th.col-name,
.view-modal-purchase .view-items td.col-name {
  width: auto;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.view-modal-purchase .view-items th.num,
.view-modal-purchase .view-items td.num {
  white-space: nowrap;
  width: 92px;
}

.view-modal-purchase .view-items th:nth-child(4),
.view-modal-purchase .view-items td:nth-child(4) {
  width: 56px;
}

@media (max-width: 720px) {
  .view-modal-purchase .kv {
    grid-template-columns: 96px 1fr;
  }

  .view-modal-purchase .kv dt.kv-end {
    border-left: 0;
  }

  .view-modal-purchase .kv dd.span-3 {
    grid-column: span 1;
  }
}

.ps2-product-search-modal,
.ps2-partner-search-modal {
  width: min(820px, 100%);
  height: min(85vh, 800px);
  max-height: min(85vh, 800px);
}

.ps2-product-search-modal .view-modal-body,
.ps2-partner-search-modal .view-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ps2-ps-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex: 0 0 auto;
  align-items: center;
}

.ps2-ps-no-input {
  flex: 0 0 72px;
  width: 72px;
  height: var(--in-h);
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: var(--in-num-bg);
}

.ps2-ps-no-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--in-focus-ring);
}

.ps2-ps-q {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--in-h);
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  background: var(--in-search-bg);
}

.ps2-ps-q:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--in-focus-ring);
}

.ps2-ps-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
  min-height: 1.2em;
  flex: 0 0 auto;
}

.ps2-ps-list-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 4px 2px 8px;
}

.ps2-ps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ps2-ps-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: start;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 12px 12px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: inherit;
  box-shadow: 0 1px 0 rgba(20, 40, 60, 0.03);
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.ps2-ps-item:hover,
.ps2-ps-item:focus,
.ps2-ps-item.is-num-active {
  outline: none;
  border-color: #7aa0c2;
  background: #f3f8fc;
  box-shadow: 0 0 0 2px rgba(122, 160, 194, 0.2);
}

.ps2-ps-item.is-num-active .ps2-ps-no {
  background: #1f5f8b;
  color: #fff;
}

.ps2-ps-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #eef3f8;
  color: #4a6070;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ps2-ps-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.ps2-ps-code {
  font-size: 12px;
  font-weight: 600;
  color: #1f5f8b;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.ps2-ps-name {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  word-break: break-word;
}

@media (max-width: 640px) {
  .ps2-ps-grid {
    grid-template-columns: 1fr;
  }
}

.product-pick,
.partner-pick {
  display: flex;
  align-items: center;
  gap: 6px;
}

.product-pick-label,
.partner-pick-label {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--in-h);
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  background: var(--in-search-bg);
  cursor: text;
}

.product-pick-label:focus,
.partner-pick-label:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--in-focus-ring);
}

.product-pick .btn,
.partner-pick .btn {
  flex: 0 0 auto;
  height: var(--in-h);
  padding: 0 12px;
}

.product-pick-clear,
.partner-pick-clear {
  min-width: 34px;
  padding: 0;
}

#bom-table input.bom-qty {
  width: 100%;
  height: var(--in-h);
  display: block;
}

.view-modal-backdrop.open .view-modal {
  transform: none;
}

.view-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.view-modal-head h2 {
  margin: 0 0 4px;
  font-size: 16px;
}

.view-modal-sub {
  color: var(--muted);
  font-size: 12px;
}

.view-modal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.view-modal-nav .pos {
  font-size: 12px;
  color: var(--muted);
  min-width: 42px;
  text-align: center;
}

.view-modal-body {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.view-modal-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}

.kv {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0;
  font-size: 13px;
  border-top: 1px solid #e8ecf1;
}

.kv dt,
.kv dd {
  margin: 0;
  padding: 9px 10px;
  border-bottom: 1px solid #e8ecf1;
  word-break: break-word;
}

.kv dt {
  color: var(--muted);
  background: #f7f9fb;
  border-right: 1px solid #e8ecf1;
}

.kv dd {
  background: #fff;
}

/* 셋트 목록: 구성 단품 행 펼침 + 셋트 컬럼 rowspan */
table.data.set-list td[rowspan] {
  vertical-align: middle;
  background: #fafbfc;
}

table.data.set-list tr.set-group-start > td {
  border-top: 1px solid var(--line);
}

table.data.set-list tr.set-group-start:first-child > td {
  border-top: 0;
}

table.data.set-list td.bom-code {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--brand);
}

table.data.set-list td.bom-qty {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

table.data.set-list td.is-off {
  color: var(--muted);
  text-decoration: line-through;
}

table.data.set-list tbody tr.data-row.is-hover,
table.data.set-list tbody tr.data-row.is-hover td,
table.data.set-list tbody tr.data-row.selected,
table.data.set-list tbody tr.data-row.selected td {
  background: #e4eef7;
}

table.data.set-list tbody tr.data-row.is-hover td[rowspan],
table.data.set-list tbody tr.data-row.selected td[rowspan] {
  background: #e4eef7;
}

/* 매입 목록: 품목 행 펼침 + 전표 컬럼 rowspan
 * table-layout:fixed + 고정 폭 — 데이터 유무와 관계없이 헤더 너비 동일 */
table.data.purchase-list {
  table-layout: fixed;
  width: 1552px;
  max-width: 100%;
}

table.data.purchase-list th,
table.data.purchase-list td {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

table.data.purchase-list .col-no { width: 50px; min-width: 50px; }
table.data.purchase-list .col-date { width: 100px; }
table.data.purchase-list .col-partner { width: 100px; }
table.data.purchase-list .col-employee { width: 72px; }
table.data.purchase-list .col-warehouse { width: 80px; }
table.data.purchase-list .col-product { width: 240px; }
table.data.purchase-list .col-status { width: 110px; white-space: normal; }

.purchase-source {
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
}
table.data.purchase-list th.num,
table.data.purchase-list td.num { width: 100px; }

table.data.purchase-list td.purchase-product {
  width: 240px;
  max-width: 240px;
  min-width: 0;
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  font-size: 12.5px;
  line-height: 1.35;
}

table.data.purchase-list td[rowspan],
table.data.purchase-list td.span-cell {
  vertical-align: middle;
  background: #fafbfc;
}

table.data.purchase-list tr.purchase-group-start > td,
table.data.purchase-list tr.purchase-group-only > td {
  border-top: 1px solid var(--line);
}

table.data.purchase-list tr.purchase-group-start:first-child > td,
table.data.purchase-list tr.purchase-group-only:first-child > td {
  border-top: 0;
}

table.data.purchase-list tr.purchase-group-start > td:not([rowspan]),
table.data.purchase-list tr.purchase-group-cont > td {
  border-bottom: 1px solid #edf0f3;
}

table.data.purchase-list tr.purchase-group-last > td,
table.data.purchase-list tr.purchase-group-only > td {
  border-bottom: 1px solid var(--line);
}

table.data.purchase-list .purchase-product-code {
  display: block;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
  font-weight: 600;
  white-space: nowrap;
}

table.data.purchase-list .purchase-product-name {
  display: block;
  color: var(--text);
}

table.data.purchase-list tbody tr.data-row.is-hover,
table.data.purchase-list tbody tr.data-row.is-hover td,
table.data.purchase-list tbody tr.data-row.selected,
table.data.purchase-list tbody tr.data-row.selected td {
  background: #e4eef7;
}

table.data.purchase-list tbody tr.data-row.is-hover td[rowspan],
table.data.purchase-list tbody tr.data-row.is-hover td.span-cell,
table.data.purchase-list tbody tr.data-row.selected td[rowspan],
table.data.purchase-list tbody tr.data-row.selected td.span-cell {
  background: #e4eef7;
}

table.data.purchase-list tbody tr.data-row.is-hover > td:not([rowspan]):not(.span-cell),
table.data.purchase-list tbody tr.data-row.selected > td:not([rowspan]):not(.span-cell) {
  border-bottom-color: #c8d8e8;
}

.view-section-title {
  font-size: 13px;
  font-weight: 700;
  margin: 16px 0 8px;
  color: var(--text);
}

.exp-cat-name.depth-2 {
  padding-left: 12px;
  color: var(--text);
}

.exp-cat-branch {
  color: var(--muted);
  margin-right: 4px;
}

.exp-cat-actions {
  white-space: nowrap;
}

.exp-cat-actions .btn,
.exp-cat-actions form {
  margin-right: 4px;
}

.exp-cat-actions form {
  display: inline;
}

.set-bom-modal-table {
  margin: 0;
  font-size: 13px;
}

.set-bom-modal-table th.num,
.set-bom-modal-table td.num {
  text-align: right;
  white-space: nowrap;
}

.set-bom-modal-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ----- Form page ----- */
.form-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px;
  max-width: 720px;
}

.form-card-wide {
  max-width: 880px;
}

/* ----- 매입 등록/수정 폼 ----- */
.page:has(.form-card-purchase) {
  min-width: 0;
}

.form-card.form-card-purchase {
  max-width: 1040px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.form-card-purchase .form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 18px;
}

.form-card-purchase .form-grid .cols-2,
.form-card-purchase .form-grid .cols-3 {
  grid-column: 1 / -1;
}

.form-card-purchase .form-section-head {
  min-width: 0;
}

.purchase-totals-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 20px;
  margin: 0 0 10px;
  padding: 10px 12px;
  background: #f6f8fa;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.purchase-totals-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}

.purchase-totals-item .label {
  color: var(--muted);
  font-weight: 600;
}

.purchase-totals-item .value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.purchase-totals-item--total .value {
  font-size: 15px;
  color: var(--brand);
}

.form-card-purchase .table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  margin: 0 0 12px;
  -webkit-overflow-scrolling: touch;
}

.form-card-purchase #purchase-lines {
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}

/* % 만 사용 — px 고정열이 100% 를 넘어 폼 밖으로 밀리는 것 방지 */
.form-card-purchase #purchase-lines col.col-product { width: 45%; }
.form-card-purchase #purchase-lines col.col-qty { width: 6%; }
.form-card-purchase #purchase-lines col.col-cost { width: 11%; }
.form-card-purchase #purchase-lines col.col-supply { width: 10%; }
.form-card-purchase #purchase-lines col.col-vat { width: 9%; }
.form-card-purchase #purchase-lines col.col-total { width: 11%; }
.form-card-purchase #purchase-lines col.col-act { width: 5%; }

.form-card-purchase #purchase-lines th,
.form-card-purchase #purchase-lines td {
  vertical-align: middle;
  white-space: normal;
  overflow: hidden;
  padding: 6px 5px;
  box-sizing: border-box;
}

.form-card-purchase #purchase-lines th:first-child,
.form-card-purchase #purchase-lines td:first-child {
  padding-left: 8px;
}

.form-card-purchase #purchase-lines th:last-child,
.form-card-purchase #purchase-lines td:last-child {
  padding-right: 8px;
}

.form-card-purchase #purchase-lines th.num,
.form-card-purchase #purchase-lines td.num {
  white-space: nowrap;
}

.form-card-purchase #purchase-lines td:first-child {
  min-width: 0;
}

.form-card-purchase #purchase-lines .product-pick {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.form-card-purchase #purchase-lines .product-pick-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-card-purchase #purchase-lines .product-pick-search {
  flex: 0 0 auto;
  padding: 0 7px;
  font-size: 12px;
}

.form-card-purchase #purchase-lines .product-pick-clear {
  flex: 0 0 28px;
  min-width: 28px;
  width: 28px;
  padding: 0;
}

.form-card-purchase #purchase-lines .line-qty,
.form-card-purchase #purchase-lines .line-cost,
.form-card-purchase #purchase-lines .line-vat {
  width: 100%;
  max-width: 100%;
  height: var(--in-h);
  display: block;
  margin-left: auto;
  box-sizing: border-box;
}

.form-card-purchase #purchase-lines input.in-num,
.form-card-purchase #purchase-lines input.in-idx {
  background: var(--in-num-bg);
}

.form-card-purchase #purchase-lines input.in-money {
  background: var(--in-money-bg);
}

.form-card-purchase #purchase-lines input.in-search,
.form-card-purchase #purchase-lines .product-pick-label {
  background: var(--in-search-bg);
}

.form-card-purchase #purchase-lines .line-supply,
.form-card-purchase #purchase-lines .line-total {
  font-variant-numeric: tabular-nums;
}

.form-card-purchase #purchase-lines .line-remove {
  width: 100%;
  min-width: 0;
  padding: 0 4px;
  font-size: 12px;
}

.form-card-purchase #purchase-lines tfoot th {
  font-weight: 700;
}

@media (max-width: 960px) {
  .form-card-purchase .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .form-card-purchase .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-section-title {
  font-size: 15px;
  margin: 20px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.form-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.form-section-head .form-section-title {
  margin: 0 0 4px;
  padding-top: 0;
  border-top: 0;
}

.form-section-head .hint {
  margin: 0;
}

.form-section-head-actions {
  flex: 0 0 auto;
  align-self: center;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.form-grid .full,
.form-grid .cols-2 { grid-column: 1 / -1; }

.form-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.kbd-hint {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted, #6b7280);
  background: var(--bg-soft, #f3f4f6);
  border: 1px solid var(--line);
  border-radius: 3px;
  vertical-align: middle;
}

.btn-primary .kbd-hint {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

.field .readonly-value {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f3f6f9;
  color: var(--text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.field .readonly-value.is-placeholder {
  color: var(--muted);
  font-variant-numeric: normal;
}


.field .err {
  margin-top: 4px;
  font-size: 12px;
  color: var(--danger);
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ----- Category split (tree + form) ----- */
.page-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cat-help {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.cat-help .hint,
.cat-empty-form .hint {
  color: var(--muted);
  font-size: 13px;
}

.cat-split {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 12px;
  align-items: stretch;
  min-height: calc(100vh - 160px);
}

.cat-pane {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  overflow: hidden;
}

.cat-pane-head {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: #f7f9fb;
}

.cat-pane-head-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cat-pane-head-tools input[type="search"],
.cat-pane-head-tools .cat-tree-tool-btn,
.cat-pane-head-tools .cat-add-root-btn,
.cat-pane-head-tools .cat-save-btn {
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  line-height: 30px;
}

.cat-pane-head-tools input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  background: #fff;
  line-height: normal;
}

.cat-tree-tool-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.cat-tree-tool-btn:hover {
  color: var(--text);
  background: #f3f6f9;
  border-color: #c5ced8;
}

.cat-add-root-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px 0 10px;
  white-space: nowrap;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #1f5f8b;
  background: #eaf3fa;
  border: 1px solid #9fc0d9;
  border-radius: 4px;
  box-shadow: none;
  cursor: pointer;
}

.cat-add-root-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  display: block;
  transform: translateY(0.5px);
}

.cat-add-root-btn > span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  height: 14px;
}

.cat-add-root-btn:hover {
  color: #174a6c;
  background: #d9eaf5;
  border-color: #7aa8c6;
}

.cat-add-root-btn:active {
  background: #cde1f0;
}

.cat-save-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  white-space: nowrap;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #3a7ca5;
  border: 1px solid #2f678a;
  border-radius: 4px;
  cursor: pointer;
}

.cat-save-btn:hover:not(:disabled) {
  background: #326d92;
}

.cat-save-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.cat-save-btn.is-dirty {
  background: #2a6b4a;
  border-color: #215538;
}

.cat-save-btn.is-dirty:hover:not(:disabled) {
  background: #245c44;
}

.cat-pane-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 6px 0 50px;
  -webkit-overflow-scrolling: touch;
}

.cat-pane-alone {
  max-width: 720px;
  height: calc(100vh - 180px);
  max-height: calc(100vh - 180px);
  min-height: 320px;
  position: relative;
}

.cat-pane-alone::after {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 40px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.75) 100%
  );
  pointer-events: none;
  z-index: 3;
}

.cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cat-list .cat-list {
  padding-left: 14px;
  border-left: 1px dashed #d5dbe3;
  margin-left: 10px;
  margin-top: 1px;
}

.cat-item {
  margin: 0;
}

.cat-item.is-filtered-out {
  display: none;
}

.cat-item.is-collapsed > .cat-list {
  display: none;
}

.cat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 8px 0 4px;
  border-radius: 3px;
  cursor: grab;
  user-select: none;
}

.cat-row:hover {
  background: #eef3f8;
}

.cat-item.is-selected > .cat-row {
  background: #dce8f4;
  outline: 1px solid #b7cfe3;
}

.cat-item[data-depth="1"] > .cat-row .cat-name { color: #1f5f8b; font-weight: 600; }
.cat-item[data-depth="2"] > .cat-row .cat-name { color: #2a6b4a; }
.cat-item[data-depth="3"] > .cat-row .cat-name { color: #6b4a2a; }

.cat-row:active {
  cursor: grabbing;
}

.cat-twist,
.cat-twist-spacer {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cat-twist {
  padding: 0;
  border: 0;
  background: transparent;
  color: #6b7785;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
}

.cat-twist:hover {
  background: #e4ebf2;
  color: var(--text);
}

.cat-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.cat-item.is-off > .cat-row .cat-name {
  color: #8a93a0;
  text-decoration: line-through;
}

/* ----- Category edit modal ----- */
.cat-edit-modal {
  width: min(440px, 100%);
}

.cat-edit-modal .field {
  margin-bottom: 10px;
}

.cat-edit-modal .field label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--muted);
}

.cat-edit-modal .field input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  box-sizing: border-box;
}

.cat-edit-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cat-edit-name-row input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.cat-edit-name-row .btn {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px;
}

.cat-edit-child {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.cat-edit-child-title {
  margin: 0 0 4px;
  font-size: 14px;
}

.cat-edit-child .hint,
.cat-edit-child-blocked {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
}

.cat-edit-child-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.cat-edit-child-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
}

.cat-edit-child[data-child-depth="2"] input {
  color: #2a6b4a;
  background: #eaf7f0;
  border-color: #b5d9c5;
}

.cat-edit-child[data-child-depth="3"] input {
  color: #6b4a2a;
  background: #f7efe6;
  border-color: #dcc4a8;
}

.cat-edit-child[data-child-depth="2"] #cat-edit-child-add {
  color: #2a6b4a;
  background: #d9f0e3;
  border-color: #9ccbb3;
}

.cat-edit-child[data-child-depth="3"] #cat-edit-child-add {
  color: #6b4a2a;
  background: #efe2d2;
  border-color: #c9ae90;
}

.cat-edit-delete-btn {
  color: #a33b3b;
  background: #fdf2f2;
  border-color: #e2b6b6;
}

.cat-edit-delete-btn:hover {
  color: #fff;
  background: #c44949;
  border-color: #a33b3b;
}

.cat-item.sortable-ghost {
  opacity: 0.45;
}

.cat-item.sortable-drag > .cat-row {
  background: #e3eef7;
  box-shadow: 0 2px 8px rgba(20, 40, 60, 0.12);
}

.cat-empty-form {
  margin: auto;
  text-align: center;
  color: var(--muted);
  padding: 40px 16px;
}

.cat-empty-form p {
  margin: 0 0 8px;
}

@media (max-width: 860px) {
  .cat-pane-alone {
    max-width: none;
    height: calc(100vh - 200px);
    max-height: calc(100vh - 200px);
    min-height: 280px;
  }
}

/* ----- Autocomplete ----- */
.ac {
  position: relative;
  display: block;
}

.ac-input {
  width: 100%;
  height: var(--in-h-field);
  padding: 0 32px 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  background: var(--in-search-bg);
}

.ac-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--in-focus-ring);
}

.ac-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  display: none;
  z-index: 1;
}

.ac.is-filled .ac-clear,
.ac.is-open .ac-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ac-clear:hover {
  background: #eef2f6;
  color: #333;
}

.ac-list {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: 240px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(20, 40, 60, 0.12);
}

.ac-option {
  padding: 7px 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.35;
}

.ac-option:hover,
.ac-option.is-active {
  background: #e8f0f8;
}

.ac-option-empty {
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
  padding-bottom: 8px;
}

.ac-option-muted {
  color: var(--muted);
  cursor: default;
  font-size: 12px;
}

.ac-option-muted:hover {
  background: transparent;
}

.ac-opt-name {
  color: inherit;
}

.ac-opt-sub {
  color: var(--muted);
  font-weight: 400;
}

.ac-product .ac-input {
  font-size: 13px;
}