/* ==========================================================================
   Design tokens
   ==========================================================================
   Bootstrap 5.3 reads its own component styles (`.btn`, `.card`,
   `.form-control`, …) from these `--bs-*` custom properties. The values
   below are set to Bootstrap's own stock defaults, so linking this file
   changes nothing visually today — it exists purely as the hook point for
   a future design kit. To re-skin the app, change values here; every
   stock Bootstrap component picks them up automatically.
   ========================================================================== */
:root {
  --bs-primary: #0d6efd;
  --bs-primary-rgb: 13, 110, 253;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-radius: 0.375rem;
}

/* ==========================================================================
   Shared layout/utility rules, deduplicated from the four pages' former
   inline <style> blocks.

   Reconciled values (the only intentional visual deltas in this refactor):
   - .imgthumb: was 40px (admin/index.html) vs 48px (admin/recipes.html) -> 48px
   - .searchbar: was 380px (admin/recipes.html) vs 420px (index.html) -> 420px
   - .tag-chip (admin/recipes.html only, unused by any markup) folded into .tag
   - .list: 320px (admin/index.html) vs 420px (admin/recipes.html) are a real
     density difference, not a copy/paste conflict - kept as a base class
     plus a `.list-tall` modifier for the taller variant.
   ========================================================================== */
body { padding: 24px; }

.tiny { font-size: .9rem; color: #666; }
.help { font-size: .85rem; color: #6c757d; }
.muted { color: #666; }
.pointer { cursor: pointer; }

.tag {
  display: inline-block;
  background: #eef;
  border-radius: 12px;
  padding: 2px 8px;
  margin: 2px 6px 0 0;
  font-size: .85rem;
}

.filters .form-select, .filters .form-control { max-width: 220px; }
.searchbar { max-width: 420px; }

/* Mobile: 24px page padding steals a third of a 390px viewport, and the
   filter row's fixed 220px selects don't fit on that width so their labels
   crop. Below 576px (Bootstrap's `sm` breakpoint) tighten padding and let
   filters go full-width one-per-row. */
@media (max-width: 575.98px) {
  body { padding: 12px; }
  .filters { flex-direction: column; align-items: stretch !important; }
  .filters .form-select,
  .filters .form-control { max-width: 100%; width: 100%; }
  .searchbar { max-width: 100%; }
}

.fav { cursor: pointer; }
.card-fav-row { display: flex; justify-content: flex-end; }
/* Only the recipe-card favorite star (index.html) is sized up; the
   recipe-detail favorite star (recipe.html) stays at inherited text size,
   matching each page's pre-refactor CSS exactly. */
.card-fav-row .fav { font-size: 1.25rem; line-height: 1; }

.card-img-top { object-fit: cover; height: 180px; }
.img-main { max-height: 340px; object-fit: cover; border-radius: 12px; }

.ing-grid { display: grid; grid-template-columns: 110px 110px 1fr; gap: 10px; }
.ing-row { display: grid; grid-template-columns: 80px 120px 1fr 160px 36px; gap: 8px; margin-bottom: 8px; }

.history li { margin-bottom: .25rem; }

.imgthumb { max-height: 48px; border-radius: 6px; }

.list { max-height: 320px; overflow: auto; }
.list-tall { max-height: 420px; }

.step { border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; }

.gallery-dropzone { border: 2px dashed #ccd; border-radius: 8px; padding: 10px; min-height: 60px; }
.dragging { opacity: .5; }
.drop-here { background: #f0f6ff; border-color: #0d6efd; }

.badge-ocr { position: absolute; left: 6px; top: 6px; font-size: .65rem; }

.thumb { position: relative; display: inline-block; margin: 4px; }
.thumb img { max-width: 120px; max-height: 90px; border-radius: 6px; border: 1px solid #ddd; }
.thumb .btn-del { position: absolute; top: -8px; right: -8px; border-radius: 50%; padding: 2px 6px; }
.thumb.drag-target { outline: 2px solid #0d6efd; }