/* Custom on top of Tailwind CDN. Keep minimal. */
:root { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* Form fields: make borders visible on white backgrounds */
input, select, textarea { border: 1px solid #f0f0f0; }

/* Status badges */
.badge { display:inline-flex; align-items:center; gap:.25rem; padding:.125rem .5rem; border-radius:9999px; font-size:.75rem; font-weight:500; }
.badge-up      { background: rgb(220 252 231); color: rgb(22 101 52); }
.badge-down    { background: rgb(254 226 226); color: rgb(153 27 27); }
.badge-paused  { background: rgb(241 245 249); color: rgb(71 85 105); }
.badge-unknown { background: rgb(254 249 195); color: rgb(133 77 14); }
.dark .badge-up      { background: rgb(6 78 59); color: rgb(167 243 208); }
.dark .badge-down    { background: rgb(127 29 29); color: rgb(254 202 202); }
.dark .badge-paused  { background: rgb(30 41 59); color: rgb(203 213 225); }
.dark .badge-unknown { background: rgb(113 63 18); color: rgb(254 240 138); }

/* Sparkline */
.spark { width:100%; height:48px; }
.spark path { fill:none; stroke: rgb(99 102 241); stroke-width:1.5; }
.spark .axis { stroke: rgb(203 213 225); stroke-width:.5; }

/* Slide-over */
.slideover { position: fixed; top:0; right:0; bottom:0; width: min(28rem, 100%); transform: translateX(100%); transition: transform .2s ease; box-shadow: -8px 0 24px rgba(0,0,0,.12); z-index: 50; }
.slideover.open { transform: translateX(0); }
.slideover-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.4); opacity: 0; transition: opacity .2s ease; pointer-events: none; z-index: 40; }
.slideover-backdrop.open { opacity: 1; pointer-events: auto; }