/* BSG Mail — camada de acabamento sobre o Elastic.
   Só ajusta superfície, borda, raio e acento; nada de reescrever layout,
   para que atualização do Roundcube não quebre a skin. */
@import url("../../elastic/styles/styles.min.css");

:root {
	--bsg-bg: #0e1116;
	--bsg-surface: #151a21;
	--bsg-surface-2: #1b212a;
	--bsg-border: #232b36;
	--bsg-text: #e7eaf0;
	--bsg-muted: #949eae;
	--bsg-accent: #5b8def;
	--bsg-radius: 10px;
}

/* Só entra quando o Elastic está em modo escuro (segue o SO ou o toggle). */
html.dark-mode body,
html.dark-mode #layout {
	background: var(--bsg-bg);
	color: var(--bsg-text);
}

html.dark-mode #layout > div,
html.dark-mode .sidebar,
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content {
	background: var(--bsg-surface);
	border-color: var(--bsg-border);
}

html.dark-mode .listing li,
html.dark-mode table.messagelist tbody tr {
	border-bottom: 1px solid var(--bsg-border);
}

html.dark-mode .listing li.selected,
html.dark-mode table.messagelist tbody tr.selected {
	background: var(--bsg-surface-2);
	box-shadow: inset 3px 0 0 var(--bsg-accent);
}

html.dark-mode a,
html.dark-mode .listing li a.name {
	color: var(--bsg-text);
}

html.dark-mode .boxtitle,
html.dark-mode .header-title,
html.dark-mode h2.block-title {
	color: var(--bsg-text);
	letter-spacing: -0.01em;
}

html.dark-mode .subtitle,
html.dark-mode .listing li .msgdate,
html.dark-mode span.date {
	color: var(--bsg-muted);
}

/* Botões e campos: menos "web 2010", mais superfície plana. */
html.dark-mode input.button,
html.dark-mode button.btn,
html.dark-mode a.button {
	border-radius: var(--bsg-radius);
	border: 1px solid var(--bsg-border);
	background: var(--bsg-surface-2);
	color: var(--bsg-text);
}

html.dark-mode input.button.mainaction,
html.dark-mode button.btn.mainaction,
html.dark-mode .buttons button.mainaction {
	background: var(--bsg-accent);
	border-color: var(--bsg-accent);
	color: #fff;
}

html.dark-mode input.text,
html.dark-mode input[type="text"],
html.dark-mode input[type="password"],
html.dark-mode input[type="email"],
html.dark-mode textarea,
html.dark-mode select {
	background: var(--bsg-bg);
	border: 1px solid var(--bsg-border);
	border-radius: var(--bsg-radius);
	color: var(--bsg-text);
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
	border-color: var(--bsg-accent);
	box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.18);
	outline: none;
}

/* Tela de login: o primeiro contato, vale o cuidado extra. */
html.dark-mode #layout-content.login,
html.dark-mode #login-form {
	background: var(--bsg-bg);
}

html.dark-mode #login-form .box-inner {
	background: var(--bsg-surface);
	border: 1px solid var(--bsg-border);
	border-radius: 14px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}