/*
 * Convey Brand Design System — CSS Override Layer
 * Applies Convey brand tokens to the legacy ExtJS 4 / JSP UI.
 * To revert: remove the <link> tag from the decorator JSPs.
 */

/* =========================================================
   TTS TIPS FLOATING PANEL
   position:fixed !important beats ExtJS's JS-set position:absolute
   so the panel stays viewport-anchored and doesn't scroll.
   left/top are set via JS (viewport coords) and win as inline styles.
   ========================================================= */
.tts-tips-floating {
  position: fixed !important;
  z-index: 9999 !important;
}

/* =========================================================
   LOGIN SPINNER
   Shown inline to the right of the Login button while the
   form POST is in flight. Hidden by default; JS shows it
   on submit and disables the button to prevent double-click.
   ========================================================= */
@keyframes loginSpin {
  to { transform: rotate(360deg); }
}
#loginSpinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--convey-light-2, #ABD5D8);
  border-top-color: var(--convey-deep-2, #004651);
  border-radius: 50%;
  animation: loginSpin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ===== Brand Tokens ===== */
:root {
  --convey-deep-1: #002E38;
  --convey-deep-2: #004651;
  --convey-deep-3: #005C68;
  --convey-light-1: #81C0C4;
  --convey-light-2: #ABD5D8;
  --convey-light-3: #DAE9EB;
  --convey-green: #00FFA4;
  --convey-orange: #FFA96E;
  --convey-purple: #865FFF;

  --text-primary: #333333;
  --text-muted: #5A6B7D;
  --text-on-dark: #ffffff;
  --surface: #ffffff;
  --surface-tint: #F7FAFA;
  --border: #81C0C4;
  --border-light: #DAE9EB;
  --error: #B42318;
  --success: #027A48;

  --page-pad: 24px;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-card: 6px;
  --shadow-sm: 0 1px 3px rgba(0,46,56,0.06);
  --shadow-md: 0 2px 8px rgba(0,46,56,0.1);
  --transition: 0.15s ease;

  --font-heading: "Plus Jakarta Sans", "Trebuchet MS", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ===== Font Loading ===== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Plus+Jakarta+Sans:wght@600;700&display=swap');

/* ===== Base ===== */
html, body {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--text-primary) !important;
  background-color: var(--surface-tint) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* overflow-x ONLY on body — NOT on html.
   Setting overflow-x:hidden on the html element breaks position:fixed by
   promoting html to the scroll container, causing fixed elements to scroll. */
body {
  overflow-x: hidden !important;
}

div#page {
  font-family: var(--font-body) !important;
  color: var(--text-primary) !important;
  background-color: var(--surface-tint) !important;
  line-height: 1.5 !important;
  padding-bottom: 0 !important;
}

div#content {
  font-family: var(--font-body) !important;
  color: var(--text-primary) !important;
  background-color: var(--surface) !important;
  min-height: 300px !important;
  padding-bottom: 40px !important;
}

/* ===== Headings ===== */
div#main h1, div#main-dialog h1 {
  font-family: var(--font-heading) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--convey-deep-1) !important;
  border-bottom: none !important;
  padding: 0 0 4px 0 !important;
  margin: 0 0 8px 0 !important;
}

div#main h2, div#main-dialog h2 {
  font-family: var(--font-heading) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--convey-deep-1) !important;
}

div#main h3, div#main-dialog h3 {
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--convey-deep-2) !important;
}

div#main h4, div#main-dialog h4 {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--convey-deep-2) !important;
}

div#main h5, div#main-dialog h5,
div#main h6, div#main-dialog h6 {
  font-family: var(--font-body) !important;
  color: var(--text-muted) !important;
  font-weight: 600 !important;
}

/* ===== Links ===== */
a, a:visited {
  color: var(--convey-deep-3) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color var(--transition);
}

a:hover {
  color: var(--convey-deep-1) !important;
  text-decoration: underline !important;
}

/* =========================================================
   HEADER — logged-in layout
   #header-top: flex row, logo left / right-side block right
   #header-right: stacks header-links on top, help-desk below
   ========================================================= */
div#header {
  background-color: var(--surface) !important;
  border-bottom: none !important;
  padding: 0 var(--page-pad) !important;
  line-height: 1.4em !important;
  width: auto !important;
}

/* Flex row: logo on left, right block on right */
#header-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
}

#header-logo img {
  display: block;
  max-height: 32px;
  width: auto;
}

/* Right-side block: links on top, help desk below, all right-aligned */
#header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* Username + nav links row */
#header-links {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.4;
}

#header-links a {
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Help desk — single inline row */
div#header div#help-desk {
  background: transparent !important;
  border: none !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  line-height: 1.4 !important;
}

.help-desk-row {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.help-desk-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.help-desk-contact {
  font-size: 12px;
  color: var(--text-muted);
}

.help-desk-divider {
  font-size: 11px;
  color: var(--border);
}

.help-desk-phone {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.help-desk-email {
  font-size: 12px !important;
  color: var(--convey-deep-3) !important;
  font-weight: 500 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Kill the old branding div rules that used negative margins */
div#header div#branding {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* =========================================================
   NAVIGATION
   ========================================================= */
div#nav-bar {
  background: var(--convey-deep-1) !important;
  background-image: none !important;
  height: auto !important;
  min-height: 42px;
  overflow: visible !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
  position: relative !important;
  clear: both !important;
}

/* Override absolute positioning from layout-navtop-subright.css */
div#nav {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  display: block !important;
}

div#nav ul {
  padding: 0 var(--page-pad) !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  min-height: 42px;
  list-style: none !important;
}

div#nav li {
  display: inline-flex !important;
  align-items: center;
}

div#nav a {
  color: var(--convey-light-2) !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  transition: all var(--transition);
  line-height: 1 !important;
  float: none !important;
}

div#nav a:hover,
div#nav a:hover span {
  color: var(--text-on-dark) !important;
  background-color: var(--convey-deep-3) !important;
  text-decoration: none !important;
}

div#nav a span {
  color: inherit !important;
  background-color: transparent !important;
  float: none !important;
}

div#nav a span.selected {
  color: var(--text-on-dark) !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--convey-green) !important;
  padding-bottom: 2px;
}

/* =========================================================
   MAIN CONTENT
   ========================================================= */
div#main {
  padding: 16px var(--page-pad) var(--page-pad) var(--page-pad) !important;
  min-height: 300px !important;
}

div#main-dialog {
  padding: var(--page-pad) !important;
}

/* =========================================================
   FOOTER
   ========================================================= */
div#footer {
  background-color: transparent !important;
  padding: 0 var(--page-pad) !important;
}

div#footer p {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  padding: 12px 0 !important;
  border-top: 1px solid var(--border-light);
}

div#footer p a {
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}

div#footer p a:hover {
  color: var(--convey-deep-3) !important;
}

/* Kill the 150px empty spacer */
div#footer > div:last-child {
  height: 0px !important;
}

/* Clean up dotted separators */
div[style*="border-top: 1px dotted"] {
  border-top-color: var(--border-light) !important;
  border-top-style: solid !important;
  margin: 0 var(--page-pad) !important;
}

/* =========================================================
   BUTTONS — HTML native
   ========================================================= */
.button, button {
  background-color: var(--convey-green) !important;
  color: var(--convey-deep-1) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 8px 20px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background-color var(--transition), box-shadow var(--transition);
  width: auto !important;
}

.button:hover, button:hover:not(.wizard-tab) {
  background-color: #00e694 !important;
  box-shadow: var(--shadow-sm);
}

.button_disabled {
  background-color: var(--border-light) !important;
  color: var(--text-muted) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: not-allowed;
  width: auto !important;
}

/* =========================================================
   BUTTONS — ExtJS 4
   Nuclear reset: kill ALL frame background images inside
   any button, then style cleanly on top.
   ========================================================= */

/* --- Secondary buttons (default) --- */

/* Kill frame sprite GIFs on all button sizes */
.x-btn-default-small-tl, .x-btn-default-small-bl,
.x-btn-default-small-tr, .x-btn-default-small-br,
.x-btn-default-small-tc, .x-btn-default-small-bc,
.x-btn-default-small-ml, .x-btn-default-small-mr,
.x-btn-default-small-mc,
.x-btn-default-medium-tl, .x-btn-default-medium-bl,
.x-btn-default-medium-tr, .x-btn-default-medium-br,
.x-btn-default-medium-tc, .x-btn-default-medium-bc,
.x-btn-default-medium-ml, .x-btn-default-medium-mr,
.x-btn-default-medium-mc,
.x-btn-default-large-tl, .x-btn-default-large-bl,
.x-btn-default-large-tr, .x-btn-default-large-br,
.x-btn-default-large-tc, .x-btn-default-large-bc,
.x-btn-default-large-ml, .x-btn-default-large-mr,
.x-btn-default-large-mc {
  background-image: none !important;
  background-color: transparent !important;
}

/* Also kill toolbar button frame sprites */
.x-btn-default-toolbar-small-tl, .x-btn-default-toolbar-small-bl,
.x-btn-default-toolbar-small-tr, .x-btn-default-toolbar-small-br,
.x-btn-default-toolbar-small-tc, .x-btn-default-toolbar-small-bc,
.x-btn-default-toolbar-small-ml, .x-btn-default-toolbar-small-mr,
.x-btn-default-toolbar-small-mc,
.x-btn-default-toolbar-medium-tl, .x-btn-default-toolbar-medium-bl,
.x-btn-default-toolbar-medium-tr, .x-btn-default-toolbar-medium-br,
.x-btn-default-toolbar-medium-tc, .x-btn-default-toolbar-medium-bc,
.x-btn-default-toolbar-medium-ml, .x-btn-default-toolbar-medium-mr,
.x-btn-default-toolbar-medium-mc,
.x-btn-default-toolbar-large-tl, .x-btn-default-toolbar-large-bl,
.x-btn-default-toolbar-large-tr, .x-btn-default-toolbar-large-br,
.x-btn-default-toolbar-large-tc, .x-btn-default-toolbar-large-bc,
.x-btn-default-toolbar-large-ml, .x-btn-default-toolbar-large-mr,
.x-btn-default-toolbar-large-mc {
  background-image: none !important;
  background-color: transparent !important;
}
.x-btn-default-small,
.x-btn-default-medium,
.x-btn-default-large {
  border-color: var(--convey-deep-3) !important;
  background: var(--convey-deep-3) !important;
  background-image: none !important;
  border-radius: 3px !important;
  transition: all 0.15s ease !important;
}

.x-btn-default-small .x-btn-inner,
.x-btn-default-medium .x-btn-inner,
.x-btn-default-large .x-btn-inner {
  color: var(--text-on-dark) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.2px;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.x-btn-default-small,
.x-btn-default-medium,
.x-btn-default-large {
  overflow: visible !important;
  width: auto !important;
}

.x-btn-default-small-mc,
.x-btn-default-medium-mc,
.x-btn-default-large-mc {
  background-image: none !important;
  background-color: var(--convey-deep-3) !important;
}

/* Hover */
.x-btn-default-small-over,
.x-btn-default-medium-over,
.x-btn-default-large-over {
  border-color: var(--convey-deep-2) !important;
  background: var(--convey-deep-2) !important;
  background-image: none !important;
  box-shadow: 0 2px 4px rgba(0,48,59,0.2) !important;
}

.x-btn-default-small-over .x-btn-inner,
.x-btn-default-medium-over .x-btn-inner,
.x-btn-default-large-over .x-btn-inner {
  color: var(--text-on-dark) !important;
}

.x-btn-default-small-over .x-frame-mc,
.x-btn-default-medium-over .x-frame-mc,
.x-btn-default-large-over .x-frame-mc {
  background-image: none !important;
  background-color: var(--convey-deep-2) !important;
}

/* Pressed */
.x-btn-default-small-pressed,
.x-btn-default-medium-pressed,
.x-btn-default-large-pressed {
  border-color: var(--convey-deep-1) !important;
  background: var(--convey-deep-1) !important;
  background-image: none !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2) !important;
}

.x-btn-default-small-pressed .x-frame-mc,
.x-btn-default-medium-pressed .x-frame-mc,
.x-btn-default-large-pressed .x-frame-mc {
  background-image: none !important;
  background-color: var(--convey-deep-1) !important;
}

/* Focus */
.x-btn-default-small-focus,
.x-btn-default-medium-focus,
.x-btn-default-large-focus {
  border-color: var(--convey-light-1) !important;
  background: var(--convey-deep-3) !important;
  background-image: none !important;
  box-shadow: 0 0 0 2px rgba(129,192,196,0.4) !important;
}

.x-btn-default-small-focus .x-frame-mc,
.x-btn-default-medium-focus .x-frame-mc,
.x-btn-default-large-focus .x-frame-mc {
  background-image: none !important;
  background-color: var(--convey-deep-3) !important;
}

/* Disabled */
.x-btn-default-small-disabled,
.x-btn-default-medium-disabled,
.x-btn-default-large-disabled {
  border-color: var(--border-light) !important;
  background: var(--border-light) !important;
  background-image: none !important;
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none !important;
}

.x-btn-default-small-disabled .x-btn-inner,
.x-btn-default-medium-disabled .x-btn-inner,
.x-btn-default-large-disabled .x-btn-inner {
  color: var(--text-muted) !important;
}

.x-btn-default-small-disabled .x-frame-mc,
.x-btn-default-medium-disabled .x-frame-mc,
.x-btn-default-large-disabled .x-frame-mc {
  background-image: none !important;
  background-color: var(--border-light) !important;
}

/* --- Toolbar buttons (subtle) --- */
.x-btn-default-toolbar-small,
.x-btn-default-toolbar-medium,
.x-btn-default-toolbar-large {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  transition: all 0.15s ease !important;
}

.x-btn-default-toolbar-small-over,
.x-btn-default-toolbar-medium-over,
.x-btn-default-toolbar-large-over {
  border-color: var(--convey-light-1) !important;
  background: rgba(218,233,235,0.4) !important;
  background-image: none !important;
}

.x-btn-default-toolbar-small-over .x-frame-mc,
.x-btn-default-toolbar-medium-over .x-frame-mc,
.x-btn-default-toolbar-large-over .x-frame-mc {
  background-image: none !important;
  background-color: rgba(218,233,235,0.4) !important;
}

.x-btn-default-toolbar-small-pressed,
.x-btn-default-toolbar-medium-pressed,
.x-btn-default-toolbar-large-pressed {
  border-color: var(--convey-light-1) !important;
  background: rgba(171,213,216,0.4) !important;
  background-image: none !important;
}

.x-btn-default-toolbar-small-pressed .x-frame-mc,
.x-btn-default-toolbar-medium-pressed .x-frame-mc,
.x-btn-default-toolbar-large-pressed .x-frame-mc {
  background-image: none !important;
  background-color: rgba(171,213,216,0.4) !important;
}

/* --- Primary CTA: Activate / Send button (green) ---
   background-color longhand with a literal, not `background: var(--token)`:
   a var() in the shorthand becomes a pending-substitution value that never
   applies once a background-image longhand follows it. #00FFA4 is
   --convey-green. `border: none` rather than border-color: transparent, so the
   theme's 1px border doesn't show the panel through as a white ring. */
#activatemessageButton,
#activatemessageButton.x-btn-default-medium,
#activatemessageButton.x-btn-default-large {
  border: none !important;
  background-color: #00FFA4 !important;
  background-image: none !important;
  box-shadow: 0 1px 4px rgba(0,48,59,0.15) !important;
  float: right !important;
  margin-left: 0 !important;
}

#activatemessageButton .x-btn-inner {
  color: var(--convey-deep-1) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

#activatemessageButton .x-frame-mc {
  background-image: none !important;
  background-color: var(--convey-green) !important;
}

#activatemessageButton.x-btn-over,
#activatemessageButton.x-btn-default-medium-over,
#activatemessageButton.x-btn-default-large-over {
  background: #00e694 !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(0,48,59,0.2) !important;
}

#activatemessageButton.x-btn-over .x-frame-mc {
  background-image: none !important;
  background-color: #00e694 !important;
}

#activatemessageButton.x-btn-pressed,
#activatemessageButton.x-btn-default-medium-pressed,
#activatemessageButton.x-btn-default-large-pressed {
  background: #00cc7a !important;
  border-color: transparent !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.12) !important;
}

#activatemessageButton.x-btn-pressed .x-frame-mc {
  background-image: none !important;
  background-color: #00cc7a !important;
}

#activatemessageButton.x-btn-default-medium-focus,
#activatemessageButton.x-btn-default-large-focus {
  border-color: transparent !important;
  background: var(--convey-green) !important;
  box-shadow: 0 0 0 3px rgba(15,255,164,0.25) !important;
}

#activatemessageButton.x-btn-default-medium-focus .x-frame-mc,
#activatemessageButton.x-btn-default-large-focus .x-frame-mc {
  background-image: none !important;
  background-color: var(--convey-green) !important;
}

/* =========================================================
   FORMS
   ========================================================= */
.struts-form input[type=text],
.struts-form input[type=password] {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  height: 36px !important;
  line-height: 36px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.struts-form input[type=text]:focus,
.struts-form input[type=password]:focus {
  border-color: var(--convey-deep-3) !important;
  box-shadow: 0 0 0 2px rgba(0,92,104,0.15) !important;
}

.struts-form select {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  height: 36px !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  padding: 0 8px !important;
}

.struts-form td.tdLabel {
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

.struts-form td.tdHeading {
  color: var(--convey-deep-1) !important;
  font-family: var(--font-heading) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

/* =========================================================
   TABLES
   ========================================================= */
.table {
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100%;
}

.table thead th, .table th {
  background: var(--convey-deep-3) !important;
  color: var(--text-on-dark) !important;
  border: none !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 16px !important;
  white-space: normal !important;
  word-break: break-word;
}

.table thead th:first-child { border-radius: 0; }
.table thead th:last-child  { border-radius: 0; }

.table td {
  border: none !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
}

.table tbody tr:nth-child(even) td {
  background-color: rgba(218,233,235,0.3);
}

.table tbody tr:hover td {
  background-color: rgba(171,213,216,0.3);
}

.table th a {
  color: var(--convey-light-2) !important;
}

/* =========================================================
   EXTJS 4 — Global Font
   ========================================================= */
.x-panel-header,
.x-panel-header-text-container-default,
.x-grid-header-ct,
.x-column-header-text,
.x-grid-cell,
.x-toolbar,
.x-btn-inner,
.x-form-field,
.x-form-text,
.x-fieldset-header-text,
.x-window-header-text-container-default,
.x-tab-inner,
.x-menu-item-text {
  font-family: var(--font-body) !important;
}

/* =========================================================
   EXTJS 4 — Grid
   ========================================================= */
.x-column-header {
  background: var(--convey-deep-1) !important;
  border-color: var(--convey-deep-2) !important;
  height: auto !important;
  min-height: 28px;
}

.x-column-header-inner {
  height: auto !important;
  overflow: visible !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.x-column-header-text {
  color: var(--text-on-dark) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap !important;
  line-height: 1.3;
  overflow: visible !important;
}

.x-grid-header-ct {
  background: var(--convey-deep-3) !important;
  border-color: var(--convey-deep-2) !important;
}

.x-column-header-over {
  background: var(--convey-deep-2) !important;
}

/* Keep sorted columns the same teal — the sort arrow is enough indicator */
.x-column-header-sort-ASC,
.x-column-header-sort-DESC {
  background: var(--convey-deep-3) !important;
  background-image: none !important;
}

.x-column-header-sort-ASC .x-column-header-text,
.x-column-header-sort-DESC .x-column-header-text {
  color: var(--text-on-dark) !important;
}

/* Sort arrow color — white to match header text */
.x-column-header-sort-ASC .x-column-header-sort-ASC-el,
.x-column-header-sort-DESC .x-column-header-sort-DESC-el {
  filter: brightness(0) invert(1) !important;
  opacity: 0.9;
}

.x-grid-cell {
  font-size: 13px !important;
  color: var(--text-primary) !important;
}

/* Severity badge — always white text regardless of row state */
.x-grid-cell.audit-log-error { background-color: #7e2217 !important; color: #FFFFFF !important; }
.x-grid-cell.audit-log-warn  { background-color: #fbb117 !important; color: #FFFFFF !important; }
.x-grid-cell.audit-log-info  { background-color: #347235 !important; color: #FFFFFF !important; }
.x-grid-cell.audit-log-debug { background-color: #153e7e !important; color: #FFFFFF !important; }

.x-grid-row-over .x-grid-cell {
  background-color: rgba(171,213,216,0.3) !important;
}

/* Preserve severity badge cell colors on hover rows */
.x-grid-row-over .x-grid-cell.audit-log-error { background-color: #7e2217 !important; color: #FFFFFF !important; }
.x-grid-row-over .x-grid-cell.audit-log-warn  { background-color: #fbb117 !important; color: #FFFFFF !important; }
.x-grid-row-over .x-grid-cell.audit-log-info  { background-color: #347235 !important; color: #FFFFFF !important; }
.x-grid-row-over .x-grid-cell.audit-log-debug { background-color: #153e7e !important; color: #FFFFFF !important; }

.x-grid-row-alt .x-grid-cell {
  background-color: rgba(218,233,235,0.3) !important;
}

/* Preserve severity badge cell colors on alternating rows — higher specificity than the rule above */
.x-grid-row-alt .x-grid-cell.audit-log-error { background-color: #7e2217 !important; color: #FFFFFF !important; }
.x-grid-row-alt .x-grid-cell.audit-log-warn  { background-color: #fbb117 !important; color: #FFFFFF !important; }
.x-grid-row-alt .x-grid-cell.audit-log-info  { background-color: #347235 !important; color: #FFFFFF !important; }
.x-grid-row-alt .x-grid-cell.audit-log-debug { background-color: #153e7e !important; color: #FFFFFF !important; }

.x-grid-row-selected .x-grid-cell {
  background-color: rgba(129,192,196,0.25) !important;
}

/* Preserve severity badge on selected rows */
.x-grid-row-selected .x-grid-cell.audit-log-error { background-color: #7e2217 !important; color: #FFFFFF !important; }
.x-grid-row-selected .x-grid-cell.audit-log-warn  { background-color: #fbb117 !important; color: #FFFFFF !important; }
.x-grid-row-selected .x-grid-cell.audit-log-info  { background-color: #347235 !important; color: #FFFFFF !important; }
.x-grid-row-selected .x-grid-cell.audit-log-debug { background-color: #153e7e !important; color: #FFFFFF !important; }

/* =========================================================
   EXTJS 4 — Panels, Tabs
   ========================================================= */
.x-panel-header-text-container-default {
  font-weight: 600 !important;
  color: var(--convey-deep-1) !important;
}

/* Tab bar */
.x-tab-bar {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: none !important;
}

.x-tab-bar-body {
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  overflow: visible !important;
}

/* Kill the green strip — every possible selector */
.x-tab-bar .x-tab-bar-strip,
.x-tab-bar-strip,
.x-tab-bar-strip-default,
.x-tab-bar-strip-default-top {
  display: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: none !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

/* Individual tabs — only override visuals, not dimensions */
.x-tab {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-right: 4px !important;
  border-radius: 0 !important;
}

.x-tab .x-tab-inner {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  line-height: normal !important;
}

/* Active tab */
.x-tab-active {
  background: transparent !important;
  border-bottom: 2px solid var(--convey-deep-1) !important;
}

.x-tab-active .x-tab-inner {
  color: var(--convey-deep-1) !important;
  font-weight: 600 !important;
}

/* Tab hover */
.x-tab-over {
  background: rgba(218,233,235,0.3) !important;
}

.x-tab-over .x-tab-inner {
  color: var(--convey-deep-2) !important;
}

/* Kill tab frame sprites */
.x-tab .x-frame-tl,
.x-tab .x-frame-tr,
.x-tab .x-frame-bl,
.x-tab .x-frame-br,
.x-tab .x-frame-tc,
.x-tab .x-frame-bc,
.x-tab .x-frame-ml,
.x-tab .x-frame-mr,
.x-tab .x-frame-mc {
  background-image: none !important;
  background-color: transparent !important;
}

/* Tab panel body — remove inner border only; height/overflow handled per-page */
.x-tab-panel-body-default,
.x-tab-panel-body {
  border: none !important;
}

/* x-btn-inner base is handled in the button section above */

.x-form-field,
.x-form-text {
  border-radius: 4px !important;
}

.x-form-text:focus {
  border-color: var(--convey-deep-3) !important;
}

.x-fieldset-header-text {
  font-weight: 600 !important;
  color: var(--convey-deep-2) !important;
}

.x-window-header-text-container-default {
  font-weight: 600 !important;
  color: var(--convey-deep-1) !important;
}

.x-toolbar {
  border-color: var(--border-light) !important;
}

/* =========================================================
   HOME PAGE — Layout
   ========================================================= */

/* Tab panel container */
#tab-panel {
  min-height: 200px;
}

/* Remove the outer tab panel border */
#tab-panel > .x-panel-body {
  border: none !important;
}

/* Remove the tab panel header border */
#tab-panel > .x-panel-header {
  border: none !important;
}

/* Send Message tab content */
#main-tab {
  padding: 15px 10px 10px 10px !important;
}

/* Only apply flex when ExtJS has made it visible */
#main-tab:not(.x-hidden) {
  display: flex !important;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch; /* all cards grow to the same height */
}

#main-tab > div {
  float: none !important;
  margin-left: 0 !important;
}

/* Campaign panel — only safe overrides, let ExtJS manage heights */
#campaign-panel {
  margin: 0 !important;
  flex-shrink: 0;
  overflow: visible !important;
}

/* Target the ExtJS-generated panel body (may be a grandchild, not direct child) */
#campaign-panel .x-panel-body {
  overflow: visible !important;
}

/* Home page only — scoped under #main-tab so the messages page isn't affected */
#main-tab #selection-panel {
  padding: 16px !important;
  margin: 0 !important;
  width: 380px !important;
  max-width: 380px !important;
  min-width: 380px !important;
  box-sizing: border-box !important;
}

#main-tab #description-panel {
  padding: 20px !important;
  margin: 0 0 0 16px !important;
  width: 340px !important;
  max-width: 340px !important;
  min-width: 340px !important;
  box-sizing: border-box !important;
}

/* Allow the button at the bottom of description panel to show */
#description-panel > .x-panel-body {
  overflow: visible !important;
}

#campaign-desc-panel {
  overflow-y: auto;
}

/* Tips / What's New card */
.home-tips-panel {
  width: 260px !important;
  flex-shrink: 0;
  min-height: 0 !important;
  height: auto !important;
  align-self: flex-start !important; /* opt out of stretch so it stays at content height */
  display: flex !important;
  flex-direction: column !important;
}

/* Make the two main home cards equal height */
#main-tab #selection-panel,
#main-tab #description-panel {
  display: flex !important;
  flex-direction: column !important;
}
#main-tab #selection-panel .x-panel-body,
#main-tab #description-panel .x-panel-body {
  flex: 1 !important;
  height: auto !important;
  overflow: visible !important;
}
/* selection-panel is 425px tall by ExtJS config — pin description-panel to match */
#main-tab #description-panel,
#send-message-tab #description-panel {
  height: 425px !important;
}

/* Activity Dashboard tab */
#activity-tab {
  min-height: 300px;
  padding: 16px 0;
}

#past-activity-form-div,
#public-signup-activity-form-div,
#pref-choice-form-div {
  margin: 0 !important;
}

/* Active/Pending Messages tab */
#active-messages-panel-div {
  min-height: 300px;
}

/* =========================================================
   HOME PAGE — Selection Panel (Send a Message Now)
   ========================================================= */

#selection-panel h3 {
  margin: 0 0 8px 0 !important;
  padding-left: 2px !important;
}

/* Nudge the first tab ("Send New") one pixel left to align with the list */
#selection-panel-tabs .x-tab-bar .x-tab:first-child {
  left: 1px !important;
}

#selection-panel .x-panel-body {
  padding-left: 0 !important;
}

/* No border above the "Resend a previously sent message" link */
#selection-panel-tabs,
#selection-panel-tabs .x-panel-body,
#selection-panel-tabs .x-tab-panel-body {
  border: none !important;
}

/* Stretch the inner tab panel and grid to fill the selection panel (home page only) */
#main-tab #selection-panel-tabs,
#main-tab #scenario-list-view,
#main-tab #predefined-list-view {
  width: 100% !important;
}

#scenario-list-view,
#predefined-list-view,
#scenario-list-view .x-panel-body,
#predefined-list-view .x-panel-body {
  border: none !important;
}

/* =========================================================
   HOME PAGE — Cards
   ========================================================= */
div#main div.corp-panel,
.corp-panel {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-sm);
  padding: 20px !important;
  transition: box-shadow var(--transition);
}

div#main div.corp-panel:hover,
.corp-panel:hover {
  box-shadow: var(--shadow-md);
}

div#main div.corp-panel h3,
.corp-panel h3 {
  font-family: var(--font-heading) !important;
  color: var(--convey-deep-1) !important;
  background-color: transparent !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 0 16px 0 !important;
  padding: 0 0 12px 0 !important;
  border-bottom: 1px solid var(--border-light);
  line-height: 1.3 !important;
}

div#main div.corp-panel h4,
.corp-panel h4 {
  color: var(--convey-deep-2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* The :not() exclusions keep the Activate/Send CTA out of this reset. That
   button is an <a> inside .corp-panel, and `div#main div.corp-panel a` is more
   specific (1 id / 1 class / 3 elements) than `#activatemessageButton`
   (1 id), so this transparent background used to win and left the button
   colourless. Do not recolour this rule instead -- it also covers the
   "Send New" / "Send Predefined" / "Resend a previously sent message" links. */
div#main div.corp-panel a:not(#activatemessageButton),
div#main div.corp-panel a:visited:not(#activatemessageButton),
.corp-panel a:not(#activatemessageButton),
.corp-panel a:visited:not(#activatemessageButton) {
  color: var(--convey-deep-3) !important;
  background-color: transparent !important;
}

div#main div.corp-panel a:hover,
.corp-panel a:hover {
  color: var(--convey-deep-1) !important;
}

/* =========================================================
   MESSAGES PAGE — Send a Message tab layout
   ========================================================= */

/* Remove float so the hbox panel flows naturally */
#send-message-tab #campaign-panel {
  float: none !important;
  overflow: visible !important;
}

#send-message-tab #campaign-panel .x-panel-body {
  overflow: visible !important;
}

/* Override tfccalert.css max-width: 290px cap for the messages page panels */
#send-message-tab #selection-panel {
  width: 380px !important;
  max-width: 380px !important;
  min-width: 380px !important;
  box-sizing: border-box !important;
}

#send-message-tab #description-panel {
  width: 340px !important;
  max-width: 340px !important;
  min-width: 340px !important;
  box-sizing: border-box !important;
}

/* Stretch the inner grid to fill the selection panel */
#send-message-tab #scenario-list-view {
  width: 100% !important;
}

/* =========================================================
   SEND MESSAGE PAGE — General ExtJS form panel cleanup
   ========================================================= */

/* White body on all non-framed panels */
.x-panel-body-default {
  background-color: var(--surface) !important;
  background-image: none !important;
}

/* Collapsible section headers (Phone Call Delivery Options, etc.) */
.x-panel-header-default {
  background-color: #e8e8e8 !important;
  background-image: none !important;
  border-color: #d0d0d0 !important;
  padding: 7px 12px !important;
  cursor: pointer;
}

.x-panel-header-default .x-panel-header-text-container-default,
.x-panel-header-default .x-panel-header-text {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

/* Tool icons — dark on light header */
.x-panel-header-default .x-tool-img {
  filter: none !important;
  opacity: 0.7;
}

/* Fieldset body — transparent so it picks up parent white */
.x-fieldset-body {
  background: transparent !important;
  background-image: none !important;
}

/* Fieldset legend (ENABLE CALL TRANSFER, ENABLE TTY/TDD) */
.x-fieldset-header-text {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--convey-deep-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Form field labels */
.x-form-item-label {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  /* Prevent the page-level line-height:1.5 from inflating the label box
     and causing it to visually bleed into the adjacent field/checkbox. */
  line-height: 1.3 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Checkbox inputs — add a small gap between the fieldLabel and the checkbox input */
.x-form-cb-body,
.x-form-check-wrap {
  padding-left: 8px !important;
}

/* Step headings (Step 3: Set Message Delivery Options, etc.) */
.wiz-title {
  font-family: var(--font-heading) !important;
  color: var(--convey-deep-1) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  padding: 16px 0 8px 0 !important;
  border-bottom: 2px solid var(--border-light) !important;
  margin-bottom: 12px !important;
}

/* Remove double bottom border on the page-section-separator after each step */
div.page-section-separator {
  margin: 0 !important;
}


/* =========================================================
   MESSAGE SCENARIO PANELS
   ========================================================= */
.tfcc-skin-ucs .message-panel {
  border-top: 3px solid var(--convey-deep-3) !important;
  border-radius: var(--radius) !important;
  margin: 12px 0 12px 12px !important;
}

.tfcc-skin-ucs .message-panel .x-panel-header {
  background-color: var(--surface) !important;
}

.tfcc-skin-ucs .message-panel .x-panel-header-text-container-default {
  color: var(--convey-deep-1) !important;
}

.tfcc-skin-ucs .section-heading-mod {
  font-family: var(--font-heading) !important;
  color: var(--convey-deep-1) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  border-top: none !important;
  border-bottom: 2px solid var(--border-light);
  padding-bottom: 8px;
}

#messageButtonContainer {
  padding: 12px 0 16px 0 !important;
}

#messageButtonContainer .message-button {
  padding: 0 6px !important;
}

/* Send button — primary action */
#activateMessageButtonContainer .x-btn {
  background: var(--convey-deep-2) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0,70,81,0.3) !important;
}
#activateMessageButtonContainer .x-btn-inner {
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 0 20px !important;
}
#activateMessageButtonContainer .x-btn:hover {
  background: var(--convey-deep-3) !important;
  background-image: none !important;
}
#activateMessageButtonContainer .x-btn-icon-el {
  display: none !important;
}

/* Cancel button — secondary / ghost */
#cancelMessageButtonContainer .x-btn {
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
#cancelMessageButtonContainer .x-btn-inner {
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 14px !important;
}
#cancelMessageButtonContainer .x-btn:hover {
  background: var(--surface-tint) !important;
  background-image: none !important;
}

/* Back nav button — ghost/outlined, mirrors Cancel style */

/* =========================================================
   SIDEBAR
   ========================================================= */
div#sub {
  background: var(--convey-deep-1) !important;
  background-image: none !important;
  border-radius: var(--radius-card) !important;
  padding: 20px !important;
  color: var(--text-on-dark) !important;
}

div#sub h3 {
  color: var(--convey-light-2) !important;
  font-family: var(--font-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

div#sub a {
  color: var(--convey-light-2) !important;
  font-size: 13px !important;
  transition: color var(--transition);
}

div#sub a:hover { color: var(--text-on-dark) !important; }

div#sub a.active {
  color: var(--text-on-dark) !important;
  font-weight: 600 !important;
}

/* =========================================================
   MISC
   ========================================================= */
.scenarioListView .x-grid-row .x-grid-cell {
  padding: 8px 8px 8px 2px !important;
}

.scenarioListView .x-grid-cell-inner {
  padding-left: 2px !important;
}

.x-invalid {
  border-color: var(--error) !important;
  border-width: 1px !important;
}

.x-invalid-text {
  color: var(--error) !important;
  font-size: 12px !important;
}

.page-directions {
  border-bottom: 1px solid var(--border-light) !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px;
  color: var(--text-muted);
}

.sub-section-heading {
  color: var(--convey-deep-2) !important;
  font-family: var(--font-heading) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

#settings-panel-ct .x-fieldset legend {
  color: var(--convey-deep-2) !important;
  font-weight: 600 !important;
}

div#intro {
  padding: var(--page-pad) !important;
  width: 380px !important;
}

div#intro fieldset {
  padding: 20px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-card) !important;
}

.audit-log-link-url {
  color: var(--convey-deep-3) !important;
  font-weight: 600 !important;
}

.audit-log-link-url:hover {
  color: var(--convey-deep-1) !important;
}

.wiz-title {
  font-family: var(--font-heading) !important;
  color: var(--convey-deep-1) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

div.page-section-separator {
  border-top: 1px solid var(--border-light) !important;
}

.recorded-slot {
  color: #137333 !important;
}

/* =========================================================
   REPORT PAGE — Flatten scrollable areas
   mainTabPanel renders inside #tab-panel with height:625 inline + autoScroll:true.
   Override to let content expand naturally so the PAGE scrolls, not internal panels.
   ========================================================= */

/* Outer tab panel element — remove the fixed 625px height */
/* Scoped to div#main (reports page) — dialog pages share #tab-panel and must not inherit
   height:auto which collapses the ExtJS border layout container */
div#main #tab-panel > div {
  height: auto !important;
  overflow: visible !important;
}

/* Tab panel body (autoScroll:true sets overflow:auto inline) */
div#main #tab-panel .x-tab-panel-body,
div#main #tab-panel .x-tab-panel-body-default {
  height: auto !important;
  overflow: visible !important;
}

/* Filter panel (Search Criteria) on Activation Reports — expand to content.
   Scoped under #tab-panel so Hosted Results page (#report-query-div is top-level there)
   is not affected. */
#tab-panel #report-query-div > div {
  height: auto !important;
}
#tab-panel #report-query-div .x-panel-body,
#tab-panel #report-query-div .x-panel-body-default {
  height: auto !important;
  overflow: visible !important;
}

/* Grid outer wrapper — expand to content */
#messages-activations-grid > div {
  height: auto !important;
}
#messages-activations-grid .x-panel-body {
  height: auto !important;
  overflow: visible !important;
}

/* Grid row view — show all rows; page scroll handles vertical navigation */
#messages-activations-grid .x-grid-body,
#messages-activations-grid .x-grid-view {
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* =========================================================
   REPORT PAGE — Links Tab
   ========================================================= */
#reports-links-tab {
  padding: 20px !important;
}

#reports-links-tab .corp-panel {
  max-width: 480px !important;
  float: none !important;
  height: auto !important;
}

#reports-links-tab .corp-panel ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#reports-links-tab .corp-panel li.heading {
  margin-top: 12px !important;
}

#reports-links-tab .corp-panel li.heading:first-of-type {
  margin-top: 0 !important;
}

#reports-links-tab .corp-panel li.heading a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--convey-deep-3) !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 4px 0 2px 0 !important;
  border-bottom: 1px solid transparent !important;
  transition: color var(--transition), border-color var(--transition) !important;
}

#reports-links-tab .corp-panel li.heading a:hover {
  color: var(--convey-deep-1) !important;
  border-bottom-color: var(--convey-deep-1) !important;
}

#reports-links-tab .corp-panel li.info {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--border-light) !important;
  margin-bottom: 0 !important;
}

#reports-links-tab .corp-panel li.info:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* =========================================================
   REPORT PAGE — Data Tables (legacy report.css overrides)
   ========================================================= */
tr.report_header_row,
tr.column_titles {
  background-color: var(--convey-deep-2) !important;
  color: var(--text-on-dark) !important;
}

tr.report_header_row td,
tr.column_titles td {
  padding: 8px 12px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  border-color: var(--convey-deep-1) !important;
}

tr.report_row {
  background-color: var(--surface) !important;
}

tr.report_row:hover {
  background-color: var(--convey-light-3) !important;
}

tr.report_row td {
  padding: 7px 12px !important;
  border-bottom: 1px solid var(--border-light) !important;
  vertical-align: middle !important;
}

tr.report_row_highlight {
  background-color: #FFFBF0 !important;
}

tr.report_total_row {
  background-color: var(--surface-tint) !important;
  font-weight: 600 !important;
}

tr.report_total_row td {
  padding: 7px 12px !important;
  border-top: 2px solid var(--border) !important;
}

tr.background1,
.even {
  background-color: var(--surface-tint) !important;
}

.header0 {
  background-color: var(--convey-deep-3) !important;
  color: var(--text-on-dark) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
}

td.report_title {
  background-color: var(--convey-deep-2) !important;
  color: var(--text-on-dark) !important;
  border-color: var(--convey-deep-1) !important;
  font-size: 14px !important;
}

td.report_links {
  background-color: var(--convey-deep-3) !important;
  border-color: var(--convey-deep-2) !important;
}

table.results,
table.outline_data {
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-card) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}

/* =========================================================
   REPORTS PAGE
   ========================================================= */

/* --- Framed panels (Search Criteria uses frame:true) ---
   The grey #d0d0d0 border comes from .x-panel-default-framed.
   Change border color and kill the corner/side sprite images. */
.x-panel-default-framed {
  border-color: var(--border-light) !important;
  background-color: var(--surface) !important;
}

.x-panel-default-framed-tl,
.x-panel-default-framed-tr,
.x-panel-default-framed-bl,
.x-panel-default-framed-br,
.x-panel-default-framed-tc,
.x-panel-default-framed-bc,
.x-panel-default-framed-ml,
.x-panel-default-framed-mr {
  background-image: none !important;
}

.x-panel-default-framed-mc {
  background-color: var(--surface) !important;
  background-image: none !important;
}

/* Framed panel header (Search Criteria title bar) */
.x-panel-header-default-framed {
  background-color: var(--surface) !important;
  background-image: none !important;
  border-color: var(--border-light) !important;
  padding: 8px 12px !important;
}

.x-panel-header-default-framed .x-panel-header-text-container {
  color: var(--convey-deep-1) !important;
  font-weight: 600 !important;
  font-family: var(--font-heading) !important;
  font-size: 13px !important;
}

/* --- Fieldsets (Date Range, Criteria) ---
   Grey comes from .x-fieldset { border: 1px solid #b5b8c8 } */
.x-fieldset {
  border-color: var(--border-light) !important;
  border-radius: var(--radius-card) !important;
}

.x-fieldset-header {
  background: transparent !important;
  background-image: none !important;
}

.x-fieldset-header .x-fieldset-header-text {
  color: var(--convey-deep-2) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Calling-order link inside the "Call these phones" fieldset header.
   Inherits the same teal as the surrounding label text, making it
   invisible as a link. Override to Convey orange so it reads as clickable. */
#hostedOutdialAddressesCallingOrderLink {
  color: var(--convey-orange) !important;
  text-decoration: underline !important;
  font-weight: 400 !important;   /* de-bold so it reads as a link, not a label */
  letter-spacing: 0 !important;  /* drop the all-caps spacing for normal readability */
}
#hostedOutdialAddressesCallingOrderLink:hover {
  color: #e8904a !important;     /* slightly darker orange on hover */
  text-decoration: underline !important;
}


/* =========================================================
   ACTIVATE MESSAGE — Horizontal Step Wizard
   ========================================================= */

/* Widen the content area for the wizard layout */
#wizard-panels {
  width: auto !important;
  max-width: 860px;
}

/* ---- Stepper tab nav — sticky ---- */
#wizard-tab-nav {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 860px;
  margin-bottom: 24px;
  gap: 0;
  overflow: visible;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 50;
  padding-top: 16px;
}

/* Each step button — column layout: circle on top, label below */
.wizard-tab {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 8px 14px 8px !important;
  cursor: pointer;
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-align: center;
  box-shadow: none !important;
  outline: none !important;
  transition: color var(--transition);
  overflow: visible !important;
}

/* Connecting line — left half (from previous circle to this one) */
.wizard-tab::before {
  content: '';
  position: absolute;
  top: 12px; /* half of 24px circle */
  left: 0;
  right: 50%;
  height: 2px;
  background: var(--border-light);
  z-index: 0;
}
/* Connecting line — right half (from this circle to next one) */
.wizard-tab::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  right: 0;
  height: 2px;
  background: var(--border-light);
  z-index: 0;
}
/* No left line on first step, no right line on last */
.wizard-tab:first-child::before { display: none; }
.wizard-tab:last-child::after  { display: none; }
/* Flush-align first and last tabs with the content edge */
.wizard-tab:first-child { padding-left: 0 !important; }
.wizard-tab:last-child  { padding-right: 0 !important; }

/* Circle */
.wizard-tab-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: var(--border-light);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}

.wizard-tab-label {
  color: inherit;
  line-height: 1.3;
}

/* ---- Hover — highlight the circle only, no label underline ---- */
/* Future (unvisited) steps */
.wizard-tab:not(.wizard-tab-active):not(.wizard-tab-completed):hover .wizard-tab-num {
  background: rgba(0, 48, 59, 0.18) !important;
  color: var(--convey-deep-1) !important;
  box-shadow: 0 0 0 3px rgba(0, 48, 59, 0.15);
}
/* Active / completed steps: ring around the circle */
.wizard-tab-active:hover .wizard-tab-num,
.wizard-tab-completed:hover .wizard-tab-num {
  box-shadow: 0 0 0 3px rgba(0, 48, 59, 0.25);
}

/* ---- Active (current step) ---- */
.wizard-tab-active {
  color: var(--convey-deep-1) !important;
  font-weight: 700 !important;
}
.wizard-tab-active .wizard-tab-num {
  background: var(--convey-deep-1) !important;
  color: #fff !important;
}
/* Left line of active step is teal — it came from completed steps */
.wizard-tab-active::before { background: var(--convey-deep-1) !important; }

/* ---- Completed (steps before current) ---- */
.wizard-tab-completed { color: var(--convey-deep-2) !important; }
.wizard-tab-completed .wizard-tab-num {
  background: var(--convey-deep-1) !important;
  color: #fff !important;
}
/* CSS-only checkmark inside completed circle — suppressed when step is also invalid */
.wizard-tab-completed:not(.wizard-tab-invalid) .wizard-tab-num::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -2px);
  flex-shrink: 0;
}
/* Both connecting lines teal for completed steps */
.wizard-tab-completed::before,
.wizard-tab-completed::after { background: var(--convey-deep-1) !important; }

/* ---- Invalid step: red circle + red label ---- */
.wizard-tab-invalid .wizard-tab-num {
  background: var(--error) !important;
  color: #fff !important;
}
.wizard-tab-invalid .wizard-tab-label { color: var(--error) !important; }
.wizard-tab-invalid::before,
.wizard-tab-invalid::after { background: var(--error) !important; }

/* section-heading-mod: permanently hidden — tab nav already shows the step name */
.tfcc-skin-ucs #wizard-panels .section-heading-mod {
  display: none !important;
}

/* Hide any remaining collapse/expand tool buttons in the wizard.
   We force collapsible:false in JS but sub-panels may still render tools. */
#wizard-panels .x-tool-collapse-top,
#wizard-panels .x-tool-collapse-bottom,
#wizard-panels .x-tool-expand-top,
#wizard-panels .x-tool-expand-bottom,
#wizard-panels [class*="x-tool-collapse"],
#wizard-panels [class*="x-tool-expand"] {
  display: none !important;
}

/* Hide any collapsed panel shells that sneak through */
#wizard-panels .x-panel-collapsed,
#wizard-panels [class*="-framed-collapsed"] {
  display: none !important;
}

/* ---- Unified panel header style for ALL panels in the wizard flow ----
   Covers both #wizard-panels content and the ownedBy panel which lives
   outside wizard-panels but is part of the same wizard step (Finish). */
#wizard-panels .x-panel-header,
#ownedBy-panel-div .x-panel-header {
  cursor: default !important;
  pointer-events: none !important;
  background-color: var(--surface) !important;
  background-image: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 2px solid var(--convey-deep-1) !important;
  padding: 8px 0 6px 0 !important;
}

/* Header text — same style everywhere in the wizard */
#wizard-panels .x-panel-header [class*="x-panel-header-text"],
#ownedBy-panel-div .x-panel-header [class*="x-panel-header-text"] {
  color: var(--convey-deep-1) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  opacity: 1 !important;
}

/* Tool icons (collapse arrows etc.) — dark on light header */
#wizard-panels .x-panel-header .x-tool-img,
#ownedBy-panel-div .x-panel-header .x-tool-img {
  filter: none !important;
  opacity: 0.6;
}

/* Section spacing — gap above each panel wrapper div inside wizard */
#wizard-panels > div {
  margin-top: 18px;
}
#wizard-panels > div:first-child {
  margin-top: 0;
}

/* message-panel reset inside wizard and ownedBy panel (strip card border/radius from global rule) */
#wizard-panels .message-panel,
#ownedBy-panel-div .message-panel {
  border-top: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Allow the owned-by dropdown to render without clipping; cap width to match content */
/* Owned By — moved inside the review card by JS; strip all outer chrome */
#ownedBy-panel-div {
  max-width: none !important;
  background: transparent !important;
  border-top: 1px solid var(--border-light) !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  height: auto !important;
  margin-top: 2px;
}
/* Hide the "SUBMIT MESSAGE" panel header */
#ownedBy-panel-div .x-panel-header {
  display: none !important;
}
/* Strip ExtJS panel chrome */
#ownedBy-panel-div .x-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
}
#ownedBy-panel-div .x-panel-body,
#ownedBy-panel-div .message-panel,
#ownedBy-panel-div .message-panel .x-panel-body {
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 36px !important;
}
#ownedBy-panel-div .x-panel-body {
  padding: 4px 0 4px 0 !important;
}
/* Align Owned By row with wfs-rows above: flex replaces ExtJS's float-based layout */
#ownedBy-panel-div .x-form-item {
  display: flex !important;
  align-items: center !important;
}
#ownedBy-panel-div .x-form-item-label {
  float: none !important;
  position: static !important;
  width: 110px !important;
  min-width: 110px !important;
  flex-shrink: 0;
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding-right: 0 !important;
}
#ownedBy-panel-div .x-form-element {
  float: none !important;
  position: static !important;
  margin-left: 12px !important;  /* matches gap in wfs-row */
  flex: 1;
}

/* Hide channel options panels when their channel is not selected (disabled state).
   JS show()+enable() reveals them when the channel is picked. */
#wizard-panels .message-panel.x-item-disabled {
  display: none !important;
}

/* ---- Next / Back nav row ---- */
/* ---- Step fade-in animation ---- */
@keyframes wizardStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wizard-step-in {
  animation: wizardStepIn 0.22s ease both;
}

/* ---- Finish step: summary card ---- */
#wizard-finish-summary {
  margin-bottom: 0;
  max-width: 860px;
}
.wfs-card {
  background: var(--surface-alt, #f5f8f9);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--convey-deep-1);
  border-radius: var(--radius-card);
  padding: 20px 24px 20px 24px;
}
.wfs-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--convey-deep-1);
  margin-bottom: 14px;
  letter-spacing: 0.01em;
}
.wfs-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 13px;
}
.wfs-label {
  color: var(--text-muted);
  min-width: 110px;
  font-weight: 600;
  padding-top: 2px;
}
.wfs-value { color: var(--text-primary); flex: 1; }
.wfs-channel-none { color: var(--text-muted); font-style: italic; }
.wfs-divider {
  border-top: 1px solid var(--border-light);
  margin: 14px 0 0 0;
}

/* ---- Finish step: action area separator ---- */
.wizard-nav-row-finish {
  border-top: 1px solid var(--border-light) !important;
  margin-top: 20px !important;
  padding-top: 14px !important;
  padding-bottom: 4px !important;
}

/* ---- Back / Next row ---- */
.wizard-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px 0 8px 0;
  margin-top: 16px;
  max-width: 860px;
  border-top: 1px solid var(--border-light);
}

/* Next — solid teal pill */
.wizard-next-btn {
  background: var(--convey-deep-1) !important;
  color: #fff !important;
  padding: 8px 24px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer;
  width: auto !important;
  overflow: visible !important;
  transition: background var(--transition);
  margin-left: auto;
}
.wizard-next-btn:hover {
  background: var(--convey-deep-2) !important;
}

/* Back — ghost outlined button matching Cancel */
.wizard-back-btn {
  background: transparent !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 18px !important;
  cursor: pointer;
  width: auto !important;
  overflow: visible !important;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.wizard-back-btn:hover {
  background: var(--surface-tint) !important;
  border-color: var(--convey-light-1) !important;
  color: var(--convey-deep-1) !important;
}

/* =========================================================
   SCROLLBAR (Webkit)
   ========================================================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--convey-light-1); }
/* Hide horizontal scrollbar on the reports page — content fits within the viewport */
#reports-tab ::-webkit-scrollbar:horizontal,
.x-panel-body::-webkit-scrollbar:horizontal {
  display: none;
  height: 0;
}
/* Suppress the native browser horizontal scrollbar from ExtJS over-width grids */
div#page { overflow-x: hidden !important; }
div#content { overflow-x: hidden !important; }

/* =========================================================
   MESSAGE LIST — STATUS ICONS
   ========================================================= */

/* shared base for dot-style icons */
.msg-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  flex-shrink: 0;
}

/* Active (status 3) — pulsing green dot */
.msg-status-active {
  background-color: #00C48C;
  animation: msg-status-pulse 2s ease-in-out infinite;
}

@keyframes msg-status-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 196, 140, 0.5); }
  60%  { box-shadow: 0 0 0 5px rgba(0, 196, 140, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 196, 140, 0); }
}

/* New / Queued (status 9) — muted teal hollow dot */
.msg-status-new {
  background-color: transparent;
  border: 2px solid var(--convey-light-1);
}

/* Cancelled (status 10) — grey dot */
.msg-status-cancelled {
  background-color: #B0BEC5;
}

/* Failed (status 7) — amber warning triangle */
.msg-status-triangle {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid var(--convey-orange);
  margin-right: 7px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* Completed — green checkmark */
.msg-status-check {
  display: inline-block;
  color: var(--success);
  font-size: 11px;
  font-weight: 700;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  line-height: 1;
}

/* Reports Search Criteria — Status checkbox filter.
   Do not set padding-left here: the theme uses it to clear the checkbox input,
   and overriding it slides the label underneath the box. */
.rpt-status-filter .x-form-cb-label {
  font-family: var(--font-body);
  font-size: 12px;
  white-space: nowrap;
}

.rpt-status-filter .x-form-item-body {
  padding-right: 12px;
}

/* Status shown in its own column — drop the label spacing, center the icon */
.msg-status-cell {
  display: inline-block;
  line-height: 1;
}

.msg-status-cell .msg-status-dot,
.msg-status-cell .msg-status-triangle,
.msg-status-cell .msg-status-check {
  margin-right: 0;
}

/* =========================================================
   REPORTS PAGE — Action buttons (View Report / Modify / Cancel / Resend)
   ========================================================= */

/* Shared: hide legacy GIF icons, consistent font */
#view-report-button .x-btn-icon-el,
#modify-message-button .x-btn-icon-el,
#cancel-message-button .x-btn-icon-el,
#resend-message-button .x-btn-icon-el {
  display: none !important;
}

#view-report-button .x-btn-inner,
#modify-message-button .x-btn-inner,
#cancel-message-button .x-btn-inner,
#resend-message-button .x-btn-inner {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 16px !important;
}

/* View Report — primary teal */
#view-report-button,
#view-report-button.x-btn-default-small,
#view-report-button.x-btn-default-medium {
  background: var(--convey-deep-2) !important;
  background-image: none !important;
  border-color: var(--convey-deep-2) !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 4px rgba(0,70,81,0.25) !important;
}
#view-report-button .x-btn-inner { color: #fff !important; }
#view-report-button .x-frame-mc { background-color: var(--convey-deep-2) !important; background-image: none !important; }
#view-report-button.x-btn-over,
#view-report-button.x-btn-default-small-over { background: var(--convey-deep-3) !important; background-image: none !important; border-color: var(--convey-deep-3) !important; }
#view-report-button.x-btn-over .x-frame-mc { background-color: var(--convey-deep-3) !important; background-image: none !important; }

/* Modify — secondary outlined */
#modify-message-button,
#modify-message-button.x-btn-default-small,
#modify-message-button.x-btn-default-medium {
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid var(--convey-deep-2) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
#modify-message-button .x-btn-inner { color: var(--convey-deep-2) !important; }
#modify-message-button .x-frame-mc { background-color: transparent !important; background-image: none !important; }
#modify-message-button.x-btn-over,
#modify-message-button.x-btn-default-small-over { background: rgba(0,70,81,0.06) !important; background-image: none !important; }
#modify-message-button.x-btn-over .x-frame-mc { background-color: rgba(0,70,81,0.06) !important; background-image: none !important; }

/* Resend — secondary outlined (same as Modify) */
#resend-message-button,
#resend-message-button.x-btn-default-small,
#resend-message-button.x-btn-default-medium {
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid var(--convey-deep-2) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
#resend-message-button .x-btn-inner { color: var(--convey-deep-2) !important; }
#resend-message-button .x-frame-mc { background-color: transparent !important; background-image: none !important; }
#resend-message-button.x-btn-over,
#resend-message-button.x-btn-default-small-over { background: rgba(0,70,81,0.06) !important; background-image: none !important; }
#resend-message-button.x-btn-over .x-frame-mc { background-color: rgba(0,70,81,0.06) !important; background-image: none !important; }

/* Cancel — destructive ghost (orange border + text) */
#cancel-message-button,
#cancel-message-button.x-btn-default-small,
#cancel-message-button.x-btn-default-medium {
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid var(--convey-orange) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
#cancel-message-button .x-btn-inner { color: var(--convey-orange) !important; }
#cancel-message-button .x-frame-mc { background-color: transparent !important; background-image: none !important; }
#cancel-message-button.x-btn-over,
#cancel-message-button.x-btn-default-small-over { background: rgba(255,169,110,0.1) !important; background-image: none !important; }
#cancel-message-button.x-btn-over .x-frame-mc { background-color: rgba(255,169,110,0.1) !important; background-image: none !important; }

/* =========================================================
   QUERY PANEL BUTTONS — Search / Reset / Save
   cls-based targeting: rpt-btn-primary / rpt-btn-ghost / rpt-btn-secondary
   ========================================================= */

/* Hide icons and set font on all three classes */
.rpt-btn-primary .x-btn-icon-el,
.rpt-btn-ghost .x-btn-icon-el,
.rpt-btn-secondary .x-btn-icon-el {
  display: none !important;
}
.rpt-btn-primary .x-btn-inner,
.rpt-btn-ghost .x-btn-inner,
.rpt-btn-secondary .x-btn-inner {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 16px !important;
}

/* Search — primary teal */
.rpt-btn-primary.x-btn,
.rpt-btn-primary.x-btn-default-small {
  background: var(--convey-deep-2) !important;
  background-image: none !important;
  border-color: var(--convey-deep-2) !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 4px rgba(0,70,81,0.2) !important;
  min-width: 0 !important;
}
.rpt-btn-primary .x-btn-inner { color: #fff !important; }
.rpt-btn-primary .x-frame-mc { background-color: var(--convey-deep-2) !important; background-image: none !important; }
.rpt-btn-primary.x-btn-over { background: var(--convey-deep-3) !important; background-image: none !important; border-color: var(--convey-deep-3) !important; }
.rpt-btn-primary.x-btn-over .x-frame-mc { background-color: var(--convey-deep-3) !important; background-image: none !important; }

/* Reset — ghost */
.rpt-btn-ghost.x-btn,
.rpt-btn-ghost.x-btn-default-small {
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  min-width: 0 !important;
}
.rpt-btn-ghost .x-btn-inner { color: var(--text-muted) !important; }
.rpt-btn-ghost .x-frame-mc { background-color: transparent !important; background-image: none !important; }
.rpt-btn-ghost.x-btn-over { background: var(--surface-tint) !important; background-image: none !important; }
.rpt-btn-ghost.x-btn-over .x-frame-mc { background-color: var(--surface-tint) !important; background-image: none !important; }

/* Save — secondary outlined teal */
.rpt-btn-secondary.x-btn,
.rpt-btn-secondary.x-btn-default-small {
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid var(--convey-deep-2) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  min-width: 0 !important;
}
.rpt-btn-secondary .x-btn-inner { color: var(--convey-deep-2) !important; }
.rpt-btn-secondary .x-frame-mc { background-color: transparent !important; background-image: none !important; }
.rpt-btn-secondary.x-btn-over { background: rgba(0,70,81,0.06) !important; background-image: none !important; }
.rpt-btn-secondary.x-btn-over .x-frame-mc { background-color: rgba(0,70,81,0.06) !important; background-image: none !important; }

/* Prevent criteria panel body from clipping the hbox row */
.x-tfc-contact-query-criteria-panel .x-panel-body,
.x-tfc-contact-query-criteria-panel .x-fieldset-body {
  overflow: visible !important;
}

/* =========================================================
   CRITERIA ADD BUTTON — "+ Add" inline with search criteria row fields
   ========================================================= */
.criteria-add-btn.x-btn,
.criteria-add-btn.x-btn-default-small {
  background: var(--convey-deep-1) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
}
.criteria-add-btn .x-btn-inner {
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  padding: 0 10px !important;
  line-height: 22px !important;
}
.criteria-add-btn .x-frame-mc {
  background-color: var(--convey-deep-1) !important;
  background-image: none !important;
  padding: 0 !important;
  height: 22px !important;
  line-height: 22px !important;
}
.criteria-add-btn .x-btn-wrap {
  height: 22px !important;
  line-height: 22px !important;
}
.criteria-add-btn.x-btn-over,
.criteria-add-btn.x-btn-over .x-frame-mc {
  background: var(--convey-deep-2) !important;
  background-color: var(--convey-deep-2) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* CRITERIA REMOVE BUTTON — "✕" inline dismiss */
.criteria-remove-btn.x-btn,
.criteria-remove-btn.x-btn-default-small {
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
}
.criteria-remove-btn .x-btn-inner {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 0 7px !important;
  line-height: 22px !important;
}
.criteria-remove-btn .x-frame-mc {
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  height: 22px !important;
  line-height: 22px !important;
}
.criteria-remove-btn .x-btn-wrap {
  height: 22px !important;
  line-height: 22px !important;
}
.criteria-remove-btn.x-btn-over,
.criteria-remove-btn.x-btn-over .x-frame-mc {
  background: rgba(180,35,24,0.08) !important;
  background-color: rgba(180,35,24,0.08) !important;
  background-image: none !important;
  border-color: var(--error) !important;
  box-shadow: none !important;
}
.criteria-remove-btn.x-btn-over .x-btn-inner {
  color: var(--error) !important;
}