:root {
  --renault-yellow: #ffcc00;
  --renault-black: #111111;
  --renault-white: #ffffff;
  --renault-gray: #f4f4f2;
}

body {
  background: var(--renault-gray);
  color: var(--renault-black);
}

.sidebar {
  background: linear-gradient(180deg, #080808, #171717 68%, #050505);
  border-right-color: #292929;
}

.brand {
  align-items: center;
}

.brand .renault-group-logo {
  width: 76px;
  height: 43px;
  object-fit: contain;
  background: #fff;
  border-radius: 7px;
  padding: 4px 6px;
}

.brand b,
.brand small {
  color: #fff;
}

.brand small,
.sidebar nav a,
.logout {
  color: #bdbdbd;
}

.nav-label {
  color: var(--renault-yellow);
}

.sidebar nav a.active,
.sidebar nav a:hover {
  color: #fff;
  background: #282828;
}

.sidebar nav a.active {
  box-shadow: inset 3px 0 var(--renault-yellow);
}

.sidebar nav a.active::after,
.connected i,
.online-dot {
  background: var(--renault-yellow);
}

.connected,
.session-user {
  border-color: #353535;
}

.metrics .metric-icon,
.avatar,
.dealer-icon,
.zone-pill {
  background: #fff7c9;
  color: #171717;
}

.metrics .accent,
.ticket.selected,
.ticket:hover {
  border-left-color: var(--renault-yellow);
}

.ticket.selected {
  background: linear-gradient(90deg, #fff8d6, #fffef8);
}

.ticket em {
  color: #806600;
}

.assignment {
  background: linear-gradient(90deg, #fff7c9, #fffdf3);
}

.message.out {
  background: #fff1a8;
  border-color: #f2d868;
}

.composer button,
.login-card button,
.primary-button,
.primary-btn {
  color: #111;
  background: var(--renault-yellow);
  box-shadow: 0 8px 18px #ffcc0038;
}

.composer textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: #d4aa00;
  outline: 2px solid #ffcc0033;
}

.login-page {
  background: linear-gradient(135deg, #070707, #222 70%, #3a3100);
}

.login-card {
  border-top: 5px solid var(--renault-yellow);
}

.login-renault-logo {
  display: block;
  width: 210px;
  max-width: 78%;
  height: auto;
  margin: 0 auto 18px;
}

.login-card h1 {
  color: #111;
}

@media (max-width: 700px) {
  .brand .renault-group-logo {
    width: 66px;
  }
}