/*
 * Khối tổng ngày + biểu đồ tuần cho bảng Trả đơn / Chốt đơn.
 *
 * CSS THUẦN, cố ý không dùng Tailwind: server không bao giờ build lại assets
 * (public/build nằm trong .gitignore và chưa từng được đóng gói), nên class
 * Tailwind mới sẽ không có tác dụng trên production. Xem thêm ghi chú đầu
 * public/css/inbox.css. Sửa file này thì tăng ?v= trong AdminPanelProvider.
 */

.jf-sum { --jf-s-line: #e5e7eb; --jf-s-bg: #ffffff; --jf-s-muted: #6b7280;
  --jf-s-ink: #065f46; --jf-s-soft: #ecfdf5; --jf-s-bar: #10b981;
  border: 1px solid var(--jf-s-line); background: var(--jf-s-bg);
  border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.jf-sum--giao { --jf-s-ink: #1e40af; --jf-s-soft: #eff6ff; --jf-s-bar: #3b82f6; }
:is(.dark) .jf-sum { --jf-s-line: #374151; --jf-s-bg: #111827; --jf-s-muted: #9ca3af; }
:is(.dark) .jf-sum--chot { --jf-s-ink: #6ee7b7; --jf-s-soft: rgba(6,78,59,0.35); }
:is(.dark) .jf-sum--giao { --jf-s-ink: #93c5fd; --jf-s-soft: rgba(30,58,138,0.35); }

.jf-sum-top { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; }
.jf-sum-item { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.jf-sum-label { font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; color: var(--jf-s-muted); white-space: nowrap; }
.jf-sum-date { font-size: 14px; font-weight: 700; color: var(--jf-s-ink); }
.jf-sum-value { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--jf-s-ink); }
.jf-sum-note { margin: 0; font-size: 11px; line-height: 1.5; color: var(--jf-s-muted); }

/* Biểu đồ cột: 7 ngày chia đều, cột cao theo tiền hoa */
.jf-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
  align-items: end; background: var(--jf-s-soft); border-radius: 12px; padding: 8px 6px 6px; }
.jf-chart-col { display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 0; border: 0; background: none; cursor: pointer; padding: 2px 0 4px;
  border-radius: 9px; }
.jf-chart-col:active { transform: scale(.97); }
.jf-chart-col--on { background: rgba(0,0,0,.06); }
:is(.dark) .jf-chart-col--on { background: rgba(255,255,255,.1); }
/* Vùng cột cao cố định để mọi cột cùng đáy, cột rỗng vẫn giữ chỗ */
.jf-chart-col { height: 108px; justify-content: flex-end; }
.jf-chart-num { font-size: 10px; font-weight: 700; color: var(--jf-s-ink);
  font-variant-numeric: tabular-nums; line-height: 1; min-height: 11px; }
.jf-chart-bar { width: 100%; max-width: 30px; background: var(--jf-s-bar);
  border-radius: 5px 5px 2px 2px; min-height: 2px; }
.jf-chart-day { font-size: 11px; font-weight: 700; color: var(--jf-s-muted); line-height: 1; }
.jf-chart-day--today { color: var(--jf-s-bar); }
.jf-chart-date { font-size: 9px; color: var(--jf-s-muted); line-height: 1; }

@media (max-width: 400px) {
  .jf-chart-col { height: 92px; }
  .jf-chart-date { display: none; }
}

/* ============================================================================
   CHỈNH LẠI THEO BỘ MÀU CHUNG (public/css/theme.css)
   ============================================================================
   File này nạp SAU theme.css nên ghi đè được. Mục đích: dùng chung biến màu
   với cả phần mềm, và sửa hai lỗi đo được:
     • chữ xám #6b7280 ở cỡ 11px chỉ đạt 4,34:1 — dưới ngưỡng 4,5:1;
     • các nút trong khối lịch/biểu đồ nhỏ hơn 44px nên khó bấm trên điện thoại.
   ========================================================================= */

.jf-sum {
    --jf-s-line: var(--jf-border);
    --jf-s-bg: var(--jf-surface);
    --jf-s-muted: var(--jf-text-3);
    border-radius: var(--jf-r-lg);
    box-shadow: var(--jf-shadow-sm);
}

:is(.dark) .jf-sum {
    --jf-s-line: var(--jf-border);
    --jf-s-bg: var(--jf-surface);
    --jf-s-muted: var(--jf-text-3);
}

/* Cỡ chữ nhỏ nhất trên biểu đồ: 10px quá bé để đọc lướt trên điện thoại. */
.jf-chart-num { font-size: 11px; }
.jf-chart-day { font-size: 12px; }
.jf-chart-date { font-size: 10px; }

/* Cột biểu đồ bấm được → nới cho đủ rộng (khe hẹp lại, bớt đệm hai bên). */
.jf-chart { gap: 2px; padding: 8px 4px 6px; }
.jf-chart-col { border-radius: var(--jf-r); }

/* Ô ngày trên dải tuần và các nút lọc giờ: tối thiểu 44px cho ngón tay. */
.fi-tra-don-week-strip { gap: 2px; }

.fi-tra-don-week-strip > * {
    min-height: 44px;
}

.fi-tra-don-hour-chips > button,
.fi-tra-don-hour-chips > a {
    min-height: 44px;
}

/* Hai nút "Hôm nay" / "Lịch tháng" */
.fi-tra-don-board .min-h-10 {
    min-height: 44px;
}

/* ── SỬA TỈ LỆ CỘT BIỂU ĐỒ ────────────────────────────────────────────────
   Trước đây cột là flex-item trong một cột flex cao 92–108px. Chiều cao %
   của cột được tính trên CẢ ô (gồm cả số tiền, tên thứ, ngày), rồi flexbox
   lại co tất cả lại cho vừa — nên cột cao nhất không bao giờ chạm đỉnh
   (đo được: khai 100% nhưng chỉ vẽ 57px) và các cột thấp bị méo tỉ lệ.

   Dùng lưới (grid): hàng giữa chiếm hết chỗ còn lại và có chiều cao xác định,
   nên height:% của cột tính đúng trên đúng phần đó. */
.jf-chart-col {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    justify-items: center;
    align-items: end;
    gap: 3px;
}

.jf-chart-bar {
    align-self: end;
    /* Ngày có đơn nhưng quá nhỏ vẫn phải thấy được — thêm bằng pixel nên
       KHÔNG làm sai tỉ lệ của các cột lớn. Để 2px: đủ nhìn mà ít méo nhất. */
    min-height: 2px;
}

/* Ô vẽ cao hơn thì chênh lệch giữa các ngày nhỏ mới nhìn ra được.
   Phần cột thật = chiều cao ô trừ đi số tiền và tên thứ ở trên/dưới. */
.jf-chart-col { height: 128px; }

@media (max-width: 400px) {
    .jf-chart-col { height: 112px; }
}

/* Ngày không có đơn: không vẽ cột nào cả. */
.jf-chart-bar--zero { height: 0; min-height: 0; }

@media (max-width: 400px) {
    .jf-chart-col { gap: 2px; }
}