/* Meal Planning — app-style grid (frozen guest-name column + date columns with
   Frukost/Lunch/Middag toggles). Outer frame (.b-card) injected at runtime.
   Colours/type/radius via tokens only. */

.meal-plan.b-card{ padding:var(--card-pad); }

.meal-plan__title{
	font-family:var(--font-display); font-weight:var(--display-w);
	letter-spacing:var(--display-ls); line-height:1.1;
	font-size:1.35rem; color:var(--ink); margin:.15rem 0 .35rem;
}
.meal-plan__intro{ margin:0 0 1rem; color:var(--ink-soft); font-size:.95rem; line-height:1.5; }
.meal-plan__dates{ margin:0 0 1rem; color:var(--muted); font-size:.9rem; font-weight:600; }
.meal-plan__loading{ color:var(--muted); font-size:.9rem; }
.meal-plan__empty{ color:var(--ink-soft); font-size:.92rem; padding:14px 4px; }
.meal-plan__back{ display:inline-block; margin:0 0 .85rem; color:var(--accent); font-size:.86rem; text-decoration:none; }
.meal-plan__back:hover{ text-decoration:underline; }

.meal-plan__picker{ display:flex; flex-direction:column; gap:8px; }
.meal-plan__picker-item{ justify-content:flex-start; text-align:left; }

/* ---- Grid ---- */
.meal-plan__grid-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); -webkit-overflow-scrolling:touch; }
.meal-plan__grid{ border-collapse:separate; border-spacing:0; width:auto; }
.meal-plan__grid th, .meal-plan__grid td{ border-bottom:1px solid var(--line); }

.meal-plan__corner, .meal-plan__namecell{
	position:sticky; left:0; z-index:2;
	background:var(--surface); min-width:140px; max-width:160px;
	text-align:left; vertical-align:middle;
	box-shadow:1px 0 0 var(--line);
}
.meal-plan__corner{ z-index:3; padding:8px 10px; background:var(--surface2); }
.meal-plan__legend{ display:flex; flex-direction:column; gap:1px; }
.meal-plan__legenditem{ font-size:.64rem; color:var(--muted); white-space:nowrap; }

.meal-plan__datecol{
	padding:6px 8px; text-align:center; min-width:118px; background:var(--surface2);
}
.meal-plan__datecol.is-today{ background:color-mix(in srgb, var(--accent) 12%, var(--surface2)); }
.meal-plan__date-num{ display:block; font-weight:700; font-size:.84rem; color:var(--ink); }
.meal-plan__date-day{ display:block; font-size:.7rem; text-transform:capitalize; color:var(--muted); }
.meal-plan__addday{ padding:4px; background:var(--surface2); }
.meal-plan__addday-btn{
	width:30px; height:30px; border:1px solid var(--line); border-radius:999px;
	background:var(--surface); color:var(--accent); font-size:1.1rem; line-height:1; cursor:pointer;
}
.meal-plan__addday-btn:hover{ background:var(--surface2); }

.meal-plan__row--all{ background:color-mix(in srgb, var(--accent) 7%, transparent); }
.meal-plan__namecell--all .meal-plan__name{ font-weight:700; color:var(--ink); padding:0 10px; }

.meal-plan__cell{ padding:7px 8px; text-align:center; }
.meal-plan__cell--add{ background:var(--surface2); }
.meal-plan__mbtns{ display:flex; gap:5px; justify-content:center; align-items:flex-start; }
.meal-plan__bulkstack{ display:flex; flex-direction:column; align-items:center; gap:1px; }
.meal-plan__count{ font-size:.64rem; color:var(--muted); font-weight:600; }

.meal-plan__mbtn{
	width:28px; height:28px; flex:0 0 auto;
	border:1px solid var(--line); border-radius:var(--radius-sm);
	background:var(--surface); color:var(--ink-soft);
	font-size:.74rem; font-weight:700; cursor:pointer;
	transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.meal-plan__mbtn:hover{ border-color:var(--accent); }
.meal-plan__mbtn.is-active{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.meal-plan__mbtn.is-partial{ background:color-mix(in srgb, var(--accent) 28%, var(--surface)); color:var(--ink); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.meal-plan__mbtn:disabled{ opacity:.5; cursor:default; }

.meal-plan__namebtn{
	display:flex; align-items:center; gap:6px; width:100%;
	padding:9px 10px; background:transparent; border:0; cursor:pointer;
	font:inherit; text-align:left; color:var(--ink);
}
.meal-plan__namebtn:hover{ background:var(--surface2); }
.meal-plan__namecell.is-selected{ background:color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.meal-plan__name{ font-size:.9rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.meal-plan__allergy-ind{ flex:0 0 auto; color:var(--warn); font-size:.8rem; }

/* ---- Inline guest editor ---- */
.meal-plan__editor{ margin-top:14px; padding:var(--card-pad); background:var(--surface2); display:flex; flex-direction:column; gap:12px; }
.meal-plan__editor-head{ display:flex; align-items:center; justify-content:space-between; }
.meal-plan__editor-title{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.meal-plan__editor-close{ border:0; background:transparent; font-size:1.3rem; line-height:1; color:var(--ink-soft); cursor:pointer; }
.meal-plan__editor-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.meal-plan__editor-del{ align-self:flex-start; }
.meal-plan__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.meal-plan__chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--line); border-radius:999px; font-size:.85rem; color:var(--ink-soft); cursor:pointer; user-select:none; }
.meal-plan__chip input{ accent-color:var(--accent); }
.meal-plan__other{ max-width:280px; }

.meal-plan__add{ display:flex; gap:8px; margin-top:1.1rem; flex-wrap:wrap; }
.meal-plan__add .b-input{ flex:1 1 200px; }
.meal-plan__foot{ display:flex; align-items:center; gap:10px; margin-top:1.1rem; flex-wrap:wrap; }

/* ---- Toast ---- */
.meal-plan__toast{
	position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(8px);
	z-index:1200; max-width:90vw; padding:11px 16px; border-radius:var(--radius);
	font-size:.88rem; box-shadow:var(--shadow-pop, 0 18px 40px -16px rgba(12,18,26,.5));
	opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.meal-plan__toast.is-show{ opacity:1; transform:translateX(-50%) translateY(0); }
.meal-plan__toast--ok{ background:var(--ok-bg); color:var(--ok); }
.meal-plan__toast--error{ background:var(--no-bg); color:var(--no); }

/* Mobile: give the wide meal grid the full screen width. The card goes
   edge-to-edge (full-bleed out of the page gutter, no side chrome); the content
   wrapper keeps a small gutter for text; the grid breaks back out so it uses
   every pixel. */
@media (max-width:768px){
	.meal-plan.b-card{
		width:100vw; max-width:100vw;
		margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
		padding-left:0; padding-right:0;
		border-left:0; border-right:0; border-radius:0;
	}
	.meal-plan__mount{ padding-left:12px; padding-right:12px; }
	.meal-plan__grid-wrap{ margin-left:-12px; margin-right:-12px; border-left:0; border-right:0; border-radius:0; }
}

@media (max-width:560px){
	.meal-plan__corner, .meal-plan__namecell{ min-width:112px; max-width:118px; }
	.meal-plan__name{ font-size:.82rem; }
}