._dash-loading {
  display: none !important;
}

.dash-spinner-container .dash-spinner-text {
  display: none !important;
}

.uw-page { min-height: calc(100dvh - var(--uw-nav-h, 56px)); }
@supports not (height: 100dvh) {
  .uw-page { min-height: calc(100vh - var(--uw-nav-h, 56px)); }
}

/* The routed page wrapper already owns the viewport height and navbar offset.
   Do not make every routed child add another viewport minimum: on iOS, 100vh +
   safe-area padding can leave a small scroll range on otherwise short pages. */
#page-content.uw-page {
  min-height: 100dvh;
  box-sizing: border-box;
}
#page-content > .uw-page {
  min-height: auto;
}

/* Keep navbar always visible (prevents banners from causing scroll jumps). */
.uw-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 6000;
}

/* Page content starts below the fixed navbar */
#page-content {
  padding-top: var(--uw-nav-h, 56px);
}

/* Banner alerts: fixed overlay below navbar, no layout shift */
.uw-banner-alert {
  position: fixed;
  top: calc(var(--uw-nav-h, 56px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 24px), var(--uw-content-max, 1200px));
  z-index: 6500;
  margin: 0 !important;
  pointer-events: auto;
}


/* Center + cap routed page content on ultra-wide screens (navbar stays full width) */
#page-content{
  width: 100%;
  display: flex;
  justify-content: center;
}
#page-content > *{
  width: 100%;
  max-width: var(--uw-content-max, 1200px);
  margin-left: auto;
  margin-right: auto;
}


.uw-card {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

/* ------------------------------------------------------------
   Cards: make Bootstrap "secondary" text readable on dark/glass cards
   (scoped to uw-card so we don't affect light backgrounds elsewhere)
   ------------------------------------------------------------ */

.text-secondary,
.text-muted{
  color: rgba(255,255,255,.78) !important;
}

.uw-card .text-secondary a,
.uw-card .text-muted a{
  color: rgba(255,255,255,.9);
}

/* Groups: kebab dropdown items/icons readable in dark menu */
.pg-groups-kebab-wrap .dropdown-menu-dark .dropdown-item{
  color: rgba(255,255,255,.92);
}
.pg-groups-kebab-wrap .dropdown-menu-dark .dropdown-item i{
  color: inherit;
}
.pg-groups-kebab-wrap .dropdown-menu-dark .dropdown-item.text-danger{
  color: var(--bs-danger) !important;
}

.uw-link { color: #1abc9c; } /* Darkly's 'success' teal-ish */

.btn-tap {
  min-height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Rendiamo i pulsanti outline-light più "cliccabili" su sfondi scuri */
.btn-outline-light.btn-tap {
  border-color: rgba(255,255,255,.35) !important;
  color: rgba(255,255,255,.92) !important;
}
.btn-outline-light.btn-tap:hover {
  border-color: rgba(255,255,255,.6) !important;
  background-color: rgba(255,255,255,.08) !important;
}

.icon-btn {
  min-width: 54px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1.25rem;
  font-weight: 600;
}

/* Make the 3-dots always visible and remove caret */
.dropdown-toggle::after { display: none !important; }
.icon-btn i { font-size: 1.2rem; color: rgba(255,255,255,.92) !important; }

/* Slightly stronger outline buttons so they don't look disabled */
.btn-outline-light {
  border-color: rgba(255,255,255,.25) !important;
  color: rgba(255,255,255,.92) !important;
}
.btn-outline-light:hover {
  border-color: rgba(255,255,255,.45) !important;
  color: #fff !important;
}

.uw-stat { border-radius: 14px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.12); }

.uw-checklist .form-check { padding: .45rem 0; }
.uw-checklist .form-check-label { cursor: pointer; }

/* listgroup on dark background */
.uw-listgroup .list-group-item {
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.08);
}


/* ─────────────────────────────────────────────────────────────
   Brand theme (Ubrianza Wise)
   Palette inspired by the provided logo
   ───────────────────────────────────────────────────────────── */
:root{
  --uw-content-max: 1200px;
  --uw-primary: #0aa35b;
  --uw-primary-2: #067a44;
  --uw-accent: #f2b200;
  --uw-accent-2: #ffcf4d;
  --uw-bg: #0b0f14;
  --uw-navbar-bg: #303030;
  --uw-app-bg: radial-gradient(1200px 800px at 20% 10%, rgba(10,163,91,0.14), transparent 55%),
               radial-gradient(1000px 700px at 80% 20%, rgba(242,178,0,0.10), transparent 55%),
               var(--uw-bg);
  --uw-surface: rgba(255,255,255,0.06);
  --uw-border: rgba(255,255,255,0.14);
  --uw-text: rgba(255,255,255,0.92);
  --uw-muted: rgba(255,255,255,0.62);

  /* Bootstrap vars overrides (BS5) */
  --bs-primary: var(--uw-primary);
  --bs-link-color: var(--uw-accent);
  --bs-link-hover-color: var(--uw-accent-2);
}

html{
  min-height: 100%;
  background: var(--uw-app-bg) !important;
}

body{
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--uw-app-bg) !important;
}

.navbar{
  border-bottom: 1px solid var(--uw-border);
  backdrop-filter: blur(12px);
}

/* Mobile browser / PWA chrome: keep any top safe-area or status-bar space
   visually attached to the navbar instead of using the green brand color. */
.uw-navbar.navbar,
.uw-navbar.navbar.bg-dark{
  background-color: var(--uw-navbar-bg) !important;
}

.navbar-brand{
  letter-spacing: 0.2px;
}

.uw-brand-logo{
  height: 45px;
  border-radius: 0;      /* niente bordo “visivo” */
  box-shadow: none;      /* rimuove il bordo che avevi */
  padding: 0;
  display: block;
}

.btn-primary{
  /* Ensure ALL Bootstrap interaction states (hover/active/focus) use the Ubrianza theme.
     We also set the BS vars because Bootstrap buttons read from them for states. */
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--uw-primary);
  --bs-btn-border-color: var(--uw-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--uw-primary-2);
  --bs-btn-hover-border-color: var(--uw-primary-2);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--uw-primary-2);
  --bs-btn-active-border-color: var(--uw-primary-2);
  --bs-btn-focus-shadow-rgb: 10, 163, 91;

  background-color: var(--uw-primary) !important;
  border-color: var(--uw-primary) !important;
}
.btn-primary:hover{
  background-color: var(--uw-primary-2) !important;
  border-color: var(--uw-primary-2) !important;
}

/* Make icon buttons (kebab / actions) clearly visible and tappable */
.icon-btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0 !important;
  color: var(--uw-text) !important;
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--uw-border) !important;
}
.icon-btn:hover{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* Offcanvas sizing + checklist alignment */
.uw-offcanvas{
  width: min(440px, 92vw) !important;
}
.uw-checklist .form-check{
  padding: 0.35rem 0.25rem;
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.uw-checklist .form-check:last-child{
  border-bottom: 0;
}
.uw-checklist .form-check-input{
  margin-top: 0.25rem;
}

/* Make outline buttons look clickable (Back / PDF) */
.btn-outline-secondary{
  border-color: rgba(255,255,255,0.18) !important;
  color: var(--uw-text) !important;
}
.btn-outline-secondary:hover{
  border-color: rgba(255,255,255,0.28) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Small polish */
.uw-page h1, .uw-page h2, .uw-page h3, .uw-page h4{
  color: var(--uw-text);
}
.text-muted{
  color: var(--uw-muted) !important;
}

/* User dropdown toggle: no border/padding, icon-only feel */
.uw-user-toggle{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center !important;
  color: rgba(255,255,255,.92) !important;
}
.uw-user-toggle:hover,
.uw-user-toggle:focus,
.uw-user-toggle:active{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Bigger user icon */
.uw-user-icon{
  font-size: 1.5rem;   /* più grande, proporzionato alla navbar */
  line-height: 1;
}

/* --- Groups: keep opened dropdown above other cards (fix stacking-context issue) --- */

/* baseline stacking */
.pg-group-card {
  position: relative;
  z-index: 0;
}

/* when the dropdown is opened, focus stays inside the card -> raise whole card above the list */
.pg-group-card:focus-within {
  z-index: 5000 !important;
}

/* stretched-link overlay must stay below the kebab */
.pg-groups-stretched {
  z-index: 1;
}

/* kebab + menu always above overlay and above other cards */
.pg-groups-kebab-wrap {
  position: relative;
  z-index: 6000 !important;
}

.pg-groups-kebab-wrap .dropdown-menu {
  z-index: 6001 !important;
}

/* Members offcanvas: hide save button in read-only mode (it stays disabled) */
.pg-groups-members-save:disabled {
  display: none !important;
}

/* iOS Safari: dropdown stacking fix (focus-within is unreliable on touch) */
@supports (-webkit-touch-callout: none) {
  @supports selector(:has(*)) {
    /* Raise the whole card when the dropdown is open */
    .pg-group-card:has(.dropdown.show),
    .pg-group-card:has(.dropdown-menu.show) {
      z-index: 7000 !important;
    }
  }
}

/* Compact date range (used in Storage filters) */
.uw-date-range .form-control { min-width: 0; }
.uw-date-range .input-group-text {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.72);
}


/* ─────────────────────────────────────────────────────────────
   Storage page polish (date range + recipe actions)
   ───────────────────────────────────────────────────────────── */

/* Compact, aligned date range (Inventory / Trash) */
.uw-date-range{
  width: 100%;
  border-radius: 12px;
  overflow: hidden; /* makes the whole group look like a single control */
}

.uw-date-range .form-control,
.uw-date-range .input-group-text{
  min-height: 44px; /* match .btn-tap */
}

/* Keep "From/To" compact and aligned with dark theme */
.uw-date-range .input-group-text{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  white-space: nowrap;
  background: rgba(255,255,255,0.06);
  color: var(--uw-text, rgba(255,255,255,0.92));
  border-color: var(--uw-border, rgba(255,255,255,0.14));
  opacity: 0.9;
}

/* Prevent date inputs from forcing weird widths in narrow columns */
.uw-date-range .form-control{
  min-width: 0;
}

/* Recipe action buttons: align + center nicely */
.uw-recipe-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center; /* mobile */
}

@media (min-width: 768px){
  .uw-recipe-actions{
    justify-content: flex-end; /* desktop */
  }
}

/* Ensure icon+text are vertically centered inside buttons */
.uw-recipe-actions .btn,
.uw-recipe-actions .btn.btn-tap{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.uw-recipe-actions .btn i{
  line-height: 1;
}

/* Storage recipes - spacing for actions */
.st-rec-actions-col { margin-top: .5rem; }
@media (min-width: 768px) {
  .st-rec-actions-col { margin-top: 8; }
}

/* Drink: bottle select truncation */
.dg-bottle-select {
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------
   Banner alerts (top messages) - close button alignment
   ------------------------------------------------------------ */

.uw-banner-alert.alert-dismissible {
  /* Keep room for the close button even with reduced vertical padding */
  padding-right: 3rem;
}

.uw-banner-alert.alert-dismissible .btn-close {
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5rem 1rem;
}

/* ------------------------------------------------------------
   Groups: Members offcanvas - clientside selection icons
   ------------------------------------------------------------ */

.pg-mem-btn .pg-mem-icon-on {
  display: none;
}

.pg-mem-btn .pg-mem-icon-off {
  display: inline-block;
}

.pg-mem-btn.pg-mem-selected .pg-mem-icon-on {
  display: inline-block;
}

.pg-mem-btn.pg-mem-selected .pg-mem-icon-off {
  display: none;
}


/* Hint icons inside members picker */
.pg-mem-hint-icon { cursor: pointer; }
.pg-mem-hint-icon:active { transform: scale(0.98); }


/* Members picker: force left alignment inside full-width buttons */
.pg-mem-btn {
  text-align: left !important;
}
.pg-mem-btn > div {
  justify-content: flex-start;
}
.pg-mem-fixed {
  opacity: 0.92;
}

/* Fixed-width icon slot so member names align perfectly */
.pg-mem-icon-slot{
  width: 1.6rem;
  flex: 0 0 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: .5rem;
}
.pg-mem-icon-slot i{
  font-size: 1.15rem;
  line-height: 1;
}
.pg-mem-name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Members offcanvas: scroll list + sticky footer button */
.pg-members-offcanvas .offcanvas-body{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden; /* prevent body scroll; list scrolls instead */
}
.pg-members-offcanvas .pg-mem-scroll{
  flex: 1 1 auto;
  min-height: 0;   /* critical for overflow in flex children */
  overflow-y: auto;
  padding-right: 2px; /* avoid scrollbar overlay */
}
.pg-members-offcanvas .pg-mem-footer{
  flex: 0 0 auto;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  backdrop-filter: none;
}

/* Loading placeholder (no blur / no boxed background) */
.pg-mem-loading{
  background: transparent;
}

/* Save members: show "Saving..." while the server callback is running */
#pg-groups-members-save .pg-save-loading{
  display: none;
  align-items: center;
  justify-content: center;
}

#pg-groups-members-save[data-dash-is-loading="true"] .pg-save-label{
  display: none;
}

#pg-groups-members-save[data-dash-is-loading="true"] .pg-save-loading{
  display: inline-flex;
}

/* Prevent double-submits while saving */
#pg-groups-members-save[data-dash-is-loading="true"]{
  pointer-events: none;
  opacity: 0.85;
}

/* Outline primary in verde tema, mantenendo comportamento Bootstrap (hover/active filled) */
.btn-outline-primary{
  --bs-btn-color: var(--uw-primary);
  --bs-btn-border-color: var(--uw-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--uw-primary);
  --bs-btn-hover-border-color: var(--uw-primary);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--uw-primary-2);
  --bs-btn-active-border-color: var(--uw-primary-2);

  /* focus ring coerente (rgb di #0aa35b) */
  --bs-btn-focus-shadow-rgb: 10, 163, 91;
}

/* Members offcanvas: keep it below the fixed navbar */
.pg-members-offcanvas.offcanvas{
  top: var(--uw-nav-h, 56px) !important;
  height: calc(100vh - var(--uw-nav-h, 56px)) !important;
}

/* (Optional) make sure inner sections still layout correctly */
.pg-members-offcanvas .offcanvas-header{
  flex: 0 0 auto;
}
.pg-members-offcanvas .offcanvas-body{
  height: auto;
}

/* ─────────────────────────────────────────────────────────────
   Receipt page: mobile order (details -> items -> payers)
   Desktop: sidebar left (details + payers) + items right
   ───────────────────────────────────────────────────────────── */

/* Mobile: keep the DOM order as details -> items -> payers */
.rcpt-grid {
  display: flex;
  flex-direction: column;
}

/* Mobile-only flattening: the sidebar wrapper is only used on desktop. */
.rcpt-grid-sidebar {
  display: contents;
}

.rcpt-grid-section {
  margin-bottom: 1rem; /* simile a Bootstrap g-3 */
}

.rcpt-grid-details { order: 1; }
.rcpt-grid-items   { order: 2; }
.rcpt-grid-payers  { order: 3; }

/* Desktop (lg+): 2 columns. The left sidebar stacks details + payers,
   so payers stays attached below Receipt details even with a long items list. */
@media (min-width: 992px) {
  .rcpt-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    grid-template-areas: "sidebar items";
    gap: 1rem;
    align-items: start;
  }

  .rcpt-grid-sidebar {
    display: block;
    grid-area: sidebar;
  }

  .rcpt-grid-section {
    margin-bottom: 0;
  }

  .rcpt-grid-details,
  .rcpt-grid-items,
  .rcpt-grid-payers {
    order: initial;
  }

  .rcpt-grid-items {
    grid-area: items;
  }
}

/* Su device touch: evita hover sticky (iOS) sui toggle-all */
@media (hover: none), (pointer: coarse) {
  .rcpt-toggleall.btn-outline-primary:hover,
  .rcpt-toggleall.btn-outline-primary:focus:hover {
    background-color: transparent;
    color: var(--bs-primary);
  }

  .rcpt-toggleall.btn-outline-danger:hover,
  .rcpt-toggleall.btn-outline-danger:focus:hover {
    background-color: transparent;
    color: var(--bs-danger);
  }
}

/* ─────────────────────────────────────────────────────────────
   Circles + circle-scoped groups/storage
   ───────────────────────────────────────────────────────────── */
.uw-circle-card {
  border-left: 3px solid rgba(10, 163, 91, 0.75);
}

.uw-listgroup .list-group-item {
  border-color: rgba(255, 255, 255, 0.08);
}

.pg-mem-scroll {
  max-height: min(42vh, 420px);
  overflow: auto;
  padding-right: .25rem;
}

.pg-mem-btn {
  white-space: normal;
  min-height: 44px;
}

.pg-mem-selected {
  box-shadow: 0 0 0 1px rgba(10, 163, 91, .35) inset;
}

.pg-mem-fixed {
  opacity: .85;
}

.pg-mem-icon-slot {
  width: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: .35rem;
}

.pg-mem-btn .pg-mem-icon-on {
  display: none;
}

.pg-mem-btn.pg-mem-selected .pg-mem-icon-on {
  display: inline-block;
}

.pg-mem-btn.pg-mem-selected .pg-mem-icon-off {
  display: none;
}

.pg-mem-footer {
  position: sticky;
  bottom: 0;
  padding-top: .75rem;
  background: var(--bs-body-bg);
  z-index: 2;
}

@media (max-width: 575.98px) {
  .uw-circle-card .card-body,
  .pg-group-card .card-body {
    padding: .9rem;
  }

  .pg-members-offcanvas.offcanvas {
    width: 100% !important;
  }
}

/* --- 2026-06-06: stable list panels for circles/groups and receipt discounts --- */
.pg-circles-filter-row .form-control,
.pg-circles-filter-row .Select-control {
  min-height: 44px;
}

.pg-circle-members-panel,
.pg-circle-member-results-panel,
.pg-groups-member-panel,
.pg-groups-guest-list-panel,
.pg-groups-guest-results-panel {
  min-height: 0;
  max-height: min(34vh, 320px);
  overflow: auto;
  padding-right: .25rem;
}

.pg-members-offcanvas .offcanvas-body,
.pg-guests-offcanvas .offcanvas-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pg-members-offcanvas .pg-mem-footer,
.pg-guests-offcanvas .pg-mem-footer {
  flex: 0 0 auto;
}

.pg-groups-member-panel {
  flex: 1 1 auto;
  max-height: none;
}

.pg-guests-offcanvas .pg-groups-guest-list-panel,
.pg-guests-offcanvas .pg-groups-guest-results-panel {
  max-height: min(30vh, 280px);
}

.rcpt-discount-card {
  border-color: rgba(255, 193, 7, .35) !important;
}

.rcpt-discount-card .card-body {
  background: rgba(255, 193, 7, .03);
}

/* --- 2026-06-08: navigation, mobile layout and action affordances --- */
.pg-groups-titlebar,
.st-mobile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.pg-groups-title-text,
.st-title-text {
  min-width: 0;
  flex: 1 1 auto;
}

.pg-groups-circles-inline,
.st-groups-inline {
  flex: 0 0 auto;
  white-space: nowrap;
}

.st-add-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.pg-groups-member-panel {
  height: min(34vh, 320px) !important;
  max-height: min(34vh, 320px) !important;
  min-height: 180px !important;
  flex: 0 0 auto !important;
  align-content: flex-start;
  overflow-y: auto;
}

.gd-summary-table th,
.gd-summary-table td,
.uw-nowrap-money {
  white-space: nowrap !important;
}

.gb-received-btn {
  font-weight: 600;
  border-color: rgba(13, 202, 240, .85) !important;
  box-shadow: 0 0 0 1px rgba(13, 202, 240, .16) inset;
}

.dg-bottom-actions {
  margin-top: .25rem;
}

@media (max-width: 575.98px) {
  .pg-groups-titlebar,
  .st-mobile-header {
    align-items: center;
  }

  .st-add-row .btn {
    width: auto;
  }
}

/* 2026-06-08 v3: clearable search inputs and dynamic sidebars */
.uw-clear-btn {
  min-width: 2.65rem;
}

.pg-members-offcanvas .offcanvas-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.pg-members-offcanvas .pg-mem-footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: .75rem;
  background: var(--bs-body-bg);
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.pg-circle-members-panel,
.pg-groups-member-panel {
  flex: 1 1 auto !important;
  min-height: 160px !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.pg-mem-search-zone,
.pg-circle-member-results-panel,
.pg-groups-guest-list-panel,
.pg-groups-guest-results-panel {
  flex: 0 1 auto;
  min-height: 0;
}

.pg-circle-member-results-panel,
.pg-groups-guest-results-panel,
.pg-groups-guest-list-panel {
  max-height: min(26vh, 280px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.pg-groups-titlebar,
.st-mobile-header {
  align-items: center !important;
}

.rcpt-bottom-actions {
  margin-top: 1.25rem;
}

@media (min-width: 768px) {
  .rcpt-bottom-actions {
    margin-top: 2rem;
  }
}

.uw-clearable-group { position: relative; }
.uw-clearable-group .uw-clearable-input { padding-right: 2.35rem; }
.uw-clearable-group .uw-clear-btn {
  position: absolute;
  right: 2.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  min-width: 1.8rem;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color);
  box-shadow: none !important;
}
.uw-clearable-group .uw-clear-btn:hover,
.uw-clearable-group .uw-clear-btn:focus {
  color: var(--bs-body-color);
  background: transparent;
}

/* 2026-06-09 v4: classic clear buttons, dynamic member sidebars, desktop alignment */
.uw-clearable-group {
  position: relative;
}
.uw-clearable-group .uw-clearable-input {
  padding-right: 4.85rem !important;
}
.uw-clearable-group .uw-clear-btn {
  position: absolute !important;
  right: 3.05rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.45rem !important;
  min-width: 1.45rem !important;
  height: 1.45rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #6c757d !important;
  box-shadow: none !important;
  line-height: 1 !important;
  opacity: 1;
}
.uw-clearable-group .uw-clear-btn .bi {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #6c757d !important;
  font-size: .78rem !important;
  line-height: 1 !important;
}
.uw-clearable-group .uw-clear-btn:hover,
.uw-clearable-group .uw-clear-btn:focus {
  color: #495057 !important;
  background: rgba(108, 117, 125, .12) !important;
}
.uw-clearable-group .uw-clearable-input:placeholder-shown + .uw-clear-btn {
  opacity: 0 !important;
  pointer-events: none !important;
}

.pg-members-offcanvas .offcanvas-body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}
.pg-members-offcanvas .pg-mem-footer {
  flex: 0 0 auto !important;
  margin-top: auto !important;
  padding-top: .75rem !important;
  background: var(--bs-body-bg) !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
}
.pg-members-offcanvas .pg-mem-search-zone {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  margin-top: .25rem !important;
}
.pg-circle-members-panel {
  flex: 1 1 auto !important;
  min-height: 150px !important;
  max-height: max(180px, calc(100dvh - 410px)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
.pg-circle-member-results-panel {
  min-height: 82px !important;
  max-height: min(24dvh, 230px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
.pg-groups-member-panel {
  flex: 1 1 auto !important;
  min-height: 280px !important;
  height: auto !important;
  max-height: calc(100dvh - 190px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  align-content: flex-start !important;
}
.pg-groups-guest-list-panel,
.pg-groups-guest-results-panel {
  min-height: 90px !important;
  max-height: min(28dvh, 260px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.pg-groups-titlebar,
.st-mobile-header {
  align-items: center !important;
  flex-wrap: nowrap !important;
}
.pg-groups-title-text,
.st-title-text {
  min-width: 0 !important;
}
.pg-groups-title-text h1,
.st-title-text h2 {
  overflow-wrap: anywhere;
}
.pg-groups-circles-inline,
.st-groups-inline {
  align-self: center !important;
  white-space: nowrap !important;
}
@media (min-width: 768px) {
  .pg-groups-circles-inline {
    margin-top: .15rem;
  }
  .st-groups-inline {
    margin-top: .35rem;
  }
}

.rcpt-discount-input {
  position: relative;
}
.rcpt-discount-input .rcpt-discount-minus {
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #495057 !important;
  pointer-events: none;
  font-weight: 700;
  line-height: 1;
  width: .55rem;
  text-align: center;
  text-shadow: none;
}
.rcpt-discount-input .rcpt-discount-money {
  padding-left: 1.35rem !important;
  position: relative;
  z-index: 1;
}
@media (max-width: 575.98px) {
  .rcpt-discount-input .rcpt-discount-minus {
    left: .48rem;
  }
  .rcpt-discount-input .rcpt-discount-money {
    padding-left: 1.05rem !important;
  }
}
.uw-clearable-group .uw-clear-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #6c757d !important;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
}

/* Final mobile/desktop polish */
.st-rec-actions-col {
  justify-content: flex-start !important;
}
@media (min-width: 768px) {
  .st-rec-actions-col {
    justify-content: flex-start !important;
  }
}
#st-tabs .nav-link,
#st-tabs .tab {
  white-space: nowrap;
}
#st-tabs .nav-link {
  padding-left: .58rem;
  padding-right: .58rem;
  font-size: .94rem;
}
@media (max-width: 380px) {
  #st-tabs .nav-link {
    padding-left: .42rem;
    padding-right: .42rem;
    font-size: .88rem;
  }
}
@media (min-width: 768px) {
  .st-mobile-header {
    align-items: center;
  }
  .st-mobile-header .st-groups-inline {
    align-self: center;
  }
}
.uw-card-with-close {
  position: relative;
}
.uw-settings-title {
  padding-right: 2.75rem;
}
.uw-card-close.uw-dialog-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 3;
}
.uw-dialog-close {
  width: 2.25rem;
  height: 2.25rem;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.82) !important;
  background: rgba(255,255,255,.06);
  text-decoration: none;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
}
.uw-dialog-close:hover,
.uw-dialog-close:focus {
  color: #fff !important;
  background: rgba(255,255,255,.12);
  text-decoration: none;
}

/* Storage recipe actions stay right-aligned on every viewport. */
.st-rec-actions-col,
.uw-recipe-actions {
  justify-content: flex-end !important;
}

/* Storage tabs: fill the whole available width and never wrap.
   The per-tab classes are also set in pages/storage.py because dbc.Tabs may
   render the generated .nav outside the element that receives id="st-tabs". */
.st-tabs-fill,
#st-tabs {
  width: 100% !important;
  max-width: 100% !important;
}
.st-tabs-fill > .nav,
.st-tabs-fill > ul.nav,
.st-tabs-fill .nav-tabs,
#st-tabs > .nav,
#st-tabs > ul.nav,
#st-tabs .nav-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}
.st-tab-fill-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  text-align: center !important;
}
.st-tab-fill-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Add-bottle modal starts under the fixed navbar instead of touching it. */
.st-add-bottle-modal .modal-dialog {
  margin-top: calc(var(--uw-nav-h, 56px) + 1.25rem) !important;
}
@media (max-width: 575.98px) {
  .st-add-bottle-modal .modal-dialog {
    margin-top: calc(var(--uw-nav-h, 56px) + .9rem) !important;
  }
}

/* Circle color ordering/picker. */
.uw-circle-card {
  border-left-width: 5px !important;
  border-left-style: solid !important;
}
.uw-circle-color-0 { border-left-color: #0aa35b !important; }
.uw-circle-color-1 { border-left-color: #f2b200 !important; }
.uw-circle-color-2 { border-left-color: #e74c3c !important; }
.uw-circle-color-3 { border-left-color: #ff8f7a !important; }
.uw-circle-color-4 { border-left-color: #3498db !important; }
.uw-circle-color-5 { border-left-color: #9b59b6 !important; }
.uw-circle-color-6 { border-left-color: #e056b5 !important; }

.pg-circle-color-picker {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .6rem !important;
  align-items: center !important;
}
.pg-circle-color-picker .form-check,
.pg-circle-color-picker .form-check-inline {
  margin: 0 !important;
  min-height: auto !important;
  padding-left: 0 !important;
}
.pg-circle-color-input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.pg-circle-color-label {
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 50% !important;
  display: inline-block !important;
  cursor: pointer !important;
  border: 3px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,.28) inset !important;
}
.pg-circle-color-picker .form-check:nth-child(1) .pg-circle-color-label { background: #0aa35b !important; }
.pg-circle-color-picker .form-check:nth-child(2) .pg-circle-color-label { background: #f2b200 !important; }
.pg-circle-color-picker .form-check:nth-child(3) .pg-circle-color-label { background: #e74c3c !important; }
.pg-circle-color-picker .form-check:nth-child(4) .pg-circle-color-label { background: #ff8f7a !important; }
.pg-circle-color-picker .form-check:nth-child(5) .pg-circle-color-label { background: #3498db !important; }
.pg-circle-color-picker .form-check:nth-child(6) .pg-circle-color-label { background: #9b59b6 !important; }
.pg-circle-color-picker .form-check:nth-child(7) .pg-circle-color-label { background: #e056b5 !important; }
.pg-circle-color-input:focus + .pg-circle-color-label,
.pg-circle-color-input:checked + .pg-circle-color-label {
  border-color: rgba(255,255,255,.96) !important;
  box-shadow: 0 0 0 3px rgba(13,110,253,.8), 0 0 0 1px rgba(0,0,0,.28) inset !important;
}

/* Guest groups mobile action row: keep secondary actions to the right. */
@media (max-width: 767.98px) {
  .pg-groups-guest-actions-right {
    margin-left: auto !important;
  }
}

/* Semantic URL focus targets should land below the fixed navbar. */
.uw-circle-card[id],
#pg-groups-list .pg-group-card[id],
#pg2-group-body .pg-receipt-card[id],
#gb-body [id^="gb-card-"][data-gb-card-other],
#gb-body .gb-history-item[id],
#st-inv-list .st-item-card[id],
#st-tr-list .st-item-card[id],
#st-rec-list .st-recipe-card[id] {
  scroll-margin-top: calc(var(--uw-nav-h, 56px) + env(safe-area-inset-top) + 16px);
}

/* During route transitions that must land at the natural top, disable browser
   scroll anchoring so mobile Safari/Chrome cannot preserve a small offset from
   the previous page while Dash swaps the DOM under the skeleton. */
html.uw-force-top-active,
html.uw-force-top-active body,
html.uw-force-top-active #page-content {
  overflow-anchor: none !important;
  scroll-behavior: auto !important;
}