/* Status badge colors */
[data-status="ONLINE"] .status-dot { background-color: #22c55e; }
[data-status="OFFLINE"] .status-dot { background-color: #6b7280; }
[data-status="ERROR"] .status-dot { background-color: #ef4444; }

[data-status="ONLINE"] { color: #22c55e; }
[data-status="OFFLINE"] { color: #6b7280; }
[data-status="ERROR"] { color: #ef4444; }

/* HTMX loading indicators */
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-indicator { display: none; }

/* Smooth transitions for HTMX swaps */
.htmx-swapping { opacity: 0; transition: opacity 200ms ease-out; }
.htmx-settling { opacity: 1; transition: opacity 200ms ease-in; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* Form focus states */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
}