/* ==========================================================================
   ClickEarn — Responsive overrides
   ========================================================================== */
@media (max-width: 1399.98px){
  .app-content{ padding:24px 24px 8px; }
}

@media (max-width: 1199.98px){
  .topbar{ padding:0 20px; }
  .app-content{ padding:20px 20px 8px; }
  .promo-illustration{ display:none; }
}

@media (max-width: 991.98px){
  .stat-card .stat-value{ font-size:21px; }
  .topbar-greeting h1{ font-size:19px; }
  .chart-card{ padding:18px; }
}

@media (max-width: 767.98px){
  .topbar{ height:66px; }
  .topbar-greeting p{ display:none; }
  .user-menu-btn .u-role{ display:none; }
  .card-panel{ padding:18px; }
  .table-clean thead{ display:none; }
  .table-clean.table-stack tbody tr{ display:block; border-bottom:8px solid var(--color-bg); }
  .table-clean.table-stack tbody td{ display:flex; justify-content:space-between; align-items:center; white-space:normal; border-bottom:1px solid #F5F4FA; }
  .table-clean.table-stack tbody td::before{ content:attr(data-label); font-weight:800; color:var(--color-text-soft); font-size:11px; text-transform:uppercase; margin-right:12px; }
  .app-footer{ font-size:11px; }
}

@media (max-width: 575.98px){
  .topbar-greeting h1{ font-size:17px; }
  .stat-icon-tile{ width:42px; height:42px; font-size:16px; }
  .promo-hero{ padding:22px; }
  .promo-hero h3{ font-size:19px; }
  .wallet-balance-card .wb-amount{ font-size:26px; }
}

/* On very narrow screens, drop the "Welcome back" text entirely rather
   than shrink it further — the site logo (always visible) takes its
   place as the primary brand marker in the topbar. */
@media (max-width: 420px){
  .topbar-greeting{ display:none; }
}

/* Mobile hides desktop sidebar toggle collapse (collapse only for desktop) */
@media (max-width: 1199.98px){
  .sidebar-toggle-btn.desktop-only{ display:none; }
}
@media (min-width: 1200px){
  .mobile-only{ display:none !important; }
}

/* Laptop-range hardening (992px–1366px is the most common laptop width
   band) — prevents long content (emails, account details, sys-row
   values) from forcing horizontal overflow that pushes/breaks the
   layout below the fold. */
.app-main{ overflow-x:hidden; }
.sys-row{ flex-wrap:wrap; gap:4px; }
.sys-row .sys-value{ word-break:break-word; text-align:right; max-width:60%; }
.card-panel{ overflow-x:hidden; }
.card-panel pre{ overflow-x:auto; max-width:100%; }

/* Notification/user dropdowns are positioned relative to their toggle
   button (right:0, fixed width) — on narrow screens that button can sit
   close enough to the edge that the dropdown's width pushes past the
   actual viewport. Below 576px, switch them to viewport-fixed positioning
   instead so they can never overflow regardless of where the button is. */
@media (max-width: 575.98px){
  .ce-dropdown-menu{
    position:fixed !important;
    left:12px !important;
    right:12px !important;
    top:64px !important;
    width:auto !important;
    max-width:none !important;
  }
}

@media (min-width: 992px) and (max-width: 1366px){
  .app-content{ padding:20px 20px 8px; }
  .stat-card{ padding:16px; }
}