/* =========================================================
   INDICATE EU branding for Zoho Desk Help Center
   ========================================================= */

/* Main INDICATE color */
:root {
  --indicate-blue: #0076bd;
  --indicate-blue-dark: #243f7d;
  --indicate-blue-mid: #2554a6;
  --indicate-cyan: #42c7df;
}

/* =========================================================
   Top banner / header gradient
   ========================================================= */

.Header__homeContent,
.Header__bgColor,
.Header__header,
.Header__navbar {
  background: linear-gradient(
    135deg,
    var(--indicate-blue-dark) 0%,
    var(--indicate-blue-mid) 35%,
    var(--indicate-blue) 68%,
    var(--indicate-cyan) 100%
  ) !important;
}

/* Keep navbar visually clean */
.Header__navbar {
  box-shadow: none !important;
  border-bottom: none !important;
}

/* Subtle overlay for better readability on banner */
.Header__homeContent {
  position: relative;
}

.Header__homeContent::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 39, 84, 0.22),
    rgba(20, 39, 84, 0.04)
  );
  pointer-events: none;
}

/* Keep banner content above overlay */
.Header__homeContent > * {
  position: relative;
  z-index: 1;
}

/* Banner title and text */
.Header__welcomeTitle,
.Header__welcomeDescription {
  color: #ffffff !important;
}

/* Header logo/name and navigation */
.Header__tabsTab,
.Header__tabsTab a,
.Header__tabsTab span,
.Header__name {
  color: #ffffff !important;
}

/* Keep header/nav hover readable on gradient */
.Header__navbar .Header__tabsTab:hover,
.Header__navbar .Header__tabsTab a:hover,
.Header__navbar .Header__tabsTab.Header__active,
.Header__navbar .Header__tabsTab.commonStyle__zt3Brand {
  color: #ffffff !important;
}

/* Optional active nav underline in plain INDICATE blue */
.Header__tabsTab.Header__active::after,
.Header__tabsTab.commonStyle__zt3Brand::after {
  background-color: var(--indicate-blue) !important;
  border-color: var(--indicate-blue) !important;
}

/* =========================================================
   Replace Zoho orange accents with plain INDICATE blue
   ========================================================= */

/* Brand text, links, selected tabs, highlighted text */
.commonStyle__zt3Brand,
.commonStyle__zt3BrandHover:hover,
.BreadCrumbs__breadcrumbsView a,
.Link__link,
.KbDetailLtContainer__articleContent a,
.ArticleCmd__socialShareLt,
.TicketList__filter_channel,
.TicketDetailRightContainer__widgetSection a,
.TicketDetailLeftContainer__ticketDetail a,
.DepartmentList__deptLink,
.SearchResult__resultLink,
.ListHeader__headerContent a {
  color: var(--indicate-blue) !important;
}

/* Buttons, search button, highlighted backgrounds */
.commonStyle__zt3BrandBg,
.commonStyle__zt3BrandBgHover:hover,
.Button__footerBtn,
.Button__primary,
.FormElement__primary,
.SearchContainer__searchIcon,
.Header__searchIcon,
.TicketList__filter_channel.commonStyle__zt3BrandBg,
.KbDetailLtContainer__articleContent a.commonStyle__zt3BrandBg,
.AddTicketForm__submitBtn,
.Signin__loginButton,
.Signup__signupButton,
.ProfileTabs__activeTab {
  background: var(--indicate-blue) !important;
  background-color: var(--indicate-blue) !important;
  color: #ffffff !important;
}

/* Button hover states: slightly darker blue */
.commonStyle__zt3BrandBg:hover,
.commonStyle__zt3BrandBgHover:hover,
.Button__footerBtn:hover,
.Button__primary:hover,
.FormElement__primary:hover,
.SearchContainer__searchIcon:hover,
.Header__searchIcon:hover,
.AddTicketForm__submitBtn:hover,
.Signin__loginButton:hover,
.Signup__signupButton:hover {
  background: #0065a3 !important;
  background-color: #0065a3 !important;
  color: #ffffff !important;
}

/* Borders and outlines that Zoho often colors orange */
.commonStyle__zt3BrandBorder,
.commonStyle__zt3BrandBorderHover:hover,
.Button__primary,
.FormElement__primary,
.SearchContainer__searchBox,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--indicate-blue) !important;
}

/* Focus shadow */
input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 1px rgba(0, 118, 189, 0.25) !important;
  outline: none !important;
}

/* Active underline / small highlight bars */
.commonStyle__zt3BrandBorderBottom,
.Tabs__active,
.Tabs__tab:hover,
.ProfileTabs__activeTab,
.FilterTabs__active,
.FilterTabs__tab:hover {
  border-color: var(--indicate-blue) !important;
}

/* SVG/icon accents */
.commonStyle__zt3Brand svg,
.commonStyle__zt3BrandHover:hover svg,
.SearchContainer__searchIcon svg,
.Header__searchIcon svg,
.Button__primary svg,
.FormElement__primary svg {
  fill: currentColor !important;
  color: inherit !important;
}

/* =========================================================
   Search bar
   ========================================================= */

.SearchContainer__searchBox {
  background: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
}

.SearchContainer__searchBox input,
.Header__searchBox input {
  color: #1f2937 !important;
}

.SearchContainer__searchBox input::placeholder,
.Header__searchBox input::placeholder {
  color: #6b7280 !important;
}

/* Search icon button specifically */
.SearchContainer__searchIcon,
.Header__searchIcon,
.commonStyle__zt3BrandBg.SearchContainer__searchIcon {
  background: var(--indicate-blue) !important;
  background-color: var(--indicate-blue) !important;
  color: #ffffff !important;
}

/* =========================================================
   Cards / content area polish
   ========================================================= */

.KbCategory__box,
.KbCategory__item,
.ArticleList__articleList,
.TicketList__ticketListItem,
.CommunityList__topicItem {
  border-radius: 6px !important;
}

/* Links inside article/content */
.KbDetailLtContainer__articleContent a {
  color: var(--indicate-blue) !important;
  text-decoration-color: var(--indicate-blue) !important;
}

.KbDetailLtContainer__articleContent a:hover {
  color: #0065a3 !important;
}

/* =========================================================
   Remove remaining orange fallback styles
   ========================================================= */

[style*="color: rgb(255"],
[style*="color:#ff"],
[style*="color: #ff"],
[style*="background-color: rgb(255"],
[style*="background:#ff"],
[style*="background: #ff"] {
  border-color: var(--indicate-blue) !important;
}

/* Common orange inline color replacements */
[style*="color: rgb(255, 107, 26)"],
[style*="color: #ff6b1a"],
[style*="color:#ff6b1a"],
[style*="color: orange"] {
  color: var(--indicate-blue) !important;
}

[style*="background-color: rgb(255, 107, 26)"],
[style*="background-color: #ff6b1a"],
[style*="background-color:#ff6b1a"],
[style*="background: #ff6b1a"],
[style*="background:#ff6b1a"] {
  background: var(--indicate-blue) !important;
  background-color: var(--indicate-blue) !important;
  color: #ffffff !important;
}

/* =========================================================
   INDICATE EU font styling
   ========================================================= */

body,
input,
textarea,
select,
button,
.Header__welcomeTitle,
.Header__welcomeDescription,
.Header__tabsTab,
.Header__tabsTab a,
.Header__name {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif !important;
}