/* ERPPlus dashboard mobile hardening.
   This stylesheet is global, while Dashboard.razor.css is CSS-isolated.
   Keep selectors scoped to .erpdb-reference and use descendants here. */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  .erpdb-reference,
  .erpdb-reference-board,
  .erpdb-reference-widget,
  .erpdb-reference-widget-body,
  .erpdb-reference-widget-body > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .erpdb-reference { gap: 14px !important; overflow-x: clip !important; }

  .erpdb-reference-board {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 14px !important;
    align-items: start !important;
    overflow: visible !important;
  }

  .erpdb-reference .erpdb-reference-widget,
  .erpdb-reference .erpdb-reference-span-12,
  .erpdb-reference .erpdb-reference-span-8,
  .erpdb-reference .erpdb-reference-span-4,
  .erpdb-reference .erpdb-reference-widget--hero,
  .erpdb-reference .erpdb-reference-widget--kpis,
  .erpdb-reference .erpdb-reference-widget--charts,
  .erpdb-reference .erpdb-reference-widget--reports,
  .erpdb-reference .erpdb-reference-widget--finance,
  .erpdb-reference .erpdb-reference-widget--quick,
  .erpdb-reference .erpdb-reference-widget--ai,
  .erpdb-reference .erpdb-reference-widget--health,
  .erpdb-reference .erpdb-reference-widget--user-sales,
  .erpdb-reference .erpdb-reference-widget.erpdb-size-small,
  .erpdb-reference .erpdb-reference-widget.erpdb-size-medium,
  .erpdb-reference .erpdb-reference-widget.erpdb-size-large,
  .erpdb-reference .erpdb-reference-widget.erpdb-size-full {
    grid-column: 1 / -1 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .erpdb-reference .erpdc-toolbar-pro {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    padding: 12px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .erpdb-reference .erpdc-toolbar-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .erpdb-reference .erpdc-toolbar-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  .erpdb-reference .erpdc-toolbar-info > div { min-width: 0 !important; }
  .erpdb-reference .erpdc-toolbar-info strong { font-size: 16px !important; line-height: 1.45 !important; }
  .erpdb-reference .erpdc-toolbar-info > div > span { display: block !important; font-size: 11px !important; line-height: 1.6 !important; }

  .erpdb-reference .erpdc-toolbar-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    flex: 0 0 46px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  .erpdb-reference .erpdc-toolbar-icon img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .erpdb-reference .erpdc-toolbar-tools,
  .erpdb-reference .erpdc-toolbar-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .erpdb-reference .erpdc-toolbar-buttons { margin-top: 10px !important; }

  .erpdb-reference .erpdc-toolbar-tools button,
  .erpdb-reference .erpdc-toolbar-buttons button,
  .erpdb-reference .erpdc-toolbar-pro .mud-button-root,
  .erpdb-reference .erpdc-toolbar-pro .mud-icon-button-root {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 8px !important;
    border-radius: 13px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .erpdb-reference .erpdc-toolbar-tools .theme { grid-column: 1 / -1 !important; }

  .erpdb-reference .erpdc-hero {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }
  .erpdb-reference .erpdc-hero h1 { font-size: 22px !important; line-height: 1.45 !important; }

  .erpdb-reference .erpdc-kpis,
  .erpdb-reference .erpdc-kpi-grid,
  .erpdb-reference .erpdc-charts,
  .erpdb-reference .erpdc-health-pro-grid,
  .erpdb-reference .erpdc-ai-metrics,
  .erpdb-reference .erpdc-finance-grid,
  .erpdb-reference .finance-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .erpdb-reference .erpdc-actions-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .erpdb-reference .erpdc-kpi-card,
  .erpdb-reference .erpdc-chart-card,
  .erpdb-reference .erpdc-reports-enterprise,
  .erpdb-reference .erpdc-actions-enterprise,
  .erpdb-reference .erpdc-finance-enterprise,
  .erpdb-reference .erpdc-ai-enterprise,
  .erpdb-reference .erpdc-health-pro,
  .erpdb-reference .erpdc-footer-enterprise {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .erpdb-reference .erpdc-kpi-card { min-height: 110px !important; }

  .erpdb-reference .erpdc-report-item,
  .erpdb-reference .finance-card,
  .erpdb-reference .erpdc-actions-grid a,
  .erpdb-reference .erpdc-health-pro-grid article,
  .erpdb-reference .erpdc-ai-result,
  .erpdb-reference .erpdc-ai-metrics > div,
  .erpdb-reference .erpdc-health-score,
  .erpdb-reference .erpdc-health-pro-footer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .erpdb-reference .erpdc-chart-body,
  .erpdb-reference .erpdc-chart-area {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 210px !important;
    height: 210px !important;
    overflow: hidden !important;
  }

  .erpdb-reference .erpdc-chart-card svg,
  .erpdb-reference .erpdc-chart-card canvas {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 210px !important;
    height: 210px !important;
    display: block !important;
  }

  .erpdb-reference h1,
  .erpdb-reference h2,
  .erpdb-reference h3,
  .erpdb-reference h4,
  .erpdb-reference p,
  .erpdb-reference span,
  .erpdb-reference strong,
  .erpdb-reference small,
  .erpdb-reference label {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .erpdb-reference table,
  .erpdb-reference .mud-table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 520px) {
  .erpdb-reference,
  .erpdb-reference-board { gap: 10px !important; }

  .erpdb-reference .erpdc-toolbar-pro { padding: 10px !important; border-radius: 18px !important; }

  .erpdb-reference .erpdc-toolbar-tools button,
  .erpdb-reference .erpdc-toolbar-buttons button { font-size: 10.5px !important; }

  .erpdb-reference .erpdc-kpi-card,
  .erpdb-reference .erpdc-chart-card,
  .erpdb-reference .erpdc-reports-enterprise,
  .erpdb-reference .erpdc-actions-enterprise,
  .erpdb-reference .erpdc-finance-enterprise,
  .erpdb-reference .erpdc-ai-enterprise,
  .erpdb-reference .erpdc-health-pro,
  .erpdb-reference .erpdc-footer-enterprise {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .erpdb-reference .erpdc-chart-body,
  .erpdb-reference .erpdc-chart-area,
  .erpdb-reference .erpdc-chart-card svg,
  .erpdb-reference .erpdc-chart-card canvas {
    min-height: 190px !important;
    height: 190px !important;
  }
}