/*
 * JGNMail — Skin fuer Roundcube, aufgesetzt auf Elastic.
 *
 * Elastic bleibt vollstaendig erhalten (meta.json: "extends": "elastic");
 * hier wird ausschliesslich nachgetoent. Elastic 1.6 kompiliert seine Farben
 * fest aus LESS und stellt keine CSS-Variablen bereit, deshalb werden die
 * Flaechen ueber Selektoren getroffen statt ueber Variablen umgebogen.
 *
 * Die Werte stammen aus portal/src/app.css, damit Webmail und Portal als ein
 * System wirken. Einzige Ergaenzung: das Amber der Wortmarke als zweiter
 * Akzent — ein Postfach braucht mehr als eine Akzentfarbe (ungelesen,
 * markiert), und monochrom Gruen wird schnell laut.
 *
 * Aufbau:
 *   1. Tokens — Markentoene, dazu modusabhaengige Akzente
 *   2. Akzente — gelten in beiden Modi
 *   3. Flaechen — nur im dunklen Modus
 */

/* ---------------------------------------------------------------------------
 * 1. Tokens
 * ------------------------------------------------------------------------- */

:root {
	/* Markentoene aus portal/src/app.css, unveraendert. */
	--jgn-green: #04fc4c;
	--jgn-green-dim: #03d941;
	--jgn-amber: #ffb133;

	--jgn-ground: #0a0a12;
	--jgn-surface: #0f0f1a;
	--jgn-raised: #12121e;

	--jgn-text: #d1d5db;
	--jgn-text-strong: #ffffff;
	--jgn-text-muted: #9ca3af;

	--jgn-line: rgba(255, 255, 255, 0.1);
	--jgn-line-soft: rgba(255, 255, 255, 0.06);

	--jgn-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Akzente fuer hellen Grund.
	 *
	 * Die Markentoene taugen auf Weiss nicht als Text: #04fc4c erreicht
	 * 1.40:1, #ffb133 nur 1.81:1 — beides weit unter den 4.5:1, die Text
	 * braucht. Genommen werden deshalb die dunklen Stufen derselben Ramp:
	 * #016d20 (brand-900) kommt auf 6.54:1, das abgedunkelte Amber auf
	 * 5.93:1. Die Marke bleibt erkennbar, der Text lesbar.
	 */
	--jgn-accent: #016d20;
	--jgn-accent-strong: #02912b;
	--jgn-accent-mark: #8a5a00;
	--jgn-tint: rgba(1, 109, 32, 0.1);
	--jgn-tint-mark: rgba(138, 90, 0, 0.12);
	--jgn-focus: 0 0 0 2px rgba(1, 109, 32, 0.5);
}

/* Auf dunklem Grund kehrt sich das um: dort tragen die hellen Markentoene
   (14.12:1 beziehungsweise 10.88:1), waehrend die dunklen Stufen absaufen. */
html.dark-mode {
	--jgn-accent: var(--jgn-green);
	--jgn-accent-strong: var(--jgn-text-strong);
	--jgn-accent-mark: var(--jgn-amber);
	--jgn-tint: rgba(4, 252, 76, 0.1);
	--jgn-tint-mark: rgba(255, 177, 51, 0.16);
	--jgn-focus: 0 0 0 2px rgba(4, 252, 76, 0.45);
}

/* ---------------------------------------------------------------------------
 * 2. Akzente — beide Modi
 *
 * Aktionsfarbe, Fokus, Marker und Schreibweise gehoeren zur Marke, nicht zu
 * einem Modus. Sie stehen deshalb ausserhalb von html.dark-mode und beziehen
 * ihre Farbe aus den Tokens oben.
 * ------------------------------------------------------------------------- */

/* Schriftfamilie. Bewusst ohne Webfont-Download: ein selbstgehostetes
   Postfach soll fuer die Typografie keinen fremden Host anfragen. Faellt
   Inter aus, greift dieselbe Kette wie im Portal. */
body,
.ui.input,
input,
select,
textarea,
button {
	font-family: var(--jgn-font);
}

a {
	color: var(--jgn-accent);
}

a:hover {
	color: var(--jgn-accent-strong);
}

/* Tastaturfokus bleibt in beiden Modi deutlich sichtbar. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.listing li > a:focus-visible {
	outline: none;
	box-shadow: var(--jgn-focus);
	border-radius: 6px;
}

/* Aufgabenleiste — Sonderfall.
 *
 * Elastic haelt #layout-menu in BEIDEN Modi dunkel. Der helle Akzent
 * #016d20 kaeme dort auf 2.46:1 und waere unlesbar; der Markenton erreicht
 * 11.53:1. Hier gilt deshalb immer das helle Gruen, unabhaengig vom Modus —
 * das ist kein Verstoss gegen die Token-Regel, sondern folgt ihr: der Grund
 * ist hier eben immer dunkel.
 *
 * Der doppelte Selektor mit html.dark-mode ist noetig, weil Elastics
 * dark.less dieselbe Stelle mit dieser Spezifitaet belegt.
 */
#taskmenu .action-buttons a.compose,
html.dark-mode #taskmenu .action-buttons a.compose {
	color: var(--jgn-green);
}

#taskmenu .action-buttons a.compose:hover,
html.dark-mode #taskmenu .action-buttons a.compose:hover {
	background-color: rgba(4, 252, 76, 0.12);
}

#taskmenu a.selected,
#taskmenu a.selected:hover,
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.selected:hover {
	color: var(--jgn-green);
	background-color: rgba(4, 252, 76, 0.1);
}

.listing li.selected > a,
.listing li > a.selected {
	background-color: var(--jgn-tint);
}

/* Ungelesen-Zaehler am Ordner: der zweite Akzent, damit er sich von der
   Aktionsfarbe unterscheidet und nicht wie ein anklickbares Element wirkt. */
#mailboxlist .unreadcount,
.listing .unreadcount {
	background-color: var(--jgn-tint-mark);
	color: var(--jgn-accent-mark);
	border-radius: 8px;
	font-weight: 600;
}

/* Nachrichtenliste — die einzige auffaellige Geste.
 *
 * Das Platinen-N der Wortmarke besteht aus duennen Bahnen. Ungelesene und
 * ausgewaehlte Zeilen bekommen genau das als Marker: eine schmale Bahn am
 * linken Rand. Ueberall sonst bleibt die Oberflaeche ruhig.
 *
 * Elastic zeichnet diesen Marker selbst als border-left auf td.subject (2px,
 * cyan). Statt einen zweiten Strich danebenzusetzen wird dieser uebernommen.
 * td.selection scheidet aus — die Spalte steht in diesem Layout auf
 * display:none, ein Marker dort malt nie. Der transparente Strich auf allen
 * Zeilen haelt den Text buendig. Adressiert wird ueber die ID #messagelist,
 * weil Elastic das ebenso tut — eine Klassenregel verliert dagegen.
 */
#messagelist td.subject {
	border-left: 3px solid transparent;
}

#messagelist tr.unread td.subject {
	border-left-color: var(--jgn-accent-mark);
}

/* Nach .unread notiert: ist eine Zeile ungelesen und geoeffnet, gewinnt die
   Aktionsfarbe — die Auswahl ist die aktuellere Information. */
#messagelist tr.selected td.subject,
#messagelist tr.focused td.subject {
	border-left-color: var(--jgn-accent);
}

/* Schaltflaechen.
 *
 * Die volle Sattheit von --jgn-green auf einer grossen Flaeche blendet.
 * Gefuellt wird deshalb mit dem ruhigeren Ton; das helle Gruen bleibt der
 * Reaktion auf Zeigen und Fokus vorbehalten. Als gefuellte Flaeche mit
 * dunklem Text traegt der Ton in beiden Modi.
 */
.btn-primary,
button.mainaction {
	background-color: var(--jgn-green-dim);
	border-color: var(--jgn-green-dim);
	color: var(--jgn-ground);
	font-weight: 600;
	letter-spacing: 0;
}

.btn-primary:hover,
.btn-primary:focus,
button.mainaction:hover,
button.mainaction:focus {
	background-color: var(--jgn-green);
	border-color: var(--jgn-green);
	color: var(--jgn-ground);
}

/* Elastics ui.js haengt der Anmeldeschaltflaeche zur Laufzeit die
   Bootstrap-Utility .text-uppercase an, und die traegt !important. Nur
   deshalb steht hier eines — anders ist die Regel nicht zu schlagen.
   Schaltflaechen sagen was sie tun, sie muessen nicht rufen. */
button.mainaction.text-uppercase {
	text-transform: none !important;
}

body.task-login #logo {
	max-height: 64px;
}

/* ---------------------------------------------------------------------------
 * 3. Flaechen — nur im dunklen Modus
 *
 * Elastic bringt einen vollstaendigen dunklen Farbsatz mit (styles/dark.less,
 * gekapselt unter html.dark-mode). Hier wird er auf den Portal-Grund
 * umgetoent, nicht ersetzt.
 * ------------------------------------------------------------------------- */

html.dark-mode body {
	color: var(--jgn-text);
	background-color: var(--jgn-ground);
	/* Dieselben Washes wie im Portal, nur schwaecher: hinter einer dichten
	   Nachrichtenliste darf der Hintergrund nicht mitreden. */
	background-image:
		radial-gradient(ellipse at top, rgba(4, 252, 76, 0.05) 0%, transparent 55%),
		radial-gradient(ellipse at bottom right, rgba(255, 177, 51, 0.03) 0%, transparent 45%);
	background-attachment: fixed;
}

html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout-sidebar {
	background-color: var(--jgn-surface);
	border-color: var(--jgn-line-soft);
}

html.dark-mode #layout-menu {
	background-color: var(--jgn-ground);
	border-right: 1px solid var(--jgn-line-soft);
}

html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
	background-color: var(--jgn-raised);
	border-color: var(--jgn-line-soft);
	color: var(--jgn-text-strong);
}

html.dark-mode .searchbar,
html.dark-mode .searchbar input {
	background-color: var(--jgn-ground);
	border-color: var(--jgn-line);
	color: var(--jgn-text);
}

html.dark-mode .listing li > a {
	color: var(--jgn-text);
	border-color: var(--jgn-line-soft);
}

html.dark-mode #messagelist tr {
	border-color: var(--jgn-line-soft);
}

html.dark-mode #messagelist tr.unread {
	color: var(--jgn-text-strong);
}

/* Neutral aufgehellt statt gruen getoent: #04fc4c traegt selbst bei acht
   Prozent noch so kraeftig, dass die Zeile wie eine Warnung wirkt. Welche
   Zeile offen ist, sagt der Balken links bereits eindeutig — die Flaeche
   muss es nicht wiederholen. Die Zellen werden ausdruecklich transparent
   gesetzt, weil Elastic dort selbst eine Auswahlfarbe hinterlegt. */
html.dark-mode #messagelist tr.selected,
html.dark-mode #messagelist tr.focused {
	background-color: rgba(255, 255, 255, 0.05);
}

html.dark-mode #messagelist tr.selected td,
html.dark-mode #messagelist tr.focused td {
	background-color: transparent;
	color: var(--jgn-text-strong);
}

/* Elastic faerbt den Betreff der ausgewaehlten Zeile cyan. Auf getoentem
   Grund liest sich das wie ein Fehler — Weiss ist hier die ruhige Wahl. */
html.dark-mode #messagelist tr.selected td.subject a,
html.dark-mode #messagelist tr.focused td.subject a {
	color: var(--jgn-text-strong);
}

html.dark-mode .btn-secondary {
	background-color: transparent;
	border-color: var(--jgn-line);
	color: var(--jgn-text);
}

html.dark-mode .btn-secondary:hover {
	border-color: rgba(4, 252, 76, 0.4);
	color: var(--jgn-text-strong);
}

/* Anmeldeseite — der erste Eindruck, deshalb hier etwas mehr Zuwendung.
   Kein backdrop-filter: hinter der Karte liegt eine ruhige Flaeche, es gaebe
   nichts zu verwischen — reine Kosten ohne Wirkung. Die Erhebung entsteht
   ueber Flaeche, Haarlinie und Schatten. Die Spezifitaet ist bewusst hoch,
   Elastic setzt #login-form selbst schon recht spezifisch. */
html.dark-mode body.task-login #layout-content #login-form {
	background-color: var(--jgn-raised);
	border: 1px solid var(--jgn-line-soft);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
	padding: 8px;
}

html.dark-mode body.task-login #login-footer {
	color: var(--jgn-text-muted);
}

/* Rollbalken — wie im Portal. */
html.dark-mode ::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

html.dark-mode ::-webkit-scrollbar-track {
	background: transparent;
}

html.dark-mode ::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 4px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* Bewegung nur, wenn erwuenscht. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------------------
 * Rechtliche Pflichtlinks (Impressum / Datenschutz)
 *
 * Elastic fuellt den Viewport vollstaendig aus und bietet keinen Footer, in den
 * ein Skin etwas einhaengen koennte. Die Leiste liegt deshalb als eigenes
 * Element vor #layout (siehe templates/includes/layout.html) und wird hier
 * unten positioniert. Auf der Anmeldeseite — der einzigen Ansicht, die ohne
 * Konto erreichbar ist — steht sie mittig und immer sichtbar. In den
 * angemeldeten Ansichten sitzt sie dezent unten rechts und weicht auf
 * schmalen Geraeten, wo jeder Pixel fuer die Mailliste gebraucht wird.
 * ------------------------------------------------------------------------ */
.jgnmail-legal {
	position: fixed;
	right: 12px;
	bottom: 6px;
	z-index: 5;
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 11px;
	line-height: 1.4;
	opacity: 0.65;
	pointer-events: auto;
}

.jgnmail-legal a {
	color: inherit;
	text-decoration: none;
}

.jgnmail-legal a:hover {
	text-decoration: underline;
	opacity: 1;
}

body.task-login .jgnmail-legal {
	left: 0;
	right: 0;
	bottom: 12px;
	justify-content: center;
	font-size: 12px;
	opacity: 0.8;
}

@media screen and (max-width: 768px) {
	body:not(.task-login) .jgnmail-legal {
		display: none;
	}
}

@media print {
	.jgnmail-legal {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * ACS-Teilnehmer-Logo (nur Anmeldeseite, siehe templates/includes/layout.html)
 *
 * Sitzt ueber der Rechtsleiste. Das Logo selbst darf nicht eingefaerbt oder
 * invertiert werden, daher der weisse Kasten statt einer Anpassung an den
 * dunklen Modus. Auf niedrigen Viewports weicht es, damit es das Anmelde-
 * formular nicht verdeckt — Pflicht sind nur die Rechtslinks, nicht das Logo.
 * ------------------------------------------------------------------------ */
.jgnmail-acs {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 40px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	pointer-events: none;
}

.jgnmail-acs a {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	background: #ffffff;
	pointer-events: auto;
}

.jgnmail-acs img {
	display: block;
	width: 150px;
	max-width: 100%;
	height: auto;
}

.jgnmail-acs p {
	margin: 0;
	font-size: 11px;
	line-height: 1.4;
	opacity: 0.7;
	text-align: center;
}

@media screen and (max-height: 640px) {
	.jgnmail-acs {
		display: none;
	}
}

@media print {
	.jgnmail-acs {
		display: none;
	}
}