/*
 * PROWERB-Theme für Zammad (helpdesk.prowerb.digital)
 * Wird via Caddy (replace-response) in jede HTML-Seite injiziert — kein Eingriff
 * in den Zammad-Core, überlebt Zammad-Updates. Quelle: /etc/caddy/prowerb/
 * CI: Rot #EE171D, Dunkelrot #C60E14, Ink #211F1E, Krona One + Montserrat.
 */

/* ---------- Fonts (selbst gehostet, DSGVO-konform) ---------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/prowerb/fonts/montserrat-var.woff2) format('woff2');
}
@font-face {
  font-family: 'Krona One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/prowerb/fonts/krona-one-400.woff2) format('woff2');
}

body {
  font-family: 'Montserrat', 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------- Farb-Variablen: Zammad-Blau -> PROWERB-Rot ---------- */
:root {
  --prowerb-red: #EE171D;
  --prowerb-red-dark: #C60E14;
  --prowerb-ink: #211F1E;

  --button-primary-background: var(--prowerb-red);
  --button-primary-background-active: var(--prowerb-red-dark);
  --text-link: var(--prowerb-red-dark);
  --text-nav: var(--prowerb-red);
  --highlight: var(--prowerb-red);
  --border-highlight: var(--prowerb-red);
  --shadow-highlight: hsl(359, 70%, 90%);
  --text-muted-highlight: hsl(359, 85%, 92%);
  --background-highlight: hsl(359, 100%, 96%);
  --backdrop-clue-start: rgba(238, 23, 29, 0.1);
  --backdrop-clue-end: rgba(238, 23, 29, 0.9);
  --background-article-customer: hsl(359, 45%, 96%);
  --background-article-customer-meta: hsl(359, 40%, 97%);
  --border-article-customer: hsl(359, 40%, 92%);
  --border-article-customer-selected: hsl(359, 45%, 86%);
  --header-primary: var(--prowerb-ink);
}

[data-theme=dark] {
  --text-link: hsl(359, 88%, 66%);
  --highlight: hsl(359, 84%, 60%);
  --border-highlight: hsl(359, 70%, 55%);
  --shadow-highlight: hsl(359, 45%, 38%);
  --background-highlight: hsl(359, 32%, 27%);
  --backdrop-clue-start: rgba(238, 23, 29, 0.12);
  --backdrop-clue-end: rgba(238, 23, 29, 0.85);
  --background-article-customer: hsl(359, 10%, 30%);
  --background-article-customer-meta: hsl(359, 8%, 28%);
  --border-article-customer: hsl(359, 10%, 34%);
  --border-article-customer-selected: hsl(359, 14%, 38%);
  --header-primary: #fff;
}

/* Native Form-Elemente (Checkboxen/Radios) */
input[type=checkbox],
input[type=radio] {
  accent-color: var(--prowerb-red);
}

::selection {
  background: rgba(238, 23, 29, 0.18);
}

/* ---------- Splash-Screen: Zammad-Logo -> PROWERB-Lockup ---------- */
.splash .icon-logo {
  display: none;
}
.splash::before {
  content: '';
  display: block;
  width: 240px;
  height: 52px;
  margin: 0 auto 14px;
  background: url(/prowerb/logo-horizontal.svg) no-repeat center / contain;
}
[data-theme=dark] .splash::before {
  background-image: url(/prowerb/logo-horizontal-white.svg);
}
.splash-title {
  font-family: 'Krona One', 'Montserrat', sans-serif;
  letter-spacing: 0.02em;
}

/* Produkt-Logo (Login etc.): im Dark-Mode weiße Variante */
[data-theme=dark] img[src*="system_assets/product_logo"] {
  content: url(/prowerb/logo-horizontal-white.svg);
}

/* „Unterstützt von Zammad"-Footer auf der Login-Seite ausblenden */
.login .poweredBy {
  display: none;
}

/* ---------- Zammad-Kolibri -> klassisches PROWERB-Lockup ---------- */
/* visibility statt display, damit die Container ihre Größe behalten */
/* Benachrichtigungs-Button oben in der Navigation: volles Lockup (weiß) */
.logo.js-toggleNotifications .icon-logo {
  visibility: hidden;
}
.logo.js-toggleNotifications {
  width: 132px;
  background: url(/prowerb/logo-horizontal-white.svg) no-repeat center / contain;
}

/* System-Avatare (Aktivitäts-Verlauf, Artikel von "Zammad"):
   weißer Kreis + klassisches Lockup;
   !important nötig gegen inline style="background: white" */
.avatar:has(> .icon-logo) {
  background: #fff url(/prowerb/logo-horizontal.svg) no-repeat center / 80% !important;
  border-radius: 50%;
}
.avatar > .icon-logo {
  visibility: hidden;
}

/* Initialen-Avatare: Farbverlauf-Sprite (avatar-bg.png) -> flaches Ink.
   :not-Guard, damit echte Foto-Avatare (inline background-image) unberührt bleiben */
.avatar--unique:not([style*="background-image"]) {
  background-image: none !important;
  background-color: var(--prowerb-ink) !important;
}
[data-theme=dark] .avatar--unique:not([style*="background-image"]) {
  background-color: #4c4846 !important;
}

/* Aktiver Task in der Taskleiste: statt Statusfarbe (gelb/grün/orange)
   immer PROWERB-Rot; Status bleibt am Punkt-Icon ablesbar */
.nav-tab.is-active {
  background-color: var(--prowerb-red) !important;
  color: #fff !important;
}

/* Button-Farbverlauf (danger:active) -> flach */
.btn--danger:active {
  background: hsl(0, 72%, 47%);
}

/* ======================================================================
   SIDEBAR-FAVORITEN (prowerb-nav.js) + Aufräumen Navigation
   ====================================================================== */
/* Zammads "Neue Desktop-UI (Beta)"-Umschalter ausblenden (Zugriff weiter
   direkt über /desktop möglich) */
.navbar-desktop-beta-switch {
  display: none !important;
}

/* Neue Desktop-UI (/desktop): Farben kommen bereits über die
   --color-blue-*-Variablen (siehe Mobile-Block); hier nur Kolibri -> Lockup */
#app-online-notification > svg.icon-logo {
  visibility: hidden;
}
#app-online-notification {
  width: 92px;
  min-width: 92px;
  background: url(/prowerb/logo-horizontal-white.svg) no-repeat center / contain;
}

.prowerb-pins {
  padding: 4px 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.prowerb-pins-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 17px 4px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.prowerb-pins-edit {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.35);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.prowerb-pins-edit:hover {
  color: #fff;
}
.prowerb-pin {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 17px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.prowerb-pin:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
}
.prowerb-pin.is-active {
  background: var(--prowerb-red);
  color: #fff;
}
.prowerb-pin-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prowerb-pin-count {
  margin-left: auto;
  min-width: 20px;
  text-align: center;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
  line-height: 17px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
}
.prowerb-pin-count.has-count {
  background: var(--prowerb-red);
  color: #fff;
}
.prowerb-pin.is-active .prowerb-pin-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.prowerb-pin--edit {
  /* Zammads globales label-Styling neutralisieren */
  text-transform: none;
  font-weight: 400;
  margin: 0;
}
.prowerb-pin--edit input[type=checkbox] {
  margin: 0;
}
.prowerb-pins-external {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.prowerb-pin--external .prowerb-pin-name {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.prowerb-pin-arrow {
  margin-left: auto;
  color: var(--prowerb-red);
  font-weight: 700;
}
.prowerb-pin--external:hover .prowerb-pin-arrow {
  color: #fff;
}

/* ---------- Navigation im exakten PROWERB-Ink ---------- */
:root {
  --background-tertiary: #262423;
  --background-quaternary: #211f1e;
}

/* ======================================================================
   CI-FLÄCHEN: alle Hintergründe/Borders auf PROWERB-Töne
   (Weiß, Warmgrau #F7F6F5, Ink #211F1E — statt Zammad-Blaugrau)
   ====================================================================== */
:root {
  --background-primary: #f7f6f5;
  --background-primary-alt: #f1efed;
  --background-secondary-hover: #f4f2f1;
  --background-quaternary-alt: #e9e6e3;
  --background-active: #211f1e;
  --background-article-meta: #fbfaf9;
  --border: #e7e4e2;
  --border-alt: #dedad7;
  --header-secondary: #a8a4a1;
  --text-muted: #a3a19f;
  --text-muted-alt: #a6a29f;
  --interactive-muted: #b5b2b0;
  --interactive-muted-active: #b3b0ae;
  --interactive-muted-alt: #c6c2bf;
  --interactive-muted-alt-selected: #605c5a;
}

[data-theme=dark] {
  --background-primary: #292726;
  --background-primary-alt: #2b2928;
  --background-secondary: #322f2e;
  --background-secondary-hover: #2c2a29;
  --background-tertiary: #211f1e;
  --background-quaternary: #1a1817;
  --background-quaternary-alt: #4c4846;
  --background-popover: #4a4645;
  --background-article-meta: #383534;
  --border: #232120;
  --border-alt: #242221;
  --header-secondary: #bab8b6;
  --text-normal: #dbdad9;
  --text-nav: #d6d5d4;
  --text-muted: #9b9997;
  --text-muted-alt: #9e9b99;
  --interactive-muted: #a3a19f;
  --interactive-muted-active: #5a5755;
  --interactive-muted-alt: #5c5856;
  --interactive-muted-alt-selected: #c1bebc;
  --background-modifier-hover: rgba(90, 87, 85, 0.4);
}

/* ======================================================================
   REST-BLAU ELIMINIEREN (hartkodierte Zammad-Blautöne)
   ====================================================================== */
.item--low-priority a {
  color: var(--text-muted);
}
.u-low-priority-color {
  fill: var(--interactive-muted);
}
.customer .textBubble-overflowContainer::before {
  background: linear-gradient(hsla(359, 45%, 96%, 0), var(--background-article-customer));
}
[data-theme=dark] .customer .textBubble-overflowContainer::before {
  background: linear-gradient(hsla(359, 10%, 30%, 0), var(--background-article-customer));
}
.dropArea {
  color: var(--prowerb-red);
}
.bubble-wrapper .bubble-menu .bubble-menu-item .icon-highlight {
  color: var(--prowerb-red);
}
.attachmentUpload-progressBar {
  background: var(--prowerb-red);
}
.switchBackToUser {
  background: var(--prowerb-ink);
  border-bottom-color: var(--prowerb-red);
}
.searchableSelect .searchableSelect-autocomplete-visible {
  background: hsl(359, 61%, 92%);
}
[data-theme=dark] .searchableSelect .searchableSelect-autocomplete-visible {
  background: hsl(359, 30%, 36%);
}
.datepicker .day.focused,
.datepicker .month.focused,
.datepicker .year.focused {
  box-shadow: 0 0 0 1px var(--prowerb-red) inset;
}
.datepicker .day.active,
.datepicker .month.active,
.datepicker .year.active {
  background: var(--prowerb-red);
}
.section-inner em {
  background: rgba(238, 23, 29, 0.25);
}
.knowledge-base-article-tags--container .tag:hover {
  background: var(--prowerb-red-dark);
}
.status-field .badge {
  background: hsla(30, 10%, 10%, 0.24);
}

/* Submit/Create-Buttons: Zammad-Grün -> PROWERB-Rot (CI-Primäraktion);
   Status-Ampeln bleiben semantisch grün */
.btn--create,
.btn--success {
  background: var(--prowerb-red);
}
.btn--create:active,
.btn--success:active {
  background: var(--prowerb-red-dark);
}
.btn--create.btn--secondary,
.btn--success.btn--secondary {
  background: var(--background-secondary);
  color: var(--prowerb-red-dark);
}
/* "+"-Button in der Navigation: grün -> rot (Plus = Markenzeichen) */
#navigation .settings.add .icon {
  fill: var(--prowerb-red);
}

/* ======================================================================
   TYPO: Krona One für Titel (CI: Headlines), Montserrat für Rest
   ====================================================================== */
.page-header-title,
.page-header-title h1,
.modal-title,
.popover-title,
.sidebar-header-headline {
  font-family: 'Krona One', 'Montserrat', sans-serif;
  font-weight: 400;
}

/* ======================================================================
   MOBILE-UI (/mobile, Vue/Tailwind): Blau-Palette -> PROWERB-Rot
   Alle Utilities referenzieren var(--color-blue-*) — Umfärbung rein
   über Variablen. Gilt auch für .dark-Variante.
   ====================================================================== */
:root,
.dark {
  --color-blue: #ee171d;
  --color-blue-dark: #7f0a0e;
  --color-blue-highlight: #ee171d19;
  --color-blue-50: #fef1f1;
  --color-blue-100: #fce1e1;
  --color-blue-200: #f9c3c4;
  --color-blue-300: #f49a9c;
  --color-blue-400: #f15f63;
  --color-blue-500: #ee171d;
  --color-blue-600: #d91118;
  --color-blue-700: #c60e14;
  --color-blue-800: #a50c11;
  --color-blue-900: #820a0e;
  --color-blue-950: #52070a;
  --default-font-family: 'Montserrat', 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Mobile-Login/Formulare: gelber Zammad-Submit -> PROWERB-Rot */
[data-variant=submit] .formkit-variant-submit\:bg-yellow,
[data-variant=submit].formkit-variant-submit\:bg-yellow {
  background-color: #ee171d;
}
[data-variant=submit] .formkit-variant-submit\:text-black,
[data-variant=submit].formkit-variant-submit\:text-black {
  color: #fff;
}

/* "Unterstützt von Zammad"-Footer (Mobile-Login u. a.) ausblenden */
footer:has(a[href*="zammad.org"]),
footer:has(a[href*="zammad.com"]) {
  display: none !important;
}

/* Mobile-Login rendert immer dunkel -> weißes Logo.
   (Mobile-Logo trägt Tailwind-Klasse max-h-32, Desktop-Logo .company-logo) */
img.max-h-32[src*="system_assets/product_logo"] {
  content: url(/prowerb/logo-horizontal-white.svg);
}