/* ===================================================================
   BỐ CỤC RESPONSIVE — MOBILE-FIRST
   ------------------------------------------------------------------
   Một bộ code cho mọi màn hình. Viết cho ĐIỆN THOẠI trước (không có
   media query), rồi MỞ RỘNG dần khi màn hình to hơn bằng min-width:

     mặc định     điện thoại     1 cột · nút ≥ 44px · menu thu vào ngăn kéo
                                 · thanh điều hướng dưới đáy
     ≥ 768px      máy tính bảng  2–3 cột · hộp thoại ở giữa · vẫn thanh dưới
     ≥ 1024px     máy tính       menu cố định bên trái · bỏ thanh dưới
     ≥ 1440px     màn rộng       nội dung trải rộng hơn, thêm cột

   Tệp này nạp SAU styles.css và colors.css nên quyết định bố cục.
   Màu sắc, bóng đổ, cỡ chữ chi tiết vẫn nằm ở hai tệp kia.
   =================================================================== */

:root{ --tap:2.75rem; }     /* 44px — vùng chạm tối thiểu theo Apple / Google */

/* ===================================================================
   MẶC ĐỊNH = ĐIỆN THOẠI
   =================================================================== */

/* ---------- menu bên: thu vào ngăn kéo, mở bằng nút ☰ ---------- */
.sidebar{
  position:fixed; left:0; top:0; bottom:0; z-index:60;
  width:min(20rem, 86vw); flex-basis:auto; height:100%;
  transform:translateX(-100%); transition:transform .25s ease;
  box-shadow:var(--shadow-lg);
}
.sidebar.open{transform:none}
.scrim{
  display:block; position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.scrim.show{opacity:1; pointer-events:auto}
.nav-item{min-height:var(--tap)}
.only-mobile{display:grid}

/* ---------- thanh trên ---------- */
.topbar{padding:8px 10px; gap:6px}
.page-title{font-size:17px; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar .icon-btn{flex:0 0 auto}
.topbar-right{gap:4px; flex:0 0 auto}

/* ---------- nội dung: 1 cột, chừa chỗ cho thanh dưới ---------- */
.content{padding:16px 14px calc(96px + env(safe-area-inset-bottom)); max-width:none}
.grid-2, .grid-3, .q-grid{grid-template-columns:1fr}
.hero{padding:1.25rem}
.hero-value{font-size:28px}
.hero-split{gap:14px 22px}
.card{padding:16px}
.card-head{flex-wrap:wrap}

/* ---------- vùng chạm ≥ 44px ---------- */
.btn, .btn.sm, .chip, .link-btn{min-height:var(--tap)}
.btn{padding:0.7rem 1.1rem}
.chip{display:inline-flex; align-items:center}
.link-btn{display:inline-flex; align-items:center; padding:0 .7rem}
.icon-btn{width:var(--tap); height:var(--tap)}
.month-label{height:var(--tap); font-size:13px; padding:0 6px}
.input, .search, select.input{min-height:var(--tap); font-size:1rem}   /* 1rem: iOS không tự phóng to khi gõ */
.amount-input{font-size:2rem}
.swatch{width:var(--tap); height:var(--tap)}
.cat-pick{min-height:4.25rem}
.goal-actions{flex-wrap:wrap}
.goal-actions .btn{flex:1 1 45%}
.wallet-actions{flex-wrap:wrap}
.wallet-actions .btn{flex:1 1 auto}
.wallet-actions .wallet-edit{flex:0 0 var(--tap)}
.card > div[style*="display:flex"] > .btn{flex:1 1 100%}   /* nút trong danh sách trải ngang cho dễ trúng */

/* ---------- thanh điều hướng dưới đáy (ngón cái với tới) ---------- */
.bottom-nav{
  display:flex; align-items:center; position:fixed; left:0; right:0; bottom:0; z-index:40;
  border-top:1px solid var(--line); padding:4px 4px calc(4px + env(safe-area-inset-bottom));
}
.bn-item{
  flex:1; min-height:3.25rem; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; color:var(--text-3); padding:4px 0;
}
.bn-item span{font-size:20px; line-height:1}
.bn-item em{font-style:normal; font-size:10.5px; font-weight:600}
.bn-item.active{color:var(--accent)}
.bn-fab{
  width:3.5rem; height:3.5rem; flex:0 0 3.5rem; border-radius:50%; color:#fff;
  font-size:28px; line-height:1; margin-top:-22px;
}

/* ---------- hộp thoại: trượt từ đáy lên, chiếm hết bề ngang ---------- */
.modal{align-items:flex-end; padding:0}
.modal-card{max-width:none; border-radius:20px 20px 0 0; max-height:94vh}
.modal-card.sm, .modal-card.xs{max-width:none}
.modal#confirmModal{align-items:center; padding:16px}
.modal#confirmModal .modal-card{border-radius:20px; max-width:21.25rem}
.modal-body{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.toast{bottom:calc(86px + env(safe-area-inset-bottom))}

/* ---------- tổng kết tháng: bảng biến thành thẻ ---------- */
.acc-head{display:none}
.acc-row{grid-template-columns:1fr 1fr; text-align:left; gap:4px 12px}
.acc-row .acc-name{grid-column:1 / -1; margin-bottom:4px}
.acc-row > span[data-l]::before{content:attr(data-l); display:block; font-size:11px; font-weight:500; color:var(--text-2)}
.acc-row .acc-close{grid-column:1 / -1; border-top:1px dashed var(--line); padding-top:6px; font-size:15px}
.pva-sum{grid-template-columns:1fr 1fr 1fr}
.sal-in{flex-basis:8.2rem}
.al-ctl .sal-in{flex:0 0 6.5rem}

/* ---------- trợ lý: nút tròn trên thanh dưới, chat toàn màn hình ---------- */
.as-fab{right:14px; bottom:calc(76px + env(safe-area-inset-bottom)); padding:0; width:3.25rem; height:3.25rem; justify-content:center}
.as-fab-tx{display:none}
.as-box{inset:0; width:auto; height:auto; border-radius:0}
.as-input .btn{width:var(--tap); height:var(--tap)}

/* ---------- chữ Lào trên màn nhỏ ---------- */
html[lang="lo"] body{font-size:16.5px}
html[lang="lo"] .page-title{font-size:19px}
html[lang="lo"] .month-label{font-size:14px}
html[lang="lo"] .bn-item em{font-size:11.5px}
html[lang="lo"] .nav-item{font-size:16.5px}

/* màn rất hẹp (≤ 359px, máy cũ): bớt chữ trên thanh trên */
@media (max-width:359.98px){
  .month-label{max-width:5.5rem; overflow:hidden; text-overflow:ellipsis}
  .bn-item em{font-size:9.5px}
}

/* ===================================================================
   ≥ 600px — điện thoại ngang / máy tính bảng nhỏ: ô số liệu 2 cột
   =================================================================== */
@media (min-width:600px){
  .q-grid{grid-template-columns:repeat(2, 1fr)}
}

/* ===================================================================
   ≥ 768px — MÁY TÍNH BẢNG
   Vẫn thanh dưới như điện thoại, nhưng xếp thẻ 2–3 cột
   =================================================================== */
@media (min-width:768px){
  .content{padding:1.5rem 1.75rem calc(6rem + env(safe-area-inset-bottom)); max-width:60rem; margin:0 auto}
  .topbar{padding:0.8rem 1.75rem; gap:12px}
  .page-title{font-size:1.15rem}
  .month-label{font-size:.9rem; padding:0 .7rem}

  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3, .q-grid{grid-template-columns:repeat(3, 1fr)}
  .hero{padding:1.6rem}
  .hero-value{font-size:2rem}
  .card{padding:18px}
  .card > div[style*="display:flex"] > .btn{flex:0 0 auto}

  .bottom-nav{padding:0.4rem 12% calc(0.4rem + env(safe-area-inset-bottom))}
  .bn-item span{font-size:1.3rem}
  .bn-item em{font-size:.75rem}
  .bn-fab{width:3.75rem; height:3.75rem; flex-basis:3.75rem; font-size:2rem; margin-top:-1.6rem}

  /* hộp thoại về giữa màn hình */
  .modal{align-items:center; padding:1.5rem}
  .modal-card{max-width:32rem; border-radius:20px; max-height:88vh}
  .modal-card.sm{max-width:28rem}
  .modal-card.xs{max-width:21.25rem}
  .toast{bottom:6rem}

  /* bảng tổng kết hiện đủ cột */
  .acc-head{display:grid}
  .acc-row{grid-template-columns:2.2fr repeat(5, 1fr); text-align:right; gap:8px}
  .acc-row .acc-name{grid-column:auto; margin-bottom:0}
  .acc-row > span[data-l]::before{content:none}
  .acc-row .acc-close{grid-column:auto; border-top:0; padding-top:0; font-size:inherit}

  /* trợ lý: khung chat nổi thay vì toàn màn hình */
  .as-fab{bottom:calc(88px + env(safe-area-inset-bottom)); right:20px; width:auto; height:auto; padding:12px 18px}
  .as-fab-tx{display:inline}
  .as-box{inset:auto 20px calc(88px + env(safe-area-inset-bottom)) auto; width:380px; height:min(600px, calc(100vh - 120px)); border-radius:20px}
}

/* ===================================================================
   ≥ 1024px — MÁY TÍNH
   Menu cố định bên trái, bỏ thanh dưới và nút ☰
   =================================================================== */
@media (min-width:1024px){
  .sidebar{
    position:sticky; top:0; height:100vh; transform:none; box-shadow:none;
    width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  }
  .scrim, .only-mobile, .bottom-nav{display:none}
  .nav-item{min-height:0}

  .topbar{padding:13px 24px}
  .page-title{font-size:19px; flex:0 1 auto}
  .content{padding:1.25rem 1.75rem 2.75rem; max-width:var(--content-max); margin:0}

  .toast{bottom:2rem}
  .as-fab{bottom:20px}
  .as-box{inset:auto 20px 20px auto; height:min(620px, calc(100vh - 40px))}

  html[lang="lo"] body{font-size:17px}
  html[lang="lo"] .page-title{font-size:21px}
  html[lang="lo"] .month-label{font-size:15px}
  html[lang="lo"] .nav-item{font-size:16px}
}

/* chuột (không phải màn cảm ứng): nút gọn lại cho đỡ chiếm chỗ */
@media (min-width:1024px) and (pointer:fine){
  .btn.sm, .chip, .link-btn{min-height:2.25rem}
  .btn{padding:0.55rem 1rem}
  .btn.sm{padding:0.4rem 0.85rem}
  .icon-btn{width:2.25rem; height:2.25rem}
  .month-label{height:2.25rem}
  .input, .search, select.input{min-height:2.5rem; font-size:.95rem}
  .swatch{width:2.25rem; height:2.25rem}
}

/* ===================================================================
   ≥ 1440px — MÀN RỘNG: trải nội dung ra, thêm cột
   =================================================================== */
@media (min-width:1440px){
  :root{ --content-max:100rem; }
  .content{padding:1.5rem 2.25rem 3rem}
  /* danh sách ví / hũ tiết kiệm: bao nhiêu chỗ thì bấy nhiêu cột */
  .grid-2:has(> .wallet-card){grid-template-columns:repeat(auto-fill, minmax(21rem, 1fr))}
  .q-grid{grid-template-columns:repeat(6, 1fr)}
  .grid-auto{grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr))}
}