/* v77.67：只補投資配置總覽所需版面；沿用 style.css 的卡片、色彩、字體與數字變數。 */

.allocation-overview-layout{
  grid-template-columns:minmax(0,1fr) minmax(330px,360px);
  align-items:start;
}

.allocation-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.allocation-plan-head{
  align-items:center;
}

.allocation-plan-head > div:first-child{
  display:grid;
  gap:6px;
}

.allocation-card-title{
  font-size:15px;
  font-weight:600;
  letter-spacing:-.15px;
}

.allocation-total-card .big{
  margin-top:2px;
}

.allocation-total-card #totalText{
  margin:5px 0 2px;
  line-height:1.55;
}

.allocation-total-card #totalGap{
  margin-bottom:10px;
}


.pool-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}

.pool-summary-grid-wide{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.pool-stat{
  min-width:0;
  padding:9px 10px;
  border:0.5px solid var(--border);
  border-radius:10px;
  background:var(--bg2);
  display:grid;
  gap:3px;
}

.pool-stat > span{
  color:var(--sub);
  font-size:11px;
  white-space:nowrap;
}

.pool-stat > strong{
  min-width:0;
  font-family:var(--font-numeric);

  font-size:14px;
  font-weight:600;

  white-space:nowrap;
}


.pool-main-bar{
  margin-top:2px;
}

.income-fill{
  background:var(--cat-etf);
}

.pool-gap{
  min-height:18px;
  margin:6px 0 10px;
  font-size:12px;
  line-height:1.45;
}

.allocation-wealth-table col.c-name{width:27%}
.allocation-wealth-table col.c-goal{width:19%}
.allocation-wealth-table col.c-cost{width:21%}
.allocation-wealth-table col.c-gap{width:33%}

.allocation-wealth-table .t-target,
.allocation-wealth-table .t-cost{
  font-family:var(--font-numeric);

  white-space:nowrap;
}

.allocation-wealth-table .t-target > span,
.allocation-wealth-table .t-cost > span{
  font-size:13px;
  font-weight:600;
}

.investment-progress-cell{
  display:grid;
  gap:6px;
}

.investment-progress-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  font-family:var(--font-numeric);

  font-size:12px;
}

.investment-progress-meta > strong{
  font-weight:600;
  color:var(--text);
}

.wealth-gap-status{
  text-align:right;
  white-space:nowrap;
}

.allocation-wealth-mobile{
  display:none;
}

.income-holdings{
  display:grid;
  border-top:0.5px solid var(--border);
  margin-top:2px;
}

.income-holding-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:0.5px solid var(--border);
}

.income-holding-row:last-child{
  border-bottom:0;
  padding-bottom:2px;
}

.income-holding-main{
  min-width:0;
  display:grid;
  gap:2px;
}

.income-holding-main > strong{
  min-width:0;
  font-size:13px;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.income-holding-shares{
  color:var(--sub);
  font-size:11px;
  font-family:var(--font-numeric);

}

.income-holding-market{
  flex:0 0 auto;
  font-family:var(--font-numeric);

  font-size:13px;
  font-weight:600;

}

/* M5-5：allocation ranking header presentation 已由 public/ui/allocation.css 接手。 */

@media (max-width:700px){
  .allocation-overview-layout{
    grid-template-columns:minmax(0,1fr);
  }

  .allocation-card-head{
    gap:10px;
  }

  .allocation-plan-head{
    align-items:flex-start;
  }

  .pool-summary-grid,
  .pool-summary-grid-wide{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }


  .pool-stat{
    padding:10px;
  }

  .pool-stat > span{
    font-size:12px;
  }

  .pool-stat > strong{
    font-size:15px;
  }

  .allocation-wealth-table-wrap{
    display:none;
  }

  .allocation-wealth-mobile{
    display:grid;
    gap:0;
    border-top:0.5px solid var(--border);
    margin-top:2px;
  }

  .allocation-wealth-mobile-card{
    display:grid;
    gap:8px;
    padding:12px 0;
    border-bottom:0.5px solid var(--border);
  }

  .allocation-wealth-mobile-card:last-child{
    border-bottom:0;
    padding-bottom:2px;
  }

  .allocation-wealth-mobile-card .sc-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }

  .allocation-wealth-mobile-card .sc-name{
    font-size:15px;
    font-weight:600;
  }

  .allocation-mobile-metrics{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .allocation-mobile-metrics > div{
    display:grid;
    gap:2px;
  }

  .allocation-mobile-metrics span,
  .allocation-mobile-market{
    font-size:12px;
    color:var(--sub);
  }

  .allocation-mobile-metrics strong,
  .allocation-mobile-market strong,
  .progress-mobile-footer{
    font-family:var(--font-numeric);

  }

  .allocation-mobile-metrics strong{
    font-size:14px;
  }

  .allocation-mobile-market{
    display:flex;
    justify-content:space-between;
    gap:10px;
  }

  .progress-mobile-footer{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:10px;
    font-size:13px;
  }

  .income-holding-main > strong,
  .income-holding-market{
    font-size:14px;
  }
}

/* M5-3：cashflow target / forecast 基礎 presentation 已由 public/ui/allocation.css 接手。 */

/* v77.70：行動版投資配置字級微調；只在 allocation 頁放大，維持原卡片比例與層級。 */
@media(max-width:700px){
  body{font-size:16px}
  .header-title{font-size:18px;letter-spacing:-.25px}
  .status{font-size:13px}
  button,
  .page-switch-btn{font-size:14px}
  .small{font-size:13px}
  .tiny{font-size:12px;line-height:1.45}
  .pill{font-size:13px}

  .allocation-card-title{font-size:17px}
  .pool-stat{gap:4px}
  .pool-stat > span{font-size:13px}
  .pool-stat > strong{font-size:16px}
  .pool-gap{font-size:13px}

  .allocation-wealth-mobile-card{gap:9px}
  .allocation-wealth-mobile-card .sc-name{font-size:17px;line-height:1.25}
  .allocation-mobile-metrics span,
  .allocation-mobile-market{font-size:13px;line-height:1.4}
  .allocation-mobile-metrics strong{font-size:16px}
  .progress-mobile-footer{font-size:14px;line-height:1.35}

  .income-holding-main > strong{font-size:15px}
  .income-holding-shares{font-size:12px}
  .income-holding-market{font-size:15px}

  /* M5-4：cashflow mobile typography 已由 public/ui/allocation.css 接手。 */

  .rank-title,
  .rank-amount{font-size:15px}
}