/* ConverCom-Theme — Admin-Konsole und Kontoverwaltung (identische Datei in admin/ und account/).
   Farben, Schrift und Logo wie das Standard-Domain-Theme „ConverCom" der CSF4-Oberfläche:
   Primary #e30613, Inter (Gewicht 300). Hell: helle Titelleiste und helles Seitenmenü (das Logo
   hat schwarze Anteile); dunkel (html.pf-v5-theme-dark): dunkle Flächen und logo-dark.png. Wird nach den Styles der React-Konsole geladen; die Selektoren mit
   „html" gewinnen auch gegen später nachgeladene Chunk-Styles. */

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --coco-primary: #e30613;
    --coco-primary-dark: #b0050f;
    --coco-primary-tint: #fdecee;
    --coco-text: #232323;
    --coco-text-secondary: #5c5c5c;
    --coco-border: #e0e0e0;
    --coco-hover: #f5f5f5;
    --coco-font: Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    --pf-v5-global--primary-color--100: var(--coco-primary);
    --pf-v5-global--primary-color--200: var(--coco-primary-dark);
    --pf-v5-global--primary-color--dark-100: var(--coco-primary-dark);
    --pf-v5-global--primary-color--light-100: var(--coco-primary);
    --pf-v5-global--active-color--100: var(--coco-primary);
    --pf-v5-global--active-color--400: var(--coco-primary);
    --pf-v5-global--link--Color: var(--coco-primary);
    --pf-v5-global--link--Color--hover: var(--coco-primary-dark);
    --pf-v5-global--link--Color--dark: var(--coco-primary);
    --pf-v5-global--link--Color--dark--hover: var(--coco-primary-dark);
    --pf-v5-global--FontFamily--text: var(--coco-font);
    --pf-v5-global--FontFamily--heading: var(--coco-font);
    --pf-v5-global--FontWeight--normal: 300;
    --pf-v5-global--FontWeight--bold: 500;
}

html body {
    font-family: var(--coco-font);
    font-weight: 300;
}

/* Titelleiste hell wie die AppBar der CSF4-Oberfläche (dunkler Standard würde das Logo verschlucken). */
html .pf-v5-c-masthead,
html .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
    --pf-v5-c-masthead--BackgroundColor: #ffffff;
    --pf-v5-global--Color--100: var(--coco-text);
    --pf-v5-global--Color--200: var(--coco-text-secondary);
    --pf-v5-global--BorderColor--100: var(--coco-border);
    --pf-v5-global--primary-color--100: var(--coco-primary);
    --pf-v5-global--link--Color: var(--coco-primary);
    --pf-v5-global--link--Color--hover: var(--coco-primary-dark);
    --pf-v5-global--BackgroundColor--100: #ffffff;
    --pf-v5-global--icon--Color--light: var(--coco-text);
    --pf-v5-global--icon--Color--dark: var(--coco-text);
    color: var(--coco-text);
}

html .pf-v5-c-masthead {
    background-color: #ffffff;
    border-bottom: 1px solid var(--coco-border);
}

html .pf-v5-c-masthead .pf-v5-c-menu-toggle,
html .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
html .pf-v5-c-masthead .pf-v5-c-dropdown__toggle {
    --pf-v5-c-menu-toggle--Color: var(--coco-text);
    --pf-v5-c-menu-toggle--hover--Color: var(--coco-primary);
    --pf-v5-c-menu-toggle--m-plain--Color: var(--coco-text);
    --pf-v5-c-menu-toggle--m-plain--hover--Color: var(--coco-primary);
    --pf-v5-c-button--m-plain--Color: var(--coco-text);
    --pf-v5-c-button--m-plain--hover--Color: var(--coco-primary);
    color: var(--coco-text);
}

html .keycloak__pageheader_brand {
    height: 36px;
}

/* Seitenmenü hell, aktiver Eintrag in ConverCom-Rot. */
html .pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: #ffffff;
    --pf-v5-global--Color--100: var(--coco-text);
    --pf-v5-global--Color--200: var(--coco-text-secondary);
    border-right: 1px solid var(--coco-border);
    color: var(--coco-text);
}

html .pf-v5-c-page__sidebar .pf-v5-c-nav {
    --pf-v5-c-nav__link--Color: var(--coco-text);
    --pf-v5-c-nav__link--hover--Color: var(--coco-primary);
    --pf-v5-c-nav__link--focus--Color: var(--coco-primary);
    --pf-v5-c-nav__link--active--Color: var(--coco-primary);
    --pf-v5-c-nav__link--m-current--Color: var(--coco-primary);
    --pf-v5-c-nav__link--BackgroundColor: transparent;
    --pf-v5-c-nav__link--hover--BackgroundColor: var(--coco-hover);
    --pf-v5-c-nav__link--focus--BackgroundColor: var(--coco-hover);
    --pf-v5-c-nav__link--active--BackgroundColor: var(--coco-primary-tint);
    --pf-v5-c-nav__link--m-current--BackgroundColor: var(--coco-primary-tint);
    --pf-v5-c-nav__link--before--BorderColor: transparent;
    --pf-v5-c-nav__link--after--BorderColor: var(--coco-primary);
    --pf-v5-c-nav__link--hover--after--BorderColor: var(--coco-primary);
    --pf-v5-c-nav__link--active--after--BorderColor: var(--coco-primary);
    --pf-v5-c-nav__link--m-current--after--BorderColor: var(--coco-primary);
    --pf-v5-c-nav__section-title--Color: var(--coco-text-secondary);
    --pf-v5-c-nav__section-title--BorderBottomColor: var(--coco-border);
    --pf-v5-c-nav__link-toggle-icon--Color: var(--coco-text-secondary);
    --pf-v5-c-nav__item--before--BorderColor: var(--coco-border);
}

html .pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current,
html .pf-v5-c-page__sidebar .pf-v5-c-nav__link.active {
    font-weight: 500;
}

/* Hauptaktion umrandet statt gefüllt — wie alle Knöpfe in cocoSupport/CSF4 (Entscheid Marcel 2026-09-28). */
html .pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--BackgroundColor: transparent;
    --pf-v5-c-button--m-primary--hover--BackgroundColor: rgba(227, 6, 19, 0.08);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: rgba(227, 6, 19, 0.08);
    --pf-v5-c-button--m-primary--active--BackgroundColor: rgba(227, 6, 19, 0.14);
    --pf-v5-c-button--m-primary--Color: var(--coco-primary);
    --pf-v5-c-button--m-primary--hover--Color: var(--coco-primary-dark);
    --pf-v5-c-button--m-primary--focus--Color: var(--coco-primary-dark);
    --pf-v5-c-button--m-primary--active--Color: var(--coco-primary-dark);
    box-shadow: inset 0 0 0 1px var(--coco-primary);
    font-weight: 500;
}

html .pf-v5-c-button.pf-m-secondary {
    --pf-v5-c-button--m-secondary--Color: var(--coco-primary);
    --pf-v5-c-button--m-secondary--BorderColor: var(--coco-primary);
    --pf-v5-c-button--m-secondary--hover--Color: var(--coco-primary-dark);
    --pf-v5-c-button--m-secondary--hover--BorderColor: var(--coco-primary-dark);
}

html .pf-v5-c-button.pf-m-link {
    --pf-v5-c-button--m-link--Color: var(--coco-primary);
    --pf-v5-c-button--m-link--hover--Color: var(--coco-primary-dark);
}

html .pf-v5-c-tabs {
    --pf-v5-c-tabs__link--after--BorderColor: var(--coco-border);
    --pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(--coco-primary);
    --pf-v5-c-tabs__item--m-current__link--Color: var(--coco-text);
}

html .pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
    --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--coco-primary);
}

/* ---- Dunkles Design ------------------------------------------------------------------------
   darkMode=true: Keycloak setzt html.pf-v5-theme-dark nach prefers-color-scheme. Die hellen
   Regeln oben (html .pf-v5-c-masthead …) werden hier mit höherer Spezifität dunkel gestellt;
   Farben wie das dunkle ConverCom-Theme von cocoSupport/CSF4. Links #ff4d57 (Kontrast ≥ 4.5:1). */
html.pf-v5-theme-dark {
    --coco-text: #e0e0e0;
    --coco-text-secondary: #a0a0a0;
    --coco-border: #3a3a3a;
    --coco-hover: #2a2a2a;
    --coco-primary-tint: #3a1416;
    --coco-link: #ff4d57;
    --coco-link-hover: #ff7b82;
    --pf-v5-global--link--Color: var(--coco-link);
    --pf-v5-global--link--Color--hover: var(--coco-link-hover);
    --pf-v5-global--link--Color--dark: var(--coco-link);
    --pf-v5-global--link--Color--dark--hover: var(--coco-link-hover);
}

html.pf-v5-theme-dark .pf-v5-c-masthead,
html.pf-v5-theme-dark .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
    --pf-v5-c-masthead--BackgroundColor: #1a1a1a;
    --pf-v5-global--BackgroundColor--100: #1a1a1a;
    --pf-v5-global--link--Color: var(--coco-link);
    --pf-v5-global--link--Color--hover: var(--coco-link-hover);
}

html.pf-v5-theme-dark .pf-v5-c-masthead {
    background-color: #1a1a1a;
}

html.pf-v5-theme-dark .keycloak__pageheader_brand {
    content: url("../img/logo-dark.png");
}

html.pf-v5-theme-dark .pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: #1e1e1e;
}

html.pf-v5-theme-dark .pf-v5-c-page__sidebar .pf-v5-c-nav {
    --pf-v5-c-nav__link--hover--Color: var(--coco-link);
    --pf-v5-c-nav__link--focus--Color: var(--coco-link);
    --pf-v5-c-nav__link--active--Color: var(--coco-link);
    --pf-v5-c-nav__link--m-current--Color: var(--coco-link);
}

html.pf-v5-theme-dark .pf-v5-c-button.pf-m-secondary {
    --pf-v5-c-button--m-secondary--Color: var(--coco-link);
    --pf-v5-c-button--m-secondary--BorderColor: var(--coco-link);
    --pf-v5-c-button--m-secondary--hover--Color: var(--coco-link-hover);
    --pf-v5-c-button--m-secondary--hover--BorderColor: var(--coco-link-hover);
}

html.pf-v5-theme-dark .pf-v5-c-button.pf-m-link {
    --pf-v5-c-button--m-link--Color: var(--coco-link);
    --pf-v5-c-button--m-link--hover--Color: var(--coco-link-hover);
}

html.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--BackgroundColor: transparent;
    --pf-v5-c-button--m-primary--hover--BackgroundColor: rgba(255, 77, 87, 0.12);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: rgba(255, 77, 87, 0.12);
    --pf-v5-c-button--m-primary--active--BackgroundColor: rgba(255, 77, 87, 0.2);
    --pf-v5-c-button--m-primary--Color: var(--coco-link);
    --pf-v5-c-button--m-primary--hover--Color: var(--coco-link-hover);
    --pf-v5-c-button--m-primary--focus--Color: var(--coco-link-hover);
    --pf-v5-c-button--m-primary--active--Color: var(--coco-link-hover);
    box-shadow: inset 0 0 0 1px var(--coco-link);
    font-weight: 500;
}