/* Shared app typography and main-tab layouts. */
.app { font-family: "Noto Sans", system-ui, sans-serif; }
.app :where(button,input,select,textarea) { font-family: inherit; }
#app :where(button,summary,input,select,textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#app .card { border-radius: 22px; box-shadow: 0 3px 16px rgba(20,40,35,.035); }
#app .page-title { display:block; margin: 4px 0 7px; font-size: 29px; line-height: 1.2; font-weight: 750; letter-spacing: -.035em; }
.page-subtitle { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0 0 22px; }
#app[data-view="import"] #pageTitle { display: none; }
#app .page-subtitle[hidden] { display:none; }
.ui-app-menu { display: contents; }
.ui-app-menu > summary { display: none; }
.ui-menu-items { display: flex; gap: 8px; }
.ui-menu-items .icon-btn::after { display:none; }
#app .monthbar { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap: 8px 20px; }
#app .scope-seg { margin:0; border-radius: 12px; padding:4px; }
#app .scope-seg button { min-height:36px; padding:6px 12px; border-radius:9px; }
#app .scope-seg button.active { background:var(--bg-elev); color:var(--accent); box-shadow:0 2px 5px #00000008; }
#app .month-nav { margin:0; gap:8px; }
#app .month-picker { min-width:0; width:180px; background:transparent; border-color:transparent; font-size:14px; }
#app .mn-arrow { width:40px; height:40px; border-radius:12px; }
#app .month-summary { width:100%; margin:0; font-size:12px; }
#app[data-view="dashboard"] .month-summary { display:none; }
#view-dashboard .stat-label small { display:none; }
#view-dashboard .stat { padding:22px; }
#view-dashboard .stat-value { font-size:clamp(23px,2.8vw,34px); line-height:1.25; overflow-wrap:anywhere; }
#view-dashboard .stat-net { background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 18%,var(--line)); }
#view-dashboard .stat-net .stat-value { color:var(--text); }
#view-dashboard .stat-net .stat-value.negative { color:var(--danger); }
.ui-quick-actions { display:flex; gap:8px; flex-wrap:wrap; }
.ui-quick-actions button { min-height:44px; padding:10px 14px; border-radius:12px; font-size:13px; background:var(--bg-elev); border:1px solid var(--line); color:var(--text); }
.ui-quick-actions button:first-child { background:var(--accent); color:var(--bg-elev); border-color:transparent; }
#app .dash-subtabs { padding:5px; background:var(--bg-elev2); border:1px solid var(--line); border-radius:15px; gap:4px; }
#app .dash-subtabs button { min-height:44px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-size:14px; }
#app .dash-subtabs button.active { background:var(--bg-elev); color:var(--accent); box-shadow:0 2px 7px #00000009; }
#view-dashboard .ai-card { background:var(--bg-elev); border-color:var(--line); }
#view-dashboard .ai-toggle { min-height:44px; }
#app .ui-filter-details, #app .ui-tools-details, #app .ui-budget-options { min-width:0; }
#app details > summary { cursor:pointer; list-style:none; font-weight:650; }
#app details > summary::-webkit-details-marker { display:none; }
#app .ui-filter-details > summary, #app .ui-tools-details > summary, #app .ui-budget-options > summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:10px 14px; color:var(--text); font-size:13px; border:1px solid var(--line); border-radius:12px; background:var(--bg-elev); }
#app .ui-filter-details > summary::after, #app .ui-tools-details > summary::after, #app .ui-budget-options > summary::after { content:'⌄'; margin-left:auto; }
#app details[open] > summary::after { transform:rotate(180deg); }
.ui-count { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 5px; border-radius:8px; background:var(--accent-soft); color:var(--accent); font-size:11px; }
.ui-count[hidden] { display:none; }
#app .tx-filters { display:flex; align-items:flex-start; gap:10px; margin:0; }
#app .tx-filters #txSearch { flex:1 1 100%; width:100%; min-height:48px; border-radius:14px; background:var(--bg-elev); font-size:16px; }
.ui-filter-details { flex:1 1 100%; }
.ui-extra-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:16px 0 4px; }
.ui-extra-filters label { min-width:0; display:flex; flex-direction:column; gap:7px; }
.ui-extra-filters label > span { color:var(--muted); font-size:12px; }
#app .ui-extra-filters :where(input,select,.ss) { width:100%; min-width:0; flex:none; }
#app .ui-extra-filters :where(input,select,.ss-btn) { min-height:44px; background:var(--bg-elev); font-size:14px; }
.ui-extra-filters .ss-pop { min-width:0; }
#app .tx-period { margin:0; border:1px solid var(--line); border-radius:16px; padding:10px; background:var(--bg-elev); gap:10px; }
#app .period-seg { border-radius:11px; padding:4px; }
#app .period-seg button { min-height:36px; padding:6px 12px; border-radius:8px; }
#app .tx-toolbar { gap:12px; align-items:center; }
#app #txCount { font-size:12px; }
#app .tx-export { gap:8px; align-items:flex-start; }
#app #txAddBtn { min-height:44px; padding:10px 15px; background:var(--accent); color:var(--bg-elev); border:0; border-radius:12px; font-size:13px; }
.ui-tool-items { display:flex; flex-wrap:wrap; gap:7px; padding-top:10px; }
#app .ui-tool-items button { min-height:44px; font-size:12px; border:1px solid var(--line); background:var(--bg-elev); border-radius:10px; }
#app .tx-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:16px; border-radius:18px; background:var(--bg-elev); }
#app .tx-totals > span { display:flex; flex-direction:column; gap:5px; font-size:11px; min-width:0; }
#app .tx-totals b { font-size:clamp(14px,1.8vw,21px); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#app .tx-totals .tt-label { grid-column:1/-1; margin:0; font-size:11px; }
#app .tx-totals .tt-avg { padding:0; border:0; }
#app .tx-list { padding:2px 16px; border-radius:20px; }
#app .tx-edit { min-width:40px; min-height:44px; border-radius:10px; }
#app .budget-toolbar { display:flex; flex-direction:column; align-items:stretch; gap:14px; }
#app .budget-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:22px; background:var(--accent-soft); border:1px solid var(--line); border-radius:22px; }
#app .budget-totals > span { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); }
#app .budget-totals b { font-size:clamp(18px,2.3vw,28px); color:var(--text); overflow-wrap:anywhere; }
#app .budget-totals .over b { color:var(--danger); }
#app .budget-tools { gap:10px; padding:16px 0 4px; }
#app .budget-tools :where(button,select) { min-height:44px; }
#app .carry-toggle { font-size:12px; min-height:44px; }
#app .budget-row { border-radius:20px; padding:18px; }
#app .budget-input input { min-height:44px; font-size:16px; }
#app .budget-del { min-width:40px; min-height:44px; }
#app .budget-spent { font-size:12px; line-height:1.6; }
#app .budget-bar { height:7px; border-radius:8px; }
#app .goals-head { align-items:center; gap:12px; }
#app .advisor-chat { border-color:color-mix(in srgb,var(--accent) 30%,var(--line)); }
#app .advisor-chat .adv-head { margin-bottom:8px; }
#app .adv-chat-log { min-height:120px; max-height:42dvh; }
#app .adv-chat-empty { padding:22px 8px; text-align:left; font-size:14px; line-height:1.8; }
#app .adv-chat-suggest { gap:8px; }
#app .adv-sug { text-align:left; border:1px solid var(--line); background:var(--bg-elev2); color:var(--text); border-radius:12px; padding:12px; font-size:13px; min-height:44px; }
#app .adv-chat-form { align-items:flex-end; gap:8px; margin-top:16px; padding:8px; border:1px solid var(--line); background:var(--bg-elev2); border-radius:16px; }
#app .adv-chat-form textarea { flex:1; min-width:0; min-height:68px; max-height:180px; resize:vertical; border:0; background:transparent; color:var(--text); font-size:16px; line-height:1.5; padding:8px; }
#app .adv-chat-form button { width:44px; height:44px; min-width:44px; border-radius:12px; padding:0; }
#app .adv-msg { font-size:14px; line-height:1.75; overflow-wrap:anywhere; border-radius:16px; }
#app .adv-head { gap:12px; }
#app .adv-head .ghost-btn { min-width:44px; min-height:44px; }
#app .adv-sub-hint { font-size:13px; line-height:1.7; }
#app .advisor-chat .ui-chat-note { font-size:11px; color:var(--muted); margin:8px 0 0; }
@media (min-width:900px) {
  #app .ui-filter-details > summary, #app .ui-tools-details > summary, #app .ui-budget-options > summary { display:none; }
  #app .ui-tools-details { display:contents; }
  #app .ui-tool-items { padding:0; }
}
@media (max-width:899px) {
  #app .topbar-row { flex-wrap:nowrap; padding:10px 14px; gap:8px; }
  #app .brand { font-size:16px; white-space:nowrap; }
  #app .topbar-actions { gap:7px; flex-wrap:nowrap; }
  #app .topbar-actions > .icon-btn { min-width:44px; height:44px; padding:10px; }
  #app .ui-app-menu { display:block; position:relative; }
  #app .ui-app-menu > summary { display:grid; place-items:center; width:44px; height:44px; font-size:18px; border-radius:12px; background:var(--bg-elev2); color:var(--text); }
  #app .ui-menu-items { position:absolute; top:calc(100% + 8px); right:0; width:220px; padding:8px; background:var(--bg-elev); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); flex-direction:column; z-index:50; }
  #app .ui-menu-items .icon-btn { display:flex; gap:12px; min-height:46px; padding:10px 12px; background:transparent; color:var(--text); justify-content:flex-start; }
  #app .ui-menu-items .icon-btn.hidden { display:none; }
  #app .ui-menu-items .icon-btn::after { display:block; content:attr(data-ui-label); font-size:13px; }
  #app .ui-menu-items .install-btn { color:var(--accent); }
  #app .user-chip { padding:3px; }
  #app .user-chip .uc-name { display:none; }
  #app .topbar { backdrop-filter:none; background:var(--bg-elev); }
  #app main { padding:20px 16px; }
  #app .view { gap:16px; }
  #app .summary-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  #app .summary-cards .stat { padding:18px; }
  #app .summary-cards .stat-net { grid-column:1/-1; order:-1; padding:22px; }
  #app .stat-net .stat-value { font-size:36px; }
  #app .stat-value { font-size:23px; }
  #app .summary-cards .stat-spark { display:none; }
  #app .stat-label { font-size:12px; margin-bottom:6px; }
  #app .stat-delta { font-size:11px; }
  #app .ui-quick-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  #app .ui-quick-actions button { padding:10px 4px; font-size:12px; }
  #app .tx-filters { position:relative; }
  #app .ui-filter-details { flex-basis:100%; }
  #app .ui-extra-filters { grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px 2px; }
  #app .ui-extra-filters :where(input,select,.ss-btn) { font-size:16px; }
  #app #txClearFilters { position:absolute; right:0; top:58px; min-height:44px; font-size:12px; }
  #app .ui-filter-details > summary { width:fit-content; min-width:120px; }
  #app .tx-period { justify-content:center; }
  #app .period-range { width:100%; min-width:0; }
  #app .period-range input { min-width:0; flex:1; width:0; font-size:14px; padding:8px 5px; }
  #app .tx-export { width:100%; }
  #app .ui-tools-details { flex:1; }
  #app .ui-tool-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  #app .tx-list .tx { grid-template-columns:42px minmax(0,1fr) auto; grid-template-areas:"cat desc amount" "cat sub edit"; gap:4px 10px; padding:16px 0; }
  #app .tx-desc { white-space:normal; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
  #app .tx-catctl { width:40px; height:44px; border-radius:13px; }
  #app .tx-sub { font-size:11px; overflow-wrap:anywhere; }
  #app .tx-amount { font-size:14px; font-weight:750; }
  #app .tx-edit { justify-self:end; background:var(--bg-elev2); min-width:36px; min-height:36px; padding:6px; }
  #app .budget-totals { padding:18px; grid-template-columns:1fr 1fr; gap:18px 10px; }
  #app .budget-totals > span:last-child:not(:first-child) { grid-column:1/-1; order:-1; padding-bottom:14px; border-bottom:1px solid var(--line); }
  #app .budget-totals > span:last-child:not(:first-child) b { font-size:32px; }
  #app .budget-list, #app .budget-list.as-list { display:grid; grid-template-columns:1fr; gap:12px; }
  #app .budget-row .budget-ring { display:none; }
  #app .budget-row .budget-bar { display:block; margin:14px 0 8px; }
  #app .budget-row .budget-head { display:flex; align-items:center; gap:8px; }
  #app .budget-row .cat-name { flex:1; min-width:0; font-size:14px; }
  #app .budget-row .cat-nm { white-space:normal; overflow-wrap:anywhere; }
  #app .budget-row .budget-input { flex:none; }
  #app .budget-row .budget-input input { width:76px; }
  #app .budget-tools { display:flex; flex-wrap:wrap; }
  #app .budget-tools .carry-toggle { flex:1 1 100%; }
  #app .budget-tools #suggestBudgetBtn { flex:1; font-size:12px; }
  #app .goals-head { flex-wrap:wrap; }
  #app .goal-form { flex-wrap:wrap; }
  #app .goal-form > * { min-width:0; flex:1 1 130px; }
  #app .advisor-chat { order:-1; }
  #app .adv-chat-suggest { display:grid; grid-template-columns:1fr; }
  #app .adv-head .chart-title { font-size:16px; line-height:1.5; }
  #app .adv-score-row { flex-wrap:wrap; justify-content:center; }
  #app .adv-score-meta { min-width:0; }
  #app .adv-seg-labels { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #app .wg-bar .wg-drag { display:none; }
  #app .wg-bar button { min-width:36px; min-height:36px; }
  #app .wg-bar { margin:-3px 0 2px; }
}
@media (max-width:359px) {
  #app main { padding-inline:12px; }
  #app .topbar-row { padding-inline:10px; gap:5px; }
  #app .brand { font-size:14px; gap:6px; }
  #app .topbar-actions { gap:4px; }
  #app .monthbar { gap:4px; padding:8px; }
  #app .month-picker { width:156px; }
  #app .scope-seg button { padding-inline:8px; }
  #app .tx-list { padding-inline:10px; }
  #app .tx-list .tx { grid-template-columns:36px minmax(0,1fr) auto; gap:4px 7px; }
  #app .tx-catctl { width:36px; }
}


@media (min-width:900px) and (max-width:1199px) {
  #app .tx-thead { display:none; }
  #app .ui-mobile-sort { display:flex; gap:8px; justify-content:space-between; }
  #app .ui-mobile-sort select { flex:1; min-width:0; min-height:44px; background:var(--bg-elev); }
  #app .ui-mobile-sort button { min-height:44px; color:var(--text); background:var(--bg-elev2); }
  #app .tx-list .tx { grid-template-columns:44px minmax(0,1fr) auto; grid-template-areas:"cat desc amount" "cat sub edit"; gap:4px 12px; }
  #app .tx-catctl { width:44px; height:44px; padding:0; justify-content:center; border-radius:13px; }
  #app .tx-catname, #app .tx-datecol, #app .tx-acctcol { display:none; }
  #app .tx-sub { display:block; }
  #app .tx-desc { white-space:normal; }
  #app .tx-edit { justify-self:end; }
}

/* Compact controls keep the first transactions in view. */
.ui-mobile-sort { display:none; }
@media (max-width:899px) {
  #app .monthbar { gap:8px; padding:8px 12px; }
  #app .scope-seg { padding:3px; }
  #app .scope-seg button { padding:6px; font-size:12px; }
  #app .month-nav { gap:4px; }
  #app .month-picker { width:124px; padding:8px 4px; font-size:16px; }
  #app .month-summary { display:none; }
  #app .tx-filters { gap:0; }
  #app .tx-filters #txSearch { flex:0 1 calc(100% - 112px); width:calc(100% - 112px); margin-right:112px; font-size:16px; }
  #app .ui-filter-details > summary { position:absolute; top:0; right:0; min-width:102px; min-height:48px; padding:10px; }
  #app .ui-extra-filters { padding-top:16px; }
  #app #txClearFilters { position:static; margin:8px 0 0 auto; }
  #app .ui-filter-details:not([open]) { height:0; }
  #app .tx-thead { display:none; }
  #app .ui-mobile-sort { display:flex; gap:8px; justify-content:space-between; align-items:center; }
  #app .ui-mobile-sort select { min-width:0; flex:1; min-height:44px; background:transparent; border-color:transparent; color:var(--muted); font-size:12px; padding-left:2px; }
  #app .ui-mobile-sort button { min-height:44px; padding:8px 12px; font-size:12px; background:transparent; color:var(--muted); }
  #app .tx-edit { min-height:44px; min-width:44px; }
  #app .tx-list .tx { grid-template-areas:"cat desc amount" "cat sub edit"; }
}