/* Chancery overlay for Mandeeps Live Helpdesk
   Paste into Portal Settings → Custom CSS
   (do not add this to the Chancery DNN skin) */

.LiveHelpdesk {
  --hd-paper: var(--chan-paper, #f4ead6);
  --hd-paper-2: var(--chan-paper-2, #ece0c8);
  --hd-cream: var(--chan-cream, #faf6ec);
  --hd-ink: var(--chan-ink, #161410);
  --hd-muted: var(--chan-muted, #5e574c);
  --hd-navy: var(--chan-navy, #132238);
  --hd-navy-deep: var(--chan-navy-deep, #0c1726);
  --hd-rule: var(--chan-rule, #8a7348);
  --hd-line: var(--chan-line, #d7cbb0);
  --hd-display: var(--chan-display, "Cormorant Garamond", "Palatino Linotype", Palatino, serif);
  --hd-body: var(--chan-body, "Source Serif 4", "Palatino Linotype", Palatino, serif);
  --hd-radius: var(--chan-radius, 2px);
  color: var(--hd-ink);
  font-family: var(--hd-body);
}

.LiveHelpdesk .ms-container {
  background: var(--hd-paper) !important;
  padding: 1.25rem 1.25rem 1.75rem !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-sizing: border-box;
}

.LiveHelpdesk h1,
.LiveHelpdesk h2,
.LiveHelpdesk h3,
.LiveHelpdesk h4,
.LiveHelpdesk .titleHeading {
  font-family: var(--hd-display);
  color: var(--hd-ink);
}

.LiveHelpdesk a { color: var(--hd-navy); }
.LiveHelpdesk a:hover { color: var(--hd-rule); }

.LiveHelpdesk hr {
  border: 0;
  border-top: 1px solid var(--hd-line);
  margin: 0.85rem 0 1.15rem;
}

/* Top nav */
.LiveHelpdesk .ms-nav-pills > li > a {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hd-navy) !important;
  background: transparent !important;
  border-radius: var(--hd-radius);
  padding: 0.45rem 0.75rem;
}

.LiveHelpdesk .ms-nav-pills > li.ms-active > a,
.LiveHelpdesk .ms-nav-pills > li > a:hover,
.LiveHelpdesk .ms-nav.ms-nav-stacked > li.ms-active > a {
  background: var(--hd-navy) !important;
  color: var(--hd-cream) !important;
}

.LiveHelpdesk .ms-nav.ms-nav-stacked > li > a {
  color: var(--hd-ink) !important;
  background: transparent !important;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.5rem 0.75rem;
}

.LiveHelpdesk .ms-nav.ms-nav-stacked > li.ms-active > a,
.LiveHelpdesk .ms-nav.ms-nav-stacked > li > a:hover {
  background: var(--hd-navy) !important;
  color: var(--hd-cream) !important;
}

.LiveHelpdesk .admin-menu,
.LiveHelpdesk .issues-menu {
  border-right: 1px solid var(--hd-line) !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  box-sizing: border-box;
}

.LiveHelpdesk .issues-menu strong,
.LiveHelpdesk .admin-menu strong {
  display: block;
  font-family: var(--hd-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hd-rule);
  margin: 0.85rem 0 0.35rem;
  padding: 0 0.75rem;
}

.LiveHelpdesk .ms-badge,
.LiveHelpdesk .ms-label {
  background: var(--hd-navy) !important;
  color: var(--hd-cream) !important;
  border-radius: var(--hd-radius);
  font-weight: 500;
}

.LiveHelpdesk span.ms-badge.ms-badge-secondary {
  background: var(--hd-navy) !important;
  color: var(--hd-cream) !important;
  border-radius: var(--hd-radius);
}

/* Buttons — navy over bootstrap blue (incl. inline #337ab7) */
.LiveHelpdesk .ms-btn-primary,
.LiveHelpdesk .ms-btn-info,
.LiveHelpdesk .ms-btn-success,
.LiveHelpdesk .ms-btn-default[style*="337ab7"],
.LiveHelpdesk a.ms-btn[style*="337ab7"],
.LiveHelpdesk button.ms-btn[style*="337ab7"],
.LiveHelpdesk .testsmtp {
  background: var(--hd-navy) !important;
  border-color: var(--hd-navy) !important;
  color: var(--hd-cream) !important;
}

.LiveHelpdesk .ms-btn-default {
  background: var(--hd-cream) !important;
  border-color: var(--hd-line) !important;
  color: var(--hd-ink) !important;
}

.LiveHelpdesk .ms-btn-default:hover {
  background: var(--hd-paper-2) !important;
  color: var(--hd-navy) !important;
}

.LiveHelpdesk .ms-btn-default-custom {
  background: var(--hd-navy) !important;
  border-color: var(--hd-navy) !important;
  color: var(--hd-cream) !important;
}

.LiveHelpdesk .resolve-button,
.LiveHelpdesk .resolve-button a {
  background: var(--hd-navy) !important;
  border-color: var(--hd-navy) !important;
  color: var(--hd-cream) !important;
}

/* Forms */
.LiveHelpdesk input[type="text"],
.LiveHelpdesk input[type="email"],
.LiveHelpdesk input[type="search"],
.LiveHelpdesk input[type="password"],
.LiveHelpdesk textarea,
.LiveHelpdesk select,
.LiveHelpdesk .ms-form-control,
.LiveHelpdesk .search_table input[type="search"] {
  background: var(--hd-cream) !important;
  border: 1px solid var(--hd-line) !important;
  color: var(--hd-ink) !important;
  border-radius: var(--hd-radius) !important;
  box-shadow: none !important;
}

.LiveHelpdesk .Groupby select,
.LiveHelpdesk .dropdownheader select {
  background: var(--hd-cream) !important;
  border-color: var(--hd-line) !important;
}

/* Ticket table */
.LiveHelpdesk .issues-table {
  background: var(--hd-cream) !important;
  border: 1px solid var(--hd-line);
  border-top: 2px solid var(--hd-rule);
  border-radius: var(--hd-radius);
}

.LiveHelpdesk .issues-table table,
.LiveHelpdesk .issues-table .ms-table {
  background: var(--hd-cream) !important;
  margin-bottom: 0;
  width: 100% !important;
  border-collapse: collapse !important;
}

.LiveHelpdesk .issues-table thead,
.LiveHelpdesk .issues-table thead tr,
.LiveHelpdesk .issues-table table > thead > tr > th,
.LiveHelpdesk .issues-table table > thead > tr > td,
.LiveHelpdesk .issues-table .ms-table > thead > tr > th,
.LiveHelpdesk .issues-table .ms-table > thead > tr > td,
.LiveHelpdesk .issues-table .hdtableth,
.LiveHelpdesk .search_table thead,
.LiveHelpdesk .search_table thead tr,
.LiveHelpdesk .search_table thead th,
.LiveHelpdesk .search_table thead td {
  background: var(--hd-cream) !important;
  background-image: none !important;
  color: var(--hd-navy) !important;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hd-line) !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Avatar column: hug the two 45px images, drop the leftover 15% gap. */
.LiveHelpdesk .issues-table thead tr:first-child th:first-child,
.LiveHelpdesk .issues-table thead tr:first-child td:first-child,
.LiveHelpdesk .search_table thead tr:first-child th:first-child,
.LiveHelpdesk .search_table thead tr:first-child td:first-child,
.LiveHelpdesk .issues-table tbody td:first-child,
.LiveHelpdesk .search_table tbody td:first-child {
  background: var(--hd-cream) !important;
  background-image: none !important;
  box-shadow: none !important;
  width: 6.1rem !important;
  max-width: 6.1rem !important;
  min-width: 6.1rem !important;
  padding-left: 0.45rem !important;
  padding-right: 0.15rem !important;
  vertical-align: middle;
}

.LiveHelpdesk .issues-table thead tr:first-child th:first-child,
.LiveHelpdesk .issues-table thead tr:first-child td:first-child,
.LiveHelpdesk .search_table thead tr:first-child th:first-child,
.LiveHelpdesk .search_table thead tr:first-child td:first-child {
  border: 0 !important;
  border-bottom: 1px solid var(--hd-line) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}

.LiveHelpdesk .issues-table tbody td:nth-child(2),
.LiveHelpdesk .search_table tbody td:nth-child(2) {
  padding-left: 0.2rem !important;
  width: 4.25rem !important;
  white-space: nowrap;
}

/* Search row under the column labels */
.LiveHelpdesk .issues-table.search_table,
.LiveHelpdesk .search_table {
  position: relative;
}

.LiveHelpdesk .issues-table thead tr:nth-child(n+2) th,
.LiveHelpdesk .issues-table thead tr:nth-child(n+2) td,
.LiveHelpdesk .search_table thead tr:nth-child(n+2) th,
.LiveHelpdesk .search_table thead tr:nth-child(n+2) td {
  position: relative !important;
  width: auto !important;
  max-width: none !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: var(--hd-ink) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400 !important;
  padding: 0.45rem 5.5rem 0.55rem 0.75rem !important;
  background: var(--hd-cream) !important;
  border-bottom: 1px solid var(--hd-line) !important;
}

.LiveHelpdesk .search_table input[type="search"],
.LiveHelpdesk .issues-table thead input[type="search"],
.LiveHelpdesk .issues-table thead input[type="text"] {
  display: inline-block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  color: var(--hd-ink) !important;
  background: var(--hd-paper) !important;
  padding: 0.4rem 0.75rem !important;
}

/* Original module parks these absolute at the right of the search field.
   Containing block is the search <th>, so 50% = middle of that row. */
.LiveHelpdesk .btn-search {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 3.35rem !important;
  z-index: 5;
  float: none !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0.28rem 0.55rem !important;
  height: 2rem;
  background: var(--hd-paper) !important;
  border: 1px solid var(--hd-line) !important;
  color: var(--hd-navy) !important;
  border-radius: var(--hd-radius) !important;
  box-shadow: none !important;
}

.LiveHelpdesk .btn-search.btn-export,
.LiveHelpdesk .btn-export {
  right: 0.85rem !important;
}

.LiveHelpdesk .btn-search span {
  color: var(--hd-navy) !important;
  height: auto !important;
  padding: 0 !important;
}

.LiveHelpdesk .btn-search:hover {
  background: var(--hd-navy) !important;
  color: var(--hd-cream) !important;
  border-color: var(--hd-navy) !important;
}

.LiveHelpdesk .btn-search:hover span {
  color: var(--hd-cream) !important;
}

.LiveHelpdesk .ms-table > tbody > tr > td,
.LiveHelpdesk .issues-table tbody td {
  border-top: 1px solid var(--hd-line) !important;
  color: var(--hd-ink);
  background: var(--hd-cream) !important;
}

.LiveHelpdesk .issues-table tbody tr {
  cursor: pointer;
}

.LiveHelpdesk .issues-table tbody td {
  position: relative !important;
  padding: 0 !important;
  vertical-align: top !important;
  height: 1px;
}

.LiveHelpdesk .issues-table tbody td > * {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 52px !important;
}

.LiveHelpdesk a.hd-rowlink {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 52px !important;
  height: 100% !important;
  padding: 0.3rem 0.65rem !important;
  box-sizing: border-box !important;
  color: inherit !important;
  font-weight: inherit !important;
  text-decoration: none !important;
}

.LiveHelpdesk .hd-avatars,
.LiveHelpdesk .hd-avatars img {
  display: inline-block !important;
  vertical-align: top;
}

.LiveHelpdesk .hd-avatars {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 90px !important;
  height: 45px !important;
  min-height: 45px !important;
}

.LiveHelpdesk .hd-avatars img {
  width: 45px !important;
  height: 45px !important;
  max-width: 45px !important;
  max-height: 45px !important;
  flex: 0 0 45px !important;
}

.LiveHelpdesk a.hd-rowlink:hover {
  color: inherit !important;
  text-decoration: none !important;
}

.LiveHelpdesk .ms-table > tbody > tr:hover > td {
  background: var(--hd-paper) !important;
}

.LiveHelpdesk .issues-table a.hd-rowlink {
  color: var(--hd-navy) !important;
}

.LiveHelpdesk .hd-openedby {
  color: var(--hd-ink) !important;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none !important;
}

.LiveHelpdesk .hd-when,
.LiveHelpdesk .issues-table tbody td:last-child,
.LiveHelpdesk .issues-table thead tr:first-child th:last-child {
  white-space: nowrap !important;
}

.LiveHelpdesk .issues-table img.ms-img-rounded {
  border-color: var(--hd-line) !important;
}

.LiveHelpdesk .stfooter a { color: var(--hd-navy); }

/* Conversation */
.LiveHelpdesk .ms-panel,
.LiveHelpdesk .ms-panel-default {
  background: var(--hd-cream) !important;
  border-color: var(--hd-line) !important;
  border-radius: var(--hd-radius);
  box-shadow: none !important;
}

.LiveHelpdesk .ms-panel-heading,
.LiveHelpdesk .ms-panel-title {
  background: var(--hd-paper) !important;
  border-color: var(--hd-line) !important;
  color: var(--hd-ink) !important;
  font-family: var(--hd-display);
  font-size: 1.15rem;
}

.LiveHelpdesk .ms-col-md-8 > .ms-panel-heading {
  border-left: 1px solid var(--hd-line) !important;
  border-right: 1px solid var(--hd-line) !important;
}

.LiveHelpdesk .conversation_thread,
.LiveHelpdesk .ms-form-group.logtype,
.LiveHelpdesk [data-name="ReplyType"] {
  border-left-color: var(--hd-line) !important;
}

.LiveHelpdesk .commentbox {
  box-shadow: none !important;
  border-radius: var(--hd-radius);
}

.LiveHelpdesk .ms-panel-info,
.LiveHelpdesk .ms-panel-info > .ms-panel-heading {
  background: var(--hd-paper) !important;
  border-color: var(--hd-line) !important;
  color: var(--hd-ink) !important;
}

.LiveHelpdesk .ms-panel-default .has-arrow-left:before {
  border-right-color: var(--hd-paper) !important;
}

.LiveHelpdesk .ms-panel-info .has-arrow-left:before {
  border-right-color: var(--hd-paper) !important;
}

.LiveHelpdesk .preview_pic {
  background: var(--hd-cream);
  border-color: var(--hd-line);
}

.LiveHelpdesk .my-drop-zone {
  border: 2px dashed var(--hd-line) !important;
  background: var(--hd-paper);
}

/* Dashboard cards */
.LiveHelpdesk .titleHeading {
  background: var(--hd-cream) !important;
  border: 1px solid var(--hd-line) !important;
  border-top: 2px solid var(--hd-rule) !important;
  border-radius: var(--hd-radius) var(--hd-radius) 0 0 !important;
  color: var(--hd-navy) !important;
  letter-spacing: 0.08em;
  font-family: var(--hd-display) !important;
}

.LiveHelpdesk .titleHeading span {
  font-family: var(--hd-display);
  color: var(--hd-navy) !important;
}

.LiveHelpdesk .titleHeading .ms-badge,
.LiveHelpdesk .titleHeading .ms-badge-secondary {
  background: var(--hd-navy) !important;
  color: var(--hd-cream) !important;
  margin-right: 0.65rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.95rem !important;
  vertical-align: middle;
}

.LiveHelpdesk .graphic {
  background: var(--hd-cream) !important;
  border: 1px solid var(--hd-line) !important;
  color: var(--hd-ink) !important;
}

.LiveHelpdesk .canvas_hd {
  color: var(--hd-ink) !important;
}

.LiveHelpdesk #Category,
.LiveHelpdesk #Priority,
.LiveHelpdesk #Channel,
.LiveHelpdesk #Agent,
.LiveHelpdesk .canvasjs-chart-container,
.LiveHelpdesk .canvasjs-chart-canvas {
  background: transparent !important;
}

.LiveHelpdesk .datetime {
  background: var(--hd-cream) !important;
  border: 1px solid var(--hd-line) !important;
  color: var(--hd-navy) !important;
  font-family: var(--hd-body);
  font-size: 0.85rem;
}

.LiveHelpdesk .datetime:hover {
  background: var(--hd-paper) !important;
  color: var(--hd-navy) !important;
}

.LiveHelpdesk .Optionbox {
  background: var(--hd-cream) !important;
  border: 1px solid var(--hd-line) !important;
}

.LiveHelpdesk .information {
  background: var(--hd-cream) !important;
  border-color: var(--hd-line) !important;
}

.LiveHelpdesk .ms-col-md-12.information {
  background: var(--hd-cream) !important;
}

.LiveHelpdesk .ms-col-md-12.information:hover {
  background: var(--hd-paper) !important;
}

.LiveHelpdesk .ms-col-md-6.information:first-child,
.LiveHelpdesk .ms-col-md-6.information:nth-child(4) {
  background: var(--hd-paper) !important;
}

.LiveHelpdesk .information h2 {
  color: var(--hd-navy) !important;
  font-family: var(--hd-display) !important;
}

.LiveHelpdesk .information h4,
.LiveHelpdesk .information var {
  color: var(--hd-muted) !important;
}

.LiveHelpdesk .ms-col-md-12.information span {
  color: var(--hd-navy) !important;
}

.LiveHelpdesk .relatedArticle {
  border-color: var(--hd-line) !important;
}

.LiveHelpdesk #lhRelatedArticles li {
  border-bottom-color: var(--hd-line) !important;
}

/* Alerts */
.LiveHelpdesk .ms-alert-info,
.LiveHelpdesk .ms-alert-danger {
  background: var(--hd-paper);
  border: 1px solid var(--hd-line);
  color: var(--hd-ink);
}

/* Pagination / stacked menu badges */
.LiveHelpdesk .ms-nav-stacked .ms-badge {
  background: var(--hd-paper-2) !important;
  color: var(--hd-navy) !important;
}

.LiveHelpdesk .ms-nav-stacked > li.ms-active .ms-badge {
  background: var(--hd-cream) !important;
  color: var(--hd-navy) !important;
}

/* Labels on tickets that were gray */
.LiveHelpdesk .ms-label[style*="ccc"],
.LiveHelpdesk span.ms-label[style*="background-color:#ccc"] {
  background: var(--hd-paper-2) !important;
  color: var(--hd-muted) !important;
}

/* Persona Bar: keep the admin rail out from under the 80px iframe. */
body:has(#personaBar-iframe) .LiveHelpdesk .ms-container,
body:has(.personalBarContainer) .LiveHelpdesk .ms-container,
body:has(.personabar) .LiveHelpdesk .ms-container {
  padding-left: 1.5rem !important;
}

@media (max-width: 768px) {
  .LiveHelpdesk .ms-container {
    padding: 0.85rem 0.85rem 1.15rem !important;
  }
}