/*
 * Harthauer-Branding für Roundcube / Elastic2022
 *
 * Dieser Child-Skin überschreibt nur die gewünschten Farben, Abstände
 * und Rundungen. Die Regeln für den Dark Mode bleiben – soweit angegeben –
 * bewusst vom hellen Harthauer-Farbschema getrennt.
 */

/* --------------------------------------------------------------------------
   Grundfarben und große Layoutflächen
   -------------------------------------------------------------------------- */

/* Alten grünlichen Elastic2022-Hintergrund wiederherstellen */
html:not(.dark-mode) {
    --background: #e0f3db;
}

/* Neuer Elastic2022-Skin setzt diese Bereiche fest auf Weiß */
html:not(.dark-mode) body,
html:not(.dark-mode) #layout-content,
html:not(.dark-mode) #layout-list,
html:not(.dark-mode) #layout-sidebar {
    background-color: var(--background) !important;
}

/* Kopf- und Tabellenbereiche sollen den jeweiligen Hintergrund übernehmen */
html:not(.dark-mode) #layout > div > .header,
html:not(.dark-mode) .table-widget table.options-table tr:last-child td {
    background-color: inherit !important;
}

/* Fußzeilen leicht grün absetzen */
html:not(.dark-mode) #layout > div > .footer {
    background-color: #d2f9c785 !important;
}


/* --------------------------------------------------------------------------
   Login und allgemeine Rundungen
   -------------------------------------------------------------------------- */

/* Eigenes Logo auf der Loginseite größer darstellen */
.task-login #logo {
    max-height: 200px !important;
}

.menu.toolbar a {
    border-radius: 10px;
}

.attachmentslist {
    margin-top: 0 !important;
    border-radius: 10px !important;
}

.attachmentslist li,
.tdzipdownload {
    border-radius: 10px !important;
}


/* --------------------------------------------------------------------------
   Nachrichtenansicht und Nachrichtenliste
   -------------------------------------------------------------------------- */

.messagedate {
    margin-top: -6px !important;
    position: unset !important;
}

/* HTML-Nachrichten selbst weiterhin auf weißem Untergrund anzeigen */
#message-htmlpart1 {
    padding-left: 5px;
    background-color: #fff;
}

/* Abgerundete äußere Ecken der Nachrichtenzeilen */
td.selection {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

td.flags {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

ul.listing {
    margin: 2px !important;
}


/* --------------------------------------------------------------------------
   Verfassen-Schaltfläche
   -------------------------------------------------------------------------- */

html:not(.dark-mode) .compose.button div {
    background-color: #8eed5a !important;
}

html:not(.dark-mode) .compose.button div:hover {
    background-color: #8edb5a !important;
}

.compose.button div {
    border-radius: 10px !important;
}

.compose.button div:hover {
    box-shadow: none !important;
}

/* Im Dark Mode die Farben des Eltern-Skins verwenden */
html.dark-mode .compose.button div {
    background-color: var(--backgroundhoverlight) !important;
}

html.dark-mode .compose.button div:hover {
    background-color: var(--backgroundtree) !important;
}

/* Verkleinerungsanimation beim Anklicken deaktivieren */
.compose.button:active {
    transform: none !important;
}


/* --------------------------------------------------------------------------
   Ordnerbaum, Navigation und Registerkarten
   -------------------------------------------------------------------------- */

html:not(.dark-mode) .menu_bottom a.selected {
    background-color: #8eed5a !important;
}

html:not(.dark-mode) ul.treelist li.selected > a,
html:not(.dark-mode) ul.treelist li.selected > div > a {
    background-color: #8eed5a !important;
}

ul.treelist li.selected {
    border-radius: 10px !important;
}

ul.treelist.notree li > a {
    padding-left: 1.5em !important;
}

html:not(.dark-mode) .nav-tabs .nav-item.show .nav-link,
html:not(.dark-mode) .nav-tabs .nav-link.active {
    background-color: #8eed5a !important;
    font-weight: bold;
}


/* --------------------------------------------------------------------------
   Kontakte
   -------------------------------------------------------------------------- */

html:not(.dark-mode) #contactpic {
    background-color: #d1ffc452 !important;
}


/* --------------------------------------------------------------------------
   Primäre Schaltflächen und Aktionen
   -------------------------------------------------------------------------- */

/*
 * Vereinsgrün für primäre Aktionen.
 * Diese Regeln gelten bewusst auch im Dark Mode, damit die Markenfarbe
 * bei wichtigen Schaltflächen erhalten bleibt.
 */
.btn-primary {
    color: #fff !important;
    background: #8edb5a !important;
    border-color: #8edb5a !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled).active {
    color: #fff !important;
    background: #7fc551 !important; /* ungefähr 10 % dunkler */
    border-color: #7fc551 !important;
}

/*
 * Kompatibilitätsregeln für Aktionslinks älterer bzw. abweichender
 * Elastic2022-Ansichten. Sie können bestehen bleiben, auch wenn eine
 * konkrete Ansicht aktuell nur .btn-primary verwendet.
 */
#taskmenu .action-buttons a {
    color: #8edb5a !important;
    background: transparent !important;
}

#taskmenu .action-buttons a:hover {
    color: #7fc551 !important;
}

/* Auswahl und Hover im dunklen Taskmenü */
#taskmenu a.selected,
#taskmenu a:hover {
    color: #fff !important;
    background: #2f4f2f !important;
}

/* Kompatibilitätsregeln für klassische Toolbar-Hauptaktionen */
.toolbar a.button.mainaction,
#messagetoolbar a.button.mainaction {
    color: #fff !important;
    background: #8edb5a !important;
    border-color: #8edb5a !important;
}

.toolbar a.button.mainaction:hover,
#messagetoolbar a.button.mainaction:hover {
    background: #7fc551 !important;
    border-color: #7fc551 !important;
}


/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */

/* Fokuszustände im hellen Modus dezent grün einfärben */
html:not(.dark-mode) input:focus,
html:not(.dark-mode) textarea:focus,
html:not(.dark-mode) select:focus {
    border-color: #8edb5a !important;
    box-shadow: 0 0 0 0.2rem rgba(142, 219, 90, 0.25) !important;
}


/* Im Dark Mode das helle Vereinslogo verwenden */
html.dark-mode .task-login #logo {
    content: url("../images/logo-dark.svg") !important;
}