/**
 * Liquid Glass — a skin for Roundcube Webmail.
 *
 * Extends Elastic: this file imports Elastic's compiled stylesheet and then
 * restyles it. No templates are duplicated, so Roundcube upgrades that touch
 * Elastic's markup keep working.
 *
 * Retheming: every colour lives in the token block below. Change --lg-accent
 * and the aurora stops; everything else follows.
 */

@import url("../../elastic/styles/styles.min.css");

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--lg-accent: #5b8cff;
	--lg-accent-2: #a855f7;
	--lg-accent-3: #22d3ee;

	--lg-radius: 18px;
	--lg-radius-sm: 12px;
	--lg-radius-xs: 9px;
	--lg-gap: 10px;

	--lg-blur: 30px;
	--lg-blur-strong: 40px;
	--lg-saturate: 180%;

	/* Light theme surfaces */
	--lg-page-bg: #eef1f8;
	--lg-glass: rgba(255, 255, 255, 0.72);
	--lg-glass-2: rgba(255, 255, 255, 0.5);
	--lg-glass-solid: rgba(255, 255, 255, 0.9);
	--lg-stroke: rgba(255, 255, 255, 0.75);
	--lg-stroke-soft: rgba(15, 23, 42, 0.08);
	--lg-hairline: rgba(15, 23, 42, 0.07);

	--lg-text: #1a2237;
	--lg-text-dim: #5b6580;
	--lg-text-faint: #8a93a8;

	--lg-hover: rgba(91, 140, 255, 0.09);
	--lg-selected: rgba(91, 140, 255, 0.16);

	--lg-shadow: 0 10px 30px -12px rgba(17, 24, 51, 0.28), 0 2px 8px -4px rgba(17, 24, 51, 0.18);
	--lg-shadow-lg: 0 28px 70px -22px rgba(17, 24, 51, 0.45), 0 8px 22px -12px rgba(17, 24, 51, 0.25);
	--lg-inset: inset 0 1px 0 rgba(255, 255, 255, 0.75);

	/* Aurora blobs */
	--lg-aurora-1: rgba(99, 102, 241, 0.7);
	--lg-aurora-2: rgba(168, 85, 247, 0.58);
	--lg-aurora-3: rgba(34, 211, 238, 0.55);
	--lg-aurora-4: rgba(244, 114, 182, 0.48);
	--lg-aurora-center: rgba(129, 140, 248, 0.16);
	--lg-aurora-alpha: 1;
}

html.dark-mode {
	--lg-page-bg: #070b16;
	/* White-tinted rather than navy-tinted: glass should lift what is behind
	   it, not paint over it. */
	--lg-glass: rgba(15, 21, 40, 0.62);
	--lg-glass-2: rgba(15, 21, 40, 0.42);
	--lg-glass-solid: rgba(20, 27, 46, 0.9);
	--lg-stroke: rgba(255, 255, 255, 0.16);
	--lg-stroke-soft: rgba(255, 255, 255, 0.09);
	--lg-hairline: rgba(255, 255, 255, 0.07);

	--lg-text: #e8ecf7;
	--lg-text-dim: #9aa4bf;
	--lg-text-faint: #6b7799;

	--lg-hover: rgba(122, 162, 255, 0.12);
	--lg-selected: rgba(122, 162, 255, 0.2);

	--lg-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.75), 0 2px 10px -5px rgba(0, 0, 0, 0.6);
	--lg-shadow-lg: 0 34px 80px -24px rgba(0, 0, 0, 0.85), 0 10px 26px -14px rgba(0, 0, 0, 0.7);
	--lg-inset: inset 0 1px 0 rgba(255, 255, 255, 0.07);

	--lg-aurora-1: rgba(88, 80, 255, 0.6);
	--lg-aurora-2: rgba(167, 60, 255, 0.5);
	--lg-aurora-3: rgba(6, 200, 230, 0.42);
	--lg-aurora-4: rgba(236, 45, 130, 0.38);
	--lg-aurora-center: rgba(120, 110, 255, 0.18);
	--lg-aurora-alpha: 1;
}

/* ==========================================================================
   2. Page shell + aurora backdrop
   ========================================================================== */

html:not(.iframe),
html:not(.iframe) body {
	background: var(--lg-page-bg);
	color: var(--lg-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
		Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Four drifting colour fields. Fixed, so scrolling panes never repaint it. */
html:not(.iframe) body::before {
	content: "";
	position: fixed;
	inset: -25%;
	z-index: 0;
	pointer-events: none;
	opacity: var(--lg-aurora-alpha);
	background:
		radial-gradient(38% 44% at 18% 22%, var(--lg-aurora-1) 0%, transparent 68%),
		radial-gradient(42% 38% at 82% 18%, var(--lg-aurora-2) 0%, transparent 66%),
		radial-gradient(46% 46% at 72% 82%, var(--lg-aurora-3) 0%, transparent 68%),
		radial-gradient(38% 40% at 24% 84%, var(--lg-aurora-4) 0%, transparent 66%),
		/* Keeps the middle of the screen from going dead — the login card and
		   the message list both sit there. Deliberately faint: this is a lift,
		   not a fifth colour field. */
		radial-gradient(52% 48% at 50% 46%, var(--lg-aurora-center) 0%, transparent 70%);
	filter: blur(38px);
	animation: lg-aurora 34s ease-in-out infinite alternate;
	will-change: transform;
}

/* A faint grain layer stops the gradients from banding on cheap panels. */
html:not(.iframe) body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.035;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes lg-aurora {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	33%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
	66%  { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
	100% { transform: translate3d(1.5%, 1.5%, 0) scale(1.08); }
}

#layout {
	position: relative;
	z-index: 1;
	background: transparent;
}

/* ==========================================================================
   3. Layout columns as floating glass panels
   ========================================================================== */

#layout > div {
	background: transparent;
	border: 0 !important;
}

@media screen and (min-width: 769px) {
	#layout {
		padding: var(--lg-gap);
		gap: var(--lg-gap);
		box-sizing: border-box;
	}

	#layout > #layout-sidebar,
	#layout > #layout-list,
	#layout > #layout-content {
		background: var(--lg-glass);
		-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
		backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
		border: 1px solid var(--lg-stroke) !important;
		border-radius: var(--lg-radius);
		box-shadow: var(--lg-shadow), var(--lg-inset);
		overflow: hidden;
	}

	/* The resizer sits on the panel edge; make it invisible but grabbable. */
	.column-resizer {
		right: calc(var(--lg-gap) / -2 - 3px);
	}
	.column-resizer.inverted {
		left: calc(var(--lg-gap) / -2 - 3px);
	}
}

@media screen and (max-width: 768px) {
	#layout > #layout-sidebar,
	#layout > #layout-list,
	#layout > #layout-content {
		background: var(--lg-glass);
		-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
		backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
	}
}

/* Column headers and footers: a lighter frosted bar, no hard border. */
#layout > div > .header,
#layout > div > .footer {
	background: var(--lg-glass-2) !important;
	color: var(--lg-text);
	border: 0 !important;
	box-shadow: inset 0 -1px 0 var(--lg-hairline);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-weight: 600;
	letter-spacing: 0.1px;
}

#layout > div > .footer {
	box-shadow: inset 0 1px 0 var(--lg-hairline);
}

/* ==========================================================================
   4. Task rail (left icon bar)
   ========================================================================== */

@media screen and (min-width: 481px) {
	#layout-menu {
		background: transparent !important;
		border: 0 !important;
		padding-right: 2px;
	}

	#layout-menu .popover-header {
		background: transparent !important;
	}

	#taskmenu {
		background: var(--lg-glass) !important;
		-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
		backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
		border: 1px solid var(--lg-stroke);
		border-radius: var(--lg-radius);
		box-shadow: var(--lg-shadow), var(--lg-inset);
		margin: var(--lg-gap) 0 var(--lg-gap) var(--lg-gap);
		padding: 8px 3px;
		overflow: hidden;
	}
}

#taskmenu a {
	color: var(--lg-text-dim);
	border-radius: var(--lg-radius-sm);
	margin: 3px 2px;
	transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
	position: relative;
}

/* Elastic gives the bottom button group its own dark plate, which reads as a
   hole in the rail once the rail itself is glass. */
#taskmenu .special-buttons,
#taskmenu .action-buttons {
	background: transparent !important;
}

#taskmenu a:hover {
	background: var(--lg-hover);
	color: var(--lg-text);
	transform: translateY(-1px);
}

#taskmenu a.selected {
	color: #fff;
	background: linear-gradient(140deg, var(--lg-accent), var(--lg-accent-2));
	box-shadow: 0 8px 20px -8px rgba(91, 140, 255, 0.9), var(--lg-inset);
}

#taskmenu a.selected:before,
#taskmenu a.selected .inner {
	color: #fff;
}

/* Compose gets treated as the primary action, not just another tab. */
#taskmenu a.compose {
	color: #fff;
	background: linear-gradient(140deg, #0ea5b7, var(--lg-accent));
	box-shadow: 0 10px 24px -12px rgba(14, 165, 183, 0.9);
	margin-bottom: 10px;
}

#taskmenu a.compose:before,
#taskmenu a.compose .inner {
	color: #fff;
}

#taskmenu a.compose:hover {
	filter: brightness(1.07);
	transform: translateY(-2px);
}

/* ==========================================================================
   5. Lists — folders, messages, contacts, settings
   ========================================================================== */

.listing tbody td,
.listing li,
.listing li a {
	border-color: var(--lg-hairline);
	color: var(--lg-text);
}

.listing li a,
.listing tbody td a {
	color: var(--lg-text);
}

.listing tbody tr,
.listing li {
	transition: background-color 0.18s ease;
}

.listing tbody tr:hover td,
.listing li:hover {
	background-color: var(--lg-hover);
}

/* Selected row: soft tinted glass with an accent spine. Elastic's own selected
   colour is a warm khaki in dark mode, so this has to win outright. */
.listing li.selected,
.listing tr.selected td,
.messagelist tr.selected td {
	background-color: var(--lg-selected) !important;
	color: var(--lg-text) !important;
	box-shadow: inset 3px 0 0 var(--lg-accent);
}

.messagelist tr.selected td span.fromto,
.messagelist tr.selected td span.date,
.messagelist tr.selected td span.size {
	color: var(--lg-text-dim) !important;
}

.listing tr.selected td:not(:first-child),
.messagelist tr.selected td:not(:first-child) {
	box-shadow: none;
}

.listing tr.selected td a,
.listing li.selected a {
	color: var(--lg-text);
}

.listing tr.unread td,
.listing li.unread {
	font-weight: 600;
}

/* Unread count / folder badges */
.listing li .unreadcount,
.listing .badge {
	background: linear-gradient(140deg, var(--lg-accent), var(--lg-accent-2));
	color: #fff;
	border-radius: 999px;
	font-weight: 600;
	box-shadow: 0 4px 10px -4px rgba(91, 140, 255, 0.8);
}

.messagelist td.subject span.date,
.messagelist td.subject span.size,
.messagelist td.subject span.fromto {
	color: var(--lg-text-dim);
}

.messagelist td.flag span.flagged,
.listing td.flag span.flagged {
	filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.45));
}

/* Sticky table headers in list views */
.listing thead th,
table.listing thead td {
	background: var(--lg-glass-2);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--lg-text-dim);
	border-color: var(--lg-hairline);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-size: 0.72rem;
}

/* ==========================================================================
   6. Buttons and toolbars
   ========================================================================== */

.toolbar a.button,
.header a.button,
.footer a.button {
	color: var(--lg-text-dim);
	border-radius: var(--lg-radius-xs);
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.toolbar a.button:hover,
.header a.button:hover,
.footer a.button:hover {
	background: var(--lg-hover);
	color: var(--lg-accent);
	transform: translateY(-1px);
}

.toolbar a.button.disabled,
.header a.button.disabled {
	opacity: 0.38;
}

.btn,
button.btn,
input.btn,
a.btn {
	border-radius: var(--lg-radius-xs);
	font-weight: 600;
	letter-spacing: 0.15px;
	border: 1px solid transparent;
	transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease,
		filter 0.18s ease, background-color 0.18s ease;
}

.btn:hover {
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn-primary,
.btn.mainaction {
	background: linear-gradient(140deg, var(--lg-accent), var(--lg-accent-2)) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 10px 24px -12px rgba(91, 140, 255, 0.95);
}

.btn-primary:hover,
.btn.mainaction:hover {
	filter: brightness(1.07);
	box-shadow: 0 14px 30px -12px rgba(91, 140, 255, 1);
}

.btn-secondary,
.btn-default {
	background: var(--lg-glass-solid) !important;
	color: var(--lg-text) !important;
	border-color: var(--lg-stroke-soft) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: var(--lg-shadow);
}

.btn-danger {
	box-shadow: 0 10px 24px -12px rgba(239, 68, 68, 0.9);
}

/* Floating compose button on small screens */
.floating-action-buttons a.button {
	background: linear-gradient(140deg, var(--lg-accent-3), var(--lg-accent)) !important;
	box-shadow: 0 16px 36px -12px rgba(34, 211, 238, 0.9) !important;
	border: 0;
}

/* ==========================================================================
   7. Forms
   ========================================================================== */

.form-control,
input.form-control,
select.form-control,
textarea.form-control,
input[type="text"].form-control,
input[type="password"].form-control {
	background: var(--lg-glass-solid);
	border: 1px solid var(--lg-stroke-soft);
	border-radius: var(--lg-radius-xs);
	color: var(--lg-text);
	box-shadow: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus {
	border-color: var(--lg-accent);
	box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.22);
	outline: none;
}

.form-control::placeholder {
	color: var(--lg-text-faint);
}

label,
.propform label,
legend {
	color: var(--lg-text-dim);
	font-weight: 600;
}

fieldset,
.propform fieldset {
	border-color: var(--lg-hairline);
}

/* Toggle switches keep the accent */
input.form-check-input:checked,
.custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--lg-accent);
	border-color: var(--lg-accent);
}

/* ==========================================================================
   8. Search bar
   ========================================================================== */

.searchbar {
	background: var(--lg-glass-solid);
	border: 1px solid var(--lg-stroke-soft);
	border-radius: 999px;
	box-shadow: var(--lg-inset);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.searchbar:focus-within {
	border-color: var(--lg-accent);
	box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.2);
}

.searchbar input {
	background: transparent;
	border: 0;
	color: var(--lg-text);
}

.searchbar a.button {
	color: var(--lg-text-dim);
}

/* ==========================================================================
   9. Dialogs, popovers, dropdown menus
   ========================================================================== */

.ui-dialog,
.popover,
#layout-menu.popover {
	background: var(--lg-glass) !important;
	-webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-saturate));
	backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-saturate));
	border: 1px solid var(--lg-stroke) !important;
	border-radius: var(--lg-radius) !important;
	box-shadow: var(--lg-shadow-lg), var(--lg-inset) !important;
	color: var(--lg-text);
}

.ui-dialog .ui-dialog-titlebar {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--lg-hairline) !important;
	color: var(--lg-text);
	font-weight: 700;
	border-radius: var(--lg-radius) var(--lg-radius) 0 0 !important;
}

.ui-dialog .ui-dialog-content,
.ui-dialog .ui-dialog-buttonpane {
	background: transparent !important;
	border-color: var(--lg-hairline) !important;
	color: var(--lg-text);
}

.ui-widget-overlay {
	background: rgba(10, 14, 28, 0.42) !important;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 1 !important;
}

.popover .listing li a,
.popover .menu li a {
	color: var(--lg-text);
	border-radius: var(--lg-radius-xs);
	margin: 1px 6px;
	width: auto;
	transition: background-color 0.16s ease;
}

.popover .listing li a:hover,
.popover .menu li a:hover {
	background: var(--lg-hover);
	color: var(--lg-accent);
}

.popover .listing li,
.popover .menu li {
	border: 0;
}

/* ==========================================================================
   10. Message view + compose
   ========================================================================== */

#messageheader,
.messageheaderbox,
#partheader {
	background: transparent;
	border-color: var(--lg-hairline);
}

#messageheader .subject,
.message-part .subject {
	color: var(--lg-text);
	font-weight: 700;
	letter-spacing: -0.2px;
}

#messageheader .header-links a,
.message-part a {
	color: var(--lg-accent);
}

/* Sender avatar gets a glass ring */
#messageheader .contact-photo img,
.contactpic img,
#contactpic {
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--lg-stroke), var(--lg-shadow);
}

#contactpic {
	border-radius: var(--lg-radius);
}

/* Keep the actual mail body on a solid readable surface. */
#messagecontframe,
.message-htmlpart,
.message-part,
#composebody,
.mce-content-body {
	background: var(--lg-glass-solid);
	border-radius: var(--lg-radius-sm);
}

#messagelist tr td.subject a,
.messagelist td.subject a {
	color: var(--lg-text);
}

/* Attachment chips */
#attachment-list li,
.attachmentslist li {
	background: var(--lg-glass-solid);
	border: 1px solid var(--lg-stroke-soft);
	border-radius: 999px;
	padding: 0 0.9em;
	margin: 3px 4px 3px 0;
	box-shadow: var(--lg-shadow);
	transition: transform 0.18s ease;
}

#attachment-list li:hover,
.attachmentslist li:hover {
	transform: translateY(-1px);
}

/* Compose recipient tokens */
.recipient-input li.recipient,
.ac-input li {
	background: linear-gradient(140deg, rgba(91, 140, 255, 0.16), rgba(168, 85, 247, 0.16));
	border: 1px solid var(--lg-stroke-soft);
	border-radius: 999px;
	color: var(--lg-text);
}

/* ==========================================================================
   11. Notifications
   ========================================================================== */

#messagestack div {
	border-radius: var(--lg-radius-sm);
	border: 1px solid var(--lg-stroke);
	-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
	backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
	box-shadow: var(--lg-shadow-lg);
	font-weight: 500;
	animation: lg-toast-in 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes lg-toast-in {
	from { opacity: 0; transform: translateY(14px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   12. Login page
   ========================================================================== */

body.task-login #layout,
body.task-login #layout-content {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: auto;
}

body.task-login #layout-content > .header {
	display: none;
}

/* Elastic's templates are inherited, and Roundcube resolves assets referenced
   from an inherited template against the *parent* skin first (parse() pins
   base_path to the skin that owns the template). Elastic ships images/logo.svg,
   so a same-named override there is never reached. Swap the bitmap in CSS
   instead — that is skin-local and upgrade-proof.

   One square badge for every placement. It carries its own dark background, so
   it needs no light/dark variant, and being square it fits the ~78px rail and
   the login screen without a second file. */
#logo {
	content: url("../images/logo.png");
}

body:not(.task-login) #logo {
	max-height: 44px;
}

body.task-login #logo {
	top: 0;
	margin-bottom: 1.4rem;
	max-height: 104px;
	filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.45));
	animation: lg-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.task-login #login-form {
	top: 0;
	max-width: 380px;
	width: min(92vw, 380px);
	padding: 2rem 1.75rem 1.5rem;
	background: var(--lg-glass);
	-webkit-backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-saturate));
	backdrop-filter: blur(var(--lg-blur-strong)) saturate(var(--lg-saturate));
	border: 1px solid var(--lg-stroke);
	border-radius: 24px;
	box-shadow: var(--lg-shadow-lg), var(--lg-inset);
	animation: lg-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

/* Specular highlight sliding across the top edge of the card */
body.task-login #login-form::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 45%;
	border-radius: 24px 24px 50% 50% / 24px 24px 22% 22%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
	pointer-events: none;
}

html.dark-mode body.task-login #login-form::before {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0));
}

/* Elastic renders the login form as a 2-column table (label cell + input
   cell). Stack it and show real labels instead of the cramped icon cell. */
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
	padding: 0;
	text-align: left;
}

/* Elastic turns the label cell into an icon chip. The inputs already carry
   real placeholders, so hide the chip visually but keep the <label> in the
   accessibility tree for screen readers. */
body.task-login #login-form td.title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* td.input is also Bootstrap's .input-group. Keep it a positioning context and
   float the icon inside the field rather than letting it sit in its own cell. */
body.task-login #login-form td.input {
	position: relative;
	padding-bottom: 0.85rem;
}

body.task-login #login-form .input-group-prepend {
	position: absolute;
	left: 0;
	top: 0;
	height: 46px;
	width: 2.9rem;
	z-index: 4;
	pointer-events: none;
}

body.task-login #login-form i.input-group-text {
	background: transparent !important;
	border: 0 !important;
	color: var(--lg-text-faint);
	width: 100%;
	height: 100%;
	justify-content: center;
	padding: 0;
	font-size: 1rem;
}

body.task-login #login-form .form-control {
	padding-left: 2.9rem;
}

body.task-login #login-form .form-control {
	background: var(--lg-glass-solid);
	width: 100%;
	max-width: 100%;
	height: 46px;
	font-size: 1rem;
	border-radius: var(--lg-radius-sm);
}

body.task-login #rcmloginsubmit {
	width: 100%;
	height: 46px;
	margin-top: 0.4rem;
	font-size: 1rem;
	border-radius: var(--lg-radius-sm);
	background: linear-gradient(140deg, var(--lg-accent), var(--lg-accent-2)) !important;
	border: 0 !important;
	color: #fff !important;
	box-shadow: 0 14px 30px -12px rgba(91, 140, 255, 0.95);
}

body.task-login #rcmloginsubmit:hover {
	filter: brightness(1.08);
}

body.task-login #login-footer {
	color: var(--lg-text-dim);
	margin-top: 1.1rem;
	font-size: 0.85rem;
}

@keyframes lg-rise {
	from { opacity: 0; transform: translateY(18px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   13. Scrollbars
   ========================================================================== */

* {
	scrollbar-width: thin;
	scrollbar-color: rgba(120, 132, 160, 0.45) transparent;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: rgba(120, 132, 160, 0.4);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(120, 132, 160, 0.65);
	background-clip: content-box;
}

/* ==========================================================================
   14. Focus visibility (keyboard users)
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--lg-accent);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ==========================================================================
   15. Graceful degradation
   ========================================================================== */

/* No backdrop-filter (older Firefox, some embedded webviews): go opaque so
   text never lands on a busy gradient. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	:root {
		--lg-glass: rgba(248, 250, 253, 0.97);
		--lg-glass-2: rgba(244, 247, 252, 0.97);
		--lg-stroke: rgba(15, 23, 42, 0.1);
	}
	html.dark-mode {
		--lg-glass: rgba(17, 23, 40, 0.97);
		--lg-glass-2: rgba(15, 20, 36, 0.97);
	}
	html:not(.iframe) body::before {
		opacity: 0.5;
	}
}

@media (prefers-reduced-motion: reduce) {
	html:not(.iframe) body::before {
		animation: none;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* High contrast: drop translucency entirely. */
@media (prefers-contrast: more) {
	:root {
		--lg-glass: #ffffff;
		--lg-glass-2: #f3f5fa;
		--lg-glass-solid: #ffffff;
		--lg-stroke: #64748b;
		--lg-hairline: #94a3b8;
	}
	html.dark-mode {
		--lg-glass: #0d1220;
		--lg-glass-2: #111726;
		--lg-glass-solid: #0d1220;
		--lg-stroke: #64748b;
	}
	html:not(.iframe) body::before,
	html:not(.iframe) body::after {
		display: none;
	}
}

/* Printing: no glass, no aurora. */
@media print {
	html:not(.iframe) body::before,
	html:not(.iframe) body::after {
		display: none !important;
	}
	#layout > div {
		background: #fff !important;
		box-shadow: none !important;
		border: 0 !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
}

/* ==========================================================================
   16. Gmail pass 1 — density, rows, nav
   Everything below reshapes Elastic toward Gmail's proportions without
   touching a template. Pass 2 (the real top bar) needs template overrides.
   ========================================================================== */

/* --- The rail --------------------------------------------------------------
   Elastic fixes #layout-menu at 78px (42px on medium screens). The glass
   margins added in section 4 ate ~20px of that, which is what clipped
   "Compose" and "Light mode". Widen it to fit the labels it was always
   trying to draw. */
@media screen and (min-width: 769px) {
	#layout-menu {
		width: 112px !important;
		min-width: 112px;
		padding-right: 0;
	}

	#taskmenu {
		margin: var(--lg-gap) 4px var(--lg-gap) var(--lg-gap);
		padding: 10px 6px;
	}

	#taskmenu a {
		margin: 2px 0;
		padding: 0 4px;
		max-width: none;
		overflow: visible;
	}

	#taskmenu a .inner {
		display: block;
		font-size: 0.7rem;
		line-height: 1.1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Compose reads as Gmail's primary action: a wide pill, not another tab. */
#taskmenu a.compose {
	border-radius: 999px !important;
	padding: 0.55rem 0.4rem !important;
	margin: 2px 0 14px !important;
	box-shadow: 0 8px 22px -10px rgba(14, 165, 183, 0.9);
}

/* --- Message rows ----------------------------------------------------------
   Elastic's widescreen layout stacks sender/date above subject on two lines.
   Gmail is one line: sender · subject · date. The spans are emitted in DOM
   order fromto, date, size, status, subject (app.js widescreen_list_template),
   so they get reordered rather than re-emitted. */
.messagelist td.subject {
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 0.55rem;
	padding-right: 0.5rem !important;
}

.messagelist td.subject span.status {
	order: 0;
	flex: 0 0 auto;
}

.messagelist td.subject span.fromto {
	order: 1;
	flex: 0 1 30%;
	min-width: 88px;
	max-width: 210px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.9rem;
}

.messagelist td.subject span.subject {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.9rem;
}

.messagelist td.subject span.date {
	order: 3;
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 0.78rem;
	color: var(--lg-text-faint);
}

/* Size is noise at Gmail density; the flag column still carries attachments. */
.messagelist td.subject span.size {
	display: none !important;
}

/* Unread: Gmail bolds the whole row rather than tinting it. */
.messagelist tr.unread td.subject span.fromto,
.messagelist tr.unread td.subject span.subject {
	font-weight: 700;
	color: var(--lg-text);
}

.messagelist tr:not(.unread) td.subject span.fromto,
.messagelist tr:not(.unread) td.subject span.subject {
	color: var(--lg-text-dim);
}

/* Tighter single-line rows, and a lift on hover like Gmail's. */
.messagelist tbody td {
	line-height: 2.6rem !important;
	height: 2.6rem;
	border-color: var(--lg-hairline);
}

.messagelist tbody tr:hover td {
	background-color: var(--lg-hover);
	box-shadow: inset 0 0 0 1px var(--lg-stroke-soft);
}

/* Gmail gives the list most of the window. Elastic caps it at 30% because its
   rows stack onto two lines; single-line rows need the room. */
@media screen and (min-width: 1200px) {
	#layout-list {
		max-width: 44% !important;
		flex: 5;
	}
	#layout-sidebar {
		max-width: 240px;
		flex: 0 0 240px;
	}
}

/* --- Folder list -----------------------------------------------------------
   Gmail's nav rows are full pills, not full-bleed bars. */
#mailboxlist li a,
.folderlist li a {
	border-radius: 0 999px 999px 0;
	margin-right: 10px;
	padding-left: 0.9rem !important;
}

#mailboxlist li.selected > a,
.folderlist li.selected > a {
	background: var(--lg-selected);
	font-weight: 700;
}

#mailboxlist li.selected,
.folderlist li.selected {
	background: transparent !important;
	box-shadow: none !important;
}

#mailboxlist li,
.folderlist li {
	border-bottom: 0 !important;
}

/* --- Search ----------------------------------------------------------------
   Gmail's search is the widest thing on the screen. It cannot move into a real
   top bar without a template, but it can stop looking like a form field. */
.searchbar {
	margin: 0.5rem 0.75rem !important;
	height: 2.9rem;
	border-radius: 999px;
	background: var(--lg-glass-2);
}

.searchbar input {
	font-size: 0.95rem;
}

/* ==========================================================================
   17. Gmail pass 2 — the shell
   Elastic lays #layout out as a flex row: [rail][sidebar][list][content].
   Gmail is a full-width bar over [nav][main]. Reassigning the same four
   children to grid areas gets there without owning a single template — the
   rail becomes the bar, the sidebar becomes the nav, and list and content
   share one area so opening a message covers the list the way Gmail does.

   The reading pane itself is not done here: $config['layout'] = 'list' is
   Roundcube's own "two columns, no preview" mode, and the skin's meta.json
   unlocks it (Elastic hard-codes supported_layouts to widescreen).
   ========================================================================== */

@media screen and (min-width: 769px) {
	#layout {
		display: grid;
		grid-template-columns: 256px minmax(0, 1fr);
		grid-template-rows: 60px minmax(0, 1fr);
		grid-template-areas:
			"bar bar"
			"nav main";
		padding: 0 var(--lg-gap) var(--lg-gap);
		gap: var(--lg-gap);
		column-gap: var(--lg-gap);
	}

	/* --- Top bar (was the icon rail) --- */
	#layout-menu {
		grid-area: bar;
		z-index: 40;
		width: auto !important;
		min-width: 0;
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0 0.25rem;
		background: transparent !important;
	}

	#layout-menu .popover-header {
		display: flex !important;
		align-items: center;
		height: auto;
		padding: 0 !important;
		background: transparent !important;
		flex: 0 0 auto;
		order: 0;
	}

	#layout-menu .popover-header img#logo {
		max-height: 40px;
		max-width: none;
		padding: 0;
	}

	#layout-menu .popover-header a {
		display: none !important;
	}

	/* The task links become the top-right controls. */
	#taskmenu {
		order: 2;
		margin: 0 0 0 auto !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 2px;
		overflow: visible;
	}

	#taskmenu .special-buttons,
	#taskmenu .action-buttons {
		position: static !important;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 2px;
		width: auto !important;
		background: transparent !important;
	}

	#taskmenu a {
		width: 44px !important;
		height: 44px !important;
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		border-radius: 999px;
	}

	#taskmenu a .inner {
		display: none !important;
	}

	#taskmenu a:before {
		margin: 0;
		height: auto;
		line-height: 1;
		font-size: 1.15rem;
	}

	#taskmenu a.selected {
		background: var(--lg-selected) !important;
		color: var(--lg-accent) !important;
		box-shadow: none;
	}

	#taskmenu a.selected:before {
		color: var(--lg-accent);
	}

	/* --- Compose: out of the bar, into the nav where Gmail puts it --- */
	#taskmenu a.compose {
		position: fixed;
		top: 68px;
		left: var(--lg-gap);
		width: 232px !important;
		height: 52px !important;
		flex-direction: row;
		justify-content: flex-start;
		gap: 0.6rem;
		padding: 0 1.25rem !important;
		margin: 0 !important;
		border-radius: 999px !important;
		z-index: 20;
		/* Elastic caps taskmenu links at the rail width (78px); the pill is
		   232px wide and gets clamped without this. */
		max-width: none !important;
		box-shadow: 0 10px 26px -12px rgba(14, 165, 183, 0.95);
	}

	#taskmenu a.compose .inner {
		display: block !important;
		font-size: 0.95rem;
		font-weight: 600;
	}

	#taskmenu a.compose:before {
		font-size: 1.1rem;
	}

	/* --- Nav column: folders, pushed clear of the Compose pill --- */
	#layout-sidebar {
		grid-area: nav;
		max-width: none !important;
		min-width: 0 !important;
		flex: none !important;
		width: auto !important;
		padding-top: 60px;
	}

	/* --- Main column: list and message share it, message on top --- */
	#layout-list {
		grid-area: main;
		max-width: none !important;
		min-width: 0 !important;
		flex: none !important;
		width: auto !important;
	}

	#layout-content {
		grid-area: main;
		max-width: none !important;
		min-width: 0 !important;
		flex: none !important;
		width: auto !important;
	}

	/* backdrop-filter creates a containing block for position:fixed
	   descendants, so the blur on this panel would trap the search bar inside
	   it instead of letting it reach the top bar. The panel keeps its
	   translucency; it just loses the blur, which costs almost nothing over a
	   smooth gradient. */
	#layout > #layout-list {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgba(255, 255, 255, 0.82);
	}

	html.dark-mode #layout > #layout-list {
		background: rgba(15, 21, 40, 0.78);
	}

	/* --- Search: the widest thing on screen, in the bar --- */
	.searchbar {
		position: fixed;
		top: 8px;
		left: 300px;
		right: 220px;
		width: auto !important;
		max-width: 720px;
		height: 44px !important;
		margin: 0 !important;
		z-index: 30;
		background: var(--lg-glass) !important;
		-webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
		backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
		border: 1px solid var(--lg-stroke);
		box-shadow: var(--lg-shadow);
	}

	/* The list header would otherwise leave a gap where the search bar was. */
	#messagelist-header {
		min-height: 44px;
		height: 44px;
		line-height: 44px;
	}
}

/* Below 769px Elastic's own mobile layout takes over untouched: the grid,
   the fixed search bar and the fixed Compose pill are all desktop-only. */