/* Figma: Project Expense — dự án (không phải Thường nhật) ghi khoản chi trên
   một trang riêng thay vì ô nhập (js/expense-page.js). */

/* ============ Button bar của dự án ============
   Composer giữ lại (linh vật đứng trong nó) nhưng trong suốt, chỉ còn thanh
   nút: đệm 24 · 16, nút Plain Large "+ Thêm khoản chi" giãn hết bề ngang. */
.add-bar{display:none}
.app.proj-mode .expense-composer{background:transparent; padding:0 0 env(safe-area-inset-bottom)}
.app.proj-mode .expense-composer > .tips,
.app.proj-mode .expense-composer > .categories-chipbar,
.app.proj-mode .expense-composer > .forwho,
.app.proj-mode .expense-composer > .entry-row,
.app.proj-mode .expense-composer > .tag-member-menu{display:none}
.app.proj-mode .add-bar{display:flex; padding:var(--spacing-24) var(--spacing-16)}
.add-bar .btn{flex:1 1 auto}

/* Button / Plain, Size=Large — cao 52, bo 16, đệm 20, icon 24 cách 4, Other/Button 600/17 */
.btn--large{
  font:var(--text-button); letter-spacing:var(--tracking-button);
  display:flex; align-items:center; justify-content:center; gap:var(--spacing-4);
  min-height:0; height:52px; padding:0 var(--spacing-20); border-radius:var(--radius-16);
}
/* Button / Filled, State=Disabled — nền neutral/300, chữ trắng */
.btn--filled:disabled{background:var(--neutral-300); color:var(--neutral-0)}

/* ============ Trang thêm / sửa ============
   Phủ lên app như trang Account (z 26, trên header 20, dưới nền mờ 30 và
   dialog 70). Header: ✕ · ngày (dropdown) · 🗑 khi sửa (thêm mới: ô trống). */
.exp-page{
  position:absolute; inset:0; z-index:26;
  display:flex; flex-direction:column;
  background:var(--color-background-primary);
}
.exp-page[hidden]{display:none}
.exp-page:focus-visible{outline:none}
@media (prefers-reduced-motion: no-preference){
  .exp-page:not([hidden]){animation:expPageIn var(--motion-base) var(--ease-out)}
}
@keyframes expPageIn{from{transform:translateY(24px); opacity:0}}
.exp-page .nav-bar__spacer[hidden], .exp-page .nav-bar__back[hidden]{display:none}

/* Dropdown ngày — chữ Body/Small, chevrons 16 tertiary, nền trong suốt */
.exp-date{
  justify-self:center; display:flex; align-items:center; gap:var(--spacing-4);
  height:44px; padding:0 var(--spacing-16); border-radius:var(--radius-pill);
  font:var(--text-body-small); letter-spacing:var(--tracking-body-small); color:var(--color-text-primary);
  -webkit-tap-highlight-color:transparent;
}
.exp-date:active{background:var(--color-fill-quaternary)}
.exp-date .icon, .exp-dd .icon{color:var(--color-text-tertiary)}

.exp-page__body{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column;
}

/* Top — đệm 40 · 16, cách 16: số tiền Large Title, dòng "~" Body secondary,
   ghi chú */
.exp-top{display:flex; flex-direction:column; align-items:center; gap:var(--spacing-16); padding:var(--spacing-40) var(--spacing-16)}
.exp-amt{
  display:flex; align-items:baseline; justify-content:center; gap:.25em; max-width:100%;
  font:var(--text-large-title); letter-spacing:var(--tracking-large-title); color:var(--color-text-primary);
}
.exp-amt.empty{color:var(--color-text-tertiary)}
/* tắt chia đều: tổng chỉ xem — Figma 6137-25181: chữ text/tertiary */
.exp-amt--view{color:var(--color-text-tertiary)}
/* ô nhập co theo chữ: ::after (ẩn) mang cùng chữ, cùng ô lưới, quyết bề ngang */
.exp-amt__field{display:inline-grid; min-width:0}
.exp-amt__field::after{content:attr(data-v); visibility:hidden; white-space:pre; grid-area:1 / 1; font:inherit; letter-spacing:inherit}
.exp-amt__field input{
  grid-area:1 / 1; width:100%; min-width:1ch; padding:0; border:0; outline:none; background:transparent;
  font:inherit; letter-spacing:inherit; color:inherit; text-align:center; caret-color:var(--color-accent-primary);
}
/* tắt chia đều: tổng chỉ xem (cộng từ các ô bên dưới) — chạm không focus */
.exp-amt__field input:read-only{pointer-events:none}
.exp-amt__field input::placeholder{color:var(--color-text-tertiary); opacity:1}
/* trống: con trỏ nháy SAU số 0 (placeholder canh phải, chừa 2px cho con trỏ) */
.exp-amt__field::after, .exp-amt__field input{padding-right:2px}
.exp-amt__field input:placeholder-shown{text-align:right}
.exp-home{margin:calc(-1 * var(--spacing-10)) 0 0; font:var(--text-body); letter-spacing:var(--tracking-body); color:var(--color-text-secondary)}
.exp-home[hidden]{display:none}

.exp-note{display:flex; justify-content:center; width:100%}
.exp-note__add, .exp-note__show{
  display:flex; align-items:center; gap:6px; min-height:24px;
  font:var(--text-body-small); letter-spacing:var(--tracking-body-small);
  -webkit-tap-highlight-color:transparent;
}
.exp-note__add{color:var(--color-accent-primary)}
.exp-note__show{color:var(--color-text-primary); max-width:100%}
.exp-note__show span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.exp-note__show .icon{color:var(--color-text-tertiary)}
.exp-note__add:active, .exp-note__show:active{opacity:.6}
.exp-note__add[hidden], .exp-note__show[hidden], .exp-note__input[hidden]{display:none}
.exp-note__input{
  width:100%; max-width:260px; height:24px; padding:0; border:0; outline:none; background:transparent; text-align:center;
  font:var(--text-body-small); letter-spacing:var(--tracking-body-small);
  color:var(--color-text-primary); caret-color:var(--color-accent-primary);
}

/* Bar — hai Dropdown nền fill/quaternary bo tròn cao 44, cách 8, đệm dưới 24 */
.exp-bar{display:flex; justify-content:center; gap:var(--spacing-8); padding:0 var(--spacing-16) var(--spacing-24)}
.exp-dd{
  display:flex; align-items:center; gap:var(--spacing-8); min-width:0; height:44px; padding:0 var(--spacing-16);
  border-radius:var(--radius-pill); background:var(--color-fill-quaternary);
  font:var(--text-compact-emphasis); letter-spacing:var(--tracking-compact-emphasis); color:var(--color-text-primary);
  -webkit-tap-highlight-color:transparent;
}
.exp-dd:active{background:var(--color-fill-tertiary)}
.exp-dd > span:not(.icon):not(.exp-dd__av){overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.exp-dd__av{display:flex; margin-right:-2px}
.exp-dd__av .av{width:24px; height:24px; border:2px solid var(--color-background-primary); box-sizing:border-box}

/* Section "Share với ai?" — khối background/tertiary bo 8, cách mép 16 */
.exp-share{margin:0 var(--spacing-16); border-radius:var(--radius-8); background:var(--color-background-tertiary); overflow:hidden; flex:0 0 auto}
.exp-share__top{display:flex; align-items:center; justify-content:space-between; padding:var(--spacing-16) var(--spacing-16) var(--spacing-12)}
.exp-share__title{margin:0; font:var(--text-compact-emphasis); letter-spacing:var(--tracking-compact-emphasis); color:var(--color-text-primary)}
.exp-share__list{list-style:none; margin:0; padding:0}
/* List-Item/Member-Option có Checkbox — cao 48, đệm 12 · 16; vạch thụt 52 · 12 */
.exp-share__row{
  position:relative; display:flex; align-items:center; min-height:48px; padding:var(--spacing-12) var(--spacing-16);
  font:var(--text-body-small); letter-spacing:var(--tracking-body-small); color:var(--color-text-primary);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.exp-share__row::after{content:""; position:absolute; left:52px; right:var(--spacing-12); bottom:0; height:.5px; background:var(--color-separator-non-opaque)}
.exp-share__row:last-child::after{display:none}
.exp-share__row:active{background:var(--color-fill-quaternary)}
.exp-share__row:focus-visible{outline:none; background:var(--color-fill-quaternary)}
.exp-share__row .checkbox{margin-right:var(--spacing-12)}
.exp-share__name{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.exp-share__amt{
  flex:0 1 140px; min-width:0; height:24px; padding:0 0 0 var(--spacing-12); border:0; outline:none; background:transparent;
  text-align:right; font:inherit; letter-spacing:inherit; color:var(--color-text-primary); caret-color:var(--color-accent-primary);
  font-variant-numeric:tabular-nums;
}
.exp-share__amt{font:var(--text-body-small-emphasis); letter-spacing:var(--tracking-body-small-emphasis)}   /* số đã nhập: Body/Small Emphasis */
.exp-share__amt::placeholder{color:var(--color-text-tertiary); font-weight:400}
/* chia đều: phần của mỗi người — chỉ xem, Body/Small primary canh phải */
.exp-share__val{flex:0 0 auto; padding-left:var(--spacing-12); white-space:nowrap; font-variant-numeric:tabular-nums}
/* Figma: Toast (sticky) — nền neutral/1000, bo tròn, đệm 4 · 12 · 4 · 8, icon info
   24 cách 4, chữ Body/Small trắng; ngay dưới header, giữa màn, không đẩy nội dung */
.exp-toast{
  position:absolute; top:calc(60px + env(safe-area-inset-top, 0px)); left:50%; z-index:2;
  transform:translateX(-50%); max-width:calc(100% - 32px);
  display:flex; align-items:center; gap:var(--spacing-4); padding:var(--spacing-4) var(--spacing-12) var(--spacing-4) var(--spacing-8);
  border-radius:var(--radius-pill); background:var(--neutral-1000); color:var(--neutral-0);
  box-shadow:0 16px 20px -8px rgba(3,5,18,.1);
  font:var(--text-body-small); letter-spacing:var(--tracking-body-small); white-space:nowrap; pointer-events:none;
  animation:expToastIn .2s var(--ease-out);
}
.exp-toast[hidden]{display:none}
.exp-toast img{flex:0 0 auto; display:block}
.exp-toast span{overflow:hidden; text-overflow:ellipsis}
@keyframes expToastIn{from{opacity:0; transform:translate(-50%, -6px)}}
@media (prefers-reduced-motion: reduce){ .exp-toast{animation:none} }
.exp-page__body > :last-child{margin-bottom:var(--spacing-24)}
.exp-page .button-bar .btn{flex:1 1 auto}

/* ============ Checkbox · Radio · Switch (Figma) ============ */
/* Checkbox — 24, bo 8, viền 2 border/default (#d1d1d6); bật: nền accent, ✓ trắng */
.checkbox{
  flex:0 0 auto; display:grid; place-items:center; width:24px; height:24px; box-sizing:border-box;
  border:2px solid var(--neutral-300); border-radius:var(--radius-8); background:var(--neutral-0);
}
.checkbox .icon{display:none; width:14px; height:10.5px; color:var(--neutral-0)}
.checkbox--on{border-color:var(--color-accent-primary); background:var(--color-accent-primary)}
.checkbox--on .icon{display:block}
/* Radio — 24 tròn, viền 2; bật: nền accent, chấm trắng 8 */
.radio{
  flex:0 0 auto; position:relative; width:24px; height:24px; box-sizing:border-box;
  border:2px solid var(--neutral-300); border-radius:var(--radius-pill); background:var(--neutral-0);
}
.radio--on{border-color:var(--color-accent-primary); background:var(--color-accent-primary)}
.radio--on::after{content:""; position:absolute; inset:0; margin:auto; width:8px; height:8px; border-radius:50%; background:var(--neutral-0)}
/* Switch, Size=Small — rãnh 28×16, núm 12; nhãn Body/Compact bên trái cách 4 */
.switch{display:flex; align-items:center; gap:var(--spacing-4); cursor:pointer; font:var(--text-compact); letter-spacing:var(--tracking-compact); color:var(--color-text-primary); position:relative}
.switch input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.switch__track{position:relative; width:28px; height:16px; border-radius:var(--radius-pill); background:var(--neutral-400); transition:background .15s ease}
.switch__track::after{content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--neutral-0); transition:transform .15s ease}
.switch input:checked + .switch__track{background:var(--color-accent-primary)}
.switch input:checked + .switch__track::after{transform:translateX(12px)}
.switch::after{content:""; position:absolute; inset:-12px -8px}   /* vùng chạm 44 */

/* ============ Popup chọn một (Ai trả? / Chọn danh mục) ============
   Nền mờ đen 20% phủ trang; hộp trắng 240 bo 8, bóng Elevation/Floating,
   đệm dọc 8, tiêu đề Body/Compact Emphasis, dòng Member-Option có Radio. */
.pick-wrap{position:absolute; inset:0; z-index:60; background:rgba(0,0,0,.2); animation:dlgFade .16s ease both}
.pick-wrap[hidden]{display:none}
.pick-pop{
  position:absolute; left:0; right:0; margin:0 auto; width:240px; overflow-y:auto; overscroll-behavior:contain;
  padding:var(--spacing-8) 0; border-radius:var(--radius-8);
  background:var(--color-background-primary); box-shadow:0 8px 24px rgba(0,0,0,.16);
  animation:msgMenuIn .2s var(--ease-out);
}
.pick-pop:focus-visible{outline:none}
.pick-pop__title{margin:0; padding:var(--spacing-4) var(--spacing-16); font:var(--text-compact-emphasis); letter-spacing:var(--tracking-compact-emphasis); color:var(--color-text-primary)}
.pick-pop__list{list-style:none; margin:0; padding:0}
.pick-pop__row{
  position:relative; display:flex; align-items:center; gap:var(--spacing-12); min-height:48px; padding:var(--spacing-12) var(--spacing-16);
  font:var(--text-body-small); letter-spacing:var(--tracking-body-small); color:var(--color-text-primary);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.pick-pop__row::after{content:""; position:absolute; left:52px; right:var(--spacing-12); bottom:0; height:.5px; background:var(--color-separator-non-opaque)}
.pick-pop__row:last-child::after{display:none}
.pick-pop__row:active, .pick-pop__row:focus-visible{outline:none; background:var(--color-fill-quaternary)}
.pick-pop__label{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ============ Figma: Date picker ============
   Hộp 308 bo 16 dưới header; tháng Body/Small Emphasis giữa hai ‹ ›, vạch
   ngăn, hàng thứ viết hoa 10px, lưới 7 cột. Màu theo design system:
   ngày đang chọn = vòng accent chữ trắng; hôm nay chữ accent; tương lai mờ. */
.date-pop{
  position:absolute; top:48px; left:0; right:0; margin:0 auto; width:308px; max-width:calc(100% - 32px);
  padding:var(--spacing-20) var(--spacing-16) var(--spacing-16); border-radius:var(--radius-16);
  background:var(--color-background-primary); box-shadow:0 8px 24px rgba(0,0,0,.16);
  animation:msgMenuIn .2s var(--ease-out);
}
.date-pop:focus-visible{outline:none}
.date-pop__head{display:flex; align-items:center; justify-content:space-between; padding-bottom:var(--spacing-12); margin:0 var(--spacing-4) var(--spacing-12); border-bottom:1px solid var(--color-separator-non-opaque)}
.date-pop__month{margin:0; font:var(--text-body-small-emphasis); letter-spacing:var(--tracking-body-small-emphasis); color:var(--color-text-primary)}
.date-pop__nav{display:grid; place-items:center; width:32px; height:32px; border-radius:var(--radius-pill); color:var(--color-text-secondary); -webkit-tap-highlight-color:transparent}
.date-pop__nav:active{background:var(--color-fill-quaternary)}
.date-pop__nav:disabled{color:var(--neutral-300)}
.date-pop__week, .date-pop__grid{display:grid; grid-template-columns:repeat(7, 1fr)}
.date-pop__week span{
  padding:var(--spacing-4) 0; text-align:center; text-transform:uppercase;
  font:var(--text-tab-label); letter-spacing:var(--tracking-tab-label); color:var(--color-text-tertiary);
}
.date-pop__grid{row-gap:var(--spacing-4); margin-top:var(--spacing-8)}
.date-pop__day{
  justify-self:center; display:grid; place-items:center; width:36px; height:36px; border-radius:var(--radius-pill);
  font:var(--text-body-small); letter-spacing:var(--tracking-body-small); font-variant-numeric:tabular-nums; color:var(--color-text-primary);
  -webkit-tap-highlight-color:transparent;
}
.date-pop__day:not(:disabled):not(.on):active{background:var(--color-fill-quaternary)}
.date-pop__day.today{color:var(--color-accent-primary); font-weight:600}
.date-pop__day.on{background:var(--color-accent-primary); color:var(--neutral-0); font-weight:600}
.date-pop__day:disabled{color:var(--neutral-300)}