/* ============================================================
   Minus Sinus dark theme overlay for Flask-AppBuilder (Bootstrap 3)
   Colors sourced from packages/msci (msci.__init__: darkBackground,
   darkTile, darkContrast1-6, darkPos/darkNeg, darkText, darkHeadline).
   Loaded on top of the bundled 'darkly.css' Bootswatch theme, whose
   default teal/slate accents this file retints to match MS_master.
   ============================================================ */

:root {
  --ms-bg:            #00032D; /* msci.darkBackground */
  --ms-tile:          #1b1f41; /* msci.darkTile */
  --ms-tile-hover:    #353657; /* msci.darkTileHighlight */
  --ms-border:        #444655; /* msci.darkContrast5 */
  --ms-text:          #86869b; /* msci.darkText / darkLines */
  --ms-headline:      #EAEFFF; /* msci.darkHeadline */
  --ms-gold:          #DAC190; /* msci.darkContrast3 (Gold) */
  --ms-orange:        #F4C43D; /* msci.darkContrast2 (Orange) */
  --ms-pos:           #40D5C4; /* msci.darkPos / LightGreen */
  --ms-neg:           #C12F25; /* msci.darkNeg / Red */
}

/* ---- Page background & base text -------------------------- */
body {
  background-color: var(--ms-bg) !important;
  color: var(--ms-text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ms-headline);
}

a {
  color: var(--ms-gold);
}
a:hover,
a:focus {
  color: var(--ms-orange);
}

/* ---- Navbar -------------------------------------------------- */
.navbar {
  background-color: var(--ms-tile) !important;
  border-color: var(--ms-border);
}
.navbar-brand,
.navbar .navbar-brand a {
  color: var(--ms-gold) !important;
}
.navbar-nav > li > a {
  color: var(--ms-text) !important;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav > .active > a,
.navbar-nav > .open > a {
  color: var(--ms-headline) !important;
  background-color: var(--ms-tile-hover) !important;
}
.dropdown-menu {
  background-color: var(--ms-tile);
  border-color: var(--ms-border);
}
.dropdown-menu > li > a {
  color: var(--ms-text);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--ms-tile-hover);
  color: var(--ms-headline);
}

/* ---- Panels, wells, cards ------------------------------------ */
.panel,
.panel-default,
.well {
  background-color: var(--ms-tile);
  border-color: var(--ms-border);
}
.panel-heading,
.panel-default > .panel-heading {
  background-color: var(--ms-tile-hover);
  border-color: var(--ms-border);
  color: var(--ms-headline);
}
.panel-primary,
.panel-primary > .panel-heading {
  border-color: var(--ms-gold);
}
.panel-primary > .panel-heading {
  background-color: var(--ms-tile-hover);
  color: var(--ms-headline);
}

/* ---- Buttons --------------------------------------------------- */
.btn-primary {
  background-color: var(--ms-gold);
  border-color: var(--ms-gold);
  color: var(--ms-bg);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--ms-orange);
  border-color: var(--ms-orange);
  color: var(--ms-bg);
}

.label-primary,
.badge-primary,
.pagination > .active > a,
.pagination > .active > span,
a.list-group-item.active {
  background-color: var(--ms-gold) !important;
  border-color: var(--ms-gold) !important;
  color: var(--ms-bg) !important;
}
.pagination > li > a {
  background-color: var(--ms-tile);
  border-color: var(--ms-border);
  color: var(--ms-gold);
}

.btn-default {
  background-color: var(--ms-tile-hover);
  border-color: var(--ms-border);
  color: var(--ms-headline);
}
.btn-default:hover,
.btn-default:focus {
  background-color: var(--ms-border);
  border-color: var(--ms-border);
  color: var(--ms-headline);
}

/* ---- Tables (list views) --------------------------------------- */
.table {
  color: var(--ms-text);
}
.table > thead > tr > th {
  border-color: var(--ms-border);
  color: var(--ms-headline);
}
.table > tbody > tr > td,
.table > tbody > tr > th {
  border-color: var(--ms-border);
}
.table-hover > tbody > tr:hover {
  background-color: var(--ms-tile-hover) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* ---- Forms ------------------------------------------------------ */
.form-control {
  background-color: var(--ms-tile);
  border-color: var(--ms-border);
  color: var(--ms-headline);
}
.form-control:focus {
  border-color: var(--ms-gold);
}

/* ---- Select2 dropdowns (Asset/Account/Portfolio pickers) -------- */
/* FAB's select2 init uses the 'bootstrap' theme (select2-container--bootstrap),
   not the library's default theme, so overrides must target that variant. */
.select2-container--bootstrap .select2-selection {
  background-color: var(--ms-tile) !important;
  border-color: var(--ms-border) !important;
  color: var(--ms-headline);
}
.select2-container--bootstrap .select2-selection__rendered {
  color: var(--ms-headline) !important;
}
.select2-container--bootstrap .select2-dropdown {
  background-color: var(--ms-tile);
  border-color: var(--ms-border);
  color: var(--ms-headline);
}
.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
  background-color: var(--ms-bg);
  border-color: var(--ms-border);
  color: var(--ms-headline);
}
.select2-container--bootstrap .select2-results__option {
  color: var(--ms-text);
}
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
  background-color: var(--ms-tile-hover) !important;
  color: var(--ms-headline) !important;
}
.select2-container--bootstrap .select2-results__option[aria-selected="true"] {
  background-color: var(--ms-border) !important;
  color: var(--ms-headline) !important;
}

/* ---- Footer ------------------------------------------------------ */
footer {
  background-color: var(--ms-tile);
  color: var(--ms-text);
}