/* ============================================================
 * roundcube elastic — full reskin
 * jet black / vibrant cherry blossom (#ff7ad0) / vivid lavender (#c7a4ff)
 * zero default roundcube colors survive this sheet.
 * ============================================================ */

@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/fonts/archivo-var.woff2") format("woff2");
}

:root {
	--bl: #ff5fce;
	--lv: #b88cff;
	--ink: #ffffff;
	--dim: rgba(255, 255, 255, 0.45);
	--line: rgba(255, 95, 206, 0.55);
	--line-soft: rgba(255, 95, 206, 0.38);
	--wash: rgba(255, 95, 206, 0.16);
	--wash-strong: rgba(255, 95, 206, 0.30);
}

/* ---------- base ---------- */

html, body {
	background: #000 !important;
	color: var(--ink) !important;
	font-family: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
}

* { scrollbar-color: var(--line) #000; }

::selection { background: var(--bl) !important; color: #000 !important; }
::placeholder { color: var(--dim) !important; opacity: 1 !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--bl) !important; }
img[src*="watermark"], img[src*="roundcube_logo"] { display: none !important; }

a { color: var(--bl) !important; }
a:hover, a:focus { color: var(--lv) !important; }

/* ---------- layout chrome ---------- */

#layout, #layout > div,
#layout-sidebar, #layout-list, #layout-content,
.layout-sidebar, .layout-list, .layout-content,
.sidebar, .content,
.header, .footer, .listbox, .listing, .listing-header,
.ui-dialog, .ui-dialog-titlebar, .ui-dialog-content, .ui-dialog-buttonpane,
.ui-menu, .ui-widget, .ui-widget-content, .ui-widget-header,
.popover, .menu, .toolbarmenu, .popupmenu, .dropdown-menu,
.navbar, .tabsbar, .propform, fieldset, .contact-header,
#messagestack, .searchbar, .header .searchbox,
.formcontent, .formbuttons, .content-frame-container {
	background: #000 !important;
	color: var(--ink) !important;
	border-color: var(--line-soft) !important;
}

#layout .header, .header {
	background: #000 !important;
	border-bottom: 2px solid var(--line) !important;
}

#layout-sidebar, .layout-sidebar { border-right: 2px solid var(--line-soft) !important; }
#layout-list, .layout-list { border-right: 2px solid var(--line-soft) !important; }

.header a.button, .header button, .header .username,
.footer, .footer a {
	color: var(--dim) !important;
}

/* splitters */
#layout-splitter-v, #layout-splitter-h, .splitter {
	background: #000 !important;
	border-color: var(--line-soft) !important;
}

/* ---------- buttons — every variant ---------- */

.btn, button, input[type="button"], input[type="submit"],
.btn-primary, .btn-secondary, .btn-danger {
	border-radius: 0 !important;
	box-shadow: none !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em;
}

.btn-primary, button.primary, input.btn-primary,
button[type="submit"]:not(.btn-secondary) {
	background: #000 !important;
	border: 2px solid var(--bl) !important;
	color: var(--bl) !important;
	text-transform: uppercase;
}

.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
button.primary:hover {
	background: var(--bl) !important;
	border-color: var(--bl) !important;
	color: #000 !important;
}

.btn-secondary, .btn, button {
	background: #000 !important;
	border: 2px solid var(--line-soft) !important;
	color: var(--dim) !important;
}

.btn-secondary:hover, .btn:hover, button:hover,
.btn-secondary:focus, .btn:focus, button:focus {
	border-color: var(--bl) !important;
	color: var(--bl) !important;
	background: var(--wash) !important;
}

.btn-danger {
	background: #000 !important;
	border: 1px solid var(--bl) !important;
	color: var(--bl) !important;
}

.header .buttons .btn {
	background: transparent !important;
	border: 0 !important;
	color: var(--dim) !important;
}
.header .buttons .btn:hover { color: var(--bl) !important; }

/* ---------- toolbars & menus ---------- */

.toolbar a.button, .toolbar .btn {
	background: transparent !important;
	border: 0 !important;
	color: var(--dim) !important;
}

.toolbar a.button:hover, .toolbar a.button:focus,
.toolbar a.button.enabled:hover {
	color: var(--bl) !important;
	background: var(--wash) !important;
}

.toolbar a.button.selected, .toolbar a.button.pressed {
	color: var(--bl) !important;
	background: var(--wash-strong) !important;
}

.menu li a, .toolbarmenu li a, .popupmenu li a, .ui-menu li a,
.dropdown-menu li a {
	background: transparent !important;
	color: var(--dim) !important;
	border-color: var(--line-soft) !important;
}

.menu li a:hover, .toolbarmenu li a:hover, .popupmenu li a:hover,
.ui-menu li a:hover, .dropdown-menu li a:hover,
.menu li a:focus, .toolbarmenu li a:focus {
	background: var(--wash) !important;
	color: var(--ink) !important;
}

.menu li a.selected, .menu li a.selected:hover,
.menu li.selected > a, .toolbarmenu li a.selected,
.ui-state-highlight, .ui-menu .ui-state-active {
	color: var(--bl) !important;
	background: var(--wash-strong) !important;
	border-left: 2px solid var(--bl);
}

/* ---------- lists: folders, messages, contacts ---------- */

.listing li a, .listing tbody td, .listing tr,
.folderlist li a, #folder-list li a {
	background: transparent !important;
	color: var(--dim) !important;
	border-color: var(--line-soft) !important;
}

.listing li a:hover, .listing tbody tr:hover td,
.folderlist li a:hover {
	background: var(--wash) !important;
	color: var(--ink) !important;
}

.listing li.selected, .listing li.selected > a,
.listing.focus .selected, .listing.focus .selected > a,
.listing tbody tr.selected td, .folderlist li.selected > a {
	background: var(--wash-strong) !important;
	color: var(--ink) !important;
	box-shadow: inset 2px 0 0 var(--bl);
}

.listing li.selected .foldername { color: var(--bl) !important; }

#messagelist thead th {
	color: var(--dim) !important;
	border-color: var(--line-soft) !important;
	background: #000 !important;
}

#messagelist tr td { border-color: var(--line-soft) !important; }
#messagelist tr.selected td { border-color: transparent !important; }
#messagelist tr.unread { font-weight: 700 !important; }
#messagelist tr.unread .subject a { color: var(--ink) !important; }
#messagelist tr:not(.unread) .subject a { color: var(--dim) !important; }
#messagelist tr.flagged .subject a, #messagelist tr.flagged .from a { color: var(--bl) !important; }
#messagelist tr.deleted .subject a { color: var(--dim) !important; text-decoration: line-through; }

.badge, .count, .unreadcount {
	background: #000 !important;
	border: 2px solid var(--line) !important;
	color: var(--bl) !important;
	border-radius: 0 !important;
	font-weight: 700 !important;
}

/* ---------- forms ---------- */

input[type="text"], input[type="password"], input[type="email"],
input[type="search"], input[type="url"], input[type="tel"],
input[type="number"], input[type="date"], textarea, select,
.form-control, .form-control:focus {
	background: #000 !important;
	color: var(--ink) !important;
	border: 2px solid var(--line-soft) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

input:focus, textarea:focus, select:focus, .form-control:focus {
	border-color: var(--bl) !important;
	outline: none !important;
}

input:focus-visible, textarea:focus-visible { outline: 1px solid var(--lv) !important; }

label, .form-group label { color: var(--dim) !important; }
.propform .row input, .propform textarea { background: #000 !important; }

/* search bar */
.searchbar input, .searchbar .input-group input {
	background: #000 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--line-soft) !important;
	color: var(--ink) !important;
}
.searchbar a.button { color: var(--dim) !important; }
.searchbar a.button.active { color: var(--bl) !important; }

/* ---------- dialogs / overlays / tooltips ---------- */

.ui-widget-overlay { background: #000 !important; opacity: 0.85 !important; }
.ui-dialog .ui-dialog-titlebar {
	background: #000 !important;
	border-bottom: 1px solid var(--line) !important;
	color: var(--bl) !important;
}
.ui-dialog .ui-dialog-title { color: var(--bl) !important; }
.ui-dialog .ui-dialog-content { color: var(--ink) !important; }
.ui-tooltip, .tooltip { background: #000 !important; border: 1px solid var(--line) !important; color: var(--ink) !important; }
.ui-state-error { background: var(--wash) !important; color: var(--bl) !important; border-color: var(--bl) !important; }

/* ---------- message view / compose ---------- */

.message-part, .message-htmlpart, #messagebody, #messagecontent {
	background: #000 !important;
	color: var(--ink) !important;
}

blockquote {
	border-left: 2px solid var(--lv) !important;
	background: var(--wash) !important;
	color: var(--dim) !important;
}

#composebody, .compose-attachments, .fileupload {
	background: #000 !important;
	color: var(--ink) !important;
	border-color: var(--line-soft) !important;
}

.messagelistinfo, .listsearchbox { color: var(--dim) !important; }

/* ---------- login — mirror of the signup page ---------- */

.task-login #layout-content .content { background: #000 !important; }

/* the login footer IS the wordmark — pink, spaced, under the logo */
#login-footer {
	background: transparent !important;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.32em !important;
	text-indent: 0.32em !important;
	text-transform: uppercase !important;
	color: var(--bl) !important;
	margin-top: 1.1rem !important;
}

/* the login form is a table under the hood — flatten it completely */
#login-form, #login-form table, #login-form tbody,
#login-form tr, #login-form td, #login-form th,
#login-form .row, #login-form .form-group, #login-form .form-control {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

#login-form {
	max-width: 20rem;
	padding: 0 !important;
}

/* logo: big circular artwork mark — login only */
.task-login #logo, .task-login #logo img, .task-login #logo span, .task-login #logo i,
#login-form img, .task-login img[src*="logo"], .task-login img[src*="favicon"] {
	background: none !important;
	width: 112px !important;
	height: 112px !important;
	max-width: 112px !important;
	max-height: 112px !important;
	object-fit: cover !important;
	border-radius: 50% !important;
}

/* every authenticated page (mail, contacts, settings...): small circle mark */
body:not(.task-login) #logo, body:not(.task-login) #logo img,
body:not(.task-login) img[src*="logo"], body:not(.task-login) img[src*="favicon"] {
	width: 34px !important;
	height: 34px !important;
	max-width: 34px !important;
	max-height: 34px !important;
	object-fit: cover !important;
	border-radius: 50% !important;
}

/* ---------- task menu (bottom-left: light mode / about / logout) ---------- */

#layout-menu, .popover-header, #taskmenu,
#taskmenu a, #taskmenu span, .special-buttons {
	background: #000 !important;
	color: var(--dim) !important;
	border-color: var(--line) !important;
}

#taskmenu a:hover, #taskmenu a.selected, #taskmenu a:focus {
	color: var(--bl) !important;
	background: var(--wash) !important;
}

/* ---------- every authenticated page: nuke all default backgrounds ---------- */

body:not(.task-login) #layout, body:not(.task-login) #layout > *,
body:not(.task-login) .header, body:not(.task-login) .footer,
body:not(.task-login) .scroller, body:not(.task-login) .content,
body:not(.task-login) .listbox, body:not(.task-login) .toolbox,
body:not(.task-login) .searchbar, body:not(.task-login) .toolbar,
body:not(.task-login) .toolbarmenu, body:not(.task-login) .menu,
body:not(.task-login) .popover, body:not(.task-login) .popup,
body:not(.task-login) .nav, body:not(.task-login) .tabsbar,
body:not(.task-login) .formcontent, body:not(.task-login) .formbuttons,
body:not(.task-login) table, body:not(.task-login) thead,
body:not(.task-login) tbody, body:not(.task-login) tr,
body:not(.task-login) td, body:not(.task-login) th,
body:not(.task-login) .ui-widget, body:not(.task-login) .ui-widget-content,
body:not(.task-login) .ui-widget-header, body:not(.task-login) .listwidget,
body:not(.task-login) .droptarget, body:not(.task-login) .message-part,
body:not(.task-login) .mailboxlist, body:not(.task-login) .messagelist,
body:not(.task-login) .messagelistheader, body:not(.task-login) .listsearchbox,
body:not(.task-login) .bulkactions, body:not(.task-login) .pagenav,
body:not(.task-login) .header .searchbox, body:not(.task-login) .searchfilterbar,
body:not(.task-login) .iframe-wrapper, body:not(.task-login) iframe,
body:not(.task-login) .content-frame-container,
body:not(.task-login) .propsheet, body:not(.task-login) .row,
body:not(.task-login) .form-control, body:not(.task-login) .col-form-label {
	background: #000 !important;
	color: var(--ink) !important;
	border-color: var(--line) !important;
}

/* every structural line on every authenticated page: 2px, pink */
body:not(.task-login) #messagelist th,
body:not(.task-login) #messagelist td { border-bottom: 2px solid var(--line) !important; }
body:not(.task-login) .header, body:not(.task-login) .footer,
body:not(.task-login) .searchbar { border-bottom: 2px solid var(--line) !important; }
body:not(.task-login) #layout-list, body:not(.task-login) #layout-sidebar,
body:not(.task-login) #layout-menu { border-right: 2px solid var(--line) !important; }
body:not(.task-login) .formbuttons, body:not(.task-login) .formcontent { border-color: var(--line) !important; }

/* the wordmark — wherever productname lands, it's pink */
.task-login .productname, .task-login h1, .task-login h2,
#login-form h2, #logotitle, .task-login .header .header-title,
#layout-content > .header h2, .task-login #layout-content h2 {
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.32em !important;
	text-indent: 0.32em !important;
	text-transform: uppercase !important;
	color: var(--bl) !important;
	background: transparent !important;
}

/* h1.voice stays invisible (screen-reader text) */
.task-login h1.voice {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	font-size: 0 !important;
}

.task-login .form-group, #login-form .form-group { margin-bottom: 1.5rem !important; }
.task-login label, #login-form label, #login-form th { display: none !important; }

/* input groups: underline spans the WHOLE group (icon + field),
 * icon melts into the page, no boxes */
.task-login .input-group {
	border: 0 !important;
	border-bottom: 2px solid rgba(255, 95, 206, 0.8) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.task-login .input-group:focus-within { border-bottom-color: var(--bl) !important; }

.task-login .input-group-prepend,
.task-login .input-group-append,
.task-login .input-group-text {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--bl) !important;
	padding: 0 0.75rem 0 0 !important;
	box-shadow: none !important;
}

.task-login .input-group-text i,
.task-login .input-group-text svg,
.task-login .input-group-text:before { color: var(--bl) !important; }

/* the fields themselves: naked, group carries the underline */
#rcmloginuser, #rcmloginpwd, #rcmloginhost,
.task-login input[type="text"], .task-login input[type="password"],
.task-login .input-group input, .task-login .input-group .form-control {
	border: 0 !important;
	border-bottom: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding: 0.75rem 0 !important;
	box-shadow: none !important;
	color: var(--ink) !important;
}

#login-form button[type="submit"], .task-login .btn-primary {
	width: 100% !important;
	margin-top: 2rem !important;
	padding: 0.65rem !important;
	border-width: 2px !important;
	font-size: 1rem !important;
	letter-spacing: 0.1em !important;
}

#login-form .formlinks a { color: var(--lv) !important; }

/* ---------- misc ---------- */

.pagenav, .pagenav .pagenav-text { color: var(--dim) !important; }
.pagenav a.button:hover { color: var(--bl) !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #000 !important; }
::-webkit-scrollbar-thumb { background: var(--line) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--bl) !important; }

:focus-visible { outline: 1px solid var(--lv) !important; outline-offset: 0 !important; }

/* status / error banners */
#messagestack div, .alert, .warning, .confirmation {
	background: #000 !important;
	border: 1px solid var(--bl) !important;
	color: var(--bl) !important;
	border-radius: 0 !important;
}