@tailwind base;
@tailwind components;
@tailwind utilities;

:root{
  --brand:#f5c542;
  --header-h:100px;
  --sidebar-w:274px;
}
html,body{ height:100%; }
body{ @apply bg-slate-50 text-slate-800; }

/* Responsive helpers */
img, svg, video, canvas { max-width: 100%; height: auto; }
pre { white-space: pre-wrap; word-break: break-word; }
.overflow-x-auto { -webkit-overflow-scrolling: touch; }
.table-responsive { width: 100%; overflow-x: auto; }

/* Make wide tables on small screens scrollable */
@media (max-width: 640px) {
  table { display: block; width: 100%; overflow-x: auto; border-spacing: 0; }
  thead { display: table-header-group; }
  tbody { display: table-row-group; }
}

/* NProgress Customization */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #ec4899 !important;
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.4);
}

#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 120px;
  height: 100%;
  box-shadow: 
    0 0 15px #ec4899, 
    0 0 8px #ec4899,
    0 2px 12px rgba(236, 72, 153, 0.5);
  opacity: 1.0;
  transform: rotate(3deg) translate(0px, -4px);
  background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.6), #ec4899);
  border-radius: 0 2px 2px 0;
}

#nprogress .spinner {
  display: none !important;
}

/* Animation pour une transition plus fluide */
#nprogress .bar {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  animation: pulse-glow 2s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.4);
  }
  100% {
    box-shadow: 0 2px 12px rgba(236, 72, 153, 0.6);
  }
}
