:root { --primary: #3498db; --bg: #f4f7f6; --card: #ffffff; --text: #2c3e50; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 20px; }
nav { background: #2c3e50; padding: 1rem; border-radius: 8px; margin-bottom: 2rem; }
nav a { color: white; text-decoration: none; margin-right: 15px; font-weight: bold; }
nav a:hover { color: var(--primary); }
.card { background: var(--card); padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 2rem; border-left: 5px solid var(--primary); }
h1, h2, h3 { margin-top: 0; }
table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; }
th { background: #ecf0f1; padding: 12px; text-align: left; font-size: 0.85rem; text-transform: uppercase; color: #7f8c8d; }
td { padding: 15px; border-bottom: 1px solid #eee; }
.status-active { color: #27ae60; background: #eafaf1; padding: 4px 8px; border-radius: 4px; font-size: 0.8em; }
.status-suspended { color: #e74c3c; background: #fdedec; padding: 4px 8px; border-radius: 4px; font-size: 0.8em; }
.dot { height: 10px; width: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.online { background-color: #2ecc71; box-shadow: 0 0 8px #2ecc71; }
.offline { background-color: #95a5a6; }
.flash-success { color: green; background-color: lightgreen; padding: 10px; }
.flash-alert { color: yellow; background-color: lightcoral; padding: 10px; }
.flash-warning { color: black; background-color: yellow; list-style: none; padding: 0; }
.btn-icon {
    color: #4a5568; /* Subtle gray */
    font-size: 1.2rem;
    text-decoration: none;
    padding: 8px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    color: #3182ce; /* Blue on hover */
    transform: translateY(-1px); /* Slight lift effect */
}