/* CRM app — supplements on top of the Tailwind CDN. Hand-written, no build step. */

code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
table { border-collapse: collapse; }
[x-cloak] { display: none !important; }

/* Segmented button group — the DOM contract initListFilter() expects. */
.seg-group { display: inline-flex; background: #f3f4f6; border-radius: 0.5rem; padding: 0.15rem; gap: 0.15rem; flex-wrap: wrap; }
.seg-btn {
    border: 0; background: transparent; cursor: pointer;
    padding: 0.3rem 0.7rem; border-radius: 0.4rem;
    font-size: 0.8125rem; color: #6b7280; white-space: nowrap;
    transition: background .12s, color .12s;
}
.seg-btn:hover { color: #111827; }
.seg-btn--active { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(0,0,0,.06); font-weight: 500; }

/* ---------------------------------------------------------------------------
   TipTap editor chrome. A deliberate fork of the admin's (admin/assets/css/admin.css),
   trimmed to what a CRM note needs — no link modal, no alignment, no text transforms.
   The DOM shape is kept identical so the init code stays portable.
   --------------------------------------------------------------------------- */

.tiptap-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
    overflow: hidden;
    transition: border-color .12s;
}
.tiptap-wrap:focus-within { border-color: #7c3aed; }

.tiptap-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem;
    padding: 0.3rem 0.4rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.tiptap-toolbar__sep { width: 1px; height: 1.1rem; background: #e5e7eb; margin: 0 0.3rem; }

.tiptap-toolbar__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.85rem; height: 1.85rem; padding: 0 0.4rem;
    border: 0; background: transparent; border-radius: 0.35rem;
    color: #4b5563; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
    transition: background .12s, color .12s;
}
.tiptap-toolbar__btn:hover { background: #ede9fe; color: #6d28d9; }
.tiptap-toolbar__btn.is-active { background: #7c3aed; color: #fff; }
.tiptap-toolbar__btn.is-active:hover { background: #6d28d9; color: #fff; }
.tiptap-toolbar__btn i { font-style: italic; }
.tiptap-toolbar__btn s { text-decoration: line-through; }

.tiptap-editor { min-height: 9rem; max-height: 32rem; overflow-y: auto; }
.tiptap-content { padding: 0.75rem 0.9rem; font-size: 0.9rem; line-height: 1.6; color: #1f2937; outline: none; }
.tiptap-content > *:first-child { margin-top: 0; }
.tiptap-content > *:last-child { margin-bottom: 0; }
.tiptap-content p { margin: 0 0 0.7em; }
.tiptap-content h1 { font-size: 1.5em; font-weight: 800; margin: 1em 0 0.4em; color: #111827; line-height: 1.25; }
.tiptap-content h2 { font-size: 1.28em; font-weight: 700; margin: 1em 0 0.4em; color: #111827; line-height: 1.3; }
.tiptap-content h3 { font-size: 1.1em; font-weight: 600; margin: 0.9em 0 0.35em; color: #111827; line-height: 1.35; }
.tiptap-content ul, .tiptap-content ol { padding-left: 1.4em; margin: 0 0 0.7em; }
.tiptap-content ul { list-style: disc; }
.tiptap-content ol { list-style: decimal; }
.tiptap-content li { margin: 0 0 0.2em; }
.tiptap-content li p { margin: 0; }
.tiptap-content strong { font-weight: 700; }
.tiptap-content em { font-style: italic; }
.tiptap-content s { text-decoration: line-through; }
.tiptap-content a { color: #2563eb; text-decoration: underline; }
.tiptap-content blockquote {
    border-left: 3px solid #ddd6fe; padding-left: 0.9em; margin: 0 0 0.7em;
    color: #4b5563; font-style: italic;
}
.tiptap-content pre {
    background: #1f2937; color: #e5e7eb; padding: 0.7em 0.9em; border-radius: 0.4rem;
    overflow-x: auto; margin: 0 0 0.7em; font-size: 0.85em;
}
.tiptap-content code { background: #f3f4f6; padding: 0.1em 0.35em; border-radius: 0.25rem; font-size: 0.9em; }
.tiptap-content pre code { background: none; padding: 0; color: inherit; }
.tiptap-content p.is-editor-empty:first-child::before {
    content: attr(data-placeholder); color: #9ca3af; float: left; height: 0; pointer-events: none;
}

/* Read-only rendering of stored TipTap HTML (public page, previews). */
.prose-crm { font-size: 0.95rem; line-height: 1.65; color: #1f2937; }
.prose-crm > *:first-child { margin-top: 0; }
.prose-crm > *:last-child { margin-bottom: 0; }
.prose-crm p { margin: 0 0 0.8em; }
.prose-crm h1 { font-size: 1.5em; font-weight: 800; margin: 1.1em 0 0.4em; }
.prose-crm h2 { font-size: 1.28em; font-weight: 700; margin: 1.1em 0 0.4em; }
.prose-crm h3 { font-size: 1.1em; font-weight: 600; margin: 1em 0 0.35em; }
.prose-crm ul { list-style: disc; padding-left: 1.4em; margin: 0 0 0.8em; }
.prose-crm ol { list-style: decimal; padding-left: 1.4em; margin: 0 0 0.8em; }
.prose-crm li { margin: 0 0 0.2em; }
.prose-crm strong { font-weight: 700; }
.prose-crm em { font-style: italic; }
.prose-crm a { color: #2563eb; text-decoration: underline; }
.prose-crm blockquote { border-left: 3px solid #ddd6fe; padding-left: 0.9em; margin: 0 0 0.8em; color: #4b5563; font-style: italic; }
.prose-crm pre { background: #1f2937; color: #e5e7eb; padding: 0.7em 0.9em; border-radius: 0.4rem; overflow-x: auto; margin: 0 0 0.8em; }

/* Toast */
#crm-toast {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.crm-toast {
    background: #111827; color: #fff; padding: 0.6rem 0.9rem; border-radius: 0.5rem;
    font-size: 0.85rem; box-shadow: 0 8px 24px rgba(0,0,0,.18);
    animation: crm-toast-in .16s ease-out;
}
.crm-toast--err { background: #b91c1c; }
@keyframes crm-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Drop zone */
.crm-drop { transition: background .12s, border-color .12s; }
.crm-drop.is-over { background: #f5f3ff; border-color: #7c3aed; }

/* Board */
.board-col { border-radius: 0.5rem; transition: background .12s; }
.board-card--ghost { opacity: .4; }
.board-card--chosen { box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.board-card.is-saving { opacity: .5; pointer-events: none; }

/* Modal. The reduced-motion rule below already disables this animation — it is a blanket
   kill switch for the whole file, not something to nest inside. */
.crm-modal { animation: crm-modal-in .14s ease-out; }
@keyframes crm-modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }