/* ============================================================
   Venus WMS — Vinasse Management app styles
   Ported verbatim from the Claude Design prototype
   (Vinasse Management.dc.html <style> block) so the running app
   matches the mockup pixel-for-pixel.
   ============================================================ */

html, body { margin: 0; height: 100%; background: var(--surface-app); }
#root { height: 100%; }
#root-scroll { height: 100%; }

.vn-flowdot { animation: vnpulse 2.2s ease-in-out infinite; }
@keyframes vnpulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

.vn-flowfill { animation: vnflow 2.4s ease-in-out infinite alternate; }
@keyframes vnflow { from { opacity: .65 } to { opacity: 1 } }

.vn-nav:hover { background: var(--surface-hover) !important; }
.vn-row:hover { background: var(--surface-hover) !important; }

.vn-card-hover { transition: box-shadow .18s var(--ease-standard), border-color .18s var(--ease-standard); }
.vn-card-hover:hover { box-shadow: var(--shadow-md) !important; border-color: var(--border-default) !important; }

.leaflet-container { font-family: var(--font-sans); background: #EAF0EC; }
.leaflet-popup-content { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; }

.vn-chip:hover { border-color: var(--border-strong) !important; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: 999px;
  border: 2px solid var(--surface-app);
}