/* 2026-09-15: route-flag tooltips on touch + tablet neighbors-table fit (Maharlika IX LG).
   Loads last (14 z). Remove this file to revert part 1 and 2 CSS; the matching
   script change lives in zzzzzzzzzzzzz-decix-member-view.js (backup .bak-20260915). */

/* 1) Route flag labels (best route, RPKI state ...). Alice's native label is a
      hover-only <div> placed 90px LEFT of the icon: off-screen on phones and never
      shown on touch. Hide it at every width; the theme script shows one
      viewport-clamped tooltip on hover, keyboard focus and tap instead. */
.table-routes .route-prefix-flag > div,
.table-routes .route-prefix-flag:hover > div { display: none !important; }
.table-routes .route-prefix-flag { cursor: pointer; }
.table-routes .route-prefix-flag:focus-visible { outline: 3px solid #102b50; outline-offset: 2px; border-radius: 4px; }
.mci-best-route-tooltip { max-width: calc(100vw - 16px); white-space: normal; }
@media (max-width: 767px) {
  /* Larger touch target around the 12px icons without moving them. */
  .table-routes .route-prefix-flag { padding: 8px 5px; margin-top: -6px; margin-bottom: -6px; }
}

/* 1b) Icon placement. route-controls.css forces the icon wrapper (span.route-prefix-flags)
       to an 18px centred box; with two or three icons inside, the overflow is centred and
       the first icon lands ~12px LEFT of the wrapper, on top of the card border on phones.
       Let the wrapper size to its content and start at the cell edge instead. */
.table-routes > tbody > tr > td:first-child > .route-prefix-flags {
  width: auto !important; min-width: 0 !important; max-width: none !important;
  justify-content: flex-start;
}
@media (max-width: 767px) {
  /* Put the icons on the same line as the prefix: the prefix link has 10px padding and a
     19.5px line, so its text centre is ~20px below the card row; the icons (31px tall with
     tap padding) need 14px of top padding to share that centre line. */
  .mci-route-enhanced > .table.table-routes > tbody > tr > td:first-child { padding: 12px 0 2px 3px; }
}
/* 1c) Table layouts (>=768): rows whose prefix cell has a second line ("RPKI invalid",
       "AS-path too long") centred the icons between the two lines. Top-align the icon
       cell so the icons sit on the prefix line; single-line rows are unaffected. */
@media (min-width: 768px) {
  .routes-view .table-routes > tbody > tr > td:first-child { vertical-align: top; }
  .routes-view .table-routes > tbody > tr > td:first-child > * { vertical-align: top; }
}

/* Alice renders an EMPTY span.route-prefix-flag for "not a blackhole route" on every row;
   it has no icon but still takes ~15px in the flags cell. Hide it at every width. */
.table-routes .route-prefix-flag.not-blackhole-route { display: none !important; }

/* 2) Tablet 768-991px: the 9-column neighbors table needed ~590px but only ~460px
      was available beside the 220px sidebar; the table scrolled sideways with its
      scrollbar below the fold, so the last columns looked cut off. Slim the sidebar
      to 172px and compact the cells so every column fits from 768px up; the table
      keeps horizontal scrolling as a safety net. Phone (<=767) and >=992 unchanged. */
@media (min-width: 768px) and (max-width: 991px) {
  .page-sidebar { flex: 0 0 172px; width: 172px; min-width: 0; }
  .page-sidebar .sidebar-header { padding: 0 8px; }
  .page-sidebar .sidebar-header .logo { flex: 0 0 40px; margin-right: 8px; }
  .page-sidebar .sidebar-header .logo a { width: 40px; height: 40px; background-size: 36px 36px; }
  .page-sidebar .sidebar-header .title h1 { font-size: 15px; }
  .page-sidebar h2 { margin: 18px 12px 8px; }
  .page-sidebar .routeservers-list > ul li { margin: 3px 6px; padding: 8px; }
  .page-sidebar .routeservers-list .routeserver-id { font-size: 14px; }
  .page-sidebar .routeservers-list .routeserver-status .bird-version { font-size: 11px; }
  .card:has(.table.table-protocols) { overflow-x: auto; }
  .table.table-protocols { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table.table-protocols > thead > tr > th,
  .table.table-protocols > tbody > tr > td { padding: 7px 3px; font-size: 12px; }
  .table.table-protocols > thead > tr > th:nth-child(4),
  .table.table-protocols > thead > tr > th:nth-child(5) { white-space: normal; }
  .table.table-protocols > tbody > tr > td:nth-child(5) { white-space: normal; overflow-wrap: anywhere; min-width: 92px; }
}

/* 4) SEARCH RESULTS (lookup) table. Its FIRST column is the Network prefix, not the flag
      icons, but route-controls.css zeroes the first cell's font-size and squashes its
      children to 18px (meant for the icon cell), so search results showed a BLANK Network
      column at every width. Restore it. */
.lookup-container .table-routes > thead > tr > th:first-child,
.lookup-container .table-routes > tbody > tr > td:first-child {
  font-size: 13px !important; width: auto; min-width: 0; padding-left: 8px; padding-right: 8px; white-space: nowrap;
}
.lookup-container .table-routes > tbody > tr > td:first-child > * {
  display: inline !important; width: auto !important; min-width: 0 !important; height: auto !important; margin: 0 !important;
}
/* 4b) Phones: the 6-column search results table becomes cards (the theme's card system only
       covers the 8-column member routes table), so it no longer scrolls the page sideways. */
@media (max-width: 767px) {
  .lookup-container .table.table-routes { display: block; width: 100%; max-width: 100%; overflow: visible; }
  .lookup-container .table-routes > thead { display: none; }
  .lookup-container .table-routes > tbody { display: block; width: 100%; }
  .lookup-container .table-routes > tbody > tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px;
    width: 100%; margin: 0 0 10px; padding: 10px 12px;
    border: 1px solid #dce5ef; border-radius: 6px; background: #fff;
  }
  .lookup-container .table-routes > tbody > tr > td {
    display: block; min-width: 0; width: auto; padding: 4px 0; border: 0;
    white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.4;
  }
  .lookup-container .table-routes > tbody > tr > td::before { display: block; font-size: 11px; font-weight: 600; color: #536578; margin-bottom: 2px; }
  .lookup-container .table-routes > tbody > tr > td:nth-child(1) {
    grid-column: 1 / -1; font-size: 16px !important; font-weight: 600; color: #102b50;
    padding: 0 0 6px; margin-bottom: 4px; border-bottom: 1px solid #e4edf7; white-space: normal;
  }
  .lookup-container .table-routes > tbody > tr > td:nth-child(2)::before { content: "Gateway"; }
  .lookup-container .table-routes > tbody > tr > td:nth-child(3) { grid-column: 1 / -1; }
  .lookup-container .table-routes > tbody > tr > td:nth-child(3)::before { content: "AS path"; }
  .lookup-container .table-routes > tbody > tr > td:nth-child(4)::before { content: "Origin ASN"; }
  .lookup-container .table-routes > tbody > tr > td:nth-child(5) { grid-column: 1 / -1; }
  .lookup-container .table-routes > tbody > tr > td:nth-child(5)::before { content: "Neighbor"; }
  .lookup-container .table-routes > tbody > tr > td:nth-child(6)::before { content: "Route server"; }
  .lookup-container .table-routes > tbody > tr > td a { display: inline-block; min-height: 28px; line-height: 28px; }
}

/* 5) Phones: "Go to" quick links (Established / Down / Accepted / Filtered / Not Exported)
      were 17px-tall inline text; give them a proper 40px tap target inside their chips. */
@media (max-width: 767px) {
  .routes-quick-links li, .neighbors-quick-links li { display: inline-block; padding: 0; margin-bottom: 6px; }
  .routes-quick-links li a, .neighbors-quick-links li a { display: inline-block; padding: 9px 10px; min-height: 40px; line-height: 22px; }
}

/* 3) Tablet 768-991px, routes tables (member routes + search results). route-controls.css
      forces `.routes-view` to overflow:visible so Alice's old left-side tooltip was not cropped;
      that made the 8-column routes table push the WHOLE PAGE 150px wide at 768px. The new
      tooltip is position:fixed and never cropped, so the card can scroll inside itself again.
      Compact the cells so it fits on most tablets and only scrolls when it must. */
@media (min-width: 768px) and (max-width: 991px) {
  .details-main .routes-view,
  .lookup-results .routes-view,
  .card.routes-view { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .routes-view .table-routes > thead > tr > th,
  .routes-view .table-routes > tbody > tr > td { padding: 8px 3px; font-size: 12px; }
  .routes-view .table-routes > thead > tr > th:first-child,
  .routes-view .table-routes > tbody > tr > td:first-child { width: 46px; min-width: 46px; padding-left: 6px; padding-right: 2px; }
  .routes-view .table-routes > tbody > tr > td:first-child > .route-prefix-flags { gap: 3px; }
  .routes-view .table-routes td.col-route-network,
  .routes-view .table-routes td.col-route-nexthop { white-space: nowrap; }
  .routes-view .table-routes td.col-route-network > small,
  .routes-view .table-routes td.col-route-network .route-reason { white-space: normal; }
  /* AS path is the widest cell; let it wrap so the 8 columns fit without scrolling. */
  .routes-view .table-routes > tbody > tr > td:nth-child(4),
  .routes-view .table-routes > tbody > tr > td:nth-child(4) * { white-space: normal !important; overflow-wrap: anywhere; }
  .routes-view .table-routes > tbody > tr > td:nth-child(4) { min-width: 96px; max-width: 150px; }
}