/* MCPHub 1.1.14 mobile enhancement - leaves desktop untouched */
@media (max-width: 767px) {
  html, body, #root { width:100%; max-width:100%; overflow-x:hidden; }
  #root > div { max-width:100vw; }
  #root aside {
    position:fixed !important;
    z-index:1001 !important;
    inset:0 auto 0 0;
    width:min(280px, 84vw) !important;
    max-width:84vw !important;
    height:100dvh !important;
    transform:translateX(-105%);
    visibility:hidden;
    transition:transform .2s ease, visibility .2s ease !important;
    box-shadow: 8px 0 26px rgba(0,0,0,.25);
  }
  body.mcp-mobile-nav-open #root aside {
    transform:translateX(0);
    visibility:visible;
  }
  /* Main content and top bar should use the entire viewport */
  #root aside + div { width:100% !important; min-width:0 !important; }
  #root main { width:100%; min-width:0; overflow-x:auto; }
  #root main > div { padding:16px 14px 56px !important; max-width:100%; }
  header.hub-topbar { gap:4px; min-width:0; padding-inline:9px; }
  header.hub-topbar .hub-crumb { min-width:0; max-width:calc(100vw - 195px); }
  header.hub-topbar > .flex-1 { display:none !important; }
  header.hub-topbar a[aria-label="GitHub Repository"],
  header.hub-topbar a[aria-label="Documentation"] { display:none !important; }
  main .hub-card, main form, main input, main select, main textarea { max-width:100%; min-width:0; }
  main input, main select, main textarea { font-size:16px; }
  main .grid { min-width:0; }
  main h1, main h2, main h3 { overflow-wrap:anywhere; }
  main p, main label { overflow-wrap:break-word; }
  #mcp-mobile-backdrop {
    position:fixed; inset:0; z-index:1000;
    background:rgba(0,0,0,.56); display:none;
  }
  body.mcp-mobile-nav-open #mcp-mobile-backdrop { display:block; }
}

/* MCPHub server management layout fix: narrow screens only */
@media (max-width:767px) {
  /* Put server page heading above its actions; never squeeze to 1-character width */
  main:has(.hub-server-card-row) > div > div > div:first-child {
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:14px !important;
    min-width:0 !important;
    margin-bottom:18px !important;
  }
  main:has(.hub-server-card-row) > div > div > div:first-child > div:first-child {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  main:has(.hub-server-card-row) h1.hub-h1 {
    font-size:23px !important;
    line-height:1.25 !important;
    width:100% !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
  main:has(.hub-server-card-row) .hub-sub {
    white-space:normal !important;
    line-height:1.5 !important;
  }
  main:has(.hub-server-card-row) > div > div > div:first-child > div:nth-child(2) {
    display:flex !important;
    flex-wrap:wrap !important;
    width:100% !important;
    min-width:0 !important;
    gap:8px !important;
  }
  main:has(.hub-server-card-row) > div > div > div:first-child .hub-btn {
    min-height:38px;
    white-space:nowrap;
  }
  /* Filter bar and search input should wrap rather than force a 900px-wide page */
  main:has(.hub-server-card-row) > div > div > div:nth-child(2) {
    max-width:100%;
    flex-wrap:wrap !important;
    min-width:0;
  }
  main:has(.hub-server-card-row) > div > div > div:nth-child(2) > * {
    max-width:100%;
  }
  /* Desktop 10-column server table becomes a readable two-column card. */
  .hub-server-card-row {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:9px 12px !important;
    padding:14px !important;
    align-items:center !important;
    min-width:0;
  }
  .hub-server-card-row > :nth-child(1) {grid-column:1 / -1;grid-row:1}
  .hub-server-card-row > :nth-child(2) {grid-column:1;grid-row:2}
  .hub-server-card-row > :nth-child(3) {grid-column:1;grid-row:3}
  .hub-server-card-row > :nth-child(4) {grid-column:2;grid-row:2;max-width:125px}
  .hub-server-card-row > :nth-child(5),
  .hub-server-card-row > :nth-child(6),
  .hub-server-card-row > :nth-child(7),
  .hub-server-card-row > :nth-child(8) {display:none !important}
  .hub-server-card-row > :nth-child(9) {grid-column:2;grid-row:3;justify-self:end}
  .hub-server-card-row > :nth-child(10) {grid-column:2;grid-row:4;justify-self:end}
  .hub-server-card-row .hub-server-card-status-cell {height:auto;min-width:0}
  .hub-server-card-row .hub-server-card-status-cell .hub-status-label {
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:normal !important;
  }
  .hub-server-card-row .hub-server-card-transport-cell {
    flex-wrap:wrap;
    height:auto !important;
  }
  .hub-server-card-row .hub-server-card-visibility {min-width:100px}
  .hub-server-card-row .hub-server-card-visibility select {width:100%;max-width:125px}
  .hub-server-card-row .hub-mono[title] {max-width:100%;overflow-wrap:anywhere}
  /* Expanded server detail: allow endpoints to wrap without page-wide horizontal scrolling */
  .hub-card:has(> .hub-server-card-row) {width:100%;max-width:100%;min-width:0}
  .hub-card:has(> .hub-server-card-row) input {max-width:100%}
}