/* Tác vụ › Báo cơm (meal-self.js) và hộp nhắc báo cơm đầu ngày (meal-remind.js). */
.meal-self { --ms-on: #1F3A5F; --ms-eat: #15803D; display: grid; gap: 16px; }
.meal-self-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.meal-self-head h3 { margin: 0; font-size: 15px; }
.meal-self-head small { color: var(--muted); font-size: 13px; }
.meal-self-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 14px; align-items: stretch; }
.meal-self-teams { display: grid; gap: 10px; }
.meal-self-lunch, .meal-self-team { display: grid; align-content: start; gap: 10px; padding: 14px 16px; border: 1px solid var(--line, #E2E8F0); border-radius: 12px; background: var(--bms-surface, #fff); }
.meal-self-lunch.open { border-color: color-mix(in srgb, var(--ms-on) 40%, transparent); box-shadow: inset 4px 0 0 var(--ms-on); }
.meal-self-lunch header, .meal-self-team header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.meal-self-lunch header b { font-size: 18px; }
.meal-self-team header b { font-size: 15px; }
.meal-self-lunch header small, .meal-self-team header small { display: block; color: var(--muted); font-size: 13px; }
.meal-self-tag { padding: 4px 10px; border-radius: 999px; background: var(--bms-surface-subtle, #F1F5F9); color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.meal-self-tag.live { background: color-mix(in srgb, var(--ms-eat) 14%, var(--bms-surface, #fff)); color: var(--ms-eat); }
.meal-self-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.meal-self-pick { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 12px; border: 1px solid var(--line, #CBD5E1); border-radius: 10px; background: var(--bms-surface, #fff); color: var(--ink, var(--bms-text)); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.meal-self-pick i { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 8px; background: var(--bms-surface-subtle, #EEF2F7); color: var(--muted); font-size: 11px; font-style: normal; font-weight: 800; }
.meal-self-pick.no { justify-content: center; color: var(--muted); }
.meal-self-pick:hover:not(:disabled) { border-color: var(--ms-on); }
.meal-self-pick.on { border-color: var(--ms-on); background: var(--ms-on); color: #fff; }
.meal-self-pick.on i { background: rgba(255, 255, 255, .18); color: #fff; }
.meal-self-pick.no.on { border-color: #64748B; background: #64748B; }
.meal-self-pick:disabled { cursor: default; opacity: .6; }
.meal-self-pick.on:disabled { opacity: 1; }
.meal-self-lunch p, .meal-self-team p { margin: 0; color: var(--muted); font-size: 13px; }
.meal-self-team strong { font-size: 20px; }
.meal-self-team strong em { color: var(--muted); font-size: 13px; font-style: normal; font-weight: 600; }
.meal-self-off { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--bms-surface-subtle, #F8FAFC); color: var(--muted); }
.meal-self-nav { display: flex; align-items: center; gap: 6px; }
.meal-self-nav strong { min-width: 118px; text-align: center; font-size: 15px; }
.meal-self-nav .btn { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
.meal-self-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.meal-self-chips span { padding: 6px 12px; border-radius: 999px; background: var(--bms-surface-subtle, #F1F5F9); font-size: 13px; }
.meal-self-chips b { color: var(--ms-eat); }
.meal-self-cal { overflow: hidden; border: 1px solid var(--line, #E2E8F0); border-radius: 10px; }
.meal-self-week, .meal-self-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.meal-self-week span { padding: 8px 0; background: var(--bms-surface-subtle, #F8FAFC); color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.meal-self-day { display: grid; align-content: start; gap: 4px; min-height: 64px; padding: 6px 8px; border-top: 1px solid var(--line, #E2E8F0); border-left: 1px solid var(--line, #E2E8F0); }
.meal-self-days > :nth-child(7n + 1) { border-left: 0; }
.meal-self-day.blank { background: var(--bms-surface-subtle, #F8FAFC); }
.meal-self-day.sun { background: repeating-linear-gradient(135deg, var(--bms-surface-subtle, #F1F5F9) 0 5px, var(--bms-surface, #fff) 5px 10px); }
.meal-self-day.today { box-shadow: inset 0 0 0 2px var(--bms-primary, #0757b8); }
.meal-self-day strong { font-size: 13px; }
.meal-self-day.future strong { color: var(--muted); font-weight: 500; }
.meal-self-day i { overflow: hidden; padding: 2px 6px; border-radius: 4px; background: var(--ms-eat); color: #fff; font-size: 11px; font-style: normal; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.meal-self-day i.no { background: var(--bms-surface-subtle, #F1F5F9); color: var(--muted); }
@media (max-width: 900px) { .meal-self-grid { grid-template-columns: 1fr; } .meal-self-picks { grid-template-columns: 1fr 1fr; } }

/* Hộp nhắc báo cơm đầu ngày */
.meal-remind { width: min(520px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, .3); }
.meal-remind::backdrop { background: rgba(15, 23, 42, .45); }
.meal-remind > div { display: grid; gap: 14px; padding: 22px; }
.meal-remind header { display: flex; align-items: center; gap: 14px; }
.meal-remind header span { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 12px; background: #F2B705; color: #1F2937; font-size: 24px; }
.meal-remind h3 { margin: 0; font-size: 18px; }
.meal-remind header small { color: var(--muted); font-size: 13px; }
.meal-remind .meal-self-picks { grid-template-columns: 1fr 1fr; }
.meal-remind footer { display: flex; justify-content: flex-end; }
.meal-remind footer .btn { height: 40px; border-radius: 10px; }
/* Hộp nhắc cập nhật tiến độ dự án (production-update-remind.js), dùng chung khung .meal-remind */
.update-remind header span { background: #FDE68A; }
.update-remind-list { display: grid; gap: 8px; max-height: min(50vh, 360px); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.update-remind-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 8px 8px 8px 14px; border-radius: 10px; background: var(--bms-surface-subtle, #F8FAFC); }
.update-remind-list li div { display: grid; gap: 2px; min-width: 0; }
.update-remind-list b { font-size: 15px; }
.update-remind-list small { color: var(--muted); font-size: 13px; }
.update-remind-list .btn { flex: 0 0 auto; height: 40px; border-radius: 10px; }
/* Báo hộ cơm (quyền tasks.meal_proxy): ô số suất − / + mỗi ca. */
.meal-proxy-step { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 4px 6px 4px 14px; border-radius: 10px; background: var(--bms-surface-subtle, #F8FAFC); }
.meal-proxy-step b { font-size: 14px; }
.meal-proxy-qty { display: flex; align-items: center; gap: 6px; }
.meal-proxy-qty button { width: 40px; height: 40px; border: 1px solid var(--line, #CBD5E1); border-radius: 10px; background: var(--bms-surface, #fff); color: var(--ms-on, #1F3A5F); font: 700 18px/1 Roboto, system-ui, sans-serif; cursor: pointer; }
.meal-proxy-qty button:disabled { cursor: default; opacity: .4; }
.meal-proxy-qty output { min-width: 44px; font-size: 18px; font-weight: 700; text-align: center; }