/* Các thẻ phân tích ở trang Tổng quan */
/* ----- thẻ "Xử lý phạt nguội" ở Tổng quan: (1) vành khuyên tình trạng lỗi, (2) bảng phân tích lỗi đang chờ ----- */
#f-dash, #m-dash { display:grid; gap:22px; }
/* Tổng quan → Tình trạng cọc xe: hai nửa cạnh nhau, màn hẹp xếp dọc */
#dp-ov { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:22px 36px; }
/* Tình trạng cọc xe: biểu đồ 4 cột thay cho vành khuyên (cột mảnh, bo 4px phía trên, đứng trên đường đáy) */
.chart.dp-chart { grid-template-columns:minmax(0,1fr); gap:14px; align-items:stretch; } /* biểu đồ ở trên, bảng số liệu ở dưới */
.dp-bars { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.dpb-col { display:grid; grid-template-rows:130px auto; padding:0; border:0; background:none; border-radius:8px; cursor:pointer; }
.dpb-plot { display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; border-bottom:1px solid var(--border); }
.dpb-plot b { font-size:14px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.dpb-plot i { display:block; width:100%; max-width:36px; border-radius:4px 4px 0 0; transition:filter .15s; }
.dpb-col:hover i { filter:brightness(.88); }
.dpb-lab { padding-top:6px; font-size:12px; white-space:nowrap; line-height:1.3; color:var(--text-2); text-align:center; }
.dp-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }
.dp-stat { display:grid; gap:2px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); min-width:0; }
button.dp-stat { font:inherit; color:inherit; text-align:left; cursor:pointer; transition:border-color .15s, background .15s; }
button.dp-stat:hover { border-color:var(--primary); background:var(--surface); }
.dp-stat .l { color:var(--text-2); font-size:12.5px; }
.dp-stat b { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dp-stat.neg b { color:var(--danger); }
.dp-stat .sub { font-size:12px; }
@media (max-width:560px) { .dp-stats { grid-template-columns:minmax(0,1fr); } }
/* cột số dùng bề rộng cố định (px) để mọi dòng thẳng hàng, kể cả dòng tiêu đề chữ nhỏ và dòng tổng chữ đậm */
.fd-row.wide { grid-template-columns:minmax(0,1.1fr) minmax(40px,1fr) 104px 150px; }
.fd-row.wide .p { overflow:hidden; text-overflow:ellipsis; }
.fd-row .p.warn { color:var(--danger-600); font-weight:500; }
.fd-h { font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); }
.fd-head { display:flex; flex-wrap:wrap; gap:8px 12px; justify-content:space-between; align-items:center; margin-bottom:10px; }
.fd-track { height:6px; border-radius:3px; background:var(--muted-bg); overflow:hidden; }
.fd-track i { display:block; height:100%; border-radius:inherit; }
.fd-row { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(40px,1fr) 72px 124px; gap:12px; align-items:center; width:100%; padding:8px; border:0; border-radius:8px; background:none; text-align:left; font-size:13.5px; }
button.fd-row:hover { background:var(--surface-2); }
.fd-row .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fd-row b { font-weight:600; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.fd-row .p { color:var(--text-2); font-size:13px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.fd-cols-h { color:var(--text-3); font-size:12px; padding-block:0 4px; }
.fd-cols-h b, .fd-cols-h .p { font-weight:500; color:var(--text-3); font-size:12px; }
/* bảng phân tích lỗi đang chờ: nhóm | thanh | số lỗi | tỉ lệ | số tiền, có dòng tổng cộng */
.fd-row.f5 { grid-template-columns:minmax(0,1.3fr) minmax(40px,1fr) 72px 52px 124px; }
.fd-total { border-top:1px solid var(--border); border-radius:0; margin-top:4px; padding-top:10px; font-weight:600; }
.fd-total .p { color:var(--text); font-weight:600; }
/* chú giải bên cạnh vành khuyên tình trạng lỗi: nhãn | số lỗi | tỉ lệ | số tiền */
.c-row.c4 { grid-template-columns:minmax(0,1fr) 64px 68px 124px; }
.c-row.c4 b { text-align:right; }
/* Tình trạng cọc xe: cột số ghi "32 hợp đồng" nên rộng hơn */
#dp-ov .c-row.c4 { grid-template-columns:minmax(0,1fr) 96px 68px 124px; }
#dp-ov .c-row.c4 b { white-space:nowrap; }
/* tỉ lệ %: viên màu nhạt cùng màu tình trạng, chữ đậm cho dễ đọc */
.pct { justify-self:end; box-sizing:border-box; width:64px; padding:2px 8px; border-radius:999px; text-align:center; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;
  --c:var(--text-2); background:color-mix(in srgb, var(--c) 14%, transparent); color:color-mix(in srgb, var(--c) 78%, #000); }
.fd-row .p.pc { color:var(--text); font-weight:600; }
.c-row .m { color:var(--text-2); font-size:13px; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.c-total { border-top:1px solid var(--border); border-radius:0; margin-top:2px; font-weight:600; }
.c-total:hover { background:none; }
.c-total .m { color:var(--text); font-weight:600; }
@media (max-width:520px) {
  .fd-row { grid-template-columns:minmax(0,1fr) 64px 104px; }
  .fd-row.wide { grid-template-columns:minmax(0,1fr) 92px 120px; }
  .fd-row.f5, .log-card .fd-row.f5 { grid-template-columns:minmax(0,1fr) 60px 44px 108px; gap:8px; }
  .c-row.c4 { grid-template-columns:minmax(0,1fr) 56px 60px 104px; gap:8px; }
  .pct { width:56px; }
  .fd-row .fd-track, .fd-row .fd-gap { display:none; } /* màn hẹp: bỏ thanh tỉ lệ, cả ô trống thay chỗ thanh ở dòng tiêu đề / tổng */
}

/* ----- mục Bảo dưỡng: hai thẻ trang + Sổ bảo dưỡng (như sheet BD theo tháng) + báo cáo ----- */
.page-tabs { padding:0 4px; margin-bottom:var(--gap); border-bottom:1px solid var(--border-2); }
.xdv { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap;
  background:color-mix(in srgb, var(--c) 16%, transparent); color:color-mix(in srgb, var(--c) 80%, #000); }
/* bảng sổ: tiêu đề cột dài xuống 2 dòng, khoảng cách gọn để vừa màn hình máy tính không phải kéo ngang */
table.log td { padding:10px 7px; vertical-align:middle; }
table.log th { padding:10px 7px; white-space:normal; line-height:1.3; vertical-align:bottom; }
table.log td.what { min-width:110px; }
@media (min-width:641px) { table.log td:first-child, table.log th:first-child { padding-left:16px; } table.log td:last-child, table.log th:last-child { padding-right:16px; } } /* chỉ máy tính: điện thoại dùng dạng thẻ */
table.log tfoot td { font-weight:600; border-bottom:0; background:var(--surface-2); }
.log-kpis .kpi .sub { margin-top:4px; font-size:12px; }
.log-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(440px, 1fr)); gap:22px; margin-top:22px; }
.log-card { min-width:0; }
.log-card > .fd-h { display:block; margin-bottom:8px; }
#log-dash > .log-card { margin-top:22px; }
.fd-row .nm .dot { margin-right:8px; }
/* hộp nhập lượt bảo dưỡng: 3 cột như các cột của sheet */
.grid3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.grid3 .span2 { grid-column:span 2; }
.out { display:flex; align-items:center; min-height:38px; padding:0 12px; border-radius:8px; background:var(--surface-2); font-weight:700; font-variant-numeric:tabular-nums; }
#svc-adsun summary { cursor:pointer; font-size:13px; color:var(--text-2); margin-bottom:8px; }
@media (max-width:640px) { .grid3 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .log-grid { grid-template-columns:minmax(0,1fr); } }
/* bảng sổ rộng: chỉ cuộn trong khung bảng, không kéo giãn cả trang */
#m-log { display:grid; gap:var(--gap); min-width:0; }
#m-log > .panel { min-width:0; }
#f-table table.log th { white-space:nowrap; }
#log-table table.log td:nth-child(3) { min-width:96px; } /* tên tài xế dài được xuống dòng để bảng vừa màn hình */
.log-card .fd-row.f5 { grid-template-columns:minmax(0,1.5fr) minmax(30px,1fr) 72px 52px 124px; }
.fd-total > span:first-child { white-space:nowrap; }
@media (max-width:520px) { .log-card .fd-row.f5 { grid-template-columns:minmax(0,1fr) 60px 44px 108px; gap:8px; } } /* đặt sau quy tắc .log-card ở trên để màn hẹp được áp dụng */
.log-tools { flex-wrap:wrap; justify-content:flex-end; }
.log-tools .w-date { width:150px; }
/* Sổ phạt nguội: tiêu đề cột đậm, rõ hơn; "Mẫu xe" giữ một dòng */
#f-table th, #log-table th { color:var(--text-2); font-weight:600; } /* tiêu đề cột Sổ phạt nguội + Sổ bảo dưỡng đậm, rõ */
table.log th.nw { white-space:nowrap; }
/* báo cáo phạt nguội: thẻ số và dòng bảng bấm được để xem lỗi cụ thể */
button.kpi { font:inherit; text-align:left; cursor:pointer; width:100%; }
button.kpi:hover { border-color:var(--border-2); background:var(--surface-2); }
.f-group { display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 12px; border-radius:999px; background:var(--primary-050); color:var(--primary); font-size:13px; }
.f-group button { border:0; background:none; color:inherit; font-size:17px; line-height:1; padding:0 4px; cursor:pointer; }
#f-chips { scroll-margin-top:80px; }
.log-filter { padding-top:0; border-bottom:0; }
#log-filter, #log-table { scroll-margin-top:80px; }

/* ----- Xe cần bảo dưỡng theo km ----- */
.km-over { color:var(--danger); font-weight:600; }
.km-soon { color:var(--warning-ink); font-weight:600; }
.sub.km-over { font-weight:500; }
.odo-note { margin-top:4px; color:var(--warning-ink); }
#odo-companies { border-bottom:1px solid var(--border); }
table.odo-co tr[aria-selected="true"] td { background:var(--primary-050); }
table.km-table td { vertical-align:middle; }
table.km-table td:nth-child(3), table.km-table .nw { white-space:nowrap; }
table.km-table td, table.km-table th { padding-left:10px; padding-right:10px; }
table.km-table td.km-note { min-width:120px; }
#f-table td.f-loc { min-width:130px; color:var(--text-2); }
#f-table td.nw { white-space:nowrap; }
#f-table td.f-viol { min-width:150px; }
#f-table td:nth-child(9) { min-width:84px; } /* Xử lý: "Công ty xử lý" không bị bẻ vụn */
@media (min-width:641px) and (max-width:1366px) { #f-table table.log :is(th, td) { padding-left:5px; padding-right:5px; } }
/* Sổ cọc xe */
#dp-prev { display:grid; gap:8px; }
#dp-prev p { margin:0; }
#dp-table td.nw { white-space:nowrap; }
#dp-table .neg { color:var(--danger-600); font-weight:600; }
#dp-table td.dp-note { min-width:140px; }

/* Sổ cọc xe: các dòng của cùng một xe nằm liền nhau thành một khối (nền nhạt, vạch xanh bên trái, không kẻ ngang giữa các dòng trong khối) */
#dp-table tr.dp-grp > td { background:var(--info-050); }
#dp-table tr.dp-grp > td:first-child { box-shadow:inset 3px 0 0 var(--info); }
#dp-table tr.dp-grp:not(.dp-grp-last) > td { border-bottom-color:transparent; }
#dp-table tr.dp-grp-first > td { border-top:1px solid color-mix(in srgb, var(--info) 30%, transparent); }
#dp-table tr.dp-grp-last > td { border-bottom:1px solid color-mix(in srgb, var(--info) 30%, transparent); }
@media (max-width:640px) { /* điện thoại: mỗi dòng là một thẻ, tô cả thẻ thay cho từng ô */
  #dp-table tr.dp-grp { background:var(--info-050); box-shadow:inset 4px 0 0 var(--info); }
  #dp-table tr.dp-grp > td, #dp-table tr.dp-grp > td:first-child { background:none; box-shadow:none; border-top:0; border-bottom:0; }
}
/* Bảng số liệu dạng danh sách ở Tổng quan / báo cáo: cột số (số lượng, tỉ lệ, số tiền) và tên cột phía trên nằm giữa, như quy tắc chung của bảng */
:is(.fd-row, .c-row.c4, .c-row) :is(b, .p, .m) { text-align:center; }
.pct { justify-self:center; }

/* ----- Sổ bảo dưỡng → Chi phí theo ngày: khung biểu đồ kiểu dashboard ----- */
.cost-card { padding:18px 20px 14px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:0 1px 2px rgba(16,24,40,.04); }
.cc-head { display:flex; flex-wrap:wrap; gap:14px 28px; align-items:flex-start; justify-content:space-between; }
.cc-head > div:first-child { max-width:420px; }
.cc-head .fd-h { display:block; margin-bottom:4px; }
.cc-head .sub { font-size:12.5px; }
.cc-stats { display:flex; gap:10px; flex-wrap:wrap; }
.cc-stat { display:grid; gap:1px; min-width:150px; padding:8px 14px; border-left:3px solid var(--info); border-radius:0 10px 10px 0; background:var(--surface-2); }
.cc-stat:nth-child(2) { border-left-color:#0b3d7a; }
.cc-stat:nth-child(3) { border-left-color:var(--text-3); }
.cc-stat .l { font-size:12px; color:var(--text-2); }
.cc-stat b { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cc-stat .sub { font-size:11.5px; }
.cc-legend { display:flex; flex-wrap:wrap; gap:6px 18px; margin:16px 0 6px; font-size:12px; color:var(--text-2); }
.cc-legend > span { white-space:nowrap; }
.cc-legend .sw { display:inline-block; width:12px; height:12px; margin-right:6px; border-radius:3px; background:var(--info); vertical-align:-2px; }
.cc-legend .sw.peak { background:#0b3d7a; }
.cc-legend .sw.avg { height:0; border-top:2px dashed var(--text-2); border-radius:0; background:none; vertical-align:3px; }
/* lưới: cột trục tiền | vùng vẽ; hàng dưới là trục ngày */
.cc-chart { display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-rows:230px auto; column-gap:8px; margin-top:18px; }
.cc-y { position:relative; }
.cc-y span { position:absolute; right:0; transform:translateY(50%); font-size:11px; color:var(--text-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cc-plot { position:relative; border-bottom:1px solid var(--border-2); }
.cc-grid { position:absolute; left:0; right:0; border-top:1px dashed var(--border); }
.cc-avg { position:absolute; left:0; right:0; border-top:2px dashed var(--text-2); z-index:2; pointer-events:none; }
.cc-avg span { position:absolute; right:0; bottom:3px; padding:1px 6px; border-radius:6px; background:var(--surface); color:var(--text-2); font-size:11px; font-weight:600; box-shadow:0 0 0 1px var(--border); }
.cc-cols { position:absolute; inset:0; display:grid; gap:4px; }
.cc-col { position:relative; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; border-radius:6px; }
.cc-col[data-act] { cursor:pointer; }
.cc-col[data-act]:hover { background:color-mix(in srgb, var(--info) 8%, transparent); }
.cc-col i { display:block; width:100%; max-width:26px; border-radius:4px 4px 0 0; background:var(--info); transition:filter .15s; }
.cc-col[data-act]:hover i { filter:brightness(.88); }
.cc-col.peak i { background:#0b3d7a; }
.cc-col.future { background:repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--border) 45%, transparent) 6px 7px); border-radius:0; }
.cc-val { position:absolute; left:50%; transform:translate(-50%, -4px); font-size:10.5px; font-weight:600; color:var(--text-2); white-space:nowrap; font-variant-numeric:tabular-nums; z-index:3; padding:0 3px; border-radius:4px; background:color-mix(in srgb, var(--surface) 88%, transparent); } /* nền mờ để không bị đường trung bình đè */
.cc-col.peak .cc-val { color:#0b3d7a; font-size:11.5px; font-weight:700; }
.cc-x { grid-column:2; display:grid; gap:4px; padding-top:6px; }
.cc-x span { text-align:center; font-size:11px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.cc-x span.major { color:var(--text-2); font-weight:600; }
.cc-x span.peak { color:#0b3d7a; font-weight:700; }
.cc-x span.future { opacity:.45; }
#log-dash > .cost-card { margin-top:22px; }
/* màn hẹp: chỉ ghi số tiền ở ngày cao nhất, trục ngày chỉ ghi 1, 5, 10… cho khỏi chồng chữ */
@media (max-width:900px) { .cc-col:not(.peak) .cc-val { display:none; } }
@media (max-width:640px) { .cc-x span:not(.major):not(.peak) { visibility:hidden; } .cc-chart { grid-template-rows:180px auto; grid-template-columns:36px minmax(0,1fr); } .cc-cols, .cc-x { gap:2px; } .cc-stat { min-width:0; flex:1 1 140px; } }