* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { background: #0f172a; color: #f8fafc; padding: 24px; }
header { margin-bottom: 24px; border-bottom: 1px solid #334155; padding-bottom: 16px; }
h1 { font-size: 24px; color: #38bdf8; }

.nav-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.tab-btn { background: #1e293b; color: #94a3b8; border: 1px solid #334155; padding: 10px 18px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.tab-btn.active { background: #0284c7; color: #ffffff; border-color: #0284c7; }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

.filter-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
select { background: #1e293b; color: #f8fafc; border: 1px solid #475569; padding: 8px 14px; border-radius: 6px; outline: none; cursor: pointer; }

.table-wrapper { overflow-x: auto; background: #1e293b; border-radius: 8px; border: 1px solid #334155; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
th { background: #0f172a; color: #94a3b8; padding: 12px 16px; font-weight: 600; text-transform: uppercase; font-size: 12px; border-bottom: 1px solid #334155; }
td { padding: 12px 16px; border-bottom: 1px solid #1e293b; color: #e2e8f0; }
tr:nth-child(even) { background: #182234; }
tr:hover { background: #233047; }

.badge { display: inline-block; padding: 3px 8px; border-radius: 9999px; font-size: 12px; font-weight: 600; }
.badge-active { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.badge-resigned { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.badge-warning { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }