/* Matiku branding layered over Roundcube's Elastic skin. */
:root {
  --matiku-navy: #0c2344;
  --matiku-navy-hover: #15365f;
  --matiku-emerald: #17624a;
  --matiku-gold: #c5a247;
  --matiku-porcelain: #fafaf9;
}

a,
a:hover,
.menu.toolbar a.selected,
.listing li.selected > a,
.listing tr.selected td a {
  color: var(--matiku-emerald);
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  background: var(--matiku-emerald);
  border-color: var(--matiku-emerald);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background: #105039;
  border-color: #105039;
  color: #fff;
  box-shadow: 0 0 0 .2rem rgba(23, 98, 74, .18);
}

.form-control:focus {
  border-color: var(--matiku-emerald);
  box-shadow: 0 0 0 .2rem rgba(23, 98, 74, .16);
}

#layout-menu,
html.dark-mode #layout-menu {
  background: var(--matiku-navy);
}

#layout-menu .popover-header,
html.dark-mode #layout-menu .popover-header {
  background: #fff;
  border-right: 1px solid #e7e5e4;
}

#layout-menu .popover-header img {
  width: 88px;
  max-width: 88px;
  max-height: 58px;
  object-fit: contain;
}

#taskmenu a.selected,
#taskmenu a:hover,
#taskmenu a:focus,
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a:focus {
  background: var(--matiku-navy-hover);
  color: #fff;
}

#taskmenu a.compose,
#taskmenu a.compose:hover,
#taskmenu a.compose:focus {
  color: #f4d47d;
}

#layout-sidebar > .header,
#layout-list > .header,
#layout-content > .header {
  background: var(--matiku-porcelain);
}

.listing li.selected,
.listing tr.selected td {
  background: #e8f2ed;
}

html.dark-mode .listing li.selected,
html.dark-mode .listing tr.selected td {
  background: rgba(23, 98, 74, .4);
}

html.dark-mode .listing li.selected > a,
html.dark-mode .listing tr.selected td a {
  color: #b8e5cf;
}