/* ===================================================================
   meteoCORE-Theme fuer die RabbitMQ-Management-UI
   Wird vom Branding-Sidecar unter /meteocore/branding.css ausgeliefert
   und per sub_filter als letztes Stylesheet in index.html eingehaengt.

   Die UI ist seit 4.x vollstaendig ueber CSS Custom Properties
   aufgebaut (css/light.css, css/dark.css). Es genuegt deshalb, die
   Basispalette neu zu belegen -- die rund 120 semantischen Variablen
   zeigen darauf und ziehen automatisch nach.

   Da diese Datei nach light.css UND dark.css geladen wird, gilt sie in
   beiden Modi: die UI ist damit fest dunkel, passend zum meteoCORE-
   Design. Der Theme-Umschalter waere folglich wirkungslos und wird
   unten ausgeblendet.

   Farbwerte stammen aus dem design-tokens-Repo. Sie stehen hier als
   Literale, weil dieses Repo keinen Build-Schritt hat, der das Paket
   @meteocore/design-tokens aufloesen koennte -- bewusste Abweichung von
   ci-grundsatzregeln.md, bei Token-Aenderungen nachzuziehen.
   =================================================================== */

:root {
    color-scheme: dark;

    /* ---------- Flaechen: --core-void bis --core-surface-2 ---------- */
    --color-white-100: #010A0F;
    --color-white-200: #071B24;
    --color-white-300: #0D2530;
    --color-white-400: #123141;
    --color-white-500: #162933;
    --color-white-600: #1E3541;
    --color-white-700: #2A4453;
    --color-white-800: #0D2530;

    /* ---------- Text und Linien ---------- */
    --color-black-100: #FFFFFF;
    --color-grey-900: #EAF3F8;
    --color-grey-800: #DCE9F0;
    --color-grey-700: #93AAB8;
    --color-grey-600: #93AAB8;
    --color-grey-500: #5C7484;
    --color-grey-450: #2A4453;
    --color-grey-400: #1E3541;
    --color-grey-300: #5C7484;

    /* ---------- Akzent ----------
       Im Original das RabbitMQ-Orange (#c05000) fuer Hover und aktive
       Zustaende. Ersetzt durch Himmel-/Signalblau: das Leuchtorange der
       Marke ist laut Design-System der EINEN Haupt-Handlung pro
       Bildschirm vorbehalten, die es in einer Admin-Oberflaeche nicht
       gibt -- und Orange als Flaechenakzent liefe optisch auf dasselbe
       hinaus, was hier gerade abgeloest werden soll. */
    --color-orange-500: #007AC2;
    --color-orange-400: #004B87;

    /* ---------- Status- und Diagrammfarben aus dem Markenspektrum ---------- */
    --color-red-300: #E6001A;
    --color-red-400: #FF5A5A;
    --color-red-500: #E6001A;
    --color-red-600: #B00014;
    --color-red-700: #4A0A12;

    --color-green-300: #009739;
    --color-green-400: #00A84A;
    --color-green-450: #22C55E;
    --color-green-500: #007A2E;

    --color-aqua-300: #2E8B94;
    --color-blue-300: #6EC1E8;

    --color-magenta-300: #C58BC4;
    --color-magenta-500: #92278F;
    --color-magenta-600: #6E1D6C;

    --color-pink-300: #D9A6D8;
    --color-pink-500: #C724B1;

    /* Gelb traegt in der UI ueberwiegend Flaechen mit hellem Text
       darauf; die reinen Signaltoene (#F7B500, #FF9500) waeren dafuer
       zu hell und stehen deshalb nur bei den kleinen Schaltern. */
    --color-yellow-200: #A07500;
    --color-yellow-300: #8A6A00;
    --color-yellow-350: #8A5A00;
    --color-yellow-400: #A88A2E;
    --color-yellow-450: #C9B36B;
    --color-yellow-500: #FF9500;

    --color-purple-300: #5C6BC0;
    --color-purple-400: #1A237E;
    --color-purple-700: #14173F;

    /* ---------- Navigation ----------
       Im Original ein hellgrauer Reiter; hier Markenblau, damit die
       aktive Seite dieselbe Sprache spricht wie der Rest der Plattform. */
    --menu-a-selected-background-color: #007AC2;
    --menu-a-selected-text-color: #FFFFFF;
    --menu-a-hover-background-color: #004B87;
    --menu-a-hover-text-color: #FFFFFF;
    --rhs-a-selected-background-color: #007AC2;
    --rhs-a-selected-text-color: #FFFFFF;
    --rhs-a-hover-background-color: #004B87;
    --rhs-a-hover-text-color: #FFFFFF;

    --input-submit-background-color: #004B87;
    --input-submit-text-color: #FFFFFF;
    --input-submit-hover-background-color: #007AC2;

    /* Links auf dunklem Grund: das Signalblau der Akzentfarbe ist als
       Textfarbe zu dunkel, deshalb der hellere Ton der Blau-Rampe. */
    --a-default-hover-text-color: #6EC1E8;
    --tag-link-hover-text-color: #6EC1E8;
    --argument-link-hover-text-color: #6EC1E8;
    --table-list-td-a-hover-text-color: #6EC1E8;
    --table-list-th-a-sort-text-color-arrow: #6EC1E8;
    --main-sub-a-hover-text-color: #6EC1E8;

    --header-bottom-separator-color: rgba(255, 255, 255, 0.16);
    --footer-border-color: rgba(255, 255, 255, 0.08);
    --h3-bottom-border-color: rgba(255, 255, 255, 0.08);
}

/* Das Logo kommt als meteoCORE-Signet mit Schriftzug (Seitenverhaeltnis
   4.2:1) und passt nicht in die 204x37 aus dem HTML-Attribut. */
#logo img {
    width: auto;
    height: 38px;
    margin: 0.8em 0 0.2em 1em;
}

/* Eingabefelder haben in main.css keinen eigenen Hintergrund und fielen
   sonst auf das Browser-Grau aus "color-scheme: dark" zurueck. */
input[type=text],
input[type=password],
input[type=number],
input[type=search],
select,
textarea {
    background: var(--color-white-300);
    color: var(--color-grey-900);
    border: 1px solid var(--color-white-700);
    border-radius: 6px;
    padding: 4px 7px;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=search]:focus,
select:focus,
textarea:focus {
    border-color: #007AC2;
    outline: none;
}

input[type=submit] {
    border: none;
    border-radius: 6px;
}

/* Die Farben oben gelten unabhaengig vom Systemmodus -- der Umschalter
   haette damit keine sichtbare Wirkung mehr. */
.theme-switcher {
    display: none;
}

/* Marken-Webfonts wuerden Kopien der Font-Dateien in dieses Repo
   zwingen; das untersagt die Asset-Regel. Fuer ein Admin-Werkzeug
   traegt das Logo die Typografie ausreichend. */
body {
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}