* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: sans-serif; background: #f5f5f5; color: #333; }
.container { max-width: 1400px; margin: 0 auto; padding: 20px; }
header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 10px; margin-bottom: 20px; }
.header-stats { display: flex; gap: 30px; }
.stat-item { display: flex; flex-direction: column; }
.stat-value { font-size: 1.5em; font-weight: bold; }
.tabs { display: flex; gap: 10px; margin-bottom: 20px; }
.tab-btn { padding: 12px 24px; border: none; background: white; cursor: pointer; border-radius: 8px; }
.tab-btn.active { background: #667eea; color: white; }
.tab-content { display: none; background: white; padding: 30px; border-radius: 10px; }
.tab-content.active { display: block; }
.section-header { display: flex; justify-content: flex-start; align-items: center; gap: 20px; margin-bottom: 20px; }
.btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; }
.btn-primary { background: #667eea; color: white; }
.btn-danger { background: #e74c3c; color: white; }
.data-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.data-table th, .data-table td { padding: 12px; border-bottom: 1px solid #dee2e6; text-align: left; }
.status-badge { padding: 4px 12px; border-radius: 12px; font-size: 0.85em; }
.status-active { background: #d4edda; color: #155724; }
.status-inactive { background: #f8d7da; color: #721c24; }
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.modal-content { background: white; margin: 50px auto; padding: 30px; border-radius: 10px; max-width: 500px; }
.modal-content form { display: flex; flex-direction: column; gap: 15px; }
.modal-content label { display: flex; flex-direction: column; gap: 5px; }
.modal-content input, .modal-content select { padding: 10px; border: 1px solid #ddd; border-radius: 6px; }
.close { float: right; font-size: 28px; cursor: pointer; }
#tab-users .data-table { table-layout: fixed !important; width: 100% !important; }
#tab-users .data-table th:nth-child(1), #tab-users .data-table td:nth-child(1) { width: 45px !important; }
#tab-users .data-table th:nth-child(2), #tab-users .data-table td:nth-child(2) { width: 120px !important; }
#tab-users .data-table th:nth-child(3), #tab-users .data-table td:nth-child(3) { width: 100px !important; }
#tab-users .data-table th:nth-child(4), #tab-users .data-table td:nth-child(4) { width: auto !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
#tab-users .data-table th:nth-child(5), #tab-users .data-table td:nth-child(5) { width: 80px !important; }
#tab-users .data-table th:nth-child(6), #tab-users .data-table td:nth-child(6) { width: 95px !important; }
#tab-users .data-table th:nth-child(7), #tab-users .data-table td:nth-child(7) { width: 110px !important; }