/* =========================
   NetBoom Helpcenter – Clean Enterprise (Zoho Desk Portal)
   CI: Primary #47a1bf | Hover #2f7e99
   ========================= */

/* 0) CI Variablen */
:root{
  --ci-primary: #47a1bf;
  --ci-primary-hover: #2f7e99;

  --text: #111111;
  --text-muted: #333333;
  --border: #e1e1e1;

  --bg: #ffffff;
  --bg-alt: #f2f6f8;

  --focus: #47a1bf;
}

/* 1) Basis: Typografie & Layout */
body{
  color: var(--text);
  line-height: 1.6;
  background: var(--bg);
}

.Portal,
.Content__container,
.ArticlePage__content{
  max-width: 1100px;
}

/* 2) Header: CI-Balken oben */
.Header__navbar{
  position: relative;
  padding-top: 24px;
}

.Header__navbar::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 24px;
  background: var(--ci-primary);
  z-index: 0;
}

.Header__navbar > *{
  position: relative;
  z-index: 1;
}

/* 3) Links (global) */
a,
a:visited{
  color: var(--ci-primary) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover{
  color: var(--ci-primary-hover) !important;
  text-decoration: underline;
}

/* 4) Icons/SVG: Orange-Akzente neutralisieren */
svg,
.Icon__icon{
  color: var(--ci-primary) !important;
  fill: var(--ci-primary) !important;
}

/* 5) Buttons (clean & CI) */
button,
.Button__primary,
.Button--primary,
input[type="submit"]{
  background: var(--ci-primary) !important;
  border-color: var(--ci-primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  border-radius: 10px;
}

button:hover,
.Button__primary:hover,
.Button--primary:hover,
input[type="submit"]:hover{
  background: var(--ci-primary-hover) !important;
  border-color: var(--ci-primary-hover) !important;
}

/* 6) Formulare (Enterprise-Optik + Touch-Ziele) */
input,
select,
textarea{
  min-height: 44px;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
}

label{
  font-weight: 600;
  color: var(--text);
}

/* 7) Fokus sichtbar (WCAG/BFSG) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 3px solid var(--focus) !important;
  outline-offset: 3px;
}

/* 8) Subtile Trennlinien */
hr,
.Divider{
  border-color: var(--border) !important;
}

/* 9) Ticket-Form: „Datei anhängen“ + Akzentfarben */
.Attach,
.Attachment,
[class*="attach"],
[class*="Attachment"]{
  color: var(--ci-primary) !important;
}

.Attach svg,
.Attachment svg,
[class*="attach"] svg,
[class*="Attachment"] svg{
  color: var(--ci-primary) !important;
  fill: var(--ci-primary) !important;
}

/* Pflichtstern (*) dezenter */
.Required,
[class*="required"]{
  color: var(--ci-primary-hover) !important;
}

/* 10) Header-Suche komplett deaktivieren (ihr wollt sie NICHT) */
#searchContainer2,
.Header__globalSearchAlt,
.SearchContainer__globalSearch,
.Input__headerSearch,
.SearchContainer__searchIcon,
.Header__searchSection,
#searchField,
form[role="search"],
input[type="search"]{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* 11) User Menü / Profil-Dropdown (Zoho Brand-Token Orange -> CI) */
.commonStyle__zt3Brand{
  color: var(--ci-primary) !important;
  border-color: var(--ci-primary) !important;
}

/* Avatar Rahmen/Outline (falls orange) */
.enduser_avatar,
.AvatarText__avatarText{
  border-color: var(--ci-primary) !important;
}

/* Brand-Background (z.B. Profil-Buttonfläche) -> CI */
.commonStyle__bgBrand,
.commonStyle__zt3BrandBg,
[class*="bgBrand"],
[class*="BrandBg"],
[class*="brandBg"]{
  background: var(--ci-primary) !important;
  color: #ffffff !important;
}

/* Dropdown Links */
.Header__menuList a,
.Header__menuList a:visited{
  color: var(--ci-primary) !important;

}
.Header__menuList a:hover,
.Header__menuList a:focus{
  color: var(--ci-primary-hover) !important;
}

/* "Ansicht Profil" (liegt bei euch auf CI-Fläche -> Text weiß) */
a.LoginDetail__profileLink{
  color: #ffffff !important;
  font-weight: 600;
}
a.LoginDetail__profileLink:hover,
a.LoginDetail__profileLink:focus{
  color: #ffffff !important;
  text-decoration: underline;
}

/* 12) Profil-Seite: aktiver Tab ("Profil verwalten") -> CI */
.ProfileTabs__activeTab{
  background-color: var(--ci-primary) !important;
  color: #ffffff !important;
}
.ProfileTabs__activeTab .ProfileTabs__tabName{
  color: #ffffff !important;
  font-weight: 600;
}
.ProfileTabs__activeTab svg,
.ProfileTabs__activeTab .Icon__icon{
  fill: #ffffff !important;
  color: #ffffff !important;
}
.ProfileTabs__tabList:hover{
  background-color: var(--ci-primary-hover) !important;
}

/* 13) Deaktivierungen (nicht löschen): Scroll-to-top / Floating Buttons */
.ScrollTop,
.ScrollTop__button,
.BackToTop,
.ProfileScrollTop,
button[aria-label*="top"],
button[aria-label*="oben"],
button[aria-label*="nach oben"],
a[href="#top"],
a[href*="#top"],
[class*="scrollTop"],
[class*="ScrollTop"],
[class*="BackToTop"],
[class*="floating"],
[class*="Floating"]{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}



/* Empty-State Titel ("Keine Tickets gefunden") -> CI statt Orange */
.NoContent__title{
  color: var(--ci-primary) !important;
}


/* ==================================================
   NETBOOM LOGO – stabiles Logo über <img> (empfohlen)
   ================================================== */

/* Zoho-Logo-Bild sichtbar lassen und auf NetBoom-Logo umbiegen */
.Header__logo img[data-id="portal_logo"]{
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;

  content: url("https://www.netboom.de/wp-content/uploads/2025/12/logo-netboom-xperience-it-header.png");
  height: 80px !important;      /* hier die Höhe einstellen */
  width: auto !important;       /* keine Verzerrung */
  max-width: 360px !important;  /* verhindert zu breite Darstellung */
  object-fit: contain !important;
}

/* Link selbst ohne Hintergrundbild */
.Header__logo a.Header__logoImg{
  background: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}

/* Portal-Name neben dem Logo ausblenden (optional) */
.Header__name{
  display: none !important;
}

/* Logo im Header etwas nach unten setzen */
.Header__logo{
  align-self: flex-start;
  padding-top: 10px !important;
}



/* 3) Portal-Name neben dem Logo ausblenden (optional, empfohlen) */
.Header__name{
  display: none !important;
}


/* Logo im Header vertikal etwas nach unten setzen */
.Header__logo{
  align-self: flex-start;
  padding-top: 10px;   /* 8–12px ist ideal */
}



/* Profil-Dropdown: Button "Ansicht Profil" – Text IMMER weiß */
.LoginDetail__profileBtn a.LoginDetail__profileLink{
  color: #ffffff !important;
}

/* Hover / Fokus ebenfalls weiß halten */
.LoginDetail__profileBtn a.LoginDetail__profileLink:hover,
.LoginDetail__profileBtn a.LoginDetail__profileLink:focus{
  color: #ffffff !important;
  text-decoration: underline;
}


label.FormElement__mandatoryStar::after,
label.FormElement__mandatoryStar::before {
  color: var(--ci-primary) !important;
}

label.FormElement__mandatoryStar .FormElement__required,
label.FormElement__mandatoryStar .FormElement__required::before,
label.FormElement__mandatoryStar .FormElement__required::after {
  color: var(--ci-primary) !important;
}



/* Datei anhängen: Kreis/Badge entfernen (Wrapper), Text bleibt */
[aria-label*="Datei anhängen"],
[title*="Datei anhängen"]{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}





/* Datei anhängen: orangenen Kreis-Rahmen (BrandBorder) -> CI */
.FileUpload__attachPin.commonStyle__zt3BrandBorder{
  border-color: var(--ci-primary) !important;
}

/* Icon im Kreis ebenfalls CI (falls nötig) */
.FileUpload__attachPin svg{
  color: var(--ci-primary) !important;
  fill: var(--ci-primary) !important;
}



/* Footer CTA: kompletter Hintergrund reinweiß (inkl. Außenbereich) */
.Footer__footerBg{
  background: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
}

/* Innere Box bleibt clean */
.Footer__footerInfo{
  background: #ffffff !important;
  box-shadow: none !important;
  border: none !important; /* optional: leichte Kontur */
}


/* Header: Hintergrund reinweiß + kein Schleier/Schatten */
.Header__navbar,
.Header__container{
  background: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
}

/* Falls Zoho ein Overlay/Verlauf über ::before/::after legt */
.Header__navbar::after{
  content: none !important;
  display: none !important;
}


/* Header stabil halten, auch wenn Menülinks ausgeblendet sind */
#navBarContainer.Header__container{
  min-height: 110px;              /* ggf. 100–130px testen */
  display: flex;
  align-items: center;
}

/* Logo immer mit “Luft nach oben” */
.Header__logo{
  padding-top: 10px;              /* wirkt zuverlässig in Flex */
  align-self: flex-start;
}

/* Mobile: etwas kompakter */
@media (max-width: 768px){
  #navBarContainer.Header__container{
    min-height: 96px;
  }
  .Header__logo{
    padding-top: 8px;
  }
}


/* Großes Modul-Icon (Tickets): Orange Stroke -> CI */
.Icon__Xlarge svg,
.Icon__Xlarge use{
  stroke: var(--ci-primary) !important;
  fill: var(--ci-primary) !important;
}


/* Avatar (User-Initialen): weißer Hintergrund, CI-Rahmen & Text */
.enduser_avatar,
.AvatarText__avatarText{
  background: #ffffff !important;
  color: var(--ci-primary) !important;
  border: 2px solid var(--ci-primary) !important;
}


/* Pfeil-Icon "Nächste" (downArrow): CI-Farbe erzwingen */
svg[alt="Nächste"]{
  background: transparent !important;
  box-shadow: none !important;
}

svg[alt="Nächste"] use,
svg[alt="Nächste"]{
  color: var(--ci-primary) !important;
  fill: var(--ci-primary) !important;
  stroke: var(--ci-primary) !important;
}
/* Parent-Container des Pfeils neutralisieren (wenn Kreis/Box bleibt) */
svg[alt="Nächste"]{
  outline: none !important;
}
svg[alt="Nächste"]{
  border-radius: 0 !important;
}

/* Häufiger Wrapper bei Zoho: Button/Span um das SVG */
button:has(svg[alt="Nächste"]),
span:has(svg[alt="Nächste"]),
a:has(svg[alt="Nächste"]){
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}







/* Pagination / Vor-Zurück-Pfeile – Button-Fläche definieren */
button:has(svg[alt="Vorherige"]),
button:has(svg[alt="Nächste"]),
a:has(svg[alt="Vorherige"]),
a:has(svg[alt="Nächste"]),
span:has(svg[alt="Vorherige"]),
span:has(svg[alt="Nächste"]){
  background: #ffffff !important;
  border: 2px solid var(--ci-primary) !important;
  border-radius: 50% !important;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Pfeil selbst */
svg[alt="Vorherige"],
svg[alt="Nächste"]{
  fill: var(--ci-primary) !important;
  color: var(--ci-primary) !important;
}

/* Hover */
button:has(svg[alt="Vorherige"]):hover,
button:has(svg[alt="Nächste"]):hover,
a:has(svg[alt="Vorherige"]):hover,
a:has(svg[alt="Nächste"]):hover{
  background: var(--ci-primary) !important;
}

/* Hover – Pfeil weiß */
button:has(svg[alt="Vorherige"]):hover svg,
button:has(svg[alt="Nächste"]):hover svg{
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Fokus sichtbar (WCAG) */
button:has(svg[alt="Vorherige"]):focus-visible,
button:has(svg[alt="Nächste"]):focus-visible{
  outline: 3px solid var(--ci-primary-hover) !important;
  outline-offset: 2px;
}





/* ==========================
   Pagination: Vor/Zurück clean (keine Kachel)
   ========================== */

/* 1) Kachel/Wrapper neutralisieren */
.Pagination__arrowBox,
.Pagination__arrowBox a,
.Pagination__pageNavLft,
.Pagination__pageNavRgt,
.Pagination__pgNvLtHv,
.Pagination__pgNvRtHv{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 2) Klickfläche als runder Button */
.Pagination__arrowBox a.Pagination__pageNavLft,
.Pagination__arrowBox a.Pagination__pageNavRgt{
  width: 36px;
  height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  background: #ffffff !important;
  border: 2px solid var(--ci-primary) !important;
  border-radius: 999px !important;

  padding: 0 !important;
}

/* 3) Pfeil in CI */
.Pagination__arrowBox svg{
  fill: var(--ci-primary) !important;
  color: var(--ci-primary) !important;
}

/* 4) Hover: Button CI, Pfeil weiß */
.Pagination__arrowBox a.Pagination__pageNavLft:hover,
.Pagination__arrowBox a.Pagination__pageNavRgt:hover{
  background: var(--ci-primary) !important;
  border-color: var(--ci-primary) !important;
}

.Pagination__arrowBox a.Pagination__pageNavLft:hover svg,
.Pagination__arrowBox a.Pagination__pageNavRgt:hover svg{
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* 5) Fokus sichtbar (WCAG) */
.Pagination__arrowBox a.Pagination__pageNavLft:focus-visible,
.Pagination__arrowBox a.Pagination__pageNavRgt:focus-visible{
  outline: 3px solid var(--ci-primary-hover) !important;
  outline-offset: 2px;
}

/* ==================================================
   CI Buttons – einheitlich wie "Ticket erstellen"
   ================================================== */

/* Alle echten Buttons */
button,
input[type="button"],
input[type="submit"],
.Button__btnFont,
.Button__primary,
.Button--primary,
.Button__footerBtn{
  border-radius: 999px !important;   /* pill / vollrund */
  padding: 10px 22px !important;     /* harmonisch wie Ticket erstellen */
  min-height: 44px;                  /* WCAG Touch-Ziel */
}

/* Links, die als Button fungieren */
a > button,
a.Button__btnFont,
a.Button__primary{
  border-radius: 999px !important;
}

/* Sekundäre Buttons (z. B. Verwerfen) */
button.Button__secondary,
.Button__secondary,
.Button--secondary{
  border-radius: 999px !important;
}

/* Sicherheit: Icons / Mini-Buttons NICHT aufblasen */
.Icon__icon,
button.Icon__icon,
button svg{
  border-radius: 0 !important;
}