/*
 * Budget panel - Option B (tabbed redesign), powered by SplitGoGo.
 * Built in TripGoGo's design system (see tripgogo/static/tripgogo/styles.css).
 * The panel rides on .idea-zone-panel for its fixed slide-in shell.
 */

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

/* ── Panel shell ─────────────────────────────────────────────── */
.sg-panel {
  width: 400px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: #fff;
  font-variant-numeric: tabular-nums;
}

.sg-panel__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--teal-900, #0e3d3b);
  color: #fff;
}

.sg-panel__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sg-panel__trip {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-panel__brand {
  height: 13px;
  width: auto;
  opacity: 0.85;
  align-self: flex-start;
}

.sg-panel__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sg-panel__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ── Summary band (pinned, dark) ─────────────────────────────── */
.sg-summary {
  flex: 0 0 auto;
  display: flex;
  background: var(--teal-900, #0e3d3b);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 8px 14px;
}
.sg-summary__cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 8px;
  text-align: left;
}
.sg-summary__cell + .sg-summary__cell {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.sg-summary__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.sg-summary__note {
  margin: 6px 14px 0;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--gray-500, #71717a);
}
.sg-summary__value {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.sg-summary__value--accent {
  color: var(--teal-400, #4cbfbb);
}

/* ── Tab bar ─────────────────────────────────────────────────── */
.sg-tabs {
  flex: 0 0 auto;
  display: flex;
  background: #fff;
  border-bottom: 1px solid var(--border, #e4e4e7);
}
.sg-tab {
  flex: 1;
  padding: 12px 6px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gray-500, #71717a);
  border-bottom: 2px solid transparent;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}
.sg-tab.is-active {
  color: var(--primary, #186966);
  border-bottom-color: var(--primary, #186966);
}
.sg-tab__count {
  display: inline-block;
  min-width: 16px;
  padding: 1px 5px;
  margin-left: 2px;
  font-size: 0.65rem;
  background: var(--gray-100, #f4f4f5);
  color: var(--gray-600, #52525b);
  border-radius: 999px;
}
.sg-tab.is-active .sg-tab__count {
  background: var(--teal-50, #e2f5f4);
  color: var(--primary, #186966);
}

/* ── Body / footer ───────────────────────────────────────────── */
.sg-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px;
  background: #f7f4ee;
}
.sg-panel__footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: #fff;
  border-top: 1px solid var(--border, #e4e4e7);
}
/* Slim the stacked panel CTAs (Add cost / Upload receipt) so they read as a
   compact pair rather than two full-height blocks. */
.sg-panel__footer .btn {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* "(optional)" hint next to a field label. */
.sg-label__hint {
  font-weight: 400;
  color: var(--gray-400, #a1a1aa);
}

/* Claim / mark-paid toggles on the item add-cost sheet. */
.sg-claim-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.sg-claim {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--gray-700, #3f3f46);
  cursor: pointer;
}
.sg-claim input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary, #186966);
  cursor: pointer;
}
/* Primary/secondary panel CTAs use the design system (.btn .btn-primary /
   .btn-outline-secondary + .btn-block) per Rule 7 - no bespoke button here. */

/* Secondary "View full budget" switch under the primary CTA. */
.sg-sheet__secondary {
  width: 100%;
  border: none;
  background: none;
  color: var(--primary, #186966);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.sg-sheet__secondary:hover {
  text-decoration: underline;
}
.sg-sheet__secondary i {
  margin-left: 4px;
  font-size: 0.72rem;
}

/* ── Whole-panel state (error / not saved) ───────────────────── */
.sg-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  text-align: center;
  color: var(--gray-500, #71717a);
}
.sg-state i {
  font-size: 1.6rem;
  color: var(--gray-400, #a1a1aa);
}

/* ── Filter chips ────────────────────────────────────────────── */
.sg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.sg-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 999px;
  background: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--gray-600, #52525b);
  cursor: pointer;
  transition: all 0.14s ease;
}
.sg-chip.is-active {
  background: var(--teal-900, #0e3d3b);
  border-color: var(--teal-900, #0e3d3b);
  color: #fff;
}
.sg-chip__n {
  font-size: 0.66rem;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gray-100, #f4f4f5);
  color: var(--gray-600, #52525b);
}
.sg-chip.is-active .sg-chip__n {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* ── Cost cards ──────────────────────────────────────────────── */
.sg-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sg-card {
  background: #fff;
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.sg-card__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  cursor: pointer;
}
.sg-card__icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.sg-card__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sg-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--neutral-dark, #1c1c1c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-card__sub {
  font-size: 0.72rem;
  color: var(--gray-500, #71717a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-card__claimant {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sg-card__right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.sg-card__amount {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--neutral-dark, #1c1c1c);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.sg-card__ccy {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--gray-400, #a1a1aa);
}

.sg-card__expand {
  border-top: 1px solid var(--border, #e4e4e7);
  background: #faf9f6;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sg-card__detail {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--gray-600, #52525b);
}
.sg-card__detail span:last-child {
  font-weight: 600;
  color: var(--neutral-dark, #1c1c1c);
}
.sg-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* Per-person breakdown ("who owes what") inside an expanded cost row.
   The panel is 400px wide and capped at 100vw, so this is already at its
   narrowest on a 390px phone: every text child gets min-width: 0 + ellipsis
   and the amount is flex-fixed, so a long name or note can never push the
   figure out of the panel. */
.sg-shares {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border, #e4e4e7);
}
.sg-shares__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.sg-shares__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-500, #71717a);
}
.sg-shares__est {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-600, #52525b);
  background: var(--gray-200, #e4e4e7);
  padding: 1px 6px;
  border-radius: 999px;
}
.sg-share {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 0.8rem;
}
.sg-share__name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--neutral-dark, #1c1c1c);
}
.sg-share__who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sg-share__tag {
  flex: 0 0 auto;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary, #186966);
  background: rgba(24, 105, 102, 0.12);
  padding: 1px 5px;
  border-radius: 999px;
}
.sg-share__note {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
  color: var(--gray-500, #71717a);
}
.sg-share__amt {
  flex: 0 0 auto;
  font-weight: 700;
  /* Tabular figures so the amounts line up as a column. */
  font-variant-numeric: tabular-nums;
}

/* ── Status pill ─────────────────────────────────────────────── */
.sg-pill {
  padding: 2px 8px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}
.sg-pill--planned {
  background: var(--gray-200, #e4e4e7);
  color: var(--gray-600, #52525b);
}
.sg-pill--claimed {
  background: #fff2cc;
  color: #946200;
}
.sg-pill--paid {
  background: var(--teal-50, #e2f5f4);
  color: var(--primary, #186966);
}

/* Inline tag for an auto-filled "price-at-click" estimate (vs a typed amount). */
.sg-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
}
.sg-tag--live {
  background: var(--teal-50, #e2f5f4);
  color: var(--primary, #186966);
}
.sg-tag--live i {
  font-size: 0.55rem;
}

/* ── Avatars ─────────────────────────────────────────────────── */
.sg-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}
.sg-avatar--xs {
  width: 16px;
  height: 16px;
  font-size: 0.55rem;
}

/* ── Small buttons ───────────────────────────────────────────── */
.sg-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
}
.sg-btn--ghost {
  background: #fff;
  border-color: var(--border, #e4e4e7);
  color: var(--gray-700, #3f3f46);
}
.sg-btn--ghost:hover {
  background: var(--gray-50, #fafafa);
}
.sg-btn--primary {
  background: var(--primary, #186966);
  color: #fff;
}
.sg-btn--primary:hover {
  background: var(--teal-900, #0e3d3b);
}
.sg-btn--danger {
  background: #fff;
  border-color: var(--border, #e4e4e7);
  color: var(--danger, #dc2626);
}
.sg-btn--danger:hover {
  background: #fef2f2;
  border-color: #fecaca;
}
/* Icon-only action (e.g. the trash button); stays narrow instead of stretching. */
.sg-btn--icon {
  flex: 0 0 auto;
}
/* Locked "Attach to" row on an item-scoped receipt upload. */
.sg-locked-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--gray-50, #fafafa);
  border: 1px solid var(--border, #e4e4e7);
  color: var(--gray-700, #3f3f46);
  font-size: 0.85rem;
}
.sg-locked-item i {
  color: var(--primary, #186966);
}

/* ── Empty state ─────────────────────────────────────────────── */
.sg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 16px;
  text-align: center;
  color: var(--gray-500, #71717a);
  font-size: 0.83rem;
  border: 1px dashed var(--gray-300, #d4d4d8);
  border-radius: 14px;
}
.sg-empty i {
  font-size: 1.3rem;
  color: var(--gray-400, #a1a1aa);
}
.sg-empty p {
  margin: 0;
}

/* ── Sections (Balances / Settle) ────────────────────────────── */
.sg-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sg-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.sg-section__sub {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.sg-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500, #71717a);
}
.sg-section__meta {
  font-size: 0.74rem;
  color: var(--gray-500, #71717a);
}
.sg-headline {
  margin: 2px 0 4px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--neutral-dark, #1c1c1c);
}

/* ── Balance rows ────────────────────────────────────────────── */
.sg-balances {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sg-balance {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 14px;
}
.sg-balance__who {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sg-balance__name {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--neutral-dark, #1c1c1c);
}
.sg-balance__role {
  font-size: 0.7rem;
  color: var(--gray-500, #71717a);
}
.sg-balance__amt {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--gray-500, #71717a);
}
.sg-balance__amt.is-pos {
  color: var(--primary, #186966);
}
.sg-balance__amt.is-neg {
  color: var(--secondary, #e85d33);
}

/* Expandable "what makes this up" breakdown under a balance row. Same
   mobile-first constraints as .sg-shares: the panel is 400px capped at 100vw,
   so every text child gets min-width: 0 and the figure is flex-fixed. */
.sg-balance-group {
  background: #fff;
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 14px;
  overflow: hidden;
}
.sg-balance-group > .sg-balance {
  border: 0;
  border-radius: 0;
}
.sg-balance--tappable {
  cursor: pointer;
  /* Comfortably past the 44px touch target with the 10px padding above. */
  min-height: 44px;
}
.sg-balance--tappable:focus-visible {
  outline: 2px solid var(--primary, #186966);
  outline-offset: -2px;
}
.sg-balance__caret {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: var(--gray-500, #71717a);
  transition: transform 0.15s ease;
}
.sg-balance__caret.is-open {
  transform: rotate(180deg);
}
.sg-balance__expand {
  border-top: 1px solid var(--border, #e4e4e7);
  background: #faf9f6;
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sg-bline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 30px;
  font-size: 0.8rem;
}
.sg-bline__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sg-bline__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--neutral-dark, #1c1c1c);
}
.sg-bline__sub {
  font-size: 0.68rem;
  color: var(--gray-500, #71717a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sg-bline__amt {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gray-500, #71717a);
}
.sg-bline__amt.is-pos {
  color: var(--primary, #186966);
}
.sg-bline__amt.is-neg {
  color: var(--secondary, #e85d33);
}
.sg-bline--other .sg-bline__label {
  font-style: italic;
}
.sg-bline--total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border, #e4e4e7);
  font-weight: 700;
}
.sg-bline--total .sg-bline__label {
  font-weight: 700;
}

/* ── Info panel ──────────────────────────────────────────────── */
.sg-info {
  display: flex;
  gap: 8px;
  padding: 11px 13px;
  background: var(--teal-50, #e2f5f4);
  border-radius: 12px;
  font-size: 0.78rem;
  color: var(--teal-900, #0e3d3b);
}
.sg-info i {
  margin-top: 2px;
}
.sg-info--ok {
  background: #e7f6ec;
  color: #1c6b39;
}

/* ── Settle rows ─────────────────────────────────────────────── */
.sg-settles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sg-settle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 14px;
}
.sg-settle__flow {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sg-settle__flow i {
  color: var(--gray-400, #a1a1aa);
  font-size: 0.75rem;
}
.sg-settle__detail {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sg-settle__amt {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--neutral-dark, #1c1c1c);
}
.sg-settle__names {
  font-size: 0.72rem;
  color: var(--gray-500, #71717a);
}
.sg-settle__form {
  flex: 0 0 auto;
}
.sg-settle__form .sg-btn {
  flex: 0 0 auto;
}

.sg-linkrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: #fff;
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 10px;
  font-size: 0.8rem;
  color: var(--gray-600, #52525b);
  cursor: pointer;
}
.sg-linkrow:disabled {
  opacity: 0.55;
  cursor: default;
}
.sg-linkrow i {
  color: var(--primary, #186966);
}

/* ── All-settled celebration ─────────────────────────────────── */
.sg-celebrate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 24px;
  text-align: center;
}
.sg-celebrate__check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #e7f6ec;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #1c6b39;
}
.sg-celebrate__text {
  margin: 0;
  font-size: 0.84rem;
  color: var(--gray-500, #71717a);
}
.sg-celebrate__pill {
  margin-top: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--teal-50, #e2f5f4);
  color: var(--primary, #186966);
  font-size: 0.7rem;
  font-weight: 700;
}

/* ── Add-cost / pay bottom sheet ─────────────────────────────── */
.budget-expense-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.budget-expense-modal-wrap[hidden] {
  display: none;
}
.budget-expense-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.budget-expense-modal {
  position: relative;
  background: #fff;
  border-radius: 18px 18px 0 0;
  width: min(440px, 100vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25);
  animation: sgSheetUp 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.budget-expense-modal::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--gray-300, #d4d4d8);
  margin: 8px auto 0;
}
@keyframes sgSheetUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.budget-modal-card {
  padding: 16px 20px 20px;
}
.budget-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.budget-modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}
.item-chat-close {
  border: none;
  background: var(--gray-100, #f4f4f5);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--gray-600, #52525b);
}

.budget-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.budget-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}
.budget-field > span,
.budget-field > legend {
  font-weight: 600;
  color: var(--gray-700, #3f3f46);
}
.budget-field input,
.budget-field select {
  padding: 9px 11px;
  border: 1px solid var(--gray-300, #d4d4d8);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
}
.budget-field input:focus,
.budget-field select:focus {
  outline: 2px solid var(--teal-400, #4cbfbb);
  outline-offset: -1px;
}
.budget-checkbox {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 400;
  padding: 2px 0;
  font-size: 0.85rem;
}
.budget-paid-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--border, #e4e4e7);
  padding-top: 12px;
}
.budget-locked-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  background: var(--teal-50, #e2f5f4);
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--teal-900, #0e3d3b);
  font-weight: 600;
}
.budget-pay-summary {
  margin: 0 0 4px;
  font-size: 0.92rem;
  color: var(--gray-700, #3f3f46);
}
.budget-pay-summary__item {
  color: var(--gray-500, #71717a);
  margin-left: 6px;
  font-size: 0.8rem;
}
.budget-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.budget-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.88rem;
}
.budget-empty {
  color: var(--gray-500, #71717a);
  font-size: 0.85rem;
  margin: 0;
}

/* ── Trip-detail toolbar Budget button icon ──────────────────── */
.trip-action-icon__img {
  height: 20px;
  width: 20px;
  object-fit: contain;
}

/* ── Per-itinerary-item "Add cost" button, sits in .reactions-and-chat.
   Matches .item-chat-btn sizing. ── */
/* Sized to sit flush with .item-chat-btn / .reaction-btn in the actions row. */
.splitgogo-cost-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.6rem;
  border: 1.5px solid rgba(13, 148, 136, 0.3);
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  line-height: 1;
  cursor: pointer;
  transition: all 0.18s ease;
}
.splitgogo-cost-btn__img {
  height: 18px;
  width: 18px;
  object-fit: contain;
  display: block;
}
/* Icon-only in the pill; the host (e.g. the mobile Manage menu) can reveal it. */
.splitgogo-cost-btn__label {
  display: none;
}
.splitgogo-cost-btn:hover {
  border-color: var(--primary, #0d9488);
  background: var(--teal-50, #f0fdfa);
  box-shadow: 0 3px 10px rgba(13, 148, 136, 0.18);
  transform: translateY(-1px);
}

/* ── Add-cost sheet (design Option B) ────────────────────────── */
.sg-sheet {
  padding-top: 4px;
}
.sg-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px 10px;
}
.sg-sheet__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--neutral-dark, #1c1c1c);
}
.sg-sheet__close {
  border: none;
  background: var(--gray-100, #f4f4f5);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--gray-600, #52525b);
  font-size: 0.95rem;
}
.sg-sheet__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 20px 22px;
}
/* Sticky footer: stays pinned to the bottom of the scrolling sheet so the
   primary actions are visible on load even on short screens. The top shadow
   hints that content scrolls underneath it. */
.sg-sheet__footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 20px calc(16px + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, 0.14);
}
/* "Upload receipt" alternative in the add-cost footer (item-scoped sheet).
   The footer supplies the padding + gap, so the form is just a full-width block. */
.sg-sheet__receipt {
  display: block;
}

/* File inputs behind the "Upload receipt" / "Receipt" buttons.
   NOT [hidden]: that drops the input out of the tab order, so keyboard-only
   users can never open the picker. Visually hidden but still focusable and
   operable, with the focus ring forwarded onto its label (which is the visible
   control). The input must precede its label for the sibling selector. */
.sg-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sg-file-input:focus + label,
.sg-file-input:focus-visible + label {
  outline: 2px solid var(--primary, #186966);
  outline-offset: 2px;
}

/* "This item already has a cost" note in the pre-filled add-cost sheet. */
.sg-prefill-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--teal-50, #e2f5f4);
  color: var(--primary, #186966);
  font-size: 0.8rem;
  line-height: 1.35;
}
.sg-prefill-note i {
  margin-top: 2px;
}

/* Budget trigger (trip header): swap white→colour mark on hover/focus, since
   the core .trip-action-icon flips its background to white on hover. */
.sg-budget-icon {
  display: inline-block;
}
.sg-budget-icon--hover {
  display: none;
}
.sg-budget-trigger:hover .sg-budget-icon--rest,
.sg-budget-trigger:focus-visible .sg-budget-icon--rest {
  display: none;
}
.sg-budget-trigger:hover .sg-budget-icon--hover,
.sg-budget-trigger:focus-visible .sg-budget-icon--hover {
  display: inline-block;
}

/* Amount + currency */
.sg-amount {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f7f4ee;
  border-radius: 14px;
  padding: 14px 16px;
  overflow: hidden; /* keep the currency strip inside the rounded box */
}
.sg-amount__symbol {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gray-400, #a1a1aa);
}
.sg-amount__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--neutral-dark, #1c1c1c);
  letter-spacing: -0.02em;
  font-family: inherit;
}
.sg-amount__input:focus {
  outline: none;
}
.sg-amount__input::-webkit-outer-spin-button,
.sg-amount__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Segmented control */
.sg-seg {
  display: inline-flex;
  background: var(--gray-100, #f4f4f5);
  border-radius: 999px;
  padding: 2px;
}
.sg-seg__btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gray-500, #71717a);
}
.sg-seg__btn.is-active {
  background: var(--teal-900, #0e3d3b);
  color: #fff;
}
.sg-seg__btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.sg-seg--mode .sg-seg__btn {
  min-width: 30px;
}

/* The currency picker holds 8 codes - let it scroll horizontally inside the
   amount box rather than overflow it. The amount input keeps a hard floor so
   the "0.00" is never clipped; the currency strip shrinks/scrolls instead. */
.sg-amount__input {
  flex: 1 1 auto;
  min-width: 96px;
}
.sg-seg--ccy {
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.sg-seg--ccy::-webkit-scrollbar {
  display: none;
}
.sg-seg--ccy .sg-seg__btn {
  flex: 0 0 auto;
}

/* Field + input */
.sg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sg-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500, #71717a);
}
.sg-input {
  padding: 11px 13px;
  border: 1px solid var(--gray-300, #d4d4d8);
  border-radius: 12px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
}
.sg-input:focus {
  outline: 2px solid var(--teal-400, #4cbfbb);
  outline-offset: -1px;
}

/* Category grid */
.sg-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.sg-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border: 1.5px solid var(--gray-200, #e4e4e7);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  color: var(--gray-600, #52525b);
  transition: all 0.14s ease;
}
.sg-cat i {
  font-size: 0.88rem;
}
.sg-cat__label {
  font-size: 0.68rem;
  font-weight: 600;
}
.sg-cat:hover {
  border-color: var(--gray-300, #d4d4d8);
}
.sg-cat[data-cat="transit"].is-selected,
.sg-cat[data-cat="activity"].is-selected,
.sg-cat[data-cat="food"].is-selected {
  background: #e85d3322;
  border-color: #e85d33;
  color: #e85d33;
}
.sg-cat[data-cat="lodging"].is-selected,
.sg-cat[data-cat="general"].is-selected {
  background: #18696622;
  border-color: #186966;
  color: #186966;
}
.sg-cat[data-cat="sights"].is-selected {
  background: #ffb00022;
  border-color: #ffb000;
  color: #946200;
}

/* Split with */
.sg-split__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sg-split {
  display: flex;
  flex-direction: column;
}
.sg-split-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-top: 1px solid var(--border, #e4e4e7);
  cursor: pointer;
  font-size: 0.9rem;
}
.sg-split-row:first-child {
  border-top: none;
}
.sg-split-row__name {
  flex: 1;
  font-weight: 600;
  color: var(--neutral-dark, #1c1c1c);
}
.sg-split-row__share {
  font-weight: 700;
  color: var(--gray-500, #71717a);
  min-width: 48px;
  text-align: right;
}
.sg-avatar--sm {
  width: 26px;
  height: 26px;
  font-size: 0.7rem;
}

/* Unequal-split inputs (weighted / per-person amounts). */
.sg-split-row--amount {
  flex-wrap: wrap;
  cursor: default;
}
.sg-split-row__input {
  width: 78px;
  padding: 5px 7px;
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 7px;
  font-size: 0.85rem;
  text-align: right;
}
.sg-split-row__input:focus {
  outline: 2px solid var(--teal-400, #4cbfbb);
  outline-offset: -1px;
}
.sg-split-row__note {
  flex-basis: 100%;
  margin-left: 36px;
  padding: 4px 7px;
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 7px;
  font-size: 0.78rem;
}
.sg-split__balance {
  margin: 8px 2px 0;
  font-size: 0.8rem;
  font-weight: 700;
}
.sg-split__balance.is-ok {
  color: var(--primary, #186966);
}
.sg-split__balance.is-off {
  color: var(--danger, #c0392b);
}

/* "powered by SplitGoGo" lockup in the panel header. */
.sg-panel__poweredby {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sg-panel__poweredby-text {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ── Receipts (Phase 3) ──────────────────────────────────────── */
/* "Upload receipt" uses .btn.btn-outline-secondary.btn-block (design system). */
.sg-upload {
  display: contents;
} /* the <form> is just a wrapper */
.sg-upload label {
  cursor: pointer;
}

/* Parsed-receipt summary at the top of the confirm form. */
.sg-receipt-summary {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--teal-50, #e2f5f4);
  margin-bottom: 12px;
}
.sg-receipt-summary > i {
  color: var(--primary, #186966);
  margin-top: 2px;
}
.sg-receipt-summary__text {
  font-size: 0.88rem;
  display: flex;
  flex-direction: column;
}
.sg-receipt-flag {
  margin-top: 3px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #b45309;
}
.sg-receipt-hint {
  font-weight: 400;
  color: var(--gray-500, #71717a);
  font-style: normal;
}

/* Heads-up banner in the edit form: revising a paid cost moves balances that
   someone may already have settled against. Shaped like sg-receipt-summary,
   coloured as a caution rather than a confirmation. */
.sg-warn {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fef3c7;
  color: #78350f;
  font-size: 0.84rem;
  line-height: 1.35;
  margin-bottom: 12px;
}
.sg-warn > i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #b45309;
}

/* Upload loading state inside the expense modal. The indicator itself is the
   TripGoGo logo loader, injected by budget.js via the shared builder
   (tripgogo/js/tripgogo_loader.js); it carries its own styles. */
.sg-receipt-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--gray-600, #52525b);
  font-size: 0.9rem;
}

/* ── Booking-confirmation review (Phase 4) ───────────────────── */
.sg-tag--review {
  background: #fef3c7;
  color: #92400e;
}
.sg-card__review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 12px;
  background: #fffbeb;
  border-top: 1px solid #fde68a;
}
.sg-card__review-text {
  font-size: 0.78rem;
  font-weight: 600;
  color: #92400e;
}

/* Small attention dot on the Costs tab / Budget button when reviews pend. */
.sg-review-dot {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
}
.sg-budget-trigger {
  position: relative;
}
.sg-budget-trigger .sg-review-dot {
  position: absolute;
  top: -4px;
  right: -4px;
}

.sg-receipt-flag--ok {
  color: var(--primary, #186966);
}