/* ------------------------------------------------------------------
   custom-dark.css - dunkles Thema mit hohem Kontrast fuer Calibre-Web
   Liegt im Container unter cps/static/css/ und wird in layout.html
   als letztes Stylesheet geladen, ueberschreibt also Bootstrap und
   style.css. Gilt fuer das Standard-Theme (config_theme = 0).
   ------------------------------------------------------------------ */

:root {
  color-scheme: dark;
  --grund:      #14171a;  /* Seitenhintergrund */
  --flaeche:    #1e232a;  /* Leisten, Karten, Tabellenkopf */
  --flaeche2:   #272e37;  /* Eingabefelder, Hover */
  --linie:      #3d4753;  /* Trennlinien, Rahmen */
  --text:       #f2f4f6;  /* Fliesstext, hoher Kontrast */
  --text-leise: #bcc5cf;  /* Nebenangaben */
  --akzent:     #5fd3bb;  /* Verweise */
  --akzent-an:  #8ceada;  /* Verweise bei Mauskontakt */
  --primaer:    #3574b4;  /* Schaltflaechen, Weiss darauf 4,9:1 */
  --primaer-an: #24557f;  /* dunkler bei Mauskontakt, wie im Standard-Theme */
  --warnung:    #e06c62;
}

/* --- Grundflaeche und Schriftgroesse ----------------------------- */

body {
  background: var(--grund) !important;
  color: var(--text) !important;
  font-size: 15.5px;
  line-height: 1.6;
}

body h1, body h2, body h3, body h4, body h5,
h1, h2, h3, h4, h5 { color: var(--text) !important; }

p, li, dd, dt, label { color: var(--text); }
.text-muted { color: var(--text-leise) !important; }

a { color: var(--akzent) !important; }
a:hover, a:focus { color: var(--akzent-an) !important; }

hr { border-top-color: var(--linie) !important; }

/* --- Kopfleiste -------------------------------------------------- */

.navbar-default {
  background: var(--flaeche) !important;
  border-color: var(--linie) !important;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-text { color: var(--text) !important; }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .open > a {
  color: var(--akzent-an) !important;
  background: var(--flaeche2) !important;
}
.navbar-brand { color: var(--akzent) !important; }
.navbar-default .navbar-toggle { border-color: var(--linie) !important; }
.navbar-default .navbar-toggle .icon-bar { background-color: var(--text) !important; }
.navbar-default .navbar-toggle:hover { background: var(--flaeche2) !important; }
.navbar-default .navbar-collapse { border-color: var(--linie) !important; }

/* --- Seitenleiste ------------------------------------------------ */

.navigation li a { color: var(--text) !important; }
.navigation li a:hover { background: var(--flaeche2) !important; }
.navigation .nav-head {
  color: var(--text-leise) !important;
  border-top-color: var(--linie) !important;
}
.navigation .create-shelf a {
  background: var(--primaer) !important;
  color: #fff !important;
}
.navigation .create-shelf a:hover { background: var(--primaer-an) !important; }
.more-stuff { border-top-color: var(--linie) !important; }

/* --- Buecherraster ----------------------------------------------- */

.container-fluid .new-books { border-top-color: var(--linie) !important; }
.container-fluid .book .meta .title {
  color: var(--text) !important;
  font-size: 16px;
}
.container-fluid .book .meta .series { color: var(--text-leise) !important; font-size: 13px; }
.container-fluid .book .meta .author { color: var(--text-leise) !important; font-size: 13px; }

.container-fluid .single .cover img,
.container-fluid .book .cover span img {
  border-color: var(--linie) !important;
  box-shadow: 0 6px 14px -6px #000 !important;
}
.cover .badge { background-color: var(--flaeche2) !important; color: var(--text) !important; }

.rating .glyphicon-star.good { color: #f0c14b !important; }
.rating .glyphicon-star-empty { color: var(--linie) !important; }
.rating-clear .glyphicon-remove { color: var(--text-leise) !important; }
span.glyphicon.glyphicon-tags { color: var(--text-leise) !important; }

/* --- Detailseite ------------------------------------------------- */

.book-meta p, .book-meta span, .book-meta div { color: var(--text); }
.book-meta .description, .comments, .media-body p { color: var(--text) !important; }
#description, #description * { color: var(--text) !important; }

/* --- Schaltflaechen ---------------------------------------------- */

.btn-primary {
  background-color: var(--primaer) !important;
  border-color: var(--primaer) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary.active, .open .dropdown-toggle.btn-primary {
  background-color: var(--primaer-an) !important;
  border-color: var(--primaer-an) !important;
}
.btn-default, .btn-default a {
  background-color: var(--flaeche2) !important;
  border-color: var(--linie) !important;
  color: var(--text) !important;
}
.btn-default:hover, .btn-default:focus, .btn-default a:hover {
  background-color: var(--linie) !important;
  color: var(--akzent-an) !important;
}
.btn-danger { background-color: var(--warnung) !important; border-color: var(--warnung) !important; }

/* Schlagwort- und Kategorie-Pillen auf der Detailseite (btn-xs btn-info)
   sowie die Kennungen (btn-success). Bootstrap setzt hier helle Flaechen
   mit weisser Schrift - auf dunklem Grund kaum lesbar. */
.btn-info, .btn-info:focus {
  background-color: #17586e !important;
  border-color: #2e8fae !important;
  color: #eaf7fc !important;
}
.btn-info:hover, .btn-info:active, .btn-info.active,
.open .dropdown-toggle.btn-info {
  background-color: #2280a1 !important;
  border-color: #4fb6d8 !important;
  color: #ffffff !important;
}
.btn-success, .btn-success:focus {
  background-color: #1d6b40 !important;
  border-color: #2f9c60 !important;
  color: #e9f8ef !important;
}
.btn-success:hover, .btn-success:active, .btn-success.active {
  background-color: #2a9459 !important;
  border-color: #4cc586 !important;
  color: #ffffff !important;
}
.btn-warning, .btn-warning:focus {
  background-color: #8a5a15 !important;
  border-color: #c08a2e !important;
  color: #fdf2e0 !important;
}
.btn-xs { font-size: 13px !important; }
.label { font-size: 12.5px !important; }

/* --- Ausklappmenues ---------------------------------------------- */

.dropdown-menu {
  background-color: var(--flaeche) !important;
  border-color: var(--linie) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .6) !important;
}
.dropdown-menu > li > a { color: var(--text) !important; }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--flaeche2) !important;
  color: var(--akzent-an) !important;
}
.dropdown-menu .divider { background-color: var(--linie) !important; }

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

.form-control, input, select, textarea {
  background-color: var(--flaeche2) !important;
  border-color: var(--linie) !important;
  color: var(--text) !important;
}
.form-control:focus {
  border-color: var(--akzent) !important;
  box-shadow: 0 0 0 2px rgba(95, 211, 187, .25) !important;
}
.form-control::placeholder { color: var(--text-leise) !important; opacity: .8; }
.input-group-addon {
  background-color: var(--flaeche) !important;
  border-color: var(--linie) !important;
  color: var(--text-leise) !important;
}
option { background-color: var(--flaeche2) !important; color: var(--text) !important; }

/* --- Tabellen ---------------------------------------------------- */

.table, .table > tbody > tr > td, .table > tbody > tr > th,
.table > thead > tr > td, .table > thead > tr > th {
  color: var(--text) !important;
  border-color: var(--linie) !important;
}
.table > thead > tr > th { background-color: var(--flaeche) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .04) !important; }
.table-hover > tbody > tr:hover { background-color: var(--flaeche2) !important; }

/* --- Kaesten, Fenster, Meldungen --------------------------------- */

.panel, .well, .modal-content, .list-group-item, .popover {
  background-color: var(--flaeche) !important;
  border-color: var(--linie) !important;
  color: var(--text) !important;
}
.panel-heading, .modal-header, .modal-footer {
  background-color: var(--flaeche2) !important;
  border-color: var(--linie) !important;
  color: var(--text) !important;
}
.modal-backdrop.in { opacity: .7 !important; }
.close { color: var(--text) !important; opacity: .8 !important; text-shadow: none !important; }

.alert-info, .alert-success, .alert-warning, .alert-danger {
  background-color: var(--flaeche2) !important;
  border-color: var(--linie) !important;
  color: var(--text) !important;
}
.alert-danger, .alert-warning { border-left: 4px solid var(--warnung) !important; }
.alert-success { border-left: 4px solid var(--akzent) !important; }

/* --- Blaetterleiste ---------------------------------------------- */

.pagination > li > a, .pagination > li > span {
  background-color: var(--flaeche) !important;
  border-color: var(--linie) !important;
  color: var(--text) !important;
}
.pagination > li > a:hover { background-color: var(--flaeche2) !important; }
.pagination > .active > a, .pagination > .active > span {
  background-color: var(--primaer) !important;
  border-color: var(--primaer) !important;
  color: #fff !important;
}

/* --- Kleinkram --------------------------------------------------- */

.tooltip.bottom .tooltip-inner {
  background-color: var(--flaeche2) !important;
  color: var(--text) !important;
  font-size: 13.5px;
}
code, pre {
  background-color: var(--flaeche2) !important;
  border-color: var(--linie) !important;
  color: var(--text) !important;
}
.label-default { background-color: var(--flaeche2) !important; }
::selection { background: var(--primaer); color: #fff; }