/*
 * mailiko Web-Mail - Anpassung des Skins elastic (Aleksander Machniak, CC BY-SA 3.0,
 * https://creativecommons.org/licenses/by-sa/3.0/). Diese Datei steht unter derselben Lizenz.
 *
 * Bringt das Aussehen auf das mailiko-CI: Schrift Inter (SIL OFL 1.1, fonts/OFL.txt,
 * dieselbe Datei wie unter /ci/fonts/ auf mailiko.de), Farben und Radius aus
 * mailiko-ci.css (hell und dunkel). Blendet aus, was in dieser Web-Mail keinen Sinn
 * hat: Abmelden (das Konto auf mailiko.de meldet ab), Adressbuch, Programmname.
 * Der Hinweis (abgemeldet) benutzt dieselbe Datei.
 *
 * Werte: UMSETZUNG 238, Quelle mailiko-ci.css (Variablen --ci-*).
 */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ci-schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ci-schriftgroesse: 16px;
  --ci-radius: 8px;
  --ci-grund: #f4f6f8;
  --ci-flaeche: #ffffff;
  --ci-text: #1b2733;
  --ci-leise: #5b6b7a;
  --ci-marke: #14304a;
  --ci-akzent: #b8432f;
  --ci-auf-akzent: #ffffff;
  --ci-rand: #d5dde5;
  --ci-feldrand: #7a8a99;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ci-grund: #0f1a24;
    --ci-flaeche: #172533;
    --ci-text: #e4ebf1;
    --ci-leise: #9fb0bf;
    --ci-marke: #9cc2e6;
    --ci-akzent: #e07a63;
    --ci-auf-akzent: #1a1110;
    --ci-rand: #2c3e50;
    --ci-feldrand: #6f879c;
  }
}

/* Dunkelmodus von elastic (Einstellung im Skin) */
html.dark-mode {
  --ci-grund: #0f1a24;
  --ci-flaeche: #172533;
  --ci-text: #e4ebf1;
  --ci-leise: #9fb0bf;
  --ci-marke: #9cc2e6;
  --ci-akzent: #e07a63;
  --ci-auf-akzent: #1a1110;
  --ci-rand: #2c3e50;
  --ci-feldrand: #6f879c;
}

/* --- Schrift und Farben --------------------------------------------------- */
body, input, select, textarea, button {
  font-family: var(--ci-schrift);
  font-size: var(--ci-schriftgroesse);
  color: var(--ci-text);
}

body { background: var(--ci-grund); }

#layout-sidebar,
#layout-list,
#layout-content {
  background: var(--ci-flaeche);
  border-color: var(--ci-rand);
}

#layout,
#layout > div,
.pagenav,
.header,
.footer,
.listing li,
.table-bordered,
.table-bordered th,
.table-bordered td {
  border-color: var(--ci-rand);
}

input, select, textarea, .form-control {
  background: var(--ci-flaeche);
  border-color: var(--ci-feldrand);
  border-radius: var(--ci-radius);
}

a,
.listing li a,
.folderlist li a,
.pagenav a {
  color: var(--ci-marke);
}

.listing li.selected,
.listing li.selected > a,
.folderlist li.selected > a,
table.records-table tr.selected td,
.messagelist tr.selected td {
  background: var(--ci-marke);
  color: var(--ci-flaeche);
}

.btn-primary,
.button.mainaction {
  background: var(--ci-akzent);
  border-color: var(--ci-akzent);
  color: var(--ci-auf-akzent);
  border-radius: var(--ci-radius);
}

.btn,
.button,
.popover {
  border-radius: var(--ci-radius);
}

/* --- Ausblenden ------------------------------------------------------------- */
/* Programmname und Logo */
#layout-menu .popover-header,
#layout-menu #logo,
#logo,
.footer .version,
/* Abmelden: das Konto auf mailiko.de meldet ab */
a.logout,
#taskmenu a.logout,
/* Info ueber das Programm */
a.about,
.special-buttons .about,
/* kein Adressbuch (nur gesammelte Empfaenger) */
#taskmenu a.contacts,
/* Absicherung: es gibt kein Anmeldeformular */
#rcmloginsubmit {
  display: none !important;
}

/* Wasserzeichen von elastic: stattdessen eine leere Flaeche */
#layout-content .watermark {
  display: none !important;
}

/* Seitenleiste (Aufgabenmenue) schmal lassen */
#layout-menu {
  width: auto;
}

/* --- Hinweisseite (abgemeldet) --------------------------------------------- */
body.mailiko-hinweis {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: var(--ci-grund);
}

body.mailiko-hinweis main {
  max-width: 28rem;
  margin: 1rem;
  padding: 1.5rem;
  background: var(--ci-flaeche);
  border: 1px solid var(--ci-rand);
  border-radius: var(--ci-radius);
}

body.mailiko-hinweis h1 {
  margin-top: 0;
  color: var(--ci-marke);
  font-size: 1.4rem;
  font-weight: 600;
}

body.mailiko-hinweis a.button {
  display: inline-block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  background: var(--ci-akzent);
  border: 1px solid var(--ci-akzent);
  color: var(--ci-auf-akzent);
  border-radius: var(--ci-radius);
}