/*
 * Headtilts Mail: your styles on top of Roundcube's Elastic theme.
 *
 * This file loads after Elastic's own stylesheet, so anything here wins.
 * Edit it, then hard-refresh the browser (Ctrl/Cmd+Shift+R). No rebuild or
 * restart needed: the folder is mounted straight into the webmail container.
 *
 *  1. Brand tokens        change these first
 *  2. Your design         layout, type, sidebar, sign-in page
 *  3. Accent mapping      generated: every place Elastic used its blue,
 *                         re-pointed at --ht-accent (leave as is)
 */

/* ── 1. Brand tokens ──────────────────────────────────────────────────── */
:root {
  --ht-accent: #c3301f;        /* buttons, selection, links, focus rings */
  --ht-ink: #1d1d1f;           /* main text */
  --ht-muted: #6e6e73;
  --ht-page: #f4f4f6;          /* header and footer bars */
  --ht-rule: #e5e5ea;
  --ht-menu: #1d1d1f;          /* the dark task bar on the left */
  --ht-menu-hover: #3a3a3c;
  --ht-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ht-radius: 8px;
}
html.dark-mode {
  --ht-accent: #e5533f;        /* a little brighter so it reads on dark */
  --ht-menu: #0d0d0f;
  --ht-menu-hover: #2c2c2e;
}

/* ── 2. Your design ───────────────────────────────────────────────────── */
body, input, select, textarea, button, .btn, .popover, .dropdown-menu {
  font-family: var(--ht-font);
}
body { color: var(--ht-ink); }
html.dark-mode body { color: #f5f5f7; }

/* Left task bar */
#layout-menu,
#taskmenu .special-buttons,
#layout-menu .popover-header { background-color: var(--ht-menu) !important; }
#taskmenu a:hover,
#taskmenu a:focus,
#taskmenu a.selected,
#taskmenu a.selected:hover,
#taskmenu .action-buttons a:hover { background: var(--ht-menu-hover); }
#taskmenu a.selected { box-shadow: inset 3px 0 0 var(--ht-accent); }
#layout-menu .popover-header img { max-height: 40px; }

/* Header bars over each column */
html:not(.dark-mode) #layout > div > .header,
html:not(.dark-mode) #layout > div > .footer { background-color: var(--ht-page); }
html:not(.dark-mode) #layout > div > .header { border-bottom-color: var(--ht-rule); }

/* Buttons a touch rounder */
.btn, .button, .form-control, .custom-select, .input-group > .form-control { border-radius: var(--ht-radius); }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Unread mail stands out a little more */
table.messagelist tr.unread td.subject span.subject a { font-weight: 700; }
table.messagelist tr.unread td.subject span.subject a { color: var(--ht-ink); }
html.dark-mode table.messagelist tr.unread td.subject span.subject a { color: #fff; }

/* Sign-in page */
body.task-login { background: var(--ht-page); }
html.dark-mode body.task-login { background: #0d0d0f; }
body.task-login #layout-content {
  background: transparent;
}
body.task-login #login-form {
  background: #fff;
  border: 1px solid var(--ht-rule);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
  padding: 2rem 2rem 1.5rem;
  max-width: 400px;
}
html.dark-mode body.task-login #login-form { background: #1c1c1e; border-color: #2c2c2e; box-shadow: none; }
body.task-login #logo { max-width: 220px; max-height: 64px; margin-bottom: 1.5rem; }
body.task-login #login-form .formbuttons .btn { width: 100%; padding: .6rem; font-weight: 600; }
body.task-login #login-footer { color: var(--ht-muted); }

/* ── 3. Accent mapping (generated from Elastic 1.7.4; leave as is) ───── */
a {
  color: color-mix(in srgb, var(--ht-accent) 82%, #000);
}
a:hover {
  color: color-mix(in srgb, var(--ht-accent) 66%, #000);
}
p.image-attachment {
  background-color: color-mix(in srgb, var(--ht-accent) 5%, transparent);
}
.quota-widget .value {
  background-color: var(--ht-accent);
}
.image-tools {
  background-color: color-mix(in srgb, var(--ht-accent) 40%, transparent);
}
.image-tools a:focus,
.image-tools a:hover {
  background-color: color-mix(in srgb, var(--ht-accent) 50%, transparent)!important;
}
.table-widget table.options-table tr.selected td {
  background-color: color-mix(in srgb, var(--ht-accent) 10%, #fff);
}
.floating-action-buttons a.button {
  background: var(--ht-accent);
  box-shadow: 0 0 5px 5px color-mix(in srgb, var(--ht-accent) 11%, #fff);
}
.btn:focus {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ht-accent) 30%, transparent);
}
.btn-link {
  color: color-mix(in srgb, var(--ht-accent) 82%, #000);
}
.btn-primary {
  background: var(--ht-accent);
  border-color: var(--ht-accent);
}
.btn-primary:focus {
  background: color-mix(in srgb, var(--ht-accent) 92%, #000);
  border-color: color-mix(in srgb, var(--ht-accent) 88%, #000);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ht-accent) 50%, transparent);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--ht-accent) 92%, #000);
  border-color: color-mix(in srgb, var(--ht-accent) 88%, #000);
}
.btn-primary.disabled,
.btn-primary:disabled {
  background: var(--ht-accent);
  border-color: var(--ht-accent);
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
  background: color-mix(in srgb, var(--ht-accent) 84%, #000);
  border-color: color-mix(in srgb, var(--ht-accent) 80%, #000);
}
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ht-accent) 53%, transparent);
}
.ui-menu .ui-state-active {
  background-color: var(--ht-accent)!important;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:focus {
  background-color: color-mix(in srgb, var(--ht-accent) 50%, transparent);
}
.ui-slider .ui-slider-range {
  background: color-mix(in srgb, var(--ht-accent) 24%, #fff);
}
.ui-slider .ui-slider-handle.ui-state-active {
  background: var(--ht-accent);
  border-color: color-mix(in srgb, var(--ht-accent) 43%, #000);
}
.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: color-mix(in srgb, var(--ht-accent) 24%, #fff);
  color: var(--ht-accent);
}
.ui-datepicker a.ui-state-active {
  background: var(--ht-accent)!important;
}
html.layout-phone .popover-header,
html.layout-small .popover-header {
  background-color: color-mix(in srgb, var(--ht-accent) 43%, #000);
}
.popover .menu li a:not(.disabled):hover {
  background-color: var(--ht-accent);
}
.popover .menu .dropbutton a.dropdown:hover {
  background-color: var(--ht-accent);
}
@media screen and (min-width:481px) {
  #taskmenu .action-buttons a {
    color: var(--ht-accent);
  }
  #taskmenu .action-buttons a:hover {
    color: var(--ht-accent);
  }
}
.ui.alert {
  background-color: color-mix(in srgb, var(--ht-accent) 5%, transparent);
}
.ui.alert a:not(.btn) {
  color: var(--ht-accent);
}
.ui.alert.boxinformation {
  background-color: color-mix(in srgb, var(--ht-accent) 20%, transparent);
}
#messagestack .alert-info.information {
  background-color: var(--ht-accent);
}
.listing li.selected,
.listing tr.selected td {
  background-color: color-mix(in srgb, var(--ht-accent) 10%, #fff);
}
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 color-mix(in srgb, var(--ht-accent) 49%, #fff);
}
.popupmenu .listing li>a:not(.disabled):hover {
  background-color: var(--ht-accent);
}
.popupmenu .listing li.selected {
  background-color: var(--ht-accent);
}
ul.treelist li.selected>a,
ul.treelist li.selected>div>a {
  background-color: color-mix(in srgb, var(--ht-accent) 10%, #fff);
}
.folderlist li.mailbox .unreadcount {
  background: var(--ht-accent);
}
.folderlist li.mailbox.recent>a {
  color: color-mix(in srgb, var(--ht-accent) 67%, #000);
}
.folderlist li.mailbox.recent>a>.unreadcount {
  background: var(--ht-accent);
}
.formcontent.raweditor .CodeMirror-focused {
  border-color: var(--ht-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ht-accent) 25%, transparent);
}
.input-group a:focus {
  background-color: color-mix(in srgb, var(--ht-accent) 25%, transparent);
}
.multi-input>.content.focused {
  border-color: var(--ht-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ht-accent) 25%, transparent);
}
.recipient-input.focus {
  border-color: var(--ht-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ht-accent) 25%, transparent);
}
.tagedit-list[tabindex="-1"] {
  border-color: var(--ht-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ht-accent) 25%, transparent);
}
.form-control:focus {
  border-color: var(--ht-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ht-accent) 25%, transparent);
}
.input-group-text input:focus {
  border-color: var(--ht-accent)!important;
}
.custom-switch .custom-control-input:focus~.custom-control-label:before {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ht-accent) 25%, transparent);
}
.custom-switch .custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: var(--ht-accent);
}
.custom-switch .custom-control-input:checked~.custom-control-label::before {
  border-color: var(--ht-accent);
  background-color: var(--ht-accent);
}
.custom-switch .custom-control-input:checked:disabled~.custom-control-label::before {
  border-color: color-mix(in srgb, var(--ht-accent) 62%, #fff);
  background-color: color-mix(in srgb, var(--ht-accent) 62%, #fff);
}
.custom-file-input:focus~.custom-file-label {
  border-color: var(--ht-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ht-accent) 25%, transparent);
}
div.tox.focused {
  border-color: var(--ht-accent)!important;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ht-accent) 25%, transparent)!important;
}
div.tox .tox-dialog .tox-dialog__body-nav-item--active {
  color: color-mix(in srgb, var(--ht-accent) 82%, #000);
}
div.tox .tox-dialog .tox-dialog__body-nav-item--active:hover {
  color: color-mix(in srgb, var(--ht-accent) 66%, #000);
}
div.tox .tox-dialog__footer .tox-button {
  background: var(--ht-accent);
  border-color: var(--ht-accent);
}
div.tox .tox-dialog__footer .tox-button:focus {
  background: color-mix(in srgb, var(--ht-accent) 92%, #000);
  border-color: color-mix(in srgb, var(--ht-accent) 88%, #000);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ht-accent) 50%, transparent);
}
div.tox .tox-dialog__footer .tox-button:hover {
  background: color-mix(in srgb, var(--ht-accent) 92%, #000);
  border-color: color-mix(in srgb, var(--ht-accent) 88%, #000);
}
div.tox .tox-dialog__footer .tox-button.disabled,
div.tox .tox-dialog__footer .tox-button:disabled {
  background: var(--ht-accent);
  border-color: var(--ht-accent);
}
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: color-mix(in srgb, var(--ht-accent) 84%, #000);
  border-color: color-mix(in srgb, var(--ht-accent) 80%, #000);
}
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 color-mix(in srgb, var(--ht-accent) 53%, transparent);
}
div.tox .tox-dialog__footer .tox-button:focus:not(:disabled) {
  background: var(--ht-accent);
  border-color: var(--ht-accent);
}
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: var(--ht-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ht-accent) 25%, transparent);
}
.image-selector .attachmentslist li:focus,
.image-selector .attachmentslist li:hover {
  background: color-mix(in srgb, var(--ht-accent) 10%, #fff);
}
.googie_list li.googie_list_onhover {
  background-color: var(--ht-accent);
}
.message-htmlpart blockquote,
.message-part blockquote {
  color: color-mix(in srgb, var(--ht-accent) 51%, #000);
  border-left: 2px solid color-mix(in srgb, var(--ht-accent) 51%, #000);
  border-right: 2px solid color-mix(in srgb, var(--ht-accent) 51%, #000);
}
html.dark-mode {
  scrollbar-color: color-mix(in srgb, var(--ht-accent) 59%, #000) #4d6066;
}
html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--ht-accent) 59%, #000);
}
html.dark-mode #messagestack .alert-info,
html.dark-mode .ui.alert.boxinformation {
  background-color: color-mix(in srgb, var(--ht-accent) 60%, #000);
}
html.dark-mode #taskmenu .action-buttons a {
  color: var(--ht-accent);
}
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: var(--ht-accent);
}
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: var(--ht-accent);
}
html.dark-mode .btn-primary {
  background-color: color-mix(in srgb, var(--ht-accent) 51%, #000);
}
html.dark-mode .btn-primary:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--ht-accent) 59%, #000);
}
html.dark-mode .floating-action-buttons a.button {
  background: color-mix(in srgb, var(--ht-accent) 51%, #000);
}
html.dark-mode .custom-file-label:focus:not(.is-invalid),
html.dark-mode .form-control:focus:not(.is-invalid) {
  border-color: var(--ht-accent);
}
html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::before {
  background-color: color-mix(in srgb, var(--ht-accent) 51%, #000);
}
html.dark-mode .multi-input:not(.is-invalid)>.content.focused {
  border-color: var(--ht-accent);
}
html.dark-mode .input-group a:focus {
  border-color: var(--ht-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--ht-accent) 25%, transparent);
}
html.dark-mode .recipient-input.focus {
  border-color: var(--ht-accent);
}
html.dark-mode .formcontent.raweditor .CodeMirror-focused {
  border-color: var(--ht-accent);
}
html.dark-mode .tox .tox-dialog__footer .tox-button {
  background-color: color-mix(in srgb, var(--ht-accent) 51%, #000);
}
html.dark-mode .tox .tox-dialog__footer .tox-button:focus:not(:disabled) {
  background-color: color-mix(in srgb, var(--ht-accent) 51%, #000);
}
html.dark-mode .tox .tox-dialog__footer .tox-button:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--ht-accent) 59%, #000);
}
html.dark-mode .tox .tox-dialog__body-nav-item--active {
  color: var(--ht-accent);
}
html.dark-mode .tox .tox-collection__item--enabled {
  color: var(--ht-accent);
}
html.dark-mode .message-part blockquote {
  border-color: color-mix(in srgb, var(--ht-accent) 74%, #fff);
  color: color-mix(in srgb, var(--ht-accent) 74%, #fff);
}
html.dark-mode .ui-datepicker .ui-state-highlight,
html.dark-mode .ui-datepicker.ui-widget-content .ui-state-highlight {
  color: var(--ht-accent);
}