/* Budget card statuses, placed at the bottom-right without hiding existing left-hand information. */
#app .budget-v14-card .budget-v14-foot{display:flex!important;align-items:center;justify-content:space-between;gap:8px}
#app .budget-v14-card .budget-v14-foot .r3-budget-status-label{display:inline!important;visibility:visible!important;margin-left:auto;white-space:nowrap;font-size:11px;font-weight:700}
#app .budget-v14-card.good .r3-budget-status-label{color:#0c7954}
#app .budget-v14-card.risk .r3-budget-status-label{color:#ad700a}
#app .budget-v14-card.danger .r3-budget-status-label{color:#ce424c}
#app .budget-v14-card.risk .budget-v14-progress i{background:#d69a28!important}
#app .budget-v14-card.danger .budget-v14-progress i{background:#d94a56!important}
#app .budget-cycle-track.r3-cycle-risk i{background:#d69a28!important}
#app .budget-cycle-track.r3-cycle-danger i{background:#d94a56!important}
/* The expanded panel takes the full row, with a smooth glass-style reveal. */
#app .r3-budget-quick-layout.is-expanded .r3-budget-quick-row{grid-template-columns:0px minmax(0,1fr)!important;gap:0!important}
#app .r3-budget-quick-layout.is-expanded .r3-budget-quick-row>.budget-tools-v1262{width:0!important;min-width:0!important;opacity:0!important;pointer-events:none;overflow:hidden;border:0!important}
#app .r3-budget-quick-layout.is-expanded .r3-budget-quick-row>.u2-unbudgeted-card{border-radius:16px 16px 0 0!important}
#app .r3-budget-quick-layout .r3-budget-quick-row{transition:grid-template-columns .3s ease,gap .3s ease}
#app .r3-budget-quick-layout .budget-tools-v1262{transition:opacity .22s ease,width .3s ease}
#app .r3-budget-quick-layout.is-expanded>.u2-unbudgeted-breakdown{animation:r3BudgetReveal .3s ease-out both}
@media(prefers-reduced-motion:reduce){#app .r3-budget-quick-layout .r3-budget-quick-row,#app .r3-budget-quick-layout .budget-tools-v1262{transition:none!important}#app .r3-budget-quick-layout.is-expanded>.u2-unbudgeted-breakdown{animation:none!important}}

/* Reversal of the unbudgeted Liquid Glass accordion. */
#app .r3-budget-quick-layout.is-collapsing>.r3-closing-breakdown{animation:r3BudgetClose .34s ease-in both;transform-origin:top}
@keyframes r3BudgetClose{0%{opacity:1;transform:scaleY(1);max-height:300px;padding-top:7px;padding-bottom:12px}100%{opacity:0;transform:scaleY(.75);max-height:0;padding-top:0;padding-bottom:0}}
@media(prefers-reduced-motion:reduce){#app .r3-budget-quick-layout.is-collapsing>.r3-closing-breakdown{animation:none;display:none}}

/* QA follow-up 2026-10-26: expansion is deliberately sequential.
   1) header glides to the left, 2) category rows slide down.
   Collapse runs those two steps in reverse. */
#app .r3-budget-quick-layout,
#app .r3-budget-quick-layout .r3-budget-quick-row,
#app .r3-budget-quick-layout .r3-budget-quick-row>.u2-unbudgeted-card,
#app .r3-budget-quick-layout>.u2-unbudgeted-breakdown{
  width:100%;box-sizing:border-box;min-width:0;
}
#app .r3-budget-quick-layout>.u2-unbudgeted-breakdown{
  max-height:0;opacity:0;visibility:hidden;pointer-events:none;
  padding:0 13px!important;
  border-bottom-width:0!important;
  animation:none!important;
  transform:none!important;
  transition:max-height .26s ease,opacity .22s ease,padding-top .26s ease,
             padding-bottom .26s ease, border-bottom-width .26s ease!important;
}
#app .r3-budget-quick-layout.r3-details-visible>.u2-unbudgeted-breakdown{
  max-height:var(--r3-details-height,500px);
  opacity:1;visibility:visible;pointer-events:auto;
  padding:7px 13px 12px!important;
  border-bottom-width:1px!important;
}
#app .r3-budget-quick-layout.r3-closing>.r3-closing-breakdown{
  animation:none!important;
}
#app .r3-budget-quick-layout .r3-budget-quick-row{
  transition:grid-template-columns .34s cubic-bezier(.22,.8,.24,1),
             gap .34s cubic-bezier(.22,.8,.24,1)!important;
}
#app .r3-budget-quick-layout .budget-tools-v1262{
  transition:width .34s cubic-bezier(.22,.8,.24,1),opacity .28s ease!important;
}
#app .r3-budget-quick-layout.is-expanded .r3-budget-quick-row>.u2-unbudgeted-card{
  min-width:0!important;
}
@media(prefers-reduced-motion:reduce){
 #app .r3-budget-quick-layout .r3-budget-quick-row,
 #app .r3-budget-quick-layout .budget-tools-v1262,
 #app .r3-budget-quick-layout>.u2-unbudgeted-breakdown{transition:none!important;animation:none!important}
}

/* Prevent re-rendered rows from temporarily animating from the collapsed
   position while we are supposed to be retracting the category details. */
#app .r3-budget-quick-layout.r3-snap-expanded .r3-budget-quick-row,
#app .r3-budget-quick-layout.r3-snap-expanded .budget-tools-v1262{
  transition:none!important;
}
#app .r3-budget-quick-layout.r3-closing>.r3-closing-breakdown{
  visibility:visible!important;
}

/* Phase 1 follow-up (26 Oct): align progress-bar and status right edges
   with the amount above, using the same 15px inset as the left edge.
   The original base style reserved 44px on the right for a legacy pin
   control which is not rendered on these budget cards. */
#app .budget-v14-list .budget-v14-card > .budget-v14-main {
  box-sizing: border-box;
  padding-right: 15px !important;
}
@media (max-width: 480px) {
  #app .budget-v14-list .budget-v14-card > .budget-v14-main {
    padding-right: 15px !important;
  }
}

/* 26 Oct: preserve the complete header's silhouette during the horizontal
   glide. Bottom corners square off only AFTER the header reaches the left. */
#app .r3-budget-quick-layout.is-expanded:not(.r3-header-settled) .r3-budget-quick-row>.u2-unbudgeted-card,
#app .r3-budget-quick-layout.r3-closing:not(.r3-header-settled) .r3-budget-quick-row>.u2-unbudgeted-card{
  border-radius:16px!important;
}
#app .r3-budget-quick-layout.r3-header-settled .r3-budget-quick-row>.u2-unbudgeted-card{
  border-radius:16px 16px 0 0!important;
}
/* Preserve visibility until the outgoing category rows finish retracting.
   Previous hidden-visibility rule removed the content at the first frame. */
#app .r3-budget-quick-layout>.u2-unbudgeted-breakdown{
  transition:max-height .27s ease,opacity .23s ease,padding-top .27s ease,
             padding-bottom .27s ease,border-bottom-width .27s ease,
             visibility 0s linear .27s!important;
}
#app .r3-budget-quick-layout.r3-details-visible>.u2-unbudgeted-breakdown{
  transition:max-height .27s ease,opacity .23s ease,padding-top .27s ease,
             padding-bottom .27s ease,border-bottom-width .27s ease,
             visibility 0s linear 0s!important;
}
/* No redundant transition when replacing the finished closed DOM. */
#app .r3-budget-quick-layout.r3-animation-complete .r3-budget-quick-row,
#app .r3-budget-quick-layout.r3-animation-complete .budget-tools-v1262{
  transition:none!important;
}
/* The planning icon must fit the *current animated grid track*, rather than
   jumping immediately back to 54px during the reverse glide. */
#app .r3-budget-quick-layout .r3-budget-quick-row>.budget-tools-v1262{
  width:100%!important;
  min-width:0!important;
}