/*
 * Bitik branding over the Roundcube Elastic skin (1.6).
 *
 * Accent #1F5F70 (hover #164754, soft #E6EFF1) and Golos Text match the
 * panel (resources/css/app.css). Selectors mirror the Elastic rules that use
 * its blue accent (#37beff / #00acff); dark mode keeps Elastic's dark
 * surfaces and uses the panel's dark accent #7FB3C2.
 */

@import url('https://fonts.bunny.net/css?family=golos-text:400,500,600,700&display=swap');

/* Typography */

.popover,
body,
button,
input,
optgroup,
select,
textarea,
div.tox,
div.tox :not(.svg) {
    font-family: 'Golos Text', 'Helvetica Neue', Arial, sans-serif;
}

div.tox .tox-color-input > input,
div.tox .tox-listboxfield .tox-listbox--select,
div.tox .tox-textarea,
div.tox .tox-textfield {
    font-family: 'Golos Text', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Logo */

.task-login #logo {
    width: 72px;
    height: 72px;
}

/*
 * With display_product_info = 0 the login footer still prints the bullet
 * separator before the support link; hide the bare text, keep the elements.
 */
#login-footer {
    font-size: 0;
}

#login-footer > * {
    font-size: 1rem;
}

/* Links */

a,
.btn-link,
.ui.alert a:not(.btn),
div.tox .tox-dialog .tox-dialog__body-nav-item--active {
    color: #1f5f70;
}

a:hover,
.btn-link:hover {
    color: #164754;
}

/* Main actions */

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
div.tox .tox-dialog__footer .tox-button,
div.tox .tox-dialog__footer .tox-button.disabled,
div.tox .tox-dialog__footer .tox-button:disabled,
div.tox .tox-dialog__footer .tox-button:focus:not(:disabled) {
    color: #fff;
    background: #1f5f70;
    border-color: #1f5f70;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
    background: #164754;
    border-color: #164754;
}

.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem rgba(31, 95, 112, 0.35);
}

.floating-action-buttons a.button {
    background: #1f5f70;
    box-shadow: 0 0 5px 5px #e6eff1;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    border-color: #1f5f70;
    background-color: #1f5f70;
}

.quota-widget .value,
.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount,
#messagestack .alert-info.information {
    background-color: #1f5f70;
}

/* Focus rings */

.form-control:focus,
.multi-input > .content.focused,
.recipient-input.focus,
.formcontent.raweditor .CodeMirror-focused,
.custom-file-input:focus ~ .custom-file-label,
.tagedit-list[tabindex='-1'] {
    border-color: #1f5f70;
    box-shadow: 0 0 0 0.2rem rgba(31, 95, 112, 0.25);
}

.input-group-text input:focus {
    border-color: #1f5f70 !important;
}

.custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #1f5f70;
}

div.tox.focused {
    border-color: #1f5f70 !important;
    box-shadow: 0 0 0 0.2rem rgba(31, 95, 112, 0.25) !important;
}

/* Selection */

.listing li.selected,
.listing tr.selected td,
ul.treelist li.selected > a,
ul.treelist li.selected > div > a,
.table-widget table.options-table tr.selected td {
    background-color: #e6eff1;
}

.popupmenu .listing li.selected,
.popupmenu .listing li > a:not(.disabled):hover,
.popover .menu li a:not(.disabled):hover,
.popover .menu .dropbutton a.dropdown:hover,
.googie_list li.googie_list_onhover {
    color: #fff;
    background-color: #1f5f70;
}

.ui-menu .ui-state-active,
.ui-datepicker a.ui-state-active {
    background-color: #1f5f70 !important;
}

.ui-datepicker .ui-datepicker-days-cell-over a,
.ui-datepicker .ui-datepicker-days-cell-over a.ui-state-default,
.ui-datepicker .ui-state-highlight,
.ui-datepicker.ui-widget-content .ui-state-highlight {
    background: #e6eff1;
    color: #1f5f70;
}

/* Menu (light mode; Elastic's dark-mode menu rules are more specific and win) */

#layout-menu,
#taskmenu .special-buttons {
    background-color: #1f5f70;
}

@media screen and (min-width: 481px) {
    #layout-menu .popover-header {
        background-color: #1f5f70 !important;
    }
}

#taskmenu a:hover,
#taskmenu a:focus,
#taskmenu a.selected,
#taskmenu a.selected:hover {
    background: #164754;
}

#taskmenu .action-buttons a,
#taskmenu .action-buttons a:hover {
    color: #fff;
}

#taskmenu .action-buttons a:hover {
    background: #164754;
}

/* Elastic's red (#ff5552) is too dark on the accent menu. */
#taskmenu a.logout,
#taskmenu a.logout:hover {
    color: #ffc2ba !important;
}

/*
 * "About" dialog: hide the Roundcube version line and the plugin list with
 * versions; the copyright, license and support link stay.
 */
.task-settings.action-about .sysname,
.task-settings.action-about .readtext {
    display: none;
}

#rcmdraglayer {
    background-color: #1f5f70;
}

/* Dark mode */

html.dark-mode a,
html.dark-mode .btn-link,
html.dark-mode .ui.alert a:not(.btn),
html.dark-mode #taskmenu .action-buttons a,
html.dark-mode .tox .tox-dialog__body-nav-item--active {
    color: #7fb3c2;
}

html.dark-mode a:hover,
html.dark-mode .btn-link:hover {
    color: #9cc6d2;
}

html.dark-mode .btn-primary {
    background-color: #1f5f70;
    border-color: #1f5f70;
    color: #fff;
}

html.dark-mode .btn-primary:hover:not(:disabled) {
    background-color: #286f82;
    border-color: #286f82;
}

html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status,
html.dark-mode .tox .tox-collection__item--enabled,
html.dark-mode .ui-datepicker .ui-state-highlight,
html.dark-mode .ui-datepicker.ui-widget-content .ui-state-highlight {
    color: #7fb3c2;
}

html.dark-mode .form-control:focus:not(.is-invalid),
html.dark-mode .custom-file-label:focus:not(.is-invalid),
html.dark-mode .multi-input:not(.is-invalid) > .content.focused,
html.dark-mode .recipient-input.focus,
html.dark-mode .formcontent.raweditor .CodeMirror-focused {
    border-color: #7fb3c2;
}