/* App-spezifische Ergaenzungen zu Bulma. Mobile-first, theme-faehig (light/dark).
   Wichtig: KEINE hartkodierten Hell-Farben mehr -> Bulma-CSS-Variablen nutzen,
   damit beide Themes lesbar bleiben. */

[x-cloak] { display: none !important; }

.section { padding-top: 1.5rem; }

/* Pack-Items kompakt und gut tippbar auf dem Handy. */
.pack-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .25rem;
  border-bottom: 1px solid var(--bulma-border-weak, #ededed);
}
.pack-item.is-checked .pack-name {
  text-decoration: line-through;
  color: var(--bulma-text-weak, #999);
}
.pack-item.is-hidden-item { opacity: .45; }
.pack-item .pack-qty { color: var(--bulma-text-weak, #7a7a7a); font-size: .85rem; }
.pack-item input[type="checkbox"] { width: 1.3rem; height: 1.3rem; flex: none; }

.person-tag { font-size: .7rem; font-weight: 600; }

/* Sticky Kategorie-Kopf: Hintergrund + Schrift aus dem aktiven Schema. */
.category-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: .4rem 0;
  background: var(--bulma-scheme-main, #fff);
  color: var(--bulma-text-strong, #363636);
  border-bottom: 2px solid var(--bulma-border, #dbdbdb);
}

.progress-line { font-variant-numeric: tabular-nums; }

/* Filter-Chips fuer Kategorien in der Reise. */
.cat-chip { cursor: pointer; }
.cat-chip.is-active { font-weight: 700; }

/* Bulma 1.0 setzt im Modal-Footer keinen Abstand zwischen den Buttons. */
.modal-card-foot { display: flex; gap: .75rem; flex-wrap: wrap; }