/*
 * Highmark Ventures brand overrides for the Elastic skin.
 *
 * This file only OVERRIDES colours already defined by Elastic's compiled
 * styles.min.css (loaded after it via include_stylesheet()) - no core skin
 * file is edited. Every occurrence of Elastic's default blue accent
 * (#37beff / #00acff / rgba(55,190,255,*)) in skins/elastic/styles/*.less
 * is replaced below with a Highmark Ventures equivalent.
 *
 * Brand tokens (from projects.highmark.ventures/src/app/globals.css):
 *   light: --primary #0a1628 (navy), --accent/--secondary #f0ece1 (cream),
 *          --ring/gold-dark #9e8347 (bronze), --background #faf8f5
 *   dark:  --primary #c9a961 (brass gold), --accent/--secondary #182a48,
 *          --ring/gold-light #e5d4a1, --background #0a1628
 *
 * WCAG 2.1 AA contrast check (4.5:1 for normal text, 3:1 for non-text UI
 * boundaries e.g. focus rings) - computed with the standard relative
 * luminance formula, see report for the calculator used:
 *
 *   TEXT USES (need >=4.5:1)
 *     #7a6433 (gold-text, darkened bronze) on #faf8f5 cream ......  5.36:1  PASS
 *     #7a6433 on #ffffff card ..............................  5.68:1  PASS
 *     [was: #9e8347 original bronze on #faf8f5 ..............  3.42:1  FAIL - replaced]
 *     #0a1628 navy on #faf8f5 / #ffffff ......................  17.1:1  PASS
 *     #0a1628 navy text on #c9a961 gold (badges/popups) ......  8.06:1  PASS
 *     [was: #ffffff on #c9a961 ...............................  2.25:1  FAIL - replaced]
 *     #e5d4a1 gold-light on #0a1628 navy (dark links) ........ 12.31:1  PASS
 *     #e5d4a1 on #182a48 surface-dark (dark selected row) .....  9.75:1  PASS
 *     #e5d4a1 on #2f3a3f taskmenu sidebar (always dark) .......  7.93:1  PASS
 *     #ffffff on #0a1628 navy (button text) ................... 18.13:1  PASS
 *
 *   NON-TEXT UI (need >=3:1)
 *     #0a1628 navy focus-ring boundary vs #faf8f5/#ffffff .....  17.1:1  PASS
 *     #c9a961 gold focus-ring boundary vs #0a1628 navy (dark) .  8.06:1  PASS
 *
 * The off-palette #6e2639 merlot hover colour from the previous version of
 * this file has been removed; hover states now shift within the brand
 * navy/gold family (navy on light, gold on dark) instead.
 */

:root {
  --hm-navy: #0a1628;
  --hm-navy-deep: #050b14;
  --hm-cream: #faf8f5;
  --hm-cream-dark: #f0ece1;
  --hm-gold: #c9a961; /* bright brass: dark-mode primary, badge/popup bg in both modes */
  --hm-gold-light: #e5d4a1; /* pale gold: dark-mode link/text colour */
  --hm-gold-text: #7a6433; /* AA-compliant darkened bronze: light-mode link/text colour (5.36:1 on cream) */
  --hm-surface-dark: #182a48;
  --hm-taskmenu-text: #e5d4a1; /* Elastic's #taskmenu sidebar is #2f3a3f in BOTH themes */
}

/* =========================================================================
   LIGHT MODE (default)
   Action accent = navy #0a1628. Link/text accent = gold-text #7a6433.
   ========================================================================= */

/* ---- Buttons ---- */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
  color: #ffffff;
  background: var(--hm-navy);
  border-color: var(--hm-navy);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--hm-surface-dark);
  border-color: var(--hm-surface-dark);
  box-shadow: 0 0 0 0.2rem rgba(10, 22, 40, 0.5);
}

.btn-primary.disabled,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 0 0.2rem rgba(10, 22, 40, 0.53);
}

.btn:focus {
  box-shadow: 0 0 0 0.2rem rgba(10, 22, 40, 0.3);
}

/* ---- Links ---- */
a,
.btn-link {
  color: var(--hm-gold-text);
}

a:hover,
.btn-link:hover {
  color: var(--hm-navy);
}

.ui.alert a:not(.btn) {
  color: var(--hm-gold-text);
}

/* ---- Focus rings / form controls ---- */
.form-control:focus {
  color: #2c363a;
  border-color: var(--hm-navy);
  box-shadow: 0 0 0 0.2rem rgba(10, 22, 40, 0.25);
}

.input-group-text input:focus {
  border-color: var(--hm-navy) !important;
}

.input-group a:focus {
  background-color: rgba(10, 22, 40, 0.25);
}

.multi-input > .content.focused,
.recipient-input.focus,
.tagedit-list[tabindex="-1"],
.custom-file-input:focus ~ .custom-file-label,
.formcontent.raweditor .CodeMirror-focused {
  border-color: var(--hm-navy);
  box-shadow: 0 0 0 0.2rem rgba(10, 22, 40, 0.25);
}

div.tox.focused,
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(--hm-navy) !important;
  box-shadow: 0 0 0 0.2rem rgba(10, 22, 40, 0.25) !important;
}

div.tox .tox-dialog .tox-dialog__body-nav-item--active {
  color: var(--hm-gold-text);
}

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) {
  background: var(--hm-navy);
  border-color: var(--hm-navy);
}

div.tox .tox-dialog__footer .tox-button:focus {
  background: var(--hm-surface-dark);
  border-color: var(--hm-surface-dark);
  box-shadow: 0 0 0 0.2rem rgba(10, 22, 40, 0.5);
}

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 0.2rem rgba(10, 22, 40, 0.53);
}

/* ---- Checkboxes / switches ---- */
.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(10, 22, 40, 0.25);
}

.custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--hm-navy);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--hm-navy);
  background-color: var(--hm-navy);
}

/* ---- Progress / quota / loaders ---- */
.quota-widget .value {
  background-color: var(--hm-navy);
}

.floating-action-buttons a.button {
  background: var(--hm-navy);
  color: #ffffff;
  box-shadow: 0 0 5px 5px #d7dee8;
}

p.image-attachment {
  background-color: rgba(10, 22, 40, 0.05);
}

.image-tools {
  background-color: rgba(10, 22, 40, 0.4);
}

.image-tools a:focus,
.image-tools a:hover {
  background-color: rgba(10, 22, 40, 0.5) !important;
}

.ui.alert {
  background-color: rgba(10, 22, 40, 0.05);
}

.ui.alert.boxinformation {
  background-color: rgba(10, 22, 40, 0.12);
}

/* ---- jQuery UI widgets ---- */
.ui-menu .ui-state-active {
  background-color: var(--hm-navy) !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:focus {
  background-color: rgba(10, 22, 40, 0.5);
}

.ui-slider .ui-slider-handle.ui-state-active {
  background: var(--hm-navy);
  border-color: var(--hm-navy-deep);
}

.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: var(--hm-cream-dark);
  color: var(--hm-navy);
}

.ui-datepicker a.ui-state-active {
  background: var(--hm-navy) !important;
  color: #ffffff !important;
}

/* ---- Selected rows (subtle, cream background + navy text) ---- */
.listing li.selected,
.listing tr.selected td,
ul.treelist li.selected > a,
ul.treelist li.selected > div > a {
  color: var(--hm-navy);
  background-color: var(--hm-cream-dark);
}

/* ---- Popup menus / suggestion lists / dropdown hover: navy text on gold
        (was white text on blue - 2.25:1, failed AA; navy-on-gold is 8.06:1) ---- */
.popover .menu li a:not(.disabled):hover,
.popupmenu .listing li > a:not(.disabled):hover,
.popupmenu .listing li.selected,
.googie_list li.googie_list_onhover {
  color: var(--hm-navy);
  background-color: var(--hm-gold);
}

.popover .menu .dropbutton a.dropdown:hover {
  background-color: var(--hm-gold);
  color: var(--hm-navy);
}

/* ---- Unread badges: navy text on gold (was white-on-blue) ---- */
.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount {
  background: var(--hm-gold);
  color: var(--hm-navy);
}

/* ---- Task menu (sidebar is always dark #2f3a3f, regardless of theme) ---- */
#taskmenu .action-buttons a {
  color: var(--hm-taskmenu-text);
}

#taskmenu .action-buttons a:hover {
  color: var(--hm-taskmenu-text);
  background: #45555c;
}

/* ---- Notifications ---- */
#messagestack .alert-info.information {
  background-color: var(--hm-navy);
  color: #ffffff;
}

/* ---- Login page ---- */
body.task-login {
  background-color: var(--hm-cream);
}

#login-form .btn-primary {
  background: var(--hm-navy);
  border-color: var(--hm-navy);
}

#login-form .btn-primary:hover {
  background: var(--hm-surface-dark);
  border-color: var(--hm-surface-dark);
}

#logo {
  opacity: 1;
  max-height: 72px;
}

/* =========================================================================
   DARK MODE (Elastic's own "html.dark-mode" toggle)
   Action accent = gold #c9a961. Link/text accent = gold-light #e5d4a1.
   Popups/badges keep the SAME navy-on-gold combo (8.06:1 either theme).
   ========================================================================= */

html.dark-mode {
  background-color: var(--hm-navy);
}

html.dark-mode .btn-primary,
html.dark-mode .btn-primary.disabled,
html.dark-mode .btn-primary:disabled {
  color: var(--hm-navy);
  background: var(--hm-gold);
  border-color: var(--hm-gold);
}

html.dark-mode .btn-primary:hover,
html.dark-mode .btn-primary:focus {
  background: var(--hm-gold-light);
  border-color: var(--hm-gold-light);
}

html.dark-mode a,
html.dark-mode .btn-link {
  color: var(--hm-gold-light);
}

html.dark-mode a:hover,
html.dark-mode .btn-link:hover {
  color: var(--hm-gold);
}

html.dark-mode .custom-file-label:focus:not(.is-invalid),
html.dark-mode .form-control:focus:not(.is-invalid) {
  border-color: var(--hm-gold);
}

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: var(--hm-gold);
}

html.dark-mode .input-group a:focus {
  border-color: var(--hm-gold);
  box-shadow: 0 0 0 0.2rem rgba(201, 169, 97, 0.3);
}

/* ---- Checkboxes / switches (dark mode has its own higher-specificity
        html.dark-mode .custom-switch ... rules in core CSS that would
        otherwise still win over the light-mode override above) ---- */
html.dark-mode .custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--hm-gold);
}

html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  border-color: var(--hm-gold);
  background-color: var(--hm-gold);
}

html.dark-mode .tox .tox-dialog__body-nav-item--active {
  color: var(--hm-gold-light);
}

html.dark-mode #taskmenu .action-buttons a {
  color: var(--hm-taskmenu-text);
}

/* ---- Selected rows (dark surface + pale gold text) ---- */
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(--hm-gold-light);
  background-color: var(--hm-surface-dark);
}

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(--hm-gold-light);
}

html.dark-mode .ui-datepicker .ui-state-highlight,
html.dark-mode .ui-datepicker.ui-widget-content .ui-state-highlight {
  color: var(--hm-gold-light);
  background-color: var(--hm-surface-dark);
}

/* ---- Popups / suggestion lists / "enabled" menu items: navy on gold ---- */
html.dark-mode .tox .tox-collection__item--enabled {
  color: var(--hm-navy);
  background-color: var(--hm-gold);
}

html.dark-mode .popover .menu li a:not(.disabled):hover,
html.dark-mode .popupmenu .listing li > a:not(.disabled):hover,
html.dark-mode .popupmenu .listing li.selected,
html.dark-mode .googie_list li.googie_list_onhover {
  color: var(--hm-navy);
  background-color: var(--hm-gold);
}

/* ---- Unread badges (dark mode): same navy-on-gold combo ---- */
html.dark-mode .folderlist li.mailbox .unreadcount,
html.dark-mode .folderlist li.mailbox.recent > a > .unreadcount {
  background: var(--hm-gold);
  color: var(--hm-navy);
}

/* ---- Login page ---- */
html.dark-mode body.task-login {
  background-color: var(--hm-navy);
}

html.dark-mode #login-form .btn-primary {
  color: var(--hm-navy);
  background: var(--hm-gold);
  border-color: var(--hm-gold);
}

html.dark-mode #login-form .btn-primary:hover {
  background: var(--hm-gold-light);
  border-color: var(--hm-gold-light);
}