.user-management .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .user-management .toolbar h2 { margin: 0; flex-shrink: 0; font-size: 1.5rem; font-weight: 600; color: #1e293b; } .users-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .users-table th, .users-table td { border-bottom: 1px solid #e2e8f0; padding: 1rem; text-align: left; } .users-table th { background: #f8fafc; font-weight: 600; color: #475569; } .users-table .action-btn { padding: 0.25rem; border-radius: 4px; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: transparent; font-size: 0.875rem; transition: all 0.3s ease; color: #64748b; } .users-table .action-btn:last-child { margin-right: 0; } .users-table .action-btn:hover { transform: translateY(-1px); background: #f1f5f9; border-radius: 4px; } .users-table .btn-danger { color: #ef4444; } .users-table .btn-danger:hover { background: #fef2f2; color: #dc2626; } .users-table .btn-warning { color: #f59e0b; } .users-table .btn-warning:hover { background: #fffbeb; color: #d97706; } .action-cell { white-space: nowrap; width: 80px; text-align: center; } .pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; } .pagination button { padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid #e2e8f0; background: white; cursor: pointer; transition: all 0.3s ease; } .pagination button:hover:not(:disabled) { background: #f8fafc; transform: translateY(-1px); } .pagination button:disabled { cursor: not-allowed; opacity: 0.5; } .pagination span { margin: 0 1rem; color: #64748b; } /* Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-content { background: white; padding: 2rem; border-radius: 12px; width: 90%; max-width: 500px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .modal-content h2 { margin-top: 0; margin-bottom: 1.5rem; color: #1e293b; font-size: 1.5rem; font-weight: 600; } .modal-content .form-group { margin-bottom: 1rem; } .modal-content .form-group label { display: block; margin-bottom: 0.5rem; color: #374151; font-weight: 500; } .modal-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; } .error-message { color: #ef4444; margin-bottom: 1rem; padding: 0.75rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; font-size: 0.9rem; } .info-note { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px; padding: 0.75rem; margin-bottom: 1rem; } .info-note p { margin: 0; color: #0369a1; font-size: 0.9rem; } /* Button styles for confirmations */ .btn-danger { background: #ef4444; color: white; border: none; } .btn-danger:hover { background: #dc2626; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); } .btn-warning { background: #f59e0b; color: white; border: none; } .btn-warning:hover { background: #d97706; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }