/* MAN Radius mobile layout — loaded after the existing desktop styles. */
.brandmark {
  width: 68px !important;
  height: 68px !important;
  max-width: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.login-story .brandmark { width: 96px !important; height: 96px !important; }
.viewer-password { user-select: text; }
.viewer-card-details b { user-select: text; }

@media (max-width: 900px) {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { margin: 0; }

  .shell { display: block !important; width: 100%; min-width: 0; }
  .main { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
  .content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 18px 14px 28px !important;
    overflow: hidden;
  }

  .sidebar {
    position: fixed !important;
    z-index: 1200 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(88vw, 330px) !important;
    max-width: 330px !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    transform: translateX(110%) !important;
    transition: transform .22s ease !important;
    box-shadow: -18px 0 50px rgba(31, 26, 54, .18) !important;
  }
  .sidebar.open { transform: translateX(0) !important; }
  .shell.sidebar-collapsed .sidebar { width: min(88vw, 330px) !important; }

  .topbar {
    position: sticky !important;
    z-index: 900 !important;
    top: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 70px !important;
    padding: 11px 14px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }
  #menu-toggle { display: inline-grid !important; place-items: center; width: 44px; height: 44px; }
  .breadcrumb { min-width: 0; font-size: 13px !important; line-height: 1.45; }
  .breadcrumb .top-eyebrow { display: block; font-size: 10px !important; }
  .topbar-tools { gap: 8px !important; }
  #clock { display: none !important; }

  .page-heading {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .page-heading > div { min-width: 0; width: 100%; }
  .page-heading h1 { margin: 0 0 7px !important; font-size: clamp(27px, 8vw, 36px) !important; line-height: 1.2 !important; }
  .page-heading p { margin: 0 !important; max-width: none !important; font-size: 14px !important; line-height: 1.85 !important; }
  .page-heading > button { width: 100% !important; min-height: 48px; justify-content: center; }

  .executive-metrics-grid,
  .metrics,
  .dashboard-analytics-grid,
  .dashboard-lower-grid,
  .two-col,
  .security-grid,
  .subscription-plans,
  .network-grid,
  .network-admin-grid,
  .network-management-grid,
  .integration-grid,
  .cards-grid {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .executive-metric,
  .metric,
  .panel,
  .sales-wave-card,
  .network-health-card,
  .inventory-card,
  .recent-card-orders,
  .network-admin-card,
  .network-management-card,
  .subscription-plan {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }
  .executive-metric { min-height: 148px !important; padding: 19px !important; }
  .executive-metric strong { font-size: 32px !important; }
  .executive-metric svg { width: 100% !important; }

  .panel-head { align-items: flex-start !important; gap: 12px !important; flex-wrap: wrap !important; }
  .panel-head > * { min-width: 0; }
  .panel-head h3 { line-height: 1.45; }
  .panel-body { min-width: 0; }

  .sales-wave-stage { width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sales-wave-stage svg { min-width: 560px; }
  .sales-wave-legend { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  .network-health-row { grid-template-columns: 8px minmax(0, 1fr) !important; gap: 10px !important; }
  .network-health-row aside { grid-column: 2; width: 100%; text-align: right !important; }
  .inventory-card-body { flex-direction: column !important; align-items: center !important; }
  .inventory-legend { width: 100% !important; }

  .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table { min-width: 680px; }

  .field-grid,
  .voucher-fields { grid-template-columns: minmax(0, 1fr) !important; }
  .field-grid > *,
  .voucher-fields > * { min-width: 0; width: 100%; }
  input, select, textarea, button { max-width: 100%; }
  .form-actions,
  .row-actions,
  .network-admin-actions,
  .network-tile-actions,
  .integration-actions,
  .subscription-contact,
  .dashboard-quick-links { flex-wrap: wrap !important; }
  .form-actions > button { flex: 1 1 140px; min-height: 46px; }

  dialog,
  dialog.modal-wide {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    margin: auto !important;
    padding: 16px !important;
    overflow: auto !important;
  }
  .modal-head { position: sticky; top: -16px; z-index: 2; padding-top: 8px; }

  .footer {
    width: 100% !important;
    padding: 20px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: center !important;
  }

  .login-layout { min-height: 100dvh !important; grid-template-columns: 1fr !important; }
  .login-story { display: none !important; }
  .login-form-wrap { width: 100% !important; padding: 18px 14px !important; }
  .login-card { width: 100% !important; max-width: 470px !important; margin: auto !important; }
  .captcha-row { grid-template-columns: minmax(0, 1fr) !important; }
  .captcha-row button { width: 100%; }
}

@media (max-width: 420px) {
  .content { padding-inline: 10px !important; }
  .topbar { padding-inline: 10px !important; }
  .panel { border-radius: 18px !important; }
  .executive-metric { border-radius: 18px !important; }
  .page-heading h1 { font-size: 29px !important; }
}