/* ACE appearance customisation, 05-Nov-26. Separate from upstream osTicket v1.18.4 theme. */

/* ACE KB-only responsive presentation, 261105.
   Scope guard leaves ticket, login and staff pages on the original theme. */
body:has(#nav a.active.kb) {
  --ace-kb-green: #50D324;
  --ace-kb-hover: #1EBA11;
  --ace-kb-lime: #DBFF41;
  --ace-kb-grey: #808184;
  padding: 24px 16px 32px;
  min-width: 0;
  background: #f4f6f3;
  color: #27312a;
  font: 16px/1.65 Inter, Arial, sans-serif;
}
body:has(#nav a.active.kb) *,
body:has(#nav a.active.kb) *::before,
body:has(#nav a.active.kb) *::after { box-sizing: border-box; }
body:has(#nav a.active.kb) #container {
  width: 100%; min-width: 0; max-width: 1120px; margin: 0 auto;
  background: #FFFFFF; border: 1px solid #dfe5dc; border-top: 4px solid var(--ace-kb-green);
  border-radius: 16px; box-shadow: 0 8px 28px rgba(30,50,30,.08);
}
body:has(#nav a.active.kb) #header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; height: auto; min-height: 94px; padding: 18px 28px;
}
body:has(#nav a.active.kb) #header #logo {
  display: flex; align-items: center; order: 0; height: auto; max-width: 380px; min-width: 0;
}
body:has(#nav a.active.kb) #header #logo img {
  max-width: 100%; width: auto; height: auto; max-height: 65px; object-fit: contain;
}
body:has(#nav a.active.kb) #header .valign-helper { display: none; }
body:has(#nav a.active.kb) #header p {
  order: 1; float: none; width: auto; max-width: 100%; margin: 0; padding: 0;
  font-size: 14px; color: #59615a; overflow-wrap: anywhere;
}
body:has(#nav a.active.kb) #nav {
  display: flex; flex-wrap: wrap; gap: 8px; height: auto; margin: 0; padding: 12px 24px;
  white-space: normal; background: #fbfcfa; border-top: 1px solid #e5e9e2;
  border-bottom: 1px solid #e5e9e2; box-shadow: none;
}
body:has(#nav a.active.kb) #nav li { display: block; min-width: 0; margin: 0; padding: 0; }
body:has(#nav a.active.kb) #nav li a {
  display: inline-flex; align-items: center; min-height: 44px; height: auto; max-width: 100%;
  margin: 0; padding: 10px 14px 10px 34px; line-height: 1.4; white-space: normal;
  color: #253029; border: 0; border-radius: 8px; background-position: 12px center;
  overflow-wrap: anywhere;
}
body:has(#nav a.active.kb) #nav li a.active { background-color: var(--ace-kb-lime); color: #18231b; font-weight: 600; }
body:has(#nav a.active.kb) #nav li a:hover { background-color: var(--ace-kb-hover); color: #152218; }
body:has(#nav a.active.kb) a { color: #1c702d; overflow-wrap: anywhere; word-break: normal; }
body:has(#nav a.active.kb) a:hover { color: #155821; border-bottom: 0; text-decoration: underline; margin-bottom: 1px; }
body:has(#nav a.active.kb) a:focus-visible,
body:has(#nav a.active.kb) input:focus-visible,
body:has(#nav a.active.kb) select:focus-visible,
body:has(#nav a.active.kb) button:focus-visible { outline: 3px solid #247d35; outline-offset: 3px; }
body:has(#nav a.active.kb) #content {
  display: flow-root; min-width: 0; margin: 0; padding: 30px; min-height: 320px;
}
body:has(#nav a.active.kb) #content > .row {
  display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 28px; min-width: 0;
}
body:has(#nav a.active.kb) #content > .row > .span8,
body:has(#nav a.active.kb) #content > .row > .span4 {
  width: auto !important; min-width: 0; margin: 0 !important; float: none !important;
}
body:has(#nav a.active.kb) #content > .row > .span8 { order: 0; }
body:has(#nav a.active.kb) #content > .row > .span4 { order: 1; }
body:has(#nav a.active.kb) #content .faq-content,
body:has(#nav a.active.kb) #content .main-content {
  float: none !important; width: 100% !important; min-width: 0; max-width: 100%;
}
body:has(#nav a.active.kb) #content:not(:has(.sidebar)) .faq-content,
body:has(#nav a.active.kb) #content:not(:has(.sidebar)) .main-content { float: none; width: 100% !important; }
body:has(#nav a.active.kb) .sidebar {
  float: none !important; width: 100% !important; max-width: 100%; min-width: 0; margin: 0 !important;
}
body:has(#nav a.active.kb) .sidebar .content {
  padding: 18px; border: 1px solid #dce6d7; border-radius: 10px; background: #f6faf3;
}
body:has(#nav a.active.kb) .searchbar,
body:has(#nav a.active.kb) .search-form,
body:has(#nav a.active.kb) #kb-search { max-width: 100%; min-width: 0; }
body:has(#nav a.active.kb) .searchbar .search,
body:has(#nav a.active.kb) .search-form .search,
body:has(#nav a.active.kb) #kb-search input,
body:has(#nav a.active.kb) #kb-search select {
  box-sizing: border-box; max-width: 100%; min-width: 0; min-height: 44px;
  border: 1px solid #b8c5b3; border-radius: 8px; padding: 10px 12px; font: inherit;
}
body:has(#nav a.active.kb) .searchbar .search,
body:has(#nav a.active.kb) .search-form .search { width: 100%; }
body:has(#nav a.active.kb) #kb {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px;
  width: 100%; min-width: 0; margin: 24px 0; padding: 0; overflow: visible; list-style: none;
}
body:has(#nav a.active.kb) #kb > li {
  display: block; min-width: 0; margin: 0; padding: 22px;
  background: #FFFFFF; border: 1px solid #dce4d8; border-left: 4px solid var(--ace-kb-green);
  border-radius: 12px; overflow-wrap: anywhere; height: auto !important;
}
body:has(#nav a.active.kb) #kb > li h4 { margin: 0 0 12px; line-height: 1.35; }
body:has(#nav a.active.kb) #kb > li > i { display: none; }
body:has(#nav a.active.kb) #kb > li > div { margin: 0 !important; min-width: 0; }
body:has(#nav a.active.kb) #kb > li h4 a { font-size: 20px; font-weight: 650; }
body:has(#nav a.active.kb) #kb > li h4 span { color: #59615a; }
body:has(#nav a.active.kb) #faq { min-width: 0; padding: 0; margin-top: 26px; }
body:has(#nav a.active.kb) #faq ol { border: 0; margin: 14px 0 0; padding: 0; }
body:has(#nav a.active.kb) #faq ol li a {
  min-height: 48px; padding: 12px 12px 12px 30px; margin: 0;
  line-height: 1.5; border-bottom: 1px solid #e0e6dc; background-position: 8px center;
}
body:has(#nav a.active.kb) #faq ol li a:hover { background-color: #f1f8ec; }
body:has(#nav a.active.kb) #content :is(h1,h2,h3,h4,h5,h6) { overflow-wrap: anywhere; line-height: 1.3; color: #213127; }
body:has(#nav a.active.kb) #content h1 { font-size: 30px; font-weight: 650; margin-bottom: 14px; }
body:has(#nav a.active.kb) .faq-content .article-title { font-size: clamp(24px,2.6vw,34px); font-weight: 650; margin: 18px 0 8px; }
body:has(#nav a.active.kb) .thread-body { min-width: 0; max-width: 100%; line-height: 1.7; overflow-wrap: anywhere; }
body:has(#nav a.active.kb) #content :is(p,li,div,span,a,code,pre) { overflow-wrap: anywhere; }
body:has(#nav a.active.kb) #content :is(img,svg,video,iframe) { max-width: 100% !important; }
body:has(#nav a.active.kb) #content :is(img,video) { height: auto !important; }
body:has(#nav a.active.kb) #content figure { max-width: 100%; margin: 20px 0; }
body:has(#nav a.active.kb) #content iframe { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }
body:has(#nav a.active.kb) #content table { max-width: 100%; width: 100% !important; table-layout: fixed; }
body:has(#nav a.active.kb) #content :is(th,td) { padding: 8px; overflow-wrap: anywhere; }
body:has(#nav a.active.kb) #content pre { white-space: pre-wrap; word-break: break-word; max-width: 100%; }
body:has(#nav a.active.kb) #footer { max-width: 1120px; margin: 20px auto 0; color: #626b64; font-size: 12px; line-height: 1.6; }
body:has(#nav a.active.kb) #footer a { color: #626b64; }
@media (max-width: 900px) {
  body:has(#nav a.active.kb) #content > .row { grid-template-columns: minmax(0,1fr); gap: 24px; }
  body:has(#nav a.active.kb) #content > .row > .span4 { order: -1; }
  body:has(#nav a.active.kb) #content .faq-content,
  body:has(#nav a.active.kb) #content .main-content,
  body:has(#nav a.active.kb) .sidebar { float: none !important; width: 100% !important; margin: 0 0 24px; }
  body:has(#nav a.active.kb) .sidebar { display: block; }
  body:has(#nav a.active.kb) #content { padding: 24px; }
}
@media (max-width: 600px) {
  body:has(#nav a.active.kb) { padding: 10px; font-size: 16px; }
  body:has(#nav a.active.kb) #container { border-radius: 12px; }
  body:has(#nav a.active.kb) #header { padding: 16px; gap: 12px; }
  body:has(#nav a.active.kb) #header #logo { width: 100%; max-width: 100%; }
  body:has(#nav a.active.kb) #header p { width: 100%; }
  body:has(#nav a.active.kb) #nav { padding: 10px; gap: 6px; }
  body:has(#nav a.active.kb) #nav li { flex: 1 1 calc(50% - 6px); }
  body:has(#nav a.active.kb) #nav li a { width: 100%; padding: 10px 8px 10px 30px; background-position: 9px center; font-size: 14px; }
  body:has(#nav a.active.kb) #content { padding: 20px 16px; }
  body:has(#nav a.active.kb) #kb { grid-template-columns: minmax(0,1fr); gap: 14px; }
  body:has(#nav a.active.kb) #kb > li { padding: 18px; }
  body:has(#nav a.active.kb) #kb-search :is(#query,#cid,#topic-id) { float: none; display: block; width: 100%; margin: 0 0 10px; top: auto; }
  body:has(#nav a.active.kb) #content .featured-category { width: 100%; }
  body:has(#nav a.active.kb) #content .article-headline { margin-left: 0; }
}


/* ACE public-client presentation, 261105.
   Draft until live DOM and actual 390/834/1440px checks are complete.
   Client navigation guard excludes the staff control panel. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('https://aceperipherals.com/cdn/fonts/inter/inter_n4.b2a3f24c19b4de56e8871f609e73ca7f6d2e2bb9.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('https://aceperipherals.com/cdn/fonts/inter/inter_n5.d7101d5e168594dd06f56f290dd759fba5431d97.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('https://aceperipherals.com/cdn/fonts/inter/inter_n6.771af0474a71b3797eb38f3487d6fb79d43b6877.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('https://aceperipherals.com/cdn/fonts/inter/inter_n7.02711e6b374660cfc7915d1afc1c204e633421e4.woff2') format('woff2');
}
body:has(#nav a.home):has(#nav a.new) {
  --ace-green: #50D324;
  --ace-hover: #1EBA11;
  --ace-lime: #DBFF41;
  --ace-grey: #808184;
  padding: 24px 16px 32px;
  min-width: 0;
  background: #F4F7F4;
  color: #222222;
  font: 16px/1.65 Inter, Arial, sans-serif;
}
body:has(#nav a.home):has(#nav a.new) *,
body:has(#nav a.home):has(#nav a.new) *::before,
body:has(#nav a.home):has(#nav a.new) *::after { box-sizing: border-box; }
body:has(#nav a.home):has(#nav a.new) #container {
  width: 100%; min-width: 0; max-width: 1120px; margin: 0 auto;
  background: #FFFFFF; border: 1px solid #DDDDDD; border-top: 4px solid var(--ace-green);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(30,50,30,.08);
}
body:has(#nav a.home):has(#nav a.new) #header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; height: auto; min-height: 94px; padding: 18px 28px;
}
body:has(#nav a.home):has(#nav a.new) #header > .pull-right {
  order: 1; float: none; min-width: 0; max-width: 100%; margin-left: auto;
}
body:has(#nav a.home):has(#nav a.new) #header #logo {
  display: flex; align-items: center; order: 0; float: none;
  height: auto; max-width: 380px; min-width: 0;
}
body:has(#nav a.home):has(#nav a.new) #header #logo img {
  max-width: 100%; width: auto; height: auto; max-height: 65px; object-fit: contain;
}
body:has(#nav a.home):has(#nav a.new) #header .valign-helper { display: none; }
body:has(#nav a.home):has(#nav a.new) #header p {
  float: none; width: auto; max-width: 100%; margin: 0; padding: 0;
  font-size: 14px; color: #595959; overflow-wrap: anywhere;
}
body:has(#nav a.home):has(#nav a.new) #nav {
  display: flex; flex-wrap: wrap; gap: 8px; height: auto; margin: 0; padding: 12px 24px;
  white-space: normal; background: #F4F7F4; border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD; box-shadow: none;
}
body:has(#nav a.home):has(#nav a.new) #nav li { display: block; min-width: 0; margin: 0; padding: 0; }
body:has(#nav a.home):has(#nav a.new) #nav li a {
  display: inline-flex; align-items: center; min-height: 44px; height: auto; max-width: 100%;
  margin: 0; padding: 10px 14px 10px 34px; line-height: 1.4; white-space: normal;
  color: #222222; border: 0; border-radius: 8px; background-position: 12px center;
  overflow-wrap: anywhere;
}
body:has(#nav a.home):has(#nav a.new) #nav li a.active {
  background-color: var(--ace-green); color: #142018; font-weight: 600;
}
body:has(#nav a.home):has(#nav a.new) #nav li a:hover {
  background-color: var(--ace-hover); color: #142018;
}
body:has(#nav a.home):has(#nav a.new) a { color: #176B23; overflow-wrap: anywhere; }
body:has(#nav a.home):has(#nav a.new) a:hover { color: #14551E; border-bottom: 0; text-decoration: underline; margin-bottom: 1px; }
body:has(#nav a.home):has(#nav a.new) :is(a,input,select,textarea,button):focus-visible {
  outline: 3px solid #247D35; outline-offset: 3px;
}
body:has(#nav a.home):has(#nav a.new) #content {
  display: flow-root; min-width: 0; margin: 0; padding: 30px; min-height: 320px;
}
body:has(#nav a.home):has(#nav a.new) #content :is(h1,h2,h3,h4,h5,h6) {
  overflow-wrap: anywhere; line-height: 1.35; color: #21352B;
}
body:has(#nav a.home):has(#nav a.new) #content h1 { font-size: 30px; font-weight: 650; margin-bottom: 14px; }
body:has(#nav a.home):has(#nav a.new) #content .faq-content > h1.article-title {
  font-size: clamp(24px,2.6vw,34px); font-weight: 650; line-height: 1.35; margin: 18px 0 8px;
}
body:has(#nav a.home):has(#nav a.new) #content .ace-kb-section-label {
  margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: #595959; letter-spacing: .04em;
}
body:has(#nav a.home):has(#nav a.new) #content :is(p,li,div,span,a,code,pre,th,td) { overflow-wrap: anywhere; }
body:has(#nav a.home):has(#nav a.new) #content :is(img,svg,video,iframe) { max-width: 100% !important; }
body:has(#nav a.home):has(#nav a.new) #content :is(img,video) { height: auto !important; }
body:has(#nav a.home):has(#nav a.new) #content pre { max-width: 100%; white-space: pre-wrap; word-break: break-word; }
body:has(#nav a.home):has(#nav a.new) #footer {
  max-width: 1120px; margin: 20px auto 0; color: #595959; font-size: 12px; line-height: 1.6;
}
body:has(#nav a.home):has(#nav a.new) #footer a { color: #595959; }

/* Home: preserve the welcome/service copy and both native enquiry routes. */
body:has(#nav a.home):has(#nav a.new) #landing_page {
  display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 28px;
  min-width: 0;
}
body:has(#nav a.home):has(#nav a.new) #landing_page > .main-content {
  order: 0; width: 100%; max-width: 100%; min-width: 0;
}
body:has(#nav a.home):has(#nav a.new) #landing_page > .sidebar {
  order: 1; float: none; width: 100%; max-width: 100%; min-width: 0; margin: 0;
}
body:has(#nav a.home):has(#nav a.new) #landing_page > div:not(.main-content):not(.sidebar) {
  order: 2; grid-column: 1 / -1;
}
body:has(#nav a.home):has(#nav a.new) #landing_page .front-page-button p { margin: 0 0 12px; }
body:has(#nav a.home):has(#nav a.new) #landing_page .front-page-button a.button {
  display: flex !important; width: 100%; max-width: none;
}
body:has(#nav a.home):has(#nav a.new) #landing_page .sidebar .content {
  margin-top: 24px; padding: 18px; border: 1px solid #DDDDDD; border-radius: 12px;
  background: #F4F7F4;
}
body:has(#nav a.home):has(#nav a.new) #landing_page .sidebar .content section > div:not(.header) { margin-top: 10px; }
body:has(#nav a.home):has(#nav a.new) #landing_page .search-form { margin: 0 0 24px; padding-top: 0; }
body:has(#nav a.home):has(#nav a.new) #landing_page .search-form form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
}
body:has(#nav a.home):has(#nav a.new) #landing_page .search-form .search {
  flex: 1 1 220px; width: auto; min-width: 0;
}

/* Text fields retain names, requirements, validation and visibility. */
body:has(#nav a.home):has(#nav a.new) #content :is(input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="tel"],input[type="url"],input[type="search"],input[type="date"],textarea,select:not(.select2-hidden-accessible)) {
  max-width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px;
  border: 1px solid #B8C5B3; border-radius: 8px; background: #FFFFFF; color: #222222;
  font: inherit;
}
body:has(#nav a.home):has(#nav a.new) #content textarea { width: 100% !important; min-height: 150px; }
body:has(#nav a.home):has(#nav a.new) #content :is(input[type="checkbox"],input[type="radio"]) {
  accent-color: #176B23; vertical-align: middle;
}
body:has(#nav a.home):has(#nav a.new) #content input[type="file"] { max-width: 100%; font: inherit; }
body:has(#nav a.home):has(#nav a.new) #content :is(input[type="submit"],input[type="reset"],input[type="button"][name="cancel"],button[type="submit"],button[type="reset"],a.button) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  max-width: 100%; padding: 10px 16px; border: 1px solid var(--ace-green); border-radius: 8px;
  background: var(--ace-green); color: #142018; font: 600 15px/1.4 Inter, Arial, sans-serif;
  text-align: center; text-decoration: none; white-space: normal;
  box-shadow: none; text-shadow: none; cursor: pointer; vertical-align: middle;
}
body:has(#nav a.home):has(#nav a.new) #content :is(input[type="reset"],input[type="button"][name="cancel"],button[type="reset"]) {
  background: #FFFFFF; border-color: #808184; color: #222222;
}
body:has(#nav a.home):has(#nav a.new) #content :is(input[type="submit"],input[type="reset"],input[type="button"][name="cancel"],button[type="submit"],button[type="reset"],a.button):hover {
  background: var(--ace-hover); border-color: var(--ace-hover); color: #142018; text-decoration: none;
}

/* osTicket sanitises article classes; these match only explicitly rounded CTA links. */
body:has(#nav a.home):has(#nav a.new) #content a[style*="border-radius"][href*="/collections/"] {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 16px !important; border: 1px solid #50D324 !important;
  border-radius: 8px !important; background: #FFFFFF !important; color: #173821 !important;
  font: 600 15px/1.4 Inter, Arial, sans-serif !important; text-decoration: none !important;
  text-align: center; vertical-align: middle;
}
body:has(#nav a.home):has(#nav a.new) #content a[style*="border-radius"][href$="/open.php"] {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 16px !important; border: 1px solid #50D324 !important;
  border-radius: 8px !important; background: #50D324 !important; color: #142018 !important;
  font: 600 15px/1.4 Inter, Arial, sans-serif !important; text-decoration: none !important;
  text-align: center; vertical-align: middle;
}
body:has(#nav a.home):has(#nav a.new) #content a[style*="border-radius"]:is([href*="/collections/"],[href$="/open.php"]):hover {
  background: #1EBA11 !important; border-color: #1EBA11 !important; color: #142018 !important;
}

/* Existing client login and support forms. No field is removed or hidden. */
body:has(#nav a.home):has(#nav a.new) :is(#clientLogin,#ticketForm,#reply) {
  max-width: 100%; min-width: 0;
}
body:has(#nav a.home):has(#nav a.new) #clientLogin {
  border: 1px solid #DDDDDD; border-radius: 12px; box-shadow: none;
  background: #F4F7F4; padding: 24px;
}
body:has(#nav a.home):has(#nav a.new) #clientLogin > div[style*="table-row"] {
  display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px;
  min-width: 0; width: 100%;
}
body:has(#nav a.home):has(#nav a.new) #clientLogin > div[style*="table-row"] > div {
  display: block !important; width: 100% !important; min-width: 0;
  padding: 0 !important; box-shadow: none;
}
body:has(#nav a.home):has(#nav a.new) #clientLogin .login-box {
  min-width: 0; padding: 0 24px 0 0;
}
body:has(#nav a.home):has(#nav a.new) #clientLogin .instructions {
  min-width: 0; padding: 0 0 0 24px;
}
body:has(#nav a.home):has(#nav a.new) #ticketForm > table {
  width: 100%; max-width: 100%; table-layout: fixed;
}
body:has(#nav a.home):has(#nav a.new) #ticketForm > table > tbody > tr > td { padding: 8px 12px 8px 0; }
body:has(#nav a.home):has(#nav a.new) #ticketForm :is(input[type="text"],input[type="email"],input[type="tel"],input[type="url"],select) { width: 100%; }
body:has(#nav a.home):has(#nav a.new) #ticketForm input[name$="-ext"] { width: min(100%,140px); }
body:has(#nav a.home):has(#nav a.new) #ticketForm .buttons {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
body:has(#nav a.home):has(#nav a.new) #reply {
  padding: 20px; background: #F4F7F4; border: 1px solid #DDDDDD; border-radius: 12px;
}
body:has(#nav a.home):has(#nav a.new) #reply > table { width: 100%; max-width: 100%; }
body:has(#nav a.home):has(#nav a.new) #reply > p:has(input[type="submit"]) {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
body:has(#nav a.home):has(#nav a.new) #reply input[type="button"] {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  max-width: 100%; padding: 10px 16px; border: 1px solid #808184; border-radius: 8px;
  background: #FFFFFF; color: #222222; font: 600 15px/1.4 Inter,Arial,sans-serif;
  white-space: normal; cursor: pointer;
}
body:has(#nav a.home):has(#nav a.new) #reply input[type="button"]:hover { background: #1EBA11; color: #142018; }
body:has(#nav a.home):has(#nav a.new) :is(.redactor-box,.redactor-editor,.redactor-layer,.filedrop,.filedrop .files,.select2-container) { max-width: 100%; min-width: 0; }
body:has(#nav a.home):has(#nav a.new) :is(.redactor-editor,.redactor-layer) { overflow-wrap: anywhere; }
body:has(#nav a.home):has(#nav a.new) #ticketForm .select2-container {
  width: 100% !important; max-width: 100% !important; min-width: 0;
}
body:has(#nav a.home):has(#nav a.new) .select2-container .select2-selection--multiple {
  min-height: 44px; border: 1px solid #B8C5B3; border-radius: 8px;
}
body:has(#nav a.home):has(#nav a.new) .select2-container .select2-selection__rendered {
  max-width: 100%; white-space: normal;
}
body:has(#nav a.home):has(#nav a.new) .select2-container .select2-selection__choice {
  max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}
body:has(#nav a.home):has(#nav a.new) .select2-container .select2-search--inline {
  display: block; float: none; width: 100%; max-width: 100%;
}
body:has(#nav a.home):has(#nav a.new) .select2-container .select2-search__field {
  width: 100% !important; max-width: 100% !important; min-height: 32px;
  margin: 0 !important; padding: 4px !important; border: 0 !important; line-height: 1.4;
}
body:has(#nav a.home):has(#nav a.new) .select2-dropdown { max-width: calc(100vw - 20px); font: inherit; }
body:has(#nav a.home):has(#nav a.new) .select2-results__option { min-height: 40px; white-space: normal; }
body:has(#nav a.home):has(#nav a.new) .redactor-toolbar-wrapper { max-width: 100%; }
body:has(#nav a.home):has(#nav a.new) .redactor-toolbar:not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important; flex-wrap: wrap; gap: 2px; max-width: 100%;
  padding: 4px; white-space: normal;
}
body:has(#nav a.home):has(#nav a.new) .redactor-toolbar a.re-button {
  flex: 0 0 44px; min-width: 44px; min-height: 44px; padding: 10px;
  margin: 0; text-decoration: none;
}
body:has(#nav a.home):has(#nav a.new) .redactor-styles[contenteditable="true"] {
  max-width: 100% !important; min-width: 0; overflow-wrap: anywhere;
}
body:has(#nav a.home):has(#nav a.new) .filedrop .dropzone {
  max-width: 100%; height: auto; min-height: 80px; padding: 16px; white-space: normal;
}
body:has(#nav a.home):has(#nav a.new) .filedrop .file { max-width: 100%; height: auto; }
body:has(#nav a.home):has(#nav a.new) :is(.error_bar,.warning_bar,.notice_bar,#msg_notice,#msg_warning,#msg_error,#msg_info) {
  height: auto; min-height: 38px; line-height: 1.5; border-radius: 8px;
  padding-top: 10px; padding-bottom: 10px; overflow-wrap: anywhere;
}

/* Reading tickets: message text and downloadable attachments remain complete. */
body:has(#nav a.home):has(#nav a.new) :is(#ticketInfo,#ticketThread,#ticketTable,.thread-entry,.thread-body) {
  max-width: 100%; min-width: 0;
}
body:has(#nav a.home):has(#nav a.new) #ticketInfo :is(.infoTable,table.custom-data) {
  width: 100%; max-width: 100%; table-layout: fixed;
}
body:has(#nav a.home):has(#nav a.new) #ticketInfo { width: 100% !important; table-layout: fixed; }
body:has(#nav a.home):has(#nav a.new) #ticketInfo .action-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 8px 12px; border: 1px solid #808184; border-radius: 8px;
  background: #FFFFFF; color: #222222 !important; font: 600 14px/1.4 Inter,Arial,sans-serif;
  text-decoration: none; white-space: normal;
}
body:has(#nav a.home):has(#nav a.new) #ticketTable { width: 100%; max-width: 100%; table-layout: fixed; }
body:has(#nav a.home):has(#nav a.new) #ticketTable :is(th,td) { height: auto; padding: 10px; line-height: 1.5; }
body:has(#nav a.home):has(#nav a.new) .thread-entry .header {
  border-color: #D3D9D5; border-radius: 12px 12px 0 0; padding: 12px 16px;
}
body:has(#nav a.home):has(#nav a.new) .thread-entry .thread-body {
  border-color: #D3D9D5; border-radius: 0 0 12px 12px; line-height: 1.65;
}
body:has(#nav a.home):has(#nav a.new) .thread-entry .header .title { max-width: 100%; }
body:has(#nav a.home):has(#nav a.new) .thread-body .attachment-info { max-width: 100%; vertical-align: top; }
body:has(#nav a.home):has(#nav a.new) .thread-body .attachment-info .filename {
  max-width: 100%; white-space: normal; overflow-wrap: anywhere;
}
body:has(#nav a.home):has(#nav a.new) .thread-body .attachments {
  margin: 0; top: auto; padding: 12px 0; max-width: 100%;
}
body:has(#nav a.home):has(#nav a.new) .freetext-files .file { max-width: 100%; }
body:has(#nav a.home):has(#nav a.new) #ticketThread .thread-body { overflow-x: auto; }
body:has(#nav a.home):has(#nav a.new) #ticketSearchForm {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
body:has(#nav a.home):has(#nav a.new) #ticketSearchForm > .pull-right {
  float: none; min-width: 0; margin-left: auto;
}
body:has(#nav a.home):has(#nav a.new) #ticketTable .truncate {
  max-width: 100% !important; max-height: none !important;
  white-space: normal; overflow: visible; text-overflow: clip;
}

@media (max-width: 900px) {
  body:has(#nav a.home):has(#nav a.new) #content { padding: 24px; }
  body:has(#nav a.home):has(#nav a.new) #landing_page { grid-template-columns: minmax(0,1fr); }
  body:has(#nav a.home):has(#nav a.new) #clientLogin > div[style*="table-row"] { grid-template-columns: minmax(0,1fr); }
  body:has(#nav a.home):has(#nav a.new) #clientLogin .login-box,
  body:has(#nav a.home):has(#nav a.new) #clientLogin .instructions {
    display: block; width: 100%; padding: 0; box-shadow: none;
  }
  body:has(#nav a.home):has(#nav a.new) #clientLogin .instructions { margin-top: 24px; }
}
@media (max-width: 600px) {
  body:has(#nav a.home):has(#nav a.new) { padding: 10px; font-size: 16px; }
  body:has(#nav a.home):has(#nav a.new) #header { padding: 16px; gap: 12px; justify-content: center; }
  body:has(#nav a.home):has(#nav a.new) #header #logo { width: 100%; max-width: 100%; justify-content: center; }
  body:has(#nav a.home):has(#nav a.new) #header > .pull-right { width: 100%; margin-left: 0; text-align: center; }
  body:has(#nav a.home):has(#nav a.new) #nav { padding: 10px; gap: 6px; }
  body:has(#nav a.home):has(#nav a.new) #nav li { flex: 1 1 calc(50% - 6px); }
  body:has(#nav a.home):has(#nav a.new) #nav li a { width: 100%; padding: 10px 8px 10px 30px; background-position: 9px center; font-size: 14px; }
  body:has(#nav a.home):has(#nav a.new) #content { padding: 20px 16px; }
  body:has(#nav a.home):has(#nav a.new) #content h1 { font-size: 26px; }
  body:has(#nav a.home):has(#nav a.new) :is(#clientLogin,#reply) { padding: 16px; }
  body:has(#nav a.home):has(#nav a.new) #ticketForm > table,
  body:has(#nav a.home):has(#nav a.new) #ticketForm > table > tbody,
  body:has(#nav a.home):has(#nav a.new) #ticketForm > table > tbody > tr,
  body:has(#nav a.home):has(#nav a.new) #ticketForm > table > tbody > tr > :is(th,td),
  body:has(#nav a.home):has(#nav a.new) #reply > table,
  body:has(#nav a.home):has(#nav a.new) #reply > table > tbody,
  body:has(#nav a.home):has(#nav a.new) #reply > table > tbody > tr,
  body:has(#nav a.home):has(#nav a.new) #reply > table > tbody > tr > :is(th,td) {
    display: block; width: 100% !important; max-width: 100%;
  }
  body:has(#nav a.home):has(#nav a.new) #ticketForm > table > tbody > tr > :is(th,td) { padding: 4px 0 10px; }
  body:has(#nav a.home):has(#nav a.new) #reply > table > tbody > tr > :is(th,td) { padding: 4px 0 10px; }
  body:has(#nav a.home):has(#nav a.new) #ticketForm .captchaRow :is(.captcha,input) { float: none; top: auto; }
  body:has(#nav a.home):has(#nav a.new) #ticketForm .captchaRow input { width: min(100%,180px); }
  body:has(#nav a.home):has(#nav a.new) #ticketInfo,
  body:has(#nav a.home):has(#nav a.new) #ticketInfo > tbody,
  body:has(#nav a.home):has(#nav a.new) #ticketInfo > tbody > tr,
  body:has(#nav a.home):has(#nav a.new) #ticketInfo > tbody > tr > td {
    display: block; width: 100% !important; max-width: 100%;
  }
  body:has(#nav a.home):has(#nav a.new) #ticketInfo > tbody > tr > td { margin-bottom: 16px; }
  body:has(#nav a.home):has(#nav a.new) #ticketInfo h1 > .pull-right {
    float: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
  }
  body:has(#nav a.home):has(#nav a.new) #ticketSearchForm > .pull-right { width: 100%; margin-left: 0; }
  body:has(#nav a.home):has(#nav a.new) #ticketTable,
  body:has(#nav a.home):has(#nav a.new) #ticketTable :is(caption,thead,tbody,th,td) { display: block; width: 100% !important; }
  body:has(#nav a.home):has(#nav a.new) #ticketTable { border: 0; }
  body:has(#nav a.home):has(#nav a.new) #ticketTable thead > tr {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; background: #F4F7F4;
  }
  body:has(#nav a.home):has(#nav a.new) #ticketTable th { flex: 1 1 auto; width: auto !important; border: 0; padding: 0; }
  body:has(#nav a.home):has(#nav a.new) #ticketTable th a {
    display: flex; align-items: center; min-height: 44px; padding: 8px;
    border: 1px solid #DDDDDD; border-radius: 8px; background: #FFFFFF;
  }
  body:has(#nav a.home):has(#nav a.new) #ticketTable tbody { display: grid; gap: 12px; padding: 12px 0; }
  body:has(#nav a.home):has(#nav a.new) #ticketTable tbody > tr {
    display: grid; grid-template-columns: minmax(0,1fr); border: 1px solid #DDDDDD;
    border-radius: 12px; overflow: hidden;
  }
  body:has(#nav a.home):has(#nav a.new) #ticketTable tbody td { border: 0; padding: 8px 12px; }
  body:has(#nav a.home):has(#nav a.new) #ticketTable tbody tr > td::before { display: block; font-size: 12px; font-weight: 600; color: #595959; }
  body:has(#nav a.home):has(#nav a.new) #ticketTable tbody tr > td:nth-child(1):not([colspan])::before { content: "Ticket"; }
  body:has(#nav a.home):has(#nav a.new) #ticketTable tbody tr > td:nth-child(2)::before { content: "Created"; }
  body:has(#nav a.home):has(#nav a.new) #ticketTable tbody tr > td:nth-child(3)::before { content: "Status"; }
  body:has(#nav a.home):has(#nav a.new) #ticketTable tbody tr > td:nth-child(4)::before { content: "Subject"; }
  body:has(#nav a.home):has(#nav a.new) #ticketTable tbody tr > td:nth-child(5)::before { content: "Department"; }
  body:has(#nav a.home):has(#nav a.new) .thread-entry.avatar { margin-left: 0; }
  body:has(#nav a.home):has(#nav a.new) .thread-entry.response.avatar { margin-right: 0; }
  body:has(#nav a.home):has(#nav a.new) .thread-entry > .avatar { margin: 0 0 8px; width: 40px; }
  body:has(#nav a.home):has(#nav a.new) .thread-entry.response > .avatar { margin: 0 0 8px; }
  body:has(#nav a.home):has(#nav a.new) .thread-entry .header .title { display: block; margin: 4px 0 0; }
  body:has(#nav a.home):has(#nav a.new) .thread-body .attachment-info,
  body:has(#nav a.home):has(#nav a.new) .freetext-files .file { display: block; width: 100%; margin-right: 0; }
  body:has(#nav a.home):has(#nav a.new) .thread-event { margin-left: 0; }
  body:has(#nav a.home):has(#nav a.new) .thread-event .description { width: calc(100% - 45px); }
}

/* Keep the ACE footer image independent of the upstream poweredby.png asset. */
body:has(#nav a.home):has(#nav a.new) #footer #poweredBy { background-image:url('../images/ace-poweredby-261105.png'); }