@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── ASU Design Tokens ── */
:root {
  --blue:       #185FA5;
  --blue-light: #378ADD;
  --blue-bg:    #E6F1FB;
  --blue-hover: #0D4A87;
  --green:      #1D9E75;
  --red:        #E24B4A;
  --bg:         #F5F6F8;
  --card:       #FFFFFF;
  --border:     #E0E0E0;
  --border-light: #F0F0F0;
  --text:       #1A1A2E;
  --muted:      #666666;
  --subtle:     #AAAAAA;
  --shadow:     0 2px 12px rgba(0,0,0,0.07);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.06);
  --radius:     12px;
  --radius-lg:  16px;
  --radius-sm:  8px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ── Screens ── */
.screen{display:none}
.screen.active{display:flex}

/* ── Login ── */
#login-screen{min-height:100vh;align-items:center;justify-content:center;padding:24px;flex-direction:column;background:var(--bg)}
.login-box{
  background:var(--card);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  padding:36px 32px;
  width:100%;max-width:400px;
  box-shadow:var(--shadow);
}
.school-logo{width:56px;height:56px;background:var(--blue-bg);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.school-logo svg{width:28px;height:28px}
.login-title{font-size:22px;font-weight:700;margin-bottom:6px;color:var(--text)}
.login-sub{font-size:14px;color:var(--muted);margin-bottom:28px}
.field-label{font-size:11px;color:var(--muted);margin-bottom:6px;letter-spacing:0.6px;text-transform:uppercase;font-weight:500}
.inp{
  width:100%;padding:12px 14px;font-size:15px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  outline:none;transition:border-color 0.2s;
  color:var(--text);background:var(--card);
  margin-bottom:4px;font-family:'Inter',sans-serif;
}
.inp:focus{border-color:var(--blue)}
.inp-group{margin-bottom:16px}
.btn-primary{
  width:100%;padding:13px;font-size:15px;font-weight:600;
  color:#fff;background:var(--blue);
  border:none;border-radius:var(--radius-sm);
  cursor:pointer;transition:background 0.2s;
  margin-top:4px;font-family:'Inter',sans-serif;
  letter-spacing:0.2px;
}
.btn-primary:hover{background:var(--blue-hover)}
.btn-primary:disabled{background:#aaa;cursor:not-allowed}
.btn-ghost{
  width:100%;padding:11px;font-size:14px;font-weight:500;
  color:var(--blue);background:transparent;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);cursor:pointer;
  margin-top:8px;display:none;transition:all 0.2s;
  font-family:'Inter',sans-serif;
}
.btn-ghost:hover{border-color:var(--blue);background:var(--blue-bg)}
.err-msg{font-size:13px;color:var(--red);margin:8px 0;display:none}
.countdown{font-size:12px;color:var(--subtle);text-align:center;margin-top:10px;min-height:18px}
.step{display:none}
.step.active{display:block}

/* ── Student mode ── */
body.student-mode .sidebar{display:none !important}
body.student-mode .mobile-child-bar{display:none !important}
body.student-mode .dash-body{display:flex !important;justify-content:center;padding:24px 16px}
body.student-mode .dash-inner{max-width:720px;width:100%}
body.student-mode .main-content{max-width:720px;width:100%;padding-top:0}

/* ── Role selector ── */
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}
.role-card{
  border:1.5px solid var(--border);
  border-radius:var(--radius);padding:20px 12px;
  text-align:center;cursor:pointer;
  transition:all 0.15s;background:var(--card);
}
.role-card:hover{border-color:var(--blue);background:var(--blue-bg)}
.role-card:active{background:var(--blue-bg)}
.role-icon{font-size:32px;margin-bottom:8px}
.role-label{font-size:15px;font-weight:600;color:var(--text);margin-bottom:4px}
.role-sub{font-size:11px;color:var(--subtle)}

/* ── Google button ── */
.btn-google{
  width:100%;padding:12px;font-size:15px;font-weight:500;
  color:var(--text);background:var(--card);
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  gap:10px;transition:all 0.2s;margin-top:4px;font-family:'Inter',sans-serif;
}
.btn-google:hover{background:#f5f5f5;border-color:#aaa}
.back-link{font-size:13px;color:var(--muted);cursor:pointer;margin-bottom:20px;display:flex;align-items:center;gap:4px}

/* ── Dashboard ── */
#dash-screen{min-height:100vh;flex-direction:column}
.topbar{
  background:var(--card);
  border-bottom:1px solid var(--border);
  padding:0 24px;height:64px;
  display:flex;align-items:center;justify-content:center;
  position:sticky;top:0;z-index:10;
  box-shadow:var(--shadow-sm);
}

/* ── Skeleton loaders ── */
@keyframes shimmer {
  0%   { background-position: -600px 0 }
  100% { background-position:  600px 0 }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 24px;
  margin-bottom: 16px;
  width: 100%;
  box-shadow: var(--shadow-sm);
}
.skeleton-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.skeleton-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-line {
  height: 14px;
  border-radius: 6px;
}
.skeleton-photo {
  width: 200px; height: 200px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

/* ── Fade-in animation for content ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp 0.22s ease-out both;
}
.fade-up-1 { animation-delay: 0.04s }
.fade-up-2 { animation-delay: 0.08s }
.fade-up-3 { animation-delay: 0.12s }

/* ── Empty state ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 8px;
}
.empty-state-icon {
  font-size: 40px;
  margin-bottom: 8px;
  opacity: 0.5;
}
.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.empty-state-sub {
  font-size: 13px;
  color: var(--subtle);
  max-width: 240px;
  line-height: 1.5;
}
.topbar-inner{width:100%;max-width:1280px;display:flex;align-items:center;justify-content:space-between}
.topbar-title{font-size:17px;font-weight:700;color:var(--text);letter-spacing:-0.2px}
.logout-btn{
  font-size:13px;font-weight:500;color:var(--muted);
  background:none;border:none;cursor:pointer;
  padding:8px 12px;border-radius:var(--radius-sm);
  font-family:'Inter',sans-serif;transition:all 0.15s;
}
.logout-btn:hover{background:var(--bg);color:var(--text)}

.dash-body{display:flex;flex:1;min-height:calc(100vh - 64px);justify-content:center}
.dash-inner{display:flex;width:100%;max-width:1280px}

/* ── Sidebar ── */
.sidebar{
  width:260px;background:var(--card);
  border-right:1px solid var(--border);
  padding:20px 0;flex-shrink:0;
}
.sidebar-label{
  font-size:11px;font-weight:600;
  color:var(--subtle);letter-spacing:0.8px;
  padding:0 20px;margin-bottom:10px;text-transform:uppercase;
}
.child-item{
  display:flex;align-items:center;gap:12px;
  padding:13px 20px;cursor:pointer;
  transition:background 0.15s;
  border-left:3px solid transparent;
}
.child-item:hover{background:var(--bg)}
.child-item.active{background:var(--blue-bg);border-left-color:var(--blue)}
.child-avatar{
  width:46px;height:46px;border-radius:50%;
  background:var(--blue-bg);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:600;color:var(--blue);overflow:hidden;
}
.child-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.child-info{min-width:0}
.child-name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.child-class{font-size:13px;color:var(--muted)}

/* ── Main content ── */
.main-content{
  flex:1;padding:28px 32px;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;
}
.main-content > *{width:100%}

/* ── Tab bar ── */
.tab-bar{
  display:flex;gap:4px;margin-bottom:24px;
  background:var(--bg);border-radius:var(--radius);
  border:1px solid var(--border);
  padding:4px;width:100%;
}
.tab{
  flex:1;padding:11px;text-align:center;
  font-size:15px;font-weight:500;color:var(--muted);
  border-radius:var(--radius-sm);cursor:pointer;
  transition:all 0.15s;border:none;background:transparent;
  font-family:'Inter',sans-serif;
}
.tab.active{
  background:var(--card);color:var(--text);font-weight:600;
  box-shadow:var(--shadow-sm);border:1px solid var(--border);
}
.tab-content{display:none;width:100%}
.tab-content.active{display:block}

/* ── Profile card ── */
.profile-card{
  background:var(--card);border-radius:var(--radius-lg);
  border:1px solid var(--border);padding:24px;
  display:flex;gap:24px;align-items:flex-start;
  margin-bottom:16px;width:100%;
  box-shadow:var(--shadow-sm);
}
.profile-photo{
  width:200px;height:200px;border-radius:var(--radius-lg);
  background:var(--blue-bg);display:flex;align-items:center;
  justify-content:center;font-size:60px;font-weight:600;
  color:var(--blue);overflow:hidden;flex-shrink:0;
}
.profile-photo img{width:100%;height:100%;object-fit:cover;border-radius:14px}
.profile-details{flex:1;min-width:0}
.profile-name{font-size:22px;font-weight:700;margin-bottom:3px;color:var(--text)}
.profile-class{font-size:14px;color:var(--muted);margin-bottom:16px}
.profile-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pf-label{font-size:11px;color:var(--subtle);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:3px;font-weight:500}
.pf-value{font-size:18px;font-weight:600;color:var(--text)}

/* ── Balance cards ── */
.balance-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;width:100%}
.stat-card{
  background:var(--card);border-radius:var(--radius);
  border:1px solid var(--border);padding:20px;
  box-shadow:var(--shadow-sm);
}
.stat-label{font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:500;text-transform:uppercase;letter-spacing:0.4px}
.stat-value{font-size:28px;font-weight:700}
.stat-value.green{color:var(--green)}
.stat-value.red{color:var(--red)}

/* ── Today's transactions ── */
.today-section{
  background:var(--card);border-radius:var(--radius-lg);
  border:1px solid var(--border);overflow:hidden;
  width:100%;margin-bottom:16px;box-shadow:var(--shadow-sm);
}
.today-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 22px;border-bottom:1px solid var(--border-light);
  font-size:15px;font-weight:600;color:var(--text);
}
.today-body{}

/* ── Top-up form ── */
.topup-card{
  background:var(--card);border-radius:var(--radius-lg);
  border:1px solid var(--border);padding:24px;
  margin-bottom:18px;width:100%;box-shadow:var(--shadow-sm);
}
.section-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.6px;margin-bottom:14px;font-weight:600}
.amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.chip{
  padding:13px;text-align:center;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:15px;font-weight:500;cursor:pointer;
  transition:all 0.15s;background:var(--card);
  font-family:'Inter',sans-serif;
}
.chip:hover,.chip.selected{border-color:var(--blue);background:var(--blue-bg);color:var(--blue)}

/* ── Transactions ── */
.txn-card{
  background:var(--card);border-radius:var(--radius-lg);
  border:1px solid var(--border);overflow:hidden;
  width:100%;box-shadow:var(--shadow-sm);
}
.txn-header{padding:16px 22px;border-bottom:1px solid var(--border-light);font-size:15px;font-weight:600;color:var(--text)}
.txn-row{display:flex;justify-content:space-between;align-items:center;padding:15px 22px;border-bottom:1px solid var(--border-light)}
.txn-row:last-child{border-bottom:none}
.txn-row-clickable{cursor:pointer}
.txn-row-clickable:hover{background:var(--bg)}
.txn-label-text{font-size:15px;font-weight:700;color:var(--text)}
.txn-items-text{font-size:13px;color:var(--text);opacity:.7;margin-top:3px;font-weight:500}
.txn-date-text{font-size:11px;font-weight:600;color:var(--text);margin-top:5px;display:inline-block;background:var(--surface2);border:1px solid var(--border);padding:2px 9px;border-radius:20px;line-height:1.6}
.txn-right{text-align:right;flex-shrink:0}
.txn-amt{font-size:16px;font-weight:700}
.txn-amt.credit{color:var(--green)}
.txn-amt.debit{color:var(--red)}
.txn-bal{font-size:12px;color:var(--subtle);margin-top:2px}
.txn-empty{padding:40px;text-align:center;color:var(--subtle);font-size:15px}
.loading-msg{padding:32px;text-align:center;color:var(--subtle);font-size:15px}

/* ── Topup history ── */
.topup-history-card{
  background:var(--card);border-radius:var(--radius-lg);
  border:1px solid var(--border);overflow:hidden;
  width:100%;margin-top:18px;box-shadow:var(--shadow-sm);
}
.topup-history-header{padding:16px 22px;border-bottom:1px solid var(--border-light);font-size:15px;font-weight:600;color:var(--text)}
.topup-row{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--border-light)}
.topup-row:last-child{border-bottom:none}
.topup-date{font-size:14px;color:var(--text);font-weight:500}
.topup-sub{font-size:12px;color:var(--subtle);margin-top:2px}
.topup-amt{font-size:16px;font-weight:600;color:var(--text)}
.topup-amt-paid{font-size:16px;font-weight:600;color:var(--green)}
.topup-amt-pending{font-size:16px;font-weight:600;color:#E65100}
.topup-amt-failed{font-size:16px;font-weight:600;color:var(--subtle);text-decoration:line-through}
.topup-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;margin-top:4px}
.topup-badge.paid{background:rgba(29,158,117,.1);color:var(--green)}
.topup-badge.pending{background:rgba(255,152,0,.1);color:#E65100}
.topup-badge.expired{background:rgba(150,150,150,.1);color:#999}
.topup-empty{padding:24px;text-align:center;color:var(--subtle);font-size:14px}

/* ── School badge ── */
.school-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;vertical-align:middle;margin-left:4px;letter-spacing:0.3px}
.school-badge.ss{background:var(--blue-bg);color:var(--blue)}
.school-badge.es{background:#EAF3DE;color:#3B6D11}

/* ── QR section ── */
.qr-section{text-align:center;padding:24px 0;display:none;width:100%}
.qr-amount-row{margin-bottom:4px}
.qr-amount-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;font-weight:600}
.qr-amount-val{font-size:36px;font-weight:700;color:var(--text)}
.qr-student-row{font-size:14px;color:var(--muted);margin-bottom:18px}
.qr-section img{width:240px;height:240px;border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px}
.qr-note{font-size:14px;color:var(--muted);margin-top:10px}
.qr-timer{font-size:14px;color:var(--subtle);margin-top:6px;font-weight:600;font-variant-numeric:tabular-nums}
.qr-status{font-size:14px;color:var(--green);margin-top:8px;font-weight:600}

/* ── Success screen ── */
.success-screen{text-align:center;padding:40px 20px;display:none;width:100%}
.success-icon{width:60px;height:60px;background:#EAF3DE;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:30px;color:var(--green)}
.success-title{font-size:22px;font-weight:700;margin-bottom:8px;color:var(--text)}
.success-detail{font-size:15px;color:var(--muted)}

/* ── Transaction breakdown ── */
.txn-breakdown{background:#F8FAFC;border-bottom:1px solid var(--border-light);padding:0 22px 12px}
.txn-bd-header{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:8px;padding:10px 0 7px;font-size:11px;color:var(--subtle);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);font-weight:600}
.txn-bd-header span:nth-child(1){text-align:left}
.txn-bd-header span:nth-child(2){text-align:center}
.txn-bd-header span:nth-child(3){text-align:right}
.txn-bd-header span:nth-child(4){text-align:right}
.txn-bd-header span:nth-child(5){text-align:right}
.txn-bd-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:8px;padding:11px 0;border-bottom:1px solid var(--border-light);font-size:14px;align-items:center}
.txn-bd-row:last-child{border-bottom:none}
.txn-bd-returned{opacity:.4;text-decoration:line-through}
.txn-bd-qty{color:var(--muted);text-align:center}
.txn-bd-price{text-align:right;color:var(--red);font-weight:600}
.txn-bd-total{text-align:right;font-weight:700;color:var(--text)}
.txn-bd-time{text-align:right;color:var(--subtle);font-size:13px}

/* ── Deep link bank buttons ── */
#deeplink-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:400px;margin:0 auto}
.deeplink-btn{
  display:flex;flex-direction:column;align-items:center;
  gap:8px;padding:14px 8px;background:var(--card);
  border:1.5px solid var(--border);border-radius:var(--radius);
  text-decoration:none;color:var(--text);
  font-size:12px;font-weight:600;text-align:center;
  line-height:1.3;transition:all 0.15s;overflow:hidden;
  font-family:'Inter',sans-serif;
}
.deeplink-btn:active{background:var(--blue-bg);border-color:var(--blue)}
.deeplink-logo{
  width:68px !important;height:68px !important;
  min-width:68px;min-height:68px;max-width:68px;max-height:68px;
  border-radius:14px;object-fit:contain;
  background:#f5f5f5;padding:4px;flex-shrink:0;display:block;
}

/* ── Mobile bottom nav ── */
.bottom-nav{display:none}

/* ── Responsive ── */
@media(max-width:640px){
  .sidebar{display:none}
  .dash-body{flex-direction:column}
  .dash-inner{flex-direction:column;max-width:100%}
  .main-content{padding:14px 14px calc(106px + env(safe-area-inset-bottom));align-items:stretch}
  .main-content > *{max-width:100%}
  .tab-bar{display:none}

  /* Topbar NOT sticky on mobile — scrolls with content */
  .topbar{
    position:relative;
    top:auto;
  }

  /* Bottom nav — ASU blue-toned background */
  .bottom-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;
    background:#EBF3FB;
    border-top:1.5px solid #C5DCF0;
    z-index:20;
    height:calc(90px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -4px 20px rgba(24,95,165,0.10);
  }
  .bn-item{
    flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:5px;cursor:pointer;
    font-size:12px;font-weight:600;color:#7AADD4;
    border:none;background:none;transition:color 0.15s;padding:0 0 6px;
    font-family:'Inter',sans-serif;
  }
  .bn-item.active{color:var(--blue)}
  .bn-icon{font-size:28px;line-height:1}

  /* Mobile child strip — NOT sticky, scrolls with content */
  .mobile-child-bar{
    display:flex;gap:0;padding:0 8px;
    background:var(--card);border-bottom:1.5px solid var(--border);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    justify-content:center;
    flex-wrap:wrap;
    overflow-x:auto;
    position:relative;
    top:auto;
    z-index:auto;
    box-shadow:0 2px 8px rgba(24,95,165,0.06);
  }
  .mobile-child-bar::-webkit-scrollbar{display:none}
  .mobile-child-chip{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    cursor:pointer;flex-shrink:0;
    padding:10px 14px 0;
    border-bottom:3px solid transparent;
    border-radius:0;
    transition:background 0.15s, border-color 0.15s;
  }
  .mobile-child-chip.active{
    background:var(--blue-bg);
    border-bottom-color:var(--blue);
  }
  .mobile-child-chip .child-avatar{
    width:48px;height:48px;font-size:16px;
    border:2px solid transparent;
    transition:border-color 0.15s;
  }
  .mobile-child-chip.active .child-avatar{
    border-color:var(--blue);
  }
  .mobile-child-chip span{
    font-size:11px;color:var(--muted);
    max-width:72px;text-align:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-weight:500;padding-bottom:8px;
  }
  .mobile-child-chip.active span{
    color:var(--blue);font-weight:700;
  }

  /* Profile */
  .profile-card{flex-direction:column;align-items:center;text-align:center;padding:20px 16px}
  .profile-photo{width:160px;height:160px;border-radius:14px}
  .profile-name{font-size:22px}
  .profile-details{width:100%}
  .profile-class{text-align:center}
  .profile-fields{grid-template-columns:1fr 1fr;width:100%;gap:12px}
  .pf-label{font-size:11px}
  .pf-value{font-size:17px}
  .balance-row{grid-template-columns:1fr 1fr;width:100%}
  .amount-grid{grid-template-columns:repeat(3,1fr)}
  .txn-bd-header,.txn-bd-row{grid-template-columns:2fr 1fr 1fr 1fr 1fr;font-size:12px}
  .topbar{padding:0 14px;height:56px}
  .topbar-title{font-size:15px}
  #deeplink-buttons{max-width:100%;grid-template-columns:repeat(3,1fr)}
}