/* ============================================================
   v1.3.47 — 유류 매입가 월별 입력 목록

   날짜·매입처·유종·환산수량은 마감일지에서 자동으로 올라온다.
   사람이 채우는 칸은 '매입가' 하나뿐이므로, 그 칸이 한눈에 보이고
   아직 안 채운 줄이 바로 구분되어야 한다.
   PC·폰·어두운 화면 모두 대상이다.
   ============================================================ */

.fuel-margin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 9px 12px;
  margin: 12px 0 4px;
}
.fuel-margin-bar > label {
  display: grid;
  gap: 5px;
  font-size: .78rem;
  font-weight: 800;
  color: var(--muted, #647f99);
  min-width: 0;
}
.fuel-margin-bar select,
.fuel-margin-bar input {
  min-height: 40px;
  border-radius: 9px;
  font-size: .88rem;
  font-weight: 700;
  padding: 0 10px;
}
.fuel-margin-bar > button { min-height: 40px; padding: 0 14px; font-weight: 800; white-space: nowrap; }
.fuel-margin-spacer { flex: 1 1 12px; }
.fuel-margin-fill > input { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }

/* 요약 줄 */
.fuel-margin-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 8px 0 10px;
  font-size: .86rem;
}
.fuel-margin-summary b { font-weight: 900; font-variant-numeric: tabular-nums; }
.fuel-margin-note {
  flex: 1 1 100%;
  margin: 4px 0 0;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid #f0d9a6;
  background: #fff7e8;
  color: #8a5a0b;
  font-size: .82rem;
  line-height: 1.5;
  font-weight: 700;
}

/* 목록 */
.fuel-margin-table td,
.fuel-margin-table th { vertical-align: middle; }
.fuel-margin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fuel-margin-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fuel-margin-input {
  width: 108px;
  min-height: 38px;
  padding: 0 9px;
  border-radius: 8px;
  text-align: right;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* 아직 안 채운 줄은 바로 눈에 띄게 */
.fuel-margin-table tr.fuel-margin-pending .fuel-margin-input {
  border-color: #e6b877;
  background: #fffaf0;
}
.fuel-margin-amount { font-weight: 800; }

@media (max-width: 720px) {
  .fuel-margin-bar > label,
  .fuel-margin-bar > button { width: 100%; }
  .fuel-margin-spacer { display: none; }
  .fuel-margin-fill > input { width: 100%; text-align: left; }
  .fuel-margin-input { width: 92px; }
}

/* PC 밝은 화면 — 앞선 판들과 같은 색 언어 */
@media (min-width: 960px) {
  html:not([data-theme="dark"]) .fuel-margin-panel {
    border: 1px solid #cfe3f5 !important;
    background: linear-gradient(150deg, #ffffff 0%, #f3faff 100%) !important;
  }
  html:not([data-theme="dark"]) .fuel-margin-summary { color: #3c5c7a !important; }
  html:not([data-theme="dark"]) .fuel-margin-summary b { color: #12466f !important; }
  html:not([data-theme="dark"]) .fuel-margin-input {
    border: 1px solid #9ecbee !important;
    background: #ffffff !important;
    color: #12466f !important;
  }
  html:not([data-theme="dark"]) .fuel-margin-table tr.fuel-margin-pending .fuel-margin-input {
    border-color: #e6b877 !important;
    background: #fffaf0 !important;
  }
  html:not([data-theme="dark"]) .fuel-margin-table tr.fuel-margin-pending > td { background: #fffdf8 !important; }
}

html[data-theme="dark"] .fuel-margin-note {
  background: rgba(180, 120, 20, .14);
  border-color: rgba(214, 160, 60, .4);
  color: #f0c987;
}
html[data-theme="dark"] .fuel-margin-table tr.fuel-margin-pending .fuel-margin-input {
  border-color: rgba(214, 160, 60, .5);
  background: rgba(180, 120, 20, .12);
}

/* v1.3.48 — 매입가를 안 넣으면 마진에서 빠진다는 경고.
   숫자가 틀린 게 아니라 '아직 덜 찼다' 는 것을 분명히 말해 준다. */
.fuel-margin-warn {
  flex: 1 1 100%;
  margin: 4px 0 0;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid #f0b8b8;
  background: #fff3f3;
  color: #9c3026;
  font-size: .84rem;
  line-height: 1.55;
  font-weight: 700;
}
.fuel-margin-warn b { font-weight: 900; }
html[data-theme="dark"] .fuel-margin-warn {
  background: rgba(180, 60, 50, .14);
  border-color: rgba(214, 100, 90, .4);
  color: #f0a9a0;
}

/* v1.3.51 — 거래 조건 줄과 폴·매입 조건 설정 */
.fuel-margin-terms {
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px dashed var(--line, #dfe8f2);
  background: rgba(120, 150, 180, .05);
}
.fuel-margin-terms > label { font-size: .76rem; }
.fuel-margin-unit { font-weight: 800; }
/* 유종을 못 맞춘 줄은 손댈 수 없다는 걸 보여준다 */
.fuel-margin-table tr.fuel-margin-unmatched > td { opacity: .72; }
.fuel-margin-mode {
  min-height: 34px;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 700;
  padding: 0 6px;
}
.fuel-margin-transport {
  width: 84px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* v1.3.82 — 실마진 매입가 표 입력칸 겹침 방지.
   전역 select/input 은 width:100% 이므로 거래조건의 select 3개를 레이아웃 없이 두면
   각각 셀 전체 폭을 차지해 다음 열까지 침범할 수 있다. 이 표 안에서만 폭과 그리드를 고정하고
   전체 표가 좁아질 때는 .table-scroll 의 가로 스크롤을 사용한다. */
.fuel-margin-table {
  min-width: 1480px;
}
.fuel-margin-row-terms {
  display: grid;
  grid-template-columns: 74px 104px 104px;
  align-items: center;
  gap: 4px;
  min-width: 290px;
  max-width: 290px;
}
.fuel-margin-row-terms select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 34px;
  padding: 0 22px 0 6px;
  font-size: .76rem;
}
.fuel-margin-table .fuel-margin-mode {
  width: 112px;
  min-width: 112px;
  max-width: 112px;
  box-sizing: border-box;
}
.fuel-margin-table .fuel-margin-input {
  width: 108px;
  min-width: 108px;
  max-width: 108px;
  box-sizing: border-box;
}
.fuel-margin-table .fuel-margin-transport {
  width: 84px;
  min-width: 84px;
  max-width: 84px;
  box-sizing: border-box;
}
.purchase-terms-panel .data-table select { min-height: 36px; border-radius: 8px; font-size: .82rem; padding: 0 8px; }
.purchase-terms-panel .data-table td { vertical-align: middle; }

@media (min-width: 960px) {
  html:not([data-theme="dark"]) .fuel-margin-terms {
    border-color: #cddff0 !important;
    background: #f7fbff !important;
  }
  html:not([data-theme="dark"]) .purchase-terms-panel {
    border: 1px solid #cfe3f5 !important;
    background: linear-gradient(150deg, #ffffff 0%, #f6fbff 100%) !important;
  }
}
html[data-theme="dark"] .fuel-margin-terms { border-color: rgba(120,160,200,.3); background: rgba(120,160,200,.07); }