/* Managed by converge-mail.sh. Overrides only — elastic supplies the rest.
 *
 * THIS IMPORT IS LOAD-BEARING. Roundcube's "extends" only falls back for files a
 * skin does not have. Because this file exists, it REPLACES elastic's stylesheet
 * rather than adding to it — and the page renders with no layout whatsoever.
 *
 * Note the filename: elastic ships styles/styles.min.css, not styles.css. The
 * unminified name 404s.
 */
@import url("../../elastic/styles/styles.min.css");

:root {
	--color-bg:            #010f26;
	--color-surface:       #0a1830;
	--color-layout-bg:     #010f26;
	--color-list-bg:       #0a1830;
	--color-dialog-bg:     #0f1f3d;
	--color-text:          #e9e9ed;
	--color-link:          #9184d9;
	--color-black:         #010f26;
	--color-font:          #e9e9ed;
	--color-main:          #9184d9;
	--color-main-selected: #9184d9;
	--color-border:        #1c2c4a;
	--color-input-border:  #1c2c4a;
}

/* Elastic hardcodes a few surfaces, so the variables above do not reach
   everything. These are the ones that stay light without help. */
body,
#layout,
#layout > div,
.content,
.formcontent,
#messagelist,
.menu,
.popupmenu,
.ui.dialog {
	background-color: #010f26;
	color: #e9e9ed;
}

#layout > .header,
#layout > div > .header,
.toolbar,
#taskmenu {
	background-color: #0a1830;
	color: #e9e9ed;
	border-color: #1c2c4a;
}

a, a:visited { color: #9184d9; }

input, select, textarea {
	background-color: #061529;
	color: #e9e9ed;
	border-color: #1c2c4a;
}

#login-form,
.box-inner {
	background-color: #0a1830;
	border-color: #1c2c4a;
}

/* The login logo is a light-on-dark emblem; do not let elastic invert it. */
#logo, .logo img { filter: none; }

/* elastic's real rule is `.task-login #logo{...max-height:100px}`, not a
 * bare `#logo` — confirmed by grepping styles.min.css directly rather than
 * guessing from the visible property. That compound selector outspecifies
 * a plain `#logo` (class + ID beats ID alone) and wins regardless of source
 * order, which is why an earlier plain `#logo{max-height:400px}` here had
 * no visible effect despite being served correctly — a specificity miss,
 * not a caching problem. Matching elastic's exact selector fixes it without
 * reaching for !important. #logo itself only ever appears on the login
 * screen (checked every template in the skin), so this is still safe to
 * leave unscoped-from other pages. */
.task-login #logo { max-height: 400px; }

/* The right-hand preview pane. elastic sets #layout-content{background:#fff},
   and the pane itself is an IFRAME — a separate document this stylesheet cannot
   reach. Painting the iframe element and its wrapper covers the gap while the
   inner document is transparent. */
#layout-content,
#layout-content > .content,
.iframe-wrapper,
.iframe-wrapper iframe,
#messagecontframe {
	background-color: #010f26 !important;
}

/* Elastic's placeholder graphic in that pane is its own logo. Ours replaces it
   through skin_logo below; this just keeps the surround from flashing white. */
#layout-content.only,
#layout-content .watermark {
	background-color: #010f26 !important;
}