/*
 * ============================================================================================
 * Farbwelt nach brauner-telecom.de
 *
 *   Primär        #3462AC  Überschriften, Flächen, Buttons, Logo-Umfeld (Kopfleisten vor und nach dem Login)
 *   Akzent        #FC9504  sparsam: Suchen-Block, aktiver Reiter, Linie unter der Login-Leiste,
 *                          "heute" im Kalender
 *   Neutral hell  #EEF3FB  Hintergründe, markierte und überfahrene Listenzeilen
 *   Seite         #F1F5FC  durchgehender Seitenhintergrund (dezenter als Neutral hell)
 *
 *   Wie auf der Website zusätzlich: Blau dunkel #274F90 und Orange dunkel #E98400 für Hover,
 *   Linie #C5D6EE, Fließtext #3D4150. Der orange Suchen-Block ist weiß beschriftet (gewollt; Kontrast
 *   nur ~2,2:1 - für mehr Kontrast dort --bt-ink statt #FFFFFF setzen).
 *
 *   Bewusst rot bleiben Fehler- und Warnhinweise: Anmeldefehler, ungültige Checksumme,
 *   "Benutzer löschen" im Admin-Bereich.
 * ============================================================================================
 */

:root {
    --bt-blue:        #3462AC;
    --bt-blue-dark:   #274F90;
    --bt-orange:      #FC9504;
    --bt-orange-dark: #E98400;
    --bt-light:       #EEF3FB;
    --bt-page:        #F1F5FC;   /* Seitenhintergrund: dezenter als --bt-light */
    --bt-line:        #C5D6EE;
    --bt-text:        #3D4150;
    --bt-ink:         #1A1A1A;
}


/* --- Seitenhintergrund (Anmeldung, Oberfläche, Permalink, Administration): durchgehend,
       ersetzt den radialen Verlauf aus main.css/master.css ----------------------------------- */
body {
    background: var(--bt-page);
    filter: none;
}


/* --- Anmeldeseite ---------------------------------------------------------------------------- */
#b_login_topbar {
    background: var(--bt-blue);
    border-bottom: 4px solid var(--bt-orange);
    box-sizing: border-box;
}
/* Logo in der Login-Box: farbige Variante auf Weiß, so breit wie die Eingabefelder
   (main.css setzt es als Hintergrundbild; url() ist relativ zu dieser Datei, also /theme/logo.png) */
#b_login_form_logo {
    width: 85%;          /* gleiche Breite wie die Eingabefelder darunter */
    height: 52px;
    margin: 34px auto 30px;
    background-image: url("logo.png");
    background-size: contain;
}
.form_button_big {
    background: var(--bt-blue);
    color: #FFFFFF;
}
.no-touchevents .form_button_big:hover {
    background: var(--bt-blue-dark);
}
#b_login_oauth2_link:hover {
    color: var(--bt-blue);
    background: var(--bt-light);
    border-color: var(--bt-line);
}


/* --- Kopfleiste nach dem Login (auch Permalink-Ansicht und Administration): wie die Login-Leiste --- */
#header {
    background: var(--bt-blue);
    box-shadow: inset 0 -4px 0 var(--bt-orange);   /* wie border-bottom der Login-Leiste, ohne Höhenänderung */
}
/* Logo: THEME_LOGO = /theme/logo-hell.png (helle Variante für den blauen Grund, benno.conf).
   master.css und admin.css begrenzen die Box auf 42 bzw. 50px Breite - für das breite Logo aufheben. */
#header_logo {
    width: auto;
}
#header_logo img {
    height: 36px;
    width: auto;
    max-width: none;
}
/* Permalink-Ansicht: dort steht das Benno-Logo fest im Template (permalink_body.tpl) */
body.extern-permalink #header_logo a {
    width: 120px;
    height: 36px;
    background: url("logo-hell.png") no-repeat left center;
    background-size: contain;
}
body.extern-permalink #header_logo img {
    visibility: hidden;
}
#header_nav ul li a {
    color: var(--bt-light);
}
#header_nav ul li a:before {
    color: var(--bt-line);
}
#header_nav ul li.hn_active a {
    background: var(--bt-blue-dark);
    color: #FFFFFF;
    box-shadow: inset 0 -4px 0 var(--bt-orange);
}
.no-touchevents #header_nav ul li:hover a,
.no-touchevents #header_nav ul li:hover a:before,
#header_nav ul li.hn_active a:before {
    color: #FFFFFF;
}
/* Mobil (master.css ab 975px abwärts): Trennlinien der Symbolleiste hell statt grau */
@media screen and (max-width: 975px) {
    #header_nav {
        border-top-color: rgba(255, 255, 255, 0.25);
    }
    #header_nav ul li a {
        border-right-color: rgba(255, 255, 255, 0.25);
    }
    #header_container {
        border-top-color: rgba(255, 255, 255, 0.25);
    }
}

/* Container-Auswahl in der Kopfleiste (nur #select_container; .input_stage_select tragen auch
   "Sortieren" und die Seitengröße in den weißen Spaltenköpfen) */
#header_container #select_container {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 25px;
    padding: 0 28px 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    background-color: var(--bt-blue-dark);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23EEF3FB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: #FFFFFF;
    cursor: pointer;
}
#header_container #select_container:hover {
    border-color: #FFFFFF;
}
#header_container #select_container:focus {
    outline: none;
    border-color: var(--bt-orange);
    box-shadow: 0 0 0 1px var(--bt-orange);
}
/* aufgeklappte Liste: nicht das Blau des Feldes erben */
#header_container #select_container option {
    background: #FFFFFF;
    color: var(--bt-ink);
}

/* Benutzer-Panel rechts; unter 976px blendet master.css seinen Hintergrund aus */
@media screen and (min-width: 976px) {
    #header_user_panel {
        background: var(--bt-blue);
        color: var(--bt-light);
        box-shadow: inset 0 -4px 0 var(--bt-orange);   /* orange Unterkante wie #header */
    }
    #header_user_panel a {
        color: var(--bt-light);
    }
    #header_user_panel a#header_user_panel_usersettings,
    #header_user_panel a#header_user_panel_info {
        border-color: rgba(255, 255, 255, 0.35);
    }
    .no-touchevents #header_user_panel a:hover {
        color: var(--bt-orange) !important;
    }
}


/* --- Suchleiste links ------------------------------------------------------------------------- */
#panel,
#label {
    background: var(--bt-blue);
}
.input_label,
#panel_mobile a,
#label_head_close {
    color: var(--bt-light);
}
.input_text {
    background: #FFFFFF;
    color: var(--bt-ink);
    -webkit-box-shadow: inset 0 2px 4px -2px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 2px 4px -2px rgba(0, 0, 0, 0.25);
}
.input_select {
    background: #FFFFFF;
    color: var(--bt-ink);
}
a.search_min_button {
    color: var(--bt-light);
    border-color: var(--bt-line);
}
.no-touchevents a.search_min_button:hover {
    background: var(--bt-light);
    color: var(--bt-blue);
}

/* "Suchanfrage laden" und "Gesamt im Archiv" (master.css setzt dunkelgraue Töne) */
.search_load {
    border-color: var(--bt-line);
}
.search_load a {
    color: var(--bt-light);
}
.no-touchevents .search_load a:hover {
    background: var(--bt-blue-dark);
}
p#mails_in_archive,
#mails_in_archive_value,
p#mails_in_archive:before {
    color: var(--bt-line);
}

/* Suchen / Zurücksetzen / Speichern: die eine orange Hervorhebung (.input_button gibt es nur hier) */
.input_button {
    background: var(--bt-orange);
    color: #FFFFFF;
}
.no-touchevents .input_button:hover {
    background: var(--bt-orange-dark);
}
.search_reset:before,
.search_save:before {
    color: #FFFFFF;
}
.search_button {
    border-left-color: var(--bt-blue);
}
.three_buttons .search_reset {
    border-top-color: var(--bt-blue);
}

/* Gespeicherte Suchanfragen */
.label_active {
    background: var(--bt-blue-dark);
}
.label_active .label_delete {
    border-left-color: rgba(255, 255, 255, 0.35);
    color: var(--bt-line);
}


/* --- Trefferliste ----------------------------------------------------------------------------- */
.stage_head span {
    color: var(--bt-blue);
}
span.stage_head_overview_title i {
    background: var(--bt-blue);
}
.no-touchevents .min_mail:hover {
    background: var(--bt-light);
    border-color: var(--bt-light);
}

/* Markierte Mail; unter 601px hebt master.css sie bewusst nicht farbig hervor */
@media screen and (min-width: 601px) {
    .min_mail.active,
    .no-touchevents .min_mail.active:hover {
        background: var(--bt-light);
        border-color: var(--bt-blue);
    }
    .min_mail.active .min_mail_text span,
    .min_mail.active .min_mail_date span {
        color: var(--bt-blue) !important;
    }
}
.no-touchevents .min_mail.active:hover .min_mail_text span,
.no-touchevents .min_mail.active:hover span.min_mail_text_subject,
.no-touchevents .min_mail.active:hover .min_mail_date span {
    color: var(--bt-blue-dark) !important;
}


/* --- Mail-Ansicht ----------------------------------------------------------------------------- */
#EMail_Subject {
    color: var(--bt-blue);
}
a.mail_content_button {
    background: var(--bt-blue);
}
.no-touchevents a.mail_content_button:hover,
.no-touchevents #EMail_Attachments a:hover {
    background: var(--bt-blue-dark);
    color: #FFFFFF;
}
@media screen and (max-width: 600px) {
    a.mail_content_button {
        border-right-color: var(--bt-blue-dark);
    }
}


/* --- Dialoge ---------------------------------------------------------------------------------- */
.ui-widget-header {
    background: var(--bt-blue) !important;
    color: #FFFFFF;
}
a.modal_button {
    background: var(--bt-blue);
}
.no-touchevents a.modal_button:hover {
    background: var(--bt-blue-dark);
}


/* --- Datumsauswahl (jQuery-UI-Datepicker aus header_auth.tpl; Kopfzeile = .ui-widget-header oben).
       Reihenfolge default -> hover -> highlight (heute) -> active (gewählt) ist gewollt. */
.ui-datepicker .ui-state-default {
    background: var(--bt-light);
    border-color: var(--bt-line);
    color: var(--bt-text);
}
.ui-datepicker .ui-state-hover {
    background: var(--bt-line);
    border-color: var(--bt-blue);
    color: var(--bt-blue-dark);
}
.ui-datepicker .ui-state-highlight {
    background: var(--bt-orange);
    border-color: var(--bt-orange-dark);
    color: var(--bt-ink);
}
.ui-datepicker .ui-state-active {
    background: var(--bt-blue);
    border-color: var(--bt-blue-dark);
    color: #FFFFFF;
}


/* --- Administration (admin.php) --------------------------------------------------------------- */
body.admin-panel #header span {
    color: #FFFFFF;
}
body.admin-panel .panel-close a {
    color: var(--bt-line);
}
body.admin-panel .panel-close a:hover {
    color: #FFFFFF;
}
body.admin-panel .button,
body.admin-panel .form-group .button {
    background: var(--bt-blue);
}
body.admin-panel .user-list li a:hover {
    background: var(--bt-blue);
}
body.admin-panel .panel-user-action a:hover {
    color: var(--bt-blue);
}