/* BeerEvent UI 2.0 — sidspecifik CSS: ui2-brewer.
   Bygger på tokens och komponenter i ui2.css. */

/* Farlig rad i en dropdown-meny (t.ex. "Ta bort"). Samma mönster som
   .dropdown-item--logout i ui2.css men för valfri destruktiv åtgärd. */
.dropdown-item--danger,
.dropdown-item--danger i {
  color: var(--ui-danger);
}
.dropdown-item--danger:hover,
.dropdown-item--danger:focus {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

/* Smal linjär mätare, t.ex. antal utställare av platser kvar. */
.ui-progress--sm { height: 6px; }

/* Liten indragen box för hjälptext, delade fält eller listor inuti ett
   formulär eller en panel — ersätter ad hoc "border rounded bg-*"-boxar. */
.ui-inset {
  padding: .85rem 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface-2);
  color: var(--ui-text);
}

/* Tredje raden i en .ui-tile, för kort förklarande text under värdet. */
.ui-tile__hint {
  display: block;
  margin-top: .1rem;
  color: var(--ui-muted);
  font-size: .74rem;
  line-height: 1.3;
}

/* .ui-tiles indragna så kanterna möter panelens rubrik/kropp. */
.ui-tiles--panel {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
  margin-top: .75rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 767.98px) {
  .ui-tiles--panel { margin-left: 1rem; margin-right: 1rem; }
}

/* Panelhuvud med samma hero-bild/overlay som sidhuvudena, så titel och
   nyckeltal syns mot bakgrundsbilden i t.ex. eventkorten under Mina event. */
.ui-panel__hero {
  position: relative;
  isolation: isolate;
  background:
    var(--ui-hero-overlay),
    var(--event-hero-image, var(--ui-hero-image, url("../img/ui2/hero-fallback.0706c2639cbd.svg"))) var(--event-hero-position, right center)/cover no-repeat,
    var(--ui-surface);
}
.ui-panel__hero .ui-panel__head { border-bottom: none; }
.ui-panel__hero .ui-panel__title {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.02em;
}
/* Chippen i eventkortets minihero delar kontrastfixen med den vanliga
   sidhero:n, se ".ui-hero .ui-chip" i ui2.css. */

/* Extra avdelare ovanför en ny .ui-panel__body-sektion i samma panel,
   t.ex. besökarsektionen eller arrangörsvyn i eventkortet. */
.ui-panel__body--divider {
  border-top: 1px solid var(--ui-divider);
}