/*
 * SPDX-FileCopyrightText: 2023-2025 KUNBUS GmbH
 *
 * SPDX-License-Identifier: GPL-2.0-or-later
 */

:root{
    /* define revpi colors */
    --revpi-primary: #f60;
    --revpi-primary-lighter: #f90;
    --revpi-primary-darker: #f40;
    --revpi-dark: #313b3d;
    --revpi-light: #d0cdc8;
}

.login-note {
    color: var(--revpi-light);
    position: relative;
}

.login-pf .details {
    background-color: var(--revpi-dark);
}

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

/* bottom part of the login box */
.login-pf .container {
    background: #d0cdc8;
}


.login-pf .details {
    color: white;
}

.login-pf {
    background-color: var(--revpi-light);
}

#brand {
    font-size: 18pt;
    text-transform: uppercase;
    background-image: url("revolution-pi.png");
    background-size: 250px;
    background-repeat: no-repeat;
    width: auto;
    height: 50px;
}

#index-brand {
    font-weight: bold;
}

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

/* This sets the colors for the top and side navigation bars */
:root {
    /* small tab marker sidebar */
    --pf-c-nav__link--m-current--after--BorderColor: var(--revpi-primary);

    /* host Selector */
    --pf-c-select__toggle-text--Color: var(--revpi-primary);

    /* lonh vertical top line */
    --ct-color-host-accent: var(--revpi-primary);

    /* current sidebar selected tab bookmarker */
    --pf-global--active-color--400: var(--revpi-primary);

    /* sidebar background color */
    --ct-color-nav-menu: var(--revpi-dark);

    /* topnav backgroundcolor */
    --ct-topnav-background: var(--revpi-dark);

}

/* sidebar for dark theme */
.pf-theme-dark .area-ct-subnav {
    background-color: var(--revpi-dark)
}

.pf-theme-dark .view-hosts .sidebar-hosts{
    background-color: var(--revpi-dark)
}


.pf-c-select {
    background-color: var(--revpi-dark);
}

.pf-c-nav__section-title {
	border-color: var(--revpi-primary);
}

/* The following lines change the login button color and hover color */
body.login-pf .pf-m-primary {
    background-color: var(--revpi-primary);
    border-color: var(--revpi-primary);
}

body.login-pf .pf-m-primary:not([disabled]):hover {
    background-color: var(--revpi-primary-darker);
    border-color: var(--revpi-primary-darker);
    outline: none;
}


body.login-pf .pf-m-primary:active,
body.login-pf .pf-m-primary:not([disabled]):focus {
    background-color: var(--revpi-primary);
    border-color: var(--revpi-primary);
}


.pf-v6-c-nav__link {
    border-left: 2px solid transparent;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.pf-v6-c-nav__link.pf-m-current {
    border-left-color: var(--revpi-primary);
}