.dashboard_tab {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
  }

  .card {
    background: #131313;
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .chart_card {}

  .table_card {
    width: calc(100vw - 20px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    height: calc(100vh - 490px);
  }

  .accent_text {
    color: #32cdb3;
  }

  .white_text {
    color: white;
  }

  .chart_container {
    position: relative;
    height: 150px;
    width: 100%;
    margin: 0 auto;
  }

  .table_container {
    min-height: 200px;
    overflow-y: auto;
    position: relative;
    padding-right: 4px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  th,
  td {
    padding: 16px 20px;
    font-size: 13px;
    text-align: left;
  }

  th {
    color: white;
    font-weight: 600;
    font-size: 13px;
    padding: 16px 20px;
    background: #181818;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  th:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }

  th:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  tr:hover {
    background: #1a1a1a;
  }

  .icon {
    margin-right: 0.5rem;
    color: #32cdb3;
  }

  .header {
    background: linear-gradient(to right, #131313, #1a1a1a);
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    height: 64px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  }

  .header_title {
    background: linear-gradient(to right, #32cdb3, #2db398);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 18px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .dashboard_header_title_text {
    font-size: 18px;
    font-weight: 700;
  }

  .price_badge {
    background: #1a1a1a;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid #32cdb3;
  }

  .toolbar {
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }

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

  .toolbar_input_title {
    font-size: 11px;
    color: white;
  }

  .toolbar input,
  .toolbar select {
    background: #1a1a1a;
    border: 1px solid #2d2d2d;
    padding: 4px 6px;
    border-radius: 4px;
    color: #d1d5db;
    font-size: 12px;
    transition: border-color 0.2s;
  }

  .toolbar input:hover,
  .toolbar select:hover {
    border-color: #32cdb3;
  }

  .toolbar button {
    background: #32cdb3;
    color: #000;
    height: 27px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.2s;
    border: 0;
    color: white;
    display: flex;
    align-content: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    align-items: center;
    padding: 0 16px;
  }

  .toolbar button:hover {
    background: #2db398;
  }

  .dropdown_menu {
    display: none;
    position: absolute;
    right: 1rem;
    top: 3rem;
    background: #1a1a1a;
    border: 1px solid #2d2d2d;
    border-radius: 4px;
    padding: 0.5rem;
  }

  .dropdown:hover .dropdown_menu {
    display: block;
  }

  .revenue_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.25rem 0;
  }

  .dashboard_container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 70px;
    padding: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 90px);
    background-color: var(--black);
  }

  .grid {
    display: grid;
    gap: 10px;
  }

  .grid_section {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .grid_section {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .text_lg {
    font-size: 18px;
  }

  .text_xs {
    font-size: 12px;
  }

  .text_white_small {
    font-size: 13px;
    color: white;
    font-weight: 400;
  }

  .text_white2_small {
    color: #d1d5db;
    font-size: 13px;
    font-weight: 400;
  }

  .text_accent_small {
    color: var(--accent);
    font-size: 13px;
    font-weight: 400;
  }

  .text_accent2_small {
    color: var(--accent2);
    font-size: 13px;
    font-weight: 400;
  }

  .text_accent3_small {
    color: var(--accent3);
    font-size: 13px;
    font-weight: 400;
  }

  .text_sm {
    font-size: 14px;
  }

  .font_semibold {
    font-weight: 600;
  }

  .text_base {
    font-size: 16px;
    margin-top: 0;
    color: var(--accent);
  }

  .mt_1 {
    margin-top: 4px;
  }

  .mt_3 {
    margin-top: 12px;
  }

  .text_red_400 {
    color: var(--accent2);
  }

  /* ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background: #32cdb3;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #2db398;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: #32cdb3 #1a1a1a;
  }

  ::-webkit-scrollbar-button {
    display: none;
  } */


  .exit_dashboard {
    color: var(--white);
    background-color: var(--accent2);
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 600;
    height: 27px;
    cursor: pointer;
    transition: ease-in-out 0.3s;
    box-shadow: 0 0 2px 0px var(--accent2);
  }

  .card_big_value {
    font-size: 30px;
    font-weight: 500;
    color: var(--accent);
    margin: 0;
  }

  .filter_bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 3px;
    border-radius: 6px;
    background-color: var(--black);
  }

  .filter_button {
    padding: 4px 24px;
    background-color: var(--fa-font-brands);
    cursor: pointer;
    outline: none;
    border: none;
    font-weight: 500;
    color: var(--light);
  }

  .filter_button:first-child {
    border-radius: 4px 0 0 4px;
  }

  .filter_button:last-child {
    border-radius: 0 4px 4px 0;
  }

  .filter_button.active {
    background-color: var(--dark);
    color: var(--accent);
    border-color: #32CDB3;
  }

  .filter_button:hover:not(.active) {
    background-color: var(--dark);
  }

  .dashboard_user_avatar {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 5px;
  }

  .dashboard_user_avatar_cell {
    display: flex;
    align-items: center;
  }

  td {
    max-width: 130px;
    white-space: normal;
    word-wrap: break-word;
  }

  .send_message_button {
    color: var(--white);
    background-color: var(--telegram);
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 550;
    height: 27px;
    cursor: pointer;
    transition: ease-in-out 0.3s;
    border: 0;
    box-shadow: 0 0 2px 0px var(--telegram);
  }

  
#dashboard_support_ticket_table_received_at_th:hover {
  cursor: pointer;
}






/* ===== Withdrawal mini-modal ===== */
#withdrawal_modal.modal {
  position: fixed;
  inset: 0;
  display: none; /* shown via JS */
  justify-content: center;
  align-items: center;
  padding: 16px;
  background-color: rgba(0,0,0,0.5);
  z-index: 10000000;
  box-sizing: border-box;
}

#withdrawal_modal .modal_content {
  width: min(720px, 96vw);
  background: var(--dark);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  color: #fff;
  overflow: hidden;
  font-family: inherit;
}

/* Header */
#withdrawal_modal .modal_header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}

#withdrawal_modal .w_user_basic {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#withdrawal_modal #w_close_btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  width: 30px;
  height: 30px;
  padding: 4px;
  border: 0;
}

#withdrawal_modal #w_close_btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--accent2);
}

/* Body */
#withdrawal_modal .modal_body {
  padding: 16px;
  display: grid;
  gap: 12px;
}

/* Simple grid rows/cols */
#withdrawal_modal .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#withdrawal_modal .row:last-child {
  margin-bottom: 4px;
}

#withdrawal_modal .col {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 10px 12px;
}

/* KPI cards (for the big numbers if you wrap them) */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

.kpi-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px;
}

.kpi-card .kpi-title {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 6px;
}

.kpi-card .kpi-value {
  font-size: 18px;
  font-weight: 600;
}

/* Badge */
.badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  letter-spacing: 0.2px;
}

/* Footer */
#withdrawal_modal .modal_footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}

/* Action buttons with color cues */
#withdrawal_modal .user_button_green,
#withdrawal_modal .user_button_red {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.9);
  padding: 10px 14px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  width: fit-content;
  background-color: var(--black);
  height:32px;
}

/* Color cues applied by JS */
#withdrawal_modal .btn-green {
  border-color: var(--accent, #32CDB3) !important;
  color: var(--accent, #32CDB3) !important;
}

#withdrawal_modal .btn-amber {
  border-color: #f3a721 !important;
  color: #f3a721 !important;
}

#withdrawal_modal .btn-red {
  border-color: var(--accent2, #FB6182) !important;
  color: var(--accent2, #FB6182) !important;
}

#withdrawal_modal .user_button_red[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Text helpers */
.text_white2_small { font-size: 12px; opacity: 0.8; }


/* ========== Withdrawal Verification Modal ========== */

.verify-modal {
  width: 640px;
  max-width: 95vw;
  background: var(--dark);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--white);
  font-family: inherit;
}

/* Top bar */
.vm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vm-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--white);
  letter-spacing: .2px;
}
.vm-close {
  background: transparent;
  border: 1px solid var(--accent2);
  color: var(--accent2);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: .2s;
}
.vm-close:hover {
  background: var(--accent2);
  color: var(--white);
}

/* Centered user block */
.vm-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px 6px;
}
.vm-user-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.06);
  box-shadow: var(--shadow);
}
.vm-user-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}
.vm-id-pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--light);
  border: 1px solid #222;
  background: #181818;
  border-radius: 999px;
  padding: 4px 10px;
}

/* KPI cards */
.vm-kpi-cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin: 20px 0;
  align-items: center;
}

.vm-card.vm-card-pending {
  width: -webkit-fill-available;
  animation: backgroundPulse 1.5s linear infinite;
}

@keyframes backgroundPulse {
  0% {
    background: rgba(255,255,255,0.04);
  }
  50% {
    background: rgba(255,255,255,0.08);
  }
  100% {
    background: rgba(255,255,255,0.04);
  }
}

#w_balance_now {
  font-size: 26px;
}

.vm-card {
  background: var(--dark);
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  padding: 12px;
  height: fit-content;
  background-color: rgba(255,255,255,0.015);
}
.vm-card-label {
  font-size: 12px;
  color: var(--light);
  text-align: center;
  margin-bottom: 4px;
}
.vm-card-value {
  font-size: 36px;
  font-weight: 600;
  color: var(--white);
  text-align: center;
}
.vm-card-pending .vm-card-value {
  color: var(--accent2);
  font-size: 36px;
  font-weight: 600;
}

.fa-solid.fa-spinner.vm-pending-icon {
  animation: rotateSpinner 1s linear infinite;
  font-size: 12px;
}

@keyframes rotateSpinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Platform Profit color states */
.value-pos { color: var(--accent); }
.value-neg { color: var(--accent2); }
.value-zero { color: var(--white); }
.value-verypos {
  color: var(--accent3, var(--accent));
  text-shadow: 0 0 10px rgba(50,205,179,.35);
}

/* Decision area */
.vm-decision {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.vm-amount-wrap { text-align: center; }
.vm-amount-label {
  font-size: 12px;
  color: var(--light);
}
.vm-amount {
  font-size: 34px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: .2px;
}
.vm-status-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.kpi_badge {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 30px;
  border: 1px solid transparent;
  margin-bottom: 4px;
}
.badge-green {
  color: var(--accent);
  background: rgba(50,205,179,.1);
  border-color: var(--accent);
}
.badge-yellow {
  color: #f3c567;
  background: rgba(243,197,103,.1);
  border-color: #f3c567;
  font-weight:500;
}
.badge-red {
  color: var(--accent2);
  background: rgba(251,97,130,.1);
  border-color: var(--accent2);
  font-weight:500;
}
.vm-summary {
  font-size: 13px;
  color: var(--light);
  font-weight:500;
}

/* Two quick facts row */
.vm-quick-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.vm-quick {
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 10px 12px;
}
.vm-quick-label {
  font-size: 12px;
  color: var(--light);
  margin-bottom: 4px;
}
.vm-quick-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.vm-bonus-pill {
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--accent3);
  color: var(--accent3);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  margin-bottom: 4px;
}

/* Actions */
.vm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 4px;
}
.user_button_green,
.user_button_red {
  border: 1px solid var(--light);
  background: transparent;
  color: var(--white);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
}
.user_button_green:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.user_button_red:hover {
  border-color: var(--accent2);
  color: var(--accent2);
}
.outline-green {
  border-color: var(--accent)!important;
  color: var(--accent)!important;
  border-radius: 8px!important;
}

#card_deposits {
  color: white;
}

.outline-yellow {
  border-color: #f3c567!important;
  color: #f3c567!important;
}
.outline-red {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  width: fit-content;
}
#w_reject_btn {
  background-color: var(--accent2) !important;
  border-radius: 4px !important;
}
/* Utility text */
.text-green { color: var(--accent); }
.text-red { color: var(--accent2); }


/* Center content in each card */
.vm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Icons: centered and always white */
.vm-card-icon{
  display: block;
  text-align: center;
  font-size: 22px;
  margin-bottom: 6px;
  color: var(--white) !important;   /* force white */
  opacity: .95;
}

/* (Optional) remove any old per-card icon tints you had:
   .vm-card-deposits .vm-card-icon { ... }
   .vm-card-pending  .vm-card-icon { ... }
*/

/* Keep your pending value emphasis */
.vm-card-pending .vm-card-value {
  color: var(--accent2);
  font-size: 36px;
  font-weight: 600;
}

/* Color states for the Net value (icon stays white) */
.value-pos   { color: var(--accent); }
.value-neg   { color: var(--accent2); }
.value-zero  { color: var(--white); }
.value-verypos {
  color: var(--accent3, var(--accent));
  text-shadow: 0 0 10px rgba(50,205,179,.35);
}


/* Pending block placed under quick facts */
.vm-pending {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: space-between;
}

.vm-pending-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.vm-pending-head-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.vm-pending-icon {
  font-size: 18px;
  color: var(--white) !important;
  opacity: .95;
}

.vm-pending-label {
  font-size: 12px;
  color: var(--light);
  font-weight: 500;
}

.vm-pending-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.vm-pending-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent2);
}

.vm-pending-actions {
  display: flex;
  gap: 10px;
}

/* Ensure KPI card icons are centered & white */
.vm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.vm-card-icon {
  display: block;
  text-align: center;
  font-size: 22px;
  margin-bottom: 6px;
  color: var(--white) !important;
  opacity: .95;
}

/* === Support status pill === */
.status-pill {
  --status-pill-width: 110px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: var(--status-pill-width);
  padding: 0;
  border-radius: 4px;
  border: 1px solid transparent;
  line-height: 1;
  font-size: 12px;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
  cursor: pointer;
  user-select: none;
}

.status-pill .label { 
  white-space: nowrap;
  font-size: 13px;
  padding: 6px 0 6px 12px; 
  font-weight: 500;
}
.status-pill .icon  {     
  font-size: 13px;
  margin: 0;
  padding: 6px 8px;
}

/* Pending look */
.status-pill.pending {
  background-color: var(--medium);
  color: white;
  border: 1px solid #1e1e1e;
}
.status-pill.pending .icon {     
  color: var(--white);
  margin: 0;
  border-left: 1px solid #1e1e1e;
  padding: 6px 8px;
  border-radius: 0 20px 20px 0; 
  transition: ease-in-out 0.3s;
  cursor: pointer;

}

.status-pill.pending .icon:hover {
  color: var(--white);
}

/* Resolved look */
.status-pill.resolved {
  background-color: rgba(50, 205, 179, 0.3);
  color: var(--accent);
  border: 1px solid var(--accent);
}
.status-pill.resolved .icon { color: var(--accent); }

.status-pill.rejected { border:1px solid var(--accent2); color:var(--accent2); background:rgba(251,97,130,.12); }

.status-pill.rejected .icon { color: var(--accent2); }

#status {
  background-color: var(--dark);
  color: white;
  border-radius: 4px;
  border: 1px solid #1e1e1e;
  padding: 2px 6px;
}