/*
 * 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.
 */

/* Rouge diff syntax highlighting (Monokai base + diff overrides) */
.diff-highlight { color: #f8f8f2; background-color: #1a1b1e; border-radius: 0; }
.diff-highlight .gh { color: #999; }
.diff-highlight .gu { color: #75715e; }
.diff-highlight .ge { font-style: italic; }
.diff-highlight .gs { font-weight: bold; }
.diff-highlight .k, .diff-highlight .kv, .diff-highlight .kn, .diff-highlight .kp, .diff-highlight .ow, .diff-highlight .nt { color: #f92672; }
.diff-highlight .na, .diff-highlight .nc, .diff-highlight .nd, .diff-highlight .ne, .diff-highlight .nf, .diff-highlight .fm { color: #a6e22e; }
.diff-highlight .s, .diff-highlight .s1, .diff-highlight .s2, .diff-highlight .sb, .diff-highlight .sd, .diff-highlight .sh, .diff-highlight .si, .diff-highlight .sx, .diff-highlight .sa, .diff-highlight .dl { color: #e6db74; }
.diff-highlight .m, .diff-highlight .mf, .diff-highlight .mh, .diff-highlight .mi, .diff-highlight .mo, .diff-highlight .mb, .diff-highlight .mx, .diff-highlight .il { color: #ae81ff; }
.diff-highlight .c, .diff-highlight .c1, .diff-highlight .cm, .diff-highlight .cp, .diff-highlight .cs, .diff-highlight .ch, .diff-highlight .cd, .diff-highlight .cpf { color: #75715e; }
/* diff-specific: insertions green, deletions red, hunk header blue */
.diff-highlight .gi { color: #b5f0a0; background-color: rgba(80, 200, 80, 0.12); display: block; width: 100%; }
.diff-highlight .gd { color: #f7a8a0; background-color: rgba(200, 60, 60, 0.12); display: block; width: 100%; }
.diff-highlight .gp { color: #66d9ef; }  /* @@ hunk header */
.diff-highlight pre { margin: 0; white-space: pre; }

/* Attention-state border pulse */
@keyframes border-pulse {
  0%, 100% { border-color: rgb(245 158 11 / 0.7); box-shadow: 0 0 0 0 rgb(245 158 11 / 0); }
  50%       { border-color: rgb(245 158 11 / 1);   box-shadow: 0 0 6px 1px rgb(245 158 11 / 0.25); }
}
.border-amber-pulse {
  animation: border-pulse 2s ease-in-out infinite;
}

/* Markdown artifact rendering */
.md-body { color: var(--color-gray-300); font-size: 0.8125rem; line-height: 1.6; }
.md-body h1, .md-body h2, .md-body h3, .md-body h4 { color: var(--color-gray-100); font-weight: 600; margin-top: 1em; margin-bottom: 0.4em; }
.md-body h1 { font-size: 1rem; }
.md-body h2 { font-size: 0.9375rem; }
.md-body h3 { font-size: 0.875rem; }
.md-body p { margin-bottom: 0.6em; }
.md-body ul, .md-body ol { margin-bottom: 0.6em; padding-left: 1.25em; }
.md-body ul { list-style-type: disc; }
.md-body ol { list-style-type: decimal; }
.md-body li { margin-bottom: 0.2em; }
.md-body strong { color: var(--color-gray-100); font-weight: 600; }
.md-body em { font-style: italic; }
.md-body code { background: var(--color-gray-800); color: var(--color-blue-300); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.8em; font-family: ui-monospace, monospace; }
.md-body pre { background: var(--color-gray-900); border: 1px solid var(--color-gray-700); border-radius: 6px; padding: 0.75em 1em; overflow-x: auto; margin-bottom: 0.6em; }
.md-body pre code { background: none; padding: 0; color: var(--color-gray-300); font-size: 0.8125rem; }
.md-body blockquote { border-left: 3px solid var(--color-gray-600); padding-left: 0.75em; color: var(--color-gray-400); margin-bottom: 0.6em; }
.md-body a { color: var(--color-blue-400); text-decoration: underline; }
.md-body hr { border-color: var(--color-gray-700); margin: 0.75em 0; }
.md-body table { border-collapse: collapse; width: 100%; margin-bottom: 0.6em; font-size: 0.8rem; }
.md-body th { background: var(--color-gray-800); color: var(--color-gray-200); font-weight: 600; padding: 0.4em 0.75em; border: 1px solid var(--color-gray-700); text-align: left; }
.md-body td { padding: 0.35em 0.75em; border: 1px solid var(--color-gray-700); }

/* Prism syntax highlighting — keep the pre's Tailwind bg-* class visible; only tokens get coloured */
code[class*="language-"] { background: transparent !important; padding: 0 !important; }

/* Text selection in page block content — blue-indigo accent, slightly brighter than default
   so users notice the selection has meaning (comment trigger) */
.page-content-selectable ::selection {
  background-color: rgba(99, 102, 241, 0.45);  /* indigo-500 @ 45% — stands out on dark bg */
  color: #e0e7ff;  /* indigo-100 */
}
.page-content-selectable ::-moz-selection {
  background-color: rgba(99, 102, 241, 0.45);
  color: #e0e7ff;
}

/* Comment thread flash — draws attention after navigating from a notification */
@keyframes comment-thread-flash {
  0%   { background-color: transparent;              box-shadow: none; }
  15%  { background-color: rgba(99,102,241,0.18);    box-shadow: 0 0 0 3px rgba(99,102,241,0.35); }
  100% { background-color: transparent;              box-shadow: none; }
}
.comment-thread-flash {
  animation: comment-thread-flash 1.8s ease-out;
  border-radius: 6px;
}

/* Anchor text highlight — per-comment colour (index 0–5) */
mark[class^="comment-anchor-"] {
  border-radius: 2px;
  color: inherit;
  padding: 0 1px;
  border-bottom-style: solid;
  border-bottom-width: 1.5px;
}
mark.comment-anchor-0 { background-color: rgba( 99,102,241,0.15); border-bottom-color: #6366f1; }
mark.comment-anchor-1 { background-color: rgba(249,115, 22,0.15); border-bottom-color: #f97316; }
mark.comment-anchor-2 { background-color: rgba(168, 85,247,0.15); border-bottom-color: #a855f7; }
mark.comment-anchor-3 { background-color: rgba( 16,185,129,0.15); border-bottom-color: #10b981; }
mark.comment-anchor-4 { background-color: rgba(245,158, 11,0.15); border-bottom-color: #f59e0b; }
mark.comment-anchor-5 { background-color: rgba(236, 72,153,0.15); border-bottom-color: #ec4899; }
/* legacy fallback */
mark.comment-anchor-highlight { background-color: rgba(99,102,241,0.18); border-bottom: 1.5px solid rgba(99,102,241,0.5); border-radius: 2px; color: inherit; padding: 0 1px; }

/* vis-timeline dark theme */
.vis-timeline { border: 1px solid var(--color-gray-700) !important; font-family: ui-sans-serif, system-ui, sans-serif !important; }
.vis-panel.vis-left,
.vis-panel.vis-right { background: var(--color-gray-800) !important; border-color: var(--color-gray-700) !important; }
.vis-panel.vis-center,
.vis-panel.vis-bottom,
.vis-panel.vis-top { background: var(--color-gray-900) !important; }
.vis-time-axis .vis-text { color: var(--color-gray-400) !important; font-size: 11px !important; }
.vis-time-axis .vis-grid.vis-minor { border-color: var(--color-gray-800) !important; }
.vis-time-axis .vis-grid.vis-major { border-color: var(--color-gray-700) !important; }
.vis-label { color: var(--color-gray-300) !important; font-size: 12px !important; padding: 0 8px !important; }
.vis-item { background-color: var(--color-blue-900) !important; border-color: var(--color-blue-600) !important; color: var(--color-gray-200) !important; font-size: 12px !important; border-radius: 4px !important; }
.vis-item.vis-line { border-color: var(--color-blue-600) !important; }
.vis-item.vis-dot { border-color: var(--color-blue-500) !important; }
.vis-item .vis-item-overflow { overflow: hidden !important; }
.vis-item .vis-item-content { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.vis-item.vis-background.vis-weekend-bg { background-color: rgba(0, 0, 0, 0.06) !important; border: none !important; }
html.dark .vis-item.vis-background.vis-weekend-bg { background-color: rgba(255, 255, 255, 0.04) !important; }
.vis-item.vis-background.vis-training-day-bg { background-color: rgba(234, 179, 8, 0.18) !important; border: none !important; }
html.dark .vis-item.vis-background.vis-training-day-bg { background-color: rgba(217, 119, 6, 0.22) !important; }
.vis-time-axis .vis-text.vis-saturday,
.vis-time-axis .vis-text.vis-sunday { color: #d97706 !important; font-weight: 600 !important; }

/* vis-timeline light theme override — let it use its own default palette */
html.light .vis-timeline { border-color: var(--color-gray-700) !important; }
html.light .vis-panel.vis-left,
html.light .vis-panel.vis-right { background: var(--color-gray-800) !important; }
html.light .vis-panel.vis-center,
html.light .vis-panel.vis-bottom,
html.light .vis-panel.vis-top { background: var(--color-gray-900) !important; }
html.light .vis-label { color: var(--color-gray-300) !important; }
html.light .vis-time-axis .vis-text { color: var(--color-gray-400) !important; }
html.light .vis-item { background-color: var(--color-blue-900) !important; border-color: var(--color-blue-600) !important; color: var(--color-gray-200) !important; }

/* BPMN.js canvas */
.bpmn-canvas .djs-container { border-radius: 6px; }
.bpmn-canvas .bjs-powered-by { display: none; }

/* BPMN.js — force icon glyphs black and fix direct-edit text */
[class^="bpmn-icon-"]::before,
[class*=" bpmn-icon-"]::before { color: black !important; }
.djs-context-pad { background-color: white; border: solid grey 1px; padding: 3px; border-radius: 3px; }
.djs-direct-editing-parent    { background: #fff !important; }
.djs-direct-editing-content   { color: #111 !important; caret-color: #111 !important; }

/* Diffy split diff */
.diff-output .diff { font-family: ui-monospace, monospace; font-size: 0.72rem; line-height: 1.55; width: 100%; }
.diff-output .diff ul { list-style: none; margin: 0; padding: 0; }
.diff-output .diff li { padding: 1px 10px; white-space: pre-wrap; word-break: break-all; color: var(--color-gray-400); }
.diff-output .diff li.ins  { background-color: rgba(34,197,94,0.10); color: var(--color-green-300); }
.diff-output .diff li.del  { background-color: rgba(239,68,68,0.10);  color: var(--color-red-300); }
.diff-output .diff li ins  { background-color: rgba(34,197,94,0.28);  text-decoration: none; border-radius: 2px; padding: 0 1px; }
.diff-output .diff li del  { background-color: rgba(239,68,68,0.28);  text-decoration: none; border-radius: 2px; padding: 0 1px; }
.diff-output .diff li.unchanged { color: var(--color-gray-500); }

/* Text cursor across the whole selectable zone */
.page-content-selectable [data-block-id] { cursor: text; }
.page-content-selectable [data-block-id] button,
.page-content-selectable [data-block-id] a { cursor: pointer; }

/* ── Light theme overrides ───────────────────────────────────────────────
   Most theme-dependent styles use var(--color-*) above and adapt automatically.
   Only items that can't express theme differences via CSS vars are listed here. */

/* Text selection in light mode — keep indigo accent but contrast-correct */
html.light .page-content-selectable ::selection {
  background-color: rgba(99, 102, 241, 0.3);
  color: #1e1b4b;
}
html.light .page-content-selectable ::-moz-selection {
  background-color: rgba(99, 102, 241, 0.3);
  color: #1e1b4b;
}