/* =========================================================
   SATINE X — MOBILE VIEW ONLY (max-width: 1023px)
   Desktop is 100% untouched. All rules are inside this media query.
   ========================================================= */

@media (max-width: 1023px) {
  /* ---- HIDE DESKTOP HEADER ON MOBILE ---- */
  #main-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  #main-header + .h-16,
  #main-header + div[class*="h-16"] {
    display: none !important;
    height: 0 !important;
  }
  /* Also hide any desktop header spacers */
  .site-header + div:not(.lg\:hidden) {
    display: none !important;
  }

  /* ---- MOBILE HEADER STYLES ---- */
  #mobile-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
  }
  #mobile-header + .h-\[60px\] {
    height: 60px !important;
  }


  /* ---- HIDE SIDEBAR ---- */
  #sidebar,
  aside#sidebar {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #sidebar-overlay {
    display: none !important;
  }

  /* ---- RESET LAYOUT ---- */
  html, body {
    overflow-x: hidden !important;
    -webkit-tap-highlight-color: transparent;
  }
  body {
    padding-bottom: 100px !important;
    padding-top: 0 !important;
    margin: 0 !important;
  }
  body > div.min-h-screen.flex {
    display: block !important;
    min-height: auto !important;
  }
  .lg\:ml-\[260px\],
  .lg\:ml-\[250px\],
  .lg\:ml-\[240px\] {
    margin-left: 0 !important;
  }
  .flex-1.flex.flex-col {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  main {
    display: block !important;
    width: 100% !important;
    padding: 0.75rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 110px !important;
    overflow: visible !important;
    flex: none !important;
    min-height: auto !important;
  }

  /* Avatar with status dot */
  .mobile-user-dropdown-trigger {
    position: relative;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .mobile-dropdown-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-default);
  }
  .mobile-dropdown-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EC4899, #BE185D);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
  }
  .mobile-dropdown-status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #22C55E;
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
  }

  /* Dropdown menu */
  .mobile-user-dropdown-menu {
    position: fixed !important;
    top: 70px !important;
    left: 12px !important;
    right: 12px !important;
    max-width: 320px !important;
    width: auto !important;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 16px;
    padding: 1rem !important;
    z-index: 9999 !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  }
  .mobile-greeting-left {
    position: relative !important;
  }
  .mobile-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem 0.75rem;
  }
  .mobile-dropdown-header-avatar,
  .mobile-dropdown-header-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }
  .mobile-dropdown-header-avatar-placeholder {
    background: linear-gradient(135deg, #EC4899, #BE185D);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1rem;
  }
  .mobile-dropdown-header-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
  }
  .mobile-dropdown-header-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-dropdown-header-email {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-dropdown-divider {
    height: 1px;
    background: var(--border-default);
    margin: 0.5rem 0.75rem;
  }
  .mobile-dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    color: var(--text-primary);
    font-size: 0.8rem;
    text-decoration: none;
    transition: background 0.15s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
  }
  .mobile-dropdown-link:hover,
  .mobile-dropdown-link:active {
    background: var(--bg-hover);
  }
  .mobile-dropdown-link svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
  }
  .mobile-dropdown-logout {
    color: #EF4444;
  }
  .mobile-dropdown-logout svg {
    color: #EF4444;
  }

  /* =========================================================
     MOBILE NOTIFICATION BUTTON
     ========================================================= */
  .mobile-notif-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.2s;
    margin-right: 0.5rem;
  }
  .mobile-notif-btn:active {
    transform: scale(0.95);
    background: var(--bg-hover);
  }
  .mobile-notif-btn svg {
    width: 20px !important;
    height: 20px !important;
    color: var(--text-primary) !important;
  }
  .mobile-notif-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: #EC4899;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
  }

    /* =========================================================
     MOBILE STICKY PAGE TITLE (for non-dashboard pages)
     ========================================================= */
  .mobile-sticky-title {
    position: sticky !important;
    top: 56px !important;
    z-index: 35 !important;
    background: var(--bg-primary) !important;
    padding: 0.75rem 0.75rem 0.5rem !important;
    margin: 0 -0.75rem 0.5rem !important;
    border-bottom: 1px solid var(--border-default) !important;
  }
  .mobile-sticky-title h1 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
  }
  .mobile-sticky-title p {
    font-size: 0.75rem !important;
    color: var(--text-muted) !important;
    margin: 0.15rem 0 0 !important;
  }

/* =========================================================
     KYC BANNER
     ========================================================= */
  .kyc-banner-new {
    padding: 1rem !important;
    border-radius: 16px !important;
    margin-bottom: 1rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.06), rgba(190, 24, 93, 0.04)) !important;
    border: 1px solid rgba(236, 72, 153, 0.12) !important;
  }
  .kyc-banner-new > div:first-child {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  .kyc-banner-icon {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(236, 72, 153, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F472B6;
  }
  .kyc-banner-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .kyc-banner-text { flex: 1; }
  .kyc-banner-text h4 {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin: 0;
    line-height: 1.3;
  }
  .kyc-banner-text p {
    font-size: 0.7rem !important;
    color: var(--text-muted) !important;
    margin: 0.15rem 0 0 0;
    line-height: 1.4;
  }
  .kyc-banner-new a,
  .kyc-banner-new .kyc-banner-btn,
  .kyc-banner-btn {
    display: block !important;
    width: 100% !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-align: center;
    background: linear-gradient(135deg, #EC4899, #BE185D) !important;
    color: white !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer;
  }

  /* =========================================================
     STATS GRID — REFERENCE IMAGE LAYOUT
     1. Big Total Balance (full width)
     2. Deposits | Withdrawals | Transactions (3 columns)
     ========================================================= */
  .stats-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
  }

  /* Balance card — full width, row 1 */
  .stats-grid .stat-card:nth-child(1) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  /* Deposits, Withdrawals, Transactions — row 2, 3 columns */
  .stats-grid .stat-card:nth-child(2),
  .stats-grid .stat-card:nth-child(3),
  .stats-grid .stat-card:nth-child(4) {
    grid-column: auto !important;
    grid-row: 2 !important;
  }

  /* Override to 3 columns for row 2 */
  .stats-grid .stat-card:nth-child(2) { grid-column: 1 / 2 !important; }
  .stats-grid .stat-card:nth-child(3) { grid-column: 2 / 3 !important; }
  .stats-grid .stat-card:nth-child(4) { grid-column: 3 / 4 !important; }

  /* Force the grid to have proper subgrid for row 2 */
  .stats-grid {
    grid-template-areas:
      "balance balance balance"
      "deposits withdrawals transactions" !important;
  }
  .stats-grid .stat-card:nth-child(1) { grid-area: balance !important; }
  .stats-grid .stat-card:nth-child(2) { grid-area: deposits !important; }
  .stats-grid .stat-card:nth-child(3) { grid-area: withdrawals !important; }
  .stats-grid .stat-card:nth-child(4) { grid-area: transactions !important; }

  /* Balance card — bigger and prominent */
  .stats-grid .stat-card:nth-child(1) {
    padding: 1.25rem !important;
  }
  .stats-grid .stat-card:nth-child(1) .stat-card-label {
    font-size: 0.8rem !important;
  }
  .stats-grid .stat-card:nth-child(1) .stat-card-value {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .stats-grid .stat-card:nth-child(1) .stat-card-period {
    font-size: 0.7rem !important;
  }
  .stats-grid .stat-card:nth-child(1) .icon-pink {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px;
  }
  .stats-grid .stat-card:nth-child(1) .icon-pink svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* 3 smaller cards — compact */
  .stats-grid .stat-card:nth-child(2),
  .stats-grid .stat-card:nth-child(3),
  .stats-grid .stat-card:nth-child(4) {
    padding: 0.75rem !important;
  }
  .stats-grid .stat-card:nth-child(2) .stat-card-header,
  .stats-grid .stat-card:nth-child(3) .stat-card-header,
  .stats-grid .stat-card:nth-child(4) .stat-card-header {
    margin-bottom: 0.5rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.35rem !important;
  }
  .stats-grid .stat-card:nth-child(2) .stat-card-label,
  .stats-grid .stat-card:nth-child(3) .stat-card-label,
  .stats-grid .stat-card:nth-child(4) .stat-card-label {
    font-size: 0.6rem !important;
  }
  .stats-grid .stat-card:nth-child(2) .stat-card-value,
  .stats-grid .stat-card:nth-child(3) .stat-card-value,
  .stats-grid .stat-card:nth-child(4) .stat-card-value {
    font-size: 0.85rem !important;
    margin-bottom: 0.35rem !important;
  }
  .stats-grid .stat-card:nth-child(2) .stat-card-period,
  .stats-grid .stat-card:nth-child(3) .stat-card-period,
  .stats-grid .stat-card:nth-child(4) .stat-card-period {
    font-size: 0.55rem !important;
  }
  .stats-grid .stat-card:nth-child(2) .stat-card-trend,
  .stats-grid .stat-card:nth-child(3) .stat-card-trend,
  .stats-grid .stat-card:nth-child(4) .stat-card-trend {
    font-size: 0.6rem !important;
  }
  /* Smaller icons for the 3 bottom cards */
  .stats-grid .stat-card:nth-child(2) .icon-green,
  .stats-grid .stat-card:nth-child(3) .icon-orange,
  .stats-grid .stat-card:nth-child(4) .icon-blue {
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px;
  }
  .stats-grid .stat-card:nth-child(2) .icon-green svg,
  .stats-grid .stat-card:nth-child(3) .icon-orange svg,
  .stats-grid .stat-card:nth-child(4) .icon-blue svg {
    width: 11px !important;
    height: 11px !important;
  }
  /* Hide eye button on the 3 small cards */
  .stats-grid .stat-card:nth-child(2) .stat-eye-btn,
  .stats-grid .stat-card:nth-child(3) .stat-eye-btn,
  .stats-grid .stat-card:nth-child(4) .stat-eye-btn {
    display: none !important;
  }

  /* Stat card base */
  .stat-card {
    padding: 1rem !important;
    border-radius: 16px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-default) !important;
    position: relative;
    overflow: hidden;
    display: block !important;
    width: 100% !important;
  }
  .stat-card-pink::before { background: linear-gradient(90deg, #EC4899, #F472B6); }
  .stat-card-green::before { background: linear-gradient(90deg, #22C55E, #10B981); }
  .stat-card-orange::before { background: linear-gradient(90deg, #F59E0B, #EF4444); }
  .stat-card-blue::before { background: linear-gradient(90deg, #3B82F6, #06B6D4); }
  .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
  }

  .stat-card-header {
    margin-bottom: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .stat-card-label {
    font-size: 0.7rem !important;
    color: var(--text-muted) !important;
    font-weight: 500;
  }
  .stat-card-header > div:last-child,
  .stat-card-header > .flex {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  .stat-card .icon-pink,
  .stat-card .icon-green,
  .stat-card .icon-orange,
  .stat-card .icon-blue,
  .stat-card .icon-red {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .stat-card .icon-pink { background: linear-gradient(135deg, #EC4899, #F472B6); }
  .stat-card .icon-green { background: linear-gradient(135deg, #22C55E, #10B981); }
  .stat-card .icon-orange { background: linear-gradient(135deg, #F59E0B, #EF4444); }
  .stat-card .icon-blue { background: linear-gradient(135deg, #3B82F6, #06B6D4); }
  .stat-card .icon-red { background: linear-gradient(135deg, #EF4444, #F87171); }
  .stat-card .icon-pink svg,
  .stat-card .icon-green svg,
  .stat-card .icon-orange svg,
  .stat-card .icon-blue svg,
  .stat-card .icon-red svg {
    width: 13px !important;
    height: 13px !important;
    color: white !important;
  }

  .stat-eye-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .stat-eye-btn svg {
    width: 13px !important;
    height: 13px !important;
  }

  .stat-card-value {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
  }
  .stat-card-value.hidden-balance {
    font-size: 1rem !important;
    letter-spacing: 0.2em !important;
  }

  .stat-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .stat-card-period {
    font-size: 0.65rem !important;
    color: var(--text-muted) !important;
  }
  .stat-card-trend {
    font-size: 0.7rem !important;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .stat-card-trend.up { color: #22C55E; }
  .stat-card-trend.down { color: #EF4444; }

  /* =========================================================
     MAIN GRID
     ========================================================= */
  .main-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }
  .left-col,
  .right-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  /* =========================================================
     CHART + QUICK ACTIONS
     ========================================================= */
  .chart-quick-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }
  .chart-quick-row .quick-actions-card {
    order: -1 !important;
  }
  .chart-quick-row .chart-card {
    order: 1 !important;
  }
  .chart-card {
    padding: 1rem !important;
    border-radius: 16px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-default) !important;
    display: block !important;
    width: 100% !important;
  }
  .chart-card h3 {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin: 0 0 0.25rem 0;
    color: var(--text-primary) !important;
  }
  .chart-card p {
    font-size: 0.7rem !important;
    margin: 0 0 0.75rem 0;
    color: var(--text-muted) !important;
  }
  .chart-container {
    height: 180px !important;
    position: relative;
    width: 100% !important;
  }

  /* =========================================================
     QUICK ACTIONS — Only 4 VTU buttons on mobile
     Hide Fund Wallet (1st) and Withdraw (2nd)
     ========================================================= */
  .quick-actions-card {
    padding: 1rem !important;
    border-radius: 16px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-default) !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.75rem;
  }
  .quick-actions-card h3 {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin: 0 0 0.875rem 0;
    color: var(--text-primary) !important;
  }
  .quick-actions-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  /* Hide Fund Wallet and Withdraw on mobile */
  .quick-actions-grid .quick-action:nth-child(1),
  .quick-actions-grid .quick-action:nth-child(2) {
    display: none !important;
  }

  .quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.25rem;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    text-decoration: none;
    transition: transform 0.15s, background 0.2s;
  }
  .quick-action:active {
    transform: scale(0.96);
    background: var(--bg-hover);
  }
  .quick-action .icon-pink,
  .quick-action .icon-green,
  .quick-action .icon-red,
  .quick-action .icon-blue,
  .quick-action .icon-orange {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .quick-action .icon-pink { background: linear-gradient(135deg, #EC4899, #F472B6); }
  .quick-action .icon-green { background: linear-gradient(135deg, #22C55E, #10B981); }
  .quick-action .icon-red { background: linear-gradient(135deg, #EF4444, #F87171); }
  .quick-action .icon-blue { background: linear-gradient(135deg, #3B82F6, #06B6D4); }
  .quick-action .icon-orange { background: linear-gradient(135deg, #F59E0B, #EF4444); }
  .quick-action .icon-pink svg,
  .quick-action .icon-green svg,
  .quick-action .icon-red svg,
  .quick-action .icon-blue svg,
  .quick-action .icon-orange svg {
    width: 16px !important;
    height: 16px !important;
    color: white !important;
  }
  .quick-action span {
    font-size: 0.6rem !important;
    text-align: center;
    color: var(--text-secondary) !important;
    font-weight: 500;
  }

  /* =========================================================
     TRANSACTIONS, WALLET SUMMARY, ETC.
     ========================================================= */
  .card {
    padding: 1rem !important;
    border-radius: 16px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-default) !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.75rem;
  }
  .card h3 {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin: 0 0 0.75rem 0;
    color: var(--text-primary) !important;
  }
  .tx-table {
    display: block !important;
    width: 100% !important;
  }
  .tx-table thead { display: none !important; }
  .tx-table tbody {
    display: block !important;
    width: 100% !important;
  }
  .tx-table tr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.875rem 0 !important;
    border-bottom: 1px solid var(--border-default) !important;
    width: 100% !important;
  }
  .tx-table tr:last-child { border-bottom: none !important; }
  .tx-table td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    width: auto !important;
  }
  .tx-table td:first-child { flex: 1; }
  .tx-type-cell {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }
  .tx-type-info { flex: 1; }
  .tx-type-name {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    display: block;
  }
  .tx-type-detail {
    font-size: 0.7rem !important;
    color: var(--text-muted) !important;
    display: block !important;
  }
  .tx-amount {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    display: block;
    text-align: right;
  }
  .tx-amount.positive { color: #22C55E !important; }
  .tx-amount.negative { color: #EF4444 !important; }
  .status-successful,
  .status-processing,
  .status-failed,
  .status-pending {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.6rem !important;
    border-radius: 8px;
    display: inline-block;
    font-weight: 500;
  }
  .status-successful { background: rgba(34, 197, 94, 0.15); color: #22C55E; }
  .status-processing { background: rgba(245, 158, 11, 0.15); color: #F59E0B; }
  .status-failed { background: rgba(239, 68, 68, 0.15); color: #EF4444; }
  .status-pending { background: rgba(148, 163, 184, 0.15); color: #94A3B8; }
  .tx-date {
    font-size: 0.7rem !important;
    color: var(--text-muted) !important;
    display: block;
    text-align: right;
  }
  .tx-date-time {
    font-size: 0.65rem !important;
    display: block;
    text-align: right;
  }
  .right-col .card {
    padding: 1rem !important;
    border-radius: 16px !important;
  }
  .summary-item {
    padding: 0.75rem 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-default);
  }
  .summary-item:last-child { border-bottom: none; }
  .summary-item span:first-child {
    font-size: 0.8rem !important;
    color: var(--text-secondary) !important;
  }
  .summary-item span:last-child {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
  }
  .btn-primary {
    padding: 0.875rem !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #EC4899, #BE185D) !important;
    color: white !important;
    text-align: center;
    display: block;
    text-decoration: none;
    font-weight: 600;
    margin-top: 0.75rem;
  }

  /* =========================================================
     BOTTOM NAV & MISC
     ========================================================= */
  nav.fixed.bottom-0 {
    display: block !important;
    z-index: 50 !important;
  }
  nav.fixed.bottom-0 .max-w-md {
    max-width: 100% !important;
  }
  .empty-state-new {
    padding: 2rem !important;
    text-align: center;
  }
  .empty-state-new svg {
    width: 40px !important;
    height: 40px !important;
    margin: 0 auto 1rem;
    display: block;
    color: var(--text-muted);
  }
  .empty-state-new p {
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
  }
  main > .mb-4.p-4.rounded-xl {
    padding: 0.875rem 1rem !important;
    border-radius: 12px !important;
    font-size: 0.85rem !important;
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    width: 100% !important;
  }
  main > .mb-4.p-4.rounded-xl svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
  }
  .page-header {
    display: none !important;
  }
  .dashboard-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  div { min-width: 0 !important; }

}

/* =========================================================
   DESKTOP — hide all mobile-only elements
   ========================================================= */
@media (min-width: 1024px) {
  .mobile-greeting,
  .mobile-user-dropdown,
  .mobile-user-dropdown-menu,
  .mobile-dropdown-header,
  .mobile-dropdown-link,
  .mobile-dropdown-divider {
    display: none !important;
  }

  
}