/* ===== Brahm Task — theme (dark/light) + ripple + responsive polish ===== */
:root{ --bt-radius:.6rem; }
html{ scroll-behavior:smooth; }
body{ -webkit-tap-highlight-color:transparent; transition:background-color .25s,color .25s; }
*{ transition:background-color .2s ease, border-color .2s ease, color .15s ease; }

/* smooth card hover lift */
.shadow{ transition:box-shadow .2s, transform .2s; }
.shadow:hover{ box-shadow:0 8px 24px -8px rgba(0,0,0,.18); }

/* ---------- DARK THEME SKIN (applies on html.dark, covers all views) ---------- */
html.dark body{ background-color:#0f172a !important; color:#e2e8f0 !important; }
html.dark .bg-white{ background-color:#1e293b !important; }
html.dark .bg-slate-50{ background-color:#1e293b !important; }
html.dark .bg-slate-100{ background-color:#334155 !important; color:#e2e8f0 !important; }
html.dark .text-slate-800,html.dark .text-slate-700{ color:#e2e8f0 !important; }
html.dark .text-slate-600,html.dark .text-slate-500{ color:#cbd5e1 !important; }
html.dark .text-slate-400{ color:#94a3b8 !important; }
html.dark .border,html.dark .border-t,html.dark .border-b,html.dark .border-l,html.dark .border-r{ border-color:#334155 !important; }
html.dark .divide-y>*+*{ border-color:#334155 !important; }
html.dark .hover\:bg-slate-50:hover,html.dark .hover\:bg-slate-100:hover{ background-color:#334155 !important; }
html.dark input,html.dark select,html.dark textarea{ background-color:#0f172a !important; color:#e2e8f0 !important; border-color:#334155 !important; }
html.dark input::placeholder,html.dark textarea::placeholder{ color:#64748b !important; }
html.dark .shadow{ box-shadow:0 1px 3px rgba(0,0,0,.5) !important; }
html.dark .shadow:hover{ box-shadow:0 10px 28px -8px rgba(0,0,0,.7) !important; }
/* soft badges in dark */
html.dark .bg-emerald-100,html.dark .bg-emerald-50{ background-color:#064e3b !important; }
html.dark .bg-emerald-100.text-emerald-700,html.dark .text-emerald-700{ color:#6ee7b7 !important; }
html.dark .bg-blue-100{ background-color:#1e3a8a !important; } html.dark .text-blue-700{ color:#93c5fd !important; }
html.dark .bg-amber-50,html.dark .bg-amber-100{ background-color:#78350f !important; } html.dark .text-amber-700{ color:#fcd34d !important; }
html.dark .bg-orange-50{ background-color:#7c2d12 !important; } html.dark .text-orange-700,html.dark .text-orange-600{ color:#fdba74 !important; }
html.dark .bg-rose-50,html.dark .bg-rose-100{ background-color:#7f1d1d !important; } html.dark .text-rose-700,html.dark .text-rose-600{ color:#fca5a5 !important; }
html.dark .bg-slate-200{ background-color:#475569 !important; } html.dark .text-slate-600{ }
html.dark .bg-indigo-100{ background-color:#3730a3 !important; } html.dark .text-indigo-700,html.dark .text-indigo-600{ color:#a5b4fc !important; }
html.dark .bg-emerald-50.border-emerald-200{ border-color:#065f46 !important; }
/* progress track */
html.dark .bg-slate-200.rounded{ background-color:#475569 !important; }

/* ---------- Ripple ---------- */
.bt-ripple{ position:absolute; border-radius:50%; transform:scale(0); animation:bt-rip .6s linear; background:rgba(255,255,255,.45); pointer-events:none; z-index:5; }
.bt-ripple.dark-ink{ background:rgba(30,41,59,.25); }
@keyframes bt-rip{ to{ transform:scale(4); opacity:0; } }

/* tap feedback */
button:active,a:active{ transform:scale(.985); }

/* nicer scrollbars */
*::-webkit-scrollbar{ height:8px; width:8px; }
*::-webkit-scrollbar-thumb{ background:rgba(100,116,139,.45); border-radius:8px; }
html.dark *::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.35); }

/* fade-in pages */
main{ animation:bt-fade .35s ease; }
@keyframes bt-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* theme toggle floating (guest) */
.bt-theme-fab{ position:fixed; top:14px; right:14px; z-index:60; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:18px; background:rgba(255,255,255,.9);
  box-shadow:0 4px 14px rgba(0,0,0,.18); border:1px solid rgba(0,0,0,.05); cursor:pointer; }
html.dark .bt-theme-fab{ background:#1e293b; border-color:#334155; }

[x-cloak]{ display:none !important; }