/* Hitt Hosting webmail theme — hand-written overrides */
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap");

body,
input,
button,
select,
textarea,
.form-control,
.btn {
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* native form widgets not covered by Bootstrap custom controls */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #2f55d4;
}

/* task rail styling lives in the "portal sidebar" section appended after
   the generated palette remap, so it can override those rules */
/* generated from elastic styles.min.css by gen_hitt_css.py — do not hand-edit below */
a{color:#2f55d4}
@media screen and (min-width:481px){#layout-menu .popover-header{background-color:#161c2d!important}}
@media screen and (min-width:481px){#layout-menu{background-color:#161c2d}}
#rcmdraglayer{background-color:#161c2d}
p.image-attachment{background-color:rgba(47,85,212,.05)}
.quota-widget .value{background-color:#2f55d4}
.image-tools{background-color:rgba(47,85,212,.4)}
.image-tools a:focus,.image-tools a:hover{background-color:rgba(47,85,212,.5)!important}
.table-widget table.options-table tr.selected td{background-color:#eaeffb}
.floating-action-buttons a.button{background:#2f55d4}
.btn:focus{box-shadow:0 0 0 .2rem rgba(47,85,212,.3)}
.btn-link{color:#2f55d4}
.btn-primary{background:#2f55d4;border-color:#2f55d4}
.btn-primary:focus{background:#2647c0;border-color:#2444b8;box-shadow:0 0 0 .2rem rgba(47,85,212,.5)}
.btn-primary:hover{background:#2647c0;border-color:#2444b8}
.btn-primary.disabled,.btn-primary:disabled{background:#2f55d4;border-color:#2f55d4}
.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(47,85,212,.53)}
.ui-menu .ui-state-active{background-color:#2f55d4!important}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:focus{background-color:rgba(47,85,212,.5)}
.ui-slider .ui-slider-handle.ui-state-active{background:#2f55d4}
.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{color:#2f55d4}
.ui-datepicker a.ui-state-active{background:#2f55d4!important}
.popover .menu li a:not(.disabled):hover{background-color:#2f55d4}
.popover .menu .dropbutton a.dropdown:hover{background-color:#2f55d4}
@media screen and (min-width:481px){#taskmenu a.selected{background:#26304f}}
@media screen and (min-width:481px){#taskmenu a.selected:hover{background:#26304f}}
@media screen and (min-width:481px){#taskmenu a:hover{background:#26304f}}
@media screen and (min-width:481px){#taskmenu .special-buttons{background-color:#161c2d}}
@media screen and (min-width:481px){#taskmenu .action-buttons a{color:#2f55d4}}
@media screen and (min-width:481px){#taskmenu .action-buttons a:hover{color:#2f55d4;background:#26304f}}
@media screen and (min-width:1025px){#taskmenu a:focus{background-color:#26304f}}
.ui.alert{background-color:rgba(47,85,212,.05)}
.ui.alert a:not(.btn){color:#2f55d4}
.ui.alert.boxinformation{background-color:rgba(47,85,212,.2)}
#messagestack .alert-info.information{background-color:#2f55d4}
.listing li.selected,.listing tr.selected td{background-color:#eaeffb}
.popupmenu .listing li>a:not(.disabled):hover{background-color:#2f55d4}
.popupmenu .listing li.selected{background-color:#2f55d4}
ul.treelist li.selected>a,ul.treelist li.selected>div>a{background-color:#eaeffb}
.folderlist li.mailbox .unreadcount{background:#2f55d4}
.folderlist li.mailbox.recent>a>.unreadcount{background:#2f55d4}
.formcontent.raweditor .CodeMirror-focused{border-color:#2f55d4;box-shadow:0 0 0 .2rem rgba(47,85,212,.25)}
.input-group a:focus{background-color:rgba(47,85,212,.25)}
.multi-input>.content.focused{border-color:#2f55d4;box-shadow:0 0 0 .2rem rgba(47,85,212,.25)}
.recipient-input.focus{border-color:#2f55d4;box-shadow:0 0 0 .2rem rgba(47,85,212,.25)}
.tagedit-list[tabindex="-1"]{border-color:#2f55d4;box-shadow:0 0 0 .2rem rgba(47,85,212,.25)}
.form-control:focus{border-color:#2f55d4;box-shadow:0 0 0 .2rem rgba(47,85,212,.25)}
.input-group-text input:focus{border-color:#2f55d4!important}
.custom-switch .custom-control-input:focus~.custom-control-label:before{box-shadow:0 0 0 .2rem rgba(47,85,212,.25)}
.custom-switch .custom-control-input:focus:not(:checked)~.custom-control-label::before{border-color:#2f55d4}
.custom-switch .custom-control-input:checked~.custom-control-label::before{border-color:#2f55d4;background-color:#2f55d4}
.custom-switch .custom-control-input:checked:disabled~.custom-control-label::before{border-color:#a9bcee;background-color:#a9bcee}
.custom-file-input:focus~.custom-file-label{border-color:#2f55d4;box-shadow:0 0 0 .2rem rgba(47,85,212,.25)}
div.tox.focused{border-color:#2f55d4!important;box-shadow:0 0 0 .2rem rgba(47,85,212,.25)!important}
div.tox .tox-dialog .tox-dialog__body-nav-item--active{color:#2f55d4}
div.tox .tox-dialog__footer .tox-button{background:#2f55d4;border-color:#2f55d4}
div.tox .tox-dialog__footer .tox-button:focus{background:#2647c0;border-color:#2444b8;box-shadow:0 0 0 .2rem rgba(47,85,212,.5)}
div.tox .tox-dialog__footer .tox-button:hover{background:#2647c0;border-color:#2444b8}
div.tox .tox-dialog__footer .tox-button.disabled,div.tox .tox-dialog__footer .tox-button:disabled{background:#2f55d4;border-color:#2f55d4}
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(47,85,212,.53)}
div.tox .tox-dialog__footer .tox-button:focus:not(:disabled){background:#2f55d4;border-color:#2f55d4}
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:#2f55d4;box-shadow:0 0 0 .2rem rgba(47,85,212,.25)}
.image-selector .attachmentslist li:focus,.image-selector .attachmentslist li:hover{background:#eaeffb}
.googie_list li.googie_list_onhover{background-color:#2f55d4}
.message-htmlpart blockquote,.message-part blockquote{color:#1a338c;border-left:2px solid #1a338c;border-right:2px solid #1a338c}
html.dark-mode{scrollbar-color:#1e3a9e #4d6066}
html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb{background-color:#1e3a9e}
html.dark-mode #taskmenu .action-buttons a{color:#2f55d4}
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:#2f55d4}
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:#2f55d4}
html.dark-mode .btn-primary{background-color:#1a338c}
html.dark-mode .btn-primary:hover:not(:disabled){background-color:#1e3a9e}
html.dark-mode .floating-action-buttons a.button{background:#1a338c}
html.dark-mode .custom-file-label:focus:not(.is-invalid),html.dark-mode .form-control:focus:not(.is-invalid){border-color:#2f55d4}
html.dark-mode .custom-switch .custom-control-input:checked~.custom-control-label::before{background-color:#1a338c}
html.dark-mode .multi-input:not(.is-invalid)>.content.focused{border-color:#2f55d4}
html.dark-mode .input-group a:focus{border-color:#2f55d4;box-shadow:0 0 0 .2rem rgba(47,85,212,.25)}
html.dark-mode .recipient-input.focus{border-color:#2f55d4}
html.dark-mode .formcontent.raweditor .CodeMirror-focused{border-color:#2f55d4}
html.dark-mode .tox .tox-dialog__footer .tox-button{background-color:#1a338c}
html.dark-mode .tox .tox-dialog__footer .tox-button:focus:not(:disabled){background-color:#1a338c}
html.dark-mode .tox .tox-dialog__footer .tox-button:hover:not(:disabled){background-color:#1e3a9e}
html.dark-mode .tox .tox-dialog__body-nav-item--active{color:#2f55d4}
html.dark-mode .tox .tox-collection__item--enabled{color:#2f55d4}
html.dark-mode .ui-datepicker .ui-state-highlight,html.dark-mode .ui-datepicker.ui-widget-content .ui-state-highlight{color:#2f55d4}
/* — portal-style sidebar — matches .portal-nav in the hitthosting portal
   (src/views/portal/PortalLayout.vue): light card, ink text, primary pill
   on hover/active; portal dark palette in dark mode. Must stay AFTER the
   generated palette remap so it overrides the rail rules in it. — */

#layout-menu,
#taskmenu .special-buttons {
  background-color: #fff;
}
/* the chrome header carries the brand now — drop the small rail logo,
   and hide the dark-mode toggle (auto dark via prefers-color-scheme stays) */
#layout-menu .popover-header #logo,
#taskmenu .special-buttons a.theme {
  display: none !important;
}
@media screen and (min-width: 481px) {
  /* the 58px popover-header only held the logo on desktop — remove it
     entirely so the task icons start at the top (on phones it stays:
     it carries the popover close button) */
  #layout-menu .popover-header {
    display: none !important;
  }
  /* elastic pins .special-buttons to bottom:0 with no positioned
     ancestor, i.e. the viewport — which the chrome footer now owns.
     Contain them to the rail so they sit above the footer. */
  #layout-menu {
    position: relative;
  }
}
#layout-menu {
  border-right: 1px solid #e9ecef;
}
#layout-menu .popover-header {
  background-color: #fff !important;
  color: #161c2d;
}
#taskmenu a,
#taskmenu a:visited {
  color: #161c2d;
  font-weight: 500;
  border-radius: 8px;
}
#taskmenu a:hover,
#taskmenu a:focus {
  background: #f1f3f7;
  color: #2f55d4;
}
#taskmenu a.selected,
#taskmenu a.selected:hover,
#taskmenu a.selected:focus {
  background: rgba(47, 85, 212, 0.10);
  color: #2f55d4;
}
#taskmenu .action-buttons a {
  color: #2f55d4;
}
#taskmenu .action-buttons a:hover,
#taskmenu .action-buttons a:focus {
  background: #f1f3f7;
  color: #2445b3;
}

/* dark mode — portal dark theme palette */
html.dark-mode #layout-menu {
  background: #1a1f29;
  border-right: 1px solid #2a313d;
}
html.dark-mode.layout-phone #layout-menu {
  background: #1a1f29;
}
html.dark-mode #taskmenu .special-buttons {
  background: #1a1f29 !important;
}
html.dark-mode #layout-menu .popover-header {
  background: #1a1f29 !important;
  border-bottom: 1px solid #2a313d;
}
html.dark-mode #taskmenu a,
html.dark-mode #taskmenu a:visited {
  color: #d7dadf;
}
html.dark-mode #taskmenu a:hover,
html.dark-mode #taskmenu a:focus {
  background: #232936;
  color: #6c8ee8;
}
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.selected:hover,
html.dark-mode #taskmenu a.selected:focus {
  background: rgba(108, 142, 232, 0.18);
  color: #6c8ee8;
}
html.dark-mode #taskmenu .special-buttons a:not(:focus) {
  background: #232936;
}
html.dark-mode #taskmenu .action-buttons a {
  color: #6c8ee8;
}
/* — Hitt Hosting site chrome — compact header + footer bar injected by
   hitt_theme.php, mirroring SiteNav.vue / SiteFooter.vue — */

/* scoped via :has so framed documents (message preview iframe etc.),
   which get this stylesheet but no injected chrome, keep elastic's
   stock full-height layout */
body:has(> #hh-chrome-header) {
  display: flex;
  flex-direction: column;
}
body:has(> #hh-chrome-header) #layout {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

#hh-chrome-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background-color: #fff;
  border-bottom: 1px solid #e9ecef;
  /* .site-nav.scrolled shadow — separates the chrome from the app's own
     light-gray toolbars in light mode (they wash together in Chromium) */
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 100;
}

/* app column headers (email actions, list header): deepen elastic's
   #f4f4f4 to a cooler gray with a crisper border so the toolbar reads
   as its own surface against the white chrome and rail */
body:has(> #hh-chrome-header) #layout > div > .header {
  background-color: #eef0f5;
  border-bottom-color: #d8dce6;
}
html.dark-mode body:has(> #hh-chrome-header) #layout > div > .header {
  background-color: unset;
  border-bottom-color: #4d6066;
}
.hh-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
}
.hh-brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #1d24ca;
  border-radius: 8px;
}
.hh-brand-text {
  font-size: 18px;
  font-weight: 700;
  color: #090909;
}
.hh-brand-sub {
  font-size: 13px;
  color: #8492a6;
  margin-left: 2px;
  padding-left: 12px;
  border-left: 1px solid #e9ecef;
}
.hh-links a {
  font-size: 14px;
  font-weight: 500;
  color: #161c2d;
  text-decoration: none;
  margin-left: 20px;
}
.hh-links a:hover {
  color: #2f55d4;
  text-decoration: none;
}

#hh-chrome-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 8px 16px;
  background: #07083a;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
#hh-chrome-footer p {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.hh-footer-links a {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  margin-left: 16px;
}
.hh-footer-links a:first-child {
  margin-left: 0;
}
.hh-footer-links a:hover {
  color: #fff;
  text-decoration: none;
}

/* dark mode — match the portal dark palette */
html.dark-mode #hh-chrome-header {
  background-color: #1a1f29;
  border-bottom: 1px solid #2a313d;
}
html.dark-mode .hh-brand-text {
  color: #d7dadf;
}
html.dark-mode .hh-brand-sub {
  border-left-color: #2a313d;
}
html.dark-mode .hh-links a {
  color: #d7dadf;
}
html.dark-mode .hh-links a:hover {
  color: #6c8ee8;
}

/* phones: reclaim vertical space — drop the footer, tighten the header */
html.layout-phone #hh-chrome-footer {
  display: none;
}
html.layout-phone #hh-chrome-header {
  padding: 6px 12px;
}
html.layout-phone .hh-links a {
  margin-left: 12px;
}