/* ===== App Shell — mobile-app feel (bottom tabs, top app-bar) ===== */
html { -webkit-tap-highlight-color: transparent; }
body.app-body {
  display:block; align-items:normal; justify-content:normal;
  padding-bottom: 78px; /* room for bottom tab bar */
  -webkit-font-smoothing: antialiased;
}

.announce-bar {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  color:#fff; text-align:center; font-size:12px; padding:8px 16px;
  position:relative; z-index:5;
}

/* ---------- Top App Bar ---------- */
.app-topbar {
  position: sticky; top: 0; z-index: 30;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 18px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--card-border);
}
.app-topbar .brand-mini {
  font-size:18px; font-weight:800; text-decoration:none; display:flex; align-items:center; gap:8px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.app-topbar .right-actions { display:flex; align-items:center; gap:10px; }
.wallet-pill {
  background:#fff; border:1px solid var(--card-border); padding:7px 14px;
  border-radius:30px; font-weight:700; font-size:13px; white-space:nowrap;
  box-shadow: 0 4px 12px rgba(47,128,237,0.12);
}
.icon-btn {
  width:38px; height:38px; border-radius:50%; border:1px solid var(--card-border); background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none;
  font-size:16px; color:var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform .15s ease;
}
.icon-btn:active { transform: scale(0.92); }

/* ---------- Bottom Tab Bar (the "app" feel) ---------- */
.bottom-tabs {
  position: fixed; left:0; right:0; bottom:0; z-index: 40;
  display:flex; justify-content:space-around; align-items:center;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--card-border);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(47,128,237,0.08);
}
.bottom-tabs a {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none; color:var(--text-dim); font-size:10.5px; font-weight:600;
  padding:4px 2px; border-radius:14px; transition: color .15s ease, transform .15s ease;
  position:relative;
}
.bottom-tabs a .tab-icon { font-size:21px; line-height:1; transition: transform .15s ease; }
.bottom-tabs a.active { color: var(--primary); }
.bottom-tabs a.active .tab-icon { transform: translateY(-2px) scale(1.08); }
.bottom-tabs a.active::before {
  content:''; position:absolute; top:-9px; width:22px; height:3px; border-radius:3px;
  background: linear-gradient(90deg,var(--primary),var(--accent));
}
.bottom-tabs a:active { transform: scale(0.94); }
.bottom-tabs a.fab-center {
  margin-top:-26px;
}
.bottom-tabs a.fab-center .tab-icon {
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; font-size:24px;
  box-shadow: 0 10px 25px rgba(47,128,237,0.4); border:4px solid #fff;
}
.bottom-tabs a.fab-center { color: var(--primary); }

/* ---------- Slide-up "More" sheet (for pages that don't fit the 5 tabs) ---------- */
.more-sheet-overlay {
  display:none; position:fixed; inset:0; background:rgba(15,20,35,0.45); z-index:60;
}
.more-sheet-overlay.open { display:block; animation: fadeIn .2s ease; }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.more-sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:61;
  background:#fff; border-radius:22px 22px 0 0; padding:10px 20px calc(20px + env(safe-area-inset-bottom));
  max-height:75vh; overflow-y:auto;
  box-shadow: 0 -20px 50px rgba(0,0,0,0.2);
  animation: slideUp .25s cubic-bezier(.32,.72,0,1);
}
@keyframes slideUp { from{ transform:translateY(100%);} to{ transform:translateY(0);} }
.more-sheet .handle { width:40px; height:4px; background:#e0ecfb; border-radius:4px; margin:8px auto 16px; }
.more-sheet h3 { font-size:15px; margin-bottom:14px; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.more-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:10px; }
.more-grid a {
  display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none;
  color:var(--text); font-size:11.5px; font-weight:600; padding:12px 4px; border-radius:16px;
  transition: background .15s ease;
}
.more-grid a:active { background: rgba(47,128,237,0.08); }
.more-grid a .mg-icon {
  width:48px; height:48px; border-radius:16px; background:#f2f7ff; display:flex; align-items:center;
  justify-content:center; font-size:22px;
}
.more-sheet .logout-row { text-align:center; padding-top:10px; border-top:1px solid var(--card-border); margin-top:10px; }
.more-sheet .logout-row a { color:var(--danger); text-decoration:none; font-weight:700; font-size:13px; }

/* ---------- App-style page content ---------- */
.page-wrap { max-width:640px; margin:0 auto; padding:16px 16px 30px; position:relative; z-index:1; }
.card {
  background: var(--card-bg); border:1px solid var(--card-border); border-radius:18px;
  padding:20px; backdrop-filter:blur(6px); margin-bottom:14px; animation:cardIn .4s ease forwards; opacity:1;
  box-shadow: var(--shadow);
}

.grid-3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px; }
.pill-btn {
  display:inline-block; padding:12px 22px; border-radius:14px; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; font-weight:700;
  text-decoration:none; font-size:14px; box-shadow:0 8px 20px rgba(47,128,237,0.3); transition:.15s;
}
.pill-btn:active { transform:scale(0.97); }
.pill-btn.outline { background:transparent; color:var(--primary); border:1px solid var(--card-border); box-shadow:none; }

table.app-table { width:100%; border-collapse:collapse; font-size:13.5px; }
table.app-table th { text-align:left; color:var(--text-dim); padding:9px; border-bottom:1px solid var(--card-border); font-weight:700; font-size:11.5px; text-transform:uppercase; }
table.app-table td { padding:10px 9px; border-bottom:1px solid #f0f4fa; }

.badge { padding:4px 11px; border-radius:20px; font-size:11px; font-weight:700; display:inline-block; }
.badge-pending,.badge-open { background:rgba(245,158,11,0.12); color:#b45309; }
.badge-processing,.badge-answered { background:rgba(0,180,216,0.12); color:#0891b2; }
.badge-completed,.badge-approved { background:rgba(22,163,74,0.12); color:#15803d; }
.badge-cancelled,.badge-rejected { background:rgba(239,68,68,0.12); color:#b91c1c; }
.badge-partial { background:rgba(155,89,182,0.12); color:#7e22ce; }
.badge-closed { background:rgba(107,119,133,0.12); color:#6b7785; }

.copy-box {
  display:flex; align-items:center; gap:10px; background:#f7fafe;
  border:1px solid var(--card-border); border-radius:14px; padding:12px 14px; font-size:13.5px;
}
.copy-box button { background:var(--primary); border:none; color:#fff; padding:8px 14px; border-radius:10px; cursor:pointer; font-size:12px; font-weight:700; }

/* WhatsApp float sits above the bottom tabs now */
.wa-float {
  position:fixed; bottom:92px; right:18px; z-index:35;
  width:52px; height:52px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 25px rgba(37,211,102,0.5); text-decoration:none;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow:0 10px 25px rgba(37,211,102,0.5); }
  50% { box-shadow:0 10px 35px rgba(37,211,102,0.8); }
}

/* Desktop: keep it centered like a phone frame so it still feels app-like on big screens */
@media (min-width: 720px) {
  .page-wrap { max-width:640px; }
}