/* BadgersClaw Mobile Reference Scale v1.0.5
   Based on requested reference: larger NXT-style mobile login + readable off-canvas panel navigation. */
@media screen and (max-width: 820px) {
  html {
    -webkit-text-size-adjust: 160% !important;
    text-size-adjust: 160% !important;
    font-size: 21px !important;
  }
  body {
    font-size: 21px !important;
    line-height: 1.6 !important;
    overflow-x: hidden !important;
    min-width: 0 !important;
  }

  /* kill desktop zoom/shrink behavior */
  .page, .page-wrapper, .page-body, .page-main, .content, .container, .container-xl,
  .container-fluid, .nxt-shell, .nxt-dashboard, .dashboard, .dashboard-wrap,
  .hud-dashboard, main, #app, #page, #dashboard, .main-content, .app-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    transform: none !important;
    zoom: 1 !important;
  }

  /* stack all dashboards on phones */
  .row, .grid, .dashboard-grid, .hud-grid, .nxt-grid,
  [class*="dashboard-grid"], [class*="DashboardGrid"],
  [class*="widget-grid"], [class*="WidgetGrid"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  [class*="col-"], .col, .col-md-6, .col-lg-6, .col-xl-6,
  .col-md-8, .col-lg-8, .col-xl-8,
  .col-md-4, .col-lg-4, .col-xl-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* larger HUD cards/widgets */
  .card, .hud-card, .nxt-card, .widget, .hud-widget, .dashboard-card,
  .stat-card, .panel-card, .quick-card, .module-card,
  [class*="widget"], [class*="Widget"], [class*="card"], [class*="Card"] {
    font-size: 21px !important;
    padding: 24px !important;
    margin-bottom: 22px !important;
    border-radius: 22px !important;
    min-height: auto !important;
  }

  .card-header, .widget-header, .hud-card-header,
  [class*="header"], [class*="Header"] {
    min-height: 60px !important;
    padding: 18px 20px !important;
  }

  h1, .h1, .page-title, .dashboard-title { font-size: 40px !important; line-height: 1.15 !important; }
  h2, .h2, .section-title { font-size: 32px !important; line-height: 1.2 !important; }
  h3, .h3, .card-title, .widget-title, .hud-title { font-size: 26px !important; line-height: 1.25 !important; }
  h4, h5, h6 { font-size: 22px !important; }

  p, span, small, label, td, th, li, .text-muted, .subtext, .description,
  .card-subtitle, .widget-subtitle, .hud-subtitle, .badge, .btn, button, a {
    font-size: 19px !important;
    line-height: 1.45 !important;
  }

  table { font-size: 18px !important; }
  th, td { padding: 15px 12px !important; white-space: normal !important; }

  input, select, textarea, .form-control, .form-select {
    min-height: 58px !important;
    font-size: 20px !important;
    padding: 16px 18px !important;
    border-radius: 14px !important;
  }
  button, .btn, input[type="submit"], input[type="button"] {
    min-height: 56px !important;
    font-size: 19px !important;
    padding: 15px 20px !important;
    border-radius: 14px !important;
  }

  /* Mobile topbar must stay tappable and readable */
  .navbar, .topbar, .mobile-topbar, .hud-topbar, header {
    min-height: 72px !important;
  }
  .navbar-brand, .topbar-title, .mobile-title {
    font-size: 19px !important;
  }
  .hamburger, .menu-toggle, .sidebar-toggle, [data-sidebar-toggle], .mobile-menu-btn {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }

  /* Sidebar drawer: larger like the reference panel, readable labels, big tap rows */
  .sidebar, .app-sidebar, .nxt-sidebar, .hud-sidebar, #sidebar, #appSidebar,
  .sidebar-mobile, .mobile-sidebar, .drawer, .app-drawer, .offcanvas, .offcanvas-start {
    width: 86vw !important;
    min-width: 330px !important;
    max-width: 430px !important;
    font-size: 19px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .sidebar .brand, .app-sidebar .brand, .nxt-sidebar .brand,
  .hud-sidebar .brand, .drawer .brand, .offcanvas-title {
    font-size: 21px !important;
    min-height: 72px !important;
    padding: 18px 20px !important;
  }
  .sidebar a, .app-sidebar a, .nxt-sidebar a, .hud-sidebar a,
  #sidebar a, #appSidebar a,
  .sidebar .nav-link, .app-sidebar .nav-link, .nxt-sidebar .nav-link,
  .hud-sidebar .nav-link, .drawer .nav-link, .app-drawer .nav-link,
  .offcanvas .nav-link {
    min-height: 62px !important;
    font-size: 19px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .sidebar i, .sidebar svg, .sidebar .icon,
  .app-sidebar i, .app-sidebar svg, .app-sidebar .icon,
  .nxt-sidebar i, .nxt-sidebar svg, .nxt-sidebar .icon,
  .hud-sidebar i, .hud-sidebar svg, .hud-sidebar .icon,
  .drawer i, .drawer svg, .drawer .icon, .offcanvas i, .offcanvas svg {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 28px !important;
  }
  .sidebar .nav-section, .sidebar .nav-title, .sidebar .menu-title,
  .drawer .nav-section, .drawer .nav-title, .offcanvas .nav-section {
    font-size: 16px !important;
    letter-spacing: .08em !important;
    padding: 18px 20px 8px !important;
  }
  .sidebar-close, .drawer-close, .offcanvas .btn-close, [data-sidebar-close] {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }

  /* Login screen: match readable BadgersClaw reference sizing */
  body.login, body.auth, .login-page, .auth-page, .login-wrapper, .auth-wrapper,
  .login-body, .auth-body, .auth-body-bg {
    min-height: 100svh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px 22px !important;
    font-size: 20px !important;
  }
  .login-card, .auth-card, .card-login, .login-box, .auth-box,
  form.login-form, form.auth-form {
    width: min(86vw, 520px) !important;
    max-width: 520px !important;
    padding: 34px 28px !important;
    border-radius: 24px !important;
    font-size: 20px !important;
  }
  .login-card h1, .auth-card h1,
  .login-title, .auth-title, .login-card .title, .auth-card .title {
    font-size: 36px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    margin: 18px 0 24px !important;
  }
  .login-brand-logo, .auth-logo, .login-logo,
  .login-card img, .auth-card img {
    max-width: 210px !important;
    max-height: 130px !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .login-card label, .auth-card label, .login-box label, .auth-box label {
    font-size: 20px !important;
    margin: 15px 0 8px !important;
  }
  .login-card input, .auth-card input, .login-box input, .auth-box input {
    min-height: 58px !important;
    font-size: 20px !important;
    padding: 15px 18px !important;
  }
  .login-card button, .auth-card button, .login-box button, .auth-box button,
  .login-card .btn, .auth-card .btn {
    width: 100% !important;
    min-height: 60px !important;
    font-size: 21px !important;
    margin-top: 22px !important;
  }
  .g-recaptcha, .recaptcha, iframe[src*="recaptcha"] {
    transform: scale(1.05) !important;
    transform-origin: center center !important;
    max-width: 100% !important;
  }
}

@media screen and (max-width: 430px) {
  html { font-size: 22px !important; }
  body { font-size: 22px !important; }

  .page, .page-wrapper, .page-body, .page-main, .content, .container, .container-xl,
  .container-fluid, .nxt-shell, .nxt-dashboard, .dashboard, .dashboard-wrap,
  .hud-dashboard, main, #app, #page, #dashboard, .main-content, .app-content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .card, .hud-card, .nxt-card, .widget, .hud-widget, .dashboard-card,
  .stat-card, .panel-card, .quick-card, .module-card,
  [class*="widget"], [class*="Widget"], [class*="card"], [class*="Card"] {
    font-size: 22px !important;
    padding: 26px !important;
    margin-bottom: 24px !important;
  }

  h1, .h1, .page-title, .dashboard-title { font-size: 42px !important; }
  h2, .h2, .section-title { font-size: 34px !important; }
  h3, .h3, .card-title, .widget-title, .hud-title { font-size: 28px !important; }
  p, span, small, label, td, th, li, .text-muted, .subtext, .description,
  .card-subtitle, .widget-subtitle, .hud-subtitle, .badge, .btn, button, a {
    font-size: 20px !important;
  }

  .sidebar, .app-sidebar, .nxt-sidebar, .hud-sidebar, #sidebar, #appSidebar,
  .sidebar-mobile, .mobile-sidebar, .drawer, .app-drawer, .offcanvas, .offcanvas-start {
    width: 88vw !important;
    min-width: 340px !important;
    max-width: 440px !important;
  }
  .sidebar a, .app-sidebar a, .nxt-sidebar a, .hud-sidebar a,
  #sidebar a, #appSidebar a,
  .sidebar .nav-link, .app-sidebar .nav-link, .nxt-sidebar .nav-link,
  .hud-sidebar .nav-link, .drawer .nav-link, .app-drawer .nav-link,
  .offcanvas .nav-link {
    min-height: 66px !important;
    font-size: 20px !important;
  }
}