/* Scoped layouts shared by hosted and packaged workspaces. */
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-stats {
  padding: 16px 20px;
  gap: 0;
}
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-stat {
  padding: 0 20px;
  gap: 6px;
}
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-stat:first-child { padding-left: 0; }
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-stat strong { font-size: 24px; line-height: 30px; }
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .table-search { margin: 16px; }
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table-scroll { overflow-x: auto; }
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table { min-width: 950px; table-layout: auto; }
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table :is(th,td) { vertical-align: middle; }
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table td { padding: 14px 12px; font-size: 13px; line-height: 1.5; }
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table th button { padding: 12px; font-size: 12px; }
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table :is(td:first-child,td:nth-child(3)) { white-space: normal; overflow-wrap: anywhere; min-width: 145px; }
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table td:first-child { font-weight: 500; }
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table td:nth-child(2) { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table :is(th:last-child,td:last-child) { width: 220px; }
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-row-actions { flex-wrap: nowrap; gap: 4px; }
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-row-actions > :is(a,button) { height: 34px; min-height: 34px; padding: 0 8px; font-size: 12px; white-space: nowrap; }
#main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-row-actions > .icon-button { width: 34px; padding: 0; }
#main section:has(> .native-inline-form > input[aria-label="Phone number to test"]) { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,420px); align-items: center; gap: 20px; }
#main section:has(> .native-inline-form > input[aria-label="Phone number to test"]) .native-panel-heading { margin: 0; }
#main section:has(> .native-inline-form > input[aria-label="Phone number to test"]) .native-inline-form { display: flex; flex-wrap: nowrap; width: 100%; gap: 8px; margin: 0; }
#main section:has(> .native-inline-form > input[aria-label="Phone number to test"]) input { flex: 1; min-width: 0; width: 100%; max-width: none; }
#main section:has(> .native-inline-form > input[aria-label="Phone number to test"]) .button { flex-shrink: 0; white-space: nowrap; }
#main section:has(> .native-inline-form > input[aria-label="Phone number to test"]) > :not(.native-panel-heading,.native-inline-form) { grid-column: 1 / -1; }

#main .organized-integrations { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
#main .organized-integrations > section { min-width: 0; }
#main .integration-section-heading { margin-bottom: 16px; }
#main .integration-section-heading h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: var(--text,#182131); }
#main .integration-section-heading p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted,#737d8e); }
#main .organized-integrations .integration-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
#main .organized-integrations .integration-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; min-height: 184px; height: 100%; padding: 20px; text-align: left; }
#main .organized-integrations .integration-card h2 { margin: 0; font-size: 15px; line-height: 1.5; }
#main .organized-integrations .integration-card p { margin: 0; font-size: 13px; line-height: 1.6; }
#main .organized-integrations .integration-card > span:last-child { margin-top: auto; padding-top: 6px; font-size: 13px; }
#main .integration-migrations .integration-hub { margin: 0; }
#main .integration-migrations .integration-directory { display: block; margin: 0; }
#main .integration-migrations .integration-tile { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 3px; align-items: center; min-height: 96px; width: 100%; padding: 20px; }
#main .integration-migrations .integration-monogram { grid-column: 1; grid-row: 1 / 3; margin: 0; }
#main .integration-migrations .integration-tile > strong { grid-column: 2; grid-row: 1; }
#main .integration-migrations .integration-tile > small { grid-column: 2; grid-row: 2; margin: 0; }
#main .integration-migrations .integration-badge { grid-column: 3; grid-row: 1 / 3; margin: 0; white-space: nowrap; }
#main .integration-migrations .integration-arrow { display: none; }
#main .integration-dev-grid { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(0,1.25fr); gap: 16px; align-items: start; }
#main .integration-dev-grid > .native-panel { margin: 0; min-width: 0; }
#main .integration-dev-grid .native-empty { min-height: 160px; padding: 28px 16px; }
#main .integration-dev-grid .native-table { min-width: 540px; }
#main .mobile-pairing { width: min(100%,640px); margin-inline: auto; padding: 32px; }
#main .mobile-pairing :is(img,p) { max-width: 100%; overflow-wrap: anywhere; }

@media (max-width: 1200px) {
  #main .integration-dev-grid { grid-template-columns: minmax(0,1fr); }
  #main .organized-integrations .integration-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #main section:has(> .native-inline-form > input[aria-label="Phone number to test"]) { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 1340px) {
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table-scroll { overflow: visible; }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) :is(.native-table,tbody) { display: block; min-width: 0; width: 100%; white-space: normal; }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 20px; padding: 18px 16px; }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) tbody tr + tr { border-top: 1px solid var(--border,#e5e7ed); }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table td { display: block; min-width: 0; width: auto; border: 0; padding: 0; overflow-wrap: anywhere; }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table td::before { display: block; content: attr(data-label); margin-bottom: 4px; color: var(--muted,#737d8e); font: 11px/1.4 var(--font,sans-serif); }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table :is(td:first-child,td:nth-child(3),td:last-child) { grid-column: 1 / -1; min-width: 0; width: auto; }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table td:nth-child(1)::before { content: "Route"; }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table td:nth-child(2)::before { content: "Pattern"; }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table td:nth-child(3)::before { content: "Phone connection"; }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table td:nth-child(4)::before { content: "Priority"; }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table td:nth-child(5)::before { content: "Prepend"; }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table td:nth-child(6)::before { content: "Strip digits"; }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table td:nth-child(7)::before { content: "PBX"; }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-table td:nth-child(8)::before { content: "Actions"; }
}
@media (max-width: 600px) {
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px; gap: 16px; }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-stat { padding: 0; border: 0; }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-row-actions { flex-wrap: wrap; gap: 6px; }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-row-actions > :is(a,button) { min-height: 44px; height: 44px; }
  #main .native-page.native-page:has(a[href="/admin/outbound-routes/create/"]) .native-row-actions > .icon-button { width: 44px; }
  #main section:has(> .native-inline-form > input[aria-label="Phone number to test"]) { padding-bottom: 64px; }
  #main section:has(> .native-inline-form > input[aria-label="Phone number to test"]) .native-inline-form { flex-direction: column; }
  #main section:has(> .native-inline-form > input[aria-label="Phone number to test"]) .native-inline-form > :is(input,button) { width: 100%; min-height: 44px; }
  #main .organized-integrations { gap: 24px; }
  #main .organized-integrations .integration-grid { grid-template-columns: minmax(0,1fr); }
  #main .organized-integrations .integration-card { min-height: 168px; }
  #main .integration-migrations .integration-tile { grid-template-columns: 40px minmax(0,1fr); padding: 16px; gap: 6px 12px; }
  #main .integration-migrations .integration-badge { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 6px; }
  #main .integration-migrations .integration-monogram { grid-row: 1 / 4; }
  #main .integration-dev-grid { grid-template-columns: minmax(0,1fr); }
  #main .mobile-pairing { padding: 24px 16px 64px; }
}