/* Boodschappenlijst: page-specific parts. Colours come from the --mcdp-* tokens. */
.mcls-links { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; }
.mcls-links li { list-style: none; font-weight: 700; }
.mcls-links a { color: var(--mcdp-block); }

.mcls-entries { display: grid; gap: 10px; }
.mcls-entry { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--mcdp-line); border-radius: 6px; background: var(--mcdp-bg); }
.mcls-entry-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.mcls-tool { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mcdp-muted); }
.mcls-label { font-weight: 700; font-size: 15px; }
.mcls-label a { color: var(--mcdp-ink); }
.mcls-label a:hover { color: var(--mcdp-block); }
.mcls-date { font-size: 12px; color: var(--mcdp-muted); }
.mcls-items { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0; font-size: 14px; }
.mcls-items li { list-style: none; }
.mcls-items b { font-family: var(--mcdp-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.mcls-entry-foot { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.mcls-times { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mcdp-muted); margin: 0; }
#mcls .mcls-times input[type="number"] { width: 70px; font-size: 14px; padding: 5px 6px; }

#mcls td small { display: block; font-size: 11px; color: var(--mcdp-muted); }
#mcls td.mcls-item { font-family: inherit; font-weight: 700; }
#mcls tfoot td { font-weight: 700; border-top: 1px solid var(--mcdp-line); }

.mcls-confirm { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--mcdp-mark); border-radius: 6px; background: var(--mcdp-hl); }
#mcls .mcls-danger { border-color: var(--mcdp-mark); }
.mcls-fallback { display: grid; gap: 8px; }
#mcls textarea {
  width: 100%; font: 13px/1.45 var(--mcdp-mono); color: var(--mcdp-ink); background: var(--mcdp-bg);
  border: 1px solid var(--mcdp-line); border-radius: 4px; padding: 8px; resize: vertical; margin: 0;
}
#mcls input:focus-visible, #mcls textarea:focus-visible { outline: 2px solid var(--mcdp-mark); outline-offset: 2px; }