/**
 * nodapost webmail skin — presentation layer only.
 *
 * Loaded AFTER elastic's styles.css (see templates/includes/layout.html).
 * Contains no request logic: every control it styles is a control Roundcube
 * already renders. All colours live in the token block below.
 */

/* ------------------------------------------------------------------ *
 * 1. Design tokens
 * ------------------------------------------------------------------ */

:root {
	--np-font: system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
	--np-font-size: 14px;
	--np-line-height: 20px;

	--np-bg: #f6f8fc;
	--np-surface: #fff;
	--np-surface-read: #f2f6fc;
	--np-text: #202124;
	--np-text-secondary: #5f6368;
	--np-text-disabled: #80868b;
	--np-hover: #eaedf1;
	--np-active: #d3e3fd;
	--np-accent: #0b57d0;
	--np-accent-hover: #0842a0;
	--np-on-accent: #fff;
	--np-search-bg: #eaf1fb;
	--np-border: #dadce0;
	--np-border-soft: #e8eaed;
	--np-star: #f9ab00;
	--np-topbar-icon: #5f6368;
	--np-topbar-icon-hover: #202124;
	--np-topbar-icon-active: #0b57d0;
	--np-topbar-icon-active-bg: #d3e3fd;
	--np-danger: #d93025;

	--np-shadow-search: 0 1px 1px 0 rgba(65, 69, 73, .3), 0 1px 3px 1px rgba(65, 69, 73, .15);
	--np-shadow-compose: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
	--np-shadow-compose-hover: 0 1px 3px 0 rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15);
	--np-shadow-row: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px rgba(60, 64, 67, .3);
	--np-shadow-pop: 0 2px 6px 2px rgba(60, 64, 67, .15), 0 1px 2px rgba(60, 64, 67, .3);

	--np-radius-sm: 4px;
	--np-radius-md: 8px;
	--np-radius-lg: 16px;
	--np-radius-pill: 28px;

	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-6: 24px;

	--np-topbar-h: 64px;
	--np-header-h: 56px;
	--np-ctl-h: 40px;
	--np-sidebar-w: 256px;
	--np-row-h: 40px;
	--np-sender-w: 180px;
	--np-date-w: 100px;
	--np-icon: 20px;
}

html.dark-mode {
	--np-bg: #16181c;
	--np-surface: #1e1f22;
	--np-surface-read: #26282d;
	--np-text: #e3e3e3;
	--np-text-secondary: #9aa0a6;
	--np-text-disabled: #7b8085;
	--np-hover: #2a2d33;
	--np-active: #004a77;
	--np-accent: #a8c7fa;
	--np-accent-hover: #c2ddff;
	--np-on-accent: #062e6f;
	--np-search-bg: #2a2d33;
	--np-border: #3c4043;
	--np-border-soft: #303237;
	--np-star: #fdd663;
	--np-topbar-icon: #c9cdd3;
	--np-topbar-icon-hover: #fff;
	--np-topbar-icon-active: #a8c7fa;
	--np-topbar-icon-active-bg: #004a77;
	--np-danger: #f28b82;

	--np-shadow-search: 0 1px 3px 1px rgba(0, 0, 0, .5);
	--np-shadow-compose: 0 1px 3px 1px rgba(0, 0, 0, .45);
	--np-shadow-compose-hover: 0 2px 8px 3px rgba(0, 0, 0, .5);
	--np-shadow-row: inset 1px 0 0 #3c4043, inset -1px 0 0 #3c4043, 0 1px 2px rgba(0, 0, 0, .6);
	--np-shadow-pop: 0 2px 6px 2px rgba(0, 0, 0, .45);
}

/* ------------------------------------------------------------------ *
 * 2. Page shell
 * ------------------------------------------------------------------ */

html {
	font-size: var(--np-font-size);
}

body {
	font-family: var(--np-font);
	font-size: var(--np-font-size);
	line-height: var(--np-line-height);
	color: var(--np-text);
	background: var(--np-bg);
}

html:not(.iframe) body:has(> #np-topbar),
body.np-shell {
	display: flex;
	flex-direction: column;
}

body > #layout {
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
	background: var(--np-bg);
	gap: 0;
}

/* Panes lose elastic's hard borders; the list becomes a floating card. */
#layout > div {
	border-right: 0 !important;
	background: transparent;
}

.voice {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * 3. Top bar
 * ------------------------------------------------------------------ */

.np-topbar {
	flex: 0 0 var(--np-topbar-h);
	height: var(--np-topbar-h);
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 0 var(--sp-4);
	background: var(--np-bg);
	border-bottom: 0;
	box-sizing: border-box;
}

.np-topbar-lead {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	flex: 0 0 auto;
	min-width: 0;
}

.np-topbar-search {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-start;
	min-width: 0;
	padding-left: var(--sp-2);
}

.np-topbar-trail {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	margin-left: auto;
}

.np-sidebar-scrim {
	display: none;
}

.np-iconbtn {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--np-text-secondary);
	cursor: pointer;
}

/* Elastic's bootstrap_style() stamps .btn.btn-secondary onto buttons, which
   would give the hamburger a filled pill the task icons do not have. */
.np-topbar .np-iconbtn,
.np-topbar .np-iconbtn.btn,
.np-topbar .np-iconbtn.btn-secondary {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--np-topbar-icon);
}

.np-iconbtn:hover,
.np-topbar .np-iconbtn.btn:hover,
.np-topbar .np-iconbtn.btn-secondary:hover {
	background: var(--np-hover);
	color: var(--np-topbar-icon-hover);
}

.np-i {
	width: var(--np-icon);
	height: var(--np-icon);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.np-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-1) var(--sp-2);
	border-radius: var(--np-radius-md);
	text-decoration: none;
	color: var(--np-text);
}

.np-brand:hover,
.np-brand:focus {
	text-decoration: none;
	color: var(--np-text);
}

.np-brand-mark {
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
}

.np-brand-plate {
	fill: var(--np-accent);
}

.np-brand-glyph {
	stroke: var(--np-on-accent);
}

.np-brand-word {
	font-size: 20px;
	line-height: 24px;
	letter-spacing: -.01em;
	font-weight: 400;
	color: var(--np-topbar-icon);
	white-space: nowrap;
}

.np-avatar {
	width: 32px;
	height: 32px;
	margin-left: var(--sp-2);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--np-accent);
	color: var(--np-on-accent);
	font-weight: 500;
	font-size: 15px;
	text-transform: uppercase;
	user-select: none;
}

/* ------------------------------------------------------------------ *
 * 4. Search field (Roundcube's own #mailsearchform, relocated)
 * ------------------------------------------------------------------ */

.np-topbar-search .searchbar {
	position: static !important;
	width: 100%;
	max-width: 720px;
	height: 48px;
	display: flex !important;
	align-items: center;
	padding: 0 var(--sp-1);
	border: 0 !important;
	border-radius: var(--np-radius-md);
	background: var(--np-search-bg) !important;
	box-shadow: none;
	transition: background-color .15s ease, box-shadow .15s ease;
}

.np-topbar-search .searchbar:focus-within {
	background: var(--np-surface) !important;
	box-shadow: var(--np-shadow-search);
}

/* Elastic paints a magnifier on the form AND ships an a.button.search.
   Keep the functional button, drop the decoration. */
.np-topbar-search .searchbar form::before {
	display: none !important;
}

.np-topbar-search .searchbar form {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	margin: 0;
}

.np-topbar-search .searchbar input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: 0;
	font-size: var(--np-font-size);
	color: var(--np-text);
	padding: 0 var(--sp-2);
}

/* Magnifier on the left, search options ("filters") on the right. */
.np-topbar-search .searchbar > a.button.search,
.np-topbar-search .searchbar a[data-popup="searchmenu"],
.np-topbar-search .searchbar a.options {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--np-text-secondary);
}

.np-topbar-search .searchbar > a.button.search {
	order: -1;
}

.np-topbar-search .searchbar a:hover {
	background: rgba(60, 64, 67, .08);
}

html.dark-mode .np-topbar-search .searchbar a:hover {
	background: rgba(255, 255, 255, .08);
}

/* ------------------------------------------------------------------ *
 * 5. Sidebar
 *
 * One gutter (--sp-2 from the edge) and a shared 24px icon column for both
 * Compose and the folder rows, so the two line up on the same grid.
 * ------------------------------------------------------------------ */

#layout-sidebar {
	flex: 0 0 var(--np-sidebar-w) !important;
	width: var(--np-sidebar-w) !important;
	max-width: var(--np-sidebar-w) !important;
	min-width: var(--np-sidebar-w) !important;
	background: transparent !important;
	padding: 0 0 var(--sp-2);
	transition: margin-left .2s ease;
}

body.np-sidebar-collapsed #layout-sidebar {
	margin-left: calc(-1 * var(--np-sidebar-w));
}

/* Folder-list heading row; the folder-actions kebab is anchored to it. */
#layout-sidebar > .header {
	height: var(--np-header-h) !important;
	min-height: var(--np-header-h) !important;
	line-height: normal !important;
	border-bottom: 0 !important;
	background: transparent !important;
	padding: 0 var(--sp-2) 0 var(--sp-6) !important;
	display: flex !important;
	align-items: center;
	justify-content: flex-start !important;
	gap: var(--sp-2);
	overflow: visible !important;
}

#layout-sidebar > .header .header-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0 !important;
	text-align: left !important;
	font-size: 12px;
	line-height: var(--sp-4);
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--np-text-secondary);
}

#layout-sidebar > .header a.button:not(.hidden) {
	box-sizing: border-box;
	width: var(--np-ctl-h) !important;
	height: var(--np-ctl-h) !important;
	min-width: var(--np-ctl-h) !important;
	max-width: none !important;
	flex: 0 0 var(--np-ctl-h);
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	border-radius: 50%;
	line-height: 1 !important;
	color: var(--np-text-secondary);
}

#layout-sidebar > .header a.button::before {
	font-size: var(--np-icon) !important;
	width: var(--np-icon) !important;
	height: var(--np-icon) !important;
	line-height: var(--np-icon) !important;
	margin: 0 !important;
	float: none !important;
	text-align: center;
}

#layout-sidebar > .header a.button:hover {
	background: var(--np-hover);
}

/* Mobile-only "back to list" control. */
@media screen and (min-width: 1024px) {
	#layout-sidebar > .header a.button.back-list-button {
		display: none !important;
	}
}

/* Compose — relocated pill. Its icon sits on the same 24px column as folders. */
#layout-sidebar .np-compose-slot {
	padding: 0 var(--sp-2) var(--sp-3) var(--sp-2);
}

#layout-sidebar .np-compose-slot a.compose {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	height: 56px;
	min-width: 140px;
	max-width: 100%;
	padding: 0 var(--sp-6) 0 var(--sp-4);
	border-radius: var(--np-radius-lg);
	background: var(--np-surface);
	color: var(--np-text);
	box-shadow: var(--np-shadow-compose);
	font-size: var(--np-font-size);
	font-weight: 500;
	text-decoration: none;
	transition: box-shadow .18s ease, background-color .18s ease;
}

#layout-sidebar .np-compose-slot a.compose:hover {
	box-shadow: var(--np-shadow-compose-hover);
	background: var(--np-surface);
}

#layout-sidebar .np-compose-slot a.compose::before {
	font-family: Icons;
	font-weight: 900;
	font-style: normal;
	content: "\f303";
	font-size: var(--np-icon);
	width: var(--np-icon);
	height: var(--np-icon);
	line-height: var(--np-icon);
	flex: 0 0 var(--np-icon);
	text-align: center;
	color: var(--np-accent);
	margin: 0;
	float: none;
}

#layout-sidebar .np-compose-slot a.compose .inner {
	position: static;
	clip: auto;
	width: auto;
	height: auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Folder navigation */
#layout-sidebar #folderlist-content {
	padding: 0 var(--sp-2) 0 0;
}

#mailboxlist.folderlist li {
	border: 0 !important;
	padding-right: 0 !important;
	overflow: visible;
}

#mailboxlist.folderlist li > a,
#mailboxlist.folderlist li > div > a {
	box-sizing: border-box;
	height: 32px;
	line-height: 32px;
	padding: 0 var(--sp-3) 0 var(--sp-6) !important;
	border: 0 !important;
	border-radius: 0 var(--np-radius-lg) var(--np-radius-lg) 0;
	color: var(--np-text);
	font-size: var(--np-font-size);
	font-weight: 400;
	display: flex;
	align-items: center;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#mailboxlist.folderlist li > a::before {
	font-size: var(--np-icon);
	width: var(--np-icon);
	height: var(--np-icon);
	line-height: var(--np-icon);
	color: var(--np-text-secondary);
	margin: 0 var(--sp-4) 0 0;
	float: none;
	flex: 0 0 var(--np-icon);
	text-align: center;
}

#mailboxlist.folderlist li > a:hover {
	background: var(--np-hover);
}

#mailboxlist.folderlist li.selected > a,
#mailboxlist.folderlist li.selected > div > a {
	background: var(--np-active) !important;
	color: var(--np-text) !important;
	font-weight: 700;
}

#mailboxlist.folderlist li.selected > a::before {
	color: var(--np-text);
}

#mailboxlist.folderlist li.mailbox.unread > a {
	font-weight: 700;
	padding-right: 3.2em !important;
}

#mailboxlist.folderlist li.mailbox .unreadcount {
	background: transparent !important;
	color: var(--np-text) !important;
	font-size: 12px;
	font-weight: 700;
	line-height: 32px;
	margin: 0;
	padding: 0 var(--sp-3) 0 0;
	top: 0;
	right: 0;
	border-radius: 0;
}

/* Quota indicator */
#layout-sidebar > .footer {
	background: transparent !important;
	border-top: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	line-height: normal !important;
	color: var(--np-text-secondary);
	padding: 0 !important;
	display: block !important;
}

#layout-sidebar .quota-widget {
	display: flex !important;
	align-items: center;
	gap: var(--sp-3);
	width: auto;
	max-width: none;
	padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-6);
	color: var(--np-text-secondary);
	line-height: var(--np-icon);
}

#layout-sidebar .quota-widget::before {
	font-size: var(--sp-4) !important;
	width: var(--np-icon) !important;
	height: var(--np-icon) !important;
	line-height: var(--np-icon) !important;
	margin: 0 !important;
	float: none !important;
	flex: 0 0 var(--np-icon);
	text-align: center;
}

#layout-sidebar .quota-widget .bar {
	flex: 1 1 auto;
	min-width: 0;
	height: 6px;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 3px;
	background: var(--np-hover) !important;
	overflow: hidden;
}

#layout-sidebar .quota-widget .bar div {
	height: 100%;
	background: var(--np-accent);
}

#layout-sidebar .quota-widget .count {
	order: 2;
	flex: 0 0 auto;
	font-size: 12px;
	line-height: var(--np-icon);
}

/* ------------------------------------------------------------------ *
 * 6. Message list card and its toolbar
 *
 * Elastic sizes header controls for a 58px bar and, on links that are not
 * .button (Select / Threads / Options), lets the .inner label render next to
 * the icon inside a 3.2–6rem floated box — that is what made them collide.
 * Here every header control is a 40px icon-only target in a real flex row;
 * the labels stay in the accessibility tree.
 * ------------------------------------------------------------------ */

#layout-list {
	container-type: inline-size;
	container-name: np-list;
	flex: 5 1 0 !important;
	max-width: none !important;
	min-width: 380px;
	margin: 0 var(--sp-2) var(--sp-2);
	background: var(--np-surface) !important;
	border-radius: var(--np-radius-lg);
	overflow: hidden;
}

#layout-content {
	flex: 6 1 0;
	margin: 0 var(--sp-2) var(--sp-2) 0;
	background: var(--np-surface) !important;
	border-radius: var(--np-radius-lg);
	overflow: hidden;
}

/* ---- shared chrome for both panel headers: same height, same ground ---- */

#messagelist-header.header,
#layout-content > .header {
	box-sizing: border-box;
	height: var(--np-header-h) !important;
	min-height: var(--np-header-h) !important;
	line-height: normal !important;
	display: flex !important;
	align-items: center;
	justify-content: flex-start !important;
	gap: var(--sp-2);
	padding: 0 var(--sp-2) !important;
	margin: 0 !important;
	background: var(--np-surface) !important;
	color: var(--np-text) !important;
	border-bottom: 1px solid var(--np-border-soft) !important;
	font-size: var(--np-font-size);
	font-weight: 400;
	overflow: visible !important;
}

#messagelist-header .header-title {
	display: none;
}

#layout-content > .header .header-title {
	flex: 0 1 auto;
	max-width: 40%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0 !important;
	text-align: left !important;
	font-size: var(--np-font-size);
	font-weight: 500;
	color: var(--np-text);
}

/* ---- list toolbar ---- */

#messagelist-header > .toolbar.menu {
	position: static !important;
	list-style: none;
	display: flex !important;
	align-items: center;
	gap: var(--sp-2);
	height: auto !important;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
	background: transparent !important;
	border: 0 !important;
}

#messagelist-header > .toolbar.menu li {
	display: flex !important;
	align-items: center;
	height: auto !important;
	margin: 0;
	padding: 0;
}

/* every control in this bar: one size, one shape, no floats */
#messagelist-header a:not(.hidden) {
	box-sizing: border-box;
	height: var(--np-ctl-h) !important;
	width: var(--np-ctl-h);
	min-width: var(--np-ctl-h) !important;
	max-width: none !important;
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	border-radius: 50%;
	line-height: 1 !important;
	font-size: var(--np-font-size);
	color: var(--np-text-secondary);
	background: transparent;
}

#messagelist-header a::before {
	font-size: var(--np-icon) !important;
	width: var(--np-icon) !important;
	height: var(--np-icon) !important;
	line-height: var(--np-icon) !important;
	margin: 0 !important;
	float: none !important;
	display: block;
	text-align: center;
}

/* labels stay for screen readers; they must not take layout space */
#messagelist-header a .inner {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

#messagelist-header a:hover {
	background: var(--np-hover);
}

#messagelist-header a.disabled {
	color: var(--np-text-disabled);
	opacity: .5;
}

/* "select all" reads as a checkbox with a caret */
#messagelist-header a.select {
	width: auto !important;
	min-width: 56px !important;
	border-radius: var(--np-radius-lg);
	gap: var(--sp-1);
	padding: 0 var(--sp-2) !important;
}

#messagelist-header a.select::before {
	content: "";
	width: 18px !important;
	height: 18px !important;
	border: 2px solid var(--np-text-secondary);
	border-radius: 2px;
	display: inline-block;
	flex: 0 0 18px;
	box-sizing: border-box;
}

#messagelist-header a.select.np-checked::before,
#messagelist-header a.select.np-indeterminate::before {
	background: var(--np-accent);
	border-color: var(--np-accent);
	position: relative;
}

#messagelist-header a.select.np-checked::before {
	box-shadow: inset 0 0 0 2px var(--np-surface), inset 0 0 0 4px var(--np-accent);
}

#messagelist-header a.select.np-indeterminate::before {
	box-shadow: inset 0 5px 0 -1px var(--np-surface), inset 0 -5px 0 -1px var(--np-surface);
}

#messagelist-header a.select::after {
	font-family: Icons;
	font-weight: 900;
	font-style: normal;
	content: "\f0d7";
	font-size: 12px;
	line-height: 1;
	flex: 0 0 auto;
}

/* Roundcube folds this toolbar into a popup on anything narrower than its
   "large" layout, then adds a kebab to reopen it. Here the controls stay on
   screen, so the kebab would open a menu duplicating what is already visible.
   Below 768px the fold is genuinely useful and the kebab comes back. */
@media screen and (min-width: 768px) {
	#messagelist-header a.toolbar-list-button {
		display: none !important;
	}
}

@media screen and (max-width: 767px) {
	#messagelist-header > .toolbar.menu.popupmenu {
		display: none !important;
	}
}

/* pager, relocated from the list footer into the toolbar */
#messagelist-header .pagenav {
	margin-left: auto;
	display: flex !important;
	align-items: center;
	justify-content: flex-end !important;
	gap: var(--sp-1);
	height: var(--np-ctl-h) !important;
	min-height: 0 !important;
	line-height: normal !important;
	border-top: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	flex: 0 1 auto;
	min-width: 0;
	font-size: var(--np-font-size);
}

#messagelist-header .pagenav a {
	flex: 0 0 var(--np-ctl-h) !important;
}

#messagelist-header .pagenav .pagenav-text {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	line-height: var(--np-ctl-h);
	font-weight: 400;
	color: var(--np-text-secondary);
	padding: 0 var(--sp-2);
}

#messagelist-header .pagenav input.form-control,
#messagelist-header .pagenav .firstpage,
#messagelist-header .pagenav .lastpage {
	display: none !important;
}

/* mass actions — visible only while rows are selected */
.np-bulk {
	display: none;
	align-items: center;
	gap: var(--sp-2);
	flex: 0 0 auto;
}

#messagelist-header.np-has-selection .np-bulk {
	display: flex;
}

#messagelist-header.np-has-selection .pagenav {
	display: none !important;
}

.np-bulk button {
	width: var(--np-ctl-h);
	height: var(--np-ctl-h);
	flex: 0 0 var(--np-ctl-h);
	border: 0;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--np-text-secondary);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.np-bulk button:hover {
	background: var(--np-hover);
}

.np-bulk button[disabled] {
	opacity: .4;
	cursor: default;
}

.np-bulk button::before {
	font-family: Icons;
	font-weight: 900;
	font-style: normal;
	font-size: var(--np-icon);
	line-height: 1;
}

.np-bulk .np-archive::before { content: "\f187"; }
.np-bulk .np-delete::before  { content: "\f2ed"; }
.np-bulk .np-read::before    { content: "\f2b6"; }
.np-bulk .np-unread::before  { content: "\f0e0"; }

#messagelist-content {
	background: var(--np-surface);
	padding: 0;
}

/* the original pager footer is emptied by the relocation; hide the shell */
#layout-list > .pagenav.footer {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * 7. Message rows
 * ------------------------------------------------------------------ */

#messagelist {
	display: block !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	box-sizing: border-box;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
}

#messagelist > tbody {
	display: block !important;
	width: 100% !important;
	min-width: 0;
	box-sizing: border-box;
}

#messagelist tr.message {
	display: grid !important;
	width: 100% !important;
	min-width: 0;
	grid-template-columns: 42px auto 32px minmax(0, 1fr);
	align-items: center;
	position: relative;
	height: var(--np-row-h);
	min-height: var(--np-row-h);
	box-sizing: border-box;
	border-bottom: 1px solid var(--np-border-soft);
	background: var(--np-surface-read) !important;
	cursor: pointer;
}

#messagelist tr.message > td {
	display: flex;
	align-items: center;
	height: var(--np-row-h);
	width: auto !important;
	padding: 0;
	border: 0 !important;
	vertical-align: middle;
	font-size: var(--np-font-size) !important;
	line-height: var(--np-line-height);
	overflow: hidden;
}

#messagelist tr.message > td.selection {
	grid-column: 1;
	grid-row: 1;
	justify-content: center;
	visibility: hidden;
}

#messagelist.withselection tr.message > td.selection {
	visibility: visible;
}

#messagelist tr.message > td.selection input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--np-accent);
	cursor: pointer;
}

#messagelist tr.message > td.threads {
	grid-column: 2;
	grid-row: 1;
	width: 0 !important;
	padding: 0 !important;
	overflow: visible;
}

#messagelist tr.message > td.flags {
	grid-column: 3;
	grid-row: 1;
	justify-content: center;
	width: 32px !important;
}

#messagelist tr.message > td.flags > span {
	height: auto;
	line-height: 1;
	display: block;
}

#messagelist tr.message > td.flags > span.flag {
	width: var(--np-icon);
	height: var(--np-icon);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--np-text-disabled);
}

/* star instead of elastic's flag glyph */
#messagelist tr.message span.unflagged::before,
#messagelist tr.message span.flagged::before,
#messagelist tr.message:hover span.unflagged::before {
	font-family: Icons;
	font-style: normal;
	font-weight: 400;
	content: "\f005";
	font-size: 16px;
	line-height: var(--np-icon);
	width: var(--np-icon);
	height: var(--np-icon);
	margin: 0;
	float: none;
	display: block;
	text-align: center;
	color: inherit;
}

#messagelist tr.message span.flagged::before {
	font-weight: 900;
	color: var(--np-star);
}

#messagelist tr.message:hover span.unflagged {
	color: var(--np-text-secondary);
}

/* Reserve room for the attachment marker so it never sits on the subject. */
#messagelist tr.message:has(> td.flags > span.attachment > span) > td.subject > span.subject {
	margin-right: calc(var(--sp-6) + var(--sp-2));
}

/* attachment marker floats to the right, next to the date */
#messagelist tr.message > td.flags > span.attachment {
	position: absolute;
	right: calc(var(--np-date-w) + 12px);
	top: 50%;
	transform: translateY(-50%);
	color: var(--np-text-secondary);
}

#messagelist tr.message > td.flags > span.attachment span::before {
	font-size: 14px;
}

/* ---- the sender / subject / date line ---- */

#messagelist tr.message > td.subject {
	grid-column: 4;
	grid-row: 1;
	display: grid !important;
	grid-template-columns: auto var(--np-sender-w) minmax(0, 1fr) var(--np-date-w);
	align-items: center;
	gap: 0;
	flex-wrap: nowrap;
	width: auto !important;
	padding: 0 var(--sp-2) 0 0;
	min-width: 0;
}

#messagelist tr.message > td.subject > span {
	box-sizing: border-box;
	grid-row: 1;
	line-height: var(--np-line-height);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#messagelist tr.message > td.subject > span.status {
	grid-column: 1;
	width: 18px;
}

#messagelist tr.message > td.subject > span.fromto {
	grid-column: 2;
	flex: none;
	padding: 0 var(--sp-3) 0 0;
	font-size: var(--np-font-size);
	color: var(--np-text);
}

#messagelist tr.message > td.subject > span.subject {
	grid-column: 3;
	width: auto;
	font-size: var(--np-font-size);
	color: var(--np-text);
}

#messagelist tr.message > td.subject > span.subject a {
	color: inherit;
	font-weight: inherit;
}

/* Snippet: rendered only when a `.np-snippet` node exists on the row.
   Roundcube's list API returns no preview text, so nothing populates it today
   (see DESIGN.md → TODO). The rule is here so the markup degrades cleanly. */
#messagelist tr.message > td.subject > span.subject .np-snippet {
	color: var(--np-text-secondary);
	font-weight: 400;
}

#messagelist tr.message > td.subject > span.subject .np-snippet::before {
	content: " - ";
	color: var(--np-text-secondary);
}

#messagelist tr.message > td.subject > span.date {
	grid-column: 4;
	width: var(--np-date-w);
	text-align: right;
	font-size: 12px;
	color: var(--np-text-secondary);
	padding-left: var(--sp-2);
}

#messagelist tr.message > td.subject > span.size {
	display: none !important;
}

/* ---- read / unread ---- */

#messagelist tr.message.unread {
	background: var(--np-surface) !important;
}

#messagelist tr.message.unread > td.subject > span.fromto,
#messagelist tr.message.unread > td.subject > span.subject,
#messagelist tr.message.unread > td.subject > span.subject a,
#messagelist tr.message.unread > td.subject > span.date {
	font-weight: 700;
	color: var(--np-text);
}

#messagelist tr.message:not(.unread) > td.subject > span.fromto,
#messagelist tr.message:not(.unread) > td.subject > span.subject,
#messagelist tr.message:not(.unread) > td.subject > span.subject a {
	font-weight: 400;
	color: var(--np-text-secondary);
}

/* ---- hover / selection ---- */

#messagelist tr.message:hover {
	background: var(--np-surface) !important;
	box-shadow: var(--np-shadow-row);
	z-index: 2;
}

#messagelist tr.message.selected,
#messagelist tr.message.focused.selected {
	background: var(--np-active) !important;
	color: var(--np-text) !important;
}

#messagelist tr.message.selected > td.subject > span.fromto,
#messagelist tr.message.selected > td.subject > span.subject,
#messagelist tr.message.selected > td.subject > span.subject a,
#messagelist tr.message.selected > td.subject > span.date {
	color: var(--np-text) !important;
}

#messagelist tr.message.deleted > td.subject > span {
	text-decoration: line-through;
	color: var(--np-text-disabled);
}

/* elastic swaps date→size on hover; we swap date→row actions instead */
#messagelist tr.message:hover > td.subject > span.date,
#messagelist.sort-size tr.message > td.subject > span.date {
	display: block;
}

#messagelist tr.message:hover > td.subject > span.size,
#messagelist.sort-size tr.message > td.subject > span.size {
	display: none !important;
}

#messagelist tr.message.np-actions-open > td.subject > span.date {
	visibility: hidden;
}

#messagelist tr.message.np-actions-open > td.flags > span.attachment {
	display: none;
}

.np-row-actions {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	z-index: 3;
}

.np-row-actions button {
	width: 28px;
	height: 28px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--np-text-secondary);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.np-row-actions button:hover {
	background: var(--np-hover);
	color: var(--np-text);
}

.np-row-actions button::before {
	font-family: Icons;
	font-weight: 900;
	font-style: normal;
	font-size: 14px;
	line-height: 1;
}

.np-row-actions .np-archive::before { content: "\f187"; }
.np-row-actions .np-delete::before  { content: "\f2ed"; }
.np-row-actions .np-read::before    { content: "\f2b6"; }
.np-row-actions .np-unread::before  { content: "\f0e0"; }

/* The row adapts to the width of the list pane, not of the window: a narrow
   pane trims the sender column first, then folds the row onto two lines.
   Without this the subject collapses to nothing while the sender keeps 180px. */
@container np-list (max-width: 620px) {
	#messagelist tr.message {
		--np-date-w: 96px;
	}

	#messagelist tr.message > td.subject {
		grid-template-columns: 18px 140px minmax(0, 1fr) var(--np-date-w);
	}
}

@container np-list (max-width: 460px) {
	#messagelist tr.message {
		--np-date-w: 72px;

		height: 64px;
		min-height: 64px;
	}

	#messagelist tr.message > td,
	#messagelist tr.message > td.flags > span.flag {
		height: auto;
	}

	#messagelist tr.message > td.subject {
		grid-template-columns: minmax(0, 1fr) var(--np-date-w);
		grid-template-areas:
			"who  when"
			"what what";
		align-content: center;
		row-gap: var(--sp-1);
		padding: var(--sp-1) var(--sp-2) var(--sp-1) 0;
	}

	#messagelist tr.message > td.subject > span.status {
		display: none;
	}

	#messagelist tr.message > td.subject > span.fromto {
		grid-area: who;
		width: auto;
		padding-right: var(--sp-2);
	}

	#messagelist tr.message > td.subject > span.date {
		grid-area: when;
	}

	#messagelist tr.message > td.subject > span.subject {
		grid-area: what;
		margin-right: 0 !important;
	}

	#messagelist tr.message > td.flags > span.attachment {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * 8. States: loading / empty / error
 * ------------------------------------------------------------------ */

.np-skeleton {
	display: none;
	padding: 0;
}

#messagelist-content.np-loading .np-skeleton {
	display: block;
}

#messagelist-content.np-loading #messagelist,
#messagelist-content.np-loading .listing-info {
	display: none !important;
}

.np-skeleton-row {
	display: grid;
	grid-template-columns: 42px 32px var(--np-sender-w) minmax(0, 1fr) var(--np-date-w);
	align-items: center;
	gap: var(--sp-3);
	height: var(--np-row-h);
	padding: 0 var(--sp-2) 0 0;
	border-bottom: 1px solid var(--np-border-soft);
}

.np-skeleton-row span {
	height: 10px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--np-hover) 25%, var(--np-border-soft) 37%, var(--np-hover) 63%);
	background-size: 400% 100%;
	animation: np-shimmer 1.4s ease infinite;
}

.np-skeleton-row span:nth-child(1) { width: 18px; margin: 0 auto; height: 18px; border-radius: 2px; }
.np-skeleton-row span:nth-child(2) { width: 18px; margin: 0 auto; height: 18px; border-radius: 50%; }
.np-skeleton-row span:nth-child(3) { width: 70%; }
.np-skeleton-row span:nth-child(4) { width: 45%; }
.np-skeleton-row span:nth-child(5) { width: 60%; margin-left: auto; }

@keyframes np-shimmer {
	0%   { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.np-skeleton-row span { animation: none; }
}

#messagelist-content .listing-info {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	text-align: center;
	font-weight: 400;
	font-size: 15px;
	color: var(--np-text-secondary);
}

#messagelist-content .listing-info::before {
	font-family: Icons;
	font-weight: 400;
	font-style: normal;
	content: "\f2b6";
	display: block;
	font-size: 48px;
	line-height: 1;
	margin-bottom: var(--sp-4);
	color: var(--np-border);
}

.np-list-error {
	display: none;
	margin: var(--sp-6) auto;
	max-width: 420px;
	text-align: center;
	color: var(--np-text-secondary);
}

#messagelist-content.np-error .np-list-error {
	display: block;
}

#messagelist-content.np-error #messagelist,
#messagelist-content.np-error .listing-info,
#messagelist-content.np-error .np-skeleton {
	display: none !important;
}

.np-list-error b {
	display: block;
	color: var(--np-text);
	font-size: 15px;
	margin-bottom: var(--sp-1);
}

.np-list-error button {
	margin-top: var(--sp-4);
	height: 36px;
	padding: 0 var(--sp-6);
	border: 0;
	border-radius: 18px;
	background: var(--np-accent);
	color: var(--np-on-accent);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * 9. Reading pane toolbar
 *
 * Roundcube ships this as #mailtoolbar, but toolbar_init() removes it on
 * anything narrower than its "large" layout and rebuilds the same actions as
 * #toolbar-menu in the very same header. Both are styled here so the bar
 * looks identical either way: one 40px pill per action, icon and label in a
 * row, dropdown arrow inside its own pill group.
 * ------------------------------------------------------------------ */

#layout-content > .header > #mailtoolbar,
#layout-content > .header > #toolbar-menu {
	position: static !important;
	display: flex !important;
	align-items: center;
	gap: var(--sp-3);
	height: auto !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	list-style: none;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

#layout-content > .header > #mailtoolbar li,
#layout-content > .header > #toolbar-menu li {
	display: inline-flex !important;
	align-items: center;
	height: auto !important;
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	flex: 0 0 auto;
	min-width: 0;
}

#layout-content > .header > #mailtoolbar a:not(.hidden),
#layout-content > .header > #toolbar-menu a:not(.hidden) {
	box-sizing: border-box;
	height: var(--np-ctl-h) !important;
	min-height: 0 !important;
	min-width: 0 !important;
	max-width: none !important;
	width: auto !important;
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 var(--sp-3) !important;
	float: none !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: flex-start;
	gap: var(--sp-2);
	border: 0 !important;
	border-radius: calc(var(--np-ctl-h) / 2);
	line-height: 1 !important;
	font-size: var(--np-font-size);
	text-align: left !important;
	color: var(--np-text-secondary);
	background: transparent;
	overflow: hidden;
}

#layout-content > .header > #mailtoolbar a::before,
#layout-content > .header > #toolbar-menu a::before {
	font-size: var(--np-icon) !important;
	width: var(--np-icon) !important;
	height: var(--np-icon) !important;
	line-height: var(--np-icon) !important;
	margin: 0 !important;
	float: none !important;
	flex: 0 0 var(--np-icon);
	text-align: center;
}

#layout-content > .header > #mailtoolbar a .inner,
#layout-content > .header > #toolbar-menu a .inner {
	position: static !important;
	clip: auto !important;
	width: auto !important;
	height: auto !important;
	min-width: 0;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: var(--np-line-height);
}

#layout-content > .header > #mailtoolbar a:hover,
#layout-content > .header > #toolbar-menu a:hover {
	background: var(--np-hover) !important;
	color: var(--np-text);
}

#layout-content > .header > #mailtoolbar a.disabled,
#layout-content > .header > #toolbar-menu a.disabled {
	color: var(--np-text-disabled);
	opacity: .5;
}

/* Reply-all / Forward: the action and its arrow form one pill group. */
#layout-content > .header > #mailtoolbar .dropbutton,
#layout-content > .header > #toolbar-menu .dropbutton {
	display: inline-flex !important;
	align-items: center;
	flex: 0 0 auto;
	min-width: 0;
	border-radius: calc(var(--np-ctl-h) / 2);
	overflow: hidden;
}

#layout-content > .header > #mailtoolbar .dropbutton:hover,
#layout-content > .header > #toolbar-menu .dropbutton:hover {
	background: var(--np-hover) !important;
}

#layout-content > .header > #mailtoolbar .dropbutton > a,
#layout-content > .header > #toolbar-menu .dropbutton > a {
	border-radius: 0;
}

#layout-content > .header > #mailtoolbar a.dropdown,
#layout-content > .header > #toolbar-menu a.dropdown {
	flex: 0 0 auto;
	padding: 0 var(--sp-2) !important;
	min-width: 28px !important;
}

#layout-content > .header > #mailtoolbar a.dropdown .inner,
#layout-content > .header > #toolbar-menu a.dropdown .inner {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap;
}

#layout-content > .header > #mailtoolbar a.dropdown::before,
#layout-content > .header > #toolbar-menu a.dropdown::before {
	font-size: 12px !important;
	width: 12px !important;
	flex: 0 0 12px;
}

#layout-content > .header > #mailtoolbar .spacer,
#layout-content > .header > #toolbar-menu .spacer {
	flex: 1 1 auto;
	min-width: 0;
	height: 1px;
	background: transparent;
}

/* When the pane itself gets narrow the labels fold away and the actions stay
   as icons; they never shrink into each other. */
#layout-content > .header {
	container-type: inline-size;
	container-name: np-readtoolbar;
}

@container np-readtoolbar (max-width: 700px) {
	#layout-content > .header > #mailtoolbar a .inner,
	#layout-content > .header > #toolbar-menu a .inner {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		white-space: nowrap;
	}

	#layout-content > .header > #mailtoolbar a:not(.hidden),
	#layout-content > .header > #toolbar-menu a:not(.hidden) {
		padding: 0 var(--sp-2) !important;
	}
}

@container np-readtoolbar (max-width: 420px) {
	#layout-content > .header > #mailtoolbar,
	#layout-content > .header > #toolbar-menu {
		gap: var(--sp-1);
	}

	#layout-content > .header > #mailtoolbar a:not(.hidden),
	#layout-content > .header > #toolbar-menu a:not(.hidden) {
		padding: 0 var(--sp-1) !important;
	}
}

@media screen and (min-width: 1024px) {
	#layout-content > .header > a.button.back-list-button {
		display: none !important;
	}
}

/* Blank preview pane — our own watermark document fills it. */
#layout-content .iframe-wrapper {
	background: var(--np-bg);
}

/* ------------------------------------------------------------------ *
 * 10. Task icons relocated into the top bar
 *
 * Order is forced here so the theme switch always sits to the LEFT of the
 * gear and the two can never be confused: mail · contacts · theme · help ·
 * settings · sign out. `display:contents` on elastic's .special-buttons
 * wrapper lets its children take part in the same flex order.
 * ------------------------------------------------------------------ */

.np-topbar-trail #layout-menu {
	position: static !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	overflow: visible;
}

.np-topbar-trail #layout-menu .popover-header {
	display: none !important;
}

.np-topbar-trail #taskmenu {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: var(--sp-4);
	height: auto !important;
	width: auto !important;
	background: transparent !important;
	overflow: visible;
	padding: 0;
}

.np-topbar-trail #taskmenu .action-buttons {
	display: none !important;
}

.np-topbar-trail #taskmenu .special-buttons {
	display: contents;
	background: transparent !important;
}

.np-topbar-trail #taskmenu a.mail     { order: 1; }
.np-topbar-trail #taskmenu a.contacts { order: 2; }
.np-topbar-trail #taskmenu a.theme    { order: 3; }
.np-topbar-trail #taskmenu a.about    { order: 4; }
.np-topbar-trail #taskmenu a.settings { order: 5; }
.np-topbar-trail #taskmenu a.logout   { order: 6; }

.np-topbar-trail #taskmenu a {
	box-sizing: border-box;
	width: var(--np-ctl-h) !important;
	height: var(--np-ctl-h) !important;
	min-width: var(--np-ctl-h) !important;
	max-width: none !important;
	min-height: 0 !important;
	flex: 0 0 var(--np-ctl-h);
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: var(--np-radius-md);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: var(--np-topbar-icon) !important;
	background: transparent !important;
	opacity: 1 !important;
	font-size: 0;
}

.np-topbar-trail #taskmenu a:hover,
.np-topbar-trail #taskmenu a:focus-visible {
	color: var(--np-topbar-icon-hover) !important;
	background: var(--np-hover) !important;
}

.np-topbar-trail #taskmenu a.selected,
.np-topbar-trail #taskmenu a.selected:hover {
	color: var(--np-topbar-icon-active) !important;
	background: var(--np-topbar-icon-active-bg) !important;
}

/* Elastic paints logout red; on this bar it reads as an error state. */
.np-topbar-trail #taskmenu a.logout,
.np-topbar-trail #taskmenu a.logout:hover {
	color: var(--np-topbar-icon) !important;
}

.np-topbar-trail #taskmenu a.logout:hover {
	color: var(--np-topbar-icon-hover) !important;
}

/* Codepoints pinned so the meaning of each control is never in doubt:
   f0e0 envelope · f0c0 users · f185 sun / f186 moon · f128 help
   f013 cog · f011 power. Weight 900 = Font Awesome Solid; Regular has no
   cog or power glyph and the browser would paint tofu. */
.np-topbar-trail #taskmenu a::before {
	font-family: Icons;
	font-style: normal;
	font-weight: 900;
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	flex: 0 0 20px;
	text-align: center;
	margin: 0;
	float: none;
}

.np-topbar-trail #taskmenu a.mail::before     { content: "\f0e0"; }
.np-topbar-trail #taskmenu a.contacts::before { content: "\f0c0"; }
.np-topbar-trail #taskmenu a.theme.light::before { content: "\f185"; }
.np-topbar-trail #taskmenu a.theme.dark::before  { content: "\f186"; }
.np-topbar-trail #taskmenu a.about::before    { content: "\f128"; }
.np-topbar-trail #taskmenu a.settings::before { content: "\f013"; }
.np-topbar-trail #taskmenu a.logout::before   { content: "\f011"; }

.np-topbar-trail #taskmenu a .inner {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* The 16px rhythm is generous; tighten it before the bar can crowd search. */
@media screen and (max-width: 1279px) {
	.np-topbar-trail #taskmenu {
		gap: var(--sp-2);
	}
}

/* ------------------------------------------------------------------ *
 * 10b. Login screen
 * ------------------------------------------------------------------ */

body.task-login {
	background: var(--np-bg);
}

body.task-login #logo {
	top: 15vh;
	width: 64px;
	height: 64px;
	max-height: none;
	opacity: 1;
}

.np-login-word {
	position: relative;
	top: 15vh;
	margin-top: var(--sp-3);
	text-align: center;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: -.01em;
	color: var(--np-text-secondary);
}

/* The task menu lives in the top bar and is always on screen, so the
   per-list button that pops it open is redundant. It is deleted outright
   from mail.html; other tasks keep their template untouched. */
body:not(.task-mail) .task-menu-button {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * 11. Accessibility
 * ------------------------------------------------------------------ */

.np-iconbtn:focus-visible,
.np-bulk button:focus-visible,
.np-row-actions button:focus-visible,
.np-list-error button:focus-visible,
.np-brand:focus-visible,
#messagelist-header a:focus-visible,
#mailboxlist.folderlist a:focus-visible,
#layout-sidebar .np-compose-slot a.compose:focus-visible,
.np-topbar-trail #taskmenu a:focus-visible,
.np-topbar-search .searchbar a:focus-visible {
	outline: 2px solid var(--np-accent);
	outline-offset: 2px;
}

#messagelist tr.message.focused {
	outline: 2px solid var(--np-accent);
	outline-offset: -2px;
}

#messagelist tr.message > td.selection input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--np-accent);
	outline-offset: 1px;
}

/* ------------------------------------------------------------------ *
 * 12. Responsive
 * ------------------------------------------------------------------ */

/* < 1024px — sidebar becomes an overlay */
@media screen and (max-width: 1023px) {
	#layout-sidebar {
		position: absolute !important;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 30;
		background: var(--np-bg) !important;
		box-shadow: var(--np-shadow-pop);
		margin-left: 0;
	}

	body:not(.np-sidebar-open) #layout-sidebar {
		display: none !important;
	}

	.np-sidebar-scrim {
		position: fixed;
		inset: var(--np-topbar-h) 0 0 0;
		background: rgba(32, 33, 36, .4);
		z-index: 29;
	}

	body.np-sidebar-open .np-sidebar-scrim {
		display: block;
	}

	#layout-list {
		margin-left: var(--sp-2);
	}
}

/* < 768px — two-line rows, simplified toolbar */
@media screen and (max-width: 767px) {
	:root {
		--np-topbar-h: 56px;
		--np-header-h: 48px;
		--np-row-h: 64px;
	}

	.np-topbar {
		padding: 0 var(--sp-2);
	}

	.np-brand-word {
		display: none;
	}

	.np-topbar-search .searchbar {
		height: 40px;
	}

	.np-topbar-search .searchbar input {
		height: 36px;
	}

	#layout-list {
		margin: 0 var(--sp-1) var(--sp-1);
		min-width: 0;
	}

	#messagelist tr.message {
		grid-template-columns: 36px 28px minmax(0, 1fr);
	}

	#messagelist tr.message > td,
	#messagelist tr.message > td.flags > span.flag {
		height: auto;
	}

	#messagelist tr.message > td.subject {
		grid-template-columns: minmax(0, 1fr) var(--np-date-w);
		grid-template-areas:
			"who  when"
			"what what";
		align-content: center;
		row-gap: var(--sp-1);
		padding: 6px var(--sp-2) 6px 0;
	}

	#messagelist tr.message > td.subject > span.status {
		display: none;
	}

	#messagelist tr.message > td.subject > span.fromto {
		grid-area: who;
		width: auto;
		padding-right: var(--sp-2);
	}

	#messagelist tr.message > td.subject > span.date {
		grid-area: when;
	}

	#messagelist tr.message > td.subject > span.subject {
		grid-area: what;
	}

	#messagelist tr.message > td.flags > span.attachment {
		display: none;
	}

	#messagelist-header .pagenav .pagenav-text {
		display: none;
	}

	#messagelist-header a.select {
		min-width: 44px !important;
	}

	/* simplified toolbars: icon-only, no wrapping labels */
	#layout-content > .header > #mailtoolbar {
		gap: var(--sp-1);
	}

	#layout-content > .header > #mailtoolbar a .inner {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	#layout-content > .header > #mailtoolbar > a,
	#layout-content > .header > #mailtoolbar > .dropbutton > a {
		padding: 0 var(--sp-2) !important;
	}

	#layout-content > .header .header-title {
		max-width: none;
	}

	.np-skeleton-row {
		grid-template-columns: 36px 28px minmax(0, 1fr) var(--np-date-w);
	}

	.np-skeleton-row span:nth-child(4) {
		display: none;
	}
}

/* Roundcube adds these on small viewports; keep our chrome consistent */
html.layout-phone .np-topbar,
html.layout-small .np-topbar {
	position: sticky;
	top: 0;
	z-index: 25;
}