/* Global mobile tweaks for portrait phones */
@media (max-width: 600px) {
  /* Reduce default paddings from Mud classes when on small screens */
  .pa-4 { padding: 12px !important; }
  .pa-6 { padding: 12px !important; }
  .mt-12 { margin-top: 16px !important; }
  .mt-16 { margin-top: 56px !important; }

  /* AppBar: make space for fewer controls */
  .mud-appbar { padding-left: 8px; padding-right: 8px; }

  /* Tables/DataGrids: prevent forced overflow */
  .responsive-table { overflow-x: hidden; }
  .responsive-table table { min-width: unset; width: 100%; table-layout: auto; }

  /* Typography helpers */
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .break-words { word-break: break-word; overflow-wrap: anywhere; }

  /* Images responsive */
  img.responsive, .img-responsive { max-width: 100%; height: auto; }

  /* MudTabs overflow */
  .mud-tabs-toolbar { overflow-x: auto; }

  /* Dialog content: reduce padding */
  .mud-dialog .mud-dialog-content { padding: 12px !important; }

  /* Drawer width */
  .mud-drawer { width: 260px; }

  /* Highlight selected data grid rows when checkboxes are hidden */
  .dg-row-selected {
    background-color: rgba(25, 118, 210, 0.10) !important; /* primary with low alpha */
  }

  /* Keep category column sticky on mobile */
  .sticky-categories {
    position: sticky;
    top: 56px; /* mobile app bar height */
    z-index: 5;
  }
  /* Make header row sticky inside for extra safety */
  .sticky-categories-header {
    position: sticky;
    top: 56px; /* same as column top to pin header */
    z-index: 6;
    background: var(--mud-palette-surface, #fff);
    padding: 8px 0;
  }
  /* spacer below header to avoid overlap when sticky */
  .sticky-categories-spacer { height: 8px; }
}

/* Desktop/tablet styles */
@media (min-width: 601px) {
  /* Make category panel sticky below the app bar */
  .sticky-categories {
    position: sticky;
    top: 72px; /* roughly MudAppBar height + margin; adjust if needed */
    z-index: 5;
  }
}