/* ══════════════════════════════════════════════════════════════════
   v1.3.64 — 유종 색 통일
   2026-09-13 사장님 지시:
     "무연 노랑 · 경유 녹색 · 고급 주황으로 통일. 탱크도 그래프도 전부.
      달력에서 매입한 기록하고 들어올 매입은 다르게."

   두 가지를 지킨다.

   1) 색(hue)은 오직 '유종' 을 뜻한다.
      예전에는 화면마다 제 색을 만들어 썼다 — 실마진 화면의 경유는 파랑이었고,
      달력의 매입 뱃지는 유종과 상관없이 전부 같은 초록이었으며, 탱크 막대는
      재고가 적으면 빨강·주황으로 덮어써서 무연 탱크가 노랑이 아니었다.
      이제 칠하는 색은 styles.css 의 --fuel-* 토큰에서만 가져온다.

   2) '들어올 매입' 과 '들어온 매입' 은 색이 아니라 '모양' 으로 나눈다.
      색을 쓰면 유종 구분과 싸운다. 그래서
        · 입고 예정 → 점선 테두리, 연한 바탕, ⏱
        · 실제 입고 → 실선 테두리 + 왼쪽 굵은 색띠, 진한 바탕, ✓
      서식(크기·자리·글자)은 그대로 두고 테두리와 바탕만 바꿨다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 유종 바탕·글자 한 벌 ────────────────────────────────────────── */
.fuel-bg-reg  { --fuel-ink: #7E6000; --fuel-line: var(--fuel-reg);  --fuel-soft: var(--fuel-reg-wash); }
.fuel-bg-die  { --fuel-ink: #176B47; --fuel-line: var(--fuel-die);  --fuel-soft: var(--fuel-die-wash); }
.fuel-bg-hi   { --fuel-ink: #A8340A; --fuel-line: var(--fuel-hi);   --fuel-soft: var(--fuel-hi-wash); }
.fuel-bg-ker  { --fuel-ink: #4B5563; --fuel-line: var(--fuel-ker);  --fuel-soft: var(--fuel-ker-wash); }
.fuel-bg-urea { --fuel-ink: #4B32A0; --fuel-line: var(--fuel-urea); --fuel-soft: var(--fuel-urea-wash); }
.fuel-bg-etc  { --fuel-ink: #44515F; --fuel-line: var(--fuel-etc);  --fuel-soft: var(--fuel-etc-wash); }

/* ── 달력: 매입 뱃지 ─────────────────────────────────────────────
   예전 규칙이 !important 로 한 색을 밀어넣고 있어서 같은 무게로 되돌린다. */
.calendar-day.purchase-mode .badge.purchase-badge,
.calendar-day.purchase-mode .badge.delivery-badge {
  background: var(--fuel-soft, var(--fuel-etc-wash)) !important;
  color: var(--fuel-ink, #44515F) !important;
  border: 1px solid var(--fuel-line, var(--fuel-etc)) !important;
  font-weight: 800;
}

/* 들어올 매입 — 점선. 아직 안 들어온 것이라 테두리를 끊어 놓는다. */
.calendar-day.purchase-mode .badge.delivery-badge.expected {
  border-style: dashed !important;
  background: transparent !important;
  font-weight: 750;
}

/* 들어온 매입 — 실선 + 왼쪽 굵은 색띠 */
.calendar-day.purchase-mode .badge.delivery-badge.received,
.calendar-day.purchase-mode .badge.purchase-badge.actual {
  border-style: solid !important;
  box-shadow: inset 3px 0 0 var(--fuel-line, var(--fuel-etc)) !important;
  padding-left: 8px;
  font-weight: 900;
}

/* ── 달력 아닌 곳의 매입 뱃지도 같은 색을 쓴다 ──────────────────── */
.badge.purchase-badge.fuel-bg-reg, .badge.purchase-badge.fuel-bg-die,
.badge.purchase-badge.fuel-bg-hi,  .badge.purchase-badge.fuel-bg-ker,
.badge.purchase-badge.fuel-bg-urea,.badge.purchase-badge.fuel-bg-etc {
  background: var(--fuel-soft); color: var(--fuel-ink); border-color: var(--fuel-line);
}

/* ── 탱크 잔량 예측 막대 ────────────────────────────────────────── */
.tfr-bar i { background: var(--fuel-bar, var(--fuel-etc)) !important; }
/* 부족·위험은 줄 왼쪽 테두리(.tank-forecast-row.bad/.warn)가 이미 말한다.
   막대까지 빨강으로 덮으면 그 탱크의 유종이 무엇인지 알 수 없게 된다. */
.tank-forecast-row.bad .tfr-bar,
.tank-forecast-row.warn .tfr-bar { outline: 1px solid rgba(0,0,0,.06); }

/* ── 실마진 분석 재고 줄 ────────────────────────────────────────
   theme-v1354 가 자기 색을 갖고 있었다(경유가 파랑이었다). 토큰으로 되돌린다. */
.profit-stock-row.fuel-premium::before  { background: var(--fuel-hi); }
.profit-stock-row.fuel-regular::before  { background: var(--fuel-reg); }
.profit-stock-row.fuel-diesel::before   { background: var(--fuel-die); }
.profit-stock-row.fuel-kerosene::before { background: var(--fuel-ker); }
.profit-stock-row.fuel-urea::before     { background: var(--fuel-urea); }
.profit-stock-row.fuel-etc::before      { background: var(--fuel-etc); }
.profit-stock-row.fuel-premium > .psr-track > em  { background: var(--fuel-hi); }
.profit-stock-row.fuel-regular > .psr-track > em  { background: var(--fuel-reg); }
.profit-stock-row.fuel-diesel  > .psr-track > em { background: var(--fuel-die); }
.profit-stock-row.fuel-kerosene > .psr-track > em { background: var(--fuel-ker); }
.profit-stock-row.fuel-urea    > .psr-track > em  { background: var(--fuel-urea); }
.profit-stock-row.fuel-etc     > .psr-track > em  { background: var(--fuel-etc); }
html:not([data-theme="dark"]) .profit-stock-row.fuel-premium  { background: var(--fuel-hi-wash) !important; }
html:not([data-theme="dark"]) .profit-stock-row.fuel-regular  { background: var(--fuel-reg-wash) !important; }
html:not([data-theme="dark"]) .profit-stock-row.fuel-diesel   { background: var(--fuel-die-wash) !important; }
html:not([data-theme="dark"]) .profit-stock-row.fuel-kerosene { background: var(--fuel-ker-wash) !important; }
html:not([data-theme="dark"]) .profit-stock-row.fuel-urea     { background: var(--fuel-urea-wash) !important; }
html:not([data-theme="dark"]) .profit-stock-row.fuel-etc      { background: var(--fuel-etc-wash) !important; }

/* ── 유종 범례: 색만으로 구분시키지 않는다 — 이름을 늘 같이 적는다 ── */
.fuel-legend span, .daily-legend b { white-space: nowrap; }

/* ── 좁은 화면 ──────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .calendar-day.purchase-mode .badge.purchase-badge,
  .calendar-day.purchase-mode .badge.delivery-badge { padding-left: 6px; }
  .calendar-day.purchase-mode .badge.delivery-badge.received,
  .calendar-day.purchase-mode .badge.purchase-badge.actual { box-shadow: inset 2px 0 0 var(--fuel-line, var(--fuel-etc)) !important; }
}

/* ── 어두운 화면 ────────────────────────────────────────────────
   유종 색(hue)은 그대로 두고 바탕만 어둡게 한다. 색이 바뀌면 같은 유종이
   낮과 밤에 다른 색이 된다. */
html[data-theme="dark"] .fuel-bg-reg  { --fuel-ink: #F2CE5C; --fuel-soft: rgba(229,178,26,.20); }
html[data-theme="dark"] .fuel-bg-die  { --fuel-ink: #7FD9AE; --fuel-soft: rgba(47,158,107,.18); }
html[data-theme="dark"] .fuel-bg-hi   { --fuel-ink: #F09068; --fuel-soft: rgba(200,80,12,.22); }
html[data-theme="dark"] .fuel-bg-ker  { --fuel-ink: #C3CBD6; --fuel-soft: rgba(107,114,128,.20); }
html[data-theme="dark"] .fuel-bg-urea { --fuel-ink: #B6A3F0; --fuel-soft: rgba(110,79,199,.20); }
html[data-theme="dark"] .fuel-bg-etc  { --fuel-ink: #C3CBD6; --fuel-soft: rgba(91,102,114,.20); }
html[data-theme="dark"] .profit-stock-row.fuel-premium  { background: rgba(200,80,12,.14); }
html[data-theme="dark"] .profit-stock-row.fuel-regular  { background: rgba(229,178,26,.14); }
html[data-theme="dark"] .profit-stock-row.fuel-diesel   { background: rgba(47,158,107,.12); }
html[data-theme="dark"] .profit-stock-row.fuel-kerosene { background: rgba(107,114,128,.14); }
html[data-theme="dark"] .profit-stock-row.fuel-urea     { background: rgba(110,79,199,.14); }
html[data-theme="dark"] .profit-stock-row.fuel-etc      { background: rgba(91,102,114,.14); }

/* ── 매입 상태 범례 (점선 = 예정 · 실선+색띠 = 완료) ────────────── */
.purchase-state-legend { margin-top: 3px; }
.purchase-state-legend .pstate-sample {
  display: inline-block; width: 16px; height: 9px; border-radius: 2px;
  background: transparent; flex: 0 0 auto;
}
.purchase-state-legend .pstate-sample.expected { border: 1px dashed var(--fuel-etc); }
.purchase-state-legend .pstate-sample.actual {
  border: 1px solid var(--fuel-etc);
  box-shadow: inset 3px 0 0 var(--fuel-etc);
}

/* ── 그래프 — 등유 칸(v1.3.64 에서 추가). 나머지 f1~f4 · g1~g4 는
   styles.css 에서 이미 --fuel-* 토큰을 쓰므로 고급이 저절로 주황이 된다. */
.bar-fill.g5      { background: var(--fuel-ker); }
.daily-seg.f5     { background: var(--fuel-ker); }
.daily-legend i.f5{ background: var(--fuel-ker); }

/* ── v1.3.66 자료 없는 주유소 줄 — 숫자 자리를 비우고 이유를 적는다 ── */
.cost-bar-row.nodata { background: #fbfcfd; border-style: dashed; }
.cost-bar-row.nodata .cbr-name { color: #6b7a8a; }
.cost-bar-row.nodata .cbr-amount,
.cost-bar-row.nodata .cbr-margin { color: #8a97a4; font-weight: 700; }
.cost-bar-row.nodata .cbr-track { background: transparent; border: 1px dashed #dbe3eb; }
html[data-theme="dark"] .cost-bar-row.nodata { background-color: #121821; }
html[data-theme="dark"] .cost-bar-row.nodata .cbr-track { border-color: #2b3644; }