@import url("../../elastic/styles/styles.min.css");

/* ------------------------------------------------------------------
   SLP Webmail — Farbwelt aus dem Logo abgeleitet
   Feuerorange (Farbton 17–37), Amber, Gold auf warmem Dunkelgrund.
   ------------------------------------------------------------------ */

:root {
	--slp-fire:      #ff5a0f;
	--slp-fire-hi:   #ff7a2e;
	--slp-fire-deep: #d8410a;
	--slp-amber:     #ffa51f;
	--slp-gold:      #ffd84d;

	--slp-ink:       #120c0a;
	--slp-ink-2:     #1b1310;
	--slp-surface:   #211815;
	--slp-line:      #3a2a22;
	--slp-text:      #f5ebe6;
	--slp-text-dim:  #c0aaa0;
}

/* ==================================================================
   Anmeldeseite
   ================================================================== */

body.task-login {
	background-color: var(--slp-ink);
	background-image:
		radial-gradient(ellipse 70% 55% at 50% 30%, rgba(255, 90, 15, .20), transparent 70%),
		radial-gradient(ellipse 90% 60% at 50% 108%, rgba(255, 165, 31, .14), transparent 72%);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

body.task-login #layout,
body.task-login #layout-content,
body.task-login .content {
	background: transparent;
}

/* Logo über dem Anmeldefeld */
body.task-login #logo,
body.task-login #logo-block img {
	max-width: 170px;
	height: auto;
	margin-bottom: 1.6rem;
	filter: drop-shadow(0 6px 26px rgba(255, 90, 15, .45));
}

/* Anmeldekarte */
body.task-login #login-form,
body.task-login .login-form {
	background: linear-gradient(180deg, rgba(43, 31, 26, .96), rgba(27, 19, 16, .98));
	border: 1px solid var(--slp-line);
	border-radius: 14px;
	box-shadow:
		0 20px 60px rgba(0, 0, 0, .55),
		0 0 0 1px rgba(255, 90, 15, .10),
		inset 0 1px 0 rgba(255, 216, 77, .07);
	padding: 2.2rem 1.9rem 1.9rem;
	color: var(--slp-text);
}

body.task-login #login-form .box-inner,
body.task-login .login-form .box-inner {
	background: transparent;
	border: 0;
}

body.task-login label,
body.task-login .input-group-text,
body.task-login #login-form td.title {
	color: var(--slp-text-dim);
}

/* Eingabefelder */
body.task-login input.form-control,
body.task-login select.form-control {
	background-color: rgba(18, 12, 10, .72);
	border: 1px solid var(--slp-line);
	color: var(--slp-text);
	border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

body.task-login input.form-control::placeholder {
	color: rgba(192, 170, 160, .6);
}

body.task-login input.form-control:focus,
body.task-login select.form-control:focus {
	background-color: rgba(18, 12, 10, .9);
	border-color: var(--slp-fire);
	box-shadow: 0 0 0 3px rgba(255, 90, 15, .25);
	color: var(--slp-text);
	outline: none;
}

/* Anmeldeknopf — dunkle Schrift auf Orange für hohen Kontrast */
body.task-login button.btn-primary,
body.task-login .btn.mainaction,
body.task-login input[type="submit"] {
	background: linear-gradient(180deg, var(--slp-amber), var(--slp-fire));
	border: 0;
	color: #24120a;
	font-weight: 700;
	letter-spacing: .02em;
	border-radius: 8px;
	padding: .62rem 1rem;
	box-shadow: 0 6px 18px rgba(255, 90, 15, .32);
	transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
}

body.task-login button.btn-primary:hover,
body.task-login .btn.mainaction:hover,
body.task-login input[type="submit"]:hover {
	filter: brightness(1.08);
	box-shadow: 0 8px 24px rgba(255, 90, 15, .42);
	color: #24120a;
}

body.task-login button.btn-primary:active,
body.task-login .btn.mainaction:active {
	transform: translateY(1px);
}

body.task-login button.btn-primary:focus-visible,
body.task-login input.form-control:focus-visible {
	outline: 2px solid var(--slp-gold);
	outline-offset: 2px;
}

/* Fußzeile und Hinweise */
body.task-login #login-footer,
body.task-login .footer {
	color: rgba(192, 170, 160, .75);
}

body.task-login a {
	color: var(--slp-amber);
}

body.task-login a:hover {
	color: var(--slp-gold);
}

/* Fehlermeldung bei falschem Passwort */
body.task-login .ui.alert,
body.task-login #message div.error {
	background: rgba(216, 65, 10, .16);
	border: 1px solid rgba(255, 90, 15, .45);
	color: #ffcdb5;
	border-radius: 8px;
}

/* ==================================================================
   Restliche Oberfläche — Akzente aus dem Logo
   ================================================================== */

/* Kopfzeilen-Logo etwas kleiner halten */
#topline #logo,
#taskmenu #logo,
.menu-header img#logo {
	max-height: 34px;
	width: auto;
}

/* Aufgabenleiste: aktiver Eintrag */
#taskmenu a.selected,
#taskmenu a:active {
	color: var(--slp-fire);
}

#taskmenu a.selected::before,
#taskmenu a.selected span.inner {
	color: var(--slp-fire);
}

/* Primäre Schaltflächen in der App */
.btn-primary,
a.btn-primary,
button.btn-primary {
	background: linear-gradient(180deg, var(--slp-amber), var(--slp-fire));
	border-color: var(--slp-fire-deep);
	color: #24120a;
	font-weight: 600;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
	background: linear-gradient(180deg, var(--slp-gold), var(--slp-fire-hi));
	border-color: var(--slp-fire-deep);
	color: #24120a;
}

.btn-primary:focus-visible {
	outline: 2px solid var(--slp-gold);
	outline-offset: 2px;
}

/* Ausgewählte Nachricht in der Liste */
.listing li.selected > a,
.listing tr.selected > td,
table.listing tbody tr.selected td {
	border-left: 3px solid var(--slp-fire);
}

/* Ungelesen-Zähler */
.listing li a .unreadcount,
#mailboxlist .unreadcount,
span.badge.unread {
	background-color: var(--slp-fire);
	color: #24120a;
	font-weight: 700;
}

/* Links */
a,
a:hover {
	color: var(--slp-fire-deep);
}

#layout-sidebar a,
#layout-list a {
	color: inherit;
}

/* Fortschritt und Auswahlrahmen */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline-color: var(--slp-fire);
}

/* Dunkelmodus: Links heller, damit sie auf Dunkelgrund lesbar bleiben */
@media (prefers-color-scheme: dark) {
	a,
	a:hover {
		color: var(--slp-amber);
	}
}

html.dark-mode a,
html.dark-mode a:hover,
body.dark-mode a,
body.dark-mode a:hover {
	color: var(--slp-amber);
}