/* ============================================================
   EPARIC Support Center — Brand Stylesheet
   Paste into Zoho Help Center → Customize → Custom CSS
   ============================================================ */

:root {
  --eparic-dark:     #1a1f2e;
  --eparic-navy:     #1f2238;  /* hover / pressed — slightly deeper than primary */
  --eparic-slate:    #2d3250;  /* PRIMARY — matches the logged-in system color */
  --eparic-steel:    #8fa3c4;
  --eparic-mist:     #c4d0e4;
  --eparic-off:      #f5f7fb;
  --eparic-ink:      #0f131c;
  --eparic-line:     #e3e8f0;
}

/* ---------- Page base ---------- */
body,
.commonStyle__bodyBg,
.HomePage__container {
  background: var(--eparic-off) !important;
  color: var(--eparic-navy) !important;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

/* ---------- Top nav bar (logo + Home / My Area / Sign In) ---------- */
.TopMenu__container,
.HeaderTop__container,
header > nav,
.Header__container > .commonStyle__flex:first-child {
  background: var(--eparic-dark) !important;
  border-bottom: 1px solid rgba(143, 163, 196, 0.15) !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  min-height: 0 !important;
  height: auto !important;
}

.TopMenu__menuItem,
.HeaderTop__menuItem,
nav a {
  color: var(--eparic-mist) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  line-height: 1.2 !important;
  transition: color 0.2s ease !important;
}

.TopMenu__menuItem:hover,
.HeaderTop__menuItem:hover,
nav a:hover,
.TopMenu__activeItem,
.HeaderTop__activeItem {
  color: var(--eparic-steel) !important;
}

/* Trim the logo block so it doesn't force the row taller than the menu */
.TopMenu__logo,
.HeaderTop__logo,
.Header__logo {
  max-height: 36px !important;
  padding: 0 !important;
}

.TopMenu__logo img,
.HeaderTop__logo img,
.Header__logo img {
  max-height: 36px !important;
  height: auto !important;
  width: auto !important;
}

/* ---------- Hero / search header — TRANSPARENT, lets uploaded image show ---------- */
.Header__container {
  background: transparent !important;
  padding: 1.5rem 1rem !important;
  min-height: 0 !important;
  height: auto !important;
}

.Header__container > * {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Tighten heading + description spacing so the hero packs in less vertical room */
.Header__searchTitle {
  margin-bottom: 0.75rem !important;
  margin-top: 0 !important;
}

.Header__description {
  margin: 0 0 1rem 0 !important;
}

/* Constrain the search row width so the bar doesn't stretch full-width */
.Header__globalSearch {
  background: transparent !important;
  max-width: 720px !important;
  width: 100% !important;
  margin: 0 auto !important;
  display: block !important;
}

.Header__searchTitle {
  color: #fff !important;
  font-weight: 400 !important;
  font-size: 2.5rem !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 2px 16px rgba(15, 19, 28, 0.85), 0 0 4px rgba(15, 19, 28, 0.6) !important;
  margin-bottom: 1.5rem !important;
}

.Header__description {
  color: var(--eparic-mist) !important;
  font-weight: 300 !important;
  text-shadow: 0 2px 8px rgba(15, 19, 28, 0.8) !important;
}

/* ---------- Search bar ---------- */
.SearchContainer__globalSearch {
  background: rgba(245, 247, 251, 0.96) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(15, 19, 28, 0.4) !important;
  max-width: 720px !important;
  width: 100% !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
}

.SearchContainer__formGroup {
  flex: 1 !important;
  min-width: 0 !important;
}

.SearchContainer__formGroup input {
  background: transparent !important;
  border: none !important;
  color: var(--eparic-navy) !important;
  font-size: 1rem !important;
  padding: 0.9rem 1.25rem !important;
  width: 100% !important;
  height: 100% !important;
}

.SearchContainer__formGroup input::placeholder {
  color: var(--eparic-slate) !important;
}

/* Search button — flush with the bar, square-tucked into the right corner */
[data-id="searchButton"],
.SearchContainer__searchIcon {
  background: var(--eparic-slate) !important;
  color: var(--eparic-off) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 0 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}

[data-id="searchButton"]:hover,
.SearchContainer__searchIcon:hover {
  background: var(--eparic-navy) !important;
}

/* Make the magnifying glass icon white & properly sized */
[data-id="searchButton"] svg,
[data-id="searchButton"] i,
.SearchContainer__searchIcon svg,
.SearchContainer__searchIcon i {
  color: var(--eparic-off) !important;
  fill: var(--eparic-off) !important;
  font-size: 1.1rem !important;
}

/* ---------- Brand-color utilities (Zoho applies these site-wide) ---------- */
.commonStyle__zt3BrandBg {
  background-color: var(--eparic-slate) !important;
}

.commonStyle__zt3Brand,
.commonStyle__zt3BrandColor,
.commonStyle__brandColor {
  color: var(--eparic-slate) !important;
}

.commonStyle__zt3BrandBorder {
  border-color: var(--eparic-slate) !important;
}

/* SVG/icon fills inside any brand-colored span/div */
.commonStyle__zt3Brand svg,
.commonStyle__zt3Brand i,
.commonStyle__zt3BrandColor svg,
.commonStyle__zt3BrandColor i {
  fill: var(--eparic-slate) !important;
  color: var(--eparic-slate) !important;
}

/* Primary buttons — Submit ticket, Sign Up, etc.
   These utility classes appear on EVERY primary button in Zoho Help Center.
   Killing the orange here fixes them all in one shot. */
.commonStyle__zt3buttonPrimaryBg,
.Button__primary {
  background-color: var(--eparic-slate) !important;
  background: var(--eparic-slate) !important;
  border-color: var(--eparic-slate) !important;
  transition: background-color 0.2s ease !important;
}

.commonStyle__zt3buttonPrimaryBg:hover,
.Button__primary:hover {
  background-color: var(--eparic-navy) !important;
  background: var(--eparic-navy) !important;
  border-color: var(--eparic-navy) !important;
}

.commonStyle__zt3buttonPrimaryText {
  color: var(--eparic-off) !important;
}

/* Secondary buttons — Discard, Cancel, etc. */
.commonStyle__zt3buttonSecondaryBg,
.Button__secondary {
  background-color: #fff !important;
  background: #fff !important;
  border: 1px solid var(--eparic-line) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.commonStyle__zt3buttonSecondaryBg:hover,
.Button__secondary:hover {
  background-color: var(--eparic-mist) !important;
  background: var(--eparic-mist) !important;
  border-color: var(--eparic-slate) !important;
}

.commonStyle__zt3buttonSecondaryText {
  color: var(--eparic-navy) !important;
}

/* ---------- Tabs / section headers on home ---------- */
.Tab__container,
.TabPanel__container {
  background: var(--eparic-off) !important;
  border-bottom: 1px solid var(--eparic-line) !important;
}

.Tab__item,
.TabPanel__item {
  color: var(--eparic-slate) !important;
  font-weight: 500 !important;
}

.Tab__activeItem,
.TabPanel__activeItem,
.Tab__item--active {
  color: var(--eparic-navy) !important;
  border-bottom: 2px solid var(--eparic-slate) !important;
}

/* ---------- Category / article cards on home ---------- */
.CategoryListing__container,
.ArticleListing__container {
  padding: 2.5rem 1rem !important;
}

.CategoryCard__container,
.ArticleCard__container,
.CategoryListing__category {
  background: #fff !important;
  border: 1px solid var(--eparic-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(15, 19, 28, 0.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.CategoryCard__container:hover,
.ArticleCard__container:hover,
.CategoryListing__category:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(15, 19, 28, 0.1) !important;
  border-color: var(--eparic-steel) !important;
}

.CategoryCard__title,
.ArticleCard__title {
  color: var(--eparic-navy) !important;
  font-weight: 600 !important;
}

.CategoryCard__description,
.ArticleCard__description {
  color: var(--eparic-slate) !important;
}

/* ---------- Breadcrumb ---------- */
.Breadcrumb__container,
.BreadCrumb__container {
  background: var(--eparic-off) !important;
  border-bottom: 1px solid var(--eparic-line) !important;
  padding: 0.75rem 1rem !important;
}

.Breadcrumb__item,
.BreadCrumb__item,
.Breadcrumb__container a {
  color: var(--eparic-slate) !important;
}

.Breadcrumb__item:hover,
.BreadCrumb__item:hover,
.Breadcrumb__container a:hover {
  color: var(--eparic-navy) !important;
}

/* ---------- Links (article body, footer, etc.) ---------- */
a:not(nav a):not([data-id="searchButton"]) {
  color: var(--eparic-slate) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

a:not(nav a):not([data-id="searchButton"]):hover {
  color: var(--eparic-navy) !important;
  text-decoration: underline !important;
}

/* ---------- Buttons ---------- */
button.primary,
.btn-primary,
.commonStyle__btnPrimary,
input[type="submit"] {
  background: var(--eparic-slate) !important;
  color: var(--eparic-off) !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  padding: 0.6rem 1.25rem !important;
  transition: background 0.2s ease !important;
}

button.primary:hover,
.btn-primary:hover,
.commonStyle__btnPrimary:hover,
input[type="submit"]:hover {
  background: var(--eparic-navy) !important;
}

button.secondary,
.btn-secondary,
.commonStyle__btnSecondary {
  background: var(--eparic-off) !important;
  color: var(--eparic-navy) !important;
  border: 1px solid var(--eparic-slate) !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  padding: 0.6rem 1.25rem !important;
}

button.secondary:hover,
.btn-secondary:hover,
.commonStyle__btnSecondary:hover {
  background: var(--eparic-mist) !important;
}

/* ---------- Forms (ticket submission, login) ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  background: #fff !important;
  border: 1px solid var(--eparic-line) !important;
  border-radius: 6px !important;
  color: var(--eparic-navy) !important;
  padding: 0.6rem 0.85rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--eparic-slate) !important;
  box-shadow: 0 0 0 3px rgba(90, 109, 140, 0.15) !important;
}

label {
  color: var(--eparic-navy) !important;
  font-weight: 500 !important;
}

/* ---------- Article view ---------- */
.Article__container,
.ArticleView__container {
  background: #fff !important;
  border-radius: 10px !important;
  padding: 2rem !important;
}

.Article__title,
.ArticleView__title {
  color: var(--eparic-navy) !important;
  font-weight: 600 !important;
}

.Article__content,
.ArticleView__content {
  color: var(--eparic-ink) !important;
  line-height: 1.7 !important;
}

/* ============================================================
   Submit a Ticket page
   ============================================================ */

/* Submit / Discard buttons — handled by .commonStyle__zt3button* above,
   but adding data-id selectors as belt-and-braces */
[data-id="ticket_save"] {
  background: var(--eparic-slate) !important;
  background-color: var(--eparic-slate) !important;
  color: var(--eparic-off) !important;
  border-color: var(--eparic-slate) !important;
}

[data-id="ticket_save"]:hover {
  background: var(--eparic-navy) !important;
  background-color: var(--eparic-navy) !important;
  border-color: var(--eparic-navy) !important;
}

[data-id="ticket_cancel"] {
  background: #fff !important;
  background-color: #fff !important;
  color: var(--eparic-navy) !important;
  border: 1px solid var(--eparic-line) !important;
}

[data-id="ticket_cancel"]:hover {
  background: var(--eparic-mist) !important;
  background-color: var(--eparic-mist) !important;
  border-color: var(--eparic-slate) !important;
}

/* "Attach a file" — actual class names from inspector:
   - .Field__attachMent — outer wrapper
   - .FileUpload__userLink + .commonStyle__zt3Brand — "Attach a file" text
   - .FileUpload__attachPin + .commonStyle__zt3BrandBorder — paperclip ring
   - .FileUpload__uploadInform — "(Up to 40 MB)" text */
.FileUpload__userLink {
  color: var(--eparic-slate) !important;
  font-weight: 500 !important;
}

.FileUpload__userLink:hover {
  color: var(--eparic-navy) !important;
}

.FileUpload__attachPin {
  border-color: var(--eparic-slate) !important;
  color: var(--eparic-slate) !important;
}

.FileUpload__attachPin svg,
.FileUpload__attachPin i {
  color: var(--eparic-slate) !important;
  fill: var(--eparic-slate) !important;
  stroke: var(--eparic-slate) !important;
}

.FileUpload__uploadInform {
  color: var(--eparic-slate) !important;
  opacity: 0.7 !important;
}

/* Captcha block — IMAGE/AUDIO toggle, refresh icon */
[class*="captcha"] [class*="active"],
[class*="captcha"] [class*="selected"],
[class*="Captcha"] [class*="active"],
[class*="Captcha"] [class*="selected"] {
  color: var(--eparic-slate) !important;
  border-color: var(--eparic-slate) !important;
}

[class*="captcha"] [class*="refresh"],
[class*="Captcha"] [class*="refresh"] {
  color: var(--eparic-slate) !important;
  fill: var(--eparic-slate) !important;
}

/* Selected radio button (the orange filled dot) */
input[type="radio"]:checked {
  accent-color: var(--eparic-slate) !important;
}

input[type="checkbox"]:checked {
  accent-color: var(--eparic-slate) !important;
}

/* Required asterisks on form labels */
.commonStyle__mandatory,
.commonStyle__required,
[class*="mandatory"],
[class*="asterisk"] {
  color: var(--eparic-slate) !important;
}

/* Section heading "Additional Information" */
.TicketForm__sectionHeader,
.TicketForm__additionalInfoTitle,
[class*="sectionHeader"],
[class*="additionalInfo"] {
  color: var(--eparic-navy) !important;
  font-weight: 600 !important;
}

/* ============================================================
   Sign Up / Sign In / Auth pages
   ============================================================ */

/* Page-level wrapper — give it a soft brand bg */
.SignUp__container,
.SignIn__container,
.Login__container,
.AccountCreation__container,
.AuthPage__container,
[class*="SignUp__"][class*="container"],
[class*="SignIn__"][class*="container"] {
  background: var(--eparic-off) !important;
  padding: 3rem 1.5rem !important;
}

/* Page heading "Sign Up" */
.SignUp__title,
.SignIn__title,
.Login__title,
[class*="SignUp__title"],
[class*="SignIn__title"] {
  color: var(--eparic-navy) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* Subheading text */
.SignUp__description,
.SignIn__description,
[class*="SignUp__description"],
[class*="SignIn__description"] {
  color: var(--eparic-slate) !important;
}

/* Field labels */
.SignUp__label,
.SignIn__label,
[class*="SignUp__"][class*="label"],
[class*="SignIn__"][class*="label"] {
  color: var(--eparic-navy) !important;
  font-weight: 500 !important;
}

/* Required asterisks */
.SignUp__required,
.commonStyle__required,
.required-field {
  color: var(--eparic-slate) !important;
}

/* Primary action button (Sign Up / Sign In submit) — kill the orange */
.SignUp__signUpBtn,
.SignIn__signInBtn,
.Login__loginBtn,
[data-id="signupSubmit"],
[data-id="signinSubmit"],
[class*="SignUp__"][class*="Btn"],
[class*="SignIn__"][class*="Btn"],
[class*="Signin__"][class*="Btn"],
[class*="Signup__"][class*="Btn"],
button.commonStyle__btnPrimary,
.SignUp__container button[type="submit"],
.SignIn__container button[type="submit"],
form button[type="submit"]:not([data-id="searchButton"]),
#mainContainer button[type="submit"],
#mainContainer input[type="submit"],
.UserContainer__innerContainer1 button,
.UserContainer__innerContainer1 input[type="submit"],
.UserContainer__logInMainContainer button,
.UserContainer__logInMainContainer input[type="submit"],
.Layout__oneColumn button[type="submit"],
.Layout__oneColumn input[type="submit"] {
  background: var(--eparic-slate) !important;
  background-color: var(--eparic-slate) !important;
  color: var(--eparic-off) !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  padding: 0.6rem 1.5rem !important;
  letter-spacing: 0.01em !important;
  transition: background 0.2s ease !important;
}

.SignUp__signUpBtn:hover,
.SignIn__signInBtn:hover,
.Login__loginBtn:hover,
[data-id="signupSubmit"]:hover,
[data-id="signinSubmit"]:hover,
[class*="SignUp__"][class*="Btn"]:hover,
[class*="SignIn__"][class*="Btn"]:hover,
[class*="Signin__"][class*="Btn"]:hover,
[class*="Signup__"][class*="Btn"]:hover,
button.commonStyle__btnPrimary:hover,
form button[type="submit"]:not([data-id="searchButton"]):hover,
#mainContainer button[type="submit"]:hover,
#mainContainer input[type="submit"]:hover,
.UserContainer__innerContainer1 button:hover,
.UserContainer__innerContainer1 input[type="submit"]:hover,
.UserContainer__logInMainContainer button:hover,
.UserContainer__logInMainContainer input[type="submit"]:hover,
.Layout__oneColumn button[type="submit"]:hover,
.Layout__oneColumn input[type="submit"]:hover {
  background: var(--eparic-navy) !important;
  background-color: var(--eparic-navy) !important;
}

/* Secondary action (Discard / Cancel) */
.SignUp__discardBtn,
.SignIn__discardBtn,
[data-id="signupDiscard"],
[class*="discardBtn"],
[class*="cancelBtn"],
button.commonStyle__btnSecondary {
  background: #fff !important;
  color: var(--eparic-navy) !important;
  border: 1px solid var(--eparic-line) !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  padding: 0.6rem 1.5rem !important;
}

.SignUp__discardBtn:hover,
.SignIn__discardBtn:hover,
[data-id="signupDiscard"]:hover,
[class*="discardBtn"]:hover,
[class*="cancelBtn"]:hover,
button.commonStyle__btnSecondary:hover {
  background: var(--eparic-mist) !important;
  border-color: var(--eparic-slate) !important;
}

/* Right-side info panel (Already a member / Are you an Agent) */
.SignUp__sideInfo,
.SignIn__sideInfo,
[class*="SignUp__sideInfo"],
[class*="SignIn__sideInfo"],
[class*="sideInfo"] {
  background: #fff !important;
  border: 1px solid var(--eparic-line) !important;
  border-radius: 10px !important;
  padding: 1.5rem !important;
}

.SignUp__sideInfo a,
.SignIn__sideInfo a,
[class*="sideInfo"] a {
  color: var(--eparic-slate) !important;
  font-weight: 500 !important;
}

.SignUp__sideInfo a:hover,
.SignIn__sideInfo a:hover,
[class*="sideInfo"] a:hover {
  color: var(--eparic-navy) !important;
}

/* Captcha block */
.SignUp__captchaImg,
[class*="captcha"] img {
  filter: hue-rotate(160deg) saturate(0.5) !important;
}

/* The slim page header on auth pages (Create Account + search) */
.PageHeader__container,
.SubHeader__container,
[class*="PageHeader__container"] {
  background: var(--eparic-off) !important;
  border-bottom: 1px solid var(--eparic-line) !important;
}

.PageHeader__title,
.SubHeader__title,
[class*="PageHeader__title"] {
  color: var(--eparic-navy) !important;
  font-weight: 600 !important;
}

/* ---------- Zoho IAM Sign-in (NOT styleable via custom CSS) ----------
   The /portal/en/signin page renders Zoho's IAM flow and does NOT load this
   stylesheet. To brand it (logo, background, button color):
     Zoho Desk → Setup → Customize → Rebranding (or Help Center → Theme)
   Look for a "Sign-In Page" / "Customer Portal Sign-In" section. That panel
   is the only way to change the blue Next button on the login page.
   ------------------------------------------------------------------ */

/* ---------- Footer ---------- */
.Footer__container,
.Footer__footerBg,
footer {
  background: var(--eparic-dark) !important;
  color: var(--eparic-mist) !important;
  border-top: 1px solid rgba(143, 163, 196, 0.15) !important;
}

.Footer__container a,
footer a {
  color: var(--eparic-mist) !important;
}

.Footer__container a:hover,
footer a:hover {
  color: var(--eparic-steel) !important;
}

/* Footer copyright row */
.Footer__footerCopyrigt,
[class*="footerCopyright"] {
  color: var(--eparic-steel) !important;
  opacity: 0.7 !important;
}

/* "Still can't find an answer?" call-to-action banner — text legibility on dark bg */
.Footer__footerInfo,
.Footer__footerInfo *,
.Footer__footerContent,
.Footer__footerContent h1,
.Footer__footerContent h2,
.Footer__footerContent h3,
.Footer__footerContent p {
  color: var(--eparic-off) !important;
}

/* The headline text specifically — strong white, bold */
.Footer__footerInfo > div:first-child,
.Footer__footerInfo h1,
.Footer__footerInfo h2,
[class*="footerTitle"],
[class*="footerHeading"] {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
}

/* The subheading "Send us a ticket and we will get back to you." */
.Footer__footerInfo > div:nth-child(2),
[class*="footerSubtitle"],
[class*="footerDescription"] {
  color: var(--eparic-mist) !important;
  opacity: 0.85 !important;
}

/* The "Submit a ticket" footer button — kill the burnt orange, make it pop on dark */
.Button__footerBtn,
[data-id="footer_newticket"] button,
[data-id="footer_newticket"] .Button__footerBtn {
  background: #fff !important;
  background-color: #fff !important;
  color: var(--eparic-navy) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.85rem 2.25rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.Button__footerBtn:hover,
[data-id="footer_newticket"] button:hover,
[data-id="footer_newticket"] .Button__footerBtn:hover {
  background: var(--eparic-mist) !important;
  background-color: var(--eparic-mist) !important;
  color: var(--eparic-navy) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Back-to-top arrow (uses commonStyle__zt3BrandBg, already covered, but reinforcing) */
.AppContainer__backToTop,
[data-id="toparrow"] {
  background-color: var(--eparic-slate) !important;
  color: var(--eparic-off) !important;
}

[data-id="searchButton"],
[role="search"] {
  display: none !important;
}

/* Active link / filter labels (My Area filters: All Department, Priority, etc.) */
.commonStyle__zt3LinkActive,
.commonStyle__zt3Link {
  color: var(--eparic-slate) !important;
}

.commonStyle__zt3LinkActive:hover,
.commonStyle__zt3Link:hover {
  color: var(--eparic-navy) !important;
}

/* The dropdown caret/arrow next to each filter */
[data-id$="_arrow_icon"],
[data-id$="_arrow_icon"] svg,
[data-id$="_arrow_icon"] i {
  color: var(--eparic-slate) !important;
  fill: var(--eparic-slate) !important;
}

/* Hide the "Still can't find an answer?" footer banner */
.Footer__footerInfo,
.Footer__footerContent {
  display: none !important;
}

/* ============================================================
   My Area — hide Team-* views from the Views sidebar
   DOM: <li class="TicketList__accountList ... Team_Tickets">
        (also Team_Open_Tickets, Team_Closed_Tickets,
         Team_On_Hold_Tickets, Team_Overdue_Tickets)
   We only want personal views in this portal.
   ============================================================ */
li.TicketList__accountList[class*="Team_"] {
  display: none !important;
}

/* ============================================================
   Submit a Ticket — "Select product" modal
   Hide the "All Product" tab so users pick from Related Product
   only. DOM: <span data-id="all_product" ...>All Product</span>
   inside .SearchProduct__productItem.
   ============================================================ */
.SearchProduct__productItem [data-id="all_product"] {
  display: none !important;
}

/* ============================================================
   My Area — Tickets list empty state
   DOM: [data-id="no_ticket"] > NoContent__contentDescription
        > h3.NoContent__title  +  p[data-id="no_ticket_desc"]
   ============================================================ */

/* Title — "No <span class='modulesname'>tickets</span> found"
   Zoho colors the title orange; recolor everything inside (including
   the inner .modulesname span) to brand navy */
.NoContent__title,
.NoContent__title .modulesname,
[data-id="no_ticket_title"],
[data-id="no_ticket_title"] .modulesname {
  color: var(--eparic-navy) !important;
  font-weight: 600 !important;
}

/* Description paragraph */
.NoContent__contentDescription p,
[data-id="no_ticket_desc"] {
  color: var(--eparic-slate) !important;
}

/* Inline "ticket" link inside the description */
.NoContent__contentDescription a,
[data-id="no_ticket_desc"] a {
  color: var(--eparic-slate) !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
}

.NoContent__contentDescription a:hover,
[data-id="no_ticket_desc"] a:hover {
  color: var(--eparic-navy) !important;
}

/* Illustration — desaturate to mute the bright cyan/red/green accents */
.NoContent__noContent svg,
.NoContent__noContent img,
[data-id="no_ticket"] svg,
[data-id="no_ticket"] img {
  filter: saturate(0.55) opacity(0.85) !important;
}