/* ============================================
   AREEBA SUPPORT PORTAL — Custom CSS v6
   Help Center: portal.areeba.com
   Theme: Zoho Elegant (base)

   Brand: areeba red #FF2929 (matching logo)
   Buttons: Gray gradient (steel)
   All Zoho orange (#e46317) → areeba red

   TO CHANGE COLORS: Update CSS variables in :root
   REFERENCE: See PORTAL_SETTINGS.md for full config
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

/* ============================================
   1. CSS VARIABLES — Single source of truth
   Change these to update the entire portal
   ============================================ */

:root {
  /* Brand */
  --areeba-red: #FF2929;
  --areeba-red-hover: #E02424;
  --areeba-red-light: #FEF2F2;

  /* Neutrals */
  --areeba-white: #FFFFFF;
  --areeba-offwhite: #FAFAFA;
  --areeba-gray: #F0F0F0;
  --areeba-border: #E5E5E5;
  --areeba-text: #1A1A1A;
  --areeba-text-secondary: #555555;
  --areeba-muted: #888888;
  --areeba-dark: #2D2D2D;

  /* Buttons (gray gradient) */
  --areeba-charcoal: #374151;
  --areeba-charcoal-hover: #1F2937;
  --areeba-btn-gradient: linear-gradient(180deg, #6B7280 0%, #4B5563 100%);
  --areeba-btn-gradient-hover: linear-gradient(180deg, #4B5563 0%, #374151 100%);

  /* Layout */
  --areeba-radius: 8px;
  --areeba-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  --areeba-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.08);
  --areeba-transition: 0.25s ease;
}

/* ============================================
   2. GLOBAL RESETS
   ============================================ */

body {
  font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  color: var(--areeba-text);
  background: var(--areeba-white) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Ubuntu', Arial, sans-serif !important;
  font-weight: 700;
  color: var(--areeba-text);
}

a {
  color: var(--areeba-text) !important;
  transition: color var(--areeba-transition);
}

a:hover {
  color: var(--areeba-red) !important;
}

/* ============================================
   3. ZOHO BRAND COLOR OVERRIDE
   Replaces ALL Zoho orange (#e46317) with areeba red
   Targets: zt3Brand, Icon__brand, Icon__hoverbrand,
   inline styles, SVG fills/strokes
   ============================================ */

/* --- 3a. zt3Brand — ONLY avatars get red background --- */
[class*="AvatarText"][class*="zt3Brand"],
[class*="avatarText"][class*="zt3Brand"] {
  background-color: var(--areeba-red) !important;
}

/* --- 3a-2. Breadcrumb brand bg → transparent (NOT red) --- */
[class*="zt3breadCrumb"],
[class*="zt3BreadCrumb"] {
  background-color: transparent !important;
  background: transparent !important;
}

/* --- 3a-3. Brand bg utility → red ONLY for back-to-top --- */
[class*="backToTop"][class*="zt3BrandBg"],
[class*="BackToTop"][class*="zt3BrandBg"] {
  background-color: var(--areeba-charcoal) !important;
  background: var(--areeba-btn-gradient) !important;
}

/* --- 3a-4. Generic zt3Brand/zt3BrandBg — neutralize everywhere else --- */
[class*="zt3brandBg"]:not([class*="AvatarText"]):not([class*="backToTop"]):not([class*="BackToTop"]),
[class*="zt3BrandBg"]:not([class*="AvatarText"]):not([class*="backToTop"]):not([class*="BackToTop"]) {
  background-color: transparent !important;
  background: transparent !important;
}

/* --- 3a-5. zt3Brand text color — orange → red --- */
[class*="zt3Brand"]:not([class*="AvatarText"]):not([class*="Bg"]) {
  color: var(--areeba-red) !important;
}

/* --- 3a-6. zt3BrandBorder — orange border → red --- */
[class*="zt3BrandBorder"] {
  border-color: var(--areeba-red) !important;
}

/* --- 3a-6b. Attach a file — hover animation --- */
@keyframes wiggle {
  0% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-14deg) scale(1.05); }
  30% { transform: rotate(12deg) scale(1.08); }
  45% { transform: rotate(-8deg) scale(1.05); }
  60% { transform: rotate(6deg) scale(1.02); }
  75% { transform: rotate(-3deg) scale(1.01); }
  100% { transform: rotate(0deg) scale(1); }
}

[class*="FileUpload__attachPin"],
span[class*="attachPin"] {
  display: inline-block !important;
}

[class*="FileUpload__label"]:hover [class*="attachPin"] {
  animation: wiggle 0.6s ease both !important;
}

[class*="FileUpload__label"]:hover [class*="userLink"] {
  color: var(--areeba-red-hover) !important;
  text-decoration: underline !important;
}

/* --- 3a-7. Required field asterisks — orange → red --- */
[class*="FormElement__required"],
[class*="mandatoryStar"]::after,
[class*="FormElement__required"]::after {
  color: var(--areeba-red) !important;
}

/* --- 3b. SVG Icon brand colors --- */
/* Icons permanently brand-colored */
svg[class*="Icon__brand"],
svg[class*="Icon__brand"] use {
  fill: var(--areeba-red) !important;
  color: var(--areeba-red) !important;
}

/* Icons brand-colored on hover */
svg[class*="Icon__hoverbrand"]:hover,
svg[class*="Icon__hoverbrand"]:hover use,
*:hover > svg[class*="Icon__hoverbrand"],
*:hover > svg[class*="Icon__hoverbrand"] use,
span:hover svg[class*="Icon__hoverbrand"],
span:hover svg[class*="Icon__hoverbrand"] use,
button:hover svg[class*="Icon__hoverbrand"],
button:hover svg[class*="Icon__hoverbrand"] use {
  fill: var(--areeba-red) !important;
  color: var(--areeba-red) !important;
}

/* --- 3b-2. Profile tabs active state (orange → red) --- */
[class*="ProfileTabs__activeTab"] svg,
[class*="ProfileTabs__activeTab"] svg use,
[class*="ProfileTabs__activeTab"] [class*="tabIcon"] svg,
[class*="ProfileTabs__activeTab"] [class*="tabIcon"] svg use {
  fill: var(--areeba-red) !important;
  color: var(--areeba-red) !important;
}

[class*="ProfileTabs__activeTab"] [class*="tabName"] {
  color: var(--areeba-red) !important;
}

/* Profile tabs hover */
[class*="ProfileTabs__tabList"]:hover svg,
[class*="ProfileTabs__tabList"]:hover svg use {
  fill: var(--areeba-red) !important;
  color: var(--areeba-red) !important;
}

[class*="ProfileTabs__tabList"]:hover [class*="tabName"] {
  color: var(--areeba-red) !important;
}

/* --- 3b-3. Ticket icon — gray front, orange accent → red via hue filter --- */
/* The back ticket has hardcoded orange in the SVG shadow DOM (via <use>). */
/* hue-rotate shifts orange→red; gray has 0 saturation so is unaffected. */
svg[class*="Icon__greyShade70"],
svg[class*="Icon__Xlarge"],
[class*="ContentBox__indexIcon"] svg,
svg[alt="Tickets"] {
  color: var(--areeba-dark) !important;
  filter: hue-rotate(-28deg) saturate(1.6) !important;
}

[class*="ContentBox__indexIcon"] {
  color: var(--areeba-dark) !important;
}

/* --- 3c. Inline orange styles (nuclear) --- */
[style*="color: rgb(228, 99, 23)"],
[style*="color:#e46317"],
[style*="color: #e46317"],
[style*="color:#E46317"],
[style*="color: #E46317"] {
  color: var(--areeba-red) !important;
}

[style*="background-color: rgb(228, 99, 23)"],
[style*="background: rgb(228, 99, 23)"],
[style*="background-color:#e46317"],
[style*="background:#e46317"],
[style*="background-color: #e46317"],
[style*="background: #e46317"],
[style*="background-color:#E46317"],
[style*="background:#E46317"],
[style*="background-color: #E46317"],
[style*="background: #E46317"] {
  background-color: var(--areeba-red) !important;
  background: var(--areeba-red) !important;
}

a[style*="e46317"], span[style*="e46317"],
div[style*="e46317"], button[style*="e46317"],
a[style*="E46317"], span[style*="E46317"],
div[style*="E46317"], button[style*="E46317"] {
  border-color: var(--areeba-red) !important;
}

/* --- 3d. SVG stroke/fill overrides --- */
svg path[stroke="#e46317"], svg path[stroke="#E46317"],
svg line[stroke="#e46317"], svg circle[stroke="#e46317"],
svg rect[stroke="#e46317"], svg polyline[stroke="#e46317"],
svg polygon[stroke="#e46317"] {
  stroke: var(--areeba-red) !important;
}

svg path[fill="#e46317"], svg path[fill="#E46317"],
svg [style*="e46317"], svg [style*="E46317"] {
  fill: var(--areeba-red) !important;
}

/* ============================================
   4. HEADER
   ============================================ */

/* Outer header — single red border at the very bottom */
#hc-header, .hc-header, header,
.Header__header, [class*="Header__header"] {
  background: var(--areeba-white) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  border-bottom: 3px solid var(--areeba-red) !important;
}

/* Inner navbar — NO border (prevents double line on Home) */
.Header__navbar, #navBar {
  background: var(--areeba-white) !important;
  box-shadow: none !important;
  border-bottom: none !important;
  border-top: none !important;
}

/* Kill the ::after pseudo on header (Zoho adds a brand divider) */
header::after, header::before,
.Header__header::after, .Header__header::before,
[class*="Header__header"]::after, [class*="Header__header"]::before,
#headerContainer::after, #headerContainer::before {
  display: none !important;
  background: transparent !important;
  border: none !important;
  height: 0 !important;
}

.Header__name, [class*="Header__name"] {
  font-family: 'Ubuntu', Arial, sans-serif !important;
  font-weight: 600 !important;
  color: var(--areeba-text) !important;
  font-size: 16px !important;
}

.Header__logo img {
  height: 34px !important;
  width: auto !important;
}

/* Menu icon (hamburger) */
[class*="Header__menuicon"] {
  color: var(--areeba-text) !important;
}

/* ============================================
   5. NAVIGATION & TABS
   ============================================ */

.Header__tabsTab a, .Header__menuList a,
.Header__menuTab a, [class*="Header__tabsTab"] a,
[class*="Header__menuList"] a {
  font-family: 'Ubuntu', Arial, sans-serif !important;
  font-weight: 500 !important;
  color: var(--areeba-text) !important;
  letter-spacing: 0.3px;
  padding: 8px 18px !important;
  border-radius: 6px !important;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animated underline — expands from center on hover */
[class*="Header__tabsTab"] a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--areeba-red) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateX(-50%) !important;
  border-radius: 1px !important;
}

.Header__tabsTab a:hover, .Header__menuList a:hover,
[class*="Header__tabsTab"] a:hover {
  color: var(--areeba-red) !important;
  background: var(--areeba-red-light) !important;
}

[class*="Header__tabsTab"] a:hover::after {
  width: 60% !important;
}

/* Active tab — red bg tint + persistent underline */
[class*="Header__tabsTab"][class*="active"] a,
[class*="Header__tabsTab"][class*="Active"] a,
.Header__tabsTab.active a,
.Header__tabsTab.selected a {
  color: var(--areeba-red) !important;
  font-weight: 600 !important;
  background: var(--areeba-red-light) !important;
  border-bottom: none !important;
}

[class*="Header__tabsTab"][class*="active"] a::after,
[class*="Header__tabsTab"][class*="Active"] a::after {
  width: 60% !important;
  background: var(--areeba-red) !important;
}

/* Kill Zoho's default active tab pseudo-element */
[class*="Header__tabsTab"][class*="active"]::after,
[class*="Header__tabsTab"][class*="Active"]::after {
  display: none !important;
}

/* ============================================
   6. USER AVATAR
   ============================================ */

[class*="AvatarText__avatarText"],
[class*="AvatarText"][class*="zt3Brand"],
[data-id="userInitial"] {
  background-color: var(--areeba-red) !important;
  color: var(--areeba-white) !important;
}

[class*="LoginDetail__userAvatar"],
[class*="loginAvatar"] {
  color: var(--areeba-white) !important;
}

/* ============================================
   7. SEARCH
   ============================================ */

/* Hero search section (Home page) */
.Header__searchSection, #headerContent,
[class*="Header__searchSection"] {
  background: var(--areeba-white) !important;
  padding: 48px 24px 40px !important;
  text-align: center;
  border-bottom: none !important;
  border-top: none !important;
}

[class*="Header__searchTitle"] {
  font-family: 'Ubuntu', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  color: var(--areeba-text) !important;
}

[class*="Header__description"] {
  color: var(--areeba-muted) !important;
  font-size: 15px !important;
}

/* Search inputs */
[class*="Input__inputCommon"],
[class*="Input__searchBox"],
[class*="SearchContainer__searchBox"] input,
.Header__searchSection input,
#headerContent input {
  border: 1px solid var(--areeba-border) !important;
  border-radius: 24px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  background: var(--areeba-white) !important;
  transition: border-color var(--areeba-transition), box-shadow var(--areeba-transition);
  outline: none !important;
}

[class*="Input__inputCommon"]:focus,
[class*="Input__searchBox"]:focus,
[class*="SearchContainer__searchBox"] input:focus,
.Header__searchSection input:focus,
#headerContent input:focus {
  border-color: var(--areeba-red) !important;
  box-shadow: 0 0 0 2px rgba(255, 41, 41, 0.1) !important;
  outline: none !important;
}

/* Search button/icon */
[class*="SearchContainer__searchBoxIcon"],
[data-id="searchButton"],
.SearchHome__searchBtn,
[class*="searchBtn"],
[class*="SearchBtn"] {
  color: var(--areeba-red) !important;
  background: transparent !important;
  border: none !important;
}

[class*="SearchContainer__searchBoxIcon"] svg,
[class*="SearchContainer__searchBoxIcon"] svg use,
[data-id="searchButton"] svg,
[data-id="searchButton"] svg use {
  fill: var(--areeba-red) !important;
  color: var(--areeba-red) !important;
}

/* Search dropdown arrow */
[class*="searchDrop"], [class*="SearchDrop"] {
  color: var(--areeba-muted) !important;
}

/* ============================================
   8. BREADCRUMBS
   ============================================ */

/* Breadcrumb + search row container */
#breadCrumbsContainer,
[class*="AppContainer__container"][id="breadCrumbsContainer"] {
  padding: 14px 16px !important;
  align-items: center !important;
}

[class*="AppContainer__breadCrumbs"],
.breadcrumb, .hc-breadcrumb, .zd-breadcrumb {
  background: var(--areeba-white) !important;
  border-bottom: 1px solid var(--areeba-border) !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
}

[class*="AppContainer__breadCrumbs"] a,
.breadcrumb a, .hc-breadcrumb a {
  color: var(--areeba-muted) !important;
  transition: color var(--areeba-transition);
}

[class*="AppContainer__breadCrumbs"] a:hover,
.breadcrumb a:hover, .hc-breadcrumb a:hover {
  color: var(--areeba-red) !important;
}

/* ============================================
   8b. PROFILE DROPDOWN
   Fix: "View Profile" and "Change Password" had red bg from zt3Brand
   ============================================ */

[class*="LoginDetail"] a,
[class*="LoginDetail"] button,
[class*="loginDetail"] a,
[class*="loginDetail"] button,
[class*="ProfileDropdown"] a,
[class*="profileDropdown"] a,
[class*="userMenuOptions"] a,
[class*="UserMenuOptions"] a,
[data-id="viewProfile"],
[data-id="changePassword"],
[data-id="signOut"],
a[href*="viewProfile"],
a[href*="changepassword"],
a[href*="ChangePassword"] {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--areeba-text) !important;
}

[class*="LoginDetail"] a:hover,
[class*="loginDetail"] a:hover,
[class*="ProfileDropdown"] a:hover,
[class*="userMenuOptions"] a:hover,
[data-id="viewProfile"]:hover,
[data-id="changePassword"]:hover {
  color: var(--areeba-red) !important;
  background: var(--areeba-offwhite) !important;
}

/* ============================================
   9. HOME PAGE MODULE CARDS
   ============================================ */

.Home__moduleSec, [class*="Home__moduleSec"],
[class*="moduleSec"] {
  background: var(--areeba-white) !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Module cards — both Home__module and DepartmentList cards */
.Home__module, [class*="Home__module"],
[class*="DepartmentList__deptListItem"] {
  border: 1px solid var(--areeba-border) !important;
  border-radius: var(--areeba-radius) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer;
  background: var(--areeba-white) !important;
  box-shadow: var(--areeba-shadow) !important;
}

/* Red top line — expands from left on hover */
.Home__module::before, [class*="Home__module"]::before,
[class*="DepartmentList__deptListItem"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: var(--areeba-red) !important;
  transform: scaleX(0) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform-origin: left !important;
  z-index: 1 !important;
  display: block !important;
}

.Home__module:hover::before, [class*="Home__module"]:hover::before,
[class*="DepartmentList__deptListItem"]:hover::before {
  transform: scaleX(1) !important;
}

.Home__module:hover, [class*="Home__module"]:hover,
[class*="DepartmentList__deptListItem"]:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--areeba-shadow-hover) !important;
  border-color: rgba(255, 41, 41, 0.25) !important;
}

/* Module icon — scale up on hover */
.Home__module img, [class*="Home__module"] img,
.Home__module svg, [class*="Home__module"] svg,
[class*="DepartmentList__deptListItem"] img,
[class*="DepartmentList__deptListItem"] svg,
[class*="MediaObject__mediaObject"] img,
[class*="MediaObject__mediaObject"] svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.Home__module:hover img, [class*="Home__module"]:hover img,
.Home__module:hover svg, [class*="Home__module"]:hover svg,
[class*="DepartmentList__deptListItem"]:hover img,
[class*="DepartmentList__deptListItem"]:hover svg {
  transform: scale(1.1) !important;
}

/* Module icon SVGs — dark, not orange */
.Home__module svg *, [class*="Home__module"] svg * {
  stroke: var(--areeba-text) !important;
}

.Home__module svg path[fill]:not([fill="none"]),
[class*="Home__module"] svg path[fill]:not([fill="none"]) {
  fill: var(--areeba-text) !important;
}

/* Module titles & text */
.Home__module h3, .Home__module h4, .Home__module h5,
[class*="Home__module"] h3, [class*="Home__module"] h4,
[class*="DepartmentList__departmentContent"] h3,
[class*="DepartmentList__departmentContent"] h4,
[class*="DepartmentList__departmentContent"] h5 {
  font-family: 'Ubuntu', Arial, sans-serif !important;
  color: var(--areeba-text) !important;
  font-weight: 600 !important;
}

.Home__module p, [class*="Home__module"] p,
[class*="DepartmentList__departmentContent"] p,
[class*="DepartmentList__departmentContent"] span {
  color: var(--areeba-muted) !important;
}

/* Card inner content — this is the actual visible card box */
[class*="DepartmentList__listContent"] {
  background: var(--areeba-white) !important;
  border-radius: var(--areeba-radius) !important;
  border: 1px solid var(--areeba-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  padding: 20px !important;
}

/* Higher specificity for the outer card container */
div[class*="DepartmentList__deptListItem"][class*="wordBreakWord"] {
  border: 1px solid var(--areeba-border) !important;
  border-radius: var(--areeba-radius) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  background: var(--areeba-white) !important;
}

/* ============================================
   10. TICKET LIST & FILTERS
   ============================================ */

[class*="TicketList__header"],
[class*="TicketList__filterPanel"] {
  background: var(--areeba-white) !important;
}

/* Sort/filter/export icons */
[class*="TicketSortbyPopup__filterIcon"],
[class*="TicketList__exportIcon"],
[class*="ExportMoreOptions__moreIcon"],
[class*="ExportMoreOptions__exportMoreOptions"] {
  color: var(--areeba-muted) !important;
}

[class*="TicketSortbyPopup__filterIcon"]:hover,
[class*="TicketList__exportIcon"]:hover,
[class*="ExportMoreOptions"]:hover {
  color: var(--areeba-red) !important;
}

/* "Add ticket" button — gray gradient + hover lift animation */
[class*="addTicket"], [class*="add-ticket"],
.addTicket, a[class*="addBtn"],
a[data-id="addticket"] button,
[class*="zt3buttonPrimaryBg"] {
  background: var(--areeba-btn-gradient) !important;
  color: var(--areeba-white) !important;
  border: none !important;
  font-family: 'Ubuntu', Arial, sans-serif !important;
  font-weight: 600;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

[class*="addTicket"]:hover, a[class*="addBtn"]:hover,
a[data-id="addticket"]:hover button,
[class*="zt3buttonPrimaryBg"]:hover {
  background: var(--areeba-btn-gradient-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(75, 85, 99, 0.35) !important;
}

/* Views sidebar */
[class*="TicketList__cv_filterViews"] a,
[class*="filterViews"] a {
  color: var(--areeba-text) !important;
  transition: color var(--areeba-transition);
}

[class*="TicketList__cv_filterViews"] a:hover,
[class*="filterViews"] a:hover {
  color: var(--areeba-red) !important;
}

/* Views heading — single 3px red line to match header */
/* Only on the outer container, everything inside gets none */
/* Views section — remove ALL box styling from every wrapper */
[class*="TicketList__widgetSection"],
[class*="TicketList__cv_viewsCont"],
[class*="TicketList__widgetRight"],
[class*="TicketList__rightPanelDetail"],
[class*="widgetSection"],
[class*="widgetRight"],
[class*="rightPanelDetail"],
[data-id="column2"],
[data-id="column2"] > div,
[data-id="column2"] > div > div,
[data-id="column2"] > div > div > div,
div.Layout__layout2,
[class*="Layout__layout2"] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: none !important;
}

/* Nuclear: EVERY element inside Views container — no shadow/border */
[class*="cv_viewsCont"],
[class*="cv_viewsCont"] *,
[class*="cv_viewsCont"]::before,
[class*="cv_viewsCont"]::after,
[class*="cv_viewsCont"] *::before,
[class*="cv_viewsCont"] *::after {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  text-shadow: none !important;
  border: none !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: none !important;
}

/* The h5 Views heading itself */
h5[class*="ListHeader__header1"],
h5.ListHeader__header1,
[tabindex="0"][class*="ListHeader__header1"] {
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  text-shadow: none !important;
  -webkit-appearance: none !important;
  border-radius: 0 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Re-apply ONLY the bottom red line on the outer header row */
[class*="cv_viewsCont"] > [class*="ListHeader__listHeader1"] {
  border-bottom: 3px solid var(--areeba-red) !important;
  padding-bottom: 8px !important;
}

[class*="ListHeader__headerContent"],
h5[class*="ListHeader__header1"],
[class*="ListHeader__header1"],
[class*="TicketList__cv_filterViews"] h3,
[class*="TicketList__cv_filterViews"] h4,
[class*="TicketList__cv_filterViews"] h5,
[class*="filterViews"] h3,
[class*="filterViews"] h4,
[class*="filterViews"] h5 {
  border-bottom: none !important;
  border: none !important;
}

/* Kill the Zoho brand divider and clBoth inside the Views header */
[class*="ListHeader__clBoth"] {
  display: none !important;
}

[class*="ListHeader__listHeader1"]::after,
[class*="ListHeader__listHeader1"]::before,
[class*="ListHeader__headerContent"]::after,
[class*="ListHeader__headerContent"]::before {
  display: none !important;
  background: transparent !important;
  height: 0 !important;
}

/* Kill any brand-colored dividers in the sidebar */
[class*="TicketList__cv_filterViews"] [class*="zt3Brand"],
[class*="TicketList__cv_filterViews"] hr,
[class*="filterViews"] [class*="zt3Brand"],
[class*="filterViews"] hr {
  display: none !important;
}

/* Filter dropdowns */
.filterDrop, .filterDrop a, .filterDrop span,
[class*="filter"] a, [class*="Filter"] a,
[class*="filter"] span, [class*="Filter"] span {
  color: var(--areeba-text) !important;
}

/* ============================================
   11. EMPTY STATES
   ============================================ */

/* "No tickets found" title — muted gray, NOT orange */
[class*="NoContent__title"],
[data-id="no_ticket_title"],
h3[class*="NoContent__title"] {
  color: var(--areeba-muted) !important;
  font-family: 'Ubuntu', Arial, sans-serif !important;
  font-weight: 600 !important;
}

/* The "tickets" span inside the title */
[class*="NoContent__title"] span,
[class*="NoContent__title"] .modulesname,
span.modulesname {
  color: var(--areeba-muted) !important;
}

/* Description text */
[class*="NoContent__contentDescription"],
[data-id="no_ticket_desc"] {
  color: var(--areeba-text-secondary) !important;
}

/* Remove any orange tinted background in empty state */
[class*="NoContent__noContent"],
[data-id="no_ticket"] {
  text-align: center;
}

/* ============================================
   12. BUTTONS
   ============================================ */

/* Primary — gray gradient */
.btn-primary, .zd-btn-primary,
button[type="submit"], .submit-btn,
input[type="submit"], a.btn-primary {
  background: var(--areeba-btn-gradient) !important;
  border: none !important;
  border-radius: var(--areeba-radius) !important;
  color: var(--areeba-white) !important;
  font-family: 'Ubuntu', Arial, sans-serif !important;
  font-weight: 600;
  padding: 10px 24px !important;
  cursor: pointer;
  transition: all var(--areeba-transition);
}

.btn-primary:hover, .zd-btn-primary:hover,
button[type="submit"]:hover, .submit-btn:hover,
input[type="submit"]:hover, a.btn-primary:hover {
  background: var(--areeba-btn-gradient-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.btn-primary:active, button[type="submit"]:active {
  transform: translateY(0);
}

/* Secondary */
.btn-secondary, .zd-btn-secondary, .cancel-btn {
  background: var(--areeba-white) !important;
  border: 1px solid var(--areeba-border) !important;
  border-radius: var(--areeba-radius) !important;
  color: var(--areeba-text) !important;
  font-family: 'Ubuntu', Arial, sans-serif !important;
  font-weight: 500;
  transition: border-color var(--areeba-transition), background var(--areeba-transition);
}

.btn-secondary:hover, .zd-btn-secondary:hover, .cancel-btn:hover {
  border-color: var(--areeba-text) !important;
  background: var(--areeba-offwhite) !important;
}

/* ============================================
   13. FORMS
   ============================================ */

input[type="text"], input[type="email"],
input[type="tel"], input[type="password"],
input[type="url"], select, textarea {
  border: 1px solid var(--areeba-border) !important;
  border-radius: var(--areeba-radius) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  background: var(--areeba-white);
  transition: border-color var(--areeba-transition), box-shadow var(--areeba-transition);
}

input[type="text"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, input[type="password"]:focus,
input[type="url"]:focus, select:focus, textarea:focus {
  border-color: var(--areeba-red) !important;
  box-shadow: 0 0 0 2px rgba(255, 41, 41, 0.1) !important;
  outline: none !important;
}

label, .field-label {
  font-family: 'Ubuntu', Arial, sans-serif !important;
  font-weight: 500;
  color: var(--areeba-text);
  font-size: 13px;
}

/* ============================================
   14. CARDS & CONTAINERS
   ============================================ */

.card, .article-card, .ticket-card, .module-card,
.zd-card, .hc-card, .recent-topic, .popular-article {
  border-radius: var(--areeba-radius) !important;
  border: 1px solid var(--areeba-border) !important;
  background: var(--areeba-white);
  box-shadow: var(--areeba-shadow);
  transition: transform var(--areeba-transition), box-shadow var(--areeba-transition);
  overflow: hidden;
}

.card:hover, .article-card:hover, .ticket-card:hover,
.module-card:hover, .zd-card:hover, .hc-card:hover,
.recent-topic:hover, .popular-article:hover {
  transform: translateY(-2px);
  box-shadow: var(--areeba-shadow-hover);
}

.card h3, .card h4, .card a,
.module-card h3, .module-card h4, .module-card a {
  color: var(--areeba-text) !important;
}

.card a:hover, .module-card a:hover {
  color: var(--areeba-red) !important;
}

/* ============================================
   15. TABLES
   ============================================ */

table, .ticket-list table, .zd-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--areeba-radius) !important;
  overflow: hidden;
}

table thead th, .zd-table thead th {
  background: var(--areeba-dark) !important;
  color: var(--areeba-white) !important;
  font-family: 'Ubuntu', Arial, sans-serif !important;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px !important;
  border: none !important;
}

table tbody tr, .zd-table tbody tr {
  transition: background var(--areeba-transition);
}

table tbody tr:hover, .zd-table tbody tr:hover {
  background: var(--areeba-offwhite) !important;
}

table tbody tr:nth-child(even) {
  background: var(--areeba-offwhite);
}

table tbody td, .zd-table tbody td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--areeba-border) !important;
  font-size: 14px;
}

/* ============================================
   16. TICKET DETAIL
   ============================================ */

.ticket-detail .ticket-subject, .ticket-view h1 {
  font-family: 'Ubuntu', Arial, sans-serif !important;
  font-weight: 700;
  font-size: 22px;
  color: var(--areeba-text);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--areeba-border);
}

.comment, .thread-entry, .ticket-comment {
  border-left: 3px solid var(--areeba-gray) !important;
  padding-left: 16px;
  margin-bottom: 16px;
  transition: border-color var(--areeba-transition);
}

.comment:hover, .thread-entry:hover, .ticket-comment:hover {
  border-left-color: var(--areeba-red) !important;
}

/* ============================================
   17. KNOWLEDGE BASE
   ============================================ */

.kb-category, .category-card {
  border-radius: var(--areeba-radius) !important;
  border: 1px solid var(--areeba-border);
  padding: 20px !important;
  transition: all var(--areeba-transition);
}

.kb-category:hover, .category-card:hover {
  box-shadow: var(--areeba-shadow-hover);
  transform: translateY(-2px);
}

.kb-category h3, .category-card h3 {
  font-family: 'Ubuntu', Arial, sans-serif !important;
  color: var(--areeba-text);
}

/* ============================================
   18. CTA SECTION ("Still can't find an answer?")
   ============================================ */

[class*="submitTicket"], [class*="SubmitTicket"],
[class*="noAnswer"], [class*="submitSec"],
[class*="ctaSec"], [class*="ctaSection"],
[class*="CtaSec"], [class*="cantFind"],
[class*="findAnswer"], [class*="bottomSec"],
[class*="bottomSection"], [class*="footerCta"],
[class*="FooterCta"], [class*="helpSec"],
[class*="contactSec"], [class*="ContactSec"],
[class*="askQuestion"], [class*="AskQuestion"],
[class*="raiseTicket"], [class*="RaiseTicket"],
.Home__submitTicketSec, .Home__submitSec,
.Home__ctaSec, .Home__bottomSec {
  background: var(--areeba-white) !important;
  background-color: var(--areeba-white) !important;
  border: none !important;
  border-top: 3px solid #6B7280 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Catch inline gray backgrounds */
div[style*="background-color: rgb(240"],
div[style*="background-color: rgb(245"],
div[style*="background-color: rgb(238"],
div[style*="background: rgb(240"],
div[style*="background: rgb(245"],
div[style*="background: rgb(238"],
div[style*="#f0f0f0"], div[style*="#F0F0F0"],
div[style*="#f5f5f5"], div[style*="#F5F5F5"],
div[style*="#eeeeee"], div[style*="#EEEEEE"],
div[style*="#e8e8e8"], div[style*="#E8E8E8"],
section[style*="#f0f0f0"], section[style*="#F0F0F0"],
section[style*="#f5f5f5"], section[style*="#F5F5F5"] {
  background: var(--areeba-white) !important;
  background-color: var(--areeba-white) !important;
}

/* CTA button — gray gradient */
[class*="submitTicket"] a, [class*="SubmitTicket"] a,
[class*="noAnswer"] a, [class*="submitSec"] a,
[class*="ctaSec"] a, [class*="bottomSec"] a,
[class*="footerCta"] a, [class*="contactSec"] a,
.Home__submitTicketSec a, .Home__submitSec a {
  background: var(--areeba-btn-gradient) !important;
  color: var(--areeba-white) !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 12px 28px !important;
  font-family: 'Ubuntu', Arial, sans-serif !important;
  font-weight: 600 !important;
  transition: all var(--areeba-transition) !important;
}

[class*="submitTicket"] a:hover, [class*="ctaSec"] a:hover,
[class*="bottomSec"] a:hover, .Home__submitTicketSec a:hover {
  background: var(--areeba-btn-gradient-hover) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* CTA heading text */
[class*="submitTicket"] h3, [class*="submitTicket"] h4,
[class*="submitTicket"] p, [class*="ctaSec"] h3,
[class*="ctaSec"] h4, [class*="ctaSec"] p,
[class*="bottomSec"] h3, [class*="bottomSec"] p {
  color: var(--areeba-text) !important;
}

/* ============================================
   19. FOOTER
   ============================================ */

#hc-footer, .hc-footer, footer,
.Footer__footerCopyrigt, [class*="Footer__footer"] {
  background: var(--areeba-white) !important;
  border: none !important;
  border-top: none !important;
  padding: 16px 24px !important;
}

/* Footer CTA wrappers — strip background so only the button has gradient */
div[class*="Footer__footerBtn"],
a[data-id="footer_newticket"],
[class*="Footer__footerBg"],
[class*="Footer__footerContent"] a,
[class*="Footer__footerInfo"] a {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Footer CTA "Submit a ticket" button — gray gradient + hover lift animation */
a[data-id="footer_newticket"] button,
button[class*="Button__footerBtn"],
[class*="Footer__footerBg"] button,
[class*="Footer__footerContent"] button,
[class*="Footer__footerInfo"] button {
  background: var(--areeba-btn-gradient) !important;
  color: var(--areeba-white) !important;
  border: none !important;
  border-radius: 24px !important;
  font-family: 'Ubuntu', Arial, sans-serif !important;
  font-weight: 600 !important;
  padding: 10px 24px !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

a[data-id="footer_newticket"]:hover button,
button[class*="Button__footerBtn"]:hover,
[class*="Footer__footerBg"] button:hover,
[class*="Footer__footerContent"] button:hover,
[class*="Footer__footerInfo"] button:hover {
  background: var(--areeba-btn-gradient-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(75, 85, 99, 0.35) !important;
}

.Footer__container2, [class*="Footer__container"] {
  text-align: center !important;
}

.Footer__footerCopyrigt span,
.Footer__footerCopyrigt a,
.Footer__footerLink, [class*="Footer__footerLink"] {
  color: var(--areeba-muted) !important;
  font-size: 12px !important;
}

.Footer__footerLink:hover, [class*="Footer__footerLink"]:hover {
  color: var(--areeba-red) !important;
}

/* Hide "Powered by" text */
#areeba-footer div[style*="font-size: 11px"],
[class*="Footer__footer"] [style*="font-size: 11px"][style*="color: rgb(204, 204, 204)"] {
  display: none !important;
}

/* ---- Custom footer (areeba-footer) ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

#areeba-footer {
  animation: fadeInUp 0.6s ease both;
}

#areeba-footer a:hover {
  color: var(--areeba-red) !important;
  padding-left: 4px !important;
}

#areeba-footer img {
  height: 32px !important;
  width: auto !important;
}

#areeba-footer h4 {
  font-family: 'Ubuntu', Arial, sans-serif !important;
}

#areeba-footer p,
#areeba-footer span,
#areeba-footer a {
  font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

@media (max-width: 768px) {
  #areeba-footer > div:nth-child(2) > div:first-child {
    flex-direction: column !important;
    text-align: center !important;
  }
  #areeba-footer h4 {
    display: block !important;
    text-align: center !important;
  }
  #areeba-footer ul {
    text-align: center !important;
  }
  #areeba-footer > div:nth-child(2) > div:last-child {
    flex-direction: column !important;
    text-align: center !important;
  }
}

/* ============================================
   20. SCROLL TO TOP
   ============================================ */

[class*="scrollTop"], [class*="ScrollTop"],
.scrollToTop, #scrollTopBtn,
[class*="backToTop"],
[class*="BackToTop"] {
  background: var(--areeba-btn-gradient) !important;
  color: var(--areeba-white) !important;
  border: none !important;
  border-radius: 50% !important;
}

[class*="scrollTop"]:hover, .scrollToTop:hover,
#scrollTopBtn:hover,
[class*="backToTop"]:hover,
[class*="BackToTop"]:hover {
  background: var(--areeba-btn-gradient-hover) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================
   21. TABS
   ============================================ */

.tab-container, .hc-tabs, .zd-tabs {
  font-family: 'Ubuntu', Arial, sans-serif !important;
}

.tab-container .tab-item.active,
.hc-tabs .active, .zd-tabs .active {
  border-bottom: 2px solid var(--areeba-red) !important;
  font-weight: 600;
}

/* ============================================
   22. PAGINATION
   ============================================ */

.pagination a, .pager a {
  border-radius: var(--areeba-radius) !important;
  padding: 8px 14px !important;
  border: 1px solid var(--areeba-border);
  color: var(--areeba-text) !important;
  transition: all var(--areeba-transition);
}

.pagination a:hover, .pager a:hover {
  background: var(--areeba-dark) !important;
  color: var(--areeba-white) !important;
  border-color: var(--areeba-dark) !important;
}

.pagination .active a, .pager .active a {
  background: var(--areeba-red) !important;
  color: var(--areeba-white) !important;
  border-color: var(--areeba-red) !important;
}

/* ============================================
   23. DROPDOWNS & POPUPS
   ============================================ */

.dropdown-menu,
[class*="Popup__content"] {
  border-radius: var(--areeba-radius) !important;
  box-shadow: var(--areeba-shadow-hover);
  border: 1px solid var(--areeba-border);
}

/* ============================================
   24. MISC: Dropdown text, attach links
   ============================================ */

.dIB a, .module-name a, .layout-name,
.cBtmLt a, .zd-selectmenu a, .zd-selectmenu li,
.zd-selectmenu .selected, .deptLayoutList a,
.deptLayoutList li a, .zd-dropdown a,
.zd-dropdown-trigger, .attach-link, .attach-link a,
[class*="attach"] a, .mB5 a, .pR a {
  color: var(--areeba-text) !important;
}

.dIB a:hover, .module-name a:hover,
.deptLayoutList a:hover, .zd-dropdown a:hover,
.attach-link:hover, .attach-link a:hover,
[class*="attach"] a:hover {
  color: var(--areeba-red) !important;
}

/* ============================================
   25. SCROLLBAR & SELECTION
   ============================================ */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--areeba-offwhite); }
::-webkit-scrollbar-thumb { background: #CCCCCC; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #AAAAAA; }

::selection {
  background: rgba(255, 41, 41, 0.15);
  color: var(--areeba-text);
}

/* ============================================
   26. RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .Header__searchSection, #headerContent {
    padding: 32px 16px !important;
  }

  [class*="Header__searchTitle"] {
    font-size: 22px !important;
  }

  .btn-primary, .zd-btn-primary, button[type="submit"] {
    background: var(--areeba-btn-gradient) !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    width: 100%;
  }

  table thead th, .zd-table thead th {
    font-size: 11px;
    padding: 10px 8px !important;
  }
}

/* ============================================
   27. GLOBAL FONT HARMONY
   Ensure Ubuntu is used everywhere
   ============================================ */

*, *::before, *::after {
  font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Zoho theme font overrides */
[class*="Header__"], [class*="Footer__"],
[class*="TicketList__"], [class*="NoContent__"],
[class*="Home__"], [class*="AppContainer__"],
[class*="SearchContainer__"], [class*="Input__"],
[class*="LoginDetail__"], [class*="Button__"],
[class*="Popup__"], [class*="Layout__"],
[class*="ExportMoreOptions__"], [class*="TicketSortbyPopup__"] {
  font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* ============================================
   28. NUCLEAR: Kill ALL remaining orange
   Last-resort overrides for any missed elements
   ============================================ */

/* Any remaining zt3Brand that slipped through — transparent bg */
[class*="zt3Brand"]:not([class*="AvatarText"]):not([class*="avatarText"]):not([class*="backToTop"]):not([class*="BackToTop"]) {
  background-color: transparent !important;
}

/* Any button with orange inline styles */
button[style*="e46317"], button[style*="E46317"],
a[style*="e46317"], a[style*="E46317"] {
  background: var(--areeba-btn-gradient) !important;
  background-color: #4B5563 !important;
  color: var(--areeba-white) !important;
  border: none !important;
}

button[style*="e46317"]:hover, button[style*="E46317"]:hover,
a[style*="e46317"]:hover, a[style*="E46317"]:hover {
  background: var(--areeba-btn-gradient-hover) !important;
  background-color: var(--areeba-charcoal) !important;
}

/* ============================================
   29. KILL ALL RED BORDERS / DIVIDERS
   Only the header gets a red bottom border.
   Everything else: no red borders or lines.
   ============================================ */

/* Search section dividers */
[class*="Header__searchSection"]::after,
[class*="Header__searchSection"]::before,
#headerContent::after, #headerContent::before {
  display: none !important;
  background: transparent !important;
}

/* Module section dividers on Home page */
[class*="Home__moduleSec"]::before,
[class*="Home__moduleSec"]::after,
[class*="moduleSec"]::before,
[class*="moduleSec"]::after {
  display: none !important;
  background: transparent !important;
}

/* Any inline border-color orange */
[style*="border-color: rgb(228, 99, 23)"],
[style*="border-color:#e46317"],
[style*="border-color: #e46317"],
[style*="border-color:#E46317"],
[style*="border-color: #E46317"],
[style*="border-top-color: rgb(228"],
[style*="border-bottom-color: rgb(228"],
[style*="border-color:#FF2929"],
[style*="border-color: #FF2929"],
[style*="border-color: rgb(255, 41, 41)"] {
  border-color: transparent !important;
}

/* Any brand-colored hr or divider — make it subtle gray */
hr[class*="zt3Brand"], hr[class*="brand"],
div[class*="zt3Brand"]:empty,
span[class*="zt3Brand"]:empty {
  background-color: var(--areeba-border) !important;
  background: var(--areeba-border) !important;
  border: none !important;
}

/* Breadcrumb section — no red borders */
[class*="AppContainer__breadCrumbs"]::after,
[class*="AppContainer__breadCrumbs"]::before {
  display: none !important;
}

/* Header clBoth separator */
[class*="Header__clBoth"],
[class*="clBoth"] {
  border: none !important;
  background: transparent !important;
}