/* ═══════════════════════════════════════════════════
   ADUSDC — PROFESSIONAL WHITE REDESIGN
   Font: Outfit (clean, modern, premium feel)
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --purple:       #7C3AED;
  --purple-dark:  #5B21B6;
  --purple-light: #EDE9FE;
  --purple-mid:   #A78BFA;
  --white:        #FFFFFF;
  --gray-50:      #F9FAFB;
  --gray-100:     #F3F4F6;
  --gray-200:     #E5E7EB;
  --gray-400:     #9CA3AF;
  --gray-600:     #4B5563;
  --gray-800:     #1F2937;
  --success:      #10B981;
  --warning:      #F59E0B;
  --danger:       #EF4444;
  --info:         #3B82F6;
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:    0 10px 40px rgba(124,58,237,0.12);
  --radius:       14px;
  --radius-sm:    8px;
  --radius-lg:    20px;
}

/* ── BASE ── */
* { box-sizing: border-box; }
body {
  font-family: 'Outfit', sans-serif !important;
  background: #F8F7FF !important;
  color: var(--gray-800) !important;
  line-height: 1.6;
}
a { color: var(--purple); transition: color .2s; }
a:hover { color: var(--purple-dark); text-decoration: none; }

/* ── NAVBAR ── */
.navbar {
  background: var(--white) !important;
  border-bottom: 1px solid var(--gray-200) !important;
  box-shadow: 0 2px 12px rgba(124,58,237,0.06) !important;
  padding: 12px 0 !important;
}
.navbar-brand span {
  background: linear-gradient(135deg, var(--purple), var(--purple-mid)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  letter-spacing: -0.5px;
}
.navi .nav-link {
  color: var(--gray-600) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 8px 14px !important;
  border-radius: var(--radius-sm) !important;
  transition: all .2s !important;
}
.navi .nav-link:hover {
  color: var(--purple) !important;
  background: var(--purple-light) !important;
  transform: none !important;
}
.btn-outline {
  border: 2px solid var(--purple) !important;
  color: var(--purple) !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  padding: 8px 22px !important;
  background: transparent !important;
  transition: all .2s !important;
  font-size: 14px !important;
}
.btn-outline:hover {
  background: var(--purple) !important;
  color: #fff !important;
}
.custom-toggler {
  border: 1.5px solid var(--purple) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--purple-light) !important;
}
.dropdown-menu {
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 8px !important;
}
.dropdown-item {
  color: var(--gray-600) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--purple-light) !important;
  color: var(--purple) !important;
}
.dropdown-item.active {
  background: linear-gradient(135deg, var(--purple), #6D28D9) !important;
  color: #fff !important;
}

/* ── CARDS ── */
.card {
  border-radius: var(--radius) !important;
  border: 1px solid var(--gray-200) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--white) !important;
  transition: box-shadow .2s, transform .2s !important;
}
.card:hover {
  box-shadow: var(--shadow-md) !important;
}
.card-primary {
  border-color: rgba(124,58,237,0.2) !important;
  box-shadow: 0 2px 12px rgba(124,58,237,0.07) !important;
}
.card-history {
  border-color: rgba(16,185,129,0.25) !important;
}

/* Balance card */
.card-balance {
  background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 50%, #4C1D95 100%) !important;
  border: none !important;
  box-shadow: 0 8px 32px rgba(124,58,237,0.35) !important;
  border-radius: var(--radius-lg) !important;
  color: #fff !important;
}
.card-balance .card-title { color: rgba(255,255,255,0.8) !important; font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px !important; }
.card-balance .balance-text { color: #fff !important; font-size: 28px !important; font-weight: 800 !important; }
.card-balance .btn { background: rgba(255,255,255,0.15) !important; border: 1px solid rgba(255,255,255,0.3) !important; color: #fff !important; border-radius: 50px !important; font-weight: 600 !important; padding: 10px 28px !important; transition: all .2s !important; }
.card-balance .btn:hover { background: rgba(255,255,255,0.25) !important; }

.card-deposit-balance {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%) !important;
  border: none !important;
  box-shadow: 0 6px 24px rgba(59,130,246,0.3) !important;
  border-radius: var(--radius-lg) !important;
  color: #fff !important;
}

/* ── BUTTONS ── */
.btn { font-family: 'Outfit', sans-serif !important; font-weight: 600 !important; border-radius: var(--radius-sm) !important; transition: all .2s !important; }
.btn-primary {
  background: linear-gradient(135deg, var(--purple), #6D28D9) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.3) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: linear-gradient(135deg, #6D28D9, var(--purple-dark)) !important;
  box-shadow: 0 6px 20px rgba(124,58,237,0.4) !important;
  transform: translateY(-1px);
}
.btn-primary.dep {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8) !important;
  box-shadow: 0 4px 14px rgba(59,130,246,0.3) !important;
}
.btn-primary.dep:hover { background: linear-gradient(135deg, #2563EB, #1E40AF) !important; }
.btn-success {
  background: linear-gradient(135deg, #10B981, #059669) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(16,185,129,0.25) !important;
}
.btn-success:hover { background: linear-gradient(135deg, #059669, #047857) !important; transform: translateY(-1px); }
.btn-secondary {
  background: var(--gray-200) !important;
  border: none !important;
  color: var(--gray-600) !important;
  box-shadow: none !important;
}
.btn-danger { background: linear-gradient(135deg, #EF4444, #DC2626) !important; border: none !important; }

/* ── PILLS / TABS ── */
.p-pill-btn {
  background: var(--white) !important;
  color: var(--purple) !important;
  border: 1.5px solid var(--purple-mid) !important;
  border-radius: 50px !important;
  padding: 7px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all .2s !important;
  white-space: nowrap;
  display: inline-block;
  text-decoration: none !important;
}
.p-pill-btn:hover {
  background: var(--purple-light) !important;
  color: var(--purple-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124,58,237,0.2) !important;
}
.p-pill-btn.active {
  background: linear-gradient(135deg, var(--purple), #6D28D9) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.35) !important;
}

/* Admin pills */
.nav-link.b-b:not(.active) {
  border: 1.5px solid rgba(124,58,237,0.3) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--purple) !important;
  margin: 3px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--white) !important;
}
.nav-link.b-b:not(.active):hover { background: var(--purple-light) !important; }
.p-s, .active.p-pills, .p-ss {
  background: linear-gradient(135deg, var(--purple), #6D28D9) !important;
  border-color: var(--purple) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  margin: 3px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.i-s, .active.i-pills {
  background: linear-gradient(135deg, #3B82F6, #2563EB) !important;
  border-color: #3B82F6 !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  margin: 3px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ── FORMS ── */
.form-control {
  border: 1.5px solid var(--gray-200) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--gray-800) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  background: var(--white) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.form-control:focus {
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
  color: var(--gray-800) !important;
}
.form-control::placeholder { color: var(--gray-400) !important; }
label { color: var(--gray-600) !important; font-weight: 600 !important; font-size: 13px !important; margin-bottom: 6px !important; }

/* ── BADGES ── */
.badge { border-radius: 6px !important; font-weight: 600 !important; padding: 4px 10px !important; font-size: 11px !important; }
.badge-info { background: var(--purple-light) !important; color: var(--purple) !important; }
.badge-warning { background: #FEF3C7 !important; color: #92400E !important; }
.badge-pending { background: #FEF3C7 !important; color: #92400E !important; }
.badge-send { background: #D1FAE5 !important; color: #065F46 !important; }
.badge-danger { background: #FEE2E2 !important; color: #991B1B !important; }

/* ── TABLES ── */
.table { font-size: 13px !important; }
.table thead tr th { color: var(--purple) !important; font-weight: 700 !important; border-bottom: 2px solid var(--purple-light) !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .5px; }
.table td { color: var(--gray-600) !important; vertical-align: middle !important; border-color: var(--gray-100) !important; }
.text-history { color: var(--gray-600) !important; }

/* ── ALERTS ── */
.alert-primary { background: var(--purple-light) !important; color: var(--purple-dark) !important; border-color: var(--purple-mid) !important; border-radius: var(--radius-sm) !important; }
.alert-info { background: #EFF6FF !important; color: #1D4ED8 !important; border-color: #BFDBFE !important; border-radius: var(--radius-sm) !important; }
.alert-success { background: #D1FAE5 !important; color: #065F46 !important; border-color: #6EE7B7 !important; border-radius: var(--radius-sm) !important; }
.alert-ref { background: #F0FDF4 !important; color: #166534 !important; border-color: #86EFAC !important; }

/* ── MODALS ── */
.modal-content { border-radius: var(--radius-lg) !important; border: none !important; box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important; }
.modal-header { border-bottom: 1px solid var(--gray-100) !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; padding: 20px 24px !important; }
.modal-body { padding: 24px !important; }
.modal-footer { border-top: 1px solid var(--gray-100) !important; padding: 16px 24px !important; }
.modal-title { color: var(--gray-800) !important; font-weight: 800 !important; }
button.close { color: var(--gray-400) !important; font-size: 24px !important; }

/* ── TYPOGRAPHY ── */
.text-main, .modal-title, .text-ltc {
  background: linear-gradient(135deg, var(--purple), var(--purple-mid)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.text-reward { color: var(--purple) !important; font-weight: 700 !important; font-size: 15px !important; }
.text-primary, .text-history, label { color: var(--purple) !important; }
.text-dark-main, .text-dark-p { color: var(--gray-800) !important; }
.text-ltc2 {
  background: linear-gradient(135deg, #3B82F6, #60A5FA) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.text-main, .txt-main { color: var(--purple) !important; }

/* ── HR & DIVIDERS ── */
hr { border-color: var(--gray-200) !important; }
.color-1 p, hr { color: var(--purple) !important; border-color: var(--purple-light) !important; }

/* ── TASKS PROGRESS ── */
.task-progress-wrap { background: var(--gray-100) !important; border-radius: 50px !important; height: 8px !important; margin: 10px 0 6px 0 !important; }
.task-progress-bar { height: 8px !important; border-radius: 50px !important; background: linear-gradient(90deg, var(--purple), var(--purple-mid)) !important; }
.task-progress-label { font-size: 12px !important; font-weight: 700 !important; color: var(--purple) !important; margin-bottom: 12px !important; }

/* ── PAGE SECTION ── */
.page-section { padding: 20px 0 40px !important; }

/* ── FOOTER ── */
.page-footer { background: var(--white) !important; border-top: 1px solid var(--gray-200) !important; padding: 24px 0 !important; }
.page-footer p { color: var(--gray-400) !important; font-size: 13px !important; }

/* ── SWAL ── */
.swal2-confirm { background: linear-gradient(135deg, var(--purple), #6D28D9) !important; border-radius: var(--radius-sm) !important; font-family: 'Outfit', sans-serif !important; font-weight: 600 !important; }
.swal2-popup { border-radius: var(--radius-lg) !important; font-family: 'Outfit', sans-serif !important; }

/* ── MISC ── */
.bg-main { background: linear-gradient(135deg, var(--purple), #6D28D9) !important; }
.bg-blue { background: linear-gradient(135deg, #3B82F6, #1D4ED8) !important; }
.ad-container { display: flex; justify-content: center; align-items: center; margin: auto; max-width: 468px; padding: 10px; }
code { color: #7C3AED !important; }
.balance-text { font-size: 28px !important; font-weight: 800 !important; }
#refresh { margin-left: 10px !important; cursor: pointer; opacity: 0.7; }
#refresh:hover { opacity: 1; }
.underline { text-decoration: underline !important; }
.-ml-2 { margin-left: -7px !important; }
.-mr-2 { margin-right: -7px !important; }
.-mt-1 { margin-top: -4px !important; }
.balance-text { margin-bottom: 10px !important; }
.priceData { width: 21px; height: 21px; margin-top: -3.5px; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--purple-mid); border-radius: 10px; }

/* ── INPUT GROUP ── */
.input-group-text { background: var(--gray-50) !important; border-color: var(--gray-200) !important; color: var(--purple) !important; font-weight: 700 !important; }

/* ═══════════════════════════════════
   TEXT COLOR FIXES — HIGH CONTRAST
   Yellow/faint text → dark readable
═══════════════════════════════════ */

/* Warning text: yellow → dark amber readable */
.text-warning { color: #B45309 !important; }
a.text-warning:hover { color: #92400E !important; }

/* Secondary gray text → darker */
.text-secondary { color: #374151 !important; }
p, .card-text, .card p { color: #374151 !important; }

/* Table cells */
.table td, .text-history { color: #374151 !important; }

/* Stats/numbers on cards */
.home-stat-label { color: #6B7280 !important; }

/* Task progress label */
.task-progress-label { color: #5B21B6 !important; font-weight: 700 !important; }

/* Earn label on task cards */
.text-reward { color: #5B21B6 !important; font-weight: 700 !important; font-size: 15px !important; }

/* Form labels */
label { color: #374151 !important; font-weight: 600 !important; }

/* Badge text override for warning — no more yellow text on light bg */
.badge-warning { background: #FEF3C7 !important; color: #78350F !important; font-weight: 700 !important; }
.badge-pending { background: #FEF3C7 !important; color: #78350F !important; font-weight: 700 !important; }

/* Card titles */
.card-title, h5.card-title { color: #1F2937 !important; }

/* Dropdown items */
.dropdown-item { color: #374151 !important; }

/* Nav links */
.navi .nav-link { color: #374151 !important; }

/* Alert text */
.alert-primary { color: #4C1D95 !important; font-weight: 600 !important; }
.alert-ref { color: #14532D !important; font-weight: 600 !important; }

/* Page section text */
.page-section p { color: #374151 !important; }

/* Footer text */
footer p { color: #6B7280 !important; }