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

/* Naton credit glow – dark backgrounds (sidebar) */
.naton-credit-dark {
  position: relative;
  background: linear-gradient(
    90deg,
    rgba(100, 116, 139, 1) 0%,
    rgba(100, 116, 139, 1) 40%,
    rgba(255, 255, 255, 1) 50%,
    rgba(180, 180, 180, 1) 55%,
    rgba(100, 116, 139, 1) 60%,
    rgba(100, 116, 139, 1) 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: naton-glow 4s ease-in-out infinite;
}

.naton-credit-dark:hover {
  background: linear-gradient(
    90deg,
    rgba(200, 200, 200, 1) 0%,
    rgba(255, 255, 255, 1) 30%,
    rgba(180, 180, 180, 1) 60%,
    rgba(255, 255, 255, 1) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: naton-glow-hover 2s ease-in-out infinite;
}

/* Naton credit glow – light backgrounds (login page) */
.naton-credit-light {
  position: relative;
  background: linear-gradient(
    90deg,
    rgba(156, 163, 175, 1) 0%,
    rgba(156, 163, 175, 1) 40%,
    rgba(55, 65, 81, 1) 50%,
    rgba(107, 114, 128, 1) 55%,
    rgba(156, 163, 175, 1) 60%,
    rgba(156, 163, 175, 1) 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: naton-glow 4s ease-in-out infinite;
}

.naton-credit-light:hover {
  background: linear-gradient(
    90deg,
    rgba(75, 85, 99, 1) 0%,
    rgba(31, 41, 55, 1) 30%,
    rgba(75, 85, 99, 1) 60%,
    rgba(31, 41, 55, 1) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: naton-glow-hover 2s ease-in-out infinite;
}

@keyframes naton-glow {
  0%, 100% { background-position: 100% 0; }
  50% { background-position: 0% 0; }
}

@keyframes naton-glow-hover {
  0% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

/* TipTap rich text editor styles */
.tiptap-editor .ProseMirror {
  @apply min-h-[300px] outline-none;
}

.tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
  @apply text-gray-400 pointer-events-none float-left h-0;
  content: attr(data-placeholder);
}

.tiptap-editor .ProseMirror h1 { @apply text-3xl font-bold mb-4 mt-6; }
.tiptap-editor .ProseMirror h2 { @apply text-2xl font-bold mb-3 mt-5; }
.tiptap-editor .ProseMirror h3 { @apply text-xl font-bold mb-2 mt-4; }
.tiptap-editor .ProseMirror p  { @apply mb-3 leading-relaxed; }
.tiptap-editor .ProseMirror ul { @apply list-disc pl-6 mb-3; }
.tiptap-editor .ProseMirror ol { @apply list-decimal pl-6 mb-3; }
.tiptap-editor .ProseMirror li { @apply mb-1; }
.tiptap-editor .ProseMirror blockquote { @apply border-l-4 border-gray-300 pl-4 italic my-4 text-gray-600; }
.tiptap-editor .ProseMirror code { @apply bg-gray-100 text-red-600 px-1 rounded text-sm font-mono; }
.tiptap-editor .ProseMirror pre { @apply bg-gray-900 text-gray-100 p-4 rounded-lg mb-4 overflow-x-auto; }
.tiptap-editor .ProseMirror pre code { @apply bg-transparent text-inherit p-0; }
.tiptap-editor .ProseMirror hr { @apply border-gray-300 my-6; }
.tiptap-editor .ProseMirror a { @apply text-blue-600 underline hover:text-blue-800; }
.tiptap-editor .ProseMirror img { @apply max-w-full h-auto rounded my-4; }