@media (max-width: 720px) {
/* =========================================================
   DreamWealth Dashboard Mobile FX
   - Fix overlap of "bubble/orb" layers covering buttons/text
   - Improve button wrapping + single-column behavior on small screens
========================================================= */

/* 1) Ensure any decorative layers sit BEHIND content */
.dw-card,
.dw-panel,
.dw-box,
.dw-section,
.dw-quick-actions,
.dw-security {
  position: relative;
  overflow: hidden;
}

/* Push all "normal content" above decorative layers */
.dw-card > * ,
.dw-panel > * ,
.dw-box > * ,
.dw-section > * ,
.dw-quick-actions > * ,
.dw-security > * {
  position: relative;
  z-index: 2;
}

/* Try common classnames used for orbs/bubbles/noise/canvas layers */
.dw-noise,
.dw-canvas,
.dw-blob,
.dw-orb,
.dw-orbs,
.dw-bubble,
.dw-bubbles,
.dw-float,
.dw-fx,
[class*="blob"],
[class*="bubble"],
[class*="orb"] {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* 2) Mobile layout fixes */
@media (max-width: 720px) {

  /* Make “two column” grids stack */
  .dw-grid,
  .dw-dash-grid,
  .dw-dashboard-grid,
  .dw-layout,
  .dw-columns {
    display: block !important;
  }

  .dw-grid > *,
  .dw-dash-grid > *,
  .dw-dashboard-grid > *,
  .dw-layout > *,
  .dw-columns > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Make action rows wrap cleanly (fix text sitting under circles) */
  .dw-actions,
  .dw-quick-actions .dw-actions,
  .dw-qa-actions,
  .dw-row,
  .dw-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  /* Buttons/chips become consistent blocks */
  .dw-actions .dw-btn,
  .dw-qa-actions .dw-btn,
  .dw-buttons .dw-btn,
  .dw-actions a.dw-btn,
  .dw-actions button.dw-btn {
    flex: 1 1 calc(50% - 10px) !important;
    min-width: 140px !important;
    white-space: nowrap !important;
  }

  /* If screen is narrow, use full width buttons */
  @media (max-width: 420px) {
    .dw-actions .dw-btn,
    .dw-qa-actions .dw-btn,
    .dw-buttons .dw-btn {
      flex: 1 1 100% !important;
      min-width: 0 !important;
      white-space: normal !important;
    }
  }

  /* Prevent long labels from spilling */
  .dw-card h3,
  .dw-card h2,
  .dw-card p,
  .dw-btn,
  .dw-chip {
    word-break: break-word;
  }
}
/* =========================================================
   FIX: KPI/FUNDS GRID -> 2 COLUMNS ON MOBILE
   Wrapper: <div class="dw-grid kpis">
========================================================= */

@media (max-width: 720px) {
  .dw-grid.kpis{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .dw-grid.kpis > *{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Very small phones: 1 column to avoid squashing */
@media (max-width: 420px) {
  .dw-grid.kpis{
    grid-template-columns: 1fr !important;
  }
}
}