/* Client Layout Styles */

/* Poppins font global */
* {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

:root {
  --terravox-red: #FF2000;
  --terravox-yellow: #FFB700;
  --terravox-blue: #2185FB;
  --terravox-gray: #BDCCD4;
  --terravox-light-yellow: #FFEEC2;
  --terravox-light-blue: #E2EFFF;
  --terravox-light-red: #FDE9E9;
}

.bg-terravox-red { background-color: var(--terravox-red); }
.bg-terravox-yellow { background-color: var(--terravox-yellow); }
.bg-terravox-blue { background-color: var(--terravox-blue); }
.text-terravox-red { color: var(--terravox-red); }
.text-terravox-yellow { color: var(--terravox-yellow); }
.text-terravox-blue { color: var(--terravox-blue); }
.border-terravox-red { border-color: var(--terravox-red); }
.border-terravox-yellow { border-color: var(--terravox-yellow); }
.border-terravox-blue { border-color: var(--terravox-blue); }
.rounded-terravox { border-radius: 20px; }

/* Custom gradient classes for Terravox colors */
.bg-gradient-terravox-blue {
  background: linear-gradient(to right, var(--terravox-blue), #1d4ed8);
}
.bg-gradient-terravox-red {
  background: linear-gradient(to right, var(--terravox-red), #dc2626);
}
.bg-gradient-terravox-yellow {
  background: linear-gradient(to right, var(--terravox-yellow), #f59e0b);
}

.hover\:bg-terravox-red:hover { background-color: var(--terravox-red); }
.hover\:bg-terravox-yellow:hover { background-color: var(--terravox-yellow); }
.hover\:bg-terravox-blue:hover { background-color: var(--terravox-blue); }
.hover\:text-terravox-red:hover { color: var(--terravox-red); }
.hover\:text-terravox-yellow:hover { color: var(--terravox-yellow); }
.hover\:text-terravox-blue:hover { color: var(--terravox-blue); }

/* Background opacity classes */
.bg-terravox-red\/10 { background-color: rgba(255, 32, 0, 0.1); }
.bg-terravox-yellow\/10 { background-color: rgba(255, 183, 0, 0.1); }
.bg-terravox-blue\/10 { background-color: rgba(33, 133, 251, 0.1); }
.bg-terravox-blue\/5 { background-color: rgba(33, 133, 251, 0.05); }

.nav-item.active {
  background-color: var(--terravox-light-blue);
  color: var(--terravox-blue);
  font-weight: 600;
}

.notification-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: var(--terravox-red);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}