/* VN30 Dashboard — custom overrides (Tailwind handles most styling) */

/* Hide uncompiled Vue templates until Vue mounts */
[v-cloak] { display: none; }

/* Prevent Chrome Android URL bar from resizing viewport and jumping fixed elements */
html, body { height: 100%; overflow: hidden; }
body { display: flex; flex-direction: column; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ── Light mode overrides ────────────────────────────────────────────────── */
/* The app uses hardcoded dark utility classes; remap them in light mode.    */
html:not(.dark) { color-scheme: light; }
html:not(.dark) ::-webkit-scrollbar-track { background: #e2e8f0; }
html:not(.dark) ::-webkit-scrollbar-thumb { background: #94a3b8; }

html:not(.dark) .bg-slate-950 { background-color: #f1f5f9 !important; }
html:not(.dark) .bg-slate-900 { background-color: #f8fafc !important; }
html:not(.dark) .bg-slate-800 { background-color: #f1f5f9 !important; }
html:not(.dark) .bg-slate-800\/90 { background-color: rgba(241,245,249,0.9) !important; }
html:not(.dark) .bg-slate-700 { background-color: #e2e8f0 !important; }
html:not(.dark) .bg-slate-600 { background-color: #cbd5e1 !important; }

html:not(.dark) .text-slate-100 { color: #0f172a !important; }
html:not(.dark) .text-slate-200 { color: #1e293b !important; }
html:not(.dark) .text-slate-300 { color: #334155 !important; }
html:not(.dark) .text-slate-400 { color: #475569 !important; }
html:not(.dark) .text-slate-500 { color: #64748b !important; }

html:not(.dark) .border-slate-700 { border-color: #cbd5e1 !important; }
html:not(.dark) .border-slate-600 { border-color: #d1d5db !important; }

html:not(.dark) input[type="date"],
html:not(.dark) input[type="text"],
html:not(.dark) input[type="password"],
html:not(.dark) input[type="number"],
html:not(.dark) select,
html:not(.dark) textarea {
  color-scheme: light;
}

/* Table hover rows */
tbody tr { transition: background 0.1s; }

/* Router link active state override */
.router-link-exact-active {
  color: #e2e8f0 !important;
  border-bottom: 2px solid #10b981;
}

/* Monospace numbers */
td, .mono { font-variant-numeric: tabular-nums; }

/* Smooth chart canvas */
canvas { display: block; }

/* Toast enter/leave transitions */
.toast-enter-active { transition: all 0.2s ease-out; }
.toast-leave-active { transition: all 0.3s ease-in; }
.toast-enter-from   { opacity: 0; transform: translateX(20px); }
.toast-leave-to     { opacity: 0; transform: translateX(20px); }

/* Hide scrollbar for horizontal tab rows */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Safe area inset for bottom tab bar (notched phones) */
.safe-area-pb { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Prevent 300ms tap delay on Android */
button, a, select, input[type="date"] { touch-action: manipulation; }

/* ── Chat markdown rendering ─────────────────────────────────────────────── */
.chat-md h1, .chat-md h2, .chat-md h3 { margin-top: 0.5em; font-weight: 600; }
.chat-md p { margin: 0.25em 0; }
.chat-md ul, .chat-md ol { padding-left: 1.5em; margin: 0.25em 0; }
.chat-md li { margin: 0.1em 0; }
.chat-md code { background: rgba(0,0,0,0.15); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.9em; }
.chat-md pre { background: rgba(0,0,0,0.1); padding: 0.5em; border-radius: 6px; overflow-x: auto; }
.chat-md strong { font-weight: 600; }
.chat-md a { color: #34d399; text-decoration: underline; }
html:not(.dark) .chat-md code { background: rgba(0,0,0,0.08); }
html:not(.dark) .chat-md pre { background: rgba(0,0,0,0.05); }