/* TragBit-Branding fuer Zammad-Fullscreen-Seiten (Login, Passwort-Reset).
   Token-Quelle: 03-Website/assets/css/style.css - Werte hier gespiegelt, weil Zammad
   die Website-CSS nicht laden kann. Schriften self-hosted (DSGVO), kein CDN. */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/tragbit/fonts/IBMPlexSans-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/tragbit/fonts/IBMPlexSans-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/tragbit/fonts/IBMPlexSans-700-latin.woff2') format('woff2');
}

/* Helle Ansicht */
.fullscreen {
  background: #F1ECE3 !important;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: #25281F;
}
.fullscreen h1,
.fullscreen h2,
.fullscreen h3 {
  font-family: inherit;
  color: inherit;
}
.fullscreen .hero-unit {
  background: #FAF7F0;
  border: 1px solid #C5B299;
  border-radius: 2px;
  box-shadow: none;
  color: #25281F;
}
.fullscreen .company-logo {
  height: 64px;
  width: auto;
}
/* Ueberschrift "TragBit Ticketsystem" unter dem Logo. Reihenfolge ueber Flex-Order:
   Logo (-2), Ueberschrift (-1), restlicher Karteninhalt (0). */
.login .hero-unit {
  display: flex;
  flex-direction: column;
}
.login .company-logo {
  order: -2;
  align-self: center;
  margin: 20px 0 8px 0;
}
.login .hero-unit::before {
  content: "TragBit Ticketsystem";
  order: -1;
  display: block;
  text-align: center;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #25281F;
  margin: 0 0 18px 0;
}
[data-theme="dark"] .login .hero-unit::before {
  color: #F1ECE3;
}
.fullscreen .btn {
  border-radius: 2px;
  font-family: inherit;
}
.fullscreen .btn--primary {
  background: #9A5A36 !important;
  border-color: #9A5A36 !important;
  color: #F1ECE3 !important;
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
}
.fullscreen .btn--primary:hover,
.fullscreen .btn--primary:focus {
  background: #834A2C !important;
  border-color: #834A2C !important;
}
.fullscreen .form-control {
  border-radius: 2px;
  border-color: #C5B299 !important;
  background: #FDFCF9 !important;
  color: #25281F !important;
  font-family: inherit;
}
.fullscreen .form-control:focus {
  border-color: #5C6B3D !important;
  box-shadow: 0 0 0 3px rgba(92, 107, 61, 0.18) !important;
}
.fullscreen a,
.fullscreen .btn--text,
.fullscreen .btn--text.btn--secondary {
  color: #25281F;
}
.fullscreen a:hover,
.fullscreen .btn--text:hover {
  color: #9A5A36;
}
.fullscreen .checkbox-replacement .icon {
  fill: #5C6B3D;
}
.fullscreen .poweredBy {
  display: none;
}

/* Zammad-Logo-Sprite GLOBAL ersetzen (Splash, Sidebar, ueberall):
   das innere use-Element aus, das TragBit-Icon als Hintergrund auf dem svg-Element. */
svg.icon-logo use {
  display: none;
}
svg.icon-logo {
  background: url('/assets/tragbit/icon.svg') center / contain no-repeat;
}

/* ============================================================
   Globale Token-Schicht: Zammads CSS-Variablen auf TragBit
   (Quelle der Original-Bloecke: application-*.css :root und
   [data-theme=dark]; Status-/Warnfarben bleiben semantisch.)
   Laedt NACH application.css - spaetere Definition gewinnt.
   ============================================================ */
:root {
  /* Handlung = Kupfer */
  --button-primary-background: #9A5A36;
  --button-primary-background-active: #834A2C;
  --text-link: #9A5A36;
  --text-nav: #9A5A36;
  /* Auswahl/Fokus = Moos */
  --highlight: #5C6B3D;
  --border-highlight: #5C6B3D;
  --shadow-highlight: #DDE2D2;
  --background-highlight: #E7EADD;
  --text-muted-highlight: #DDE2D2;
  --backdrop-clue-start: rgba(92, 107, 61, 0.1);
  --backdrop-clue-end: rgba(92, 107, 61, 0.9);
  /* Text = Schiefer */
  --header-primary: #25281F;
  --text-normal: #3A3D33;
  --interactive-primary: #25281F;
  /* Grau-Hilfstoene: Zammads Neutralgraus waren auf Fast-Weiss kalibriert und verlieren
     auf Eierschale Kontrast - hier Schiefer-getoente, dunklere Ersatzwerte
     (Kontrast-Audit 2026-08-05: alle Paare jetzt ueber den Zammad-Originalwerten). */
  --text-muted: #6B6E66;
  --text-muted-alt: #767970;
  --ghost-color: #83867B;
  --header-secondary: #83867B;
  --interactive-muted: #8F9288;
  --interactive-muted-active: #83867B;
  --nav-icon: #6B6E66;
  --danger-color: hsl(0, 65%, 48%);
  /* Flaechen hell = Eierschale-Familie */
  --background-primary: #F1ECE3;
  --background-primary-alt: #EAE4D8;
  --background-secondary: #FAF7F0;
  --background-secondary-hover: #F1ECE3;
  --background-popover: #FAF7F0;
  --background-quaternary-alt: #DDD8CC;
  --background-article-meta: #F6F2E9;
  --background-article-customer: #EDE7DA;
  --background-article-customer-meta: #F2EDE2;
  --border: #E3DCCE;
  --border-alt: #D8D0BF;
  --border-article-customer: #DCD3C2;
  --border-article-customer-selected: #C9BFA9;
  --table-border: #C5B299;
  --tag-background: #E7E1D3;
  --tag-text: #4B4E43;
  --file-icon-color: #C5B299;
  /* Dunkle Flaechen (Sidebar, aktive Tabs) = Schiefer-Familie */
  --background-tertiary: #2A2E23;
  --background-quaternary: #25281F;
  --background-active: #25281F;
}
/* ============================================================
   Hartkodierte Farben ausserhalb der Token (Audit 2026-08-05):
   Zammad-Blau- und Aktions-Gruen-Reste in Komponenten, die u. a.
   Profil-/Einstellungsseiten treffen (Datepicker, Autocomplete,
   Upload-Balken, Toggles, Anlegen-Buttons, Lade-Spinner).
   ============================================================ */
/* Blau-Reste -> Kupfer/Moos */
.item--low-priority a { color: #A9B58A !important; }
.u-low-priority-color { fill: #A9B58A !important; }
.dropArea { color: #9A5A36 !important; }
.bubble-wrapper .bubble-menu .bubble-menu-item .icon-highlight { color: #9A5A36 !important; }
[data-theme=dark] .bubble-wrapper .bubble-menu .bubble-menu-item .icon-highlight { color: #C68B5F !important; }
.attachmentUpload-progressBar { background: #9A5A36 !important; }
.switchBackToUser { background: #4B5731 !important; border-bottom-color: #8FA363 !important; }
.searchableSelect .searchableSelect-autocomplete-visible { background: #E7EADD !important; color: #3A3D33 !important; }
[data-theme=dark] .searchableSelect .searchableSelect-autocomplete-visible { background: #3A4030 !important; color: #E0DED6 !important; }
.datepicker .day.focused, .datepicker .month.focused, .datepicker .year.focused { box-shadow: 0 0 0 1px #5C6B3D inset !important; }
.datepicker .day.active, .datepicker .month.active, .datepicker .year.active { background: #9A5A36 !important; }
.knowledge-base-article-tags--container .tag:hover { background: #834A2C !important; }
/* Aktions-Gruen (Anlegen/Positiv) -> Moos */
a.create { color: #5C6B3D !important; }
.btn--positive, .btn--create, .btn--success { background: #5C6B3D !important; }
.btn--positive:active, .btn--create:active, .btn--success:active { background: #4B5731 !important; }
.btn--positive.btn--secondary, .btn--create.btn--secondary, .btn--success.btn--secondary { background: var(--background-secondary) !important; color: #5C6B3D !important; }
.btn--text.btn--positive { color: #5C6B3D !important; }
.btn--text.btn--positive:active { color: #4B5731 !important; }
.loading.icon { background: #5C6B3D !important; }
.user-menu-icon.icon-plus { fill: #5C6B3D !important; }
.frequency.stat-widget .primary { color: #5C6B3D !important; background: #5C6B3D !important; }
.zammad-switch input:checked + label { background: #5C6B3D !important; }
[data-theme=dark] a.create,
[data-theme=dark] .btn--text.btn--positive { color: #8FA363 !important; }
[data-theme=dark] .btn--positive.btn--secondary,
[data-theme=dark] .btn--create.btn--secondary,
[data-theme=dark] .btn--success.btn--secondary { color: #8FA363 !important; }

[data-theme=dark] {
  /* WICHTIG: Jeder Token aus dem :root-Block oben MUSS hier einen Dark-Wert bekommen.
     Grund: branding.css laedt nach application.css - das :root oben ueberstimmt sonst
     Zammads eigenen Dark-Block (gleiche Spezifitaet, spaeter gewinnt) und es landet
     dunkler Text auf dunklem Grund (real passiert in der Ticketansicht, 2026-08-05). */
  --button-primary-background: #9A5A36;
  --button-primary-background-active: #834A2C;
  --text-link: #C68B5F;
  --text-nav: #C68B5F;
  --text-normal: #E0DED6;
  --text-muted: #9B9E93;
  --text-muted-alt: #9B9E93;
  --ghost-color: #83867B;
  --header-secondary: #B8BBAE;
  --interactive-muted: #9B9E93;
  --interactive-muted-active: #B8BBAE;
  --nav-icon: #9B9E93;
  --danger-color: hsl(0, 85%, 66%);
  --pending-color: #8C8F85;
  --text-muted-highlight: #4B5731;
  --header-primary: #F1ECE3;
  --interactive-primary: #F1ECE3;
  /* Aktiver Tab entkoppelt von --highlight: weisser Text braucht dunkleres Moos (Kontrast 7.8 statt 2.8) */
  --background-active: #4B5731;
  --tag-text: var(--text-normal);
  --file-icon-background: #C9C4B8;
  --file-icon-color: #2C3024;
  --table-border: #6B6E66;
  --highlight: #8FA363;
  --border-highlight: #8FA363;
  --shadow-highlight: #4B5731;
  --background-highlight: #3A4030;
  --backdrop-clue-start: rgba(92, 107, 61, 0.1);
  --backdrop-clue-end: rgba(92, 107, 61, 0.9);
  --background-primary: #262A20;
  --background-primary-alt: #2A2E23;
  --background-secondary: #2C3024;
  --background-secondary-hover: #292D22;
  --background-tertiary: #22251C;
  --background-quaternary: #1C1F16;
  --background-quaternary-alt: #3F4436;
  --background-popover: #34382B;
  --background-article-meta: #2E3226;
  --background-article-customer: #343A2C;
  --background-article-customer-meta: #30352A;
  --border: #1E2118;
  --border-alt: #23261C;
  --border-article-customer: #3A4030;
  --border-article-customer-selected: #4B5731;
  --tag-background: #3A3E30;
}

/* Dunkle Ansicht (Zammad setzt data-theme=dark auf <html>) */
[data-theme="dark"] .fullscreen {
  background: #25281F !important;
  color: #F1ECE3;
}
[data-theme="dark"] .fullscreen .hero-unit {
  background: #2C3024;
  border-color: rgba(197, 178, 153, 0.28);
  color: #F1ECE3;
}
[data-theme="dark"] .fullscreen .form-control {
  background: #25281F !important;
  border-color: rgba(197, 178, 153, 0.35) !important;
  color: #F1ECE3 !important;
}
[data-theme="dark"] .fullscreen a,
[data-theme="dark"] .fullscreen .btn--text,
[data-theme="dark"] .fullscreen .btn--text.btn--secondary {
  color: #F1ECE3;
}
[data-theme="dark"] .fullscreen a:hover,
[data-theme="dark"] .fullscreen .btn--text:hover {
  color: #C5B299;
}