/* Dashboard Styles */
.dashboard-card {
    transition: all 0.3s ease;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.screen-item {
    transition: all 0.2s ease;
}

.screen-item:hover {
    background-color: #f8fafc;
}

.status-online {
    background-color: #dcfce7;
    color: #166534;
}

.status-offline {
    background-color: #fee2e2;
    color: #991b1b;
}

.status-warning {
    background-color: #fef3c7;
    color: #92400e;
}
/* Dark mode styles */
:root {
  --bg-color: #ffffff;
  --text-color: #374151;
  --card-bg: #ffffff;
  --border-color: #e5e7eb;
}

.dark {
  --bg-color: #1a1a1a;
  --text-color: #e5e7eb;
  --card-bg: #2d2d2d;
  --border-color: #3d3d3d;
}
/* Dark mode transition */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

dark-mode-toggle {
  display: block;
  margin-left: auto;
}
.dark body {
  background: var(--bg-color);
  color: var(--text-color);
}

.dark .dashboard-card,
.dark .screen-item,
.dark .bg-white {
  background: var(--card-bg);
  border-color: var(--border-color);
}

.dark .text-gray-800 {
  color: var(--text-color);
}

.dark .text-gray-600 {
  color: #a1a1aa;
}

.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

/* Animation for status changes */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
.updating {
    animation: pulse 1.5s infinite;
}

/* Responsive table */
@media (max-width: 768px) {
    .responsive-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}