/* Budget Panel Styles */
.panel-budget {
  width: 425px;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, border-left-color 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  opacity: 1;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3);
}

.panel-budget .deck-scroll-wrapper {
  gap: 7px !important;
}

.panel-budget.collapsed {
  width: 0;
  opacity: 0;
  border-left: 1px solid transparent;
  box-shadow: none !important;
  pointer-events: none;
}

/* Matches .panel-packing (see base.css) — pulled out of #app-layout's grid
   flow so opening it overlays the timeline/editor instead of shrinking
   their columns. Scoped to the same desktop breakpoint as that rule.
   Uses the #id selector, not .panel-budget: themes.css re-imports
   base.css a second time near the end of index.css's import chain, so
   base.css's plain ".panel { position: relative }" ends up LATER than
   this file in the effective cascade and would otherwise win the tie
   (equal class-selector specificity, later source order). An #id beats
   that regardless of import order. */
@media (min-width: 769px) {
  #panel-budget.panel-budget {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
  }
}

.panel-budget .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem;
  gap: 8px;
}

.btn-back-budget {
  display: none;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}

@media (max-width: 768px) {

  /* Budget has no bottom-nav tab — it only opens via btn-toggle-budget in
     the editor toolbar, so on mobile it can't lean on the nav-driven
     .active/tab-switch mechanism the other panels use (that machinery
     hides every panel but the one just tapped, and this one isn't in
     MOBILE_PANEL_ORDER). Instead it renders as a fixed overlay that
     conceptually *replaces* the editor content beneath it — sitting below
     the fixed HUD/sandbox-banner and above the fixed bottom nav, both of
     which stay visible and interactive — keyed off the same .collapsed
     class the desktop absolute-positioned panel already toggles (see
     btn-toggle-budget's handler in budget.js). The #id beats the
     mobile-default "body .panel { display: none !important }" rule in
     base.css the same way the desktop absolute-position rule above does.
     Kept permanently display:flex (rather than display:none when
     collapsed) so the open/close transition below has something to
     animate instead of an abrupt cut. */
  #panel-budget.panel-budget {
    display: flex !important;
    flex-direction: column;
    border-left: none;
    position: fixed;
    top: calc(var(--sandbox-banner-height, 0px) + var(--announcement-banner-height, 0px) + var(--mobile-hud-height, 125px));
    left: 0;
    right: 0;
    bottom: calc(var(--mobile-nav-height, 60px) + env(safe-area-inset-bottom, 0px));
    width: 100% !important;
    height: auto;
    z-index: 1250;
    /* Above the day-header's sticky z-index (1200, see base.css) so it
       fully covers the panel content it's replacing, but below the fixed
       HUD (1300) and bottom nav (1400) it now sits between. */
    transform: translateY(16px);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease, top 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.32s;
  }

  #panel-budget.panel-budget:not(.collapsed) {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, top 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
  }

  /* Compact scrolled HUD: follow its shorter height so Budget's top edge
     tracks the same offset the rest of the mobile layout already uses. */
  body.hud-scrolled #panel-budget.panel-budget {
    top: calc(var(--sandbox-banner-height, 0px) + var(--announcement-banner-height, 0px) + var(--mobile-hud-compact, 48px));
  }

  /* The generic mobile reset (base.css) turns every panel's scroll area
     into a plain flow block so the whole page scrolls instead — right for
     a nav-switched tab, but this panel is a fixed-height overlay now, so
     it needs its own internal scroll back. */
  #panel-budget.panel-budget .deck-scroll-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: auto !important;
  }

  .btn-back-budget {
    display: flex;
  }

  .panel-budget .btn-close-packing {
    display: none;
  }
}

/* Section framing — every block below the header gauge gets a consistent
   label + divider so the panel reads as a stack of distinct sections
   instead of an undifferentiated column of numbers. */
.budget-section {
  margin: 0 16px 16px;
  padding-top: 14px;
  border-top: 1px solid rgb(from var(--border-color) r g b / 0.4);
}

.budget-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.budget-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.budget-section-header-row .budget-section-title {
  margin-bottom: 0;
}

/* Header Progress Gauge */
.budget-progress-gauge {
  margin: 0 16px 16px;
}

.budget-progress-gauge.no-cap .budget-progress-bg {
  display: none;
}

.budget-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.budget-progress-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.budget-progress-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.budget-progress-bg {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-surface-elevated);
  overflow: hidden;
}

.budget-progress-bar {
  height: 100%;
  background: var(--accent-flight);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.budget-progress-bar.over-budget {
  background: #ff5252;
}

.budget-cap-link {
  background: transparent;
  border: none;
  color: var(--accent-flight);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0 0;
}

.budget-cap-form {
  margin-top: 10px;
}

.budget-cap-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.budget-cap-remove-btn {
  background: transparent;
  border: none;
  color: #ff5252;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-right: auto;
}

/* Multi-Currency Breakdown (only shown when >1 currency is in play) */
.budget-currency-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.budget-currency-pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm, 6px);
  padding: 4px 10px;
}

.budget-converted-hint {
  font-weight: 400;
  color: var(--text-muted);
}

/* Category Breakdown Bar */
.budget-category-track {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-surface-elevated);
  margin-bottom: 10px;
}

.budget-category-segment {
  height: 100%;
}

.budget-category-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.budget-category-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
}

.budget-category-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

/* Sort Controls */
.budget-sort-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.budget-sort-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 2px;
}

.budget-sort-btn {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: var(--border-radius-full, 9999px);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth, all 0.15s ease);
}

/* Border + text in the accent color, with a neutral (not accent-tinted)
   fill — several themes (e.g. Roadtrip) don't define an
   --accent-flight-glow, so tinting the background itself risked an
   off-palette color combination the theme never intended. */
.budget-sort-btn.active {
  background: var(--bg-surface-elevated);
  border-color: var(--accent-flight);
  color: var(--accent-flight);
}

/* Expense Log */
.budget-expense-log-group {
  margin-bottom: 14px;
}

.budget-expense-log-group:last-child {
  margin-bottom: 0;
}

/* Shared by both grouped views (Day and Category) — a group's label plus
   its own subtotal, set apart from the smaller per-row amounts below it. */
.budget-expense-log-group-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}

.budget-expense-log-group-total {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.budget-expense-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 12px;
}

.budget-expense-name {
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}

.budget-expense-amount {
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
}

.budget-expense-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0;
  margin: 0;
}

/* Ad-Hoc Expenses Block */
.budget-adhoc-block {
  margin: 0 16px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.budget-adhoc-header h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 10px;
}

/* .packing-popup-form (shared base class) is built to slide up from a
   position:relative footer — the Ad-Hoc block isn't one, which left the
   form positioned off-screen above the panel. Override it to a plain
   inline show/hide instead of a floating overlay. */
#budget-adhoc-popup-form.packing-popup-form {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  display: none;
  margin-top: 10px;
  box-shadow: none;
}

#budget-adhoc-popup-form.packing-popup-form.active {
  display: flex;
}

.budget-adhoc-add-btn {
  width: 100%;
  margin-top: 8px;
}

/* Positioned so the delete button can hang outside the row's own right
   edge (see .btn-delete-adhoc) — into the .budget-adhoc-block's 16px
   margin, which sits safely inside .deck-scroll-wrapper's own 24px
   padding, so nothing gets clipped. Otherwise identical to a plain
   .budget-expense-row (same name/amount styling as the Expense Log
   above) — only the delete button sets an ad-hoc row apart. */
.budget-adhoc-row {
  position: relative;
  gap: 10px;
}

.budget-adhoc-row .budget-expense-name {
  flex: 1;
  min-width: 0;
}

/* Pulled out of the row's own content column into the block's right
   margin (see .budget-adhoc-row), the same way the Expense Log's amounts
   stay flush at the content edge above it — matching the request to keep
   delete controls out past the aligned numbers rather than inline with
   them. */
.btn-delete-adhoc {
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  opacity: 1;
}