/* Tickets to Answers global CSS (doc/UI_DESIGN.md §1). Loaded instance-wide
   (scope: company), so every rule below is either one of the four rules §1
   lists or is scoped to a class only this demo's pages carry
   (.support-chrome on the masters' masthead section, .support-page on every
   page's content section). Each helper names the design rule it serves. */

/* --- §1, verbatim ----------------------------------------------------------- */

/* The desk uses Lexicon's inverted navbar (dark ground, light text). */
.masthead.desk {
	--mast-bg: #272833;
	--mast-ink: #ffffff;
	--mast-muted: #a7a9bc;
	--mast-rule: #30313f;
	--mast-on: #ffffff;
}

/* Internal note (warning tint, 4px edge) and assistant draft (info tint). */
.msg.internal {
	background: #fff4ec;
	border-left: 4px solid #ff8f39;
}

.msg.draft {
	background: #eef2fa;
	border-left: 4px solid #89a7e0;
}

/* Japanese running text breathes at 1.7. */
:lang(ja) body {
	line-height: 1.7;
}

/* --- Chrome helpers (§4) ------------------------------------------------------ */

/* The Site Navigation Menu widget in the masthead's drop zone keeps no portlet
   chrome, and the layout row around the masthead must not clip the language
   menu (layout-common-styles sets .lfr-layout-structure-item-row
   {overflow: hidden}). */
.support-chrome .portlet-topper {
	display: none;
}

.support-chrome .portlet-content {
	padding: 0;
}

.support-chrome .lfr-layout-structure-item-row {
	overflow: visible !important;
}

/* §4.3: every page keeps 80px free at the bottom for the chat launcher.
   Two classes, so layout-common-styles' .lfr-layout-structure-item-container
   {padding: 0} cannot win on load order. */
.lfr-layout-structure-item-container.support-page {
	padding-bottom: 80px;
}

/* No vertical scroll bar on a page that fits the viewport. Clay's live
   announcer (the visually hidden aria-live region that @clayui/core's Table,
   Picker and TreeView mount through a portal into body, one each) is a 1px
   box positioned absolute with no offsets, so it lands at the body's end and
   its bottom edge sits one pixel past the viewport: document.scrollHeight is
   innerHeight + 1 on every page with a data set or any other Clay table,
   which is nearly all of them. Pinned to the document's top-left corner it
   stays in the viewport, still clipped, still announcing. Scoped to the
   demo's pages through the masters' chrome section. */
body:has(.support-chrome) > [data-live-announcer] {
	left: 0;
	top: 0;
}

/* --- Frontend Data Set tables (§5 "Tables", mockups /queue, /tickets,
   /refunds) ---------------------------------------------------------------------
   FDS draws Clay's striped table and, for a table without bulk actions,
   resets the hover row to white. Lexicon's table has no zebra striping, a
   #F0F5FF hover row and, on the queue, breached rows tinted #FEEFEF. The FDS
   and Clay rules are 6 to 10 classes deep, hence !important here. */
.support-page .visualization-mode-table tbody tr > td {
	background-color: #ffffff !important;
}

.support-page .visualization-mode-table tbody tr:has(.support-sla-breached) > td {
	background-color: #feefef !important;
}

.support-page .visualization-mode-table tbody tr:hover > td,
.support-page .visualization-mode-table tbody tr:hover .quick-action-menu {
	background-color: #f0f5ff !important;
}

/* The main column is leftmost and semibold (ticket number, refund request);
   the refunds' Ticket column (a related ticket number) reads the same way. */
.support-page .visualization-mode-table td.cell-ticketNumber,
.support-page .visualization-mode-table td.cell-ticketNumber a,
.support-page .visualization-mode-table td[class*='-ticketNumber'],
.support-page .visualization-mode-table td[class*='-ticketNumber'] a,
.support-page .visualization-mode-table td.cell-externalReferenceCode {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

/* Numbers are right-aligned, header included (the refunds' Amount). */
.support-page .visualization-mode-table .cell-amount {
	text-align: right;
}

/* Labels and column headers never wrap: in Japanese the status names broke
   one character per line in a squeezed column (§5 "Labels": one line, never
   truncated). */
.support-page .visualization-mode-table .label,
.support-page .visualization-mode-table td.cell-category-name,
.support-page .visualization-mode-table th {
	white-space: nowrap;
}


/* The post ticket analysis log (/web/desk/post-ticket-analysis, the only data
   set with a messageCount column). FDS fixes every column at the width its
   cell had on first paint, before the client-extension renderers filled
   theirs, so Changes, Findings, Status and Analysed came out as narrow as
   their titles and Changes broke after every word (after every character in
   Japanese). The columns get their widths here instead, measured on the
   longest value of each (ja: 「新規チケット · 返信 1 件 ·」, 「10月27日, 22:08」;
   en: "Resolved by customer", OPPORTUNITY, RUNNING), and Subject the rest:
   on the page's 1174px table every row fits in two lines. Narrower, the
   table scrolls rather than squeeze the subject. Dragging a column edge has
   no effect on this table. */
.support-page .visualization-mode-table table:has(th.cell-messageCount) {
	min-width: 69rem;
}

.support-page .visualization-mode-table table:has(th.cell-messageCount) th.cell-ticketNumber {
	width: 7rem !important;
}

.support-page .visualization-mode-table table:has(th.cell-messageCount) th.cell-subject {
	width: auto !important;
}

.support-page .visualization-mode-table table:has(th.cell-messageCount) th.cell-accountName {
	width: 10rem !important;
}

.support-page .visualization-mode-table table:has(th.cell-messageCount) th.cell-messageCount {
	width: 12.5rem !important;
}

.support-page .visualization-mode-table table:has(th.cell-messageCount) th.cell-findings,
.support-page .visualization-mode-table table:has(th.cell-messageCount) th.cell-dateCreated {
	width: 8.5rem !important;
}

.support-page .visualization-mode-table table:has(th.cell-messageCount) th.cell-entryStatus {
	width: 6rem !important;
}