/* Small custom styles on top of Tailwind (loaded from CDN; see README for a production build). */
[x-cloak] { display: none !important; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-indicator { opacity: 0; transition: opacity 150ms; }
.prose-notes h1, .prose-notes h2, .prose-notes h3 { font-weight: 600; margin: 1rem 0 .5rem; }
.prose-notes h1 { font-size: 1.5rem; } .prose-notes h2 { font-size: 1.25rem; } .prose-notes h3 { font-size: 1.1rem; }
.prose-notes ul { list-style: disc; padding-left: 1.5rem; } .prose-notes ol { list-style: decimal; padding-left: 1.5rem; }
.prose-notes code { background: #f1f5f9; padding: .1rem .3rem; border-radius: .25rem; font-size: .85em; }
.prose-notes pre { background: #0f172a; color: #e2e8f0; padding: .75rem 1rem; border-radius: .5rem; overflow-x: auto; margin: .5rem 0; }
.prose-notes pre code { background: transparent; padding: 0; }
.prose-notes blockquote { border-left: 3px solid #cbd5e1; padding-left: .75rem; color: #475569; }
.prose-notes a { color: #4f46e5; text-decoration: underline; }
.prose-notes table { border-collapse: collapse; } .prose-notes th, .prose-notes td { border: 1px solid #e2e8f0; padding: .25rem .5rem; }
.prose-notes p { margin: .5rem 0; }

/* ================= DARK MODE (toggled by class "dark" on <html>) ================= */
html.dark { color-scheme: dark; background: #0b1118; }
html.dark body { background: #0b1118; color: #dbe4ed; }

/* surfaces */
html.dark .bg-white { background-color: #111b26; }
html.dark .bg-slate-50 { background-color: #0b1118; }
html.dark .bg-slate-100 { background-color: #1a2635; }
html.dark .hover\:bg-slate-50:hover { background-color: #162231; }
html.dark .hover\:bg-slate-100:hover { background-color: #1a2635; }
html.dark .hover\:bg-slate-700:hover { background-color: #2a3a4d; }
html.dark .bg-slate-900 { background-color: #05080c; }

/* borders & dividers */
html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-300,
html.dark .border { border-color: #243244; }
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1c2a3a; }
html.dark .border-dashed { border-color: #2f4257; }

/* text */
html.dark .text-slate-900, html.dark .text-slate-800 { color: #eef3f8; }
html.dark .text-slate-700, html.dark .text-slate-600 { color: #c3cfdb; }
html.dark .text-slate-500 { color: #93a3b5; }
html.dark .text-slate-400 { color: #6f8197; }
html.dark .hover\:text-slate-900:hover { color: #ffffff; }
html.dark .hover\:text-indigo-700:hover { color: #a5b4fc; }
html.dark .group:hover .group-hover\:text-indigo-700 { color: #a5b4fc; }

/* form controls */
html.dark input, html.dark select, html.dark textarea {
  background-color: #0b1118; color: #dbe4ed; border-color: #2a3a4d;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #5f7186; }
html.dark input:focus, html.dark select:focus, html.dark textarea:focus {
  border-color: #818cf8; box-shadow: 0 0 0 2px rgba(129,140,248,.25);
}
html.dark input[type="file"]::file-selector-button { background: #1f2a5a; color: #c7d2fe; }

/* indigo accents */
html.dark .bg-indigo-50 { background-color: rgba(99,102,241,.18); }
html.dark .text-indigo-700, html.dark .text-indigo-600 { color: #a5b4fc; }
html.dark .bg-indigo-600 { background-color: #4f46e5; }
html.dark .text-white { color: #ffffff; }

/* status colours: soft tinted backgrounds + light text */
html.dark .bg-emerald-50, html.dark .bg-emerald-100 { background-color: rgba(16,185,129,.16); }
html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-800 { color: #6ee7b7; }
html.dark .border-emerald-200 { border-color: rgba(16,185,129,.35); }
html.dark .bg-amber-50, html.dark .bg-amber-100 { background-color: rgba(245,158,11,.16); }
html.dark .text-amber-700, html.dark .text-amber-800 { color: #fcd34d; }
html.dark .bg-red-50, html.dark .bg-red-100 { background-color: rgba(239,68,68,.16); }
html.dark .text-red-600, html.dark .text-red-700, html.dark .text-red-800 { color: #fca5a5; }
html.dark .border-red-200 { border-color: rgba(239,68,68,.4); }
html.dark .hover\:bg-red-50:hover { background-color: rgba(239,68,68,.16); }
html.dark .bg-sky-50, html.dark .bg-sky-100 { background-color: rgba(14,165,233,.16); }
html.dark .text-sky-600, html.dark .text-sky-700, html.dark .text-sky-800 { color: #7dd3fc; }
html.dark .border-sky-200 { border-color: rgba(14,165,233,.35); }

/* tables & misc */
html.dark thead.bg-slate-50, html.dark .bg-slate-50 thead { background-color: #162231; }
html.dark .shadow-sm, html.dark .shadow-md { box-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* notes preview (Markdown) */
html.dark .prose-notes code { background: #1a2635; color: #e2e8f0; }
html.dark .prose-notes pre { background: #05080c; }
html.dark .prose-notes blockquote { border-left-color: #3b4f66; color: #a6b4c4; }
html.dark .prose-notes a { color: #a5b4fc; }
html.dark .prose-notes th, html.dark .prose-notes td { border-color: #2a3a4d; }

/* smooth switch */
body, header, main, footer, input, textarea, select { transition: background-color .15s, color .15s, border-color .15s; }