/* ============================================================================
   MB Hosting — child-skin van Elastic (Roundcube 1.4+)
   Brand: violet #6428D2 → blauw #366AF6 · ink/link #4A30D8 · soft #EDE9FD

   Basis: Elastic's gecompileerde stylesheet wordt hieronder client-side
   geïmporteerd (relatief pad, dus subpad-veilig). Daarmee is deze skin niet
   afhankelijk van welke bestandsnaam (styles.css / styles.min.css) de
   parent-layout opvraagt. Staat styles.min.css onverhoopt toch elders, dan
   blijft de login dankzij de zelfvoorzienende regels hieronder kloppen.
   Regels met onbekende selectors zijn onschuldig: ze matchen dan niet.
   ============================================================================ */
@import url("../../elastic/styles/styles.min.css");

/* ---------- Zelfvoorzienende basis (werkt ook zonder Elastic-CSS) ---------- */
.voice {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

body.task-login {
	margin: 0;
}

body.task-login #layout {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	box-sizing: border-box;
}

/* ---------- Login ---------- */
body.task-login #layout {
	background: linear-gradient(135deg, #6428D2 0%, #366AF6 100%);
}

.mbhosting-brand {
	display: block;
	text-align: center;
	margin: 0 auto 22px;
}

.mbhosting-brand img {
	height: 46px;
	width: auto;
}

body.task-login #login-form {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 70px rgba(20, 10, 60, .35);
	padding: 30px 32px;
	max-width: 400px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

body.task-login #login-form input.form-control {
	border-radius: 6px;
}

body.task-login #login-form input.form-control:focus {
	border-color: #6428D2;
	box-shadow: 0 0 0 3px rgba(100, 40, 210, .14);
	outline: none;
}

body.task-login #login-form .btn-primary,
body.task-login #login-form button[type="submit"],
body.task-login #login-form input[type="submit"] {
	background: linear-gradient(120deg, #6428D2 0%, #366AF6 100%);
	border-color: transparent;
	border-radius: 6px;
	font-weight: 600;
}

body.task-login #login-form .btn-primary:hover,
body.task-login #login-form button[type="submit"]:hover,
body.task-login #login-form input[type="submit"]:hover {
	filter: brightness(.94);
}

body.task-login #login-footer {
	color: #5F676A;
	font-size: 12.5px;
	text-align: center;
}

body.task-login a {
	color: #4A30D8;
}

body.task-login a:hover {
	color: #6428D2;
}

/* ---------- Globaal: knoppen, links, focus ---------- */
.btn-primary {
	background: linear-gradient(120deg, #6428D2 0%, #366AF6 100%);
	border-color: transparent;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	filter: brightness(.94);
	border-color: transparent;
}

a {
	color: #4A30D8;
}

a:hover {
	color: #6428D2;
}

.form-control:focus {
	border-color: #6428D2;
	box-shadow: 0 0 0 .2rem rgba(100, 40, 210, .15);
}

::selection {
	background: #EDE9FD;
}

/* Header-accentlijn in de app (best-effort) */
#header {
	border-bottom: 3px solid transparent;
	border-image: linear-gradient(90deg, #6428D2, #366AF6) 1;
}

/* Login: content-wrapper transparant (Elastic zet hier wit op) */
body.task-login #layout-content {
	background: none;
}

/* ---------- App-menu (#layout-menu): donkere MBWS-sidebar ---------- */
#layout-menu {
	background-color: #14181A;
}

#layout-menu .popover-header {
	background-color: #14181A;
	border-color: #2A3236;
}

/* Eigen logo in het (mobiele) menu (images/logo.svg) */
#layout-menu .popover-header #logo {
	height: 28px;
	width: auto;
}

#layout-menu #taskmenu a {
	color: #A7AEB4;
}

#layout-menu #taskmenu a:hover,
#layout-menu #taskmenu a:focus {
	color: #fff !important;
	background-color: rgba(255, 255, 255, .06) !important;
}

#layout-menu #taskmenu a.selected,
#layout-menu #taskmenu a.selected:hover {
	color: #fff !important;
	background-color: rgba(100, 40, 210, .28) !important;
	box-shadow: inset 3px 0 0 #366AF6;
}

#layout-menu #taskmenu .action-buttons a {
	color: #fff;
}

#layout-menu #taskmenu .action-buttons a:hover {
	color: #fff !important;
	background-color: rgba(255, 255, 255, .06) !important;
}

#layout-menu #taskmenu span.special-buttons {
	background-color: #14181A !important;
	border-top: 1px solid #2A3236;
}

#layout-menu #taskmenu span.special-buttons a {
	color: #7E878E;
}

#layout-menu #taskmenu span.special-buttons a:hover {
	color: #fff !important;
	background-color: rgba(255, 255, 255, .06) !important;
}

#layout-menu #taskmenu a.logout,
#layout-menu #taskmenu a.logout:hover {
	color: #F26D6D !important;
}

/* ---------- Lijsten: selecties in brandkleur (settings, contacten, mappen) ---------- */
.listbox .listing li.selected > a,
.listbox .listing tr.selected > td {
	background-color: #EDE9FD;
}

.listbox .listing li.selected > a {
	color: #4A30D8;
}

/* ---------- Schakelaars, checkboxes, radio's ---------- */
.custom-control-input:checked ~ .custom-control-label::before {
	background-color: #6428D2 !important;
	border-color: #6428D2 !important;
}

.custom-control-input:focus ~ .custom-control-label::before,
.custom-control-input:active ~ .custom-control-label::before {
	box-shadow: 0 0 0 .2rem rgba(100, 40, 210, .15) !important;
	border-color: #6428D2 !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
	background: linear-gradient(120deg, #6428D2 0%, #366AF6 100%) !important;
	border-color: #6428D2 !important;
}

.custom-switch .custom-control-input:focus ~ .custom-control-label::before,
.custom-switch .custom-control-input:active ~ .custom-control-label::before {
	box-shadow: 0 0 0 .2rem rgba(100, 40, 210, .15) !important;
}

/* ---------- Mailbox-overzicht ---------- */

/* Mappenlijst: geselecteerde map */
#mailboxlist li.mailbox.selected > a {
	background-color: #EDE9FD;
	color: #4A30D8;
	font-weight: 600;
}

/* Ongelezen-badges in de mappenlijst */
#mailboxlist span.unreadcount {
	background: linear-gradient(120deg, #6428D2 0%, #366AF6 100%);
	color: #fff;
}

/* Berichtenlijst: geselecteerde rij */
#layout-list #messagelist tr.message.selected > td {
	background-color: #E7E0FB;
}

/* Ongelezen rij: subtiele linkerstreep bij het onderwerp */
#layout-list #messagelist tr.message.unread > td.subject {
	box-shadow: inset 3px 0 0 #6428D2;
}

/* Toolbar-knoppen: hover in brandkleur */
#layout-list .header a.button:hover,
#layout-content .header a.button:hover {
	color: #4A30D8;
}

/* Zoekbalk */
#mailsearchform input:focus {
	border-color: #6428D2;
	box-shadow: 0 0 0 3px rgba(100, 40, 210, .14);
	outline: none;
}

/* ---------- Randen in neutrale tint (i.p.v. Roundcube-grijs) ---------- */
#layout-sidebar,
#layout-list {
	border-right-color: #E6E9EE !important;
}

#layout-sidebar.sidebar-right {
	border-left-color: #E6E9EE !important;
}

#layout > div > .header {
	border-bottom-color: #E6E9EE !important;
}

#layout > div > .footer {
	border-top-color: #E6E9EE !important;
}

.searchbar {
	border-bottom-color: #E6E9EE !important;
}

/* ---------- Opstellen: focus op ontvangers- en tekstvelden ---------- */
.recipient-input.focus,
.tagedit-list[tabindex="-1"],
.multi-input > .content.focused {
	border-color: #6428D2 !important;
	box-shadow: 0 0 0 .2rem rgba(100, 40, 210, .15) !important;
}

/* Vangnet voor native checkboxes/radio's */
input[type="checkbox"],
input[type="radio"] {
	accent-color: #6428D2;
}

@media (max-width: 576px) {
	.mbhosting-brand img {
		height: 38px;
	}

	body.task-login #login-form {
		padding: 24px 20px;
		margin: 0 16px;
	}
}