/* Shared screen-only tab presentation. Loaded after module/responsive styles.
   Do not set display: legacy role/device visibility must remain authoritative. */
@media screen {
  html:has(body:is(.admin-page, .customer-portal, .customer-pricing-page)) {
    scrollbar-gutter: stable;
  }

  body.admin-page .page-content nav:is(.tabs, .daily-task-tabs, .website-enquiry-tabs, .website-invoice-tabs, .analysis-tabs),
  body:is(.customer-portal, .customer-pricing-page) .portal-nav {
    gap: 6px;
    flex-wrap: nowrap;
    align-items: stretch;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    margin: 0 0 16px;
    padding: 2px 0 4px;
    border: 0;
    border-bottom: 1px solid #cdd8e5;
    border-radius: 0;
    background: transparent;
  }

  body.admin-page .page-content nav:is(.tabs, .daily-task-tabs, .website-enquiry-tabs, .website-invoice-tabs, .analysis-tabs) > :is(a, button),
  body:is(.customer-portal, .customer-pricing-page) .portal-nav > a {
    box-sizing: border-box;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 30px;
    margin: 0;
    padding: 4px 14px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: #52657d;
    font-family: inherit;
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    transition: none;
  }

  body.admin-page .page-content nav:is(.tabs, .daily-task-tabs, .website-enquiry-tabs, .website-invoice-tabs, .analysis-tabs) > :is(a, button):hover,
  body:is(.customer-portal, .customer-pricing-page) .portal-nav > a:hover {
    background: #e7edf5;
    color: #234766;
    text-decoration: none;
  }

  body.admin-page .page-content nav:is(.tabs, .daily-task-tabs, .website-enquiry-tabs, .website-invoice-tabs, .analysis-tabs) > :is(a, button):is(.active, .is-active, [aria-selected="true"], [aria-current="page"]),
  body:is(.customer-portal, .customer-pricing-page) .portal-nav > a[aria-current="page"] {
    background: #185abd;
    color: #fff;
    border-color: transparent;
    font-weight: 600;
    box-shadow: none;
  }

  body.admin-page .page-content nav:is(.tabs, .daily-task-tabs, .website-enquiry-tabs, .website-invoice-tabs, .analysis-tabs) > :is(a, button):focus-visible,
  body:is(.customer-portal, .customer-pricing-page) .portal-nav > a:focus-visible {
    outline: 2px solid #185abd;
    outline-offset: 2px;
  }
  body.admin-page .page-content .website-enquiry-tabs > [role="tab"]::after { content: none; }
  body.admin-page .page-content .private-hire-tabs > a::after { font-weight: 600; }
  body.admin-page .page-content .daily-task-tab.active .nav-badge { background: #fff; color: #185abd; }

  /* Identical gap regardless of whether a tab starts with a card, form or table. */
  body.admin-page .page-content nav:is(.tabs, .daily-task-tabs, .website-enquiry-tabs, .website-invoice-tabs, .analysis-tabs) + :not(script):not(style) { margin-top: 0; }
  body.admin-page .page-content .website-enquiry-tab-panel > .detail-card:first-child { margin-top: 0; }

  /* Month strips are compact tabs too; preserve their existing sizing/layout. */
  body.admin-page .page-content nav:is(.board-periods, .private-hire-periods, .mobile-board-months, .private-hire-mobile-months) > a {
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
  }
  body.admin-page .page-content nav:is(.board-periods, .private-hire-periods, .mobile-board-months, .private-hire-mobile-months) > a:is(.active, [aria-current="page"]) {
    background: #185abd;
    color: #fff;
    border-color: #185abd;
  }
  body.admin-page .page-content nav:is(.board-periods, .private-hire-periods, .mobile-board-months, .private-hire-mobile-months) > a:focus-visible { outline: 2px solid #185abd; outline-offset: 2px; }
}

@media screen and (max-width: 800px) {
  body.admin-page .page-content nav.analysis-tabs > :is(a, button) {
    min-height: 36px;
    padding: 7px 14px;
  }
  body.admin-page .page-content nav:is(.tabs, .daily-task-tabs, .website-enquiry-tabs, .website-invoice-tabs, .analysis-tabs),
  body:is(.customer-portal, .customer-pricing-page) .portal-nav {
    padding: 4px 0 8px;
  }
  /* Price Routes previously used a larger margin and a wrapping description. */
  body.admin-page .page-content .pricing-workspace > .page-heading { margin-bottom: 18px; }
  body.admin-page .page-content .pricing-workspace > .page-heading .page-description {
    line-height: 1.5;
    min-height: 3em;
  }
  body.admin-page .page-content nav:is(.tabs, .daily-task-tabs, .website-enquiry-tabs, .website-invoice-tabs) > :is(a, button),
  body:is(.customer-portal, .customer-pricing-page) .portal-nav > a {
    min-height: 40px;
    padding: 9px 12px;
  }
  body.admin-page .page-content .vehicle-detail-tabs > a:not(.vehicle-audit-tab) { flex: 1 1 auto; padding-right: 8px; padding-left: 8px; }
}

@media screen {
  body.admin-page .page-content nav[data-equal-tabs] > :is(a, button),
  body.admin-page .page-content .vehicle-detail-tabs[data-equal-tabs] > a:not(.vehicle-audit-tab),
  body:is(.customer-portal, .customer-pricing-page) .portal-nav[data-equal-tabs] > a {
    flex: 0 0 auto;
    width: var(--tab-width, max-content);
    text-align: center;
  }
}