/* =================================================================
   Dashboard CSS — cleaned & consolidated (same visuals/behavior)
   ================================================================= */

/* =========================================
   Variables (easy to tweak)
========================================= */
:root{
  /* Layout */
  --sidebar-w: 280px;     /* was 240px */
  --right-col-w: 300px;   /* was 360px */
  --header-h: 64px;
  --dash-gap: 16px;
  --dash-pad: 18px;       /* unified gutter */

  /* Type scale */
  --fs-xs: 13px;          /* was 12 */
  --fs-sm: 14.5px;        /* was 14 */
  --fs-base: 16.5px;      /* was 16 */
  --fs-lg: 19px;          /* was 18 */

  /* Colors */
  --black: #0b0b0b;
  --dark: #111;
  --medium: #242424;
  --light: #cfcfcf;
  --white: #fff;
  --accent: #32cdb3;
  --accent2: #fb6182;
  --accent3: #2db398;
  --telegram: #2aabee;
  --fa-font-brands: #1c1c1c;
  --shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* =========================================
   Core Layout & Base Utilities
========================================= */
* { box-sizing: border-box; }
canvas { display: block; }

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

.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); } }

.accent_text { color: var(--accent); }
.white_text, .text_white_small { color: var(--white); }
.text_white_small  { font-size: 13.5px; font-weight: 400; }
.text_white2_small { color: #d1d5db; font-size: 13px; opacity: .8; }
.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_xs{ font-size:var(--fs-xs); }
.text_sm{ font-size:var(--fs-sm); }
.text_base{ font-size: 15px; margin:0 0 10px; color:var(--accent); }
.text_lg{ font-size:var(--fs-lg); }
.font_semibold{ font-weight:600; }
.mt_1{ margin-top:4px; }
.mt_3{ margin-top:12px; }
.text_red_400{ color:var(--accent2); }
.text-green{ color:var(--accent); }
.text-red{ color:var(--accent2); }
.icon{ margin-right:.5rem; color:var(--accent); }

/* 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); }

.hidden{ display:none !important; }

/* =========================================
   Sidebar, Header & Page Frame
========================================= */
.sidebar_global_filters {
  padding: 30px 0;
  border-top: 1px solid var(--medium);
  border-bottom: 1px solid var(--medium);
  margin-top: 15px;
}

.sidebar_global_filters_title {
  color: var(--swal2-cancel-button-background-color);
  font-size: 13px;
  font-weight: 600;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  margin-bottom: 12px;
}

.sidebar{
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  padding: 18px 12px;
  z-index: 1000;
  background: #181818;
  border-right: 1px solid #222;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sidebar_brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .3px;
  height: 58px;
}
.sidebar_nav{ margin-top:30px; display:grid; gap:8px; }
.nav_btn,.quit_btn{
  width:100%; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:8px;
  text-align:left; font-size:13px; font-weight:600; cursor:pointer; transition:.2s;
  background:transparent; border:1px solid transparent; color:var(--swal2-cancel-button-background-color);
  border-right:0; outline: 0;
}
.nav_btn:hover,.quit_btn:hover{
  background:linear-gradient(90deg, rgba(202,202,202,.1), transparent);
  color:var(--white); border-left:4px solid rgb(202,202,202); border-radius:8px 40px 40px 8px;
}
.nav_btn.active{
  background:linear-gradient(90deg, rgba(50,205,179,.1), transparent);
  color:var(--accent); border-left:4px solid var(--accent); border-radius:8px 40px 40px 8px;
}
.sidebar_bottom{ display:grid; gap:10px; }
.sidebar_version{ color:#9ca3af; font-size:12px; text-align:center; opacity:.8; }

.header{
  position:static; left:auto; width:auto; height:auto; padding:0; background:transparent; box-shadow:none;
}
.header .toolbar{ display:none; }

#content{
  margin-left: var(--sidebar-w);
  padding: 18px;                     /* page gutter */
  height: 100vh;                     /* full viewport height */
  width: calc(100vw - var(--sidebar-w)); /* <-- fill the remaining width explicitly */
  display: flex;                     /* header + main stack */
  flex-direction: column;
  align-items: stretch;              /* children stretch edge to edge */
  overflow: hidden;                  /* prevent page scroll bleed */
  background-color: #131313;
}

#section-dashboard {
  background-color: transparent;
}

/* Sticky dashboard header styled as card */
.app-header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: #1c1c1c;
  border: 1px solid var(--medium);
  border-radius: 10px;
  padding: 3px 4px 3px 4px;
  margin: 0 0 14px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  display: flex;
  justify-content: space-between;
}
.header_title{
  display:flex; align-items:center; gap:6px;
  font-size:20px; font-weight:700; letter-spacing:1px;
  background:linear-gradient(to right, var(--accent), #2db398);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.dashboard_header_title_text{ font-size:18px; font-weight:700; }
.price_badge{
  background:#1a1a1a; padding:.5rem 1rem; border-radius:20px; border:1px solid var(--accent);
}

/* =========================================
   Cards & Charts
========================================= */
.card{
  background:linear-gradient(to right, #131313, #1a1a1a);
  border:1px solid var(--medium);
  border-radius:8px;
  padding:18px;                      /* unified (was 22px) */
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  overflow:hidden;
}
.card_big_value{ margin:0; font-size:30px; font-weight:500; color:var(--accent); }

.chart_card{ display:flex; flex-direction:column; min-height:0; }
.chart_card .chart_container{ flex:1 1 auto; min-height:150px; }

.chart_container{
  position:relative;
  width:100%;
  height:100%;            /* fill the card */
  min-height:160px;       /* sensible floor */
  margin:0;
  flex:1 1 auto;
  overflow:hidden;
}
.transactions_card .chart_container{
  min-height:160px;       /* align with other charts */
}
.chart_container > canvas{
  position:absolute; inset:0; width:100% !important; height:100% !important;
  max-width:100%; max-height:100%; display:block; border-radius:inherit;
}

/* =========================================
   Dashboard Canvas & Grids
========================================= */
.dashboard_container{
  margin:0;
  /* padding:var(--dash-pad); */
  padding: 0;
  width:100%;
  flex:1 1 auto;           /* fill the space under the header */
  min-height:0;            /* <-- critical so the grid can shrink inside */
  overflow:hidden;         /* keep everything snug, no outer scroll */
  background-color: transparent;
  box-sizing: border-box;
}

/* 1080p grid */
.dashboard-grid-1080{
  display:grid;
  grid-template-columns:1fr 1fr 1fr var(--right-col-w);
  grid-template-rows:auto auto auto auto;
  grid-auto-rows:minmax(90px,auto);
  gap:var(--dash-gap);
  grid-template-areas:
    "users      bets       revenue   transactions"
    "betsPlaced betsPlaced betsPlaced transactions"
    "profits    profits    profits   transactions"
    "regs       regs       regs      transactions";
}

/* Card → area mapping */
.users_card{ grid-area:users; }
.bets_summary_card{ grid-area:bets; }
.revenue_card{ grid-area:revenue; }
.transactions_card{ grid-area:transactions; display:flex; flex-direction:column; min-height:0; }
.bets_placed_card{ grid-area:betsPlaced; }
.profits_card{ grid-area:profits; }
.registrations_card{ grid-area:regs; }

/* Responsive: stack right column under on smaller widths */
@media (max-width:1280px){
  .dashboard-grid-1080{
    grid-template-areas:
      "users      bets       revenue"
      "betsPlaced betsPlaced betsPlaced"
      "profits    profits    profits"
      "regs       regs       regs"
      "transactions transactions transactions";
    grid-template-columns:1fr 1fr 1fr;
  }
  .transactions_card .mt_3[style]{ display:block !important; }
  .transactions_card .toolbar.button{ width:100%; justify-content:center; }
}

/* ===== Optional ALT Layout (.layout-sketch) ===== */
.dashboard_container.dashboard-grid-1080.layout-sketch{
  display:grid;
  grid-template-areas:none;                 /* neutralize named areas */
  grid-template-columns:1fr 1fr 1fr;        /* 3 equal columns */
  grid-template-rows:auto minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:var(--dash-gap);
  align-content:stretch;
}
/* Neutralize earlier placements inside alt layout */
.layout-sketch .users_card,
.layout-sketch .bets_summary_card,
.layout-sketch .revenue_card,
.layout-sketch .transactions_card,
.layout-sketch .bets_placed_card,
.layout-sketch .profits_card,
.layout-sketch .registrations_card{
  grid-area:auto !important; grid-column:auto !important; grid-row:auto !important;
}
/* Row 1: KPI cards fit content */
.layout-sketch > .users_card,
.layout-sketch > .bets_summary_card,
.layout-sketch > .revenue_card{
  grid-row:1 !important; height:auto; align-self:start;
}
/* Rows 2–4: left block spans 2 cols; transactions on right */
.layout-sketch > .bets_placed_card{ grid-column:1 / span 2 !important; grid-row:2 !important; }
.layout-sketch > .profits_card{ grid-column:1 / span 2 !important; grid-row:3 !important; }
.layout-sketch > .registrations_card{ grid-column:1 / span 2 !important; grid-row:4 !important; }
.layout-sketch > .transactions_card{
  grid-column:3 !important; grid-row:2 / 5 !important;
  display:flex; flex-direction:column; min-height:0;
}
.layout-sketch .chart_card{ display:flex; flex-direction:column; min-height:0; }
.layout-sketch .chart_card .chart_container{ flex:1 1 auto; min-height:160px; }

@media (max-width:1280px){
  .dashboard_container.dashboard-grid-1080.layout-sketch{
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:auto auto auto auto auto;
  }
  .layout-sketch > .transactions_card{
    grid-column:1 / -1 !important; grid-row:5 !important;
  }
}

/* =========================================
   Toolbar
========================================= */
.toolbar{
  z-index:10; display:flex; align-items:center; justify-content:center; gap:8px;
}
.toolbar_input_wrapper{ display:flex; align-items:center; gap:10px; }
.toolbar_input_title{ font-size:11px; color:var(--white); }

.toolbar input,
.toolbar select{
  background:#1a1a1a; border:1px solid #2d2d2d; padding:6px 8px;
  border-radius:4px; color:#d1d5db; font-size:13.5px; transition:border-color .2s;
}
.toolbar input:hover, .toolbar select:hover{ border-color:var(--accent); }

.toolbar button{
  display:flex; align-items:center; justify-content:center; gap:6px;
  height:28px; padding:0 14px; border:0; border-radius:4px; font-size:13px; font-weight:600;
  cursor:pointer; color:#fff; background:var(--accent); transition:background .2s;
}
.toolbar button:hover{ background:var(--accent3); }

/* Optional special button (legacy name) */
.toolbar.button{
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px; border:0; border-radius:6px;
  font-size:12px; font-weight:700; background:var(--accent); color:#000; cursor:pointer;
}

/* Generic buttons (page bar, etc.) */
.btn{ min-height:34px; padding:6px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08); color:#fff; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.btn:hover{ border-color:rgba(255,255,255,.24); }
.btn-ghost{ background:transparent; }
.btn-accent{ background:var(--accent); color:#0a1110; border-color:transparent; }
.btn-accent:hover{ filter:saturate(1.1); }
.btn.sm{ min-height:28px; padding:4px 8px; font-size:12.5px; }

/* =========================================
   Dropdown
========================================= */
.dropdown_menu{
  display:none; position:absolute; right:1rem; top:3rem;
  background:#1a1a1a; border:1px solid #2d2d2d; border-radius:4px; padding:.5rem;
}
.dropdown:hover .dropdown_menu{ display:block; }

/* =========================================
   Tables
========================================= */
.table_card{
  width:100%; display:flex; flex-direction:column; gap:10px; box-sizing:border-box; height:100%;
}
.table_container{
  min-height:0; height:100%; overflow:auto; position:relative; padding-right:4px; display: block;
}
table{ width:100%; border-collapse:collapse; }
th,td{ padding:18px 22px; font-size:14px; text-align:left; }
th{
  position:sticky; top:0; z-index:1; background:#181818; color:#fff; font-weight:600;
}
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; }
td{ max-width:130px; white-space:normal; word-wrap:break-word; }
#dashboard_support_ticket_table_received_at_th:hover{ cursor:pointer; }

/* =========================================
   Revenue / Small UI bits
========================================= */
.revenue_item{ display:flex; align-items:center; justify-content:space-between; margin:2px 0; }

.filter_bar{
  display:flex; align-items:center; padding:3px; border-radius:6px; background-color:var(--black);
}
.filter_button{
  padding:4px 24px; background-color:var(--fa-font-brands); border:none; outline:none; cursor:pointer;
  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:var(--accent); }
.filter_button:hover:not(.active){ background-color:var(--dark); }

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

/* =========================================
   Avatars & Cells
========================================= */
.dashboard_user_avatar{
  display:inline-block; width:32px; height:32px; object-fit:cover; border-radius:50%; margin-right:5px;
  border:1px solid rgba(255,255,255,0.1);
}
.dashboard_user_avatar_cell{ display:flex; align-items:center; }

/* =========================================
   Withdrawal Mini-Modal
========================================= */
#withdrawal_modal.modal{
  position:fixed; inset:0; display:none; 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{
  width:30px; height:30px; padding:4px; background:transparent; color:rgba(255,255,255,0.85); border:0; cursor:pointer;
}
#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; }
#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 grid (inside modal) */
.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:.7; margin-bottom:6px; }
.kpi-card .kpi-value{ font-size:18px; font-weight:600; }
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid transparent; letter-spacing:.2px;
}
/* Footer */
#withdrawal_modal .modal_footer{ display:flex; gap:10px; padding:12px 16px 16px; border-top:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.02); }
/* Action buttons (scoped to modal) */
#withdrawal_modal .user_button_green,
#withdrawal_modal .user_button_red{
  width:fit-content; height:32px; padding:10px 14px; border-radius:4px; font-weight:500; cursor:pointer;
  background:transparent; border:0; color:rgba(255,255,255,0.9);
}
#withdrawal_modal .btn-green { border-color:var(--accent) !important;  color:var(--accent) !important; }
#withdrawal_modal .btn-amber { border-color:#f3a721 !important;       color:#f3a721 !important; }
#withdrawal_modal .btn-red   { border-color:var(--accent2) !important; color:var(--accent2) !important; }
#withdrawal_modal .user_button_red[disabled]{ opacity:.5; cursor:not-allowed; }

/* =========================================
   Verification Modal (generic)
========================================= */
.verify-modal{
  width:640px; max-width:95vw; padding:16px; border-radius:14px; color:var(--white);
  background:var(--dark); border:1px solid rgba(255,255,255,0.06); box-shadow:var(--shadow); font-family:inherit;
}
.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{
  padding:6px 10px; background:transparent; color:var(--accent2);
  border:1px solid var(--accent2); border-radius:8px; cursor:pointer; transition:.2s;
}
.vm-close:hover{ background:var(--accent2); color:var(--white); }

.vm-user{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 12px 6px; }
.vm-user-avatar{
  width:72px; height:72px; object-fit:cover; border-radius:50%;
  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);
  background:#181818; border:1px solid #222; border-radius:999px; padding:4px 10px;
}

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

@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); }
}
.vm-card{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  height:fit-content; padding:12px; background:rgba(255,255,255,0.015);
  border:1px solid rgba(255,255,255,0.04); border-radius:10px;
}
.vm-card.vm-card-pending{ animation:backgroundPulse 1.5s linear infinite; width:-webkit-fill-available; }
.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); }
.vm-card-icon{ text-align:center; font-size:22px; margin-bottom:6px; color:var(--white) !important; opacity:.95; }

#w_balance_now{ font-size:26px; }
#card_deposits{ color:#fff; }

/* 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; justify-content:center; gap:8px; 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; }

/* Quick facts */
.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{ display:flex; align-items:flex-end; gap:8px; font-size:13px; font-weight:600; color:var(--white); }
.vm-bonus-pill{
  font-size:11px; font-weight:500; padding:2px 8px; border-radius:999px;
  color:var(--accent3); border:1px solid var(--accent3); background:rgba(255,255,255,0.02); margin-bottom:4px;
}

/* Actions (global variants) */
.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; }
.outline-yellow{ border-color:#f3c567 !important;         color:#f3c567 !important; }
.outline-red{
  width:fit-content; padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,0.18); color:rgba(255,255,255,0.9);
}
#w_reject_btn{ background-color:var(--accent2) !important; border-radius:4px !important; }

/* Pending block */
.vm-pending{
  display:flex; justify-content:space-between; gap:8px; flex-direction:row;
  margin-top:8px; padding:12px; background:rgba(255,255,255,0.015);
  border:1px solid rgba(255,255,255,0.06); border-radius:10px;
}
.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; }
.fa-solid.fa-spinner.vm-pending-icon{ font-size:12px; animation:rotateSpinner 1s linear infinite; }
@keyframes rotateSpinner{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

/* =========================================
   Small extras for Transactions column polish
========================================= */
.top_depositors{
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.06); border-radius:10px; padding:10px 12px;
}
.top_depositors_list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.depositor_row{
  display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px; background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}
.depositor_avatar{
  width:28px; height:28px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,0.1);
}
.depositor_meta{ display:grid; gap:4px; }
.depositor_name{ font-size:13.5px; color:#fff; font-weight:600; }
.depositor_bar{ height:6px; border-radius:999px; overflow:hidden; background:#1f1f1f; }
.depositor_bar > span{ display:block; height:100%; background:var(--accent); width:0%; transition:width .3s ease; }
.amount_badge{
  font-size:12.5px; font-weight:700; padding:4px 8px; border-radius:999px;
  color:#0f1614; background:var(--accent); border:1px solid rgba(50,205,179,.6);
}

/* Tall card button tweak in transactions */
.transactions_card .toolbar.button{
  height:32px; padding:0 14px; background:transparent !important; color:#fff;
  border:1px solid rgba(255,255,255,0.14); box-shadow:0 0 0 0 inset rgba(50,205,179,0);
}
.transactions_card .toolbar.button:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 100vmax inset rgba(50,205,179,.06);
}
.transactions_card h4{ margin:6px 0 8px 0 !important; }
.transactions_card .mt_1 > .revenue_item{ margin:4px 0; }

@media (max-width:860px){
  .transactions_card .mt_3[style]{ display:block !important; } /* neutralize inline display if kept */
  .transactions_card .toolbar.button{ width:100%; justify-content:center; }
}

/* =========================================
   Status Pill & Misc
========================================= */
.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, color .2s, opacity .2s; 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; }
.status-pill.pending{  background-color:var(--medium); color:#fff; border:1px solid #1e1e1e; }
.status-pill.pending .icon{
  color:#fff; border-left:1px solid #1e1e1e; padding:6px 8px; border-radius:0 20px 20px 0; transition:ease-in-out .3s; cursor:pointer;
}
.status-pill.resolved{ background-color:rgba(50,205,179,.3); color:var(--accent); border:1px solid var(--accent); }
.status-pill.rejected{ background:rgba(251,97,130,.12); color:var(--accent2); border:1px solid var(--accent2); }

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

/* =========================================
   Page Bar (kept for parity)
========================================= */
.page-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 10px 0 10px 10px; width: 100%; height: 50px;}
.bar-left{ display:flex; align-items:center; gap:10px; width: 300px;}
.tab-dot{ width:22px; height:22px; border-radius:4px; background:var(--accent); display:inline-block; }
.tab-title{ font-size:16px; font-weight:550; letter-spacing:.2px; color:#fff; margin:0; }
.bar-right{ display:flex; align-items:center; gap:10px; }

/* =========================================
   Filter Popover (advanced filters)
========================================= */
.filter-popover{
  position:fixed; /* positioned by JS */ inset:auto auto auto auto; width:520px;
  max-width:min(560px, calc(100vw - 24px));
  background:#111418; border:1px solid rgba(255,255,255,.10); border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.filter-popover.show{ opacity:1; transform:translateY(6px); pointer-events:auto; }
.filter-popover-inner{ padding:12px; }
.fp-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.fp-title{ font-size:13px; font-weight:700; color:#fff; opacity:.9; }

.fp-grid{ display:grid; grid-template-columns:1.2fr repeat(3, minmax(160px, .9fr)); gap:10px; }
.fp-group{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.fp-grow{ grid-column:span 2; }
.fp-inline{ display:flex; align-items:center; gap:8px; }

.filter-popover input[type="search"],
.filter-popover input[type="date"],
.filter-popover select{
  min-height:34px; padding:6px 10px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04); color:#fff; border-radius:8px; outline:none;
}
.filter-popover input::placeholder{ color:rgba(255,255,255,.4); }

.fp-actions{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.fp-actions .spacer{ flex:1; }

/* Show Tx-only fields only on the Transactions tab */
.only-transactions{ display:none; }
body[data-section="transactions"] .only-transactions{ display:flex; }

/* Mobile */
@media (max-width:780px){
  .filter-popover{ left:12px !important; right:12px !important; width:auto; }
  .fp-grid{ grid-template-columns:1fr; }
  .fp-grow{ grid-column:auto; }
}

/* =========================================
   Filters Hub (legacy container styles)
========================================= */
.filters.sticky{
  position:sticky; top:64px; z-index:15; background:#0f0f0f;
  border-bottom:1px solid #222; box-shadow:0 2px 4px rgba(0,0,0,.25);
}

/* Primary filters row (final, grid version) */
.filters-row{
  display:grid;
  grid-template-columns:1.2fr repeat(4, minmax(150px, .6fr)) auto;
  gap:10px; align-items:end;
}
.group{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.group.grow{ grid-column:span 1; }
.group-inline .inline-inputs{ display:flex; align-items:center; gap:8px; }

.group > label{
  font-size:11px; letter-spacing:.02em; color:rgba(255,255,255,.65);
}
.group .dash{ align-self:center; opacity:.6; margin:0 4px; }

.app-header input[type="search"],
.app-header input[type="date"],
.app-header select{
  background:#131313; color:#dfe6ee; border:1px solid rgba(255,255,255,0.06);
  border-radius:10px; padding:10px 12px; outline:none; width:100%;
}
.app-header input::placeholder{ color:rgba(255,255,255,.35); }

.app-header input[type="search"] {
  width: 23vw;
}

.app-header .btn{
  background:#0b0e12; color:#dfe6ee; border:1px solid rgba(255,255,255,0.08);
  border-radius:10px; padding:9px 12px; font-weight:600; display:inline-flex; align-items:center; gap:8px;
}
.app-header .btn:hover{ border-color:rgba(255,255,255,0.18); }
.app-header .btn.subtle{ opacity:.85; }

/* Chips (final aesthetic) */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chips .chip{
  background:#0b0e12; color:#cfe3dd; border:1px solid rgba(50,205,179,.25);
  border-radius:999px; padding:6px 10px; font-size:12px; cursor:pointer;
}
.chips .chip:hover{ border-color:rgba(50,205,179,.45); }

@media (max-width:1100px){
  .filters-row{ grid-template-columns:1fr 1fr 1fr; }
  .group.actions{ grid-column:1 / -1; justify-content:flex-start; }
}
@media (max-width:760px){
  .filters-row{ align-items:stretch; }
  .group{ width:100%; }
  .group.actions{ justify-content:flex-end; }
}

/* Let grid items/cards shrink without forcing overflow */
.dashboard_container > * { min-width:0; min-height:0; }
.card{ min-width:0; }

/* Full-bleed dashboard: prevent any inherited max-width / auto-centering */
.app-header,
.dashboard_container{
  width:100%;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

#section-dashboard {
  padding: 0;
}

#btn_filters {
  width: 120px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.hidden { display: none !important; }
.dashboard_container .table_container,
.dashboard_container .chart_container { display: block; }

.section-bar { margin-bottom: 10px; display: none; }
.section-bar .bar-center { flex: 1; display: flex; justify-content: center; }
.section-bar .section-search {
  width: min(520px, 90%); max-width: 520px;
  background:#0b0e12; color:#dfe6ee; border:1px solid rgba(255,255,255,0.08);
  border-radius:10px; padding:8px 12px; font-size:13.5px; outline:none;
}
.section-bar select {
  background:#0b0e12; color:#dfe6ee; border:1px solid rgba(255,255,255,0.08);
  border-radius:10px; padding:8px 12px; font-size:13.5px; outline:none;
}

/* Put the section search inside the header and hide it on Dashboard */
body[data-section="dashboard"] .section-bar .bar-center { display: none; }
.section-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}
.section-bar .bar-left{ display:flex; align-items:center; gap:10px; }
.section-bar .bar-center{ flex:1; display:flex; justify-content:center; }
.section-bar .bar-right{ display:flex; align-items:center; gap:8px; }

/* Shared field look for date/search/select – matches your cards */
.section-bar input[type="search"],
.section-bar select,
.app-header input[type="date"],
.sidebar .date-range input[type="date"]{
  background:#131313; color:var(--swal2-cancel-button-background-color);
  border: 1px solid var(--medium);
  border-radius:10px; padding:8px 12px; font-size:13.5px; outline:none;
}

.sidebar .date-range button{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
  background: var(--medium);
  border: 1px solid transparent;
  color: var(--swal2-cancel-button-background-color);
  outline: 0;
  height: 42px;
}

.section-bar input[type="search"]::placeholder{ color:rgba(255,255,255,.35); }

/* Nice date-range in the sidebar */
.sidebar .date-range{ display:grid; gap:6px; }
.sidebar .date-range input[type="date"]{
  width:100%; height:32px;
}

.sidebar .date-range button:hover{
  border-color:rgba(50,205,179,.5); color:#fff; box-shadow:0 0 0 100vmax inset rgba(50,205,179,.04);
}

/* Section search sizing */
.section-search{
  width:min(520px, 90%); max-width:520px;
}

.page-bar .bar-right { display:flex; align-items:center; gap:8px; width: 440px; justify-content: flex-end;}
.page-bar .bar-right .section-select {
  min-width: 120px; /* optional; remove if you prefer auto width */
  max-width: 176px;
}

.section-bar { display: none; }

body:not([data-section="dashboard"]) .section-bar { display:none; }
.page-bar .bar-right { display:flex; align-items:center; gap:8px; }
.page-bar .bar-right .section-select { min-width:170px; } /* optional */

.tab-icon{
  font-size:18px;
  color:var(--accent);
  margin-right:8px;
}

.page-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 10px;
  width: 100%;
  height: 50px;
}

.balance-scope-switch {
  display: inline-flex;
  flex-shrink: 0;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--medium);
  border-radius: 11px;
  background: #111;
}

.balance-scope-button {
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,.58);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.balance-scope-button.active {
  background: rgba(50,205,179,.15);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(50,205,179,.35);
}

body[data-balance-mode="virtual"] .transactions_tall {
  opacity: .45;
}