/*
 * Flowise Mobile Responsiveness Overrides
 * Injected via Nginx sub_filter — does NOT modify the Flowise container.
 * Audit: /root/workspace/projects/flowise-mobile.md
 * Date:  2026-02-14
 *
 * To disable: remove the sub_filter lines from the Nginx config and reload.
 */

/* ==========================================================================
   ISSUE 1 — Main content width broken on mobile
   Source: layout/MainLayout/index.jsx lines 31-41
   The styled <main> uses width: calc(100% - 260px) at all breakpoints.
   On a 375px phone that leaves a 115px content area.
   ========================================================================== */

@media (max-width: 768px) {
  .MuiBox-root > main {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 8px !important;
  }
}

/* ==========================================================================
   ISSUE 2 — Header toolbar height and element overflow
   Source: layout/MainLayout/index.jsx line 89, Header/index.jsx
   80px header with 228px logo section, GitHub stars, dark-mode toggle,
   profile — all in one row. Overflows on mobile.
   ========================================================================== */

@media (max-width: 768px) {
  /* Shrink the header */
  .MuiAppBar-root .MuiToolbar-root {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 8px !important;
  }

  /* Shrink the logo / hamburger container */
  .MuiAppBar-root .MuiToolbar-root > .MuiBox-root:first-child {
    width: auto !important;
    min-width: 0 !important;
  }

  /* Hide the GitHub star button (second box child in header) */
  .MuiAppBar-root .MuiToolbar-root > .MuiBox-root:nth-child(2) {
    display: none !important;
  }

  /* Shrink the dark-mode toggle and ensure it's not clipped */
  .MuiAppBar-root .MuiSwitch-root {
    transform: scale(0.7);
    margin-left: 0 !important;
    margin-right: -4px !important;
    flex-shrink: 0 !important;
  }

  /* Ensure header toolbar doesn't clip children */
  .MuiAppBar-root .MuiToolbar-root {
    overflow: visible !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   ISSUE 3 — Sidebar drawer fixed at 260px
   Source: layout/MainLayout/Sidebar/index.jsx line 81
   260px on a 320px screen covers 81% of the viewport.
   ========================================================================== */

@media (max-width: 768px) {
  .MuiDrawer-paper {
    max-width: 80vw !important;
  }
}

/* ==========================================================================
   ISSUE 4 — Canvas header toolbar too cramped
   Source: views/canvas/CanvasHeader.jsx lines 253-254
   Flow name gets truncated to nothing; action buttons overlap.
   ========================================================================== */

@media (max-width: 768px) {
  /* Let the outer canvas-header stack wrap */
  .MuiAppBar-root .MuiToolbar-root > .MuiStack-root {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* Left side (back + name): use more of the row */
  .MuiAppBar-root .MuiToolbar-root > .MuiStack-root > .MuiStack-root:first-child {
    max-width: 65% !important;
    min-width: 0 !important;
  }

  /* Flow name: allow it to shrink */
  .MuiAppBar-root .MuiToolbar-root .MuiTypography-root {
    font-size: 1rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Shrink the round icon buttons in canvas header */
  .MuiAppBar-root .MuiToolbar-root .MuiButtonBase-root .MuiAvatar-root {
    width: 30px !important;
    height: 30px !important;
  }

  /* Tighten button spacing */
  .MuiAppBar-root .MuiToolbar-root .MuiButtonBase-root {
    margin-right: 4px !important;
  }
}

/* ==========================================================================
   ISSUE 5 — Canvas area height off by header padding
   Source: views/canvas/index.jsx line 583
   height: 100vh + padding-top: 70px causes overflow.
   ========================================================================== */

@media (max-width: 768px) {
  /* Adjust the top padding to match the smaller mobile header */
  .MuiAppBar-root + .MuiBox-root {
    padding-top: 56px !important;
    height: 100vh !important;
  }

  .reactflow-parent-wrapper,
  .reactflow-wrapper {
    height: calc(100vh - 56px) !important;
  }

  /* Keep ReactFlow controls visible and centered at bottom */
  .react-flow__controls {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    left: 50% !important;
    bottom: 10px !important;
    transform: translate(-50%, 0) !important;
  }
}

/* ==========================================================================
   ISSUE 6 — Canvas nodes too wide for mobile
   Source: CanvasNode / NodeCardWrapper
   Nodes have fixed min-widths exceeding mobile viewport.
   ========================================================================== */

@media (max-width: 768px) {
  .react-flow__node-customNode {
    min-width: unset !important;
    max-width: 250px !important;
  }

  .react-flow__node-customNode .MuiCardContent-root {
    padding: 8px !important;
  }

  .react-flow__node-customNode .MuiTypography-root {
    font-size: 0.75rem !important;
  }

  /* Sticky notes too */
  .react-flow__node-stickyNote {
    min-width: unset !important;
    max-width: 200px !important;
  }
}

/* ==========================================================================
   ISSUE 7 — AddNodes panel extends past viewport
   Source: views/canvas/AddNodes.jsx lines 592-597
   Popper with maxWidth: 370 can clip on narrow screens.
   ========================================================================== */

@media (max-width: 768px) {
  /* Make the AddNodes panel a full-width bottom sheet */
  .react-flow .MuiPopper-root {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: none !important;
    z-index: 1300 !important;
  }

  .react-flow .MuiPopper-root .MuiPaper-root {
    max-height: 60vh !important;
    border-radius: 12px 12px 0 0 !important;
    overflow-y: auto !important;
  }
}

/* ==========================================================================
   ISSUE 8 — ViewHeader search bar fixed width on tablets
   Source: layout/MainLayout/ViewHeader.jsx line 102
   325px width leaves no room for action buttons on small tablets.
   ========================================================================== */

@media (max-width: 900px) and (min-width: 600px) {
  .MuiToolbar-root .MuiOutlinedInput-root {
    width: 200px !important;
  }
}

/* ==========================================================================
   GENERAL — Touch-friendly tap targets
   Minimum 44x44px recommended by WCAG / Apple HIG.
   ========================================================================== */

@media (max-width: 768px) {
  .MuiButtonBase-root {
    min-height: 40px;
    min-width: 40px;
  }

  /* Prevent horizontal page overflow */
  body {
    overflow-x: hidden !important;
  }
}

/* ==========================================================================
   ISSUE 9 — Mobile browser auto-zoom on tap
   When font-size < 16px, iOS Safari and some Android browsers zoom in
   on focus. Force 16px minimum on all interactive elements to prevent it.
   ========================================================================== */

@media (max-width: 768px) {
  input,
  select,
  textarea,
  .MuiInputBase-input,
  .MuiOutlinedInput-input,
  .MuiSelect-select,
  .MuiMenuItem-root,
  .MuiListItemText-primary,
  .MuiListItemButton-root {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   ISSUE 10 — Auth pages (login, register, forgot-password, verify-email)
   Source: views/auth/signIn.jsx line 181, register.jsx line 268, etc.
   All auth forms use a hardcoded width: 480px Stack inside a MainCard
   inside AuthLayout (100vw centered). On mobile, 480px exceeds the
   viewport causing right-side cutoff.
   ========================================================================== */

@media (max-width: 768px) {
  /* AuthLayout wrapper: use 100% instead of 100vw to avoid scrollbar overflow */
  body > #root > .MuiBox-root {
    width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  /* The 480px form Stack inside auth pages: fit to screen */
  .MuiCard-root .MuiStack-root[style*="flex-direction: column"],
  .MuiCard-root > .MuiCardContent-root > .MuiStack-root {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* MainCard itself: don't exceed viewport */
  .MuiCard-root {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Auth form buttons: full width on mobile */
  .MuiCard-root .MuiLoadingButton-root,
  .MuiCard-root .MuiButton-outlined {
    width: 100% !important;
    margin-right: 0 !important;
  }
}

/* ==========================================================================
   ISSUE 11 — Global mobile typography and button scaling
   Source: themes/typography.js
   Many font sizes are 0.75rem (12px) or 0.875rem (14px), too small on mobile.
   Page titles (h1) at 2.125rem (34px) are too large for narrow screens.
   Buttons and interactive primitives need readable, tappable sizing.
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Page titles: scale down h1/h2 for mobile --- */
  .MuiTypography-h1 {
    font-size: 1.5rem !important;     /* 34px -> 24px */
  }
  .MuiTypography-h2 {
    font-size: 1.25rem !important;    /* 24px -> 20px */
  }
  .MuiTypography-h3 {
    font-size: 1.1rem !important;     /* 20px -> 17.6px */
  }

  /* --- Body text: bump small sizes to readable 14-15px minimum --- */
  .MuiTypography-h5,
  .MuiTypography-h6,
  .MuiTypography-body1,
  .MuiTypography-body2,
  .MuiTypography-subtitle1,
  .MuiTypography-subtitle2 {
    font-size: 0.9rem !important;     /* ~14.4px, readable on mobile */
  }
  .MuiTypography-caption {
    font-size: 0.8rem !important;     /* 12px -> 12.8px */
  }

  /* --- Buttons: readable text + proper tap targets --- */
  .MuiButton-root,
  .MuiLoadingButton-root {
    font-size: 0.9rem !important;
    min-height: 44px !important;
    padding: 8px 16px !important;
  }

  /* FAB buttons (+ Add New, etc.) */
  .MuiFab-root {
    font-size: 0.85rem !important;
  }

  /* Toggle buttons (grid/list view switcher) */
  .MuiToggleButton-root {
    min-height: 40px !important;
    min-width: 40px !important;
  }

  /* --- Chips (tags, badges, BETA labels) --- */
  .MuiChip-root {
    font-size: 0.75rem !important;
    height: 28px !important;
  }
  .MuiChip-label {
    padding: 0 8px !important;
  }

  /* --- Sidebar menu items --- */
  .MuiListItemButton-root {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .MuiListItemText-primary {
    font-size: 0.95rem !important;
  }
  .MuiListItemText-secondary {
    font-size: 0.8rem !important;
  }
  .MuiListItemIcon-root {
    min-width: 32px !important;
  }

  /* --- Card content (ItemCard flow cards) --- */
  .MuiCardContent-root {
    padding: 12px !important;
  }

  /* --- Tabs (used in AddNodes panel, settings, etc.) --- */
  .MuiTab-root {
    font-size: 0.85rem !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    min-width: unset !important;
  }

  /* --- Dialogs: ensure they fit mobile screens --- */
  .MuiDialog-paper {
    margin: 8px !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 16px) !important;
    width: 100% !important;
  }
  .MuiDialogTitle-root {
    font-size: 1.1rem !important;
    padding: 12px 16px !important;
  }
  .MuiDialogContent-root {
    padding: 12px 16px !important;
  }
  .MuiDialogActions-root {
    padding: 8px 16px !important;
  }

  /* --- Tooltip: larger text on mobile --- */
  .MuiTooltip-tooltip {
    font-size: 0.85rem !important;
  }

  /* --- Accordion (AddNodes categories) --- */
  .MuiAccordionSummary-content .MuiTypography-root {
    font-size: 0.9rem !important;
  }

  /* --- mainContent theme overrides (padding/margin) --- */
  .MuiBox-root > main {
    padding: 10px !important;
    margin-top: 60px !important;
    margin-right: 0 !important;
  }
}


/* **************************************************************************
 *
 *  PHASE 2: MOBILE APP FEEL
 *  Everything below upgrades from "responsive" to "native app experience"
 *
 * ************************************************************************** */


/* ==========================================================================
   PHASE 2.1 — Canvas connection handles: finger-sized touch targets
   Source: NodeInputHandler.jsx line 792, NodeOutputHandler.jsx line 81
   Handles are 10x10px. Fingers need 44px+. We enlarge the visible dot to
   20px and add a transparent hit-area border to reach 48px total, without
   breaking edge alignment (edges connect to handle center).
   ========================================================================== */

@media (max-width: 768px) {
  .react-flow__handle {
    width: 20px !important;
    height: 20px !important;
    border: 14px solid transparent !important;
    background-clip: padding-box !important;
    box-sizing: content-box !important;
    /* Shift to compensate for the larger size so edges still line up */
    margin-top: -24px !important;
  }

  /* Left-side input handles */
  .react-flow__handle-left {
    left: -24px !important;
  }

  /* Right-side output handles */
  .react-flow__handle-right {
    right: -24px !important;
  }

  /* Connection-in-progress feedback: bigger glow */
  .chatflow-canvas .react-flow__handle-valid {
    box-shadow: 0 0 8px 4px rgba(93, 186, 98, 0.4) !important;
  }
  .chatflow-canvas .react-flow__handle-connecting {
    box-shadow: 0 0 8px 4px rgba(219, 78, 78, 0.4) !important;
  }

  /* Edge delete buttons: 20px -> 36px */
  .edgebutton {
    width: 36px !important;
    height: 36px !important;
  }
  .edgebutton-foreignobject div {
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }

  /* Node action buttons (delete/duplicate/info): 35px -> 44px */
  .react-flow__node-customNode .MuiIconButton-root {
    height: 44px !important;
    width: 44px !important;
  }
}


/* ==========================================================================
   PHASE 2.2 — Node cards optimized for mobile
   Source: NodeCardWrapper.jsx — hardcoded width: 300px
   Shrink cards, tighten padding, improve readability at mobile zoom levels.
   ========================================================================== */

@media (max-width: 768px) {
  /* Narrow the node cards */
  .react-flow__node-customNode > div {
    width: 220px !important;
    padding: 6px !important;
  }

  /* Node header row: icon + label */
  .react-flow__node-customNode > div > .MuiBox-root > div:first-child {
    gap: 6px;
  }

  /* Node icon: slightly smaller */
  .react-flow__node-customNode > div > .MuiBox-root > div:first-child > div:first-child {
    width: 32px !important;
    height: 32px !important;
    margin-right: 6px !important;
    padding: 6px !important;
  }

  /* Input/Output section headers */
  .react-flow__node-customNode .MuiBox-root > .MuiTypography-root {
    font-size: 0.7rem !important;
    padding: 4px !important;
  }

  /* Input/output row padding */
  .react-flow__node-customNode .MuiBox-root[style*="padding"] {
    padding: 6px !important;
  }

  /* Additional Parameters button inside nodes */
  .react-flow__node-customNode .MuiButton-outlined {
    font-size: 0.7rem !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
  }
}


/* ==========================================================================
   PHASE 2.3 — Chat popup as full-screen overlay
   Source: ChatPopUp.jsx — Popper anchored to FAB at right:20, top:20
   On mobile, make chat a full-screen experience instead of a tiny popup.
   Move the FABs to the bottom-right thumb zone.
   ========================================================================== */

@media (max-width: 768px) {
  /* Move chat FABs to bottom-right (thumb-friendly) */
  .react-flow .MuiFab-root[aria-label="chat"],
  .react-flow .MuiFab-root[title="Chat"] {
    top: auto !important;
    bottom: 70px !important;
    right: 16px !important;
    z-index: 1200 !important;
  }

  /* Clear and Expand FABs: stack above chat FAB */
  .react-flow .MuiFab-root[aria-label="clear"],
  .react-flow .MuiFab-root[title="Clear Chat History"] {
    top: auto !important;
    bottom: 130px !important;
    right: 16px !important;
    z-index: 1200 !important;
  }
  .react-flow .MuiFab-root[aria-label="expand"],
  .react-flow .MuiFab-root[title="Expand Chat"] {
    top: auto !important;
    bottom: 190px !important;
    right: 16px !important;
    z-index: 1200 !important;
  }

  /* Chat Popper: full-screen overlay */
  .react-flow > .MuiPopper-root[role="tooltip"],
  .react-flow > div > .MuiPopper-root {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    transform: none !important;
    z-index: 1300 !important;
  }

  /* Chat card inside the popper: fill the screen */
  .react-flow > .MuiPopper-root .MuiCard-root,
  .react-flow > div > .MuiPopper-root .MuiCard-root {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
  }

  /* Chat expand dialog: already handled by our dialog full-screen rule above */

  /* VectorStore FAB: also move to thumb zone */
  .react-flow .MuiFab-root[aria-label="upsert"],
  .react-flow .MuiFab-root[title*="Vector"] {
    top: auto !important;
    bottom: 70px !important;
    left: 16px !important;
    right: auto !important;
  }
}


/* ==========================================================================
   PHASE 2.4 — AddNodes panel as polished bottom sheet
   Builds on ISSUE 7 fix. Adds slide-up animation, drag handle visual,
   and larger tappable list items in the node picker.
   ========================================================================== */

@media (max-width: 768px) {
  /* Bottom sheet entrance animation */
  .react-flow .MuiPopper-root[data-popper-placement] {
    transition: transform 0.25s ease-out, opacity 0.2s ease-out !important;
  }

  /* Refined bottom sheet styling */
  .react-flow .MuiPopper-root .MuiPaper-root {
    max-height: 70vh !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Visual drag handle at the top of the sheet */
  .react-flow .MuiPopper-root .MuiPaper-root::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(128, 128, 128, 0.4);
    border-radius: 2px;
    margin: 8px auto 4px;
  }

  /* Node picker list items: larger for fingers */
  .react-flow .MuiPopper-root .MuiListItemButton-root,
  .react-flow .MuiPopper-root .MuiListItem-root {
    min-height: 52px !important;
    padding: 10px 16px !important;
  }

  /* Node picker list item text */
  .react-flow .MuiPopper-root .MuiListItemText-primary {
    font-size: 0.95rem !important;
  }

  /* Node picker icons */
  .react-flow .MuiPopper-root .MuiListItemAvatar-root {
    min-width: 44px !important;
  }

  /* Search box inside AddNodes */
  .react-flow .MuiPopper-root .MuiOutlinedInput-root {
    min-height: 44px !important;
  }

  /* Accordion headers in node categories */
  .react-flow .MuiPopper-root .MuiAccordionSummary-root {
    min-height: 48px !important;
  }
}


/* ==========================================================================
   PHASE 2.5 — Bottom navigation bar (DISABLED)
   A CSS-only bottom nav bar is not feasible without JS — the nav.MuiBox-root
   selector intercepts clicks on page content. This would need a JS injection
   to create a separate bottom bar element. Keeping sidebar hamburger menu
   as the mobile navigation method for now.
   ========================================================================== */


/* ==========================================================================
   PHASE 2.6 — Touch feedback, transitions, and hover-state fixes
   Mobile has no hover. Replace hover effects with :active feedback.
   Add smooth transitions for a polished feel.
   ========================================================================== */

@media (max-width: 768px) {
  /* --- Tap feedback: slight scale-down on press --- */
  .MuiButtonBase-root:active,
  .MuiFab-root:active,
  .MuiListItemButton-root:active,
  .MuiIconButton-root:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease !important;
  }

  /* --- Smooth transitions for drawers and panels --- */
  .MuiDrawer-paper {
    transition: transform 0.25s ease-out !important;
  }

  .MuiDialog-paper {
    transition: transform 0.2s ease-out, opacity 0.2s ease-out !important;
  }

  /* --- Card hover → active replacement --- */
  .MuiCard-root:active {
    box-shadow: 0 2px 14px 0 rgb(32 40 45 / 20%) !important;
    transition: box-shadow 0.15s ease !important;
  }

  /* --- Canvas node: tap highlight instead of hover border --- */
  .react-flow__node-customNode:active > div {
    border-color: var(--xy-node-border-color-selected, #1a73e8) !important;
    transition: border-color 0.15s ease !important;
  }

  /* --- Remove all tooltip hover delays (show on tap immediately) --- */
  .MuiTooltip-popper {
    transition-delay: 0s !important;
  }

  /* --- Snackbar notifications: full width at bottom --- */
  .notistack-SnackbarContainer,
  .MuiSnackbar-root {
    bottom: 64px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }

  /* --- Selection highlight for active sidebar item --- */
  .MuiListItemButton-root.Mui-selected {
    border-left: 3px solid currentColor !important;
  }

  /* --- Prevent text selection on rapid taps --- */
  .MuiButtonBase-root,
  .MuiFab-root,
  .react-flow__node {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* --- Momentum scrolling everywhere --- */
  * {
    -webkit-overflow-scrolling: touch;
  }
}


/* ==========================================================================
   ISSUE 12 — All list pages use repeat(3, 1fr) grid: cards get crushed
   Source: chatflows/index.jsx, agentflows/index.jsx, tools/index.jsx,
   marketplaces/index.jsx, docstore/index.jsx, assistants/*, credentials/*,
   account/index.jsx — ALL use gridTemplateColumns: 'repeat(3, 1fr)'
   On a 375px phone, 3 columns = ~110px per card. Everything is cut off.
   ========================================================================== */

@media (max-width: 768px) {
  /* Force all card grids to single column on mobile */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  .MuiBox-root[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Two columns on tablets */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  .MuiBox-root[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ==========================================================================
   ISSUE 13 — ViewHeader toolbar overflows on mobile
   Source: layout/MainLayout/ViewHeader.jsx
   The Toolbar has title on the left and search + toggle buttons + "Add New"
   on the right, all in a single flex row. On mobile this overflows.
   Also applies to agentflows page with V1/V2 toggle + view toggle + Add New.
   ========================================================================== */

@media (max-width: 768px) {
  /* ViewHeader: wrap to multiple rows */
  .MuiBox-root > .MuiToolbar-root {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
    min-height: unset !important;
  }

  /* Title section: full width on its own row */
  .MuiBox-root > .MuiToolbar-root > .MuiBox-root:first-child {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Page title: smaller on mobile */
  .MuiBox-root > .MuiToolbar-root .MuiTypography-h1 {
    font-size: 1.3rem !important;
  }

  /* Page description text */
  .MuiBox-root > .MuiToolbar-root .MuiTypography-root[style*="max-width"] {
    max-width: 100% !important;
  }

  /* Action buttons row: wrap and fill */
  .MuiBox-root > .MuiToolbar-root > .MuiBox-root:last-child {
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    height: auto !important;
  }

  /* Toggle button groups: don't force height */
  .MuiBox-root > .MuiToolbar-root .MuiToggleButtonGroup-root {
    max-height: unset !important;
  }

  /* "Add New" button: full width on mobile */
  .MuiBox-root > .MuiToolbar-root .MuiButton-contained[starticon],
  .MuiBox-root > .MuiToolbar-root > .MuiBox-root:last-child > .MuiButton-contained {
    flex-grow: 1 !important;
  }

  /* MainCard max-width on list pages: fill the screen */
  .MuiBox-root > main .MuiCard-root {
    max-width: 100% !important;
  }
}