/* Expenses (docs/expenses-v1.md). The staff system's look (../app.css), made for a
   phone first: big boxes, one-tap choices, the Save button always in reach. */

body.xp main{max-width:1100px; padding:12px 14px 120px}
.xnav{display:flex; gap:6px; flex-wrap:wrap}
.xnav button{background:rgba(255,255,255,.10); border:0; color:var(--head-ink); padding:7px 12px; border-radius:8px;
  cursor:pointer; font-size:13.5px; font-weight:600; opacity:.85}
.xnav button:hover{opacity:1; background:rgba(255,255,255,.18)}
.xnav button[aria-current="true"]{background:var(--head-ink); color:var(--head); opacity:1}
.xnav .badge{display:inline-block; min-width:18px; padding:0 5px; margin-left:5px; border-radius:9px; font-size:11.5px;
  background:var(--amber-soft); color:var(--amber)}

/* ---------- quick entry ---------- */
.xform{max-width:560px; margin:0 auto; display:grid; gap:14px}
.xform .panel{padding:14px}
.xf{display:grid; gap:6px}
.xf > label, .xf > .lbl{font-size:13px; font-weight:600; color:var(--ink2)}
.xf .opt{font-weight:400; color:var(--ink3)}
.xf input[type=text], .xf input[type=search]{font-size:18px; padding:11px 12px; width:100%}
.xf input.big{font-size:22px; font-weight:700}
.xf .hint{font-size:12.5px; color:var(--ink2)}
.xf .hint.warn{color:var(--amber); font-weight:600}
.xrow{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px}
@media (max-width:420px){ .xrow{grid-template-columns:minmax(0,1fr)} }

/* one-tap choices */
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chips button{border:1px solid var(--rule2); background:var(--card); color:var(--ink); border-radius:999px;
  padding:8px 14px; font-size:15px; cursor:pointer; line-height:1.2}
.chips button:hover{border-color:var(--rule3)}
.chips button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-on); font-weight:600}
.chips button.add{border-style:dashed; color:var(--ink2)}
.chips button.more{border-color:transparent; color:var(--accent); font-weight:600}
.seg{display:flex; border:1px solid var(--rule2); border-radius:10px; overflow:hidden}
.seg button{flex:1; border:0; background:var(--card); padding:11px 6px; font-size:15px; cursor:pointer; color:var(--ink)}
.seg button + button{border-left:1px solid var(--rule2)}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--accent-on); font-weight:700}

/* the date: the friendly text, with the phone's own date picker over it */
.xdate{position:relative; display:flex; align-items:center; gap:10px; border:1px solid var(--rule2); border-radius:10px;
  padding:10px 12px; background:var(--card); font-size:18px; font-weight:700; cursor:pointer}
.xdate .when{font-size:13px; font-weight:600; color:var(--accent); background:var(--accent-soft); padding:2px 8px; border-radius:6px}
.xdate .when.other{color:var(--amber); background:var(--amber-soft)}
.xdate .tap{margin-left:auto; font-size:12.5px; font-weight:500; color:var(--ink3)}
.xdate input{position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; border:0}

/* Particulars and what's remembered */
.sugg{display:grid; border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:var(--card)}
.sugg:empty{display:none}
.sugg button{display:grid; text-align:left; gap:1px; border:0; background:none; padding:10px 12px; cursor:pointer; color:var(--ink)}
.sugg button + button{border-top:1px solid var(--rule)}
.sugg button:hover, .sugg button:focus{background:var(--sunken)}
.sugg .sn{font-size:16px; font-weight:600}
.sugg .sd{font-size:12.5px; color:var(--ink2)}
.remembered{font-size:12px; color:var(--accent); font-weight:600}
input.mono{font-family:var(--font-mono)}

/* the amount */
.peso{position:relative}
.peso::before{content:"₱"; position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:22px; font-weight:700; color:var(--ink3)}
.peso input{padding-left:34px !important}
.vatline{display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; font-size:14px; color:var(--ink2)}
.vatline b{color:var(--ink); font-variant-numeric:tabular-nums}
.vatline .btn{margin-left:auto}
.vatedit{display:flex; gap:8px; align-items:center}
.vatedit input{max-width:160px}

/* the Save button, always in reach at the bottom of the screen */
.savebar{position:fixed; left:0; right:0; bottom:0; z-index:5; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(6px); border-top:1px solid var(--rule); padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.savebar .in{max-width:560px; margin:0 auto; display:flex; gap:10px; align-items:center}
.savebar .btn.primary{flex:1; font-size:18px; padding:13px; border-radius:12px}
.savebar .btn{padding:13px 16px; border-radius:12px}
.editing{font-size:13px; color:var(--amber); font-weight:600; text-align:center}

/* ---------- history and all expenses ---------- */
.xlist{display:grid; gap:8px}
.xday{font-size:13px; font-weight:700; color:var(--ink2); margin:12px 2px 0; font-family:var(--font-head)}
.xent{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; text-align:left; width:100%; padding:11px 13px;
  background:var(--card); border:1px solid var(--rule); border-radius:11px; cursor:pointer; color:var(--ink)}
.xent:hover{border-color:var(--rule3)}
.xent .p{font-weight:700; font-size:15.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.xent .a{font-weight:700; font-size:15.5px; font-variant-numeric:tabular-nums; text-align:right}
.xent .d{font-size:12.5px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.xent .v{font-size:12px; color:var(--ink3); text-align:right; font-variant-numeric:tabular-nums}
.xent.waiting{border-style:dashed; border-color:var(--amber)}
.xent.deleted .p, .xent.deleted .a{text-decoration:line-through; color:var(--ink3)}
.tag{display:inline-block; font-size:11px; font-weight:700; padding:1px 7px; border-radius:5px; margin-right:6px;
  background:var(--amber-soft); color:var(--amber)}
.tag.bad{background:var(--flag-soft); color:var(--flag)}

.xtools{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin-bottom:12px}
.xtools label{font-size:13px; color:var(--ink2); display:flex; align-items:center; gap:5px}
.xtools select{width:auto; padding:6px 8px}
.xtools select.set{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.xtools input[type=search]{width:auto; min-width:160px; flex:1; max-width:280px}
.totals{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:8px; margin-bottom:10px}
.totals .t{background:var(--card); border:1px solid var(--rule); border-radius:11px; padding:10px 12px}
.totals .k{font-size:12px; color:var(--ink2)}
.totals .n{font-size:19px; font-weight:700; font-variant-numeric:tabular-nums}
.bycat{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.bycat button{border:1px solid var(--rule); background:var(--sunken); border-radius:8px; padding:5px 10px; font-size:13px; cursor:pointer; color:var(--ink)}
.bycat button b{font-variant-numeric:tabular-nums; margin-left:6px}

/* the changes made to one entry */
.xhist{display:grid; gap:6px; font-size:13px}
.xhist .h{padding:8px 10px; background:var(--sunken); border-radius:8px}
.xhist .w{color:var(--ink2); font-size:12px}
.xhist .ch{margin-top:2px}
.xhist .ch s{color:var(--ink3)}

/* ---------- lists ---------- */
.xlists{display:grid; gap:14px; max-width:820px}
.xlists .panel{padding:14px}
.xlists h2{margin:0 0 4px; font-size:16px}
.xlists p.lead{margin:0 0 10px; font-size:13px; color:var(--ink2)}
.lrow{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 0; border-top:1px solid var(--rule)}
.lrow .nm{font-weight:600; margin-right:auto}
.lrow .nm.off{color:var(--ink3); text-decoration:line-through}
.lrow .meta{font-size:12.5px; color:var(--ink2)}
.signoutrow{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

@media (min-width:900px){
  .xall .xlist{grid-template-columns:repeat(2, minmax(0,1fr))}
  .xall .xday{grid-column:1 / -1}
}
.remembered:empty, .xf .hint.warn:empty{display:none}