/* parent-ui.css - shared by login.php, register.php, dashboard.php
   Light mode uses the school's theme colour (--school, set per page).
   Dark mode ignores it and uses the platform accent, same as the backend. */
:root {
  --ac: var(--school, #F15F08);
  --ac-dark: color-mix(in srgb, var(--ac) 60%, #000);
  --hero-a: var(--ac); --hero-b: var(--ac-dark);
  --bg:#f6f7fb; --card:#fff; --ink:#0f172a; --muted:#64748b; --faint:#94a3b8; --line:#e2e8f0; --chip:#f1f5f9; --in-bg:#fff;
  --ok:#059669; --ok-bg:#ecfdf5; --err:#dc2626; --err-bg:#fef2f2; --err-fg:#991b1b; --err-bd:#fecaca;
  --sh: 0 1px 2px rgba(15,23,42,.04), 0 18px 36px -26px rgba(15,23,42,.3);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --hero-a:#17233a; --hero-b:#0e1626;
  --bg:#0b1220; --card:#131c2e; --ink:#e8edf6; --muted:#93a1b8; --faint:#64748b; --line:#243049; --chip:#1b2640; --in-bg:#0f1a2e;
  --ok:#34d399; --ok-bg:rgba(16,185,129,.14); --err:#f87171; --err-bg:rgba(220,38,38,.14); --err-fg:#fca5a5; --err-bd:rgba(220,38,38,.35);
  --sh: 0 1px 2px rgba(0,0,0,.4), 0 18px 36px -26px rgba(0,0,0,.7);
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,-apple-system,sans-serif; }
a { color:var(--ac); text-decoration:none; }

/* ---------- hero (dashboard) ---------- */
.pp-hero { position:relative; overflow:hidden; color:#fff; padding:20px 0 96px; background:linear-gradient(160deg,var(--hero-a),var(--hero-b)); }
.pp-hero::before,.pp-auth::before { content:''; position:absolute; width:360px; height:360px; border-radius:50%; background:rgba(255,255,255,.07); top:-150px; right:-100px; pointer-events:none; }
.pp-hero::after,.pp-auth::after { content:''; position:absolute; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.06); bottom:-110px; left:-70px; pointer-events:none; }
.pp-wrap { position:relative; z-index:1; max-width:960px; margin:0 auto; padding:0 20px; }
.pp-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:28px; }
.pp-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.pp-logo { width:42px; height:42px; border-radius:12px; flex:none; object-fit:cover; background:rgba(255,255,255,.18); color:#fff; display:grid; place-items:center; font-weight:800; font-size:18px; }
.pp-brand b { display:block; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
.pp-brand small { opacity:.8; font-size:12px; }
.pp-actions { display:flex; align-items:center; gap:8px; flex:none; }
.pp-pillbtn,.pp-ic { height:38px; padding:0 14px; border-radius:10px; border:1.5px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12); color:#fff; font:inherit; font-size:13px; font-weight:700; display:inline-flex; align-items:center; cursor:pointer; }
.pp-pillbtn:hover,.pp-ic:hover { background:rgba(255,255,255,.22); color:#fff; }
.pp-ic { width:38px; padding:0; justify-content:center; }
.pp-ic svg { width:18px; height:18px; }
.pp-ic .i-sun { display:none; }
html[data-theme="dark"] .pp-ic .i-sun { display:block; }
html[data-theme="dark"] .pp-ic .i-moon { display:none; }
.pp-hello h1 { margin:0 0 6px; font-size:clamp(22px,3.4vw,30px); font-weight:800; letter-spacing:-.02em; color:#fff; }
.pp-hello p { margin:0 0 12px; opacity:.88; font-size:14px; }
.pp-chip { display:inline-block; padding:5px 12px; border-radius:20px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); font-size:12px; font-weight:700; }

/* ---------- body ---------- */
.pp-body { position:relative; z-index:2; max-width:960px; margin:-60px auto 0; padding:0 20px 60px; }
.pp-h { margin:26px 2px 12px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.pp-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.pp-stat { background:var(--card); border-radius:16px; padding:16px 18px; box-shadow:var(--sh); }
.pp-stat span { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); margin-bottom:4px; }
.pp-stat b { font-size:22px; font-weight:800; }
.pp-stat.owe b { color:var(--err); } .pp-stat.clear b { color:var(--ok); }

.pp-pay { position:relative; overflow:hidden; border-radius:18px; padding:20px; margin-top:16px; color:#fff; background:linear-gradient(135deg,var(--ac),var(--ac-dark)); box-shadow:0 14px 28px -18px var(--ac); }
html[data-theme="dark"] .pp-pay { background:linear-gradient(135deg,#1b2640,#131c2e); border:1px solid var(--line); box-shadow:var(--sh); }
.pp-pay h4 { margin:0 0 14px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; opacity:.85; }
.pp-acct + .pp-acct { margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.18); }
.pp-acct .bank { font-size:13px; font-weight:700; opacity:.9; }
.pp-acct .num { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0; font-family:ui-monospace,'Courier New',monospace; font-size:21px; font-weight:700; letter-spacing:1.5px; }
.pp-copy { border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.14); color:#fff; border-radius:8px; padding:3px 10px; font:inherit; font-size:11px; font-weight:700; cursor:pointer; letter-spacing:0; }
.pp-acct .meta { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; font-weight:600; }
.pp-acct .tag { font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:20px; background:rgba(255,255,255,.2); }

.pp-news { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.pp-news a { flex:0 0 230px; scroll-snap-align:start; background:var(--card); border-radius:16px; overflow:hidden; box-shadow:var(--sh); color:var(--ink); }
.pp-news img { width:100%; height:110px; object-fit:cover; display:block; background:var(--chip); }
.pp-news .nb { padding:12px 14px; } .pp-news h4 { margin:0 0 6px; font-size:13.5px; line-height:1.35; }
.pp-news small { color:var(--faint); font-size:11px; font-weight:600; }

.pp-child { display:grid; grid-template-columns:auto 1fr auto; gap:6px 16px; align-items:center; background:var(--card); border-radius:18px; padding:18px; margin-bottom:12px; box-shadow:var(--sh); border:1.5px solid transparent; transition:.15s; }
.pp-child:hover { border-color:color-mix(in srgb,var(--ac) 35%,transparent); }
.pp-av { width:58px; height:58px; border-radius:16px; object-fit:cover; border:2px solid var(--line); grid-row:span 2; }
.pp-ci h3 { margin:0; font-size:16.5px; font-weight:800; } .pp-ci p { margin:4px 0 0; font-size:12.5px; color:var(--muted); }
.pp-bal { text-align:right; } .pp-bal .amt { font-size:19px; font-weight:800; }
.pp-bal .cr { font-size:11px; font-weight:700; color:var(--ok); margin-top:2px; }
.amt.ok { color:var(--ok); } .amt.owe { color:var(--err); }
.pp-pill { display:inline-block; margin-top:4px; padding:3px 10px; border-radius:20px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.pp-pill.ok { background:var(--ok-bg); color:var(--ok); } .pp-pill.owe { background:var(--err-bg); color:var(--err); } .pp-pill.none { background:var(--chip); color:var(--muted); }
.pp-btns { grid-column:2 / -1; display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pp-empty { background:var(--card); border-radius:18px; padding:44px 20px; text-align:center; color:var(--muted); font-size:14px; box-shadow:var(--sh); }

/* ---------- buttons & forms ---------- */
.pp-btn { display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 20px; border-radius:12px; border:1.5px solid transparent; font:inherit; font-size:14px; font-weight:700; cursor:pointer; color:#fff; background:linear-gradient(135deg,var(--ac),var(--ac-dark)); box-shadow:0 10px 20px -14px var(--ac); }
.pp-btn:hover { color:#fff; transform:translateY(-1px); }
.pp-btn.block { width:100%; height:48px; }
.pp-btn.ghost { background:var(--card); color:var(--ac); border-color:var(--ac); box-shadow:none; }
.pp-btn.ghost:hover { color:var(--ac); }

.pp-auth { position:relative; overflow:hidden; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; background:linear-gradient(160deg,var(--hero-a),var(--hero-b)); }
.pp-auth .pp-ic { position:absolute; top:16px; right:16px; z-index:3; }
.pp-card { position:relative; z-index:2; width:100%; max-width:420px; background:var(--card); border-radius:22px; padding:30px; box-shadow:0 30px 60px -30px rgba(0,0,0,.5); }
.pp-card.wide { max-width:540px; }
.pp-ident { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.pp-ident .pp-logo { background:linear-gradient(135deg,var(--ac),var(--ac-dark)); }
.pp-ident b { display:block; font-size:19px; font-weight:800; letter-spacing:-.01em; } .pp-ident small { color:var(--muted); font-size:12.5px; }
.pp-field { margin-bottom:14px; } .pp-field label { display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:6px; }
.pp-in { width:100%; height:46px; padding:0 14px; font:inherit; font-size:16px; color:var(--ink); background:var(--in-bg); border:1.5px solid var(--line); border-radius:12px; outline:none; }
.pp-in:focus { border-color:var(--ac); box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 16%,transparent); }
.pp-pw { position:relative; } .pp-pw .pp-in { padding-right:64px; }
.pp-eye { position:absolute; right:6px; top:6px; height:34px; padding:0 10px; border:0; border-radius:8px; background:var(--chip); color:var(--muted); font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.pp-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pp-sec { border:1.5px solid var(--line); border-radius:16px; padding:16px 16px 4px; margin-bottom:16px; }
.pp-sec h4 { display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:13px; font-weight:800; }
.pp-sec h4 .n { width:24px; height:24px; border-radius:50%; background:var(--ac); color:#fff; display:grid; place-items:center; font-size:12px; }
.pp-err { background:var(--err-bg); color:var(--err-fg); border:1px solid var(--err-bd); padding:11px 14px; border-radius:12px; font-size:13px; font-weight:600; margin-bottom:16px; }
.pp-links { margin-top:16px; text-align:center; font-size:13px; color:var(--muted); line-height:1.9; }
.pp-links a { font-weight:700; }
.pp-done { text-align:center; } .pp-done .tick { width:64px; height:64px; margin:0 auto 14px; border-radius:50%; background:var(--ok-bg); color:var(--ok); display:grid; place-items:center; font-size:30px; }
.pp-done h3 { margin:0 0 6px; font-size:20px; } .pp-done p { margin:0 0 20px; color:var(--muted); font-size:14px; }

@media (max-width:560px) {
  .pp-card { padding:24px 20px; } .pp-grid2 { grid-template-columns:1fr; gap:0; }
  .pp-brand b { max-width:140px; } .pp-pillbtn.hide-sm { display:none; }
  .pp-child { grid-template-columns:auto 1fr; } .pp-bal { grid-column:1 / -1; text-align:left; margin-top:6px; } .pp-btns { grid-column:1 / -1; }
  .pp-btns .pp-btn { flex:1; } .pp-acct .num { font-size:18px; }
}