/* Pixelogik Mail — Gmail-class ergonomics layer over the Elastic skin.
   Loaded AFTER /styles/styles.css (see templates/includes/layout.html).
   Brand: Deep Teal #1E5977 / Sky #299DCB. No Google marks, no Google copy. */

:root {
	--pxg-teal: #1E5977;
	--pxg-teal-dark: #163f56;
	--pxg-sky: #299DCB;
	--pxg-sky-tint: #e7f4f9;
	--pxg-ink: #1b2733;
	--pxg-ink-muted: #5b6b78;
	--pxg-border: #e3e8ec;
	--pxg-hover: #f1f6f8;
	--pxg-unread-dot: #299DCB;
	--pxg-row-h-comfortable: 60px;
	--pxg-row-h-compact: 34px;
	--pxg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Type: one considered scale, applied over elastic's default ---------- */

body, .messagelist, .toolbar, #message-header, .popupmenu, .listing {
	font-family: var(--pxg-font);
}

/* ---------- Global accent — elastic's own blue (#37beff / #00acff) still
   leaks through the Send button, links, focus rings, active menu items and
   checked toggles. One accent family everywhere: solid Teal for actionable
   fills, Sky for focus/attention. This is the fix for "wearing Google's
   blue" - the compose pill was recoloured in pass 1, the shared component
   classes underneath every OTHER button/link were not. ---------- */

a { color: var(--pxg-teal); }
a:hover, a:focus { color: var(--pxg-teal-dark); }

.btn-primary,
.floating-action-buttons a.button,
.popover .menu li a:not(.disabled):hover,
.popover .menu .dropbutton a.dropdown:hover,
.popupmenu .listing li > a:not(.disabled):hover,
.popupmenu .listing li.selected,
.ui-menu .ui-state-active,
.ui-datepicker a.ui-state-active,
div.tox .tox-dialog__footer .tox-button {
	background: var(--pxg-teal) !important;
	border-color: var(--pxg-teal) !important;
	color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
div.tox .tox-dialog__footer .tox-button:hover {
	background: var(--pxg-teal-dark) !important;
	border-color: var(--pxg-teal-dark) !important;
	box-shadow: 0 0 0 .2rem rgba(30, 89, 119, .25) !important;
}

#taskmenu .action-buttons a,
.ui.alert a:not(.btn) {
	color: var(--pxg-teal) !important;
}
#taskmenu .action-buttons a:hover { color: var(--pxg-sky) !important; }

.message-htmlpart blockquote,
.message-part blockquote {
	color: var(--pxg-teal) !important;
	border-left-color: var(--pxg-teal) !important;
	border-right-color: var(--pxg-teal) !important;
}

.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount {
	background: var(--pxg-teal) !important;
}

.ui-datepicker .ui-datepicker-days-cell-over a,
.ui-datepicker .ui-state-highlight,
.ui-datepicker.ui-widget-content .ui-state-highlight {
	background: var(--pxg-sky-tint) !important;
	color: var(--pxg-teal) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
	border-color: var(--pxg-teal) !important;
	background-color: var(--pxg-teal) !important;
}

.btn-link {
	color: var(--pxg-teal) !important;
}
.btn-link:hover, .btn-link:focus {
	color: var(--pxg-teal-dark) !important;
}

.form-control:focus,
.recipient-input.focus,
.multi-input > .content.focused,
.tagedit-list[tabindex="-1"],
.custom-file-input:focus ~ .custom-file-label,
.formcontent.raweditor .CodeMirror-focused,
div.tox.focused,
div.tox .tox-color-input > input:focus,
div.tox .tox-listboxfield .tox-listbox--select:focus,
div.tox .tox-textarea:focus,
div.tox .tox-textfield:focus {
	border-color: var(--pxg-sky) !important;
	box-shadow: 0 0 0 .2rem rgba(41, 157, 203, .25) !important;
}

/* ---------- Rail: compose + labels ---------- */

#layout-sidebar {
	background-color: #fbfcfd;
	border-right: 1px solid var(--pxg-border);
}

#layout-sidebar .header .username {
	color: var(--pxg-teal);
	font-weight: 700;
}

/* Compose — the one prominent pill, Gmail-style, sourced from menu.html's existing button */
#layout-menu a.compose,
#taskmenu a.compose,
a.button.compose {
	background: var(--pxg-teal);
	color: #fff !important;
	border-radius: 20px;
	margin: 12px 16px;
	padding: 10px 20px !important;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(30, 89, 119, .3);
	transition: background-color .15s ease, box-shadow .15s ease;
}
#layout-menu a.compose:hover,
#taskmenu a.compose:hover,
a.button.compose:hover {
	background: var(--pxg-teal-dark);
	box-shadow: 0 2px 6px rgba(30, 89, 119, .4);
}

#folderlist-content .folderlist li > a {
	border-radius: 0 20px 20px 0;
	margin-right: 10px;
	transition: background-color .12s ease;
}
#folderlist-content .folderlist li.selected > a {
	background: var(--pxg-sky-tint);
	color: var(--pxg-teal-dark);
	font-weight: 700;
}
#folderlist-content .folderlist li.selected > a:before {
	color: var(--pxg-teal);
}
#folderlist-content .folderlist li > a:hover {
	background: var(--pxg-hover);
}

/* unread count pill (wrapped via unreadwrap="<span class=\"count\">%s</span>" in mail.html) */
#folderlist-content .folderlist .count {
	background: var(--pxg-teal);
	color: #fff;
	border-radius: 10px;
	padding: 1px 8px;
	font-size: 11px;
	font-weight: 700;
	min-width: 18px;
	text-align: center;
	display: inline-block;
}
#folderlist-content .folderlist li.selected .count {
	background: var(--pxg-teal-dark);
}

/* collapsible sub-folders already use RC's own treelist expand/collapse — just style the handle */
#folderlist-content .folderlist .treetoggle {
	color: var(--pxg-ink-muted);
}

/* ---------- Filter chips (real RC search filters, one-click) ---------- */

#pixelogik-filterchips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 6px 12px 10px;
	border-bottom: 1px solid var(--pxg-border);
}
#pixelogik-filterchips .chip {
	appearance: none;
	border: 1px solid var(--pxg-border);
	background: #fff;
	color: var(--pxg-ink-muted);
	border-radius: 14px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all .12s ease;
}
#pixelogik-filterchips .chip:hover {
	border-color: var(--pxg-sky);
	color: var(--pxg-teal);
}
#pixelogik-filterchips .chip.active {
	background: var(--pxg-teal);
	border-color: var(--pxg-teal);
	color: #fff;
}

/* density / reading-pane toolbar buttons */
#pixelogik-density-toggle:before { content: "\f042"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
#pixelogik-readingpane-toggle:before { content: "\f2d0"; font-family: "Font Awesome 6 Free"; font-weight: 900; }

/* ---------- Message list: dense single-line rows ---------- */

.messagelist tr {
	height: var(--pxg-row-h-comfortable);
}
body.density-compact .messagelist tr {
	height: var(--pxg-row-h-compact);
}
body.density-compact .messagelist td.subject {
	padding-top: 2px;
	padding-bottom: 2px;
}
body.density-compact .messagelist .contact-photo,
body.density-compact .pxg-avatar {
	width: 20px;
	height: 20px;
	line-height: 20px;
	font-size: 10px;
}

.messagelist td.subject {
	position: relative;
}

/* ---------- Type hierarchy: sender > timestamp, subject clearly below both ---------- */
.messagelist td.subject .fromto {
	color: var(--pxg-ink);
	font-weight: 600;
	font-size: 13.5px;
}
.messagelist tr.unread td.subject .fromto,
.messagelist tr.unread td.subject .subject {
	font-weight: 700;
	color: #000;
}
.messagelist td.subject .subject {
	color: var(--pxg-ink-muted);
	font-weight: 400;
	font-size: 13px;
}
.messagelist td.subject .date {
	font-size: 11.5px;
	color: var(--pxg-ink-muted);
	font-variant-numeric: tabular-nums;
}
.messagelist tr.unread td.subject:before {
	content: "";
	position: absolute;
	left: 2px;
	top: 50%;
	transform: translateY(-50%);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pxg-unread-dot);
}

/* hairline row separators - at 100+ messages, hover-only differentiation
   reads as an undifferentiated wall of text; a 1px hairline (not a heavy
   grey block) gives scanning rhythm without adding visual weight. */
.messagelist tr td.subject {
	border-bottom: 1px solid var(--pxg-border);
}
.messagelist tr:last-child td.subject {
	border-bottom: 0;
}

.messagelist tr:hover {
	background: var(--pxg-hover);
}
.messagelist tr.selected {
	background: var(--pxg-sky-tint) !important;
}

/* sender-initial avatar bubble, injected client-side by pixelogik.js in the
   initrow hook — same extension point Elastic itself uses for row_init. */
.pxg-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--pxg-sky);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	margin-right: 8px;
	flex: none;
	vertical-align: middle;
}

/* ---------- Hover-reveal row actions (archive / delete / read / move) ---------- */

.pxg-row-actions {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: none;
	gap: 4px;
	background: linear-gradient(to left, var(--pxg-hover) 70%, transparent);
	padding-left: 24px;
}
.messagelist tr:hover .pxg-row-actions,
.messagelist tr.selected .pxg-row-actions {
	display: flex;
}
.messagelist tr.selected .pxg-row-actions {
	background: linear-gradient(to left, var(--pxg-sky-tint) 70%, transparent);
}
.pxg-row-actions button {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--pxg-ink-muted);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	cursor: pointer;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 13px;
}
.pxg-row-actions button:hover {
	background: rgba(30, 89, 119, .12);
	color: var(--pxg-teal);
}
.pxg-row-actions button.archive:before { content: "\f187"; }
.pxg-row-actions button.delete:before { content: "\f1f8"; }
.pxg-row-actions button.toggleread:before { content: "\f0e0"; }
.pxg-row-actions button.move:before { content: "\f07b"; }

/* ---------- Reading pane: bottom split (right/off reuse RC's native widescreen/list layout) ---------- */

body.readingpane-bottom.layout-widescreen #layout {
	display: grid;
	grid-template-columns: minmax(220px, 22%) 1fr;
	grid-template-rows: 45% 55%;
	grid-template-areas: "sidebar list" "sidebar content";
}
body.readingpane-bottom.layout-widescreen #layout-sidebar { grid-area: sidebar; max-width: none; }
body.readingpane-bottom.layout-widescreen #layout-list { grid-area: list; max-width: none; border-right: 0; border-bottom: 1px solid var(--pxg-border); }
body.readingpane-bottom.layout-widescreen #layout-content { grid-area: content; }

/* ---------- Reply / reply-all / forward stay reachable from the reading pane ---------- */
#layout-content .header .toolbar,
#mail-menu {
	gap: 4px;
}

/* ---------- Reading pane framing: a wide pane with short mail left raw
   reads as "broken", not "spacious" - cap the readable column and give it
   real margins so the whitespace looks designed instead of empty. ---------- */
#message-header {
	max-width: 760px;
	margin: 0 auto;
	padding: 28px 32px 18px;
}
#messagebody,
#message-content > .scroller > .iframe-wrapper,
.message-part, .message-htmlpart {
	max-width: 760px;
	margin: 0 auto;
}
#message-content .iframe-wrapper {
	padding: 0 32px 32px;
}
#message-header .subject {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.01em;
}
#message-header .contact-photo,
#message-header .photo {
	width: 40px;
	height: 40px;
}

/* ---------- Toolbar grouping: a hairline between logical clusters instead
   of one undifferentiated row of icons. ---------- */
#pixelogik-density-toggle {
	position: relative;
	margin-left: 8px;
	padding-left: 14px;
}
#pixelogik-density-toggle:after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 20px;
	background: var(--pxg-border);
}
#messagelist-header a.button.refresh {
	position: relative;
	margin-left: 6px;
	padding-left: 14px;
}
#messagelist-header a.button.refresh:after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 20px;
	background: var(--pxg-border);
}

/* the Reply/Forward <-> Delete/Mark/More clusters already sit either side of
   elastic's own flex .spacer - give that spacer a visible hairline instead
   of leaving it as pure whitespace. */
#toolbar-menu li.spacer {
	position: relative;
	width: 1px !important;
	margin: 0 10px;
}
#toolbar-menu li.spacer:after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 20px;
	background: var(--pxg-border);
}

/* ---------- Conversation view: cross-folder thread strip ---------- */

.pxg-conversation-note {
	margin: 8px 12px;
	padding: 8px 12px;
	border-radius: 8px;
	background: var(--pxg-sky-tint);
	color: var(--pxg-teal-dark);
	font-size: 12px;
	line-height: 1.4;
}
.pxg-conversation-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 12px 10px;
}
.pxg-conversation-strip a {
	border: 1px solid var(--pxg-border);
	border-radius: 12px;
	padding: 3px 10px;
	font-size: 11px;
	color: var(--pxg-teal);
	text-decoration: none;
	background: #fff;
}
.pxg-conversation-strip a:hover {
	border-color: var(--pxg-sky);
	background: var(--pxg-sky-tint);
}
.pxg-conversation-strip a.current {
	background: var(--pxg-teal);
	border-color: var(--pxg-teal);
	color: #fff;
}

/* ---------- Mobile (390px) ---------- */

@media screen and (max-width: 480px) {
	#pixelogik-filterchips {
		padding: 6px 8px 8px;
		overflow-x: auto;
		flex-wrap: nowrap;
	}
	.pxg-row-actions {
		background: none;
		padding-left: 0;
	}
	.messagelist tr { height: var(--pxg-row-h-comfortable); }
	#pixelogik-readingpane-toggle { display: none; } /* bottom/right split is meaningless under ~480px; native list layout always applies */
}

/* ---------------------------------------------------------------------------
   Cutover fixes, 2026-08-11 (second attempt).

   The first attempt narrowed #layout-menu to 56px to kill the "two sidebars"
   problem. In Elastic #layout-menu is NOT the task rail - it is the whole left
   column, task rail AND folder list. Narrowing it collapsed the folder list on
   the live site: no Inbox, Drafts, Sent or Archive at all. Rolled back.

   The two-rail width question needs a template change, not a width override, so
   it is left alone here. What follows is only the two fixes that cannot break
   layout.
   --------------------------------------------------------------------------- */

/* 1. Truncated labels: the compose button rendered as "Co..." and the
   reading-pane control as "Reading p...". Give the labels room rather than an
   ellipsis - no widths are changed, only overflow behaviour. */
#layout-content .header .toolbar a.button,
#messagelist-header a.button {
	max-width: none !important;
}
#layout-content .header .toolbar a.button span.inner,
#messagelist-header a.button span.inner {
	text-overflow: clip !important;
	overflow: visible !important;
	max-width: none !important;
	white-space: nowrap;
}
#taskmenu a.compose span.inner {
	text-overflow: clip !important;
	overflow: visible !important;
	max-width: none !important;
}

/* 2. Reply/Forward/Delete were fully rendered and apparently clickable while
   the pane read "No conversation selected". Dim a control that does nothing. */
#layout-content .header .toolbar a.button.disabled,
#layout-content .header .toolbar a.button[aria-disabled="true"] {
	opacity: .32 !important;
	pointer-events: none !important;
}