/* Mobile UI v11 — visual-review polish for scan-first Settings cards. */

.occ-build-stamp {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 5000;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(12,31,47,.88);
  color: #dbe8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  font: 700 9px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .01em;
  pointer-events: none;
}

@media (max-width: 760px) {
  /* Settings navigation: expose the existing navs as compact scrollable rails instead of nested selects. */
  .settings-mobile-nav,
  .system-settings-mobile-tabs {
    display: none !important;
  }

  .settings-page .settings-subnav {
    position: sticky !important;
    top: 50px !important;
    z-index: 24 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background: rgba(244,247,249,.97) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--occ-mobile-line) !important;
    box-shadow: 0 3px 8px rgba(23,50,77,.05) !important;
    -webkit-overflow-scrolling: touch;
  }

  .settings-page .settings-subnav::-webkit-scrollbar,
  .system-settings-tabs::-webkit-scrollbar {
    display: none;
  }

  .settings-page .settings-subnav a {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 7px 11px !important;
    border: 1px solid #d7e1e7 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #526773 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .settings-page .settings-subnav a.active {
    border-color: var(--occ-mobile-blue) !important;
    background: var(--occ-mobile-blue) !important;
    color: #fff !important;
  }

  .system-settings-page > h3 {
    margin-bottom: 5px !important;
  }

  .system-settings-tabs {
    position: sticky !important;
    top: 99px !important;
    z-index: 23 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    width: calc(100% + 20px) !important;
    margin: 0 -10px 8px !important;
    padding: 6px 10px 7px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background: rgba(255,255,255,.98) !important;
    border: 0 !important;
    border-bottom: 1px solid #e5ebef !important;
    box-shadow: 0 2px 6px rgba(23,50,77,.04) !important;
    -webkit-overflow-scrolling: touch;
  }

  .system-settings-tabs button {
    flex: 0 0 auto !important;
    min-height: 30px !important;
    padding: 6px 9px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #667985 !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .system-settings-tabs button.active {
    background: #e7f1fa !important;
    color: var(--occ-mobile-blue) !important;
  }

  /* Sites: remove table-like annotation and keep one clean secondary stack. */
  .setup-site-list tr {
    min-height: 82px !important;
    padding: 9px 10px !important;
    gap: 2px 10px !important;
  }

  .setup-site-list td[data-label="Unit / Index"]:not(:empty)::after {
    content: none !important;
    display: none !important;
  }

  .setup-site-list td[data-label="Unit / Index"] {
    font-size: 10px !important;
    line-height: 1.2 !important;
    color: #6c7f8b !important;
  }

  .setup-site-list td[data-label="Spoke"] {
    font-size: 10px !important;
    line-height: 1.2 !important;
    color: #526773 !important;
  }

  .setup-site-list .site-type-badge {
    padding: 3px 6px !important;
    border-radius: 999px !important;
    font-size: 8.5px !important;
    font-weight: 800 !important;
  }

  /* Coordinates are tertiary technical metadata: one quiet rail across the bottom of each card. */
  .setup-site-list td[data-label="Latitude"],
  .setup-site-list td[data-label="Longitude"] {
    display: block !important;
    grid-row: 4 !important;
    align-self: center !important;
    font: 650 8.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    color: #8a9aa4 !important;
    white-space: nowrap !important;
  }

  .setup-site-list td[data-label="Latitude"] {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .setup-site-list td[data-label="Latitude"]::before {
    display: inline !important;
    content: '⌖ ' !important;
    color: #9aa8b0 !important;
  }

  .setup-site-list td[data-label="Longitude"] {
    grid-column: 2 !important;
    justify-self: end !important;
    padding-right: 1px !important;
  }

  .setup-site-list td[data-label="Actions"] {
    grid-row: 2 / span 2 !important;
  }

  /* Spokes: identity + human location + muted endpoint, no field-label feel. */
  .setup-spoke-list tr {
    min-height: 72px !important;
    padding: 9px 10px !important;
    gap: 2px 10px !important;
  }

  .setup-spoke-list td[data-label="Spoke"] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .setup-spoke-list td[data-label="Spoke"] strong {
    font-size: 14px !important;
    line-height: 1.15 !important;
    color: var(--occ-mobile-text) !important;
  }

  .setup-spoke-list td[data-label="Location"] {
    line-height: 1.2 !important;
  }

  .setup-spoke-list td[data-label="Pi base URL"] {
    max-width: min(62vw, 235px) !important;
    line-height: 1.2 !important;
    opacity: .88 !important;
  }

  .setup-spoke-list td[data-label="Token"] {
    padding: 3px 6px !important;
    background: #edf7f1 !important;
    color: #26734d !important;
    line-height: 1.1 !important;
    text-transform: none !important;
  }

  /* Groups: status is a badge; counts read as one compact metadata rail. */
  .settings-group-table tr {
    min-height: 70px !important;
  }

  .settings-group-table td[data-label="Status"] {
    padding: 3px 6px !important;
    border-radius: 999px !important;
    background: #edf7f1 !important;
    color: #26734d !important;
    line-height: 1.1 !important;
  }

  .settings-group-table td[data-label="Users"],
  .settings-group-table td[data-label="Sites"],
  .settings-group-table td[data-label="Maps"] {
    color: #657985 !important;
    line-height: 1.15 !important;
  }

  /* Common actions: keep them available without making them the visual focus. */
  .setup-site-list .mobile-card-actions,
  .setup-spoke-list .mobile-card-actions,
  .settings-group-table .mobile-card-actions {
    min-width: 48px !important;
    gap: 3px !important;
  }

  .setup-site-list .mobile-card-actions button,
  .setup-spoke-list .mobile-card-actions button,
  .settings-group-table .mobile-card-actions button {
    min-width: 48px !important;
    min-height: 25px !important;
    padding: 3px 6px !important;
    border-radius: 7px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
  }

  /* Maps already had the right card structure; lightly normalize its metadata. */
  .settings-map-card,
  .map-settings-card {
    border-radius: 11px !important;
  }

  .settings-map-card .muted,
  .map-settings-card .muted {
    font-size: 9.5px !important;
    line-height: 1.25 !important;
  }

  .occ-build-stamp {
    right: 8px;
    bottom: calc(66px + env(safe-area-inset-bottom));
    padding: 3px 6px;
    font-size: 8px;
    opacity: .78;
  }
}