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

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

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

/* 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-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);
}

body{
  background: 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) !important;
}

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

.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: stack naturale in ordine DOM */
.rcpt-grid {
  display: block;
}

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

/* Desktop (lg+): 2 colonne, items a destra che spanna 2 righe */
@media (min-width: 992px) {
  .rcpt-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    grid-template-areas:
      "details items"
      "payers  items";
    gap: 1rem;
    align-items: start;
  }

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

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

/* 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);
  }
}