/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* SortableJS — fallback clone while dragging categories */
.sortable-dragging {
  opacity: 0.9;
  box-shadow: 0 0 40px rgba(6, 182, 212, 0.4);
}

/* Kanban column drop-zone highlight (D-03) */
.kanban-column-dropping {
  border-color: rgba(6, 182, 212, 0.6) !important;
  box-shadow: inset 0 0 20px rgba(6, 182, 212, 0.1), 0 0 20px rgba(6, 182, 212, 0.15);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

/* Kanban counter badge flash animation (RT-01) */
@keyframes kanban-count-flash {
  0% { color: rgba(6, 182, 212, 0.9); background: rgba(6, 182, 212, 0.15); }
  100% { color: inherit; background: rgba(30, 41, 59, 0.6); }
}

.kanban-count-updated {
  animation: kanban-count-flash 600ms ease-out forwards;
}

/* ──────────────────────────────────────────────────────────────────────────
 * .note-prose — Tron-themed Markdown rendering (Phase 73 MarkdownRenderer output)
 *
 * Why this exists: the app runs Tailwind v4 (tailwindcss-rails) WITHOUT the
 * @tailwindcss/typography plugin, so the `prose`/`prose-invert` utilities used by
 * the note views are no-ops. Worse, Tailwind v4 Preflight strips margins and list
 * markers from raw elements, so Commonmarker's correct HTML rendered as a flat wall
 * of text. This hand-written, scoped stylesheet restores readable formatting and
 * matches the cyan/slate neon design system.
 *
 * Selectors are class+element (e.g. `.note-prose h1`, specificity 0,1,1) so they
 * outrank Preflight's bare-element resets (0,0,1). Decisively, these rules are
 * UNLAYERED while Tailwind v4 Preflight lives in `@layer base`, and unlayered CSS
 * beats any @layer regardless of specificity or source order — so the override is
 * robust even though application.css loads before tailwind.css in production.
 * ────────────────────────────────────────────────────────────────────────── */
.note-prose {
  color: #cbd5e1; /* slate-300 */
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.7;
  font-size: 0.95rem;
  overflow-wrap: anywhere; /* wraps long unbroken strings (URLs, IDs) */
}

/* Collapse leading/trailing margins so the rendered block aligns with its container */
.note-prose > :first-child { margin-top: 0; }
.note-prose > :last-child { margin-bottom: 0; }

/* Headings — display font, white, with a neon underline on the top levels */
.note-prose h1,
.note-prose h2,
.note-prose h3,
.note-prose h4,
.note-prose h5,
.note-prose h6 {
  color: #ffffff;
  font-family: "Space Grotesk", "Inter", ui-sans-serif, sans-serif;
  font-weight: 700;
  line-height: 1.25;
  margin: 1.5em 0 0.6em;
}
.note-prose h1 { font-size: 1.6em; }
.note-prose h2 { font-size: 1.35em; }
.note-prose h3 { font-size: 1.15em; }
.note-prose h4 { font-size: 1em; }
.note-prose h5,
.note-prose h6 {
  font-size: 0.85em;
  color: #94a3b8; /* slate-400 */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.note-prose h1,
.note-prose h2 {
  padding-bottom: 0.3em;
  border-bottom: 1px solid rgba(6, 182, 212, 0.2); /* cyan-500/20 */
}

/* Body copy */
.note-prose p { margin: 0.85em 0; }

/* Links — brand cyan */
.note-prose a {
  color: #22d3ee; /* cyan-400 */
  text-decoration: underline;
  text-decoration-color: rgba(34, 211, 238, 0.4);
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.note-prose a:hover {
  color: #67e8f9; /* cyan-300 */
  text-decoration-color: #67e8f9;
}

/* Lists — restore markers stripped by Preflight */
.note-prose ul,
.note-prose ol {
  margin: 0.85em 0;
  padding-left: 1.6em;
}
.note-prose ul { list-style: disc; }
.note-prose ul ul { list-style: circle; }
.note-prose ol { list-style: decimal; }
.note-prose li { margin: 0.35em 0; }
.note-prose li::marker { color: #06b6d4; } /* cyan-500 */
.note-prose li > ul,
.note-prose li > ol { margin: 0.35em 0; }

/* GFM task lists — checkbox items have no bullet */
.note-prose li:has(> input[type="checkbox"]) {
  list-style: none;
  margin-left: -1.2em;
}
.note-prose input[type="checkbox"] {
  margin-right: 0.5em;
  accent-color: #06b6d4; /* cyan-500 */
}

/* Inline code */
.note-prose code {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 0.875em;
  color: #67e8f9; /* cyan-300 */
  background: rgba(30, 41, 59, 0.7); /* slate-800/70 */
  border: 1px solid rgba(6, 182, 212, 0.15);
  border-radius: 0.375rem;
  padding: 0.15em 0.4em;
}

/* Code blocks — slate panel with a neon border, horizontal scroll for wide code */
.note-prose pre {
  background: #0f172a; /* slate-900 */
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 0.75rem;
  padding: 1em 1.1em;
  margin: 1em 0;
  overflow-x: auto;
  line-height: 1.5;
}
.note-prose pre code {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: #e2e8f0; /* slate-200 */
  font-size: 0.85em;
}

/* Blockquotes */
.note-prose blockquote {
  border-left: 3px solid #06b6d4; /* cyan-500 */
  padding-left: 1em;
  margin: 1em 0;
  color: #94a3b8; /* slate-400 */
  font-style: italic;
}

/* Tables — scroll horizontally inside the pane instead of breaking layout */
.note-prose table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.9em;
}
.note-prose th,
.note-prose td {
  border: 1px solid rgba(6, 182, 212, 0.2);
  padding: 0.5em 0.75em;
  text-align: left;
}
.note-prose thead th {
  background: rgba(6, 182, 212, 0.1);
  color: #ffffff;
  font-weight: 600;
}
.note-prose tbody tr:nth-child(even) { background: rgba(30, 41, 59, 0.3); }

/* Misc block elements */
.note-prose hr {
  border: 0;
  border-top: 1px solid rgba(6, 182, 212, 0.2);
  margin: 1.5em 0;
}
.note-prose strong { color: #ffffff; font-weight: 700; }
.note-prose em { font-style: italic; }
.note-prose del { color: #94a3b8; } /* slate-400 — clears WCAG AA (6.96:1) on slate-900 */
.note-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 0.5em 0;
}

/* ── Compact variant for card teasers (line-clamped previews) ──
 * Defined AFTER the base rules so equal-specificity overrides win by source order.
 * Neutralizes heading sizes/borders and collapses block spacing so a 3-line clamp
 * reads as a clean teaser rather than a giant heading. */
.note-prose-compact { line-height: 1.5; font-size: 0.875rem; }
.note-prose-compact h1,
.note-prose-compact h2,
.note-prose-compact h3,
.note-prose-compact h4,
.note-prose-compact h5,
.note-prose-compact h6 {
  font-size: 0.95em;
  font-weight: 600;
  color: #e2e8f0; /* slate-200 */
  margin: 0.2em 0;
  padding: 0;
  border: 0;
  text-transform: none;
  letter-spacing: normal;
}
.note-prose-compact p,
.note-prose-compact ul,
.note-prose-compact ol,
.note-prose-compact pre,
.note-prose-compact blockquote,
.note-prose-compact table { margin: 0.2em 0; }
.note-prose-compact ul,
.note-prose-compact ol { padding-left: 1.2em; }
.note-prose-compact pre { padding: 0.4em 0.6em; border-radius: 0.4rem; }
.note-prose-compact hr { display: none; }