@import "tailwindcss";

/* components/TopLoadingBar.css */
.top-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: transparent;
  z-index: 9999;
  overflow: hidden;
}

.loading-bar-progress {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #2ecc71, #3498db);
  background-size: 200% 100%;
  animation: gradient-animation 2s linear infinite, width-animation 0.3s ease;
  transition: width 0.3s ease;
}

@keyframes gradient-animation {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes width-animation {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.show-task-popover {
  opacity: 100%;
  visibility: visible;
  transform: translateX(0);
}

@layer components {
  .flex-center {
    @apply flex items-center justify-center;
  }
  .flex-overflow-auto {
    @apply flex-1 flex flex-col overflow-auto h-full;
  }
  .flex-overflow-hidden {
    @apply flex flex-col h-full overflow-hidden;
  }
  .border-card {
    @apply border border-[#f0f0f0] rounded-lg bg-white;
  }
  .border {
    @apply border border-[#f0f0f0];
  }
  .border-bottom {
    @apply border-b border-[#f0f0f0];
  }
  .border-top {
    @apply border-t border-[#f0f0f0];
  }
  .border-right {
    @apply border-r border-[#f0f0f0];
  }
  .border-left {
    @apply border-l border-[#f0f0f0];
  }
}