body.login-pf {
    background: url("bg-plain.jpg") no-repeat 50% 0;
    background-size: cover;
    background-color: #101010;
}

#badge {
    width: 220px;
    height: 80px;
    background-image: url("logo.png");
    background-size: contain;
    background-repeat: no-repeat;
}

#brand {
    font-size: 18pt;
    text-transform: uppercase;
}

#brand:before {
    content: "Ubuntu 22.04.5 LTS";
}

#index-brand {
    content: "Ubuntu";
}

#index-brand:before {
    content: "Ubuntu";
}

/* BUB Cockpit branding 1.0 — shell and login, Cockpit 264 */
:root {
  color-scheme: light dark;
  --bub-bg: #f3f5f7; --bub-card: #fff; --bub-text: #182331;
  --bub-muted: #536274; --bub-line: #dce3ea;
  --bub-accent: #0066b3; --bub-soft: #eaf3fb;
  --ct-color-host-accent: var(--bub-accent);
  --ct-color-nav: var(--bub-card);
  --ct-color-nav-sub: var(--bub-card);
  --ct-color-nav-text: var(--bub-text);
  --ct-color-nav-active-text: var(--bub-accent);
  --pf-global--BackgroundColor--dark-100: var(--bub-card);
  --pf-global--BackgroundColor--dark-200: var(--bub-card);
  --pf-global--BackgroundColor--dark-300: var(--bub-soft);
  --pf-global--BackgroundColor--dark-400: var(--bub-soft);
  --pf-global--Color--light-100: var(--bub-text);
  --pf-global--Color--light-200: var(--bub-muted);
  --pf-global--active-color--100: var(--bub-accent);
  --pf-global--link--Color--light: var(--bub-accent);
  --pf-global--link--Color--light--hover: var(--bub-accent);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bub-bg: #151a20; --bub-card: #202830; --bub-text: #edf1f6;
    --bub-muted: #b0bdca; --bub-line: #394653;
    --bub-accent: #80c5ff; --bub-soft: #263c50;
  }
}
html.index-page body, body.login-pf {
  font: 15px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color: var(--bub-text); background: var(--bub-bg);
}
html.index-page #topnav, html.index-page #hosts-sel,
html.index-page #sidebar-toggle {
  background: var(--bub-card);
  color: var(--bub-text);
  border-bottom: 1px solid var(--bub-line);
  box-shadow: none;
}
html.index-page #nav-system, html.index-page #nav-hosts {
  background: var(--bub-card);
  color: var(--bub-text);
  border-right: 1px solid var(--bub-line);
}
html.index-page #content { background: var(--bub-bg); }
html.index-page .pf-c-nav {
  --pf-c-nav__link--Color: var(--bub-text);
  --pf-c-nav--m-dark__link--Color: var(--bub-text);
  --pf-c-nav__link--hover--Color: var(--bub-accent);
  --pf-c-nav--m-dark__link--hover--Color: var(--bub-accent);
  --pf-c-nav__link--hover--BackgroundColor: var(--bub-soft);
  --pf-c-nav--m-dark__link--hover--BackgroundColor: var(--bub-soft);
  --pf-c-nav__link--m-current--Color: var(--bub-accent);
  --pf-c-nav--m-dark__link--m-current--Color: var(--bub-accent);
  --pf-c-nav__link--m-current--BackgroundColor: var(--bub-soft);
  --pf-c-nav--m-dark__link--m-current--BackgroundColor: var(--bub-soft);
}
html.index-page #host-apps .pf-c-nav__link {
  margin: 3px 10px; border-radius: 6px; color: var(--bub-text);
}
html.index-page #host-apps .pf-c-nav__link:hover,
html.index-page #host-apps .pf-c-nav__link.pf-m-current,
html.index-page #host-apps .pf-m-current > .pf-c-nav__link {
  background: var(--bub-soft); color: var(--bub-accent);
}
html.index-page #host-apps .pf-c-nav__section-title {
  color: var(--bub-muted); font-size: 11px; font-weight: 750;
  letter-spacing: .12em; text-transform: uppercase;
}
html.index-page #topnav .pf-c-button,
html.index-page #hosts-sel .pf-c-select__toggle,
html.index-page #sidebar-toggle .pf-c-select__toggle {
  font-family: inherit; color: var(--bub-text); border-radius: 6px;
}
html.index-page #topnav .pf-c-button:hover {
  background: var(--bub-soft); color: var(--bub-accent);
}
body.login-pf { background-image: none; min-height: 100vh; }
body.login-pf #badge { display: none; }
body.login-pf #brand {
  color: var(--bub-accent); font: 650 28px/1.2 system-ui,sans-serif;
  letter-spacing: -.025em; text-transform: none;
}
body.login-pf #brand::before { content: "Serververwaltung"; }
body.login-pf .container, body.login-pf .container-fluid,
body.login-pf .card-pf {
  background: var(--bub-card); color: var(--bub-text);
}
body.login-pf .container {
  border: 1px solid var(--bub-line); border-radius: 9px;
  box-shadow: none;
}
body.login-pf label, body.login-pf .help-block,
body.login-pf #server-name { color: var(--bub-muted); }
body.login-pf input.form-control, body.login-pf select.form-control {
  background: var(--bub-card); color: var(--bub-text);
  border: 1px solid var(--bub-line); border-radius: 6px;
  font: inherit; box-shadow: none;
}
body.login-pf .btn { font: inherit; border-radius: 6px; }
body.login-pf .btn-primary {
  background: var(--bub-accent); color: var(--bub-card);
  border: 1px solid var(--bub-accent); background-image: none;
}
body.login-pf a { color: var(--bub-accent); }
html.index-page a:focus-visible, html.index-page button:focus-visible,
body.login-pf a:focus-visible, body.login-pf button:focus-visible,
body.login-pf input:focus-visible {
  outline: 3px solid var(--bub-accent); outline-offset: 3px;
}

/* Lesbarkeit der Anmeldehinweise */
body.login-pf #login-details {
    background: var(--bub-card) !important;
}
body.login-pf #login-details,
body.login-pf #login-details * {
    color: var(--bub-text) !important;
}
body.login-pf #login-details a {
    color: var(--bub-accent) !important;
}