/* Cyan Theme Variables and Utilities */
/* This file provides cyan-specific styling for the dashboard */

:root {
  --color-cyan: #2ED1F4;
  --color-cyan-dark: #1abbd9;
  --color-cyan-light: #5EDFFF;
}

/* Cyan text utility */
.text-cyan {
  color: var(--color-cyan);
}

/* Cyan underline animation for page headers */
.cyan-underline {
  position: relative;
  display: inline-block;
}

.cyan-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-cyan), var(--color-cyan-light));
  border-radius: 2px;
  animation: underlineGrow 0.6s ease-out forwards;
}

@keyframes underlineGrow {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 100%;
    opacity: 1;
  }
}

/* Cyan border utility */
.border-cyan {
  border-color: var(--color-cyan);
}

/* Cyan background utility */
.bg-cyan {
  background-color: var(--color-cyan);
}

/* Cyan gradient backgrounds */
.bg-gradient-cyan {
  background: linear-gradient(135deg, var(--color-cyan-dark), var(--color-cyan));
}

/* Cyan glow effect */
.glow-cyan {
  box-shadow: 0 0 20px rgba(46, 209, 244, 0.3);
}

/* Cyan hover states */
.hover\:text-cyan:hover {
  color: var(--color-cyan);
}

.hover\:bg-cyan:hover {
  background-color: var(--color-cyan);
}