/* ============================================================
   Stargue skin for Roundcube — extends Elastic
   Re-imports Elastic's compiled CSS, then layers Stargue brand.
   Brand: greens #4F821E / #5B9A2F / #96C81E, light bg #f3f8ef,
   fonts Manrope (display) + Inter (body).
   NOTE: @import rules must stay at the very top.
   ============================================================ */
@import url("../../elastic/styles/styles.min.css");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=Inter:wght@300;400;500;600&display=swap");

:root,
html.dark-mode {
	--stargue-green: #5B9A2F;
	--stargue-green-dark: #4F821E;
	--stargue-lime: #96C81E;
	--stargue-bg: #f3f8ef;
}

/* ---- Typography ---- */
html body,
.username,
input, button, select, textarea,
.form-control {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
h1, h2, h3,
.boxtitle,
.header .header-title,
#login-form .product-name,
.popup h3,
.menu h3.listing-title {
	font-family: 'Manrope', 'Inter', sans-serif;
	letter-spacing: -0.01em;
}

/* ---- Primary buttons ---- */
.btn-primary,
button.btn-primary,
.button.btn-primary,
a.button.btn-primary,
input.btn-primary,
.formbuttons .btn-primary {
	background-color: var(--stargue-green) !important;
	border-color: var(--stargue-green-dark) !important;
	color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
	background-color: var(--stargue-green-dark) !important;
	border-color: var(--stargue-green-dark) !important;
	color: #fff !important;
}

/* ---- Links ---- */
a, a:visited { color: var(--stargue-green-dark); }
a:hover { color: var(--stargue-green); }

/* ---- Form focus ---- */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
	border-color: var(--stargue-green) !important;
	box-shadow: 0 0 0 0.15rem rgba(91, 154, 47, 0.25) !important;
}
input[type="checkbox"],
input[type="radio"] { accent-color: var(--stargue-green); }

/* ---- Left task menu (active icon) ---- */
#taskmenu a.selected,
#taskmenu a:active,
.task-menu a.selected {
	color: var(--stargue-green) !important;
}
#taskmenu a.selected::before {
	color: var(--stargue-green) !important;
}

/* ---- Selected list rows / active navigation accents ---- */
ul.listing li.selected > a,
ul.listing li > a.selected,
table.listing tr.selected td,
#layout-menu .menu a.selected,
.toolbar a.button.selected {
	color: var(--stargue-green-dark) !important;
}
table.listing tr.selected td,
ul.listing li.selected > a {
	box-shadow: inset 3px 0 0 var(--stargue-green);
}

/* ---- Login screen ----
   Green gradient only in LIGHT mode. In dark mode we leave Elastic's dark
   login background so the white dark-logo stays legible (the logo is swapped
   to the white variant via prefers-color-scheme by Elastic's screen_logo()). */
@media (prefers-color-scheme: light) {
	body.task-login,
	.task-login #layout,
	.task-login #layout-content {
		background: linear-gradient(135deg, var(--stargue-bg) 0%, #ffffff 70%) !important;
	}
}
/* Dark mode: Elastic's screen_logo() swaps to the WHITE logo, and Elastic's
   login stays light by default — which made the white logo invisible. Give the
   login an explicit dark Stargue background so the white logo is legible. */
@media (prefers-color-scheme: dark) {
	body.task-login,
	.task-login #layout,
	.task-login #layout-content {
		background: linear-gradient(135deg, #16230d 0%, #121512 70%) !important;
	}
	.task-login #login-form,
	.task-login .box-inner {
		background: #1c1f1a !important;
		color: #e8efe2 !important;
	}
}
#login-form .box-inner,
.task-login .formcontainer {
	border-top: 4px solid var(--stargue-green);
}

/* ---- Misc accents ---- */
.watermark,
.menu .spinner { color: var(--stargue-green); }
::selection { background: rgba(150, 200, 30, 0.30); }