/*
 * Korporaal Media: huisstijl voor de Roundcube-skin Elastic.
 *
 * Deel 1 is gegenereerd uit de gecompileerde CSS van Elastic (1.6.19 en
 * 1.7.4): elke regel met de blauwe hoofdkleur #37beff of een tint daarvan,
 * met dezelfde selector en de overeenkomende tint van indigo #514ae2.
 * Deel 2 zijn eigen aanvullingen. Na een grote Roundcube-update opnieuw
 * genereren met recolor.py (zie LEESMIJ.md).
 */

/* ---- Deel 1: gegenereerd ---- */
a{color:#2a22d5}
a:hover{color:#221baa}
p.image-attachment{background-color:rgba(81,74,226,.05)}
.quota-widget .value{background-color:#514ae2}
.image-tools{background-color:rgba(81,74,226,.4)}
.image-tools a:focus,.image-tools a:hover{background-color:rgba(81,74,226,.5)!important}
.table-widget table.options-table tr.selected td{background-color:#eeedfc}
.floating-action-buttons a.button{background:#514ae2;box-shadow:0 0 5px 5px #edecfc}
.btn:focus{box-shadow:0 0 0 .2rem rgba(81,74,226,.3)}
.btn-link{color:#2a22d5}
.btn-primary{background:#514ae2;border-color:#514ae2}
.btn-primary:focus{background:#3d35df;border-color:#342cdd;box-shadow:0 0 0 .2rem rgba(81,74,226,.5)}
.btn-primary:hover{background:#3d35df;border-color:#342cdd}
.btn-primary.disabled,.btn-primary:disabled{background:#514ae2;border-color:#514ae2}
.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active{background:#2b23d8;border-color:#2921d0}
.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(81,74,226,.53)}
.ui-menu .ui-state-active{background-color:#514ae2!important}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:focus{background-color:rgba(81,74,226,.5)}
.ui-slider .ui-slider-range{background:#d6d4f8}
.ui-slider .ui-slider-handle.ui-state-active{background:#514ae2;border-color:#16126e}
.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:#d6d4f8;color:#514ae2}
.ui-datepicker a.ui-state-active{background:#514ae2!important}
html.layout-phone .popover-header,html.layout-small .popover-header{background-color:#16126e}
.popover .menu li a:not(.disabled):hover{background-color:#514ae2}
.popover .menu .dropbutton a.dropdown:hover{background-color:#514ae2}
@media screen and (min-width:481px){#taskmenu .action-buttons a{color:#a5b4fc}#taskmenu .action-buttons a:hover{color:#a5b4fc}}
.ui.alert{background-color:rgba(81,74,226,.05)}
.ui.alert a:not(.btn){color:#514ae2}
.ui.alert.boxinformation{background-color:rgba(81,74,226,.2)}
#messagestack .alert-info.information{background-color:#514ae2}
.listing li.selected,.listing tr.selected td{background-color:#eeedfc}
html:not(.touch) .listing li>a:focus,html:not(.touch) .listing.focus tbody tr.focused>td:first-child,html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused>td.selection+td{border-left:2px solid #aaa6f1}
.popupmenu .listing li>a:not(.disabled):hover{background-color:#514ae2}
.popupmenu .listing li.selected{background-color:#514ae2}
ul.treelist li.selected>a,ul.treelist li.selected>div>a{background-color:#eeedfc}
.folderlist li.mailbox .unreadcount{background:#514ae2}
.folderlist li.mailbox.recent>a{color:#231cad}
.folderlist li.mailbox.recent>a>.unreadcount{background:#514ae2}
.formcontent.raweditor .CodeMirror-focused{border-color:#514ae2;box-shadow:0 0 0 .2rem rgba(81,74,226,.25)}
.input-group a:focus{background-color:rgba(81,74,226,.25)}
.multi-input>.content.focused{border-color:#514ae2;box-shadow:0 0 0 .2rem rgba(81,74,226,.25)}
.recipient-input.focus{border-color:#514ae2;box-shadow:0 0 0 .2rem rgba(81,74,226,.25)}
.tagedit-list[tabindex="-1"]{border-color:#514ae2;box-shadow:0 0 0 .2rem rgba(81,74,226,.25)}
.form-control:focus{border-color:#514ae2;box-shadow:0 0 0 .2rem rgba(81,74,226,.25)}
.input-group-text input:focus{border-color:#514ae2!important}
.custom-switch .custom-control-input:focus~.custom-control-label:before{box-shadow:0 0 0 .2rem rgba(81,74,226,.25)}
.custom-switch .custom-control-input:focus:not(:checked)~.custom-control-label::before{border-color:#514ae2}
.custom-switch .custom-control-input:checked~.custom-control-label::before{border-color:#514ae2;background-color:#514ae2}
.custom-switch .custom-control-input:checked:disabled~.custom-control-label::before{border-color:#9490ed;background-color:#9490ed}
.custom-file-input:focus~.custom-file-label{border-color:#514ae2;box-shadow:0 0 0 .2rem rgba(81,74,226,.25)}
div.tox.focused{border-color:#514ae2!important;box-shadow:0 0 0 .2rem rgba(81,74,226,.25)!important}
div.tox .tox-dialog .tox-dialog__body-nav-item--active{color:#2a22d5}
div.tox .tox-dialog .tox-dialog__body-nav-item--active:hover{color:#221baa}
div.tox .tox-dialog__footer .tox-button{background:#514ae2;border-color:#514ae2}
div.tox .tox-dialog__footer .tox-button:focus{background:#3d35df;border-color:#342cdd;box-shadow:0 0 0 .2rem rgba(81,74,226,.5)}
div.tox .tox-dialog__footer .tox-button:hover{background:#3d35df;border-color:#342cdd}
div.tox .tox-dialog__footer .tox-button.disabled,div.tox .tox-dialog__footer .tox-button:disabled{background:#514ae2;border-color:#514ae2}
div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled).active,div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled):active{background:#2b23d8;border-color:#2921d0}
div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled).active:focus,div.tox .tox-dialog__footer .tox-button:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(81,74,226,.53)}
div.tox .tox-dialog__footer .tox-button:focus:not(:disabled){background:#514ae2;border-color:#514ae2}
div.tox .tox-color-input>input:focus,div.tox .tox-listboxfield .tox-listbox--select:focus,div.tox .tox-textarea:focus,div.tox .tox-textfield:focus{border-color:#514ae2;box-shadow:0 0 0 .2rem rgba(81,74,226,.25)}
.image-selector .attachmentslist li:focus,.image-selector .attachmentslist li:hover{background:#eeedfc}
.googie_list li.googie_list_onhover{background-color:#514ae2}
.message-htmlpart blockquote,.message-part blockquote{color:#1a1583;border-left:2px solid #1a1583;border-right:2px solid #1a1583}
html.dark-mode{scrollbar-color:#1e1899 #4d6066}
html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb{background-color:#1e1899}
html.dark-mode #messagestack .alert-info,html.dark-mode .ui.alert.boxinformation{background-color:#343084}
html.dark-mode #taskmenu .action-buttons a{color:#a5b4fc}
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{color:#a5b4fc}
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{color:#a5b4fc}
html.dark-mode .btn-primary{background-color:#1a1583}
html.dark-mode .btn-primary:hover:not(:disabled){background-color:#1e1899}
html.dark-mode .floating-action-buttons a.button{background:#1a1583}
html.dark-mode .custom-file-label:focus:not(.is-invalid),html.dark-mode .form-control:focus:not(.is-invalid){border-color:#514ae2}
html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::before{background-color:#1a1583}
html.dark-mode .multi-input:not(.is-invalid)>.content.focused{border-color:#514ae2}
html.dark-mode .input-group a:focus{border-color:#514ae2;box-shadow:0 0 0 .2rem rgba(81,74,226,.25)}
html.dark-mode .recipient-input.focus{border-color:#514ae2}
html.dark-mode .formcontent.raweditor .CodeMirror-focused{border-color:#514ae2}
html.dark-mode .tox .tox-dialog__footer .tox-button{background-color:#1a1583}
html.dark-mode .tox .tox-dialog__footer .tox-button:focus:not(:disabled){background-color:#1a1583}
html.dark-mode .tox .tox-dialog__footer .tox-button:hover:not(:disabled){background-color:#1e1899}
html.dark-mode .tox .tox-dialog__body-nav-item--active{color:#a5b4fc}
html.dark-mode .tox .tox-collection__item--enabled{color:#a5b4fc}
html.dark-mode .message-part blockquote{border-color:#7d78e9;color:#a5b4fc}
html.dark-mode .ui-datepicker .ui-state-highlight,html.dark-mode .ui-datepicker.ui-widget-content .ui-state-highlight{color:#a5b4fc}

/* ---- Deel 2: huisstijl ---- */

/* Lettertype zoals de website, met de systeemletter als terugval. */
body, .popover, .ui-dialog, input, select, textarea, button {
    font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Linkermenu in diep indigo, zoals de afsluiters op de website. */
#layout-menu {
    background-color: #1e1b4b;
}
#layout-menu .popover-header,
#layout-menu #taskmenu a.selected {
    background-color: #312e81;
}
#layout-menu #taskmenu a:hover {
    background-color: #312e81;
}
html.dark-mode #layout-menu {
    background-color: #13112e;
}
/* Ingelogd linksboven alleen het icoon: het volledige logo is in het
   smalle menu te klein om te lezen. */
#layout-menu #logo {
    content: url('images/icon.png');
    width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;
    margin-inline: auto;
    object-fit: contain;
}

/* Inlogscherm: papiervlak met een witte kaart, logo groter. */
body.task-login {
    background-color: #f6f5f2;
}
body.task-login #layout-content {
    background-color: transparent;
}
body.task-login #login-form {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(30, 27, 75, .08);
    padding: 2rem 2rem 1.5rem;
}
body.task-login #logo {
    height: 56px;
    width: auto;
    max-width: 280px;
    max-height: none;
    margin-bottom: 1.5rem;
}
html.dark-mode body.task-login {
    background-color: #020617;
}
html.dark-mode body.task-login #login-form {
    background: #0f172a;
    box-shadow: none;
}

/* Donker: Elastic maakt de hoofdkleur daar 30% donkerder. Met indigo werd
   de knop bijna zwart en een link onleesbaar; daarom de huisstijlkleur op
   knoppen en lichtindigo (#a5b4fc, contrast 8:1) op links. */
html.dark-mode .btn-primary,
html.dark-mode .button.mainaction,
html.dark-mode .floating-action-buttons a.button {
    background: #514ae2;
    border-color: #514ae2;
    color: #fff;
}
html.dark-mode .btn-primary:hover,
html.dark-mode .btn-primary:focus,
html.dark-mode .button.mainaction:hover {
    background: #4338ca;
    border-color: #4338ca;
}
html.dark-mode a,
html.dark-mode .btn-link,
html.dark-mode #login-footer a {
    color: #a5b4fc;
}
html.dark-mode a:hover,
html.dark-mode .btn-link:hover {
    color: #c7d2fe;
}