SkinbaseNova/resources/css/app.css

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

.form-label {
  @apply block text-sm text-soft mb-1;
}

.form-input {
  @apply w-full bg-deep border border-nova-500/30 rounded-lg px-4 py-2
         text-white placeholder-gray-500
         focus:outline-none focus:ring-2 focus:ring-accent;
}

.form-textarea {
  @apply w-full bg-deep border border-nova-500/30 rounded-lg px-4 py-2
         text-white resize-none
         focus:outline-none focus:ring-2 focus:ring-accent;
}

.form-file {
  @apply w-full text-sm text-soft
         file:bg-panel file:border-0 file:px-4 file:py-2
         file:rounded-lg file:text-white
         hover:file:bg-nova-600/40;
}

.btn-primary {
  @apply bg-accent text-deep px-6 py-2 rounded-lg
         font-medium hover:brightness-110 transition;
}

.btn-secondary {
  @apply bg-nova-500/30 text-white px-5 py-2 rounded-lg
         hover:bg-nova-500/50 transition;
}

@layer components {
  /* Ensure plain inputs, textareas and selects match the dark form styles
     so we don't end up with white backgrounds + white text. */
  input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select {
    @apply bg-deep text-white border border-nova-500/30 rounded-lg px-4 py-2
           placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-accent;
  }

  /* Keep file inputs styled separately (file controls use .form-file class).
     This prevents the native file button from inheriting the same padding. */
  input[type="file"] {
    @apply bg-transparent text-soft p-0;
  }
}


@layer base {
  *,:before,:after {
    box-sizing: border-box;
    border: 0 solid transparent;
  }
}

@layer utilities {
  .nova-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.14) transparent;
  }
  .nova-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  .nova-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .nova-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.14);
    border-radius: 999px;
  }
  .nova-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255,255,255,0.28);
  }
  .nova-scrollbar::-webkit-scrollbar-corner {
    background: transparent;
  }
}

/* ─── TipTap rich text editor ─── */
.tiptap {
  outline: none;
}

.tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: theme('colors.zinc.600');
  pointer-events: none;
  height: 0;
}

.tiptap img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.tiptap pre {
  background: theme('colors.white / 4%');
  border: 1px solid theme('colors.white / 6%');
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
}

.tiptap pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.8125rem;
  color: theme('colors.zinc.300');
}

.tiptap blockquote {
  border-left: 3px solid theme('colors.sky.500 / 40%');
  padding-left: 1rem;
  margin-left: 0;
  color: theme('colors.zinc.400');
  font-style: italic;
}

.tiptap hr {
  border: none;
  border-top: 1px solid theme('colors.white / 10%');
  margin: 1.5rem 0;
}

.tiptap ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

.tiptap ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
}

.tiptap li {
  margin-bottom: 0.25rem;
}

.tiptap a {
  color: theme('colors.sky.300');
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tiptap a:hover {
  color: theme('colors.sky.200');
}

/* ─── @mention pills ─── */
.tiptap .mention,
.mention {
  background: theme('colors.sky.500 / 15%');
  color: theme('colors.sky.300');
  border-radius: 0.375rem;
  padding: 0.125rem 0.375rem;
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.tiptap .mention:hover {
  background: theme('colors.sky.500 / 25%');
  color: theme('colors.sky.200');
}

/* ─── Tippy.js mention dropdown theme ─── */
.tippy-box[data-theme~='mention'] {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}

.tippy-box[data-theme~='mention'] .tippy-content {
  padding: 0;
}