/* =====================================================================
   ecash.css — E-Cash wallet (student) + E-Cash admin tab
   ===================================================================== */
:root{
  --ew-bg:#ffffff; --ew-soft:#f3f6fb; --ew-line:#e5eaf2; --ew-text:#0f172a; --ew-mute:#64748b;
  --ew-in:#059669; --ew-out:#dc2626; --ew-brand1:#0b3b8c; --ew-brand2:#0ea5a4;
}
html[data-theme="dark"]{ --ew-bg:#141c2b; --ew-soft:#1b2537; --ew-line:#273349; --ew-text:#e6edf7; --ew-mute:#94a3b8; --ew-in:#34d399; --ew-out:#f87171; }

.po-box [hidden],.ea-form [hidden],.ew-overlay [hidden]{display:none!important}
.po-opt b{padding-right:20px}

/* ---------- Profile: account balance card ---------- */
.ew-card{all:unset;box-sizing:border-box;display:block;width:100%;margin:12px 0 4px;padding:18px 18px 16px;border-radius:18px;cursor:pointer;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%,rgba(255,255,255,.22) 0,rgba(255,255,255,0) 45%),linear-gradient(135deg,var(--ew-brand1),#1d4ed8 55%,var(--ew-brand2));
  box-shadow:0 10px 26px rgba(29,78,216,.32);transition:transform .15s ease,box-shadow .15s ease;font-family:inherit;text-align:left}
.ew-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(29,78,216,.4)}
.ew-card:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
.ew-card::after{content:"";position:absolute;right:-40px;bottom:-60px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08)}
.ew-card .ew-c-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;letter-spacing:.3px;opacity:.95}
.ew-card .ew-c-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.18);font-size:12px}
.ew-card .ew-c-lbl{margin-top:14px;font-size:12.5px;opacity:.85}
.ew-card .ew-c-amt{font-size:30px;font-weight:800;line-height:1.15;margin-top:2px;letter-spacing:.3px;font-variant-numeric:tabular-nums}
.ew-card .ew-c-bot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:12px;opacity:.9}
.ew-card .ew-c-go{font-weight:700}

/* live dot */
.ew-live{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;opacity:.95}
.ew-live i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:ewPulse 1.8s infinite}
@keyframes ewPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.ew-bump{animation:ewBump .5s ease}
@keyframes ewBump{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ---------- Pay tab: balance docked to the bottom edge of the page ---------- */
.ew-dock{all:unset;box-sizing:border-box;position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%) translateY(140%);z-index:9000;
  display:flex;align-items:center;gap:10px;width:min(460px,calc(100% - 24px));padding:10px 14px;border-radius:16px;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--ew-brand1),#1d4ed8 60%,var(--ew-brand2));box-shadow:0 10px 30px rgba(15,23,42,.35);transition:transform .25s ease;font-family:inherit}
.ew-dock.show{transform:translateX(-50%) translateY(0)}
.ew-dock .ew-d-ico{font-size:20px}
.ew-dock .ew-d-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.ew-dock .ew-d-lbl{font-size:11.5px;opacity:.85}
.ew-dock .ew-d-amt{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.ew-dock .ew-live{margin-left:auto}
body.ew-docked #dashboard{padding-bottom:78px}

/* ---------- Wallet popup (bank-app style) ---------- */
.ew-overlay{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(2,6,23,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ew-overlay.open{display:flex}
html.ew-lock,html.ew-lock body{overflow:hidden}
.ew-sheet{width:min(440px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:var(--ew-bg);color:var(--ew-text);box-shadow:0 24px 60px rgba(0,0,0,.35);animation:ewIn .22s ease}
@keyframes ewIn{from{transform:translateY(16px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.ew-head{position:relative;padding:16px 18px 18px;color:#fff;background:radial-gradient(120% 140% at 100% 0%,rgba(255,255,255,.2) 0,rgba(255,255,255,0) 45%),linear-gradient(135deg,var(--ew-brand1),#1d4ed8 55%,var(--ew-brand2))}
.ew-h-top{display:flex;align-items:center;justify-content:space-between}
.ew-brand{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.18);font-weight:800;font-size:13px;letter-spacing:.3px}
.ew-x{all:unset;cursor:pointer;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);font-size:16px}
.ew-x:hover{background:rgba(255,255,255,.3)}
.ew-acct{display:flex;align-items:center;gap:12px;margin-top:14px}
.ew-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:16px;background:rgba(255,255,255,.22);flex:none}
.ew-acct b{display:block;font-size:15px;line-height:1.3}
.ew-acct small{font-size:12px;opacity:.85;letter-spacing:.4px}
.ew-bal-lbl{margin-top:14px;font-size:12.5px;opacity:.85;display:flex;align-items:center;justify-content:space-between}
.ew-bal{font-size:34px;font-weight:800;line-height:1.15;letter-spacing:.3px;font-variant-numeric:tabular-nums}
.ew-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.ew-stats div{padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.14);font-size:11.5px}
.ew-stats b{display:block;font-size:14px;margin-top:2px;font-variant-numeric:tabular-nums}
.ew-body{padding:12px 14px 16px;overflow:auto;flex:1;min-height:120px}
.ew-filters{display:flex;gap:6px;margin:0 0 8px}
.ew-filters button,.ew-filters button:hover{all:unset;cursor:pointer;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--ew-soft);color:var(--ew-mute)}
.ew-filters button.on,.ew-filters button.on:hover{background:#1d4ed8;color:#fff}
.ew-day{margin:12px 2px 4px;font-size:12px;font-weight:700;color:var(--ew-mute)}
.ew-tx{display:flex;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px solid var(--ew-line)}
.ew-tx:last-child{border-bottom:0}
.ew-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:17px;flex:none;background:rgba(5,150,105,.12);color:var(--ew-in)}
.ew-tx.out .ew-ic{background:rgba(220,38,38,.12);color:var(--ew-out)}
.ew-tx-mid{flex:1;min-width:0}
.ew-tx-mid b{display:block;font-size:14px;line-height:1.35}
.ew-tx-mid small{display:block;font-size:11.5px;color:var(--ew-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ew-tx-r{text-align:right;flex:none}
.ew-tx-r b{display:block;font-size:14.5px;font-variant-numeric:tabular-nums;color:var(--ew-in)}
.ew-tx.out .ew-tx-r b{color:var(--ew-out)}
.ew-tx-r small{display:block;font-size:11px;color:var(--ew-mute);font-variant-numeric:tabular-nums}
.ew-empty{text-align:center;color:var(--ew-mute);padding:26px 10px;font-size:13.5px}
.ew-empty span{display:block;font-size:30px;margin-bottom:6px}

/* ---------- Pay tab: method + amount ---------- */
.po-box{margin:12px 0 4px;padding:14px;border-radius:16px;background:var(--ew-soft);border:1px solid var(--ew-line);color:var(--ew-text);text-align:left}
.po-h{font-size:13px;font-weight:800;margin:0 0 8px;color:var(--ew-text)}
.po-h + .po-h{margin-top:12px}
.po-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.po-opt{position:relative;display:flex;flex-direction:column;gap:2px;padding:11px 12px 10px;border-radius:14px;border:2px solid var(--ew-line);background:var(--ew-bg);cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:0}
.po-opt input{position:absolute;opacity:0;pointer-events:none}
.po-opt b{font-size:14px;display:flex;align-items:center;gap:6px}
.po-opt small{font-size:11.5px;color:var(--ew-mute);line-height:1.35}
.po-opt.on{border-color:#1d4ed8;box-shadow:0 0 0 3px rgba(29,78,216,.15)}
.po-opt.on::after{content:"✓";position:absolute;top:8px;right:10px;width:18px;height:18px;border-radius:50%;background:#1d4ed8;color:#fff;font-size:11px;display:grid;place-items:center;font-weight:800}
.po-opt.off{opacity:.5;cursor:not-allowed}
.po-tag{display:inline-block;align-self:flex-start;max-width:100%;margin-top:4px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:800;line-height:1.35}
.po-tag.ok{background:rgba(5,150,105,.14);color:var(--ew-in)}
.po-tag.wait{background:rgba(217,119,6,.15);color:#b45309}
html[data-theme="dark"] .po-tag.wait{color:#fbbf24}
.po-custom{display:flex;align-items:center;gap:8px;margin-top:8px}
.po-custom input{flex:1;margin:0!important;min-width:0}
.po-custom span{font-weight:800}
.po-sum{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--ew-bg);border:1px dashed var(--ew-line);font-size:13px}
.po-sum div{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.po-sum b{font-variant-numeric:tabular-nums}
.po-sum .neg{color:var(--ew-out)}
.po-sum .tot{border-top:1px solid var(--ew-line);margin-top:4px;padding-top:6px;font-weight:800}
.po-err{margin:8px 2px 0;color:var(--ew-out);font-size:12.5px;font-weight:600;min-height:0}
.po-err:empty{display:none}
.po-hint{margin:8px 2px 0;font-size:12px;color:var(--ew-mute)}
.po-hint button{all:unset;cursor:pointer;color:#1d4ed8;font-weight:800;text-decoration:underline}
html[data-theme="dark"] .po-hint button{color:#93c5fd}
@media (max-width:380px){.po-grid{grid-template-columns:1fr}}

/* confirm card (E-Cash payment) */
.ec-confirm .pm-items li{display:flex;justify-content:space-between;gap:8px}
.ec-ok{font-size:44px;text-align:center;margin:4px 0}

/* ---------- Admin: E-Cash tab ---------- */
.ea-top{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 10px}
.ea-top div{padding:10px 12px;border-radius:14px;background:linear-gradient(135deg,var(--ew-brand1),#1d4ed8 60%,var(--ew-brand2));color:#fff;font-size:12px}
.ea-top b{display:block;font-size:18px;margin-top:2px;font-variant-numeric:tabular-nums}
.ea-tools{display:flex;gap:6px;align-items:center;margin-bottom:8px}
.ea-tools input{flex:1;margin:0!important;min-width:0}
.ea-tools select{width:auto!important;margin:0!important}
.ea-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;border:1px solid var(--ew-line);background:var(--ew-bg);margin-bottom:8px;color:var(--ew-text);text-align:left}
.ea-row .ea-who{flex:1;min-width:0}
.ea-row .ea-who b{display:block;font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ea-row .ea-who small{font-size:12px;color:var(--ew-mute)}
.ea-row .ea-bal{font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.ea-row .ea-bal.zero{color:var(--ew-mute);font-weight:600}
.ea-row button{width:auto!important;margin:0!important;padding:8px 12px!important;font-size:12.5px!important;border-radius:10px!important}
.ea-more{display:block;margin:8px auto 0!important}
.ea-empty{text-align:center;color:var(--ew-mute);padding:18px}
/* admin: one student's wallet */
.ea-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0 4px}
.ea-acts button,.ea-acts button:hover{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;border-radius:12px;font-size:11.5px;font-weight:800;text-align:center;background:var(--ew-soft);color:var(--ew-text)}
.ea-acts button span{font-size:18px}
.ea-acts button.dep{color:var(--ew-in)} .ea-acts button.wd{color:var(--ew-out)} .ea-acts button.set{color:#1d4ed8} .ea-acts button.clr{color:#b45309}
html[data-theme="dark"] .ea-acts button.set{color:#93c5fd} html[data-theme="dark"] .ea-acts button.clr{color:#fbbf24}
.ea-acts button:hover{filter:brightness(.96)}
.ea-form{margin:6px 0 4px;padding:12px;border-radius:14px;background:var(--ew-soft);border:1px solid var(--ew-line)}
.ea-form h5{margin:0 0 8px;font-size:14px}
.ea-form input{width:100%;box-sizing:border-box;margin:0 0 8px!important}
.ea-form .ea-f-btns{display:flex;gap:8px}
.ea-form .ea-f-btns button{flex:1;margin:0!important}
.ea-form .ea-f-note{font-size:12px;color:var(--ew-mute);margin:-2px 0 8px}
.ea-form .po-err{margin:0 0 8px}

/* ---------- 6-digit PIN card ---------- */
.ep-ov{position:fixed;inset:0;z-index:10100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(2,6,23,.6);backdrop-filter:blur(4px)}
.ep-card{width:min(340px,100%);border-radius:22px;padding:22px 20px 18px;text-align:center;color:#fff;background:linear-gradient(160deg,#0b3b8c,#1d4ed8 60%,#0ea5a4);box-shadow:0 24px 60px rgba(0,0,0,.4);animation:ewIn .2s ease}
.ep-ico{font-size:34px}
.ep-card h4{margin:6px 0 2px;font-size:17px;color:#fff}
.ep-card p{margin:0 0 14px;font-size:12.5px;opacity:.9}
.ep-dots{display:flex;justify-content:center;gap:9px;margin:4px 0 6px;cursor:text}
.ep-dots i{width:34px;height:42px;border-radius:10px;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.3);display:grid;place-items:center;font-style:normal;font-size:20px;font-weight:800}
.ep-dots i.f{background:rgba(255,255,255,.3);border-color:#fff}
.ep-in{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ep-err{min-height:18px;font-size:12.5px;font-weight:700;color:#fecaca;margin:4px 0}
.ep-card.shake{animation:epShake .4s}
@keyframes epShake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.ep-btns{display:flex;gap:8px;margin-top:8px}
.ep-btns button{flex:1;margin:0!important;border:0;border-radius:12px;padding:11px;font-weight:800;cursor:pointer;font-family:inherit}
.ep-btns .ep-no{background:rgba(255,255,255,.18);color:#fff}
.ep-btns .ep-yes{background:#fff;color:#1d4ed8}
.ep-btns .ep-yes:disabled{opacity:.5;cursor:not-allowed}

/* ---------- debt (balance below 0) ---------- */
.po-red,.ew-neg{color:var(--ew-out)!important}
.po-err.po-warn{color:#b45309}
html[data-theme="dark"] .po-err.po-warn{color:#fbbf24}
.ew-card .ew-c-amt.ew-debt,.ew-dock .ew-d-amt.ew-debt,.ew-head .ew-bal.ew-debt{color:#ff8a8a}
.ew-debt-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:#dc2626;color:#fff;font-size:11px;font-weight:800;vertical-align:middle;letter-spacing:.2px}
.ew-dock.has-debt{background:linear-gradient(135deg,#7f1d1d,#b91c1c 55%,#1d4ed8)}
.ea-row .ea-bal.debt{color:var(--ew-out)}
.ea-top.three{grid-template-columns:1fr 1fr 1fr}
.ea-top div.debt{background:linear-gradient(135deg,#7f1d1d,#dc2626)}