/* Bluehood Dashboard - custom styles */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-feature-settings: "ss01","cv11"; }

/* Alpine.js x-cloak - hide elements until Alpine is initialized */
[x-cloak] { display: none !important; }

/* Make form elements inherit text color (fixes dark mode black text) */
input, textarea, select, button {
  color: inherit;
  font-family: inherit;
}

/* Ensure select options are readable in dark mode */
.dark select option { background: #0e0e18; color: #e8e6f0; }

/* Native color/date pickers in dark mode */
.dark input[type="date"],
.dark input[type="color"],
.dark input[type="url"],
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark textarea,
.dark select {
  color-scheme: dark;
}

/* Editable inline fields */
.field-edit {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 10px;
  width: 100%;
  transition: background .15s, border-color .15s;
  font: inherit;
  color: inherit;
}
.field-edit:hover { background: rgba(91,76,240,0.06); }
.field-edit:focus {
  outline: none;
  background: rgba(91,76,240,0.08);
  border-color: rgba(91,76,240,0.35);
}
.dark .field-edit:hover { background: rgba(255,255,255,0.04); }
.dark .field-edit:focus { background: rgba(91,76,240,0.10); border-color: rgba(123,108,240,0.45); }

/* Saving spinner pulse */
.saving::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px; margin-left: 8px;
  border-radius: 50%;
  background: #5b4cf0;
  animation: pulse 1s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(91,76,240,0.25); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(91,76,240,0.45); }

/* Status pill colors */
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.pill-concept    { background:#5b4cf015; color:#7b6cf0; }
.pill-prototype  { background:#3dffaa15; color:#3dffaa; }
.pill-production { background:#ffaa3d15; color:#ffaa3d; }
.pill-beta       { background:#ff5b9415; color:#ff5b94; }
.pill-released   { background:#3dff9a15; color:#3dff9a; }
.pill-on_hold    { background:#88888815; color:#888888; }
.pill-cancelled  { background:#ff3d3d15; color:#ff6b6b; }

/* Cover gradient placeholder */
.cover-grad {
  background: radial-gradient(ellipse at top left, var(--accent, #5b4cf0) 0%, #08080f 70%);
}

/* Smooth fade-in */
.fade-in { animation: fade .25s ease-out; }
@keyframes fade { from { opacity:0; transform: translateY(4px) } to { opacity:1; transform:none } }

/* Hide number input arrows */
input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; }

/* Markdown-ish notes textarea */
.notes-area {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  resize: vertical;
  min-height: 200px;
}