/* ==========================================================================
   AdaWang Design System — Global Portal UI
   Modern · Clean · Consistent · Accessible contrast
   ========================================================================== */

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

:root{
  --aw-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --aw-bg: #F9FAFB;
  --aw-surface: #FFFFFF;
  --aw-text: #111827;
  --aw-text-2: #374151;
  --aw-muted: #6B7280;
  --aw-border: #E5E7EB;
  --aw-border-soft: #F3F4F6;
  --aw-primary: #0D9488;
  --aw-primary-dark: #0F766E;
  --aw-primary-soft: #CCFBF1;
  --aw-accent: #F0B90B;
  --aw-danger: #DC2626;
  --aw-success: #059669;
  --aw-info: #2563EB;
  --aw-radius: 16px;
  --aw-radius-sm: 12px;
  --aw-radius-pill: 999px;
  --aw-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
  --aw-shadow-hover: 0 12px 28px rgba(17, 24, 39, 0.10);
  --aw-space: 16px;
}

/* ----- Base ----- */
html{scroll-behavior:smooth}
body.customer-portal-body,
body.aw-lite,
body.lang-ms{
  margin:0 !important;
  background: var(--aw-bg) !important;
  color: var(--aw-text) !important;
  font-family: var(--aw-font) !important;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
body.customer-portal-body *,
body.aw-lite *{ box-sizing: border-box; }

/* Global readable text — kill transparent / white-on-white */
body.customer-portal-body,
body.customer-portal-body p,
body.customer-portal-body span,
body.customer-portal-body li,
body.customer-portal-body td,
body.customer-portal-body th,
body.customer-portal-body label,
body.customer-portal-body .muted,
body.customer-portal-body .text-muted,
body.customer-portal-body .helper,
body.customer-portal-body small{
  color: var(--aw-text-2) !important;
  -webkit-text-fill-color: var(--aw-text-2) !important;
  opacity: 1 !important;
}
body.customer-portal-body h1,
body.customer-portal-body h2,
body.customer-portal-body h3,
body.customer-portal-body h4,
body.customer-portal-body h5,
body.customer-portal-body .page-title,
body.customer-portal-body .section-title,
body.customer-portal-body .card-title,
body.customer-portal-body strong,
body.customer-portal-body b{
  color: var(--aw-text) !important;
  -webkit-text-fill-color: var(--aw-text) !important;
  font-weight: 700 !important;
}
body.customer-portal-body .muted,
body.customer-portal-body .text-muted,
body.customer-portal-body .stat-label,
body.customer-portal-body .eyebrow,
body.customer-portal-body .caption{
  color: var(--aw-muted) !important;
  -webkit-text-fill-color: var(--aw-muted) !important;
  font-weight: 500 !important;
}

/* Sidebar keeps light text on dark */
body.customer-portal-body .portal-sidebar,
body.customer-portal-body .portal-sidebar a,
body.customer-portal-body .side-nav a,
body.customer-portal-body .portal-sidebar .nav-link,
body.customer-portal-body .portal-sidebar span,
body.customer-portal-body .portal-sidebar small{
  color: #E5E7EB !important;
  -webkit-text-fill-color: #E5E7EB !important;
}
body.customer-portal-body .portal-sidebar a.active,
body.customer-portal-body .portal-sidebar .nav-link.active{
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: rgba(13,148,136,.25) !important;
}

/* ----- Cards ----- */
body.customer-portal-body .card,
body.customer-portal-body .panel,
body.customer-portal-body .stat-card,
body.customer-portal-body .portal-card,
body.customer-portal-body .wallet-panel,
body.customer-portal-body .loan-card,
body.customer-portal-body .info-card,
body.customer-portal-body .section-card{
  background: var(--aw-surface) !important;
  border: 1px solid var(--aw-border) !important;
  border-radius: var(--aw-radius) !important;
  box-shadow: var(--aw-shadow) !important;
  color: var(--aw-text) !important;
}
body.customer-portal-body .card-pad{ padding: 20px !important; }

/* ----- Buttons ----- */
body.customer-portal-body .btn,
body.customer-portal-body a.btn,
body.customer-portal-body button.btn,
body.customer-portal-body input[type="submit"].btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
  border-radius: var(--aw-radius-sm) !important;
  font-family: var(--aw-font) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
  border: 1.5px solid transparent !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
  text-decoration: none !important;
}
body.customer-portal-body .btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--aw-shadow-hover) !important;
}
body.customer-portal-body .btn-primary,
body.customer-portal-body .btn.primary,
body.customer-portal-body .btn-teal,
body.customer-portal-body .btn-success{
  background: linear-gradient(135deg, var(--aw-primary) 0%, var(--aw-primary-dark) 100%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: transparent !important;
}
body.customer-portal-body .btn.outline,
body.customer-portal-body .btn-outline,
body.customer-portal-body .btn-secondary{
  background: #FFFFFF !important;
  color: var(--aw-primary-dark) !important;
  -webkit-text-fill-color: var(--aw-primary-dark) !important;
  border-color: #99F6E4 !important;
}
body.customer-portal-body .btn.outline:hover{
  background: #F0FDFA !important;
}
body.customer-portal-body .btn-danger{
  background: #FEE2E2 !important;
  color: var(--aw-danger) !important;
  -webkit-text-fill-color: var(--aw-danger) !important;
  border-color: #FECACA !important;
}

/* ----- Forms ----- */
body.customer-portal-body input:not([type="checkbox"]):not([type="radio"]),
body.customer-portal-body select,
body.customer-portal-body textarea{
  width: 100%;
  min-height: 44px;
  padding: 10px 14px !important;
  border-radius: var(--aw-radius-sm) !important;
  border: 1px solid var(--aw-border) !important;
  background: #FFFFFF !important;
  color: var(--aw-text) !important;
  -webkit-text-fill-color: var(--aw-text) !important;
  font-family: var(--aw-font) !important;
  font-size: 0.95rem !important;
}
body.customer-portal-body input::placeholder,
body.customer-portal-body textarea::placeholder{
  color: #9CA3AF !important;
  -webkit-text-fill-color: #9CA3AF !important;
  opacity: 1 !important;
}
body.customer-portal-body label{
  font-weight: 600 !important;
  color: var(--aw-text) !important;
  -webkit-text-fill-color: var(--aw-text) !important;
  margin-bottom: 6px;
}

/* ----- Status badges ----- */
body.customer-portal-body .status,
body.customer-portal-body .badge{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--aw-radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
}

/* ==========================================================================
   WALLET PAGE — specific cards
   ========================================================================== */

/* Hero / network card (green AdaWang wallet) */
body.customer-portal-body .p2p-network-card,
body.customer-portal-body .wallet-balance-card.wallet-main,
body.customer-portal-body .wallet-hero-green,
body.customer-portal-body .p2p-wallet-hero .p2p-network-card{
  background: linear-gradient(145deg, #14B8A6 0%, #0D9488 45%, #0F766E 100%) !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(13, 148, 136, 0.28) !important;
  color: #FFFFFF !important;
  padding: 22px 22px !important;
}
body.customer-portal-body .p2p-network-card *,
body.customer-portal-body .p2p-network-card p,
body.customer-portal-body .p2p-network-card span,
body.customer-portal-body .p2p-network-card strong,
body.customer-portal-body .p2p-network-card small,
body.customer-portal-body .p2p-network-card h2,
body.customer-portal-body .p2p-network-card h3,
body.customer-portal-body .p2p-network-card .muted{
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Available balance — deep blue elegant */
body.customer-portal-body .wallet-balance-card,
body.customer-portal-body .balance-card,
body.customer-portal-body .available-balance-card,
body.customer-portal-body [class*="available-balance"],
body.customer-portal-body .wallet-panel .balance-hero{
  background: linear-gradient(145deg, #1E3A8A 0%, #1D4ED8 50%, #1E40AF 100%) !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(30, 64, 175, 0.25) !important;
  color: #FFFFFF !important;
}
body.customer-portal-body .wallet-balance-card *,
body.customer-portal-body .wallet-balance-card p,
body.customer-portal-body .wallet-balance-card span,
body.customer-portal-body .wallet-balance-card strong,
body.customer-portal-body .wallet-balance-card small,
body.customer-portal-body .wallet-balance-card .muted,
body.customer-portal-body .wallet-balance-card h2,
body.customer-portal-body .wallet-balance-card h3{
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* White panels: Pusat Wallet & Tindakan */
body.customer-portal-body .wallet-page .card,
body.customer-portal-body .wallet-page .wallet-panel,
body.customer-portal-body .wallet-page .card-pad{
  background: #FFFFFF !important;
  color: #333333 !important;
}
body.customer-portal-body .wallet-page .card h2,
body.customer-portal-body .wallet-page .card h3,
body.customer-portal-body .wallet-page .card h4,
body.customer-portal-body .wallet-page .card strong,
body.customer-portal-body .wallet-page .card p,
body.customer-portal-body .wallet-page .card span,
body.customer-portal-body .wallet-page .card label{
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
}
body.customer-portal-body .wallet-page .card .muted,
body.customer-portal-body .wallet-page .card small{
  color: #6B7280 !important;
  -webkit-text-fill-color: #6B7280 !important;
}

/* History lists */
body.customer-portal-body .wallet-history,
body.customer-portal-body .wallet-row,
body.customer-portal-body .wl-item{
  border-color: var(--aw-border-soft) !important;
}
body.customer-portal-body .wallet-row,
body.customer-portal-body .wl-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px !important;
  border-bottom: 1px solid var(--aw-border-soft) !important;
  background: transparent !important;
}
body.customer-portal-body .wallet-row:last-child,
body.customer-portal-body .wl-item:last-child{ border-bottom: none !important; }
body.customer-portal-body .wallet-amount{
  font-weight: 800 !important;
  color: var(--aw-success) !important;
  -webkit-text-fill-color: var(--aw-success) !important;
}
body.customer-portal-body .wallet-amount.debit{
  color: var(--aw-danger) !important;
  -webkit-text-fill-color: var(--aw-danger) !important;
}

/* Icon soft circles */
body.customer-portal-body .icon-circle,
body.customer-portal-body .action-icon,
body.customer-portal-body .menu-icon-wrap{
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--aw-primary-soft) !important;
  color: var(--aw-primary-dark) !important;
}

/* ----- Tables ----- */
body.customer-portal-body table{
  width: 100%;
  border-collapse: collapse;
}
body.customer-portal-body table th{
  color: var(--aw-muted) !important;
  -webkit-text-fill-color: var(--aw-muted) !important;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--aw-border);
}
body.customer-portal-body table td{
  color: var(--aw-text-2) !important;
  -webkit-text-fill-color: var(--aw-text-2) !important;
  padding: 12px;
  border-bottom: 1px solid var(--aw-border-soft);
}

/* ----- Layout spacing ----- */
body.customer-portal-body .portal-main{
  padding: 20px 16px 40px !important;
}
body.customer-portal-body .portal-flow > * + *{
  margin-top: 16px;
}
@media (min-width: 901px){
  body.customer-portal-body .portal-main{
    padding: 28px 28px 48px !important;
  }
}

/* ----- Mobile ----- */
@media (max-width: 900px){
  body.customer-portal-body .card,
  body.customer-portal-body .panel,
  body.customer-portal-body .wallet-balance-card,
  body.customer-portal-body .p2p-network-card{
    border-radius: 16px !important;
  }
  body.customer-portal-body .btn{ width: 100%; }
  body.customer-portal-body .wallet-row{
    flex-wrap: wrap;
  }
}

/* Auth pages stay clean */
body.auth-page{
  background: linear-gradient(180deg, #F9FAFB 0%, #EEF2FF 100%) !important;
}