/* Avoid horizontal scroll from 100vw + scrollbar or wide children clipping important controls */
html {
  overflow-x: clip;
  max-width: 100%;
}
body {
  overflow-x: clip;
  max-width: 100%;
}
@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

/* Shared helpdesk header - nav + search flex, theme/sign-in cluster as sibling (no overlap) */
.helpdesk-bar {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 12px 16px;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 2000;
  overflow: visible;
}
.helpdesk-bar .hd-signin-wrap { overflow: visible; }
.helpdesk-bar .hd-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
}
.helpdesk-bar .hd-nav-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 0;
}
.helpdesk-bar .hd-actions,
.helpdesk-bar .hd-right-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.helpdesk-bar > .hd-right-group {
  margin-left: auto;
}
.helpdesk-bar .hd-nav .hd-right-group {
  margin-left: auto;
}
.helpdesk-bar .hd-spacer { display: none; }

body.dark .helpdesk-bar { background: #161b22; border-bottom: 1px solid #30363d; }
body.light .helpdesk-bar { background: #fff; border-bottom: 1px solid #d0d7de; }

/* Logo + “KHS Helpdesk” lockup */
.helpdesk-bar .hd-brand,
.topbar .hd-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 16px;
  flex-shrink: 0;
  min-width: 0;
}
a.hd-brand,
a.topbar-title {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.hd-brand:hover,
a.topbar-title:hover {
  opacity: 0.92;
}
.helpdesk-bar .hd-logo {
  height: 36px;
  width: auto;
  max-width: min(140px, 26vw);
  object-fit: contain;
  object-position: left center;
  display: block;
  flex-shrink: 0;
}
.helpdesk-bar .hd-title {
  font-size: 18px;
  font-weight: 700;
  margin-right: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
body.dark .hd-title { color: #f0f6fc; }
body.light .hd-title { color: #24292f; }

.helpdesk-bar .hd-btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: inherit;
  flex-shrink: 0;
  box-sizing: border-box;
  vertical-align: middle;
}
.helpdesk-bar .hd-tools-subnav,
.topbar .hd-tools-subnav {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-left: 4px;
}
.helpdesk-bar .hd-tools-subnav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.helpdesk-bar .hd-tools-group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin-right: 2px;
  white-space: nowrap;
}
.helpdesk-bar .hd-tools-more-wrap,
.topbar .hd-tools-more-wrap {
  position: relative;
  display: inline-flex;
}
.topbar .hd-tools-more-wrap button.hd-tools-more-btn {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
body.dark .topbar .hd-tools-more-wrap button.hd-tools-more-btn {
  background: #30363d;
  color: #e6edf3;
  border: 1px solid #444c56;
}
body.dark .topbar .hd-tools-more-wrap button.hd-tools-more-btn:hover,
body.dark .topbar .hd-tools-more-wrap button.hd-tools-more-btn.active {
  background: #484f58;
}
body.light .topbar .hd-tools-more-wrap button.hd-tools-more-btn {
  background: #f6f8fa;
  color: #24292f;
  border: 1px solid #d0d7de;
}
body.light .topbar .hd-tools-more-wrap button.hd-tools-more-btn:hover,
body.light .topbar .hd-tools-more-wrap button.hd-tools-more-btn.active {
  background: #eaeef2;
}
.topbar .hd-tools-more-wrap button.hd-tools-more-btn.active {
  border-color: #58a6ff;
  box-shadow: 0 0 0 1px #58a6ff;
}
.helpdesk-bar .hd-tools-more-menu,
.topbar .hd-tools-more-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 200px;
  max-width: min(280px, calc(100vw - 24px));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 10001;
  overflow: hidden;
}
body.dark .helpdesk-bar .hd-tools-more-menu,
body.dark .topbar .hd-tools-more-menu {
  background: #21262d;
  border: 1px solid #30363d;
}
body.light .helpdesk-bar .hd-tools-more-menu,
body.light .topbar .hd-tools-more-menu {
  background: #fff;
  border: 1px solid #d0d7de;
}
.helpdesk-bar .hd-tools-more-menu a,
.topbar .hd-tools-more-menu a {
  display: block;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  white-space: normal;
}
.helpdesk-bar .hd-tools-more-menu a:hover,
.topbar .hd-tools-more-menu a:hover,
.helpdesk-bar .hd-tools-more-menu a.active,
.topbar .hd-tools-more-menu a.active {
  background: rgba(127, 127, 127, 0.12);
  border: none;
  box-shadow: none;
}
.helpdesk-bar .hd-tools-more-menu .hd-dropdown-group,
.topbar .hd-tools-more-menu .hd-dropdown-group {
  padding: 10px 16px 4px;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
  border: none;
  background: transparent;
}
.helpdesk-bar .hd-tools-more-menu .hd-dropdown-group:first-child,
.topbar .hd-tools-more-menu .hd-dropdown-group:first-child {
  padding-top: 8px;
}
body.dark .hd-btn { background: #30363d; color: #e6edf3; border: 1px solid #444c56; }
body.dark .hd-btn:hover { background: #484f58; border-color: #6e7681; }
body.light .hd-btn { background: #f6f8fa; color: #24292f; border: 1px solid #d0d7de; }
body.light .hd-btn:hover { background: #eaeef2; border-color: #8c959f; }

/* Primary action buttons (form submit, outside nav) */
body.dark .hd-btn.hd-btn-primary,
body.light .hd-btn.hd-btn-primary,
body.dark[data-hd-theme] .hd-btn.hd-btn-primary,
body.light[data-hd-theme] .hd-btn.hd-btn-primary {
  background: #238636;
  color: #fff;
  border: 1px solid #2ea043;
}
body.dark .hd-btn.hd-btn-primary:hover:not(:disabled):not(.submitted),
body.light .hd-btn.hd-btn-primary:hover:not(:disabled):not(.submitted),
body.dark[data-hd-theme] .hd-btn.hd-btn-primary:hover:not(:disabled):not(.submitted),
body.light[data-hd-theme] .hd-btn.hd-btn-primary:hover:not(:disabled):not(.submitted) {
  background: #2ea043;
  border-color: #3fb950;
}
body.dark .hd-btn.hd-btn-primary:disabled:not(.submitted),
body.light .hd-btn.hd-btn-primary:disabled:not(.submitted),
body.dark[data-hd-theme] .hd-btn.hd-btn-primary:disabled:not(.submitted),
body.light[data-hd-theme] .hd-btn.hd-btn-primary:disabled:not(.submitted) {
  opacity: 0.65;
  cursor: wait;
}
body.dark .hd-btn.hd-btn-primary.submitted,
body.light .hd-btn.hd-btn-primary.submitted,
body.dark[data-hd-theme] .hd-btn.hd-btn-primary.submitted,
body.light[data-hd-theme] .hd-btn.hd-btn-primary.submitted {
  background: #6e7681;
  color: #fff;
  border-color: #6e7681;
  opacity: 1;
  cursor: not-allowed;
}

/* Primary CTA: submit ticket (green) */
.helpdesk-bar .hd-btn.hd-btn-primary {
  background: #238636;
  color: #fff;
  border: 1px solid #2ea043;
}
.helpdesk-bar .hd-btn.hd-btn-primary:hover {
  background: #2ea043;
  border-color: #3fb950;
}
body.light .helpdesk-bar .hd-btn.hd-btn-primary {
  background: #238636;
  color: #fff;
  border-color: #238636;
}
body.light .helpdesk-bar .hd-btn.hd-btn-primary:hover {
  background: #2ea043;
  border-color: #2ea043;
}

/* Blue Button — distinct accent, same dimensions as other nav buttons */
.helpdesk-bar .hd-btn.hd-btn-blue-button {
  background: #e3f2fd;
  color: #0d47a1;
  border-color: #42a5f5;
}
.helpdesk-bar .hd-btn.hd-btn-blue-button:hover {
  background: #bbdefb;
  border-color: #64b5f6;
  color: #0d47a1;
}
body.dark .helpdesk-bar .hd-btn.hd-btn-blue-button {
  background: #0d2137;
  color: #90caf9;
  border-color: #42a5f5;
}
body.dark .helpdesk-bar .hd-btn.hd-btn-blue-button:hover {
  background: #123a5c;
  border-color: #42a5f5;
  color: #bbdefb;
}

.helpdesk-bar .hd-btn.hd-btn-salto {
  display: none;
  align-items: center;
  gap: 6px;
  line-height: 1;
  background: #fff;
  color: #1a1a1a;
  border-color: #42a5f5;
}
.helpdesk-bar .hd-btn.hd-btn-salto:hover {
  background: #f3f9ff;
  border-color: #64b5f6;
  color: #0d1117;
}
body.light .helpdesk-bar .hd-btn.hd-btn-salto {
  background: #fff;
  color: #1a1a1a;
  border-color: #42a5f5;
}
body.light .helpdesk-bar .hd-btn.hd-btn-salto:hover {
  background: #f3f9ff;
  border-color: #64b5f6;
}
body.dark .helpdesk-bar .hd-btn.hd-btn-salto {
  background: #161b22;
  color: #f0f6fc;
  border-color: #58a6ff;
}
body.dark .helpdesk-bar .hd-btn.hd-btn-salto:hover {
  background: #21262d;
  border-color: #79c0ff;
  color: #ffffff;
}
.helpdesk-bar .hd-salto-logo {
  height: 20px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.helpdesk-bar .hd-salto-mark--teal { fill: #00838f; }
.helpdesk-bar .hd-salto-mark--sky { fill: #4fc3f7; }
body.dark .helpdesk-bar .hd-btn.hd-btn-salto .hd-salto-mark--teal { fill: #26a69a; }
body.dark .helpdesk-bar .hd-btn.hd-btn-salto .hd-salto-mark--sky { fill: #81d4fa; }

.helpdesk-bar .hd-signin-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  position: relative;
}
.helpdesk-bar .hd-signin-custom {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  font-family: inherit;
}
body.dark .hd-signin-custom { background: #30363d; color: #e6edf3; border: 1px solid #444c56; }
body.dark .hd-signin-custom:hover { background: #484f58; }
body.light .hd-signin-custom { background: #f6f8fa; color: #24292f; border: 1px solid #d0d7de; }
body.light .hd-signin-custom:hover { background: #eaeef2; }
.helpdesk-bar #googleSignInBtn iframe { max-height: 36px !important; }

.helpdesk-bar .hd-dropdown,
.topbar-dropdown { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 200px; max-height: min(85vh, 640px); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 10001; overflow-x: hidden; overflow-y: auto; }
body.dark .hd-dropdown,
body.dark .topbar-dropdown { background: #21262d; border: 1px solid #30363d; }
body.light .hd-dropdown,
body.light .topbar-dropdown { background: #fff; border: 1px solid #d0d7de; }
.helpdesk-bar .hd-dropdown > div:first-child,
.topbar-dropdown > div:first-child { padding: 12px 16px; font-size: 12px; border-bottom: 1px solid; }
body.dark .hd-dropdown > div:first-child,
body.dark .topbar-dropdown > div:first-child { border-color: #30363d; color: #8b949e; }
body.light .hd-dropdown > div:first-child,
body.light .topbar-dropdown > div:first-child { border-color: #d0d7de; color: #57606a; }
.helpdesk-bar .hd-dropdown a, .helpdesk-bar .hd-dropdown button,
.topbar-dropdown a, .topbar-dropdown button { display: block; width: 100%; padding: 10px 16px; border: none; background: transparent; cursor: pointer; text-align: left; font-family: inherit; font-size: 13px; text-decoration: none; }
.helpdesk-bar .hd-dropdown a:visited, .helpdesk-bar .hd-dropdown a:hover, .helpdesk-bar .hd-dropdown a:focus,
.topbar-dropdown a:visited, .topbar-dropdown a:hover, .topbar-dropdown a:focus { text-decoration: none; }
body.dark .hd-dropdown a, body.dark .hd-dropdown button,
body.dark .topbar-dropdown a, body.dark .topbar-dropdown button { color: #e6edf3; }
body.dark .hd-dropdown a:hover, body.dark .hd-dropdown button:hover,
body.dark .topbar-dropdown a:hover, body.dark .topbar-dropdown button:hover { background: #30363d; }
body.light .hd-dropdown a, body.light .hd-dropdown button,
body.light .topbar-dropdown a, body.light .topbar-dropdown button { color: #24292f; }
body.light .hd-dropdown a:hover, body.light .hd-dropdown button:hover,
body.light .topbar-dropdown a:hover, body.light .topbar-dropdown button:hover { background: #f6f8fa; }

.helpdesk-bar .hd-btn.active { border-color: #58a6ff; box-shadow: 0 0 0 1px #58a6ff; }
body.dark .helpdesk-bar .hd-btn.active { background: #1c2128; border-color: #58a6ff; }
body.light .helpdesk-bar .hd-btn.active { border-color: #0969da; box-shadow: 0 0 0 1px #0969da; }

.helpdesk-bar .hd-reports-wrap { position: relative; display: inline-flex; overflow: visible; }
.helpdesk-bar .hd-reports-dropdown { display: none; position: absolute; top: 100%; right: 0; left: auto; margin-top: 4px; min-width: 200px; max-width: min(320px, calc(100vw - 24px)); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 10001; overflow: visible; }
body.dark .hd-reports-dropdown { background: #21262d; border: 1px solid #30363d; }
body.light .hd-reports-dropdown { background: #fff; border: 1px solid #d0d7de; }
.helpdesk-bar .hd-reports-dropdown a { display: block; padding: 10px 16px; font-size: 13px; text-decoration: none; }
body.dark .hd-reports-dropdown a { color: #e6edf3; }
body.dark .hd-reports-dropdown a:hover { background: #30363d; }
body.light .hd-reports-dropdown a { color: #24292f; }
body.light .hd-reports-dropdown a:hover { background: #f6f8fa; }
.helpdesk-bar .hd-dropdown-group,
.topbar-dropdown .hd-dropdown-group { padding: 8px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-top: 1px solid; }
body.dark .hd-dropdown-group { color: #8b949e; border-color: #30363d; }
body.light .hd-dropdown-group { color: #57606a; border-color: #d0d7de; }
.helpdesk-bar .hd-dropdown-group:first-child,
.topbar-dropdown .hd-dropdown-group:first-child { border-top: none; }
.helpdesk-bar .hd-user-menu-collapse,
.topbar-dropdown .hd-user-menu-collapse {
  border-top: 1px solid;
}
body.dark .hd-user-menu-collapse { border-color: #30363d; }
body.light .hd-user-menu-collapse { border-color: #d0d7de; }
.helpdesk-bar .hd-user-menu-collapse-summary,
.topbar-dropdown .hd-user-menu-collapse-summary {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  box-sizing: border-box;
}
.helpdesk-bar .hd-user-menu-collapse-summary::-webkit-details-marker,
.topbar-dropdown .hd-user-menu-collapse-summary::-webkit-details-marker { display: none; }
.helpdesk-bar .hd-user-menu-collapse-summary::after,
.topbar-dropdown .hd-user-menu-collapse-summary::after {
  content: ' ▾';
  font-size: 10px;
  opacity: 0.75;
}
.helpdesk-bar .hd-user-menu-collapse[open] .hd-user-menu-collapse-summary::after,
.topbar-dropdown .hd-user-menu-collapse[open] .hd-user-menu-collapse-summary::after {
  content: ' ▴';
}
body.dark .hd-user-menu-collapse-summary { color: #8b949e; }
body.light .hd-user-menu-collapse-summary { color: #57606a; }
body.dark .hd-user-menu-collapse-summary:hover { background: #30363d; }
body.light .hd-user-menu-collapse-summary:hover { background: #f6f8fa; }
.helpdesk-bar .hd-user-menu-collapse-body .hd-dropdown-group,
.topbar-dropdown .hd-user-menu-collapse-body .hd-dropdown-group {
  border-top: 1px solid;
}
.helpdesk-bar .hd-user-menu-collapse-body .hd-dropdown-group:first-child,
.topbar-dropdown .hd-user-menu-collapse-body .hd-dropdown-group:first-child {
  border-top: none;
}
.helpdesk-bar .hd-settings-wrap { position: relative; display: inline-flex; overflow: visible; }
.helpdesk-bar .hd-settings-dropdown { display: none; position: absolute; top: 100%; right: 0; left: auto; margin-top: 4px; min-width: 160px; max-width: min(280px, calc(100vw - 24px)); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 10001; overflow-x: hidden; }
body.dark .hd-settings-dropdown { background: #21262d; border: 1px solid #30363d; }
body.light .hd-settings-dropdown { background: #fff; border: 1px solid #d0d7de; }
.helpdesk-bar .hd-settings-dropdown a { display: block; padding: 10px 16px; font-size: 13px; text-decoration: none; }
body.dark .hd-settings-dropdown a { color: #e6edf3; }
body.dark .hd-settings-dropdown a:hover { background: #30363d; }
body.light .hd-settings-dropdown a { color: #24292f; }
body.light .hd-settings-dropdown a:hover { background: #f6f8fa; }

.helpdesk-bar .hd-user-btn { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-height: none; }
/* One line with optional inline rating so height matches .hd-btn (Reports / Admin). */
.helpdesk-bar .hd-user-btn-labelcol {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
  line-height: 1.2;
}
.helpdesk-bar .hd-user-feedback-stars {
  font-size: 11px;
  font-weight: 600;
  color: #c9a227;
  margin: 0;
  white-space: nowrap;
}
body.light .helpdesk-bar .hd-user-feedback-stars { color: #9a6700; }
.helpdesk-bar .hd-user-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hd-staff-photo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle;
  line-height: 1;
  box-sizing: border-box;
}
.hd-avatar-generated {
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.hd-staff-photo-placeholder.hd-user-avatar { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
.hd-staff-photo-placeholder.hd-avatar { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }
.hd-staff-photo-placeholder.ticket-card-compact-av { width: 28px; height: 28px; min-width: 28px; min-height: 28px; font-size: 11px; }
.hd-staff-photo-placeholder.ticket-assignee-avatar { width: 28px; height: 28px; min-width: 28px; min-height: 28px; font-size: 10px; }
.hd-staff-photo-placeholder.hd-dept-presence-face { width: 22px; height: 22px; min-width: 22px; min-height: 22px; font-size: 9px; }
.submitter-row .hd-staff-photo-placeholder.hd-avatar { width: 36px; height: 36px; min-width: 36px; min-height: 36px; font-size: 13px; }

/* Tables scroll inside container instead of causing page overflow */
.card:has(table), .main:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Inline email screenshots rendered in place of `[image: …]` placeholders in a message. */
.hd-inline-img { display: block; margin: 8px 0; }
.hd-inline-img .ticket-att-thumb-zoom {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: zoom-in;
  font: inherit;
  line-height: 0;
  display: inline-block;
  max-width: 100%;
}
.hd-inline-img .ticket-att-thumb-zoom:focus-visible { outline: 2px solid #58a6ff; outline-offset: 2px; }
.hd-inline-img img {
  max-width: min(360px, 100%);
  max-height: 320px;
  width: auto;
  height: auto;
  border-radius: 8px;
  border: 1px solid #30363d;
  object-fit: contain;
  display: block;
}
body.light .hd-inline-img img { border-color: #d0d7de; }

/* Extended themes: shared top bar (matches helpdesk-admin palette) */
body.dark[data-hd-theme="ocean"] .helpdesk-bar { background: #052d4a; border-bottom-color: #0a6aa8; }
body.dark[data-hd-theme="ocean"] .hd-dropdown,
body.dark[data-hd-theme="ocean"] .hd-reports-dropdown,
body.dark[data-hd-theme="ocean"] .hd-settings-dropdown { background: #073556; border-color: #0d7cc9; }
body.dark[data-hd-theme="ocean"] .hd-btn { background: #073556; border-color: #0d7cc9; color: #f0f8ff; }
body.dark[data-hd-theme="ocean"] .hd-btn:hover { background: #0a4875; border-color: #1296e6; }
body.dark[data-hd-theme="ocean"] .hd-signin-custom { background: #073556; border-color: #0d7cc9; }

body.dark[data-hd-theme="sunset"] .helpdesk-bar { background: #3d1524; border-bottom-color: #c45d7a; }
body.dark[data-hd-theme="sunset"] .hd-dropdown,
body.dark[data-hd-theme="sunset"] .hd-reports-dropdown,
body.dark[data-hd-theme="sunset"] .hd-settings-dropdown { background: #4a1c2e; border-color: #d4728b; }
body.dark[data-hd-theme="sunset"] .hd-btn { background: #4a1c2e; border-color: #d4728b; color: #fff5f7; }
body.dark[data-hd-theme="sunset"] .hd-btn:hover { background: #5c2438; }
body.dark[data-hd-theme="sunset"] .hd-signin-custom { background: #4a1c2e; border-color: #d4728b; }

body.dark[data-hd-theme="forest"] .helpdesk-bar { background: #0c2418; border-bottom-color: #2d8f56; }
body.dark[data-hd-theme="forest"] .hd-dropdown,
body.dark[data-hd-theme="forest"] .hd-reports-dropdown,
body.dark[data-hd-theme="forest"] .hd-settings-dropdown { background: #0f2e1f; border-color: #35a665; }
body.dark[data-hd-theme="forest"] .hd-btn { background: #0f2e1f; border-color: #35a665; color: #f0fff6; }
body.dark[data-hd-theme="forest"] .hd-btn:hover { background: #123222; }
body.dark[data-hd-theme="forest"] .hd-signin-custom { background: #0f2e1f; border-color: #35a665; }

body.dark[data-hd-theme="contrast"] .helpdesk-bar { background: #0a0a0a; border-bottom-color: #fff; }
body.dark[data-hd-theme="contrast"] .hd-dropdown,
body.dark[data-hd-theme="contrast"] .hd-reports-dropdown,
body.dark[data-hd-theme="contrast"] .hd-settings-dropdown { background: #000; border-color: #fff; }
body.dark[data-hd-theme="contrast"] .hd-btn { background: #000; border-color: #fff; color: #fff; }
body.dark[data-hd-theme="contrast"] .hd-btn:hover { background: #1a1a1a; }
body.dark[data-hd-theme="contrast"] .hd-signin-custom { background: #000; border-color: #fff; color: #fff; }
body.dark[data-hd-theme="contrast"] .hd-title { color: #fff; }

body.dark[data-hd-theme="welcome"] .helpdesk-bar { background: #121820; border-bottom-color: #3d4f66; }

body.dark[data-hd-theme="spectral"] .helpdesk-bar { background: #12183a; border-bottom-color: #4c51bf; }
body.dark[data-hd-theme="spectral"] .hd-dropdown,
body.dark[data-hd-theme="spectral"] .hd-reports-dropdown,
body.dark[data-hd-theme="spectral"] .hd-settings-dropdown { background: #151d45; border-color: #6366f1; }
body.dark[data-hd-theme="spectral"] .hd-btn { background: #151d45; border-color: #6366f1; color: #f5f7ff; }
body.dark[data-hd-theme="spectral"] .hd-btn:hover { background: #1c2570; border-color: #818cf8; }
body.dark[data-hd-theme="spectral"] .hd-signin-custom { background: #151d45; border-color: #6366f1; color: #f5f7ff; }
body.dark[data-hd-theme="spectral"] .hd-title { color: #f8fafc; }

body.dark[data-hd-theme="github-dark"] .helpdesk-bar { background: #161b22; border-bottom-color: #30363d; }
body.light[data-hd-theme="github-light"] .helpdesk-bar { background: #e8edf3; border-bottom-color: #b9c4d0; }
body.light[data-hd-theme="github-light"] .hd-btn { background: #fff; border-color: #b9c4d0; color: #1f2328; }
body.light[data-hd-theme="github-light"] .hd-btn:hover { background: #f6f8fa; }

body.light[data-hd-theme="paper"] .helpdesk-bar { background: #f5f0ea; border-bottom-color: #e8e0d8; }
body.light[data-hd-theme="paper"] .hd-dropdown,
body.light[data-hd-theme="paper"] .hd-reports-dropdown,
body.light[data-hd-theme="paper"] .hd-settings-dropdown { background: #fff; border-color: #e8e0d8; }
body.light[data-hd-theme="paper"] .hd-btn { background: #fff; border-color: #e8e0d8; color: #1c1917; }
body.light[data-hd-theme="paper"] .hd-btn:hover { background: #faf8f5; }
body.light[data-hd-theme="paper"] .hd-signin-custom { background: #fff; border-color: #e8e0d8; color: #1c1917; }
body.light[data-hd-theme="paper"] .hd-title { color: #1c1917; }

body.dark[data-hd-theme="contrast"] .hd-dropdown > div:first-child,
body.dark[data-hd-theme="contrast"] .hd-dropdown-group { border-color: #fff; color: #e6edf3; }
body.dark[data-hd-theme="contrast"] .hd-dropdown a,
body.dark[data-hd-theme="contrast"] .hd-dropdown button { color: #fff; }
body.dark[data-hd-theme="contrast"] .hd-reports-dropdown a,
body.dark[data-hd-theme="contrast"] .hd-settings-dropdown a { color: #fff; }

/* Super-user “test view” (impersonation) banner */
#hd-impersonation-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.45;
  z-index: 20000;
  position: sticky;
  top: 0;
  box-sizing: border-box;
  width: 100%;
}
.hd-dropdown .hd-dd-exit-test-view {
  display: block;
  width: 100%;
  text-align: left;
  font-weight: 600;
  color: #d29922;
}
body.light .hd-dropdown .hd-dd-exit-test-view { color: #9a6700; }
body.dark #hd-impersonation-banner {
  background: #3d1f1f;
  border-bottom: 1px solid rgba(248, 81, 73, 0.45);
  color: #e6edf3;
}
body.light #hd-impersonation-banner {
  background: #fff8f0;
  border-bottom: 1px solid #d4a574;
  color: #24292f;
}
#hd-impersonation-banner .hd-impersonation-inner {
  max-width: 900px;
  text-align: center;
}
#hd-impersonation-banner .hd-impersonation-exit {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: #238636;
  color: #fff;
}
#hd-leave-pending-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.45;
    border-bottom: 1px solid #30363d;
    background: rgba(56, 139, 253, 0.12);
    color: #e6edf3;
}
body.light #hd-leave-pending-banner {
    background: rgba(9, 105, 218, 0.08);
    border-bottom-color: #d0d7de;
    color: #24292f;
}
#hd-leave-pending-banner .hd-leave-pending-action-link {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: inherit;
}
#hd-leave-pending-banner .hd-leave-pending-action-link:hover {
    color: #58a6ff;
}
body.light #hd-leave-pending-banner .hd-leave-pending-action-link:hover {
    color: #0969da;
}
#hd-impersonation-banner .hd-impersonation-exit:hover {
  background: #2ea043;
}

/* Text size preference (User preferences) — scales rem-based typography on helpdesk pages */
html[data-hd-text-size="compact"] { font-size: 88%; }
html[data-hd-text-size="standard"] { font-size: 94%; }
html[data-hd-text-size="comfortable"] { font-size: 106.25%; }
/* Legacy: old "large" (115%) capped at comfortable; normalize migrates stored value */
html[data-hd-text-size="large"] { font-size: 106.25%; }

/* Salto brand button — preserve contrast on extended header themes */
body.dark[data-hd-theme="ocean"] .helpdesk-bar .hd-btn.hd-btn-salto,
body.dark[data-hd-theme="sunset"] .helpdesk-bar .hd-btn.hd-btn-salto,
body.dark[data-hd-theme="forest"] .helpdesk-bar .hd-btn.hd-btn-salto,
body.dark[data-hd-theme="contrast"] .helpdesk-bar .hd-btn.hd-btn-salto,
body.dark[data-hd-theme="spectral"] .helpdesk-bar .hd-btn.hd-btn-salto,
body.dark[data-hd-theme="github-dark"] .helpdesk-bar .hd-btn.hd-btn-salto,
body.dark[data-hd-theme="welcome"] .helpdesk-bar .hd-btn.hd-btn-salto {
  background: #161b22;
  color: #f0f6fc;
  border: 2px solid #58a6ff;
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.35);
}
body.dark[data-hd-theme="ocean"] .helpdesk-bar .hd-btn.hd-btn-salto:hover,
body.dark[data-hd-theme="sunset"] .helpdesk-bar .hd-btn.hd-btn-salto:hover,
body.dark[data-hd-theme="forest"] .helpdesk-bar .hd-btn.hd-btn-salto:hover,
body.dark[data-hd-theme="contrast"] .helpdesk-bar .hd-btn.hd-btn-salto:hover,
body.dark[data-hd-theme="spectral"] .helpdesk-bar .hd-btn.hd-btn-salto:hover,
body.dark[data-hd-theme="github-dark"] .helpdesk-bar .hd-btn.hd-btn-salto:hover,
body.dark[data-hd-theme="welcome"] .helpdesk-bar .hd-btn.hd-btn-salto:hover {
  background: #21262d;
  border-color: #79c0ff;
  color: #ffffff;
}
body.light[data-hd-theme="github-light"] .helpdesk-bar .hd-btn.hd-btn-salto,
body.light[data-hd-theme="paper"] .helpdesk-bar .hd-btn.hd-btn-salto {
  background: #fff;
  color: #1a1a1a;
  border: 2px solid #42a5f5;
  box-shadow: 0 0 0 1px rgba(66, 165, 245, 0.28);
}
body.light[data-hd-theme="github-light"] .helpdesk-bar .hd-btn.hd-btn-salto:hover,
body.light[data-hd-theme="paper"] .helpdesk-bar .hd-btn.hd-btn-salto:hover {
  background: #f3f9ff;
  border-color: #64b5f6;
}