@import "tailwindcss"; @plugin "@tailwindcss/typography"; /* Dark mode is opt-in via a `dark` class on , set by the theme Stimulus controller. */ @variant dark (&:where(.dark, .dark *)); /* Toast notification slide-in animation */ @keyframes slide-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } .animate-slide-in { animation: slide-in 0.3s ease-out; } /* Brand typography. Plus Jakarta Sans is loaded via in the layouts. */ @theme { --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Clarity brand palette — see MIV_Clarity.pdf "Paleta de culori". Primary = Clarity Blue. brand-400 is the dark-mode accent. */ --color-brand-50: #e8f0ff; --color-brand-100: #cfe0ff; --color-brand-400: #4d8bff; --color-brand-500: #0B5BFC; --color-brand-600: #0A4FD1; --color-brand-700: #0941a8; --color-brand-yellow: #E1C907; --color-brand-teal: #00B96B; --color-brand-purple: #8B11FE; --color-brand-blue: #0B5BFC; /* MIV dark backgrounds */ --color-brand-bg: #020618; --color-brand-bg2: #0F172B; } /* Trix toolbar dark-mode override (ported from Stejar / Eventya). Replaces Trix's default black SVG button icons with mask-image so they inherit the surrounding `currentColor` and stay visible in both light and dark mode. */ @import "./trix.css"; /* Pagy pagination nav — Clarity brand theme */ @layer components { .pagy { --H: 160; --S: 33%; --L: 22%; --A: 1; --B: 1; --spacing: 0.125rem; --padding: 0.75rem; --rounding: 0.5rem; --border-width: 0rem; --font-size: 0.8125rem; --font-weight: 500; --line-height: 1.75; --text: hsl(var(--H) var(--S) calc(var(--L) - (25 * var(--B))) / var(--A)); --text-hover: hsl(var(--H) var(--S) calc(var(--L) - (30 * var(--B))) / var(--A)); --text-current: hsl(var(--H) var(--S) calc(100% * (var(--B) + 1)) / var(--A)); --background: hsl(var(--H) var(--S) calc(var(--L) + (30 * var(--B))) / var(--A)); --background-hover: hsl(var(--H) var(--S) calc(var(--L) + (20 * var(--B))) / var(--A)); --background-current: #0B5BFC; @apply flex gap-x-[var(--spacing)] font-[var(--font-weight)] text-[length:var(--font-size)] text-[var(--text)] leading-[var(--line-height)]; a:not([role="separator"]) { @apply block rounded-[var(--rounding)] px-[var(--padding)] py-[calc(var(--padding)/3)] bg-[var(--background)] border-solid border-[var(--background-current)] border-[length:var(--border-width)]; } a[href]:hover { @apply bg-[var(--background-hover)] text-[var(--text-hover)]; } a:not([href]) { @apply cursor-default; } a[role="link"]:not([aria-current]) { @apply opacity-60; } a[aria-current] { @apply bg-[var(--background-current)] text-white; } } } /* ── User guide (/guide) markdown styles ────────────────────────── Tailwind Typography plugin is not installed, so we hand-roll the minimum formatting needed for the kramdown-rendered guide pages. Scoped under `.guide-content` to avoid leaking into the rest of the app. */ .guide-content { color: #1e293b; line-height: 1.7; font-size: 0.95rem; } :where(.dark) .guide-content { color: #e2e8f0; } .guide-content h1, .guide-content h2, .guide-content h3, .guide-content h4 { font-family: var(--font-display); color: #0B5BFC; font-weight: 700; line-height: 1.25; } :where(.dark) .guide-content h1, :where(.dark) .guide-content h2, :where(.dark) .guide-content h3, :where(.dark) .guide-content h4 { color: #f1f5f9; } .guide-content > :first-child { margin-top: 0; } .guide-content h1 { font-size: 1.875rem; margin: 0 0 1.25rem; } .guide-content h2 { font-size: 1.375rem; margin: 2rem 0 0.75rem; padding-top: 0.75rem; border-top: 1px solid #e2e8f0; } :where(.dark) .guide-content h2 { border-top-color: #334155; } .guide-content h3 { font-size: 1.125rem; margin: 1.5rem 0 0.5rem; } .guide-content h4 { font-size: 1rem; margin: 1.25rem 0 0.5rem; } .guide-content p { margin: 0 0 1rem; } .guide-content a { color: #0B5BFC; text-decoration: underline; text-underline-offset: 2px; } .guide-content a:hover { color: #0A4FD1; } :where(.dark) .guide-content a { color: #34d399; } :where(.dark) .guide-content a:hover { color: #6ee7b7; } .guide-content strong { font-weight: 600; color: #0f172a; } :where(.dark) .guide-content strong { color: #f8fafc; } .guide-content ul, .guide-content ol { margin: 0 0 1rem; padding-left: 1.5rem; } .guide-content ul { list-style: disc; } .guide-content ol { list-style: decimal; } .guide-content li { margin: 0.25rem 0; } .guide-content li > ul, .guide-content li > ol { margin: 0.25rem 0; } .guide-content blockquote { margin: 1rem 0; padding: 0.5rem 1rem; border-left: 3px solid #0B5BFC; background: #f8fafc; color: #475569; font-style: italic; } :where(.dark) .guide-content blockquote { background: #0f172a; color: #cbd5e1; border-left-color: #34d399; } .guide-content code { background: #f1f5f9; color: #0B5BFC; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; } :where(.dark) .guide-content code { background: #1e293b; color: #34d399; } .guide-content pre { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 1rem 0; font-size: 0.85rem; line-height: 1.5; } .guide-content pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; } .guide-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.875rem; } .guide-content th, .guide-content td { border: 1px solid #e2e8f0; padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; } .guide-content th { background: #f8fafc; font-weight: 600; color: #0B5BFC; } :where(.dark) .guide-content th, :where(.dark) .guide-content td { border-color: #334155; } :where(.dark) .guide-content th { background: #1e293b; color: #f1f5f9; } .guide-content img { max-width: 100%; height: auto; border: 1px solid #e2e8f0; border-radius: 0.5rem; margin: 1rem 0; display: block; } :where(.dark) .guide-content img { border-color: #334155; } .guide-content hr { margin: 2rem 0; border: 0; border-top: 1px solid #e2e8f0; } :where(.dark) .guide-content hr { border-top-color: #334155; } /* ── @Mention autocomplete dropdown + inline mention styling ────── */ .mention-dropdown { overflow-y: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.75rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); z-index: 9999; } :where(.dark) .mention-dropdown { background: #0f172a; border-color: #334155; } .mention-dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; cursor: pointer; transition: background 0.1s; } .mention-dropdown-item:hover, .mention-dropdown-active { background: #f1f5f9; } :where(.dark) .mention-dropdown-item:hover, :where(.dark) .mention-dropdown-active { background: #1e293b; } .mention-dropdown-name { font-size: 0.8125rem; font-weight: 500; color: #1e293b; } :where(.dark) .mention-dropdown-name { color: #e2e8f0; } .mention-avatar { width: 24px; height: 24px; border-radius: 9999px; object-fit: cover; flex-shrink: 0; } .mention-avatar-placeholder { width: 24px; height: 24px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; } /* Inline mention chip — shown in Trix editor + rendered comments */ .mention-chip { display: inline-flex !important; align-items: center !important; gap: 3px !important; background: #ede9fe !important; color: #6d28d9 !important; padding: 1px 6px 1px 2px !important; border-radius: 9999px !important; font-size: 0.8125rem !important; font-weight: 500 !important; line-height: 1.4 !important; vertical-align: middle !important; white-space: nowrap !important; text-decoration: none !important; } :where(.dark) .mention-chip { background: rgba(109, 40, 217, 0.2) !important; color: #c4b5fd !important; } .mention-chip-avatar { width: 18px; height: 18px; border-radius: 9999px; object-fit: cover; flex-shrink: 0; } .mention-chip-initials { width: 18px; height: 18px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; background: #0B5BFC; flex-shrink: 0; } .mention-chip-name { font-weight: 600; } /* Trix attachment wrapper — inline for mention chips (editor + rendered) */ trix-editor figure.attachment:has(.mention-chip), .trix-content figure:has(.mention-chip), figure.attachment:has(.mention-chip) { display: inline !important; margin: 0 !important; padding: 0 !important; max-width: none !important; } trix-editor figure.attachment:has(.mention-chip) figcaption, .trix-content figure:has(.mention-chip) figcaption, figure.attachment:has(.mention-chip) figcaption { display: none !important; } action-text-attachment:has(.mention-chip) { display: inline !important; } /* Fallback: render content attribute from action-text-attachment */ action-text-attachment[content-type="application/vnd.clarity.mention"] { display: inline !important; } /* Override actiontext.css reset that kills prose margins/paddings */ .trix-content.prose * { margin: revert; padding: revert; } .trix-content.prose h1, .trix-content.prose h2, .trix-content.prose h3, .trix-content.prose h4 { font-weight: 600; } s, del, .trix-content s, .trix-content del, .tiptap-content s, .tiptap-content del, .prose s, .prose del { text-decoration: line-through !important; } u, .trix-content u, .tiptap-content u, .prose u { text-decoration: underline !important; } .trix-content.prose table { border-collapse: collapse; width: 100%; } .trix-content.prose th, .trix-content.prose td { border: 1px solid #e2e8f0; padding: 0.375rem 0.625rem; text-align: left; } .trix-content.prose th { background: #f8fafc; font-weight: 600; } :where(.dark) .trix-content.prose th, :where(.dark) .trix-content.prose td { border-color: #334155; } :where(.dark) .trix-content.prose th { background: #1e293b; } /* ── TipTap editor styles ──────────────────────────────────────────── */ .tiptap-content { caret-color: #0B5BFC; } .tiptap-content p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; color: #94a3b8; pointer-events: none; height: 0; } .tiptap-content table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; } .tiptap-content th, .tiptap-content td { border: 1px solid #e2e8f0; padding: 0.375rem 0.625rem; text-align: left; vertical-align: top; min-width: 80px; position: relative; } .tiptap-content th { background: #f8fafc; font-weight: 600; } :where(.dark) .tiptap-content th, :where(.dark) .tiptap-content td { border-color: #334155; } :where(.dark) .tiptap-content th { background: #1e293b; } .tiptap-content td.selectedCell, .tiptap-content th.selectedCell { background: rgba(38, 77, 74, 0.08); } :where(.dark) .tiptap-content td.selectedCell, :where(.dark) .tiptap-content th.selectedCell { background: rgba(52, 211, 153, 0.1); } .tiptap-content .tableWrapper { overflow-x: auto; } .tiptap-content hr { border: none; border-top: 2px solid #e2e8f0; margin: 1.5rem 0; } :where(.dark) .tiptap-content hr { border-top-color: #334155; } .tiptap-content ul[data-type="taskList"], .trix-content ul[data-type="taskList"], .prose ul[data-type="taskList"] { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; } .tiptap-content ul[data-type="taskList"] li, .trix-content ul[data-type="taskList"] li, .prose ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 0.375rem; padding-left: 0 !important; } .tiptap-content ul[data-type="taskList"] li label, .trix-content ul[data-type="taskList"] li label, .prose ul[data-type="taskList"] li label { flex-shrink: 0; display: flex; align-items: center; margin-top: 0.85rem; } .tiptap-content ul[data-type="taskList"] li label input[type="checkbox"], .trix-content ul[data-type="taskList"] li label input[type="checkbox"], .prose ul[data-type="taskList"] li label input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: #0B5BFC; cursor: pointer; } .tiptap-content ul[data-type="taskList"] li div, .trix-content ul[data-type="taskList"] li div, .prose ul[data-type="taskList"] li div { flex: 1; } /* ── Link color for rich text content (Trix body, prose) ───────────── */ .trix-content a:not(.mention), .prose a:not(.mention) { color: #4f46e5; /* indigo-600 */ text-decoration: underline; text-underline-offset: 2px; } .trix-content a:not(.mention):hover, .prose a:not(.mention):hover { color: #4338ca; /* indigo-700 */ } :where(.dark) .trix-content a:not(.mention), :where(.dark) .prose a:not(.mention) { color: #a5b4fc; /* indigo-300 */ } :where(.dark) .trix-content a:not(.mention):hover, :where(.dark) .prose a:not(.mention):hover { color: #c7d2fe; /* indigo-200 */ } /* Legacy plain-text mention links (older approval comments) */ a.mention, .trix-content a.mention { background: #ede9fe; color: #6d28d9; padding: 1px 4px; border-radius: 4px; font-weight: 500; text-decoration: none; cursor: default; } :where(.dark) a.mention, :where(.dark) .trix-content a.mention { background: rgba(109, 40, 217, 0.2); color: #c4b5fd; } /* ── Tag picker — chip input with autocomplete ───────────────────── */ .tag-picker-wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; min-height: 42px; border: 1px solid #cbd5e1; border-radius: 0.5rem; background: #fff; cursor: text; transition: border-color 0.15s, box-shadow 0.15s; } .tag-picker-wrapper:focus-within { border-color: #0B5BFC; box-shadow: 0 0 0 2px rgba(38, 77, 74, 0.2); } :where(.dark) .tag-picker-wrapper { background: #020617; border-color: #334155; } :where(.dark) .tag-picker-wrapper:focus-within { border-color: #34d399; box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.15); } .tag-picker-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 8px; border-radius: 9999px; background: #f1f5f9; color: #334155; font-size: 0.75rem; font-weight: 500; white-space: nowrap; } :where(.dark) .tag-picker-chip { background: #1e293b; color: #e2e8f0; } .tag-picker-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 9999px; font-size: 12px; line-height: 1; color: #94a3b8; cursor: pointer; border: none; background: none; padding: 0; } .tag-picker-chip-x:hover { color: #ef4444; } .tag-picker-input { flex: 1; min-width: 80px; border: none; outline: none; background: transparent; font-size: 0.8125rem; color: #1e293b; padding: 2px 4px; } :where(.dark) .tag-picker-input { color: #e2e8f0; } .tag-picker-input::placeholder { color: #94a3b8; } .tag-picker-dropdown { position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.08); z-index: 50; margin-top: 4px; } :where(.dark) .tag-picker-dropdown { background: #0f172a; border-color: #334155; } .tag-picker-dropdown-item { padding: 6px 10px; font-size: 0.8125rem; color: #334155; cursor: pointer; } .tag-picker-dropdown-item:hover, .tag-picker-dropdown-active { background: #f1f5f9; } :where(.dark) .tag-picker-dropdown-item { color: #e2e8f0; } :where(.dark) .tag-picker-dropdown-item:hover, :where(.dark) .tag-picker-dropdown-active { background: #1e293b; } /* Mermaid subgraph backgrounds — transparent instead of default grey. Mermaid sets inline styles on cluster rects, so !important is needed. */ .mermaid .cluster rect, .mermaid .cluster-alt rect, .mermaid [id*="flowchart-"] .cluster rect { fill: transparent !important; stroke: #e2e8f0 !important; rx: 8 !important; } html.dark .mermaid .cluster rect, html.dark .mermaid .cluster-alt rect, html.dark .mermaid [id*="flowchart-"] .cluster rect { fill: transparent !important; stroke: #334155 !important; } /* Background fill for the verb labels drawn by the turtle-connectors Stimulus controller. The labels sit on top of the SVG flow lines so they need an opaque background to remain readable. */ .turtle-label-bg { fill: #ffffff; } :where(.dark) .turtle-label-bg { fill: #0f172a; /* slate-900 */ } /* Arrow-shaped Turtle facet card. Used on Inputs (left column, middle row) and Outputs (right column, middle row) so the cards visually read as right-pointing arrows. The right-padding leaves room for the clipped triangular tip so the inner content doesn't collide with the slope. Hidden below md because the grid is single-column on mobile and the arrow shape would look odd stacked vertically. */ @media (min-width: 768px) { .turtle-arrow-card { clip-path: polygon( 0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100% ); padding-right: 36px; } }