/* Shared navigation follows professional.css: underlined route tabs and
   compact, softly selected detail tabs. Lists, data cards and form mode
   controls keep their own structure. Load after the feature stylesheets. */
body :is(.tab-selector, .subnav-buttons, .billing-tabs, .email-tabs, .occupancy-tabs, .auth-tabs,
  .todo-tabbar, .foil-control-tabbar, .occupancy-site-switch) {
  --tab-radius: var(--layout-button-radius);
  --tab-padding: 10px 15px;
  --tab-underline-width: 0px;
  --tab-active-border: transparent;
  --tab-active-background: linear-gradient(135deg,
    color-mix(in srgb, var(--leaf) 34%, var(--surface)),
    color-mix(in srgb, var(--primary) 26%, var(--surface)));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body :is(.tab-selector, .subnav-buttons, .billing-tabs, .email-tabs, .occupancy-tabs, .auth-tabs,
  .todo-tabbar, .foil-control-tabbar, .occupancy-site-switch) > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--tab-padding);
  border: 0;
  border-bottom: var(--tab-underline-width) solid transparent;
  border-radius: var(--tab-radius);
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: var(--font-button-size);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

body :is(.tab-selector, .subnav-buttons, .billing-tabs, .email-tabs, .occupancy-tabs, .auth-tabs,
  .todo-tabbar, .foil-control-tabbar, .occupancy-site-switch)
  > button:not(.has-custom-button-design):not(:disabled):hover {
  color: var(--primary-strong);
  border-bottom-color: transparent;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--leaf) 14%, var(--surface)), var(--surface-strong));
  box-shadow: none;
}

body :is(.tab-selector, .subnav-buttons, .billing-tabs, .email-tabs, .occupancy-tabs, .auth-tabs,
  .todo-tabbar, .foil-control-tabbar, .occupancy-site-switch)
  > button:not(.has-custom-button-design):not(:disabled):is(.is-active, [aria-selected="true"]),
body :is(.tab-selector, .subnav-buttons, .billing-tabs, .email-tabs, .occupancy-tabs, .auth-tabs,
  .todo-tabbar, .foil-control-tabbar, .occupancy-site-switch)
  > button:not(.has-custom-button-design):not(:disabled):is(.is-active, [aria-selected="true"]):is(:hover, :focus-visible) {
  color: var(--primary-strong);
  border-bottom-color: var(--tab-active-border);
  background: var(--tab-active-background);
  box-shadow: none;
  font-weight: 700;
}

body :is(.tab-selector, .subnav-buttons, .billing-tabs, .email-tabs, .occupancy-tabs, .auth-tabs,
  .todo-tabbar, .foil-control-tabbar, .occupancy-site-switch)
  > button:not(.has-custom-button-design):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

body :is(.tab-selector, .subnav-buttons, .billing-tabs, .email-tabs, .occupancy-tabs, .auth-tabs,
  .todo-tabbar, .foil-control-tabbar, .occupancy-site-switch) > button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Explicit layouts must preserve application-controlled hidden tabs and bars,
   including registration, verification and two-factor authentication. */
body :is(.tab-selector, .subnav-buttons, .billing-tabs, .email-tabs, .occupancy-tabs, .auth-tabs,
  .todo-tabbar, .foil-control-tabbar, .occupancy-site-switch)[hidden],
body :is(.tab-selector, .subnav-buttons, .billing-tabs, .email-tabs, .occupancy-tabs, .auth-tabs,
  .todo-tabbar, .foil-control-tabbar, .occupancy-site-switch) > button[hidden] {
  display: none;
}

/* Route navigation uses the existing Settings and Finance topic-tab pattern.
   Secondary routes remain visibly distinct through their softer selection. */
body :is(.subnav-buttons:not(.subtab-selector):not(.settings-detail-nav),
  .foil-control-tabbar:not(.subtab-selector)) {
  --tab-radius: 0px;
  --tab-padding: 12px 16px;
  --tab-underline-width: 3px;
  --tab-active-border: var(--primary);
  --tab-active-background: linear-gradient(180deg,
    color-mix(in srgb, var(--leaf) 18%, var(--surface)),
    color-mix(in srgb, var(--primary) 30%, var(--surface)));
  width: 100%;
  border-bottom: 1px solid var(--line);
}

/* The two order route groups share one row; keep the actions alongside
   the main routes instead of giving each group a full-width row. */
body .orders-subnav-layout .orders-subnav-buttons {
  width: fit-content;
}

body .orders-subnav-normal-zone {
  min-width: 0;
  max-width: 100%;
}

body :is(.auth-tabs, .shop-tabs, .plc-foil-tabbar) {
  width: 100%;
}

/* Billing's former card colour and per-setting legacy tints must not paint
   an extra shell behind the shared detail navigation. */
body .billing-page > .billing-tabs {
  background: transparent;
}

body .tab-selector > .settings-tab-button:not(.has-custom-button-design):not(.is-active):not(:hover) {
  color: var(--muted);
}

body .auth-tabs > button {
  flex: 1 1 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Preserve meaningful counts without a second outlined control. */
body :is(.todo-tabbar > button strong, .shop-tabs > button span) {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  min-height: 24px;
  box-sizing: border-box;
  padding: 3px 7px;
  border: 0;
  border-radius: var(--layout-button-radius);
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  font-family: inherit;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1;
}

body :is(.todo-tabbar, .shop-tabs) > button:is(.is-active, :hover, :focus-visible)
  :is(strong, span:not(:first-child)) {
  color: var(--primary-strong);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}

/* Small screens retain the application's local tab scrolling. The page
   itself can shrink, and long labels never force a wider viewport. */
@media (max-width: 1100px), (any-pointer: coarse) {
  body :is(.tab-selector, .subnav-buttons, .billing-tabs, .email-tabs, .occupancy-tabs,
    .todo-tabbar, .foil-control-tabbar, .occupancy-site-switch) {
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  body :is(.tab-selector, .subnav-buttons, .billing-tabs, .email-tabs, .occupancy-tabs,
    .todo-tabbar, .foil-control-tabbar, .occupancy-site-switch)::-webkit-scrollbar {
    display: none;
  }

  body :is(.tab-selector, .subnav-buttons, .billing-tabs, .email-tabs, .occupancy-tabs,
    .todo-tabbar, .foil-control-tabbar, .occupancy-site-switch) > button {
    --tab-padding: 10px 12px;
    flex: 0 0 auto;
    min-height: 44px;
  }

  body .orders-subnav-layout .orders-subnav-buttons {
    max-width: none;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  body :is(.tab-selector, .subnav-buttons, .billing-tabs, .email-tabs, .occupancy-tabs, .auth-tabs,
    .todo-tabbar, .foil-control-tabbar, .occupancy-site-switch) > button {
    transition: none;
  }
}

/* The email-template editor shows editor and preview side by side on desktop.
   Its existing view switch only belongs to the single-pane phone layout. */
@media (min-width: 721px) {
  body .tab-selector.settings-template-switch {
    display: none;
  }
}