.meal-calendar{--meal-teal:#20666a;max-width:1500px;margin:auto;color:#263f42}.meal-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0}.meal-toolbar input,.meal-calendar select{padding:7px;border:1px solid #bacacc;border-radius:6px}.meal-scroll{overflow-x:auto;border:1px solid #c8d8d8;border-radius:10px}.meal-grid{display:grid;grid-template-columns:repeat(7,minmax(125px,1fr));min-width:875px;gap:1px;background:#c8d8d8}.meal-weekday{background:var(--meal-teal);color:white;text-align:center;padding:12px 4px;font-weight:600}.meal-day,.meal-blank{background:white;min-width:0}.meal-blank{background:#f1f5f5}.meal-day header{display:flex;justify-content:space-between;align-items:center;padding:7px 9px;font-weight:700}.meal-day button{border:0;background:transparent;color:#17585d;text-decoration:underline;padding:4px;font-size:12px}.meal-slot{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px;min-height:115px;overflow-wrap:anywhere}.meal-slot strong{font-size:12px}.meal-booked{background:#bcdfe1}.meal-available{background:#fff6e9}.meal-past{opacity:.65}.meal-message{padding:12px;background:#e4f4e9;border-radius:6px}.meal-request-list{display:grid;gap:12px;margin-top:16px}.meal-request{padding:16px;background:white;border:1px solid #cedbdb;border-radius:8px}.meal-request p{margin:6px 0;white-space:pre-wrap;overflow-wrap:anywhere}.meal-dialog{width:min(620px,94vw);max-height:90vh;overflow:auto;border:0;border-radius:12px;padding:24px;box-shadow:0 12px 60px #0004}.meal-dialog::backdrop{background:#102b37aa}.meal-dialog label{display:flex;flex-direction:column;gap:5px;margin:12px 0;font-weight:600}.meal-dialog input,.meal-dialog select,.meal-dialog textarea{width:100%;padding:10px;border:1px solid #aebfc0;border-radius:6px;font:inherit}.meal-dialog textarea{min-height:85px}.meal-conflict{border:1px solid #dcc59b;padding:12px;margin:12px 0}.meal-conflict legend{font-size:15px;float:none;width:auto}.meal-calendar button:focus-visible{outline:3px solid #246f92;outline-offset:2px}

/* Month calendar board */
.meal-tabs { display:flex; gap:6px; border-bottom:1px solid #d4e1df; margin-bottom:20px; }
.meal-tabs button { border:0; border-bottom:3px solid transparent; padding:12px 20px; background:transparent; color:#718180; font-weight:600; }
.meal-tabs button.is-active { color:#20665e; border-bottom-color:#20665e; background:#eaf4f1; border-radius:6px 6px 0 0; }
.meal-table-panel { background:white; border:1px solid #dce5e5; border-radius:12px; overflow:hidden; }
.meal-table-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px; flex-wrap:wrap; }
.meal-table-heading h3 { font-size:19px; margin:0; }
.meal-table-heading label { display:flex; align-items:center; gap:8px; margin:0; font-size:13px; }
.meal-table-scroll { overflow-x:auto; }
.meal-table { width:100%; border-collapse:collapse; min-width:900px; font-size:13px; }
.meal-table th { background:#f5f8f7; color:#687e7b; text-align:left; padding:13px 16px; border-block:1px solid #e1e9e7; font-size:11px; text-transform:uppercase; letter-spacing:.4px; }
.meal-table td { padding:16px; border-bottom:1px solid #e8eeec; vertical-align:top; max-width:300px; overflow-wrap:anywhere; }
.meal-table tbody tr:hover { background:#fbfdfc; }
.meal-table-secondary { display:block; color:#7b8986; font-size:12px; margin-top:5px; }
.meal-table-notes p { margin:0 0 6px; white-space:pre-wrap; }
.meal-table-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.meal-table details { min-width:145px; font-size:12px; }
.meal-table details summary { cursor:pointer; color:#20665e; }
.meal-status { display:inline-block; padding:4px 9px; font-size:11px; border-radius:20px; font-weight:700; }
.meal-status-pending { color:#8c671c; background:#fff3ce; }
.meal-status-accepted { color:#20665e; background:#dff1e9; }
.meal-status-rejected { color:#a34141; background:#fbe9e9; }
.meal-table td.meal-table-empty { text-align:center; padding:40px; color:#7b8986; }
.meal-table-pagination { padding:16px 20px; margin:0; justify-content:flex-end; }
.meal-table-pagination > span { margin-right:auto; font-size:12px; color:#7b8986; }
.meal-table-notice { margin:0; padding:0 20px 12px; color:#7b8986; }
.meal-review-hint { color:#68797b; font-size:13px; margin-bottom:18px; }
.meal-pending-list { width:100%; display:flex; flex-direction:column; gap:6px; margin-top:5px; }
.meal-slot .meal-pending-request { width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:4px; background:#fff9e6; border:1px dashed #c99830; border-radius:5px; padding:7px; color:#75551e; text-decoration:none; }
.meal-slot .meal-pending-request:hover { background:#fff0be; text-decoration:none; }
.meal-slot .meal-pending-request:disabled { cursor:default; opacity:.7; }
.meal-pending-badge { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.meal-pending-name { font-size:12px; font-weight:600; overflow-wrap:anywhere; }
.meal-review-details { padding:12px; border-radius:6px; background:#f5f8f8; margin-bottom:16px; }
.meal-review-details p { white-space:pre-wrap; overflow-wrap:anywhere; margin:5px 0; }
.meal-calendar { max-width:1600px; }
.meal-intro { color:#647579; margin-bottom:20px; }
.meal-calendar-board { background:#fff; border:1px solid #dce5e5; border-radius:12px; overflow:hidden; box-shadow:0 3px 14px #173d3b05; }
.meal-calendar-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 26px 16px; flex-wrap:wrap; }
.meal-eyebrow { display:block; font-size:10px; letter-spacing:1.8px; font-weight:700; color:#7b898b; margin-bottom:6px; }
.meal-month-heading h2 { font-size:28px; font-weight:700; color:#253e40; margin:0; }
.meal-navigation { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.meal-navigation button, .meal-month-picker input { border:1px solid #d8e1e1; background:white; color:#365456; border-radius:6px; padding:8px 13px; font:inherit; font-size:13px; min-height:38px; }
.meal-navigation button:hover { background:#eef6f5; }
.meal-navigation button:disabled { opacity:.5; cursor:wait; }
.meal-arrows { display:flex; }
.meal-arrows button { font-size:25px; line-height:20px; width:38px; padding:7px; border-radius:6px 0 0 6px; }
.meal-arrows button + button { border-left:0; border-radius:0 6px 6px 0; }
.meal-month-picker { margin:0; }
.meal-legend { display:flex; align-items:center; gap:20px; padding:0 26px 20px; flex-wrap:wrap; color:#68797b; font-size:12px; }
.meal-legend > span { display:inline-flex; align-items:center; gap:7px; }
.meal-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.meal-dot-breakfast { background:#e7a35c; }
.meal-dot-lunch { background:#66abad; }
.meal-legend-note { margin-left:auto; }
.meal-scroll { overflow-x:auto; border:0; border-radius:0; }
.meal-grid { grid-template-columns:repeat(7,minmax(120px,1fr)); min-width:840px; background:#dfe7e7; border-top:1px solid #dfe7e7; border-bottom:1px solid #dfe7e7; }
.meal-weekday { background:#f7f9f9; color:#718184; padding:12px 4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; }
.meal-day { min-height:188px; padding:7px; }
.meal-day header { justify-content:flex-end; height:30px; margin-bottom:6px; gap:3px; padding:0; }
.meal-day time { display:inline-flex; align-items:center; justify-content:center; width:27px; height:27px; flex-shrink:0; font-size:12px; font-weight:600; }
.meal-today { background:#f4faf8; box-shadow:inset 0 0 0 1px #72a8a1; }
.meal-today time { background:#20665e; color:white; border-radius:50%; }
.meal-day .meal-all-day { margin-right:auto; color:#77908b; font-size:10px; padding:5px 2px; text-decoration:none; }
.meal-day .meal-all-day:hover { color:#185c53; text-decoration:underline; }
.meal-day-slots { display:flex; flex-direction:column; gap:6px; }
.meal-slot { gap:4px; padding:7px 8px; border-radius:4px; border-left:3px solid; min-height:63px; }
.meal-slot.breakfast { background:#fff6eb; border-color:#e8b06e; color:#895c2d; }
.meal-slot.lunch { background:#edf6f6; border-color:#7cb9b9; color:#386d70; }
.meal-slot.breakfast.meal-booked { background:#ffe0b8; border-color:#d78b38; }
.meal-slot.lunch.meal-booked { background:#c2e1e2; border-color:#4b9396; }
.meal-slot strong { font-size:10px; line-height:1.3; font-weight:700; }
.meal-donor { font-size:12px; line-height:1.5; white-space:pre-wrap; }
.meal-slot button { padding:0; font-size:11px; color:inherit; text-align:left; line-height:1.5; text-decoration:none; }
.meal-slot button:hover { text-decoration:underline; }
.meal-slot-status { font-size:11px; opacity:.8; }
.meal-past { opacity:1; }
.meal-past .meal-day-slots { opacity:.65; }
.meal-outside { background:#f8fafa; }
.meal-outside time { color:#b6c2c3; }
.meal-slot.meal-unloaded { background:#f5f7f7; border-color:#dde4e4; color:#8a999a; }
.meal-calendar-footer { padding:14px 24px; color:#7a898b; font-size:12px; }
.meal-calendar-error { margin:0 24px 16px; padding:12px; color:#8b492d; background:#fff2e9; border-radius:6px; font-size:13px; }
.meal-calendar-error button { border:0; background:none; color:inherit; text-decoration:underline; }
@media(max-width:767px) {
  .meal-calendar-heading { padding:18px 14px 14px; gap:14px; }
  .meal-month-heading h2 { font-size:24px; }
  .meal-legend { padding:0 14px 16px; gap:12px; }
  .meal-legend-note { margin-left:0; }
  .meal-calendar-footer { padding:12px 14px; }
}
