/* Smart UI 6.5.0 - complete original osTicket component coverage
 * Loaded after the original osTicket styles and all Smart UI base layers.
 */

/* Runtime feedback, loading and progress ---------------------------------- */
body.sldx #loadingbar {
  z-index: 2147483647;
  height: 3px;
  background: linear-gradient(90deg, var(--sld-blue-500), var(--sld-accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--sld-blue-500) 58%, transparent);
}
body.sldx #loadingbar dd,
body.sldx #loadingbar dt { box-shadow: 0 0 8px var(--sld-accent); }
body.sldx .progress {
  height: 10px;
  overflow: hidden;
  border: 1px solid var(--sld-border);
  border-radius: 999px;
  background: var(--sld-surface-2);
  box-shadow: inset 0 1px 2px rgba(15, 38, 67, .12);
}
body.sldx .progress-bar {
  height: 100%;
  border-radius: inherit;
  background: var(--sld-blue-600);
  color: #fff;
  transition: width .25s ease;
}
body.sldx .progress-bar-success { background: #299764; }
body.sldx .progress-bar-info { background: #3188c8; }
body.sldx .progress-bar-warning { background: #d68a20; }
body.sldx .progress-bar-danger { background: #c84c56; }
body.sldx .progress-striped .progress-bar,
body.sldx .progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%);
  background-size: 28px 28px;
}
body.sldx .notice_bar,
body.sldx .warning_bar,
body.sldx .error_bar,
body.sldx #msg_notice,
body.sldx #msg_warning,
body.sldx #msg_error,
body.sldx #msg_info {
  box-sizing: border-box;
  min-height: 40px;
  height: auto;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--sld-border);
  border-left-width: 4px;
  border-radius: 8px;
  background-image: none !important;
  line-height: 1.45;
}
body.sldx .notice_bar,
body.sldx #msg_notice { border-left-color: #299764; background-color: color-mix(in srgb, #299764 9%, var(--sld-surface)); color: var(--sld-text); }
body.sldx .warning_bar,
body.sldx #msg_warning { border-left-color: #d68a20; background-color: color-mix(in srgb, #d68a20 10%, var(--sld-surface)); color: var(--sld-text); }
body.sldx .error_bar,
body.sldx #msg_error { border-left-color: #c84c56; background-color: color-mix(in srgb, #c84c56 9%, var(--sld-surface)); color: var(--sld-text); }
body.sldx #msg_info { border-left-color: var(--sld-blue-500); background-color: var(--sld-blue-50); color: var(--sld-text); }
body.sldx .draft-saved {
  border: 1px solid var(--sld-border);
  border-radius: 7px;
  background: var(--sld-text);
  color: var(--sld-surface);
  box-shadow: var(--sld-shadow-sm);
}

/* File uploads ------------------------------------------------------------ */
body.sldx .filedrop .files:not(:empty) {
  padding: 7px;
  border: 1px solid var(--sld-border);
  border-radius: 9px 9px 0 0;
  background: var(--sld-surface);
}
body.sldx .filedrop .dropzone {
  padding: 12px;
  border: 2px dashed var(--sld-border) !important;
  border-radius: 9px;
  background: var(--sld-surface-2) !important;
  color: var(--sld-text-soft) !important;
}
body.sldx .filedrop .files:not(:empty) + .dropzone { border-top: 0 !important; border-radius: 0 0 9px 9px; }
body.sldx .filedrop .files .file { min-height: 28px; height: auto; border-radius: 7px; color: var(--sld-text); }
body.sldx .filedrop .files .file:hover { background: var(--sld-blue-50); }
body.sldx .filedrop .filesize,
body.sldx .filedrop .upload-rate { color: var(--sld-muted) !important; }
body.sldx .tooltip-preview {
  max-width: min(360px, calc(100vw - 32px));
  max-height: 360px;
  padding: 8px;
  border: 1px solid var(--sld-border);
  border-radius: 9px;
  background: var(--sld-surface);
  box-shadow: var(--sld-shadow-lg, 0 16px 40px rgba(7, 20, 38, .22));
}
body.sldx .tooltip-preview img { max-width: 100%; max-height: 340px; border-radius: 6px; }
body.sldx .freetext-files {
  padding: 12px;
  border: 1px dashed var(--sld-border);
  border-radius: 9px;
  background: var(--sld-surface-2);
  color: var(--sld-text);
}

/* Client portal: knowledge base, tickets and replies ---------------------- */
body.sldx-client #pagination { display: flex; flex-wrap: wrap; gap: 5px; margin: 18px 0; padding: 0; }
body.sldx-client #pagination li { display: contents; list-style: none; }
body.sldx-client #pagination li a,
body.sldx-client #pagination .active,
body.sldx-client #pagination .previousOff,
body.sldx-client #pagination .nextOff {
  display: inline-flex;
  min-width: 32px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border: 1px solid var(--sld-border);
  border-radius: 7px;
  background: var(--sld-surface);
  color: var(--sld-text-soft);
}
body.sldx-client #pagination li a:hover,
body.sldx-client #pagination .active { border-color: var(--sld-blue-500); background: var(--sld-blue-50); color: var(--sld-blue-700); }
body.sldx-client #faq,
body.sldx-client #kb { margin: 0; padding: 0; }
body.sldx-client #faq ol,
body.sldx-client #kb { display: grid; gap: 9px; border: 0; list-style: none; }
body.sldx-client #faq ol li,
body.sldx-client #kb > li,
body.sldx-client .featured-category {
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--sld-border);
  border-radius: 10px;
  background: var(--sld-surface);
  color: var(--sld-text);
}
body.sldx-client #faq ol li a { display: block; padding: 0; border: 0; background: none; color: var(--sld-text); }
body.sldx-client #faq ol li:hover,
body.sldx-client #kb > li:hover,
body.sldx-client .featured-category:hover { border-color: var(--sld-blue-300); background: var(--sld-blue-50); }
body.sldx-client #faq .article-meta,
body.sldx-client .article-teaser { color: var(--sld-muted); }
body.sldx-client .featured-category { display: inline-block; width: calc(50% - 7px); margin: 7px 10px 7px 0; vertical-align: top; }
body.sldx-client .featured-category i { color: var(--sld-blue-600); }
body.sldx-client .article-headline { margin-inline-start: 36px; }
body.sldx-client .article-title,
body.sldx-client .category-name { color: var(--sld-text); font-weight: 700; }
body.sldx-client #kb-search {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--sld-border);
  border-radius: 10px;
  background: var(--sld-surface-2);
}
body.sldx-client #kb-search div { display: contents; }
body.sldx-client #kb-search #query,
body.sldx-client #kb-search #cid,
body.sldx-client #kb-search #topic-id { box-sizing: border-box; width: auto; min-width: 190px; flex: 1 1 230px; margin: 0; float: none; top: auto; }
body.sldx-client #kb-search #searchSubmit { margin: 0; float: none; top: auto; }
body.sldx-client #kb-search #breadcrumbs { flex-basis: 100%; color: var(--sld-muted); }
body.sldx-client #ticketTable,
body.sldx-client .infoTable { width: 100%; overflow: hidden; border: 1px solid var(--sld-border); border-radius: 10px; background: var(--sld-surface); }
body.sldx-client #ticketTable caption { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--sld-border); background: var(--sld-surface-2); color: var(--sld-text); font-weight: 800; text-align: left; }
body.sldx-client #ticketTable th,
body.sldx-client #ticketTable td,
body.sldx-client .infoTable th,
body.sldx-client .infoTable td { height: auto; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--sld-border); background: transparent; color: var(--sld-text); line-height: 1.4; }
body.sldx-client #ticketTable th { background: var(--sld-surface-2); color: var(--sld-text-soft); font-weight: 750; }
body.sldx-client #ticketTable tr:last-child td { border-bottom: 0; }
body.sldx-client #ticketTable tr:hover td { background: var(--sld-blue-50); }
body.sldx-client #reply {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--sld-border);
  border-radius: 11px;
  background: var(--sld-surface);
  color: var(--sld-text);
}
body.sldx-client #reply h2 { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--sld-border); color: var(--sld-text); }
body.sldx-client #reply textarea,
body.sldx-client #reply input[type="text"] { box-sizing: border-box; max-width: 100%; border-color: var(--sld-border); background: var(--sld-surface-2); color: var(--sld-text); }
body.sldx-client #ticketInfo h1 { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--sld-border); color: var(--sld-text); }
body.sldx-client #ticketThread { position: relative; z-index: 0; border-bottom: 1px solid var(--sld-border); }
body.sldx-client #ticketThread::before { border-left: 2px dotted var(--sld-border); }
body.sldx-client table.custom-data th { padding: 7px 10px; background: var(--sld-surface-2); color: var(--sld-text-soft); }
body.sldx-client table.custom-data .headline,
body.sldx-client table .headline { border-bottom: 2px solid var(--sld-border); background: var(--sld-surface); color: var(--sld-text); }

/* External authentication ------------------------------------------------ */
body.sldx .external-auth { display: block; margin: 7px 0; }
body.sldx a.external-sign-in { display: block; border: 0; text-decoration: none; }
body.sldx .external-auth-box {
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--sld-border);
  border-radius: 8px;
  background: var(--sld-surface);
  color: var(--sld-text);
  transition: border-color .15s ease, background .15s ease;
}
body.sldx a.external-sign-in:hover .external-auth-box { border-color: var(--sld-blue-500); background: var(--sld-blue-50); }
body.sldx .external-auth-icon { width: 38px; padding: 8px; border-right: 1px solid var(--sld-border); color: var(--sld-text-soft); text-align: center; }
body.sldx .external-auth-name { width: auto; flex: 1; padding: 8px 11px; color: var(--sld-text); line-height: 1.3; font-size: 13px; }
body.sldx img.sign-in-image { max-width: 100%; max-height: 34px; object-fit: contain; }
body.sldx .label {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--sld-text-soft);
  color: var(--sld-surface);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
  text-shadow: none;
}
body.sldx .label-bare { border: 1px solid var(--sld-border); background: transparent; color: var(--sld-text-soft); }
body.sldx .image-hover { position: relative; overflow: hidden; }
body.sldx .image-hover .caption { background: rgba(8, 19, 32, .82); color: #fff; backdrop-filter: blur(4px); }
body.sldx p.MsoNormal,
body.sldx li.MsoNormal,
body.sldx div.MsoNormal,
body.sldx p.MsoPlainText,
body.sldx li.MsoPlainText,
body.sldx div.MsoPlainText { color: inherit !important; font-family: inherit !important; }

/* Select2 v4 complete states --------------------------------------------- */
body.sldx .select2-container--default .select2-selection--single,
body.sldx .select2-container--default .select2-selection--multiple,
body.sldx .select2-container--classic .select2-selection--single,
body.sldx .select2-container--classic .select2-selection--multiple {
  min-height: 38px;
  border: 1px solid var(--sld-border) !important;
  border-radius: 8px !important;
  background: var(--sld-surface-2) !important;
  color: var(--sld-text) !important;
  box-shadow: none !important;
}
body.sldx .select2-container--default.select2-container--focus .select2-selection--multiple,
body.sldx .select2-container--classic .select2-selection--single:focus,
body.sldx .select2-container--classic .select2-selection--multiple:focus { border-color: var(--sld-blue-500) !important; box-shadow: 0 0 0 3px var(--sld-blue-50) !important; }
body.sldx .select2-selection__rendered,
body.sldx .select2-selection__placeholder { color: var(--sld-text) !important; line-height: 36px !important; }
body.sldx .select2-selection__placeholder { color: var(--sld-muted) !important; }
body.sldx .select2-selection__arrow { top: 6px !important; right: 7px !important; }
body.sldx .select2-selection__arrow b { border-top-color: var(--sld-text-soft) !important; }
body.sldx .select2-selection__choice {
  margin: 5px 4px 0 0 !important;
  padding: 3px 8px !important;
  border: 1px solid var(--sld-border) !important;
  border-radius: 6px !important;
  background: var(--sld-blue-50) !important;
  color: var(--sld-text) !important;
}
body.sldx .select2-selection__choice__remove { margin-right: 5px; color: var(--sld-muted) !important; }
body.sldx .select2-selection__choice__remove:hover { color: #c84c56 !important; }
body.sldx .select2-search--dropdown { padding: 8px; background: var(--sld-surface); }
body.sldx .select2-search--dropdown .select2-search__field { box-sizing: border-box; width: 100%; border-color: var(--sld-border); background: var(--sld-surface-2); color: var(--sld-text); }
body.sldx .select2-results__group { padding: 8px 10px; color: var(--sld-muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
body.sldx .select2-container--disabled .select2-selection { opacity: .65; background: var(--sld-surface-3, var(--sld-surface-2)) !important; }

/* jQuery UI and time picker ---------------------------------------------- */
body.sldx .ui-menu,
body.sldx .ui-autocomplete,
body.sldx .ui-datepicker,
body.sldx .ui-timepicker-div,
body.sldx .ui-dialog,
body.sldx .ui-tooltip {
  border: 1px solid var(--sld-border) !important;
  border-radius: 9px !important;
  background: var(--sld-surface) !important;
  color: var(--sld-text) !important;
  box-shadow: var(--sld-shadow-lg, 0 16px 40px rgba(7, 20, 38, .22)) !important;
}
body.sldx .ui-menu .ui-menu-item-wrapper,
body.sldx .ui-autocomplete .ui-menu-item-wrapper { padding: 7px 10px; border: 0 !important; border-radius: 5px; color: var(--sld-text); }
body.sldx .ui-menu .ui-state-active,
body.sldx .ui-autocomplete .ui-state-active { background: var(--sld-blue-50) !important; color: var(--sld-blue-700) !important; }
body.sldx .ui-dialog .ui-dialog-titlebar,
body.sldx .ui-datepicker .ui-datepicker-header,
body.sldx .ui-accordion .ui-accordion-header,
body.sldx .ui-tabs .ui-tabs-nav {
  border-color: var(--sld-border) !important;
  background: var(--sld-surface-2) !important;
  color: var(--sld-text) !important;
}
body.sldx .ui-dialog .ui-dialog-content,
body.sldx .ui-tabs .ui-tabs-panel,
body.sldx .ui-accordion .ui-accordion-content { border-color: var(--sld-border) !important; background: var(--sld-surface) !important; color: var(--sld-text) !important; }
body.sldx .ui-spinner { border-color: var(--sld-border) !important; border-radius: 7px; background: var(--sld-surface-2) !important; }
body.sldx .ui-spinner-input { color: var(--sld-text) !important; }
body.sldx .ui-timepicker-div dl dt,
body.sldx .ui-timepicker-div dl dd,
body.sldx .ui-datepicker th { color: var(--sld-text-soft) !important; }
body.sldx .ui-slider { border-color: var(--sld-border) !important; background: var(--sld-surface-2) !important; }
body.sldx .ui-slider-handle { border-color: var(--sld-blue-600) !important; background: var(--sld-blue-500) !important; }
body.sldx .ui-widget-overlay { background: #081320 !important; opacity: .66 !important; }

/* Redactor editor --------------------------------------------------------- */
body.sldx .redactor-in,
body.sldx .redactor-source,
body.sldx .redactor-source-view,
body.sldx .redactor-editor,
body.sldx .redactor-styles {
  border-color: var(--sld-border) !important;
  background: var(--sld-surface) !important;
  color: var(--sld-text) !important;
}
body.sldx .redactor-in:focus,
body.sldx .redactor-source:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--sld-blue-500); }
body.sldx .redactor-toolbar,
body.sldx .redactor-statusbar { border-color: var(--sld-border) !important; background: var(--sld-surface-2) !important; }
body.sldx .redactor-toolbar a,
body.sldx .redactor-toolbar button { border-radius: 5px !important; background: transparent !important; color: var(--sld-text-soft) !important; }
body.sldx .redactor-toolbar a:hover,
body.sldx .redactor-toolbar a.redactor-act,
body.sldx .redactor-toolbar button:hover { background: var(--sld-blue-50) !important; color: var(--sld-blue-700) !important; }
body.sldx .redactor-dropdown,
body.sldx .redactor-modal,
body.sldx .redactor-modal-box { border-color: var(--sld-border) !important; background: var(--sld-surface) !important; color: var(--sld-text) !important; box-shadow: var(--sld-shadow-lg, 0 16px 40px rgba(7, 20, 38, .22)) !important; }
body.sldx .redactor-dropdown a { color: var(--sld-text) !important; }
body.sldx .redactor-dropdown a:hover { background: var(--sld-blue-50) !important; color: var(--sld-blue-700) !important; }
body.sldx .redactor-modal input,
body.sldx .redactor-modal textarea,
body.sldx .redactor-modal select { border-color: var(--sld-border) !important; background: var(--sld-surface-2) !important; color: var(--sld-text) !important; }
body.sldx .redactor-placeholder::before { color: var(--sld-muted) !important; }

/* Spectrum color picker --------------------------------------------------- */
body.sldx .sp-container,
body.sldx .sp-replacer {
  border: 1px solid var(--sld-border) !important;
  border-radius: 8px !important;
  background: var(--sld-surface) !important;
  color: var(--sld-text) !important;
  box-shadow: var(--sld-shadow-lg, 0 16px 40px rgba(7, 20, 38, .22));
}
body.sldx .sp-picker-container,
body.sldx .sp-palette-container { border-color: var(--sld-border) !important; }
body.sldx .sp-input { border-color: var(--sld-border) !important; border-radius: 6px; background: var(--sld-surface-2) !important; color: var(--sld-text) !important; }
body.sldx .sp-thumb-el { overflow: hidden; border-color: var(--sld-border) !important; border-radius: 4px; }
body.sldx .sp-thumb-active { border-color: var(--sld-blue-500) !important; box-shadow: 0 0 0 2px var(--sld-blue-50); }
body.sldx .sp-cancel { color: #c84c56 !important; }
body.sldx .sp-choose { border-color: var(--sld-blue-700) !important; border-radius: 6px !important; background: var(--sld-blue-700) !important; color: #fff !important; text-shadow: none !important; }
body.sldx .sp-preview { border-color: var(--sld-border) !important; }
body.sldx .sp-dd { color: var(--sld-text-soft); }

/* Translation editor ----------------------------------------------------- */
body.sldx div.translatable { border-color: var(--sld-border); border-radius: 7px 0 0 7px; background: var(--sld-surface-2); color: var(--sld-text); box-shadow: none; }
body.sldx div.translatable.textarea { border-radius: 7px; }
body.sldx button.translatable { border-radius: 0 7px 7px 0; background: var(--sld-blue-700); color: #fff; }
body.sldx div.translations {
  min-width: min(360px, calc(100vw - 32px));
  padding: 6px;
  border: 1px solid var(--sld-border);
  border-radius: 9px;
  background: var(--sld-surface);
  color: var(--sld-text);
  box-shadow: var(--sld-shadow-lg, 0 16px 40px rgba(7, 20, 38, .22));
}
body.sldx ul.translations { max-height: 260px; padding: 7px; }
body.sldx ul.translations li { padding: 6px; }
body.sldx ul.translations li label.language { color: var(--sld-text); }
body.sldx ul.translations li input { border-color: var(--sld-border); background: var(--sld-surface-2); color: var(--sld-text); }
body.sldx div.add-translation,
body.sldx .language-commit { border-color: var(--sld-border); background: var(--sld-surface-2); color: var(--sld-text); }

/* Legacy dropdown grouping and responsive safeguards --------------------- */
body.sldx .customQ-dropdown hr,
body.sldx .action-dropdown hr { border-color: var(--sld-border); }
body.sldx .customQ-dropdown li.positive > a:hover,
body.sldx .action-dropdown li.positive > a:hover { background: #299764 !important; color: #fff !important; }
body.sldx .customQ-dropdown li.danger > a:hover,
body.sldx .action-dropdown li.danger > a:hover { background: #c84c56 !important; color: #fff !important; }
body.sldx .action-buttons { display: inline-flex; align-items: stretch; vertical-align: middle; }
body.sldx .action-buttons .action-button { margin: 0; border-radius: 0; }
body.sldx .action-buttons .action-button:first-child { border-radius: 7px 0 0 7px; }
body.sldx .action-buttons .action-button:last-child { border-radius: 0 7px 7px 0; }
body.sldx .typeahead.dropdown-menu { overflow: auto; max-width: min(520px, calc(100vw - 32px)); max-height: 320px; border-color: var(--sld-border); background: var(--sld-surface); color: var(--sld-text); box-shadow: var(--sld-shadow-lg, 0 16px 40px rgba(7, 20, 38, .22)); }
body.sldx .typeahead.dropdown-menu li a { color: var(--sld-text); }
body.sldx .typeahead.dropdown-menu li.active a,
body.sldx .typeahead.dropdown-menu li a:hover { background: var(--sld-blue-50); color: var(--sld-blue-700); }

/* Popup tabs live outside .sldx-content ----------------------------------
 * AJAX dialogs are appended directly to <body>. Therefore the normal
 * .sldx-content tab rules cannot reach advanced-search and similar popups. */
body.sldx #popup.dialog ul.tabs.clean {
  display: flex !important;
  min-height: 40px !important;
  align-items: flex-end !important;
  gap: 4px;
  box-sizing: border-box !important;
  margin: 8px 0 14px !important;
  padding: 4px 10px 0 !important;
  border: 1px solid var(--sld-border) !important;
  border-width: 1px 0 !important;
  background: var(--sld-surface-3) !important;
  color: var(--sld-text) !important;
  box-shadow: inset 0 -1px 0 var(--sld-border) !important;
}
body.sldx #popup.dialog ul.tabs.clean > li,
body.sldx #popup.dialog ul.tabs.clean > li:not(.active) {
  position: relative !important;
  bottom: 0 !important;
  display: flex !important;
  min-width: 0 !important;
  height: 35px !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-bottom: 0 !important;
  border-radius: 7px 7px 0 0 !important;
  background: transparent !important;
  color: var(--sld-text-soft) !important;
  box-shadow: none !important;
}
body.sldx #popup.dialog ul.tabs.clean > li > a {
  display: inline-flex !important;
  min-height: 34px !important;
  align-items: center !important;
  gap: 6px;
  box-sizing: border-box !important;
  padding: 0 14px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--sld-text-soft) !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
}
body.sldx #popup.dialog ul.tabs.clean > li:hover {
  background: var(--sld-blue-50) !important;
}
body.sldx #popup.dialog ul.tabs.clean > li:hover > a {
  color: var(--sld-blue-700) !important;
}
body.sldx #popup.dialog ul.tabs.clean > li.active {
  border-color: var(--sld-border-strong) !important;
  background: var(--sld-surface) !important;
  color: var(--sld-blue-700) !important;
}
body.sldx #popup.dialog ul.tabs.clean > li.active > a {
  color: var(--sld-blue-700) !important;
  font-weight: 750 !important;
}

/* Staff list hover -------------------------------------------------------
 * osTicket's original list rule paints cells white/yellow. Cover both the
 * admin lists and agent ticket queues, whose body is not `sldx-admin`. */
body.sldx.sldx-staff table.list tbody tr:hover > td,
body.sldx.sldx-staff table.list tbody tr:focus-within > td,
body.sldx.sldx-staff table.queue tbody tr:hover > td,
body.sldx.sldx-staff table.queue tbody tr:focus-within > td {
  border-color: var(--sld-border) !important;
  background: var(--sld-blue-50) !important;
  color: var(--sld-text) !important;
}
body.sldx.sldx-staff table.list tbody tr:hover > td a,
body.sldx.sldx-staff table.list tbody tr:focus-within > td a,
body.sldx.sldx-staff table.queue tbody tr:hover > td a,
body.sldx.sldx-staff table.queue tbody tr:focus-within > td a {
  color: var(--sld-blue-700) !important;
}

/* Ticket preview tooltip -------------------------------------------------
 * The AJAX preview is appended directly to body. Its original `.tip_content`
 * has a hard-coded white background and therefore needs body-level coverage. */
:root[data-theme="dark"] body.sldx .tip_box .tip_content {
  border-color: var(--sld-border-strong) !important;
  background: var(--sld-surface-2) !important;
  color: var(--sld-text) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .48) !important;
}
:root[data-theme="dark"] body.sldx .tip_box .tip_content h1,
:root[data-theme="dark"] body.sldx .tip_box .tip_content h2,
:root[data-theme="dark"] body.sldx .tip_box .tip_content h3,
:root[data-theme="dark"] body.sldx .tip_box .tip_content th,
:root[data-theme="dark"] body.sldx .tip_box .tip_content td,
:root[data-theme="dark"] body.sldx .tip_box .tip_content p,
:root[data-theme="dark"] body.sldx .tip_box .tip_content span,
:root[data-theme="dark"] body.sldx .tip_box .tip_content div,
:root[data-theme="dark"] body.sldx .tip_box .tip_content label {
  color: var(--sld-text) !important;
}
:root[data-theme="dark"] body.sldx .tip_box .tip_content .faded,
:root[data-theme="dark"] body.sldx .tip_box .tip_content .faded-more {
  color: var(--sld-muted) !important;
}
:root[data-theme="dark"] body.sldx .tip_box .tip_content a {
  color: var(--sld-blue-700) !important;
}
:root[data-theme="dark"] body.sldx .tip_box .tip_content hr,
:root[data-theme="dark"] body.sldx .tip_box .tip_content .links,
:root[data-theme="dark"] body.sldx .tip_box .tip_content .tip_menu {
  border-color: var(--sld-border) !important;
  background-color: transparent !important;
  color: var(--sld-border) !important;
}
:root[data-theme="dark"] body.sldx .tip_box .tip_content ul.tabs,
:root[data-theme="dark"] body.sldx .tip_box .tip_content ul.tabs > li,
:root[data-theme="dark"] body.sldx .tip_box .tip_content ul.tabs > li > a,
:root[data-theme="dark"] body.sldx .tip_box #ticket-preview_container,
:root[data-theme="dark"] body.sldx .tip_box .tab_content,
:root[data-theme="dark"] body.sldx .tip_box table,
:root[data-theme="dark"] body.sldx .tip_box table tr,
:root[data-theme="dark"] body.sldx .tip_box table th,
:root[data-theme="dark"] body.sldx .tip_box table td {
  border-color: var(--sld-border) !important;
  background: transparent !important;
}
:root[data-theme="dark"] body.sldx .tip_box .tip_content ul.tabs > li.active > a {
  border-color: var(--sld-border-strong) !important;
  border-bottom-color: var(--sld-surface-2) !important;
  background: var(--sld-surface-2) !important;
  color: var(--sld-text) !important;
}
:root[data-theme="dark"] body.sldx .tip_box .tip_content ul.tabs > li:not(.active) > a {
  background: var(--sld-surface-3) !important;
  color: var(--sld-muted) !important;
}
:root[data-theme="dark"] body.sldx .tip_box .tip_arrow {
  filter: brightness(.22) saturate(.7) !important;
}

/* Ticket thread preview --------------------------------------------------
 * This is a separate component from the full ticket `.thread-entry` UI.
 * Neutralize every original light surface and the inherited timeline. */
:root[data-theme="dark"] body.sldx .tip_box .thread-preview,
:root[data-theme="dark"] body.sldx .tip_box .thread-preview #ticketThread,
:root[data-theme="dark"] body.sldx .tip_box .thread-preview #thread-items {
  border-color: var(--sld-border) !important;
  background: var(--sld-surface-2) !important;
  color: var(--sld-text) !important;
  scrollbar-color: var(--sld-border-strong) var(--sld-surface-2);
}
:root[data-theme="dark"] body.sldx .tip_box .thread-preview #thread-items {
  margin: 0 !important;
  padding: 0 !important;
}
:root[data-theme="dark"] body.sldx .tip_box .thread-preview #thread-items::before,
:root[data-theme="dark"] body.sldx .tip_box .thread-preview #thread-items > div::before {
  display: none !important;
  content: none !important;
}
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry,
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry.collapsed {
  border-color: var(--sld-border) !important;
  background: var(--sld-surface-2) !important;
  color: var(--sld-text) !important;
}
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry .header,
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry.collapsed .header {
  border-color: var(--sld-border) !important;
  background: var(--sld-surface-3) !important;
  color: var(--sld-text-soft) !important;
}
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry.message .header {
  background: color-mix(in srgb, var(--sld-blue-500) 24%, var(--sld-surface-3)) !important;
}
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry.response .header {
  background: color-mix(in srgb, var(--sld-accent) 20%, var(--sld-surface-3)) !important;
}
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry.note .header {
  background: color-mix(in srgb, var(--sld-warning) 18%, var(--sld-surface-3)) !important;
}
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry.system .header {
  background: var(--sld-surface-3) !important;
}
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry .thread-name,
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry .thread-name span,
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry .thread-info {
  color: inherit !important;
}
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry .thread-body,
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry.collapsed .thread-body,
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry .thread-teaser {
  border-color: var(--sld-border) !important;
  background: var(--sld-surface) !important;
  color: var(--sld-text) !important;
}
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry .thread-teaser :where(div, p, span, section, article, header, footer, table, tbody, thead, tfoot, tr, td, th, blockquote, pre, code, font) {
  border-color: var(--sld-border) !important;
  background-color: transparent !important;
  color: inherit !important;
}
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry .thread-teaser a,
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry .attachments a {
  color: var(--sld-blue-700) !important;
}
:root[data-theme="dark"] body.sldx .tip_box .thread-preview-entry .attachments {
  border-color: var(--sld-border) !important;
  background: var(--sld-surface-2) !important;
  color: var(--sld-text-soft) !important;
}

/* Support widget privacy disclosure ------------------------------------- */
body.sldx .sldx-support-privacy {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  margin: 4px 0 14px;
  padding: 12px;
  border: 1px solid var(--sld-border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--sld-blue-50) 62%, var(--sld-surface-2));
  color: var(--sld-text-soft);
}
body.sldx .sldx-support-privacy > i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 8px;
  background: var(--sld-blue-50);
  color: var(--sld-blue-700);
}
body.sldx .sldx-support-privacy p { margin: 0 !important; font-size: 11px; line-height: 1.55; }
body.sldx .sldx-support-privacy strong { color: var(--sld-text) !important; }
body.sldx .sldx-support-privacy-trigger {
  display: inline;
  margin: 0 0 0 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sld-blue-700);
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
body.sldx .sldx-support-privacy-trigger:hover,
body.sldx .sldx-support-privacy-trigger:focus-visible { color: var(--sld-blue-500); }
body.sldx .sldx-support-attachment-notice { display: block; color: var(--sld-muted) !important; line-height: 1.45; }

body.sldx .sldx-support-privacy-overlay { z-index: 10080; }
body.sldx .sldx-support-privacy-dialog { width: min(920px, 100%); }
body.sldx .sldx-support-privacy-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
body.sldx .sldx-support-privacy-content section {
  padding: 14px;
  border: 1px solid var(--sld-border);
  border-radius: 12px;
  background: var(--sld-surface-2);
  color: var(--sld-text-soft);
}
body.sldx .sldx-support-privacy-content h3 {
  margin: 0 0 7px !important;
  color: var(--sld-text) !important;
  font-size: 13px !important;
}
body.sldx .sldx-support-privacy-content p,
body.sldx .sldx-support-privacy-content ul { margin: 0 !important; color: inherit !important; font-size: 11px; line-height: 1.6; }
body.sldx .sldx-support-privacy-content ul { padding-left: 18px; }
body.sldx .sldx-support-privacy-content a { color: var(--sld-blue-700) !important; font-weight: 800; }
body.sldx .sldx-support-privacy-scope {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--sld-blue-500) 45%, var(--sld-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--sld-blue-50) 58%, var(--sld-surface));
}
body.sldx .sldx-support-privacy-scope i { margin-top: 2px; color: var(--sld-blue-700); }

@media (max-width: 760px) {
  body.sldx .sldx-support-privacy-content { grid-template-columns: 1fr; }
  body.sldx-client .featured-category { display: block; width: 100%; margin-right: 0; }
  body.sldx-client #ticketTable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.sldx-client #reply { padding: 12px; }
  body.sldx-client #reply table,
  body.sldx-client #reply tbody,
  body.sldx-client #reply tr,
  body.sldx-client #reply td { display: block; width: 100% !important; }
  body.sldx-client #kb-search > * { width: 100% !important; flex-basis: 100% !important; }
  body.sldx .ui-dialog { box-sizing: border-box; max-width: calc(100vw - 20px) !important; }
}

/* Explicit dark-state closure for original white surfaces ---------------- */
:root[data-theme="dark"] body.sldx .non-local-image,
:root[data-theme="dark"] body.sldx div.section-break { border-color: var(--sld-border) !important; }
:root[data-theme="dark"] body.sldx .ui-state-default,
:root[data-theme="dark"] body.sldx .ui-widget-content .ui-state-default,
:root[data-theme="dark"] body.sldx .ui-widget-header .ui-state-default { border-color: var(--sld-border) !important; background: var(--sld-surface-2) !important; color: var(--sld-text) !important; }
:root[data-theme="dark"] body.sldx .ui-state-hover,
:root[data-theme="dark"] body.sldx .ui-widget-content .ui-state-hover,
:root[data-theme="dark"] body.sldx .ui-state-focus { border-color: var(--sld-blue-500) !important; background: var(--sld-blue-50) !important; color: var(--sld-blue-700) !important; }
:root[data-theme="dark"] body.sldx .ui-state-active,
:root[data-theme="dark"] body.sldx .ui-widget-content .ui-state-active { border-color: var(--sld-blue-500) !important; background: var(--sld-blue-600) !important; color: #fff !important; }
:root[data-theme="dark"] body.sldx .sp-container,
:root[data-theme="dark"] body.sldx .sp-replacer,
:root[data-theme="dark"] body.sldx .sp-picker-container,
:root[data-theme="dark"] body.sldx .sp-palette-container,
:root[data-theme="dark"] body.sldx .sp-input,
:root[data-theme="dark"] body.sldx div.translations,
:root[data-theme="dark"] body.sldx div.add-translation,
:root[data-theme="dark"] body.sldx .redactor-modal,
:root[data-theme="dark"] body.sldx .redactor-modal-box { border-color: var(--sld-border) !important; background: var(--sld-surface) !important; color: var(--sld-text) !important; }