/* =========================================================
   MyIT / iTernity Corporate Theme
   ========================================================= */

:root {
    --iternity-green: #8EB900;
    --iternity-green-light: #A5CD39;
    --iternity-green-dark: #708F00;

    --iternity-gray-dark: #565656;
    --iternity-gray: #8A8A8A;
    --iternity-gray-light: #E1E1E1;

    --iternity-background: #F5F5F5;
    --iternity-white: #FFFFFF;

    /* Tabler / GLPI Primary Color */
    --tblr-primary: #8EB900 !important;
    --tblr-primary-rgb: 142, 185, 0 !important;
    --tblr-link-color: #708F00 !important;
    --tblr-link-hover-color: #566E00 !important;
}


/* =========================================================
   PRIMARY BUTTONS
   ========================================================= */

.btn-primary {
    background-color: var(--iternity-green) !important;
    border-color: var(--iternity-green) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--iternity-green-dark) !important;
    border-color: var(--iternity-green-dark) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--iternity-green) !important;
    border-color: var(--iternity-green) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--iternity-green) !important;
    border-color: var(--iternity-green) !important;
}


/* =========================================================
   LINKS / PRIMARY ELEMENTS
   ========================================================= */

.text-primary {
    color: var(--iternity-green-dark) !important;
}

.bg-primary {
    background-color: var(--iternity-green) !important;
}

.border-primary {
    border-color: var(--iternity-green) !important;
}

a:not(.nav-link):not(.btn) {
    --tblr-link-color-rgb: 112, 143, 0;
}

main a:not(.btn):not(.nav-link) {
    color: var(--iternity-green-dark);
}

main a:not(.btn):not(.nav-link):hover {
    color: #566E00;
}


/* =========================================================
   SIDEBAR / NAVIGATION
   Blau -> Grau
   ========================================================= */

.navbar-vertical,
aside.navbar-vertical {
    background-color: var(--iternity-gray-dark) !important;
    border-color: var(--iternity-gray-dark) !important;
}

.navbar-vertical .nav-link {
    color: rgba(255, 255, 255, 0.90) !important;
}

.navbar-vertical .nav-link .icon,
.navbar-vertical .nav-link svg {
    color: inherit !important;
    stroke: currentColor !important;
}

.navbar-vertical .nav-link:hover {
    color: var(--iternity-green-light) !important;
}

.navbar-vertical .nav-link.active,
.navbar-vertical .nav-item.active > .nav-link {
    color: var(--iternity-green-light) !important;
    font-weight: 600;
}


/* Dunkle horizontale GLPI Navigation */

header.navbar.navbar-dark,
nav.navbar.navbar-dark {
    background-color: var(--iternity-gray-dark) !important;
}

.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.92) !important;
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link.active {
    color: var(--iternity-green-light) !important;
}


/* =========================================================
   FORM ELEMENTS
   ========================================================= */

.form-check-input:checked {
    background-color: var(--iternity-green) !important;
    border-color: var(--iternity-green) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--iternity-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(142, 185, 0, 0.15) !important;
}


/* =========================================================
   PAGINATION / ACTIVE ELEMENTS
   ========================================================= */

.page-item.active .page-link {
    background-color: var(--iternity-green) !important;
    border-color: var(--iternity-green) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--iternity-green) !important;
    color: #fff !important;
}

.list-group-item.active {
    background-color: var(--iternity-green) !important;
    border-color: var(--iternity-green) !important;
}


/* =========================================================
   BADGES / SMALL BRANDING ELEMENTS
   ========================================================= */

.badge.bg-primary {
    background-color: var(--iternity-green) !important;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

body:not(.login-page) {
    --tblr-body-bg: var(--iternity-background);
}


/* =========================================================
   Accessibility
   ========================================================= */

.btn-primary:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--iternity-green-dark);
    outline-offset: 2px;
}

/* =========================================================
   MyIT Self-Service / Helpdesk Home
   ========================================================= */

/* Allgemeiner Seitenhintergrund */
body {
    background-color: #F5F5F5 !important;
}

/* Hauptbereich */
.page-wrapper,
.page-body,
main {
    background-color: #F5F5F5 !important;
}


/* =========================================================
   HELPDESK HERO
   bisher Blau -> helles neutrales Grau
   ========================================================= */

.helpdesk-home-header,
.helpdesk-home-hero,
.helpdesk-home-welcome,
[class*="helpdesk"][class*="header"],
[class*="helpdesk"][class*="hero"] {
    background-color: #EEF0ED !important;
}

/* Falls GLPI den Hero über einen direkten Container färbt */
body:has(a[href*="ServiceCatalog"]) .page-body > div:first-child {
    background-color: #EEF0ED;
}


/* =========================================================
   HERO TITLE
   ========================================================= */

.helpdesk-home-header h1,
.helpdesk-home-hero h1,
.helpdesk-home-welcome h1,
main h1 {
    color: #3F4542;
}


/* =========================================================
   SELF-SERVICE NAVIGATION
   ========================================================= */

.navbar {
    background-color: #565656;
}

.navbar .nav-link {
    color: #F2F2F2 !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
    color: #A5CD39 !important;
}


/* =========================================================
   HOME TILES / CARDS
   ========================================================= */

.card {
    background-color: #FFFFFF;
    border-color: #DADDD7;
}

/* Self-Service Kacheln */
a.card,
.card a {
    text-decoration: none;
}

.card:hover {
    border-color: #8EB900;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

/* Titel der Kacheln */
.card-title,
.card h3,
.card h4,
.card h5 {
    color: #708F00;
}


/* =========================================================
   CONTENT AREAS
   ========================================================= */

.bg-light,
.bg-body-secondary {
    background-color: #F5F5F5 !important;
}

.bg-white {
    background-color: #FFFFFF !important;
}


/* =========================================================
   TABS
   z.B. Aktuelle Tickets / Gelöste Tickets
   ========================================================= */

.nav-tabs {
    border-bottom-color: #DADDD7 !important;
}

.nav-tabs .nav-link {
    color: #666666 !important;
}

.nav-tabs .nav-link:hover {
    color: #708F00 !important;
}

.nav-tabs .nav-link.active {
    color: #708F00 !important;
    border-color: #DADDD7 #DADDD7 #FFFFFF !important;
}


/* =========================================================
   FORM / INPUT ELEMENTS
   ========================================================= */

.form-control,
.form-select {
    border-color: #DADDD7;
}

.form-control:focus,
.form-select:focus {
    border-color: #8EB900 !important;
    box-shadow: 0 0 0 .2rem rgba(142,185,0,.15) !important;
}


/* =========================================================
   AVATAR / USER AREA
   ========================================================= */

.avatar {
    background-color: #E1E1E1 !important;
    color: #565656 !important;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    --tblr-link-color: #708F00;
    --tblr-link-hover-color: #566E00;
}


/* =========================================================
   SELECTION / HIGHLIGHTS
   ========================================================= */

::selection {
    background-color: #A5CD39;
    color: #1F1F1F;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {
    .helpdesk-home-header,
    .helpdesk-home-hero,
    .helpdesk-home-welcome {
        background-color: #EEF0ED !important;
    }
}

/* =========================================================
   MyIT Helpdesk Hero
   ========================================================= */

.search-banner {
    background: #EEF0ED !important;
    background-color: #EEF0ED !important;
}

/* Überschrift im Hero */
.search-banner h1 {
    color: #3F4542 !important;
}

/* Unterer Seitenbereich ebenfalls neutral */
.page-body,
.page-wrapper {
    background-color: #F5F5F5 !important;
}

/* =========================================================
   MyIT Hero - final light version
   ========================================================= */

.search-banner {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* Hero headline in iTernity green */
.search-banner h1 {
    color: #8EB900 !important;
}

/* Optional etwas klarer / hochwertiger */
.search-banner h1 {
    font-weight: 700 !important;
}

/* Bereich unterhalb ebenfalls neutral */
.page-body,
.page-wrapper {
    background-color: #F5F5F5 !important;
}