/* List-Item — theo component .List-Item_Master trong Figma:
     .list-item              gốc (dòng); ::after là .Seperator
       .list-item__main      Main content (dòng đơn giản đặt con thẳng vào gốc)
         __leading           Leading — chứa __annotation (chấm màu), Avatar hoặc ký hiệu
         __label             Middle › Top › Label
         __middle            Middle khi có hai dòng: __label + __description
         __trailing          Trailing — __main-info + __sub-info
       .list-item__check     dấu ✓ cuối dòng (mục đang chọn)
       .list-item__icon      icon cuối dòng (›, bút)
       .list-item__action    nút cuối dòng (thùng rác)
       .list-item__hit       nút phủ cả dòng, khi cả dòng bấm được mà bên trong còn nút khác
   .list-items là <ul>; .list-group là khối nền background/tertiary bo 8 bao quanh.
   Biến thể theo tên Figma List-Item/<Tên> → .list-item--<tên>, ở cuối file này.
   Chỉnh riêng cho một sheet (vd. #recList, #budList) nằm trong file của sheet đó. */

.list-items{list-style:none; margin:0; padding:0}
/* Figma: List-Item/*-TotalExpense — padding 16, vạch thụt 48, dòng cuối không vạch */
.list-item{
  font:var(--text-body-small); letter-spacing:var(--tracking-body-small);
  position:relative; width:100%; display:flex; align-items:center; gap:var(--spacing-8);
  min-height:44px; padding:var(--spacing-16); text-align:left; color:var(--color-text-primary);
}
.list-item[hidden]{display:none}
/* .Seperator — mỗi biến thể chỉnh thụt hai đầu bằng --sep-left / --sep-right */
.list-item::after{content:""; position:absolute; left:var(--sep-left,48px); right:var(--sep-right,0); bottom:0; height:.5px; background:var(--color-separator-non-opaque)}
.list-items li:last-child .list-item::after{display:none}
button.list-item{transition:background .12s ease}
@media (hover:hover){button.list-item:hover{background:var(--color-fill-quaternary)}}
button.list-item:active{background:var(--color-fill-tertiary)}
.list-item__main{flex:1 1 auto; min-width:0; display:flex; align-items:center}
.list-item__leading{flex:0 0 auto; display:flex; align-items:center; padding-right:var(--spacing-12)}
.list-item__annotation{width:8px; height:8px; border-radius:var(--radius-pill); background:var(--cc)}
.list-item__leading .av{width:24px; height:24px; border:1px solid var(--color-border-subtle); font:var(--text-caption-2); letter-spacing:var(--tracking-caption-2)}
.list-item__label{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Middle — cột Label + Description */
.list-item__middle{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:var(--spacing-2)}
.list-item__check{flex:0 0 auto}
.list-item__trailing{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:var(--spacing-2); padding-left:var(--spacing-12)}
.list-item__main-info{font:var(--text-body-small-emphasis); letter-spacing:var(--tracking-body-small-emphasis); font-variant-numeric:tabular-nums; white-space:nowrap}
.list-item__sub-info{font:var(--text-caption); letter-spacing:var(--tracking-caption); color:var(--color-text-secondary); font-variant-numeric:tabular-nums}
.list-group{background:var(--color-background-tertiary); border-radius:var(--radius-8); overflow:hidden}
.list-group .list-items:empty{display:none}
.list-item__hit{position:absolute; inset:0; border-radius:inherit}
.list-item__hit:focus-visible{outline:2px solid var(--color-border-focus); outline-offset:-2px}
.list-item__action{position:relative; z-index:1; flex:0 0 auto; display:flex; margin:-8px; padding:var(--spacing-8); border-radius:var(--radius-pill); color:var(--color-status-error)}
.list-item__icon{position:relative; z-index:1; flex:0 0 auto; display:flex; pointer-events:none; color:var(--color-text-tertiary)}
.list-item__icon.icon--chevron-right{color:var(--color-text-secondary)}
.list-item__na{color:var(--color-text-tertiary); white-space:nowrap}

/* ============ biến thể ============ */

/* List-Item/Member-Option — cao 44, avatar 24, chữ Body/Small 15/20, vạch thụt 48 · 12.
   Dùng ở sheet Thành viên, Dự án mới và menu gõ @ */
.list-item--member-option{
  font:var(--text-subheadline); letter-spacing:var(--tracking-subheadline);
  padding:0 var(--spacing-16); --sep-right:var(--spacing-12);
}
.list-item--member-option:last-child::after{display:none}
.list-item--member-option .av{font:var(--text-caption-2); letter-spacing:var(--tracking-caption-2); width:24px; height:24px; border:1px solid var(--color-border-subtle); margin-right:var(--spacing-12)}
.list-item--member-option .list-item__sub-info{flex:0 0 auto; padding-left:var(--spacing-12); white-space:nowrap; font-variant-numeric:normal}
.tag-member-menu .list-item--member-option{border-radius:var(--radius-8)}
.list-item--member-option[aria-selected="true"]{background:var(--color-accent-muted)}
.list-item--member-option[aria-selected="true"]::after{display:none}

/* List-Item/Member-in-Setting — sheet Thành viên. Cao 44, avatar 24, Body/Small,
   vạch thụt 48 · 12. Dòng đang chọn nền accent/muted. Có ô thêm bên dưới thì
   dòng cuối vẫn có vạch; đang sửa hoặc chỉ xem (không có ô thêm) thì không. */
.list-item--member-setting{
  font:var(--text-subheadline); letter-spacing:var(--tracking-subheadline);
  padding:0 var(--spacing-16); border-radius:var(--radius-8); --sep-right:var(--spacing-12);
}
.list-item--member-setting.on{background:var(--color-accent-muted)}
.list-item--member-setting .list-item__sub-info{white-space:nowrap; font-variant-numeric:normal}
.list-items li:last-child .list-item--member-setting::after{display:block}
.list-group.editing .list-items li:last-child .list-item--member-setting::after{display:none}

/* List-Item/Currency — cao ≥44, vạch chạy hết bề ngang, dòng đang chọn nền accent/muted */
.list-item--currency{gap:0; padding:var(--spacing-12); border-radius:var(--radius-8); --sep-left:0}
.list-item--currency:last-child::after{display:none}
.list-item--currency .list-item__leading{
  font:var(--text-body-small-emphasis); letter-spacing:var(--tracking-body-small-emphasis);
  flex:0 0 40px; height:32px; margin:-6px var(--spacing-12) -6px 0; padding:0;   /* Figma 32; nới 40 để ký hiệu 3 ký tự (HK$, CN¥) không đẩy lệch tên */
  justify-content:center;
}
.list-item--currency .list-item__check{margin-left:var(--spacing-12); visibility:hidden; color:var(--color-accent-primary)}
.list-item--currency[aria-current="true"]{background:var(--color-accent-muted)}
.list-item--currency[aria-current="true"] .list-item__check{visibility:visible}
@media (hover:hover){.list-item--currency:not([aria-current="true"]):hover{background:var(--color-fill-quaternary)}}

/* List-Item/Language — cao ≥44, đệm 16, chữ Body/Default, ✓ 16 bên phải;
   vạch chạy hết bề ngang, dòng đang chọn nền accent/muted */
.list-item--language{
  font:var(--text-body); letter-spacing:var(--tracking-body);
  gap:var(--spacing-8); min-height:44px; padding:var(--spacing-16); border-radius:var(--radius-8); --sep-left:0;
}
.list-item--language:last-child::after{display:none}
.list-item--language .list-item__check{color:var(--color-accent-primary); visibility:hidden}
.list-item--language[aria-checked="true"]{background:var(--color-accent-muted)}
.list-item--language[aria-checked="true"] .list-item__check{visibility:visible}
@media (hover:hover){.list-item--language:not([aria-checked="true"]):hover{background:var(--color-fill-quaternary)}}
/* sheet Đồng mặc định (Figma Setting global-currency): vạch thụt 64, thẳng hàng với tên */
#homeList .list-item--currency{--sep-left:64px}

/* List-Item/Action-menu — cao 52, icon 16, chữ Body/Default; không có vạch ngăn */
.list-item--action-menu{
  font:var(--text-body); letter-spacing:var(--tracking-body);
  gap:var(--spacing-12); min-height:52px; padding:0 var(--spacing-12); border-radius:var(--radius-8);
}
.list-item--action-menu::after{content:none}
.list-item--action-menu .list-item__icon{display:block}
.list-item--action-menu.bad .list-item__icon{color:inherit}
@media (hover:hover){.list-item--action-menu:hover{background:var(--color-fill-quaternary)}}
.list-item--action-menu:active{background:var(--color-fill-tertiary)}
/* dự án đang mở: chỉ dấu ✓, không tô nền */
.list-item--action-menu .list-item__check{color:var(--color-accent-primary); display:grid; opacity:0}
.list-item--action-menu[aria-current="true"] .list-item__check{opacity:1}
.list-item--action-menu.bad{color:var(--color-status-error)}
.list-item--action-menu .pop-tag{font:var(--text-caption); letter-spacing:var(--tracking-caption); margin-left:auto; flex:0 0 auto; color:var(--color-text-secondary)}
.list-item--action-menu svg{flex:0 0 auto; color:var(--color-text-tertiary)}

/* List-Item/Account — avatar 40 + tên (Headline) + email (Caption); không có vạch ngăn */
.list-item--account{align-items:flex-start; gap:var(--spacing-8); padding:var(--spacing-12) var(--spacing-8) var(--spacing-16)}
.list-item--account::after{content:none}
.list-item--account .av{width:40px; height:40px; flex:0 0 auto; border:1px solid var(--color-border-subtle)}
.list-item--account .list-item__middle b,.list-item--account .list-item__middle span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.list-item--account .list-item__middle b{font:var(--text-headline); letter-spacing:var(--tracking-headline); color:var(--color-text-primary)}
.list-item--account .list-item__middle span{font:var(--text-caption); letter-spacing:var(--tracking-caption); color:var(--color-text-secondary)}

/* List-Item/Invite-link — link + hạn dùng (Footnote), nút Copy và nút xoá; vạch thụt 16 hai đầu */
.list-item--invite-link{gap:var(--spacing-12); padding:var(--spacing-12) var(--spacing-12) var(--spacing-12) var(--spacing-16); --sep-left:16px; --sep-right:16px}
.list-item--invite-link:last-child::after{display:none}
.list-item--invite-link .list-item__middle{font:var(--text-footnote); letter-spacing:var(--tracking-footnote); min-height:48px}
.list-item--invite-link .list-item__label{flex:0 1 auto; color:var(--color-text-primary)}
.list-item--invite-link .list-item__description{color:var(--color-text-tertiary)}
.list-item--invite-link .list-item__description:empty{display:none}
.list-item--invite-link .list-item__trailing{flex-direction:row; align-items:center; gap:var(--spacing-8); padding-left:0}