/* Mobile Fix for Remote Dialog - Pure CSS */

@media (max-width: 640px) {
  /* Dialog overlay - force center and constrain width */
  [data-state="open"] {
    max-width: 95vw !important;
    width: 95vw !important;
    left: 2.5vw !important;
    right: 2.5vw !important;
    transform: none !important;
  }
  
  /* Dialog content */
  [role="dialog"] {
    max-width: 95vw !important;
    width: 95vw !important;
  }
  
  /* All direct children */
  [role="dialog"] > div,
  [data-state="open"] > div {
    max-width: 100% !important;
    padding: 16px !important;
  }
  
  /* Grid for port buttons - 4 columns */
  [role="dialog"] div[style*="grid"],
  [data-state="open"] div[style*="grid"],
  [role="dialog"] .grid,
  [data-state="open"] .grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }
  
  /* Tab buttons */
  [role="dialog"] [role="tablist"],
  [data-state="open"] [role="tablist"] {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  
  [role="dialog"] [role="tab"],
  [data-state="open"] [role="tab"] {
    flex: 1 1 45% !important;
    min-width: 120px !important;
  }
  
  /* All buttons in dialog */
  [role="dialog"] button,
  [data-state="open"] button {
    max-width: 100% !important;
  }
  
  /* Primary button */
  [role="dialog"] button[type="submit"],
  [data-state="open"] button[type="submit"] {
    width: 100% !important;
  }
}

/* Very small screens */
@media (max-width: 400px) {
  [data-state="open"] {
    max-width: 98vw !important;
    width: 98vw !important;
    left: 1vw !important;
    right: 1vw !important;
  }
}