/* ToolDock custom styles. Everything else comes from Tailwind classes in the markup. */

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #1e293b;
}
::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}
.ghost-class {
  opacity: 0.4;
  background: #e11d48 !important;
}
/* Light theme: remap the slate palette used across the page.
   White text on brand, emerald, and rose backgrounds stays white. */
html { color-scheme: dark; }
html.light { color-scheme: light; background: #f8fafc; color: #0f172a; }
html.light ::-webkit-scrollbar-track { background: #e2e8f0; }
html.light ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html.light ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

html.light .bg-slate-950 { background-color: #f1f5f9; }
html.light .bg-slate-950\/40 { background-color: #f1f5f9; }
html.light .bg-slate-950\/80 { background-color: rgba(15, 23, 42, 0.45); }
html.light .bg-slate-900 { background-color: #f1f5f9; }
html.light :is(input, textarea, select).bg-slate-900,
html.light .md-preview { background-color: #ffffff; }
html.light .bg-slate-800,
html.light .hover\:bg-slate-800:hover,
html.light .hover\:bg-slate-800\/80:hover { background-color: #ffffff; }
html.light .bg-slate-800\/90 { background-color: rgba(255, 255, 255, 0.9); }
html.light .bg-slate-800\/80 { background-color: rgba(255, 255, 255, 0.85); }
html.light .bg-slate-800\/60 { background-color: rgba(255, 255, 255, 0.7); }
html.light .bg-slate-800\/40 { background-color: rgba(255, 255, 255, 0.6); }
html.light .bg-slate-700,
html.light .hover\:bg-slate-700:hover { background-color: #e2e8f0; }
html.light .bg-slate-700\/50 { background-color: #f1f5f9; }
html.light .hover\:bg-slate-600:hover { background-color: #cbd5e1; }

html.light .border-slate-700,
html.light .border-slate-700\/80 { border-color: #cbd5e1; }
html.light .border-slate-700\/60,
html.light .border-slate-800,
html.light .border-slate-800\/80 { border-color: #e2e8f0; }

html.light .text-white,
html.light .text-slate-100,
html.light .hover\:text-white:hover { color: #0f172a; }
/* Match whole class names only, so variants like selection:bg-brand-500 on <body> don't count */
html.light .text-white:is([class^="bg-brand-"], [class*=" bg-brand-"], [class^="from-brand-"], [class*=" from-brand-"], .bg-emerald-600, .bg-rose-600),
html.light :is([class^="bg-brand-"], [class*=" bg-brand-"], [class^="from-brand-"], [class*=" from-brand-"], .bg-emerald-600, .bg-rose-600) .text-white { color: #ffffff; }
html.light .text-slate-300 { color: #334155; }
html.light .text-slate-400 { color: #64748b; }
html.light .text-emerald-400 { color: #059669; }

/* Markdown live preview (Tailwind's reset strips default styles) */
.md-preview { line-height: 1.6; }
.md-preview h1 { font-size: 1.75rem; font-weight: 800; margin: 0 0 0.75rem; }
.md-preview h2 { font-size: 1.4rem; font-weight: 700; margin: 1.25rem 0 0.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid rgba(148, 163, 184, 0.3); }
.md-preview h3 { font-size: 1.15rem; font-weight: 700; margin: 1rem 0 0.5rem; }
.md-preview h4, .md-preview h5, .md-preview h6 { font-weight: 700; margin: 0.9rem 0 0.4rem; }
.md-preview p { margin: 0 0 0.8rem; }
.md-preview ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 0.8rem; }
.md-preview ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 0.8rem; }
.md-preview li > input[type="checkbox"] { margin-right: 0.4rem; }
.md-preview a { color: #f43f5e; text-decoration: underline; }
.md-preview blockquote { border-left: 4px solid #f43f5e; padding: 0.2rem 1rem; margin: 0 0 0.8rem; opacity: 0.85; }
.md-preview code { font-family: ui-monospace, Consolas, monospace; font-size: 0.875em; background: rgba(148, 163, 184, 0.18); padding: 0.1rem 0.35rem; border-radius: 4px; }
.md-preview pre { background: rgba(148, 163, 184, 0.14); padding: 0.9rem 1rem; border-radius: 8px; overflow-x: auto; margin: 0 0 0.8rem; }
.md-preview pre code { background: none; padding: 0; }
.md-preview table { border-collapse: collapse; margin: 0 0 0.8rem; }
.md-preview th, .md-preview td { border: 1px solid rgba(148, 163, 184, 0.4); padding: 0.35rem 0.7rem; }
.md-preview th { font-weight: 700; background: rgba(148, 163, 184, 0.12); }
.md-preview hr { border: 0; border-top: 1px solid rgba(148, 163, 184, 0.35); margin: 1.2rem 0; }
.md-preview img { max-width: 100%; }

/* Regex tester match highlighting */
.rx-mark { color: inherit; background: rgba(244, 63, 94, 0.28); outline: 1px solid rgba(244, 63, 94, 0.6); border-radius: 3px; }
.rx-mark.alt { background: rgba(14, 165, 233, 0.28); outline-color: rgba(14, 165, 233, 0.6); }
.rx-empty { display: inline-block; width: 2px; height: 1.1em; margin: 0 -1px; background: #f43f5e; vertical-align: text-bottom; }

/* Diff checker */
.diff-table { border-collapse: collapse; table-layout: auto; }
.diff-table td { vertical-align: top; }
.diff-num { width: 1%; min-width: 2.75rem; padding: 0 0.6rem; text-align: right; user-select: none; opacity: 0.55; white-space: nowrap; border-right: 1px solid rgba(148, 163, 184, 0.2); }
.diff-sign { width: 1%; padding: 0 0.4rem; user-select: none; font-weight: 700; }
.diff-code { padding: 0 0.75rem; white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
.diff-table td.diff-code + td.diff-num { border-left: 1px solid rgba(148, 163, 184, 0.25); }
.diff-del { background: rgba(244, 63, 94, 0.13); }
.diff-add { background: rgba(16, 185, 129, 0.13); }
.diff-empty { background: rgba(148, 163, 184, 0.07); }
.diff-del-word { background: rgba(244, 63, 94, 0.42); border-radius: 2px; }
.diff-add-word { background: rgba(16, 185, 129, 0.42); border-radius: 2px; }
span.diff-del { color: #f43f5e; }
span.diff-add { color: #10b981; }

/* Word document rendering for Word to PDF (Tailwind's reset strips default styles) */
.docx-render {
  width: 680px;
  color: #111827;
  background: #ffffff;
  font-family: Calibri, Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.45;
}
.docx-render h1 { font-size: 20pt; font-weight: 700; margin: 0 0 10px; }
.docx-render h2 { font-size: 16pt; font-weight: 700; margin: 14px 0 8px; }
.docx-render h3, .docx-render h4, .docx-render h5, .docx-render h6 { font-size: 13pt; font-weight: 700; margin: 12px 0 6px; }
.docx-render p { margin: 0 0 8px; }
.docx-render ul { list-style: disc; padding-left: 24px; margin: 0 0 8px; }
.docx-render ol { list-style: decimal; padding-left: 24px; margin: 0 0 8px; }
.docx-render table { border-collapse: collapse; width: 100%; margin: 0 0 10px; }
.docx-render td, .docx-render th { border: 1px solid #9ca3af; padding: 4px 6px; vertical-align: top; }
.docx-render img { max-width: 100%; height: auto; }
.docx-render a { color: #1d4ed8; text-decoration: underline; }
.docx-render tr, .docx-render img { page-break-inside: avoid; }