/* WealthPilot | css/g5.css — page styles of G5 — Reports + Settings (pages/reports.js, pages/settings.js).
 * Only selectors with this group's own prefixes (spec 8.1); shared components live in core/styles.css. */

/* ─── REPORTS: the month navigator sits in the header; มูลค่าสุทธิ shows 'ณ วันนี้' in its place (7.8) ─── */
.rpt-asof{display:none;align-items:center;height:var(--ctl);font-size:var(--fs-14);font-weight:600;color:var(--t2)}
.rpt-today .rpt-asof{display:inline-flex}
.rpt-today .month-nav{display:none}

/* ─── REPORTS: 6-month bars — month · income over spending · both amounts · net ─── */
.rpt-flow>.card-head{flex-wrap:wrap}
.rpt-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;font-size:var(--fs-12);color:var(--t3)}
.mbar{display:grid;grid-template-columns:72px minmax(0,1fr) 96px 96px;gap:12px;align-items:center;min-height:44px;padding:6px 0;border-bottom:1px solid var(--bd2)}
.mbar:last-child{border-bottom:0}
.mbar-label{font-size:var(--fs-12);font-weight:600;color:var(--t2)}
.mbar-bars{display:flex;flex-direction:column;gap:4px}
.mbar-fill{width:var(--w);height:8px;border-radius:var(--rd-pill);background:var(--c)}
.mbar-in{--c:var(--pos)}
.mbar-out{--c:var(--neg)}
.mbar-amts{display:flex;flex-direction:column;align-items:flex-end;font-size:var(--fs-12);line-height:1.4}
.mbar-net{text-align:right;font-size:var(--fs-13);font-weight:700}
.mbar-none{grid-column:2/-1;font-size:var(--fs-12);color:var(--t3)}

/* ─── REPORTS: category bars column, this month's cash-flow row, the two bar lists of มูลค่าสุทธิ ─── */
.rpt-cats th:last-child{width:40%}
.rpt-cf tr.current{background:var(--acc-bg)}
.rpt-split.g2{margin-bottom:0}
.rpt-sub{margin:0;font-size:var(--fs-12);font-weight:600;color:var(--t2)}

/* ─── SETTINGS: notes, toolbar hints, sub-headers, group totals ─── */
.set-note{margin:0;font-size:var(--fs-13);line-height:1.5;color:var(--t3)}
.set-hint{flex:1 1 280px;min-width:0;margin:0;font-size:var(--fs-13);line-height:1.5;color:var(--t3)}
.set-sub{margin:16px 0 4px;font-size:var(--fs-12);font-weight:600;color:var(--t2)}
.set-total{font-size:var(--fs-15);font-weight:700}
.set-narrow{max-width:720px}

/* ─── SETTINGS: tables under each other share column widths (categories; accounts: amount in column 4) ─── */
.set-cat,.set-acc{table-layout:fixed} /* the name column takes what is left */
.set-cat col:nth-child(2){width:13%}
.set-cat col:nth-child(3){width:25%}
.set-acc col:nth-child(2),.set-acc col:nth-child(3),.set-acc col:nth-child(4){width:18%}
.set-cat col:nth-child(4),.set-acc col:nth-child(5){width:88px} /* never narrower than the 'แก้ไข' button */
.set-acc-card .card-title{flex-shrink:0}
.set-acc-card .card-actions{flex-shrink:1;flex-wrap:wrap;justify-content:flex-end} /* total, then the loans link under it when narrow */

/* ─── SETTINGS: members — one row per person, opens the member modal ─── */
.member-list{margin-top:8px}
.member-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:var(--rd-sm)}
.member-ic{font-size:var(--fs-20);line-height:1}
.member-name{flex:1;min-width:0;font-weight:600;color:var(--t1)}
.member-row .ic{color:var(--t3)}

/* ─── SETTINGS: sharing and bank-feed rows (name | control) ─── */
.share-find{display:flex;gap:8px}
.share-find .inp{flex:1;min-width:0}
.share-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;min-height:52px;padding:8px 0;border-bottom:1px solid var(--bd2)}
.share-row:last-child{border-bottom:0}
.share-row select{width:150px}
.share-row>.tag,.share-row>.btn{justify-self:start} /* a tag or a lone button keeps its own width when the row stacks on a phone */
.share-wait,.share-acts{display:flex;align-items:center;gap:8px}

/* ─── SETTINGS: two-step login setup ─── */
.mfa-intro{margin-bottom:16px}
.mfa-steps{margin:16px 0 12px 20px;font-size:var(--fs-13);line-height:1.7;color:var(--t2)}
.mfa-qr{display:block;width:180px;height:180px;padding:6px;border:1px solid var(--bd);border-radius:var(--rd);background:var(--bg2)}
.mfa-secret{max-width:240px;margin:8px 0 16px}
.mfa-row{display:flex;align-items:center;gap:8px}
.mfa-row input{max-width:180px}

/* ─── SETTINGS: bank feed ─── */
.feed-off{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:var(--fs-13);color:var(--t2)}
.feed-off .ic{color:var(--acc)}
.feed-help{margin-top:8px}
.feed-steps{margin:4px 0 0 20px}
.feed-steps .code{margin:4px 0 8px}

/* ─── SETTINGS: colour and member-icon pickers (32 px, 44 px on phone) ─── */
.color-legend{margin-bottom:6px;font-size:var(--fs-13);font-weight:600;color:var(--t2)}
.color-row{display:flex;flex-wrap:wrap;gap:8px}
.color-dot{width:32px;height:32px;border-radius:50%;background:var(--c);transition:var(--tr)}
.color-dot:hover{transform:scale(1.1)}
.color-dot:active{transform:scale(.95)}
.color-dot.on{box-shadow:0 0 0 2px var(--bg2),0 0 0 4px var(--t1)}
.color-emoji{display:inline-flex;align-items:center;justify-content:center;background:var(--bg3);font-size:var(--fs-20);line-height:1}

/* ─── PHONE (≤768px) ─── */
@media (max-width:768px){
  .rpt-page .ph-actions{justify-content:center}
  .mbar{grid-template-columns:64px minmax(0,1fr) 96px}
  .set-hint{flex-basis:100%}
  .set-cat colgroup,.set-acc colgroup{display:none}
  .share-row{grid-template-columns:minmax(0,1fr)}
  .share-row select{width:100%}
  .share-acts .btn{flex:1}
  .color-dot{width:44px;height:44px}
}