/* Table pagination: the clickable controls.

   Previous / Next and the unselected page numbers are transparent, so they
   take the colour of whatever is behind them. On accountHome's card view that
   is the page ground (#F9FAFB), which reads grey against the white cards.

   This lives in the style document because the platform gives these elements
   no theme variable for background. Checked against
   ui-app/client/dist/styleProperties/Table.json: `._pageNumber` (unselected)
   exposes border, border-radius, colour and height; `._leftArrow` /
   `._rightArrow` expose height, border, border-radius and margin-right. None
   of them exposes a background, and `._clickable` is not named by any selector
   in that manifest.

   Nor can a component style slot reach them: in Table.tsx the two arrow boxes
   are class-only, with no getStyleObject() call, so they have no
   sub-component to patch. Only `pageNumbers` / `selectedPageNumber` do.

   The strip itself is left transparent on purpose, so it keeps taking the
   page's own background.

   Scope: every Table in the app, not just accountHome. The rendered DOM
   carries no page-scoped class, and `_design7` alone is shared by nine pages,
   so there is no tighter selector available. */
.comp.compTable ._tablePagination ._clickable {
	background-color: #FFFFFF;
}

.comp.compTable ._tablePagination {
	padding-left: 20px;
}

/* Shell breadcrumb.

   The top bar's crumb is a TextList whose items come from splitting the page's
   own `properties.title.name` on commas, so "User Management,Users" renders as
   two list items. The chevron between them, and the weight and colour on the
   final crumb, are what a component style slot cannot express: TextList
   exposes `list`, `listItem` and `listItemIcon`, and none of them can target
   only the items after the first, or only the last.

   The crumb colours live here rather than on the component for a specific
   reason: a `listItem-color` style leaf renders as an INLINE style on every
   <li>, and an inline style beats a stylesheet rule, so the last-child colour
   below could never win while that leaf existed.

   Scoped to the shell's own breadcrumb so the TextList on `designGuide` is
   untouched. The hook is the wrapper GRID's id: a Grid renders its component
   key as the DOM id, but a TextList does not render one at all, which is why
   the rule hangs off `#shellCrumbWrap` rather than the list itself. Both keys
   were chosen to start with a letter so they are valid CSS identifiers. */
#shellCrumbWrap li.listItem {
	color: #808284;
}

#shellCrumbWrap li.listItem + li.listItem::before {
	content: '\203A';
	margin-right: 8px;
	color: #ABABAD;
	font-size: 18px;
	line-height: 18px;
	font-weight: 400;
	vertical-align: -1px;
}

#shellCrumbWrap li.listItem:last-child {
	color: #2C2E32;
	font-weight: 600;
}

/* The Prompt used to need eight rules here, for the draft bar, the saved
   notice and the confirmation block. They are gone: the component now
   publishes `promptNotice*`, `promptConfirm*`, `promptApprove*` and
   `promptWarningFontColor` alongside its original 29, and sitezump sets them
   in the theme like any other variable. Nothing about the Prompt is styled
   from this document. */