/* The shared parts (web/ui/*.js), styled once for the app and the back office. Colours and sizes are design/tokens.css. */
.ic { display: block; flex: none; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); padding: 0 22px; border-radius: var(--radius-pill); font-size: var(--text-body); text-align: center; }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:active { filter: brightness(0.92); }
.btn.secondary { background: var(--bar); border: 1px solid var(--hair); color: var(--ink); }
.btn.dark { background: var(--ink); color: var(--on-accent); }
.btn.wide { width: 100%; }
.btn.gap { margin-top: 16px; }
.btn.gap-s { margin-top: 8px; }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-pearl { flex: none; padding: 7px 14px; border-radius: var(--radius-md); background: var(--bar); border: 2px solid var(--soft); font-size: var(--text-caption); }
.btn-pearl:disabled { opacity: 0.4; cursor: default; }
.link { color: var(--link); font-size: inherit; }
.icon-btn { width: var(--touch); height: var(--touch); display: grid; place-items: center; color: var(--accent); border-radius: 22px; }
.icon-btn:active { background: var(--page); }

/* ---------- switch, field ---------- */
.switch { position: relative; flex: none; width: 51px; height: 31px; border-radius: 16px; background: var(--hair); transition: background 0.2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.2s; }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.field { display: block; width: 100%; height: var(--touch); padding: 0 14px; border: 1px solid var(--hair); border-radius: var(--radius-control); outline: 0; background: var(--card); }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.field.big { margin-top: 20px; height: 48px; font-size: var(--text-body); }

/* ---------- stores, avatars ---------- */
.logos { display: inline-flex; align-items: center; gap: 4px; min-height: var(--logo-sm); }
.logo { display: block; width: var(--logo-sm); height: var(--logo-sm); border-radius: 3px; object-fit: contain; } /* every shop's logo is square (design/logos); a wider one (dm) fits inside */
.store { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.store::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--faint)); flex: none; }
.st-lidl { --c: var(--store-lidl); } .st-aldi { --c: var(--store-aldi); } .st-kaufland { --c: var(--store-kaufland); } .st-dm { --c: var(--store-dm); } .st-rewe { --c: var(--store-rewe); } .st-edeka { --c: var(--store-edeka); } .st-rossmann { --c: var(--store-rossmann); } .st-mueller { --c: var(--store-mueller); } .st-scheckin { --c: var(--store-scheckin); } .st-penny { --c: var(--store-penny); } .st-netto { --c: var(--store-netto); }
.avatars { display: inline-flex; align-items: center; }
.avatar {
  display: inline-grid; place-items: center; flex: none; width: var(--s, 26px); height: var(--s, 26px); border-radius: 50%;
  background: var(--c); color: var(--on-accent); font-size: var(--text-micro); font-weight: 600; box-shadow: 0 0 0 2px var(--card);
}
.avatars .avatar + .avatar { margin-left: -6px; }
.more-n { margin-left: 4px; font-size: var(--text-fine); color: var(--muted); }

/* ---------- pills: a status word as text on its tint ---------- */
.pill { display: inline-block; font-size: var(--text-fine); font-weight: 600; line-height: 1; padding: 5px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.s-ok, .s-accepted, .s-published, .s-validated, .s-nothing-new { color: var(--green); background: var(--green-tint); }
.s-proposals, .s-review, .s-open, .s-running, .s-revised, .s-warn, .s-missing, .s-stopped { color: var(--orange); background: var(--orange-tint); }
.s-failed, .s-rejected, .s-error, .s-over { color: var(--red); background: var(--red-tint); }
.s-new { color: var(--link); background: var(--wash); }
.s-unchanged, .s-skipped, .s-downloaded, .s-prepared, .s-extracted, .s-dry-run, .s-read, .s-withdrawn, .s-extra { color: var(--muted); background: var(--soft); }

/* ---------- cards, tiles, tables, empty ---------- */
.card { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 24px; margin: 0 0 16px; }
.card.tight { padding: 16px 20px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 24px; }
.tile { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 16px 18px; min-width: 0; }
.tile .label { font-size: var(--text-small); color: var(--muted); }
.tile .value { font-size: var(--text-stat); font-weight: 600; letter-spacing: -0.02em; margin: 2px 0; }
.tile .detail { font-size: var(--text-small); color: var(--muted); }
.meter { height: 6px; border-radius: 3px; background: var(--soft); margin-top: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.meter i.warn { background: var(--orange); }
.meter i.over { background: var(--red); }
.empty { color: var(--muted); padding: 8px 0; }