/* ==========================================================================
   PlaceNet-Design fuer die beiden Konsolen von Keycloak

   Gilt fuer die Administrations-Konsole (/admin) und die Konto-Konsole
   (/realms/{realm}/account). EINE Quelle - das Dockerfile legt diese Datei
   beim Build in beide Theme-Ordner (siehe ../Dockerfile). Sie zweimal im
   Repository zu pflegen waere die sicherere Art, sie auseinanderlaufen zu
   lassen.

   Warum das hier anders aussieht als das Login-Theme: Beide Konsolen sind
   React-Anwendungen auf PatternFly v5, keine FreeMarker-Seiten. Ihr HTML
   entsteht im Browser und laesst sich nicht durch Templates ersetzen. Was
   Keycloak dafuer vorsieht, ist genau dieser Weg - ein eigenes Stylesheet,
   das nach dem PatternFly-Bundle geladen wird (properties.styles im
   theme.properties). Deshalb werden hier die CSS-Variablen von PatternFly
   umgesetzt statt Regeln ueberschrieben: Die Komponenten lesen ihre Farben
   aus diesen Variablen, damit greift die Umstellung an jeder Stelle
   gleichzeitig - auch in Ansichten, die es heute noch nicht gibt.

   Anders als beim Login-Theme ist das eine Umfaerbung, kein neues Layout.
   Raster, Abstaende und Komponenten bleiben die von PatternFly.

   In den beiden theme.properties steht dazu darkMode=false: Ohne das haengt
   Keycloak abhaengig von der Systemeinstellung die Klasse pf-v5-theme-dark an
   <html> und setzt dieselben Variablen mit hoeherer Spezifitaet neu. Da
   placenet.de ohnehin nur dunkel existiert, ist der Schalter ueberfluessig -
   und ohne ihn genuegt hier ein :root-Block.
   ========================================================================== */

:root {
    /* --- placenet-Palette, wie in code/web/.../app.css ------------------- */
    --pn-bg: #0b0a14;
    --pn-surface: #141221;
    --pn-surface-2: #1a1730;
    --pn-primary: #8b7cff;
    --pn-secondary: #22d3ee;
    --pn-tertiary: #f472b6;
    --pn-text: #e7e4f5;
    --pn-muted: #a5a0bd;
    --pn-border: rgba(139, 124, 255, 0.16);

    /* --- Flaechen -------------------------------------------------------- */
    --pf-v5-global--BackgroundColor--100: var(--pn-surface);
    --pf-v5-global--BackgroundColor--150: var(--pn-surface);
    --pf-v5-global--BackgroundColor--200: var(--pn-bg);
    --pf-v5-global--BackgroundColor--300: var(--pn-surface-2);
    --pf-v5-global--BackgroundColor--400: var(--pn-surface-2);
    --pf-v5-global--BackgroundColor--dark-100: var(--pn-bg);
    --pf-v5-global--BackgroundColor--dark-200: var(--pn-surface);
    --pf-v5-global--BackgroundColor--dark-300: var(--pn-surface-2);
    --pf-v5-global--BackgroundColor--dark-400: var(--pn-surface-2);
    --pf-v5-global--BackgroundColor--dark-transparent-100: rgba(11, 10, 20, 0.6);
    --pf-v5-global--BackgroundColor--dark-transparent-200: rgba(11, 10, 20, 0.4);

    /* --- Schrift --------------------------------------------------------- */
    --pf-v5-global--Color--100: var(--pn-text);
    --pf-v5-global--Color--200: var(--pn-muted);
    --pf-v5-global--Color--300: var(--pn-muted);
    --pf-v5-global--Color--400: var(--pn-muted);
    --pf-v5-global--Color--light-100: var(--pn-text);
    --pf-v5-global--Color--light-200: var(--pn-muted);
    --pf-v5-global--Color--light-300: var(--pn-muted);
    --pf-v5-global--Color--dark-100: var(--pn-text);
    --pf-v5-global--Color--dark-200: var(--pn-muted);

    /* Dieselben Schriften wie placenet.de - lokal vorhanden, kein Download.
       PatternFly wuerde sonst Red Hat Text/Display anfordern. */
    --pf-v5-global--FontFamily--text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --pf-v5-global--FontFamily--heading: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --pf-v5-global--FontFamily--monospace: "Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace;
    --pf-v5-global--FontFamily--redhat-updated--text: var(--pf-v5-global--FontFamily--text);
    --pf-v5-global--FontFamily--redhat-updated--heading: var(--pf-v5-global--FontFamily--heading);
    --pf-v5-global--FontFamily--redhat-updated--monospace: var(--pf-v5-global--FontFamily--monospace);

    /* --- Linien ---------------------------------------------------------- */
    --pf-v5-global--BorderColor--100: var(--pn-border);
    --pf-v5-global--BorderColor--200: var(--pn-border);
    --pf-v5-global--BorderColor--300: var(--pn-border);
    --pf-v5-global--BorderColor--dark-100: var(--pn-border);
    --pf-v5-global--BorderColor--light-100: var(--pn-border);

    /* --- Akzent ---------------------------------------------------------- */
    --pf-v5-global--primary-color--100: var(--pn-primary);
    --pf-v5-global--primary-color--200: #9d90ff;
    --pf-v5-global--primary-color--light-100: var(--pn-primary);
    --pf-v5-global--active-color--100: var(--pn-primary);
    --pf-v5-global--active-color--200: rgba(139, 124, 255, 0.16);
    --pf-v5-global--active-color--300: rgba(139, 124, 255, 0.12);
    --pf-v5-global--active-color--400: rgba(139, 124, 255, 0.08);
    --pf-v5-global--link--Color: var(--pn-primary);
    --pf-v5-global--link--Color--hover: #9d90ff;
    --pf-v5-global--link--Color--light: var(--pn-primary);
    --pf-v5-global--link--Color--light--hover: #9d90ff;
    --pf-v5-global--link--Color--visited: var(--pn-primary);

    /* --- Zustaende ------------------------------------------------------- */
    --pf-v5-global--success-color--100: #34d399;
    --pf-v5-global--success-color--200: #34d399;
    --pf-v5-global--warning-color--100: #fbbf24;
    --pf-v5-global--warning-color--200: #fbbf24;
    --pf-v5-global--danger-color--100: #f87171;
    --pf-v5-global--danger-color--200: #f87171;
    --pf-v5-global--info-color--100: var(--pn-secondary);
    --pf-v5-global--info-color--200: var(--pn-secondary);
    --pf-v5-global--disabled-color--100: rgba(165, 160, 189, 0.5);
    --pf-v5-global--disabled-color--200: rgba(165, 160, 189, 0.25);
    --pf-v5-global--disabled-color--300: rgba(165, 160, 189, 0.4);

    /* --- Rundungen und Schatten ------------------------------------------ */
    --pf-v5-global--BorderRadius--sm: 10px;
    --pf-v5-global--BorderRadius--lg: 16px;
    --pf-v5-global--BoxShadow--sm: 0 8px 20px rgba(0, 0, 0, 0.35);
    --pf-v5-global--BoxShadow--md: 0 16px 40px rgba(0, 0, 0, 0.4);
    --pf-v5-global--BoxShadow--lg: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   Grundflaechen

   Der Seitenhintergrund kommt bei PatternFly nicht aus einer Variablen,
   sondern steht fest auf einer Regel - deshalb hier die einzigen echten
   Regel-Ueberschreibungen.
   -------------------------------------------------------------------------- */

html,
body,
.pf-v5-c-page,
.pf-v5-c-page__main,
.pf-v5-c-page__main-section,
/* Der Brotkrumenpfad bringt sein Weiss als feste Regel mit, nicht ueber eine
   Variable - ohne diese Zeile bliebe ein heller Streifen unter der
   Kopfleiste stehen. */
.pf-v5-c-page__main-breadcrumb,
.pf-v5-c-page__main-nav,
.pf-v5-c-page__main-tabs {
    background-color: var(--pn-bg);
    color: var(--pn-text);
}

/* Kopfleiste und Seitennavigation - die beiden dunklen Flaechen, die den
   Rahmen der Konsole ausmachen. */
.pf-v5-c-masthead,
.pf-v5-c-page__header,
.pf-v5-c-page__sidebar {
    background-color: rgba(13, 12, 22, 0.92);
    border-color: var(--pn-border);
}

.pf-v5-c-masthead,
.pf-v5-c-page__header {
    border-bottom: 1px solid var(--pn-border);
}

.pf-v5-c-page__sidebar {
    border-right: 1px solid var(--pn-border);
}

.pf-v5-c-nav__link {
    color: var(--pn-muted);
}

.pf-v5-c-nav__link:hover {
    color: var(--pn-text);
    background-color: rgba(139, 124, 255, 0.08);
}

.pf-v5-c-nav__item .pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link[aria-current="page"] {
    color: var(--pn-text);
    background-color: rgba(139, 124, 255, 0.14);
}

/* Karten, Tafeln, Dialoge - alles, was sich vom Seitengrund abheben soll. */
.pf-v5-c-card,
.pf-v5-c-panel,
.pf-v5-c-modal-box,
.pf-v5-c-menu,
.pf-v5-c-dropdown__menu,
.pf-v5-c-select__menu,
.pf-v5-c-popover__content {
    background: linear-gradient(150deg, rgba(139, 124, 255, 0.06), rgba(20, 18, 33, 0.92));
    border: 1px solid var(--pn-border);
    border-radius: 16px;
    color: var(--pn-text);
}

/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */

.pf-v5-c-form-control,
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control > textarea {
    background-color: rgba(11, 10, 20, 0.6);
    color: var(--pn-text);
    border-color: var(--pn-border);
    border-radius: 12px;
}

.pf-v5-c-form-control:focus-within {
    border-color: var(--pn-primary);
    box-shadow: 0 0 0 3px rgba(139, 124, 255, 0.18);
}

.pf-v5-c-button {
    border-radius: 14px;
}

.pf-v5-c-button.pf-m-primary {
    background-color: var(--pn-primary);
    color: #0b0a14;
}

.pf-v5-c-button.pf-m-primary:hover {
    background-color: #9d90ff;
}

.pf-v5-c-button.pf-m-secondary {
    color: var(--pn-primary);
    border-color: rgba(139, 124, 255, 0.45);
    background-color: transparent;
}

.pf-v5-c-button.pf-m-secondary:hover {
    background-color: rgba(139, 124, 255, 0.1);
    border-color: var(--pn-primary);
}

/* --------------------------------------------------------------------------
   Tabellen - die Hauptansicht der Administrations-Konsole
   -------------------------------------------------------------------------- */

.pf-v5-c-table {
    background-color: transparent;
    color: var(--pn-text);
}

.pf-v5-c-table > thead {
    background-color: transparent;
}

.pf-v5-c-table th {
    color: var(--pn-text);
}

.pf-v5-c-table td {
    color: var(--pn-muted);
}

.pf-v5-c-table tr > * {
    border-color: var(--pn-border);
}

.pf-v5-c-table tbody tr:hover {
    background-color: rgba(139, 124, 255, 0.06);
}

/* --------------------------------------------------------------------------
   Reiter, Marke, Rollbalken
   -------------------------------------------------------------------------- */

.pf-v5-c-tabs__link {
    color: var(--pn-muted);
}

.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
    color: var(--pn-text);
}

.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::before {
    border-color: var(--pn-primary);
}

/* Etiketten ("Current realm", Typ-Kennzeichen in Listen). PatternFly faerbt
   sie je Variante - blau, gruen, orange - ueber eigene Regeln auf
   .pf-m-<farbe> ein, die eine Variablen-Zuweisung ueberstimmen wuerden.
   Deshalb hier die Eigenschaft selbst, auf derselben Spezifitaet wie die
   Grundregel der Komponente und spaeter in der Datei. */
.pf-v5-c-label {
    background-color: rgba(139, 124, 255, 0.14);
    color: var(--pn-text);
    border-color: var(--pn-border);
}

.pf-v5-c-label__content {
    color: var(--pn-text);
}

/* Die Wortmarke bringt ihre Groesse selbst mit; ohne Deckel skaliert
   PatternFly sie auf die volle Hoehe der Kopfleiste. */
.pf-v5-c-brand,
.pf-v5-c-masthead__brand img {
    max-height: 32px;
}

::selection {
    background: rgba(139, 124, 255, 0.4);
    color: #fff;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--pn-bg); }
::-webkit-scrollbar-thumb { background: #2b2745; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3d3865; }