/* Super App V1.20 — icon language + text overflow safety */

/* Final version display remains data-driven from src/version.js. */
.v15-version-pill::after,
.v15-settings-row[data-v15-me-open="about"] .v15-settings-status::after,
.v15-about-card h3::after{content:attr(data-app-version)!important}

.v20-icon{width:20px;height:20px;display:block;pointer-events:none}
.v20-icon-button{
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 auto;
  padding:0!important;
  line-height:1!important;
}

/* View/navigation actions: icon-only when the meaning is conventional. */
.v20-view-switch{margin-bottom:0!important;padding:4px!important;gap:2px}
.v20-view-switch .v20-view-button{
  width:48px!important;
  min-width:48px!important;
  height:42px!important;
  border-radius:10px!important;
}
.v20-view-switch .v20-view-button .v20-icon{width:21px;height:21px}
.v20-section-action{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  border-radius:11px!important;
  color:var(--green)!important;
}
.v20-section-action:hover{background:var(--surface-2)!important}
.v20-back-button{
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  margin-bottom:12px!important;
  border:1px solid var(--line)!important;
  border-radius:13px!important;
  background:var(--surface)!important;
  color:var(--green)!important;
}
.v20-toolbar-icon{
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  border:1px solid var(--line)!important;
  border-radius:11px!important;
  background:var(--surface)!important;
  color:var(--green)!important;
}
.v20-collapse-button{
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  margin-left:8px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:var(--green)!important;
}

/* Quick Add: keep the useful two-column density without allowing long labels to escape. */
.modal.v20-quick-add-modal{width:min(620px,calc(100% - 24px))!important}
.quick-add-grid.v20-quick-add-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
}
.quick-add-choice.v20-quick-action{
  min-width:0!important;
  min-height:74px!important;
  padding:11px 10px!important;
  grid-template-columns:22px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  column-gap:7px!important;
  row-gap:2px!important;
  align-items:center!important;
  overflow:hidden;
}
.v20-quick-action>span{
  width:22px;
  min-width:22px;
  grid-column:1!important;
  grid-row:1 / span 2!important;
  justify-self:center;
  font-size:19px!important;
  line-height:1!important;
}
.v20-quick-action strong{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0;
  max-width:100%;
  font-size:clamp(.78rem,3.3vw,.88rem)!important;
  line-height:1.12!important;
  overflow-wrap:anywhere;
}
.v20-quick-action small{
  grid-column:2!important;
  grid-row:2!important;
  min-width:0;
  max-width:100%;
  font-size:.67rem!important;
  line-height:1.2!important;
  overflow-wrap:anywhere;
}
.v20-quick-action.v19-quick-search{grid-column:1/-1!important}

/* Shared text-boundary rules. Dynamic/user-entered text must stay inside its component. */
.v20-safe-layout>*{min-width:0}
.v20-safe-wrap{
  min-width:0!important;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
}
.v20-safe-number{
  min-width:0;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.section-head.v20-safe-layout{gap:10px}
.section-head.v20-safe-layout>div:first-child{min-width:0;flex:1 1 auto}
.section-head.v20-safe-layout>button,
.section-head.v20-safe-layout>.button-row{flex:0 0 auto}
.page-head.v20-safe-layout>div:first-child{min-width:0;flex:1 1 auto}

/* Modal headers must always reserve room for Close. */
.modal-head.v20-safe-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 44px!important;
  gap:12px!important;
  align-items:start!important;
}
.modal-head.v20-safe-layout h3{line-height:1.12;margin-top:5px!important}
.modal-head.v20-safe-layout>button{
  width:44px!important;
  min-width:44px!important;
  height:44px!important;
  justify-self:end!important;
  padding:0!important;
}

/* Currency headings: totals may be long but never collide with currency/account count. */
.v19-currency-head.v20-safe-layout>div{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
}
.v19-currency-head.v20-safe-layout>div strong,
.v19-currency-head.v20-safe-layout>div small{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.v19-currency-head.v20-safe-layout>b{
  flex:0 1 52%;
  max-width:52%;
  text-align:right;
}

/* Row safety for long task names, transaction descriptions and dynamic labels. */
.task-main{min-width:0}
.task-main strong{overflow-wrap:anywhere}
.transaction-row.v20-safe-layout>div:first-child,
.commitment-row.v20-safe-layout>div:first-child,
.investment-row.v20-safe-layout>div:first-child{min-width:0;flex:1 1 auto}
.transaction-row.v20-safe-layout strong,
.commitment-row.v20-safe-layout strong,
.investment-row.v20-safe-layout strong{overflow-wrap:anywhere}
.transaction-row.v20-safe-layout>b,
.commitment-row.v20-safe-layout>b{flex:0 1 auto;max-width:42%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Travel names/destinations can be user-entered and multi-city. */
.trip-card h3,.trip-card p,.trip-placeholder strong,.trip-placeholder span,
.v13-trip-detail-hero h2,.v13-trip-detail-hero p{overflow-wrap:anywhere;min-width:0;max-width:100%}
.trip-card-head.v20-safe-layout>div:first-child{min-width:0;flex:1 1 auto}
.trip-card-head.v20-safe-layout>button{flex:0 0 auto}

/* Buttons can wrap safely instead of escaping their own box. Business/danger actions keep their text. */
button{max-width:100%}
button:not(.v20-icon-button){overflow-wrap:anywhere}

@media(max-width:560px){
  .todo-toolbar.v19-todo-toolbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:9px!important;
  }
  .todo-toolbar.v19-todo-toolbar>.segmented:first-child{min-width:0;margin-bottom:0!important}
  .todo-toolbar.v19-todo-toolbar>.segmented:first-child button{min-width:0;padding-inline:12px!important}
  .v20-toolbar-icon{width:36px!important;min-width:36px!important;height:36px!important}
}

@media(max-width:390px){
  .modal.v20-quick-add-modal{padding:18px!important}
  .quick-add-grid.v20-quick-add-grid{gap:8px!important}
  .quick-add-choice.v20-quick-action{padding:10px 8px!important;grid-template-columns:20px minmax(0,1fr)!important;column-gap:6px!important}
  .v20-quick-action>span{width:20px;min-width:20px;font-size:18px!important}
  .v20-quick-action strong{font-size:.79rem!important}
  .v20-quick-action small{font-size:.64rem!important}
  .v19-currency-head.v20-safe-layout>b{max-width:48%;flex-basis:48%}
}

@media(max-width:330px){
  .quick-add-grid.v20-quick-add-grid{grid-template-columns:1fr!important}
  .v20-quick-action.v19-quick-search{grid-column:auto!important}
}