/*
 * Flourish colour on elastic. Elastic compiles its colour from one LESS value,
 * @color-main #37beff (skins/elastic/styles/colors.less), so the brand colour is
 * put back by selector where that blue carried meaning: the primary button,
 * the rail's Compose action, unread rows and their badges, focus rings and
 * checked controls. Rose-brown #825E59 is the storefront wordmark's colour
 * (secondary-700) and clears 4.5:1 on white; #DDB2AB (secondary-300) is the
 * same family lifted for dark surfaces. !important because the skin's own
 * rules carry id selectors this file does not repeat.
 */

/* Primary action — LOGIN, Save, Send, the Compose button below */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: #825E59 !important;
    border-color: #825E59 !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: #664744 !important;
    border-color: #664744 !important;
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(130, 94, 89, 0.4) !important;
}

/* Compose above the folder list (flourish.js) */
.flourish-compose {
    display: block;
    margin: 0.5rem 0.75rem 0.25rem;
    text-align: center;
}

/* The rail's Compose action — elastic paints it @color-main */
#taskmenu a.compose,
#taskmenu a.compose:before,
#taskmenu a.action,
#taskmenu a.action:before {
    color: #DDB2AB !important;
}

/* Unread rows and their counts */
.listing tbody tr.unread td.subject,
.listing tbody tr.unread td.subject a,
.listing tbody tr.unread td.subject .subject,
.listing tr.unread .fromto,
.listing tr.unread .subject a {
    color: #825E59 !important;
}

.listing .badge,
.treelist .badge,
#mailboxlist .unreadcount,
#mailboxlist .badge {
    background-color: #825E59 !important;
    color: #fff !important;
}

/* Focus and checked controls */
.form-control:focus,
.custom-file-input:focus ~ .custom-file-label {
    border-color: #B78F8A !important;
    box-shadow: 0 0 0 0.2rem rgba(183, 143, 138, 0.25) !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #825E59 !important;
    border-color: #825E59 !important;
}

/* The mark: a square tile with rounded corners, sized for where it sits */
#logo {
    max-height: 96px;
    border-radius: 20px;
}

#taskmenu img.logo,
#layout-menu img.logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

/* Dark mode — elastic prefixes its dark rules with html.dark-mode */
html.dark-mode .btn-primary,
html.dark-mode .btn-primary:hover,
html.dark-mode .btn-primary:focus {
    background-color: #825E59 !important;
    border-color: #825E59 !important;
}

html.dark-mode .listing tbody tr.unread td.subject,
html.dark-mode .listing tbody tr.unread td.subject a,
html.dark-mode .listing tr.unread .fromto,
html.dark-mode .listing tr.unread .subject a {
    color: #DDB2AB !important;
}

html.dark-mode .form-control:focus {
    border-color: #B78F8A !important;
}