:root {
  --wiit-teal: #4ec2bb;
  --wiit-teal-soft: #80cdc9;
  --wiit-lime: #b6e756;
  --wiit-lime-dark: #a7d94b;
  --wiit-ink: #1e1e22;
  --wiit-text: #4e4e4e;
  --wiit-line: #e7e7e7;
  --wiit-surface: #ffffff;
  --wiit-bg: #f4f9f8;
  --tblr-primary: var(--wiit-teal);
  --tblr-primary-rgb: 78, 194, 187;
  --tblr-link-color: #319b96;
  --tblr-link-hover-color: #267f7a;
  --glpi-logo-light: url('/pics/wiit/Logo-Wiit-1.png');
  --glpi-logo-dark: url('/pics/wiit/Logo-Wiit-1.png');
  --glpi-logo-light-reduced: url('/pics/wiit/favicon-192.png');
  --glpi-logo-dark-reduced: url('/pics/wiit/favicon-192.png');
  --glpi-logo-dark-login: url('/pics/wiit/Logo-Wiit-1.png');
  --glpi-logo-light-login: url('/pics/wiit/Logo-Wiit-1.png');
}

html,
body {
  color: var(--wiit-text);
}

body.welcome-anonymous {
  background-color: var(--wiit-bg);
  background-image: radial-gradient(rgba(78, 194, 187, .18) 1px, transparent 1px), linear-gradient(135deg, #ffffff 0%, #f4f9f8 62%, #eef8df 100%);
  background-size: 30px 30px, auto;
}

.glpi-logo {
  background-image: url('/pics/wiit/Logo-Wiit-1.png') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  width: 112px !important;
  height: 72px !important;
}

.page-anonymous .glpi-logo {
  width: 164px !important;
  height: 106px !important;
}

.sidebar .glpi-logo,
.navbar-brand .glpi-logo {
  width: 96px !important;
  height: 62px !important;
}

.main-content-card,
.card {
  border-color: var(--wiit-line);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(30, 30, 34, .07);
}

.page-anonymous .main-content-card {
  border-top: 6px solid var(--wiit-teal);
}

.card-header h2,
.page-title,
h1,
h2,
h3 {
  color: var(--wiit-ink);
}

.btn-primary,
.btn.btn-primary {
  background: var(--wiit-lime);
  border-color: var(--wiit-lime);
  color: var(--wiit-ink);
  font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
  background: var(--wiit-lime-dark) !important;
  border-color: var(--wiit-lime-dark) !important;
  color: var(--wiit-ink) !important;
  box-shadow: 0 8px 18px rgba(182, 231, 86, .28);
}

.form-control:focus,
.form-select:focus,
.ts-control.focus,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--wiit-teal);
  box-shadow: 0 0 0 .2rem rgba(78, 194, 187, .16);
}

.sidebar {
  background: var(--wiit-surface);
  border-right: 1px solid var(--wiit-line);
}

.navbar-vertical .navbar-nav .nav-link {
  color: #243536 !important;
  font-weight: 600;
}

.navbar-vertical .navbar-nav .nav-link .nav-link-title,
.navbar-vertical .navbar-nav .nav-link .nav-link-icon,
.navbar-vertical .navbar-nav .nav-link i {
  color: inherit !important;
  opacity: 1;
}

.navbar-vertical .navbar-nav .nav-link.active,
.navbar-vertical .navbar-nav .nav-link.show,
.navbar-vertical .navbar-nav .nav-link:hover {
  color: var(--wiit-ink);
  background: rgba(78, 194, 187, .10);
}

.navbar-vertical .navbar-nav .nav-link.active::before {
  background: var(--wiit-teal);
}

.badge.bg-primary,
.bg-primary,
.progress-bar {
  background-color: var(--wiit-teal) !important;
}

a,
.text-primary {
  color: #319b96 !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--wiit-teal);
}

.table thead th,
.search-header,
.itil-object .timeline-item .timeline-item-header {
  background-color: #f8fbfb;
}

/* WIIT sidebar contrast fix - 2026-07-08 */
.sidebar,
.navbar-vertical {
  --tblr-navbar-color: #2f3f42;
  --tblr-navbar-active-color: #1e1e22;
  --tblr-navbar-hover-color: #1e1e22;
  --tblr-navbar-disabled-color: #6f7f82;
  --tblr-navbar-bg: #ffffff;
  --tblr-navbar-active-bg: rgba(78, 194, 187, .13);
  --tblr-navbar-hover-bg: rgba(78, 194, 187, .08);
  color: #2f3f42 !important;
}

.sidebar .navbar-nav > .nav-item > .nav-link,
.navbar-vertical .navbar-nav > .nav-item > .nav-link,
.sidebar .navbar-nav > .nav-item > .nav-link .nav-link-title,
.navbar-vertical .navbar-nav > .nav-item > .nav-link .nav-link-title,
.sidebar .navbar-nav > .nav-item > .nav-link .menu-label,
.navbar-vertical .navbar-nav > .nav-item > .nav-link .menu-label {
  color: #2f3f42 !important;
  opacity: 1 !important;
}

.sidebar .navbar-nav > .nav-item > .nav-link svg,
.sidebar .navbar-nav > .nav-item > .nav-link i,
.sidebar .navbar-nav > .nav-item > .nav-link .nav-link-icon,
.navbar-vertical .navbar-nav > .nav-item > .nav-link svg,
.navbar-vertical .navbar-nav > .nav-item > .nav-link i,
.navbar-vertical .navbar-nav > .nav-item > .nav-link .nav-link-icon {
  color: #319b96 !important;
  stroke: #319b96 !important;
  opacity: 1 !important;
}

.sidebar .navbar-nav > .nav-item > .nav-link:hover,
.sidebar .navbar-nav > .nav-item > .nav-link:focus,
.sidebar .navbar-nav > .nav-item > .nav-link.show,
.sidebar .navbar-nav > .nav-item > .nav-link.active,
.navbar-vertical .navbar-nav > .nav-item > .nav-link:hover,
.navbar-vertical .navbar-nav > .nav-item > .nav-link:focus,
.navbar-vertical .navbar-nav > .nav-item > .nav-link.show,
.navbar-vertical .navbar-nav > .nav-item > .nav-link.active {
  background-color: rgba(78, 194, 187, .13) !important;
  color: #1e1e22 !important;
}

.sidebar .navbar-nav > .nav-item > .nav-link:hover .nav-link-title,
.sidebar .navbar-nav > .nav-item > .nav-link:focus .nav-link-title,
.sidebar .navbar-nav > .nav-item > .nav-link.show .nav-link-title,
.sidebar .navbar-nav > .nav-item > .nav-link.active .nav-link-title,
.navbar-vertical .navbar-nav > .nav-item > .nav-link:hover .nav-link-title,
.navbar-vertical .navbar-nav > .nav-item > .nav-link:focus .nav-link-title,
.navbar-vertical .navbar-nav > .nav-item > .nav-link.show .nav-link-title,
.navbar-vertical .navbar-nav > .nav-item > .nav-link.active .nav-link-title {
  color: #1e1e22 !important;
}

.sidebar .form-control,
.sidebar .form-control::placeholder,
.navbar-vertical .form-control,
.navbar-vertical .form-control::placeholder {
  color: #536467 !important;
  opacity: 1 !important;
}


/* WIIT sidebar hard contrast fix - 2026-07-08 */
aside.navbar.navbar-vertical,
.navbar.navbar-vertical,
.sidebar {
  background-color: #ffffff !important;
  --tblr-navbar-color: #2f3f42 !important;
  --tblr-navbar-hover-color: #1e1e22 !important;
  --tblr-navbar-active-color: #1e1e22 !important;
  --tblr-navbar-disabled-color: #5f7073 !important;
  --tblr-disabled-color: #5f7073 !important;
}

aside.navbar.navbar-vertical .navbar-nav > .nav-item,
.navbar.navbar-vertical .navbar-nav > .nav-item,
.sidebar .navbar-nav > .nav-item {
  opacity: 1 !important;
  filter: none !important;
}

aside.navbar.navbar-vertical .navbar-nav > .nav-item > a,
aside.navbar.navbar-vertical .navbar-nav > .nav-item > button,
aside.navbar.navbar-vertical .navbar-nav > .nav-item > .nav-link,
.navbar.navbar-vertical .navbar-nav > .nav-item > a,
.navbar.navbar-vertical .navbar-nav > .nav-item > button,
.navbar.navbar-vertical .navbar-nav > .nav-item > .nav-link,
.sidebar .navbar-nav > .nav-item > a,
.sidebar .navbar-nav > .nav-item > button,
.sidebar .navbar-nav > .nav-item > .nav-link {
  color: #2f3f42 !important;
  opacity: 1 !important;
  filter: none !important;
}

aside.navbar.navbar-vertical .navbar-nav > .nav-item > a *,
aside.navbar.navbar-vertical .navbar-nav > .nav-item > button *,
aside.navbar.navbar-vertical .navbar-nav > .nav-item > .nav-link *,
.navbar.navbar-vertical .navbar-nav > .nav-item > a *,
.navbar.navbar-vertical .navbar-nav > .nav-item > button *,
.navbar.navbar-vertical .navbar-nav > .nav-item > .nav-link *,
.sidebar .navbar-nav > .nav-item > a *,
.sidebar .navbar-nav > .nav-item > button *,
.sidebar .navbar-nav > .nav-item > .nav-link * {
  color: inherit !important;
  opacity: 1 !important;
  filter: none !important;
}

aside.navbar.navbar-vertical .navbar-nav > .nav-item > a svg,
aside.navbar.navbar-vertical .navbar-nav > .nav-item > button svg,
aside.navbar.navbar-vertical .navbar-nav > .nav-item > .nav-link svg,
.navbar.navbar-vertical .navbar-nav > .nav-item > a svg,
.navbar.navbar-vertical .navbar-nav > .nav-item > button svg,
.navbar.navbar-vertical .navbar-nav > .nav-item > .nav-link svg,
.sidebar .navbar-nav > .nav-item > a svg,
.sidebar .navbar-nav > .nav-item > button svg,
.sidebar .navbar-nav > .nav-item > .nav-link svg {
  color: #319b96 !important;
  stroke: #319b96 !important;
  opacity: 1 !important;
}

aside.navbar.navbar-vertical .navbar-nav > .nav-item.active > .nav-link,
aside.navbar.navbar-vertical .navbar-nav > .nav-item > .nav-link.active,
aside.navbar.navbar-vertical .navbar-nav > .nav-item > .nav-link.show,
.navbar.navbar-vertical .navbar-nav > .nav-item.active > .nav-link,
.navbar.navbar-vertical .navbar-nav > .nav-item > .nav-link.active,
.navbar.navbar-vertical .navbar-nav > .nav-item > .nav-link.show,
.sidebar .navbar-nav > .nav-item.active > .nav-link,
.sidebar .navbar-nav > .nav-item > .nav-link.active,
.sidebar .navbar-nav > .nav-item > .nav-link.show {
  color: #1e1e22 !important;
  background-color: rgba(78, 194, 187, .13) !important;
}

/* WIIT topbar and dropdown contrast fix - 2026-07-08 */
.navbar:not(.navbar-vertical) .nav-link,
.navbar:not(.navbar-vertical) .nav-link .text-muted,
.navbar:not(.navbar-vertical) .nav-link .text-secondary,
.navbar:not(.navbar-vertical) .dropdown-toggle,
.navbar:not(.navbar-vertical) .dropdown-toggle * {
  color: #2f3f42 !important;
  opacity: 1 !important;
}

.navbar:not(.navbar-vertical) .dropdown-menu,
.dropdown-menu {
  color: #2f3f42 !important;
}

.navbar:not(.navbar-vertical) .dropdown-menu .dropdown-item,
.navbar:not(.navbar-vertical) .dropdown-menu .dropdown-item *,
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item * {
  color: #2f3f42 !important;
  opacity: 1 !important;
}

.navbar:not(.navbar-vertical) .dropdown-menu .dropdown-item:hover,
.navbar:not(.navbar-vertical) .dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: rgba(78, 194, 187, .13) !important;
  color: #1e1e22 !important;
}

.navbar:not(.navbar-vertical) .dropdown-menu .dropdown-item.active,
.navbar:not(.navbar-vertical) .dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background-color: var(--wiit-teal) !important;
  color: #ffffff !important;
}