/* ==========================================================================
   Culpur login page — split-pane overrides (v2, higher specificity)
   Must win over elastic's styles.min.css which uses #layout-content, absolute
   positioning, input-group borders, and icon prefixes.
   ========================================================================== */

:root {
	--culpur-bg:           #0a0f1e;
	--culpur-bg-deep:      #07091a;
	--culpur-bg-panel:     #111a2e;
	--culpur-surface:      rgba(255, 255, 255, 0.03);
	--culpur-surface-hi:   rgba(255, 255, 255, 0.06);
	--culpur-border:       rgba(148, 163, 184, 0.10);
	--culpur-border-hi:    rgba(148, 163, 184, 0.20);
	--culpur-text:         #f0f6ff;
	--culpur-text-dim:     #cbd5e1;
	--culpur-text-muted:   #94a3b8;
	--culpur-text-faint:   #64748b;
	--culpur-text-mute:    #475569;
	--culpur-accent:       #0FBCFF;
	--culpur-accent-hi:    #33c9ff;
	--culpur-accent-dim:   rgba(15, 188, 255, 0.08);
	--culpur-accent-glow:  rgba(15, 188, 255, 0.25);
	--culpur-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--culpur-font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Source+Serif+4:wght@300;400&display=swap');

/* --------- Login page only --------- */
body.task-login,
html,
html body {
	background: var(--culpur-bg) !important;
	color: var(--culpur-text) !important;
	font-family: var(--culpur-font-sans) !important;
	margin: 0 !important;
	padding: 0 !important;
	-webkit-font-smoothing: antialiased;
}

body.task-login::before,
html body::before {
	content: '' !important;
	position: fixed !important;
	inset: 0 !important;
	z-index: -1 !important;
	pointer-events: none !important;
	background:
		radial-gradient(ellipse at 85% 40%, rgba(15, 188, 255, 0.06) 0%, transparent 55%),
		linear-gradient(105deg, var(--culpur-bg-deep) 0%, var(--culpur-bg) 45%, #101a30 100%) !important;
}

/* Force reset of elastic's #layout-content positioning on the login page */
body.task-login #layout,
body.task-login #layout-content,
html body #layout-content.culpur-login {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
	min-height: 100vh !important;
	overflow: visible !important;
	display: block !important;
}

body.task-login > * { display: none !important; }
body.task-login > #layout-content,
body.task-login > #layout,
body.task-login > div,
body.task-login > script,
body.task-login > noscript { display: revert !important; }

/* The grid container */
body.task-login .culpur-auth,
html body .culpur-auth {
	display: grid !important;
	grid-template-columns: 440px 1fr !important;
	min-height: 100vh !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* LEFT RAIL */
.culpur-rail {
	padding: 64px 64px 48px !important;
	display: flex !important;
	flex-direction: column !important;
	position: relative !important;
	background: transparent !important;
	min-width: 0 !important;
}

.culpur-logo-lockup {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	margin: 0 0 96px 0 !important;
}
.culpur-mark {
	width: 48px !important;
	height: 48px !important;
	display: block !important;
	max-width: none !important;
}
.culpur-wordmark {
	font-family: var(--culpur-font-serif) !important;
	font-weight: 300 !important;
	font-size: 34px !important;
	letter-spacing: -0.02em !important;
	color: var(--culpur-text) !important;
	line-height: 1 !important;
}
.culpur-dot {
	color: var(--culpur-accent) !important;
	font-weight: 400 !important;
}

.culpur-title-block { margin-bottom: 40px !important; }
.culpur-title {
	font-size: 22px !important;
	font-weight: 400 !important;
	color: var(--culpur-text) !important;
	letter-spacing: -0.01em !important;
	margin: 0 0 4px 0 !important;
	border: none !important;
}
.culpur-subtitle {
	font-size: 13px !important;
	color: var(--culpur-text-faint) !important;
	margin: 0 !important;
	font-weight: 400 !important;
}

/* Kill elastic's input-group styling — no bordered box, no icon prefix */
.culpur-form .input-group {
	border: none !important;
	background: transparent !important;
	display: block !important;
	margin-bottom: 32px !important;
	position: relative !important;
	padding: 0 !important;
	width: 100% !important;
}
.culpur-form .input-group > .input-group-prepend,
.culpur-form .input-group > .input-group-append,
.culpur-form .input-group > .input-group-text,
.culpur-form .input-group-prepend,
.culpur-form .input-group-append,
.culpur-form .input-group-text,
.culpur-form .input-group > span.input-group-text {
	display: none !important;
}

/* Kill "Language" dropdown etc — show only username/password */
.culpur-form fieldset,
.culpur-form legend {
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}
.culpur-form legend { display: none !important; }

/* Form fields - underline style */
.culpur-form input[type="text"],
.culpur-form input[type="password"],
.culpur-form input[type="email"],
.culpur-form select,
.culpur-form input.form-control,
.culpur-form .form-control,
body.task-login .culpur-form input,
body.task-login .culpur-form input.form-control {
	width: 100% !important;
	display: block !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
	border-radius: 0 !important;
	color: var(--culpur-text) !important;
	font-family: var(--culpur-font-sans) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	padding: 12px 0 !important;
	margin: 0 0 2px 0 !important;
	box-shadow: none !important;
	outline: none !important;
	height: auto !important;
	line-height: 1.4 !important;
	-webkit-appearance: none !important;
}
.culpur-form input:focus {
	border-bottom-color: var(--culpur-accent) !important;
	box-shadow: none !important;
}
.culpur-form input::placeholder { color: var(--culpur-text-faint) !important; }
.culpur-form input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--culpur-bg) inset !important;
	-webkit-text-fill-color: var(--culpur-text) !important;
}

/* Labels above inputs */
.culpur-form label {
	display: block !important;
	font-size: 11px !important;
	color: var(--culpur-accent) !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	margin: 0 0 6px 0 !important;
	font-weight: 500 !important;
	position: static !important;
}

/* Submit button - overrides elastic's button styling */
.culpur-form button[type="submit"],
.culpur-form input[type="submit"],
.culpur-form .btn-primary,
.culpur-form .button.mainaction,
body.task-login .culpur-form .btn {
	display: block !important;
	width: 100% !important;
	height: 48px !important;
	line-height: 48px !important;
	padding: 0 !important;
	margin: 16px 0 0 0 !important;
	background: var(--culpur-accent) !important;
	color: var(--culpur-bg) !important;
	border: none !important;
	border-radius: 2px !important;
	font-family: var(--culpur-font-sans) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	text-shadow: none !important;
	box-shadow: none !important;
	transition: background .2s ease, box-shadow .2s ease !important;
}
.culpur-form button[type="submit"]:hover:not(:disabled),
.culpur-form input[type="submit"]:hover:not(:disabled) {
	background: var(--culpur-accent-hi) !important;
	box-shadow: 0 0 32px var(--culpur-accent-glow) !important;
}
.culpur-form button[type="submit"]:disabled,
.culpur-form .culpur-submit-disabled {
	opacity: 0.25 !important;
	cursor: not-allowed !important;
	box-shadow: none !important;
}

/* Accept checkbox row - AFTER the form, before submit visually */
.culpur-accept {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	margin: 20px 0 !important;
	cursor: pointer !important;
	user-select: none !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	position: static !important;
}
.culpur-accept input[type="checkbox"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	pointer-events: none !important;
}
.culpur-check {
	width: 18px !important;
	height: 18px !important;
	border: 1px solid rgba(148, 163, 184, 0.35) !important;
	background: transparent !important;
	flex: 0 0 18px !important;
	margin-top: 2px !important;
	position: relative !important;
	transition: all .15s ease !important;
	border-radius: 2px !important;
	display: inline-block !important;
}
.culpur-check::after {
	content: '' !important;
	position: absolute !important;
	left: 5px !important;
	top: 1px !important;
	width: 5px !important;
	height: 10px !important;
	border: solid var(--culpur-bg) !important;
	border-width: 0 2px 2px 0 !important;
	transform: rotate(45deg) scale(0) !important;
	transition: transform .15s ease !important;
}
.culpur-accept input[type="checkbox"]:checked ~ .culpur-check {
	background: var(--culpur-accent) !important;
	border-color: var(--culpur-accent) !important;
}
.culpur-accept input[type="checkbox"]:checked ~ .culpur-check::after {
	transform: rotate(45deg) scale(1) !important;
}
.culpur-accept-text {
	font-size: 13px !important;
	color: var(--culpur-text-muted) !important;
	line-height: 1.55 !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.culpur-accept-text strong {
	color: var(--culpur-text) !important;
	font-weight: 500 !important;
}

.culpur-rail-footer {
	margin-top: auto !important;
	padding-top: 48px !important;
	font-size: 11px !important;
	color: var(--culpur-text-mute) !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
}

/* RIGHT FRAME */
.culpur-notice {
	padding: 96px 80px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	position: relative !important;
	background: transparent !important;
	min-width: 0 !important;
}
.culpur-notice-kicker {
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.24em !important;
	color: var(--culpur-accent) !important;
	text-transform: uppercase !important;
	margin: 0 0 24px 0 !important;
}
.culpur-notice-heading {
	font-family: var(--culpur-font-serif) !important;
	font-weight: 300 !important;
	font-size: 44px !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
	color: var(--culpur-text) !important;
	margin: 0 0 40px 0 !important;
	max-width: 500px !important;
	border: none !important;
}
.culpur-notice-lead {
	font-size: 15px !important;
	line-height: 1.7 !important;
	color: var(--culpur-text-dim) !important;
	max-width: 520px !important;
	margin: 0 0 40px 0 !important;
	font-weight: 400 !important;
}
.culpur-notice-list {
	list-style: none !important;
	padding: 0 !important;
	max-width: 520px !important;
	margin: 0 0 40px 0 !important;
}
.culpur-notice-list li {
	font-size: 14px !important;
	line-height: 1.65 !important;
	color: var(--culpur-text-muted) !important;
	padding-left: 24px !important;
	position: relative !important;
	margin: 0 0 14px 0 !important;
}
.culpur-notice-list li::before {
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	top: 10px !important;
	width: 12px !important;
	height: 1px !important;
	background: var(--culpur-accent) !important;
}
.culpur-notice-warning {
	font-size: 13px !important;
	color: var(--culpur-text-faint) !important;
	border-top: 1px solid var(--culpur-border) !important;
	padding-top: 24px !important;
	max-width: 520px !important;
	font-weight: 400 !important;
	letter-spacing: 0.01em !important;
	margin: 0 !important;
}

/* Hide upstream elements we don't need on the login */
body.task-login #logo,
body.task-login .minmodetoggle,
body.task-login #taskmenu,
body.task-login #rcmloginlang_label,
body.task-login #rcmloginlang,
body.task-login #rcmlogintz_label,
body.task-login #rcmlogintz,
body.task-login label[for="rcmloginlang"],
body.task-login label[for="rcmlogintz"],
body.task-login tr.language-select,
body.task-login tr.timezone {
	display: none !important;
}

/* Mobile stack */
@media (max-width: 900px) {
	body.task-login .culpur-auth { grid-template-columns: 1fr !important; }
	.culpur-rail { padding: 48px 32px !important; }
	.culpur-notice { padding: 48px 32px !important; }
	.culpur-notice-heading { font-size: 32px !important; }
	.culpur-logo-lockup { margin-bottom: 48px !important; }
}

/* Hide elastic skin toggle-switch rendered for our checkbox */
.culpur-accept input[type="checkbox"] + label,
.culpur-accept .toggle-switch,
.culpur-accept .form-check-label-switch,
.culpur-accept > .switch {
    display: none !important;
}


/* ---------- Hide elastic custom-switch chrome, keep our checkbox ---------- */
.custom-control.custom-switch {
	padding-left: 0 !important;
	margin: 20px 0 !important;
	display: block !important;
	min-height: auto !important;
}
.custom-control.custom-switch > input[type="checkbox"]#culpur-accept-check {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	pointer-events: none !important;
	left: 0 !important;
	top: 0 !important;
	margin: 0 !important;
}
.custom-control.custom-switch > label.custom-control-label[for="culpur-accept-check"] {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	font-size: 13px !important;
	color: var(--culpur-text-muted) !important;
	line-height: 1.55 !important;
	font-weight: 400 !important;
	position: static !important;
	text-align: left !important;
}
.custom-control.custom-switch > label.custom-control-label[for="culpur-accept-check"]::before,
.custom-control.custom-switch > label.custom-control-label[for="culpur-accept-check"]::after {
	display: none !important;
	content: none !important;
}
/* When our checkbox is checked, color the internal .culpur-check */
input#culpur-accept-check:checked ~ .culpur-check,
.custom-control.custom-switch > input#culpur-accept-check:checked + label > .culpur-check {
	background: var(--culpur-accent) !important;
	border-color: var(--culpur-accent) !important;
}

/* ---------- RIGHT FRAME alignment — align title + body to left, not centered ---------- */
.culpur-notice {
	text-align: left !important;
	align-items: flex-start !important;
}
.culpur-notice-kicker,
.culpur-notice-heading,
.culpur-notice-lead,
.culpur-notice-list,
.culpur-notice-list li,
.culpur-notice-warning {
	text-align: left !important;
	margin-left: 0 !important;
}
.culpur-notice-list {
	list-style: none !important;
	padding-left: 0 !important;
}

/* ---------- Rail left-align everything ---------- */
.culpur-rail,
.culpur-rail > *,
.culpur-title-block,
.culpur-title,
.culpur-subtitle,
.culpur-logo-lockup {
	text-align: left !important;
}
.culpur-title-block {
	margin-left: 0 !important;
}

/* Dampen Roundcube's centered h1/h2 rules */
body.task-login .culpur-rail h1,
body.task-login .culpur-rail h2,
body.task-login .culpur-rail h3,
body.task-login .culpur-rail .boxtitle {
	text-align: left !important;
	margin-left: 0 !important;
	padding-left: 0 !important;
}

/* Keep the form aligned with title — move form group directly below title, not centered */
.culpur-form,
body.task-login .culpur-form {
	margin: 0 !important;
	padding: 0 !important;
	max-width: 100% !important;
}

/* Kill any max-width / auto-centering on #login-form */
#login-form {
	max-width: none !important;
	margin: 0 !important;
}

/* ==========================================================================
   CULPUR mail UI — inbox / message list / reading pane / compose / settings
   Applies Culpur palette across the full logged-in experience.
   ========================================================================== */

/* ---------- Taskbar (left sidebar with Compose / Mail / Contacts / Settings) ---------- */
#taskmenu,
#layout-menu .taskmenu,
.taskmenu {
	background: rgba(10, 15, 30, 0.92) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border-right: 1px solid var(--culpur-border) !important;
}
#taskmenu .button,
#taskmenu a.button,
.taskmenu a.button {
	background: transparent !important;
	color: var(--culpur-text-muted) !important;
	border: none !important;
	transition: background .12s, color .12s !important;
}
#taskmenu .button:hover,
.taskmenu a.button:hover {
	background: var(--culpur-surface) !important;
	color: var(--culpur-text) !important;
}
#taskmenu .button.selected,
#taskmenu a.button.selected,
.taskmenu a.button.selected {
	color: var(--culpur-accent) !important;
	background: var(--culpur-accent-dim) !important;
}
#taskmenu .button.selected .inner,
#taskmenu .button.selected::before {
	color: var(--culpur-accent) !important;
}

/* Logo slot at top of taskmenu — hide broken image, show text-mark fallback */
#taskmenu a.logo,
.taskmenu a.logo,
#logo {
	background: transparent !important;
	color: var(--culpur-accent) !important;
	position: relative !important;
	width: 52px !important;
	height: 52px !important;
}
#taskmenu a.logo img,
.taskmenu a.logo img {
	max-width: 36px !important;
	max-height: 36px !important;
	object-fit: contain !important;
}
#taskmenu a.logo img[src$=".svg"] {
	display: none !important;
}
#taskmenu a.logo::before,
.taskmenu a.logo::before {
	content: '' !important;
	position: absolute !important;
	inset: 8px !important;
	background: url('/skins/culpur/images/logo.png') center / contain no-repeat !important;
}

/* Hide the light-mode / darkmode toggle — we're dark-only */
a.button.darkmode-switch,
a.button.minmodetoggle,
#taskmenu a.button[title*="Light"],
#taskmenu a.button[title*="Dark"],
.taskmenu a.button.minmodetoggle {
	display: none !important;
}

/* ---------- Folder pane (sidebar with Inbox / Sent / Trash) ---------- */
#layout-sidebar,
.sidebar {
	background: transparent !important;
	border-right: 1px solid var(--culpur-border) !important;
}

#mailboxlist,
.folderlist,
.treelist {
	background: transparent !important;
	color: var(--culpur-text-dim) !important;
}

#mailboxlist li > a,
.folderlist li > a,
.treelist li > a {
	color: var(--culpur-text-dim) !important;
	border-left: 2px solid transparent !important;
	padding-left: 12px !important;
	transition: background .12s, color .12s !important;
}

#mailboxlist li > a:hover,
.folderlist li > a:hover,
.treelist li > a:hover {
	background: var(--culpur-surface) !important;
	color: var(--culpur-text) !important;
}

#mailboxlist li.selected > a,
.folderlist li.selected > a,
.treelist li.selected > a {
	background: var(--culpur-accent-dim) !important;
	color: var(--culpur-text) !important;
	border-left-color: var(--culpur-accent) !important;
	font-weight: 500 !important;
}

#mailboxlist li.selected > a .icon,
.folderlist li.selected > a .icon {
	color: var(--culpur-accent) !important;
}

#mailboxlist li a .unreadcount,
.folderlist li a .unreadcount,
.treelist li a .unreadcount {
	background: transparent !important;
	color: var(--culpur-accent) !important;
	font-weight: 500 !important;
	border: none !important;
	padding: 0 !important;
}

/* Account header (jyoung@culpur.net at top of folder pane) */
.header,
#layout-sidebar .header,
.boxtitle {
	background: transparent !important;
	color: var(--culpur-text) !important;
	border-bottom: 1px solid var(--culpur-border) !important;
}

/* ---------- Message list ---------- */
#layout-list,
#messagelist-container {
	background: transparent !important;
	border-right: 1px solid var(--culpur-border) !important;
}

#messagelist,
.messagelist {
	background: transparent !important;
	color: var(--culpur-text-dim) !important;
}

#messagelist thead,
#messagelist thead th,
.messagelist thead th {
	background: transparent !important;
	color: var(--culpur-text-faint) !important;
	border-bottom: 1px solid var(--culpur-border) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
}

#messagelist tbody tr,
.messagelist tbody tr {
	background: transparent !important;
	border-bottom: 1px solid rgba(148, 163, 184, 0.05) !important;
	color: var(--culpur-text-dim) !important;
	border-left: 2px solid transparent !important;
	transition: background .1s !important;
}

#messagelist tbody tr:hover,
.messagelist tbody tr:hover {
	background: var(--culpur-surface) !important;
}

#messagelist tbody tr.unread,
#messagelist tbody tr.unread td,
.messagelist tbody tr.unread td {
	color: var(--culpur-text) !important;
	font-weight: 500 !important;
	border-left-color: var(--culpur-accent) !important;
}

#messagelist tbody tr.unread td.subject,
.messagelist tbody tr.unread td.subject {
	font-weight: 600 !important;
}

#messagelist tbody tr.selected,
#messagelist tbody tr.selected td,
.messagelist tbody tr.selected td {
	background: var(--culpur-accent-dim) !important;
	color: var(--culpur-text) !important;
}

#messagelist tbody tr.selected {
	border-left-color: var(--culpur-accent) !important;
}

/* Search bar above message list */
.searchbar,
#searchbar {
	background: transparent !important;
	border-bottom: 1px solid var(--culpur-border) !important;
}
.searchbar input,
#searchbar input,
.searchfield input {
	background: var(--culpur-surface) !important;
	border: 1px solid var(--culpur-border) !important;
	color: var(--culpur-text) !important;
	border-radius: 3px !important;
}
.searchbar input:focus,
#searchbar input:focus {
	border-color: var(--culpur-accent) !important;
	background: var(--culpur-accent-dim) !important;
	box-shadow: none !important;
	outline: none !important;
}

/* ---------- Message preview / reading pane ---------- */
#layout-content.mail-view,
#messagecontent,
.content-frame,
#messagepartframe {
	background: transparent !important;
	color: var(--culpur-text-dim) !important;
}

#message-header,
.message-header,
#message-objects {
	background: transparent !important;
	border-bottom: 1px solid var(--culpur-border) !important;
	color: var(--culpur-text-dim) !important;
}

#message-header .subject,
.message-header h1,
.message-header .subject,
h1.subject,
.subject.short {
	font-family: var(--culpur-font-serif) !important;
	font-weight: 400 !important;
	font-size: 24px !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
	color: var(--culpur-text) !important;
}

#message-header .header-from,
#message-header .header-to,
#message-header .header-date,
.message-header .header-row,
#compose-subject-container {
	color: var(--culpur-text-muted) !important;
}

#messagebody {
	color: var(--culpur-text-dim) !important;
	line-height: 1.7 !important;
}

#messagebody a,
.mail-body a {
	color: var(--culpur-accent) !important;
}

#messagebody blockquote,
.mail-body blockquote {
	border-left: 2px solid var(--culpur-accent) !important;
	background: var(--culpur-accent-dim) !important;
	color: var(--culpur-text-dim) !important;
	border-radius: 0 3px 3px 0 !important;
	padding: 14px 18px !important;
	margin: 16px 0 !important;
}

#messagebody pre,
#messagebody code {
	background: var(--culpur-surface-hi) !important;
	color: var(--culpur-accent) !important;
	font-family: var(--culpur-font-mono, 'SF Mono', Menlo, monospace) !important;
	font-size: 12px !important;
	padding: 2px 6px !important;
	border-radius: 2px !important;
}

/* ---------- Toolbar (Reply, Forward, etc.) ---------- */
#toolbar,
.toolbar,
#messagetoolbar {
	background: transparent !important;
	border-bottom: 1px solid var(--culpur-border) !important;
}

.toolbar a.button,
.toolbar .button,
#toolbar a.button,
#messagetoolbar a.button {
	color: var(--culpur-text-muted) !important;
	background: transparent !important;
	border: none !important;
	border-radius: 3px !important;
	transition: all .12s !important;
}

.toolbar a.button:hover,
.toolbar .button:hover,
#toolbar a.button:hover,
#messagetoolbar a.button:hover {
	background: var(--culpur-surface) !important;
	color: var(--culpur-text) !important;
}

.toolbar a.button.selected,
.toolbar a.button.active {
	color: var(--culpur-accent) !important;
	background: var(--culpur-accent-dim) !important;
}

/* ---------- Compose modal / window ---------- */
#compose-box,
#compose-container,
#composeview {
	background: var(--culpur-bg) !important;
	color: var(--culpur-text) !important;
}

#compose-headers,
#compose-subject {
	background: transparent !important;
	border-bottom: 1px solid var(--culpur-border) !important;
}

#compose-headers input,
#compose-headers textarea,
#compose-subject input {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--culpur-border) !important;
	color: var(--culpur-text) !important;
	padding: 8px 0 !important;
	border-radius: 0 !important;
}

#compose-headers input:focus,
#compose-subject input:focus {
	border-bottom-color: var(--culpur-accent) !important;
	box-shadow: none !important;
	outline: none !important;
}

#compose-body {
	background: transparent !important;
	color: var(--culpur-text) !important;
}

/* TinyMCE editor chrome, if present */
.tox-tinymce,
.tox .tox-edit-area__iframe {
	background: var(--culpur-bg) !important;
	border-color: var(--culpur-border) !important;
}

/* ---------- Generic form inputs across mail UI ---------- */
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form input[type="search"],
form textarea,
form select,
.propform input,
.propform textarea,
.propform select {
	background: var(--culpur-surface) !important;
	border: 1px solid var(--culpur-border) !important;
	color: var(--culpur-text) !important;
	border-radius: 3px !important;
}

form input:focus,
form textarea:focus,
form select:focus,
.propform input:focus,
.propform textarea:focus,
.propform select:focus {
	border-color: var(--culpur-accent) !important;
	background: var(--culpur-accent-dim) !important;
	box-shadow: none !important;
	outline: none !important;
}

/* Override color of text labels in propform / settings */
.propform label,
.propform legend,
fieldset.propform label {
	color: var(--culpur-text-muted) !important;
}

fieldset.propform,
.propform {
	border-color: var(--culpur-border) !important;
	background: transparent !important;
}

/* ---------- Primary buttons (Compose, Send, Save) ---------- */
a.button.primary,
.button.primary,
button.btn.btn-primary,
input[type="submit"].btn-primary,
input[type="submit"].mainaction,
button.mainaction,
.btn.btn-primary,
#composesend,
#sendmail {
	background: var(--culpur-accent) !important;
	border-color: var(--culpur-accent) !important;
	color: var(--culpur-bg) !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	border-radius: 3px !important;
	transition: background .2s, box-shadow .2s !important;
}

a.button.primary:hover,
.button.primary:hover,
button.btn.btn-primary:hover,
.btn.btn-primary:hover,
#composesend:hover,
#sendmail:hover {
	background: var(--culpur-accent-hi) !important;
	border-color: var(--culpur-accent-hi) !important;
	box-shadow: 0 0 24px var(--culpur-accent-glow) !important;
	color: var(--culpur-bg) !important;
}

/* Secondary buttons */
.btn.btn-secondary,
a.button.secondary,
.button {
	background: var(--culpur-surface) !important;
	color: var(--culpur-text) !important;
	border: 1px solid var(--culpur-border) !important;
	border-radius: 3px !important;
}

.btn.btn-secondary:hover {
	background: var(--culpur-surface-hi) !important;
	border-color: var(--culpur-border-hi) !important;
}

/* ---------- Tables (contacts, settings lists) ---------- */
table.records-table,
table.listing,
.listing table {
	background: transparent !important;
	color: var(--culpur-text-dim) !important;
}

table.records-table thead th,
table.listing thead th {
	background: transparent !important;
	color: var(--culpur-text-faint) !important;
	border-bottom: 1px solid var(--culpur-border) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
}

table.records-table tbody tr,
table.listing tbody tr {
	border-bottom: 1px solid rgba(148, 163, 184, 0.05) !important;
}

table.records-table tbody tr:hover,
table.listing tbody tr:hover {
	background: var(--culpur-surface) !important;
}

table.records-table tbody tr.selected,
table.listing tbody tr.selected {
	background: var(--culpur-accent-dim) !important;
	color: var(--culpur-text) !important;
}

/* ---------- Popup menus and dialogs ---------- */
.popupmenu,
.ui-widget-content,
.ui-dialog,
.context-menu {
	background: var(--culpur-bg-panel) !important;
	color: var(--culpur-text-dim) !important;
	border: 1px solid var(--culpur-border-hi) !important;
	border-radius: 4px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.popupmenu a,
.popupmenu li a,
.context-menu a {
	color: var(--culpur-text-dim) !important;
}

.popupmenu a:hover,
.popupmenu li a:hover,
.context-menu a:hover {
	background: var(--culpur-accent-dim) !important;
	color: var(--culpur-text) !important;
}

.ui-dialog .ui-dialog-titlebar {
	background: transparent !important;
	color: var(--culpur-text) !important;
	border-bottom: 1px solid var(--culpur-border) !important;
}

.ui-dialog .ui-dialog-buttonpane {
	background: transparent !important;
	border-top: 1px solid var(--culpur-border) !important;
}

/* ---------- Notification / status bar ---------- */
#message.statusbar,
.statusbar,
#messagestack .statusbar,
#rcmnotificationbar {
	background: var(--culpur-bg-panel) !important;
	color: var(--culpur-text-dim) !important;
	border: 1px solid var(--culpur-border-hi) !important;
	border-radius: 3px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* ---------- Tabs (settings panels) ---------- */
.tabsbar,
.nav-tabs {
	background: transparent !important;
	border-bottom: 1px solid var(--culpur-border) !important;
}

.tabsbar a,
.nav-tabs .nav-link {
	color: var(--culpur-text-muted) !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 2px solid transparent !important;
}

.tabsbar a:hover,
.nav-tabs .nav-link:hover {
	color: var(--culpur-text) !important;
}

.tabsbar a.selected,
.nav-tabs .nav-link.active {
	color: var(--culpur-accent) !important;
	background: transparent !important;
	border-bottom-color: var(--culpur-accent) !important;
}

/* ---------- Progress / loading ---------- */
#rcmloadinglogo,
.rcmloading {
	color: var(--culpur-accent) !important;
}

/* ---------- Checkboxes inside message list (select) ---------- */
#messagelist tbody tr td.select input[type="checkbox"],
.messagelist tbody tr td.select input[type="checkbox"] {
	accent-color: var(--culpur-accent) !important;
}

/* ---------- Override any light-mode remnants ---------- */
html.iframe,
iframe {
	background: var(--culpur-bg) !important;
}

/* About / Help pages */
#about,
.about-page,
.helppage {
	color: var(--culpur-text-dim) !important;
}

/* ==========================================================================
   CULPUR mail UI v2 — fixes for task buttons, logo, light-mode toggle, dates
   ========================================================================== */

/* Hide Light-mode / dark-mode toggle — we're dark-only */
#layout-menu #taskmenu a.theme,
#layout-menu #taskmenu a.theme.light,
#layout-menu #taskmenu a.theme.dark,
a.theme.light,
a.theme.dark {
	display: none !important;
}

/* Taskmenu buttons (Compose / Mail / Contacts / Settings / About / Logout) */
#layout-menu,
#layout-menu #taskmenu,
#layout-menu .taskmenu {
	background: rgba(10, 15, 30, 0.92) !important;
	border-right: 1px solid var(--culpur-border) !important;
}

#layout-menu a.button,
#layout-menu a.compose,
#layout-menu a.mail,
#layout-menu a.contacts,
#layout-menu a.settings,
#layout-menu a.about,
#layout-menu a.logout,
#taskmenu a {
	color: var(--culpur-text-muted) !important;
	background: transparent !important;
	transition: background .12s, color .12s !important;
}

#layout-menu a.button:hover,
#layout-menu a.compose:hover,
#layout-menu a.mail:hover,
#layout-menu a.contacts:hover,
#layout-menu a.settings:hover,
#layout-menu a.about:hover,
#layout-menu a.logout:hover,
#taskmenu a:hover {
	background: var(--culpur-surface) !important;
	color: var(--culpur-text) !important;
}

/* Active (selected) task in the taskmenu */
#layout-menu a.mail.selected,
#layout-menu a.contacts.selected,
#layout-menu a.settings.selected,
#layout-menu a.compose.selected,
#layout-menu a.selected,
#taskmenu a.selected {
	color: var(--culpur-accent) !important;
	background: var(--culpur-accent-dim) !important;
}

#layout-menu a.mail.selected .inner,
#layout-menu a.compose.selected .inner,
#taskmenu a.selected .inner {
	color: var(--culpur-accent) !important;
}

/* Logo at top of taskmenu — replace broken svg with our png */
#layout-menu img[src$="logo.svg"],
#layout-menu img[alt="Logo"] {
	content: url('/skins/culpur/images/logo.png') !important;
	max-width: 36px !important;
	max-height: 36px !important;
	object-fit: contain !important;
}

/* Logout button color — keep subtle, not bright red */
#layout-menu a.logout,
#taskmenu a.logout {
	color: var(--culpur-text-muted) !important;
}
#layout-menu a.logout:hover,
#taskmenu a.logout:hover {
	color: var(--culpur-red, #f87171) !important;
	background: rgba(248, 113, 113, 0.08) !important;
}

/* ---------- Message list — undo overly-cyan dates ---------- */
#messagelist tbody tr td.date,
#messagelist tbody tr td.from .name,
#messagelist tbody tr td.subject,
.messagelist tbody tr td {
	color: var(--culpur-text-dim) !important;
}

#messagelist tbody tr td.date,
.messagelist tbody tr td.date {
	color: var(--culpur-text-faint) !important;
	font-variant-numeric: tabular-nums !important;
	font-size: 12px !important;
}

/* Sender name (from) subtler than subject */
#messagelist tbody tr td.fromto,
#messagelist tbody tr td.from,
.messagelist tbody tr td.from {
	color: var(--culpur-text-muted) !important;
}

#messagelist tbody tr.unread td.fromto,
#messagelist tbody tr.unread td.from {
	color: var(--culpur-text) !important;
	font-weight: 600 !important;
}

/* Subject styling */
#messagelist tbody tr td.subject a,
#messagelist tbody tr td.subject {
	color: var(--culpur-text-dim) !important;
	text-decoration: none !important;
}
#messagelist tbody tr.unread td.subject a,
#messagelist tbody tr.unread td.subject {
	color: var(--culpur-text) !important;
	font-weight: 500 !important;
}

/* Status indicators (unread dot, attachment, etc.) — cyan for unread */
#messagelist tbody tr.unread .unreadchildren,
#messagelist tbody tr.unread td.threads,
#messagelist tbody tr.unread::before {
	color: var(--culpur-accent) !important;
}

/* Message list threads pane header (Search / Select / Threads / Options / Refresh) */
.listing-frame .header,
.messagelist-header,
#messagelistheader,
#messagelist-thead {
	background: transparent !important;
	border-bottom: 1px solid var(--culpur-border) !important;
}

/* Search bar in the inbox header */
#searchbar,
.searchbar,
.searchbox {
	background: transparent !important;
	border-color: var(--culpur-border) !important;
}
#searchbar input.searchfield,
.searchbar input {
	background: var(--culpur-surface) !important;
	border: 1px solid var(--culpur-border) !important;
	color: var(--culpur-text) !important;
	border-radius: 3px !important;
}
#searchbar input.searchfield:focus,
.searchbar input:focus {
	border-color: var(--culpur-accent) !important;
	background: var(--culpur-accent-dim) !important;
	box-shadow: none !important;
}

/* Account header at top of sidebar (jyoung@culpur.net) */
#layout-sidebar .header,
#accountslist .header,
.sidebar-header {
	background: transparent !important;
	color: var(--culpur-text) !important;
	border-bottom: 1px solid var(--culpur-border) !important;
	font-weight: 500 !important;
}

/* Folder list items */
#mailboxlist li,
.folderlist li {
	background: transparent !important;
}

#mailboxlist li.selected,
#mailboxlist li.droptarget,
.folderlist li.selected {
	background: var(--culpur-accent-dim) !important;
}

#mailboxlist li.selected > a,
.folderlist li.selected > a {
	color: var(--culpur-text) !important;
	background: transparent !important;
	border-left: 2px solid var(--culpur-accent) !important;
}

/* Pagination footer */
.paginator,
.pagenav,
#messageliststatus {
	background: transparent !important;
	color: var(--culpur-text-faint) !important;
	border-top: 1px solid var(--culpur-border) !important;
}
.paginator a,
.pagenav a {
	color: var(--culpur-text-muted) !important;
}
.paginator a:hover,
.pagenav a:hover {
	color: var(--culpur-text) !important;
}

/* Layout body and main container */
#layout,
#layout-main,
#layout-content {
	background: transparent !important;
}

/* ==========================================================================
   CULPUR mail UI — layout reorganization to match mockup
   Moves vertical taskbar to horizontal top header via CSS only.
   No DOM mutation, no template edits — pure layout rewrite.
   ========================================================================== */

/* ---------- Convert #layout from [taskbar-vertical | sidebar | list | content]
   into [top-header spans all columns; sidebar | list | content below] ---------- */

#layout {
	display: grid !important;
	grid-template-columns: 240px 400px 1fr !important;
	grid-template-rows: 56px 1fr !important;
	grid-template-areas:
		"header header header"
		"sidebar list content" !important;
	height: 100vh !important;
	width: 100vw !important;
	background: var(--culpur-bg) !important;
	overflow: hidden !important;
}

body::before {
	content: '' !important;
	position: fixed !important;
	inset: 0 !important;
	z-index: -1 !important;
	pointer-events: none !important;
	background:
		radial-gradient(ellipse at 95% 50%, rgba(15, 188, 255, 0.04) 0%, transparent 60%),
		linear-gradient(110deg, var(--culpur-bg-deep) 0%, var(--culpur-bg) 50%, #0d1326 100%) !important;
}

/* The taskmenu becomes the top header strip spanning all 3 columns */
#layout-menu {
	grid-area: header !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	padding: 0 24px !important;
	width: 100% !important;
	height: 56px !important;
	background: rgba(10, 15, 30, 0.8) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border-bottom: 1px solid var(--culpur-border) !important;
	border-right: none !important;
	position: relative !important;
	z-index: 100 !important;
}

#layout-menu #taskmenu {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 4px !important;
	width: 100% !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	height: 100% !important;
}

/* Hide the "Compose" button in the top bar — we'll put it in the sidebar */
#layout-menu #taskmenu a.compose {
	display: none !important;
}

/* Taskmenu logo stays at far left — just the mark, not a huge block */
#layout-menu #taskmenu a.logo,
#layout-menu a.logo {
	order: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 0 !important;
	margin-right: 24px !important;
	width: auto !important;
	height: auto !important;
	background: transparent !important;
}
#layout-menu #taskmenu a.logo img,
#layout-menu img[alt="Logo"] {
	width: 28px !important;
	height: 28px !important;
	max-width: 28px !important;
	max-height: 28px !important;
}
#layout-menu a.logo::after {
	content: 'culpur.' attr(data-dot) !important;
	font-family: var(--culpur-font-serif) !important;
	font-weight: 400 !important;
	font-size: 18px !important;
	letter-spacing: -0.01em !important;
	color: var(--culpur-text) !important;
	line-height: 1 !important;
	margin-left: 4px !important;
}

/* Main task tabs (Mail / Contacts / Settings) — horizontal pills in top bar */
#layout-menu #taskmenu a.mail,
#layout-menu #taskmenu a.contacts,
#layout-menu #taskmenu a.settings {
	order: 1 !important;
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 12px !important;
	height: auto !important;
	min-width: 0 !important;
	width: auto !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--culpur-text-muted) !important;
	background: transparent !important;
	border-radius: 3px !important;
	border: none !important;
}
#layout-menu #taskmenu a.mail .inner,
#layout-menu #taskmenu a.contacts .inner,
#layout-menu #taskmenu a.settings .inner {
	font-size: 13px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin: 0 !important;
	display: inline !important;
}
#layout-menu #taskmenu a.mail::before,
#layout-menu #taskmenu a.contacts::before,
#layout-menu #taskmenu a.settings::before {
	/* keep icon inline, scale down */
	font-size: 14px !important;
	width: auto !important;
	margin: 0 !important;
}

#layout-menu #taskmenu a.mail.selected,
#layout-menu #taskmenu a.contacts.selected,
#layout-menu #taskmenu a.settings.selected {
	color: var(--culpur-accent) !important;
	background: var(--culpur-accent-dim) !important;
}

/* Push About + Logout to the far right */
#layout-menu #taskmenu a.about,
#layout-menu #taskmenu a.logout,
#layout-menu #taskmenu span.special-buttons {
	order: 9 !important;
	margin-left: auto !important;
}
#layout-menu #taskmenu a.about {
	padding: 6px 10px !important;
	font-size: 12px !important;
	color: var(--culpur-text-faint) !important;
	height: auto !important;
	width: auto !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
#layout-menu #taskmenu a.logout {
	padding: 6px 10px !important;
	font-size: 12px !important;
	color: var(--culpur-text-muted) !important;
	height: auto !important;
	width: auto !important;
	margin-left: 8px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* Spacer: push space between logo+tasks and the right-side utils */
#layout-menu #taskmenu::after {
	content: '' !important;
	flex: 1 !important;
	order: 5 !important;
}

/* Hide the Close/cancel button in taskmenu */
#layout-menu #taskmenu a.button.cancel {
	display: none !important;
}

/* ---------- Left sidebar now becomes column 1 with Compose button at top ---------- */
#layout-sidebar {
	grid-area: sidebar !important;
	border-right: 1px solid var(--culpur-border) !important;
	width: 240px !important;
	max-width: 240px !important;
	position: relative !important;
	top: auto !important;
	left: auto !important;
	background: transparent !important;
	height: auto !important;
	overflow-y: auto !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Inject a compose button at the top of the sidebar */
#layout-sidebar::before {
	content: 'Compose' !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	margin: 16px 12px 20px !important;
	padding: 11px !important;
	background: var(--culpur-accent) !important;
	color: var(--culpur-bg) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	transition: background .15s, box-shadow .15s !important;
	flex-shrink: 0 !important;
}
#layout-sidebar::before:hover {
	background: var(--culpur-accent-hi) !important;
	box-shadow: 0 0 24px var(--culpur-accent-glow) !important;
}
/* Make the sidebar::before clickable via an overlay anchor */
/* NOTE: ::before can't be a direct click target for the Compose action.
   As a compromise we'll add a JS injection via the mail-head.html add_label
   or leverage the real compose link in folder-list area. */

/* Sidebar header (account email) moves above the folder list, below Compose */
#layout-sidebar .header,
#layout-sidebar #accounts-title {
	background: transparent !important;
	border-bottom: 1px solid var(--culpur-border) !important;
	padding: 10px 16px !important;
	color: var(--culpur-text-faint) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	height: auto !important;
}

/* ---------- Middle column: message list ---------- */
#layout-list {
	grid-area: list !important;
	width: 400px !important;
	max-width: 400px !important;
	border-right: 1px solid var(--culpur-border) !important;
	position: relative !important;
	top: auto !important;
	left: auto !important;
	background: transparent !important;
	height: auto !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
}

/* ---------- Right column: content / reading pane ---------- */
#layout-content {
	grid-area: content !important;
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
	background: transparent !important;
	overflow: auto !important;
}

/* Safety: any layout-content that was inside a login page keeps its special handling */
body.task-login #layout {
	grid-template-columns: 1fr !important;
	grid-template-rows: 1fr !important;
	grid-template-areas: "content" !important;
	display: block !important;
	height: 100vh !important;
}
body.task-login #layout-menu,
body.task-login #layout-sidebar,
body.task-login #layout-list {
	display: none !important;
}
body.task-login #layout-content {
	grid-area: auto !important;
	width: 100% !important;
	min-height: 100vh !important;
}

/* Minmodetoggle and other stray taskmenu elements in the top bar */
#layout-menu a.minmodetoggle,
#layout-menu #taskmenu a.minmodetoggle {
	display: none !important;
}

/* Ensure taskmenu links size fits the 56px bar properly */
#layout-menu #taskmenu a {
	min-height: 36px !important;
	max-height: 40px !important;
}

/* Hide the bootstrap "menu" class padding that makes things chunky */
#layout-menu.menu,
#layout-menu .menu {
	padding: 0 !important;
}

/* ==========================================================================
   Culpur top-header layout fix — stop button stacking, right-align tabs
   ========================================================================== */

/* ---------- Top-level taskmenu span wrappers: make them flex rows ---------- */
#layout-menu #taskmenu > span.action-buttons,
#layout-menu #taskmenu > span.special-buttons {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 4px !important;
	position: static !important;
	top: auto !important;
	bottom: auto !important;
	right: auto !important;
	left: auto !important;
	height: auto !important;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

/* action-buttons (leftmost: contains logo) — first */
#layout-menu #taskmenu > span.action-buttons {
	order: 0 !important;
	margin-right: 16px !important;
	flex-shrink: 0 !important;
}

/* The logo anchor inside action-buttons */
#layout-menu #taskmenu > span.action-buttons a.logo,
#layout-menu a.logo {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	border: none !important;
}
#layout-menu a.logo img {
	width: 28px !important;
	height: 28px !important;
	max-width: 28px !important;
	max-height: 28px !important;
	flex-shrink: 0 !important;
}

/* Wordmark appended to logo */
#layout-menu a.logo::after {
	content: 'culpur.' !important;
	font-family: var(--culpur-font-serif) !important;
	font-weight: 400 !important;
	font-size: 18px !important;
	letter-spacing: -0.01em !important;
	color: var(--culpur-text) !important;
	line-height: 1 !important;
}

/* Mail / Contacts / Settings — horizontal tabs pushed to the right */
#layout-menu #taskmenu > a.mail,
#layout-menu #taskmenu > a.contacts,
#layout-menu #taskmenu > a.settings {
	order: 2 !important;
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 12px !important;
	margin: 0 !important;
	height: 36px !important;
	width: auto !important;
	min-width: 0 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--culpur-text-muted) !important;
	background: transparent !important;
	border-radius: 3px !important;
	border: none !important;
	position: static !important;
}

/* Push Mail/Contacts/Settings to the right via auto margin on the first one */
#layout-menu #taskmenu > a.mail {
	margin-left: auto !important;
}

/* Active tab: cyan */
#layout-menu #taskmenu > a.mail.selected,
#layout-menu #taskmenu > a.contacts.selected,
#layout-menu #taskmenu > a.settings.selected {
	color: var(--culpur-accent) !important;
	background: var(--culpur-accent-dim) !important;
}

/* Special buttons (About + Logout) — group at far right, after tabs */
#layout-menu #taskmenu > span.special-buttons {
	order: 3 !important;
	margin-left: 16px !important;
	padding-left: 16px !important;
	border-left: 1px solid var(--culpur-border) !important;
	height: 24px !important;
	align-self: center !important;
}

#layout-menu #taskmenu > span.special-buttons a {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	padding: 6px 10px !important;
	margin: 0 !important;
	font-size: 12px !important;
	color: var(--culpur-text-faint) !important;
	background: transparent !important;
	width: auto !important;
	height: auto !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	position: static !important;
}

#layout-menu #taskmenu > span.special-buttons a.logout {
	color: var(--culpur-text-muted) !important;
}
#layout-menu #taskmenu > span.special-buttons a.logout:hover {
	color: var(--culpur-red, #f87171) !important;
	background: rgba(248, 113, 113, 0.08) !important;
}

/* Hide any .inner label that's getting positioned weird */
#layout-menu #taskmenu a .inner {
	display: inline !important;
	position: static !important;
	font-size: inherit !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Scale taskmenu button icons down to fit horizontal row */
#layout-menu #taskmenu a::before {
	font-size: 14px !important;
	width: auto !important;
	height: auto !important;
	margin-right: 4px !important;
	display: inline-block !important;
	line-height: 1 !important;
}

/* Suppress theme/minmode/cancel from top bar (should already be hidden, reinforce) */
#layout-menu #taskmenu a.theme,
#layout-menu #taskmenu a.theme.light,
#layout-menu #taskmenu a.minmodetoggle,
#layout-menu #taskmenu a.button.cancel {
	display: none !important;
}

/* ==========================================================================
   Culpur top-header v3 — target real DOM (popover-header + taskmenu as siblings)
   ========================================================================== */

/* layout-menu is the top bar. Inside it: popover-header (contains logo),
   and taskmenu (contains Compose + Mail/Contacts/Settings + About/Logout).
   Both are siblings. */

#layout-menu {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 16px !important;
	padding: 0 20px !important;
	height: 56px !important;
	background: rgba(10, 15, 30, 0.8) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	border-bottom: 1px solid var(--culpur-border) !important;
	border-right: none !important;
}

/* Logo block at far left */
#layout-menu > div.popover-header,
#layout-menu .popover-header {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	order: 0 !important;
	flex-shrink: 0 !important;
	position: relative !important;
	top: auto !important;
	left: auto !important;
	height: auto !important;
	width: auto !important;
}

#layout-menu .popover-header img[alt="Logo"] {
	width: 28px !important;
	height: 28px !important;
	max-width: 28px !important;
	max-height: 28px !important;
	content: url('/skins/culpur/images/logo.png') !important;
	display: block !important;
	flex-shrink: 0 !important;
}

/* Wordmark after logo */
#layout-menu .popover-header::after {
	content: 'culpur.' !important;
	font-family: var(--culpur-font-serif) !important;
	font-weight: 400 !important;
	font-size: 18px !important;
	letter-spacing: -0.01em !important;
	color: var(--culpur-text) !important;
	line-height: 1 !important;
}

/* ---------- Taskmenu: flex row filling remaining width ---------- */
#layout-menu #taskmenu {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 4px !important;
	flex: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	height: 100% !important;
	order: 1 !important;
}

/* Action-buttons span (holds Compose) — hide entirely since we moved compose to sidebar */
#layout-menu #taskmenu > span.action-buttons {
	display: none !important;
}

/* Mail / Contacts / Settings — pushed to the right via spacer */
#layout-menu #taskmenu::before {
	content: '' !important;
	flex: 1 1 auto !important;
	order: 0 !important;
}

#layout-menu #taskmenu > a.mail,
#layout-menu #taskmenu > a.contacts,
#layout-menu #taskmenu > a.settings {
	order: 1 !important;
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 6px 12px !important;
	margin: 0 !important;
	height: 36px !important;
	width: auto !important;
	min-width: 0 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: var(--culpur-text-muted) !important;
	background: transparent !important;
	border-radius: 3px !important;
	border: none !important;
	position: static !important;
	flex-shrink: 0 !important;
}

#layout-menu #taskmenu > a.mail.selected,
#layout-menu #taskmenu > a.contacts.selected,
#layout-menu #taskmenu > a.settings.selected {
	color: var(--culpur-accent) !important;
	background: var(--culpur-accent-dim) !important;
}

/* About + Logout at far right */
#layout-menu #taskmenu > span.special-buttons {
	order: 2 !important;
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 4px !important;
	margin-left: 12px !important;
	padding-left: 12px !important;
	border-left: 1px solid var(--culpur-border) !important;
	height: 24px !important;
	position: static !important;
	top: auto !important;
	background: transparent !important;
	width: auto !important;
	flex-shrink: 0 !important;
}

#layout-menu #taskmenu > span.special-buttons a {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 6px 10px !important;
	margin: 0 !important;
	font-size: 12px !important;
	color: var(--culpur-text-muted) !important;
	background: transparent !important;
	width: auto !important;
	height: auto !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	position: static !important;
	border-radius: 3px !important;
}

#layout-menu #taskmenu > span.special-buttons a:hover {
	background: var(--culpur-surface) !important;
	color: var(--culpur-text) !important;
}

#layout-menu #taskmenu > span.special-buttons a.logout:hover {
	color: var(--culpur-red, #f87171) !important;
	background: rgba(248, 113, 113, 0.08) !important;
}

/* Kill any inner .inner label flourishes from elastic */
#layout-menu #taskmenu a .inner {
	display: inline !important;
	position: static !important;
	font-size: inherit !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
}

/* Icon ::before (elastic uses fontawesome-style) */
#layout-menu #taskmenu a::before {
	font-size: 14px !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	display: inline-block !important;
	line-height: 1 !important;
	position: static !important;
}

/* Hide Close and theme toggle */
#layout-menu #taskmenu a.button.cancel,
#layout-menu #taskmenu a.theme,
#layout-menu #taskmenu a.minmodetoggle {
	display: none !important;
}

/* ==========================================================================
   Fix: make the COMPOSE button clickable by styling the real a.compose anchor
   rather than a CSS ::before pseudo-element.
   ========================================================================== */

/* Remove the fake pseudo-compose that wasn't clickable */
#layout-sidebar::before {
	content: none !important;
	display: none !important;
}

/* Show .action-buttons (which holds the real Compose link) and move it into sidebar position */
#layout-menu #taskmenu > span.action-buttons {
	display: none !important;
}

/* Promote the actual compose anchor:
   Roundcube's JS generates it inside #taskmenu. Instead of moving the DOM,
   we use position:fixed to paint it where we want it, and expose its click target. */
#layout-menu #taskmenu a.compose,
#layout-menu a.compose,
#rcmbtn104 {
	display: flex !important;
	position: fixed !important;
	top: 72px !important;
	left: 20px !important;
	width: 200px !important;
	height: 44px !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var(--culpur-accent) !important;
	color: var(--culpur-bg) !important;
	font-family: var(--culpur-font-sans) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	border: none !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	z-index: 50 !important;
	transition: background .15s, box-shadow .15s !important;
	flex-direction: row !important;
	overflow: visible !important;
}

#layout-menu #taskmenu a.compose:hover,
#rcmbtn104:hover {
	background: var(--culpur-accent-hi) !important;
	box-shadow: 0 0 24px var(--culpur-accent-glow) !important;
	color: var(--culpur-bg) !important;
}

/* Force the inner label text to show as "Compose" */
#layout-menu #taskmenu a.compose .inner,
#rcmbtn104 .inner {
	color: var(--culpur-bg) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline !important;
	position: static !important;
	line-height: 1 !important;
}

/* Icon before the label */
#layout-menu #taskmenu a.compose::before,
#rcmbtn104::before {
	font-size: 14px !important;
	margin-right: 4px !important;
	width: auto !important;
	height: auto !important;
	display: inline-block !important;
	line-height: 1 !important;
	color: var(--culpur-bg) !important;
	position: static !important;
}

/* Re-expose the span.action-buttons as a positioned container for a.compose */
#layout-menu #taskmenu > span.action-buttons {
	display: block !important;
	position: fixed !important;
	top: 72px !important;
	left: 20px !important;
	width: 200px !important;
	height: 44px !important;
	z-index: 50 !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}

#layout-menu #taskmenu > span.action-buttons a.compose {
	position: static !important;
	width: 100% !important;
	height: 100% !important;
	top: auto !important;
	left: auto !important;
}

/* Push sidebar folder list down to make room for the compose button above it */
#layout-sidebar {
	padding-top: 60px !important;
}

/* Force sidebar to 240px — elastic's CSS has been winning, bump specificity */
html body #layout {
	grid-template-columns: 240px 400px 1fr !important;
}

/* Compose button narrower to fit even if sidebar shrinks */
html body #layout-menu #taskmenu > span.action-buttons,
html body #layout-menu #taskmenu a.compose,
html body #rcmbtn104 {
	width: 200px !important;
	max-width: calc(240px - 40px) !important;
	left: 20px !important;
}

/* ==========================================================================
   COMPOSE button — revert from position:fixed hack, embed real anchor in sidebar
   ========================================================================== */

/* Undo the position:fixed hacks from earlier attempts */
html body #layout-menu #taskmenu > span.action-buttons,
html body #layout-menu #taskmenu a.compose,
html body #rcmbtn104 {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
	max-width: none !important;
	z-index: auto !important;
}

/* Show .action-buttons as a normal block inside the sidebar — use CSS grid-area
   to place it into the sidebar column at row 1. The top-header grid has:
   "header header header / sidebar list content"
   We add a new row above sidebar for the compose button. */

#layout {
	grid-template-columns: 240px 400px 1fr !important;
	grid-template-rows: 56px auto 1fr !important;
	grid-template-areas:
		"header  header  header"
		"compose list    content"
		"sidebar list    content" !important;
}

/* The action-buttons span holds the compose anchor — promote it out of the
   taskmenu visually by moving it into the compose grid area */
#layout-menu #taskmenu > span.action-buttons {
	display: block !important;
	position: fixed !important;  /* positioned overlay since it's actually inside layout-menu DOM */
	top: 72px !important;
	left: 20px !important;
	width: 200px !important;
	height: 44px !important;
	z-index: 40 !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	order: 0 !important;
}

#layout-menu #taskmenu > span.action-buttons a.compose {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 200px !important;
	height: 44px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var(--culpur-accent) !important;
	color: var(--culpur-bg) !important;
	font-family: var(--culpur-font-sans) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	border: none !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: background .15s, box-shadow .15s !important;
	position: static !important;
	flex-direction: row !important;
}

#layout-menu #taskmenu > span.action-buttons a.compose:hover {
	background: var(--culpur-accent-hi) !important;
	box-shadow: 0 0 24px var(--culpur-accent-glow) !important;
	color: var(--culpur-bg) !important;
}

#layout-menu #taskmenu > span.action-buttons a.compose .inner {
	color: var(--culpur-bg) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline !important;
	position: static !important;
	line-height: 1 !important;
}

#layout-menu #taskmenu > span.action-buttons a.compose::before {
	font-size: 14px !important;
	margin-right: 4px !important;
	width: auto !important;
	height: auto !important;
	display: inline-block !important;
	line-height: 1 !important;
	color: var(--culpur-bg) !important;
	position: static !important;
}

/* Sidebar folder list: top padding to clear the compose button overlay */
#layout-sidebar {
	padding-top: 60px !important;
	width: 240px !important;
	max-width: 240px !important;
	min-width: 240px !important;
	flex-basis: 240px !important;
}

/* Position compose button as absolute overlay at the top-left of the sidebar */
html body #layout-menu #taskmenu > span.action-buttons {
	position: absolute !important;
	top: 72px !important;
	left: 20px !important;
	width: 200px !important;
	height: 44px !important;
	z-index: 50 !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	display: block !important;
	order: 0 !important;
}

html body #layout-menu #taskmenu > span.action-buttons a.compose {
	display: flex !important;
	position: static !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 200px !important;
	height: 44px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var(--culpur-accent) !important;
	color: var(--culpur-bg) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	border: none !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	flex-direction: row !important;
	transition: background .15s, box-shadow .15s !important;
}

html body #layout-menu #taskmenu > span.action-buttons a.compose:hover {
	background: var(--culpur-accent-hi) !important;
	box-shadow: 0 0 24px var(--culpur-accent-glow) !important;
	color: var(--culpur-bg) !important;
}

/* Ensure layout-menu has relative positioning so absolute compose anchors to it */
html body #layout-menu {
	position: relative !important;
}

/* Sidebar still needs padding to clear the compose button overlay */
html body #layout-sidebar {
	padding-top: 60px !important;
}

/* Anchor compose button to viewport via fixed positioning at screen x=20, y=72 */
html body #layout-menu #taskmenu > span.action-buttons {
	position: fixed !important;
	top: 72px !important;
	left: 20px !important;
	width: 200px !important;
	height: 44px !important;
	z-index: 50 !important;
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

/* Push the message list toolbar down so COMPOSE button doesn't overlap */
html body #layout-list {
	padding-top: 0 !important;
}

/* The list's internal toolbar / header — shift it so its icons don't visually collide
   with the compose button area */
html body #layout-list .header,
html body #layout-list .scroller-container {
	margin-top: 0 !important;
}

/* Make sure the list's top toolbar doesn't extend into sidebar column */
html body #layout-list .toolbar,
html body #layout-list #messagetoolbar {
	padding-left: 8px !important;
}

/* ==========================================================================
   COMPOSE moves into the top header as a pill before Mail tab
   ========================================================================== */

/* Reset all the position:fixed hacks from earlier attempts */
html body #layout-menu #taskmenu > span.action-buttons,
html body #layout-menu #taskmenu a.compose,
html body #rcmbtn104 {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	z-index: auto !important;
}

/* Show .action-buttons as an inline-flex item in the taskmenu right-side group */
html body #layout-menu #taskmenu > span.action-buttons {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	order: 1 !important;
	margin: 0 8px 0 0 !important;
	padding: 0 !important;
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	flex-shrink: 0 !important;
}

/* Make the compose anchor a cyan pill */
html body #layout-menu #taskmenu > span.action-buttons a.compose,
html body #layout-menu #taskmenu a.compose {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: auto !important;
	height: 36px !important;
	padding: 0 16px !important;
	margin: 0 !important;
	background: var(--culpur-accent) !important;
	color: var(--culpur-bg) !important;
	font-family: var(--culpur-font-sans) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 0.04em !important;
	text-transform: none !important;
	border: none !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: background .15s, box-shadow .15s !important;
	flex-direction: row !important;
	flex-shrink: 0 !important;
}

html body #layout-menu #taskmenu > span.action-buttons a.compose:hover,
html body #layout-menu #taskmenu a.compose:hover {
	background: var(--culpur-accent-hi) !important;
	box-shadow: 0 0 20px var(--culpur-accent-glow) !important;
	color: var(--culpur-bg) !important;
}

html body #layout-menu #taskmenu a.compose .inner {
	color: var(--culpur-bg) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline !important;
	position: static !important;
	line-height: 1 !important;
}

html body #layout-menu #taskmenu a.compose::before {
	font-size: 14px !important;
	margin-right: 4px !important;
	width: auto !important;
	height: auto !important;
	display: inline-block !important;
	line-height: 1 !important;
	color: var(--culpur-bg) !important;
	position: static !important;
}

/* The taskmenu flex spacer — compose goes BEFORE the spacer so all right-aligned items stick together */
html body #layout-menu #taskmenu::before {
	content: '' !important;
	flex: 1 1 auto !important;
	order: 0 !important;
}

/* Mail/Contact/Settings stay right-aligned after compose */
html body #layout-menu #taskmenu > a.mail,
html body #layout-menu #taskmenu > a.contacts,
html body #layout-menu #taskmenu > a.settings {
	order: 2 !important;
	margin-left: 0 !important;
}

/* About/Logout still at far right */
html body #layout-menu #taskmenu > span.special-buttons {
	order: 3 !important;
}

/* Remove any sidebar padding we added for the old compose overlay */
html body #layout-sidebar {
	padding-top: 0 !important;
}

/* ==========================================================================
   CULPUR labels — color squares on sidebar folder entries + tag chips in list
   Attribute-selector match on folder names ensures only Culpur labels colored.
   ========================================================================== */

/* ---------- Sidebar label squares ---------- */
/* Roundcube renders folders as <li id="rcmli..." class="mailbox ... inbox.security">  */
#mailboxlist li.mailbox[class*="inbox.security"] > a::before,
#mailboxlist li.mailbox[class*="inbox.operations"] > a::before,
#mailboxlist li.mailbox[class*="inbox.dmarc-reports"] > a::before,
#mailboxlist li.mailbox[class*="inbox.alerts"] > a::before {
	content: '' !important;
	display: inline-block !important;
	width: 10px !important;
	height: 10px !important;
	border-radius: 2px !important;
	margin-right: 10px !important;
	margin-left: 4px !important;
	vertical-align: middle !important;
	flex-shrink: 0 !important;
}
#mailboxlist li.mailbox[class*="inbox.security"] > a::before {
	background: #f87171 !important;
}
#mailboxlist li.mailbox[class*="inbox.operations"] > a::before {
	background: #0FBCFF !important;
}
#mailboxlist li.mailbox[class*="inbox.dmarc-reports"] > a::before {
	background: #00D084 !important;
}
#mailboxlist li.mailbox[class*="inbox.alerts"] > a::before {
	background: #fbbf24 !important;
}

/* Hide the envelope icon that Roundcube renders on label folders — use our square instead */
#mailboxlist li.mailbox[class*="inbox.security"] > a > .icon,
#mailboxlist li.mailbox[class*="inbox.operations"] > a > .icon,
#mailboxlist li.mailbox[class*="inbox.dmarc-reports"] > a > .icon,
#mailboxlist li.mailbox[class*="inbox.alerts"] > a > .icon {
	display: none !important;
}

/* "LABELS" section header injected as a pseudo-heading above the label subfolders.
   We use the first label folder (inbox.security) as the anchor and inject ::before on its parent LI. */
#mailboxlist li.mailbox[class*="inbox.security"] {
	margin-top: 16px !important;
	position: relative !important;
}
#mailboxlist li.mailbox[class*="inbox.security"]::before {
	content: 'LABELS' !important;
	display: block !important;
	position: absolute !important;
	top: -14px !important;
	left: 14px !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	color: var(--culpur-text-faint) !important;
	text-transform: uppercase !important;
	padding-bottom: 4px !important;
	width: calc(100% - 28px) !important;
	pointer-events: none !important;
}

/* Also add "MAILBOX" section header above Inbox for symmetry */
#mailboxlist li.mailbox[class*="inbox"]:not([class*="inbox."]):first-of-type {
	margin-top: 16px !important;
	position: relative !important;
}
#mailboxlist li.mailbox[class*="inbox"]:not([class*="inbox."]):first-of-type::before {
	content: 'MAILBOX' !important;
	display: block !important;
	position: absolute !important;
	top: -14px !important;
	left: 14px !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	color: var(--culpur-text-faint) !important;
	text-transform: uppercase !important;
	width: calc(100% - 28px) !important;
	pointer-events: none !important;
}

/* Unread count color matches the folder's label color */
#mailboxlist li.mailbox[class*="inbox.security"] .unreadcount {
	color: #f87171 !important;
}
#mailboxlist li.mailbox[class*="inbox.operations"] .unreadcount {
	color: #0FBCFF !important;
}
#mailboxlist li.mailbox[class*="inbox.dmarc-reports"] .unreadcount {
	color: #00D084 !important;
}
#mailboxlist li.mailbox[class*="inbox.alerts"] .unreadcount {
	color: #fbbf24 !important;
}

/* ---------- Inline tag chip in message list when viewing a label folder ---------- */
/* When the user opens a label folder, we color-code the subject line prefix.
   Roundcube sets body.cur-mailbox-inbox-security (etc.) — we can target it. */
body[class*="cur-mailbox"]:is([class*="inbox-security"]) #messagelist tbody tr td.subject::before,
body[class*="cur-mailbox"]:is([class*="inbox-operations"]) #messagelist tbody tr td.subject::before,
body[class*="cur-mailbox"]:is([class*="inbox-dmarc-reports"]) #messagelist tbody tr td.subject::before,
body[class*="cur-mailbox"]:is([class*="inbox-alerts"]) #messagelist tbody tr td.subject::before {
	content: '' !important;
	display: inline-block !important;
	font-size: 9px !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	padding: 1px 6px !important;
	border-radius: 2px !important;
	margin-right: 8px !important;
	vertical-align: middle !important;
}

body.cur-mailbox-inbox-security #messagelist tbody tr td.subject::before,
body[class*="inbox-security"] #messagelist tbody tr td.subject::before {
	content: 'SEC' !important;
	background: rgba(248, 113, 113, 0.15) !important;
	color: #f87171 !important;
}
body.cur-mailbox-inbox-operations #messagelist tbody tr td.subject::before,
body[class*="inbox-operations"] #messagelist tbody tr td.subject::before {
	content: 'OPS' !important;
	background: rgba(15, 188, 255, 0.12) !important;
	color: #0FBCFF !important;
}
body.cur-mailbox-inbox-dmarc-reports #messagelist tbody tr td.subject::before,
body[class*="inbox-dmarc-reports"] #messagelist tbody tr td.subject::before {
	content: 'DMARC' !important;
	background: rgba(0, 208, 132, 0.12) !important;
	color: #4ade80 !important;
}
body.cur-mailbox-inbox-alerts #messagelist tbody tr td.subject::before,
body[class*="inbox-alerts"] #messagelist tbody tr td.subject::before {
	content: 'ALERT' !important;
	background: rgba(251, 191, 36, 0.15) !important;
	color: #fbbf24 !important;
}

/* ==========================================================================
   CULPUR labels v2 — target by rcmli base64 IDs since mailbox class is generic
   ========================================================================== */

/* Color squares before folder names */
#mailboxlist li#rcmliSU5CT1guU2VjdXJpdHk > a::before,
#mailboxlist li#rcmliSU5CT1guT3BlcmF0aW9ucw > a::before,
#mailboxlist li#rcmliSU5CT1guRE1BUkMtUmVwb3J0cw > a::before,
#mailboxlist li#rcmliSU5CT1guQWxlcnRz > a::before {
	content: '' !important;
	display: inline-block !important;
	width: 10px !important;
	height: 10px !important;
	border-radius: 2px !important;
	margin-right: 10px !important;
	margin-left: 2px !important;
	vertical-align: middle !important;
	flex-shrink: 0 !important;
}

#mailboxlist li#rcmliSU5CT1guU2VjdXJpdHk > a::before {
	background: #f87171 !important;
}
#mailboxlist li#rcmliSU5CT1guT3BlcmF0aW9ucw > a::before {
	background: #0FBCFF !important;
}
#mailboxlist li#rcmliSU5CT1guRE1BUkMtUmVwb3J0cw > a::before {
	background: #00D084 !important;
}
#mailboxlist li#rcmliSU5CT1guQWxlcnRz > a::before {
	background: #fbbf24 !important;
}

/* Hide the folder icon for labeled folders (replaced with our colored square) */
#mailboxlist li#rcmliSU5CT1guU2VjdXJpdHk > a > .icon,
#mailboxlist li#rcmliSU5CT1guT3BlcmF0aW9ucw > a > .icon,
#mailboxlist li#rcmliSU5CT1guRE1BUkMtUmVwb3J0cw > a > .icon,
#mailboxlist li#rcmliSU5CT1guQWxlcnRz > a > .icon {
	display: none !important;
}

/* Unread count color matches label color */
#mailboxlist li#rcmliSU5CT1guU2VjdXJpdHk .unreadcount { color: #f87171 !important; }
#mailboxlist li#rcmliSU5CT1guT3BlcmF0aW9ucw .unreadcount { color: #0FBCFF !important; }
#mailboxlist li#rcmliSU5CT1guRE1BUkMtUmVwb3J0cw .unreadcount { color: #00D084 !important; }
#mailboxlist li#rcmliSU5CT1guQWxlcnRz .unreadcount { color: #fbbf24 !important; }

/* "LABELS" section header — inject above the first label folder.
   Roundcube sorts alphabetically, so "Alerts" is first. */
#mailboxlist li#rcmliSU5CT1guQWxlcnRz {
	margin-top: 24px !important;
	position: relative !important;
}
#mailboxlist li#rcmliSU5CT1guQWxlcnRz::before {
	content: 'LABELS' !important;
	display: block !important;
	position: absolute !important;
	top: -18px !important;
	left: 16px !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	color: var(--culpur-text-faint) !important;
	text-transform: uppercase !important;
	pointer-events: none !important;
}

/* ==========================================================================
   Sidebar cleanup — remove leftover padding, fix text-clipping, breathe
   ========================================================================== */

/* Undo old compose overlay padding-top on sidebar */
html body #layout-sidebar {
	padding-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 240px !important;
	min-width: 240px !important;
	max-width: 240px !important;
}

/* Mailbox list container — proper top spacing that leaves room for the MAILBOX header */
html body #mailboxlist {
	padding: 20px 0 0 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

/* Each mailbox item: tight vertical, comfortable horizontal */
html body #mailboxlist li.mailbox {
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	display: block !important;
}

html body #mailboxlist li.mailbox > a {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 14px !important;
	margin: 0 !important;
	font-size: 13px !important;
	text-decoration: none !important;
	line-height: 1.3 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	min-height: 34px !important;
	box-sizing: border-box !important;
}

/* System folder icons (Inbox envelope, Sent paper-plane, Trash can) */
html body #mailboxlist li.mailbox > a > .icon,
html body #mailboxlist li.mailbox.inbox > a > .icon,
html body #mailboxlist li.mailbox.sent > a > .icon,
html body #mailboxlist li.mailbox.trash > a > .icon {
	width: 14px !important;
	height: 14px !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
}

/* MAILBOX header: place it ABOVE inbox (not inside) */
html body #mailboxlist::before {
	content: 'MAILBOX' !important;
	display: block !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	color: var(--culpur-text-faint) !important;
	text-transform: uppercase !important;
	padding: 0 14px 8px !important;
	margin: 0 !important;
}

/* Clear the MAILBOX ::before rule I put on inbox li earlier — redundant and misplaced */
html body #mailboxlist li.mailbox.inbox::before,
html body #mailboxlist li.mailbox[class*="inbox"]:not([class*="inbox."]):first-of-type::before {
	content: none !important;
	display: none !important;
}

/* LABELS header: on the first label folder (alphabetically "Alerts"),
   space above + absolutely-positioned label */
html body #mailboxlist li#rcmliSU5CT1guQWxlcnRz {
	margin-top: 28px !important;
	position: relative !important;
}
html body #mailboxlist li#rcmliSU5CT1guQWxlcnRz::before {
	content: 'LABELS' !important;
	display: block !important;
	position: absolute !important;
	top: -20px !important;
	left: 14px !important;
	right: 14px !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	color: var(--culpur-text-faint) !important;
	text-transform: uppercase !important;
	pointer-events: none !important;
	padding: 0 !important;
}

/* Label-folder squares — tighten margin so text isn't pushed too far */
html body #mailboxlist li#rcmliSU5CT1guU2VjdXJpdHk > a::before,
html body #mailboxlist li#rcmliSU5CT1guT3BlcmF0aW9ucw > a::before,
html body #mailboxlist li#rcmliSU5CT1guRE1BUkMtUmVwb3J0cw > a::before,
html body #mailboxlist li#rcmliSU5CT1guQWxlcnRz > a::before {
	content: '' !important;
	width: 10px !important;
	height: 10px !important;
	border-radius: 2px !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
	display: inline-block !important;
}

/* Account email header — subtle spacing */
html body #layout-sidebar > .header {
	padding: 14px 16px !important;
	font-size: 11px !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--culpur-text-faint) !important;
	font-weight: 500 !important;
	border-bottom: 1px solid var(--culpur-border) !important;
}

/* LABELS section header - use a more reliable technique */
html body #mailboxlist li#rcmliSU5CT1guQWxlcnRz {
	margin-top: 32px !important;
	position: relative !important;
}
html body #mailboxlist li#rcmliSU5CT1guQWxlcnRz::after {
	content: 'LABELS';
	position: absolute;
	top: -20px;
	left: 14px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: #64748b;
	text-transform: uppercase;
	pointer-events: none;
	line-height: 1;
}

/* LABELS section header - reliable technique: put it in padding-top with content */
html body #mailboxlist li#rcmliSU5CT1guQWxlcnRz {
	margin-top: 0 !important;
	padding-top: 28px !important;
	position: relative !important;
	overflow: visible !important;
}

html body #mailboxlist li#rcmliSU5CT1guQWxlcnRz::before {
	/* keep color square ::before - already there */
}

html body #mailboxlist li#rcmliSU5CT1guQWxlcnRz::after {
	content: 'LABELS';
	position: absolute;
	top: 10px;
	left: 14px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: #64748b;
	text-transform: uppercase;
	line-height: 1;
	pointer-events: none;
}

/* Ensure nothing clips the pseudo */
html body #mailboxlist,
html body #layout-sidebar {
	overflow-x: visible !important;
	overflow-y: auto !important;
}

/* Remove duplicate LABELS headers from earlier rules */
html body #mailboxlist li#rcmliSU5CT1guQWxlcnRz::before {
	content: '' !important;
}