/* ============================
   NOTIFICATION DOT BASE FIX
============================ */
.viewDeposit,
.viewWithdraw {
  position: relative;
  overflow: visible;
}

/* the red dot */
.notif-dot {
  position: absolute;
  top: -3px;
  right: -3px;

  width: 10px;
  height: 10px;

  background: #ef4444;
  border-radius: 50%;

  border: 2px solid #fff;

  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);

  animation: pulseDot 1.3s infinite;
}

/* pulse animation */
@keyframes pulseDot {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#treasuryVerifyBtn {
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 600;
}

.premium-error-toast {
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: 13px;
  letter-spacing: 0.2px;
}

.swal2-toast .swal2-title {
  font-weight: 600;
}

.swal2-toast .swal2-html-container {
  font-size: 12px;
  opacity: 0.9;
}

.premium-success-toast {
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: 13px;
  letter-spacing: 0.2px;
}

.swal2-toast .swal2-title {
  font-weight: 600;
}

.kpi-card {
  border-radius: 14px;
  transition: 0.3s ease;
}

.kpi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* ================= CHART ANIMATION ================= */
.chart-card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 18px;
  padding: 16px;

  /* start hidden */
  opacity: 0;
  transform: translateY(20px);

  animation: fadeUp 0.6s ease forwards;
}

/* stagger effect */
.chart-card:nth-child(1) {
  animation-delay: 0.1s;
}
.chart-card:nth-child(2) {
  animation-delay: 0.2s;
}
.chart-card:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= BAR CHART STYLE ================= */
#barChartContainer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bar-label {
  width: 120px;
  font-size: 12px;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  flex: 1;
  height: 22px;
  background: #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 8px;
  background: linear-gradient(90deg, #60a5fa, #3b82f6);

  display: flex;
  align-items: center;
  justify-content: flex-end;

  padding-right: 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;

  transition: width 1.2s ease-in-out;
}

.summary-card {
  position: relative;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  padding: 22px 22px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* glowing accent strip */
.summary-accent {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  /* background: linear-gradient(180deg, #fbbf24, #f59e0b); */
}

/* content spacing */
.summary-content {
  z-index: 2;
}

/* label */
.summary-label {
  font-size: 13px;
  opacity: 0.85;
}

/* main value */
.summary-value {
  font-size: 28px;
  font-weight: 800;
  margin-top: 4px;
}

/* note */
.summary-note {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 4px;
}

/* icon bubble */
.summary-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.badge-pending {
  background: orange;
  color: #fff;
}

.badge-verified {
  background: green;
  color: #fff;
}

.badge-recommended {
  background: purple;
  color: #fff;
}

.badge-approved {
  background: blue;
  color: #fff;
}

.badge-rejected {
  background: red;
  color: #fff;
}

.badge-inactive {
  background: gray;
  color: #fff;
}

.choices__inner,
.choices__input,
.choices__list--dropdown {
  color: #111 !important;
  background: #fff !important;
}

.choices__input {
  opacity: 1 !important;
  color: #111 !important;
}

.choices__list--dropdown .choices__item {
  color: #111 !important;
}

.modal .choices {
  color: #111 !important;
}

.modal .choices__inner {
  background-color: #fff !important;
}

/* FIX Choices input shifting / clipping text */
.choices__inner {
  display: flex !important;
  align-items: center;
  overflow: hidden;
}

.choices__input {
  min-width: 120px !important;
  /* prevents collapse */
  flex: 1 !important;
  /* allows proper growth */
  width: 100% !important;
  color: #111 !important;
}

/* prevent text from being clipped while typing */
.choices__list--single {
  white-space: nowrap;
  overflow: visible;
}

/* ===========================
   OTP ACTIVE RUNNING BORDER
=========================== */

.otp-active {
  border: 2px solid transparent !important;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(270deg, #2f80ed, #4da3ff, #00c6ff, #2f80ed);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size:
    100% 100%,
    400% 400%;
  animation: gradientRun 4s linear infinite;
}

@keyframes gradientRun {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

/* Expired state */
.otp-expired {
  border: 2px solid #dc3545 !important;
  animation: none !important;
}

/* Smaller, elegant SweetAlert popup */
/* Custom OTP modal - no scroll */
.otp-swal-popup {
  max-height: none !important;
  /* remove default max-height */
  overflow: hidden !important;
  /* remove scrollbar */
  padding: 20px !important;
}

/* Elegant blue animated loader */
.otp-loader {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(47, 128, 237, 0.2);
  border-top: 3px solid #2f80ed;
  margin: 0 auto;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* FORCE SweetAlert ABOVE Bootstrap Modal */
.swal2-container {
  z-index: 20000 !important;
}

.swal2-popup {
  z-index: 20001 !important;
}

/* OPTIONAL: make OTP inputs always clickable */
.otp-input {
  position: relative;
  z-index: 20002;
}

.dashboard-header {
  background: #fff;
  padding: 18px 22px;
  border-radius: 16px;
  border: 1px solid #eef2f7;
}

.dashboard-wrap {
  padding: 25px;
}

.kpi-card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.blue {
  background: #60a5fa;
}

.green {
  background: #34d399;
}

.red {
  background: #ef4444;
}

.purple {
  background: #a855f7;
}

.kpi-value {
  font-size: 20px;
  font-weight: 700;
}

.chart-card {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  padding: 16px;
}

.chart-card {
  opacity: 0;
  transform: translateY(20px);
  animation: chartFade 0.6s ease forwards;
}

.chart-card:nth-child(1) {
  animation-delay: 0.1s;
}

.chart-card:nth-child(2) {
  animation-delay: 0.2s;
}

.chart-card:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chartFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kpi-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;

  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;

  min-height: 110px;
  height: 100%;

  border-left: 6px solid transparent;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
}

/* hover effect */
.kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* =========================
   LAYER FIX (IMPORTANT)
========================= */
.kpi-card > * {
  position: relative;
  z-index: 2;
}

/* =========================
   ICON
========================= */
.kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}

/* =========================
   TEXT
========================= */
.kpi-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 3px;
}

.kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

/* =========================
   BORDER COLORS
========================= */
.kpi-card.blue {
  border-left-color: #3b82f6;
}
.kpi-card.orange {
  border-left-color: #f59e0b;
}
.kpi-card.green {
  border-left-color: #10b981;
}
.kpi-card.purple {
  border-left-color: #8b5cf6;
}

.kpi-card.dark {
  background: #111827;
  color: #ffffff;
  border-left-color: #374151;
}

.kpi-card.dark .kpi-icon {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.kpi-card.dark .kpi-label {
  color: rgba(255, 255, 255, 0.7);
}

.kpi-card.dark .kpi-value {
  color: #fff;
}

/* =========================
   ICON GRADIENTS
========================= */
.kpi-card.blue .kpi-icon {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
}
.kpi-card.orange .kpi-icon {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}
.kpi-card.green .kpi-icon {
  background: linear-gradient(135deg, #10b981, #34d399);
}
.kpi-card.purple .kpi-icon {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.kpi-card.dark .kpi-icon {
  background: linear-gradient(135deg, #374151, #111827);
}

/* =========================
   SOFT BLUR BACKGROUND GLOW
   (FIXED VERSION - NO CONFLICTS)
========================= */
.kpi-card::before {
  content: "";
  position: absolute;
  inset: -60px;
  z-index: 0;

  filter: blur(45px);
  opacity: 0.18;
  transform: scale(1.2);
}

/* BLUE */
.kpi-card.blue::before {
  background: radial-gradient(
    circle,
    rgba(59, 130, 246, 0.35),
    transparent 70%
  );
}

/* ORANGE */
.kpi-card.orange::before {
  background: radial-gradient(
    circle,
    rgba(245, 158, 11, 0.35),
    transparent 70%
  );
}

/* GREEN */
.kpi-card.green::before {
  background: radial-gradient(
    circle,
    rgba(16, 185, 129, 0.35),
    transparent 70%
  );
}

/* PURPLE */
.kpi-card.purple::before {
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, 0.35),
    transparent 70%
  );
}

.kpi-card.dark::before {
  background: radial-gradient(circle, rgba(75, 85, 99, 0.35), transparent 70%);
}

/* =========================
   GLOBAL MODAL DESIGN SYSTEM
========================= */

.modal-content {
  border-radius: 16px !important;
  overflow: hidden;
  border: none !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

/* HEADER */
.modal-header {
  background: #1f2937 !important; /* dark slate */
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 20px;
}

.modal-header .modal-title {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
}

.modal-header small {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* BODY */
.modal-body {
  background: #ffffff;
  color: #111827;
  padding: 20px;
}

/* LABELS */
.modal-body label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

/* VALUES */
.modal-body .fw-bold {
  color: #111827;
}

/* FOOTER */
.modal-footer {
  background: #f9fafb !important;
  border-top: 1px solid #e5e7eb;
  padding: 14px 20px;
}

/* BUTTONS */
.modal-footer .btn {
  border-radius: 10px;
  font-weight: 500;
}

/* OPTIONAL: ICON ALIGNMENT */
.modal-header i {
  font-size: 1.1rem;
  margin-right: 6px;
  opacity: 0.9;
}

/* =========================
   3D BUTTON HOVER EFFECT
========================= */

.modal-footer .btn {
  transition: all 0.2s ease;
  border-radius: 10px;
  position: relative;
  transform: translateY(0);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}

/* HOVER = lift up (3D feel) */
.modal-footer .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* CLICK = pressed effect */
.modal-footer .btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

/* ICON smooth animation */
.modal-footer .btn i {
  transition: transform 0.2s ease;
}

/* icon moves slightly on hover */
.modal-footer .btn:hover i {
  transform: scale(1.1);
}

.modal-footer .btn-success:hover {
  box-shadow: 0 10px 25px rgba(25, 135, 84, 0.35);
}

.modal-footer .btn-danger:hover {
  box-shadow: 0 10px 25px rgba(220, 53, 69, 0.35);
}

.role-btn {
  border-radius: 12px;
  padding: 10px 14px;
  transition: all 0.25s ease;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.role-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.btn-check:checked + .role-btn {
  transform: scale(1.02);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

/* =========================
   COMPACT DATATABLE STYLE
========================= */

.compact-table {
  font-size: 13px;
}

.compact-table thead th {
  padding: 8px 10px !important;
  font-size: 12.5px;
  white-space: nowrap;
}

.compact-table tbody td {
  padding: 6px 10px !important;
  vertical-align: middle;
}

.compact-table tbody tr {
  height: 38px;
}

/* Reduce card padding too */
.card {
  padding: 12px !important;
}

/* Optional: tighter buttons */
.btn-sm {
  padding: 3px 8px;
  font-size: 12px;
}

.swal-actions-gap {
  display: flex !important;
  gap: 12px; /* 👈 controls spacing */
  justify-content: center;
  margin-top: 15px;
}

.swal-actions-gap button {
  min-width: 120px; /* optional: makes buttons balanced */
  border-radius: 10px !important;
}

.swal-actions-gap button {
  min-width: 120px;
  border-radius: 10px !important;
  transition: all 0.2s ease-in-out;
}

/* 🔥 Hover animation */
.swal-actions-gap button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* 🔴 Logout button hover (danger effect) */
.swal2-confirm:hover {
  background-color: #dc2626 !important;
  box-shadow: 0 10px 25px rgba(239, 68, 68, 0.35);
}

/* ⚫ Cancel button hover */
.swal2-cancel:hover {
  background-color: #475569 !important;
  box-shadow: 0 10px 20px rgba(71, 85, 105, 0.25);
}

.swal-actions-gap button:active {
  transform: scale(0.96);
}

/* ================= MODAL CARD ================= */
#profileModal .profile-modal {
  border-radius: 18px;
  border: 1px solid #eef2f7;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* HEADER */
#profileModal .profile-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, #f8fbff, #ffffff);
  border-bottom: 1px solid #eef2f7;
}

/* BODY */
#profileModal .profile-body {
  padding: 20px;
}

/* FORM GROUP */
.form-group-elegant {
  margin-bottom: 12px;
}

.form-group-elegant label {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
  display: block;
}

.form-group-elegant .form-control {
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  font-size: 13px;
  padding: 8px 12px;
  transition: all 0.2s ease;
}

.form-group-elegant .form-control:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

/* ================= AVATAR ================= */
#profileModal .avatar-wrapper {
  position: relative;
  width: 110px;
  height: 110px;
  margin: auto;
}

#profileModal .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #eaf2ff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

#profileModal .avatar-img:hover {
  transform: scale(1.03);
}

#profileModal .avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #0d6efd, #4dabf7);
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

#profileModal .avatar-edit:hover {
  transform: scale(1.1);
}

/* ================= FOOTER ================= */
#profileModal .profile-footer {
  border-top: 1px solid #eef2f7;
  background: #fafafa;
  padding: 12px 20px;
}

/* SAVE BUTTON ANIMATION */
#profileModal .btn-save {
  transition: all 0.2s ease;
}

#profileModal .btn-save:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(13, 110, 253, 0.25);
}

.swal-premium-popup {
  border-radius: 16px !important;
  padding: 22px 20px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12) !important;
}

.swal-premium-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.swal-premium-html {
  font-size: 13px !important;
  color: #6b7280 !important;
  line-height: 1.6 !important;
  margin-top: 6px !important;
}

.swal-premium-btn {
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px;
  background: #4f46e5 !important;
  color: #fff !important;
  border: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease-in-out;
}

.swal-premium-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(79, 70, 229, 0.25);
}

#previewModal .modal-body {
  padding: 1rem 1.25rem;
}

#previewContent h5 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: #0d6efd;
}

#previewContent .row.g-3 {
  --bs-gutter-x: 0.75rem;
  --bs-gutter-y: 0.75rem;
}

#previewContent {
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px;
}

/* =========================
   SWEETALERT BUTTON ANIMATION
========================= */

.swal2-confirm,
.swal2-cancel {
  transition: all 0.2s ease-in-out !important;
  transform: scale(1);
}

/* Hover effect */
.swal2-confirm:hover,
.swal2-cancel:hover {
  transform: scale(1.05);
  filter: brightness(1.05);
}

/* Click effect */
.swal2-confirm:active,
.swal2-cancel:active {
  transform: scale(0.97);
}

/* ✅ FORCE GREEN BUTTON (NORMAL + HOVER) */
.swal2-confirm {
  background-color: #16a34a !important;
  border: none !important;
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.25) !important;
}

/* 🔥 FIX: REMOVE RED HOVER */
.swal2-confirm:hover {
  background-color: #15803d !important; /* darker green */
  box-shadow: 0 16px 30px rgba(22, 163, 74, 0.35) !important;
}

/* OPTIONAL: CLICK EFFECT */
.swal2-confirm:active {
  background-color: #166534 !important;
}