/* HTMX loading indicators (show only during requests). */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator {
  display: inline-block;
}

@keyframes gravity-spin {
  to {
    transform: rotate(360deg);
  }
}

.gravity-animate-spin {
  animation: gravity-spin 0.85s linear infinite;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply min-h-screen bg-slate-100 text-slate-800 antialiased;
  }
}

@layer base {
  /* Remove default summary marker across all browsers */
  summary {
    list-style: none;
  }
  summary::-webkit-details-marker {
    display: none;
  }

  /* Chevron rotation for vertical open/close */
  details[open] > summary .ui-chevron {
    transform: rotate(90deg);
  }
}

@layer components {
  /**
   * HTMX label/module/epic autocomplete (issue detail + intake).
   * Ensures lists are not clipped by nested scroll / stacking; survives stale Tailwind builds.
   */
  .gravity-hx-autocomplete-root {
    position: relative;
    z-index: 60;
    overflow: visible;
  }

  .issue-detail-properties-card {
    overflow: visible;
  }

  .ui-layout-shell {
    @apply flex min-h-screen;
  }

  .ui-sidebar {
    @apply w-64 shrink-0 border-r border-slate-200 bg-slate-50 transition-all duration-200;
  }

  .ui-layout-content {
    @apply min-w-0 flex-1;
  }

  .sidebar-section {
    @apply rounded-md;
  }

  .sidebar-section-title {
    @apply flex cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-xs font-semibold uppercase tracking-wide text-slate-500 hover:bg-slate-100;
  }

  .sidebar-section-content {
    @apply mt-1 space-y-1 pl-2;
  }

  .sidebar-link {
    @apply flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-slate-700 hover:bg-slate-100;
  }

  body.sidebar-collapsed .ui-sidebar {
    @apply w-16;
  }

  body.sidebar-collapsed .sidebar-label {
    @apply hidden;
  }

  body.sidebar-collapsed .sidebar-section-content {
    @apply hidden;
  }

  .ui-page-shell {
    @apply min-h-screen bg-slate-100;
  }

  .ui-topbar {
    @apply sticky top-0 z-20 border-b border-slate-200 bg-white/95 backdrop-blur;
  }

  .ui-label {
    @apply mb-1 block text-[11px] font-semibold uppercase tracking-wide text-slate-500;
  }

  .ui-input {
    @apply w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200;
  }

  .ui-select {
    @apply ui-input;
  }

  .ui-textarea {
    @apply ui-input min-h-24 resize-y;
  }

  .ui-button {
    @apply inline-flex items-center justify-center rounded-md border border-slate-300 px-3 py-2 text-sm font-medium transition duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-100 disabled:cursor-not-allowed disabled:opacity-50;
  }

  .ui-button--primary {
    @apply border-slate-900 bg-slate-900 text-white hover:bg-slate-700 hover:border-slate-700;
  }

  .ui-button--secondary {
    @apply bg-white text-slate-700 hover:bg-slate-50;
  }

  .ui-button--ghost {
    @apply border-transparent bg-transparent text-slate-600 hover:bg-slate-200;
  }

  .ui-button--danger {
    @apply border-red-500 bg-red-500 text-white hover:bg-red-400 hover:border-red-400;
  }

  .ui-card {
    @apply rounded-lg border border-slate-200 bg-white p-4 shadow-sm;
  }

  .ui-toast {
    @apply pointer-events-auto flex items-start gap-3 rounded-md border px-4 py-3 text-sm shadow-md;
  }

  .ui-toast--success {
    @apply border-emerald-200 bg-emerald-50 text-emerald-900;
  }

  .ui-toast--warning {
    @apply border-amber-200 bg-amber-50 text-amber-900;
  }

  .ui-toast--danger {
    @apply border-rose-200 bg-rose-50 text-rose-900;
  }

  .ui-toast--error {
    @apply border-rose-200 bg-rose-50 text-rose-900;
  }

  .ui-toast--info {
    @apply border-sky-200 bg-sky-50 text-sky-900;
  }

  .ui-toast__close {
    @apply rounded px-2 py-1 text-xs font-medium text-current opacity-80 hover:bg-black/5 hover:opacity-100;
  }

  .ui-chevron {
    @apply inline-block transition-transform duration-200;
  }

  .new-column-accordion-body {
    @apply overflow-hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.2s ease, opacity 0.2s ease;
  }

  .new-column-accordion[open] .new-column-accordion-body {
    max-height: 8rem;
    opacity: 1;
  }

  .ui-modal-backdrop {
    @apply fixed inset-0 z-40 bg-slate-900/30;
  }

  .ui-modal-panel {
    @apply fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-slate-200 bg-white p-6 shadow-2xl;
  }

  .ui-modal-panel--wide {
    @apply max-w-3xl;
  }

  .md-lite-content .ProseMirror {
    @apply min-h-[150px] px-3 py-2 text-sm text-slate-700;
    outline: none;
  }

  .md-lite-content .ProseMirror p {
    @apply my-1.5;
  }

  .md-lite-content .ProseMirror h1 {
    @apply my-2 text-xl font-semibold text-slate-900;
  }

  .md-lite-content .ProseMirror h2 {
    @apply my-2 text-lg font-semibold text-slate-900;
  }

  .md-lite-content .ProseMirror h3 {
    @apply my-2 text-base font-semibold text-slate-900;
  }

  .md-lite-content .ProseMirror ul {
    @apply my-2 list-disc pl-6;
  }

  .md-lite-content .ProseMirror ol {
    @apply my-2 list-decimal pl-6;
  }

  .md-lite-content .ProseMirror blockquote {
    @apply my-2 border-l-4 border-slate-300 bg-slate-50 py-1 pl-3 italic text-slate-700;
  }

  .md-lite-content .ProseMirror pre {
    @apply my-2 overflow-x-auto rounded-md bg-slate-900 px-3 py-2 text-xs text-slate-100;
  }

  .md-lite-content .ProseMirror code {
    @apply rounded bg-slate-100 px-1 py-0.5 text-[12px] text-slate-800;
  }

  .md-lite-content .ProseMirror pre code {
    @apply bg-transparent px-0 py-0 text-slate-100;
  }

  .md-lite-content .ProseMirror a {
    @apply text-blue-600 underline;
  }

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

  .md-toolbar-btn {
    @apply relative inline-flex h-8 min-w-8 items-center justify-center rounded border border-transparent px-2 text-slate-600 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-40;
  }

  .md-toolbar-btn::after {
    content: attr(data-tooltip);
    @apply pointer-events-none absolute -bottom-8 left-1/2 z-20 -translate-x-1/2 whitespace-nowrap rounded bg-slate-900 px-2 py-1 text-[10px] font-medium text-white opacity-0 transition;
  }

  .md-toolbar-btn:hover::after,
  .md-toolbar-btn:focus-visible::after {
    @apply opacity-100;
  }

  /* Rendered markdown preview styles */
  .rendered-markdown p {
    @apply mb-2 text-sm leading-relaxed text-slate-700;
  }

  .rendered-markdown p:last-child {
    @apply mb-0;
  }

  .rendered-markdown h1 {
    @apply mb-3 mt-6 text-xl font-semibold text-slate-900;
  }

  .rendered-markdown h1:first-child {
    @apply mt-0;
  }

  .rendered-markdown h2 {
    @apply mb-2 mt-5 text-lg font-semibold text-slate-900;
  }

  .rendered-markdown h2:first-child {
    @apply mt-0;
  }

  .rendered-markdown h3 {
    @apply mb-2 mt-4 text-base font-semibold text-slate-900;
  }

  .rendered-markdown h3:first-child {
    @apply mt-0;
  }

  .rendered-markdown ul {
    @apply my-2 list-disc pl-6;
  }

  .rendered-markdown ol {
    @apply my-2 list-decimal pl-6;
  }

  .rendered-markdown li {
    @apply text-sm leading-relaxed text-slate-700;
  }

  .rendered-markdown blockquote {
    @apply my-2 border-l-4 border-slate-300 pl-4 italic text-slate-600;
  }

  .rendered-markdown pre {
    @apply my-3 overflow-x-auto rounded-md bg-slate-900 p-3;
  }

  .rendered-markdown code {
    @apply rounded bg-slate-100 px-1.5 py-0.5 text-xs font-mono text-slate-800;
  }

  .rendered-markdown pre code {
    @apply bg-transparent px-0 py-0 text-xs text-slate-100;
  }

  .rendered-markdown a {
    @apply text-blue-600 hover:underline;
  }

  .rendered-markdown strong {
    @apply font-semibold text-slate-900;
  }

  .rendered-markdown em {
    @apply italic;
  }

  .rendered-markdown del {
    @apply line-through text-slate-500;
  }

  .rendered-markdown table {
    @apply my-3 w-full border-collapse;
  }

  .rendered-markdown th {
    @apply border border-slate-300 bg-slate-100 px-3 py-2 text-left text-sm font-semibold text-slate-900;
  }

  .rendered-markdown td {
    @apply border border-slate-300 px-3 py-2 text-sm text-slate-700;
  }

  .rendered-markdown hr {
    @apply my-4 border-slate-200;
  }

  /* ── Page Tree ─────────────────────────────────────── */

  .page-tree-node.collapsed .page-tree-children {
    display: none;
  }

  .page-tree-node.collapsed .page-tree-chevron {
    transform: rotate(0deg);
  }

  .page-tree-node:not(.collapsed) .page-tree-chevron {
    transform: rotate(90deg);
  }

  .page-tree-sortable-ghost {
    @apply opacity-60;
  }

  /* ── Page Editor (Notion-style) ────────────────────── */

  .page-editor-content .ProseMirror {
    @apply text-base leading-relaxed text-slate-800;
    outline: none;
    caret-color: #1a73e8;
  }

  .page-editor-content .ProseMirror p {
    @apply my-1;
  }

  .page-editor-content .ProseMirror h1 {
    @apply mt-8 mb-2 text-[1.75rem] font-bold text-slate-900;
  }

  .page-editor-content .ProseMirror h2 {
    @apply mt-6 mb-2 text-xl font-bold text-slate-900;
  }

  .page-editor-content .ProseMirror h3 {
    @apply mt-5 mb-1.5 text-lg font-semibold text-slate-900;
  }

  .page-editor-content .ProseMirror ul {
    @apply my-2 list-disc pl-6;
  }

  .page-editor-content .ProseMirror ol {
    @apply my-2 list-decimal pl-6;
  }

  .page-editor-content .ProseMirror li {
    @apply my-0.5;
  }

  .page-editor-content .ProseMirror blockquote {
    @apply my-3 border-l-[3px] border-slate-300 bg-slate-50/50 py-1 pl-4 italic text-slate-600;
  }

  .page-editor-content .ProseMirror hr {
    @apply my-6 border-slate-200;
  }

  .page-editor-content .ProseMirror .page-code-block {
    @apply my-3 overflow-x-auto rounded-lg bg-[#1e1e2e] px-4 py-3 text-sm font-mono text-[#cdd6f4];
  }

  .page-editor-content .ProseMirror code {
    @apply rounded bg-red-50 px-1.5 py-0.5 text-[0.8125rem] font-mono text-red-700;
  }

  .page-editor-content .ProseMirror pre code {
    @apply bg-transparent px-0 py-0 text-[#cdd6f4];
  }

  .page-editor-content .ProseMirror .page-link {
    @apply text-blue-600 underline decoration-blue-300 underline-offset-2 hover:decoration-blue-500 transition-colors;
  }

  .page-editor-content .ProseMirror strong {
    @apply font-semibold text-slate-900;
  }

  /* Placeholder text */
  .page-editor-content .ProseMirror p.is-editor-empty:first-child::before {
    @apply text-slate-400;
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
  }

  .page-editor-content .ProseMirror .is-empty::before {
    @apply text-slate-400;
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
  }

  /* Title placeholder */
  #page-title:empty::before {
    content: attr(data-placeholder);
    @apply text-slate-300;
  }

  /* ── Bubble Menu (floating toolbar) ─────────────────── */

  .page-bubble-menu {
    animation: bubbleIn 0.15s ease-out;
  }

  .page-bubble-btn--active {
    background-color: #dbeafe;
    color: #1d4ed8;
  }
}

@keyframes bubbleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}