/* Nhân sự › Báo cơm › Theo dõi (meal-tracking.js). Ô có ăn xanh, báo muộn cam, báo không ăn xám, chưa báo để trống. */
.meal-hub-seg { display: inline-flex; margin-bottom: 12px; padding: 3px; border-radius: 10px; background: var(--bms-surface-subtle, #EEF2F7); }
.meal-hub-seg button, .meal-track-seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer; }
.meal-hub-seg button.active, .meal-track-seg button.active { background: var(--bms-surface, #fff); color: var(--bms-primary, #0757b8); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.meal-track { --mt-eat: #15803D; --mt-late: #C2410C; --mt-no: #64748B; display: grid; gap: 14px; }
.meal-track-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.meal-track-nav { display: flex; align-items: center; gap: 6px; }
.meal-track-nav strong { min-width: 150px; text-align: center; font-size: 15px; color: var(--ink, var(--bms-text)); }
.meal-track-nav .btn { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
.meal-track-tools { display: flex; align-items: center; gap: 10px; min-width: 0; }
.meal-track-search { flex: 0 1 320px; min-width: 200px; }
.meal-track-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bms-surface-subtle, #EEF2F7); }

/* KPI: một khối trung tính, mỗi ca một ô trên một hàng. */
.meal-track-kpis { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; border: 1px solid var(--line, #E2E8F0); border-radius: 10px; background: var(--bms-surface-subtle, #F8FAFC); }
.meal-track-kpis > div { display: grid; gap: 2px; padding: 10px 14px; }
.meal-track-kpis > div + div { border-left: 1px solid var(--line, #E2E8F0); }
.meal-track-kpis small { color: var(--muted); font-size: 12px; font-weight: 600; }
.meal-track-kpis b { color: var(--ink, var(--bms-text)); font-size: 22px; line-height: 1.15; }
.meal-track-kpis em { color: var(--muted); font-size: 13px; font-style: normal; font-weight: 600; }
.meal-track-kpis span { color: var(--muted); font-size: 12px; }

.meal-track-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 12px; }
.meal-track-legend span { display: inline-flex; align-items: center; gap: 6px; }
.meal-track-legend i { width: 14px; height: 14px; border-radius: 4px; }
.meal-track-legend i.eat { background: var(--mt-eat); }
.meal-track-legend i.late { background: var(--mt-late); }
.meal-track-legend i.no { background: color-mix(in srgb, var(--mt-no) 16%, var(--bms-surface, #fff)); box-shadow: inset 0 0 0 1.5px var(--mt-no); }
.meal-track-legend i.none { background: var(--bms-surface-subtle, #F1F5F9); box-shadow: inset 0 0 0 1px var(--line, #E2E8F0); }

.meal-track-wrap { overflow-x: auto; border: 1px solid var(--line, #E2E8F0); border-radius: 10px; }
.meal-track-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.meal-track-table :where(th):is(th, td), .meal-track-table :where(td):is(th, td) { height: 40px; text-transform: none !important; letter-spacing: normal !important; padding: 4px 10px; border-bottom: 1px solid var(--line, #E2E8F0); text-align: left; vertical-align: middle; }
.meal-track-table thead th { background: var(--bms-surface-subtle, #F8FAFC); color: var(--ink, var(--bms-text)); font-size: 13px; font-weight: 700; white-space: nowrap; }
.meal-track-table thead th small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; }
.meal-track-table tbody tr:last-child > * { border-bottom: 0; }
.meal-track-who { position: sticky; left: 0; z-index: 1; min-width: 200px; background: var(--bms-surface, #fff); box-shadow: 1px 0 0 var(--line, #E2E8F0); }
thead .meal-track-who { background: var(--bms-surface-subtle, #F8FAFC); }
.meal-track-who b { font-size: 13px; font-weight: 600; }
.meal-track-who small { display: block; color: var(--muted); font-size: 11px; }
.meal-track-group > th { height: 32px; background: var(--bms-surface-subtle, #F8FAFC); color: var(--ink, var(--bms-text)); font-size: 12px; font-weight: 800; white-space: nowrap; }
.meal-track-group > th small { color: var(--muted); font-weight: 500; }
.meal-track-group > th.meal-track-who { position: sticky; }
.meal-track-cell { display: inline-flex; align-items: baseline; gap: 6px; min-width: 150px; padding: 5px 9px; border-radius: 6px; font-size: 12px; white-space: nowrap; }
.meal-track-cell b { font-weight: 700; }
.meal-track-cell small { color: inherit; opacity: .9; font-size: 11px; }
.meal-track-cell.eat { background: var(--mt-eat); color: #fff; }
.meal-track-cell.late { background: var(--mt-late); color: #fff; }
.meal-track-cell.no { background: color-mix(in srgb, var(--mt-no) 12%, var(--bms-surface, #fff)); color: var(--mt-no); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-no) 45%, transparent); }
.meal-track-cell.none { min-width: 0; padding: 0; color: var(--muted); }
.meal-track-table td.num { width: 90px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.meal-track-table td.total { color: var(--bms-primary, #0757b8); }
.meal-track-table .dim { color: var(--muted); font-weight: 400; }
.meal-track-empty { color: var(--muted); text-align: center !important; }

/* Tháng: lịch bên trái, bảng mỗi người bên phải. */
.meal-track-month { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); align-items: start; gap: 14px; }
.meal-track-cal { overflow: hidden; border: 1px solid var(--line, #E2E8F0); border-radius: 10px; }
.meal-track-week, .meal-track-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.meal-track-week span { padding: 8px 0; background: var(--bms-surface-subtle, #F8FAFC); color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.meal-track-day { display: grid; align-content: start; gap: 3px; min-height: 84px; padding: 6px 8px; border: 0; border-top: 1px solid var(--line, #E2E8F0); border-left: 1px solid var(--line, #E2E8F0); background: var(--bms-surface, #fff); text-align: left; cursor: pointer; font: inherit; }
.meal-track-days > :nth-child(7n + 1) { border-left: 0; }
.meal-track-day.blank { cursor: default; background: var(--bms-surface-subtle, #F8FAFC); }
.meal-track-day.sun { background: repeating-linear-gradient(135deg, var(--bms-surface-subtle, #F1F5F9) 0 5px, var(--bms-surface, #fff) 5px 10px); }
.meal-track-day.today { box-shadow: inset 0 0 0 2px var(--bms-primary, #0757b8); }
.meal-track-day strong { color: var(--ink, var(--bms-text)); font-size: 14px; }
.meal-track-day.today strong { color: var(--bms-primary, #0757b8); }
.meal-track-day span { display: flex; justify-content: space-between; gap: 4px; padding: 2px 6px; border-radius: 4px; background: color-mix(in srgb, var(--mt-eat) 12%, var(--bms-surface, #fff)); font-size: 11px; }
.meal-track-day span em { overflow: hidden; color: var(--muted); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.meal-track-day span b { color: var(--mt-eat); }
.meal-track-day:not(.blank):hover { outline: 2px solid var(--bms-primary, #0757b8); outline-offset: -2px; }
@media (max-width: 1100px) { .meal-track-month { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .meal-track-tools { flex-wrap: wrap; width: 100%; }
  .meal-track-search { flex: 1 1 100%; }
  .meal-track-kpis { grid-auto-flow: row; }
  .meal-track-kpis > div + div { border-left: 0; border-top: 1px solid var(--line, #E2E8F0); }
  .meal-track-day { min-height: 64px; padding: 4px; }
}
.meal-track-group > th small { display: inline; margin-left: 6px; }
.meal-track-kpis > div.off b { color: var(--muted); }

/* Điện thoại: KPI một hàng, bảng ngày vừa màn hình (ô hai dòng nơi ăn / giờ báo), lịch tháng chỉ còn số suất. */
@media (max-width: 900px), (max-width: 950px) and (max-height: 500px) {
  html.bms-phone-v2 .meal-track { gap: 10px; }
  html.bms-phone-v2 .meal-track-nav { width: 100%; }
  html.bms-phone-v2 .meal-track-nav strong { flex: 1; min-width: 0; }
  html.bms-phone-v2 body .meal-track-nav .btn:not(#\#) { min-width: 40px; height: 40px; min-height: 40px; padding: 0 10px; border-radius: 10px; border: 0 !important; background: var(--ph-chip-bg, #EEF2F7) !important; color: var(--ph-ink, #1F2937) !important; box-shadow: none !important; }
  html.bms-phone-v2 .meal-track-nav .btn:not([data-mt-step]) { font-size: 13px; }
  html.bms-phone-v2 .meal-track-tools { gap: 8px; }
  html.bms-phone-v2 .meal-track-seg { width: 100%; }
  html.bms-phone-v2 .meal-track-seg button { flex: 1; height: 36px; }
  html.bms-phone-v2 .meal-track-kpis { grid-auto-flow: column; margin-inline: -16px; border-radius: 0; border-inline: 0; }
  html.bms-phone-v2 .meal-track-kpis > div { min-width: 0; padding: 8px 10px; }
  html.bms-phone-v2 .meal-track-kpis > div + div { border-top: 0; border-left: 1px solid var(--line, #E2E8F0); }
  html.bms-phone-v2 .meal-track-kpis small { font-size: 11px; line-height: 1.25; }
  html.bms-phone-v2 .meal-track-kpis b { font-size: 19px; }
  html.bms-phone-v2 .meal-track-kpis em { font-size: 11px; }
  html.bms-phone-v2 .meal-track-kpis span { font-size: 11px; line-height: 1.3; }
  html.bms-phone-v2 .meal-track-legend { gap: 4px 12px; font-size: 11.5px; }
  html.bms-phone-v2 .meal-track-legend i { width: 12px; height: 12px; }
  html.bms-phone-v2 .meal-track-wrap { margin-inline: -16px; border-radius: 0; border-inline: 0; }
  html.bms-phone-v2 .meal-hub-seg { display: flex; margin: 8px 16px 12px; }
  html.bms-phone-v2 .meal-hub-seg button { flex: 1; height: 36px; }
  html.bms-phone-v2 .meal-track-wrap .meal-track-table { min-width: 0 !important; table-layout: fixed; }
  html.bms-phone-v2 .meal-track-table th.meal-track-who { width: 30%; }
  html.bms-phone-v2 .meal-track-table th:not(.meal-track-who) { width: auto; }
  html.bms-phone-v2 .meal-track-table :where(th):is(th, td), html.bms-phone-v2 .meal-track-table :where(td):is(th, td) { height: 36px; padding: 4px 6px; }
  html.bms-phone-v2 .meal-track-table thead th { font-size: 12px; white-space: normal; }
  html.bms-phone-v2 .meal-track-table thead th small { font-size: 10px; line-height: 1.25; }
  html.bms-phone-v2 .meal-track-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html.bms-phone-v2 .meal-track-who b { font-size: 12.5px; }
  html.bms-phone-v2 .meal-track-cell { display: grid; gap: 0; min-width: 0; padding: 3px 6px; white-space: normal; line-height: 1.25; }
  html.bms-phone-v2 .meal-track-cell b { font-size: 11px; }
  html.bms-phone-v2 .meal-track-cell small { font-size: 10px; }
  html.bms-phone-v2 .meal-track-table td.num { width: 52px; }
  html.bms-phone-v2 .meal-track-cal { margin-inline: -16px; border-radius: 0; border-inline: 0; }
  html.bms-phone-v2 .meal-track-day { min-height: 56px; padding: 3px; gap: 2px; }
  html.bms-phone-v2 .meal-track-day strong { font-size: 12px; }
  html.bms-phone-v2 .meal-track-day span { padding: 1px 3px; font-size: 10px; }
  html.bms-phone-v2 .meal-track-day span em { display: none; }
  html.bms-phone-v2 .meal-track-day span::before { overflow: hidden; color: var(--muted); content: attr(data-s); text-overflow: ellipsis; white-space: nowrap; }
}

/* Điện thoại: ngày/tháng và ô tìm + Lọc cùng một hàng; Theo ngày / Theo tháng trong bảng Lọc (anh Hiệp 24/10/2026) */
@media (max-width: 900px), (max-width: 950px) and (max-height: 500px) {
  html.bms-phone-v2 .meal-track-head:not(#\#) { flex-wrap: nowrap; gap: 8px; }
  html.bms-phone-v2 .meal-track-head .meal-track-nav { flex: none; width: auto; gap: 2px; }
  html.bms-phone-v2 .meal-track-head .meal-track-nav strong { flex: none; min-width: 0; padding: 0 2px; font-size: 14px; white-space: nowrap; }
  html.bms-phone-v2 body .meal-track-head .meal-track-nav .btn[data-mt-step]:not(#\#) { min-width: 34px; width: 34px; padding: 0; font-size: 17px; }
  html.bms-phone-v2 .meal-track-head .meal-track-nav [data-mt-today] { display: none !important; }
  html.bms-phone-v2 .meal-track-head .meal-track-tools { flex: 1 1 0; min-width: 0; width: auto; flex-wrap: nowrap; }
  html.bms-phone-v2 .meal-track-head:not(#\#) { min-width: 0; }
  html.bms-phone-v2 .meal-track-head .meal-track-search:not(#\#) { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
  html.bms-phone-v2 .meal-track-head .meal-track-search .bms-search__input:not(#\#) { flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; }
  html.bms-phone-v2 .meal-track-fgroup { display: grid; gap: 6px; margin-bottom: 12px; }
  html.bms-phone-v2 .meal-track-fgroup > span { color: var(--muted); font-size: 12px; font-weight: 600; }
  html.bms-phone-v2 .meal-track-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
  html.bms-phone-v2 .meal-track-fchips button { height: 34px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--ph-chip-bg, #EEF2F7); color: var(--ph-ink, #1F2937); font: 600 13px/1 inherit; white-space: nowrap; cursor: pointer; }
  html.bms-phone-v2 .meal-track-fchips button.active { background: var(--ph-primary, #1A73E8); color: #fff; }
}
/* Báo không ăn: gạch sọc cho dễ phân biệt (anh Hiệp 24/10/2026) */
.meal-track-cell.no:not(#\#), .meal-track-legend i.no:not(#\#) { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--mt-no) 22%, var(--bms-surface, #fff)) 0 4px, var(--bms-surface, #fff) 4px 8px); }
.meal-track-legend i.no:not(#\#) { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--mt-no) 45%, var(--bms-surface, #fff)) 0 2px, var(--bms-surface, #fff) 2px 4px); }
/* Báo cơm Theo ngày trên điện thoại: hiển thị gọn (anh Hiệp 24/10/2026) */
@media (max-width: 900px), (max-width: 950px) and (max-height: 500px) {
  html.bms-phone-v2 .meal-track-kpis > div:not(#\#) { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 9px 12px; }
  html.bms-phone-v2 .meal-track-kpis small:not(#\#) { min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  html.bms-phone-v2 .meal-track-kpis b:not(#\#) { flex: none; font-size: 16px; }
  html.bms-phone-v2 .meal-track-kpis :where(em):is(em, span):not(#\#), html.bms-phone-v2 .meal-track-kpis :where(span):is(em, span):not(#\#) { display: none; }
  html.bms-phone-v2 .meal-track-legend:not(#\#) { flex-wrap: nowrap; gap: 12px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  html.bms-phone-v2 .meal-track-table thead th small:not(#\#) { display: none; }
  html.bms-phone-v2 .meal-track-table :where(th):is(th, td):not(#\#), html.bms-phone-v2 .meal-track-table :where(td):is(th, td):not(#\#) { height: 40px; }
  html.bms-phone-v2 .meal-track-who b:not(#\#) { font-size: 13px; }
  html.bms-phone-v2 .meal-track-cell:not(.none):not(#\#) { display: flex; align-items: baseline; gap: 4px; padding: 4px 6px; overflow: hidden; white-space: nowrap; }
  html.bms-phone-v2 .meal-track-cell:not(.none) small:not(#\#) { flex: none; order: -1; font-size: 11px; font-weight: 700; }
  html.bms-phone-v2 .meal-track-cell:not(.none) b:not(#\#) { min-width: 0; overflow: hidden; font-size: 11px; font-weight: 500; text-overflow: ellipsis; }
}
@media (max-width: 900px), (max-width: 950px) and (max-height: 500px) {
  html.bms-phone-v2 .meal-track-cell:not(.none):not(#\#) { box-sizing: border-box; width: 100%; max-width: 100%; }
}
@media (max-width: 900px), (max-width: 950px) and (max-height: 500px) {
  /* Có nơi ăn thì hiện nơi ăn, giờ báo xem trên máy tính. */
  html.bms-phone-v2 .meal-track-cell.has-place small:not(#\#) { display: none; }
  html.bms-phone-v2 .meal-track-cell.has-place b:not(#\#) { font-weight: 700; }
}
@media (max-width: 900px), (max-width: 950px) and (max-height: 500px) {
  /* Không có nơi ăn: màu ô đã nói có ăn / báo muộn, chỉ cần giờ báo. */
  html.bms-phone-v2 .meal-track-cell.time-only b:not(#\#) { display: none; }
}