/*
 * Roundcube custom colors.
 *
 * Change only the values in this first block for usual branding changes.
 * After editing, hard-refresh the browser because Roundcube caches static files.
 */
:root {
  /* Main primary button color: Send, Save, Search, dialog confirm buttons. */
  --brand-button-bg: #0f7a68;

  /* Button border. Usually keep this slightly darker than --brand-button-bg. */
  --brand-button-border: #0b5f52;

  /* Button color on hover/focus. */
  --brand-button-hover-bg: #0b6658;

  /* Button color when pressed/active. */
  --brand-button-active-bg: #084d43;

  /* Text/icon color inside primary buttons. */
  --brand-button-text: #ffffff;

  /* Thin inner interface lines: list separators, panel borders, toolbar borders. */
  --brand-line-color: #cfd9d6;

  /* Slightly stronger line for selected/focused areas. */
  --brand-line-strong: #9fb2ac;

  /* Selected row / active folder background tint. */
  --brand-selection-bg: #e6f2ef;
}

/* Primary Bootstrap-style buttons. */
.btn-primary,
.ui-dialog .btn-primary,
button.btn-primary,
input.btn-primary,
a.btn-primary {
  color: var(--brand-button-text) !important;
  background-color: var(--brand-button-bg) !important;
  border-color: var(--brand-button-border) !important;
}

/* Primary button hover and keyboard focus. */
.btn-primary:hover,
.btn-primary:focus,
.ui-dialog .btn-primary:hover,
.ui-dialog .btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus,
input.btn-primary:hover,
input.btn-primary:focus,
a.btn-primary:hover,
a.btn-primary:focus {
  color: var(--brand-button-text) !important;
  background-color: var(--brand-button-hover-bg) !important;
  border-color: var(--brand-button-hover-bg) !important;
}

/* Primary button pressed/active state. */
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
  color: var(--brand-button-text) !important;
  background-color: var(--brand-button-active-bg) !important;
  border-color: var(--brand-button-active-bg) !important;
}

/* Toolbar icon buttons and selected action buttons. */
a.button.active,
.toolbar a.button.active,
.floating-action-buttons a.button {
  color: var(--brand-button-bg);
}

/* Thin lines inside the layout: sidebars, lists, headers, toolbars. */
#layout-sidebar,
#layout-list,
#layout-content,
.header,
.footer,
.toolbar,
.listing li,
.listing tbody tr,
.listbox,
.menu.toolbar,
.popupmenu,
.formcontent,
.propform,
.iframe-wrapper {
  border-color: var(--brand-line-color) !important;
}

/* Inner row separators in message/contact/folder lists. */
.listing li,
.listing tbody tr td {
  border-color: var(--brand-line-color) !important;
}

/* Active/selected list rows and selected folder. */
.listing li.selected,
.listing tbody tr.selected,
.treelist li.selected > a,
.folderlist li.selected > a {
  background-color: var(--brand-selection-bg) !important;
  border-color: var(--brand-line-strong) !important;
}

/* Inputs and selects: border line color. */
.form-control,
.custom-select,
input,
select,
textarea {
  border-color: var(--brand-line-color);
}

.form-control:focus,
.custom-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-line-strong);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-button-bg) 18%, transparent);
}