/* Shared colour states for the native shell. Keep HTML message content untouched.
   Loaded after refinements.css and secondary-controls.css so Elastic's runtime
   Bootstrap classes cannot bring a different palette back into light mode. */
:root {
    color-scheme: light;
    --dt-search-surface: #f8f2e9;
    --dt-active-surface: #e5d5c0;
    --dt-active-border: #baa084;
    --dt-active-ink: #754824;
    --dt-row-selected: #e5d5c0;
    --dt-row-border: #d8c8b4;
    --dt-avatar-surface: #e0cdb5;
    --dt-avatar-ink: #754824;
    --dt-avatar-border: #cbb192;
    --dt-badge-surface: #d8b68e;
    --dt-badge-ink: #55341d;
    --dt-reply-surface: #e5d5c0;
    --dt-reply-border: #baa084;
    --dt-reply-ink: #754824;
    --dt-quota-track: #dbcbb6;
    --dt-focus-ring: #98613335;
    --dt-toggle-knob: #fff6e8;
    --dt-toggle-track: #94613b;
    --dt-scroll-thumb: #b99d80;
    --dt-button-hover: #ffa360;
    --dt-quote-surface: #eadfce;
    --dt-quote-ink: #65503d;
    --dt-quote-border: #a57448;
    --dt-quote-nested-border: #bea184;
}

html.dark-mode {
    color-scheme: dark;
    --dt-search-surface: #191510;
    --dt-active-surface: #2b2117;
    --dt-active-border: #58422d;
    --dt-active-ink: #ecc39f;
    --dt-row-selected: #251d16;
    --dt-row-border: #2a221c;
    --dt-avatar-surface: #3e3024;
    --dt-avatar-ink: #e5bf98;
    --dt-avatar-border: #5b4330;
    --dt-badge-surface: #59402b;
    --dt-badge-ink: #f4d2af;
    --dt-reply-surface: #302219;
    --dt-reply-border: #64472e;
    --dt-reply-ink: #ebbd94;
    --dt-quota-track: #332920;
    --dt-focus-ring: #dba57330;
    --dt-toggle-knob: #fff0dd;
    --dt-toggle-track: #ff8e44;
    --dt-scroll-thumb: #76553c;
    --dt-quote-surface: #251e17;
    --dt-quote-ink: #dac5ae;
    --dt-quote-border: #b98554;
    --dt-quote-nested-border: #75563b;
}

/* Elastic themes HTML quotes separately from their surrounding message.
   Only plain correspondence adopts these colours; designed HTML keeps its own. */
html body #messagebody :is(.message-part, .message-htmlpart.dt-plain-html) blockquote {
    box-sizing: border-box;
    max-width: 100%;
    margin: 10px 0 !important;
    padding: 8px 14px !important;
    background-color: var(--dt-quote-surface) !important;
    color: var(--dt-quote-ink) !important;
    border: 0 !important;
    border-left: 3px solid var(--dt-quote-border) !important;
    border-radius: 0 5px 5px 0;
}
html body #messagebody :is(.message-part, .message-htmlpart.dt-plain-html) blockquote blockquote {
    background-color: transparent !important;
    border-left-color: var(--dt-quote-nested-border) !important;
}
html body #messagebody :is(.message-part, .message-htmlpart.dt-plain-html) blockquote a {
    color: var(--dt-accent);
}
html body #messagebody :is(.message-part, .message-htmlpart.dt-plain-html) blockquote.blockquote-header {
    /* Native collapse fixes the row height: keep its label and toggle visible. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 5rem !important;
}
html body #messagebody :is(.message-part, .message-htmlpart.dt-plain-html) span.blockquote-link {
    color: var(--dt-quote-ink);
    background: var(--dt-quote-surface);
    border-color: var(--dt-quote-border);
}
html body #messagebody :is(.message-part, .message-htmlpart.dt-plain-html) span.blockquote-link:is(:hover, :focus-visible) {
    color: var(--dt-accent);
    border-color: var(--dt-accent);
}

/* The lighter background needs darker secondary text, not reduced opacity. */
html:not(.dark-mode) body:not(.task-login) {
    --dt-muted: #74604d;
    --dt-accent: #8c5629;
}

html body:not(.task-login) #dt-topbar .searchbar,
html body:not(.task-login) .searchbar {
    background-color: var(--dt-search-surface) !important;
    border-color: var(--dt-line) !important;
    color: var(--dt-muted);
}
html body:not(.task-login) .searchbar input {
    background-color: transparent !important;
    color: var(--dt-text) !important;
    caret-color: var(--dt-accent);
}
html body:not(.task-login) .searchbar :is(a.button, a.options) {
    background-color: transparent !important;
    color: var(--dt-muted) !important;
    border-color: transparent !important;
}
html body:not(.task-login) .searchbar :is(a.button, a.options):is(:hover, :focus-visible),
html body:not(.task-login) .searchbar.open a.options {
    background-color: var(--dt-selected) !important;
    color: var(--dt-accent) !important;
}
html body:not(.task-login) .searchbar:focus-within {
    border-color: var(--dt-accent) !important;
}
html body:not(.task-login) .searchoptions {
    background-color: var(--dt-side);
    color: var(--dt-text);
    border-color: var(--dt-line);
}

html body.task-mail .dt-list-filters button.active,
html body.task-mail .dt-list-filters button.active.btn-secondary,
html body.task-mail .dt-list-filters button.active.btn-secondary:is(:hover, :focus, :active) {
    background: var(--dt-active-surface) !important;
    border-color: var(--dt-active-border) !important;
    color: var(--dt-active-ink) !important;
}
html body.task-mail .dt-list-filters button:not(.active).btn-secondary:is(:hover, :focus-visible),
html body.task-mail .dt-icon.btn-secondary:is(:hover, :focus-visible) {
    background-color: var(--dt-selected) !important;
    color: var(--dt-accent) !important;
}

html body.task-mail .messagelist tr.message td {
    border-bottom-color: var(--dt-row-border) !important;
}
html body.task-mail .messagelist tr:is(.selected, .focused) td {
    background: var(--dt-row-selected) !important;
    color: var(--dt-text) !important;
}
html body.task-mail .messagelist td.subject > span.date,
html body.task-mail .messagelist td.flags .unflagged:before {
    color: var(--dt-muted) !important;
}
html body.task-mail .folderlist .unreadcount {
    background: var(--dt-badge-surface) !important;
    color: var(--dt-badge-ink) !important;
}
html body .dt-avatar {
    background: var(--dt-avatar-surface);
    color: var(--dt-avatar-ink);
    border-color: var(--dt-avatar-border);
}
html body .dt-reply-actions a {
    background: transparent;
    color: var(--dt-reply-ink) !important;
    border-color: var(--dt-reply-border);
}
html body .dt-reply-actions a:first-child,
html body .dt-reply-actions a:is(:hover, :focus-visible) {
    background: var(--dt-reply-surface);
}
html body .dt-letter-label {
    color: var(--dt-muted);
}
html body .dt-letter-label > span {
    color: var(--dt-reply-ink);
    border-color: var(--dt-reply-border);
}
html body #quotadisplay .bar {
    background: var(--dt-quota-track);
}
html:not(.dark-mode) body :is(.dt-breadcrumb, .dt-nav-caption, .dt-list-heading > .dt-eyebrow) {
    color: var(--dt-muted);
}
html:not(.dark-mode) body.task-mail.action-none #layout-menu .dt-brand small {
    color: var(--dt-muted);
}

/* Compose remains orange through mouse, keyboard, selected and active states. */
html body #taskmenu .action-buttons a,
html body #taskmenu .action-buttons a:is(.selected, :active),
html body:not(.task-login) .btn-primary {
    background-color: var(--dt-orange) !important;
    border-color: var(--dt-orange) !important;
    color: #25170e !important;
}
html body #taskmenu .action-buttons a:is(:hover, :focus, :focus-visible),
html body:not(.task-login) .btn-primary:is(:hover, :focus, :active) {
    background-color: var(--dt-button-hover) !important;
    border-color: var(--dt-button-hover) !important;
    color: #25170e !important;
}
html body:not(.task-login) .btn-secondary {
    background-color: var(--dt-selected);
    color: var(--dt-text);
    border-color: var(--dt-line);
}
html body:not(.task-login) .btn-secondary:is(:hover, :focus, :active) {
    background-color: var(--dt-selected);
    color: var(--dt-accent);
    border-color: var(--dt-accent);
}

/* Keep the same native fields, dropdown arrows and focus affordances. */
html body:not(.task-login) :is(.form-control, .custom-select, .recipient-input, .input-group-text) {
    background-color: var(--dt-side) !important;
    border-color: var(--dt-line) !important;
    color: var(--dt-text) !important;
}
html body:not(.task-login) :is(.form-control:focus, .custom-select:focus, .recipient-input.focus) {
    background-color: var(--dt-side) !important;
    border-color: var(--dt-accent) !important;
    box-shadow: 0 0 0 2px var(--dt-focus-ring) !important;
}
html body:not(.task-login) .recipient-input input {
    background-color: transparent !important;
    color: var(--dt-text) !important;
}
html body:not(.task-login) :is(input[type=checkbox], input[type=radio]) {
    accent-color: var(--dt-toggle-track);
}
html body:not(.task-login) .custom-switch .custom-control-label:before {
    background-color: var(--dt-selected) !important;
    border-color: var(--dt-muted) !important;
}
html body:not(.task-login) .custom-switch .custom-control-label:after {
    background-color: var(--dt-muted) !important;
}
html body:not(.task-login) .custom-switch .custom-control-input:checked ~ .custom-control-label:before {
    background-color: var(--dt-toggle-track) !important;
    border-color: var(--dt-toggle-track) !important;
}
html body:not(.task-login) .custom-switch .custom-control-input:checked ~ .custom-control-label:after {
    background-color: var(--dt-toggle-knob) !important;
}
html body:not(.task-login) .custom-switch .custom-control-input:focus ~ .custom-control-label:before {
    border-color: var(--dt-accent) !important;
    box-shadow: 0 0 0 2px var(--dt-focus-ring) !important;
}
html body:not(.task-login) .custom-switch .custom-control-input:disabled ~ .custom-control-label {
    opacity: .45;
}

/* Contact and settings selection must not inherit Elastic's pale blue rows. */
html body :is(#directorylist, #savedsearchlist, #settings-menu) li.selected,
html body :is(#directorylist, #savedsearchlist, #settings-menu) li.selected > :is(a, div),
html body :is(#directorylist, #savedsearchlist, #settings-menu) li.selected > div > a,
html body :is(#contacts-table, #sections-table) tr:is(.selected, .focused) > td {
    background-color: var(--dt-selected) !important;
    color: var(--dt-text) !important;
}
html body :is(#directorylist, #savedsearchlist, #settings-menu) li > a:is(:hover, :focus-visible),
html body :is(#contacts-table, #sections-table) tr:hover > td {
    background-color: var(--dt-selected) !important;
    color: var(--dt-text) !important;
}
html body :is(#directorylist, #savedsearchlist, #settings-menu) li.selected > ul {
    background: transparent !important;
}
html body :is(.popover, .popupmenu, .ui-dialog) .listing :is(li.selected > a, li > a:hover) {
    background-color: var(--dt-selected) !important;
    color: var(--dt-text) !important;
}
html body .scroller {
    scrollbar-color: var(--dt-scroll-thumb) transparent;
}
html body .scroller::-webkit-scrollbar-thumb {
    background-color: var(--dt-scroll-thumb);
}

/* Elastic focuses the first VISIBLE cell when its selection checkbox column is
   hidden: .focus:not(.withselection) td.selection + td. The older override only
   reached td:first-child, leaving this sibling's cyan border beside our inset
   copper indicator. Keep its reserved width, use one inset indicator for mail. */
html body.task-mail #messagelist tbody tr > td:first-child,
html body.task-mail #messagelist:not(.withselection) tbody tr > td.selection + td {
    border-left-color: transparent !important;
}
html body.task-mail #messagelist tbody tr:is(.selected, .focused) > td.subject {
    box-shadow: inset 2px 0 var(--dt-accent) !important;
}
html body :is(#contacts-table, #sections-table).focus tbody tr.focused > td:first-child,
html body :is(#contacts-table, #sections-table).focus:not(.withselection) tbody tr.focused > td.selection + td {
    border-left-color: var(--dt-accent) !important;
}