/*
 * SlenderMail brand skin for Roundcube's Elastic skin.
 * Loaded after Elastic's own styles.css (see templates/includes/layout.html);
 * re-tints Elastic's light/dark palettes to match apps/web's "infrastructure
 * terminal" design system (see apps/web/src/index.css) in BOTH modes.
 *
 * Theme switching is Elastic's own native mechanism (ui.js color_mode_init,
 * html.dark-mode class + colorMode cookie, toggled by #taskmenu a.theme) —
 * we don't reimplement it, just supply light + dark values for the same
 * semantic variables so that mechanism actually changes how things look.
 *
 * Selectors below are taken from the actual Elastic skin source
 * (roundcube/roundcubemail:latest-apache, styles/*.less), not guessed —
 * see docs/webmail-roundcube.md for how this was verified.
 */

:root {
	/* Light mode (default) */
	--bg: #ece9df;
	--bg-1: #f5f3ec;
	--bg-2: #e2dfd3;
	--bg-3: #d5d2c4;
	--text: #14170f;
	--text-dim: #4b5047;
	--muted: #6b7066;
	--faint: #9a9d92;
	--signal: #4f8c0c;
	--signal-deep: #3d6d09;
	--signal-glow: rgba(79, 140, 12, 0.14);
	--signal-hover: #5da30f;
	--signal-on-solid: #ece9df;
	--warn: #c97a1c;
	--warn-glow: rgba(201, 122, 28, 0.12);
	--bad: #c93350;
	--bad-glow: rgba(201, 51, 80, 0.1);
	--line: rgba(10, 12, 11, 0.1);
	--line-strong: rgba(10, 12, 11, 0.18);
	--panel: rgba(10, 12, 11, 0.03);

	/* Brighter than --signal specifically for icons on the taskmenu rail —
	 * --signal's dark olive-green reads fine as link/button text on --bg-1,
	 * but nearly disappears against the pale --signal-glow selection wash
	 * used behind selected/hovered taskmenu icons in light mode. */
	--signal-rail: #6fae1f;

	--radius: 14px;
	--radius-sm: 9px;
	--radius-pill: 999px;
}

html.dark-mode {
	--signal-rail: var(--signal);
	--bg: #0a0c0b;
	--bg-1: #0e1110;
	--bg-2: #141816;
	--bg-3: #1b201d;
	--text: #ece9df;
	--text-dim: #b7b9b1;
	--muted: #7e837a;
	--faint: #565b54;
	--signal: #c2f74a;
	--signal-deep: #9bd418;
	--signal-glow: rgba(194, 247, 74, 0.16);
	--signal-hover: #d2ff6b;
	--signal-on-solid: #0a0c0b;
	--warn: #f3a64b;
	--warn-glow: rgba(243, 166, 75, 0.14);
	--bad: #ff6b81;
	--bad-glow: rgba(255, 107, 129, 0.13);
	--line: rgba(236, 233, 223, 0.09);
	--line-strong: rgba(236, 233, 223, 0.16);
	--panel: rgba(236, 233, 223, 0.03);
}

html,
body,
button,
input,
select,
textarea,
.popover {
	font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
}

body {
	background: var(--bg) !important;
	color: var(--text) !important;
}

a {
	color: var(--signal);
}
a:hover {
	color: var(--signal-hover);
}

::-webkit-scrollbar-track {
	background-color: var(--bg) !important;
}
::-webkit-scrollbar-thumb {
	background-color: var(--line-strong) !important;
}

/* ---- Headings & labels ---- */

h1, h2, h3, h4, h5, h6,
legend,
.header-title,
.tox-dialog__title,
.popover-header,
.ui-dialog-titlebar,
dt {
	font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
	color: var(--text) !important;
	font-weight: 600 !important;
}

label,
.form-text,
.hint,
.propform .hint,
th,
.quota-widget,
.skinname {
	color: var(--text) !important;
}

.form-text,
.hint,
.pagenav-text,
.skinlicense,
.skinauthor {
	color: var(--muted) !important;
}

/* ---- Global corner rounding ---- */

.btn,
.button.icon,
a.button.icon,
button.btn,
.dropbutton,
.form-control,
.custom-select,
input.form-control,
select.form-control,
textarea.form-control,
input[type='text'],
input[type='password'],
input[type='search'],
input[type='email'],
input[type='tel'],
input[type='number'],
.input-group-text,
.custom-file-label,
.dropdown-menu,
.popover,
.modal-content,
.ui-dialog,
.tox-tinymce,
.tox-dialog,
.tox-textfield,
.tox-textarea,
.tox-listboxfield .tox-listbox--select,
.tox-color-input > input,
.CodeMirror,
.multi-input > .content,
.file-upload,
.image-selector.droptarget,
.googie_edit_layer,
.html-editor > iframe,
.quota-widget .bar,
#rcmdraglayer {
	border-radius: var(--radius-sm) !important;
}

.card,
.table-widget,
.image-selector .attachmentslist span.img {
	border-radius: var(--radius) !important;
}

.recipient-input li.recipient,
.tagedit-list li.tagedit-listelement-old,
.folderlist .unreadcount,
.badge,
.badge-pill {
	border-radius: var(--radius-pill) !important;
}

/* ---- Layout panels: floating "windows" with gaps + rounded corners ----
 * #layout is a plain flexbox (not absolutely positioned) with 4 children on
 * desktop widths: #layout-menu (fixed-width taskmenu rail), #layout-sidebar,
 * #layout-list, #layout-content — confirmed from the compiled Elastic CSS,
 * not guessed, so a `gap` + `padding` here is safe and doesn't fight any
 * JS-computed inline positioning. */

#layout {
	gap: 10px !important;
	padding: 10px !important;
	box-sizing: border-box !important;
}

#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content {
	border-radius: var(--radius) !important;
	overflow: hidden !important;
	border: 1px solid var(--line) !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

#layout > div > .header,
#layout > div > .footer {
	background-color: var(--bg-1) !important;
	color: var(--text) !important;
	border-color: var(--line) !important;
}

#layout-sidebar,
#layout-list,
#layout-content {
	background-color: var(--bg-1) !important;
}

#layout-list .scroller,
#layout-sidebar .scroller {
	background-color: var(--bg-1);
}

/* ---- Task menu (left icon rail) ---- */

#layout-menu {
	background-color: var(--bg-2) !important;
}
/* Elastic's own CSS pins #taskmenu .special-buttons (theme toggle, logout)
 * with position:absolute;bottom:0;left:0, expecting this rail to be its
 * positioned ancestor. Without position:relative here, those buttons fall
 * through to the nearest positioned ancestor up the tree (none — #layout
 * and body are static too), so they anchor to the actual viewport corner
 * instead of this floating panel.
 * Scoped to :not(.popover): on mobile, Elastic opens the hamburger nav by
 * adding Bootstrap's `.popover` class to this same #layout-menu element,
 * whose bootstrap.min.css rule (`position: absolute`) is what pulls it out
 * of the #layout flex row so it can fill the screen. #layout-menu (ID) beats
 * .popover (class) on specificity, so an unconditional position:relative
 * here would silently win and leave the popover fighting its siblings for
 * width inside the flex row — full-width CSS on it would then just mean
 * "100% of its shrunk flex share," not "100% of the screen". */
#layout-menu:not(.popover) {
	position: relative;
}
#layout-menu .popover-header {
	background-color: transparent !important;
	border-bottom-color: var(--line) !important;
}
#taskmenu {
	background-color: transparent !important;
}
#taskmenu .special-buttons {
	background-color: transparent !important;
}
#taskmenu .special-buttons a:not(:focus) {
	background-color: transparent !important;
}
#taskmenu a.button {
	color: var(--text-dim) !important;
	border-radius: var(--radius-sm);
}
#taskmenu a.button:hover,
#taskmenu a.button.selected {
	color: var(--signal-rail) !important;
	background: var(--signal-glow) !important;
}
#taskmenu a.button.logout {
	color: var(--bad) !important;
}
/* Elastic's own action-buttons rule only paints a highlight on the compose
 * icon while :hover, so a plain color-only override wouldn't reproduce the
 * "lit up" look the theme toggle already gives it in dark mode — add the
 * same background+color treatment here, for both themes, keyed off the
 * "selected" class the template already adds while composing. */
#taskmenu .action-buttons a {
	color: var(--text-dim) !important;
	border-radius: var(--radius-sm);
}
#taskmenu .action-buttons a:hover,
#taskmenu .action-buttons a.selected {
	color: var(--signal-rail) !important;
	background: var(--signal-glow) !important;
}

/* Elastic opens the mobile taskmenu (hamburger) as a generic `.popover`
 * panel hard-coded to 272px wide (styles.min.css), which reads as roughly a
 * quarter of a phone screen. Widen only the taskmenu's popover to fill the
 * viewport; other popovers (dropdowns, message "more" menus) keep Elastic's
 * narrow-list width by design, so this is scoped to #layout-menu, not the
 * shared `.popover:not(.select-menu)` selector Elastic uses. */
html.layout-phone #layout-menu.popover,
html.layout-small #layout-menu.popover {
	width: 100% !important;
}

/* ---- Toolbar, searchbar, pagenav ---- */

.menu.toolbar a,
a.toolbar-button,
.searchbar a {
	color: var(--text-dim) !important;
	border-radius: var(--radius-sm);
}
.menu.toolbar a:not(.disabled):hover,
.menu.toolbar a:not(.disabled):focus,
.header a.button.icon:not(.disabled):hover,
.header a.button.icon:not(.disabled):focus,
.menu .dropbutton:not(.disabled):hover {
	background-color: var(--signal-glow) !important;
	color: var(--signal) !important;
}
.menu.toolbar a.selected,
.searchbar a.selected {
	color: var(--signal) !important;
}

.searchbar {
	background-color: var(--bg-2) !important;
	border-color: var(--line) !important;
	border-radius: var(--radius-sm) !important;
}
.searchbar input {
	color: var(--text) !important;
}
.searchbar input::placeholder {
	color: var(--faint) !important;
}

.menu.pagenav a {
	color: var(--text-dim) !important;
}
.menu.pagenav.pagenav-list {
	background-color: var(--bg-2) !important;
	border-color: var(--line) !important;
}
.menu.pagenav.pagenav-list + .navlist {
	background-color: var(--bg-1) !important;
}

/* ---- Folder / message lists ---- */

#layout-sidebar .listing a.active,
#folder-manager .listing tr.selected,
.listing tr.selected td,
.listing tr.selected,
.listing li.selected,
.listing li.selected > a {
	background-color: var(--signal-glow) !important;
	color: var(--text) !important;
}
.listing tr:hover td,
.listing li:hover {
	background-color: var(--bg-2) !important;
}
.listing tr.unread td {
	color: var(--text) !important;
	font-weight: 600;
}
.listing tr.unread .subject::before,
.unreadcount,
.listing .count {
	color: var(--signal) !important;
}
.folderlist .unreadcount {
	background: var(--signal) !important;
	color: var(--signal-on-solid) !important;
}
.listing tr.flagged .flagicon {
	color: var(--bad) !important;
}
.listing-hover-menu {
	background-color: var(--bg-2) !important;
	border-color: var(--line-strong) !important;
	border-radius: var(--radius-sm) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}
.listing-hover-menu a.button {
	color: var(--text-dim) !important;
}
.listing-hover-menu a.button:hover {
	color: var(--signal) !important;
	background: var(--signal-glow) !important;
	border-radius: var(--radius-sm);
}
.listing,
.listing tr,
.listing td,
#folder-manager .listing tr {
	border-color: var(--line) !important;
}

/* ---- Buttons ---- */

.btn-primary,
button.btn-primary,
#rcmloginsubmit {
	background-color: var(--signal) !important;
	border-color: var(--signal-deep) !important;
	color: var(--signal-on-solid) !important;
}
.btn-primary:hover,
#rcmloginsubmit:hover {
	background-color: var(--signal-hover) !important;
}

.btn-secondary {
	background-color: var(--bg-2) !important;
	border-color: var(--line-strong) !important;
	color: var(--text) !important;
}
.btn-secondary:hover {
	background-color: var(--bg-3) !important;
	border-color: var(--text-dim) !important;
}

.btn-danger {
	background-color: var(--bad-glow) !important;
	border-color: var(--bad) !important;
	color: var(--bad) !important;
}
.btn-danger:hover {
	background-color: var(--bad-glow) !important;
	opacity: 0.85;
}

.btn:focus,
.form-control:focus {
	box-shadow: 0 0 0 3px var(--signal-glow) !important;
}

/* ---- Inputs ---- */

input.form-control,
select.form-control,
textarea.form-control,
input[type='text'],
input[type='password'],
input[type='search'],
input[type='email'],
.custom-file-label,
.input-group-text,
.recipient-input,
.tagedit-list {
	background-color: var(--bg-2) !important;
	border-color: var(--line-strong) !important;
	color: var(--text) !important;
}
input.form-control:focus,
input:focus {
	border-color: var(--signal-deep) !important;
	box-shadow: 0 0 0 3px var(--signal-glow) !important;
}
::placeholder {
	color: var(--faint) !important;
}

/* The "To"/Cc/Bcc recipient widget is a <div class="recipient-input"> whose
 * own JS toggles a ".focus" class on the container (Elastic hardcodes this
 * to a blue ring) around a plain <input> nested inside it that also matches
 * our generic `input:focus` rule above — so it showed two rings (outer blue,
 * inner green). Subject is a single plain input.form-control, hence only one
 * ring there. Retint the container's ring and drop the inner input's own,
 * so recipient fields end up with exactly one ring, like Subject. */
.recipient-input.focus {
	border-color: var(--signal-deep) !important;
	box-shadow: 0 0 0 3px var(--signal-glow) !important;
}
.recipient-input input:focus {
	box-shadow: none !important;
}

.recipient-input li.recipient,
.tagedit-list li.tagedit-listelement-old {
	background-color: var(--bg-3) !important;
	border-color: var(--line-strong) !important;
	color: var(--text) !important;
}

/* Checkboxes / radios / switches */
.custom-control-input:checked ~ .custom-control-label::before {
	border-color: var(--signal-deep) !important;
	background-color: var(--signal) !important;
}
.custom-control-label::before {
	background-color: var(--bg-2) !important;
	border-color: var(--line-strong) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 3px var(--signal-glow) !important;
}

/* ---- Popovers / menus / dialogs ---- */

.popover,
.popover-body,
.ui-menu,
.ui-dialog,
.ui-dialog-content,
.dropdown-menu,
.popupmenu,
.modal-content {
	background-color: var(--bg-1) !important;
	color: var(--text) !important;
	border-color: var(--line-strong) !important;
}
.popover .popover-header,
.ui-dialog-titlebar,
.tox-dialog__header {
	background-color: var(--bg-2) !important;
	color: var(--text) !important;
	border-color: var(--line) !important;
}
.menu .popover li a:not(.disabled):hover,
.dropdown-item:hover,
.dropdown-item:focus {
	background-color: var(--signal-glow) !important;
	color: var(--signal) !important;
}
.menu .popover li.separator {
	background-color: var(--bg-2) !important;
	color: var(--muted) !important;
}

/* ---- Alerts / messages ---- */

.ui.alert {
	background-color: var(--bg-2) !important;
	color: var(--text) !important;
	border-color: var(--line-strong) !important;
}
.ui.alert.alert-success,
.ui.alert.boxconfirmation {
	background-color: var(--signal-glow) !important;
	color: var(--text) !important;
}
.ui.alert.alert-warning,
.ui.alert.boxwarning {
	background-color: var(--warn-glow) !important;
	color: var(--text) !important;
}
.ui.alert.alert-danger,
.ui.alert.boxerror {
	background-color: var(--bad-glow) !important;
	color: var(--text) !important;
}
#messagestack div {
	border-radius: var(--radius-sm) !important;
}

/* Quota bar */
.quota-widget {
	color: var(--text-dim) !important;
}
.quota-widget .bar {
	background-color: var(--bg-2) !important;
	border-color: var(--line-strong) !important;
}
.quota-widget .value {
	background-color: var(--signal) !important;
}
.quota-widget .value.warning {
	background-color: var(--bad) !important;
}

/* ---- Compose editor (TinyMCE) ---- */

div.tox.tox-tinymce {
	border-color: var(--line-strong) !important;
}
div.tox .tox-toolbar-overlord > div,
div.tox .tox-toolbar,
div.tox .tox-toolbar__primary {
	background-color: var(--bg-2) !important;
	background-image: none !important;
}
div.tox .tox-tbtn {
	color: var(--text-dim) !important;
	border-radius: var(--radius-sm);
}
div.tox .tox-tbtn svg {
	fill: var(--text-dim) !important;
}
div.tox .tox-tbtn:hover {
	background-color: var(--signal-glow) !important;
}
div.tox .tox-tbtn:hover svg {
	fill: var(--signal) !important;
}
div.tox .tox-dialog {
	background-color: var(--bg-1) !important;
	color: var(--text) !important;
	border-color: var(--line-strong) !important;
}
div.tox .tox-dialog__footer {
	background-color: var(--bg-1) !important;
	border-color: var(--line) !important;
}
div.tox .tox-label,
div.tox .tox-dialog__title {
	color: var(--text) !important;
}
div.tox .tox-button {
	border-radius: var(--radius-sm) !important;
}

/* ---- Login screen ---- */

body.task-login {
	background: radial-gradient(900px 600px at 78% -8%, var(--signal-glow), transparent 60%),
		linear-gradient(180deg, var(--bg), var(--bg-1)) !important;
}
.slendermail-login-back {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 9999;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--line-strong);
	color: var(--muted);
	background: var(--bg-1);
	transition: color 0.2s, border-color 0.2s;
}
.slendermail-login-back:hover {
	color: var(--signal-rail);
	border-color: var(--signal-rail);
}
body.task-login #logo {
	max-height: 64px;
}
#login-form,
#login-form .propform {
	color: var(--text);
}
#login-footer,
#login-footer a.support-link {
	color: var(--muted) !important;
}

/* ---- New self-made UI switcher ----
 * Lives inside #taskmenu .special-buttons, right above the theme toggle
 * (see templates/includes/menu.html), so it's a block item in the rail's
 * vertical icon stack rather than a page-level floating pill. */

#taskmenu .special-buttons a.slendermail-ui-switch {
	position: static;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 4px !important;
	margin: 0;
	border-bottom: 0 !important;
	border-radius: var(--radius-sm);
	background-color: transparent;
	color: var(--text-dim) !important;
	font-size: 11px;
	line-height: 1.2 !important;
	font-family: 'Hanken Grotesk', system-ui, sans-serif;
	text-align: center;
	white-space: normal;
	text-decoration: none !important;
	transition: color 0.15s, background-color 0.15s;
}
#taskmenu .special-buttons a.slendermail-ui-switch:hover {
	color: var(--signal-rail) !important;
}
/* A flex container (a.slendermail-ui-switch above) wraps its raw text and
 * the badge span into two separate anonymous flex items, so vertical-align
 * on the badge does nothing (flex items ignore it) and the two ended up
 * stacked instead of sharing a line. Wrapping both in this single
 * inline-flex item restores real baseline/center alignment between them. */
.slendermail-ui-switch .switch-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2px;
}
.slendermail-ui-switch .beta-badge {
	display: inline-block;
	padding: 1px 5px;
	border-radius: var(--radius-pill);
	background: var(--signal-glow);
	color: var(--signal-rail);
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}